Start pulling out part of the visualizer into a typed hookable component

js/components/Visualizer.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import * as Actions from "../actionCreators";
+import * as Selectors from "../selectors";
+import { useTypedSelector, useActionCreator } from "../hooks";
+import VisualizerInner from "./VisualizerInner";
+
+type Props = {
+  analyser: AnalyserNode;
+};
+
+function Visualizer(props: Props) {
+  const colors = useTypedSelector(Selectors.getSkinColors);
+  const style = useTypedSelector(Selectors.getVisualizerStyle);
+  const status = useTypedSelector(Selectors.getMediaStatus);
+  const getWindowShade = useTypedSelector(Selectors.getWindowShade);
+  const dummyVizData = useTypedSelector(Selectors.getDummyVizData);
+
+  const toggleVisualizerStyle = useActionCreator(Actions.toggleVisualizerStyle);
+
+  const windowShade = getWindowShade("main");
+  const innerProps = {
+    colors,
+    style,
+    width: windowShade ? 38 : 76,
+    height: windowShade ? 5 : 16,
+    status,
+    windowShade,
+    dummyVizData,
+    toggleVisualizerStyle,
+  };
+  return <VisualizerInner {...innerProps} {...props} />;
+}
+
+export default Visualizer;

js/components/VisualizerInner.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { connect } from "react-redux";
 
-import { toggleVisualizerStyle } from "../actionCreators";
-import { getWindowShade, getVisualizerStyle } from "../selectors";
+import * as Actions from "../actionCreators";
+import * as Selectors from "../selectors";
 import { VISUALIZERS, MEDIA_STATUS } from "../constants";
+import { useTypedSelector, useActionCreator } from "../hooks";
 
 const PIXEL_DENSITY = 2;
 const NUM_BARS = 20;
@@ -101,7 +101,7 @@ function preRenderBar(height, colors, renderHeight) {
   return barCanvas;
 }
 
-class Visualizer extends React.Component {
+class VisualizerInner extends React.Component {
   componentDidMount() {
     this.barPeaks = new Array(NUM_BARS).fill(0);
     this.barPeakFrames = new Array(NUM_BARS).fill(0);
@@ -320,18 +320,4 @@ class Visualizer extends React.Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  colors: state.display.skinColors,
-  style: getVisualizerStyle(state),
-  width: getWindowShade(state)("main") ? 38 : 76,
-  height: getWindowShade(state)("main") ? 5 : 16,
-  status: state.media.status,
-  windowShade: getWindowShade(state)("main"),
-  dummyVizData: state.display.dummyVizData,
-});
-
-const mapDispatchToProps = {
-  toggleVisualizerStyle,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Visualizer);
+export default VisualizerInner;

js/selectors.ts

@@ -15,6 +15,7 @@ import {
   SkinRegion,
   GenLetterWidths,
   MilkdropMessage,
+  DummyVizData,
 } from "./types";
 import { createSelector, defaultMemoize } from "reselect";
 import * as Utils from "./utils";
@@ -492,6 +493,10 @@ const defaultPlaylistStyle = {
   font: "Arial",
 };
 
+export function getSkinColors(state: AppState): string[] {
+  return state.display.skinColors;
+}
+
 export const getSkinPlaylistStyle = (state: AppState): PlaylistStyle => {
   return state.display.skinPlaylistStyle || defaultPlaylistStyle;
 };
@@ -742,6 +747,10 @@ export const getLineColorsImage = createSelector(
   }
 );
 
+export function getDummyVizData(state: AppState): DummyVizData | null {
+  return state.display.dummyVizData;
+}
+
 export function getMarqueeStep(state: AppState): number {
   return state.display.marqueeStep;
 }