mirror of
https://github.com/captbaritone/webamp.git
synced 2026-08-03 15:34:25 +00:00
Redo loading and config
This commit is contained in:
Jordan Eldredge
parent
27645c35e1
commit
d2ba544136
8 changed files with 114 additions and 40 deletions
|
|
@ -24,15 +24,11 @@
|
|||
background-color: #FFFFFF;
|
||||
border: 2px solid #dddddd;
|
||||
}
|
||||
/* Hide everything while we are loading */
|
||||
#winamp2-js #main-window.loading * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#winamp2-js #loading {
|
||||
display: none;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-size: 40px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
|
|
@ -42,9 +38,49 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
/* Only show loading div while we are loading */
|
||||
#winamp2-js #main-window.loading #loading {
|
||||
display: block;
|
||||
#winamp2-js #loading .ellipsis-anim span {
|
||||
opacity: 0;
|
||||
-webkit-animation: ellipsis-dot 1s infinite;
|
||||
animation: ellipsis-dot 1s infinite;
|
||||
}
|
||||
|
||||
#winamp2-js #loading .ellipsis-anim span:nth-child(1) {
|
||||
-webkit-animation-delay: 0.0s;
|
||||
animation-delay: 0.0s;
|
||||
}
|
||||
|
||||
#winamp2-js #loading .ellipsis-anim span:nth-child(2) {
|
||||
-webkit-animation-delay: 0.1s;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
#winamp2-js #loading .ellipsis-anim span:nth-child(3) {
|
||||
-webkit-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes ellipsis-dot {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ellipsis-dot {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#winamp2-js #main-window.closed {
|
||||
|
|
|
|||
31
js/components/App.js
Normal file
31
js/components/App.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import WindowManager from "./WindowManager";
|
||||
import MainWindow from "./MainWindow";
|
||||
import PlaylistWindow from "./PlaylistWindow";
|
||||
import EqualizerWindow from "./EqualizerWindow";
|
||||
import Skin from "./Skin";
|
||||
import { equalizerEnabled, playlistEnabled } from "../config";
|
||||
|
||||
const App = ({ winamp, loading }) =>
|
||||
loading
|
||||
? <div id="loading">
|
||||
Loading<span className="ellipsis-anim">
|
||||
<span>.</span><span>.</span><span>.</span>
|
||||
</span>
|
||||
</div>
|
||||
: <div id="loaded">
|
||||
<Skin>
|
||||
{/* This is not technically kosher, since <style> tags should be in
|
||||
the <head>, but browsers don't really care... */}
|
||||
</Skin>
|
||||
<WindowManager>
|
||||
<MainWindow fileInput={winamp.fileInput} mediaPlayer={winamp.media} />
|
||||
{equalizerEnabled && <EqualizerWindow fileInput={winamp.fileInput} />}
|
||||
{playlistEnabled && <PlaylistWindow />}
|
||||
</WindowManager>
|
||||
</div>;
|
||||
|
||||
const mapStateToProps = state => ({ loading: state.display.loading });
|
||||
|
||||
export default connect(mapStateToProps)(App);
|
||||
|
|
@ -89,7 +89,6 @@ export class MainWindow extends React.Component {
|
|||
onDragOver={this.supress}
|
||||
onDrop={this.handleDrop}
|
||||
>
|
||||
<div id="loading">Loading...</div>
|
||||
<div id="title-bar" className="selected title-bard draggable">
|
||||
<div id="option" onClick={this.props.toggleMenu}>
|
||||
<MainContextMenu fileInput={this.props.fileInput} />
|
||||
|
|
|
|||
22
js/config.js
22
js/config.js
|
|
@ -1,6 +1,22 @@
|
|||
import { cdnUrl } from "../package.json";
|
||||
|
||||
const { hash } = window.location;
|
||||
let config = {};
|
||||
if (hash) {
|
||||
try {
|
||||
config = JSON.parse(hash.slice(1));
|
||||
} catch (e) {
|
||||
console.error("Failed to decode config from hash: ", e);
|
||||
}
|
||||
}
|
||||
|
||||
const assetBase = process.env.NODE_ENV === "production" ? cdnUrl : "";
|
||||
// Turn on the incomplete playlist window
|
||||
export const playlistEnabled = hash.includes("playlist");
|
||||
export const skinUrl = config.skinUrl || `${assetBase}skins/base-2.91.wsz`;
|
||||
export const audioUrl = config.audioUrl || `${assetBase}mp3/llama-2.91.mp3`;
|
||||
export const playlistEnabled = config.playlist || false;
|
||||
// Turn on the incomplete equalizer window
|
||||
export const equalizerEnabled = hash.includes("equalizer");
|
||||
export const noMarquee = hash.includes("!marquee");
|
||||
export const equalizerEnabled = config.equalizer || false;
|
||||
export const noMarquee = config.noMarquee || false;
|
||||
export const hideAbout = config.hideAbout || false;
|
||||
export const initialState = config.initialState || undefined;
|
||||
|
|
|
|||
34
js/index.js
34
js/index.js
|
|
@ -1,53 +1,39 @@
|
|||
import "babel-polyfill";
|
||||
import { cdnUrl } from "../package.json";
|
||||
import React from "react";
|
||||
import { render } from "react-dom";
|
||||
import { Provider } from "react-redux";
|
||||
|
||||
import getStore from "./store";
|
||||
import WindowManager from "./components/WindowManager";
|
||||
import App from "./components/App";
|
||||
import Browser from "./browser";
|
||||
import MainWindow from "./components/MainWindow";
|
||||
import PlaylistWindow from "./components/PlaylistWindow";
|
||||
import EqualizerWindow from "./components/EqualizerWindow";
|
||||
import Winamp from "./winamp";
|
||||
import Hotkeys from "./hotkeys";
|
||||
import Skin from "./components/Skin";
|
||||
import { equalizerEnabled, playlistEnabled } from "./config";
|
||||
import { skinUrl, audioUrl, hideAbout, initialState } from "./config";
|
||||
|
||||
if (new Browser(window).isCompatible) {
|
||||
if (hideAbout) {
|
||||
document.getElementsByClassName("about")[0].style.visibility = "hidden";
|
||||
}
|
||||
const winamp = Winamp;
|
||||
|
||||
const store = getStore(winamp);
|
||||
const store = getStore(winamp, initialState);
|
||||
window.store = store;
|
||||
|
||||
render(
|
||||
<Provider store={store}>
|
||||
<div>
|
||||
<Skin>
|
||||
{/* This is not technically kosher, since <style> tags should be in
|
||||
the <head>, but browsers don't really care... */}
|
||||
</Skin>
|
||||
<WindowManager>
|
||||
<MainWindow fileInput={winamp.fileInput} mediaPlayer={winamp.media} />
|
||||
{playlistEnabled && <PlaylistWindow />}
|
||||
{equalizerEnabled && <EqualizerWindow fileInput={winamp.fileInput} />}
|
||||
</WindowManager>
|
||||
</div>
|
||||
</Provider>,
|
||||
<Provider store={store}><App winamp={winamp} /></Provider>,
|
||||
document.getElementById("winamp2-js")
|
||||
);
|
||||
|
||||
winamp.dispatch = store.dispatch;
|
||||
|
||||
const assetBase = process.env.NODE_ENV === "production" ? cdnUrl : "";
|
||||
winamp.init({
|
||||
volume: 50,
|
||||
balance: 0,
|
||||
mediaFile: {
|
||||
url: `${assetBase}mp3/llama-2.91.mp3`,
|
||||
url: audioUrl,
|
||||
name: "1. DJ Mike Llama - Llama Whippin' Intro"
|
||||
},
|
||||
skinUrl: `${assetBase}skins/base-2.91.wsz`
|
||||
skinUrl: skinUrl
|
||||
});
|
||||
|
||||
new Hotkeys(winamp, store);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
import { createStore, applyMiddleware } from "redux";
|
||||
import reducer from "./reducers";
|
||||
import thunk from "redux-thunk";
|
||||
import { composeWithDevTools } from "redux-devtools-extension";
|
||||
import mediaMiddleware from "./mediaMiddleware";
|
||||
|
||||
const getStore = winamp =>
|
||||
const getStore = (winamp, initialState) =>
|
||||
createStore(
|
||||
reducer,
|
||||
window.devToolsExtension && window.devToolsExtension(),
|
||||
applyMiddleware(thunk, mediaMiddleware(winamp.media))
|
||||
initialState,
|
||||
composeWithDevTools(applyMiddleware(thunk, mediaMiddleware(winamp.media)))
|
||||
);
|
||||
|
||||
export default getStore;
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
"react-dom": "^15.4.2",
|
||||
"react-redux": "^5.0.2",
|
||||
"redux": "^3.5.2",
|
||||
"redux-devtools-extension": "^2.13.2",
|
||||
"redux-thunk": "^2.1.0",
|
||||
"webpack": "^3.0.0",
|
||||
"winamp-eqf": "^1.0.0"
|
||||
|
|
|
|||
|
|
@ -4604,6 +4604,10 @@ reduce-function-call@^1.0.1:
|
|||
dependencies:
|
||||
balanced-match "^0.4.2"
|
||||
|
||||
redux-devtools-extension@^2.13.2:
|
||||
version "2.13.2"
|
||||
resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.2.tgz#e0f9a8e8dfca7c17be92c7124958a3b94eb2911d"
|
||||
|
||||
redux-thunk@^2.1.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue