From 4a67da12f75dfaaa52a9c6a38bf37884d80dd30e Mon Sep 17 00:00:00 2001
From: MerlinScheurer <merlin.scheurer@Yahoo.de>
Date: Wed, 29 Jan 2025 20:02:01 +0100
Subject: [PATCH] Fix video player flickering when changing watched state

---
 .../src/components/EmbeddableVideoPlayer.tsx   | 14 ++++++--------
 frontend/src/components/VideoPlayer.tsx        |  1 +
 frontend/src/pages/Video.tsx                   | 18 ++++++++----------
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/EmbeddableVideoPlayer.tsx b/frontend/src/components/EmbeddableVideoPlayer.tsx
index 53eb198a..2210a570 100644
--- a/frontend/src/components/EmbeddableVideoPlayer.tsx
+++ b/frontend/src/components/EmbeddableVideoPlayer.tsx
@@ -98,14 +98,12 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
     <>
       <div ref={inlinePlayerRef} className="player-wrapper">
         <div className="video-player">
-          {!loading && (
-            <VideoPlayer
-              video={videoResponse}
-              sponsorBlock={sponsorblock}
-              embed={true}
-              autoplay={true}
-            />
-          )}
+          <VideoPlayer
+            video={videoResponse}
+            sponsorBlock={sponsorblock}
+            embed={true}
+            autoplay={true}
+          />
 
           <div className="player-title boxed-content">
             <img
diff --git a/frontend/src/components/VideoPlayer.tsx b/frontend/src/components/VideoPlayer.tsx
index d217b118..216b9bb7 100644
--- a/frontend/src/components/VideoPlayer.tsx
+++ b/frontend/src/components/VideoPlayer.tsx
@@ -162,6 +162,7 @@ const VideoPlayer = ({
       <div id="player" className={embed ? '' : 'player-wrapper'}>
         <div className={embed ? '' : 'video-main'}>
           <video
+            key={`${getApiUrl()}${videoUrl}`}
             poster={`${getApiUrl()}${videoThumbUrl}`}
             onVolumeChange={(videoTag: VideoTag) => {
               localStorage.setItem('playerVolume', videoTag.currentTarget.volume.toString());
diff --git a/frontend/src/pages/Video.tsx b/frontend/src/pages/Video.tsx
index 09dca1eb..a6f5ac20 100644
--- a/frontend/src/pages/Video.tsx
+++ b/frontend/src/pages/Video.tsx
@@ -214,16 +214,14 @@ const Video = () => {
       <title>{`TA | ${video.title}`}</title>
       <ScrollToTopOnNavigate />
 
-      {!loading && (
-        <VideoPlayer
-          video={videoResponse}
-          sponsorBlock={sponsorBlock}
-          autoplay={playlistAutoplay}
-          onVideoEnd={() => {
-            setVideoEnded(true);
-          }}
-        />
-      )}
+      <VideoPlayer
+        video={videoResponse}
+        sponsorBlock={sponsorBlock}
+        autoplay={playlistAutoplay}
+        onVideoEnd={() => {
+          setVideoEnded(true);
+        }}
+      />
 
       <div className="boxed-content">
         <div className="title-bar">