|
|
@@ -1,4 +1,4 @@
|
|
|
-import React, { useCallback, useEffect, useRef, useState } from 'react'
|
|
|
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
|
import styles from './index.module.scss'
|
|
|
import classNames from 'classnames'
|
|
|
import { baseURL, myData } from '@/utils/http'
|
|
|
@@ -25,18 +25,8 @@ function A5chef() {
|
|
|
|
|
|
// 点击热点
|
|
|
const [hotInd, setHotInd] = useState(-1)
|
|
|
- const hotTime = useRef(-1)
|
|
|
- const hotIndFu = useCallback((index: number) => {
|
|
|
- setBgMove(myData.chef.hot[index].change)
|
|
|
- clearTimeout(hotTime.current)
|
|
|
- hotTime.current = window.setTimeout(() => {
|
|
|
- setHotInd(index)
|
|
|
- }, 1000)
|
|
|
- }, [])
|
|
|
|
|
|
useEffect(() => {
|
|
|
- if (hotInd === -1) setBgMove('')
|
|
|
-
|
|
|
setTimeout(() => {
|
|
|
const videoDomAll: any = document.querySelectorAll('.A5video video')
|
|
|
videoDomAll.forEach((v: HTMLVideoElement, index: number) => {
|
|
|
@@ -48,10 +38,29 @@ function A5chef() {
|
|
|
}, 100)
|
|
|
}, [hotInd])
|
|
|
|
|
|
- const hotAcRef = useRef<HTMLVideoElement>(null)
|
|
|
+ const videoRef1 = useRef<HTMLVideoElement>(null)
|
|
|
+ const videoRef2 = useRef<HTMLVideoElement>(null)
|
|
|
+ const videoRef3 = useRef<HTMLVideoElement>(null)
|
|
|
|
|
|
- // 热点位移
|
|
|
- const [bgMove, setBgMove] = useState('')
|
|
|
+ const [videoPlay, setVideoPlay] = useState('1')
|
|
|
+
|
|
|
+ const video3End = useCallback((val: string) => {
|
|
|
+ if (val === '1') {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (videoRef2.current) videoRef2.current.play()
|
|
|
+ }, 100)
|
|
|
+ } else if (val === '3') setHotInd(-1)
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ const videoRefRes = useCallback(
|
|
|
+ (index: number, val: string) => {
|
|
|
+ if (hotInd !== index) return null
|
|
|
+ else if (val === '1') return videoRef1
|
|
|
+ else if (val === '2') return videoRef2
|
|
|
+ else if (val === '3') return videoRef3
|
|
|
+ },
|
|
|
+ [hotInd]
|
|
|
+ )
|
|
|
|
|
|
// 先加载背景图 序列帧等 在加载视频
|
|
|
const { imgNow, imgNumFu } = useLoding(2)
|
|
|
@@ -59,10 +68,7 @@ function A5chef() {
|
|
|
return (
|
|
|
<div className={styles.A5chef}>
|
|
|
{/* 整体盒子 */}
|
|
|
- <div
|
|
|
- className='A5main'
|
|
|
- style={{ backgroundImage: `url(${baseURL + myData.chef.baseImg})`, transform: bgMove }}
|
|
|
- >
|
|
|
+ <div className='A5main' style={{ backgroundImage: `url(${baseURL + myData.chef.baseImg})` }}>
|
|
|
{/* 初始页面 */}
|
|
|
<BaseImg
|
|
|
isShow={!baseFlag}
|
|
|
@@ -83,7 +89,7 @@ function A5chef() {
|
|
|
}}
|
|
|
key={index}
|
|
|
index={index}
|
|
|
- clickSon={val => hotIndFu(val)}
|
|
|
+ clickSon={val => setHotInd(val)}
|
|
|
hoverSrc={item.hoverSrc}
|
|
|
/>
|
|
|
))}
|
|
|
@@ -118,22 +124,28 @@ function A5chef() {
|
|
|
) : null}
|
|
|
</div>
|
|
|
|
|
|
- {/* 点击热点之后出来的视频 */}
|
|
|
+ {/* 待完善 */}
|
|
|
|
|
|
+ {/* 点击热点之后出来的视频 */}
|
|
|
{imgNow
|
|
|
? myData.chef.hot.map((item, index) => (
|
|
|
<div key={index} className={classNames('A5video', hotInd === index ? 'A5videoAc' : '')}>
|
|
|
- <video
|
|
|
- ref={hotInd === index ? hotAcRef : null}
|
|
|
- playsInline
|
|
|
- muted
|
|
|
- webkit-playsinline='true'
|
|
|
- x5-video-player-type='h5'
|
|
|
- loop
|
|
|
- >
|
|
|
- <source type='video/mp4' src={baseURL + item.videoSrc} />
|
|
|
- Your browser does not support the video tag.
|
|
|
- </video>
|
|
|
+ {['1', '2', '3'].map(vv => (
|
|
|
+ <video
|
|
|
+ key={vv}
|
|
|
+ hidden={videoPlay !== vv}
|
|
|
+ ref={videoRefRes(index, vv)}
|
|
|
+ playsInline
|
|
|
+ muted
|
|
|
+ webkit-playsinline='true'
|
|
|
+ x5-video-player-type='h5'
|
|
|
+ loop={vv === '2'}
|
|
|
+ onEnded={() => video3End(vv)}
|
|
|
+ >
|
|
|
+ <source type='video/mp4' src={`${baseURL}chef/${item.videoId}_${vv}.mp4`} />
|
|
|
+ Your browser does not support the video tag.
|
|
|
+ </video>
|
|
|
+ ))}
|
|
|
|
|
|
{/* 热点左侧图文信息 */}
|
|
|
<div className='A5vTxt' style={{ backgroundImage: `url(${baseURL}chef/hotBg.png)` }}>
|
|
|
@@ -146,7 +158,12 @@ function A5chef() {
|
|
|
style={{ backgroundImage: `url(${baseURL}chef/back22.png)` }}
|
|
|
className='A5vBack hoverD'
|
|
|
title='返回'
|
|
|
- onClick={() => setHotInd(-1)}
|
|
|
+ onClick={() => {
|
|
|
+ setVideoPlay('3')
|
|
|
+ setTimeout(() => {
|
|
|
+ if (videoRef3.current) videoRef3.current.play()
|
|
|
+ }, 100)
|
|
|
+ }}
|
|
|
></div>
|
|
|
</div>
|
|
|
))
|
