@x-edu/live-player 0.0.10 → 0.0.12

package/src/list/ListItem/index.jsx

@@ -0,0 +1,95 @@
+import React 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 DefaultCover from './img/live.png'
+import PlayImg from './img/play.svg'
+import style from './index.module.less'
+
+const TagName = {
+  0: '预告',
+  1: '直播中',
+  2: '回放'
+}
+
+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 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.left}>
+        <Avatar
+          src={coverUrl || DefaultCover}
+          errorImg={DefaultCover}
+          className={style.avatar}
+        />
+        <div className={classNames(style.tag, style[`tag${status}`])}>
+          {status === 1 ? <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']} />
+            {status === 2 ? (
+              <>
+                {`${dayjs(beginTime).format('YYYY/MM/DD HH:mm')}-${dayjs(endTime).format('HH:mm')}`}
+              </>
+            ) : (
+              <>
+                {dayjs(beginTime).format('YYYY/MM/DD HH:mm')}
+                开始
+              </>
+            )}
+          </div>
+          <div>
+            <Action
+              data={data}
+              subscription={subscription}
+              onActionDetailClick={handleDetailClick}
+              handleLogin={handleLogin}
+              isLogin={isLogin}
+              onSubscribe={onSubscribe}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,123 @@
+.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 { // 直播中
+      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;
+}

package/src/list/index.jsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react'
+import classNames from 'classnames'
+import { Tabs } from 'fish'
+import { OpenLiveSearchFront, getSubscription } from '@/service/live'
+import { setUC } from '@/util/auth/func'
+import config from '@/config/env'
+import Loading from '@/component/status/Loading'
+import Empty from './Empty'
+import Pagination from '@/component/Pagination'
+import ListItem from './ListItem'
+import style from './index.module.less'
+
+const PageSize = 7
+
+const StatusEnum = [
+  {
+    label: '全部',
+    value: 'all'
+  },
+  {
+    label: '直播中',
+    value: 1
+  },
+  {
+    label: '预告',
+    value: 0
+  },
+  {
+    label: '回放',
+    value: 2
+  }
+]
+
+export default function PublicLiveList({
+  scopeType,
+  scopeId,
+  containerClassName,
+  uc,
+  loginInfo,
+  sdpAppId: propSdpAppId,
+  onDetailClick,
+  handleLogin = () => {},
+  onSubscribe = () => {}
+}) {
+  setUC(uc, loginInfo?.userInfo)
+  if (propSdpAppId) {
+    config.app.appid = propSdpAppId
+  }
+
+  const [list, setList] = useState([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [page, setPage] = useState(1)
+  const [status, setStatus] = useState('all')
+  const [subscription, setSubscription] = useState([])
+  const [isLogin, setIsLogin] = useState(false)
+
+  const handleTabChange = (value) => {
+    setStatus(value)
+    setPage(1)
+  }
+
+  const handlePageChange = (value) => {
+    setPage(value)
+  }
+
+  // 分页获取直播列表
+  useEffect(() => {
+    async function getList() {
+      setLoading(true)
+      const data = await OpenLiveSearchFront({
+        status,
+        scopeType,
+        scopeId,
+        offset: (page - 1) * PageSize,
+        limit: PageSize
+      })
+      const { items, count } = data
+      if (uc) {
+        const curIsLogin = await uc.isLogin()
+        if (curIsLogin) {
+          const curSubscription = await getSubscription()
+          setSubscription(curSubscription)
+          setIsLogin(true)
+        }
+      }
+      setList(items)
+      setTotal(count)
+      setLoading(false)
+    }
+    getList()
+  }, [page, status])
+
+  return (
+    <div
+      className={classNames(
+        containerClassName,
+        style.container
+      )}
+    >
+      <Tabs
+        accessKey={status}
+        onChange={handleTabChange}
+      >
+        {StatusEnum.map((item) => (
+          <Tabs.TabPane
+            key={item.value}
+            tab={item.label}
+          >
+            <Loading
+              loading={loading}
+            >
+              <div className={style.list}>
+                {loading ? null : (
+                  <>
+                    {!loading && list.length ? (
+                      <>
+                        {list.map((listItem) => (
+                          <ListItem
+                            data={listItem}
+                            key={listItem.live_id}
+                            subscription={subscription}
+                            onDetailClick={onDetailClick}
+                            handleLogin={handleLogin}
+                            isLogin={isLogin}
+                            onSubscribe={onSubscribe}
+                          />
+                        ))}
+                        <Pagination
+                          total={total}
+                          pageSize={PageSize}
+                          current={page}
+                          onChange={handlePageChange}
+                        />
+                      </>
+                    ) : (
+                      <Empty
+                        tip="暂无内容"
+                      />
+                    )}
+                  </>
+                )}
+              </div>
+            </Loading>
+          </Tabs.TabPane>
+        ))}
+      </Tabs>
+    </div>
+  )
+}

package/src/list/index.module.less

@@ -0,0 +1,36 @@
+.container {
+  max-width: 1300px;
+  margin: 0 auto;
+  padding: 24px 24px 0px 24px;
+  width: 956px;
+
+  :global {
+    .fish-tabs-nav {
+      margin-bottom: 24px;
+    }
+    .fish-tabs-nav::before {
+      display: none;
+    }
+    .fish-tabs-ink-bar {
+      display: none;
+    }
+    .fish-tabs-tab + .fish-tabs-tab {
+      margin-left: 0px;
+    }
+    .fish-tabs-tab {
+      padding: 9px 20px;
+    }
+    .fish-tabs-tab-btn {
+      font-size: 14px;
+      line-height: 14px;
+      color: #666
+    }
+    .fish-tabs-tab-active {
+      border-radius: 16px;
+      background: var(--f-3-f-7-ff, #F3F7FF);
+      .fish-tabs-tab-btn {
+        color: #1E62EC;
+      }
+    }
+  }
+}

package/src/service/live.js

@@ -234,3 +234,60 @@ export async function getLiveInfo(ids) {
   return result.map((res) => res.data)
   // return result?.data || {}
 }
+
+/**
+ * 查询直播列表-前台
+ */
+export async function OpenLiveSearchFront({
+  status,
+  scopeType,
+  scopeId,
+  offset,
+  limit
+}) {
+  try {
+    const url = '/v1/open_class_lives/search_front'
+    const response = await proxyApi.get(url, {
+      params: {
+        status: status === 'all' ? undefined : status,
+        scope_type: scopeType,
+        scope_id: scopeId,
+        offset,
+        limit
+      }
+    })
+    return response?.data || {
+      count: 0,
+      items: []
+    }
+  } catch (_) {
+    return {
+      count: 0,
+      items: []
+    }
+  }
+}
+
+/**
+ * 获取预约直播
+ */
+export async function getSubscription() {
+  try {
+    const url = '/v1/open_class_lives/actions/get_subscription'
+    const response = await liveActivityAPI.get(url)
+    return response.data
+  } catch (_) {
+    return []
+  }
+}
+
+/**
+ * 预约直播
+ */
+export async function openLiveSubscribe({
+  liveId
+}) {
+  const url = `/v1/open_class_lives/${liveId}/actions/subscribe`
+  const response = await liveActivityAPI.post(url)
+  return response?.data
+}