Fix video player flickering when changing watched state

This commit is contained in:
MerlinScheurer
2025-01-29 20:02:01 +01:00
parent 1c643bef8e
commit 4a67da12f7
3 changed files with 15 additions and 18 deletions

View File

@@ -98,14 +98,12 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
<> <>
<div ref={inlinePlayerRef} className="player-wrapper"> <div ref={inlinePlayerRef} className="player-wrapper">
<div className="video-player"> <div className="video-player">
{!loading && ( <VideoPlayer
<VideoPlayer video={videoResponse}
video={videoResponse} sponsorBlock={sponsorblock}
sponsorBlock={sponsorblock} embed={true}
embed={true} autoplay={true}
autoplay={true} />
/>
)}
<div className="player-title boxed-content"> <div className="player-title boxed-content">
<img <img

View File

@@ -162,6 +162,7 @@ const VideoPlayer = ({
<div id="player" className={embed ? '' : 'player-wrapper'}> <div id="player" className={embed ? '' : 'player-wrapper'}>
<div className={embed ? '' : 'video-main'}> <div className={embed ? '' : 'video-main'}>
<video <video
key={`${getApiUrl()}${videoUrl}`}
poster={`${getApiUrl()}${videoThumbUrl}`} poster={`${getApiUrl()}${videoThumbUrl}`}
onVolumeChange={(videoTag: VideoTag) => { onVolumeChange={(videoTag: VideoTag) => {
localStorage.setItem('playerVolume', videoTag.currentTarget.volume.toString()); localStorage.setItem('playerVolume', videoTag.currentTarget.volume.toString());

View File

@@ -214,16 +214,14 @@ const Video = () => {
<title>{`TA | ${video.title}`}</title> <title>{`TA | ${video.title}`}</title>
<ScrollToTopOnNavigate /> <ScrollToTopOnNavigate />
{!loading && ( <VideoPlayer
<VideoPlayer video={videoResponse}
video={videoResponse} sponsorBlock={sponsorBlock}
sponsorBlock={sponsorBlock} autoplay={playlistAutoplay}
autoplay={playlistAutoplay} onVideoEnd={() => {
onVideoEnd={() => { setVideoEnded(true);
setVideoEnded(true); }}
}} />
/>
)}
<div className="boxed-content"> <div className="boxed-content">
<div className="title-bar"> <div className="title-bar">