diff --git a/components/video-screen-layout.tsx b/components/video-screen-layout.tsx index 00e7c51..d2e8f5d 100644 --- a/components/video-screen-layout.tsx +++ b/components/video-screen-layout.tsx @@ -1,6 +1,6 @@ 'use client'; // Add this to ensure it's a client component -import React, { useState, useRef, useEffect } from 'react'; +import React, { useState, useRef, useEffect, useCallback } from 'react'; import { ChevronLeft, ChevronRight, Volume2, VolumeX, Play, Pause } from 'lucide-react'; import { Button } from '@/components/ui/button'; import dynamic from 'next/dynamic'; @@ -76,15 +76,15 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) { }; // 应用音量设置到视频元素 - const applyVolumeSettings = (videoElement: HTMLVideoElement) => { + const applyVolumeSettings = useCallback((videoElement: HTMLVideoElement) => { if (videoElement) { videoElement.volume = volume; videoElement.muted = isMuted; } - }; + }, [volume, isMuted]); // 处理切换 - const handleSlide = (direction: 'prev' | 'next') => { + const handleSlide = useCallback((direction: 'prev' | 'next') => { if (isAnimating) return; setIsAnimating(true); @@ -112,7 +112,7 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) { } } }, 500); - }; + }, [isAnimating, currentIndex, videos.length, isPlaying, applyVolumeSettings]); // 音量设置变化时应用到当前视频 useEffect(() => { @@ -120,7 +120,7 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) { if (currentVideo) { applyVolumeSettings(currentVideo); } - }, [volume, isMuted, currentIndex]); + }, [volume, isMuted, currentIndex, applyVolumeSettings]); // 播放状态变化时应用到当前视频 useEffect(() => { @@ -142,6 +142,33 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) { setIsPlaying(!isPlaying); }; + // 键盘事件监听器 - 添加左右箭头键控制 + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + // 检查是否正在动画中,如果是则不处理 + if (isAnimating) return; + + switch (event.key) { + case 'ArrowLeft': + event.preventDefault(); // 阻止默认行为 + handleSlide('prev'); + break; + case 'ArrowRight': + event.preventDefault(); // 阻止默认行为 + handleSlide('next'); + break; + } + }; + + // 添加键盘事件监听器 + window.addEventListener('keydown', handleKeyDown); + + // 清理函数 - 组件卸载时移除监听器 + return () => { + window.removeEventListener('keydown', handleKeyDown); + }; + }, [isAnimating, handleSlide]); // 添加handleSlide到依赖项 + return (