diff --git a/src/components/pages/Player/PlayerKeyboard.tsx b/src/components/pages/Player/PlayerKeyboard.tsx index ad39d3cd..13b7dcc7 100644 --- a/src/components/pages/Player/PlayerKeyboard.tsx +++ b/src/components/pages/Player/PlayerKeyboard.tsx @@ -180,7 +180,8 @@ export default class KeyboardPlayer extends Component 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) => { @@ -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) \ No newline at end of file +export const PlayerSlider = memo(_PlayerSlider, (p,v) => { + return p.onChange === v.onChange +}) \ No newline at end of file diff --git a/src/components/pages/Player/PlayerSongControls.tsx b/src/components/pages/Player/PlayerSongControls.tsx index 16bbdb61..fc8fcd3a 100644 --- 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' && @@ -126,9 +135,11 @@ function _PlayerSongControls({ - - +