pulse-signage/src/player/public/js/player-page-playback.js

// Render the slide at the requested index within the active set.
async function renderSlideAtIndex(sourceSlides, targetIndex) {
  const availableSlides = Array.isArray(sourceSlides) ? sourceSlides : [];
  if (!availableSlides.length) {
    renderEmpty(slides.length ? 'No slides are scheduled for this time.' : 'No slides assigned to this screen yet.');
    lastRenderedViewKey = getCurrentRenderKey(availableSlides);
    return false;
  }

  let normalizedIndex = Number(targetIndex || 0);
  if (!Number.isFinite(normalizedIndex) || normalizedIndex < 0 || normalizedIndex >= availableSlides.length) {
  }

  var slideCount = availableSlides.length;
  var currentIndex = normalizedIndex;
  var slide = null;
  var attempts = 0;
  var renderRequestId = ++slideRenderRequestId;

  while (attempts < slideCount) {
    slide = availableSlides[currentIndex];
    if (!slide) {
      break;
    }
    if (currentPlaylistSkipUnavailableRtmp && typeof probeRtmpSlideAvailability === 'function') {
      var isAvailable = await probeRtmpSlideAvailability(slide);
      if (!isAvailable) {
        if (renderRequestId !== slideRenderRequestId) {
          return false;
        }
        currentIndex = (currentIndex + 1) % slideCount;
        attempts += 1;
        slide = null;
        continue;
      }
    }
    if (renderRequestId !== slideRenderRequestId) {
      break;
    }
    break;
  }

  if (!slide) {
    if (currentPlaylistSkipUnavailableRtmp) {
      renderEmpty(slides.length ? 'No RTMP slides are currently available.' : 'No slides assigned to this screen yet.');
      lastRenderedViewKey = getCurrentRenderKey(availableSlides);
      scheduleRefreshRetry();
      return false;
    }
    renderEmpty(slides.length ? 'No slides are scheduled for this time.' : 'No slides assigned to this screen yet.');
    return false;
  }

  index = currentIndex;
  var markup = buildSlideMarkup(slide);
  renderSlideMarkup(markup, currentPlaylistFadeBetweenSlides);
  sendCommandState(slide);
  if (!isPaused) {
    scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(slide.duration_seconds || 10)) * 1000));
  }
  lastRenderedViewKey = getCurrentRenderKey(availableSlides);
  return true;
}

// Promote a deferred playlist update at the next safe point.
function applyPendingPlaylistUpdate() {
  if (!pendingPlaylistUpdate) {
    return false;
  }
  slides = pendingPlaylistUpdate.slides;
  currentPlaylistSignature = pendingPlaylistUpdate.signature;
  currentPlaylistFadeBetweenSlides = pendingPlaylistUpdate.fadeBetweenSlides;
  currentPlaylistSkipUnavailableRtmp = Boolean(pendingPlaylistUpdate.skipUnavailableRtmp);
  pendingPlaylistUpdate = null;
  clearActiveSlidesCache();
  slideMarkupCache = Object.create(null);
  templateLayoutCache = Object.create(null);
  templateRenderPlanCache = Object.create(null);
  renderCacheViewportKey = window.innerWidth + 'x' + window.innerHeight;
  index = 0;
  logDebug('Applied updated playlist on slide transition.');
  return true;
}

// Render the current active slide or the empty state.
function showCurrent() {
  clearSlideTimer();
  applyPendingPlaylistUpdate();
  const activeSlides = getCurrentActiveSlides();
  syncWebpagePreloads(activeSlides, index);
  if (typeof syncRtmpWarmups === 'function') {
    syncRtmpWarmups(activeSlides, index);
  }
  if (!activeSlides.length) {
    renderEmpty(slides.length ? 'No slides are scheduled for this time.' : 'No slides assigned to this screen yet.');
    lastRenderedViewKey = getCurrentRenderKey(activeSlides);
    return;
  }
  void renderSlideAtIndex(activeSlides, index);
  lastRenderedViewKey = getCurrentRenderKey(activeSlides);
}

// Skip the current slide when an RTMP feed is unavailable and the playlist asks for it.
function handleRtmpPlaybackFailure(message, options) {
  if (!currentPlaylistSkipUnavailableRtmp) {
    return false;
  }

  var silent = Boolean(options && options.silent);
  const activeSlides = getCurrentActiveSlides();
  if (!activeSlides.length) {
    return false;
  }

  clearSlideTimer();
  if (!silent) {
    logDebug('Skipping RTMP slide because the stream is unavailable.', String(message || ''), 'error');
  }

  const nextIndex = (Number(index || 0) + 1) % activeSlides.length;
  window.setTimeout(function () {
    if (!getCurrentActiveSlides().length) {
      return;
    }
    void renderSlideAtIndex(getCurrentActiveSlides(), nextIndex);
  }, 0);
  return true;
}

// Fetch the latest playlist and queue any updates.
function refresh() {
  var request = new XMLHttpRequest();
  var url = window.location.origin + '/api/screens/' + encodeURIComponent(slug) + '/playlist?ts=' + Date.now();
  request.open('GET', url, true);
  request.timeout = 2500;
  if (window.__pulsePageAuthToken) {
    request.setRequestHeader('x-pulse-page-auth', window.__pulsePageAuthToken);
  }
  if (currentPlaylistEtag) {
    request.setRequestHeader('If-None-Match', currentPlaylistEtag);
  }
  request.onreadystatechange = function () {
    if (request.readyState !== 4) {
      return;
    }
    if (request.status === 304) {
      markRefreshHealthy();
      setOfflineBannerVisible(false);
      if (lastRenderedSlide && getCurrentActiveSlides().length < 2) {
        scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
      }
      return;
    }
    if (request.status < 200 || request.status >= 300) {
      setOfflineBannerVisible(true);
      scheduleRefreshRetry();
      logDebug(
        'Screen not found or playlist unavailable.',
        ['URL: ' + url, 'Status: ' + request.status + ' ' + request.statusText, 'Response: ' + String(request.responseText || '').slice(0, 1000)].join(' | '),
        'error'
      );
      return;
    }
    try {
      const responseEtag = String(request.getResponseHeader('ETag') || '').trim();
      const data = JSON.parse(request.responseText || '{}');
      const nextSignature = getPlaylistRevision(data);
      const nextSlides = Array.isArray(data.slides) ? data.slides.map(normalizeSlide) : [];
      const nextFadeBetweenSlides = Boolean(data && data.playlist && data.playlist.fade_between_slides);
      const nextSkipUnavailableRtmp = Boolean(data && data.playlist && data.playlist.skip_unavailable_rtmp);
      savePlaylistSnapshot({
        slides: nextSlides,
        signature: nextSignature,
        fadeBetweenSlides: nextFadeBetweenSlides,
        skipUnavailableRtmp: nextSkipUnavailableRtmp,
        etag: responseEtag
      });
      markRefreshHealthy();
      setOfflineBannerVisible(false);
      const currentActiveSlides = getCurrentActiveSlides();
      if (responseEtag) {
        currentPlaylistEtag = responseEtag;
      }
      if (!currentPlaylistSignature) {
        slides = nextSlides;
        currentPlaylistSignature = nextSignature;
        currentPlaylistFadeBetweenSlides = nextFadeBetweenSlides;
        currentPlaylistSkipUnavailableRtmp = nextSkipUnavailableRtmp;
        index = 0;
        showCurrent();
        sendCommandState(lastRenderedSlide);
        return;
      }
      if (nextSignature === currentPlaylistSignature || (pendingPlaylistUpdate && nextSignature === pendingPlaylistUpdate.signature)) {
        if (currentActiveSlides.length < 2 && lastRenderedSlide) {
          scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
        }
        return;
      }
      syncWebpagePreloads(getActiveSlidesFrom(nextSlides), index);
      if (typeof syncRtmpWarmups === 'function') {
        syncRtmpWarmups(getActiveSlidesFrom(nextSlides), index);
      }
      if (currentActiveSlides.length < 2) {
        slides = nextSlides;
        currentPlaylistSignature = nextSignature;
        currentPlaylistFadeBetweenSlides = nextFadeBetweenSlides;
        currentPlaylistSkipUnavailableRtmp = nextSkipUnavailableRtmp;
        pendingPlaylistUpdate = null;
        index = 0;
        showCurrent();
        sendCommandState(lastRenderedSlide);
        return;
      }
      pendingPlaylistUpdate = {
        slides: nextSlides,
        signature: nextSignature,
        fadeBetweenSlides: nextFadeBetweenSlides,
        skipUnavailableRtmp: nextSkipUnavailableRtmp
      };
      logDebug('Playlist update detected; applying on next slide transition.');
    } catch (_error) {
      logDebug(
        'Unable to load screen playlist.',
        ['URL: ' + url, 'Response: ' + String(request.responseText || '').slice(0, 1000)].join(' | '),
        'error'
      );
      setOfflineBannerVisible(true);
      scheduleRefreshRetry();
    }
  };
  request.onerror = function () {
    logDebug(
      'Unable to load screen playlist.',
      ['URL: ' + url, 'Network error during request.'].join(' | '),
      'error'
    );
      setOfflineBannerVisible(true);
      scheduleRefreshRetry();
    if (lastRenderedSlide && getCurrentActiveSlides().length < 2) {
      scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
    }
  };
  request.ontimeout = function () {
    logDebug(
      'Playlist refresh timed out.',
      ['URL: ' + url, 'Timeout after ' + request.timeout + 'ms'].join(' | '),
      'error'
    );
    setOfflineBannerVisible(true);
    scheduleRefreshRetry();
    if (lastRenderedSlide && getCurrentActiveSlides().length < 2) {
      scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
    }
  };
  request.send();
}