@x-edu/live-player 0.0.19 → 0.0.21

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>
+  )
+}

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

@@ -1,34 +1,34 @@
-.like-wrap {
-  display: flex;
-  align-items: center;
-  background-color: #EAEEFF;
-  border-radius: 20px;
-  height: 20px;
-  
-  .icon {
-    background: #3554ff;
-    color: #fff;
-    font-size: 16px;
-    height: 20px;
-    flex: 0 0 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 100%;
-    img {
-      transform: rotate(180deg);
-      height: 10px;
-      width: 10px;
-    }
-  }
-}
-  
-
-.like-count {
-  color: #999999;
-  font-size: 12px;
-  line-height: 12px;
-  padding: 0 16px 0 4px;
-  color: #3554ff;
-  white-space: nowrap;
-}
+.like-wrap {
+  display: flex;
+  align-items: center;
+  background-color: #EAEEFF;
+  border-radius: 20px;
+  height: 20px;
+  
+  .icon {
+    background: #3554ff;
+    color: #fff;
+    font-size: 16px;
+    height: 20px;
+    flex: 0 0 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100%;
+    img {
+      transform: rotate(180deg);
+      height: 10px;
+      width: 10px;
+    }
+  }
+}
+  
+
+.like-count {
+  color: #999999;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 0 16px 0 4px;
+  color: #3554ff;
+  white-space: nowrap;
+}