feat: video player

eslint.config.mjs

@@ -23,6 +23,7 @@ export default defineConfig(
  },
  rules: {
  "unicorn/prefer-math-trunc": "off",
+ "@eslint-react/no-clone-element": 0,
  "no-restricted-globals": [
  "error",
  {

setup-file.ts

@@ -6,6 +6,11 @@ import { enableMapSet } from "immer"
 globalThis.window = {
  location: new URL("https://example.com"),
  __dbIsReady: true,
+}
 
+if (!globalThis.navigator) {
+ globalThis.navigator = {
+ onLine: true,
+ }
 }
 enableMapSet()

src/main/tipc/app.ts

@@ -1,7 +1,9 @@
 import { getRendererHandlers } from "@egoist/tipc/main"
+import { callGlobalContextMethod } from "@shared/bridge"
 import type { BrowserWindow } from "electron"
-import { clipboard } from "electron"
+import { clipboard, dialog } from "electron"
 
+import { downloadFile } from "../lib/download"
 import { cleanAuthSessionToken, cleanUser } from "../lib/user"
 import type { RendererHandlers } from "../renderer-handlers"
 import { quitAndInstall } from "../updater"
@@ -109,6 +111,31 @@ export const appRoute = {
  webContents.stopFindInPage("keepSelection")
  },
  ),
+
+ download: t.procedure
+ .input<string>()
+ .action(async ({ input, context: { sender } }) => {
+ const result = await dialog.showSaveDialog({
+ defaultPath: input.split("/").pop(),
+ })
+ if (result.canceled) return
+
+ // return result.filePath;
+ await downloadFile(input, result.filePath).catch((err) => {
+ const senderWindow = (sender as Sender).getOwnerBrowserWindow()
+ if (!senderWindow) return
+ callGlobalContextMethod(senderWindow, "toast.error", [
+ "Download failed!",
+ ])
+ throw err
+ })
+
+ const senderWindow = (sender as Sender).getOwnerBrowserWindow()
+ if (!senderWindow) return
+ callGlobalContextMethod(senderWindow, "toast.success", [
+ "Download success!",
+ ])
+ }),
 }
 interface Sender extends Electron.WebContents {
  getOwnerBrowserWindow: () => Electron.BrowserWindow | null

src/main/tipc/menu.ts

@@ -1,9 +1,6 @@
-import { callGlobalContextMethod } from "@shared/bridge"
 import type { MenuItemConstructorOptions, MessageBoxOptions } from "electron"
 import { dialog, Menu, ShareMenu } from "electron"
 
-import { downloadFile } from "../lib/download"
-import { getMainWindow } from "../window"
 import { t } from "./_instance"
 
 type MenuItem = ActionMenuItem | { type: "separator" }
@@ -87,23 +84,4 @@ export const menuRoute = {
  },
  })
  }),
-
- saveImage: t.procedure.input<string>().action(async ({ input }) => {
- const result = await dialog.showSaveDialog({
- defaultPath: input.split("/").pop(),
- })
- if (result.canceled) return
-
- // return result.filePath;
- await downloadFile(input, result.filePath).catch((err) => {
- const mainWindow = getMainWindow()
- if (!mainWindow) return
- callGlobalContextMethod(mainWindow, "toast.error", ["Download failed!"])
- throw err
- })
-
- const mainWindow = getMainWindow()
- if (!mainWindow) return
- callGlobalContextMethod(mainWindow, "toast.success", ["Download success!"])
- }),
 }

src/renderer/src/components/ui/media.tsx

@@ -1,14 +1,18 @@
 import { tipcClient } from "@renderer/lib/client"
+import { nextFrame } from "@renderer/lib/dom"
 import { getProxyUrl } from "@renderer/lib/img-proxy"
 import { showNativeMenu } from "@renderer/lib/native-menu"
 import { cn } from "@renderer/lib/utils"
 import { saveImageDimensionsToDb } from "@renderer/store/image/db"
+import { useForceUpdate } from "framer-motion"
 import type { FC, ImgHTMLAttributes, VideoHTMLAttributes } from "react"
 import { memo, useMemo, useState } from "react"
 import { toast } from "sonner"
 import { useEventCallback } from "usehooks-ts"
 
 import { usePreviewMedia } from "./media/hooks"
+import type { VideoPlayerRef } from "./media/VideoPlayer"
+import { VideoPlayer } from "./media/VideoPlayer"
 
 const failedList = new Set<string | undefined>()
 
@@ -164,18 +168,7 @@ const MediaImpl: FC<MediaProps> = ({
  )}
  onClick={handleClick}
  >
- {previewImageUrl ? (
- <img src={previewImageUrl} className="size-full object-cover" />
- ) : (
- <video
- src={src}
- muted
- className="relative size-full object-cover"
- />
- )}
- <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-3xl text-white/80">
- <i className="i-mgc-play-cute-fi" />
- </div>
+ <VideoPreview src={src!} previewImageUrl={previewImageUrl} />
  </div>
  )
  }
@@ -199,7 +192,9 @@ const MediaImpl: FC<MediaProps> = ({
  type,
  ])
 
- if (hidden && showFallback) { return <FallbackMedia {...props} /> }
+ if (hidden && showFallback) {
+ return <FallbackMedia {...props} />
+ }
  return (
  <div className={cn("overflow-hidden rounded", className)} style={style}>
  {InnerContent}
@@ -245,3 +240,52 @@ const FallbackMedia: FC<MediaProps> = ({
  </p>
  </div>
 )
+
+const VideoPreview: FC<{
+ src: string
+ previewImageUrl?: string
+}> = ({ src, previewImageUrl }) => {
+ const [isInitVideoPlayer, setIsInitVideoPlayer] = useState(!previewImageUrl)
+
+ const [videoRef, setVideoRef] = useState<VideoPlayerRef | null>(null)
+ const isPaused = videoRef?.getState().paused
+ const [forceUpdate] = useForceUpdate()
+ return (
+ <div
+ onMouseEnter={() => {
+ videoRef?.controls.play()?.then(forceUpdate)
+ }}
+ onMouseLeave={() => {
+ videoRef?.controls.pause()
+ nextFrame(forceUpdate)
+ }}
+ >
+ {isInitVideoPlayer ? (
+ <img
+ src={previewImageUrl}
+ className="size-full object-cover"
+ onMouseEnter={() => {
+ setIsInitVideoPlayer(true)
+ }}
+ />
+ ) : (
+ <VideoPlayer
+ controls={false}
+ src={src}
+ ref={setVideoRef}
+ muted
+ className="relative size-full object-cover"
+ />
+ )}
+
+ <div
+ className={cn(
+ "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-3xl text-white/80 duration-200",
+ isPaused ? "opacity-100" : "opacity-0",
+ )}
+ >
+ <i className="i-mgc-play-cute-fi" />
+ </div>
+ </div>
+ )
+}