Split out redux from Music Lab timeline

apps/src/music/views/MusicLabView.tsx

@@ -278,7 +278,7 @@ const MusicLabView: React.FunctionComponent<MusicLabViewProps> = ({
     () => progressManager?.resetValidation(),
     [progressManager]
   );
-  usePlaybackUpdate(doPlaybackUpdate, resetValidation);
+  usePlaybackUpdate(isPlaying, doPlaybackUpdate, resetValidation);
 
   const onInstructionsTextClick = useCallback(
     (id: string) => {

apps/src/music/views/Timeline/TimelineContext.ts

@@ -0,0 +1,10 @@
+import {createContext} from 'react';
+
+import useRequiredContext from '@cdo/apps/util/hooks/useRequiredContext';
+
+import {TimelineProps} from './TimelineUI';
+
+export const TimelineContext = createContext<TimelineProps | null>(null);
+
+export const useTimelineContext = () =>
+  useRequiredContext(TimelineContext, 'TimelineContext');

apps/src/music/views/Timeline/TimelineElement.tsx

@@ -1,14 +1,13 @@
 import classNames from 'classnames';
 import React from 'react';
-import {useDispatch} from 'react-redux';
 
 import {isChordEvent} from '@cdo/apps/music/player/interfaces/ChordEvent';
 import {isInstrumentEvent} from '@cdo/apps/music/player/interfaces/InstrumentEvent';
 import {PlaybackEvent} from '@cdo/apps/music/player/interfaces/PlaybackEvent';
 import {isSoundEvent} from '@cdo/apps/music/player/interfaces/SoundEvent';
-import {selectBlockId} from '@cdo/apps/music/redux/musicRedux';
 import SoundStyle from '@cdo/apps/music/utils/SoundStyle';
-import {useAppSelector} from '@cdo/apps/util/reduxHooks';
+
+import {useTimelineContext} from './TimelineContext';
 
 import moduleStyles from './timeline.module.scss';
 
@@ -34,23 +33,18 @@ const TimelineElement: React.FunctionComponent<TimelineElementProps> = ({
   top,
   left,
 }) => {
-  const isPlaying = useAppSelector(state => state.music.isPlaying);
-  const selectedBlockId = useAppSelector(state => state.music.selectedBlockId);
-  const dispatch = useDispatch();
+  const {isPlaying, selectedBlockId, currentPlayheadPosition, selectBlockId} =
+    useTimelineContext();
   const isInsideRandom = eventData.skipContext?.insideRandom;
   const isSkipSound = isPlaying && eventData.skipContext?.skipSound;
   const isThinBorder = height <= 4;
 
-  const isCurrentlyPlaying = useAppSelector(state => {
-    const currentPlayheadPosition = state.music.currentPlayheadPosition;
-    return (
-      isPlaying &&
-      !isSkipSound &&
-      currentPlayheadPosition !== 0 &&
-      currentPlayheadPosition >= eventData.when &&
-      currentPlayheadPosition < eventData.when + eventData.length
-    );
-  });
+  const isCurrentlyPlaying =
+    isPlaying &&
+    !isSkipSound &&
+    currentPlayheadPosition !== 0 &&
+    currentPlayheadPosition >= eventData.when &&
+    currentPlayheadPosition < eventData.when + eventData.length;
 
   const isBlockSelected = eventData.blockId === selectedBlockId;
 
@@ -90,7 +84,7 @@ const TimelineElement: React.FunctionComponent<TimelineElementProps> = ({
         left,
       }}
       onClick={event => {
-        dispatch(selectBlockId(eventData.blockId));
+        selectBlockId?.(eventData.blockId);
         event.stopPropagation();
       }}
     >

apps/src/music/views/Timeline/TimelineSampleEvents.jsx

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, {useRef} from 'react';
-import {useSelector} from 'react-redux';
 
 import UniqueSounds from '@cdo/apps/music/utils/UniqueSounds';
 
+import {useTimelineContext} from './TimelineContext';
 import TimelineElement from './TimelineElement';
 
 /**
@@ -16,7 +16,7 @@ const TimelineSampleEvents = ({
   getEventHeight,
   getEventVerticalSpace,
 }) => {
-  const soundEvents = useSelector(state => state.music.playbackEvents);
+  const {playbackEvents: soundEvents} = useTimelineContext();
 
   const uniqueSoundsRef = useRef(new UniqueSounds());
   // Let's cache the value of getUniqueSounds() so that the various helpers

apps/src/music/views/Timeline/TimelineSimple2Events.tsx

@@ -6,8 +6,8 @@ import {collectBlockIdsRecursively} from '@cdo/apps/music/blockly/blockUtils';
 import {MAX_FUNCTION_BOUNDS_RENDER_DEPTH} from '@cdo/apps/music/constants';
 import {FunctionEvents} from '@cdo/apps/music/player/interfaces/FunctionEvents';
 import {PlaybackEvent} from '@cdo/apps/music/player/interfaces/PlaybackEvent';
-import {useAppSelector} from '@cdo/apps/util/reduxHooks';
 
+import {useTimelineContext} from './TimelineContext';
 import TimelineElement from './TimelineElement';
 
 const timelineLayoutParam = AppConfig.getValue('timeline-layout');
@@ -199,9 +199,8 @@ const TimelineSimple2Events: React.FunctionComponent<
   getEventHeight,
   getEventVerticalSpace,
 }) => {
-  const soundEventsOriginal = useAppSelector(
-    state => state.music.playbackEvents
-  );
+  const {playbackEvents: soundEventsOriginal, orderedFunctions} =
+    useTimelineContext();
 
   // soundEventsOriginal has sounds sorted primarily by the immediate function
   // that generates them, and next by when they are played.
@@ -216,10 +215,6 @@ const TimelineSimple2Events: React.FunctionComponent<
     soundEvents = getOrderedByWhenSoundEvents(soundEventsOriginal);
   }
 
-  const orderedFunctions = useAppSelector(
-    state => state.music.orderedFunctions
-  );
-
   // Generate a list of unique sounds, with uniqueness being a combination of
   // the function name and the sound ID.
   // Let's cache the value of currentUniqueSounds so that the various helpers