index.js 2.04 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
import VmsVideo from '@wisdom-components/VmsVideo';
import { Button, Modal } from 'antd';
import classNames from 'classnames';
import React, { useState } from 'react';
import SwiperCore, { Autoplay, Lazy, Navigation, Pagination, Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css';
import styles from './index.less';

SwiperCore.use([Virtual, Navigation, Lazy, Autoplay, Pagination]);

const VideoSliderModal = (props) => {
  const { modalInfo, videoInfos, JessibucaObj } = props;
  const [swiper, setSwiper] = useState(null);

  const handleSwiperRef = (node) => {
    if (node) {
      setSwiper(node.swiper);
    }
  };

  const handleNavigation = (direction) => {
    if (swiper) {
      if (direction === 'prev') {
        swiper.slidePrev();
      } else if (direction === 'next') {
        swiper.slideNext();
      }
    }
  };

  const handlePaginationClick = (index) => {
    if (swiper) {
      swiper.slideTo(index);
    }
  };

  const _JessibucaObj = {
    operateBtns: {
      screenshot: false,
    },
    loadingText: '演示视频加载中',
    decoder: '/JessibucaVideo/decoder.js',
    ...JessibucaObj,
  };

  return (
    <Modal
      footer={null}
      width={800}
      {...modalInfo}
      wrapClassName={styles['video-carousel-modal']}
      bodyStyle={{ padding: 0 }}
    >
      <Swiper onSwiper={handleSwiperRef} navigation pagination={{ clickable: true }}>
        {videoInfos.map((videoInfo, index) => (
          <SwiperSlide key={index}>
            <VmsVideo VideoInfo={videoInfo} JessibucaObj={_JessibucaObj} />
          </SwiperSlide>
        ))}
      </Swiper>
      {/* <div>
        <button onClick={() => handleNavigation('prev')}>Previous</button>
        <button onClick={() => handleNavigation('next')}>Next</button>
      </div>
      <div>
        {videoInfos.map((video, index) => (
          <button key={index} onClick={() => handlePaginationClick(index)}>
            {index + 1}
          </button>
        ))}
      </div> */}
    </Modal>
  );
};

export default VideoSliderModal;