Programmiererforum

import { Button } from '@/components/ui/button';
import { useEffect, useState } from 'react';

interface DidAvatarProps {
resultUrl?: string;
handleCallDisconnect: () => void;
onAudioCompletion: () => void;
}

const DidAvatar = ({ resultUrl, handleCallDisconnect, onAudioCompletion }: DidAvatarProps) => {
const idleVideo = '/assets/didAnimation/maryIdle.mp4';
const [videoSrc, setVideoSrc] = useState(resultUrl || idleVideo);

useEffect(() => {
// Whenever resultUrl changes, reset the video source
if (resultUrl) {
setVideoSrc(resultUrl);
} else {
setVideoSrc(idleVideo);
}
}, [resultUrl]);

const handleEnded = () => {
setVideoSrc(idleVideo);
onAudioCompletion();
};

return (






Fist video




);
};

export default DidAvatar;

Ich erstelle eine React -Komponente, in der ich nacheinander Videos abspielen muss. Die nächste Video -URL wird vom Server erst nach dem aktuellen Abschluss empfangen. Ich möchte, dass sich der Übergang glatt anfühlt, wie eine nahtlose Fortsetzung ohne visuelles Flackern.[code]import { Button } from '@/components/ui/button';
import { useEffect, useState } from 'react';

interface DidAvatarProps {
resultUrl?: string;
handleCallDisconnect: () => void;
onAudioCompletion: () => void;
}

const DidAvatar = ({ resultUrl, handleCallDisconnect, onAudioCompletion }: DidAvatarProps) => {
const idleVideo = '/assets/didAnimation/maryIdle.mp4';
const [videoSrc, setVideoSrc] = useState(resultUrl || idleVideo);

useEffect(() => {
// Whenever resultUrl changes, reset the video source
if (resultUrl) {
setVideoSrc(resultUrl);
} else {
setVideoSrc(idleVideo);
}
}, [resultUrl]);

const handleEnded = () => {
setVideoSrc(idleVideo);
onAudioCompletion();
};

return (






Fist video




);
};

export default DidAvatar;

[/code]
`
Was ich möchte:
Wenn ein Video endet und ich ein neues Ergebnis aus dem Server erhalte, sollte er sofort ohne Flash/Glitch abspielen.>