@x-edu/live-player 0.0.16 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-edu/live-player",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "main": "dist/XEduLivePlayer.common.js",
   "scripts": {
     "start": "cross-env SDP_ENV=local gms dev",

package/src/detail/LiveStatus/AnchorOnTheWay.jsx

@@ -4,12 +4,14 @@ import dayjs from 'dayjs'
 import useInterval from '@/hook/useInterval'
 import style from './index.module.less'
 import usePullSource from '../hook/usePullSource'
+import { SUB_TYPE } from '@/config/publicLive'
 
 export default function AnchorOnTheWay({
   liveInfo,
   isStreamLive,
   hasPlayed,
-  reload
+  reload,
+  onStatusChange
 }) {
   const [isAfterEndTime, setIsAfterEndTime] = useState(
     dayjs().isAfter(dayjs(liveInfo.end_time))
@@ -19,18 +21,18 @@ export default function AnchorOnTheWay({
     setIsAfterEndTime(dayjs().isAfter(dayjs(liveInfo.end_time)))
   }, 1000)
 
-  const sourceSrc = liveInfo?.imInfo?.param?.url
-  const hasMultiLines = liveInfo?.imInfo?.param?.lines?.length > 1
-
   usePullSource({
-    sourceSrc,
+    liveInfo,
     reload,
+    onStatusChange,
     shouldStartPull: isStreamLive
   })
 
+  const hasMultiLines = liveInfo?.imInfo?.param?.lines?.length > 1
+  const isNDMeeting = liveInfo.sub_type === SUB_TYPE.NET_DRAGON
   return (
     <>
-      {isAfterEndTime
+      {isAfterEndTime && !isNDMeeting
         ? (
           <div className={style['status-completed']}>
             <div className={style.icon} />
@@ -45,7 +47,11 @@ export default function AnchorOnTheWay({
                   ? (hasPlayed
                     ? (
                       <>
-                        <div>加载中...</div>
+                        <div>
+                          {isNDMeeting
+                            ? '主播正在赶来的路上...'
+                            : '加载中...'}
+                        </div>
                         {
                           hasMultiLines ? (
                             <div
@@ -64,7 +70,11 @@ export default function AnchorOnTheWay({
                     )
                     : (
                       <>
-                        <div>等待开播中...</div>
+                        <div>
+                          {isNDMeeting
+                            ? '主播正在赶来的路上...'
+                            : '等待开播中...'}
+                        </div>
                       </>
                     )
                   )

package/src/detail/LiveStatus/index.jsx

@@ -1,12 +1,14 @@
+/* eslint-disable no-nested-ternary */
 import React, { useState } from 'react'
 import dayjs from 'dayjs'
 import { Icon, Spin } from 'fish'
-import { PROVIDE_RECORD, PUBLIC_LIVE_STATUS, VIEW_REPLAY, PUBLIC_LIVE_MODE, SUB_TYPE } from '@/config/publicLive'
+import { PROVIDE_RECORD, PUBLIC_LIVE_STATUS, VIEW_REPLAY, PUBLIC_LIVE_MODE } from '@/config/publicLive'
 import LiveCountDown from '../LiveCountDown'
 import style from './index.module.less'
 import AnchorOnTheWay from './AnchorOnTheWay'
 
 function LiveStatus({
+  isStreamLive,
   handleLogin,
   userInfo,
   liveInfo,
@@ -19,6 +21,9 @@ function LiveStatus({
   onPlayReplay = () => undefined,
   onReloadLive = () => undefined
 }) {
+  // 调试代码 模拟倒计时2S
+  // const [countDownTime, setCountDownTime] = useState(2000)
+
   const [countDownTime, setCountDownTime] = useState(dayjs(liveInfo.begin_time).valueOf() - visitTime)
   const isNoStarted = liveInfo.status === PUBLIC_LIVE_STATUS.NOSTARTED
   const isLiving = liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
@@ -26,7 +31,6 @@ function LiveStatus({
   const isPaused = liveInfo.status === PUBLIC_LIVE_STATUS.PASUED
   const isOffline = liveInfo.status === PUBLIC_LIVE_STATUS.OFFLINE
   const isRecordLive = liveInfo.type === PUBLIC_LIVE_MODE.RECORDED
-  const isStreamLive = liveInfo.type === PUBLIC_LIVE_MODE.LIVING && (liveInfo.sub_type === SUB_TYPE.OUTSIDE || liveInfo.sub_type === SUB_TYPE.REBROADCAST)
 
   // 当前时间是否在回放时间开始前, 如果没有回放开始时间, 则直接判断未回放还没生成
   const isBeforeRecordTime = liveInfo.replay_begin_time
@@ -43,6 +47,7 @@ function LiveStatus({
 
   const startLiving = () => {
     if (isRecordLive || isStreamLive) {
+      setCountDownTime(0)
       onStatusChange(PUBLIC_LIVE_STATUS.LIVEING, {
         play: !mustLogin
       })
@@ -58,51 +63,60 @@ function LiveStatus({
       onPlayReplay()
     }
   }
-
-  if (canLiveStart && !isLiveException && !isLiveLoading && !isLiveLoadError) {
-    return null
-  }
-
   // 播放状态
   if (canLiveStart) {
+    if (!isLiveException && !isLiveLoading && !isLiveLoadError) {
+      return <></>
+    }
     return (
       <>
         <div className={style['live-status-wrapper']}>
           <div className={style['live-status']}>
-            {isLiveLoadError && (
-              <>
-                <div className={style['status-load-error']}>
-                  <Icon type="exclamation-circle" className={style.icon} />
-                  <div className={style.text}>加载失败，请重试</div>
-                </div>
-                <button className={style['primary-btn']} onClick={onReloadLive}>重试</button>
-              </>
-            )}
-            {!isLiveLoadError && isLiveException && (
-              <AnchorOnTheWay
-                liveInfo={liveInfo}
-                isStreamLive={isStreamLive}
-                hasPlayed={hasPlayed}
-                reload={onReloadLive}
-              />
-            )}
-            {!isLiveLoadError && !isLiveException && isLiveLoading && (
-              <div className={style['status-living-loading']}>
-                <Spin indicator={(
-                  <Icon type="loading" spin className={style.icon} />
-                  )}
-                />
-                <div className={style.text}>加载中...</div>
-              </div>
-            )}
+            {
+              isLiveException
+                ? (
+                  <AnchorOnTheWay
+                    liveInfo={liveInfo}
+                    isStreamLive={isStreamLive}
+                    hasPlayed={hasPlayed}
+                    reload={onReloadLive}
+                    onStatusChange={onStatusChange}
+                  />
+                )
+                : isLiveLoadError
+                  ? (
+                    <>
+                      <div className={style['status-load-error']}>
+                        <Icon type="exclamation-circle" className={style.icon} />
+                        <div className={style.text}>加载失败，请重试</div>
+                      </div>
+                      <button className={style['primary-btn']} onClick={onReloadLive}>重试</button>
+                    </>
+                  )
+                  : isLiveLoading
+                    ? (
+                      <div className={style['status-living-loading']}>
+                        <Spin indicator={(
+                          <Icon type="loading" spin className={style.icon} />
+                        )}
+                        />
+                        <div className={style.text}>加载中...</div>
+                      </div>
+                    )
+                    : (<></>)
+            }
           </div>
         </div>
         {!isRecordLive && (isLiveLoadError || isLiveException) && (
-          <div className={style['video-poster']} style={coverBgStyle} />
+          <div
+            className={style['video-poster']}
+            style={coverBgStyle}
+          />
         )}
       </>
     )
   }
+
   return (
     <>
       <div className={style['live-status-wrapper']}>
@@ -121,6 +135,7 @@ function LiveStatus({
               isStreamLive={isStreamLive}
               hasPlayed={hasPlayed}
               reload={onReloadLive}
+              onStatusChange={onStatusChange}
             />
           ))}
           {isLiving && (
@@ -145,6 +160,7 @@ function LiveStatus({
               isStreamLive={isStreamLive}
               hasPlayed={hasPlayed}
               reload={onReloadLive}
+              onStatusChange={onStatusChange}
             />
           )}
           {isOffline && (

package/src/detail/LiveVideo/index.jsx

@@ -45,6 +45,7 @@ const shouldfixedLoading = window.navigator.userAgent.indexOf('iPad') > -1
   || isInWX()
 
 export default function LiveVideo({
+  isStreamLive,
   handleLogin,
   userInfo,
   liveInfo,
@@ -168,6 +169,7 @@ export default function LiveVideo({
       {showAliPlayer && <AliPlayer options={options} onReady={handleVideoReady} />}
       {supportM3u8 && (
         <LiveStatus
+          isStreamLive={isStreamLive}
           handleLogin={handleLogin}
           userInfo={userInfo}
           visitTime={visitTime}

package/src/detail/RecordVideo/index.jsx

@@ -1,148 +1,150 @@
-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({
+  isStreamLive,
+  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
+        isStreamLive={isStreamLive}
+        userInfo={userInfo}
+        visitTime={visitTime}
+        diffTime={diffTime}
+        liveInfo={liveInfo}
+        isLiveLoading={isLiveLoading}
+        isLiveLoadError={isLiveLoadError}
+        onStatusChange={handleStatusChange}
+        onPlayReplay={onPlayReplay}
+        onReloadLive={handleVideoReload}
+      />
+    </div>
+  )
+}

package/src/detail/hook/usePullSource.js

@@ -1,50 +1,82 @@
 import { useEffect, useRef } from 'react'
 import axios from 'axios'
 import useIsMounted from '@/hook/useIsMounted'
+import { PUBLIC_LIVE_STATUS } from '@/config/publicLive'
+import { getOpenClassLiveSimple } from '@/service/live'
 
 const pullInterval = 10 * 1000
+const pullStatusInterval = 30 * 1000
+const pullMultiply = pullStatusInterval / pullInterval
+
 const pullTimeout = 10 * 1000
 
 export default function usePullSource({
-  sourceSrc,
+  liveInfo,
   reload,
+  onStatusChange,
   shouldStartPull
 }) {
+  const sourceSrc = liveInfo?.imInfo?.param?.url
+    || liveInfo?.imInfo?.param?.playurl?.[0]
   const isMounted = useIsMounted()
   const counterIdRef = useRef()
 
-  function checkSourceReadyInterval() {
-    isSourceReady(sourceSrc)
-      .then(
-        () => {
-          if (isMounted) {
-            reload()
-          }
-        },
-        () => {
-          if (isMounted) {
-            counterIdRef.current = setTimeout(() => {
-              checkSourceReadyInterval()
-            }, pullInterval)
-          }
+  const loopIndex = useRef()
+  const getIsCurrentLop = (index) => index <= loopIndex.current
+
+  async function checkLiveReadyInterval(i = 0) {
+    loopIndex.current = i
+    let liveStatus
+    if (i % pullMultiply === 0) {
+      liveStatus = await getLiveNewStatus(liveInfo)
+      if (getIsCurrentLop(i)) {
+        onStatusChange(liveStatus)
+      }
+    }
+    if (liveStatus !== PUBLIC_LIVE_STATUS.COMPLETEED
+      && sourceSrc) {
+      const isSourceReady = await checkSourceReady(sourceSrc)
+      if (getIsCurrentLop(i)) {
+        if (isSourceReady && isMounted) {
+          reload()
+          return
         }
-      )
+      }
+    }
+    if (isMounted && getIsCurrentLop(i)) {
+      counterIdRef.current = setTimeout(() => {
+        checkLiveReadyInterval(i + 1)
+      }, pullInterval)
+    }
   }
 
   useEffect(() => {
-    if (sourceSrc && shouldStartPull) {
-      checkSourceReadyInterval()
+    clearTimeout(counterIdRef.current)
+    if (shouldStartPull) {
+      counterIdRef.current = setTimeout(() => {
+        checkLiveReadyInterval(0)
+      }, pullInterval)
     }
     return () => {
-      if (sourceSrc && shouldStartPull) {
+      if (shouldStartPull) {
         clearTimeout(counterIdRef.current)
       }
     }
-  }, [sourceSrc, shouldStartPull])
+  }, [sourceSrc, liveInfo.status, shouldStartPull])
+}
+
+async function checkSourceReady(url) {
+  try {
+    await axios.get(url, {
+      timeout: pullTimeout
+    })
+    return true
+  } catch (e) {
+    return false
+  }
 }
 
-async function isSourceReady(url) {
-  return axios.get(url, {
-    timeout: pullTimeout
-  })
+async function getLiveNewStatus(liveInfo) {
+  const newLiveInfo = await getOpenClassLiveSimple(liveInfo)
+  return newLiveInfo.status
 }