mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2025-12-28 13:31:32 +08:00
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:
parent
3b69b2bc49
commit
efd5e9dcf2
@ -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)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user