@x-edu/live-player 0.0.1

package/src/hook/useAsync.js

@@ -0,0 +1,84 @@
+import { useState, useMemo, useEffect } from 'react'
+import throttle from 'lodash/throttle'
+import reactDom from 'react-dom'
+
+/**
+ * useAsync
+ *
+ * Notice: 所有参数不应发生变化
+ *
+ * @param {function} fn 执行函数
+ * @param {object} options
+ * @param {number?} options.throttleInterval 默认0不生效
+ * @param {number?} options.loadingDelay 默认0不生效
+ * @param {string?} options.cacheKey 默认不Cache
+ * @returns {object} { }
+ */
+export default function useAsync(fn, {
+  throttleInterval = 0,
+  loadingDelay = 0,
+  immediate = false
+} = {}) {
+  const [hasRequested, setHasRequested] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState()
+  const [error, setError] = useState()
+
+  const run = useMemo(() => {
+    const execFn = async (...args) => {
+      let result
+      setLoading(true)
+      setHasRequested(true)
+      try {
+        result = await fn(...args)
+      } catch (e) {
+        if (loadingDelay) {
+          await sleep(loadingDelay)
+        }
+        batchSet(() => {
+          setLoading(false)
+          setError(e)
+        })
+      }
+      if (loadingDelay) {
+        await sleep(loadingDelay)
+      }
+      batchSet(() => {
+        setLoading(false)
+        setData(result)
+      })
+    }
+    if (throttleInterval) {
+      return throttle(execFn, throttleInterval, {
+        leading: true,
+        trailing: true
+      })
+    } else {
+      return execFn
+    }
+  }, [])
+
+  useEffect(() => {
+    if (immediate) {
+      run()
+    }
+  }, [immediate])
+
+  return {
+    hasRequested,
+    loading,
+    data,
+    error,
+    run
+  }
+}
+
+function batchSet(fn) {
+  reactDom.unstable_batchedUpdates(fn)
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}

package/src/hook/useGoToPage.js

@@ -0,0 +1,83 @@
+import { useHistory } from 'react-router-dom'
+
+const smartcan = window.Bridge && window.navigator.userAgent.indexOf('SmartCanWebView') !== -1
+
+// function getQueryVariable(variable, path) {
+//   const vars = path.split('&')
+//   for (let i = 0; i < vars.length; i++) {
+//     const pair = vars[i].split('=')
+//     if (pair[0] === variable) {
+//       return pair[1]
+//     }
+//   }
+//   return null
+// }
+
+export default function useGoToPage() {
+  const history = useHistory()
+  return async (subPath, {
+    useBridge = false,
+    newPage
+  } = {}) => {
+    if (smartcan && useBridge) {
+      let targetPath
+      // url 是cmp地址，直接跳转
+      if (subPath?.startsWith('cmp://')) {
+        targetPath = subPath
+      } else if (subPath.indexOf('http') === 0) {
+        targetPath = subPath
+      } else if (subPath.substr(0, 1) === '/') {
+        targetPath = `${window.location.origin}${subPath}`
+      } else {
+        targetPath = `${window.location.href}${subPath.substr(1)}`
+      }
+      // const title = getQueryVariable('_maf_webview_title', targetPath) || '国家智慧教育读书平台'
+      targetPath = addQuery(targetPath, {
+        _maf_menu_ids: getMenuIds(subPath),
+        _maf_show_progress_bar: false,
+        _maf_need_decode: true
+      })
+      const appfactory = window.Bridge.require('sdp.appfactory').promise()
+      const result = await appfactory.goPage({
+        page: targetPath
+      })
+      return result
+    } else if (window.parent === window.self) {
+      if (newPage) {
+        window.open(subPath, '_blank')
+      } else if (subPath.indexOf('http') === 0) {
+        window.location.href = subPath
+      } else {
+        const [
+          pathname,
+          search
+        ] = subPath.split('?')
+        history.push({
+          pathname,
+          search: search && `?${search}`
+        })
+      }
+    } else {
+      window.open(subPath, '_blank')
+    }
+  }
+}
+
+const ShowIdsSubPath = [
+  '/teacherTraining?firstLevel=t_type_M52vKqPtOQ'
+]
+
+function getMenuIds(subPath) {
+  const needMenu = ShowIdsSubPath.some((t) => subPath.indexOf(t) === 0)
+  return needMenu ? 'all' : 'none'
+}
+
+export function addQuery(url, params) {
+  const paramStr = Object.keys(params).map((key) => {
+    const value = params[key]
+    return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
+  }).join('&')
+  return url.indexOf('?') > 0
+    ? `${url}&${paramStr}`
+    : `${url}?${paramStr}`
+}

package/src/hook/useInterval.js

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react'
+
+function useInterval(
+  callback,
+  delay
+) {
+  const savedCallback = useRef(callback)
+
+  // Remember the latest callback if it changes.
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  // Set up the interval.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    // Note: 0 is a valid value for delay.
+    if (!delay && delay !== 0) {
+      return
+    }
+
+    const id = setInterval(() => savedCallback.current(), delay)
+
+    return () => clearInterval(id)
+  }, [delay])
+}
+
+export default useInterval

package/src/hook/useIsMounted.js

@@ -0,0 +1,17 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+function useIsMounted() {
+  const isMounted = useRef(false)
+
+  useEffect(() => {
+    isMounted.current = true
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  return useCallback(() => isMounted.current, [])
+}
+
+export default useIsMounted

package/src/hook/useModuleByRole.js

@@ -0,0 +1,53 @@
+import { useContext, useEffect, useState } from 'react'
+import { USER_IDENTITY } from '@/config/live'
+import UserContext from '@/component/Login/UserContext'
+
+// 四个模块
+export const Module = {
+  SYNC_CLASSROOM_PICKED: 'SYNC_CLASSROOM_PICKED', // 首页精选课
+  TCH_TRAINING: 'TCH_TRAINING',
+  FAMILY_EDU: 'FAMILY_EDU',
+  EVO_EXP: 'EVO_EXP',
+  STUDIO: 'STUDIO' // 工作室
+}
+
+// 每个角色不可见的模块
+export const inaccessible = {
+  [USER_IDENTITY.TEACHER]: [],
+  [USER_IDENTITY.STUDENT]: [Module.SYNC_CLASSROOM_PICKED, Module.TCH_TRAINING, Module.FAMILY_EDU, Module.EVO_EXP, Module.STUDIO],
+  [USER_IDENTITY.GUARDIAN]: [Module.SYNC_CLASSROOM_PICKED, Module.TCH_TRAINING, Module.EVO_EXP, Module.STUDIO],
+  [USER_IDENTITY.ACADEMIC_STAFF]: [],
+  [USER_IDENTITY.ELECTRIC_TEACHER]: [],
+  [USER_IDENTITY.EDU_ADMIN]: [],
+  [USER_IDENTITY.SOCIAL_LEARNER]: []
+}
+
+// 四个模块可见性（默认都可见）
+const moduleVisible = {
+  [Module.SYNC_CLASSROOM_PICKED]: true,
+  [Module.TCH_TRAINING]: true,
+  [Module.FAMILY_EDU]: true,
+  [Module.EVO_EXP]: true,
+  [Module.STUDIO]: true
+}
+
+export default function useModuleByRole() {
+  const { userInfo, userRole, loginStatus } = useContext(UserContext)
+  const [visibleModule, setVisibleModule] = useState(moduleVisible)
+
+  useEffect(() => {
+    if (userInfo && userRole) {
+      Object.keys(moduleVisible).forEach((key) => {
+        moduleVisible[key] = !inaccessible[userRole].includes(key)
+      })
+      setVisibleModule({
+        ...moduleVisible
+      })
+    }
+  }, [userInfo, userRole])
+
+  return {
+    visibleModule,
+    loginStatus
+  }
+}

package/src/hook/usePageScrollable.js

@@ -0,0 +1,52 @@
+import {
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useState
+} from 'react'
+import { useLocation } from 'react-router-dom'
+import { isInElectron } from '@/util/env'
+
+export function usePageScrollableRoot() {
+  const location = useLocation()
+  const [pageScrollable, setPageScrollable] = useState(!isInElectron)
+  const pageScrollableRef = useRef(pageScrollable)
+
+  const setCurrentPageScrollable = (value) => {
+    setPageScrollable(value)
+  }
+
+  useLayoutEffect(() => {
+    // page不变，是location发生变化
+    if (pageScrollableRef.current === pageScrollable) {
+      if (!pageScrollable) {
+        if (!isInElectron) {
+          setPageScrollable(true)
+          pageScrollableRef.current = true
+        }
+      }
+    } else {
+      // 是page发生变化则同步更新
+      pageScrollableRef.current = pageScrollable
+    }
+  }, [location.key, pageScrollable])
+
+  return {
+    pageScrollable,
+    setCurrentPageScrollable
+  }
+}
+
+export const PageScrollableContext = createContext()
+/**
+ *
+ * @typedef {Object} UsePageScrollable
+ * @property {Boolean} pageScrollable 页面是否可以滚动，默认可以滚动
+ * @property {(isPageScrollable: Boolean) => void} setCurrentPageScrollable 设置当前页面是否可以滚动，设置仅对当前路由有效，切换则设置恢复滚动
+ */
+/**
+ * 用于React组件下获取siteConfig，注意siteConfig本身是异步获取，所以同步获取的值只能用于React组件渲染
+ * @returns {UsePageScrollable}
+ */
+export const usePageScrollable = () => useContext(PageScrollableContext)

package/src/hook/usePortal.js

@@ -0,0 +1,83 @@
+import { useRef, useEffect } from 'react'
+
+/**
+ * Creates DOM element to be used as React root.
+ * @returns {HTMLElement}
+ */
+function createRootElement(id) {
+  const rootContainer = document.createElement('div')
+  rootContainer.setAttribute('id', id)
+  return rootContainer
+}
+
+/**
+ * Appends element as last child of body.
+ * @param {HTMLElement} rootElem
+ */
+function addRootElement(rootElem) {
+  document.body.insertBefore(
+    rootElem,
+    document.body.lastElementChild.nextElementSibling
+  )
+}
+
+/**
+ * Hook to create a React Portal.
+ * Automatically handles creating and tearing-down the root elements (no SRR
+ * makes this trivial), so there is no need to ensure the parent target already
+ * exists.
+ * @example
+ * const target = usePortal(id, [id]);
+ * return createPortal(children, target);
+ * @param {String} selector The selector of the target container, e.g '#modal' or '.spotlight'
+ * @param {containerClass} containerClass
+ * @returns {HTMLElement} The DOM node to use as the Portal target.
+ */
+function usePortal(selector, containerClass) {
+  const rootElemRef = useRef(null)
+
+  useEffect(() => {
+    // Look for existing target dom element to append to
+    const existingParent = document.querySelector(selector)
+    // Parent is either a new root or the existing dom element
+    const parentElem = existingParent || createRootElement(selector)
+
+    // If there is no existing DOM element, add a new one.
+    if (!existingParent) {
+      addRootElement(parentElem)
+    }
+
+    // Add the detached element to the parent
+    parentElem.appendChild(rootElemRef.current)
+
+    return function removeElement() {
+      rootElemRef.current.remove()
+      if (!parentElem.childElementCount) {
+        parentElem.remove()
+      }
+    }
+  }, [selector])
+
+  /**
+   * It's important we evaluate this lazily:
+   * - We need first render to contain the DOM element, so it shouldn't happen
+   *   in useEffect. We would normally put this in the constructor().
+   * - We can't do 'const rootElemRef = useRef(document.createElement('div))',
+   *   since this will run every single render (that's a lot).
+   * - We want the ref to consistently point to the same DOM element and only
+   *   ever run once.
+   * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
+   */
+  function getRootElem() {
+    if (!rootElemRef.current) {
+      const div = document.createElement('div')
+      div.classList.add(containerClass)
+      rootElemRef.current = div
+    }
+    return rootElemRef.current
+  }
+
+  return getRootElem()
+}
+
+export default usePortal

package/src/hook/useScrollRestore/index.js

@@ -0,0 +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)
+    }
+  }, [])
+}

package/src/hook/useScrollRestore/scrollContext.js

@@ -0,0 +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'

package/src/hook/useTrackRef.js

@@ -0,0 +1,11 @@
+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

@@ -0,0 +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
+}

package/src/hook/useZoom.js

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

package/src/index.js

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

package/src/lib/getServiceConfig.js

@@ -0,0 +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]
+}