feat: aplayer params

src/components/ui/APlayer.tsx

@@ -1,25 +1,39 @@
-import { AudioInfo } from "aplayer-react"
 import { APlayer as AplayerReact } from "aplayer-react"
-import { useEffect, useState } from "react"
+import { toGateway } from "~/lib/ipfs-parser"
 
 export const APlayer: React.FC<
   {
-    children: string[]
-    src: string
-  } & React.HTMLAttributes<HTMLAudioElement>
-> = ({ src, children }) => {
-  const [audio, setAudio] = useState<AudioInfo>()
-  useEffect(() => {
-    if (!Array.isArray(children) || children.length < 3) {
-      throw new Error("Aplayer params error, exactly 3 parameters required")
-    }
-    const [artist, name, cover] = children as Array<string>
-    setAudio({ artist, name, cover, url: src })
-  }, [])
+    name?: string
+    artist?: string
+    cover?: string
+    lrc?: string
+  } & React.AudioHTMLAttributes<HTMLAudioElement>
+> = ({ src, name, artist, cover, lrc, muted, autoPlay, loop }) => {
+  if (!src) return null
 
-  if (!audio) {
-    return null
-  } else {
-    return <AplayerReact audio={audio} />
+  src = toGateway(src)
+  if (cover) {
+    cover = toGateway(cover)
   }
+  if (lrc) {
+    lrc = toGateway(lrc)
+  }
+  if (name) {
+    name = name.replace(/^user-content-/, "")
+  }
+
+  return (
+    <AplayerReact
+      audio={{
+        name: name || "xLog audio",
+        artist: artist || "",
+        cover: cover || "/assets/logo.png",
+        lrc,
+        url: src,
+      }}
+      volume={muted ? 0 : 1}
+      autoPlay={autoPlay}
+      initialLoop={loop ? "one" : "none"}
+    />
+  )
 }

src/markdown/rehype-audio.ts

@@ -1,7 +1,6 @@
 import { Root } from "rehype-raw"
 import { Plugin } from "unified"
 import { visit } from "unist-util-visit"
-import { getUserContentsUrl } from "~/lib/user-contents"
 import { toGateway } from "~/lib/ipfs-parser"
 
 export const rehypeAudio: Plugin<Array<void>, Root> = () => {
@@ -17,40 +16,16 @@ export const rehypeAudio: Plugin<Array<void>, Root> = () => {
         return
       }
 
-      let url = src
-      const ipfsUrl = toGateway(url)
-      node.properties.src = ipfsUrl
-      url = ipfsUrl
-
-      node.properties.src = getUserContentsUrl(url)
+      node.properties.src = toGateway(src)
 
       if (parent) {
-        const coverRaw = node.properties.cover
-        const cover =
-          typeof coverRaw === "string" ? toGateway(coverRaw) : undefined
-
         parent.children[i!] = {
           type: "element",
           tagName: "audio",
           properties: {
-            src: url,
+            ...node.properties,
           },
-          // children array format:
-          // artist - name - cover
-          children: [
-            {
-              type: "text",
-              value: `${node.properties.artist}`,
-            },
-            {
-              type: "text",
-              value: `${node.properties.name}`,
-            },
-            {
-              type: "text",
-              value: cover ?? "",
-            },
-          ],
+          children: [],
         }
       }
     })

src/markdown/sanitize-schema.ts

@@ -21,7 +21,17 @@ const scheme = {
     "*": [...(defaultSchema.attributes?.["*"] || []), "className", "style"],
     blockquote: allowedBlockquoteAttrs,
     video: ["src", "controls", "loop", "muted", "autoPlay", "playsInline"],
-    audio: ["src", "controls", "loop", "muted", "autoPlay"],
+    audio: [
+      "src",
+      "controls",
+      "loop",
+      "muted",
+      "autoPlay",
+      "name",
+      "artist",
+      "cover",
+      "lrc",
+    ],
     source: ["src", "type"],
     iframe: ["src", "allowFullScreen", "frameborder", "allow"],
   },

src/pages/dashboard/[subdomain]/editor.tsx

@@ -394,9 +394,10 @@ export default function SubdomainEditor() {
       try {
         if (
           !file.type.startsWith("image/") &&
-          !file.type.startsWith("audio/")
+          !file.type.startsWith("audio/") &&
+          !(file.type === "text/plain" && file.name.endsWith(".lrc"))
         ) {
-          throw new Error("You can only upload images or audios")
+          throw new Error("You can only upload images, audios or .lrc files")
         }
 
         const { key } = await uploadFile(file)
@@ -435,6 +436,8 @@ export default function SubdomainEditor() {
               } ${cover ? `cover="${cover}"` : ""}><audio>\n`,
             ),
           )
+        } else if (file.type === "text/plain") {
+          view?.dispatch(view.state.replaceSelection(key))
         } else {
           throw new Error("Unknown upload file type")
         }