diff --git a/src/components/YouTubePlayer.css b/src/components/YouTubePlayer.css index d8c6988..cea53bb 100644 --- a/src/components/YouTubePlayer.css +++ b/src/components/YouTubePlayer.css @@ -390,6 +390,20 @@ background-color: #3b82f6; } +.speed-btn { + background-color: #3b3b3b; + min-width: 60px; +} + +.speed-btn.active { + background-color: #f59e0b; + color: #000; +} + +.speed-btn.active:hover:not(:disabled) { + background-color: #fbbf24; +} + .loading-text { color: #888; font-style: italic; diff --git a/src/components/YouTubePlayer.jsx b/src/components/YouTubePlayer.jsx index 3ca2be5..0b44352 100644 --- a/src/components/YouTubePlayer.jsx +++ b/src/components/YouTubePlayer.jsx @@ -42,6 +42,8 @@ export default function YouTubePlayer() { const localVideo1Ref = useRef(null); const localVideo2Ref = useRef(null); const [isPlaying, setIsPlaying] = useState(false); + const [playbackRate, setPlaybackRate] = useState(1); + const playbackRateRef = useRef(1); const [isReady, setIsReady] = useState(false); const [duration, setDuration] = useState(0); const [currentTime, setCurrentTime] = useState(0); @@ -326,13 +328,35 @@ export default function YouTubePlayer() { }; + const applyPlaybackRate = useCallback((rate) => { + if (youtubePlayerRef.current && youtubePlayerRef.current.setPlaybackRate) { + youtubePlayerRef.current.setPlaybackRate(rate); + } + if (localVideo1Ref.current) { + localVideo1Ref.current.playbackRate = rate; + } + if (localVideo2Ref.current) { + localVideo2Ref.current.playbackRate = rate; + } + }, []); + + const handleToggleSpeed = () => { + const newRate = playbackRateRef.current === 1 ? 0.5 : 1; + playbackRateRef.current = newRate; + setPlaybackRate(newRate); + applyPlaybackRate(newRate); + }; + const playAllLocalVideos = () => { + const rate = playbackRateRef.current; if (localVideo1Ref.current) { localVideo1Ref.current.muted = true; + localVideo1Ref.current.playbackRate = rate; localVideo1Ref.current.play(); } if (localVideo2Ref.current) { localVideo2Ref.current.muted = true; + localVideo2Ref.current.playbackRate = rate; localVideo2Ref.current.play(); } }; @@ -425,6 +449,9 @@ export default function YouTubePlayer() { // Play all videos if (youtubePlayerRef.current && isReady) { youtubePlayerRef.current.playVideo(); + if (youtubePlayerRef.current.setPlaybackRate) { + youtubePlayerRef.current.setPlaybackRate(playbackRateRef.current); + } } playAllLocalVideos(); }; @@ -810,6 +837,14 @@ export default function YouTubePlayer() { > {isPlaying ? '⏸ Pause' : '▶ Play'} + {isProcessingPlayback && (

Processing video for mobile playback. This may take a few minutes for long recordings.