refactor(previews): implement preview key and i18n name

src/lang/en/home.json

@@ -22,7 +22,30 @@
     "tr-install": "TrollStore",
     "tr-installing": "TrollStore Installing",
     "open_in_new_window": "Open in new window",
-    "auto_next": "Auto next"
+    "auto_next": "Auto next",
+    "names": {
+      "download": "Direct Download",
+      "html": "HTML Render",
+      "aliyun_video": "Aliyun Video Player",
+      "markdown": "Markdown Render",
+      "flash": "Flash Player",
+      "markdown_with_word_wrap": "Markdown Render (with word wrap)",
+      "url_open": "URL Open",
+      "text_editor": "Text Editor",
+      "image": "Image Viewer",
+      "video": "Video Player",
+      "audio": "Audio Player",
+      "ipa": "IPA Installer",
+      "plist": "Plist Installer",
+      "heic": "HEIC Viewer",
+      "pdf": "PDF Previewer",
+      "ppt": "PPT Previewer",
+      "xls": "XLS Previewer",
+      "doc": "DOC Previewer",
+      "asciinema": "Asciinema Player",
+      "video360": "Video360 Player",
+      "archive": "Archive Previewer"
+    }
   },
   "layouts": {
     "list": "List View",

src/pages/home/file/File.tsx

@@ -1,33 +1,45 @@
 import { HStack, VStack } from "@hope-ui/solid"
-import { createMemo, createSignal, Show, Suspense } from "solid-js"
+import { createMemo, Show, Suspense } from "solid-js"
 import { Dynamic } from "solid-js/web"
 import { FullLoading, SelectWrapper } from "~/components"
 import { objStore } from "~/store"
+import { useRouter } from "~/hooks"
 import { Download } from "../previews/download"
 import { OpenWith } from "./open-with"
 import { getPreviews } from "../previews"
 
 const File = () => {
+  const { searchParams, setSearchParams } = useRouter()
   const previews = createMemo(() => {
     return getPreviews({ ...objStore.obj, provider: objStore.provider })
   })
-  const [cur, setCur] = createSignal(previews()[0])
+  const selectedPreviewKey = createMemo(() => searchParams["preview"] || "")
+  const cur = createMemo(() => {
+    const list = previews()
+    if (list.length === 0) return undefined
+    const selected = selectedPreviewKey()
+    return list.find((p) => p.key === selected) || list[0]
+  })
+
   return (
     <Show when={previews().length > 1} fallback={<Download openWith />}>
       <VStack w="$full" spacing="$2">
         <HStack w="$full" spacing="$2">
           <SelectWrapper
             alwaysShowBorder
-            value={cur().name}
-            onChange={(name) => {
-              setCur(previews().find((p) => p.name === name)!)
+            value={cur()?.key || ""}
+            onChange={(key) => {
+              setSearchParams({ preview: key }, { replace: true })
             }}
-            options={previews().map((item) => ({ value: item.name }))}
+            options={previews().map((item) => ({
+              value: item.key,
+              label: item.name,
+            }))}
           />
           <OpenWith />
         </HStack>
         <Suspense fallback={<FullLoading />}>
-          <Dynamic component={cur().component} />
+          <Dynamic component={cur()?.component} />
         </Suspense>
       </VStack>
     </Show>

src/pages/home/previews/archive.tsx

@@ -260,7 +260,7 @@ const Preview = () => {
     "",
   )
   const [selectedFile, setSelectedFile] = createSignal<string>("")
-  const [selectedPreviewName, setSelectedPreviewName] = createSignal("")
+  const [selectedPreviewKey, setSelectedPreviewKey] = createSignal("")
   const getObjsMutex = createMutex()
   const toList = (tree: ObjTree[] | Obj[]): List => {
     let l: List = {}
@@ -425,8 +425,8 @@ const Preview = () => {
   const currentPreview = createMemo(() => {
     const p = previews()
     if (p.length === 0) return null
-    if (selectedPreviewName()) {
-      const found = p.find((item) => item.name === selectedPreviewName())
+    if (selectedPreviewKey()) {
+      const found = p.find((item) => item.key === selectedPreviewKey())
       if (found) return found
     }
     return p[0]
@@ -468,7 +468,7 @@ const Preview = () => {
 
   createEffect(() => {
     selectedFile()
-    setSelectedPreviewName("")
+    setSelectedPreviewKey("")
   })
   return (
     <VStack spacing="$2" w="$full">
@@ -574,12 +574,10 @@ const Preview = () => {
                 <HStack w="$full" justifyContent="center" spacing="$2" p="$2">
                   <Show when={previews().length > 1}>
                     <SelectWrapper
-                      value={currentPreview()?.name || ""}
-                      onChange={(value) =>
-                        setSelectedPreviewName(String(value))
-                      }
+                      value={currentPreview()?.key || ""}
+                      onChange={(value) => setSelectedPreviewKey(String(value))}
                       options={previews().map((p) => ({
-                        value: p.name,
+                        value: p.key,
                         label: p.name,
                       }))}
                     />

src/pages/home/previews/index.ts

@@ -3,7 +3,7 @@ import { getIframePreviews, me, getSettingBool, isArchive } from "~/store"
 import { Obj, ObjType, UserMethods, UserPermissions, ArchiveObj } from "~/types"
 import { ext } from "~/utils"
 import { generateIframePreview } from "./iframe"
-import { useRouter } from "~/hooks"
+import { useRouter, useT } from "~/hooks"
 
 type Ext = string[] | "*" | ((name: string) => boolean)
 type Prior = boolean | (() => boolean)
@@ -28,7 +28,7 @@ const isPrior = (p: Prior): boolean => {
 }
 
 export interface Preview {
-  name: string
+  key: string
   type?: ObjType
   exts?: Ext
   provider?: RegExp
@@ -37,86 +37,90 @@ export interface Preview {
   availableInArchive?: boolean
 }
 
-export type PreviewComponent = Pick<Preview, "name" | "component">
+export interface PreviewComponent {
+  key: string
+  name: string
+  component: Component
+}
 
 const previews: Preview[] = [
   {
-    name: "HTML render",
+    key: "html",
     exts: ["html"],
     component: lazy(() => import("./html")),
     prior: true,
   },
   {
-    name: "Aliyun Video Previewer",
+    key: "aliyun_video",
     type: ObjType.VIDEO,
     provider: /^Aliyundrive(Open)?$/,
     component: lazy(() => import("./aliyun_video")),
     prior: true,
   },
   {
-    name: "Markdown",
+    key: "markdown",
     type: ObjType.TEXT,
     component: lazy(() => import("./markdown")),
     prior: true,
   },
   {
-    name: "Flash",
+    key: "flash",
     exts: ["swf"],
     component: lazy(() => import("./flash")),
     prior: true,
   },
   {
-    name: "Markdown with word wrap",
+    key: "markdown_with_word_wrap",
     type: ObjType.TEXT,
     component: lazy(() => import("./markdown_with_word_wrap")),
     prior: true,
   },
   {
-    name: "Url Open",
+    key: "url_open",
     exts: ["url"],
     component: lazy(() => import("./url")),
     prior: true,
   },
   {
-    name: "Text Editor",
+    key: "text_editor",
     type: ObjType.TEXT,
     exts: ["url"],
     component: lazy(() => import("./text-editor")),
     prior: true,
     availableInArchive: false,
   },
   {
-    name: "Image",
+    key: "image",
     type: ObjType.IMAGE,
     component: lazy(() => import("./image")),
     prior: true,
   },
   {
-    name: "Video",
+    key: "video",
     type: ObjType.VIDEO,
     component: lazy(() => import("./video")),
     prior: true,
   },
   {
-    name: "Audio",
+    key: "audio",
     type: ObjType.AUDIO,
     component: lazy(() => import("./audio")),
     prior: true,
   },
   {
-    name: "Ipa",
+    key: "ipa",
     exts: ["ipa", "tipa"],
     component: lazy(() => import("./ipa")),
     prior: true,
   },
   {
-    name: "Plist",
+    key: "plist",
     exts: ["plist"],
     component: lazy(() => import("./plist")),
     prior: true,
   },
   {
-    name: "HEIC",
+    key: "heic",
     exts: ["heic", "heif", "avif", "vvc", "avc", "jpeg", "jpg"],
     component: lazy(() => import("./heic")),
     prior: true,
@@ -125,44 +129,44 @@ const previews: Preview[] = [
     ? []
     : [
         {
-          name: "PDF Preview",
+          key: "pdf",
           exts: ["pdf"],
           component: lazy(() => import("./pdf")),
           prior: true,
         },
       ]),
   {
-    name: "PPT Preview",
+    key: "ppt",
     exts: ["pptx"],
     component: lazy(() => import("./ppt")),
     prior: true,
   },
   {
-    name: "XLS Preview",
+    key: "xls",
     exts: ["xlsx", "xls"],
     component: lazy(() => import("./xls")),
     prior: true,
   },
   {
-    name: "DOC Preview",
+    key: "doc",
     exts: ["docx", "doc"],
     component: lazy(() => import("./doc")),
     prior: true,
   },
   {
-    name: "Asciinema",
+    key: "asciinema",
     exts: ["cast"],
     component: lazy(() => import("./asciinema")),
     prior: true,
   },
   {
-    name: "Video360",
+    key: "video360",
     type: ObjType.VIDEO,
     component: lazy(() => import("./video360")),
     prior: true,
   },
   {
-    name: "Archive Preview",
+    key: "archive",
     exts: (name: string) => {
       const index = UserPermissions.findIndex(
         (item) => item === "read_archives",
@@ -192,6 +196,7 @@ export const getPreviews = (
   file: Obj & { provider: string },
 ): PreviewComponent[] => {
   const { searchParams, isShare } = useRouter()
+  const t = useT()
   const typeOverride =
     ObjType[searchParams["type"]?.toUpperCase() as keyof typeof ObjType]
   const res: PreviewComponent[] = []
@@ -211,7 +216,11 @@ export const getPreviews = (
         (typeOverride && preview.type === typeOverride) ||
         extsContains(preview.exts, file.name)
       ) {
-        const r = { name: preview.name, component: preview.component }
+        const r = {
+          key: preview.key,
+          name: t(`home.preview.names.${preview.key}`),
+          component: preview.component,
+        }
         // Skip previews that are not available in archive when file is in archive
         if (isInArchive && preview.availableInArchive === false) {
           return
@@ -227,7 +236,8 @@ export const getPreviews = (
   // iframe previews
   const iframePreviews = getIframePreviews(file.name)
   const matchedIframePreviews = iframePreviews.map((preview) => ({
-    name: preview.key,
+    key: `iframe-${preview.key}`,
+    name: preview.key, // TODO: Add name field to backend
     component: generateIframePreview(preview.value),
   }))
   // Condition for iframe previews to respect the "preview_download_by_default" setting
@@ -239,7 +249,8 @@ export const getPreviews = (
 
   // download page
   const downloadComponent: PreviewComponent = {
-    name: "Download",
+    key: "download",
+    name: t("home.preview.names.download"),
     component: lazy(() => import("./download")),
   }
 
@@ -262,11 +273,15 @@ export const getPreviews = (
     if (!isShare() || getSettingBool("share_preview")) {
       const textPreviewsToAdd = previews
         .filter((p) =>
-          ["Markdown", "Markdown with word wrap", "Text Editor"].includes(
-            p.name,
+          ["markdown", "markdown_with_word_wrap", "text_editor"].includes(
+            p.key,
           ),
         )
-        .map((p) => ({ name: p.name, component: p.component }))
+        .map((p) => ({
+          key: p.key,
+          name: t(`home.preview.names.${p.key}`),
+          component: p.component,
+        }))
       res.push(...textPreviewsToAdd)
     }
   } else {