@x-edu/live-player 0.0.19 → 0.0.21

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

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

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

@@ -1,22 +1,22 @@
-.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;
+}
+
+.action-subscribe {
+  background: #1E62EC;
+  color: #fff;
+}
+
+.action-has-subscribe {
+  border: 1px solid #B7CCF9;
+  color: #B7CCF9
 }

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

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

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/yiguankan.svg

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

package/src/list/ListItem/index.jsx

@@ -1,11 +1,15 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import classNames from 'classnames'
 import Avatar from '@/component/Avatar'
 import Icon from '@/component/Icon'
 import Action from './Action'
+import { formatLikesCount, formatUVCount } from '@/util/liveCountUtil'
+import { getResourceLikes } from '@/service/like'
 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 style from './index.module.less'
 
 const TagName = {
@@ -32,6 +36,14 @@ export default function ListItem({
     status
   } = data
 
+  const [liveExt, setLiveExt] = useState({})
+  useEffect(() => {
+    (async () => {
+      const res = await getResourceLikes(liveId)
+      setLiveExt(res || {})
+    })()
+  }, [])
+
   const handleDetailClick = async () => {
     if (data.login && !isLogin) {
       handleLogin(data)
@@ -78,6 +90,17 @@ export default function ListItem({
                 开始
               </>
             )}
+
+            <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>
           <div>
             <Action

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

@@ -1,123 +1,146 @@
-.container {
-  padding: 24px 0;
-  margin: 0 24px;
-  display: flex;
-  justify-content: flex-start;
-  border-top: 1px solid #eee;
-  cursor: pointer;
-
-  &:first-child {
-    border-top: none;
-  }
-
-  .left {
-    margin-right: 24px;
-    border-radius: 8px;
-    position: relative;
-
-    .avatar {
-      width: 204px;
-      height: 120px;
-      border-radius: 4px;
-      object-fit: cover;
-    }
-
-    .tag {
-      position: absolute;
-      top: 0px;
-      border-radius: 4px 0px;
-      font-size: 12px;
-      line-height: 12px;
-      height: 20px;
-      padding: 0 8px;
-      display: flex;
-      align-items: center;
-      color: #fff;
-    }
-
-    .tag0 { // 预告
-      background-color: #FF7826;
-    }
-
-    .tag1, .tag3 { // 直播中
-      background-color: #1E62EC;
-      padding: 0 5px;
-
-      img {
-        transform: rotate(180deg);
-        height: 10px;
-        width: 10px;
-        margin-right: 5px;
-      }
-    }
-
-    .tag2 { // 回放
-      background-color: rgba(0, 0, 0, 0.60);
-    }
-  }
-
-  .right {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    width: calc(100% - 228px);
-
-    &-top {
-      .title {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        word-wrap: break-word;
-        line-height: 28px;
-        -webkit-line-clamp: 2;
-        font-size: 20px;
-        font-weight: 600;
-        color: #333;
-      }
-    }
-
-    &-bottom {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .time {
-        font-size: 14px;
-        color: #999;
-        display: flex;
-        align-items: center;
-        &-icon {
-          width: 16px;
-          height: 16px;
-          color: #ccc;
-          margin-right: 4px;
-        }
-      }
-    }
-  }
-}
-
-.container:hover {
-  .title {
-    color: #1E62EC;
-  }
-}
-
-.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;
-}
+.container {
+  padding: 24px 0;
+  margin: 0 24px;
+  display: flex;
+  justify-content: flex-start;
+  border-top: 1px solid #eee;
+  cursor: pointer;
+
+  &:first-child {
+    border-top: none;
+  }
+
+  .left {
+    margin-right: 24px;
+    border-radius: 8px;
+    position: relative;
+
+    .avatar {
+      width: 204px;
+      height: 120px;
+      border-radius: 4px;
+      object-fit: cover;
+    }
+
+    .tag {
+      position: absolute;
+      top: 0px;
+      border-radius: 4px 0px;
+      font-size: 12px;
+      line-height: 12px;
+      height: 20px;
+      padding: 0 8px;
+      display: flex;
+      align-items: center;
+      color: #fff;
+    }
+
+    .tag0 { // 预告
+      background-color: #FF7826;
+    }
+
+    .tag1, .tag3 { // 直播中
+      background-color: #1E62EC;
+      padding: 0 5px;
+
+      img {
+        transform: rotate(180deg);
+        height: 10px;
+        width: 10px;
+        margin-right: 5px;
+      }
+    }
+
+    .tag2 { // 回放
+      background-color: rgba(0, 0, 0, 0.60);
+    }
+  }
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: calc(100% - 228px);
+
+    &-top {
+      .title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        word-wrap: break-word;
+        line-height: 28px;
+        -webkit-line-clamp: 2;
+        font-size: 20px;
+        font-weight: 600;
+        color: #333;
+      }
+    }
+
+    &-bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .time {
+        font-size: 14px;
+        color: #999;
+        display: flex;
+        align-items: center;
+        &-icon {
+          width: 16px;
+          height: 16px;
+          color: #ccc;
+          margin-right: 4px;
+        }
+      }
+      .like_sty {
+        color: rgba(204, 204, 204, 1);
+        display: flex;
+        align-items: center;
+        margin-left: 40px;
+        .icon_bottom {
+          margin-right: 30px;
+          font-family: PingFang SC;
+          font-size: 12px;
+          font-weight: 400;
+          letter-spacing: 0px;
+          text-align: left;
+          display: flex;
+          align-items: center;
+
+          img {
+            width: 14px;
+            height: 14px;
+            margin-right: 5px;
+            color: rgba(204, 204, 204, 1);
+          }
+        }
+      }
+    }
+  }
+}
+
+.container:hover {
+  .title {
+    color: #1E62EC;
+  }
+}
+
+.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;
+}