feat(player): raise the playback speed ceiling off YouTube's limit

A single speed ladder fed both players, so the 2x cap that YouTube's
iframe API enforces also applied to Bunny and R2, which are plain <video>
elements the browser will play far faster. Pick the ladder per provider:
YouTube keeps 0.25x-2x, the native ones go up to 16x, where Chrome and
Firefox clamp playbackRate. The picker labels everything past 4x as
"no audio", since that is where the browsers stop pitch-correcting and
drop the audio track.
This commit is contained in:
2026-08-20 10:50:42 +03:00
parent 4d9d35164f
commit 7b7b1d21b2
5 changed files with 73 additions and 8 deletions
+4 -4
View File
@@ -39,6 +39,7 @@ import type {
import { useApprovals } from '@/components/video-page/hooks/use-approvals';
import { useVideoAssets } from '@/components/video-page/hooks/use-video-assets';
import { resolvePublicBunnyCdnHostname } from '@/lib/bunny-cdn';
import { getSpeedOptionsForProvider } from '@/components/video-page/hooks/video-player-utils';
function formatTime(seconds: number): string {
const totalSeconds = Math.floor(seconds);
@@ -64,8 +65,6 @@ function formatBunnyQualityLabel(
return `Level ${index + 1}`;
}
const SPEED_OPTIONS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
export type VideoPageMode = 'dashboard' | 'watch';
interface VideoPageContentProps {
@@ -275,6 +274,7 @@ export function VideoPageContent({
);
}, [video?.versions, activeVersionId]);
const activeProviderId = activeVersion?.providerId;
const speedOptions = getSpeedOptionsForProvider(activeProviderId);
const activeVersionDuration = activeVersion?.duration;
const bunnyCdnHostname = useMemo(() => resolvePublicBunnyCdnHostname(), []);
const embedUrl = useMemo(() => {
@@ -354,7 +354,7 @@ export function VideoPageContent({
playerRef,
formatTime,
formatBunnyQualityLabel,
speedOptions: SPEED_OPTIONS,
speedOptions,
scheduleWatchProgressSaveRef,
setViewingAnnotation,
});
@@ -819,7 +819,7 @@ export function VideoPageContent({
qualityOptions={qualityOptions}
handleQualityChange={handleQualityChange}
playbackSpeed={playbackSpeed}
speedOptions={SPEED_OPTIONS}
speedOptions={speedOptions}
handleSpeedChange={handleSpeedChange}
toggleFullscreen={toggleFullscreen}
showComments={showComments}