@x-edu/live-player 0.0.1-0.beta.1

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

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

@@ -0,0 +1,77 @@
+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
+}
+
+export default function Action({
+  data,
+  subscription,
+  onActionDetailClick,
+  handleLogin,
+  isLogin
+}) {
+  const { status, live_id: liveId, begin_time: beginTime } = data
+  const [curAction, setCurAction] = useState(() => {
+    let actionNum
+    if (status === 1) {
+      actionNum = 1
+    } else if (status === 2) {
+      actionNum = 2
+    } else { // status = 0
+      // 未预约，且开播15分钟前提供预约按钮，其他直接进入直播
+      const subscriptionItem = find(subscription, {
+        live_id: liveId
+      })
+      const now = new Date().getTime()
+      const begin = new Date(beginTime).getTime()
+      if (subscriptionItem?.is_subscribe) { // 已经预约
+        actionNum = 1
+      } else if (begin > now && (begin - now) < 15 * 60 * 1000) { // 未预约，且距离开播15分钟以内
+        actionNum = 1
+      } 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('预约成功')
+        setCurAction(1)
+      } catch (error) {
+        message.error(error?.response?.data?.message || '预约失败，请稍后重试')
+      }
+    } else {
+      onActionDetailClick()
+    }
+  }
+
+  return (
+    <div
+      className={classNames(style.action, {
+        [style['action-subscribe']]: curAction === 3
+      })}
+      onClick={handleBtnClick}
+    >
+      {Actions[curAction]}
+    </div>
+  )
+}

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

@@ -0,0 +1,17 @@
+.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/ListItem/img/play.svg

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

package/src/list/ListItem/index.jsx

@@ -0,0 +1,94 @@
+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
+}) {
+  const {
+    live_id: liveId,
+    live_name: liveName,
+    begin_time: beginTime,
+    end_time: endTime,
+    cover_pic_web_url: coverPicWebUrl,
+    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={coverPicWebUrl}
+          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}
+            />
+          </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,148 @@
+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 = () => {}
+}) {
+  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}
+                          />
+                        ))}
+                        <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/common.js

@@ -0,0 +1,73 @@
+import { getJobTitles } from './school'
+import rawAPI from '@/config/request/raw'
+
+/* 数据字典：获取职称 */
+export async function getJobTitle() {
+  const data = await getJobTitles()
+  return {
+    data
+  }
+  // const url = '/studio/configs/dictionary/job_title.json'
+  // return getCdnHotAPI().get(url)
+}
+
+/* 数据字典：获取身份证类型 */
+export async function getCardType() {
+  // const url = '/studio/configs/dictionary/card_type.json'
+  // return getCdnHotAPI().get(url)
+  const resp = await rawAPI.get('https://bdcs-file-1.ykt.cbern.com.cn/bdxcloud/configs/card_type.json')
+  return resp
+}
+
+/** 数据字典：获取性别 */
+export async function getGender() {
+  const res = await rawAPI.get('https://bdcs-file-1.ykt.cbern.com.cn/bdxcloud/configs/gender.json')
+  return res.data
+}
+
+/**
+ * 获取民族字典
+ * @returns
+ */
+export async function getMinzu() {
+  const res = await rawAPI.get('https://bdcs-file-1.ykt.cbern.com.cn/bdxcloud/configs/national.json')
+  return res.data
+}
+
+/**
+ * 获取最高学历字典
+ * @returns
+ */
+export async function getDegree() {
+  const res = await rawAPI.get('https://bdcs-file-1.ykt.cbern.com.cn/bdxcloud/configs/degree.json')
+  return res.data
+}
+
+/**
+ * 获取政治面貌字典
+ * @returns
+ */
+export async function getPoliticalStatus() {
+  const res = await rawAPI.get('https://bdcs-file-1.ykt.cbern.com.cn/bdxcloud/configs/political_status.json')
+  return res.data
+}
+// 获取荣誉
+export async function getHonor() {
+  const res = await rawAPI.get('https://bdcs-file-1.ykt.cbern.com.cn/bdxcloud/configs/teacher_honor.json')
+  return res.data
+}
+
+/**
+ * 是否心理健康教育教师
+ * @returns
+ */
+export async function getMentalHealthTeacher() {
+  const res = await rawAPI.get('https://bdcs-file-1.ykt.cbern.com.cn/bdxcloud/configs/employment_type.json')
+  return res.data
+}
+
+/** 数据字典：获取性别 */
+export async function getAreaInfoMap() {
+  const res = await rawAPI.get('https://bdcs-file-2.ykt.cbern.com.cn/bdxcloud/configs/rank_area_info.json')
+  return res.data
+}

package/src/service/content-mgr.js

@@ -0,0 +1,73 @@
+/** @format */
+
+import ContentMgrApi from '@/config/request/content-mgr-web'
+
+export const getDocument = async (id) => {
+  const url = `/v1/proxy/documents/${id}?r=${Math.random()}`
+  const { data } = await ContentMgrApi.get(url)
+  return data
+}
+
+export const getVedio = async (id) => {
+  const url = `/v1/proxy/videos/${id}?r=${Math.random()}`
+  const { data } = await ContentMgrApi.get(url)
+  return data
+}
+
+export const getVedioUrls = async (id) => {
+  const url = `/v1/proxy/videos/${id}/urls?r=${Math.random()}`
+  const { data } = await ContentMgrApi.get(url)
+  return data
+}
+
+/**
+ * 创建content_mgr
+ * @param {string} type 类型:x_audio_video,x_document
+ * @param {Object} content 内容
+ */
+export const createContent = async (type, content) => {
+  const url = `/v1/content_types/${type}/contents?r=${Math.random()}`
+  const res = await ContentMgrApi.post(url, content)
+  return res?.data
+}
+
+export const getContent = async (contentType, id) => {
+  const url = `/v1/content_types/${contentType}/contents/${id}?r=${Math.random()}`
+  const res = await ContentMgrApi.get(url)
+  return res?.data
+}
+
+export const getContentDetail = async (type, id) => {
+  const url = `/v1/content_types/${type}/contents/${id}?r=${Math.random()}`
+  const res = await ContentMgrApi.get(url)
+  return res?.data
+  // await ContentMgrApi.get(`/v1/content_types/${type}/contents/${id}`, {
+  //   headers: {
+  //     'sdp-app-id': appid
+  //   }
+  // })
+}
+
+export const updateContent = async (type, id, body) => {
+  const url = `/v1/content_types/${type}/contents/${id}?r=${Math.random()}`
+  const res = await ContentMgrApi.put(url, body)
+  return res?.data
+}
+
+export const putOnline = async (id) => {
+  const url = `/v1/spi/contents/${id}/online?r=${Math.random()}`
+  const res = await ContentMgrApi.put(url)
+  return res?.data
+}
+
+export const putOffline = async (id) => {
+  const url = `/v1/spi/contents/${id}/offline?r=${Math.random()}`
+  const res = await ContentMgrApi.put(url)
+  return res?.data
+}
+
+export const deleteContent = async (id) => {
+  const url = `/v1/spi/contents/${id}?r=${Math.random()}`
+  const res = await ContentMgrApi.delete(url)
+  return res?.data
+}

package/src/service/im-group.js

@@ -0,0 +1,12 @@
+import { imGroupWithUC } from '@/config/request/imGroup'
+
+/* 获取群头像内容服务上传token */
+export async function getCSToken(id, params) {
+  const response = await imGroupWithUC.post(`/groups/${id}/upload_token/avatar`, params)
+  return response.data
+}
+
+/* 客户端上传群头像成功通知 */
+export function avatarUploadOk(id) {
+  return imGroupWithUC.patch(`/groups/${id}/avatar_uploadOk`)
+}