From efd5e9dcf230d9f030a8752de154d8ef164c9be7 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Mon, 13 Oct 2025 17:01:22 +0800
Subject: [PATCH] fix(video): reload video element when video id changes

Ensure the video element is properly reloaded when switching between different videos to prevent playback issues
---
 src/renderer/src/pages/video/VideoViewer.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/pages/video/VideoViewer.tsx b/src/renderer/src/pages/video/VideoViewer.tsx
index e00e32b2fd..63661c70ce 100644
--- a/src/renderer/src/pages/video/VideoViewer.tsx
+++ b/src/renderer/src/pages/video/VideoViewer.tsx
@@ -14,7 +14,7 @@ import FileManager from '@renderer/services/FileManager'
 import { Video, VideoDownloaded, VideoFailed } from '@renderer/types/video'
 import dayjs from 'dayjs'
 import { CheckCircleIcon, CircleXIcon, Clock9Icon } from 'lucide-react'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWRImmutable from 'swr/immutable'
 
@@ -184,6 +184,7 @@ const VideoPlayer = ({
   video: VideoDownloaded
   setLoadSuccess: (value: boolean) => void
 }) => {
+  const videoRef = useRef<HTMLVideoElement>(null)
   const fetcher = async () => {
     const file = await FileManager.getFile(video.fileId)
     if (!file) {
@@ -193,6 +194,13 @@ const VideoPlayer = ({
   }
   const { data: src, isLoading, error } = useSWRImmutable(`video/file/${video.id}`, fetcher)
 
+  useEffect(() => {
+    const videoElement = videoRef.current
+    if (videoElement) {
+      videoElement.load()
+    }
+  }, [video?.id])
+
   if (error) {
     setLoadSuccess(false)
   }
@@ -203,6 +211,7 @@ const VideoPlayer = ({
 
   return (
     <video
+      ref={videoRef}
       controls
       className="h-full w-full rounded-2xl bg-black object-contain"
       onLoadedData={() => setLoadSuccess(true)}