mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-25 02:57:30 +00:00
Show loading state before JS loads.
This commit is contained in:
Jordan Eldredge
parent
1996cfbb33
commit
b4b583a3ed
5 changed files with 93 additions and 80 deletions
|
|
@ -11,64 +11,6 @@
|
|||
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
|
||||
}
|
||||
|
||||
#winamp2-js #loading {
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#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: 0s;
|
||||
animation-delay: 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 #title-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
58
css/page.css
58
css/page.css
|
|
@ -28,3 +28,61 @@ body {
|
|||
.about a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#winamp2-js #loading {
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#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: 0s;
|
||||
animation-delay: 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,11 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id='winamp2-js'></div>
|
||||
<div id='winamp2-js'>
|
||||
<div id="loading">
|
||||
Loading<span class="ellipsis-anim"><span>.</span><span>.</span><span>.</span></span>
|
||||
</div>
|
||||
</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, Safari or Edge.</p>
|
||||
|
|
|
|||
|
|
@ -15,21 +15,10 @@ const genWindowMap = {
|
|||
|
||||
const GEN_WINDOWS = ["AVS_WINDOW"];
|
||||
|
||||
const App = ({ media, loading, closed, equalizer, playlist, openWindows }) => {
|
||||
const App = ({ media, closed, equalizer, playlist, openWindows }) => {
|
||||
if (closed) {
|
||||
return null;
|
||||
}
|
||||
if (loading) {
|
||||
return (
|
||||
<div id="loading">
|
||||
Loading<span className="ellipsis-anim">
|
||||
<span>.</span>
|
||||
<span>.</span>
|
||||
<span>.</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const windows = {
|
||||
main: <MainWindow mediaPlayer={media} />,
|
||||
equalizer: equalizer && <EqualizerWindow />,
|
||||
|
|
@ -50,7 +39,6 @@ const App = ({ media, loading, closed, equalizer, playlist, openWindows }) => {
|
|||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
loading: state.display.loading,
|
||||
closed: state.display.closed,
|
||||
equalizer: state.windows.equalizer,
|
||||
playlist: state.windows.playlist,
|
||||
|
|
|
|||
37
js/winamp.js
37
js/winamp.js
|
|
@ -17,13 +17,26 @@ class Winamp {
|
|||
this.media = new Media();
|
||||
this.store = getStore(this.media, this.options.__initialState);
|
||||
}
|
||||
render(node) {
|
||||
render(
|
||||
<Provider store={this.store}>
|
||||
<App media={this.media} />
|
||||
</Provider>,
|
||||
node
|
||||
);
|
||||
|
||||
_skinHasLoaded() {
|
||||
return new Promise(resolve => {
|
||||
const initialState = this.store.getState();
|
||||
if (!initialState.display.loading) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
const unsubscribe = this.store.subscribe(() => {
|
||||
const state = this.store.getState();
|
||||
if (!state.display.loading) {
|
||||
resolve();
|
||||
unsubscribe();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async render(node) {
|
||||
this.store.dispatch(setSkinFromUrl(this.options.initialSkin.url));
|
||||
|
||||
if (this.options.initialTrack && this.options.initialTrack.url) {
|
||||
this.store.dispatch(
|
||||
|
|
@ -40,9 +53,17 @@ class Winamp {
|
|||
skins: this.options.avaliableSkins
|
||||
});
|
||||
}
|
||||
this.store.dispatch(setSkinFromUrl(this.options.initialSkin.url));
|
||||
|
||||
new Hotkeys(this.store.dispatch);
|
||||
|
||||
await this._skinHasLoaded();
|
||||
|
||||
render(
|
||||
<Provider store={this.store}>
|
||||
<App media={this.media} />
|
||||
</Provider>,
|
||||
node
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue