feat: add asciinema preview (close alist-org/alist#5683)

package.json

@@ -63,6 +63,7 @@
     "aplayer": "^1.10.1",
     "artplayer": "^5.0.9",
     "artplayer-plugin-danmuku": "^5.0.1",
+    "asciinema-player": "^3.6.3",
     "axios": "^1.0.0",
     "clsx": "^2.0.0",
     "copy-to-clipboard": "^3.3.2",

src/pages/home/previews/asciinema.tsx

@@ -0,0 +1,13 @@
+import { Box } from "@hope-ui/solid"
+import * as AsciinemaPlayer from "asciinema-player"
+import "asciinema-player/dist/bundle/asciinema-player.css"
+import { onMount } from "solid-js"
+import { objStore } from "~/store"
+export default function Preview() {
+  let d: HTMLDivElement
+
+  onMount(() => {
+    AsciinemaPlayer.create(objStore.raw_url, d)
+  })
+  return <Box w="$full" ref={d!} />
+}

src/pages/home/previews/index.ts

@@ -78,6 +78,11 @@ const previews: Preview[] = [
     provider: /^Aliyundrive(Share)?$/,
     component: lazy(() => import("./aliyun_office")),
   },
+  {
+    name: "Asciinema",
+    exts: ["cast"],
+    component: lazy(() => import("./asciinema")),
+  },
 ]
 
 export const getPreviews = (

src/utils/icon.ts

@@ -27,6 +27,7 @@ import {
   VscodeIconsFileTypeAi2,
   VscodeIconsFileTypePhotoshop2,
 } from "~/components"
+import { SiAsciinema } from "solid-icons/si"
 
 const iconMap = {
   "dmg,ipa,plist,tipa": BsApple,
@@ -45,6 +46,7 @@ const iconMap = {
   psd: VscodeIconsFileTypePhotoshop2,
   ai: VscodeIconsFileTypeAi2,
   url: FaSolidLink,
+  cast: SiAsciinema,
 }
 
 export const getIconByTypeAndExt = (type: number, ext: string) => {