Files
jRay/Jellyfin.Plugin.JRay/Web/jray-overlay.js
T
dtourolleandClaude Opus 5 c04d5a3dcc JR-004, JR-005, JR-006: scene-scoped read path
Presence was decided by a LINQ predicate inline in the controller, so the
semantics SR-002 sets were nowhere stated in code -- the read path complied by
accident rather than by requirement. PresenceLookup is now the unit that
decides, tagged, with the reasoning next to it.

JR-004: windows are served exactly as given. UT-021 pins that [0,10] and
[10,20] are not merged despite looking mergeable -- two windows mean a genuine
departure and return, and collapsing them answers a different question from the
one the truth file asked. UT-022 pins a byte-identical round trip.

JR-005: bounds inclusive at both ends, zero-length windows are real sightings
rather than degenerate ones to discard, overlaps resolve.

The wording was the larger half of JR-005. The overlay rendered a bare list: it
asserted nothing, but told the viewer nothing either, and the default reading of
a paused frame is "these people are on screen" -- exactly what SR-002 forbids.
It now carries an "In this scene" heading. ActorAtTime became ActorInScene, and
README no longer contains "on screen" anywhere; it stated the forbidden reading
outright in seven places, including the opening sentence.

JR-006: measured rather than assumed. UT-023 builds 50 actors x 1000 windows and
asserts the response is bounded by actor count, never window count. The lookup
is a full scan on purpose -- an early exit on `start > t` would exploit the
sortedness the format requires, but would silently under-report the moment one
producer emitted windows out of order. UT-020 pins that unsorted input still
resolves; WindowsAreSorted is a diagnostic, not a correctness dependency.

Third mutation check: making the end bound exclusive fails UT-016 and UT-018 and
nothing else. One character turns an inclusive window into a half-open one,
dropping an actor at exactly the moment a scene ends.

TRACES: UT-016, UT-017, UT-018, UT-019, UT-020, UT-021, UT-022, UT-023
TRACES: JR-004, JR-005, JR-006 | SR-002

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-31 11:29:46 +02:00

360 lines
12 KiB
JavaScript

/*
* JRay pause overlay: lists the cast of the scene the viewer paused in.
*
* Presence is scene-scoped. An actor who has turned away, is occluded, or is
* off-camera during a reverse shot is still in the scene, so this must not be
* presented as "who is visible right now" — that is a different, and weaker,
* claim than the data makes.
*
* Every server-supplied string is written with textContent, never innerHTML.
* With the manifest exchange these strings may originate from a third-party
* server, and this is the one control that holds even if every other check is
* bypassed.
*
* TRACES: JR-005, JR-020, JR-024 | SR-002, SR-004
*/
(function () {
'use strict';
var POLL_INTERVAL_MS = 1000;
var OVERVIEW_MAX_LENGTH = 160;
var overlayEl = null;
var detailEl = null;
var personCache = {};
function truncate(text, maxLength) {
if (text.length <= maxLength) {
return text;
}
return text.slice(0, maxLength).trim() + '…';
}
function getPerson(jellyfinId) {
if (personCache[jellyfinId]) {
return personCache[jellyfinId];
}
var promise = window.ApiClient.getItem(window.ApiClient.getCurrentUserId(), jellyfinId)
.catch(function () {
return null;
});
personCache[jellyfinId] = promise;
return promise;
}
function getNowPlaying() {
if (!window.ApiClient) {
return Promise.reject(new Error('no ApiClient'));
}
var url = window.ApiClient.getUrl('Sessions', { DeviceId: window.ApiClient.deviceId() });
return window.ApiClient.ajax({ url: url, type: 'GET', dataType: 'json' }).then(function (sessions) {
var session = sessions && sessions[0];
if (!session || !session.NowPlayingItem || !session.PlayState) {
return null;
}
return {
itemId: session.NowPlayingItem.Id,
positionSeconds: (session.PlayState.PositionTicks || 0) / 10000000
};
});
}
function removeDetail() {
if (detailEl && detailEl.parentNode) {
detailEl.parentNode.removeChild(detailEl);
}
detailEl = null;
document.removeEventListener('keydown', onDetailKeydown, true);
}
function removeOverlay() {
removeDetail();
if (overlayEl && overlayEl.parentNode) {
overlayEl.parentNode.removeChild(overlayEl);
}
overlayEl = null;
}
function onDetailKeydown(event) {
// Back button on TV remotes / keyboards maps to Escape / Backspace.
if (event.key === 'Escape' || event.key === 'Backspace' || event.keyCode === 27 || event.keyCode === 8) {
event.stopPropagation();
event.preventDefault();
removeDetail();
}
}
// A larger, closeable "pop-up" card shown over the video when an actor is
// clicked. It stays inside the player so playback position is never lost.
function showDetail(container, actor, person) {
removeDetail();
detailEl = document.createElement('div');
detailEl.className = 'jrayActorDetail';
detailEl.style.position = 'absolute';
detailEl.style.top = '0';
detailEl.style.left = '0';
detailEl.style.right = '0';
detailEl.style.bottom = '0';
detailEl.style.zIndex = '10000';
detailEl.style.display = 'flex';
detailEl.style.alignItems = 'center';
detailEl.style.justifyContent = 'center';
detailEl.style.background = 'rgba(0, 0, 0, 0.6)';
detailEl.style.pointerEvents = 'auto';
// Click on the dimmed backdrop closes the pop-up.
detailEl.addEventListener('click', function (event) {
if (event.target === detailEl) {
removeDetail();
}
});
var panel = document.createElement('div');
panel.style.position = 'relative';
panel.style.display = 'flex';
panel.style.gap = '24px';
panel.style.maxWidth = '720px';
panel.style.width = '80%';
panel.style.maxHeight = '80%';
panel.style.overflowY = 'auto';
panel.style.background = 'rgba(20, 20, 20, 0.96)';
panel.style.color = '#fff';
panel.style.padding = '24px';
panel.style.borderRadius = '10px';
panel.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.6)';
if (person && person.ImageTags && person.ImageTags.Primary) {
var img = document.createElement('img');
img.src = window.ApiClient.getImageUrl(actor.jellyfin_id, {
type: 'Primary',
maxHeight: 400,
tag: person.ImageTags.Primary
});
img.style.height = '300px';
img.style.width = 'auto';
img.style.borderRadius = '8px';
img.style.objectFit = 'cover';
img.style.flexShrink = '0';
panel.appendChild(img);
}
var text = document.createElement('div');
text.style.flex = '1';
var name = document.createElement('div');
name.style.fontWeight = 'bold';
name.style.fontSize = '24px';
name.style.marginBottom = '12px';
name.textContent = actor.name;
text.appendChild(name);
if (person && person.Overview) {
var overview = document.createElement('div');
overview.style.fontSize = '15px';
overview.style.lineHeight = '1.5';
overview.style.opacity = '0.9';
overview.textContent = person.Overview;
text.appendChild(overview);
}
panel.appendChild(text);
var closeBtn = document.createElement('button');
closeBtn.type = 'button';
closeBtn.setAttribute('aria-label', 'Close');
closeBtn.textContent = '✕';
closeBtn.style.position = 'absolute';
closeBtn.style.top = '8px';
closeBtn.style.right = '8px';
closeBtn.style.width = '32px';
closeBtn.style.height = '32px';
closeBtn.style.border = 'none';
closeBtn.style.borderRadius = '50%';
closeBtn.style.background = 'rgba(255, 255, 255, 0.15)';
closeBtn.style.color = '#fff';
closeBtn.style.fontSize = '16px';
closeBtn.style.cursor = 'pointer';
closeBtn.addEventListener('click', function (event) {
event.stopPropagation();
removeDetail();
});
panel.appendChild(closeBtn);
detailEl.appendChild(panel);
container.appendChild(detailEl);
// Back button (Escape/Backspace) closes the pop-up first.
document.addEventListener('keydown', onDetailKeydown, true);
}
function showOverlay(video, actors) {
removeOverlay();
if (!actors || actors.length === 0) {
return;
}
var container = video.parentElement;
if (!container) {
return;
}
overlayEl = document.createElement('div');
overlayEl.className = 'jrayOverlay';
overlayEl.style.position = 'absolute';
overlayEl.style.bottom = '10%';
overlayEl.style.left = '2%';
overlayEl.style.zIndex = '9999';
overlayEl.style.display = 'flex';
overlayEl.style.flexWrap = 'wrap';
overlayEl.style.gap = '12px';
overlayEl.style.pointerEvents = 'none';
// "In this scene", not "on screen now". Presence is scene-scoped, so
// this list includes people the camera is not currently pointing at —
// without the heading a viewer reads a paused frame and concludes the
// overlay is wrong whenever someone is off-camera mid-conversation.
var heading = document.createElement('div');
heading.className = 'jrayOverlayHeading';
heading.textContent = 'In this scene';
heading.style.width = '100%';
heading.style.color = '#fff';
heading.style.opacity = '0.75';
heading.style.fontSize = '13px';
heading.style.textTransform = 'uppercase';
heading.style.letterSpacing = '0.08em';
heading.style.textShadow = '0 1px 3px rgba(0,0,0,0.9)';
overlayEl.appendChild(heading);
actors.forEach(function (actor) {
var card = document.createElement('div');
card.className = 'jrayActorCard';
card.style.background = 'rgba(0, 0, 0, 0.75)';
card.style.color = '#fff';
card.style.padding = '8px 12px';
card.style.borderRadius = '6px';
card.style.display = 'flex';
card.style.alignItems = 'center';
card.style.gap = '10px';
card.style.maxWidth = '360px';
var textBlock = document.createElement('div');
var name = document.createElement('div');
name.style.fontWeight = 'bold';
name.style.fontSize = '16px';
name.textContent = actor.name;
textBlock.appendChild(name);
card.appendChild(textBlock);
overlayEl.appendChild(card);
if (!actor.jellyfin_id || !window.ApiClient) {
return;
}
card.style.pointerEvents = 'auto';
card.style.cursor = 'pointer';
getPerson(actor.jellyfin_id).then(function (person) {
if (!person || !overlayEl || !overlayEl.contains(card)) {
return;
}
// Clicking the card opens the in-player detail pop-up rather than
// navigating away — this keeps the current playback position.
card.addEventListener('click', function (event) {
event.stopPropagation();
showDetail(container, actor, person);
});
if (person.ImageTags && person.ImageTags.Primary) {
var img = document.createElement('img');
img.src = window.ApiClient.getImageUrl(actor.jellyfin_id, {
type: 'Primary',
maxHeight: 120,
tag: person.ImageTags.Primary
});
img.style.height = '120px';
img.style.width = 'auto';
img.style.borderRadius = '4px';
img.style.objectFit = 'cover';
card.insertBefore(img, textBlock);
}
if (person.Overview) {
var overview = document.createElement('div');
overview.style.fontSize = '12px';
overview.style.opacity = '0.85';
overview.style.marginTop = '4px';
overview.textContent = truncate(person.Overview, OVERVIEW_MAX_LENGTH);
textBlock.appendChild(overview);
}
});
});
container.appendChild(overlayEl);
}
function fetchContext(itemId, t) {
if (!window.ApiClient) {
return;
}
var url = window.ApiClient.getUrl('Plugins/JRay/Items/' + itemId + '/jray', { t: t });
window.ApiClient.ajax({ url: url, type: 'GET', dataType: 'json' }).then(function (context) {
var video = document.querySelector('video');
if (!video || !video.paused) {
return;
}
showOverlay(video, context.actors);
}, function () {
// No truth data (404) or request error - fail silently, never break playback.
});
}
function onPause() {
getNowPlaying().then(function (info) {
if (info) {
fetchContext(info.itemId, info.positionSeconds);
}
}, function () {
// ApiClient unavailable or request error - fail silently, never break playback.
});
}
function onPlay() {
removeOverlay();
}
function attach(video) {
if (video.dataset.jrayAttached) {
return;
}
video.dataset.jrayAttached = 'true';
video.addEventListener('pause', onPause);
video.addEventListener('play', onPlay);
video.addEventListener('playing', onPlay);
video.addEventListener('seeking', removeOverlay);
}
setInterval(function () {
var video = document.querySelector('video');
if (video) {
attach(video);
} else {
removeOverlay();
}
}, POLL_INTERVAL_MS);
})();