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

import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import useDataUrl from '@/components/ownUse/useDataUrl'
// import useMove from '@/components/ownUse/useMove'
import { myData } from '@/utils/http'
import classNames from 'classnames'
import { domDelOwnFu } from '@/utils/utilsSome'
import EndVideo from '@/components/EndVideo'

function A1home() {
  const { dataUrlSame } = useDataUrl()

  // const { touchstart, touchmove, touchend } = useMove()

  // 动画视频的ref
  const videoRef = useRef<HTMLVideoElement>(null)

  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)

  const timeRR = useRef(-1)

  useEffect(() => {
    clearInterval(timeRR.current)
    timeRR.current = window.setInterval(() => {
      if (loding >= 100) {
        setMoveImgShow(false)

        setTimeout(() => {
          const ruDom = document.querySelector('#myStyle')
          if (ruDom) ruDom.remove()
        }, 3000)

        clearInterval(timeRR.current)
        return
      }
      setLoding(loding + 1)
    }, 50)
  }, [loding])

  // 点击开始
  const btnStartFu = useCallback(() => {
    setLoding(110)
    // 自动播放视频
    setTimeout(() => {
      if (videoRef.current) {
        videoRef.current.play()
      }
    }, 100)

    // 0.5s之后删除自己
    setTimeout(() => {
      domDelOwnFu('.A1base')
    }, 500)
  }, [])

  const [ind, setInd] = useState(0)

  // 向上滑动
  const videoEndFu = useCallback(
    (num: number) => {
      // 这个页面只能向上滑
      if (num === -1) return
      if (ind === myData.home.videos.length - 1 && num === 1) return

      setInd(ind + num)
    },
    [ind]
  )

  useEffect(() => {
    if (ind !== 0) {
      setTimeout(() => {
        const domAll: any = document.querySelectorAll('.A1videoBoxSon video')
        if (domAll && domAll.length) {
          domAll.forEach((v: HTMLVideoElement, i: number) => {
            if (ind === i) v.play()
            else v.pause()
          })
        }
      }, 100)
    }
  }, [ind])

  // 最后一个过长动画
  const [lastVideo, setLastVideo] = useState(false)

  // 有关序列帧
  const A1BfloorRef = useRef<HTMLImageElement>(null)

  const [moveImgShow, setMoveImgShow] = useState(true)

  useEffect(() => {
    // 看看是否已经插入的 script
    const ruDom = document.querySelector('#myStyle')
    if (ruDom) ruDom.remove()
    const styleStr = `.A1Bll {
      animation: A1BllMove1 8s infinite linear;
    }
    @keyframes A1BllMove1 {
      100% {
        left: 0;
      }
    }

     .A1Brr {
      animation: A1BllMove2 8s infinite linear;
    }
    @keyframes A1BllMove2 {
      100% {
        right: 0;
      }
    `
    const styletDom = document.createElement('style')
    styletDom.type = 'text/css'
    styletDom.id = 'myStyle'
    styletDom.innerHTML = styleStr
    document.querySelector('html')?.appendChild(styletDom)
  }, [])

  return (
    <div className={styles.A1home}>
      {/* 初始加载画面 */}
      <div
        className={classNames('A1base', loding === 110 ? 'A1baseHide' : '')}
        style={{ backgroundImage: `url(${dataUrlSame}${myData.home.bgImg})` }}
      >
        <img className='A1Vlogo' src={`${dataUrlSame}home/logo.png`} alt='' />
        {loding >= 100 ? (
          <div className='A1loding A1lodingBtn' onClick={btnStartFu}>
            <img src={`${dataUrlSame}visit/btn.png`} alt='' />
            <div>开始</div>
          </div>
        ) : (
          <div className='A1loding sizeNo'>{loding}%</div>
        )}

        {/* 序列帧动画 */}

        {/* 底部颜色条 */}
        <img ref={A1BfloorRef} className='A1Bfloor' src={`${dataUrlSame}home/floor.png`} alt='' />

        {/* 底部房子 */}
        <img className='A1Broom' src={`${dataUrlSame}home/home.png`} alt='' />

        {/* 左右小人 */}
        <img
          className={classNames('A1Bll', moveImgShow ? '' : 'A1BMoveHide')}
          src={`${dataUrlSame}home/left.png`}
          alt=''
        />

        <img
          className={classNames('A1Brr', moveImgShow ? '' : 'A1BMoveHide')}
          src={`${dataUrlSame}home/right.png`}
          alt=''
        />
      </div>

      {/* 5个动画视频 */}
      <div
        className={classNames('A1videoBox', lastVideo || loding !== 110 ? 'A1videoBoxHide' : '')}
        style={{
          transform: `translateY(-${(100 / myData.home.videos.length) * ind}%)`,
          height: `${100 * myData.home.videos.length}%`
        }}
      >
        {myData.home.videos.map((url, index) => (
          <div
            key={index}
            style={{ height: 100 / myData.home.videos.length + '%' }}
            className='A1videoBoxSon'
          >
            <video
              ref={ind === index ? videoRef : null}
              playsInline
              muted
              webkit-playsinline='true'
              x5-video-player-type='h5'
              src={dataUrlSame + url}
            >
              <source type='video/mp4' />
              Your browser does not support the video tag.
            </video>
          </div>
        ))}
      </div>

      {/* 操作按钮 */}
      {loding !== 110 || lastVideo ? null : (
        <div
          className='A1btnBox'
          // onTouchStart={e => touchstart(e.touches[0].pageY)}
          // onTouchMove={e => touchmove(e.touches[0].pageY)}
          // onTouchEnd={() => touchend(val => videoEndFu(val), 'mobile')}
          // onMouseDown={e => touchstart(e.pageY)}
          // onMouseMove={e => touchmove(e.pageY)}
          // onMouseUp={() => touchend(val => videoEndFu(val), 'pc')}
        >
          <img
            hidden={ind === myData.home.videos.length - 1}
            className='A1videoBtn'
            onClick={() => videoEndFu(1)}
            src={`${dataUrlSame}home/next.png`}
            alt=''
          />
          <div className={ind === myData.home.videos.length - 1 ? 'A1videoBtnBoxShow' : ''}>
            <img className='A1videoBtnLogo' src={`${dataUrlSame}home/logo.png`} alt='' />
            <div className='A1videoBtnNext' onClick={() => setLastVideo(true)}>
              <img src={`${dataUrlSame}home/nextLast.png`} alt='' />
              <p>点击开始</p>
            </div>
          </div>
        </div>
      )}

      {/* 最后一个过长动画 */}

      <EndVideo
        lastVideo={lastVideo}
        delDom='.A1videoBox'
        src={dataUrlSame + myData.home.lastVideo}
        path='/visit'
      />
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home