✨ Better player

package.json

@@ -19,6 +19,8 @@
     "@popperjs/core": "^2.11.8",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "aplayer": "^1.10.1",
+    "artplayer": "^5.1.1",
     "astro": "^4.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/posts/Media.tsx

@@ -1,10 +1,63 @@
-import { useState, Fragment } from "react";
+// @ts-ignore
+import APlayer from "aplayer";
+import Artplayer from "artplayer";
+import { useState, Fragment, useRef, useEffect } from "react";
 
-export default function Media({ sources }: { sources: { caption: string; url: string; type: string }[] }) {
+import "aplayer/dist/APlayer.min.css";
+
+function Video({ url, ...rest }: { url: string, className?: string }) {
+  const container = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    new Artplayer({
+      container: container.current as HTMLDivElement,
+      url: url,
+      setting: true,
+      flip: true,
+      playbackRate: true,
+      aspectRatio: true,
+      subtitleOffset: true
+    });
+  });
+
+  return (
+    <div ref={container} {...rest}></div>
+  );
+}
+
+function Audio({ url, artist, caption, ...rest }: {
+  url: string,
+  artist: string,
+  caption: string,
+  className?: string
+}) {
+  const container = useRef(null);
+
+  useEffect(() => {
+    new APlayer({
+      container: container.current,
+      audio: [{
+        name: caption,
+        artist: artist,
+        url: url,
+        theme: "#49509e"
+      }]
+    });
+  });
+
+  return (
+    <div ref={container} {...rest}></div>
+  );
+}
+
+export default function Media({ sources, author }: {
+  sources: { caption: string; url: string; type: string }[],
+  author?: { name: string }
+}) {
   const [focus, setFocus] = useState<boolean[]>(sources.map((_, idx) => idx === 0));
 
   function changeFocus(idx: number) {
-    setFocus(focus.map((_, idx) => idx === idx));
+    setFocus(focus.map((_, i) => i === idx));
   }
 
   return (
@@ -20,16 +73,16 @@ export default function Media({ sources }: { sources: { caption: string; url: st
             checked={focus[idx]}
             onChange={() => changeFocus(idx)}
           />
-          <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box">
+          <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box w-full">
             {item.type === "video" && (
-              <video className="mb-0 block w-full h-[360px]" controls>
+              <div className="w-full h-[460px]">
-                <source src={item.url} />
+                <Video className="w-full h-full" url={item.url} />
-              </video>
+              </div>
             )}
             {item.type === "audio" && (
-              <audio className="mb-0 block w-full h-[20px]" controls>
+              <div className="w-full">
-                <source src={item.url} />
+                <Audio url={item.url} artist={author?.name ?? "佚名"} caption={item.caption} />
-              </audio>
+              </div>
             )}
           </div>
         </Fragment>

src/pages/posts/[slug].astro

@@ -19,6 +19,9 @@ const { post } = (
     type
     title
     description
+    author {
+      name
+    }
     assets {
       caption
       url
@@ -67,8 +70,8 @@ const { post } = (
 
         {
           post.assets?.length > 0 && (
-            <div class="mb-5">
+            <div class="mb-5 w-full">
-              <Media sources={post.assets} />
+              <Media client:only sources={post.assets} author={post.author} />
             </div>
           )
         }

tsconfig.json

@@ -2,7 +2,9 @@
   "extends": "astro/tsconfigs/strict",
   "exclude": ["./content", "./dist"],
   "compilerOptions": {
+    "target": "es5",
+    "lib": ["esnext", "es2021"],
     "jsx": "react-jsx",
-    "jsxImportSource": "react",
+    "jsxImportSource": "react"
   },
 }

yarn.lock

@@ -916,6 +916,15 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+aplayer@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/aplayer/-/aplayer-1.10.1.tgz#318289206107452cc39e8f552fa6cc6cb459a90c"
+  integrity sha512-HAfyxgCUTLAqtYlxzzK9Fyqg6y+kZ9CqT1WfeWE8FSzwspT6oBqWOZHANPHF3RGTtC33IsyEgrfthPDzU5r9kQ==
+  dependencies:
+    balloon-css "^0.5.0"
+    promise-polyfill "7.1.0"
+    smoothscroll "0.4.0"
+
 arg@^5.0.0, arg@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
@@ -945,6 +954,13 @@ array-iterate@^2.0.0:
   resolved "https://registry.yarnpkg.com/array-iterate/-/array-iterate-2.0.1.tgz#6efd43f8295b3fee06251d3d62ead4bd9805dd24"
   integrity sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==
 
+artplayer@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/artplayer/-/artplayer-5.1.1.tgz#a35071036f899aafb3a8f1fa3a9e0755dc6d5b66"
+  integrity sha512-pZ2/lB+Oo3g0CVLqkFuB86bMBPMtZaABaq5e1LPKubYDBW46+mzin2wzdVmk3tvFyfQoVnb+MBFU7nJYvI3qNg==
+  dependencies:
+    option-validator "^2.0.6"
+
 astro@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/astro/-/astro-4.2.1.tgz#c0676bdd63cdd8ac2e46f53b7a72229ad302b24b"
@@ -1050,6 +1066,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+balloon-css@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/balloon-css/-/balloon-css-0.5.2.tgz#9e2163565a136c9d4aa20e8400772ce3b738d3ff"
+  integrity sha512-zheJpzwyNrG4t39vusA67v3BYg1HTVXOF8cErPEHzWK88PEOFwgo6Ea9VHOgOWNMgeuOtFVtB73NE2NWl9uDyQ==
+
 base-64@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/base-64/-/base-64-1.0.0.tgz#09d0f2084e32a3fd08c2475b973788eee6ae8f4a"
@@ -2108,7 +2129,7 @@ jsonc-parser@^2.3.0:
   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.3.1.tgz#59549150b133f2efacca48fe9ce1ec0659af2342"
   integrity sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==
 
-kind-of@^6.0.0, kind-of@^6.0.2:
+kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -2853,6 +2874,13 @@ onetime@^6.0.0:
   dependencies:
     mimic-fn "^4.0.0"
 
+option-validator@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/option-validator/-/option-validator-2.0.6.tgz#a314dae65e26db5f948ef0ff96fc88f18bb76ed6"
+  integrity sha512-tmZDan2LRIRQyhUGvkff68/O0R8UmF+Btmiiz0SmSw2ng3CfPZB9wJlIjHpe/MKUZqyIZkVIXCrwr1tIN+0Dzg==
+  dependencies:
+    kind-of "^6.0.3"
+
 ora@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/ora/-/ora-7.0.1.tgz#cdd530ecd865fe39e451a0e7697865669cb11930"
@@ -3115,6 +3143,11 @@ probe-image-size@^7.2.3:
     needle "^2.5.2"
     stream-parser "~0.3.1"
 
+promise-polyfill@7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-7.1.0.tgz#4d749485b44577c14137591c6f36e5d7e2dd3378"
+  integrity sha512-P6NJ2wU/8fac44ENORsuqT8TiolKGB2u0fEClPtXezn7w5cmLIjM/7mhPlTebke2EPr6tmqZbXvnX0TxwykGrg==
+
 prompts@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
@@ -3556,6 +3589,11 @@ sitemap@^7.1.1:
     arg "^5.0.0"
     sax "^1.2.4"
 
+smoothscroll@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/smoothscroll/-/smoothscroll-0.4.0.tgz#40e507b46461408ba1b787d0081e1e883c4124a5"
+  integrity sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ==
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"