mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Redesign OSD and Up Next dialog
This commit is contained in:
parent
4d540bf9ca
commit
6d5ed18386
5 changed files with 57 additions and 239 deletions
|
@ -21,50 +21,6 @@ import 'css!assets/css/videoosd';
|
|||
|
||||
/* eslint-disable indent */
|
||||
|
||||
function seriesImageUrl(item, options) {
|
||||
if (item.Type !== 'Episode') {
|
||||
return null;
|
||||
}
|
||||
|
||||
options = options || {};
|
||||
options.type = options.type || 'Primary';
|
||||
if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
|
||||
options.tag = item.SeriesPrimaryImageTag;
|
||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
|
||||
}
|
||||
|
||||
if (options.type === 'Thumb') {
|
||||
if (item.SeriesThumbImageTag) {
|
||||
options.tag = item.SeriesThumbImageTag;
|
||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
|
||||
}
|
||||
|
||||
if (item.ParentThumbImageTag) {
|
||||
options.tag = item.ParentThumbImageTag;
|
||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function imageUrl(item, options) {
|
||||
options = options || {};
|
||||
options.type = options.type || 'Primary';
|
||||
|
||||
if (item.ImageTags && item.ImageTags[options.type]) {
|
||||
options.tag = item.ImageTags[options.type];
|
||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
|
||||
}
|
||||
|
||||
if (options.type === 'Primary' && item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||
options.tag = item.AlbumPrimaryImageTag;
|
||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function getOpenedDialog() {
|
||||
return document.querySelector('.dialogContainer .dialog.opened');
|
||||
}
|
||||
|
@ -164,7 +120,6 @@ import 'css!assets/css/videoosd';
|
|||
currentItem = item;
|
||||
const displayItem = itemInfo.displayItem || item;
|
||||
updateRecordingButton(displayItem);
|
||||
setPoster(displayItem, item);
|
||||
let parentName = displayItem.SeriesName || displayItem.Album;
|
||||
|
||||
if (displayItem.EpisodeTitle || displayItem.IsSeries) {
|
||||
|
@ -172,42 +127,6 @@ import 'css!assets/css/videoosd';
|
|||
}
|
||||
|
||||
setTitle(displayItem, parentName);
|
||||
const titleElement = view.querySelector('.osdTitle');
|
||||
let displayName = itemHelper.getDisplayName(displayItem, {
|
||||
includeParentInfo: displayItem.Type !== 'Program',
|
||||
includeIndexNumber: displayItem.Type !== 'Program'
|
||||
});
|
||||
|
||||
if (!displayName) {
|
||||
displayName = displayItem.Type;
|
||||
}
|
||||
|
||||
titleElement.innerHTML = displayName;
|
||||
|
||||
if (displayName) {
|
||||
titleElement.classList.remove('hide');
|
||||
} else {
|
||||
titleElement.classList.add('hide');
|
||||
}
|
||||
|
||||
const mediaInfoHtml = mediaInfo.getPrimaryMediaInfoHtml(displayItem, {
|
||||
runtime: false,
|
||||
subtitles: false,
|
||||
tomatoes: false,
|
||||
endsAt: false,
|
||||
episodeTitle: false,
|
||||
originalAirDate: displayItem.Type !== 'Program',
|
||||
episodeTitleIndexNumber: displayItem.Type !== 'Program',
|
||||
programIndicator: false
|
||||
});
|
||||
const osdMediaInfo = view.querySelector('.osdMediaInfo');
|
||||
osdMediaInfo.innerHTML = mediaInfoHtml;
|
||||
|
||||
if (mediaInfoHtml) {
|
||||
osdMediaInfo.classList.remove('hide');
|
||||
} else {
|
||||
osdMediaInfo.classList.add('hide');
|
||||
}
|
||||
|
||||
const secondaryMediaInfo = view.querySelector('.osdSecondaryMediaInfo');
|
||||
const secondaryMediaInfoHtml = mediaInfo.getSecondaryMediaInfoHtml(displayItem, {
|
||||
|
@ -222,12 +141,6 @@ import 'css!assets/css/videoosd';
|
|||
secondaryMediaInfo.classList.add('hide');
|
||||
}
|
||||
|
||||
if (displayName) {
|
||||
view.querySelector('.osdMainTextContainer').classList.remove('hide');
|
||||
} else {
|
||||
view.querySelector('.osdMainTextContainer').classList.add('hide');
|
||||
}
|
||||
|
||||
if (enableProgressByTimeOfDay) {
|
||||
setDisplayTime(startTimeText, displayItem.StartDate);
|
||||
setDisplayTime(endTimeText, displayItem.EndDate);
|
||||
|
@ -277,7 +190,6 @@ import 'css!assets/css/videoosd';
|
|||
|
||||
currentItem = item;
|
||||
if (!item) {
|
||||
setPoster(null);
|
||||
updateRecordingButton(null);
|
||||
Emby.Page.setTitle('');
|
||||
nowPlayingVolumeSlider.disabled = true;
|
||||
|
@ -314,7 +226,20 @@ import 'css!assets/css/videoosd';
|
|||
}
|
||||
|
||||
function setTitle(item, parentName) {
|
||||
Emby.Page.setTitle(parentName || '');
|
||||
let itemName = itemHelper.getDisplayName(item, {
|
||||
includeParentInfo: item.Type !== 'Program',
|
||||
includeIndexNumber: item.Type !== 'Program'
|
||||
});
|
||||
|
||||
if (itemName && parentName) {
|
||||
itemName = `${parentName} - ${itemName}`;
|
||||
}
|
||||
|
||||
if (!itemName) {
|
||||
itemName = parentName || '';
|
||||
}
|
||||
|
||||
Emby.Page.setTitle(itemName);
|
||||
|
||||
const documentTitle = parentName || (item ? item.Name : null);
|
||||
|
||||
|
@ -323,38 +248,6 @@ import 'css!assets/css/videoosd';
|
|||
}
|
||||
}
|
||||
|
||||
function setPoster(item, secondaryItem) {
|
||||
const osdPoster = view.querySelector('.osdPoster');
|
||||
|
||||
if (item) {
|
||||
let imgUrl = seriesImageUrl(item, {
|
||||
maxWidth: osdPoster.clientWidth,
|
||||
type: 'Primary'
|
||||
}) || seriesImageUrl(item, {
|
||||
maxWidth: osdPoster.clientWidth,
|
||||
type: 'Thumb'
|
||||
}) || imageUrl(item, {
|
||||
maxWidth: osdPoster.clientWidth,
|
||||
type: 'Primary'
|
||||
});
|
||||
|
||||
if (!imgUrl && secondaryItem && (imgUrl = seriesImageUrl(secondaryItem, {
|
||||
maxWidth: osdPoster.clientWidth,
|
||||
type: 'Primary'
|
||||
}) || seriesImageUrl(secondaryItem, {
|
||||
maxWidth: osdPoster.clientWidth,
|
||||
type: 'Thumb'
|
||||
}) || imageUrl(secondaryItem, {
|
||||
maxWidth: osdPoster.clientWidth,
|
||||
type: 'Primary'
|
||||
})), imgUrl) {
|
||||
return void (osdPoster.innerHTML = '<img src="' + imgUrl + '" />');
|
||||
}
|
||||
}
|
||||
|
||||
osdPoster.innerHTML = '';
|
||||
}
|
||||
|
||||
let mouseIsDown = false;
|
||||
|
||||
function showOsd() {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue