HeNan_HanJia/Code/src/pages/B1more/index.tsx

import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { baseURL, myData } from '@/utils/http'
import history from '@/utils/history'
import classNames from 'classnames'
import BaseImg from '@/components/BaseImg'
import S1manor from './S1manor'
import S2mien from './S2mien'
import S3goods from './S3goods'
import BtnRight from '@/components/BtnRight'
import useLoding from '@/components/ownUse/useLoding'
import { domDelOwnFu } from '@/utils/utilsSome'
import VideoModel from '@/components/VideoModel'
import { renClickPageFu } from './data'

const videoObj = {
  探索庄园: {
    汉代百科: 'more/1.mp4',
    文物欣赏: 'more/2.mp4'
  },
  汉代百科: {
    探索庄园: 'more/3.mp4',
    文物欣赏: 'more/4.mp4'
  },
  文物欣赏: {
    探索庄园: 'more/5.mp4',
    汉代百科: 'more/6.mp4'
  }
}

type TxtType = '探索庄园' | '汉代百科' | '文物欣赏'

const floorArr: TxtType[] = ['探索庄园', '汉代百科', '文物欣赏']

function B1more() {
  const [floorTxt, setFloorTxt] = useState<TxtType>(
    renClickPageFu() === '1' ? '汉代百科' : '探索庄园'
  )

  const floorRef = useRef<TxtType>(renClickPageFu() === '1' ? '汉代百科' : '探索庄园')

  // 需要播放的视频路径
  const [videoSrc, setVideoSrc] = useState('')

  useEffect(() => {
    if (videoSrc) {
      setTimeout(() => {
        const domAll: any = document.querySelectorAll('.A6videoBox video')
        if (domAll && domAll.length) {
          domAll.forEach((v: HTMLVideoElement) => {
            if (baseURL + videoSrc === v.src) v.play()
            else {
              v.pause()
              v.currentTime = 0
            }
          })
        }
      }, 100)
    }
  }, [videoSrc])

  useEffect(() => {
    const tempObj = Reflect.get(videoObj, floorRef.current)

    const temp = Reflect.get(tempObj, floorTxt)

    floorRef.current = floorTxt

    setVideoSrc(temp)
  }, [floorTxt])

  // 初始加载中动画
  const [isLoding, setIsLoding] = useState(window.location.href.includes('r=ren') ? false : true)

  // 先加载背景图 序列帧等 在加载视频
  const { imgNow, imgNumFu } = useLoding(1)

  // 点击左下角按钮
  const [leftVideo, setLeftVideo] = useState(false)

  //  汉代百科点击人 离开前先播放视频
  const [lastVideo, setLastVideo] = useState({ src: '', path: '' })
  const videoRef = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    if (lastVideo.src) {
      setTimeout(() => {
        if (videoRef.current) videoRef.current.play()
      }, 100)
    }
  }, [lastVideo.src])

  return (
    <div className={styles.B1more}>
      {/* 三个主要页面 */}

      <img
        style={{ opacity: 0 }}
        onLoad={imgNumFu}
        id='bgImgBox'
        src={baseURL + myData.more['探索庄园'].bg}
        alt=''
      />

      {imgNow ? (
        <>
          <S1manor
            hidden={!!videoSrc || floorTxt !== '探索庄园'}
            setLastVideo={info => setLastVideo(info)}
          />
          <S2mien hidden={!!videoSrc || floorTxt !== '汉代百科'} />
          <S3goods hidden={!!videoSrc || floorTxt !== '文物欣赏'} />
        </>
      ) : null}

      {/* 初始静态图 */}
      <BaseImg
        isShow={!isLoding}
        iconSrc={``}
        parentFu={() => setIsLoding(false)}
        moreSta={true}
        imgNow={imgNow}
        imgNumFu={imgNumFu}
      />

      {/* 6个视频 */}
      {imgNow
        ? myData.more.videos.map((src, index) => (
            <div
              className={classNames('A6videoBox', videoSrc === src ? 'A6videoBoxShow' : '')}
              key={index}
            >
              <video
                playsInline
                muted
                webkit-playsinline='true'
                x5-video-player-type='h5'
                onEnded={() => setVideoSrc('')}
                src={baseURL + src}
              >
                <source type='video/mp4' src={baseURL + src} />
                Your browser does not support the video tag.
              </video>

              {/* 右下角的跳过按钮 */}
              <BtnRight imgName='skip' clickSon={() => setVideoSrc('')} title='跳过' />
              {/* {myData.isLdong ? null : (
              )} */}
            </div>
          ))
        : null}

      {/* 底部三个按钮 */}
      {imgNow ? (
        <div className='A6floorBox' style={{ opacity: isLoding ? 0 : 1 }}>
          {floorArr.map(v => (
            <div
              onClick={() => {
                domDelOwnFu('#bgImgBox')
                setFloorTxt(v)
              }}
              className={classNames(v === floorTxt ? 'A6FrowAc' : '')}
              key={v}
            >
              {v}
            </div>
          ))}
        </div>
      ) : null}

      {/* 右下角的图标 */}
      {imgNow ? (
        <div
          hidden={leftVideo}
          className='A6rBtn'
          style={{ opacity: isLoding ? 0 : 1, zIndex: videoSrc ? 10 : 30 }}
        >
          <div className='A6rBtn1' title='陶庄园' onClick={() => history.push('/unend/end')}></div>
          <div className='A6rBtn2' title='仙居世界' onClick={() => history.push('/hots')}></div>
        </div>
      ) : null}

      {/* 左下角播放按钮 */}
      <div onClick={() => setLeftVideo(true)} className={classNames('A1LeftVideoBtn hoverD')}>
        <img src={`${baseURL}home/icon-play.png`} alt='' />
      </div>

      {/* 左下角视频 */}
      {imgNow ? (
        <VideoModel
          isShow={leftVideo}
          src={baseURL + myData.home.leftVideo}
          closeFu={() => setLeftVideo(false)}
        />
      ) : null}

      {/* 点击人 播放视频 然后跳转 */}

      {lastVideo.src ? (
        <div className='lastVideo' id='HotOpCss'>
          <video
            ref={videoRef}
            playsInline
            muted
            webkit-playsinline='true'
            x5-video-player-type='h5'
            onEnded={() => history.push(lastVideo.path)}
          >
            <source type='video/mp4' src={baseURL + lastVideo.src} />
            Your browser does not support the video tag.
          </video>

          {/* 右下角的跳过按钮 */}
          <BtnRight imgName='skip' clickSon={() => history.push(lastVideo.path)} title='跳过' />
        </div>
      ) : null}
    </div>
  )
}

const MemoB1more = React.memo(B1more)

export default MemoB1more