Re-enable custom skins

index.html

@@ -12,8 +12,6 @@
     <meta property="og:url" content="https://webamp.org" />
     <meta property="og:image" content="https://webamp.org<%= require('./images/preview.png') %>" />
     <link rel='stylesheet' type='text/css' href="<%= require('!file-loader?name=[path][name]-[hash].[ext]!./css/page.css') %>" />
-    <!-- Some fancy attributes here to ensure we don't block rendering the page -->
-    <link rel='preload' type='text/css' href="<%= require('!file-loader?name=[path][name]-[hash].[ext]!./css/base-skin.min.css') %>" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
     <link rel="shortcut icon" sizes="16x16 32x32" href="<%= require('./images/favicon.ico') %>">
 
     <!-- See https://goo.gl/OOhYW5 -->

js/actionTypes.js

@@ -63,3 +63,4 @@ export const UPDATE_WINDOW_POSITIONS = "UPDATE_WINDOW_POSITIONS";
 export const CHANNEL_COUNT_CHANGED = "CHANNEL_COUNT_CHANGED";
 export const WINDOW_SIZE_CHANGED = "WINDOW_SIZE_CHANGED";
 export const TOGGLE_WINDOW_SHADE_MODE = "TOGGLE_WINDOW_SHADE_MODE";
+export const LOADED = "LOADED";

js/components/MainWindow/__snapshots__/index.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`MainWindow renders to snapshot 1`] = `
 <div
-  className="window stop selected draggable loading"
+  className="window stop selected draggable"
   id="main-window"
   onDragEnter={[Function]}
   onDragOver={[Function]}

js/components/PlaylistWindow/__snapshots__/index.test.js.snap

@@ -12,9 +12,9 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
   onWheel={[Function]}
   style={
     Object {
-      "backgroundColor": undefined,
-      "color": undefined,
-      "fontFamily": "undefined, Arial, sans-serif",
+      "backgroundColor": "#000000",
+      "color": "#00FF00",
+      "fontFamily": "Arial, Arial, sans-serif",
       "height": "116px",
       "width": "275px",
     }

js/config.js

@@ -18,7 +18,7 @@ if (config.audioUrl && !config.initialTracks) {
   config.initialTracks = [{ url: config.audioUrl }];
 }
 
-// Turn on the incomplete playlist window
+export const skinUrl = config.skinUrl === undefined ? null : config.skinUrl;
 export const initialTracks = config.initialTracks || [
   {
     metaData: { artist: "DJ Mike Llama", title: "Llama Whippin' Intro" },

js/index.js

@@ -22,6 +22,7 @@ import {
 
 import {
   hideAbout,
+  skinUrl,
   initialTracks,
   initialState,
   sentryDsn,
@@ -126,7 +127,10 @@ Raven.context(() => {
     };
   }
 
+  const initialSkin = !skinUrl ? null : { url: skinUrl };
+
   const webamp = new Webamp({
+    initialSkin,
     initialTracks,
     availableSkins: [
       { url: base, name: "<Base Skin>" },

js/reducers/display.js

@@ -7,7 +7,8 @@ import {
   TOGGLE_DOUBLESIZE_MODE,
   TOGGLE_LLAMA_MODE,
   TOGGLE_VISUALIZER_STYLE,
-  SET_PLAYLIST_SCROLL_POSITION
+  SET_PLAYLIST_SCROLL_POSITION,
+  LOADED
 } from "../actionTypes";
 
 const defaultDisplayState = {
@@ -41,6 +42,11 @@ const display = (state = defaultDisplayState, action) => {
       return { ...state, working: true };
     case CLOSE_WINAMP:
       return { ...state, closed: true };
+    case LOADED:
+      return {
+        ...state,
+        loading: false
+      };
     case SET_SKIN_DATA:
       return {
         ...state,

js/webamp.js

@@ -22,10 +22,13 @@ import {
   CLOSE_WINAMP,
   MINIMIZE_WINAMP,
   ADD_GEN_WINDOW,
-  UPDATE_WINDOW_POSITIONS
+  UPDATE_WINDOW_POSITIONS,
+  LOADED
 } from "./actionTypes";
 import Emitter from "./emitter";
 
+import "../css/base-skin.min.css";
+
 // Return a promise that resolves when the store matches a predicate.
 const storeHas = (store, predicate) =>
   new Promise(resolve => {
@@ -56,6 +59,7 @@ class Winamp {
     this.options = options;
     const {
       initialTracks,
+      initialSkin,
       avaliableSkins, // Old misspelled name
       availableSkins,
       enableHotkeys = false,
@@ -96,7 +100,11 @@ class Winamp {
       this.store.dispatch({ type: NETWORK_DISCONNECTED })
     );
 
-    //this.store.dispatch(setSkinFromUrl(this.options.initialSkin.url));
+    if (initialSkin) {
+      this.store.dispatch(setSkinFromUrl(initialSkin.url));
+    } else {
+      this.store.dispatch({ type: LOADED });
+    }
 
     if (initialTracks) {
       this.appendTracks(initialTracks);
@@ -150,7 +158,7 @@ class Winamp {
 
   async renderWhenReady(node) {
     // Wait for the skin to load.
-    //await storeHas(this.store, state => !state.display.loading);
+    await storeHas(this.store, state => !state.display.loading);
 
     const genWindowComponents = {};
     this.genWindows.forEach(w => {