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

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import BaseImg from '@/components/BaseImg'
import { baseURL, 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 Hot2 from '../A2visit/PanoVideo/Hot2'

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)

  const mousemoveFu = useCallback(
    (ev: any, flag?: boolean) => {
      if (xianRef.current) {
        if (flag && !isFlag) {
          const nowMove = xianRef.current.scrollLeft
          // 滚轮
          let num = 50
          if (ev.deltaY < 0) num = -num
          xianRef.current.scrollLeft = nowMove + num
        } else if (isFlag) {
          const nowMove = xianRef.current.scrollLeft

          // 鼠标按住移动
          xianRef.current.scrollLeft = nowMove - ev.movementX
        }
      }
    },
    [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('')
  const hotInfo = useMemo(() => {
    return myData.xianJu.imgHot.find(v => v.name === acName)!
  }, [acName])

  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={50}
      />

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

        {/* 热点 */}
        {myData.xianJu.imgHot.map((v, i) => (
          <HotIcon
            isModel={v.isModel ? true : false}
            style={{
              top: v.loc.top,
              left: v.loc.left
            }}
            key={i}
            index={i}
            clickSon={() => setAcName(v.name)}
            hoverSrc={v.hoverSrc}
            isXiao={0.67}
          />
        ))}

        {/* 底部按钮 */}
        <div
          className='A6erImgBtn'
          onClick={() => {
            domDelOwnFu('.A6erImg')
            btnStart()
          }}
        >
          开始冥想
        </div>

        {acName ? (
          <Hot2 data={hotInfo.data} closeFu={() => setAcName('')} name={hotInfo.name} />
        ) : null}
      </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)
            }}
          >
            升仙之途
          </div>
        </div>
      ) : null}

      {/* 点击升仙之途 出来的长 滚动 页面 */}
      {imgNow || window.location.href.includes('t=xian') ? (
        <div
          className='A6XimgBox'
          style={{ opacity: xianShow ? '1' : '0', pointerEvents: xianShow ? 'auto' : 'none' }}
        >
          <div
            className='A6XimgBoxSon'
            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>
          </div>
          {/* 跳到下一章 */}
          <NextPage clickSon={() => setLastVideo(true)} txt='结束冥想' />
          {/* 右下角按钮 */}
          <FloorBtn />

          {/* 底部按钮 */}
          <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'
      />
    </div>
  )
}

const MemoA6xian = React.memo(A6xian)

export default MemoA6xian