More type progress

js/actionCreators/files.js

@@ -99,12 +99,14 @@ export function setSkinFromArrayBuffer(arrayBuffer) {
       const skinData = await skinParser(arrayBuffer, JSZip);
       dispatch({
         type: SET_SKIN_DATA,
-        skinImages: skinData.images,
-        skinColors: skinData.colors,
-        skinPlaylistStyle: skinData.playlistStyle,
-        skinCursors: skinData.cursors,
-        skinRegion: skinData.region,
-        skinGenLetterWidths: skinData.genLetterWidths
+        data: {
+          skinImages: skinData.images,
+          skinColors: skinData.colors,
+          skinPlaylistStyle: skinData.playlistStyle,
+          skinCursors: skinData.cursors,
+          skinRegion: skinData.region,
+          skinGenLetterWidths: skinData.genLetterWidths
+        }
       });
     } catch (e) {
       console.error(e);

js/reducers/display.ts

@@ -1,3 +1,4 @@
+import {DisplayState, Action } from "../types";
 import { createSelector } from "reselect";
 
 import {
@@ -19,7 +20,7 @@ import {
 } from "../actionTypes";
 import { DEFAULT_SKIN, VISUALIZER_ORDER } from "../constants";
 
-export const getVisualizationOrder = state => {
+export const getVisualizationOrder = (state: DisplayState): Array<string> => {
   return [...state.additionalVisualizers, ...VISUALIZER_ORDER];
 };
 
@@ -52,7 +53,7 @@ const defaultDisplayState = {
   zIndex: 0
 };
 
-const display = (state = defaultDisplayState, action) => {
+const display = (state: DisplayState = defaultDisplayState, action: Action): DisplayState => {
   switch (action.type) {
     case TOGGLE_DOUBLESIZE_MODE:
       return { ...state, doubled: !state.doubled };
@@ -75,15 +76,16 @@ const display = (state = defaultDisplayState, action) => {
     case LOADED:
       return { ...state, loading: false };
     case SET_SKIN_DATA:
+    const {data} = action;
       return {
         ...state,
         loading: false,
-        skinImages: action.skinImages,
-        skinColors: action.skinColors,
-        skinPlaylistStyle: action.skinPlaylistStyle,
-        skinCursors: action.skinCursors,
-        skinRegion: action.skinRegion,
-        skinGenLetterWidths: action.skinGenLetterWidths
+        skinImages: data.skinImages,
+        skinColors: data.skinColors,
+        skinPlaylistStyle: data.skinPlaylistStyle,
+        skinCursors: data.skinCursors,
+        skinRegion: data.skinRegion,
+        skinGenLetterWidths: data.skinGenLetterWidths
       };
     case TOGGLE_VISUALIZER_STYLE:
       return {

js/reducers/userInput.ts

@@ -0,0 +1,40 @@
+import { Action, UserInputState } from "../types";
+import {
+  SET_FOCUS,
+  SET_BAND_FOCUS,
+  SET_SCRUB_POSITION,
+  UNSET_FOCUS,
+  SET_USER_MESSAGE,
+  UNSET_USER_MESSAGE
+} from "../actionTypes";
+
+const defaultUserInput = {
+  focus: null,
+  bandFocused: null,
+  scrubPosition: 0,
+  userMessage: null
+};
+
+export const userInput = (
+  state: UserInputState = defaultUserInput,
+  action: Action
+): UserInputState => {
+  switch (action.type) {
+    case SET_FOCUS:
+      return { ...state, focus: action.input, bandFocused: null };
+    case SET_BAND_FOCUS:
+      return { ...state, focus: action.input, bandFocused: action.bandFocused };
+    case UNSET_FOCUS:
+      return { ...state, focus: null, bandFocused: null };
+    case SET_SCRUB_POSITION:
+      return { ...state, scrubPosition: action.position };
+    case SET_USER_MESSAGE:
+      return { ...state, userMessage: action.message };
+    case UNSET_USER_MESSAGE:
+      return { ...state, userMessage: null };
+    default:
+      return state;
+  }
+};
+
+export default userInput;

js/types.ts

@@ -3,6 +3,22 @@ type Skin = {
   name: string;
 };
 
+type SkinImages = {
+
+}
+
+type Band = null; // TODO: Use a real type here.
+
+// TODO: Fill these out once we actually use them.
+type SkinData = {
+      skinImages: SkinImages;
+      skinColors: null;
+      skinPlaylistStyle: null;
+      skinCursors: null;
+      skinRegion: null;
+      skinGenLetterWidths: null;
+      }
+
 export type Action =
   | {
       type: "NETWORK_CONNECTED";
@@ -61,6 +77,7 @@ export type Action =
   } | {
       type: "SET_BAND_FOCUS";
       input: string;
+      bandFocused: Band;
   } | {
       type: "UNSET_FOCUS";
   } | {
@@ -71,6 +88,41 @@ export type Action =
       message: string;
   } | {
       type: "UNSET_USER_MESSAGE";
+  } | {
+      type: "TOGGLE_DOUBLESIZE_MODE";
+  } | {
+      type: "TOGGLE_LLAMA_MODE";
+  } | {
+      type: "STEP_MARQUEE";
+  } | {
+      type: "DISABLE_MARQUEE";
+  } | {
+      type: "STOP_WORKING";
+  } | {
+      type: "START_WORKING";
+  } | {
+      type: "CLOSE_WINAMP";
+  } | {
+      type: "LOADING";
+  } | {
+      type: "LOADED";
+  } | {
+      type: "SET_SKIN_DATA";
+      data: SkinData;
+  } | {
+      type: "TOGGLE_VISUALIZER_STYLE";
+  } | {
+      type: "REGISTER_VISUALIZER";
+      id: string;
+  } | {
+      type: "SET_PLAYLIST_SCROLL_POSITION";
+      position: number;
+  } | {
+      type: "SET_Z_INDEX";
+      zIndex: number;
+  } | {
+      type: "SET_DUMMY_VIZ_DATA";
+      data: null;
     };
 
 export interface SettingsState {
@@ -97,7 +149,25 @@ export interface MediaState {
 
 export interface UserInputState {
   focus: string | null; // TODO: Convert this to an enum?
-  bandFocused: null;
+  bandFocused: Band;
   scrubPosition: number;
   userMessage: string | null;
+}
+
+export interface DisplayState {
+  additionalVisualizers: Array<string>;
+  visualizerStyle: number;
+  doubled: boolean;
+  llama: boolean;
+  disableMarquee: boolean;
+  marqueeStep: number;
+  skinImages: SkinImages;
+  skinColors: null;
+  skinPlaylistStyle: null;
+  working: boolean;
+  closed: boolean;
+  loading: boolean;
+  playlistScrollPosition: number;
+  zIndex: number
+  dummyVizData:null; // TODO: Figure out what kind of data this actually is.
 }