Fix video player flickering when changing watched state

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

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());

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">