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
This commit is contained in:
icarus 2025-10-13 17:01:22 +08:00
parent 3b69b2bc49
commit efd5e9dcf2

View File

@ -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)}