|
|
@@ -1,37 +1,33 @@
|
|
|
"use client";
|
|
|
-import React, { useRef, useState, useEffect } from "react";
|
|
|
+import React, { useState, useEffect } from "react";
|
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
-import { Controller, EffectCoverflow, Navigation } from "swiper/modules";
|
|
|
+import { EffectCoverflow } from "swiper/modules";
|
|
|
import "swiper/css";
|
|
|
import "swiper/css/effect-coverflow";
|
|
|
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
|
|
|
+import { GoChevronLeft, GoChevronRight } from "react-icons/go";
|
|
|
import styles from "./show.module.css";
|
|
|
import { fetchVideos } from "@/lib/cms";
|
|
|
|
|
|
export default function Show() {
|
|
|
- const [currentIndex, setCurrentIndex] = useState(2);
|
|
|
+ const [swiperRef, setSwiperRef] = useState(null);
|
|
|
const [videoUrlList, setVideoUrlList] = useState(null);
|
|
|
useEffect(() => {
|
|
|
fetchVideos().then(({ data: list }) => {
|
|
|
- setCurrentIndex(list.total - 1);
|
|
|
- setVideoUrlList(list);
|
|
|
+ const records = list?.records?.sort((b, c) => {
|
|
|
+ return Date.parse(b.createTime) - Date.parse(c.createTime);
|
|
|
+ });
|
|
|
+ setVideoUrlList(records);
|
|
|
});
|
|
|
}, []);
|
|
|
|
|
|
- const videosRef = useRef([]);
|
|
|
- const [swiper, setSwiper] = useState<Swiper>();
|
|
|
- const pauseOtherVideos = () => {
|
|
|
- const video = document.getElementsByClassName("video");
|
|
|
- const elementsArray = Array.from(video);
|
|
|
- if (elementsArray) {
|
|
|
- elementsArray.forEach((element) => {
|
|
|
- element.pause();
|
|
|
- });
|
|
|
- }
|
|
|
+ const slideToPrev = () => {
|
|
|
+ console.log("hi");
|
|
|
+ swiperRef.slidePrev();
|
|
|
};
|
|
|
|
|
|
- const handleVideoRef = (video: any, index: number) => {
|
|
|
- videosRef.current[index] = video;
|
|
|
+ const slideToNext = () => {
|
|
|
+ console.log("bye");
|
|
|
+ swiperRef.slideNext();
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
@@ -40,18 +36,20 @@ export default function Show() {
|
|
|
<div className={styles["show-content"]}>
|
|
|
<div className={styles["show-title"]}>走近高潜</div>
|
|
|
</div>
|
|
|
- <div className={styles["video-wrapper"]}>
|
|
|
- <LeftOutlined
|
|
|
- className={styles["video-nav"]}
|
|
|
- onClick={() => {
|
|
|
- swiper?.slidePrev();
|
|
|
- }}
|
|
|
- />
|
|
|
+ <div className={styles["show-details"]}>
|
|
|
+ <span className={styles["show-nav"]} onClick={() => slideToPrev()}>
|
|
|
+ <GoChevronLeft />
|
|
|
+ </span>
|
|
|
|
|
|
- <div className={styles["show-videos"]}>
|
|
|
+ <div className={styles["swiper-wrapper"]}>
|
|
|
<Swiper
|
|
|
- effect={"coverflow"}
|
|
|
+ spaceBetween={30}
|
|
|
+ initialSlide={0}
|
|
|
+ centeredSlides={true}
|
|
|
loop={true}
|
|
|
+ slidesPerGroup={1}
|
|
|
+ slidesPerView={1.5}
|
|
|
+ effect={"coverflow"}
|
|
|
coverflowEffect={{
|
|
|
rotate: 0,
|
|
|
stretch: 0,
|
|
|
@@ -59,44 +57,27 @@ export default function Show() {
|
|
|
modifier: 1,
|
|
|
slideShadows: false,
|
|
|
}}
|
|
|
- initialSlide={1}
|
|
|
- slidesPerView={1.5}
|
|
|
- centeredSlides={true}
|
|
|
modules={[EffectCoverflow]}
|
|
|
- onSlideChange={(swiper) => {
|
|
|
- setCurrentIndex(swiper.realIndex);
|
|
|
- pauseOtherVideos();
|
|
|
- }}
|
|
|
- onSwiper={(swiper) => {
|
|
|
- setSwiper(swiper);
|
|
|
- }}
|
|
|
+ onSwiper={setSwiperRef}
|
|
|
>
|
|
|
- {videoUrlList?.records
|
|
|
- ?.sort((b, c) => {
|
|
|
- return Date.parse(b.createTime) - Date.parse(c.createTime);
|
|
|
- })
|
|
|
- .map((item, index) => {
|
|
|
- return (
|
|
|
- <SwiperSlide key={index}>
|
|
|
- <video
|
|
|
- ref={(video) => handleVideoRef(video, index)}
|
|
|
- className={styles.video}
|
|
|
- src={item.url}
|
|
|
- controls={currentIndex == index}
|
|
|
- poster={`${item.url}?x-oss-process=video/snapshot,t_5000,m_fast`}
|
|
|
- autoPlay={false}
|
|
|
- ></video>
|
|
|
- </SwiperSlide>
|
|
|
- );
|
|
|
- })}
|
|
|
+ {videoUrlList?.map((item, index) => {
|
|
|
+ return (
|
|
|
+ <SwiperSlide key={index}>
|
|
|
+ <video
|
|
|
+ className={styles.video}
|
|
|
+ src={item.url}
|
|
|
+ controls
|
|
|
+ poster={`${item.url}?x-oss-process=video/snapshot,t_5000,m_fast`}
|
|
|
+ autoPlay={false}
|
|
|
+ ></video>
|
|
|
+ </SwiperSlide>
|
|
|
+ );
|
|
|
+ })}
|
|
|
</Swiper>
|
|
|
</div>
|
|
|
- <RightOutlined
|
|
|
- className={styles["video-nav"]}
|
|
|
- onClick={() => {
|
|
|
- swiper?.slideNext();
|
|
|
- }}
|
|
|
- />
|
|
|
+ <span className={styles["show-nav"]} onClick={() => slideToNext()}>
|
|
|
+ <GoChevronRight />
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles["show-background"]}></div>
|
wind