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:
MrTimscampi
parent
4d540bf9ca
commit
6d5ed18386
5 changed files with 57 additions and 239 deletions
|
|
@ -1,11 +1,9 @@
|
|||
<div id="videoOsdPage" data-role="page" class="page libraryPage" data-backbutton="true">
|
||||
<div class="upNextContainer hide"></div>
|
||||
<div class="videoOsdBottom videoOsdBottom-maincontrols">
|
||||
<div class="osdPoster"></div>
|
||||
<div class="osdControls">
|
||||
<div class="osdTextContainer osdMainTextContainer">
|
||||
<h3 class="osdTitle"></h3>
|
||||
<div class="osdMediaInfo"></div>
|
||||
<div class="osdMediaStatus hide">
|
||||
<span class="material-icons animate autorenew"></span>
|
||||
<span>${FetchingData}</span>
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
|
||||
<div class="flex flex-direction-row align-items-center">
|
||||
<div class="osdTextContainer startTimeText" style="margin: 0 .25em 0 0;"></div>
|
||||
<div class="sliderContainer flex-grow" style="margin: .5em .5em .25em;">
|
||||
<div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;">
|
||||
<input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
|
||||
</div>
|
||||
<div class="osdTextContainer endTimeText" style="margin: 0 0 0 .25em;"></div>
|
||||
|
|
@ -47,32 +45,18 @@
|
|||
<span class="xlargePaperIconButton material-icons skip_next"></span>
|
||||
</button>
|
||||
|
||||
<button is="paper-icon-button-light" class="btnAudio hide autoSize" title="${Audio}">
|
||||
<span class="xlargePaperIconButton material-icons audiotrack"></span>
|
||||
</button>
|
||||
<button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
|
||||
<span class="xlargePaperIconButton material-icons closed_caption"></span>
|
||||
</button>
|
||||
|
||||
<button is="paper-icon-button-light" class="btnVideoOsdSettings hide autoSize" title="${Settings}">
|
||||
<span class="largePaperIconButton material-icons settings"></span>
|
||||
</button>
|
||||
<button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (f)">
|
||||
<span class="xlargePaperIconButton material-icons fullscreen"></span>
|
||||
</button>
|
||||
<button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
|
||||
<span class="xlargePaperIconButton material-icons picture_in_picture_alt"></span>
|
||||
</button>
|
||||
<button is="paper-icon-button-light" class="btnAirPlay hide autoSize" title="${AirPlay}">
|
||||
<span class="xlargePaperIconButton material-icons airplay"></span>
|
||||
</button>
|
||||
|
||||
<div class="osdTimeText">
|
||||
<span class="osdPositionText"></span>
|
||||
<span class="osdDurationText"></span>
|
||||
<span class="endsAtText"></span>
|
||||
</div>
|
||||
|
||||
<button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
|
||||
<span class="xlargePaperIconButton material-icons closed_caption"></span>
|
||||
</button>
|
||||
<button is="paper-icon-button-light" class="btnAudio hide autoSize" title="${Audio}">
|
||||
<span class="xlargePaperIconButton material-icons audiotrack"></span>
|
||||
</button>
|
||||
<div class="volumeButtons hide-mouse-idle-tv">
|
||||
<button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute} (m)">
|
||||
<span class="xlargePaperIconButton material-icons volume_up"></span>
|
||||
|
|
@ -81,6 +65,18 @@
|
|||
<input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="osdVolumeSlider" />
|
||||
</div>
|
||||
</div>
|
||||
<button is="paper-icon-button-light" class="btnVideoOsdSettings hide autoSize" title="${Settings}">
|
||||
<span class="largePaperIconButton material-icons settings"></span>
|
||||
</button>
|
||||
<button is="paper-icon-button-light" class="btnAirPlay hide autoSize" title="${AirPlay}">
|
||||
<span class="xlargePaperIconButton material-icons airplay"></span>
|
||||
</button>
|
||||
<button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
|
||||
<span class="xlargePaperIconButton material-icons picture_in_picture_alt"></span>
|
||||
</button>
|
||||
<button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (f)">
|
||||
<span class="xlargePaperIconButton material-icons fullscreen"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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