mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Add trickplay functionality

Browse source
This commit is contained in:
Nick 2024-02-11 20:34:30 -08:00
parent 675a59adc4
commit 8045b95d93
16 changed files with 335 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/controllers/playback/video/index.js
View file

@ -1356,6 +1356,81 @@ export default function (view) {
resetIdle();
}
function updateTrickplayBubbleHtml(apiClient, trickplayInfo, item, mediaSourceId, bubble, positionTicks) {
let doFullUpdate = false;
let chapterThumbContainer = bubble.querySelector('.chapterThumbContainer');
let chapterThumb;
let chapterThumbText;
// Create bubble elements if they don't already exist
if (chapterThumbContainer) {
chapterThumb = chapterThumbContainer.querySelector('.chapterThumb');
chapterThumbText = chapterThumbContainer.querySelector('.chapterThumbText');
} else {
doFullUpdate = true;
chapterThumbContainer = document.createElement('div');
chapterThumbContainer.classList.add('chapterThumbContainer');
chapterThumbContainer.style.overflow = 'hidden';
const chapterThumbWrapper = document.createElement('div');
chapterThumbWrapper.classList.add('chapterThumbWrapper');
chapterThumbWrapper.style.overflow = 'hidden';
chapterThumbWrapper.style.position = 'relative';
chapterThumbWrapper.style.width = trickplayInfo.Width + 'px';
chapterThumbWrapper.style.height = trickplayInfo.Height + 'px';
chapterThumbContainer.appendChild(chapterThumbWrapper);
chapterThumb = document.createElement('img');
chapterThumb.classList.add('chapterThumb');
chapterThumb.style.position = 'absolute';
chapterThumb.style.width = 'unset';
chapterThumb.style.minWidth = 'unset';
chapterThumb.style.height = 'unset';
chapterThumb.style.minHeight = 'unset';
chapterThumbWrapper.appendChild(chapterThumb);
const chapterThumbTextContainer = document.createElement('div');
chapterThumbTextContainer.classList.add('chapterThumbTextContainer');
chapterThumbContainer.appendChild(chapterThumbTextContainer);
chapterThumbText = document.createElement('h2');
chapterThumbText.classList.add('chapterThumbText');
chapterThumbTextContainer.appendChild(chapterThumbText);
}
// Update trickplay values
const currentTimeMs = positionTicks / 10_000;
const currentTile = Math.floor(currentTimeMs / trickplayInfo.Interval);
const tileSize = trickplayInfo.TileWidth * trickplayInfo.TileHeight;
const tileOffset = currentTile % tileSize;
const index = Math.floor(currentTile / tileSize);
const tileOffsetX = tileOffset % trickplayInfo.TileWidth;
const tileOffsetY = Math.floor(tileOffset / trickplayInfo.TileWidth);
const offsetX = -(tileOffsetX * trickplayInfo.Width);
const offsetY = -(tileOffsetY * trickplayInfo.Height);
const imgSrc = apiClient.getUrl('Videos/' + item.Id + '/Trickplay/' + trickplayInfo.Width + '/' + index + '.jpg', {
api_key: apiClient.accessToken(),
MediaSourceId: mediaSourceId
});
if (chapterThumb.src != imgSrc) chapterThumb.src = imgSrc;
chapterThumb.style.left = offsetX + 'px';
chapterThumb.style.top = offsetY + 'px';
chapterThumbText.textContent = datetime.getDisplayRunningTime(positionTicks);
// Set bubble innerHTML if container isn't part of DOM
if (doFullUpdate) {
bubble.innerHTML = chapterThumbContainer.outerHTML;
}
return true;
}
function getImgUrl(item, chapter, index, maxWidth, apiClient) {
if (chapter.ImageTag) {
return apiClient.getScaledImageUrl(item.Id, {
@ -1681,6 +1756,33 @@ export default function (view) {
}
});
nowPlayingPositionSlider.updateBubbleHtml = function(bubble, value) {
showOsd();
const item = currentItem;
let ticks = currentRuntimeTicks;
ticks /= 100;
ticks *= value;
if (item?.Trickplay) {
const mediaSourceId = currentPlayer?.streamInfo?.mediaSource?.Id;
const trickplayResolutions = item.Trickplay[mediaSourceId];
if (!trickplayResolutions) return false;
// TODO: just to test. must pick proper resolution and/or check above that trickplay resolutions has at least one key.
return updateTrickplayBubbleHtml(
ServerConnections.getApiClient(item.ServerId),
trickplayResolutions[Object.keys(trickplayResolutions)[0]],
item,
mediaSourceId,
bubble,
ticks);
}
return false;
};
nowPlayingPositionSlider.getBubbleHtml = function (value) {
showOsd();
if (enableProgressByTimeOfDay) {