feat(context-menu): add "Open with" option to context menu

src/lang/en/home.json

@@ -70,6 +70,7 @@
     "switch_lang": "Switch Language",
     "toggle_markdown_toc": "Toggle Outline",
     "toggle_checkbox": "Toggle Checkbox",
+    "open_with": "Open with ...",
     "rename": "Rename",
     "input_new_name": "Input new name",
     "move": "Move",

src/pages/home/folder/context-menu.tsx

@@ -3,7 +3,7 @@ import { useCopyLink, useDownload, useLink, useRouter, useT } from "~/hooks"
 import "solid-contextmenu/dist/style.css"
 import { HStack, Icon, Text, useColorMode, Image } from "@hope-ui/solid"
 import { operations } from "../toolbar/operations"
-import { For, Show } from "solid-js"
+import { createMemo, For, Show } from "solid-js"
 import { bus, convertURL, notify, torrentParse } from "~/utils"
 import { ObjType, UserMethods } from "~/types"
 import {
@@ -16,6 +16,7 @@ import {
   userCan,
 } from "~/store"
 import { players } from "../previews/video_box"
+import { getPreviews } from "../previews"
 import { BsPlayCircleFill } from "solid-icons/bs"
 import { isArchive } from "~/store/archive"
 import axios from "axios"
@@ -45,14 +46,37 @@ export const ContextMenu = () => {
     return UserMethods.is_admin(me()) || getSettingBool("package_download")
   }
   const { rawLink } = useLink()
-  const { isShare } = useRouter()
+  const { isShare, pushHref, to } = useRouter()
+  const openWithPreviews = createMemo(() => {
+    const objs = selectedObjs()
+    if (objs.length !== 1) return []
+    const obj = objs[0]
+    if (obj.is_dir) return []
+    return getPreviews({ ...obj, provider: objStore.provider })
+    // .filter((p) => p.key !== "download")
+  })
   return (
     <Menu
       id={1}
       animation="scale"
       theme={colorMode() !== "dark" ? "light" : "dark"}
       style="z-index: var(--hope-zIndices-popover)"
     >
+      <Show when={openWithPreviews().length > 0}>
+        <Submenu label={<ItemContent name="open_with" />}>
+          <For each={openWithPreviews()}>
+            {(preview) => (
+              <Item
+                onClick={({ props }) => {
+                  to(`${pushHref(props.name)}?preview=${preview.key}`)
+                }}
+              >
+                {preview.name}
+              </Item>
+            )}
+          </For>
+        </Submenu>
+      </Show>
       <For each={["rename", "move", "copy", "delete"] as const}>
         {(name) => (
           <Item

src/pages/home/toolbar/operations.ts

@@ -9,6 +9,7 @@ import { AiOutlineCloudDownload } from "solid-icons/ai"
 import { ImMoveUp } from "solid-icons/im"
 import { BiRegularRename } from "solid-icons/bi"
 import { FaSolidMagnet } from "solid-icons/fa"
+import { FiExternalLink } from "solid-icons/fi"
 
 export interface Operations {
   [key: string]: {
@@ -18,6 +19,7 @@ export interface Operations {
   }
 }
 export const operations: Operations = {
+  open_with: { icon: FiExternalLink, color: "$info9" },
   rename: { icon: CgRename, color: "$accent9" },
   copy: { icon: TbCopy, color: "$success9" },
   move: { icon: TbFileArrowRight, color: "$warning9" },