From adda2077e1eec9463777b21f8c1daf21423db401 Mon Sep 17 00:00:00 2001
From: Xin Wang <xin.victorwang@gmail.com>
Date: Thu, 3 Jul 2025 06:28:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=92=AD=E6=94=BE=E5=A3=B0?=
 =?UTF-8?q?=E9=9F=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/video-grid-layout.tsx   | 34 ++++++++++++++--
 components/video-screen-layout.tsx | 62 ++++++++++++++++++++++++++----
 2 files changed, 85 insertions(+), 11 deletions(-)

diff --git a/components/video-grid-layout.tsx b/components/video-grid-layout.tsx
index 63006b3..5665864 100644
--- a/components/video-grid-layout.tsx
+++ b/components/video-grid-layout.tsx
@@ -1,7 +1,7 @@
 'use client'; // Add this to ensure it's a client component
 
 import React, { useState } from 'react';
-import { Edit2, Trash2, Play } from 'lucide-react';
+import { Edit2, Trash2, Play, Volume2, VolumeX } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import dynamic from 'next/dynamic';
 
@@ -19,6 +19,7 @@ interface VideoGridLayoutProps {
 function VideoGridLayoutComponent({ videos, onEdit, onDelete }: VideoGridLayoutProps) {
   const [hoveredId, setHoveredId] = useState<string | null>(null);
   const [isPlaying, setIsPlaying] = useState<{ [key: string]: boolean }>({});
+  const [isMuted, setIsMuted] = useState<{ [key: string]: boolean }>({});
 
   const handleMouseEnter = (id: string) => {
     setHoveredId(id);
@@ -26,11 +27,13 @@ function VideoGridLayoutComponent({ videos, onEdit, onDelete }: VideoGridLayoutP
 
   const handleMouseLeave = (id: string) => {
     setHoveredId(null);
-    // 暂停视频
+    // 暂停视频并重新静音以便下次预览
     const video = document.getElementById(`video-${id}`) as HTMLVideoElement;
     if (video) {
       video.pause();
+      video.muted = true;
       setIsPlaying(prev => ({ ...prev, [id]: false }));
+      setIsMuted(prev => ({ ...prev, [id]: true }));
     }
   };
 
@@ -38,8 +41,11 @@ function VideoGridLayoutComponent({ videos, onEdit, onDelete }: VideoGridLayoutP
     const video = document.getElementById(`video-${id}`) as HTMLVideoElement;
     if (video) {
       if (video.paused) {
+        // 在用户主动播放时取消静音
+        video.muted = false;
         video.play();
         setIsPlaying(prev => ({ ...prev, [id]: true }));
+        setIsMuted(prev => ({ ...prev, [id]: false }));
       } else {
         video.pause();
         setIsPlaying(prev => ({ ...prev, [id]: false }));
@@ -47,6 +53,15 @@ function VideoGridLayoutComponent({ videos, onEdit, onDelete }: VideoGridLayoutP
     }
   };
 
+  const toggleMute = (id: string, event: React.MouseEvent) => {
+    event.stopPropagation(); // 防止触发父元素的点击事件
+    const video = document.getElementById(`video-${id}`) as HTMLVideoElement;
+    if (video) {
+      video.muted = !video.muted;
+      setIsMuted(prev => ({ ...prev, [id]: video.muted }));
+    }
+  };
+
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
       {videos.map((video) => (
@@ -64,7 +79,7 @@ function VideoGridLayoutComponent({ videos, onEdit, onDelete }: VideoGridLayoutP
               suppressHydrationWarning
               className="w-full h-full object-cover"
               loop
-              muted
+              muted={isMuted[video.id] !== false} // 默认静音，除非明确设置为false
               playsInline
             />
             
@@ -86,6 +101,19 @@ function VideoGridLayoutComponent({ videos, onEdit, onDelete }: VideoGridLayoutP
                 ${hoveredId === video.id ? 'translate-y-0 opacity-100' : 'translate-y-[-10px] opacity-0'}
               `}
             >
+              <Button
+                variant="ghost"
+                size="icon"
+                className="w-8 h-8 rounded-full bg-black/40 hover:bg-black/60 backdrop-blur-sm"
+                onClick={(e) => toggleMute(video.id, e)}
+                title={isMuted[video.id] !== false ? "取消静音" : "静音"}
+              >
+                {isMuted[video.id] !== false ? (
+                  <VolumeX className="w-4 h-4 text-white" />
+                ) : (
+                  <Volume2 className="w-4 h-4 text-white" />
+                )}
+              </Button>
               <Button
                 variant="ghost"
                 size="icon"
diff --git a/components/video-screen-layout.tsx b/components/video-screen-layout.tsx
index 7b1902e..b5c50cc 100644
--- a/components/video-screen-layout.tsx
+++ b/components/video-screen-layout.tsx
@@ -1,7 +1,7 @@
 'use client'; // Add this to ensure it's a client component
 
 import React, { useState, useRef, useEffect } from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Volume2, VolumeX } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import dynamic from 'next/dynamic';
 
@@ -16,8 +16,17 @@ interface VideoScreenLayoutProps {
 function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isAnimating, setIsAnimating] = useState(false);
+  const [isMuted, setIsMuted] = useState(true); // 默认静音
   const containerRef = useRef<HTMLDivElement>(null);
 
+  // 初始化时同步第一个视频的状态
+  useEffect(() => {
+    const currentVideo = document.getElementById(`video-screen-${currentIndex}`) as HTMLVideoElement;
+    if (currentVideo) {
+      setIsMuted(currentVideo.muted);
+    }
+  }, [currentIndex]);
+
   // 计算每个面板的样式
   const getPanelStyle = (index: number) => {
     const position = index - currentIndex;
@@ -44,6 +53,15 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
     };
   };
 
+  // 切换静音状态
+  const toggleMute = () => {
+    const currentVideo = document.getElementById(`video-screen-${currentIndex}`) as HTMLVideoElement;
+    if (currentVideo) {
+      currentVideo.muted = !currentVideo.muted;
+      setIsMuted(currentVideo.muted);
+    }
+  };
+
   // 处理切换
   const handleSlide = (direction: 'prev' | 'next') => {
     if (isAnimating) return;
@@ -55,8 +73,15 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
     
     setCurrentIndex(newIndex);
     
-    // 动画结束后重置状态
-    setTimeout(() => setIsAnimating(false), 500);
+    // 动画结束后重置状态并同步新视频的静音状态
+    setTimeout(() => {
+      setIsAnimating(false);
+      // 同步新视频的静音状态到UI
+      const newVideo = document.getElementById(`video-screen-${newIndex}`) as HTMLVideoElement;
+      if (newVideo) {
+        setIsMuted(newVideo.muted);
+      }
+    }, 500);
   };
 
   return (
@@ -79,20 +104,41 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
             <div className="relative w-full h-full overflow-hidden rounded-lg">
               {/* 视频 - Add suppressHydrationWarning to prevent className mismatch warnings */}
               <video
+                id={`video-screen-${index}`}
                 src={video.url}
                 suppressHydrationWarning
                 className="w-full h-full object-cover"
                 autoPlay
                 loop
-                muted
+                muted={index === currentIndex ? isMuted : true} // 只有当前视频受状态控制
                 playsInline
               />
               
-              {/* 视频标题 - 只在中间面板显示 */}
+              {/* 视频标题和控制 - 只在中间面板显示 */}
               {index === currentIndex && (
-                <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
-                  <h3 className="text-white text-lg font-medium">{video.title}</h3>
-                </div>
+                <>
+                  {/* 音量控制按钮 */}
+                  <div className="absolute top-4 right-4">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="w-10 h-10 rounded-full bg-black/40 hover:bg-black/60 backdrop-blur-sm"
+                      onClick={toggleMute}
+                      title={isMuted ? "取消静音" : "静音"}
+                    >
+                      {isMuted ? (
+                        <VolumeX className="w-5 h-5 text-white" />
+                      ) : (
+                        <Volume2 className="w-5 h-5 text-white" />
+                      )}
+                    </Button>
+                  </div>
+                  
+                  {/* 视频标题 */}
+                  <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
+                    <h3 className="text-white text-lg font-medium">{video.title}</h3>
+                  </div>
+                </>
               )}
 
               {/* 玻璃态遮罩 - 侧面板半透明效果 */}