@x-edu/live-player 0.0.21 → 0.0.23

package/src/detail/RecordVideo/index.jsx

@@ -1,150 +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({
-  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>
-  )
-}
+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/RecordVideo/index.module.less

@@ -1,32 +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;
-  }
-  
+.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

@@ -1,93 +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>
-  )
-}
+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

@@ -1,65 +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;
-    }
-  }
-}
+.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;
+    }
+  }
+}