From f8be92ddde40549b81f4d49e896afd285e9d432e Mon Sep 17 00:00:00 2001 From: mozzie Date: Wed, 1 Mar 2023 23:59:13 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=BB=9A=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-main/index.html | 5 ++- .../web-main/src/components/Player/index.less | 2 +- apps/web-main/src/components/Player/index.tsx | 42 +++++++++++++------ apps/web-main/src/hook/index.tsx | 2 +- 4 files changed, 35 insertions(+), 16 deletions(-) diff --git a/apps/web-main/index.html b/apps/web-main/index.html index bd6d0c2..e8d2d62 100644 --- a/apps/web-main/index.html +++ b/apps/web-main/index.html @@ -1,13 +1,16 @@ - + Vite + React + TS +
+ + diff --git a/apps/web-main/src/components/Player/index.less b/apps/web-main/src/components/Player/index.less index 485182c..8688eb5 100644 --- a/apps/web-main/src/components/Player/index.less +++ b/apps/web-main/src/components/Player/index.less @@ -1,7 +1,7 @@ .vjs-button-icon-custom { cursor: pointer; > svg { - transition: all 0.25s; + transition: color 0.25s; color: rgba(37, 41, 47, 0.2); &:hover { color: rgba(37, 41, 47, 1); diff --git a/apps/web-main/src/components/Player/index.tsx b/apps/web-main/src/components/Player/index.tsx index c3f37e6..f1f679e 100644 --- a/apps/web-main/src/components/Player/index.tsx +++ b/apps/web-main/src/components/Player/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { useLink, useMount, useScript } from "../../hook"; import "./index.less"; @@ -10,7 +10,7 @@ export interface IVideo { } interface IProps { - video: IVideo | null; + video?: IVideo | null; } /** @@ -22,6 +22,13 @@ interface IProps { */ function Player(props: IProps) { const playerRef = useRef(); + const [videoInfo, setVideoInfo] = useState({ + fileID: "", + appID: "", + }); + const videoRef = useRef(null); + + console.log("执行一次"); const initPlayer = (video: IVideo) => { const TCPlayer = (window as any).TCPlayer; @@ -41,23 +48,32 @@ function Player(props: IProps) { ); return el; }; - playerRef.current = TCPlayer("player_html5_api", video); + playerRef.current = TCPlayer("player", video); }; - useLink(["/player/tcplayer_pure.min.css"]); - useScript( - ["/player/libs/hls.min.0.13.2m.js", "/player/tcplayer.v4.7.2.min.js"], - () => { - console.log("执行了", playerRef.current); - playerRef.current = null; - if (props.video) initPlayer(props.video); - } - ); + // useLink(["/player/tcplayer_pure.min.css"]); + + // useScript( + // ["/player/libs/hls.min.0.13.2m.js", "/player/tcplayer.v4.7.2.min.js"], + // () => {} + // ); + + useEffect(() => { + if (props.video) setVideoInfo(props.video); + }, [props.video]); + + // useEffect(() => { + // if (videoInfo.fileID !== "") { + // const TCPlayer = (window as any).TCPlayer; + // TCPlayer(`video-${videoInfo.fileID}`, videoInfo); + // } + // }, [videoInfo]); return (