feat 课程播放

.umirc.ts

@@ -22,13 +22,20 @@ export default defineConfig({
       }]
     },
     {
-      name: '课堂录播',
       path: '/record',
       component: './Record',
       custom: [{
         label: '课堂录播', key: '/record'
       }]
     },
+    {
+      name: '课程播放',
+      path: '/play',
+      component: './Play',
+      custom: [{
+        label: '课程播放', key: '/play'
+      }]
+    },
   ],
   npmClient: 'pnpm',
 });

package.json

@@ -16,7 +16,9 @@
     "@ant-design/pro-list": "^2.6.7",
     "@ant-design/pro-table": "^3.19.0",
     "@umijs/max": "^4.4.11",
-    "antd": "^5.4.0"
+    "antd": "^5.4.0",
+    "dayjs": "^1.11.13",
+    "react-player": "^2.16.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.33",

pnpm-lock.yaml

@@ -23,6 +23,12 @@ dependencies:
   antd:
     specifier: ^5.4.0
     version: 5.25.2(react-dom@18.3.1)(react@18.3.1)
+  dayjs:
+    specifier: ^1.11.13
+    version: 1.11.13
+  react-player:
+    specifier: ^2.16.0
+    version: 2.16.0(react@18.3.1)
 
 devDependencies:
   '@types/react':
@@ -7799,6 +7805,10 @@ packages:
       wrap-ansi: 8.1.0
     dev: true
 
+  /load-script@1.0.0:
+    resolution: {integrity: sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==}
+    dev: false
+
   /loader-runner@4.3.0:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
@@ -7961,6 +7971,10 @@ packages:
       fs-monkey: 1.0.6
     dev: false
 
+  /memoize-one@5.2.1:
+    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+    dev: false
+
   /meow@9.0.0:
     resolution: {integrity: sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==}
     engines: {node: '>=10'}
@@ -10457,6 +10471,19 @@ packages:
     resolution: {integrity: sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==}
     dev: false
 
+  /react-player@2.16.0(react@18.3.1):
+    resolution: {integrity: sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      deepmerge: 4.3.1
+      load-script: 1.0.0
+      memoize-one: 5.2.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-fast-compare: 3.2.2
+    dev: false
+
   /react-redux@5.1.2(react@18.3.1)(redux@3.7.2):
     resolution: {integrity: sha512-Ns1G0XXc8hDyH/OcBHOxNgQx9ayH3SPxBnFCOidGKSle8pKihysQw2rG/PmciUQRoclhVBO8HMhiRmGXnDja9Q==}
     peerDependencies:

src/layouts/index.tsx

@@ -1,12 +1,11 @@
 import { CollaspedType } from '@/types/LayoutType';
 import { Outlet, useModel } from '@umijs/max';
-import {Avatar, Layout, Popover, Tabs} from 'antd';
+import {Avatar, Layout, Popover} from 'antd';
 import { Header } from 'antd/es/layout/layout';
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import SideMenu from './SideMenu';
 import UserPopover from './UserPopContent';
 import './styles/index.less';
-import {history, useLocation, useRouteProps} from "@@/exports";
 const { Sider, Content } = Layout;
 
 const contentStyle: React.CSSProperties = {
@@ -31,15 +30,6 @@ const layoutStyle = {
 const App: React.FC = () => {
   const [menuWidth] = useState(CollaspedType.OPEN);
   const { userInfo } = useModel('global');
-  const routeProps = useRouteProps();
-  const location = useLocation();
-  const [selectedKeys, setSelectedKeys] = useState(location.pathname);
-
-  useEffect(() => {
-    if(location.pathname) {
-      setSelectedKeys(location.pathname);
-    }
-  }, [location.pathname]);
   return (
     <Layout style={layoutStyle}>
       <Sider theme="light" width={menuWidth} style={siderStyle}>
@@ -60,14 +50,6 @@ const App: React.FC = () => {
           </Popover>
         </Header>
         <Content style={contentStyle}>
-          <Tabs
-            tabBarStyle={{ backgroundColor: '#fff', padding: '5px 20px 0' }}
-            defaultActiveKey={selectedKeys}
-            items={routeProps.custom}
-            onChange={(e) => {
-              history.push(e);
-            }}
-          />
           <Outlet />
         </Content>
       </Layout>

src/pages/Play/index.tsx

@@ -0,0 +1,40 @@
+import {
+  PageContainer,
+} from '@ant-design/pro-components';
+import React from 'react';
+import './style/index.less';
+import { Card } from 'antd';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import './style/index.less'
+// import ReactPlayer from 'react-player'
+
+const TableList: React.FC<unknown> = () => {
+  return (
+    <PageContainer className="page-box">
+      <Card style={{ marginInline: 20, marginTop: 10 }}>
+        <div className={'header-box'}>
+          <div>
+            <a
+              onClick={() => {
+                history.go(-1)
+              }}
+            >
+              <ArrowLeftOutlined />课程播放
+            </a>
+          </div>
+          <div className={'header-right-box'}>
+            <div>授课学科: 数学</div>
+            <div>授课章节: 第一课第一节</div>
+            <div>所属学校: 杭州市滨江区市一中</div>
+            <div>所属年级: 初一</div>
+            <div>授课老师: 张三</div>
+            <div>授课时间: {dayjs().format('YYYY-MM-DD hh:mm:ss')}</div>
+          </div>
+        </div>
+      </Card>
+    </PageContainer>
+  )
+};
+
+export default TableList;

src/pages/Play/style/index.less

@@ -0,0 +1,11 @@
+.page-box {
+  .header-box {
+    display: flex;
+    .header-right-box {
+      padding: 0 20px;
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}

src/pages/Record/index.tsx

@@ -1,15 +1,28 @@
 import {
   PageContainer,
 } from '@ant-design/pro-components';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ProList from '@ant-design/pro-list';
-import { Image } from 'antd';
+import { Image, Tabs } from 'antd';
 import './style/index.less';
 import CourseImage from '@/assets/img/course_image.png';
+import { history } from "@umijs/max";
+import { useLocation, useRouteProps } from '@@/exports';
 
 const TableList: React.FC<unknown> = () => {
+  const routeProps = useRouteProps();
+  const location = useLocation();
+  const [selectedKeys, setSelectedKeys] = useState(location.pathname);
+
+  useEffect(() => {
+    if(location.pathname) {
+      setSelectedKeys(location.pathname);
+    }
+  }, [location.pathname]);
+
   const data = [
     {
+      lessonId: '1',
       image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
       courseName: '这是课程名称',
       gradeSubjectName: '高中数学',
@@ -19,6 +32,7 @@ const TableList: React.FC<unknown> = () => {
       classRoom: '高一4班'
     },
     {
+      lessonId: '2',
       image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
       courseName: '这是课程名称',
       gradeSubjectName: '高中数学',
@@ -28,6 +42,7 @@ const TableList: React.FC<unknown> = () => {
       classRoom: '高一4班'
     },
     {
+      lessonId: '3',
       image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
       courseName: '这是课程名称',
       gradeSubjectName: '高中数学',
@@ -37,6 +52,7 @@ const TableList: React.FC<unknown> = () => {
       classRoom: '高一4班'
     },
     {
+      lessonId: '4',
       image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
       courseName: '这是课程名称',
       gradeSubjectName: '高中数学',
@@ -46,6 +62,7 @@ const TableList: React.FC<unknown> = () => {
       classRoom: '高一4班'
     },
     {
+      lessonId: '5',
       image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
       courseName: '这是课程名称',
       gradeSubjectName: '高中数学',
@@ -55,6 +72,7 @@ const TableList: React.FC<unknown> = () => {
       classRoom: '高一4班'
     },
     {
+      lessonId: '6',
       image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
       courseName: '这是课程名称',
       gradeSubjectName: '高中数学',
@@ -64,6 +82,7 @@ const TableList: React.FC<unknown> = () => {
       classRoom: '高一4班'
     },
     {
+      lessonId: '7',
       image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
       courseName: '这是课程名称',
       gradeSubjectName: '高中数学',
@@ -73,6 +92,7 @@ const TableList: React.FC<unknown> = () => {
       classRoom: '高一4班'
     },
     {
+      lessonId: '1',
       image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
       courseName: '这是课程名称',
       gradeSubjectName: '高中数学',
@@ -82,6 +102,7 @@ const TableList: React.FC<unknown> = () => {
       classRoom: '高一4班'
     },
     {
+      lessonId: '9',
       image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
       courseName: '这是课程名称',
       gradeSubjectName: '高中数学',
@@ -91,6 +112,7 @@ const TableList: React.FC<unknown> = () => {
       classRoom: '高一4班'
     },
     {
+      lessonId: '10',
       image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
       courseName: '这是课程名称',
       gradeSubjectName: '高中数学',
@@ -100,6 +122,7 @@ const TableList: React.FC<unknown> = () => {
       classRoom: '高一4班'
     },
     {
+      lessonId: '11',
       image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
       courseName: '这是课程名称',
       gradeSubjectName: '高中数学',
@@ -112,6 +135,11 @@ const TableList: React.FC<unknown> = () => {
 
   return (
     <PageContainer className="page-box">
+      <Tabs
+        tabBarStyle={{ backgroundColor: '#fff', padding: '5px 20px 0' }}
+        items={routeProps.custom}
+        defaultActiveKey={selectedKeys}
+      />
       <ProList<any>
         search={{}}
         className="table-box"
@@ -128,7 +156,12 @@ const TableList: React.FC<unknown> = () => {
           };
         }}
         renderItem={(item) => (
-          <div style={{ backgroundColor: '#F8FAFC', cursor: 'pointer' }}>
+          <div
+            style={{ backgroundColor: '#F8FAFC', cursor: 'pointer' }}
+            onClick={() => {
+              history.push('/play?id=' + item.lessonId);
+            }}
+          >
             <Image
               width={'100%'}
               style={{ aspectRatio: '16/9', borderRadius: '15px 15px 0 0' }}