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

import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import BaseImg from '@/components/BaseImg'
import { baseURL, hotInfo, myData } from '@/utils/http'
import useLoding from '@/components/ownUse/useLoding'
import CatVideo from '@/components/CatVideo'
import A6PanoVideo from './A6PanoVideo'
import classNames from 'classnames'
import { domDelOwnFu } from '@/utils/utilsSome'
import FloorBtn from '@/components/FloorBtn'
import NextPage from '@/components/NextPage'
import EndVideo from '@/components/EndVideo'
import history from '@/utils/history'
import HotIcon from '@/components/HotIcon'
import Zhot from '@/components/Zhot'

function A6xian() {
  // 过度动画
  const [cutVideoShow, setCutVideoShow] = useState(false)

  // 点击 跳下一个章节
  const [lastVideo, setLastVideo] = useState(false)

  // 点击继续
  const btnStart = useCallback(() => {
    setCutVideoShow(true)
  }, [])

  // 过度动画播放完毕或者点击跳过
  const cutEndFu = useCallback(() => {
    setCutVideoShow(false)
  }, [])

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

  // 点击升仙
  const [xianShow, setXianShow] = useState(window.location.href.includes('t=xian') ? true : false)

  // 滚动
  const [isFlag, setIsFlag] = useState(false)

  const xianRef = useRef<HTMLDivElement>(null)

  // 监听3S没有操作
  const [action, setAction] = useState(false)

  const actionRef = useRef(-1)

  const actionFu = useCallback(
    (val?: boolean) => {
      if (xianShow || val) {
        setAction(false)
        clearTimeout(actionRef.current)
        actionRef.current = window.setTimeout(() => {
          setAction(true)
        }, 3000)
      }
    },
    [xianShow]
  )

  const actionMoveRef = useRef(-1)

  useEffect(() => {
    if (xianShow) {
      clearInterval(actionMoveRef.current)
      if (action) {
        actionMoveRef.current = window.setInterval(() => {
          if (xianRef.current) {
            const nowMove = xianRef.current.scrollLeft
            xianRef.current.scrollLeft = nowMove + 2

            if (xianRef.current.scrollLeft >= 2988) xianRef.current.scrollLeft = 0
          }
        }, 50)
      }
    }
  }, [action, xianShow])

  const mousemoveFu = useCallback(
    (ev: any, flag?: boolean) => {
      if (xianRef.current) {
        if (flag && !isFlag) {
          actionFu()

          const nowMove = xianRef.current.scrollLeft
          // 滚轮
          let num = 50
          if (ev.deltaY < 0) num = -num
          xianRef.current.scrollLeft = nowMove + num
        } else if (isFlag) {
          actionFu()
          const nowMove = xianRef.current.scrollLeft

          // 鼠标按住移动
          xianRef.current.scrollLeft = nowMove - ev.movementX
        }
      }
    },
    [actionFu, isFlag]
  )

  const videoRef = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    if (window.location.href.includes('t=xian')) {
      setTimeout(() => {
        if (videoRef.current) videoRef.current.play()
      }, 100)
    }
  }, [])

  // 二级的静态图
  const [erImg, setErImg] = useState(false)

  // 打开热点
  const [acName, setAcName] = useState('')

  useEffect(() => {
    if (acName) {
      clearTimeout(actionRef.current)
      clearInterval(actionMoveRef.current)
    } else actionFu()
  }, [acName, actionFu])

  return (
    <div className={styles.A6xian}>
      {/* 初始静态图 */}
      <BaseImg
        hidden={window.location.href.includes('t=xian')}
        isShow={cutVideoShow}
        iconSrc={`${baseURL}xianJu/mulu.png`}
        parentFu={() => setErImg(true)}
        bgImg={`${baseURL}${myData.xianJu.bgImg}`}
        imgNow={imgNow}
        imgNumFu={imgNumFu}
        num={70}
        bird='xianJu'
      />

      {/* 二级静态图 */}
      <div
        className='A6erImg'
        style={{ opacity: erImg ? '1' : '0', pointerEvents: erImg ? 'auto' : 'none' }}
      >
        <img src={baseURL + 'xianJu/bg.jpg'} alt='' />

        <NextPage
          clickSon={() => {
            domDelOwnFu('.A6erImg')
            btnStart()
          }}
          txt='开始冥想'
        />

        {/* 右下角按钮 */}
        <FloorBtn unityEnd={() => history.push('unend/end')} />
      </div>

      {/* 过度动画页面 */}
      {imgNow ? (
        <CatVideo
          isShow={cutVideoShow}
          src={baseURL + myData.xianJu.videos[0]}
          parentFu={() => cutEndFu()}
        />
      ) : null}

      {/* 全景视频 */}
      {imgNow && !window.location.href.includes('t=xian') ? (
        <div className={classNames('pvBox', cutVideoShow ? '' : 'pvBoxShow')}>
          <A6PanoVideo />
          <div
            className='pvBtn'
            onClick={() => {
              domDelOwnFu('.pvBox')
              setXianShow(true)
              setTimeout(() => {
                if (videoRef.current) videoRef.current.play()
              }, 100)

              // 开启滚动动画
              actionFu(true)
            }}
          >
            升仙之途
          </div>

          <FloorBtn unityEnd={() => history.push('unend/end')} />
        </div>
      ) : null}

      {/* 点击升仙之途 出来的长 滚动 页面 */}
      {imgNow || window.location.href.includes('t=xian') ? (
        <div
          onTouchStart={() => actionFu()}
          onClick={() => actionFu()}
          className='A6XimgBox'
          style={{ opacity: xianShow ? '1' : '0', pointerEvents: xianShow ? 'auto' : 'none' }}
        >
          <div className='A6XimgBoxSon'>
            <div
              className='A6videoBox'
              style={{ cursor: isFlag ? 'move' : 'default' }}
              ref={xianRef}
              onMouseDown={() => setIsFlag(true)}
              onMouseUp={() => setIsFlag(false)}
              onMouseLeave={() => setIsFlag(false)}
              onMouseMove={e => mousemoveFu(e)}
              onWheel={e => mousemoveFu(e, true)}
            >
              <video
                ref={videoRef}
                playsInline
                muted
                webkit-playsinline='true'
                x5-video-player-type='h5'
                loop={true}
              >
                <source type='video/mp4' src={`${baseURL}xianJu/chang.mp4`} />
                Your browser does not support the video tag.
              </video>

              {/* 热点 */}
              {hotInfo.xianJu2.map((item, index) => (
                <HotIcon
                  isModel={item.tubiao === '文物' ? true : false}
                  style={{
                    top: item.locPage.top,
                    left: item.locPage.left
                  }}
                  key={index}
                  index={index}
                  clickSon={() => setAcName(item.name)}
                  hoverSrc={item.hoverSrc}
                  isXiao={0.67}
                />
              ))}
            </div>
          </div>
          {/* 跳到下一章 */}
          <NextPage clickSon={() => setLastVideo(true)} txt='结束冥想' />
          {/* 右下角按钮 */}
          <FloorBtn unityEnd={() => history.push('unend/end')} />

          {/* 底部按钮 */}
          <div className='A6XimgBoxBtn'>
            <div onClick={() => history.push('/xian?t=xian')}>卜千秋墓中的升仙图</div>
            <div onClick={() => history.push('/yun?t=xian')}>四神云气图</div>
          </div>
        </div>
      ) : null}

      {/* 最后的视频 */}
      <EndVideo
        lastVideo={lastVideo}
        src={baseURL + 'xianJu/end.mp4'}
        path='/end'
        delDom='.A22Pano'
      />

      {acName ? <Zhot name={acName} closeFu={() => setAcName('')} /> : null}
    </div>
  )
}

const MemoA6xian = React.memo(A6xian)

export default MemoA6xian