@x-edu/live-player 0.0.21 → 0.0.23

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

@@ -1,98 +1,100 @@
-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
-}) {
-  const { status, 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
-        }
-        onSubscribe(data)
-        await openLiveSubscribe({
-          liveId
-        })
-        message.success('预约成功')
-        const now = new Date().getTime()
-        const begin = new Date(beginTime).getTime()
-        if (begin > now && (begin - now) < 15 * 60 * 1000) {
-          setCurAction(1)
-        } else {
-          setCurAction(4)
-        }
-      } catch (error) {
-        if (error?.response?.data?.message === '直播开始前15分钟无法预约') {
-          setCurAction(1)
-        }
-        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
+}) {
+  const { status, 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
+        }
+        onSubscribe(data)
+        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)
+        }
+      } catch (error) {
+        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,22 +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;
-}
-
-.action-subscribe {
-  background: #1E62EC;
-  color: #fff;
-}
-
-.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/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/video.svg

@@ -0,0 +1,3 @@
+<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/index.jsx

@@ -10,12 +10,14 @@ import DefaultCover from './img/live.png'
 import PlayImg from './img/play.svg'
 import dianZan from './img/dianzan.svg'
 import yiYue from './img/yiguankan.svg'
+import videoSvg from './img/video.svg'
 import style from './index.module.less'
+import { find } from 'lodash'
 
 const TagName = {
-  0: '预告',
+  0: '直播预告',
   1: '直播中',
-  2: '回放',
+  2: '直播回放',
   3: '直播中' // 实际是暂停
 }
 
@@ -31,12 +33,29 @@ export default function ListItem({
     live_id: liveId,
     live_name: liveName,
     begin_time: beginTime,
-    end_time: endTime,
+    // 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)
@@ -44,6 +63,7 @@ export default function ListItem({
     })()
   }, [])
 
+
   const handleDetailClick = async () => {
     if (data.login && !isLogin) {
       handleLogin(data)
@@ -53,7 +73,7 @@ export default function ListItem({
       onDetailClick(data)
     } else {
       // 默认跳转中小学
-      window.open(`https://basic.smartedu.cn/publicLive/${liveId}}`)
+      window.open(`https://basic.smartedu.cn/publicLive/${liveId}`)
     }
   }
 
@@ -61,34 +81,21 @@ export default function ListItem({
     <div
       className={style.container}
       onClick={handleDetailClick}
+
     >
-      <div className={style.left}>
-        <Avatar
-          src={coverUrl || DefaultCover}
-          errorImg={DefaultCover}
-          className={style.avatar}
-        />
-        <div className={classNames(style.tag, style[`tag${status}`])}>
-          {status === 1 || status === 3 ? <img src={PlayImg} alt="" /> : null}
-          {TagName[status]}
-        </div>
-      </div>
+     
       <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}>
-            <Icon type="web_icon_shijian_fill" className={style['time-icon']} />
+          <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(endTime).format('HH:mm')}`}
-              </>
+              `${dayjs(beginTime).format('YYYY/MM/DD HH:mm')}`
             ) : (
-              <>
-                {dayjs(beginTime).format('YYYY/MM/DD HH:mm')}
-                开始
-              </>
+                `${dayjs(beginTime).format('YYYY/MM/DD HH:mm')} 开始`
             )}
 
             <div className={style.like_sty}>
@@ -100,9 +107,9 @@ export default function ListItem({
                 <img src={dianZan} alt="" />
                 {formatLikesCount(liveExt.like_count || 0)}
               </div>
-            </div>
+            </div> 
           </div>
-          <div>
+          {status === 0?
             <Action
               data={data}
               subscription={subscription}
@@ -110,10 +117,21 @@ export default function ListItem({
               handleLogin={handleLogin}
               isLogin={isLogin}
               onSubscribe={onSubscribe}
-            />
-          </div>
+              setIsSubscribe={setIsSubscribe}
+            />:''}
         </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>
   )
 }