mirror of
https://github.com/captbaritone/webamp.git
synced 2026-08-01 06:25:22 +00:00
Improve build process, deprecate embedded version
This commit is contained in:
Jordan Eldredge
parent
932a5a255f
commit
2dd030364c
10 changed files with 87 additions and 106 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -4,3 +4,5 @@ preview.png
|
|||
llama-2.91.mp3
|
||||
|
||||
node_modules
|
||||
|
||||
/bundle.js
|
||||
|
|
|
|||
35
README.md
35
README.md
|
|
@ -16,31 +16,20 @@ supported](http://caniuse.com/#feat=audio-api).
|
|||
- "Shade" mini-mode
|
||||
- "Doubled" mode, where the main window is twice as large: `Ctrl-D`
|
||||
|
||||
## Embed Winamp2-js in your web page
|
||||
|
||||
If you would like to embed Winamp2-js into your web page, simply paste this
|
||||
HTML snippet where you would like the player to appear:
|
||||
|
||||
<script async src="https://jordaneldredge.com/winamp2-js.js"></script>
|
||||
|
||||
You can set the default audio file by adding the following attribute to the
|
||||
`<script>` tag:
|
||||
|
||||
data-media="https://example.com/dj-llama.mp3"
|
||||
|
||||
*Note: The audio file must be hosted on the [same
|
||||
domain](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
|
||||
as your web page*
|
||||
|
||||
If Winamp2-js cannot run in a user's browser, it will fall back to a simple
|
||||
`<audio>` tag.
|
||||
|
||||
## Running locally vs. Production
|
||||
## Running locally
|
||||
|
||||
Running Winamp2-js locally is as simple as cloning this repository and opening
|
||||
`index.html` in your browser, but you will need to have a local web server to run it on.
|
||||
You can run `r.js -o build.js` in the `js/` directory to build the production version
|
||||
which reduces the number of http requests.
|
||||
`dev.html` in your browser.
|
||||
|
||||
## Production
|
||||
|
||||
In an attempt to reduce http requests, in production, I bundle the CSS and
|
||||
JavaScript files together using r.js. You can do it simply by running:
|
||||
|
||||
npm install
|
||||
npm run build
|
||||
|
||||
You can now use the production version at `index.html`.
|
||||
|
||||
## Reference
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
@import url("main-window.css");
|
||||
@import url("context-menu.css");
|
||||
|
||||
/* Rules used by all windows */
|
||||
#winamp2-js {
|
||||
height: 116px;
|
||||
|
|
|
|||
17
dev.html
Executable file
17
dev.html
Executable file
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Winamp2-js</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel='stylesheet' type='text/css' href='css/page.css' />
|
||||
</head>
|
||||
<body>
|
||||
<script data-main='js/main' src="rjs/require.js"></script>
|
||||
<div id='winamp2-js'></div>
|
||||
<div id='browser-compatibility'>
|
||||
<p>Your browser does not support the features we need</p>
|
||||
<p>Try using the most recent version of Chrome, Firefox or Safari</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<link rel="shortcut icon" sizes="16x16 32x32" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<script data-main='js/main' src="rjs/require.js"></script>
|
||||
<script src="bundle.js"></script>
|
||||
<div id='winamp2-js'></div>
|
||||
<div id='browser-compatibility'>
|
||||
<p>Your browser does not support the features we need</p>
|
||||
|
|
@ -30,6 +30,13 @@
|
|||
<input type='text' id='embed-input' value='<script async src="https://jordaneldredge.com/winamp2-js.js"></script>'>
|
||||
<label><a href='https://github.com/captbaritone/winamp2-js#embed-winamp2-js-in-your-web-page' id='embed-learn-more'>?</a></label>
|
||||
</p>
|
||||
<script>
|
||||
document.getElementById('embed-link').onclick = function() {
|
||||
document.getElementById('embed').classList.toggle('selected');
|
||||
document.getElementById('embed-input').select();
|
||||
return false;
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
|
|
|||
53
js/embed.js
53
js/embed.js
|
|
@ -1,53 +0,0 @@
|
|||
// Putting this inside require breaks, because it's called as a callback
|
||||
var scriptTag = document.currentScript;
|
||||
|
||||
require([
|
||||
'browser',
|
||||
'main-window-dom',
|
||||
'../rjs/css!../css/cleanslate.css',
|
||||
'../rjs/css!../css/winamp.css',
|
||||
'winamp',
|
||||
'context',
|
||||
'hotkeys'
|
||||
], function(
|
||||
Browser,
|
||||
mainWindowDom,
|
||||
cleanslateCss,
|
||||
winampCss,
|
||||
Winamp,
|
||||
Context,
|
||||
Hotkeys
|
||||
) {
|
||||
var node = document.createElement('div');
|
||||
|
||||
scriptTag.parentNode.insertBefore(node, scriptTag);
|
||||
var options = scriptTag.dataset;
|
||||
|
||||
var media = options.media ? options.media : 'https://cdn.rawgit.com/captbaritone/llama/master/llama-2.91.mp3';
|
||||
var skin = options.skin ? options.skin : 'https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91.wsz';
|
||||
var hotKeys = typeof options.hotkeys !== 'undefined';
|
||||
|
||||
if (Browser.isCompatible()) {
|
||||
node.appendChild(mainWindowDom);
|
||||
node.setAttribute('id', 'winamp2-js');
|
||||
|
||||
var winamp = Winamp.init({
|
||||
volume: 50,
|
||||
balance: 0,
|
||||
mediaFile: {
|
||||
url: media
|
||||
},
|
||||
skinUrl: skin
|
||||
});
|
||||
|
||||
if (hotKeys) {
|
||||
Hotkeys.init(winamp);
|
||||
}
|
||||
Context.init(winamp);
|
||||
} else {
|
||||
var audio = document.createElement('audio');
|
||||
audio.src = media;
|
||||
audio.setAttribute('controls', true);
|
||||
node.appendChild(audio);
|
||||
}
|
||||
});
|
||||
11
js/main.js
11
js/main.js
|
|
@ -2,22 +2,21 @@ require([
|
|||
'browser',
|
||||
'main-window-dom',
|
||||
'../rjs/css!../css/winamp.css',
|
||||
'../rjs/css!../css/main-window.css', // @import does not work with r.js
|
||||
'../rjs/css!../css/context-menu.css', // @import does not work with r.js
|
||||
'winamp',
|
||||
'context',
|
||||
'hotkeys'
|
||||
], function(
|
||||
Browser,
|
||||
mainWindowDom,
|
||||
pageCss,
|
||||
winampCss,
|
||||
mainWindowCss,
|
||||
contextMenuCss,
|
||||
Winamp,
|
||||
Context,
|
||||
Hotkeys
|
||||
) {
|
||||
document.getElementById('embed-link').onclick = function() {
|
||||
document.getElementById('embed').classList.toggle('selected');
|
||||
document.getElementById('embed-input').select();
|
||||
return false;
|
||||
};
|
||||
if (Browser.isCompatible()) {
|
||||
var mainWindowElement = document.createElement('div');
|
||||
mainWindowElement.appendChild(mainWindowDom);
|
||||
|
|
|
|||
35
package.json
Normal file
35
package.json
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "winamp2-js",
|
||||
"version": "1.0.0",
|
||||
"description": "Winamp 2 implemented in HTML5 and JavaScript",
|
||||
"main": "index.js",
|
||||
"directories": {
|
||||
"test": "tests"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "qunit-cli test/*.js && npm run lint",
|
||||
"lint": "eslint js/*.js",
|
||||
"build": "r.js -o rjs/bundle.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/captbaritone/winamp2-js.git"
|
||||
},
|
||||
"keywords": [
|
||||
"Winamp",
|
||||
"HTML5",
|
||||
"audio",
|
||||
"web-auido-api"
|
||||
],
|
||||
"author": "Jordan Eldredge <jordan@jordaneldredge.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/captbaritone/winamp2-js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/captbaritone/winamp2-js#readme",
|
||||
"devDependencies": {
|
||||
"qunit-cli": "~0.1.4",
|
||||
"eslint": "1.*"
|
||||
}
|
||||
|
||||
}
|
||||
20
rjs/build.js
20
rjs/build.js
|
|
@ -1,20 +0,0 @@
|
|||
({
|
||||
appDir: "../",
|
||||
baseUrl: "js/",
|
||||
wrap: true,
|
||||
dir: "../../winamp2-js-prod",
|
||||
optimizeCss: "standard",
|
||||
removeCombined: true,
|
||||
modules: [
|
||||
{ name: 'main' },
|
||||
{
|
||||
name: '../winamp2-js',
|
||||
create: true,
|
||||
include: [
|
||||
'../rjs/almond',
|
||||
'embed'
|
||||
],
|
||||
exclude: ['../rjs/normalize']
|
||||
}
|
||||
]
|
||||
})
|
||||
8
rjs/bundle.js
Normal file
8
rjs/bundle.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
({
|
||||
baseUrl: '../js/',
|
||||
name: '../rjs/almond',
|
||||
include: ['main'],
|
||||
out: '../bundle.js',
|
||||
wrap: true,
|
||||
exclude: ['../rjs/normalize']
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue