mozzie/web-backset.cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 滚动

Browse Source
This commit is contained in:
mozzie 2023-03-01 23:59:13 +08:00
parent d66a606053
commit f8be92ddde
4 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web-main/index.html
View File

@ -1,13 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Vite + React + TS</title>
<link rel="stylesheet" href="/player/tcplayer_pure.min.css" />
</head> </head>
<body> <body>
<div id="bs-app"></div> <div id="bs-app"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
<script src="/player/libs/hls.min.0.13.2m.js"></script>
<script src="/player/tcplayer.v4.7.2.min.js"></script>
</body> </body>
</html> </html>

2
apps/web-main/src/components/Player/index.less
View File

@ -1,7 +1,7 @@
.vjs-button-icon-custom { .vjs-button-icon-custom {
cursor: pointer; cursor: pointer;
> svg { > svg {
transition: all 0.25s; transition: color 0.25s;
color: rgba(37, 41, 47, 0.2); color: rgba(37, 41, 47, 0.2);
&:hover { &:hover {
color: rgba(37, 41, 47, 1); color: rgba(37, 41, 47, 1);

42
apps/web-main/src/components/Player/index.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useRef } from "react"; import { useEffect, useRef, useState } from "react";
import { useLink, useMount, useScript } from "../../hook"; import { useLink, useMount, useScript } from "../../hook";
import "./index.less"; import "./index.less";
@ -10,7 +10,7 @@ export interface IVideo {
} }
interface IProps { interface IProps {
video: IVideo | null; video?: IVideo | null;
} }
/** /**
@ -22,6 +22,13 @@ interface IProps {
*/ */
function Player(props: IProps) { function Player(props: IProps) {
const playerRef = useRef<any>(); const playerRef = useRef<any>();
const [videoInfo, setVideoInfo] = useState<IVideo>({
fileID: "",
appID: "",
});
const videoRef = useRef<HTMLVideoElement | null>(null);
console.log("执行一次");
const initPlayer = (video: IVideo) => { const initPlayer = (video: IVideo) => {
const TCPlayer = (window as any).TCPlayer; const TCPlayer = (window as any).TCPlayer;
@ -41,23 +48,32 @@ function Player(props: IProps) {
); );
return el; return el;
}; };
playerRef.current = TCPlayer("player_html5_api", video); playerRef.current = TCPlayer("player", video);
}; };
useLink(["/player/tcplayer_pure.min.css"]); // useLink(["/player/tcplayer_pure.min.css"]);
useScript(
["/player/libs/hls.min.0.13.2m.js", "/player/tcplayer.v4.7.2.min.js"], // 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);
} 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 ( return (
<video <video
onContextMenu={(e) => e.preventDefault()} onContextMenu={(e) => e.preventDefault()}
id="player_html5_api" id={`video-${videoInfo.fileID}`}
ref={videoRef}
style={{ width: "100%", height: "100%", objectFit: "contain" }} style={{ width: "100%", height: "100%", objectFit: "contain" }}
preload="auto" preload="auto"
playsInline playsInline

2
apps/web-main/src/hook/index.tsx
View File

@ -50,7 +50,7 @@ export const useScript = (urls: string[], func: Function) => {
.querySelectorAll(`[script-type='hook']`) .querySelectorAll(`[script-type='hook']`)
.forEach((script) => document.body.removeChild(script)); .forEach((script) => document.body.removeChild(script));
}; };
}, [urls]); }, []);
}; };
/** /**