@x-edu/live-player 0.0.33 → 0.0.35

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
-      }
-    ]
-  }
-]

package/src/detail/LiveVideo/index.jsx

@@ -1,188 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import classNames from 'classnames'
-import AliPlayer from '@/component/AliPlayer'
-import PlayerTip from '@/component/PlayerTip'
-import { PUBLIC_LIVE_STATUS } from '@/config/publicLive'
-import { isIE, isWin7 } from '@/util/type'
-import LiveStatus from '../LiveStatus'
-import { skinLayout } from './config'
-import style from './index.module.less'
-import { isInWX } from '@/util/env'
-
-const getOption = (liveInfo) => (
-  {
-    source: JSON.stringify({
-      ...liveInfo.imInfo?.param?.url ? {
-        OD: liveInfo.imInfo?.param?.url
-      } : {},
-      ...liveInfo.imInfo?.param?.url1080p ? {
-        HD: liveInfo.imInfo?.param?.url1080p
-      } : {},
-      ...liveInfo.imInfo?.param?.url720p ? {
-        SD: liveInfo.imInfo?.param?.url720p
-      } : {},
-      ...liveInfo.imInfo?.param?.url360p ? {
-        LD: liveInfo.imInfo?.param?.url360p
-      } : {}
-    }),
-    width: '100%',
-    height: '100%',
-    autoplay: false,
-    controls: true,
-    isLive: true,
-    trackLog: false,
-    cover: liveInfo.cover_pic_web_url,
-    components: [{
-      name: 'QualityComponent',
-      args: [() => {}]
-    }],
-    skinLayout
-  }
-)
-
-const shouldfixedLoading = window.navigator.userAgent.indexOf('iPad') > -1
-  || window.navigator.userAgent.indexOf('iPhone') > -1
-  || isInWX()
-
-export default function LiveVideo({
-  isStreamLive,
-  handleLogin,
-  userInfo,
-  liveInfo,
-  visitTime,
-  lineChanging, // 线路切换中标识
-  onStatusChange,
-  onPlayReplay,
-  onVideoPlay = () => {},
-  onRequestFullScreen = () => {}
-}) {
-  const [isLiveLoading, setIsLiveLoadingHook] = useState(false)
-  const setIsLiveLoading = (value) => {
-    if (value && !shouldfixedLoading) {
-      setIsLiveLoadingHook(true)
-    } else {
-      setIsLiveLoadingHook(false)
-    }
-  }
-  const [isLiveException, setIsLiveException] = useState(false)
-  const [isLiveLoadError, setIsLiveLoadError] = useState(false)
-  const player = useRef()
-  const initialStatus = useRef(liveInfo.status)
-  const hasPlayed = useRef(false)
-  const isLiving = liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
-  const needLogin = !userInfo && liveInfo.login
-  const canWatch = isLiving && !needLogin
-  const supportM3u8 = !(isIE() && isWin7())
-  let options = getOption(liveInfo)
-
-  const handleVideoReload = () => {
-    setIsLiveException(false)
-    setIsLiveLoadError(false)
-    onStatusChange(PUBLIC_LIVE_STATUS.LIVEING)
-  }
-
-  useEffect(() => {
-    if (!supportM3u8) {
-      PlayerTip(400)
-    }
-  }, [])
-
-  const lineChangeRef = useRef(lineChanging)
-  useEffect(() => {
-    if (lineChangeRef.current !== lineChanging) {
-      if (lineChanging) {
-        setIsLiveLoadError(true)
-      } else {
-        setIsLiveException(false)
-        setIsLiveLoadError(false)
-      }
-      lineChangeRef.current = lineChanging
-    }
-    options = getOption(liveInfo)
-  }, [liveInfo, lineChanging])
-
-  const handleVideoReady = (aliPlayer) => {
-    aliPlayer.on('sourceloaded', (params) => {
-      const { paramData } = params
-      const { desc, definition } = paramData
-      aliPlayer.getComponent('QualityComponent').setCurrentQuality(desc, definition)
-    })
-    aliPlayer.on('playing', () => {
-      if (!hasPlayed.current) {
-        onVideoPlay()
-      }
-      hasPlayed.current = true
-      setIsLiveException(false)
-      setIsLiveLoadError(false)
-      setIsLiveLoading(false)
-    })
-    aliPlayer.on('canplay', () => {
-      setIsLiveLoading(false)
-    })
-    aliPlayer.on('waiting', () => {
-      setIsLiveLoading(true)
-    })
-    aliPlayer.on('requestFullScreen', () => {
-      onRequestFullScreen()
-    })
-    aliPlayer.on('liveStreamStop', (err) => {
-      setIsLiveException(true)
-      console.warn(`liveStreamStop: isOnline ${window.navigator.onLine}`)
-      console.error('liveStreamStop', err)
-    })
-    aliPlayer.on('error', (err) => {
-      setIsLiveLoadError(true)
-      console.warn(`liveStreamError: isOnline ${window.navigator.onLine}`)
-      console.error('liveStreamError', err)
-    })
-    // 清晰度组件首次点击不显示问题处理
-    document.querySelector('.quality-list').style.display = 'none'
-    player.current = aliPlayer
-
-    // 倒计时结束或者非首次播放状态进入 自动播放
-    if ((initialStatus.current === PUBLIC_LIVE_STATUS.NOSTARTED
-      || (initialStatus.current === PUBLIC_LIVE_STATUS.LIVEING && hasPlayed.current)) && !needLogin) {
-      player.current.play()
-    }
-  }
-
-  const handleStatusChange = (status) => {
-    onStatusChange(status)
-  }
-
-  const hasException = isLiveLoadError || isLiveException
-  const showAliPlayer = !!liveInfo.imInfo?.param?.url1080p && canWatch && !hasException && supportM3u8
-  const showLiveException = !!liveInfo.imInfo && !showAliPlayer
-
-  useEffect(() => {
-    if (showAliPlayer) {
-      setIsLiveLoading(true)
-    }
-  }, [showAliPlayer])
-
-  return (
-    <div
-      className={classNames(style['live-video'], {
-        [style['hide-play-btn']]: !canWatch
-      })}
-    >
-      {showAliPlayer && <AliPlayer options={options} onReady={handleVideoReady} />}
-      {supportM3u8 && (
-        <LiveStatus
-          isStreamLive={isStreamLive}
-          handleLogin={handleLogin}
-          userInfo={userInfo}
-          visitTime={visitTime}
-          hasPlayed={hasPlayed.current}
-          liveInfo={liveInfo}
-          isLiveLoading={isLiveLoading}
-          isLiveException={isLiveException || showLiveException}
-          isLiveLoadError={isLiveLoadError}
-          onStatusChange={handleStatusChange}
-          onPlayReplay={onPlayReplay}
-          onReloadLive={handleVideoReload}
-        />
-      )}
-    </div>
-  )
-}

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

@@ -1,41 +0,0 @@
-.live-video {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background: #000;
-
-  :global(.quality-components) {
-    margin-top: 7px;
-  }
-
-  :global(.prism-player .prism-controlbar .prism-controlbar-bg) {
-    background: rgba(75, 75, 75, .75);
-  }
-
-  &.hide-play-btn {
-    :global(.prism-big-play-btn) {
-      display: none !important;
-    }
-  }
-
-  :global(.prism-player .prism-big-play-btn) {
-    height: 45px;
-    width: 90px;
-    display: block;
-    padding: 0;
-    cursor: pointer;
-    opacity: 1;
-    border: 2px solid #fff;
-    background-image: url('./asset/play-button.png');
-    background-size: 100% 100%;
-    border-radius: 9px;
-    overflow: hidden;
-    &>div {
-      display: none;
-    }
-    &:hover {
-      opacity: 0.8;
-      background-image: url('./asset/play-button-hover.png');
-    }
-  }
-}

package/src/detail/NotLoginChatroom/index.jsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { Button } from 'fish'
-import style from './index.module.less'
-
-export default function NotLoginChatroom({
-  handleLogin
-}) {
-  return (
-    <div className={style['chatroom-not-login']}>
-      <div className={style['chatroom-not-login-messsage']}>
-        <img src={require('./asset/empty.png')} />
-        <div>暂无内容</div>
-      </div>
-      <div
-        type="primary"
-        className={style['chatroom-login-editor']}
-      >
-        <div
-          className={style['chatroom-login-textarea']}
-        >
-          <a
-            onClick={handleLogin}
-          >
-            登录
-          </a>
-          发言，参与直播互动
-        </div>
-        <Button
-          className={style['chatroom-login-send']}
-          disabled
-        >
-          发送
-        </Button>
-      </div>
-    </div>
-  )
-}