Use the existing CSS when going back to the default skin

Rather than load/parse the default skin, just go back to the css that's
already in the DOM.

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Features
 
 - Users can pass an initial layout (TODO: Documentation)
+- The default skin is now included in the Skins section of the options menu by default.
 
 ## 1.2.0
 

js/actionCreators/index.ts

@@ -6,7 +6,8 @@ import {
   MINIMIZE_WINAMP,
   SET_FOCUS,
   UNSET_FOCUS,
-  LOAD_SERIALIZED_STATE
+  LOAD_SERIALIZED_STATE,
+  LOAD_DEFAULT_SKIN
 } from "../actionTypes";
 import { Dispatchable } from "../types";
 import { ensureWindowsAreOnScreen } from "./windows";
@@ -130,3 +131,7 @@ export function loadSerializedState(
     dispatch(ensureWindowsAreOnScreen());
   };
 }
+
+export function loadDefaultSkin() {
+  return { type: LOAD_DEFAULT_SKIN };
+}

js/actionTypes.ts

@@ -74,3 +74,4 @@ export const CLOSE_REQUESTED = "CLOSE_REQUESTED";
 export const LOAD_SERIALIZED_STATE = "LOAD_SERIALIZED_STATE";
 export const RESET_WINDOW_SIZES = "RESET_WINDOW_SIZES";
 export const BROWSER_WINDOW_SIZE_CHANGED = "BROWSER_WINDOW_SIZE_CHANGED";
+export const LOAD_DEFAULT_SKIN = "LOAD_DEFAULT_SKIN";

js/components/SkinsContextMenu.js

@@ -1,12 +1,13 @@
 import React from "react";
 import { connect } from "react-redux";
-import { setSkinFromUrl, openSkinFileDialog } from "../actionCreators";
+import * as Actions from "../actionCreators";
 import { Hr, Node, Parent } from "./ContextMenu";
 
 const SkinContextMenu = props => (
   <Parent label="Skins">
     <Node onClick={props.openSkinFileDialog} label="Load Skin..." />
-    {!!props.availableSkins.length && <Hr />}
+    <Hr />
+    <Node onClick={props.loadDefaultSkin} label={"<Base Skin>"} />
     {props.availableSkins.map(skin => (
       <Node
         key={skin.url}
@@ -22,8 +23,9 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = {
-  openSkinFileDialog,
-  setSkin: setSkinFromUrl
+  loadDefaultSkin: Actions.loadDefaultSkin,
+  openSkinFileDialog: Actions.openSkinFileDialog,
+  setSkin: Actions.setSkinFromUrl
 };
 
 export default connect(

js/index.js

@@ -3,7 +3,6 @@
 import Raven from "raven-js";
 import createMiddleware from "raven-for-redux";
 import isButterchurnSupported from "butterchurn/lib/isSupported.min";
-import base from "../skins/base-2.91-png.wsz";
 import osx from "../skins/MacOSXAqua1-5.wsz";
 import topaz from "../skins/TopazAmp1-2.wsz";
 import visor from "../skins/Vizor1-01.wsz";
@@ -214,7 +213,6 @@ Raven.context(async () => {
     initialSkin,
     initialTracks: screenshot ? null : initialTracks,
     availableSkins: [
-      { url: base, name: "<Base Skin>" },
       { url: green, name: "Green Dimension V2" },
       { url: internetArchive, name: "Internet Archive" },
       { url: osx, name: "Mac OSX v1.5 (Aqua)" },

js/reducers/display.ts

@@ -24,7 +24,8 @@ import {
   DISABLE_MARQUEE,
   SET_DUMMY_VIZ_DATA,
   LOADING,
-  LOAD_SERIALIZED_STATE
+  LOAD_SERIALIZED_STATE,
+  LOAD_DEFAULT_SKIN
 } from "../actionTypes";
 import { DEFAULT_SKIN, VISUALIZER_ORDER } from "../constants";
 import { DisplaySerializedStateV1 } from "../serializedStates/v1Types";
@@ -76,6 +77,25 @@ const display = (
   action: Action
 ): DisplayState => {
   switch (action.type) {
+    case LOAD_DEFAULT_SKIN:
+      const {
+        skinImages,
+        skinColors,
+        skinCursors,
+        skinPlaylistStyle,
+        skinRegion,
+        skinGenLetterWidths
+      } = defaultDisplayState;
+      return {
+        ...state,
+        skinImages,
+        skinColors,
+        skinCursors,
+        skinPlaylistStyle,
+        skinRegion,
+        skinGenLetterWidths
+      };
+
     case TOGGLE_DOUBLESIZE_MODE:
       return { ...state, doubled: !state.doubled };
     case TOGGLE_LLAMA_MODE:

js/types.ts

@@ -349,7 +349,8 @@ export type Action =
       serializedState: SerializedStateV1;
     }
   | { type: "RESET_WINDOW_SIZES" }
-  | { type: "BROWSER_WINDOW_SIZE_CHANGED"; height: number; width: number };
+  | { type: "BROWSER_WINDOW_SIZE_CHANGED"; height: number; width: number }
+  | { type: "LOAD_DEFAULT_SKIN" };
 
 export type MediaTagRequestStatus =
   | "INITIALIZED"