Start adding query params

js/components/MainWindow/Position.js

@@ -33,6 +33,9 @@ const Position = ({
       step="1"
       value={displayedPosition}
       onInput={setPosition}
+      onChange={
+        () => {} /* React complains without this, can probably rename onInput to onChange */
+      }
       onMouseUp={seekToPercentComplete}
       onMouseDown={setPosition}
       title="Seeking Bar"

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

@@ -319,6 +319,7 @@ exports[`MainWindow renders to snapshot 1`] = `
     id="position"
     max="100"
     min="0"
+    onChange={[Function]}
     onInput={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}

js/index.js

@@ -12,6 +12,7 @@ import xmms from "../skins/XMMS-Turquoise.wsz";
 import zaxon from "../skins/ZaxonRemake1-0.wsz";
 import green from "../skins/Green-Dimension-V2.wsz";
 import MilkdropWindow from "./components/MilkdropWindow";
+import screenshotInitialState from "./screenshotInitialState";
 import Webamp from "./webamp";
 import {
   STEP_MARQUEE,
@@ -24,7 +25,7 @@ import {
 
 import {
   hideAbout,
-  skinUrl,
+  skinUrl as configSkinUrl,
   initialTracks,
   initialState,
   milkdrop
@@ -39,6 +40,14 @@ const NOISY_ACTION_TYPES = new Set([
   SET_BAND_VALUE
 ]);
 
+let screenshot = false;
+let skinUrl = configSkinUrl;
+if ("URLSearchParams" in window) {
+  const params = new URLSearchParams(location.search);
+  screenshot = params.get("screenshot");
+  skinUrl = params.get("skinUrl") || skinUrl;
+}
+
 function supressDragAndDrop(e) {
   e.preventDefault();
   e.dataTransfer.effectAllowed = "none";
@@ -136,7 +145,7 @@ Raven.context(() => {
 
   const webamp = new Webamp({
     initialSkin,
-    initialTracks,
+    initialTracks: screenshot ? null : initialTracks,
     availableSkins: [
       { url: base, name: "<Base Skin>" },
       { url: green, name: "Green Dimension V2" },
@@ -162,7 +171,7 @@ Raven.context(() => {
     enableHotkeys: true,
     __extraWindows,
     __initialWindowLayout,
-    __initialState: initialState,
+    __initialState: screenshot ? screenshotInitialState : initialState,
     __customMiddlewares: [ravenMiddleware]
   });
 

js/screenshotInitialState.js

@@ -0,0 +1,67 @@
+const defaultTracksState = {
+  "0": {
+    selected: false,
+    title: "Llama Whipping Intro",
+    artist: "DJ Mike Llama",
+    duration: "5",
+    url: ""
+  },
+  "1": {
+    selected: false,
+    title: "Rock Is Dead",
+    artist: "Marilyn Manson",
+    duration: "191", // 3:11
+    url: ""
+  },
+  "2": {
+    selected: true,
+    title: "Spybreak! (Short One)",
+    artist: "Propellerheads",
+    duration: "240", // 4:00
+    url: ""
+  },
+  "3": {
+    selected: false,
+    title: "Bad Blood",
+    artist: "Ministry",
+    duration: "300", // 5:00
+    url: ""
+  }
+};
+
+const initialState = {
+  equalizer: {
+    sliders: {
+      "60": 52,
+      "170": 74,
+      "310": 83,
+      "600": 91,
+      "1000": 74,
+      "3000": 54,
+      "6000": 23,
+      "12000": 19,
+      "14000": 34,
+      "16000": 75,
+      preamp: 56
+    }
+  },
+  media: {
+    status: "PLAYING",
+    kbps: 128,
+    khz: 44,
+    length: 5,
+    timeElapsed: 1, // This does not seem to work
+    channels: 2,
+    name: "1. DJ Mike Llama - Llama Whippin' Intro"
+  },
+  playlist: {
+    tracks: defaultTracksState,
+    trackOrder: [0, 1, 2, 3],
+    currentTrack: 0
+  },
+  display: {
+    working: false
+  }
+};
+
+export default initialState;