From eafb43746c126470111b20313e5f8b1189d661ea Mon Sep 17 00:00:00 2001
From: Tinie13 <zhangmj198@163.com>
Date: Mon, 29 Apr 2024 11:41:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/HomeCardPlayer.astro | 230 ++++++++++++++---------
 src/components/icon/Pause.astro          |   1 +
 src/i18n/en/ui.ts                        |   2 +
 src/i18n/zh-cn/ui.ts                     |   2 +
 src/pages/index.astro                    |   2 +
 5 files changed, 144 insertions(+), 93 deletions(-)
 create mode 100644 src/components/icon/Pause.astro

diff --git a/src/components/home/HomeCardPlayer.astro b/src/components/home/HomeCardPlayer.astro
index e06e0d10247..d2ccd84a514 100644
--- a/src/components/home/HomeCardPlayer.astro
+++ b/src/components/home/HomeCardPlayer.astro
@@ -1,29 +1,26 @@
 ---
+import Pause from "../icon/Pause.astro";
+import { useTranslations } from "@i18n/util";
+const t = useTranslations(Astro);
 const mediaResource = [
   {
-    checked: true,
     src: "https://cloud.video.taobao.com/vod/play/REFkazc0bXZaVE82emRHbklyTEdsNjFUYnBNSkd6cmpoU0U5cG9KRWtZQzZQZWw1SnpKVVVCTlh4OVFON0V5UUVMUDduY1RJak82VE1sdXdHTjNOaHc9PQ",
     description: "Nacos ｜手动部署 Derby 数据库",
     cover:'https://img.alicdn.com/imgextra/i2/O1CN01mZMLGh1WIsTB2WOEB_!!6000000002766-0-tps-2516-1282.jpg'
   },
   {
-    checked: false,
     src: "https://cloud.video.taobao.com/vod/play/REFkazc0bXZaVE82emRHbklyTEdsMWppZ21TWGh4TDE/U2FmT3I2OU9yZTZQZWw1SnpKVVVCTlh4OVFON0V5UUVMUDduY1RJak82VE1sdXdHTjNOaHc9PQ",
     description: "Nacos ｜手动部署 MySQL 数据库",
     cover:'https://img.alicdn.com/imgextra/i2/O1CN01S9Q8mE1FJvunXlzc2_!!6000000000467-0-tps-2296-1164.jpg'
   },
   {
-    checked: false,
     src: "https://cloud.video.taobao.com/vod/play/REFkazc0bXZaVE82emRHbklyTEdsMERLOHRmWmdQR1Ywcjl5dlM2Nk1YSzZQZWw1SnpKVVVCTlh4OVFON0V5UUVMUDduY1RJak82VE1sdXdHTjNOaHc9PQ",
-    description:
-      "Nacos｜Docker 部署 Derby 和 MySQL 数据库",
+    description:"Nacos｜Docker 部署 Derby 和 MySQL 数据库",
     cover:"https://img.alicdn.com/imgextra/i2/O1CN01MOLx6f1k1qMPncU8j_!!6000000004624-0-tps-2552-1158.jpg"
   },
   {
-    checked: false,
     src: "https://cloud.video.taobao.com/vod/play/REFkazc0bXZaVE82emRHbklyTEdsNFFUMXFoNnp2NXBPaEFUNFNDYUVRRzZQZWw1SnpKVVVCTlh4OVFON0V5UUVMUDduY1RJak82VE1sdXdHTjNOaHc9PQ",
-    description:
-      "Nacos ｜入门样例",
+    description:"Nacos ｜入门样例",
     cover:"https://img.alicdn.com/imgextra/i1/O1CN01fkLmjc1n7HuqYQst1_!!6000000005042-0-tps-2300-1166.jpg",
   },
 ];
@@ -32,22 +29,17 @@ const mediaResource = [
 
 <card-player class="card-player block bg-gary-02 p-10">
   <div class="top-title w-full flex flex-col items-center mb-20 mt-16">
-    <span class="text-gray-10 text-xs mb-6">COMMUNITY VOICE</span>
-    <span class="title text-gray-14 text-4xl font-medium"
-      >Tutorials from Community</span
-    >
+    <span class="text-gray-10 text-xs mb-6">{t('home.card.player.voice')}</span>
+    <span class="title text-gray-14 text-4xl font-medium">{t('home.card.player.tutorials')}</span>
   </div>
 
   <div
     class="bottom-media-card block w-full flex items-center justify-center h-fit"
   >
-    <div class="media-container h-[23rem] w-fit flex flex-nowrap justify-start "
-    
-    >
-
+    <div class="media-container h-[23rem] w-fit flex flex-nowrap justify-start ">
   {
         mediaResource.map((item, index) => {
-          let { src, description, checked,cover } = item;
+          const { src, description,cover } = item;
           return (
             <>
               <input
@@ -62,14 +54,15 @@ const mediaResource = [
                 class="card overflow-hidden flex flex-col justify-between cursor-pointer rounded-3xl mx-2 relative"
               >
                 
-                <video id={`v${index}`} poster={cover}  class=' h-full rounded-3xl object-cover'  >
+                <video id={`v${index}`} poster={cover}  class=' h-full rounded-3xl object-cover hidden'  >
                   <source src={src}  type="video/mp4" />
                 </video>
-                <a 
+                <span 
                   class="video-play-bt btn btn-secondary btn-sm rounded-3xl mr-4 text-xs font-normal absolute bottom-2.5 left-3 "
                   video-id={`v${index}`}
                 >
-                    <svg
+                    <span class="play-icon" video-id={`v${index}`}>
+                      <svg
                       xmlns="http://www.w3.org/2000/svg"
                       xmlns:xlink="http://www.w3.org/1999/xlink"
                       fill="none"
@@ -78,16 +71,23 @@ const mediaResource = [
                       height="8.918435096740723"
                       viewBox="0 0 8 8.918435096740723"
                     >
-                      <g>
-                        <path
-                          d="M0,8.91844L0,0L8,4.45922L0,8.91844Z"
-                          fill="#121316"
-                          fill-opacity="1"
-                        />
-                      </g>
-                    </svg>
-                    <span>PLAY VIDEO</span>
-                  </a>
+                        <g>
+                          <path
+                            d="M0,8.91844L0,0L8,4.45922L0,8.91844Z"
+                            fill="#121316"
+                            fill-opacity="1"
+                          />
+                        </g>
+                      </svg>
+                    </span>
+                    <span class="pause-icon" video-id={`v${index}`} style="display: none;">
+                      <Pause />
+                    </span>
+                  </span>
+                  <span class='fullscreen-btn absolute bottom-0 right-4 opacity-0'>
+                    <svg t="1714358262928" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2414" width="24" height="24" video-id={`v${index}`}>
+                      <path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" fill="#e6e6e6" p-id="2415"></path></svg>
+                  </span>
               </label>
             </>
           );
@@ -99,35 +99,12 @@ const mediaResource = [
   <div class="mobile-bottom-media-card hidden w-full flex flex-col">
     {
       mediaResource.map((item, index) => {
-        const { src, description } = item;
+        const { src, description,cover } = item;
         return (
-          <div class="mobile-card h-[14rem] w-full overflow-hidden flex flex-col justify-between cursor-pointer p-4 rounded-3xl">
-            <div class="flex align-center flex-nowrap w-full">
-              <a class="btn btn-secondary btn-sm rounded-3xl mr-4 text-xs font-normal">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlns:xlink="http://www.w3.org/1999/xlink"
-                  fill="none"
-                  version="1.1"
-                  width="8"
-                  height="8.918435096740723"
-                  viewBox="0 0 8 8.918435096740723"
-                >
-                  <g>
-                    <path
-                      d="M0,8.91844L0,0L8,4.45922L0,8.91844Z"
-                      fill="#121316"
-                      fill-opacity="1"
-                    />
-                  </g>
-                </svg>
-                <span>PLAY VIDEO</span>
-              </a>
-              <a class="btn btn-secondary btn-sm rounded-3xl mr-4 text-xs">
-                <img class="w-12 h-5" src="/bilibili.png" />
-              </a>
-            </div>
-            <div class="w-full text-gray-02 text-sm">{description}</div>
+          <div class="mobile-card h-[14rem] w-full overflow-hidden flex flex-col justify-between cursor-pointer rounded-3xl mb-4">
+            <video controls poster={cover}  class=' h-full rounded-3xl object-cover'  >
+              <source src={src}  type="video/mp4" />
+            </video>
           </div>
         );
       })
@@ -144,10 +121,37 @@ const mediaResource = [
         this.flag = true;
         // 由于在 constructor 中无法访问 DOM，所以不在这里绑定事件
     }
+    toggleFullScreen(videoElement) {
+      if (!document.fullscreenElement && !document.mozFullScreenElement &&
+          !document.webkitFullscreenElement && !document.msFullscreenElement ) {
+        // 当前没有任何元素处于全屏状态，开始进入全屏
+        if (videoElement.requestFullscreen) {
+          videoElement.requestFullscreen();
+        } else if (videoElement.msRequestFullscreen) {
+          videoElement.msRequestFullscreen();
+        } else if (videoElement.mozRequestFullScreen) {
+          videoElement.mozRequestFullScreen();
+        } else if (videoElement.webkitRequestFullscreen) {
+          videoElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+        }
+      } else {
+        // 当前有元素处于全屏状态，退出全屏
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        }
+      }
+    }
     connectedCallback() {
         var _this = this;
         this.cardSolution = this.querySelector(".media-container");
-        const videoPlayButtons = this.querySelectorAll(".video-play-bt");
+        this.videoPlayButtons = this.querySelector(".video-play-bt");
+        const videos = this.querySelectorAll('video');
         // 设置初始选中的输入元素为checked
         _this.setInitialCheckedState();
         if (this.cardSolution) {
@@ -155,16 +159,37 @@ const mediaResource = [
                 _this.selectedLabel(e);
             });
         }
+
+        // 取消全屏后同步播放状态到自定义播放按钮
+        videos.forEach(video => {
+          video.addEventListener('play', (e) => this.onPlay(e));
+          video.addEventListener('pause', (e) => this.onPause(e));
+        });
         
-  if (videoPlayButtons) {
-    videoPlayButtons.forEach(button => {
-      button.addEventListener("click", (e) => {
-        e.stopPropagation(); // 添加这一行防止事件向上冒泡
-        this.toggleVideoPlay(e); // 这里不需要再次阻止冒泡
-      })
-    });
-  }
+        // 绑定单个事件监听器到容器上
+      this.cardSolution.addEventListener('click', e => {
+        // 对播放按钮的点击操作
+        if (e.target.closest('.video-play-bt')) {
+          e.stopPropagation();
+          this.toggleVideoPlay(e);
+        } else if (e.target.tagName === 'LABEL') {
+          this.selectedLabel(e);
+        }
+      });
+
+      // 事件委托监听全屏按钮的点击
+      this.cardSolution.addEventListener('click', e => {
+        if (e.target.closest('.fullscreen-btn')) {
+          e.stopPropagation();
+          const videoId = e.target.closest('[video-id]').getAttribute('video-id');
+          const video = this.querySelector(`#${videoId}`);
+          if (video) {
+            this.toggleFullScreen(video);
+          }
+        }
+      });
     }
+    // 设置第一个input 默认选中
     setInitialCheckedState() {
       let initialInput = this.querySelector('input[type=radio]#c0');
       if (initialInput) {
@@ -172,18 +197,48 @@ const mediaResource = [
       }
     }
 
+    // 播放/暂停
     toggleVideoPlay(e) {
-      const videoId = e.target.getAttribute('video-id');
-      const video = this.querySelector(`video#${videoId}`);
+      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) {
           video.play();
+          this.onPlay(e)
         } else {
           video.pause();
+          this.onPause(e)
         }
       }
-  }
+    }
 
+    // 播放
+    onPlay(e) {
+      const videoId = e.target.id;
+      const playIcon = this.querySelector(`[video-id='${videoId}'] .play-icon`);
+      const pauseIcon = this.querySelector(`[video-id='${videoId}'] .pause-icon`);
+      
+      if (playIcon && pauseIcon) {
+        playIcon.style.display = 'none';
+        pauseIcon.style.display = 'inline';
+      }
+    }
+
+    // 暂停
+    onPause(e) {
+      const videoId = e.target.id;
+      const playIcon = this.querySelector(`[video-id='${videoId}'] .play-icon`);
+      const pauseIcon = this.querySelector(`[video-id='${videoId}'] .pause-icon`);
+      
+      if (playIcon && pauseIcon) {
+        playIcon.style.display = 'inline';
+        pauseIcon.style.display = 'none';
+      }
+    }
+
+    // 展开折叠
     selectedLabel(e) {
         var _this = this;
         var inputId = e.target.getAttribute("input-id");
@@ -195,7 +250,6 @@ const mediaResource = [
             }, 200);
             var input = this.querySelector('input[type=radio]#' + inputId);
             if (input && !input.checked) {
-              console.log('input.checked',input.checked);
                 input.checked = true;
             }
         }
@@ -239,24 +293,17 @@ const mediaResource = [
     input:checked + label {
       width: 42rem;
     }
-    input:checked + label .row {
-      animation: showcontent 0.3s ease-in-out 0.3s 1 forwards;
+    input:checked + label video {
+      display:inline-block
     }
-    input:checked + label .description {
+    input:checked + label .fullscreen-btn {
       animation: showcontent 0.3s ease-in-out 0.3s 1 forwards;
     }
-    /* .card[for="c0"] {
-      background-image: url("https://img.alicdn.com/imgextra/i4/O1CN01imuhna1FvwkTxTaWu_!!6000000000550-2-tps-1280-816.png");
-    }
-    .card[for="c1"] {
-      background-image: url("https://img.alicdn.com/imgextra/i4/O1CN01imuhna1FvwkTxTaWu_!!6000000000550-2-tps-1280-816.png");
-    }
-    .card[for="c2"] {
-      background-image: url("https://img.alicdn.com/imgextra/i4/O1CN01imuhna1FvwkTxTaWu_!!6000000000550-2-tps-1280-816.png");
+
+    input:not(:checked) + label {
+        background-image: url("https://img.alicdn.com/imgextra/i4/O1CN01imuhna1FvwkTxTaWu_!!6000000000550-2-tps-1280-816.png");
+        background-size: cover;
     }
-    .card[for="c3"] {
-      background-image: url("https://img.alicdn.com/imgextra/i4/O1CN01imuhna1FvwkTxTaWu_!!6000000000550-2-tps-1280-816.png");
-    } */
 
     /* 小于50rem  小于 800px */
     @media (max-width: 50rem) {
@@ -275,15 +322,12 @@ const mediaResource = [
       .mobile-bottom-media-card {
         display: block;
       }
-      .mobile-card {
-        background-size: cover;
-        background-image: url("https://img.alicdn.com/imgextra/i4/O1CN01imuhna1FvwkTxTaWu_!!6000000000550-2-tps-1280-816.png");
-      }
-      .mobile-bottom-media-card > .mobile-card:first-of-type {
-        margin-bottom: 1rem;
+      
+      .mobile-bottom-media-card > .mobile-card:nth-child(4) {
+        margin-bottom: 0rem;
       }
-      .mobile-bottom-media-card > .mobile-card:nth-child(2) {
-        margin-bottom: 1rem;
+      .mobile-bottom-media-card > .mobile-card:nth-child(3) > video{
+        object-fit:fill;
       }
     }
 
diff --git a/src/components/icon/Pause.astro b/src/components/icon/Pause.astro
new file mode 100644
index 00000000000..5aed8c5d76c
--- /dev/null
+++ b/src/components/icon/Pause.astro
@@ -0,0 +1 @@
+<svg t="1714357360988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1436" width="14" height="30"><path d="M428.539658 833.494155c0 15.954367-13.053294 29.007661-29.007661 29.007661L285.613458 862.501816c-15.954367 0-29.007661-13.053294-29.007661-29.007661l0-639.423111c0-15.954367 13.053294-29.007661 29.007661-29.007661l113.918539 0c15.954367 0 29.007661 13.053294 29.007661 29.007661L428.539658 833.494155z" fill="#3D3B4F" p-id="1437"></path><path d="M760.124635 833.494155c0 15.954367-13.053294 29.007661-29.007661 29.007661l-113.918539 0c-15.954367 0-29.007661-13.053294-29.007661-29.007661l0-639.423111c0-15.954367 13.053294-29.007661 29.007661-29.007661l113.918539 0c15.954367 0 29.007661 13.053294 29.007661 29.007661L760.124635 833.494155z" fill="#121316" p-id="1438"></path></svg>
\ No newline at end of file
diff --git a/src/i18n/en/ui.ts b/src/i18n/en/ui.ts
index 3a497d5cfcd..d8b6322b94c 100644
--- a/src/i18n/en/ui.ts
+++ b/src/i18n/en/ui.ts
@@ -114,6 +114,8 @@ export default {
 	'home.contributors.learn.more': 'LEARN MORE',
 	'home.overviewcard.about': 'Panoramic overview',
 	'home.overviewcard.title': 'Overview Image',
+	'home.card.player.voice':'COMMUNITY VOICE',
+	'home.card.player.tutorials':'Tutorials from Community',
 
 	'cloud.title': 'Nacos Cloud',
 	'cloud.description': 'Nacos Cloud is specifically designed for cloud-native applications, providing powerful features for service discovery, dynamic configuration management, and service management. It supports efficient application development and operations.',
diff --git a/src/i18n/zh-cn/ui.ts b/src/i18n/zh-cn/ui.ts
index fa7d76be9c8..fdbfbbd0cfd 100644
--- a/src/i18n/zh-cn/ui.ts
+++ b/src/i18n/zh-cn/ui.ts
@@ -113,6 +113,8 @@ export default {
 	'home.contributors.learn.more': '更多',
 	'home.overviewcard.about': '全景概览',
 	'home.overviewcard.title': '微服务全景图',
+	'home.card.player.voice':'社区声音',
+	'home.card.player.tutorials':'社区教程',
 
 	'cloud.title': 'Nacos Cloud',
 	'cloud.description': 'Nacos Cloud 专为云原生应用设计，提供强大的服务发现、动态配置管理和服务管理功能，支持高效的应用开发和运维。',
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cd4ce2d99f5..ab77e356dac 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,6 +9,7 @@ import Contributors from '@components/home/Contributors.astro';
 import HomeSolutionsCard from '@components/home/HomeSolutionsCard.astro';
 import HomeFooter from '@components/common/Footer.astro';
 import OverviewImage from '@components/home/OverViewImage/index.astro';
+import HomeCardPlayer from '@components/home/HomeCardPlayer.astro';
 import { useTranslations } from "@i18n/util";
 const t = useTranslations(Astro);
 ---
@@ -24,6 +25,7 @@ const t = useTranslations(Astro);
     <ExploreFeatures />
     <UseCompanies />
     <OverviewImage />
+    <!-- <HomeCardPlayer/> -->
     <Contributors />
   </home-body>