@x-edu/live-player 0.0.13 → 0.0.14

package/src/detail/RecordVideo/index.jsx

@@ -1,148 +1,148 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { Video } from 'fish'
-import dayjs from 'dayjs'
-import { PUBLIC_LIVE_STATUS } from '@/config/publicLive'
-import { getUrlType, getType } from '@/util/video'
-import { getRecordLiveStatus } from '@/util/live'
-import LiveStatus from '../LiveStatus'
-import style from './index.module.less'
-
-export default function RecordVideo({
-  userInfo,
-  liveInfo,
-  visitTime,
-  diffTime,
-  onStatusChange,
-  onPlayReplay,
-  onVideoPlay = () => undefined,
-  onRequestFullScreen = () => undefined
-}) {
-  const isFullScreenRef = useRef(false)
-  const [isLiveLoading, setIsLiveLoading] = useState(false)
-  const [isLiveLoadError, setIsLiveLoadError] = useState(false)
-  const hasPlayed = useRef(false)
-  const player = useRef()
-  const endTimer = useRef()
-  const needLogin = !userInfo && liveInfo.login
-
-  useEffect(() => {
-    const isLiving = liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
-    if (isLiving && needLogin) {
-      const timeToEnd = dayjs(liveInfo.end_time).valueOf() - (Date.now() - diffTime)
-      if (timeToEnd > 0) {
-        endTimer.current = setTimeout(() => {
-          onStatusChange(PUBLIC_LIVE_STATUS.COMPLETEED)
-        }, timeToEnd)
-      }
-    }
-
-    if (player.current) {
-      player.current.controls(isLiving && !needLogin)
-
-      // 显示成封面
-      if (liveInfo.status === PUBLIC_LIVE_STATUS.COMPLETEED || liveInfo.status === PUBLIC_LIVE_STATUS.OFFLINE) {
-        player.current.autoplay(false)
-        player.current.load()
-      }
-    }
-
-    return () => {
-      clearTimeout(endTimer.current)
-    }
-  }, [liveInfo.status, userInfo])
-
-  const handleVideoReady = (v, playerIns) => {
-    player.current = playerIns
-
-    playerIns.on('fullscreenchange', () => {
-      const isFullScreenNow = playerIns.isFullscreen()
-      if (isFullScreenNow) {
-        if (!isFullScreenRef.current) {
-          onRequestFullScreen()
-        }
-        isFullScreenRef.current = true
-      } else {
-        isFullScreenRef.current = false
-      }
-    })
-    playerIns.on('waiting', () => {
-      setIsLiveLoading(true)
-    })
-    playerIns.on('playing', () => {
-      setIsLiveLoading(false)
-    })
-    playerIns.on('ended', () => {
-      onStatusChange(PUBLIC_LIVE_STATUS.COMPLETEED)
-    })
-    playerIns.on('play', () => {
-      const currentTime = Date.now() - diffTime
-      const status = getRecordLiveStatus(liveInfo.status, currentTime, liveInfo.begin_time, liveInfo.end_time)
-      onStatusChange(status)
-      if (status === PUBLIC_LIVE_STATUS.LIVEING) {
-        player.current.currentTime(Math.max(0, (currentTime - dayjs(liveInfo.begin_time).valueOf()) / 1000))
-      }
-
-      if (!hasPlayed.current) {
-        onVideoPlay()
-      }
-      hasPlayed.current = true
-
-      player.current.autoplay(false)
-      setIsLiveLoadError(false)
-    })
-    playerIns.on('error', () => {
-      setIsLiveLoadError(true)
-    })
-
-    const isLiving = liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
-    player.current.controls(isLiving && !needLogin)
-    if (isLiving) {
-      const currentTime = Math.max(0, (visitTime - dayjs(liveInfo.begin_time).valueOf()) / 1000)
-      player.current.currentTime(currentTime)
-    }
-  }
-
-  const handleVideoReload = () => {
-    if (player.current) {
-      player.current.autoplay(true)
-      player.current.load()
-    }
-  }
-
-  const handleStatusChange = (status, params = {}) => {
-    onStatusChange(status)
-    if (status === PUBLIC_LIVE_STATUS.LIVEING && params.play) {
-      player.current.play()
-    }
-  }
-
-  const options = {
-    sources: [{
-      src: liveInfo.video_url,
-      type: getType(getUrlType(liveInfo.video_url))
-    }],
-    poster: liveInfo.cover_pic_web_url,
-    autoplay: false
-  }
-
-  return (
-    <div className={style['record-video']}>
-      <Video
-        className="vjs-big-play-centered"
-        options={options}
-        onReady={handleVideoReady}
-      />
-      <LiveStatus
-        userInfo={userInfo}
-        visitTime={visitTime}
-        diffTime={diffTime}
-        liveInfo={liveInfo}
-        isLiveLoading={isLiveLoading}
-        isLiveLoadError={isLiveLoadError}
-        onStatusChange={handleStatusChange}
-        onPlayReplay={onPlayReplay}
-        onReloadLive={handleVideoReload}
-      />
-    </div>
-  )
-}
+import React, { useState, useEffect, useRef } from 'react'
+import { Video } from 'fish'
+import dayjs from 'dayjs'
+import { PUBLIC_LIVE_STATUS } from '@/config/publicLive'
+import { getUrlType, getType } from '@/util/video'
+import { getRecordLiveStatus } from '@/util/live'
+import LiveStatus from '../LiveStatus'
+import style from './index.module.less'
+
+export default function RecordVideo({
+  userInfo,
+  liveInfo,
+  visitTime,
+  diffTime,
+  onStatusChange,
+  onPlayReplay,
+  onVideoPlay = () => undefined,
+  onRequestFullScreen = () => undefined
+}) {
+  const isFullScreenRef = useRef(false)
+  const [isLiveLoading, setIsLiveLoading] = useState(false)
+  const [isLiveLoadError, setIsLiveLoadError] = useState(false)
+  const hasPlayed = useRef(false)
+  const player = useRef()
+  const endTimer = useRef()
+  const needLogin = !userInfo && liveInfo.login
+
+  useEffect(() => {
+    const isLiving = liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
+    if (isLiving && needLogin) {
+      const timeToEnd = dayjs(liveInfo.end_time).valueOf() - (Date.now() - diffTime)
+      if (timeToEnd > 0) {
+        endTimer.current = setTimeout(() => {
+          onStatusChange(PUBLIC_LIVE_STATUS.COMPLETEED)
+        }, timeToEnd)
+      }
+    }
+
+    if (player.current) {
+      player.current.controls(isLiving && !needLogin)
+
+      // 显示成封面
+      if (liveInfo.status === PUBLIC_LIVE_STATUS.COMPLETEED || liveInfo.status === PUBLIC_LIVE_STATUS.OFFLINE) {
+        player.current.autoplay(false)
+        player.current.load()
+      }
+    }
+
+    return () => {
+      clearTimeout(endTimer.current)
+    }
+  }, [liveInfo.status, userInfo])
+
+  const handleVideoReady = (v, playerIns) => {
+    player.current = playerIns
+
+    playerIns.on('fullscreenchange', () => {
+      const isFullScreenNow = playerIns.isFullscreen()
+      if (isFullScreenNow) {
+        if (!isFullScreenRef.current) {
+          onRequestFullScreen()
+        }
+        isFullScreenRef.current = true
+      } else {
+        isFullScreenRef.current = false
+      }
+    })
+    playerIns.on('waiting', () => {
+      setIsLiveLoading(true)
+    })
+    playerIns.on('playing', () => {
+      setIsLiveLoading(false)
+    })
+    playerIns.on('ended', () => {
+      onStatusChange(PUBLIC_LIVE_STATUS.COMPLETEED)
+    })
+    playerIns.on('play', () => {
+      const currentTime = Date.now() - diffTime
+      const status = getRecordLiveStatus(liveInfo.status, currentTime, liveInfo.begin_time, liveInfo.end_time)
+      onStatusChange(status)
+      if (status === PUBLIC_LIVE_STATUS.LIVEING) {
+        player.current.currentTime(Math.max(0, (currentTime - dayjs(liveInfo.begin_time).valueOf()) / 1000))
+      }
+
+      if (!hasPlayed.current) {
+        onVideoPlay()
+      }
+      hasPlayed.current = true
+
+      player.current.autoplay(false)
+      setIsLiveLoadError(false)
+    })
+    playerIns.on('error', () => {
+      setIsLiveLoadError(true)
+    })
+
+    const isLiving = liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
+    player.current.controls(isLiving && !needLogin)
+    if (isLiving) {
+      const currentTime = Math.max(0, (visitTime - dayjs(liveInfo.begin_time).valueOf()) / 1000)
+      player.current.currentTime(currentTime)
+    }
+  }
+
+  const handleVideoReload = () => {
+    if (player.current) {
+      player.current.autoplay(true)
+      player.current.load()
+    }
+  }
+
+  const handleStatusChange = (status, params = {}) => {
+    onStatusChange(status)
+    if (status === PUBLIC_LIVE_STATUS.LIVEING && params.play) {
+      player.current.play()
+    }
+  }
+
+  const options = {
+    sources: [{
+      src: liveInfo.video_url,
+      type: getType(getUrlType(liveInfo.video_url))
+    }],
+    poster: liveInfo.cover_pic_web_url,
+    autoplay: false
+  }
+
+  return (
+    <div className={style['record-video']}>
+      <Video
+        className="vjs-big-play-centered"
+        options={options}
+        onReady={handleVideoReady}
+      />
+      <LiveStatus
+        userInfo={userInfo}
+        visitTime={visitTime}
+        diffTime={diffTime}
+        liveInfo={liveInfo}
+        isLiveLoading={isLiveLoading}
+        isLiveLoadError={isLiveLoadError}
+        onStatusChange={handleStatusChange}
+        onPlayReplay={onPlayReplay}
+        onReloadLive={handleVideoReload}
+      />
+    </div>
+  )
+}