From d2ba5441364241b74c229122d057bdea150c2b33 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sun, 27 Aug 2017 13:16:59 -0700 Subject: [PATCH] Redo loading and config --- css/main-window.css | 54 +++++++++++++++++++++++++------ js/components/App.js | 31 ++++++++++++++++++ js/components/MainWindow/index.js | 1 - js/config.js | 22 +++++++++++-- js/index.js | 34 ++++++------------- js/store.js | 7 ++-- package.json | 1 + yarn.lock | 4 +++ 8 files changed, 114 insertions(+), 40 deletions(-) create mode 100644 js/components/App.js diff --git a/css/main-window.css b/css/main-window.css index 77fafe43..b149d385 100755 --- a/css/main-window.css +++ b/css/main-window.css @@ -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 { diff --git a/js/components/App.js b/js/components/App.js new file mode 100644 index 00000000..8400c6a1 --- /dev/null +++ b/js/components/App.js @@ -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 + ?
+ Loading + ... + +
+ :
+ + {/* This is not technically kosher, since