@x-edu/live-player 0.0.19 → 0.0.21

package/src/hook/useScrollRestore/index.js

@@ -1,32 +1,32 @@
-import { useContext, useLayoutEffect, useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
-import { ScrollContext } from './scrollContext'
-import { isSticky, StickyTop } from '@/util/stickyStatus'
-import { isInElectron } from '@/util/env'
-
-export function useScrollRestoration(
-  identifier = 'default'
-) {
-  const location = useLocation()
-  const state = useContext(ScrollContext)
-
-  useLayoutEffect(() => {
-    if (!isInElectron) {
-      const isStickyVal = isSticky()
-      setTimeout(() => {
-        const position = state.read(location, identifier)
-        document.scrollingElement.scrollTo(0, isStickyVal ? StickyTop + 10 : position || 0)
-      }, 10)
-    }
-  }, [location.key])
-
-  useEffect(() => {
-    const onScroll = () => {
-      state.save(location, identifier, document.scrollingElement.scrollTop)
-    }
-    window.addEventListener('scroll', onScroll)
-    return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [])
-}
+import { useContext, useLayoutEffect, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { ScrollContext } from './scrollContext'
+import { isSticky, StickyTop } from '@/util/stickyStatus'
+import { isInElectron } from '@/util/env'
+
+export function useScrollRestoration(
+  identifier = 'default'
+) {
+  const location = useLocation()
+  const state = useContext(ScrollContext)
+
+  useLayoutEffect(() => {
+    if (!isInElectron) {
+      const isStickyVal = isSticky()
+      setTimeout(() => {
+        const position = state.read(location, identifier)
+        document.scrollingElement.scrollTo(0, isStickyVal ? StickyTop + 10 : position || 0)
+      }, 10)
+    }
+  }, [location.key])
+
+  useEffect(() => {
+    const onScroll = () => {
+      state.save(location, identifier, document.scrollingElement.scrollTop)
+    }
+    window.addEventListener('scroll', onScroll)
+    return () => {
+      window.removeEventListener('scroll', onScroll)
+    }
+  }, [])
+}

package/src/hook/useScrollRestore/scrollContext.js

@@ -1,20 +1,20 @@
-import { createContext } from 'react'
-
-const ScrollCache = {}
-
-class SessionStorage {
-  read(location, key) {
-    const cacheKey = `${location}: ${key}`
-    return ScrollCache[cacheKey]
-  }
-
-  save(location, key, value) {
-    const cacheKey = `${location}: ${key}`
-    ScrollCache[cacheKey] = value
-  }
-}
-
-export const ScrollContext = createContext(
-  new SessionStorage()
-)
-ScrollContext.displayName = 'ScrollContext'
+import { createContext } from 'react'
+
+const ScrollCache = {}
+
+class SessionStorage {
+  read(location, key) {
+    const cacheKey = `${location}: ${key}`
+    return ScrollCache[cacheKey]
+  }
+
+  save(location, key, value) {
+    const cacheKey = `${location}: ${key}`
+    ScrollCache[cacheKey] = value
+  }
+}
+
+export const ScrollContext = createContext(
+  new SessionStorage()
+)
+ScrollContext.displayName = 'ScrollContext'

package/src/hook/useTrackRef.js

@@ -1,11 +1,11 @@
-import { useEffect, useRef } from 'react'
-
-export default function useTrackRef(data) {
-  const dataRef = useRef(data)
-
-  useEffect(() => {
-    dataRef.current = data
-  }, [data])
-
-  return dataRef
-}
+import { useEffect, useRef } from 'react'
+
+export default function useTrackRef(data) {
+  const dataRef = useRef(data)
+
+  useEffect(() => {
+    dataRef.current = data
+  }, [data])
+
+  return dataRef
+}

package/src/hook/useWindowSize.js

@@ -1,28 +1,28 @@
-const { useState, useEffect } = require('react')
-
-// Hook
-export default function useWindowSize() {
-  // Initialize state with undefined width/height so server and client renders match
-  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
-  const [windowSize, setWindowSize] = useState({
-    width: undefined,
-    height: undefined
-  })
-  useEffect(() => {
-    // Handler to call on window resize
-    function handleResize() {
-      // Set window width/height to state
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      })
-    }
-    // Add event listener
-    window.addEventListener('resize', handleResize)
-    // Call handler right away so state gets updated with initial window size
-    handleResize()
-    // Remove event listener on cleanup
-    return () => window.removeEventListener('resize', handleResize)
-  }, []) // Empty array ensures that effect is only run on mount
-  return windowSize
-}
+const { useState, useEffect } = require('react')
+
+// Hook
+export default function useWindowSize() {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined
+  })
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      })
+    }
+    // Add event listener
+    window.addEventListener('resize', handleResize)
+    // Call handler right away so state gets updated with initial window size
+    handleResize()
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleResize)
+  }, []) // Empty array ensures that effect is only run on mount
+  return windowSize
+}

package/src/hook/useZoom.js

@@ -1,47 +1,47 @@
-import { useEffect } from 'react'
-
-const MiniContentWitdh = 1368
-
-export default function useZoom() {
-  useEffect(() => {
-    zoomToViewPort()
-  }, [])
-}
-
-function zoomToViewPort() {
-  if (window.location.pathname === '/home') {
-    const target = document.querySelector('.main')
-    if (target) {
-      const availWidth = window.innerWidth
-      if (availWidth < MiniContentWitdh) {
-        const scale = availWidth / MiniContentWitdh
-        target.style.width = `${MiniContentWitdh}px`
-        target.style.transform = `scale(${scale})`
-        target.style.transformOrigin = '0 0'
-        setTimeout(() => {
-          const wrapTarget = document.querySelector('.main-wrapper')
-          wrapTarget.style.height = `${window.screen.availHeight - 300}px`
-          wrapTarget.addEventListener('scroll', () => {
-            const maxHeight = target.getBoundingClientRect().height
-              - wrapTarget.getBoundingClientRect().height
-            if (wrapTarget.scrollTop >= maxHeight) {
-              wrapTarget.scrollTop = maxHeight
-            }
-          })
-          setInterval(() => {
-            let n = 0
-            const t = setInterval(() => {
-              n += 1
-              if (n < 8) {
-                const h = wrapTarget.getBoundingClientRect().height
-                window.parent.postMessage(h, '*')
-              } else {
-                clearInterval(t)
-              }
-            }, 300)
-          }, 1000)
-        }, 100)
-      }
-    }
-  }
-}
+import { useEffect } from 'react'
+
+const MiniContentWitdh = 1368
+
+export default function useZoom() {
+  useEffect(() => {
+    zoomToViewPort()
+  }, [])
+}
+
+function zoomToViewPort() {
+  if (window.location.pathname === '/home') {
+    const target = document.querySelector('.main')
+    if (target) {
+      const availWidth = window.innerWidth
+      if (availWidth < MiniContentWitdh) {
+        const scale = availWidth / MiniContentWitdh
+        target.style.width = `${MiniContentWitdh}px`
+        target.style.transform = `scale(${scale})`
+        target.style.transformOrigin = '0 0'
+        setTimeout(() => {
+          const wrapTarget = document.querySelector('.main-wrapper')
+          wrapTarget.style.height = `${window.screen.availHeight - 300}px`
+          wrapTarget.addEventListener('scroll', () => {
+            const maxHeight = target.getBoundingClientRect().height
+              - wrapTarget.getBoundingClientRect().height
+            if (wrapTarget.scrollTop >= maxHeight) {
+              wrapTarget.scrollTop = maxHeight
+            }
+          })
+          setInterval(() => {
+            let n = 0
+            const t = setInterval(() => {
+              n += 1
+              if (n < 8) {
+                const h = wrapTarget.getBoundingClientRect().height
+                window.parent.postMessage(h, '*')
+              } else {
+                clearInterval(t)
+              }
+            }, 300)
+          }, 1000)
+        }, 100)
+      }
+    }
+  }
+}

package/src/index.js

@@ -1,10 +1,10 @@
-import React from 'react'
-import { render } from 'react-dom'
-
-import Demo from './demo'
-
-// 测试页面内容
-render(
-  <Demo />,
-  document.querySelector('#root')
-)
+import React from 'react'
+import { render } from 'react-dom'
+
+import Demo from './demo'
+
+// 测试页面内容
+render(
+  <Demo />,
+  document.querySelector('#root')
+)

package/src/lib/getLiveOnlineCount.js

@@ -1,10 +1,10 @@
-import { getResourceLikesForLive } from '@/service/like'
-
-const ResourceType = 'open_live'
-
-export async function getLiveOnlineCount(liveId) {
-  const likesData = await getResourceLikesForLive(liveId, ResourceType)
-  const count = likesData?.open_live_count || 0
-  const currentCount = count === 0 ? 1 : count
-  return currentCount
-}
+import { getResourceLikesForLive } from '@/service/like'
+
+const ResourceType = 'open_live'
+
+export async function getLiveOnlineCount(liveId) {
+  const likesData = await getResourceLikesForLive(liveId, ResourceType)
+  const count = likesData?.open_live_count || 0
+  const currentCount = count === 0 ? 1 : count
+  return currentCount
+}

package/src/lib/getServiceConfig.js

@@ -1,102 +1,102 @@
-import MutexLock from 'mutex-lock'
-import configCenterAPI from '@/config/request/config-center'
-import config from '@/config/env'
-
-const {
-  app,
-  env: defaultEnv
-} = config
-const LiveCache = {}
-const defaultSdpAppId = app.appid
-
-const useLocalDirectly = true // 不发请求，直接使用本地数据
-const localConfig = {
-  'x-cloud': {
-    properties: {
-      recommend_week: 'week_1', // 首页本周推荐（周数）
-      live_close_login: '0', // 直播间登录验证降级配置（启用后所有人都以游客身份进入直播间，跳过UC鉴权），默认不启用
-      live_record_random_delay_sec: 99, // 用于各端上报用户参与直播的随机离散时间
-      download_url: ''
-    }
-  }
-}
-
-/**
- * 获取服务组件配置
- *
- * @param {string} sdpAppId
- * @param {string} serviceName 服务组件标识
- * @param {string?} env 环境
- */
-export default async function getServiceConfig(
-  serviceName,
-  sdpAppId = defaultSdpAppId,
-  env = defaultEnv
-) {
-  if (useLocalDirectly) {
-    return localConfig[serviceName]
-  }
-  const key = `ServiceConfig_${serviceName}_${sdpAppId}`
-  const mutexLock = getMutexLock(key)
-  const lockId = await mutexLock.request()
-
-  const cacheData = loadFromCache(key)
-  if (cacheData) {
-    mutexLock.release(lockId)
-    return cacheData
-  }
-  const url = `/configs/merge/config_type/service_component/format_code/${encodeURIComponent(serviceName)
-  }/open_way/${encodeURIComponent(`${sdpAppId}||||`)}/public_configs/for_web`
-
-  let data
-  try {
-    const result = await configCenterAPI.get(url, {
-      headers: {
-        'x-config-dispatch-env': env
-      }
-    })
-    data = result.data
-  } catch (e) {
-    mutexLock.release(lockId)
-    throw e
-  }
-
-  // const ttl = data.ttl || 3600
-  const ttl = 900 // 登录降级产品配置需求调整为 15 分钟，服务端也有 1 小时缓存
-  data.expire = new Date().getTime() + ttl * 1000
-  LiveCache[key] = data
-  window.localStorage.setItem(key, JSON.stringify(data))
-  mutexLock.release(lockId)
-  return data
-}
-
-function loadFromCache(key) {
-  if (LiveCache[key]) {
-    return LiveCache[key]
-  }
-  const cacheStr = window.localStorage.getItem(key)
-  let cacheData
-  try {
-    cacheData = JSON.parse(cacheStr)
-  } catch (e) {
-    return null
-  }
-
-  if (cacheData) {
-    const expire = cacheData.expire || 0
-    if (expire > new Date().getTime()) {
-      return cacheData
-    }
-  }
-}
-
-/**
- * 根据key给与不同的同步锁
- */
-const Lock = {}
-function getMutexLock(key) {
-  if (!Lock[key]) {
-    Lock[key] = new MutexLock()
-  }
-  return Lock[key]
-}
+import MutexLock from 'mutex-lock'
+import configCenterAPI from '@/config/request/config-center'
+import config from '@/config/env'
+
+const {
+  app,
+  env: defaultEnv
+} = config
+const LiveCache = {}
+const defaultSdpAppId = app.appid
+
+const useLocalDirectly = true // 不发请求，直接使用本地数据
+const localConfig = {
+  'x-cloud': {
+    properties: {
+      recommend_week: 'week_1', // 首页本周推荐（周数）
+      live_close_login: '0', // 直播间登录验证降级配置（启用后所有人都以游客身份进入直播间，跳过UC鉴权），默认不启用
+      live_record_random_delay_sec: 99, // 用于各端上报用户参与直播的随机离散时间
+      download_url: ''
+    }
+  }
+}
+
+/**
+ * 获取服务组件配置
+ *
+ * @param {string} sdpAppId
+ * @param {string} serviceName 服务组件标识
+ * @param {string?} env 环境
+ */
+export default async function getServiceConfig(
+  serviceName,
+  sdpAppId = defaultSdpAppId,
+  env = defaultEnv
+) {
+  if (useLocalDirectly) {
+    return localConfig[serviceName]
+  }
+  const key = `ServiceConfig_${serviceName}_${sdpAppId}`
+  const mutexLock = getMutexLock(key)
+  const lockId = await mutexLock.request()
+
+  const cacheData = loadFromCache(key)
+  if (cacheData) {
+    mutexLock.release(lockId)
+    return cacheData
+  }
+  const url = `/configs/merge/config_type/service_component/format_code/${encodeURIComponent(serviceName)
+  }/open_way/${encodeURIComponent(`${sdpAppId}||||`)}/public_configs/for_web`
+
+  let data
+  try {
+    const result = await configCenterAPI.get(url, {
+      headers: {
+        'x-config-dispatch-env': env
+      }
+    })
+    data = result.data
+  } catch (e) {
+    mutexLock.release(lockId)
+    throw e
+  }
+
+  // const ttl = data.ttl || 3600
+  const ttl = 900 // 登录降级产品配置需求调整为 15 分钟，服务端也有 1 小时缓存
+  data.expire = new Date().getTime() + ttl * 1000
+  LiveCache[key] = data
+  window.localStorage.setItem(key, JSON.stringify(data))
+  mutexLock.release(lockId)
+  return data
+}
+
+function loadFromCache(key) {
+  if (LiveCache[key]) {
+    return LiveCache[key]
+  }
+  const cacheStr = window.localStorage.getItem(key)
+  let cacheData
+  try {
+    cacheData = JSON.parse(cacheStr)
+  } catch (e) {
+    return null
+  }
+
+  if (cacheData) {
+    const expire = cacheData.expire || 0
+    if (expire > new Date().getTime()) {
+      return cacheData
+    }
+  }
+}
+
+/**
+ * 根据key给与不同的同步锁
+ */
+const Lock = {}
+function getMutexLock(key) {
+  if (!Lock[key]) {
+    Lock[key] = new MutexLock()
+  }
+  return Lock[key]
+}

package/src/list/Empty/index.jsx

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

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