From 587db7a19d76e9cea9fe20c4bcb1cffbf6a73a0b Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 6 Oct 2018 23:10:08 -0700
Subject: [PATCH] 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                      |  1 +
 js/actionCreators/index.ts        |  7 ++++++-
 js/actionTypes.ts                 |  1 +
 js/components/SkinsContextMenu.js | 10 ++++++----
 js/index.js                       |  2 --
 js/reducers/display.ts            | 22 +++++++++++++++++++++-
 js/types.ts                       |  3 ++-
 7 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ef8576f..56dadd4f 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/js/actionCreators/index.ts b/js/actionCreators/index.ts
index 5142e3b8..3297aadc 100644
--- a/js/actionCreators/index.ts
+++ b/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 };
+}
diff --git a/js/actionTypes.ts b/js/actionTypes.ts
index 2267ba52..4dfa588b 100644
--- a/js/actionTypes.ts
+++ b/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";
diff --git a/js/components/SkinsContextMenu.js b/js/components/SkinsContextMenu.js
index 47ba1af3..772a7f16 100644
--- a/js/components/SkinsContextMenu.js
+++ b/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(
diff --git a/js/index.js b/js/index.js
index cbc79f5e..e1001ce2 100644
--- a/js/index.js
+++ b/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)" },
diff --git a/js/reducers/display.ts b/js/reducers/display.ts
index faad863c..e02058c3 100644
--- a/js/reducers/display.ts
+++ b/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:
diff --git a/js/types.ts b/js/types.ts
index 6afad286..bb270387 100644
--- a/js/types.ts
+++ b/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"