Refine player control-plane flow

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

@@ -84,7 +84,7 @@ function getCurrentRenderKey(activeSlides) {
   return [currentPlaylistSignature || '', viewportKey, 'slide', slide && slide.id ? slide.id : ''].join('|');
 }
 
-// Pick the current slide and the next slide for webpage preloading.
+// Pick the next slide for webpage preloading.
 function getWebpagePreloadSlides(sourceSlides, targetIndex) {
   const availableSlides = Array.isArray(sourceSlides) ? sourceSlides : [];
   if (!availableSlides.length) {
@@ -97,19 +97,71 @@ function getWebpagePreloadSlides(sourceSlides, targetIndex) {
   }
 
   const preloadSlides = [];
-  const currentSlide = availableSlides[normalizedIndex];
   const nextSlide = availableSlides[normalizedIndex + 1];
 
-  if (currentSlide) {
-    preloadSlides.push(currentSlide);
-  }
-  if (nextSlide && nextSlide !== currentSlide) {
+  if (nextSlide) {
     preloadSlides.push(nextSlide);
   }
 
   return preloadSlides;
 }
 
+// Pick the next slide to warm its markup before it becomes visible.
+function getSlideMarkupPreloadSlides(sourceSlides, targetIndex) {
+  const availableSlides = Array.isArray(sourceSlides) ? sourceSlides : [];
+  if (!availableSlides.length) {
+    return [];
+  }
+
+  let normalizedIndex = Number(targetIndex || 0);
+  if (!Number.isFinite(normalizedIndex) || normalizedIndex < 0 || normalizedIndex >= availableSlides.length) {
+    normalizedIndex = 0;
+  }
+
+  const preloadSlides = [];
+  const nextSlide = availableSlides[normalizedIndex + 1];
+
+  if (nextSlide) {
+    preloadSlides.push(nextSlide);
+  }
+
+  return preloadSlides;
+}
+
+function scheduleSlideMarkupPreload(sourceSlides, targetIndex) {
+  if (window.__pulseThumbnailPreview) {
+    return;
+  }
+
+  const preloadSlides = getSlideMarkupPreloadSlides(sourceSlides, targetIndex);
+  if (!preloadSlides.length || typeof primeSlideMarkup !== 'function') {
+    return;
+  }
+
+  const slide = preloadSlides[0];
+  const preloadSignature = [
+    currentPlaylistSignature || '',
+    slide && slide.id ? slide.id : '',
+    slide && slide.template_id ? slide.template_id : '',
+    slide && slide.modified_at ? slide.modified_at : '',
+    window.innerWidth + 'x' + window.innerHeight,
+    videoRegionRenderVersion || 0
+  ].join('|');
+
+  if (scheduleSlideMarkupPreload.signature === preloadSignature) {
+    return;
+  }
+
+  scheduleSlideMarkupPreload.signature = preloadSignature;
+
+  window.setTimeout(function () {
+    if (scheduleSlideMarkupPreload.signature !== preloadSignature) {
+      return;
+    }
+    primeSlideMarkup(slide);
+  }, 0);
+}
+
 // Mount hidden iframe preloads for the chosen webpage URLs.
 function syncWebpagePreloads(sourceSlides, targetIndex) {
   const urls = getWebpageUrls(getWebpagePreloadSlides(sourceSlides, targetIndex));