@x-edu/live-player 0.0.1

package/src/detail/index.jsx

@@ -0,0 +1,479 @@
+/* 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, PUBLIC_LIVE_PUSH_TOPIC, PUBLIC_LIVE_PUSH_EVENT, SUB_TYPE
+} from '@/config/publicLive'
+import { getUrlQuery } from '@/util/url'
+import ImPush from '@/util/push'
+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 = 'TCH_webPlatform_publiclive_detail_page'
+
+export default function PublicLiveDetail({
+  className,
+  infoClassName,
+  playerClassName,
+  descriptionClassName,
+  replay: propRelay,
+  liveId: propLiveId,
+  sdpAppId: propSdpAppId,
+  uc,
+  loginInfo = {},
+  handleLogin,
+  onOnlineCountChange = () => {},
+  onStateChange = () => {},
+  onReportProgress = () => {},
+  onReportTeacherTrain = () => {},
+  onSensorsPublicLiveDetailFullscreenClick = () => {},
+  onSensorsPublicLiveDetailPage = () => {},
+  onSensorsPublicLiveDetailPlayClick = () => {},
+  onSensorsPublicLiveDetailReplayClick = () => {}
+}) {
+  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
+    && (liveInfo.sub_type === SUB_TYPE.OUTSIDE || liveInfo.sub_type === SUB_TYPE.REBROADCAST)
+
+  const handleStatusChange = async (status) => {
+    const newLiveInfo = {
+      ...liveInfo,
+      status
+    }
+    setLiveInfo(newLiveInfo)
+    onStateChange(newLiveInfo)
+    const isRecordLive = liveInfo.type === PUBLIC_LIVE_MODE.RECORDED
+    if (!isRecordLive
+      && status === PUBLIC_LIVE_STATUS.LIVEING
+      && 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
+      }
+
+      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
+      }
+      // 推流直播不加载im push
+      if (data.type === PUBLIC_LIVE_MODE.LIVING && data.sub_type === SUB_TYPE.OUTSIDE) {
+        // nothing
+      } else {
+        await ImPush.init()
+      }
+      // 如果是转播或者是推流 直接播放（用于调试模式）
+      const { preview } = getUrlQuery() // 后台点预览会加这个参数
+      const generateInfo = preview ? Object.assign(data, {
+        status: 1
+      }) : data
+      setLiveInfo(generateInfo)
+    }
+    init()
+  }, [])
+
+  useEffect(() => {
+    if (!liveInfo || liveInfo.sub_type === SUB_TYPE.OUTSIDE) {
+      return
+    }
+    const handler = (data) => {
+      const { extraFields = {} } = data
+      console.log('public Live:', data)
+      if (extraFields.event === PUBLIC_LIVE_PUSH_EVENT.STATUS_CHANGE && extraFields.liveId === liveId) {
+        console.log(`public Live: receive push status ${parseInt(extraFields.status, 10)}`)
+        handleStatusChange(parseInt(extraFields.status, 10))
+      }
+    }
+    ImPush.addTopicListener(`${PUBLIC_LIVE_PUSH_TOPIC}_${liveId}`, handler)
+    return () => {
+      if (!liveInfo || liveInfo.sub_type === SUB_TYPE.OUTSIDE) {
+        return
+      }
+      ImPush.removeTopicListener(`${PUBLIC_LIVE_PUSH_TOPIC}_${liveId}`, handler)
+    }
+  }, [!!liveInfo])
+
+  useEffect(() => {
+    if (userInfo) {
+      onReportProgress()
+    }
+  }, [userInfo])
+
+  useEffect(() => {
+    if (loginStatus !== LOGIN_STATUS.WAIT && liveInfo) {
+      onSensorsPublicLiveDetailPage({
+        pageName: TrackPageName,
+        eventName: 'TCH_webPlatform_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 (
+      <Empty hideBack tip="直播不存在" className={style['live-empty']} />
+    )
+  }
+
+  if (!liveInfo) {
+    return <Loading />
+  }
+
+  const isRecordLive = liveInfo.type === PUBLIC_LIVE_MODE.RECORDED
+  const beginTime = dayjs(liveInfo.begin_time)
+
+  const handlePlayReplay = (needReport) => {
+    if (needReport) {
+      onSensorsPublicLiveDetailReplayClick({
+        pageName: TrackPageName,
+        eventName: 'TCH_webPlatform_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 = () => {
+    onSensorsPublicLiveDetailFullscreenClick({
+      pageName: TrackPageName,
+      eventName: 'TCH_webPlatform_publiclive_detail_fullscreen_click'
+    })
+  }
+
+  const handleVideoPlay = (needReport) => {
+    if (needReport) {
+      onSensorsPublicLiveDetailPlayClick({
+        pageName: TrackPageName,
+        eventName: 'TCH_webPlatform_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={style['public-live-detail-wrapper']}>
+        <div
+          className={classNames(
+            style['live-panel'], className
+          )}
+        >
+          <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
+                        userInfo={userInfo}
+                        liveInfo={liveInfo}
+                        visitTime={visitTime}
+                        diffTime={diffTime}
+                        onStatusChange={handleStatusChange}
+                        onPlayReplay={() => {
+                          handlePlayReplay(true)
+                        }}
+                        onVideoPlay={() => {
+                          handleVideoPlay(true)
+                        }}
+                        onRequestFullScreen={handleRequestFullScreen}
+                      />
+                    )
+                    : (
+                      <LiveVideo
+                        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 && isStreamLive
+              && 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>
+    </>
+  )
+}

package/src/detail/index.module.less

@@ -0,0 +1,164 @@
+.public-live-detail-wrapper {
+  max-width: 1300px;
+  margin: 0 auto;
+
+  .live-panel {
+    margin-top: 42px;
+    padding: 32px 50px 24px;
+    border-radius: 12px;
+    background-color: #fff;
+    box-shadow: 0px 0px 20px 0px rgba(153, 153, 153, 0.1);
+  }
+  .live-title {
+    display: flex;
+    align-items: center;
+  }
+  .live-online-count {
+    margin: 0 20px;
+  }
+  
+  .live-end {
+    color: #7F7F7F;
+    padding: 2px 5px;
+    margin-left: 10px;
+    border-radius: 5px;
+    background-color: #D7D7D7;
+  }
+
+  .live-video-wrapper {
+    height: auto;
+
+    .live-line-switch {
+      margin-top: 5px;
+    }
+  }
+
+  .live-name {
+    font-size: 20px;
+    line-height: 36px;
+    font-weight: bold;
+  }
+
+  .live-info {
+    display: flex;
+    align-items: center;
+    height: 30px;
+    line-height: 30px;
+    margin-top: 12px;
+    font-size: 14px;
+    color: #333;
+    margin-bottom: 26px;
+
+    .live-user {
+      display: flex;
+      margin-right: 41px;
+      align-items: center;
+
+      span {
+        display: inline-block;
+        max-width: 500px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      &.empty-user {
+        display: none;
+      }
+    }
+
+    .avatar {
+      display: inline-block;
+      width: 30px;
+      height: 30px;
+      margin-right: 8px;
+      border-radius: 15px;
+    }
+
+    .live-time {
+      display: flex;
+      align-items: center;
+      span {
+        color: #7F7F7F;
+        vertical-align: middle;
+      }
+    }
+
+    .icon-time {
+      font-size: 16px;
+      color: #7F7F7F;
+      vertical-align: middle;
+      margin-right: 6px;
+    }
+  }
+  
+  .live-description-panel {
+    padding: 16px 50px;
+    margin: 32px 0;
+    border-radius: 12px;
+    background-color: #fff;
+    box-shadow: 0px 0px 20px 0px rgba(153, 153, 153, 0.1);
+
+    .desc-title {
+      font-size: 20px;
+      margin: 10px 0;
+      font-weight: bold;
+    }
+
+    .desc-content {
+      margin-top: 10px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    .desc-content-img {
+      max-width: 100%;
+    }
+  }
+}
+
+.live-empty {
+  > img {
+    width: 440px;
+    height: 300px;
+  }
+  > p {
+    font-size: 18px;
+  }
+}
+
+.live-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 675px;
+
+  .chatroom-wrap {
+    border: 1px solid #eee;
+    flex: 0 0 300px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .chatroom-title {
+      height: 50px;
+      font-size: 18px;
+      padding: 10px;
+      width: 100%;
+      border-bottom: 1px solid #eee;
+    }
+    .chatroom-top-hint {
+      background: #efefef;
+      height: 80px;
+      padding: 6px;
+    }
+    :global {
+      .pc {
+        height: calc(100% - 130px);
+        flex: 1 1 auto;
+        width: 100%;
+      }
+    }
+  }
+}