@x-edu/live-player 0.0.1

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

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

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

@@ -0,0 +1,186 @@
+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({
+  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
+          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

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

@@ -0,0 +1,37 @@
+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>
+  )
+}

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

@@ -0,0 +1,46 @@
+.chatroom-not-login {
+  flex: 1 1 auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.chatroom-not-login-messsage {
+  flex: 1 1 auto;
+  width: 100%;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+
+  > img {
+    width: 150px;
+    height: auto;
+    margin-bottom: 20px;
+  }
+}
+
+.chatroom-login-editor {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 10px 20px;
+}
+
+.chatroom-login-textarea {
+  flex: 1 1 auto;
+  width: 100%;
+  background-color: #f2f2f2;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 10px;
+}

package/src/detail/RecordVideo/index.jsx

@@ -0,0 +1,148 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Video } from 'fish'
+import dayjs from 'dayjs'
+import { PUBLIC_LIVE_STATUS } from '@/config/publicLive'
+import { getUrlType, getType } from '@/util/video'
+import { getRecordLiveStatus } from '@/util/live'
+import LiveStatus from '../LiveStatus'
+import style from './index.module.less'
+
+export default function RecordVideo({
+  userInfo,
+  liveInfo,
+  visitTime,
+  diffTime,
+  onStatusChange,
+  onPlayReplay,
+  onVideoPlay = () => undefined,
+  onRequestFullScreen = () => undefined
+}) {
+  const isFullScreenRef = useRef(false)
+  const [isLiveLoading, setIsLiveLoading] = useState(false)
+  const [isLiveLoadError, setIsLiveLoadError] = useState(false)
+  const hasPlayed = useRef(false)
+  const player = useRef()
+  const endTimer = useRef()
+  const needLogin = !userInfo && liveInfo.login
+
+  useEffect(() => {
+    const isLiving = liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
+    if (isLiving && needLogin) {
+      const timeToEnd = dayjs(liveInfo.end_time).valueOf() - (Date.now() - diffTime)
+      if (timeToEnd > 0) {
+        endTimer.current = setTimeout(() => {
+          onStatusChange(PUBLIC_LIVE_STATUS.COMPLETEED)
+        }, timeToEnd)
+      }
+    }
+
+    if (player.current) {
+      player.current.controls(isLiving && !needLogin)
+
+      // 显示成封面
+      if (liveInfo.status === PUBLIC_LIVE_STATUS.COMPLETEED || liveInfo.status === PUBLIC_LIVE_STATUS.OFFLINE) {
+        player.current.autoplay(false)
+        player.current.load()
+      }
+    }
+
+    return () => {
+      clearTimeout(endTimer.current)
+    }
+  }, [liveInfo.status, userInfo])
+
+  const handleVideoReady = (v, playerIns) => {
+    player.current = playerIns
+
+    playerIns.on('fullscreenchange', () => {
+      const isFullScreenNow = playerIns.isFullscreen()
+      if (isFullScreenNow) {
+        if (!isFullScreenRef.current) {
+          onRequestFullScreen()
+        }
+        isFullScreenRef.current = true
+      } else {
+        isFullScreenRef.current = false
+      }
+    })
+    playerIns.on('waiting', () => {
+      setIsLiveLoading(true)
+    })
+    playerIns.on('playing', () => {
+      setIsLiveLoading(false)
+    })
+    playerIns.on('ended', () => {
+      onStatusChange(PUBLIC_LIVE_STATUS.COMPLETEED)
+    })
+    playerIns.on('play', () => {
+      const currentTime = Date.now() - diffTime
+      const status = getRecordLiveStatus(liveInfo.status, currentTime, liveInfo.begin_time, liveInfo.end_time)
+      onStatusChange(status)
+      if (status === PUBLIC_LIVE_STATUS.LIVEING) {
+        player.current.currentTime(Math.max(0, (currentTime - dayjs(liveInfo.begin_time).valueOf()) / 1000))
+      }
+
+      if (!hasPlayed.current) {
+        onVideoPlay()
+      }
+      hasPlayed.current = true
+
+      player.current.autoplay(false)
+      setIsLiveLoadError(false)
+    })
+    playerIns.on('error', () => {
+      setIsLiveLoadError(true)
+    })
+
+    const isLiving = liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
+    player.current.controls(isLiving && !needLogin)
+    if (isLiving) {
+      const currentTime = Math.max(0, (visitTime - dayjs(liveInfo.begin_time).valueOf()) / 1000)
+      player.current.currentTime(currentTime)
+    }
+  }
+
+  const handleVideoReload = () => {
+    if (player.current) {
+      player.current.autoplay(true)
+      player.current.load()
+    }
+  }
+
+  const handleStatusChange = (status, params = {}) => {
+    onStatusChange(status)
+    if (status === PUBLIC_LIVE_STATUS.LIVEING && params.play) {
+      player.current.play()
+    }
+  }
+
+  const options = {
+    sources: [{
+      src: liveInfo.video_url,
+      type: getType(getUrlType(liveInfo.video_url))
+    }],
+    poster: liveInfo.cover_pic_web_url,
+    autoplay: false
+  }
+
+  return (
+    <div className={style['record-video']}>
+      <Video
+        className="vjs-big-play-centered"
+        options={options}
+        onReady={handleVideoReady}
+      />
+      <LiveStatus
+        userInfo={userInfo}
+        visitTime={visitTime}
+        diffTime={diffTime}
+        liveInfo={liveInfo}
+        isLiveLoading={isLiveLoading}
+        isLiveLoadError={isLiveLoadError}
+        onStatusChange={handleStatusChange}
+        onPlayReplay={onPlayReplay}
+        onReloadLive={handleVideoReload}
+      />
+    </div>
+  )
+}