@x-edu/live-player 0.0.18 → 0.0.20

package/src/detail/index.jsx

@@ -1,483 +1,482 @@
-/* eslint-disable camelcase */
-import React, { useState, useEffect } from 'react'
-import { Icon } from 'fish'
-import dayjs from 'dayjs'
-import classNames from 'classnames'
-// import Empty from '@/component/Empty'
-import {
-  getOpenClassLive
-  // getServerTime
-} from '@/service/live'
-import { getIMLiveInfo, getGuestIMLiveInfo } from '@/service/imBroadcasts'
-import Loading from '@/component/status/Loading'
-import {
-  PUBLIC_LIVE_STATUS, PUBLIC_LIVE_MODE, SUB_TYPE
-} from '@/config/publicLive'
-import { getUrlQuery } from '@/util/url'
-import { getRecordLiveStatus } from '@/util/live'
-import { isEmpty } from '@/util/object'
-// import IMChatroom from '@/component/IMChatroom'
-import RecordVideo from './RecordVideo'
-import LiveVideo from './LiveVideo'
-import LineSwitch from './LineSwitch'
-import ReplayVideo from './ReplayVideo'
-import style from './index.module.less'
-import LiveOnlineCount from './LiveOnlineCount'
-import { LOGIN_STATUS } from '@/config/constant/user'
-import { USER_IDENTITY_NAME } from '@/config/live'
-// import NotLoginChatroom from './NotLoginChatroom'
-import netUrl from '@/util/netUrl'
-import { ShortUrlMap } from './const'
-import { setUC } from '@/util/auth/func'
-import config from '@/config/env'
-
-const TrackPageName = 'edu_Platform_publiclive_detail_page'
-
-export default function PublicLiveDetail({
-  containerClassName,
-  className,
-  infoClassName,
-  playerClassName,
-  descriptionClassName,
-  errorCover, // 当直播不存在或者错误时候的封面展示
-  errorText,
-  replay: propRelay,
-  liveId: propLiveId,
-  sdpAppId: propSdpAppId,
-  uc,
-  loginInfo = {},
-  handleLogin,
-  onOnlineCountChange = () => {},
-  onStateChange = () => {},
-  onReportProgress = () => {},
-  onReportTeacherTrain = () => {},
-  onSendSensors = () => {}
-}) {
-  setUC(uc, loginInfo?.userInfo)
-  if (propSdpAppId) {
-    config.app.appid = propSdpAppId
-  }
-
-  const { replay, live_id } = getUrlQuery()
-  const matchId = propLiveId || live_id
-  const replayMode = propRelay || replay
-  const liveId = ShortUrlMap[matchId] || matchId
-
-  const [liveInfo, setLiveInfo] = useState()
-  const [visitTime, setVisitTime] = useState()
-  const [diffTime, setDiffTime] = useState()
-  const [isReplayMode, setIsReplayMode] = useState(!!replayMode)
-  const [isExist, setIsExist] = useState(true)
-  const [lineChanging, setLineChanging] = useState(false) // 线路切换中标识
-
-  const {
-    userInfo,
-    userRole,
-    loginStatus
-  } = loginInfo
-  const isLiveToReplay = !replay
-  const isStreamLive = liveInfo
-    && liveInfo.type === PUBLIC_LIVE_MODE.LIVING
-
-  const handleStatusChange = async (status) => {
-    const newLiveInfo = {
-      ...liveInfo,
-      status
-    }
-    setLiveInfo(newLiveInfo)
-    onStateChange(newLiveInfo)
-    const isRecordLive = liveInfo.type === PUBLIC_LIVE_MODE.RECORDED
-    if (!isRecordLive
-      && [
-        PUBLIC_LIVE_STATUS.NOSTARTED,
-        PUBLIC_LIVE_STATUS.LIVEING,
-        PUBLIC_LIVE_STATUS.PASUED
-      ].includes(status)
-      && isEmpty(liveInfo.imInfo)
-    ) {
-      const {
-        sub_type: subType,
-        bid,
-        room_id: roomId
-      } = liveInfo
-      let imLiveInfoResp = {}
-      // 如果类型为外部推流, 则去请求新的直播详情接口
-      if (subType === SUB_TYPE.OUTSIDE || subType === SUB_TYPE.REBROADCAST) {
-        imLiveInfoResp = await getGuestIMLiveInfo(bid)
-          .catch(() => ({}))
-
-        // 默认使用lines[0] 作为直播源
-        imLiveInfoResp = {
-          ...imLiveInfoResp,
-          param: {
-            ...imLiveInfoResp.param,
-            ...imLiveInfoResp.param?.lines?.[0]
-          }
-        }
-      } else {
-        imLiveInfoResp = await getIMLiveInfo(roomId)
-          .catch(() => ({}))
-      }
-      setLiveInfo({
-        ...liveInfo,
-        status,
-        imInfo: imLiveInfoResp
-      })
-    }
-  }
-
-  const handleSelectChange = (lineSource) => {
-    setLineChanging(true)
-    setTimeout(() => {
-      setLiveInfo({
-        ...liveInfo,
-        imInfo: {
-          ...liveInfo.imInfo,
-          param: {
-            ...liveInfo.imInfo.param,
-            ...lineSource
-          }
-        }
-      })
-      setLineChanging(false)
-    }, 0)
-  }
-
-  useEffect(() => {
-    const init = async () => {
-      const [data, error] = await getOpenClassLive(liveId)
-        .then((v) => [v], (err) => [null, err])
-      if (error) {
-        const { response } = error
-        if (response.status === 404 || response.status === 400) {
-          setIsExist(false)
-        }
-        return
-      }
-
-      // 调试代码 模拟直播倒计时结束
-      // data.status = PUBLIC_LIVE_STATUS.NOSTARTED
-
-      const isRecordLive = data.type === PUBLIC_LIVE_MODE.RECORDED
-      const isNoStarted = data.status === PUBLIC_LIVE_STATUS.NOSTARTED
-      const isCompleted = data.status === PUBLIC_LIVE_STATUS.COMPLETEED
-      const isOffline = data.status === PUBLIC_LIVE_STATUS.OFFLINE
-
-      // 录播未完成或未下架，直播未开始时需要服务器时间
-      let serverTime
-      if ((isRecordLive && (!isCompleted || !isOffline)) || (!isRecordLive && !isReplayMode && isNoStarted)) {
-        // const response = await getServerTime()
-        serverTime = data.serverTime
-        setDiffTime(data.diffTime)
-        setVisitTime(serverTime)
-      }
-      // 录播计算状态
-      if (isRecordLive) {
-        const status = getRecordLiveStatus(data.status, serverTime, data.begin_time, data.end_time)
-        data.status = status
-      }
-      if (!isRecordLive) {
-        const {
-          sub_type: subType,
-          bid,
-          room_id: roomId
-        } = data
-        let imLiveInfoResp = {}
-        // 如果类型为外部推流, 则去请求新的直播详情接口
-        if (subType === SUB_TYPE.OUTSIDE || subType === SUB_TYPE.REBROADCAST) {
-          // if (subType === SUB_TYPE.OUTSIDE) {
-          imLiveInfoResp = await getGuestIMLiveInfo(bid)
-            .catch(() => ({}))
-          // 默认使用lines[0] 作为直播源
-          imLiveInfoResp = {
-            ...imLiveInfoResp,
-            param: {
-              ...imLiveInfoResp.param,
-              ...imLiveInfoResp.param?.lines?.[0]
-            }
-          }
-        } else if (data.status === PUBLIC_LIVE_STATUS.LIVEING) {
-          imLiveInfoResp = await getIMLiveInfo(roomId)
-            .catch(() => ({}))
-        }
-        data.imInfo = imLiveInfoResp
-      }
-      // 如果是转播或者是推流 直接播放（用于调试模式）
-      const { preview } = getUrlQuery() // 后台点预览会加这个参数
-      const generateInfo = preview ? Object.assign(data, {
-        status: 1
-      }) : data
-      setLiveInfo(generateInfo)
-    }
-    init()
-  }, [])
-
-  useEffect(() => {
-    if (userInfo) {
-      onReportProgress()
-    }
-  }, [userInfo])
-
-  useEffect(() => {
-    if (loginStatus !== LOGIN_STATUS.WAIT && liveInfo) {
-      onSendSensors({
-        pageName: TrackPageName,
-        eventName: 'edu_Platform_publiclive_detail_page',
-        params: {
-          publiclive_id: liveInfo.live_id,
-          publiclive_name: liveInfo.live_name,
-          // 1-直播, 2-录播
-          publiclive_type: liveInfo.type === 1 ? '实时直播' : '录播直播',
-          identity: userRole
-            ? USER_IDENTITY_NAME[userRole]
-            : '游客'
-        }
-      })
-    }
-  }, [!!userRole, !!liveInfo, loginStatus])
-
-  if (!isExist) {
-    return (
-      <div
-        className={classNames(
-          style['public-live-detail-wrapper'],
-          style['live-empty'],
-          containerClassName
-        )}
-        style={{
-          backgroundImage: `url(${errorCover})`
-        }}
-      >
-        <div className={style['empty-marker']} />
-        <div className={style['empty-content']}>
-          {/* eslint-disable-next-line max-len */}
-          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALOSURBVHgB7VqLbeMwDGVugctt4BEygje4bFBv0G5y2SC5Rc4jpBNEneDaLtBXCVIA16asL50U8AMEA7ZF6pG0PqSJVqxYIYkNCQHAVl8a3Xa6/dTt1+Dxs25v5rrZbN7o3qHJtLoddDsjHmfXp6V7gvGMbo+JZHxQuj3QraEHsXeDqQ11E4JaaaNbD3kcjS5aAlrRDmEvmefmu+lgjbAd9N86GXv3ToysHUlCK3hA2MItJcIRPQVky4RmgFSPCiED693TYuScRX14osowMnV79eirE5bOimqG2JEEMKNX1YgOQjj2b0GupxLAzmqxkCJnPgMuLPeUC4+1TPyfFib3xOhSGCwjKcK6uYHfgFzP6EqfuMB7qxm9sxg52O9tjHOqkDZ2sAuT43S1KQIOjIBdosLq5DwGP6QIGB9BVESfpcipkfy4cITdpGZZZQly4KMpPDt63P2bIiFNDvxsHd5mwR4n0jt+lSFGDvzs2I3f+8H05Ui8UAJ0gqbTl7/Mo64COS75MwlFjtgEOZkkKXKeseQRKxhER3KemwVHbGIR5OzJHGqTix1LFDFiXJ2CyuQa5t5kLeOIPTP3WipERXINc++dQkDBAh2D0qUAuQu065y8pUpBCTnkbqlcZ84qLVVEDjnwSaWkTXD0saUEqeRQemxxQrgiQ0OVEUsO/FbqQqkAn2coyw75dQXJed5JT6DCzo6KEVY9QUo0Tw62TFXurYEybqdvUmEiRQLE5TDzvTVS1jNCFYTKO1gqQQvpVDOvc47cpZpe+LOx5p5EUeLRQ+oDtT8DzKe7j6hXRupnSHUkAYRz+ccci8JuCObC778YqcEgUkq1e/f+uFTbOCPFlGovkC7VDgbXIG1qzoEJvX9Yqrg+ImisrlAXhpDxUn6Z6M4IXj1kZsSiE3t1IP+Xoz+ofCyS/knMfPTX6xWvZI/yJgXx8i1+EluxYsUEn1PRdSb/XhDOAAAAAElFTkSuQmCC" alt="" />
-          <p>{errorText || '内容已失效'}</p>
-        </div>
-
-      </div>
-    )
-  }
-
-  if (!liveInfo) {
-    return <Loading />
-  }
-
-  const isRecordLive = liveInfo.type === PUBLIC_LIVE_MODE.RECORDED
-  const beginTime = dayjs(liveInfo.begin_time)
-
-  const handlePlayReplay = (needReport) => {
-    if (needReport) {
-      onSendSensors({
-        pageName: TrackPageName,
-        eventName: 'edu_Platform_publiclive_detail_replay_click',
-        params: {
-          publiclive_id: liveInfo.live_id,
-          publiclive_name: liveInfo.live_name,
-          // 1-直播, 2-录播
-          publiclive_type: liveInfo.type === 1 ? '实时直播' : '录播直播'
-        }
-      })
-    }
-
-    setIsReplayMode(true)
-  }
-
-  const handleRequestFullScreen = () => {
-    onSendSensors({
-      pageName: TrackPageName,
-      eventName: 'edu_Platform_publiclive_detail_fullscreen_click'
-    })
-  }
-
-  const handleVideoPlay = (needReport) => {
-    if (needReport) {
-      onSendSensors({
-        pageName: TrackPageName,
-        eventName: 'edu_Platform_publiclive_detail_play_click',
-        params: {
-          publiclive_id: liveInfo.live_id,
-          publiclive_name: liveInfo.live_name,
-          // 1-直播, 2-录播
-          publiclive_type: liveInfo.type === 1 ? '实时直播' : '录播直播'
-        }
-      })
-    }
-    if (userInfo) {
-      // 登录且播放后上报
-      onReportTeacherTrain(userInfo?.user_id, liveId)
-    }
-  }
-
-  return (
-    <>
-      <div
-        className={classNames(
-          style['public-live-detail-wrapper'],
-          containerClassName
-        )}
-      >
-        <div
-          className={classNames(
-            className, style['live-panel']
-          )}
-        >
-          <div className={infoClassName}>
-
-            <div className={style['live-title']}>
-              <div className={style['live-name']}>
-                {liveInfo.live_name}
-              </div>
-              {
-                // eslint-disable-next-line no-nested-ternary
-                liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
-                  ? (
-                    <LiveOnlineCount
-                      className={style['live-online-count']}
-                      resId={liveId}
-                      onOnlineCountChange={onOnlineCountChange}
-                    />
-                  )
-                  : (
-                    liveInfo.status === PUBLIC_LIVE_STATUS.COMPLETEED
-                      ? (<div className={style['live-end']}>已结束</div>)
-                      : (<></>)
-                  )
-              }
-            </div>
-            <div className={style['live-info']}>
-              {/*
-                暂时隐藏主播
-                <div className={classNames(style['live-user'], {
-                [style['empty-user']]: !liveInfo.lecture_user_id && !liveInfo.lecture_user_name
-              })}
-              >
-                <Avatar className={style.avatar} src={getAvatarURL(liveInfo.lecture_user_id)} />
-                <span title={liveInfo.lecture_user_name}>{liveInfo.lecture_user_name}</span>
-              </div> */
-              }
-              <div className={style['live-time']}>
-                <Icon
-                  className={style['icon-time']}
-                  type="clock-circle"
-                />
-                <span>
-                  {`${beginTime.format(beginTime.isSame(dayjs(), 'day') ? '[今天] HH:mm' : 'YYYY-MM-DD HH:mm')} 开始`}
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            className={classNames(style['live-video-wrapper'], playerClassName)}
-          >
-            <div className={style['live-wrap']}>
-              {
-                // eslint-disable-next-line no-nested-ternary
-                isReplayMode
-                  ? (
-                    <ReplayVideo
-                      userInfo={userInfo}
-                      handleLogin={handleLogin}
-                      liveInfo={liveInfo}
-                      autoplay={isLiveToReplay}
-                      onVideoPlay={() => {
-                        handleVideoPlay(false)
-                      }}
-                      onRequestFullScreen={handleRequestFullScreen}
-                    />
-                  )
-                  : isRecordLive
-                    ? (
-                      <RecordVideo
-                        isStreamLive={isStreamLive}
-                        userInfo={userInfo}
-                        liveInfo={liveInfo}
-                        visitTime={visitTime}
-                        diffTime={diffTime}
-                        onStatusChange={handleStatusChange}
-                        onPlayReplay={() => {
-                          handlePlayReplay(true)
-                        }}
-                        onVideoPlay={() => {
-                          handleVideoPlay(true)
-                        }}
-                        onRequestFullScreen={handleRequestFullScreen}
-                      />
-                    )
-                    : (
-                      <LiveVideo
-                        isStreamLive={isStreamLive}
-                        handleLogin={handleLogin}
-                        userInfo={userInfo}
-                        liveInfo={liveInfo}
-                        visitTime={visitTime}
-                        lineChanging={lineChanging}
-                        onStatusChange={handleStatusChange}
-                        onPlayReplay={() => {
-                          handlePlayReplay(true)
-                        }}
-                        onVideoPlay={() => {
-                          handleVideoPlay(true)
-                        }}
-                        onRequestFullScreen={handleRequestFullScreen}
-                      />
-                    )
-              }
-              {/* {
-                liveInfo?.chat_type && (
-                  <div className={style['chatroom-wrap']}>
-                    <div className={style['chatroom-title']}>
-                      讨论区
-                    </div>
-                    {
-                      userInfo ? (
-                        <>
-                          <div className={style['chatroom-top-hint']}>
-                            系统提示：倡导建康的直播环境，若发布违法、违规、低俗等不良消息，我们会对违规内容及帐号进行封禁处理。
-                          </div>
-                          <IMChatroom
-                            roomId={liveInfo.chat_room_id}
-                            disableEditor={!liveInfo.chat_enabled}
-                          />
-                        </>
-                      ) : (
-                        <NotLoginChatroom
-                          handleLogin={handleLogin}
-                        />
-                      )
-                    }
-                  </div>
-                )
-              } */}
-            </div>
-            {
-              !isReplayMode && !isRecordLive
-              && liveInfo.sub_type !== SUB_TYPE.NET_DRAGON
-              && liveInfo.status !== PUBLIC_LIVE_STATUS.COMPLETEED
-              && (
-                <LineSwitch
-                  className={style['live-line-switch']}
-                  liveInfo={liveInfo}
-                  onChange={handleSelectChange}
-                />
-              )
-            }
-          </div>
-        </div>
-        <div
-          className={classNames(
-            style['live-description-panel'],
-            descriptionClassName
-          )}
-        >
-          <div className={style['desc-title']}>开播介绍</div>
-          <div className={style['desc-content']}>
-            {!liveInfo.desc_pic_web_url ? '暂无介绍' : (
-              <img className={style['desc-content-img']} src={netUrl(liveInfo.desc_pic_web_url)} alt="" />
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
+/* eslint-disable camelcase */
+import React, { useState, useEffect } from 'react'
+import { Icon } from 'fish'
+import dayjs from 'dayjs'
+import classNames from 'classnames'
+// import Empty from '@/component/Empty'
+import {
+  getOpenClassLive
+  // getServerTime
+} from '@/service/live'
+import { getIMLiveInfo, getGuestIMLiveInfo } from '@/service/imBroadcasts'
+import Loading from '@/component/status/Loading'
+import {
+  PUBLIC_LIVE_STATUS, PUBLIC_LIVE_MODE, SUB_TYPE
+} from '@/config/publicLive'
+import { getUrlQuery } from '@/util/url'
+import { getRecordLiveStatus } from '@/util/live'
+import { isEmpty } from '@/util/object'
+// import IMChatroom from '@/component/IMChatroom'
+import RecordVideo from './RecordVideo'
+import LiveVideo from './LiveVideo'
+import LineSwitch from './LineSwitch'
+import ReplayVideo from './ReplayVideo'
+import style from './index.module.less'
+import LiveOnlineCount from './LiveOnlineCount'
+import { LOGIN_STATUS } from '@/config/constant/user'
+import { USER_IDENTITY_NAME } from '@/config/live'
+// import NotLoginChatroom from './NotLoginChatroom'
+import netUrl from '@/util/netUrl'
+import { ShortUrlMap } from './const'
+import { setUC } from '@/util/auth/func'
+import config from '@/config/env'
+
+const TrackPageName = 'edu_Platform_publiclive_detail_page'
+
+export default function PublicLiveDetail({
+  containerClassName,
+  className,
+  infoClassName,
+  playerClassName,
+  descriptionClassName,
+  errorCover, // 当直播不存在或者错误时候的封面展示
+  errorText,
+  replay: propRelay,
+  liveId: propLiveId,
+  sdpAppId: propSdpAppId,
+  uc,
+  loginInfo = {},
+  handleLogin,
+  onOnlineCountChange = () => {},
+  onStateChange = () => {},
+  onReportProgress = () => {},
+  onReportTeacherTrain = () => {},
+  onSendSensors = () => {}
+}) {
+  setUC(uc, loginInfo?.userInfo)
+  if (propSdpAppId) {
+    config.app.appid = propSdpAppId
+  }
+
+  const { replay, live_id } = getUrlQuery()
+  const matchId = propLiveId || live_id
+  const replayMode = propRelay || replay
+  const liveId = ShortUrlMap[matchId] || matchId
+
+  const [liveInfo, setLiveInfo] = useState()
+  const [visitTime, setVisitTime] = useState()
+  const [diffTime, setDiffTime] = useState()
+  const [isReplayMode, setIsReplayMode] = useState(!!replayMode)
+  const [isExist, setIsExist] = useState(true)
+  const [lineChanging, setLineChanging] = useState(false) // 线路切换中标识
+
+  const {
+    userInfo,
+    userRole,
+    loginStatus
+  } = loginInfo
+  const isLiveToReplay = !replay
+  const isStreamLive = liveInfo
+    && liveInfo.type === PUBLIC_LIVE_MODE.LIVING
+
+  const handleStatusChange = async (status) => {
+    const newLiveInfo = {
+      ...liveInfo,
+      status
+    }
+    setLiveInfo(newLiveInfo)
+    onStateChange(newLiveInfo)
+    const isRecordLive = liveInfo.type === PUBLIC_LIVE_MODE.RECORDED
+    if (!isRecordLive
+      && [
+        PUBLIC_LIVE_STATUS.NOSTARTED,
+        PUBLIC_LIVE_STATUS.LIVEING,
+        PUBLIC_LIVE_STATUS.PASUED
+      ].includes(status)
+      && isEmpty(liveInfo.imInfo)
+    ) {
+      const {
+        sub_type: subType,
+        bid,
+        room_id: roomId
+      } = liveInfo
+      let imLiveInfoResp = {}
+      // 如果类型为外部推流, 则去请求新的直播详情接口
+      if (subType === SUB_TYPE.OUTSIDE || subType === SUB_TYPE.REBROADCAST) {
+        imLiveInfoResp = await getGuestIMLiveInfo(bid)
+          .catch(() => ({}))
+
+        // 默认使用lines[0] 作为直播源
+        imLiveInfoResp = {
+          ...imLiveInfoResp,
+          param: {
+            ...imLiveInfoResp.param,
+            ...imLiveInfoResp.param?.lines?.[0]
+          }
+        }
+      } else {
+        imLiveInfoResp = await getIMLiveInfo(roomId)
+          .catch(() => ({}))
+      }
+      setLiveInfo({
+        ...liveInfo,
+        status,
+        imInfo: imLiveInfoResp
+      })
+    }
+  }
+
+  const handleSelectChange = (lineSource) => {
+    setLineChanging(true)
+    setTimeout(() => {
+      setLiveInfo({
+        ...liveInfo,
+        imInfo: {
+          ...liveInfo.imInfo,
+          param: {
+            ...liveInfo.imInfo.param,
+            ...lineSource
+          }
+        }
+      })
+      setLineChanging(false)
+    }, 0)
+  }
+
+  useEffect(() => {
+    const init = async () => {
+      const [data, error] = await getOpenClassLive(liveId)
+        .then((v) => [v], (err) => [null, err])
+      if (error) {
+        const { response } = error
+        if (response.status === 404 || response.status === 400) {
+          setIsExist(false)
+        }
+        return
+      }
+
+      // 调试代码 模拟直播倒计时结束
+      // data.status = PUBLIC_LIVE_STATUS.NOSTARTED
+
+      const isRecordLive = data.type === PUBLIC_LIVE_MODE.RECORDED
+      const isNoStarted = data.status === PUBLIC_LIVE_STATUS.NOSTARTED
+      const isCompleted = data.status === PUBLIC_LIVE_STATUS.COMPLETEED
+      const isOffline = data.status === PUBLIC_LIVE_STATUS.OFFLINE
+
+      // 录播未完成或未下架，直播未开始时需要服务器时间
+      let serverTime
+      if ((isRecordLive && (!isCompleted || !isOffline)) || (!isRecordLive && !isReplayMode && isNoStarted)) {
+        // const response = await getServerTime()
+        serverTime = data.serverTime
+        setDiffTime(data.diffTime)
+        setVisitTime(serverTime)
+      }
+      // 录播计算状态
+      if (isRecordLive) {
+        const status = getRecordLiveStatus(data.status, serverTime, data.begin_time, data.end_time)
+        data.status = status
+      }
+      if (!isRecordLive) {
+        const {
+          sub_type: subType,
+          bid,
+          room_id: roomId
+        } = data
+        let imLiveInfoResp = {}
+        // 如果类型为外部推流, 则去请求新的直播详情接口
+        if (subType === SUB_TYPE.OUTSIDE || subType === SUB_TYPE.REBROADCAST) {
+          // if (subType === SUB_TYPE.OUTSIDE) {
+          imLiveInfoResp = await getGuestIMLiveInfo(bid)
+            .catch(() => ({}))
+          // 默认使用lines[0] 作为直播源
+          imLiveInfoResp = {
+            ...imLiveInfoResp,
+            param: {
+              ...imLiveInfoResp.param,
+              ...imLiveInfoResp.param?.lines?.[0]
+            }
+          }
+        } else if (data.status === PUBLIC_LIVE_STATUS.LIVEING) {
+          imLiveInfoResp = await getIMLiveInfo(roomId)
+            .catch(() => ({}))
+        }
+        data.imInfo = imLiveInfoResp
+      }
+      // 如果是转播或者是推流 直接播放（用于调试模式）
+      const { preview } = getUrlQuery() // 后台点预览会加这个参数
+      const generateInfo = preview ? Object.assign(data, {
+        status: 1
+      }) : data
+      setLiveInfo(generateInfo)
+    }
+    init()
+  }, [])
+
+  useEffect(() => {
+    if (userInfo) {
+      onReportProgress()
+    }
+  }, [userInfo])
+
+  useEffect(() => {
+    if (loginStatus !== LOGIN_STATUS.WAIT && liveInfo) {
+      onSendSensors({
+        pageName: TrackPageName,
+        eventName: 'edu_Platform_publiclive_detail_page',
+        params: {
+          publiclive_id: liveInfo.live_id,
+          publiclive_name: liveInfo.live_name,
+          // 1-直播, 2-录播
+          publiclive_type: liveInfo.type === 1 ? '实时直播' : '录播直播',
+          identity: userRole
+            ? USER_IDENTITY_NAME[userRole]
+            : '游客'
+        }
+      })
+    }
+  }, [!!userRole, !!liveInfo, loginStatus])
+
+  if (!isExist) {
+    return (
+      <div
+        className={classNames(
+          style['public-live-detail-wrapper'],
+          style['live-empty'],
+          containerClassName
+        )}
+        style={{
+          backgroundImage: `url(${errorCover})`
+        }}
+      >
+        <div className={style['empty-marker']} />
+        <div className={style['empty-content']}>
+          {/* eslint-disable-next-line max-len */}
+          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALOSURBVHgB7VqLbeMwDGVugctt4BEygje4bFBv0G5y2SC5Rc4jpBNEneDaLtBXCVIA16asL50U8AMEA7ZF6pG0PqSJVqxYIYkNCQHAVl8a3Xa6/dTt1+Dxs25v5rrZbN7o3qHJtLoddDsjHmfXp6V7gvGMbo+JZHxQuj3QraEHsXeDqQ11E4JaaaNbD3kcjS5aAlrRDmEvmefmu+lgjbAd9N86GXv3ToysHUlCK3hA2MItJcIRPQVky4RmgFSPCiED693TYuScRX14osowMnV79eirE5bOimqG2JEEMKNX1YgOQjj2b0GupxLAzmqxkCJnPgMuLPeUC4+1TPyfFib3xOhSGCwjKcK6uYHfgFzP6EqfuMB7qxm9sxg52O9tjHOqkDZ2sAuT43S1KQIOjIBdosLq5DwGP6QIGB9BVESfpcipkfy4cITdpGZZZQly4KMpPDt63P2bIiFNDvxsHd5mwR4n0jt+lSFGDvzs2I3f+8H05Ui8UAJ0gqbTl7/Mo64COS75MwlFjtgEOZkkKXKeseQRKxhER3KemwVHbGIR5OzJHGqTix1LFDFiXJ2CyuQa5t5kLeOIPTP3WipERXINc++dQkDBAh2D0qUAuQu065y8pUpBCTnkbqlcZ84qLVVEDjnwSaWkTXD0saUEqeRQemxxQrgiQ0OVEUsO/FbqQqkAn2coyw75dQXJed5JT6DCzo6KEVY9QUo0Tw62TFXurYEybqdvUmEiRQLE5TDzvTVS1jNCFYTKO1gqQQvpVDOvc47cpZpe+LOx5p5EUeLRQ+oDtT8DzKe7j6hXRupnSHUkAYRz+ccci8JuCObC778YqcEgUkq1e/f+uFTbOCPFlGovkC7VDgbXIG1qzoEJvX9Yqrg+ImisrlAXhpDxUn6Z6M4IXj1kZsSiE3t1IP+Xoz+ofCyS/knMfPTX6xWvZI/yJgXx8i1+EluxYsUEn1PRdSb/XhDOAAAAAElFTkSuQmCC" alt="" />
+          <p>{errorText || '内容已失效'}</p>
+        </div>
+
+      </div>
+    )
+  }
+
+  if (!liveInfo) {
+    return <Loading />
+  }
+
+  const isRecordLive = liveInfo.type === PUBLIC_LIVE_MODE.RECORDED
+  const beginTime = dayjs(liveInfo.begin_time)
+
+  const handlePlayReplay = (needReport) => {
+    if (needReport) {
+      onSendSensors({
+        pageName: TrackPageName,
+        eventName: 'edu_Platform_publiclive_detail_replay_click',
+        params: {
+          publiclive_id: liveInfo.live_id,
+          publiclive_name: liveInfo.live_name,
+          // 1-直播, 2-录播
+          publiclive_type: liveInfo.type === 1 ? '实时直播' : '录播直播'
+        }
+      })
+    }
+
+    setIsReplayMode(true)
+  }
+
+  const handleRequestFullScreen = () => {
+    onSendSensors({
+      pageName: TrackPageName,
+      eventName: 'edu_Platform_publiclive_detail_fullscreen_click'
+    })
+  }
+
+  const handleVideoPlay = (needReport) => {
+    if (needReport) {
+      onSendSensors({
+        pageName: TrackPageName,
+        eventName: 'edu_Platform_publiclive_detail_play_click',
+        params: {
+          publiclive_id: liveInfo.live_id,
+          publiclive_name: liveInfo.live_name,
+          // 1-直播, 2-录播
+          publiclive_type: liveInfo.type === 1 ? '实时直播' : '录播直播'
+        }
+      })
+    }
+    if (userInfo) {
+      // 登录且播放后上报
+      onReportTeacherTrain(userInfo?.user_id, liveId)
+    }
+  }
+
+  return (
+    <>
+      <div
+        className={classNames(
+          style['public-live-detail-wrapper'],
+          containerClassName
+        )}
+      >
+        <div
+          className={classNames(
+            className, style['live-panel']
+          )}
+        >
+          <div className={infoClassName}>
+
+            <div className={style['live-title']}>
+              <div className={style['live-name']}>
+                {liveInfo.live_name}
+              </div>
+              {
+                // eslint-disable-next-line no-nested-ternary
+                liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
+                  ? (
+                    <LiveOnlineCount
+                      className={style['live-online-count']}
+                      resId={liveId}
+                      onOnlineCountChange={onOnlineCountChange}
+                    />
+                  )
+                  : (
+                    liveInfo.status === PUBLIC_LIVE_STATUS.COMPLETEED
+                      ? (<div className={style['live-end']}>已结束</div>)
+                      : (<></>)
+                  )
+              }
+            </div>
+            <div className={style['live-info']}>
+              {/*
+                暂时隐藏主播
+                <div className={classNames(style['live-user'], {
+                [style['empty-user']]: !liveInfo.lecture_user_id && !liveInfo.lecture_user_name
+              })}
+              >
+                <Avatar className={style.avatar} src={getAvatarURL(liveInfo.lecture_user_id)} />
+                <span title={liveInfo.lecture_user_name}>{liveInfo.lecture_user_name}</span>
+              </div> */
+              }
+              <div className={style['live-time']}>
+                <Icon
+                  className={style['icon-time']}
+                  type="clock-circle"
+                />
+                <span>
+                  {`${beginTime.format(beginTime.isSame(dayjs(), 'day') ? '[今天] HH:mm' : 'YYYY-MM-DD HH:mm')} 开始`}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            className={classNames(style['live-video-wrapper'], playerClassName)}
+          >
+            <div className={style['live-wrap']}>
+              {
+                // eslint-disable-next-line no-nested-ternary
+                isReplayMode
+                  ? (
+                    <ReplayVideo
+                      handleLogin={handleLogin}
+                      liveInfo={liveInfo}
+                      autoplay={isLiveToReplay}
+                      onVideoPlay={() => {
+                        handleVideoPlay(false)
+                      }}
+                      onRequestFullScreen={handleRequestFullScreen}
+                    />
+                  )
+                  : isRecordLive
+                    ? (
+                      <RecordVideo
+                        isStreamLive={isStreamLive}
+                        userInfo={userInfo}
+                        liveInfo={liveInfo}
+                        visitTime={visitTime}
+                        diffTime={diffTime}
+                        onStatusChange={handleStatusChange}
+                        onPlayReplay={() => {
+                          handlePlayReplay(true)
+                        }}
+                        onVideoPlay={() => {
+                          handleVideoPlay(true)
+                        }}
+                        onRequestFullScreen={handleRequestFullScreen}
+                      />
+                    )
+                    : (
+                      <LiveVideo
+                        isStreamLive={isStreamLive}
+                        handleLogin={handleLogin}
+                        userInfo={userInfo}
+                        liveInfo={liveInfo}
+                        visitTime={visitTime}
+                        lineChanging={lineChanging}
+                        onStatusChange={handleStatusChange}
+                        onPlayReplay={() => {
+                          handlePlayReplay(true)
+                        }}
+                        onVideoPlay={() => {
+                          handleVideoPlay(true)
+                        }}
+                        onRequestFullScreen={handleRequestFullScreen}
+                      />
+                    )
+              }
+              {/* {
+                liveInfo?.chat_type && (
+                  <div className={style['chatroom-wrap']}>
+                    <div className={style['chatroom-title']}>
+                      讨论区
+                    </div>
+                    {
+                      userInfo ? (
+                        <>
+                          <div className={style['chatroom-top-hint']}>
+                            系统提示：倡导建康的直播环境，若发布违法、违规、低俗等不良消息，我们会对违规内容及帐号进行封禁处理。
+                          </div>
+                          <IMChatroom
+                            roomId={liveInfo.chat_room_id}
+                            disableEditor={!liveInfo.chat_enabled}
+                          />
+                        </>
+                      ) : (
+                        <NotLoginChatroom
+                          handleLogin={handleLogin}
+                        />
+                      )
+                    }
+                  </div>
+                )
+              } */}
+            </div>
+            {
+              !isReplayMode && !isRecordLive
+              && liveInfo.sub_type !== SUB_TYPE.NET_DRAGON
+              && liveInfo.status !== PUBLIC_LIVE_STATUS.COMPLETEED
+              && (
+                <LineSwitch
+                  className={style['live-line-switch']}
+                  liveInfo={liveInfo}
+                  onChange={handleSelectChange}
+                />
+              )
+            }
+          </div>
+        </div>
+        <div
+          className={classNames(
+            style['live-description-panel'],
+            descriptionClassName
+          )}
+        >
+          <div className={style['desc-title']}>开播介绍</div>
+          <div className={style['desc-content']}>
+            {!liveInfo.desc_pic_web_url ? '暂无介绍' : (
+              <img className={style['desc-content-img']} src={netUrl(liveInfo.desc_pic_web_url)} alt="" />
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}