@x-edu/live-player 0.0.19 → 0.0.21

package/src/detail/LiveStatus/index.jsx

@@ -1,202 +1,202 @@
-/* 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 } from '@/config/publicLive'
-import LiveCountDown from '../LiveCountDown'
-import style from './index.module.less'
-import AnchorOnTheWay from './AnchorOnTheWay'
-
-function LiveStatus({
-  isStreamLive,
-  handleLogin,
-  userInfo,
-  liveInfo,
-  hasPlayed,
-  visitTime,
-  isLiveException, // 拉流异常
-  isLiveLoading,
-  isLiveLoadError, // 视频加载失败
-  onStatusChange = () => undefined,
-  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
-  const isCompleted = liveInfo.status === PUBLIC_LIVE_STATUS.COMPLETEED
-  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 isBeforeRecordTime = liveInfo.replay_begin_time
-    ? dayjs().isBefore(dayjs(liveInfo.replay_begin_time))
-    : true
-
-  const mustLogin = !userInfo && liveInfo.login
-  const canLiveStart = isLiving && !mustLogin
-  const hasReplayBtn = isCompleted && liveInfo.view_replay === VIEW_REPLAY.ALLOW && liveInfo.provide_record !== PROVIDE_RECORD.NOT_PROVIDED
-  const hasLoginBtn = mustLogin && (isNoStarted || isLiving)
-  const coverBgStyle = {
-    backgroundImage: `url("${liveInfo.cover_pic_web_url}")`
-  }
-
-  const startLiving = () => {
-    if (isRecordLive || isStreamLive) {
-      setCountDownTime(0)
-      onStatusChange(PUBLIC_LIVE_STATUS.LIVEING, {
-        play: !mustLogin
-      })
-    } else {
-      setCountDownTime(0)
-    }
-  }
-
-  const handleViewReplay = () => {
-    if (mustLogin) {
-      handleLogin()
-    } else {
-      onPlayReplay()
-    }
-  }
-  // 播放状态
-  if (canLiveStart) {
-    if (!isLiveException && !isLiveLoading && !isLiveLoadError) {
-      return <></>
-    }
-    return (
-      <>
-        <div className={style['live-status-wrapper']}>
-          <div className={style['live-status']}>
-            {
-              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}
-          />
-        )}
-      </>
-    )
-  }
-
-  return (
-    <>
-      <div className={style['live-status-wrapper']}>
-        <div className={style['live-status']}>
-          {isNoStarted && (countDownTime > 0 ? (
-            <LiveCountDown
-              liveInfo={liveInfo}
-              isStreamLive={isStreamLive}
-              time={countDownTime}
-              reload={onReloadLive}
-              onEnd={startLiving}
-            />
-          ) : (
-            <AnchorOnTheWay
-              liveInfo={liveInfo}
-              isStreamLive={isStreamLive}
-              hasPlayed={hasPlayed}
-              reload={onReloadLive}
-              onStatusChange={onStatusChange}
-            />
-          ))}
-          {isLiving && (
-            <div className={style['status-living']}>
-              <div className={style.icon}>
-                <div />
-                <div />
-                <div />
-              </div>
-              <div className={style.text}>开播中</div>
-            </div>
-          )}
-          {isCompleted && (
-            <div className={style['status-completed']}>
-              <div className={style.icon} />
-              <div className={style.text}>已结束</div>
-            </div>
-          )}
-          {isPaused && (
-            <AnchorOnTheWay
-              liveInfo={liveInfo}
-              isStreamLive={isStreamLive}
-              hasPlayed={hasPlayed}
-              reload={onReloadLive}
-              onStatusChange={onStatusChange}
-            />
-          )}
-          {isOffline && (
-            <div className={style['status-offline']}>
-              <Icon type="exclamation-circle" className={style.icon} />
-              <div className={style.text}>已下架</div>
-            </div>
-          )}
-          {hasLoginBtn && (
-            <button
-              className={style['primary-btn']}
-              onClick={handleLogin}
-            >
-              请登录查看
-            </button>
-          )}
-          {hasReplayBtn && liveInfo.replay_url && (
-            <button
-              className={style['primary-btn']}
-              onClick={handleViewReplay}
-            >
-              {mustLogin ? '登录观看回放' : '观看回放'}
-            </button>
-          )}
-          {hasReplayBtn && !liveInfo.replay_url && isBeforeRecordTime && (
-            <div className={style['replay-encoding']}>
-              回放生成中，请稍后再来...
-            </div>
-          )}
-        </div>
-      </div>
-      {!isRecordLive && (!isLiving || (isLiving && mustLogin)) && (
-        <div className={style['video-poster']} style={coverBgStyle} />
-      )}
-    </>
-  )
-}
-
-export default LiveStatus
+/* 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 } from '@/config/publicLive'
+import LiveCountDown from '../LiveCountDown'
+import style from './index.module.less'
+import AnchorOnTheWay from './AnchorOnTheWay'
+
+function LiveStatus({
+  isStreamLive,
+  handleLogin,
+  userInfo,
+  liveInfo,
+  hasPlayed,
+  visitTime,
+  isLiveException, // 拉流异常
+  isLiveLoading,
+  isLiveLoadError, // 视频加载失败
+  onStatusChange = () => undefined,
+  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
+  const isCompleted = liveInfo.status === PUBLIC_LIVE_STATUS.COMPLETEED
+  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 isBeforeRecordTime = liveInfo.replay_begin_time
+    ? dayjs().isBefore(dayjs(liveInfo.replay_begin_time))
+    : true
+
+  const mustLogin = !userInfo && liveInfo.login
+  const canLiveStart = isLiving && !mustLogin
+  const hasReplayBtn = isCompleted && liveInfo.view_replay === VIEW_REPLAY.ALLOW && liveInfo.provide_record !== PROVIDE_RECORD.NOT_PROVIDED
+  const hasLoginBtn = mustLogin && (isNoStarted || isLiving)
+  const coverBgStyle = {
+    backgroundImage: `url("${liveInfo.cover_pic_web_url}")`
+  }
+
+  const startLiving = () => {
+    if (isRecordLive || isStreamLive) {
+      setCountDownTime(0)
+      onStatusChange(PUBLIC_LIVE_STATUS.LIVEING, {
+        play: !mustLogin
+      })
+    } else {
+      setCountDownTime(0)
+    }
+  }
+
+  const handleViewReplay = () => {
+    if (mustLogin) {
+      handleLogin()
+    } else {
+      onPlayReplay()
+    }
+  }
+  // 播放状态
+  if (canLiveStart) {
+    if (!isLiveException && !isLiveLoading && !isLiveLoadError) {
+      return <></>
+    }
+    return (
+      <>
+        <div className={style['live-status-wrapper']}>
+          <div className={style['live-status']}>
+            {
+              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}
+          />
+        )}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <div className={style['live-status-wrapper']}>
+        <div className={style['live-status']}>
+          {isNoStarted && (countDownTime > 0 ? (
+            <LiveCountDown
+              liveInfo={liveInfo}
+              isStreamLive={isStreamLive}
+              time={countDownTime}
+              reload={onReloadLive}
+              onEnd={startLiving}
+            />
+          ) : (
+            <AnchorOnTheWay
+              liveInfo={liveInfo}
+              isStreamLive={isStreamLive}
+              hasPlayed={hasPlayed}
+              reload={onReloadLive}
+              onStatusChange={onStatusChange}
+            />
+          ))}
+          {isLiving && (
+            <div className={style['status-living']}>
+              <div className={style.icon}>
+                <div />
+                <div />
+                <div />
+              </div>
+              <div className={style.text}>开播中</div>
+            </div>
+          )}
+          {isCompleted && (
+            <div className={style['status-completed']}>
+              <div className={style.icon} />
+              <div className={style.text}>已结束</div>
+            </div>
+          )}
+          {isPaused && (
+            <AnchorOnTheWay
+              liveInfo={liveInfo}
+              isStreamLive={isStreamLive}
+              hasPlayed={hasPlayed}
+              reload={onReloadLive}
+              onStatusChange={onStatusChange}
+            />
+          )}
+          {isOffline && (
+            <div className={style['status-offline']}>
+              <Icon type="exclamation-circle" className={style.icon} />
+              <div className={style.text}>已下架</div>
+            </div>
+          )}
+          {hasLoginBtn && (
+            <button
+              className={style['primary-btn']}
+              onClick={handleLogin}
+            >
+              请登录查看
+            </button>
+          )}
+          {hasReplayBtn && liveInfo.replay_url && (
+            <button
+              className={style['primary-btn']}
+              onClick={handleViewReplay}
+            >
+              {mustLogin ? '登录观看回放' : '观看回放'}
+            </button>
+          )}
+          {hasReplayBtn && !liveInfo.replay_url && isBeforeRecordTime && (
+            <div className={style['replay-encoding']}>
+              回放生成中，请稍后再来...
+            </div>
+          )}
+        </div>
+      </div>
+      {!isRecordLive && (!isLiving || (isLiving && mustLogin)) && (
+        <div className={style['video-poster']} style={coverBgStyle} />
+      )}
+    </>
+  )
+}
+
+export default LiveStatus