Release 2.21.0: non-destructive media and scoped player sync

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

@@ -1,3 +1,70 @@
+async function waitForSlideImages(markup, renderRequestId) {
+  if (typeof Image !== 'function' || typeof document === 'undefined') return markup;
+  var template = document.createElement('template');
+  template.innerHTML = markup;
+  var sources = Array.from(new Set(Array.from(template.content.querySelectorAll('img[src]')).map(function (image) { return image.getAttribute('src'); }).filter(Boolean)));
+  if (!sources.length) return markup;
+  if (!lastRenderedViewKey && !app.querySelector('.player-media-loading')) {
+    var loading = document.createElement('div');
+    loading.className = 'empty player-media-loading';
+    loading.setAttribute('role', 'status');
+    loading.setAttribute('aria-live', 'polite');
+    loading.innerHTML = '<span class="player-media-loading-spinner" aria-hidden="true"></span><span>Loading media...</span>';
+    app.appendChild(loading);
+  }
+  async function loadSource(source) {
+    var attempt = 0;
+    var loadedUrl = source;
+    while (renderRequestId === slideRenderRequestId) {
+      var ready = await new Promise(function (resolve) {
+        var image = new Image();
+        var settled = false;
+        var timeout;
+        function finish(value) {
+          if (settled) return;
+          settled = true;
+          window.clearTimeout(timeout);
+          image.onload = null;
+          image.onerror = null;
+          resolve(value);
+        }
+        image.onload = async function () {
+          try {
+            if (typeof image.decode === 'function') await image.decode();
+            loadedUrl = image.src;
+            finish(image.naturalWidth > 0);
+          } catch (_error) { finish(false); }
+        };
+        image.onerror = function () { finish(false); };
+        timeout = window.setTimeout(function () { finish(false); }, 10000);
+        var url = source;
+        if (attempt) {
+          try {
+            var retryUrl = new URL(source, window.location.href);
+            if (retryUrl.origin === window.location.origin && retryUrl.pathname.startsWith('/media/')) {
+              retryUrl.searchParams.set('_mediaReady', String(Date.now()));
+              url = retryUrl.toString();
+            }
+          } catch (_error) {}
+        }
+        image.src = url;
+      });
+      if (ready) {
+        if (loadedUrl !== source) template.content.querySelectorAll('img[src]').forEach(function (element) {
+          if (element.getAttribute('src') === source) element.setAttribute('src', loadedUrl);
+        });
+        return renderRequestId === slideRenderRequestId;
+      }
+      if (renderRequestId !== slideRenderRequestId) return false;
+      attempt += 1;
+      await new Promise(function (resolve) { window.setTimeout(resolve, Math.min(1000 * attempt, 5000)); });
+    }
+    return false;
+  }
+  var results = await Promise.all(sources.map(loadSource));
+  return renderRequestId === slideRenderRequestId && results.every(Boolean) ? template.innerHTML : false;
+}
+
 // Slide media startup and teardown helpers.
 
 var renderedVideoPlaybackCleanup = new WeakMap();