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

Merge pull request #1825 from MrTimscampi/modern-osd

Browse source 
Redesign OSD and Up Next dialog
This commit is contained in:
dkanada 2020-10-01 17:34:27 +09:00 • committed by GitHub
commit de052f7df3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 88 additions and 324 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/mediainfo/mediainfo.js
View file

@ -100,11 +100,10 @@ import 'emby-button';
return html;
}
export function getMediaInfoHtml(item, options) {
export function getMediaInfoHtml(item, options = {}) {
let html = '';
const miscInfo = [];
options = options || {};
let text;
let date;
let minutes;
@ -289,7 +288,9 @@ import 'emby-button';
return getMediaInfoItem(m);
}).join('');
html += getStarIconsHtml(item);
if (options.starRating !== false) {
html += getStarIconsHtml(item);
}
if (item.HasSubtitles && options.subtitles !== false) {
html += '<div class="mediaInfoItem mediaInfoText closedCaptionMediaInfoText">CC</div>';
@ -418,9 +419,8 @@ import 'emby-button';
return false;
}
export function getPrimaryMediaInfoHtml(item, options) {
options = options || {};
if (options.interactive == null) {
export function getPrimaryMediaInfoHtml(item, options = {}) {
if (options.interactive === undefined) {
options.interactive = false;
}

58
src/components/upnextdialog/upnextdialog.css
View file

@ -1,9 +1,10 @@
.upNextDialog {
.upNextContainer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
padding: 1%;
bottom: 0;
width: 30em;
padding: 1em;
margin: 0 2em 2em 0;
display: flex;
flex-direction: column;
will-change: transform, opacity;
@ -22,13 +23,18 @@
font-weight: 500;
}
.upNextDialog-poster {
max-width: 40%;
max-height: 15%;
position: relative;
margin-right: 1em;
flex-shrink: 0;
margin-bottom: 0.5em;
.upNextDialog-nextVideoText,
.upNextDialog-title {
width: 25.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.upNextDialog-buttons {
width: 29.75em;
justify-content: end;
align-content: flex-end;
}
.upNextDialog-button {
@ -40,34 +46,4 @@
.upNextDialog {
flex-direction: row;
}
.upNextDialog-poster {
max-width: initial;
max-height: initial;
width: 10%;
margin-bottom: 0;
}
}
@media all and (max-width: 50em) {
.upNextDialog-overview {
display: none !important;
}
}
.upNextDialog-poster-img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: 100%;
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
user-drag: none;
border: 0;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}

85
src/components/upnextdialog/upnextdialog.js
View file

@ -14,84 +14,9 @@ import 'flexStyles';
const transitionEndEventName = dom.whichTransitionEvent();
function seriesImageUrl(item, options) {
if (item.Type !== 'Episode') {
return null;
}
options = options || {};
options.type = options.type || 'Primary';
if (options.type === 'Primary') {
if (item.SeriesPrimaryImageTag) {
options.tag = item.SeriesPrimaryImageTag;
return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
}
}
if (options.type === 'Thumb') {
if (item.SeriesThumbImageTag) {
options.tag = item.SeriesThumbImageTag;
return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
}
if (item.ParentThumbImageTag) {
options.tag = item.ParentThumbImageTag;
return window.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 window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
}
if (options.type === 'Primary') {
if (item.AlbumId && item.AlbumPrimaryImageTag) {
options.tag = item.AlbumPrimaryImageTag;
return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
}
}
return null;
}
function setPoster(osdPoster, item, secondaryItem) {
if (item) {
let imgUrl = seriesImageUrl(item, { type: 'Primary' }) ||
seriesImageUrl(item, { type: 'Thumb' }) ||
imageUrl(item, { type: 'Primary' });
if (!imgUrl && secondaryItem) {
imgUrl = seriesImageUrl(secondaryItem, { type: 'Primary' }) ||
seriesImageUrl(secondaryItem, { type: 'Thumb' }) ||
imageUrl(secondaryItem, { type: 'Primary' });
}
if (imgUrl) {
osdPoster.innerHTML = '<img class="upNextDialog-poster-img" src="' + imgUrl + '" />';
return;
}
}
osdPoster.innerHTML = '';
}
function getHtml() {
let html = '';
html += '<div class="upNextDialog-poster">';
html += '</div>';
html += '<div class="flex flex-direction-column flex-grow">';
html += '<h2 class="upNextDialog-nextVideoText" style="margin:.25em 0;">&nbsp;</h2>';
@ -101,8 +26,6 @@ import 'flexStyles';
html += '<div class="flex flex-direction-row upNextDialog-mediainfo">';
html += '</div>';
html += '<div class="upNextDialog-overview" style="margin-top:1em;"></div>';
html += '<div class="flex flex-direction-row upNextDialog-buttons" style="margin-top:1em;">';
html += '<button type="button" is="emby-button" class="raised raised-mini btnStartNow upNextDialog-button">';
@ -145,11 +68,11 @@ import 'flexStyles';
const elem = instance.options.parent;
setPoster(elem.querySelector('.upNextDialog-poster'), item);
elem.querySelector('.upNextDialog-overview').innerHTML = item.Overview || '';
elem.querySelector('.upNextDialog-mediainfo').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(item, {
criticRating: false,
originalAirDate: false,
starRating: false,
subtitles: false
});
let title = itemHelper.getDisplayName(item);