From e1f4a6ed88ba11bd2c908c895caaeabef2a28ddc Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Wed, 10 Feb 2021 22:31:09 -0800 Subject: [PATCH] Pull marquee stepping out of Redux --- packages/webamp/demo/js/Webamp.ts | 1 - packages/webamp/demo/js/webampConfig.ts | 2 -- packages/webamp/js/actionCreators/index.ts | 5 ---- packages/webamp/js/actionTypes.ts | 1 - .../js/components/MainWindow/Marquee.tsx | 24 ++++++++++--------- packages/webamp/js/reducers/display.ts | 9 +------ packages/webamp/js/selectors.ts | 8 +++---- packages/webamp/js/store.ts | 4 ++-- packages/webamp/js/types.ts | 3 --- 9 files changed, 20 insertions(+), 37 deletions(-) diff --git a/packages/webamp/demo/js/Webamp.ts b/packages/webamp/demo/js/Webamp.ts index 87bfbd5d03..37701d0bd0 100644 --- a/packages/webamp/demo/js/Webamp.ts +++ b/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, diff --git a/packages/webamp/demo/js/webampConfig.ts b/packages/webamp/demo/js/webampConfig.ts index f4fb881d8a..7b3935cc8f 100644 --- a/packages/webamp/demo/js/webampConfig.ts +++ b/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, diff --git a/packages/webamp/js/actionCreators/index.ts b/packages/webamp/js/actionCreators/index.ts index f8595e7c4e..ef8cae84ab 100644 --- a/packages/webamp/js/actionCreators/index.ts +++ b/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 }; -} diff --git a/packages/webamp/js/actionTypes.ts b/packages/webamp/js/actionTypes.ts index 2e129a1aba..3818b65caf 100644 --- a/packages/webamp/js/actionTypes.ts +++ b/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"; diff --git a/packages/webamp/js/components/MainWindow/Marquee.tsx b/packages/webamp/js/components/MainWindow/Marquee.tsx index 51bf46d89c..e54a585c1d 100644 --- a/packages/webamp/js/components/MainWindow/Marquee.tsx +++ b/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 (
{ 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; } diff --git a/packages/webamp/js/store.ts b/packages/webamp/js/store.ts index c013db24c6..22f9591d02 100644 --- a/packages/webamp/js/store.ts +++ b/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 ( diff --git a/packages/webamp/js/types.ts b/packages/webamp/js/types.ts index 2199d62fb1..31350a20ed 100644 --- a/packages/webamp/js/types.ts +++ b/packages/webamp/js/types.ts @@ -319,9 +319,6 @@ export type Action = | { type: "TOGGLE_LLAMA_MODE"; } - | { - type: "STEP_MARQUEE"; - } | { type: "DISABLE_MARQUEE"; }