Pull marquee stepping out of Redux

Author: captbaritone

packages/webamp/demo/js/Webamp.ts

@@ -20,7 +20,6 @@ export {
 } from "../../js/types";
 export { WINDOWS } from "../../js/constants";
 export {
-  STEP_MARQUEE,
   UPDATE_TIME_ELAPSED,
   UPDATE_WINDOW_POSITIONS,
   SET_VOLUME,

packages/webamp/demo/js/webampConfig.ts

@@ -11,7 +11,6 @@ import {
   Options,
   PrivateOptions,
   WINDOWS,
-  STEP_MARQUEE,
   UPDATE_TIME_ELAPSED,
   UPDATE_WINDOW_POSITIONS,
   SET_VOLUME,
@@ -29,7 +28,6 @@ import { initialTracks, initialState } from "./config";
 import screenshotInitialState from "./screenshotInitialState";
 
 const NOISY_ACTION_TYPES = new Set([
-  STEP_MARQUEE,
   UPDATE_TIME_ELAPSED,
   UPDATE_WINDOW_POSITIONS,
   SET_VOLUME,

packages/webamp/js/actionCreators/index.ts

@@ -12,7 +12,6 @@ import {
   SET_MILKDROP_DESKTOP,
   SET_MILKDROP_FULLSCREEN,
   TOGGLE_PRESET_OVERLAY,
-  STEP_MARQUEE,
   SET_BAND_FOCUS,
 } from "../actionTypes";
 import { WINDOWS } from "../constants";
@@ -215,7 +214,3 @@ export function togglePresetOverlay(): Thunk {
     dispatch({ type: TOGGLE_PRESET_OVERLAY });
   };
 }
-
-export function stepMarquee(): Action {
-  return { type: STEP_MARQUEE };
-}

packages/webamp/js/actionTypes.ts

@@ -17,7 +17,6 @@ export const SET_SCRUB_POSITION = "SET_SCRUB_POSITION";
 export const SET_SKIN_DATA = "SET_SKIN_DATA";
 export const SET_VOLUME = "SET_VOLUME";
 export const START_WORKING = "START_WORKING";
-export const STEP_MARQUEE = "STEP_MARQUEE";
 export const STOP = "STOP";
 export const STOP_WORKING = "STOP_WORKING";
 export const TOGGLE_DOUBLESIZE_MODE = "TOGGLE_DOUBLESIZE_MODE";

packages/webamp/js/components/MainWindow/Marquee.tsx

@@ -2,9 +2,8 @@
 // Knows how to display various modes like tracking, volume, balance, etc.
 import * as React from "react";
 import CharacterString from "../CharacterString";
-import * as Actions from "../../actionCreators";
 import * as Selectors from "../../selectors";
-import { useTypedSelector, useActionCreator } from "../../hooks";
+import { useTypedSelector } from "../../hooks";
 
 const SEPARATOR = "  ***  ";
 
@@ -43,20 +42,24 @@ export const loopText = (text: string): string =>
     : text.padEnd(MARQUEE_MAX_LENGTH, " ");
 
 interface UseStepperArgs {
-  step: () => void;
   dragging: boolean;
+  disableMarquee: boolean;
 }
 
 // Call `step` every second, except when dragging. Resume stepping 1 second after dragging ceases.
-function useStepper({ step, dragging }: UseStepperArgs): void {
+function useStepper({ dragging, disableMarquee }: UseStepperArgs): number {
+  const [currentStep, setStep] = React.useState(0);
   const [stepping, setStepping] = React.useState(true);
   React.useEffect(() => {
-    if (stepping === false) {
+    if (stepping === false || disableMarquee === true) {
       return;
     }
-    const stepHandle = setInterval(step, 220);
+    const stepHandle = setInterval(
+      () => setStep((current) => current + 1),
+      220
+    );
     return () => clearInterval(stepHandle);
-  }, [step, stepping]);
+  }, [stepping, disableMarquee]);
 
   React.useEffect(() => {
     if (dragging) {
@@ -70,6 +73,7 @@ function useStepper({ step, dragging }: UseStepperArgs): void {
       window.clearTimeout(steppingTimeout);
     };
   }, [dragging]);
+  return currentStep;
 }
 
 // When user calls `handleMouseDown`, and moves the mouse, `dragOffset` will update as they drag.
@@ -118,14 +122,12 @@ function useDragX() {
 const Marquee = React.memo(() => {
   const text = useTypedSelector(Selectors.getMarqueeText);
   const doubled = useTypedSelector(Selectors.getDoubled);
-  const marqueeStep = useTypedSelector(Selectors.getMarqueeStep);
-  const stepMarquee = useActionCreator(Actions.stepMarquee);
   const { handleMouseDown, dragOffset, dragging } = useDragX();
+  const disableMarquee = useTypedSelector(Selectors.getDisableMarquee);
+  const marqueeStep = useStepper({ dragging, disableMarquee });
   const offset = stepOffset(text, marqueeStep, dragOffset);
   const offsetPixels = pixelUnits(-offset);
 
-  useStepper({ step: stepMarquee, dragging });
-
   return (
     <div
       id="marquee"

packages/webamp/js/reducers/display.ts

@@ -16,7 +16,6 @@ import {
   OPEN_WINAMP,
   SET_SKIN_DATA,
   START_WORKING,
-  STEP_MARQUEE,
   STOP_WORKING,
   TOGGLE_DOUBLESIZE_MODE,
   TOGGLE_LLAMA_MODE,
@@ -38,7 +37,6 @@ export interface DisplayState {
   doubled: boolean;
   llama: boolean;
   disableMarquee: boolean;
-  marqueeStep: number;
   skinImages: SkinImages;
   skinCursors: Cursors | null;
   skinRegion: SkinRegion;
@@ -131,10 +129,6 @@ const display = (
       return { ...state, doubled: !state.doubled };
     case TOGGLE_LLAMA_MODE:
       return { ...state, llama: !state.llama };
-    case STEP_MARQUEE:
-      return state.disableMarquee
-        ? state
-        : { ...state, marqueeStep: state.marqueeStep + 1 };
     case DISABLE_MARQUEE:
       return { ...state, disableMarquee: true };
     case STOP_WORKING:
@@ -194,7 +188,6 @@ export const getSerializedState = (
     visualizerStyle,
     doubled,
     llama,
-    marqueeStep,
     skinImages,
     skinCursors,
     skinRegion,
@@ -217,7 +210,7 @@ export const getSerializedState = (
     visualizerStyle,
     doubled,
     llama,
-    marqueeStep,
+    marqueeStep: 0, // This is not used any more.
     skinImages,
     skinCursors: newCursors,
     skinRegion,

packages/webamp/js/selectors.ts

@@ -636,6 +636,10 @@ export const getMarqueeText = (state: AppState): string => {
   return defaultText;
 };
 
+export function getDisableMarquee(state: AppState): boolean {
+  return state.display.disableMarquee;
+}
+
 export const getKbps = createSelector(
   getCurrentTrack,
   (track: PlaylistTrack | null): string | null => {
@@ -757,10 +761,6 @@ export function getDummyVizData(state: AppState): DummyVizData | null {
   return state.display.dummyVizData;
 }
 
-export function getMarqueeStep(state: AppState): number {
-  return state.display.marqueeStep;
-}
-
 export function getNetworkConnected(state: AppState): boolean {
   return state.network.connected;
 }

packages/webamp/js/store.ts

@@ -4,14 +4,14 @@ import { composeWithDevTools } from "redux-devtools-extension";
 import reducer from "./reducers";
 import mediaMiddleware from "./mediaMiddleware";
 import { merge } from "./utils";
-import { UPDATE_TIME_ELAPSED, STEP_MARQUEE } from "./actionTypes";
+import { UPDATE_TIME_ELAPSED } from "./actionTypes";
 import Media from "./media";
 import Emitter from "./emitter";
 import { Extras, Dispatch, Action, AppState, Middleware } from "./types";
 
 // TODO: Move to demo
 const compose = composeWithDevTools({
-  actionsBlacklist: [UPDATE_TIME_ELAPSED, STEP_MARQUEE],
+  actionsBlacklist: [UPDATE_TIME_ELAPSED],
 });
 
 export default function (

packages/webamp/js/types.ts

@@ -319,9 +319,6 @@ export type Action =
   | {
       type: "TOGGLE_LLAMA_MODE";
     }
-  | {
-      type: "STEP_MARQUEE";
-    }
   | {
       type: "DISABLE_MARQUEE";
     }