♻️ 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",
+    "typescript": "^5.3.3"
-    "video.js": "^7"
   },
   "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 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";
 
-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({
@@ -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)
+  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));
 
   function changeFocus(idx: number) {