124 lines
3.6 KiB
JavaScript
124 lines
3.6 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
var POLL_INTERVAL_MS = 1000;
|
|
var overlayEl = null;
|
|
|
|
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 removeOverlay() {
|
|
if (overlayEl && overlayEl.parentNode) {
|
|
overlayEl.parentNode.removeChild(overlayEl);
|
|
}
|
|
|
|
overlayEl = null;
|
|
}
|
|
|
|
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';
|
|
|
|
actors.forEach(function (actor) {
|
|
var card = document.createElement('div');
|
|
card.style.background = 'rgba(0, 0, 0, 0.7)';
|
|
card.style.color = '#fff';
|
|
card.style.padding = '6px 12px';
|
|
card.style.borderRadius = '4px';
|
|
card.style.fontSize = '14px';
|
|
card.textContent = actor.name;
|
|
overlayEl.appendChild(card);
|
|
});
|
|
|
|
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);
|
|
})();
|