♻️ Refactor player

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"
   }

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 (
-    <VideoPlayer
-      className="video-js"
-      height={480}
-      crossorigin="anonymous"
-      playsinline
-      controls
-      src={url}
-      liveui={liveList.includes(mimetype)}
-      html5={{
-        vhs: {
-          overrideNative: !isSafari,
-          maxPlaylistRetries: Infinity,
-        },
-        nativeAudioTracks: false,
-        nativeVideoTracks: false,
-      }}
-    />
-  );
+function Video({ url, mimetype, ...rest }: { url: string; mimetype: string; className?: string }) {
+  const container = useRef<HTMLDivElement>(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 <div ref={container} {...rest}></div>;
 }
 
 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<boolean[]>(items.map((_, idx) => idx === 0));
 
   function changeFocus(idx: number) {