diff --git a/css/main-window.css b/css/main-window.css index b2366e1e..c92dfdbe 100755 --- a/css/main-window.css +++ b/css/main-window.css @@ -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; diff --git a/css/page.css b/css/page.css index bd1d600b..84c21132 100644 --- a/css/page.css +++ b/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; + } +} diff --git a/index.html b/index.html index 5da29347..1efab2b0 100755 --- a/index.html +++ b/index.html @@ -16,7 +16,11 @@ -
+
+
+ Loading... +
+

Your browser does not support the features we need.

Try using the most recent version of Chrome, Firefox, Safari or Edge.

diff --git a/js/components/App.js b/js/components/App.js index 8c86492d..60c3ebe4 100644 --- a/js/components/App.js +++ b/js/components/App.js @@ -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 ( -
- Loading - . - . - . - -
- ); - } const windows = { main: , equalizer: equalizer && , @@ -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, diff --git a/js/winamp.js b/js/winamp.js index 3da1ba74..dd0ef133 100644 --- a/js/winamp.js +++ b/js/winamp.js @@ -17,13 +17,26 @@ class Winamp { this.media = new Media(); this.store = getStore(this.media, this.options.__initialState); } - render(node) { - render( - - - , - 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( + + + , + node + ); } }