@x-edu/live-player 0.0.31 → 0.0.33

package/src/demo/List.jsx

@@ -1,68 +1,68 @@
-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] = useState(uc)
-  const [userInfo, setUserInfo] = useState(null)
-  const [refreshPage] = useState('0')
-
-  const handleSubscribe = (data) => {
-    console.log(data)
-  }
-
-  useEffect(() => {
-    async function init() {
-      try {
-        await ucInstance.login({
-          loginName: '15280425124',
-          password: 'chen135246+'
-          // 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}
-      scopeType="e_teacher_studio"
-      scopeId="a9a32d1a-b0bd-4482-ab9d-80ce38515280"
-      refreshPage={refreshPage}
-    />
-  )
-}
+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] = useState(uc)
+  const [userInfo, setUserInfo] = useState(null)
+  const [refreshPage] = useState('0')
+
+  const handleSubscribe = (data) => {
+    console.log(data)
+  }
+
+  useEffect(() => {
+    async function init() {
+      try {
+        await ucInstance.login({
+          loginName: '15280425124',
+          password: 'chen135246+'
+          // 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}
+      scopeType="e_teacher_studio"
+      scopeId="a9a32d1a-b0bd-4482-ab9d-80ce38515280"
+      refreshPage={refreshPage}
+    />
+  )
+}

package/src/demo/index.jsx

@@ -1,17 +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>
-  )
-}
+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/LineSwitch/index.jsx

@@ -1,71 +1,71 @@
-import React, { useState, useMemo } from 'react'
-import { Select } from 'fish'
-
-import style from './index.module.less'
-
-const { Option } = Select
-
-export default function LineSwitch({
-  className,
-  liveInfo,
-  onChange
-}) {
-  const lines = useMemo(
-    () => liveInfo?.imInfo?.param?.lines
-      ?.map((item, i) => {
-        const { name, source } = item
-        if (name && source) {
-          return item
-        }
-
-        return {
-          name: name || `线路${i + 1}`,
-          source: item
-        }
-      }),
-    [liveInfo]
-  )
-
-  const [lineName, setLineName] = useState(lines?.[0]?.name || '线路1')
-
-  const handleSelectChange = (value) => {
-    setLineName(value)
-    const source = lines
-      ?.find((item) => item.name === value)
-      ?.source
-    onChange(source)
-  }
-
-  return (
-    <>
-      {
-        lines.length > 1 ? (
-          <div className={`${style['line-switch']} ${className}`}>
-            <span>切换线路：</span>
-            <Select
-              defaultValue={lineName}
-              onChange={handleSelectChange}
-              style={{
-                width: '120px'
-              }}
-            >
-              {
-                lines?.map((item) => (
-                  <Option
-                    key={item.name}
-                    value={item.name}
-                  >
-                    {item.name}
-                  </Option>
-                ))
-              }
-            </Select>
-          </div>
-        ) : (
-          <></>
-        )
-    }
-    </>
-
-  )
-}
+import React, { useState, useMemo } from 'react'
+import { Select } from 'fish'
+
+import style from './index.module.less'
+
+const { Option } = Select
+
+export default function LineSwitch({
+  className,
+  liveInfo,
+  onChange
+}) {
+  const lines = useMemo(
+    () => liveInfo?.imInfo?.param?.lines
+      ?.map((item, i) => {
+        const { name, source } = item
+        if (name && source) {
+          return item
+        }
+
+        return {
+          name: name || `线路${i + 1}`,
+          source: item
+        }
+      }),
+    [liveInfo]
+  )
+
+  const [lineName, setLineName] = useState(lines?.[0]?.name || '线路1')
+
+  const handleSelectChange = (value) => {
+    setLineName(value)
+    const source = lines
+      ?.find((item) => item.name === value)
+      ?.source
+    onChange(source)
+  }
+
+  return (
+    <>
+      {
+        lines.length > 1 ? (
+          <div className={`${style['line-switch']} ${className}`}>
+            <span>切换线路：</span>
+            <Select
+              defaultValue={lineName}
+              onChange={handleSelectChange}
+              style={{
+                width: '120px'
+              }}
+            >
+              {
+                lines?.map((item) => (
+                  <Option
+                    key={item.name}
+                    value={item.name}
+                  >
+                    {item.name}
+                  </Option>
+                ))
+              }
+            </Select>
+          </div>
+        ) : (
+          <></>
+        )
+    }
+    </>
+
+  )
+}

package/src/detail/LiveCountDown/index.jsx

@@ -1,44 +1,44 @@
-import React from 'react'
-import { useCountDown } from 'ahooks'
-import style from './index.module.less'
-import usePullState from '../hook/usePullState'
-
-export default function LiveCountDown({
-  liveInfo,
-  isStreamLive,
-  time,
-  reload,
-  onEnd = () => {}
-}) {
-  const [countdown,, formattedRes] = useCountDown({
-    targetDate: Date.now() + time,
-    interval: 500,
-    onEnd
-  })
-
-  // 设置 > 2000 避免最后一次触发，onEnd触发即可
-  usePullState({
-    liveInfo,
-    reload,
-    shouldStartPull: isStreamLive
-      && countdown >= 1000
-  })
-
-  const { days, hours, minutes, seconds } = formattedRes
-
-  return (
-    <div className={style['live-count-down']}>
-      <div className={style.title}>距离开播还剩</div>
-      <div className={style.content}>
-        <span>{days}</span>
-        天
-        <span>{hours}</span>
-        时
-        <span>{minutes}</span>
-        分
-        <span>{seconds}</span>
-        秒
-      </div>
-    </div>
-  )
-}
+import React from 'react'
+import { useCountDown } from 'ahooks'
+import style from './index.module.less'
+import usePullState from '../hook/usePullState'
+
+export default function LiveCountDown({
+  liveInfo,
+  isStreamLive,
+  time,
+  reload,
+  onEnd = () => {}
+}) {
+  const [countdown,, formattedRes] = useCountDown({
+    targetDate: Date.now() + time,
+    interval: 500,
+    onEnd
+  })
+
+  // 设置 > 2000 避免最后一次触发，onEnd触发即可
+  usePullState({
+    liveInfo,
+    reload,
+    shouldStartPull: isStreamLive
+      && countdown >= 1000
+  })
+
+  const { days, hours, minutes, seconds } = formattedRes
+
+  return (
+    <div className={style['live-count-down']}>
+      <div className={style.title}>距离开播还剩</div>
+      <div className={style.content}>
+        <span>{days}</span>
+        天
+        <span>{hours}</span>
+        时
+        <span>{minutes}</span>
+        分
+        <span>{seconds}</span>
+        秒
+      </div>
+    </div>
+  )
+}

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

@@ -1,32 +1,32 @@
-.live-count-down {
-  padding: 24px 32px 32px;
-  color: #fff;
-  border-radius: 8px;
-  z-index: 100;
-  background: rgba(0, 0, 0, 0.7);;
-  box-shadow: 0px 0px 20px 0px rgba(153, 153, 153, 0.1);
-
-  .title {
-    font-size: 24px;
-    font-weight: bold;
-    text-align: center;
-    margin-bottom: 20px;
-  }
-
-  .content {
-    font-size: 16px;
-    span {
-      display: inline-block;
-      min-width: 32px;
-      height: 24px;
-      padding: 0 4px;
-      line-height: 24px;
-      font-weight: bold;
-      color: #333;
-      background-color: #fff;
-      margin: 0 6px;
-      border-radius: 4px;
-      text-align: center;
-    }
-  }
+.live-count-down {
+  padding: 24px 32px 32px;
+  color: #fff;
+  border-radius: 8px;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.7);;
+  box-shadow: 0px 0px 20px 0px rgba(153, 153, 153, 0.1);
+
+  .title {
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .content {
+    font-size: 16px;
+    span {
+      display: inline-block;
+      min-width: 32px;
+      height: 24px;
+      padding: 0 4px;
+      line-height: 24px;
+      font-weight: bold;
+      color: #333;
+      background-color: #fff;
+      margin: 0 6px;
+      border-radius: 4px;
+      text-align: center;
+    }
+  }
 }

package/src/detail/LiveOnlineCount/img/icon.svg

@@ -1,16 +1,16 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-  y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
-  <rect x="0" y="0" width="4" height="7" fill="#fff">
-    <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0s"
-      dur="0.6s" repeatCount="indefinite" />
-  </rect>
-
-  <rect x="10" y="0" width="4" height="7" fill="#fff">
-    <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.2s"
-      dur="0.6s" repeatCount="indefinite" />
-  </rect>
-  <rect x="20" y="0" width="4" height="7" fill="#fff">
-    <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.4s"
-      dur="0.6s" repeatCount="indefinite" />
-  </rect>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+  y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+  <rect x="0" y="0" width="4" height="7" fill="#fff">
+    <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0s"
+      dur="0.6s" repeatCount="indefinite" />
+  </rect>
+
+  <rect x="10" y="0" width="4" height="7" fill="#fff">
+    <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.2s"
+      dur="0.6s" repeatCount="indefinite" />
+  </rect>
+  <rect x="20" y="0" width="4" height="7" fill="#fff">
+    <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.4s"
+      dur="0.6s" repeatCount="indefinite" />
+  </rect>
 </svg>

package/src/detail/LiveOnlineCount/index.jsx

@@ -1,68 +1,68 @@
-import React, { useEffect, useState } from 'react'
-import {
-  getLocalSend,
-  saveLocalSend,
-  getCacheCount,
-  saveCacheCount
-} from './util'
-import { getResourceLikesForLive, postResourceLikes } from '@/service/like'
-import style from './index.module.less'
-import IconSVG from './img/icon.svg'
-
-const ResourceType = 'open_live'
-/**
- * 直播在线人数
- * @param {string} resId 资源id
- */
-export default function LiveOnlineCount({
-  resId,
-  className = '',
-  onOnlineCountChange
-}) {
-  if (!resId) return null
-
-  const [onlineCount, setOnlineCount] = useState(0)
-  const sendCount = () => {
-    const hasSend = getLocalSend(resId)
-    // setOnlineCount((t) => t + 1)
-    if (!hasSend) {
-      postResourceLikes(resId, ResourceType)
-      saveLocalSend(resId, true)
-    }
-  }
-
-  useEffect(() => {
-    (async () => {
-      let count = 0
-      // 获取点赞数
-      try {
-        // 容错处理
-        const likesData = await getResourceLikesForLive(resId, ResourceType)
-        count = likesData?.open_live_count || 0
-        saveCacheCount(resId, count)
-      } catch (e) {
-        console.error(e)
-        count = getCacheCount(resId) || 0
-      }
-      const currentCount = count === 0 ? 1 : count
-      setOnlineCount(currentCount)
-      onOnlineCountChange(currentCount)
-      sendCount()
-    })()
-  }, [])
-
-  return (
-    <div
-      className={`${style['like-wrap']} ${className}`}
-    >
-      <div className={style.icon}>
-        <img src={IconSVG} />
-      </div>
-      <div className={style['like-count']}>
-        {onlineCount}
-        {' '}
-        观看
-      </div>
-    </div>
-  )
-}
+import React, { useEffect, useState } from 'react'
+import {
+  getLocalSend,
+  saveLocalSend,
+  getCacheCount,
+  saveCacheCount
+} from './util'
+import { getResourceLikesForLive, postResourceLikes } from '@/service/like'
+import style from './index.module.less'
+import IconSVG from './img/icon.svg'
+
+const ResourceType = 'open_live'
+/**
+ * 直播在线人数
+ * @param {string} resId 资源id
+ */
+export default function LiveOnlineCount({
+  resId,
+  className = '',
+  onOnlineCountChange
+}) {
+  if (!resId) return null
+
+  const [onlineCount, setOnlineCount] = useState(0)
+  const sendCount = () => {
+    const hasSend = getLocalSend(resId)
+    // setOnlineCount((t) => t + 1)
+    if (!hasSend) {
+      postResourceLikes(resId, ResourceType)
+      saveLocalSend(resId, true)
+    }
+  }
+
+  useEffect(() => {
+    (async () => {
+      let count = 0
+      // 获取点赞数
+      try {
+        // 容错处理
+        const likesData = await getResourceLikesForLive(resId, ResourceType)
+        count = likesData?.open_live_count || 0
+        saveCacheCount(resId, count)
+      } catch (e) {
+        console.error(e)
+        count = getCacheCount(resId) || 0
+      }
+      const currentCount = count === 0 ? 1 : count
+      setOnlineCount(currentCount)
+      onOnlineCountChange(currentCount)
+      sendCount()
+    })()
+  }, [])
+
+  return (
+    <div
+      className={`${style['like-wrap']} ${className}`}
+    >
+      <div className={style.icon}>
+        <img src={IconSVG} />
+      </div>
+      <div className={style['like-count']}>
+        {onlineCount}
+        {' '}
+        观看
+      </div>
+    </div>
+  )
+}