@x-edu/live-player 0.0.1

package/src/detail/LiveCountDown/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { useCountDown } from 'ahooks'
+import style from './index.module.less'
+import usePullState from '../hook/usePullState'
+
+export default function LiveCountDown({
+  liveInfo,
+  isStreamLive,
+  time,
+  reload,
+  onEnd = () => {}
+}) {
+  const [countdown,, formattedRes] = useCountDown({
+    targetDate: Date.now() + time,
+    interval: 500,
+    onEnd
+  })
+
+  // 设置 > 2000 避免最后一次触发，onEnd触发即可
+  usePullState({
+    liveInfo,
+    reload,
+    shouldStartPull: isStreamLive
+      && countdown >= 1000
+  })
+
+  const { days, hours, minutes, seconds } = formattedRes
+
+  return (
+    <div className={style['live-count-down']}>
+      <div className={style.title}>距离开播还剩</div>
+      <div className={style.content}>
+        <span>{days}</span>
+        天
+        <span>{hours}</span>
+        时
+        <span>{minutes}</span>
+        分
+        <span>{seconds}</span>
+        秒
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,32 @@
+.live-count-down {
+  padding: 24px 32px 32px;
+  color: #fff;
+  border-radius: 8px;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.7);;
+  box-shadow: 0px 0px 20px 0px rgba(153, 153, 153, 0.1);
+
+  .title {
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .content {
+    font-size: 16px;
+    span {
+      display: inline-block;
+      min-width: 32px;
+      height: 24px;
+      padding: 0 4px;
+      line-height: 24px;
+      font-weight: bold;
+      color: #333;
+      background-color: #fff;
+      margin: 0 6px;
+      border-radius: 4px;
+      text-align: center;
+    }
+  }
+}

package/src/detail/LiveOnlineCount/img/icon.svg

@@ -0,0 +1,16 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+  y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+  <rect x="0" y="0" width="4" height="7" fill="#fff">
+    <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0s"
+      dur="0.6s" repeatCount="indefinite" />
+  </rect>
+
+  <rect x="10" y="0" width="4" height="7" fill="#fff">
+    <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.2s"
+      dur="0.6s" repeatCount="indefinite" />
+  </rect>
+  <rect x="20" y="0" width="4" height="7" fill="#fff">
+    <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.4s"
+      dur="0.6s" repeatCount="indefinite" />
+  </rect>
+</svg>

package/src/detail/LiveOnlineCount/index.jsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react'
+import {
+  getLocalSend,
+  saveLocalSend,
+  getCacheCount,
+  saveCacheCount
+} from './util'
+import { getResourceLikesForLive, postResourceLikes } from '@/service/like'
+import style from './index.module.less'
+import IconSVG from './img/icon.svg'
+
+const ResourceType = 'open_live'
+/**
+ * 直播在线人数
+ * @param {string} resId 资源id
+ */
+export default function LiveOnlineCount({
+  resId,
+  className = '',
+  onOnlineCountChange
+}) {
+  if (!resId) return null
+
+  const [onlineCount, setOnlineCount] = useState(0)
+  const sendCount = () => {
+    const hasSend = getLocalSend(resId)
+    // setOnlineCount((t) => t + 1)
+    if (!hasSend) {
+      postResourceLikes(resId, ResourceType)
+      saveLocalSend(resId, true)
+    }
+  }
+
+  useEffect(() => {
+    (async () => {
+      let count = 0
+      // 获取点赞数
+      try {
+        // 容错处理
+        const likesData = await getResourceLikesForLive(resId, ResourceType)
+        count = likesData?.open_live_count || 0
+        saveCacheCount(resId, count)
+      } catch (e) {
+        console.error(e)
+        count = getCacheCount(resId) || 0
+      }
+      const currentCount = count === 0 ? 1 : count
+      setOnlineCount(currentCount)
+      onOnlineCountChange(currentCount)
+      sendCount()
+    })()
+  }, [])
+
+  return (
+    <div
+      className={`${style['like-wrap']} ${className}`}
+    >
+      <div className={style.icon}>
+        <img src={IconSVG} />
+      </div>
+      <div className={style['like-count']}>
+        {onlineCount}
+        {' '}
+        观看
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,33 @@
+.like-wrap {
+  display: flex;
+  align-items: center;
+  background-color: #EAEEFF;
+  border-radius: 20px;
+  height: 25px;
+  
+  .icon {
+    background: #3554ff;
+    color: #fff;
+    font-size: 16px;
+    height: 25px;
+    width: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100%;
+    img {
+      transform: rotate(180deg);
+      height: 20px;
+      width: 20px;
+    }
+  }
+}
+  
+
+.like-count {
+  color: #999999;
+  font-size: 16px;
+  line-height: 16px;
+  padding: 0 15px 0 10px;
+  color: #3554ff;
+}

package/src/detail/LiveOnlineCount/util.js

@@ -0,0 +1,74 @@
+import config from '@/config/env'
+
+const { env } = config
+
+const likesCacheKey = `x-edu-web-open-live_${env}`
+
+const likesCountCacheKey = `x-edu-web-open-liveCount_${env}`
+
+// 缓存点赞数据
+export function saveLocalSend(resId, data) {
+  try {
+    const likesLocalData = JSON.parse(localStorage.getItem(likesCacheKey)) || {}
+    likesLocalData[resId] = data
+    localStorage.setItem(likesCacheKey, JSON.stringify(likesLocalData))
+  } catch (e) {
+    return null
+  }
+}
+
+// 获取本地点赞数据
+export function getLocalSend(resId) {
+  try {
+    const likesLocalData = JSON.parse(localStorage.getItem(likesCacheKey)) || {}
+    return likesLocalData[resId]
+  } catch (e) {
+    return null
+  }
+}
+
+export function saveCacheCount(resId, count) {
+  try {
+    const likesCountLocalData = JSON.parse(localStorage.getItem(likesCountCacheKey)) || {}
+    likesCountLocalData[resId] = count
+    localStorage.setItem(likesCountCacheKey, JSON.stringify(likesCountLocalData))
+  } catch (e) {
+    return null
+  }
+}
+
+// 获取本地点赞数据
+export function getCacheCount(resId) {
+  try {
+    const likesCountLocalData = JSON.parse(localStorage.getItem(likesCountCacheKey)) || {}
+    return likesCountLocalData[resId]
+  } catch (e) {
+    return null
+  }
+}
+
+/**
+ * 格式化点赞数
+ * a. < 10000 => 原样输出
+ * b. >= 10000 => 以万（w）为单位，保留一位小数 10000-10999 => 1w+ 11000-11999 => 1.1w+
+ * c. >= 100000 => 10w+
+ * @param {number} count 点赞数量
+ * @param {number} point 保留小数点位数（情况b）
+ * @return {string} 格式化后的点赞数
+ */
+export function formatCount(count, point = 1) {
+  const countStr = count.toString()
+  const baseNum = Number('1'.padEnd(countStr.length, '0'))
+
+  if (countStr.length < 5) {
+    return countStr
+  } else if (countStr.length < 6) {
+    // 整数
+    const int = parseFloat(parseInt(count / baseNum, 10))
+    // 截取几位小数（非四舍五入）
+    const decimal = Number(countStr.substring(1, 1 + point))
+    return `${int}${decimal ? `.${decimal}` : ''}w+`
+  } else {
+    return '10w+'
+  }
+}

package/src/detail/LiveStatus/AnchorOnTheWay.jsx

@@ -0,0 +1,78 @@
+/* eslint-disable no-nested-ternary */
+import React, { useState } from 'react'
+import dayjs from 'dayjs'
+import useInterval from '@/hook/useInterval'
+import style from './index.module.less'
+import usePullSource from '../hook/usePullSource'
+
+export default function AnchorOnTheWay({
+  liveInfo,
+  isStreamLive,
+  hasPlayed,
+  reload
+}) {
+  const [isAfterEndTime, setIsAfterEndTime] = useState(
+    dayjs().isAfter(dayjs(liveInfo.end_time))
+  )
+
+  useInterval(() => {
+    setIsAfterEndTime(dayjs().isAfter(dayjs(liveInfo.end_time)))
+  }, 1000)
+
+  const sourceSrc = liveInfo?.imInfo?.param?.url
+  const hasMultiLines = liveInfo?.imInfo?.param?.lines?.length > 1
+
+  usePullSource({
+    sourceSrc,
+    reload,
+    shouldStartPull: isStreamLive
+  })
+
+  return (
+    <>
+      {isAfterEndTime
+        ? (
+          <div className={style['status-completed']}>
+            <div className={style.icon} />
+            <div className={style.text}>已结束</div>
+          </div>
+        ) : (
+          <div className={style['status-exception']}>
+            <div className={style.icon} />
+            <div className={style.text}>
+              {
+                isStreamLive
+                  ? (hasPlayed
+                    ? (
+                      <>
+                        <div>加载中...</div>
+                        {
+                          hasMultiLines ? (
+                            <div
+                              style={{
+                                fontSize: '20px',
+                                fontWeight: 'normal',
+                                margin: '10px 0'
+                              }}
+                            >
+                              尝试切换线路看看吧~
+                            </div>
+                          )
+                            : <></>
+                        }
+                      </>
+                    )
+                    : (
+                      <>
+                        <div>等待开播中...</div>
+                      </>
+                    )
+                  )
+                  : '主播正在赶来的路上...'
+              }
+            </div>
+          </div>
+        )}
+    </>
+  )
+}

package/src/detail/LiveStatus/index.jsx

@@ -0,0 +1,186 @@
+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 LiveCountDown from '../LiveCountDown'
+import style from './index.module.less'
+import AnchorOnTheWay from './AnchorOnTheWay'
+
+function LiveStatus({
+  handleLogin,
+  userInfo,
+  liveInfo,
+  hasPlayed,
+  visitTime,
+  isLiveException, // 拉流异常
+  isLiveLoading,
+  isLiveLoadError, // 视频加载失败
+  onStatusChange = () => undefined,
+  onPlayReplay = () => undefined,
+  onReloadLive = () => undefined
+}) {
+  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 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
+    ? 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) {
+      onStatusChange(PUBLIC_LIVE_STATUS.LIVEING, {
+        play: !mustLogin
+      })
+    } else {
+      setCountDownTime(0)
+    }
+  }
+
+  const handleViewReplay = () => {
+    if (mustLogin) {
+      handleLogin()
+    } else {
+      onPlayReplay()
+    }
+  }
+
+  if (canLiveStart && !isLiveException && !isLiveLoading && !isLiveLoadError) {
+    return null
+  }
+
+  // 播放状态
+  if (canLiveStart) {
+    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>
+            )}
+          </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}
+            />
+          ))}
+          {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}
+            />
+          )}
+          {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