Refactor Winamp class API

experiments/automatedScreenshots/index.js

@@ -137,7 +137,7 @@ const config = {
     const url = `http://localhost:8080/#${JSON.stringify(config)}`;
     console.log({ url });
     await page["goto"](url);
-    await page.waitForSelector("#loaded", { timeout: 2000 });
+    await page.waitForSelector("#main-window", { timeout: 2000 });
 
     console.log("Writing screenshot to", screenshotFile);
     await page.screenshot({ path: screenshotFile });

js/browser.js

@@ -1,7 +0,0 @@
-export default function(base) {
-  const supportsAudioApi = !!(base.AudioContext || base.webkitAudioContext);
-  const supportsCanvas = !!base.document.createElement("canvas").getContext;
-  const supportsPromises = typeof Promise !== "undefined";
-
-  this.isCompatible = supportsAudioApi && supportsCanvas && supportsPromises;
-}

js/components/App.js

@@ -24,6 +24,7 @@ const App = ({ media, closed, equalizer, playlist, openWindows }) => {
     equalizer: equalizer && <EqualizerWindow />,
     playlist: playlist && <PlaylistWindow />
   };
+  // Add any "generic" windows
   GEN_WINDOWS.forEach((windowId, i) => {
     const Component = genWindowMap[windowId];
     windows[`genWindow${i}`] = openWindows.has(windowId) && (
@@ -31,10 +32,10 @@ const App = ({ media, closed, equalizer, playlist, openWindows }) => {
     );
   });
   return (
-    <div id="loaded">
+    <React.Fragment>
       <Skin />
       <WindowManager windows={windows} />
-    </div>
+    </React.Fragment>
   );
 };
 

js/index.js

@@ -8,7 +8,6 @@ import xmms from "../skins/XMMS-Turquoise.wsz";
 import zaxon from "../skins/ZaxonRemake1-0.wsz";
 import green from "../skins/Green-Dimension-V2.wsz";
 import Winamp from "./winamp";
-import Browser from "./browser";
 
 import {
   hideAbout,
@@ -21,31 +20,33 @@ import {
 Raven.config(sentryDsn).install();
 
 Raven.context(() => {
-  if (new Browser(window).isCompatible) {
-    if (hideAbout) {
-      document.getElementsByClassName("about")[0].style.visibility = "hidden";
-    }
-
-    new Winamp({
-      initialSkin: {
-        url: skinUrl
-      },
-      initialTrack: {
-        name: "DJ Mike Llama - Llama Whippin' Intro",
-        url: audioUrl
-      },
-      avaliableSkins: [
-        { url: base, name: "<Base Skin>" },
-        { url: green, name: "Green Dimension V2" },
-        { url: osx, name: "Mac OSX v1.5 (Aqua)" },
-        { url: topaz, name: "TopazAmp" },
-        { url: visor, name: "Vizor" },
-        { url: xmms, name: "XMMS Turquoise " },
-        { url: zaxon, name: "Zaxon Remake" }
-      ],
-      __initialState: initialState
-    }).render(document.getElementById("winamp2-js"));
-  } else {
-    document.getElementById("browser-compatibility").style.display = "block";
+  if (hideAbout) {
+    document.getElementsByClassName("about")[0].style.visibility = "hidden";
   }
+  if (!Winamp.browserIsSupported()) {
+    document.getElementById("browser-compatibility").style.display = "block";
+    return;
+  }
+
+  const winamp = new Winamp({
+    initialSkin: {
+      url: skinUrl
+    },
+    initialTrack: {
+      name: "DJ Mike Llama - Llama Whippin' Intro",
+      url: audioUrl
+    },
+    avaliableSkins: [
+      { url: base, name: "<Base Skin>" },
+      { url: green, name: "Green Dimension V2" },
+      { url: osx, name: "Mac OSX v1.5 (Aqua)" },
+      { url: topaz, name: "TopazAmp" },
+      { url: visor, name: "Vizor" },
+      { url: xmms, name: "XMMS Turquoise " },
+      { url: zaxon, name: "Zaxon Remake" }
+    ],
+    __initialState: initialState
+  });
+
+  winamp.renderWhenReady(document.getElementById("winamp2-js"));
 });

js/winamp.js

@@ -26,14 +26,21 @@ const storeHas = (store, predicate) =>
   });
 
 class Winamp {
+  static browserIsSupported() {
+    const supportsAudioApi = !!(
+      window.AudioContext || window.webkitAudioContext
+    );
+    const supportsCanvas = !!window.document.createElement("canvas").getContext;
+    const supportsPromises = typeof Promise !== "undefined";
+    return supportsAudioApi && supportsCanvas && supportsPromises;
+  }
+
   constructor(options) {
     this.options = options;
 
     this.media = new Media();
     this.store = getStore(this.media, this.options.__initialState);
-  }
 
-  async render(node) {
     this.store.dispatch(setSkinFromUrl(this.options.initialSkin.url));
 
     if (this.options.initialTrack && this.options.initialTrack.url) {
@@ -53,7 +60,9 @@ class Winamp {
     }
 
     new Hotkeys(this.store.dispatch);
+  }
 
+  async renderWhenReady(node) {
     // Wait for the skin to load.
     await storeHas(this.store, state => !state.display.loading);