Refine player control-plane flow

src/player/public/js/player-page-commands.js

@@ -263,20 +263,33 @@ function renderSlideMarkup(markup, shouldFade) {
     });
   }
 
+  function schedulePostRenderSetup(root, delayMs) {
+    if (!root) {
+      return;
+    }
+
+    if (root.isConnected === false) {
+      return;
+    }
+
+    if (typeof syncRtmpRegions === 'function') {
+      syncRtmpRegions(root);
+    }
+
+    if (!isThumbnailPreview()) {
+      initializeRegionInstances(root);
+    }
+
+    initializeRenderedVideoPlayback(root, delayMs);
+
+    if (typeof playRegionAnimations === 'function') {
+      playRegionAnimations(root, 'intro');
+    }
+  }
+
   if (!shouldFade) {
     app.innerHTML = markup;
-    if (typeof syncRtmpRegions === 'function') {
-      syncRtmpRegions(app);
-    }
-    if (!isThumbnailPreview()) {
-      initializeRegionInstances(app);
-    }
-    initializeRenderedVideoPlayback(app);
-    if (typeof playRegionAnimations === 'function') {
-      window.requestAnimationFrame(function () {
-        playRegionAnimations(app, 'intro');
-      });
-    }
+    schedulePostRenderSetup(app, 0);
     return app.firstElementChild;
   }
 
@@ -325,11 +338,7 @@ function renderSlideMarkup(markup, shouldFade) {
     app.innerHTML = '';
     nextShell.style.opacity = '1';
     app.appendChild(nextShell);
-    if (typeof syncRtmpRegions === 'function') {
-      syncRtmpRegions(nextShell);
-    }
-    initializeRegionInstances(nextShell);
-    initializeRenderedVideoPlayback(nextShell, slideFadeDurationMs / 2);
+    schedulePostRenderSetup(nextShell, slideFadeDurationMs / 2);
     return nextShell;
   }
 
@@ -340,24 +349,12 @@ function renderSlideMarkup(markup, shouldFade) {
   pauseRenderedVideoPlayback(previousShell, slideFadeDurationMs / 2);
 
   app.appendChild(nextShell);
-  void nextShell.offsetHeight;
   window.requestAnimationFrame(function () {
     nextShell.style.opacity = '1';
     previousShell.style.opacity = '0';
-    if (typeof playRegionAnimations === 'function') {
-      playRegionAnimations(nextShell, 'intro');
-    }
+    schedulePostRenderSetup(nextShell, slideFadeDurationMs / 2);
   });
 
-  if (typeof syncRtmpRegions === 'function') {
-    syncRtmpRegions(nextShell);
-  }
-
-  if (!isThumbnailPreview()) {
-    initializeRegionInstances(nextShell);
-  }
-  initializeRenderedVideoPlayback(nextShell, slideFadeDurationMs / 2);
-
   slideTransitionTimer = window.setTimeout(function () {
     if (previousShell && previousShell.parentNode) {
       previousShell.parentNode.removeChild(previousShell);