add notice to refresh

Specy · Jul 6, 2024 · f463f7f · f463f7f
1 parent c3ac0ea
commit f463f7f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 6 deletions.
diff --git a/src/components/pages/Player/PlayerKeyboard.tsx b/src/components/pages/Player/PlayerKeyboard.tsx
@@ -180,7 +180,8 @@ export default class KeyboardPlayer extends Component<KeyboardPlayerProps, Keybo
             notes.push(obj)
         }
         await delay(2000) //add an initial delay to let the user prepare
-        playerControlsStore.setSong(song)
+        //not sure why i even save the song, i dont use it anywhere
+        //playerControlsStore.setSong(song)
         playerControlsStore.clearPages()
         playerControlsStore.resetScore()
         this.setState({

diff --git a/src/components/pages/Player/PlayerSlider.tsx b/src/components/pages/Player/PlayerSlider.tsx
@@ -9,7 +9,11 @@ import sl from "./Slider.module.css"
 import {setTimeout} from "worker-timers";
 
 
-export function _PlayerSlider() {
+interface PlayerSliderProps{
+    onChange?: (start: number, end: number) => void
+}
+
+export function _PlayerSlider({onChange}: PlayerSliderProps) {
     const sliderState = useObservableObject(playerControlsStore.state)
     const [selectedThumb, setSelectedThumb] = useState<'start' | 'end' | null>(null)
     const [inputDimension, setInputDimension] = useState(DEFAULT_DOM_RECT)
@@ -39,6 +43,7 @@ export function _PlayerSlider() {
         } else {
             playerControlsStore.setState({end: Math.min(sliderState.size, Math.max(val, sliderState.position))})
         }
+        onChange?.(playerControlsStore.current, playerControlsStore.end)
     }
 
     const handleSliderClick = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -84,6 +89,8 @@ export function _PlayerSlider() {
         } else {
             if (value - sliderState.position > 1) playerControlsStore.setState({end: value})
         }
+        onChange?.(playerControlsStore.current, playerControlsStore.end)
+
     }
     const start = sliderState.size !== 0 ? sliderState.position / sliderState.size * 100 : 0
     const end = sliderState.size !== 0 ? sliderState.end / sliderState.size * 100 : 100
@@ -139,4 +146,6 @@ export function _PlayerSlider() {
     </>
 }
 
-export const PlayerSlider = memo(_PlayerSlider, () => true)
+export const PlayerSlider = memo(_PlayerSlider, (p,v) => {
+    return p.onChange === v.onChange
+})
diff --git a/src/components/pages/Player/PlayerSongControls.tsx b/src/components/pages/Player/PlayerSongControls.tsx
@@ -1,7 +1,7 @@
 import {SPEED_CHANGERS} from "$config"
 import {MemoizedIcon} from "$cmp/shared/Utility/Memoized";
 import {FaEye, FaEyeSlash, FaStop} from "react-icons/fa";
-import {ChangeEvent, memo} from "react";
+import {ChangeEvent, memo, useCallback, useEffect, useState} from "react";
 import {playerStore} from "$stores/PlayerStore";
 import {playerControlsStore} from "$stores/PlayerControlsStore";
 import {hasTooltip, Tooltip} from '$cmp/shared/Utility/Tooltip'
@@ -50,8 +50,17 @@ function _PlayerSongControls({
                                  hidePracticeNotes,
                                  setHidePracticeNotes,
                              }: PlayerSongControlsProps) {
+    const [needsRefresh, setNeedsRefresh] = useState(false)
     const songData = useObservableObject(playerStore.state)
     const {t} = useTranslation(["player", 'common', "settings", "shortcuts"])
+
+    const toggleNeedsRefresh = useCallback(() => {
+        setNeedsRefresh(true)
+    }, [])
+
+    useEffect(() => {
+        setNeedsRefresh(false)
+    }, [songData.key]);
     return <>
         {songData.eventType === 'approaching' &&
             <Score/>
@@ -126,9 +135,11 @@ function _PlayerSongControls({
                     </IconButton>
                 </div>
 
-                <PlayerSlider/>
-
+                <PlayerSlider
+                    onChange={toggleNeedsRefresh}
+                />
                 <IconButton
+                    toggled={needsRefresh}
                     onClick={onRestart}
                     tooltip={t('shortcuts:props.restart')}
                     ariaLabel={t("shortcuts:props.restart_description")}

diff --git a/src/stores/PlayerStore.ts b/src/stores/PlayerStore.ts
@@ -8,6 +8,7 @@ type eventType = "play" | "practice" | "approaching" | "stop"
 type SongTypes = RecordedSong | ComposedSong | null
 type SongTypesNonNull = RecordedSong | ComposedSong
 type PlayerStoreState = {
+    key: number
     song: SongTypes,
     playId: number,
     eventType: eventType,
@@ -18,6 +19,7 @@ type PlayerStoreState = {
 class PlayerStore {
     @observable
     state: PlayerStoreState = {
+        key: 0,
         song: null,
         playId: 0,
         eventType: 'stop',
@@ -72,6 +74,7 @@ class PlayerStore {
             start,
             eventType: 'play',
             end,
+            key: this.state.key + 1,
             playId: this.state.playId + 1
         })
     }
@@ -81,6 +84,7 @@ class PlayerStore {
             start,
             eventType: 'practice',
             end,
+            key: this.state.key + 1,
             playId: this.state.playId + 1
         })
     }
@@ -90,6 +94,7 @@ class PlayerStore {
             start,
             eventType: 'approaching',
             end,
+            key: this.state.key + 1,
             playId: this.state.playId + 1
         })
     }
@@ -99,13 +104,15 @@ class PlayerStore {
             eventType: 'stop',
             start: 0,
             end: 0,
+            key: this.state.key + 1,
             playId: 0
         })
     }
     restartSong = (start: number, end: number) => {
         this.setState({
             start,
             end,
+            key: this.state.key + 1,
             playId: this.state.playId + 1
         })
     }