diff --git a/packages/fakeyou.com/public/videos/landing/vst/1-original.jpg b/packages/fakeyou.com/public/videos/landing/vst/1-original.jpg new file mode 100644 index 0000000000..30486e43b9 Binary files /dev/null and b/packages/fakeyou.com/public/videos/landing/vst/1-original.jpg differ diff --git a/packages/fakeyou.com/public/videos/landing/vst/2-original.jpg b/packages/fakeyou.com/public/videos/landing/vst/2-original.jpg new file mode 100644 index 0000000000..354b0b04d1 Binary files /dev/null and b/packages/fakeyou.com/public/videos/landing/vst/2-original.jpg differ diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx index a6f7bfa2fa..4f64e752ad 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx @@ -1,5 +1,5 @@ import { Badge, Panel } from "components/common"; -import React, { useEffect, useRef, useState } from "react"; +import React, { useState } from "react"; import "./VstSectionV2.scss"; import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; @@ -22,39 +22,40 @@ interface VstSectionV2Props {} export default function VstSectionV2(props: VstSectionV2Props) { const [thumbsSwiper, setThumbsSwiper] = useState(null); const [activeIndex, setActiveIndex] = useState(0); - const [isPlaying, setIsPlaying] = useState(true); + // const [isPlaying, setIsPlaying] = useState(true); // const togglePlayback = () => { // setIsPlaying(!isPlaying); // }; - const handleVideoPlay = () => { - if (!isPlaying) { - setIsPlaying(true); - } - }; + // const handleVideoPlay = () => { + // if (!isPlaying) { + // setIsPlaying(true); + // } + // }; - const handleVideoPause = () => { - if (isPlaying) { - setIsPlaying(false); - } - }; + // const handleVideoPause = () => { + // if (isPlaying) { + // setIsPlaying(false); + // } + // }; - const videoRef = useRef(null); + // const videoRef = useRef(null); - useEffect(() => { - if (videoRef.current) { - if (isPlaying) { - videoRef.current.play(); - } else { - videoRef.current.pause(); - } - } - }, [isPlaying]); + // useEffect(() => { + // if (videoRef.current) { + // if (isPlaying) { + // videoRef.current.play(); + // } else { + // videoRef.current.pause(); + // } + // } + // }, [isPlaying]); const videoSet = [ { src: "/videos/landing/vst/1-original.mp4", + thumbnail: "/videos/landing/vst/1-original.jpg", styledVideos: [ { src: "/videos/landing/vst/1-2d_flat_anime.mp4", @@ -80,6 +81,7 @@ export default function VstSectionV2(props: VstSectionV2Props) { }, { src: "/videos/landing/vst/2-original.mp4", + thumbnail: "/videos/landing/vst/2-original.jpg", styledVideos: [ { src: "/videos/landing/vst/2-2d_flat_anime.mp4", @@ -157,16 +159,17 @@ export default function VstSectionV2(props: VstSectionV2Props) { muted playsInline controls={false} + preload="auto" key={`${index}-${activeIndex}`} - onPlay={handleVideoPlay} - onPause={handleVideoPause} - ref={videoRef => { - if (videoRef && isPlaying) { - videoRef.play(); - } else if (videoRef) { - videoRef.pause(); - } - }} + // onPlay={handleVideoPlay} + // onPause={handleVideoPause} + // ref={videoRef => { + // if (videoRef && isPlaying) { + // videoRef.play(); + // } else if (videoRef) { + // videoRef.pause(); + // } + // }} > Your browser does not support the video tag. @@ -186,10 +189,10 @@ export default function VstSectionV2(props: VstSectionV2Props) { {videoSet.map((video, index) => (
- + Demo Original Video Thumbnail
))} @@ -218,16 +221,17 @@ export default function VstSectionV2(props: VstSectionV2Props) { muted playsInline controls={false} + preload="auto" key={styledVideo.src} - onPlay={handleVideoPlay} - onPause={handleVideoPause} - ref={videoRef => { - if (videoRef && isPlaying) { - videoRef.play(); - } else if (videoRef) { - videoRef.pause(); - } - }} + // onPlay={handleVideoPlay} + // onPause={handleVideoPause} + // ref={videoRef => { + // if (videoRef && isPlaying) { + // videoRef.play(); + // } else if (videoRef) { + // videoRef.pause(); + // } + // }} > Your browser does not support the video tag.