video/src/pages/preview/videoFull/videoFull.tsx

import {Video, View, Text, Image} from "@tarojs/components";
import {FC, useState} from "react";
import Taro from "@tarojs/taro";
import styles from './videoFull.module.scss'
import {brandApi, HomeApi} from "@/api";
import Collect from "@/components/collect/collect";
import Spin from "@/components/spinner";
import VideoEvent from "@/hooks/videoEvent";
import palyWhite from '@/static/img/palyWhite.png'

interface Params {
  id: string
}

const VideoFull: FC = () => {
  const {id} = Taro.useRouter().params as unknown as Params
  const video = Taro.createVideoContext('myVideo')
  const [palying, setpalying] = useState(false)
  const [data, setData] = useState<VideList | null>(null)
  const [enable, setEnable] = useState<boolean>(!Taro.getCurrentInstance().preloadData)
  const [timing, setTiming] = useState<NodeJS.Timeout | undefined>(undefined)


  Taro.useLoad(() => {
    const preloadData: VideList = Taro.getCurrentInstance().preloadData as VideList
    if (preloadData) {
      setData(preloadData)
    }
    brandApi.videoInfo(id).then(res => {
      if (!res?.resource?.url) {
        Taro.showModal({
          title: '加载资源失败',
          confirmText: '退出',
          showCancel: true,
          success() {
            Taro.navigateBack()
          }
        })
      }
      setTiming(setTimeout(() => {
        HomeApi.voideView(Number(id)).then(() => {
          setData({
            ...res,
            video_view: res.video_view + 1
          })
          VideoEvent.videoAdd({id: Number(id), view: res.video_view + 1})
        })
      }, 3000))
      setData(res)
    }).catch(() => {
      if (!preloadData) {
        Taro.showModal({
          title: '加载资源失败',
          confirmText: '退出',
          showCancel: true,
          success() {
            Taro.navigateBack()
          }
        })
      }
    }).finally(() => {
      setEnable(false)
    })
  })

  Taro.useUnload(() => {
    clearTimeout(timing)
  })

  function click() {
    if (palying) {
      video.pause()
    } else {
      video.play()
    }
  }

  function onError() {
    Taro.showModal({
      title: '视频播放错误',
      confirmText: '退出',
      showCancel: true,
      success() {
        Taro.navigateBack()
      }
    })
  }

  return (
    <View>
      {
        data ? <>
          <Video
            posterSize='100%'
            id='myVideo'
            onClick={click}
            controls
            autoplay
            className={styles.video}
            src={data?.resource?.url}
            showCenterPlayBtn
            autoPauseIfOpenNative
            autoPauseIfNavigate
            playBtnPosition='center'
            showFullscreenBtn={false}
            enableProgressGesture={false}
            onPlay={() => setpalying(true)}
            onPause={() => setpalying(false)}
            onError={onError}
          />

          <View className={styles.text}>
            <View className='font-32 font-weight'>{data.title}</View>
            <View className='font-28 mt-2 text-ellipsis-2'>{data.introduction}</View>
          </View>

          <View className={styles.title}>
            <View className='flex align-center mr-5'>
              <Image src={palyWhite} mode='widthFix' className={styles.img}/>
              <Text>{data.video_view}</Text>
            </View>
            <Collect owner_id={Number(id)}
                     owner_type={2}
                     stylesImage={{width: '48rpx', height: '48rpx'}}
                     styles={{color: '#fff', width: 'auto'}}
                     select={data.collects}/>
          </View>
        </> : <Spin enable={enable} overlay/>
      }

    </View>
  )
}

export default VideoFull