@x-edu/live-player

直播播放器

初版，API可能后续会大幅调整

Demo

PublicLiveDetail 直播详情页

import { PublicLiveDetail, getLiveOnlineCount } from '@x-edu/live-player'
import React, { useContext } from 'react'
import style from './style.module.less'
import { getLoginUrl, uc } from '@/util/auth/func'
import UserContext from '@/component/Login/UserContext'
import { sensorsTrack } from '@/util/sensorsTracking'

export default function LiveTest() {
  const loginInfo = useContext(UserContext)

  // 获取直播人数请在直播开始之后调用并显示
  // 直播结束之后也不应显示
  useEffect(() => {
    const test = async () => {
      const count = await getLiveOnlineCount('13aafbce-8ca2-4587-bc6e-eab183c9d5b6')
      console.log(count)
    }
    test()
  }, [])

  // 部分直播需要登录后才可以播放，这是要求登录的回调
  const handleLogin = () => {
    window.location.href = getLoginUrl()
  }
  // 直播人数获取后调用，注意直播开始后才有本数据
  const handleoOnlineCountChange = (currentCount) => {
    console.log(currentCount)
  }
  // 直播状态发生变化后触发本事件
  const handleStateChange = (liveInfo) => {
    console.log(liveInfo)
  }

  // 登录后上报强师额外上报信息
  const handleReportProgress = () => {}
  // 登录且播放后上报强师额外上报信息
  const handleReportTeacherTrain = () => {}

  const handleSensors = (sensorInfo) => {
    sensorsTrack(sensorInfo)
  }

  return (
    <div
      style={{
        height: '800px',
        width: '1200px'
      }}
    >
      <PublicLiveDetail
        className={style.live}
        containerClassName={style.container}
        infoClassName={style.info}
        playerClassName={style.player}
        descriptionClassName={style.desc}
        liveId="13aafbce-8ca2-4587-bc6e-eab183c9d5b6"
        appId="e5649925-441d-4a53-b525-51a2f1c4e0a8"
        uc={uc}
        loginInfo={loginInfo}
        handleLogin={handleLogin}
        onOnlineCountChange={handleoOnlineCountChange}
        onStateChange={handleStateChange}
        onReportProgress={handleReportProgress}
        onReportTeacherTrain={handleReportTeacherTrain}
        onSendSensors={handleSensors}
      />
    </div>
  )
}

.container {
  width: 100%;
  height: 100%
}

.live {
  padding: 0 !important;
  margin: 0;
}

.info {
  display: none;
}

.desc {
  display: none;
}

直播列表页

import { PublicLiveList } from '@x-edu/live-player'
import React, { useContext } from 'react'
import style from './style.module.less'
import { getLoginUrl, uc } from '@/util/auth/func'
import UserContext from '@/component/Login/UserContext'

export default function LiveTest() {
  const loginInfo = useContext(UserContext)

  // 部分直播需要登录后才可以播放，这是要求登录的回调
  const handleLogin = (item) => {
    // 处理必须登陆的情况
    window.location.href = getLoginUrl()
  }

  const handleDetailClick = (item) => {
    // 根据 item 决定怎么跳转详情页
    // 默认跳转中小学直播详情 window.open(`https://basic.smartedu.cn/publicLive/${liveId}}`)
  }
 
  return (
    <div>
      <PublicLiveList
        scopeType='e_teacher_studio' // 适用范围，如名师工作室：e_teacher_studio 机构工作室：e_inst_studio 专家工作室：e_expert_studio 精准匹配
        scopeId='xxx' // 适用id，如专家工作室id 精准匹配，必须有scope_type才生效
        containerClassName={style.container} // 容器样式
        uc={uc} // 登陆状态下必填
        loginInfo={loginInfo} // 登陆状态下必填，特别的里面的 userInfo
        handleLogin={handleLogin} // 用于需要强制登陆的回调，会传传入当前直播作为参数
        onDetailClick={handleDetailClick}
      />
    </div>
  )
}

预生产

import { 
  PublicLiveDetail,
  getLiveOnlineCount，
  PublicLiveList
} from '@x-edu/live-player/dist/XEduLivePlayerPre.common'