@x-edu/live-player 0.0.28 → 0.0.30

package/src/list/ListItem/Action/index.jsx

@@ -1,109 +1,109 @@
-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>
-  )
-}
+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,20 +1,20 @@
-.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;
-}
-
-
-
-.action-has-subscribe {
-  border: 1px solid #B7CCF9;
-  color: #B7CCF9
+.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;
+}
+
+
+
+.action-has-subscribe {
+  border: 1px solid #B7CCF9;
+  color: #B7CCF9
 }

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

@@ -1,4 +1,4 @@
-<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>
+<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 +1,8 @@
-<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>
+<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 +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/list/ListItem/img/view-fill.svg

@@ -1,8 +1,8 @@
-<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>
+<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 +1,3 @@
-<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>
+<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,134 +1,135 @@
-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,
-  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={style.container}
-      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'] : ''}`}>
-            {isSubscribe ? <Icon type="web_icon_shijian_fill" className={style['time-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>
-  )
-}
+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>
+  )
+}