From d7a70d5e25d2124eef8fb77962c0189117a5cb49 Mon Sep 17 00:00:00 2001
From: Tinie13 <zhangmj198@163.com>
Date: Mon, 6 May 2024 13:51:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9A=82=E5=81=9C=E9=99=A4=E5=BD=93?=
 =?UTF-8?q?=E5=89=8D=E9=80=89=E4=B8=AD=E4=B9=8B=E5=A4=96=E7=9A=84=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/HomeCardPlayer.astro | 45 +++++++++++++++---------
 src/pages/en/index.astro                 |  2 ++
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/home/HomeCardPlayer.astro b/src/components/home/HomeCardPlayer.astro
index 9e4df9b602a..b5c9a479ea5 100644
--- a/src/components/home/HomeCardPlayer.astro
+++ b/src/components/home/HomeCardPlayer.astro
@@ -23,13 +23,13 @@ const t = useTranslations(Astro);
             <>
               <input
                 type="radio"
-                name="silder"
-                id={`c${index}`}
+                name="player"
+                id={`i${index}`}
                 
               />
               <label
-                input-id={`c${index}`}
-                for={`c${index}`}
+                input-id={`i${index}`}
+                for={`i${index}`}
                 class="card overflow-hidden flex flex-col justify-between cursor-pointer rounded-3xl mx-2 relative"
               >
                 
@@ -96,8 +96,8 @@ const t = useTranslations(Astro);
     constructor() {
       super();
       // 初始化时不要访问 DOM 或设置属性
-      this.currentInputid = "c0";
-        this.flag = true;
+      this.currentId = "i0";
+        this.flagState = true;
         // 由于在 constructor 中无法访问 DOM，所以不在这里绑定事件
     }
     toggleFullScreen(videoElement) {
@@ -133,6 +133,7 @@ const t = useTranslations(Astro);
         const videos = this.querySelectorAll('video');
         // 设置初始选中的输入元素为checked
         _this.setInitialCheckedState();
+        
         if (this.cardSolution) {
             this.cardSolution.addEventListener("click", function(e) {
                 _this.selectedLabel(e);
@@ -144,7 +145,7 @@ const t = useTranslations(Astro);
           video.addEventListener('play', (e) => this.onPlay(e));
           video.addEventListener('pause', (e) => this.onPause(e));
         });
-        
+
         // 绑定单个事件监听器到容器上
       this.cardSolution.addEventListener('click', e => {
         // 对播放按钮的点击操作
@@ -170,7 +171,7 @@ const t = useTranslations(Astro);
     }
     // 设置第一个input 默认选中
     setInitialCheckedState() {
-      let initialInput = this.querySelector('input[type=radio]#c0');
+      let initialInput = this.querySelector('input[type=radio]#i0');
       if (initialInput) {
         initialInput.checked = true;
       }
@@ -180,19 +181,31 @@ const t = useTranslations(Astro);
     toggleVideoPlay(e) {
       const videoId = e.target.closest('[video-id]').getAttribute('video-id');
       const video = this.querySelector(`#${videoId}`);
-      const playIcon = e.target.closest('.video-play-bt').querySelector('.play-icon');
-      const pauseIcon = e.target.closest('.video-play-bt').querySelector('.pause-icon');
       if (video) {
         if (video.paused) {
+          // 在播放当前视频前，先暂停其他所有视频
+          this.pauseOtherVideos(videoId);
           video.play();
-          this.onPlay(e)
+          this.onPlay(e);
         } else {
           video.pause();
-          this.onPause(e)
+          this.onPause(e);
         }
       }
     }
 
+    // 暂停除当前选中之外的所有视频
+    pauseOtherVideos(currentVideoId) {
+      const videos = this.querySelectorAll('video');
+      videos.forEach(video => {
+        if (video.id !== currentVideoId) {
+          video.pause();
+          this.onPause({target: video}); // 调用onPause来更新播放/暂停按钮的状态
+        }
+      });
+    }
+
+
     // 播放
     onPlay(e) {
       const videoId = e.target.id;
@@ -221,11 +234,11 @@ const t = useTranslations(Astro);
     selectedLabel(e) {
         var _this = this;
         var inputId = e.target.getAttribute("input-id");
-        if (this.flag && inputId && inputId !== this.currentInputid) {
-            this.currentInputid = inputId;
-            this.flag = false;
+        if (this.flagState && inputId && inputId !== this.currentId) {
+            this.currentId = inputId;
+            this.flagState = false;
             setTimeout(function() {
-                _this.flag = true;
+                _this.flagState = true;
             }, 200);
             var input = this.querySelector('input[type=radio]#' + inputId);
             if (input && !input.checked) {
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index af261a2fe53..59dc182e427 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -6,6 +6,7 @@ import NacosEBook from '@components/home/NacosEBook.astro';
 import ExploreFeatures from '@components/home/ExploreFeatures.astro';
 import HomeCardPlayer from '@components/home/HomeCardPlayer.astro';
 import UseCompanies from '@components/home/UseCompanies.astro';
+import HomeCardPlayer from '@components/home/HomeCardPlayer.astro';
 import Contributors from '@components/home/Contributors.astro';
 import HomeSolutionsCard from '@components/home/HomeSolutionsCard.astro';
 import HomeFooter from '@components/common/Footer.astro';
@@ -24,6 +25,7 @@ const t = useTranslations(Astro);
     <NacosEBook />
     <ExploreFeatures />
     <UseCompanies />
+    <!-- <HomeCardPlayer/> -->
     <Contributors />
   </home-body>