From 1f84e3a682adf4359bf33849c65364a6ccb935bf Mon Sep 17 00:00:00 2001 From: mozzie Date: Wed, 1 Mar 2023 15:24:27 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AF=BE=E7=A8=8B=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-main/package.json | 3 +- .../web-main/src/components/Player/index.less | 70 +- apps/web-main/src/components/Player/index.tsx | 19 +- apps/web-main/src/router/index.tsx | 6 + apps/web-main/src/view/Course/index.tsx | 17 +- apps/web-main/src/view/Course/mock.ts | 15 + .../web-main/src/view/CourseDetail/index.less | 57 + apps/web-main/src/view/CourseDetail/index.tsx | 81 ++ pnpm-lock.yaml | 999 +++++++++++------- 9 files changed, 833 insertions(+), 434 deletions(-) create mode 100644 apps/web-main/src/view/CourseDetail/index.less create mode 100644 apps/web-main/src/view/CourseDetail/index.tsx diff --git a/apps/web-main/package.json b/apps/web-main/package.json index 5429463..d4bd610 100644 --- a/apps/web-main/package.json +++ b/apps/web-main/package.json @@ -16,7 +16,8 @@ "@arco-design/web-react": "2.45.0", "@ricons/fluent": "0.12.0", "@ricons/utils": "0.1.6", - "dayjs": "1.11.7" + "dayjs": "1.11.7", + "identicon": "3.1.1" }, "devDependencies": { "@types/react": "^18.0.27", diff --git a/apps/web-main/src/components/Player/index.less b/apps/web-main/src/components/Player/index.less index 5e3e7e4..8d17a14 100644 --- a/apps/web-main/src/components/Player/index.less +++ b/apps/web-main/src/components/Player/index.less @@ -1,37 +1,55 @@ -.player-container { - height: 720px; - - .vjs-button-icon-custom { - cursor: pointer; - > svg { - transition: all 0.25s; - color: rgba(37, 41, 47, 0.2); - &:hover { - color: rgba(37, 41, 47, 1); - } +.vjs-button-icon-custom { + cursor: pointer; + > svg { + transition: all 0.25s; + color: rgba(37, 41, 47, 0.2); + &:hover { + color: rgba(37, 41, 47, 1); } } +} - .tcp-skin .vjs-control-bar { - transform: translateY(39px) !important; - // background: rgb(0, 0, 0, 0.777) !important; - background: rgba(37, 41, 47, 1) !important; +.tcp-skin .vjs-control-bar { + // transform: translateY(39px) !important; + // background: rgb(0, 0, 0, 0.777) !important; + background: rgba(37, 41, 47, 0.3) !important; +} + +// 进度条颜色 +.tcp-skin .vjs-play-progress { +} + +.video-js .vjs-progress-control .vjs-progress-holder { + margin: 0 !important; +} + +.tcp-skin .vjs-progress-control { + .vjs-load-progress > div { + left: 0 !important; } .video-js .vjs-progress-control .vjs-progress-holder { margin: 0 !important; - } - - .tcp-skin .vjs-progress-control { - .vjs-load-progress > div { - left: 0 !important; - } - - .video-js .vjs-progress-control .vjs-progress-holder { + .video-js .vjs-slider { margin: 0 !important; - .video-js .vjs-slider { - margin: 0 !important; - } } } } + +// 圆角 + +.vjs-poster, +.video-js { + border-radius: 10px !important; + video { + border-radius: 10px !important; + } +} + +.video-js { + box-shadow: 0 0 100px #c8c8c8 !important; +} + +.vjs-control-bar { + border-radius: 0 0 10px 10px !important; +} diff --git a/apps/web-main/src/components/Player/index.tsx b/apps/web-main/src/components/Player/index.tsx index 16d5067..0f31b9c 100644 --- a/apps/web-main/src/components/Player/index.tsx +++ b/apps/web-main/src/components/Player/index.tsx @@ -6,11 +6,12 @@ interface IVideo { fileID: string; appID: string; psign?: string; + className?: string; } /** * demo页面:https://tcplayer.vcube.tencent.com/ - * + * * 如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频, 需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。 * 有些浏览器环境不支持 Webrtc,播放器会将 Webrtc 流地址自动转换为 HLS 格式地址,因此快直播场景同样需要引入hls.min.x.xx.xm.js。 *