YLLZX/src/pages/A2layout/components/VideoList/index.tsx

import React, { useRef, useState } from "react";
import styles from "./index.module.scss";
import { Swiper, SwiperSlide } from 'swiper/react'
import 'media-chrome';
import 'swiper/css'
import 'swiper/css/effect-coverflow'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules'

function VideoList({ style }: { style?: React.CSSProperties }) {
  const swiperRef = useRef<any>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [currentVideoSrc, setCurrentVideoSrc] = useState('/myData/video/bgVideo.mp4');
  const modalVideoRef = useRef<HTMLVideoElement>(null);

  const handleVideoClick = (src: string) => {
    setCurrentVideoSrc(src);
    setIsModalOpen(true);
    setTimeout(() => {
      if (modalVideoRef.current) {
        modalVideoRef.current.play();
      }
    }, 0);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    if (modalVideoRef.current) {
      modalVideoRef.current.pause();
    }
  };

  return (
    <div className={styles.VideoList} style={style}>
      <div className="name">视频名称</div>
      <Swiper
        ref={swiperRef}
        loop={true}
        loopPreventsSliding={false}
        effect={'coverflow'}
        grabCursor={true}
        centeredSlides={true}
        slidesPerView={'1'}
        coverflowEffect={{
          rotate: 0,
          stretch: 30,
          depth: 180,
          modifier: 4,
        }}
        pagination={{ el: '.swiper-pagination', clickable: true }}
        modules={[EffectCoverflow, Pagination, Navigation]}
        className='swiper_container'
      // onTransitionEnd={(swiper: unknown) => {
      //   const swiperInternal = swiper as { loopFix: () => void }
      //   swiperInternal.loopFix()
      // }}
      >
        {[1, 2, 3, 4, 5, 6, 7, 8].map((item: any, index: any) => (
          <SwiperSlide key={index}>
            <div
              className='itemCard'
              key={index}
              onClick={() => handleVideoClick('/myData/video/bgVideo.mp4')}
            >
              <div className='itemImage'>
                <video
                  src='/myData/video/bgVideo.mp4'
                  preload="metadata"
                />
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
      <div className="swiper-pagination"></div>
      <div className={`videoModal ${isModalOpen ? 'active' : ''}`}>

        <div className="content">
          <media-controller class="custom-media-controller">
            <video
              ref={modalVideoRef}
              slot="media"
              src={currentVideoSrc}
              className="modal-video"
            ></video>
            <media-control-bar>
              <media-play-button></media-play-button>
              <div className="progress">
                <media-time-range></media-time-range>
                <div className="time">
                  <media-time-display></media-time-display>
                  <media-duration-display></media-duration-display>
                </div>
              </div>


            </media-control-bar>
          </media-controller>

        </div>
        <div className="close" onClick={handleCloseModal}>
          <img src={require('@/assets/img/close.png')} alt='关闭' />
        </div>
      </div>
    </div>
  )
}

const MemoVideoList = React.memo(VideoList);

export default MemoVideoList;