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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/*
* @Title:
* @Author: hongmye
* @Date: 2023-12-26 18:34:42
*/
import { Button } from 'antd';
import React, { useMemo, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
import classNames from 'classnames';
import SwiperCore, { Autoplay, Mousewheel, Navigation, Pagination, EffectCoverflow } from 'swiper/core';
import { Swiper, SwiperSlide } from 'swiper/react';
import leftIcon from '@/assets/images/demonstration/arrow_left.png';
import rightIcon from '@/assets/images/demonstration/arrow_right.png';
import { schemeData } from '../configData';
import 'swiper/components/navigation/navigation.min.css';
import 'swiper/components/pagination/pagination.min.css';
import 'swiper/components/effect-coverflow/effect-coverflow.min.css';
import 'swiper/swiper.min.css';
import styles from './index.less';
const autoplay = {
delay: 15000,
disableOnInteraction: false,
};
SwiperCore.use([Autoplay, Pagination, Navigation, Mousewheel, EffectCoverflow]);
const VideoItem = (props, ref) => {
const { selectKey = '', setSelectKey, showContent } = props;
const swiperRef = useRef(null);
const timer = useRef(null);
const [showVideo, setShowVideo] = useState(false);
const onSlideToLoop = index => {
if (swiperRef.current) {
swiperRef.current.slideToLoop(index);
}
};
useImperativeHandle(ref, () => ({
onSlideToLoop,
}));
const listData = schemeData.filter(i => !!i.video);
const renderItem = (row, index) => (
<div className={styles.video_box} key={row.title}>
<div className={styles.video_tip} type={row.title}>
<span />
{row.title}
</div>
<div className={styles.video_wrap}>
{showVideo ? <video autoPlay="autoPlay" muted controls src={row.video} loop /> : null}
</div>
</div>
);
const onSwiper = type => {
if (swiperRef.current) {
if (type === 'left') {
swiperRef.current.slidePrev();
}
if (type === 'right') {
swiperRef.current.slideNext();
}
}
};
const onSlideChange = e => {
const title = listData[e.realIndex]?.title;
if (title && title !== selectKey) {
setSelectKey(title);
}
if (e.$el[0]) {
const videoDom = e.$el[0].querySelector('video');
videoDom?.play && videoDom.play();
}
};
useEffect(() => {
if (showContent) {
timer.current = setTimeout(() => {
setShowVideo(true);
}, 800);
}
return () => {
if (timer.current) {
clearTimeout(timer.current);
timer.current = null;
}
};
}, [showContent]);
return (
<div className={classNames(styles.video_list, 'dt_video_list')}>
<Swiper
slidesPerView="auto"
autoplay={showVideo ? autoplay : false}
loop
height={450}
direction="horizontal"
onSlideChange={onSlideChange}
effect="coverflow"
coverflowEffect={{
rotate: 50,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows: false,
}}
mousewheel
onSwiper={swiper => {
swiperRef.current = swiper;
// 鼠标悬浮暂停效果
swiper.$el[0].addEventListener('mouseover', () => swiper.autoplay.stop());
// 鼠标移开后继续自动滚屏效果
swiper.$el[0].addEventListener('mouseleave', () => {
listData.length > 1 && autoplay * 1 ? swiper.autoplay.start() : '';
});
}}
>
{listData.map((item, index) => (
<SwiperSlide key={index} virtualIndex={index} onClick={() => {}}>
{renderItem(item, index + 1)}
</SwiperSlide>
))}
</Swiper>
<div className={classNames(styles.swiper_btn, styles.swiper_left)} onClick={() => onSwiper('left')}>
<img src={leftIcon} alt="" />
</div>
<div className={classNames(styles.swiper_btn, styles.swiper_right)} onClick={() => onSwiper('right')}>
<img src={rightIcon} alt="" />
</div>
</div>
);
};
export default forwardRef(VideoItem);