@x-edu/live-player 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-edu/live-player",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "main": "dist/XEduLivePlayer.common.js",
   "scripts": {
     "start": "cross-env SDP_ENV=local gms dev",

package/src/App.jsx

@@ -8,6 +8,7 @@ import { parseAdapter } from '@/util/date'
 
 import PublicLiveDetail from './detail'
 import { getLiveOnlineCount } from './lib/getLiveOnlineCount'
+import PublicLiveList from './list'
 
 Icon.url = '/fish/icon/umd-4.1.2.js'
 
@@ -18,5 +19,6 @@ dayjs.locale('zh-cn')
 
 export default {
   PublicLiveDetail,
-  getLiveOnlineCount
+  getLiveOnlineCount,
+  PublicLiveList
 }

package/src/component/Avatar/index.jsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react'
 import classNames from 'classnames'
-import { importImg } from '@/util/ImportImg'
-
-const defaultAvatar = importImg('@/asset/img/def-avatar.jpg')
+import defaultAvatar from '@/asset/img/def-avatar.jpg'
 
 function Avatar({
   onError = () => {},

package/src/component/Icon/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import classNames from 'classnames'
+import style from './index.module.less'
+
+export default function Icon({
+  className,
+  type
+}) {
+  return (
+    <svg
+      className={classNames(style.icon, className)}
+    >
+      <use xlinkHref={`#${type}`} />
+    </svg>
+  )
+}

package/src/component/Icon/index.module.less

@@ -0,0 +1,3 @@
+.icon {
+  fill: currentColor;
+}

package/src/component/Pagination/LocalPagination.jsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import Pagination from './index'
+
+export default function LocalPagination({
+  data,
+  pageSize,
+  defaultPage = 1,
+  renderData,
+  ...restProps
+}) {
+  const [currentPage, setCurrentPage] = useState(defaultPage)
+  const total = data.length
+  const pageData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+
+  return (
+    <>
+      {pageData.map((dataItem, index) => renderData(dataItem, index))}
+      <Pagination
+        total={total}
+        current={currentPage}
+        pageSize={pageSize}
+        onChange={setCurrentPage}
+        {...restProps}
+      />
+    </>
+  )
+}

package/src/component/Pagination/RemotePagination.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import Pagination from './index'
+
+export default function RemotePagination({
+  total = 0,
+  data,
+  pageSize,
+  defaultPage = 1,
+  renderData,
+  onChange = () => {},
+  ...restProps
+}) {
+  const [currentPage, setCurrentPage] = useState(defaultPage)
+
+  const handlePageChange = (options) => {
+    setCurrentPage(options)
+    onChange(options)
+  }
+
+  return (
+    <>
+      {data.map((dataItem, index) => renderData(dataItem, index))}
+      <Pagination
+        total={total || data.length || 0}
+        current={currentPage}
+        pageSize={pageSize}
+        onChange={handlePageChange}
+        {...restProps}
+      />
+    </>
+  )
+}

package/src/component/Pagination/index.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import classNames from 'classnames'
+import { Pagination as FishPagination } from 'fish'
+
+import style from './index.module.less'
+
+export default function Pagination(props) {
+  const { className, current, total, pageSize, onChange = () => { }, showSizeChanger = false } = props
+  const pageCount = Math.ceil(total / pageSize)
+
+  if (pageCount > 1) {
+    return (
+      <div className={classNames(style.pagination, className, 'custom-pagination')}>
+        <span className={style['pagination-text']}>
+          {`当前第 ${current} 页/共 ${pageCount} 页，共有 ${total} 条记录`}
+        </span>
+        <FishPagination
+          total={total}
+          current={current}
+          pageSize={pageSize}
+          onChange={onChange}
+          showSizeChanger={showSizeChanger}
+          showQuickJumper={{
+            goButton: false
+          }}
+        />
+      </div>
+    )
+  }
+  return null
+}

package/src/component/Pagination/index.module.less

@@ -0,0 +1,110 @@
+@primary-color: #1e62ec;
+
+.pagination {
+  padding-bottom: 24px;
+  margin-top: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  .pagination-text {
+    color: #333;
+    margin-right: 16px;
+  }
+
+  :global(.fish-pagination-prev), :global(.fish-pagination-next) {
+    // display: none;
+    button {
+      border: 0px;
+    }
+  }
+
+  :global(.fish-pagination-item) {
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    background: #F5F7FA;
+    // border: 1px solid @primary-color;
+    border: 0px;
+    border-radius: 2px;
+    font-size: 14px;
+    font-weight: 400;
+    color: @primary-color;
+    margin-right: 10px;
+
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+    }
+  }
+
+  :global(.fish-pagination-item:hover) {
+    background: #F5F7FA;
+  }
+
+  :global(.fish-pagination-item-active:hover) {
+    background: @primary-color;
+  }
+
+  :global(.fish-pagination-item-link) {
+    background: #F5F7FA;
+  }
+
+  :global(.fish-pagination-item-link:hover) {
+    background: #F5F7FA;
+  }
+
+  :global(.fish-pagination-item-active) {
+    border-color: @primary-color;
+    background: @primary-color;
+    a {
+      color: #fff;
+    }
+  }
+
+  :global(.fish-pagination-options), :global(.fish-pagination-options-quick-jumper) {
+    margin-left: 8px;
+  }
+
+  :global(.fish-pagination-options-quick-jumper) {
+    :global(input) {
+      // border: 0;
+      background: transparent;
+      border-radius: 0;
+      outline: 0;
+      // border-bottom: 1px solid @primary-color;
+      height: 24px;
+      padding: 1px 7px;
+      width: 44px;
+      text-align: center;
+      &:focus {
+        outline: none;
+        box-shadow: none;
+        border-color: @primary-color;
+      }
+
+      &:hover {
+        border-color: @primary-color;
+      }
+    }
+
+    :global(.fish-pagination-options-quick-jumper-btn) {
+      min-width: 40px;
+      line-height: 32px;
+      height: 32px;
+      margin-left: 12px;
+      background: transparent;
+      border: 0;
+      font-weight: 700;
+      color: @primary-color;
+      &:hover {
+        border-color: @primary-color;
+        background: @primary-color;
+        color: #fff;
+      }
+    }
+  }
+}

package/src/config/request/live-activity.js

@@ -3,7 +3,7 @@ import { generateCommonAPI, generateCommonAPIWithUC } from './helper'
 const api = generateCommonAPIWithUC({
   hostKey: 'live-activity',
   prefix: ''
-})
+}, true)
 
 export default api
 

package/src/demo/Detail.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Live from '../App'
+
+export default function Detail() {
+  return (
+    <Live.PublicLiveDetail
+      liveId="13aafbce-8ca2-4587-bc6e-eab183c9d5b6"
+      appId="e5649925-441d-4a53-b525-51a2f1c4e0a8"
+    />
+  )
+}

package/src/demo/List.jsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react'
+import { UC } from '@sdp.nd/nd-uc-sdk'
+import Live from '../App'
+
+const uc = new UC({
+  env: 'ncet-xedu',
+  sdpAppId: 'e5649925-441d-4a53-b525-51a2f1c4e0a8',
+  origins: {
+    UC: 'https://uc-gateway.ykt.eduyun.cn',
+    SSO: 'https://sso.basic.smartedu.cn'
+  },
+  isGlobalSDKCacheEnabled: true
+})
+// const uc = new UC({
+//   env: 'preproduction',
+//   sdpAppId: '331593d3-af38-456e-bdb8-5263525608f4',
+//   origins: {
+//     UC: 'https://uc-gateway.beta.101.com',
+//     SSO: 'https://ysc-sso.ykt.eduyun.cn'
+//   },
+//   isGlobalSDKCacheEnabled: true
+// })
+
+export default function List() {
+  const [ucInstance, setUcInstance] = useState(uc)
+  const [userInfo, setUserInfo] = useState(null)
+
+  const handleSubscribe = (data) => {
+    console.log(data)
+  }
+
+  useEffect(() => {
+    async function init() {
+      try {
+        await ucInstance.login({
+          loginName: '18695708674',
+          password: 'gyh123456'
+        })
+        const account = ucInstance.getCurrentAccount()
+        const info = await account.getAccountInfo()
+        setUserInfo(info)
+      } catch (error) {
+        console.log(error)
+      }
+    }
+    init()
+  }, [])
+
+  if (!userInfo) {
+    return null
+  }
+
+  return (
+    <Live.PublicLiveList
+      uc={ucInstance}
+      loginInfo={{
+        userInfo
+      }}
+      onSubscribe={handleSubscribe}
+    />
+  )
+}

package/src/demo/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Tabs } from 'fish'
+import Detail from './Detail'
+import List from './List'
+
+export default function Demo() {
+  return (
+    <Tabs>
+      <Tabs.TabPane tab="详情" key="detail">
+        <Detail />
+      </Tabs.TabPane>
+      <Tabs.TabPane tab="列表" key="list">
+        <List />
+      </Tabs.TabPane>
+    </Tabs>
+  )
+}

package/src/detail/LiveStatus/index.jsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
 import dayjs from 'dayjs'
 import { Icon, Spin } from 'fish'
-import { PROVIDE_RECORD, PUBLIC_LIVE_STATUS, VIEW_REPLAY, PUBLIC_LIVE_MODE, SUB_TYPE } from '@/config/publicLive'
+import { PROVIDE_RECORD, PUBLIC_LIVE_STATUS, VIEW_REPLAY, PUBLIC_LIVE_MODE } from '@/config/publicLive'
 import LiveCountDown from '../LiveCountDown'
 import style from './index.module.less'
 import AnchorOnTheWay from './AnchorOnTheWay'
 
 function LiveStatus({
+  isStreamLive,
   handleLogin,
   userInfo,
   liveInfo,
@@ -26,7 +27,6 @@ function LiveStatus({
   const isPaused = liveInfo.status === PUBLIC_LIVE_STATUS.PASUED
   const isOffline = liveInfo.status === PUBLIC_LIVE_STATUS.OFFLINE
   const isRecordLive = liveInfo.type === PUBLIC_LIVE_MODE.RECORDED
-  const isStreamLive = liveInfo.type === PUBLIC_LIVE_MODE.LIVING && (liveInfo.sub_type === SUB_TYPE.OUTSIDE || liveInfo.sub_type === SUB_TYPE.REBROADCAST)
 
   // 当前时间是否在回放时间开始前, 如果没有回放开始时间, 则直接判断未回放还没生成
   const isBeforeRecordTime = liveInfo.replay_begin_time

package/src/detail/LiveVideo/index.jsx

@@ -45,6 +45,7 @@ const shouldfixedLoading = window.navigator.userAgent.indexOf('iPad') > -1
   || isInWX()
 
 export default function LiveVideo({
+  isStreamLive,
   handleLogin,
   userInfo,
   liveInfo,
@@ -168,6 +169,7 @@ export default function LiveVideo({
       {showAliPlayer && <AliPlayer options={options} onReady={handleVideoReady} />}
       {supportM3u8 && (
         <LiveStatus
+          isStreamLive={isStreamLive}
           handleLogin={handleLogin}
           userInfo={userInfo}
           visitTime={visitTime}

package/src/detail/RecordVideo/index.jsx

@@ -8,6 +8,7 @@ import LiveStatus from '../LiveStatus'
 import style from './index.module.less'
 
 export default function RecordVideo({
+  isStreamLive,
   userInfo,
   liveInfo,
   visitTime,
@@ -133,6 +134,7 @@ export default function RecordVideo({
         onReady={handleVideoReady}
       />
       <LiveStatus
+        isStreamLive={isStreamLive}
         userInfo={userInfo}
         visitTime={visitTime}
         diffTime={diffTime}

package/src/detail/index.jsx

@@ -11,10 +11,9 @@ import {
 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
+  PUBLIC_LIVE_STATUS, PUBLIC_LIVE_MODE, 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'
@@ -79,7 +78,6 @@ export default function PublicLiveDetail({
   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 = {
@@ -197,12 +195,6 @@ export default function PublicLiveDetail({
         }
         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, {
@@ -213,27 +205,6 @@ export default function PublicLiveDetail({
     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()
@@ -410,6 +381,7 @@ export default function PublicLiveDetail({
                   : isRecordLive
                     ? (
                       <RecordVideo
+                        isStreamLive={isStreamLive}
                         userInfo={userInfo}
                         liveInfo={liveInfo}
                         visitTime={visitTime}
@@ -426,6 +398,7 @@ export default function PublicLiveDetail({
                     )
                     : (
                       <LiveVideo
+                        isStreamLive={isStreamLive}
                         handleLogin={handleLogin}
                         userInfo={userInfo}
                         liveInfo={liveInfo}
@@ -470,7 +443,8 @@ export default function PublicLiveDetail({
               } */}
             </div>
             {
-              !isReplayMode && !isRecordLive && isStreamLive
+              !isReplayMode && !isRecordLive
+              && liveInfo.sub_type !== SUB_TYPE.NET_DRAGON
               && liveInfo.status !== PUBLIC_LIVE_STATUS.COMPLETEED
               && (
                 <LineSwitch

package/src/index.js

@@ -1,15 +1,10 @@
 import React from 'react'
 import { render } from 'react-dom'
 
-import PublicLive from './App'
-
-const { PublicLiveDetail } = PublicLive
+import Demo from './demo'
 
 // 测试页面内容
 render(
-  <PublicLiveDetail
-    liveId="13aafbce-8ca2-4587-bc6e-eab183c9d5b6"
-    appId="e5649925-441d-4a53-b525-51a2f1c4e0a8"
-  />,
+  <Demo />,
   document.querySelector('#root')
 )

package/src/list/Empty/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import style from './index.module.less'
+
+export default function Empty({
+  tip = '暂无内容',
+  className
+}) {
+  return (
+    <div className={classNames(style['empty-wrap'], className)}>
+      <div className={style['img-wrap']}>
+        <div>
+          <img src={require('./img/empty.png')} alt="" />
+        </div>
+        <div className={style.tip}>{tip}</div>
+      </div>
+    </div>
+  )
+}

package/src/list/Empty/index.module.less

@@ -0,0 +1,23 @@
+.empty-wrap {
+  margin-top: 100px;
+  
+  .img-wrap {
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    img {
+      width: 260px;
+      height: 182px;
+    }
+  }
+
+  .tip {
+    font-size: 16px;
+    color: #666;
+    line-height: 24px;
+    margin-top: 32px;
+  }
+}

package/src/list/ListItem/Action/index.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import classNames from 'classnames'
+import { message } from 'fish'
+import { find } from 'lodash'
+import { openLiveSubscribe } from '@/service/live'
+import style from './index.module.less'
+
+const Actions = {
+  1: '进入直播', // 直播中 或者开播前15min
+  2: '观看回放', // 回放
+  3: '预约', // 预告 且开播时间大于 15min
+  4: '已预约'
+}
+
+export default function Action({
+  data,
+  subscription,
+  onActionDetailClick,
+  handleLogin,
+  isLogin,
+  onSubscribe
+}) {
+  const { status, live_id: liveId, begin_time: beginTime } = data
+  const [curAction, setCurAction] = useState(() => {
+    let actionNum
+    if (status === 1) {
+      actionNum = 1
+    } else if (status === 2) {
+      actionNum = 2
+    } else { // status = 0
+      // 如果超过了开播时间，不管有没有预约，都直接进入直播
+      const now = new Date().getTime()
+      const begin = new Date(beginTime).getTime()
+      if (now > begin) {
+        actionNum = 1
+        return actionNum
+      }
+      // 开播前15分钟，只提供进入直播按钮
+      if (begin > now && (begin - now) < 15 * 60 * 1000) {
+        actionNum = 1
+        return actionNum
+      }
+      // 开播前15分钟之外
+      const subscriptionItem = find(subscription, {
+        live_id: liveId
+      })
+      if (subscriptionItem?.is_subscribe) { // 已预约
+        actionNum = 4
+      } else { // 未预约
+        actionNum = 3
+      }
+    }
+    return actionNum
+  })
+
+  const handleBtnClick = async (e) => {
+    e.stopPropagation()
+    if (curAction === 3) {
+      try {
+        if (!isLogin) {
+          handleLogin(data)
+          return
+        }
+        onSubscribe(data)
+        await openLiveSubscribe({
+          liveId
+        })
+        message.success('预约成功')
+        const now = new Date().getTime()
+        const begin = new Date(beginTime).getTime()
+        if (begin > now && (begin - now) < 15 * 60 * 1000) {
+          setCurAction(1)
+        } else {
+          setCurAction(4)
+        }
+      } catch (error) {
+        if (error?.response?.data?.message === '直播开始前15分钟无法预约') {
+          setCurAction(1)
+        }
+        message.error(error?.response?.data?.message || '预约失败，请稍后重试')
+      }
+    } else {
+      onActionDetailClick()
+    }
+  }
+
+  return (
+    <div
+      className={classNames(style.action, {
+        [style['action-subscribe']]: curAction === 3,
+        [style['action-has-subscribe']]: curAction === 4
+      })}
+      onClick={handleBtnClick}
+    >
+      {Actions[curAction]}
+    </div>
+  )
+}