@x-edu/live-player 0.0.34 → 0.0.36

package/src/hook/useZoom.js

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

@@ -1,109 +0,0 @@
-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,
-  setIsSubscribe,
-  status
-}) {
-  const { live_id: liveId, begin_time: beginTime } = data
-  const [curAction, setCurAction] = useState(() => {
-    let actionNum
-    if (status === 1 || status === 3) {
-      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
-        }
-
-        await openLiveSubscribe({
-          liveId
-        })
-        message.success('预约成功')
-        const now = new Date().getTime()
-        const begin = new Date(beginTime).getTime()
-        setIsSubscribe(true)
-        if (begin > now && (begin - now) < 15 * 60 * 1000) {
-          setCurAction(1)
-        } else {
-          setCurAction(4)
-        }
-        onSubscribe({
-          ...data,
-          is_subscribe: true
-        })
-      } catch (error) {
-        onSubscribe({
-          ...data,
-          is_subscribe: false
-        })
-        if (error?.response?.data?.message === '直播开始前15分钟无法预约') {
-          setCurAction(3)
-        }
-        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>
-  )
-}

package/src/list/ListItem/Action/index.module.less

@@ -1,26 +0,0 @@
-.action {
-  font-size: 14px;
-  line-height: 22px;
-  color: #1E62EC;
-  border-radius: 144.889px;
-  border: 1px solid #1E62EC;
-  width: 88px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 8px;
-
-  &:hover {
-    color: #4079EF;
-    border: 1px solid #4079EF;
-
-  }
-}
-
-
-
-.action-has-subscribe {
-  border: 1px solid #B7CCF9 !important;
-  color: #B7CCF9 !important;
-}

package/src/list/ListItem/img/dianzan.svg

@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.89813 1.82793L4.50419 5.22187C4.40473 5.3213 4.34884 5.45616 4.34881 5.5968V11.7409C4.34881 12.0338 4.58623 12.2712 4.87911 12.2712H10.6223C10.8372 12.2713 11.0309 12.1416 11.1128 11.9429L12.7541 7.95771C12.8068 7.8295 12.8338 7.69222 12.8337 7.55361V6.43786C12.8337 5.8521 12.3588 5.37725 11.7731 5.37725H8.37911L8.99055 2.97498C9.06988 2.6637 8.95419 2.33526 8.69729 2.1424L8.24495 1.80301C8.13927 1.72378 7.99139 1.7344 7.89813 1.82793Z" fill="#CCCCCC"/>
-<path d="M3.2882 5.90755H1.6973C1.40442 5.90755 1.16699 6.14498 1.16699 6.43786V11.7409C1.16699 12.0338 1.40442 12.2712 1.6973 12.2712H3.2882V5.90755Z" fill="#CCCCCC"/>
-</svg>

package/src/list/ListItem/img/like-fill.svg

@@ -1,8 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="icon_planar/web_icon_&#231;&#130;&#185;&#232;&#181;&#158;_fill">
-<g id="&#232;&#183;&#175;&#229;&#190;&#132;">
-<path d="M9.02622 2.08907L5.14744 5.96785C5.03377 6.08149 4.96989 6.23561 4.96986 6.39634V13.4182C4.96986 13.7529 5.2412 14.0242 5.57592 14.0242H12.1396C12.3852 14.0243 12.6066 13.8762 12.7002 13.6491L14.5759 9.09452C14.6361 8.948 14.667 8.7911 14.6668 8.6327V7.35755C14.6668 6.68812 14.1241 6.14543 13.4547 6.14543H9.57592L10.2747 3.39998C10.3654 3.04423 10.2332 2.66887 9.93956 2.44846L9.42259 2.06058C9.30181 1.97003 9.13281 1.98218 9.02622 2.08907Z" fill="#CCCCCC"/>
-<path d="M3.75774 6.75149H1.93956C1.60484 6.75149 1.3335 7.02283 1.3335 7.35755V13.4182C1.3335 13.7529 1.60484 14.0242 1.93956 14.0242H3.75774V6.75149Z" fill="#CCCCCC"/>
-</g>
-</g>
-</svg>

package/src/list/ListItem/img/play.svg

@@ -1,16 +0,0 @@
-<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/list/ListItem/img/video.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3334 3.33317C11.3334 2.96498 11.0349 2.6665 10.6667 2.6665H1.33335C0.965164 2.6665 0.666687 2.96498 0.666687 3.33317V12.6665C0.666687 13.0347 0.965164 13.3332 1.33335 13.3332H10.6667C11.0349 13.3332 11.3334 13.0347 11.3334 12.6665V9.8665L14.8087 12.2998C14.9106 12.3712 15.0437 12.38 15.154 12.3225C15.2644 12.265 15.3335 12.1509 15.3334 12.0265V3.97317C15.3335 3.84877 15.2644 3.73464 15.154 3.67717C15.0437 3.61969 14.9106 3.62843 14.8087 3.69984L11.3334 6.13317V3.33317ZM4.67202 6.09917C4.69737 5.97499 4.80662 5.88581 4.93335 5.88584C4.98396 5.8853 5.03367 5.89984 5.07669 5.9265L7.98002 7.7745L8.02202 7.80784C8.14544 7.9276 8.12489 8.13115 7.98002 8.22384L5.07669 10.0718L5.02802 10.0958C4.85351 10.1621 4.66666 10.0332 4.66669 9.8465V6.15184L4.67202 6.09917Z" fill="#CCCCCC"/>
-</svg>

package/src/list/ListItem/img/view-fill.svg

@@ -1,8 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="icon_planar/web_icon_&#230;&#181;&#143;&#232;&#167;&#136;&#233;&#135;&#143;_fill">
-<g id="&#232;&#183;&#175;&#229;&#190;&#132;">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.0002 13C5.55571 13 3.37488 11.4573 1.46255 8.44367C1.29048 8.17291 1.29048 7.82709 1.46255 7.55633C3.37488 4.54267 5.55571 3 8.0002 3C10.4447 3 12.6255 4.54267 14.5379 7.55633C14.7099 7.82709 14.7099 8.17291 14.5379 8.44367C12.6255 11.4573 10.4447 13 8.0002 13ZM5.33352 8C5.33352 9.47276 6.52743 10.6667 8.00018 10.6667C9.47294 10.6667 10.6669 9.47276 10.6669 8C10.6669 6.52724 9.47294 5.33333 8.00018 5.33333C6.52743 5.33333 5.33352 6.52724 5.33352 8Z" fill="#CCCCCC"/>
-<path d="M9.34553 8C9.34553 8.73633 8.7432 9.33333 8.0002 9.33333C7.2572 9.33333 6.65487 8.73633 6.65487 8C6.65487 7.26367 7.2572 6.66667 8.0002 6.66667C8.7432 6.66667 9.34553 7.26367 9.34553 8Z" fill="#CCCCCC"/>
-</g>
-</g>
-</svg>

package/src/list/ListItem/img/yiguankan.svg

@@ -1,3 +0,0 @@
-<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.75 1.75033C12.75 1.42833 12.4887 1.16699 12.1667 1.16699H2.83333C2.51133 1.16699 2.25 1.42833 2.25 1.75033V12.2503C2.25 12.5723 2.51133 12.8337 2.83333 12.8337H12.1667C12.4887 12.8337 12.75 12.5723 12.75 12.2503V8.89149L9.97392 11.6676L7.49708 11.6641L7.50058 9.19191L12.75 3.94191V1.75033ZM14.0287 5.96316L13.2038 5.13833L8.66667 9.67549L8.6655 10.4992L9.4915 10.5003L14.0287 5.96316ZM7.5 7.00033H4.58333V8.16699H7.5V7.00033ZM4.58333 4.66699H9.25V5.83366H4.58333V4.66699Z" fill="#CCCCCC"/>
-</svg>

package/src/list/ListItem/index.jsx

@@ -1,135 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import dayjs from 'dayjs'
-import classNames from 'classnames'
-import { find } from 'lodash'
-import Avatar from '@/component/Avatar'
-import Icon from '@/component/Icon'
-import { formatLikesCount, formatUVCount } from '@/util/liveCountUtil'
-import { getResourceLikes } from '@/service/like'
-import Action from './Action'
-import DefaultCover from './img/live.png'
-import PlayImg from './img/play.svg'
-import dianZan from './img/like-fill.svg'
-import yiYue from './img/view-fill.svg'
-import videoSvg from './img/video.svg'
-import style from './index.module.less'
-
-const TagName = {
-  0: '直播预告',
-  1: '直播中',
-  2: '直播回放',
-  3: '直播中' // 实际是暂停
-}
-
-export default function ListItem({
-  data,
-  themeName,
-  subscription,
-  onDetailClick,
-  handleLogin,
-  isLogin,
-  onSubscribe
-}) {
-  const {
-    live_id: liveId,
-    live_name: liveName,
-    begin_time: beginTime,
-    // end_time: endTime,
-    cover_url: coverUrl,
-    status
-  } = data
-  const [liveExt, setLiveExt] = useState({})
-  const [isSubscribe, setIsSubscribe] = useState(() => {
-    if (status === 0) {
-      // 开播前15分钟之外
-      const subscriptionItem = find(subscription, {
-        live_id: liveId
-      })
-      if (subscriptionItem?.is_subscribe) { // 已预约
-        return true
-      } else { // 未预约
-        return false
-      }
-    } else {
-      return false
-    }
-  })
-
-  useEffect(() => {
-    (async () => {
-      const res = await getResourceLikes(liveId)
-      setLiveExt(res || {})
-    })()
-  }, [])
-
-  const handleDetailClick = async () => {
-    if (data.login && !isLogin) {
-      handleLogin(data)
-      return
-    }
-    if (onDetailClick) {
-      onDetailClick(data)
-    } else {
-      // 默认跳转中小学
-      window.open(`https://basic.smartedu.cn/publicLive/${liveId}`)
-    }
-  }
-
-  return (
-    <div
-      className={classNames(style.container, themeName)}
-      onClick={handleDetailClick}
-    >
-      <div className={style.right}>
-        <div className={style['right-top']}>
-          <div className={style.title}>{liveName}</div>
-        </div>
-        <div className={style['right-bottom']}>
-          <div className={`${style.time} ${status === 0 ? style['foreshow-time'] : ''} time-box`}>
-            {isSubscribe ? <Icon type="web_icon_shijian_fill" className={`${style['time-icon']} checked-icon`} /> : <img src={videoSvg} className={style['time-icon']} />}
-
-            {status === 2 ? (
-              `${dayjs(beginTime).format('YYYY/MM/DD HH:mm')}`
-            ) : (
-              `${dayjs(beginTime).format('YYYY/MM/DD HH:mm')} 开始`
-            )}
-
-            <div className={style.like_sty}>
-              <div className={style.icon_bottom}>
-                <img src={yiYue} />
-                {formatUVCount(liveExt.total_uv || 0)}
-              </div>
-              <div className={style.icon_bottom}>
-                <img src={dianZan} alt="" />
-                {formatLikesCount(liveExt.like_count || 0)}
-              </div>
-            </div>
-          </div>
-
-          <Action
-            data={data}
-            subscription={subscription}
-            onActionDetailClick={handleDetailClick}
-            handleLogin={handleLogin}
-            isLogin={isLogin}
-            onSubscribe={onSubscribe}
-            setIsSubscribe={setIsSubscribe}
-            status={status}
-          />
-
-        </div>
-      </div>
-      <div className={style.left}>
-        <div className={classNames(style.tag, style[`tag${status}`])}>
-          {status === 1 || status === 3 ? <img src={PlayImg} alt="" /> : null}
-          {TagName[status]}
-        </div>
-        <Avatar
-          src={coverUrl || DefaultCover}
-          errorImg={DefaultCover}
-          className={style.avatar}
-        />
-      </div>
-    </div>
-  )
-}