@x-edu/live-player 0.0.1

package/src/detail/RecordVideo/index.module.less

@@ -0,0 +1,32 @@
+.record-video {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  :global(.fish-video) {
+    width: 100%;
+    height: 100%;
+  }
+
+  :global(.video-js) {
+    width: 100%;
+    height: 100%;
+  }
+
+  :global(.video-js.vjs-playing .vjs-tech) {
+    pointer-events: none;
+  }
+
+  :global(.vjs-play-control),
+  :global(.vjs-time-control),
+  :global(.vjs-progress-control),
+  :global(.vjs-playback-rate),
+  :global(.vjs-error-display) {
+    display: none !important;
+  }
+
+  :global(.vjs-loading-spinner) {
+      display: none !important;
+  }
+  
+}

package/src/detail/ReplayVideo/index.jsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef } from 'react'
+import classNames from 'classnames'
+import Video from '@/component/VideoBase'
+import { PUBLIC_LIVE_STATUS, PROVIDE_RECORD, PUBLIC_LIVE_MODE, VIEW_REPLAY } from '@/config/publicLive'
+import { getUrlType, getType, showPlayerTip } from '@/util/video'
+import PlayerTip from '@/component/PlayerTip'
+import netUrl from '@/util/netUrl'
+import style from './index.module.less'
+
+// autoplay 仅在直播结束后点击回放使用
+export default function ReplayVideo({
+  handleLogin,
+  userInfo,
+  liveInfo,
+  onVideoPlay,
+  onRequestFullScreen
+}) {
+  const autoplay = false
+  const isFullScreenRef = useRef(false)
+  const isRecordLive = liveInfo.type === PUBLIC_LIVE_MODE.RECORDED
+  const isCompleted = liveInfo.status === PUBLIC_LIVE_STATUS.COMPLETEED
+  const isOffline = liveInfo.status === PUBLIC_LIVE_STATUS.OFFLINE
+  const hasReplay = liveInfo.view_replay === VIEW_REPLAY.ALLOW && liveInfo.provide_record !== PROVIDE_RECORD.NOT_PROVIDED
+  const isReplayReady = hasReplay && isCompleted && (liveInfo.provide_record === PROVIDE_RECORD.PROVIDED || isRecordLive)
+  const needLogin = !userInfo && liveInfo.login && isReplayReady
+  const options = {
+    sources: [{
+      src: isRecordLive ? liveInfo.video_url : liveInfo.replay_url,
+      type: getType(getUrlType(isRecordLive ? liveInfo.video_url : liveInfo.replay_url))
+    }],
+    poster: autoplay ? '' : liveInfo.cover_pic_web_url,
+    autoplay
+  }
+
+  const handleVideoReady = (v, playerIns) => {
+    playerIns.on('fullscreenchange', () => {
+      const isFullScreenNow = playerIns.isFullscreen()
+      if (isFullScreenNow) {
+        if (!isFullScreenRef.current) {
+          onRequestFullScreen()
+        }
+        isFullScreenRef.current = true
+      } else {
+        isFullScreenRef.current = false
+      }
+    })
+
+    playerIns.on('play', () => {
+      onVideoPlay()
+    })
+  }
+
+  useEffect(() => {
+    if (showPlayerTip(isRecordLive ? liveInfo.video_url : liveInfo.replay_url)) {
+      PlayerTip(400)
+    }
+  }, [])
+
+  return (
+    <div
+      className={classNames(style['replay-video'], {
+        [style['video-autoplay']]: autoplay
+      })}
+    >
+      {needLogin && (
+        <div className={style['replay-tip-wrapper']}>
+          <img src={netUrl(liveInfo.cover_pic_web_url)} width="100%" height="100%" />
+          <div className={style.mask} />
+          <div className={style['replay-tip']}>
+            <button
+              className={style['login-btn']}
+              onClick={handleLogin}
+            >
+              登录观看回放
+            </button>
+          </div>
+        </div>
+      )}
+      {!needLogin && isReplayReady && (
+        <Video options={options} showReload={false} onReady={handleVideoReady} />
+      )}
+      {!needLogin && !isReplayReady && (
+        <div className={style['replay-tip-wrapper']}>
+          <img src={netUrl(liveInfo.cover_pic_web_url)} width="100%" height="100%" />
+          <div className={style.mask} />
+          <div className={style['replay-tip']}>
+            {(!isOffline && hasReplay) ? '回放生成中...' : '回放不存在'}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/detail/ReplayVideo/index.module.less

@@ -0,0 +1,65 @@
+.replay-video {
+  width: 100%;
+  height: 100%;
+
+  :global(.fish-video) {
+    width: 100%;
+    height: 100%;
+  }
+
+  :global(.video-js) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .replay-tip-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+  }
+
+  .mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 1;
+  }
+
+  .replay-tip {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    font-size: 28px;
+    font-weight: bold;
+    color: #fff;
+    z-index: 10;
+    transform: translate(-50%, -50%);
+  }
+
+  .login-btn {
+    height: 48px;
+    line-height: 48px;
+    padding: 0 28px;
+    margin: 48px 0 0;
+    font-size: 20px;
+    font-weight: 400;
+    border-radius: 36px;
+    text-align: center;
+    color: #ffffff;
+    background: #1e62ec;
+    box-shadow: 0px 6px 10px 0px rgba(30, 98, 236, 0.2);
+    cursor: pointer;
+    border: 0;
+    outline: 0;
+  }
+
+  &.video-autoplay {
+    :global(.vjs-big-play-button) {
+      display: none !important;
+    }
+  }
+}

package/src/detail/const.js

@@ -0,0 +1,20 @@
+export const ShortUrlMap = {
+  vlab221027: '88dc48f1-7460-45d1-9c62-dd18e2557f6f',
+  'nect-ai20221028': 'bfc88f3a-5ff6-4eec-ac4f-9bc393c485c2',
+  // 正式直播
+  kms: '600f4e30-13ae-4dcd-872a-54d955503bec',
+  flt1: '105f8dff-0f25-4d91-8da8-5e1e8800d5cb',
+  flt2: '46f69dad-1475-4299-9288-2500f3bbdaff',
+  flt3: 'fba98ffe-2f5f-4630-bd39-8cf8a37d5da5',
+  flt4: '5e395246-3c9f-4be4-af40-8b7472b888ed',
+  flt5: 'ec6db645-aa15-449d-b9b2-13e0715aa281',
+  kexueyanxiu1: '382a180d-2ddb-42a4-bbe2-b7dc87b288f1',
+  kexueyanxiu2: 'ef02bcc2-ce21-4e1e-bb9e-ef0871a0a7c1',
+  kexueyanxiu3: 'f32ac797-1eef-404a-b47e-5fb168da00f1',
+  kexueyanxiu4: 'b5a96a64-e471-4bf4-b659-b981850a08a8',
+  kexueyanxiu5: 'a49c4b2b-3d6e-4589-85f2-e1efd7f3e098',
+  kexueyanxiu6: 'ae28b934-e7a1-4ba8-98da-23cc1a508893',
+  kexueyanxiu7: '6c01e78a-a09e-4c28-b3d7-5091799a9e65',
+  kexueyanxiu8: '73b9d13f-f58e-41f5-9f93-a0923ccf6044',
+  kexueyanxiu9: 'e05f575f-0f7b-4de8-ad44-24ce4f35aea1'
+}

package/src/detail/hook/usePullSource.js

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react'
+import axios from 'axios'
+import useIsMounted from '@/hook/useIsMounted'
+
+const pullInterval = 10 * 1000
+const pullTimeout = 10 * 1000
+
+export default function usePullSource({
+  sourceSrc,
+  reload,
+  shouldStartPull
+}) {
+  const isMounted = useIsMounted()
+  const counterIdRef = useRef()
+
+  function checkSourceReadyInterval() {
+    isSourceReady(sourceSrc)
+      .then(
+        () => {
+          if (isMounted) {
+            reload()
+          }
+        },
+        () => {
+          if (isMounted) {
+            counterIdRef.current = setTimeout(() => {
+              checkSourceReadyInterval()
+            }, pullInterval)
+          }
+        }
+      )
+  }
+
+  useEffect(() => {
+    if (sourceSrc && shouldStartPull) {
+      checkSourceReadyInterval()
+    }
+    return () => {
+      if (sourceSrc && shouldStartPull) {
+        clearTimeout(counterIdRef.current)
+      }
+    }
+  }, [sourceSrc, shouldStartPull])
+}
+
+async function isSourceReady(url) {
+  return axios.get(url, {
+    timeout: pullTimeout
+  })
+}

package/src/detail/hook/usePullState.js

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from 'react'
+import { getOpenClassLiveSimple } from '@/service/live'
+import useIsMounted from '@/hook/useIsMounted'
+import { PUBLIC_LIVE_STATUS } from '@/config/publicLive'
+
+const pullInterval = 1 * 60 * 1000
+
+export default function usePullState({
+  liveInfo,
+  reload,
+  shouldStartPull
+}) {
+  const isMounted = useIsMounted()
+  const counterIdRef = useRef()
+
+  function checkSourceReadyInterval() {
+    isSourceReady(liveInfo)
+      .then(
+        () => {
+          if (isMounted) {
+            reload()
+          }
+        },
+        () => {
+          if (isMounted) {
+            counterIdRef.current = setTimeout(() => {
+              checkSourceReadyInterval()
+            }, pullInterval)
+          }
+        }
+      )
+  }
+
+  useEffect(() => {
+    if (liveInfo && shouldStartPull) {
+      checkSourceReadyInterval()
+    }
+    return () => {
+      clearTimeout(counterIdRef.current)
+    }
+  }, [liveInfo, shouldStartPull])
+}
+
+async function isSourceReady(liveInfo) {
+  const newLiveInfo = await getOpenClassLiveSimple(liveInfo)
+  if (newLiveInfo.status === PUBLIC_LIVE_STATUS.LIVEING) {
+    return true
+  } else {
+    throw new Error('not started')
+  }
+}