@x-edu/live-player 0.0.34 → 0.0.36

package/src/detail/LiveOnlineCount/util.js

@@ -1,74 +0,0 @@
-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

@@ -1,88 +0,0 @@
-/* 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'
-import { SUB_TYPE } from '@/config/publicLive'
-
-export default function AnchorOnTheWay({
-  liveInfo,
-  isStreamLive,
-  hasPlayed,
-  reload,
-  onStatusChange
-}) {
-  const [isAfterEndTime, setIsAfterEndTime] = useState(
-    dayjs().isAfter(dayjs(liveInfo.end_time))
-  )
-
-  useInterval(() => {
-    setIsAfterEndTime(dayjs().isAfter(dayjs(liveInfo.end_time)))
-  }, 1000)
-
-  usePullSource({
-    liveInfo,
-    reload,
-    onStatusChange,
-    shouldStartPull: isStreamLive
-  })
-
-  const hasMultiLines = liveInfo?.imInfo?.param?.lines?.length > 1
-  const isNDMeeting = liveInfo.sub_type === SUB_TYPE.NET_DRAGON
-  return (
-    <>
-      {isAfterEndTime && !isNDMeeting
-        ? (
-          <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>
-                          {isNDMeeting
-                            ? '主播正在赶来的路上...'
-                            : '加载中...'}
-                        </div>
-                        {
-                          hasMultiLines ? (
-                            <div
-                              style={{
-                                fontSize: '20px',
-                                fontWeight: 'normal',
-                                margin: '10px 0'
-                              }}
-                            >
-                              尝试切换线路看看吧~
-                            </div>
-                          )
-                            : <></>
-                        }
-                      </>
-                    )
-                    : (
-                      <>
-                        <div>
-                          {isNDMeeting
-                            ? '主播正在赶来的路上...'
-                            : '等待开播中...'}
-                        </div>
-                      </>
-                    )
-                  )
-                  : '主播正在赶来的路上...'
-              }
-            </div>
-          </div>
-        )}
-    </>
-  )
-}

package/src/detail/LiveStatus/index.jsx

@@ -1,202 +0,0 @@
-/* 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

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

@@ -1,193 +0,0 @@
-@import '@/component/mixin.less';
-
-.live-status-wrapper {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 80;
-}
-
-.live-status {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-
-  .primary-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;
-  }
-
-  .status-living-loading {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .text {
-      font-size: 28px;
-      font-weight: bold;
-      color: #fff;
-    }
-
-    .icon {
-      font-size: 50px;
-      color: #fff;
-      margin-bottom: 16px;
-    }
-  }
-
-  .status-living {
-    display: flex;
-    align-items: flex-end;
-
-    .text {
-      font-size: 28px;
-      font-weight: bold;
-      color: #fff;
-    }
-
-    .icon {
-      height: 42px;
-      margin-right: 12px;
-      padding-bottom: 4px;
-
-      &:after {
-        content: '';
-        display: inline-block;
-        width: 1px;
-        height: 100%;
-        vertical-align: bottom;
-      }
-
-      div {
-        display: inline-block;
-        width: 7px;
-        height: 100%;
-        margin-right: 7px;
-        border-radius: 3px;
-        background: #fff;
-        animation: load 1.04s ease infinite;
-        vertical-align: bottom;
-      }
-      div:last-child {
-        margin-right: 0px;
-      }
-      div:nth-child(1) {
-        animation-delay: 0.13s;
-      }
-      div:nth-child(2) {
-        animation-delay: 0.24s;
-      }
-      div:nth-child(3) {
-        animation-delay: 0.42s;
-      }
-      @keyframes load{
-        0%, 100%{
-            height: 6px;
-        }
-        50%{
-            height: 32px;
-        }
-      }
-    }
-  }
-
-  .status-exception {
-    .text {
-      font-size: 28px;
-      font-weight: bold;
-      color: #fff;
-    }
-
-    .icon {
-      width: 72px;
-      height: 72px;
-      background-image: url('../img/icon_coffee.png');
-      background-size: 100% 100%;
-      margin: 0 auto 16px;
-    }
-  }
-
-  .status-completed {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .text {
-      font-size: 28px;
-      font-weight: bold;
-      color: #fff;
-      margin: 10px 0;
-    }
-    
-    .icon {
-      display: block;
-      width: 54px;
-      height: 54px;
-      background-image: url('../img/icon_completed.png');
-      background-size: 100% 100%;
-    }
-  }
-
-  .status-offline,
-  .status-load-error {
-    display: flex;
-    align-items: center;
-
-    .text {
-      font-size: 28px;
-      font-weight: bold;
-      color: #fff;
-    }
-    
-    .icon {
-      display: inline-block;
-      font-size: 48px;
-      margin-right: 24px;
-      color: #fff;
-    }
-  }
-}
-
-.video-poster {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-color: #000;
-}
-
-.replay-encoding {
-  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;
-  cursor: pointer;
-  outline: 0;
-}

package/src/detail/LiveVideo/config.js

@@ -1,37 +0,0 @@
-export const skinLayout = [
-  {
-    name: 'bigPlayButton',
-    align: 'cc',
-    x: 30,
-    y: 80
-  },
-  {
-    name: 'infoDisplay'
-  },
-  {
-    name: 'controlBar',
-    align: 'blabs',
-    x: 0,
-    y: 0,
-    children: [
-      {
-        name: 'liveDisplay',
-        align: 'tlabs',
-        x: 15,
-        y: 6
-      },
-      {
-        name: 'fullScreenButton',
-        align: 'tr',
-        x: 10,
-        y: 13
-      },
-      {
-        name: 'volume',
-        align: 'tr',
-        x: 5,
-        y: 11
-      }
-    ]
-  }
-]