diff --git a/src/renderer/src/BottomBar.tsx b/src/renderer/src/BottomBar.tsx index cfc92a6e..806a0951 100644 --- a/src/renderer/src/BottomBar.tsx +++ b/src/renderer/src/BottomBar.tsx @@ -1,4 +1,4 @@ -import { CSSProperties, ClipboardEvent, Dispatch, FormEvent, SetStateAction, memo, useCallback, useEffect, useMemo, useState } from 'react'; +import { CSSProperties, ClipboardEvent, Dispatch, FormEvent, SetStateAction, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { motion } from 'framer-motion'; import { MdRotate90DegreesCcw } from 'react-icons/md'; import { useTranslation } from 'react-i18next'; @@ -287,6 +287,11 @@ function BottomBar({ if (newRate != null) setOutputPlaybackRate(newRate); }, [detectedFps, outputPlaybackRate, setOutputPlaybackRate]); + const playbackRateRef = useRef(null); + useEffect(() => { + playbackRateRef.current?.animate([{ transform: 'scale(1.7)', color: 'var(--gray12)' }, {}], { duration: 200 }); + }, [playbackRate]); + function renderJumpCutpointButton(direction: number) { const newIndex = currentSegIndexSafe + direction; const seg = cutSegments[newIndex]; @@ -470,7 +475,7 @@ function BottomBar({ -
{playbackRate.toFixed(1)}
+
{playbackRate.toFixed(1)}
)}