Goatworks/Capital
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

♻️ Refactor player

Browse Source
This commit is contained in:
LittleSheep 2024-02-15 13:38:46 +08:00
parent 715e0e550f
commit 5f4f1dd659
2 changed files with 29 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -20,9 +20,8 @@
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@types/react": "^18.2.48", "@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18", "@types/react-dom": "^18.2.18",
"@videojs-player/react": "^1.0.0",
"@videojs/themes": "^1.0.1",
"aplayer": "^1.10.1", "aplayer": "^1.10.1",
"artplayer": "^5.1.1",
"astro": "^4.2.1", "astro": "^4.2.1",
"dompurify": "^3.0.8", "dompurify": "^3.0.8",
"html-react-parser": "^5.1.2", "html-react-parser": "^5.1.2",
@ -34,15 +33,13 @@
"sass": "^1.70.0", "sass": "^1.70.0",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"theme-change": "^2.5.0", "theme-change": "^2.5.0",
"typescript": "^5.3.3", "typescript": "^5.3.3"
"video.js": "^7"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/typography": "^0.5.10", "@tailwindcss/typography": "^0.5.10",
"@types/dompurify": "^3.0.5", "@types/dompurify": "^3.0.5",
"@types/node": "^20.11.5", "@types/node": "^20.11.5",
"@types/nprogress": "^0.2.3", "@types/nprogress": "^0.2.3",
"@types/video.js": "^7.3.56",
"daisyui": "^4.6.0", "daisyui": "^4.6.0",
"prettier": "^3.2.4" "prettier": "^3.2.4"
} }

57
src/components/posts/Media.tsx
View File

@ -1,36 +1,33 @@
// @ts-ignore // @ts-ignore
import APlayer from "aplayer"; import APlayer from "aplayer";
import "aplayer/dist/APlayer.min.css"; import Artplayer from "artplayer";
import "video.js/dist/video-js.css";
import videojs from "video.js";
import { VideoPlayer } from "@videojs-player/react";
import { useState, Fragment, useRef, useEffect } from "react"; import { useState, Fragment, useRef, useEffect } from "react";
function Video({ url, mimetype, ...rest }: { url: string; mimetype: string; className?: string }) { import "aplayer/dist/APlayer.min.css";
const liveList = ["application/x-mpegURL"];
const isSafari = videojs.browser.IS_SAFARI;
return ( function Video({ url, mimetype, ...rest }: { url: string; mimetype: string; className?: string }) {
<VideoPlayer const container = useRef<HTMLDivElement>(null);
className="video-js"
height={480} useEffect(() => {
crossorigin="anonymous" new Artplayer({
playsinline container: container.current as HTMLDivElement,
controls url: url,
src={url} setting: true,
liveui={liveList.includes(mimetype)} flip: true,
html5={{ loop: true,
vhs: { playbackRate: true,
overrideNative: !isSafari, aspectRatio: true,
maxPlaylistRetries: Infinity, subtitleOffset: true,
}, fullscreen: true,
nativeAudioTracks: false, fullscreenWeb: true,
nativeVideoTracks: false, screenshot: true,
}} autoPlayback: true,
/> airplay: true,
); theme: "#49509e",
});
});
return <div ref={container} {...rest}></div>;
} }
function Audio({ function Audio({
@ -70,8 +67,8 @@ export default function Media({
sources: { id: number; filename: string; mimetype: string }[]; sources: { id: number; filename: string; mimetype: string }[];
author?: { name: string }; author?: { name: string };
}) { }) {
const items = sources.sort((a, b) => a.id > b.id ? 1 : -1) const items = sources.sort((a, b) => (a.id > b.id ? 1 : -1));
console.log(items) console.log(items);
const [focus, setFocus] = useState<boolean[]>(items.map((_, idx) => idx === 0)); const [focus, setFocus] = useState<boolean[]>(items.map((_, idx) => idx === 0));
function changeFocus(idx: number) { function changeFocus(idx: number) {