diff --git a/package.json b/package.json
index 206a3ac..b53148c 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,8 @@
"@popperjs/core": "^2.11.8",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
- "@videojs-player/react": "^1.0.0",
- "@videojs/themes": "^1.0.1",
"aplayer": "^1.10.1",
+ "artplayer": "^5.1.1",
"astro": "^4.2.1",
"dompurify": "^3.0.8",
"html-react-parser": "^5.1.2",
@@ -34,15 +33,13 @@
"sass": "^1.70.0",
"tailwindcss": "^3.4.1",
"theme-change": "^2.5.0",
- "typescript": "^5.3.3",
- "video.js": "^7"
+ "typescript": "^5.3.3"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.10",
"@types/dompurify": "^3.0.5",
"@types/node": "^20.11.5",
"@types/nprogress": "^0.2.3",
- "@types/video.js": "^7.3.56",
"daisyui": "^4.6.0",
"prettier": "^3.2.4"
}
diff --git a/src/components/posts/Media.tsx b/src/components/posts/Media.tsx
index 98d9d7d..4d3bcb3 100644
--- a/src/components/posts/Media.tsx
+++ b/src/components/posts/Media.tsx
@@ -1,36 +1,33 @@
// @ts-ignore
import APlayer from "aplayer";
-import "aplayer/dist/APlayer.min.css";
-
-import "video.js/dist/video-js.css";
-
-import videojs from "video.js";
-import { VideoPlayer } from "@videojs-player/react";
+import Artplayer from "artplayer";
import { useState, Fragment, useRef, useEffect } from "react";
-function Video({ url, mimetype, ...rest }: { url: string; mimetype: string; className?: string }) {
- const liveList = ["application/x-mpegURL"];
- const isSafari = videojs.browser.IS_SAFARI;
+import "aplayer/dist/APlayer.min.css";
- return (
-
- );
+function Video({ url, mimetype, ...rest }: { url: string; mimetype: string; className?: string }) {
+ const container = useRef(null);
+
+ useEffect(() => {
+ new Artplayer({
+ container: container.current as HTMLDivElement,
+ url: url,
+ setting: true,
+ flip: true,
+ loop: true,
+ playbackRate: true,
+ aspectRatio: true,
+ subtitleOffset: true,
+ fullscreen: true,
+ fullscreenWeb: true,
+ screenshot: true,
+ autoPlayback: true,
+ airplay: true,
+ theme: "#49509e",
+ });
+ });
+
+ return ;
}
function Audio({
@@ -70,8 +67,8 @@ export default function Media({
sources: { id: number; filename: string; mimetype: string }[];
author?: { name: string };
}) {
- const items = sources.sort((a, b) => a.id > b.id ? 1 : -1)
- console.log(items)
+ const items = sources.sort((a, b) => (a.id > b.id ? 1 : -1));
+ console.log(items);
const [focus, setFocus] = useState(items.map((_, idx) => idx === 0));
function changeFocus(idx: number) {