Avoid reloading synced YouTube playback retries

public/app.js

@@ -48,6 +48,7 @@ let pauseEnforcementUntil = 0;
 let desiredYoutubePlaying = false;
 let pendingWatchState = null;
 let pendingWatchStateOptions = null;
+let youtubePlaybackRequestId = 0;
 let watchPlaylist = [];
 const peers = new Map();
 
@@ -305,11 +306,14 @@ async function ensureYoutubePlayer() {
       controls: 1,
       disablekb: 0,
       modestbranding: 1,
+      playsinline: 1,
       rel: 0
     },
     events: {
       onReady: () => {
         youtubeReady = true;
+        const iframe = youtubePlayer?.getIframe?.();
+        iframe?.setAttribute("allow", "autoplay; encrypted-media; fullscreen; picture-in-picture");
         if (pendingWatchState) {
           const state = pendingWatchState;
           const options = pendingWatchStateOptions || {};
@@ -325,11 +329,18 @@ async function ensureYoutubePlayer() {
 }
 
 function requestYoutubePlayback(player, videoId, position) {
+  const requestId = ++youtubePlaybackRequestId;
   const startedAt = Date.now();
 
-  for (const delay of [0, 150, 750, 1500, 3000, 5000]) {
+  for (const delay of [0, 150, 750, 1500, 3000]) {
     setTimeout(() => {
-      if (!desiredYoutubePlaying || currentYoutubeVideoId !== videoId) return;
+      if (
+        requestId !== youtubePlaybackRequestId ||
+        !desiredYoutubePlaying ||
+        currentYoutubeVideoId !== videoId
+      ) {
+        return;
+      }
 
       const playerState = player.getPlayerState?.();
       if (playerState === YT.PlayerState.PLAYING) return;
@@ -338,10 +349,13 @@ function requestYoutubePlayback(player, videoId, position) {
       const nextPosition = Math.max(0, position + elapsed);
       const loadedVideoId = player.getVideoData?.().video_id;
       if (
-        loadedVideoId !== videoId ||
-        [YT.PlayerState.UNSTARTED, YT.PlayerState.CUED, YT.PlayerState.ENDED].includes(playerState)
+        loadedVideoId === videoId &&
+        ![YT.PlayerState.CUED, YT.PlayerState.UNSTARTED].includes(playerState)
       ) {
-        player.loadVideoById(videoId, nextPosition);
+        player.seekTo(nextPosition, true);
+      }
+      if (delay >= 1500) {
+        player.mute?.();
       }
       player.playVideo();
     }, delay);
@@ -440,6 +454,7 @@ async function applyWatchState(state, { suppressEvents = true } = {}) {
 
   if (!currentYoutubeVideoId) {
     desiredYoutubePlaying = false;
+    youtubePlaybackRequestId++;
     youtubePlayer?.stopVideo?.();
     youtubeShell.classList.remove("is-active");
     setWatchCollapsed(true);
@@ -458,6 +473,7 @@ async function applyWatchState(state, { suppressEvents = true } = {}) {
   if (shouldPlay) {
     pauseEnforcementUntil = 0;
   } else {
+    youtubePlaybackRequestId++;
     pauseEnforcementUntil = Math.max(pauseEnforcementUntil, Date.now() + 3000);
   }