Skip to content

Commit

Permalink
feat:新增视频组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tinie13
Tinie13 committed Apr 29, 2024
1 parent 0743e53 commit eafb437
Show file tree
Hide file tree
Showing 5 changed files with 144 additions and 93 deletions.
230 changes: 137 additions & 93 deletions src/components/home/HomeCardPlayer.astro
View file
Original file line number Diff line number Diff line change
@@ -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",
},
];
Expand All @@ -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
Expand All @@ -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"
Expand All @@ -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>
</>
);
Expand All @@ -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>
);
})
Expand All @@ -144,46 +121,124 @@ 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) {
this.cardSolution.addEventListener("click", function(e) {
_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) {
initialInput.checked = true;
}
}

// 播放/暂停
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");
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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) {
Expand All @@ -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;
}
}

Expand Down
1 change: 1 addition & 0 deletions src/components/icon/Pause.astro
View file
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 2 additions & 0 deletions src/i18n/en/ui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Expand Down
2 changes: 2 additions & 0 deletions src/i18n/zh-cn/ui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 专为云原生应用设计，提供强大的服务发现、动态配置管理和服务管理功能，支持高效的应用开发和运维。',
Expand Down
2 changes: 2 additions & 0 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
---
Expand All @@ -24,6 +25,7 @@ const t = useTranslations(Astro);
<ExploreFeatures />
<UseCompanies />
<OverviewImage />
<!-- <HomeCardPlayer/> -->
<Contributors />
</home-body>

Expand Down

0 comments on commit eafb437

Please sign in to comment.