From cdd17b3bd64d376d8b381a79779b96bc1070c470 Mon Sep 17 00:00:00 2001
From: mozzie <himozzie@foxmail.com>
Date: Mon, 27 Feb 2023 18:01:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20react-alipalyer=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-main/src/components/Card/index.less  | 26 ++++++++++++++
 apps/web-main/src/components/Card/index.tsx   | 36 +++++++++++++++++++
 apps/web-main/src/components/Nav/index.less   |  2 +-
 apps/web-main/src/components/Player/index.tsx | 20 ++++++++++-
 apps/web-main/src/view/Course/index.tsx       | 25 ++++++++++++-
 5 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 apps/web-main/src/components/Card/index.less
 create mode 100644 apps/web-main/src/components/Card/index.tsx

diff --git a/apps/web-main/src/components/Card/index.less b/apps/web-main/src/components/Card/index.less
new file mode 100644
index 0000000..aaf5726
--- /dev/null
+++ b/apps/web-main/src/components/Card/index.less
@@ -0,0 +1,26 @@
+.bs-card {
+  .arco-card-body {
+    padding: 10px;
+  }
+  .mask {
+    height: 164px;
+    background-color: rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+    .cover {
+      height: 100%;
+      background-size: cover;
+    }
+  }
+  .bottom-des {
+    display: flex;
+    justify-content: space-between;
+    span {
+      flex: 1;
+      color: var(--color-text-3);
+    }
+    a {
+      cursor: pointer;
+      color: rgb(var(--primary-6));
+    }
+  }
+}
diff --git a/apps/web-main/src/components/Card/index.tsx b/apps/web-main/src/components/Card/index.tsx
new file mode 100644
index 0000000..77d4ae0
--- /dev/null
+++ b/apps/web-main/src/components/Card/index.tsx
@@ -0,0 +1,36 @@
+import { Card } from "@arco-design/web-react";
+import { url } from "inspector";
+import "./index.less";
+const { Meta } = Card;
+
+function BsCard() {
+  return (
+    <Card
+      className="bs-card"
+      hoverable
+      style={{ width: 360 }}
+      cover={
+        <div className="mask">
+          <div
+            className="cover"
+            style={{
+              backgroundImage:
+                "url('//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp')",
+            }}
+          ></div>
+        </div>
+      }
+    >
+      <Meta
+        description={
+          <div className="bottom-des">
+            <span>card description</span>
+            <a>Go</a>
+          </div>
+        }
+      />
+    </Card>
+  );
+}
+
+export default BsCard;
diff --git a/apps/web-main/src/components/Nav/index.less b/apps/web-main/src/components/Nav/index.less
index 1145046..de52543 100644
--- a/apps/web-main/src/components/Nav/index.less
+++ b/apps/web-main/src/components/Nav/index.less
@@ -2,7 +2,7 @@ header {
   position: fixed;
   left: 0;
   right: 0;
-  z-index: 1994;
+  z-index: 19;
   height: 60px;
   background: #24292f;
   color: #d7d7d7;
diff --git a/apps/web-main/src/components/Player/index.tsx b/apps/web-main/src/components/Player/index.tsx
index d9e987b..16d5067 100644
--- a/apps/web-main/src/components/Player/index.tsx
+++ b/apps/web-main/src/components/Player/index.tsx
@@ -1,12 +1,23 @@
+import { useRef } from "react";
 import { useLink, useMount, useScript } from "../../hook";
 import "./index.less";
 
+interface IVideo {
+  fileID: string;
+  appID: string;
+  psign?: 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。
  * <video objectFill /> fill填满变形，cover等比例会裁剪, contain等比例有黑边
  */
 function Player() {
+  const playerRef = useRef<any>();
+
   useLink(["/player/tcplayer_pure.min.css"]);
   useScript(
     ["/player/libs/hls.min.0.13.2m.js", "/player/tcplayer.v4.7.2.min.js"],
@@ -28,7 +39,7 @@ function Player() {
         );
         return el;
       };
-      const player = TCPlayer("player", {
+      playerRef.current = TCPlayer("player", {
         fileID: "243791579995468466",
         appID: "1500018521",
         //私有加密播放需填写 psign， psign 即播放器签名，签名介绍和生成方式参见链接：https://cloud.tencent.com/document/product/266/42436
@@ -37,6 +48,13 @@ function Player() {
     }
   );
 
+  /**
+   * 切换视频
+   */
+  const changeVideo = (video: IVideo) => {
+    playerRef.current!.loadVideoByID({ ...video });
+  };
+
   return (
     <div className="player-container">
       <video
diff --git a/apps/web-main/src/view/Course/index.tsx b/apps/web-main/src/view/Course/index.tsx
index 8d499d9..dbcd007 100644
--- a/apps/web-main/src/view/Course/index.tsx
+++ b/apps/web-main/src/view/Course/index.tsx
@@ -1,13 +1,36 @@
 import "./index.less";
 import Player from "../../components/Player";
 import { useMount } from "../../hook";
+import { Select, Message } from "@arco-design/web-react";
+const Option = Select.Option;
+const options = ["全部", "最新的"];
+import BsCard from "../../components/Card";
 
 export default function Index() {
   useMount(() => {});
 
   return (
     <div className="container course">
-      <Player />
+      <div>
+        <BsCard />
+      </div>
+      <Select
+        placeholder="排序规则"
+        bordered={false}
+        style={{ width: 154 }}
+        onChange={(value) =>
+          Message.info({
+            content: `You select ${value}.`,
+            showIcon: true,
+          })
+        }
+      >
+        {options.map((option, index) => (
+          <Option key={option} disabled={index === 3} value={option}>
+            {option}
+          </Option>
+        ))}
+      </Select>
     </div>
   );
 }