Start rename transition

This commit is contained in:
Jordan Eldredge 2018-04-13 06:51:09 -07:00
parent 64c7addd2a
commit 004ca30247
25 changed files with 156 additions and 6676 deletions

View file

@ -1,6 +1,6 @@
## (next version)
* Deprecated: The misspelled `Winamp` construction option `avaliableSkins` has been deprecated in favor of `availableSkins`. `avaliableSkins` will continue to work, but will log a deprecation warning. [#533](https://github.com/captbaritone/winamp2-js/pull/533) by [@remigallego](https://github.com/remigallego)
* Deprecated: The misspelled `Winamp` construction option `avaliableSkins` has been deprecated in favor of `availableSkins`. `avaliableSkins` will continue to work, but will log a deprecation warning. [#533](https://github.com/captbaritone/webamp/pull/533) by [@remigallego](https://github.com/remigallego)
* Added: `winamp.onClose()`.
* Added: `winamp.onMinimize()`.

View file

@ -1,6 +1,6 @@
[![Travis](https://img.shields.io/travis/captbaritone/winamp2-js.svg)]() [![Codecov](https://img.shields.io/codecov/c/github/captbaritone/winamp2-js.svg)]() [![Discord](https://img.shields.io/discord/434058775012311061.svg)](https://discord.gg/fBTDMqR)
[![Travis](https://img.shields.io/travis/captbaritone/webamp.svg)]() [![Codecov](https://img.shields.io/codecov/c/github/captbaritone/webamp.svg)]() [![Discord](https://img.shields.io/discord/434058775012311061.svg)](https://discord.gg/fBTDMqR)
# Winamp2-js
# Webamp
A reimplementation of Winamp 2.9 in HTML5 and JavaScript.
@ -8,7 +8,7 @@ A reimplementation of Winamp 2.9 in HTML5 and JavaScript.
## [Give it a try!](https://webamp.org)
[![Screenshot of Winamp2-js](./images/preview.png)](https://webamp.org)
[![Screenshot of Webamp](./images/preview.png)](https://webamp.org)
Works in modern versions of Edge, Firefox, Safari and Chrome. IE is [not
supported](http://caniuse.com/#feat=audio-api).
@ -17,9 +17,9 @@ supported](http://caniuse.com/#feat=audio-api).
Check out this Twitter thread for an illustrated list of features: https://twitter.com/captbaritone/status/961274714013319168
## Use Winamp2-js in your own project
## Use Webamp in your own project
I've tried to make it possible to include Winamp2-js in your own project.
I've tried to make it possible to include Webamp in your own project.
See the [usage documentation](./docs/usage.md) for more information.

View file

@ -51,7 +51,7 @@ module.exports = {
output: {
path: path.resolve(__dirname, "../built"),
filename: "winamp.[name].js",
library: "winamp2js",
library: "Webamp",
libraryTarget: "umd"
}
};

View file

@ -59,7 +59,7 @@ body {
animation-delay: 0.1s;
}
#appwinamp2-js #loading .ellipsis-anim span:nth-child(3) {
#app #loading .ellipsis-anim span:nth-child(3) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}

View file

@ -9,7 +9,7 @@ This repository contains both an NPM module, and a demo page, found at <https://
## Redux
Within the core library, state is managed by [Redux]. In fact, Redux's own docs mention Winamp2-js in the [Apps and Examples](https://redux.js.org/introduction/learning-resources#apps-and-examples) section of their docs!
Within the core library, state is managed by [Redux]. In fact, Redux's own docs mention Webamp in the [Apps and Examples](https://redux.js.org/introduction/learning-resources#apps-and-examples) section of their docs!
Our reducers, and the states they control, can be found in the [reducers](../js/reducers/) directory.
@ -43,7 +43,7 @@ The parsing of skin files is handed in [skinParser.js](../js/skinParser.js). Ren
## CSS
CSS style sheets are imported by the components which use them. Each rule is individually prefixed with the id `#winamp2-js` to prevent our style rules from "leaking" out onto other potential elements. For example, [98.js.org], includes `winamp2-js` on a page along with many other elements, and we want to be sure our rules for `.selected` elements do not apply to any elements outside of `winamp2-js`.
CSS style sheets are imported by the components which use them. Each rule is individually prefixed with the id `#winamp2-js` to prevent our style rules from "leaking" out onto other potential elements. For example, [98.js.org], includes Webamp on a page along with many other elements, and we want to be sure our rules for `.selected` elements do not apply to any elements outside of `#winamp2-js`.
The nature of Winamp skins is such that most elements are absolutely positioned, and have an explicit size. There are a few down sides to our current approach:

View file

@ -1,32 +1,32 @@
# Usage
Here's how to use Winamp-js in your own project. If you get stuck, or need help, please either file an issue, or reach out on [Gitter](https://gitter.im/winamp2-js/Lobby).
Here's how to use Webamp in your own project. If you get stuck, or need help, please either file an issue, or reach out on [Discord](https://discord.gg/fBTDMqR).
## Examples
If you would like to look as some examples check out the [examples directory](../examples/) were you will find:
* [Minimal](../examples/minimal/) - An example that just uses a `<script>` tag that points to a CDN. No install required.
* [Webpack](../examples/webpack/) - An example that installs Winamp2-js via NPM, and bundles it into an applicaiton using Webpack.
* [Webpack](../examples/webpack/) - An example that installs Webamp via NPM, and bundles it into an applicaiton using Webpack.
Each example has a README which explains it in more detail.
## Install
```
npm install --save winamp2-js
npm install --save webamp
```
Or, you can include it via a script tag:
```html
<!-- You can use this URL, or download it and check it into your own project -->
<script src="https://unpkg.com/winamp2-js@0.0.6/built/winamp.bundle.min.js"></script>
<script src="https://unpkg.com/webamp@0.0.6/built/winamp.bundle.min.js"></script>
```
## Create a container
Create a DOM element somewhere in your HTML document. This will eventually contain Winamp2-js.
Create a DOM element somewhere in your HTML document. This will eventually contain Webamp
```html
<div id='winamp-container'></div>
@ -35,33 +35,33 @@ Create a DOM element somewhere in your HTML document. This will eventually conta
## Initialize the JavaScript
```JavaScript
import Winamp from 'winamp2-js';
import Webamp from 'webamp';
// Or, if you installed via a script tag, `Winamp` is available on the global `window`:
// const Winamp = window.winamp2js;
// const Winamp = window.Webamp;
// Check if Winamp is supported in this browser
if(!Winamp.browserIsSupported()) {
alert("Oh no! Winamp does not work!")
if(!Webamp.browserIsSupported()) {
alert("Oh no! Webamp does not work!")
throw new Error("What's the point of anything?")
}
const winamp = new Winamp({
const webamp = new Webamp({
initialTracks: [{
metaData: {
artist: "DJ Mike Llama",
title: "Llama Whippin' Intro",
},
// Can be downloaded from: https://github.com/captbaritone/winamp2-js/raw/master/mp3/llama-2.91.mp3
// Can be downloaded from: https://github.com/captbaritone/webamp/raw/master/mp3/llama-2.91.mp3
url: "path/to/mp3/llama-2.91.mp3"
}],
initialSkin: {
// Can be downloaded from https://github.com/captbaritone/winamp2-js/raw/master/skins/base-2.91.wsz
// Can be downloaded from https://github.com/captbaritone/webamp/raw/master/skins/base-2.91.wsz
url: "path/to/skins/base-2.91.wsz"
},
});
// Render after the skin has loaded.
winamp.renderWhenReady(document.getElementById('winamp-container'));
webamp.renderWhenReady(document.getElementById('winamp-container'));
```
## API
@ -98,7 +98,7 @@ The `Winamp` class has the following _static_ methods:
### `browserIsSupported()`
Returns a true if the current browser supports the features that Winamp2-js depends upon. It is recomended to check this before you attempt to instantiate an instance of `Winamp`.
Returns a true if the current browser supports the features that Webamp depends upon. It is recomended to check this before you attempt to instantiate an instance of `Winamp`.
```JavaScript
if(Winamp.browserIsSupported()) {
@ -184,7 +184,7 @@ winamp.setTracksToPlay([
### `renderWhenReady(domNode)`
Winamp2-js will wait until it has fetch the skin and fully parsed it, and then render itself into the given container. A promise is returned which will resolve after the render is complete.
Webamp will wait until it has fetch the skin and fully parsed it, and then render itself into the given container. A promise is returned which will resolve after the render is complete.
```JavaScript
const container = document.getElementById('winamp-container');
@ -195,7 +195,7 @@ winamp.renderWhenReady(container).then(() => {
### `onClose(callback)`
A callback which will be called when Winamp2-js is closed. Returns an "unsubscribe" function.
A callback which will be called when Webamp is closed. Returns an "unsubscribe" function.
```JavaScript
const unsubscribe = winamp.onClose(() => {
@ -208,7 +208,7 @@ unsubscribe();
### `onMinimize(callback)`
A callback which will be called when Winamp2-js is minimized. Returns an "unsubscribe" function.
A callback which will be called when Webamp is minimized. Returns an "unsubscribe" function.
```JavaScript
const unsubscribe = winamp.onClose(() => {
@ -222,8 +222,8 @@ unsubscribe();
## Notes
* Internet Explorer is not supported.
* Winamp2-js injects CSS into the page. The CSS is namespaced (every CSS selector is prefixed with `#winamp2-js`), so it should not interfere with anything on the host page.
* Winamp2-js' HTML contains somewhat generic IDs and class names. If you have CSS on your page that is not namespaced, it may accidently be applied to Winamp2-js. If this happens please reach out. I may be able to resolve it.
* Webamp injects CSS into the page. The CSS is namespaced (every CSS selector is prefixed with `#winamp2-js`), so it should not interfere with anything on the host page.
* Webamp HTML contains somewhat generic IDs and class names. If you have CSS on your page that is not namespaced, it may accidently be applied to Webamp. If this happens please reach out. I may be able to resolve it.
* Skin and audio URLs are subject to [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). Please ensure they are either served from the same domain, or that the other domain is served with the correct headers.
* Please reach out to me. I'd love to help you set it up, and understand how it's being used. I plan to expand this API as I learn how people want to use it.

View file

@ -1,13 +1,13 @@
# Minimal Example
This example fetches the Winamp2-js bundle from a free CDN, and fetches the audio file and skin from a free CDN as well.
This example fetches the Webamp bundle from a free CDN, and fetches the audio file and skin from a free CDN as well.
You should be able to open this local html file in your browser and see Winamp2-js working.
You should be able to open this local html file in your browser and see Webamp working.
```
$ git clone git@github.com:captbaritone/winamp2-js.git
$ cd winamp2-js
$ git clone git@github.com:captbaritone/webamp.git
$ cd webamp
$ open examples/minimal/index.html
```
Or just navigate to <https://cdn.rawgit.com/captbaritone/winamp2-js/master/examples/minimal/index.html>
Or just navigate to <https://cdn.rawgit.com/captbaritone/webamp/master/examples/minimal/index.html>

View file

@ -7,19 +7,19 @@
<body>
<div id='app'></div>
<script src="https://unpkg.com/winamp2-js@0.0.6/built/winamp.bundle.min.js"></script>
<script src="https://unpkg.com/webamp@0.0.6/built/winamp.bundle.min.js"></script>
<script>
const Winamp = window.winamp2js;
new Winamp({
const Winamp = window.Webamp;
new Webamp({
initialTracks: [{
metaData: {
artist: "DJ Mike Llama",
title: "Llama Whippin' Intro"
},
url: "https://cdn.rawgit.com/captbaritone/winamp2-js/43434d82/mp3/llama-2.91.mp3"
url: "https://cdn.rawgit.com/captbaritone/webamp/43434d82/mp3/llama-2.91.mp3"
}],
initialSkin: {
url: "https://cdn.rawgit.com/captbaritone/winamp2-js/43434d82/skins/base-2.91.wsz"
url: "https://cdn.rawgit.com/captbaritone/webamp/43434d82/skins/base-2.91.wsz"
},
}).renderWhenReady(document.getElementById('app'));
</script>

View file

@ -1,15 +1,15 @@
# Minimal Example
This example includes Winamp2-js in a Webpack bundle. The audio file and skin are fetched from a free CDN at run time.
This example includes Webamp in a Webpack bundle. The audio file and skin are fetched from a free CDN at run time.
**Note:** Currently Winamp2-js is published to NPM as a single bundle which includes all of its dependencies. This means that no matter what you do, Winamp2-js is going to bring along it's own React, Redux, JSZip, etc. If you have a use case where you would like Winamp2-js to share some or all of these dependencies with your own application, please file an issue and I can look into it.
**Note:** Currently Webamp is published to NPM as a single bundle which includes all of its dependencies. This means that no matter what you do, Webamp is going to bring along it's own React, Redux, JSZip, etc. If you have a use case where you would like Webamp to share some or all of these dependencies with your own application, please file an issue and I can look into it.
To try it out:
```
$ git clone git@github.com:captbaritone/winamp2-js.git
$ cd winamp2-js/examples/webpack/
$ git clone git@github.com:captbaritone/webamp.git
$ cd webamp/examples/webpack/
$ npm install
$ npm run build
$ open index.html
```
```

View file

@ -1,6 +1,6 @@
import Winamp from "winamp2-js"; // eslint-disable-line import/no-unresolved
import Webamp from "webamp"; // eslint-disable-line import/no-unresolved
new Winamp({
new Webamp({
initialTracks: [
{
metaData: {
@ -8,11 +8,11 @@ new Winamp({
title: "Llama Whippin' Intro"
},
url:
"https://cdn.rawgit.com/captbaritone/winamp2-js/43434d82/mp3/llama-2.91.mp3"
"https://cdn.rawgit.com/captbaritone/webamp/43434d82/mp3/llama-2.91.mp3"
}
],
initialSkin: {
url:
"https://cdn.rawgit.com/captbaritone/winamp2-js/43434d82/skins/base-2.91.wsz"
"https://cdn.rawgit.com/captbaritone/webamp/43434d82/skins/base-2.91.wsz"
}
}).renderWhenReady(document.getElementById("app"));

File diff suppressed because it is too large Load diff

View file

@ -1,7 +1,7 @@
{
"name": "winamp2-js-webpack-example",
"name": "webamp-webpack-example",
"version": "0.0.0",
"description": "An example of using Winamp2-js within a Webpack bundle",
"description": "An example of using Webamp within a Webpack bundle",
"main": "index.js",
"scripts": {
"build": "webpack index.js bundle.js"
@ -10,6 +10,6 @@
"license": "ISC",
"dependencies": {
"webpack-cli": "^2.0.13",
"winamp2-js": "0.0.6"
"webamp": "0.0.6"
}
}

View file

@ -2,21 +2,21 @@
## Setup
Clone the Winamp2-js repo:
Clone the Webamp repo:
```
git clone git@github.com:captbaritone/winamp2-js.git
git clone git@github.com:captbaritone/webamp.git
```
Start Winamp2-js in dev mode:
Start Webamp in dev mode:
```
cd winamp2-js
cd webamp
yarn install
npm start
```
Winamp2-js should now be running on your local port 8080.
Webamp should now be running on your local port 8080.
Now, in a separate terminal:

View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Winamp2 Skin Explorer</title>
<title>Webamp Skin Explorer</title>
<meta charset="utf-8" />
<link rel="shortcut icon" sizes="16x16 32x32" href="./images/favicon.ico">
</head>

View file

@ -2,11 +2,11 @@
<html>
<head>
<title>Winamp2-js</title>
<title>Webamp</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Winamp 2.9 reimplemented in HTML5 and JavaScript" />
<meta property="og:title" content="Winamp2-js &bull; Winamp in your browser" />
<meta property="og:title" content="Webamp &bull; Winamp in your browser" />
<meta property="og:description" content="Winamp 2.9 reimplemented in HTML5 and JavaScript" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://webamp.org" />
@ -65,8 +65,8 @@
<p>Try using the most recent version of Chrome, Firefox, Safari or Edge.</p>
</div>
<p class='about'>
<a href='mailto:jordan@jordaneldredge.com?subject=Winamp2-js%20Feedback'>Feedback</a> |
<a href='https://github.com/captbaritone/winamp2-js'>GitHub</a>
<a href='mailto:jordan@jordaneldredge.com?subject=Webamp%20Feedback'>Feedback</a> |
<a href='https://github.com/captbaritone/webamp'>GitHub</a>
</p>
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="7py29249dpeddu8"></script>
<!-- Scripts get injected by html-webpack-plugin -->

View file

@ -18,9 +18,9 @@ const MainContextMenu = props => (
handle={<ClickedDiv id="option" title="Winamp Menu" />}
>
<LinkNode
href="https://github.com/captbaritone/winamp2-js"
href="https://github.com/captbaritone/webamp"
target="_blank"
label="Winamp2-js"
label="Webamp"
/>
<Hr />
<Parent label="Play">

View file

@ -382,7 +382,7 @@ exports[`MainWindow renders to snapshot 1`] = `
/>
</div>
<a
href="https://github.com/captbaritone/winamp2-js"
href="https://github.com/captbaritone/webamp"
id="about"
target="blank"
title="About"

View file

@ -128,7 +128,7 @@ export class MainWindow extends React.Component {
<a
id="about"
target="blank"
href="https://github.com/captbaritone/winamp2-js"
href="https://github.com/captbaritone/webamp"
title="About"
/>
</DropTarget>

View file

@ -16,10 +16,7 @@ const DIR_SUPPORT =
const AddMenu = ({ nextIndex, addFilesAtIndex, addDirAtIndex }) => (
<PlaylistMenu id="playlist-add-menu">
<div
className="add-url"
onClick={() => alert("Not supported in Winamp2-js")}
/>
<div className="add-url" onClick={() => alert("Not supported in Webamp")} />
<div className="add-dir" onClick={() => addDirAtIndex(nextIndex)} />
<div className="add-file" onClick={() => addFilesAtIndex(nextIndex)} />
</PlaylistMenu>

View file

@ -10,11 +10,11 @@ const ListMenu = props => (
<div className="new-list" onClick={props.removeAllTracks} />
<div
className="save-list"
onClick={() => alert("Not supported in Winamp2-js")}
onClick={() => alert("Not supported in Webamp")}
/>
<div
className="load-list"
onClick={() => alert("Not supported in Winamp2-js")}
onClick={() => alert("Not supported in Webamp")}
/>
</PlaylistMenu>
);

View file

@ -44,7 +44,7 @@ const MiscMenu = () => (
</div>
<div
className="file-info"
onClick={() => alert("Not supported in Winamp2-js")}
onClick={() => alert("Not supported in Webamp")}
/>
<div className="misc-options" onClick={e => e.stopPropagation()}>

View file

@ -13,7 +13,7 @@ const RemoveMenu = props => (
<PlaylistMenu id="playlist-remove-menu">
<div
className="remove-misc"
onClick={() => alert("Not supported in Winamp2-js")}
onClick={() => alert("Not supported in Webamp")}
/>
<div className="remove-all" onClick={props.removeAll} />
<div className="crop" onClick={props.crop} />

View file

@ -27,7 +27,7 @@ export const initialTracks = config.initialTracks || [
// This seems to include the `accept-ranges` header, which GitHub Pages does not, and
// Safari on iOS requires.
url:
"https://raw.githubusercontent.com/captbaritone/winamp2-js/master/mp3/llama-2.91.mp3",
"https://raw.githubusercontent.com/captbaritone/webamp/master/mp3/llama-2.91.mp3",
duration: 5.322286
},
{

View file

@ -76,7 +76,7 @@ const ravenMiddleware = createMiddleware(Raven, {
})
});
// Don't prompt user to install Winamp2-js. It's probably not
// Don't prompt user to install Webamp. It's probably not
// what they want.
window.addEventListener("beforeinstallprompt", e => {
// TODO: we could add this as a context menu item, or something.

View file

@ -1,5 +1,5 @@
{
"name": "winamp2-js",
"name": "webamp",
"version": "0.0.6",
"description": "Winamp 2 implemented in HTML5 and JavaScript",
"main": "built/winamp.bundle.js",
@ -25,7 +25,7 @@
},
"repository": {
"type": "git",
"url": "git+https://github.com/captbaritone/winamp2-js.git"
"url": "git+https://github.com/captbaritone/webamp.git"
},
"keywords": [
"Winamp",
@ -36,9 +36,9 @@
"author": "Jordan Eldredge <jordan@jordaneldredge.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/captbaritone/winamp2-js/issues"
"url": "https://github.com/captbaritone/webamp/issues"
},
"homepage": "https://github.com/captbaritone/winamp2-js#readme",
"homepage": "https://github.com/captbaritone/webamp/",
"devDependencies": {
"babel-cli": "^6.14.0",
"babel-core": "^6.21.0",