fix: playbackrate on mobile

This commit is contained in:
shinya
2025-07-05 13:22:28 +08:00
parent b984a078f9
commit ab73df1d6c

View File

@@ -196,6 +196,8 @@ function PlayPageClient() {
// 长按三倍速相关 // 长按三倍速相关
const longPressTimeoutRef = useRef<NodeJS.Timeout | null>(null); const longPressTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const normalPlaybackRateRef = useRef<number>(1); const normalPlaybackRateRef = useRef<number>(1);
// 标记长按是否已生效
const longPressActiveRef = useRef<boolean>(false);
// 同步最新值到 refs // 同步最新值到 refs
useEffect(() => { useEffect(() => {
@@ -1065,6 +1067,7 @@ function PlayPageClient() {
if (playerRef.current) { if (playerRef.current) {
normalPlaybackRateRef.current = playerRef.current.playbackRate || 1; normalPlaybackRateRef.current = playerRef.current.playbackRate || 1;
playerRef.current.playbackRate = 3.0; playerRef.current.playbackRate = 3.0;
longPressActiveRef.current = true; // 记录长按已激活
displayShortcutHint('3倍速', 'play'); displayShortcutHint('3倍速', 'play');
} }
}, 300); // 按压 300ms 触发 }, 300); // 按压 300ms 触发
@@ -1075,8 +1078,10 @@ function PlayPageClient() {
clearTimeout(longPressTimeoutRef.current); clearTimeout(longPressTimeoutRef.current);
longPressTimeoutRef.current = null; longPressTimeoutRef.current = null;
} }
if (playerRef.current) { // 只有在长按激活过且当前倍速为 3.0 时才恢复,防止误触
if (playerRef.current && longPressActiveRef.current) {
playerRef.current.playbackRate = normalPlaybackRateRef.current || 1; playerRef.current.playbackRate = normalPlaybackRateRef.current || 1;
longPressActiveRef.current = false;
} }
}; };
@@ -1870,7 +1875,7 @@ const PlaybackRateButton = ({
className='vds-radio-group' className='vds-radio-group'
aria-label='Custom Options' aria-label='Custom Options'
value={rate.toString()} value={rate.toString()}
onChange={(value) => { onChange={(value: string) => {
const player = playerRef.current; const player = playerRef.current;
if (!player) { if (!player) {
return; return;
@@ -1879,7 +1884,7 @@ const PlaybackRateButton = ({
playerContainerRef.current?.focus(); playerContainerRef.current?.focus();
}} }}
> >
{rates.reverse().map((rate) => ( {[...rates].reverse().map((rate) => (
<RadioGroup.Item <RadioGroup.Item
className='vds-radio' className='vds-radio'
value={rate.toString()} value={rate.toString()}
@@ -1904,7 +1909,7 @@ const FavoriteIcon = ({ filled }: { filled: boolean }) => {
xmlns='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg'
> >
<path <path
d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z' d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.41-1.41L7.83 13H20v-2z'
fill='#ef4444' /* Tailwind red-500 */ fill='#ef4444' /* Tailwind red-500 */
stroke='#ef4444' stroke='#ef4444'
strokeWidth='2' strokeWidth='2'