@x-edu/live-player 0.0.19 → 0.0.21

package/src/detail/LiveVideo/index.jsx

@@ -1,188 +1,188 @@
-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>
-  )
-}
+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 +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');
-    }
-  }
-}
+.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 +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>
-  )
-}
+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

@@ -1,46 +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;
-}
+.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;
+}