mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-20 04:18:19 -07:00
2127 lines
82 KiB
JavaScript
2127 lines
82 KiB
JavaScript
define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSettings', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'dom', 'indicators', 'imageLoader', 'libraryMenu', 'globalize', 'browser', 'events', 'playbackManager', 'scrollStyles', 'emby-itemscontainer', 'emby-checkbox', 'emby-button', 'emby-playstatebutton', 'emby-ratingbutton', 'emby-scroller', 'emby-select'], function (loading, appRouter, layoutManager, connectionManager, userSettings, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, dom, indicators, imageLoader, libraryMenu, globalize, browser, events, playbackManager) {
|
|
'use strict';
|
|
|
|
function getPromise(apiClient, params) {
|
|
var id = params.id;
|
|
|
|
if (id) {
|
|
return apiClient.getItem(apiClient.getCurrentUserId(), id);
|
|
}
|
|
|
|
if (params.seriesTimerId) {
|
|
return apiClient.getLiveTvSeriesTimer(params.seriesTimerId);
|
|
}
|
|
|
|
if (params.genre) {
|
|
return apiClient.getGenre(params.genre, apiClient.getCurrentUserId());
|
|
}
|
|
|
|
if (params.musicgenre) {
|
|
return apiClient.getMusicGenre(params.musicgenre, apiClient.getCurrentUserId());
|
|
}
|
|
|
|
if (params.musicartist) {
|
|
return apiClient.getArtist(params.musicartist, apiClient.getCurrentUserId());
|
|
}
|
|
|
|
throw new Error('Invalid request');
|
|
}
|
|
|
|
function hideAll(page, className, show) {
|
|
var i;
|
|
var length;
|
|
var elems = page.querySelectorAll('.' + className);
|
|
|
|
for (i = 0, length = elems.length; i < length; i++) {
|
|
if (show) {
|
|
elems[i].classList.remove('hide');
|
|
} else {
|
|
elems[i].classList.add('hide');
|
|
}
|
|
}
|
|
}
|
|
|
|
function getContextMenuOptions(item, user, button) {
|
|
var options = {
|
|
item: item,
|
|
open: false,
|
|
play: false,
|
|
playAllFromHere: false,
|
|
queueAllFromHere: false,
|
|
positionTo: button,
|
|
cancelTimer: false,
|
|
record: false,
|
|
deleteItem: true === item.IsFolder,
|
|
shuffle: false,
|
|
instantMix: false,
|
|
user: user,
|
|
share: true
|
|
};
|
|
return options;
|
|
}
|
|
|
|
function getProgramScheduleHtml(items) {
|
|
var html = '';
|
|
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-list" data-contextmenu="false">';
|
|
html += listView.getListViewHtml({
|
|
items: items,
|
|
enableUserDataButtons: false,
|
|
image: true,
|
|
imageSource: 'channel',
|
|
showProgramDateTime: true,
|
|
showChannel: false,
|
|
mediaInfo: false,
|
|
action: 'none',
|
|
moreButton: false,
|
|
recordButton: false
|
|
});
|
|
return html += '</div>';
|
|
}
|
|
|
|
function renderSeriesTimerSchedule(page, apiClient, seriesTimerId) {
|
|
apiClient.getLiveTvTimers({
|
|
UserId: apiClient.getCurrentUserId(),
|
|
ImageTypeLimit: 1,
|
|
EnableImageTypes: 'Primary,Backdrop,Thumb',
|
|
SortBy: 'StartDate',
|
|
EnableTotalRecordCount: false,
|
|
EnableUserData: false,
|
|
SeriesTimerId: seriesTimerId,
|
|
Fields: 'ChannelInfo,ChannelImage'
|
|
}).then(function (result) {
|
|
if (result.Items.length && result.Items[0].SeriesTimerId != seriesTimerId) {
|
|
result.Items = [];
|
|
}
|
|
|
|
var html = getProgramScheduleHtml(result.Items);
|
|
var scheduleTab = page.querySelector('.seriesTimerSchedule');
|
|
scheduleTab.innerHTML = html;
|
|
imageLoader.lazyChildren(scheduleTab);
|
|
});
|
|
}
|
|
|
|
function renderTimerEditor(page, item, apiClient, user) {
|
|
if ('Recording' !== item.Type || !user.Policy.EnableLiveTvManagement || !item.TimerId || 'InProgress' !== item.Status) {
|
|
return void hideAll(page, 'btnCancelTimer');
|
|
}
|
|
|
|
hideAll(page, 'btnCancelTimer', true);
|
|
}
|
|
|
|
function renderSeriesTimerEditor(page, item, apiClient, user) {
|
|
if ('SeriesTimer' !== item.Type) {
|
|
return void hideAll(page, 'btnCancelSeriesTimer');
|
|
}
|
|
|
|
if (user.Policy.EnableLiveTvManagement) {
|
|
require(['seriesRecordingEditor'], function (seriesRecordingEditor) {
|
|
seriesRecordingEditor.embed(item, apiClient.serverId(), {
|
|
context: page.querySelector('.seriesRecordingEditor')
|
|
});
|
|
});
|
|
|
|
page.querySelector('.seriesTimerScheduleSection').classList.remove('hide');
|
|
hideAll(page, 'btnCancelSeriesTimer', true);
|
|
return void renderSeriesTimerSchedule(page, apiClient, item.Id);
|
|
}
|
|
|
|
page.querySelector('.seriesTimerScheduleSection').classList.add('hide');
|
|
return void hideAll(page, 'btnCancelSeriesTimer');
|
|
}
|
|
|
|
function renderTrackSelections(page, instance, item, forceReload) {
|
|
var select = page.querySelector('.selectSource');
|
|
|
|
if (!item.MediaSources || !itemHelper.supportsMediaSourceSelection(item) || -1 === playbackManager.getSupportedCommands().indexOf('PlayMediaSource') || !playbackManager.canPlay(item)) {
|
|
page.querySelector('.trackSelections').classList.add('hide');
|
|
select.innerHTML = '';
|
|
page.querySelector('.selectVideo').innerHTML = '';
|
|
page.querySelector('.selectAudio').innerHTML = '';
|
|
page.querySelector('.selectSubtitles').innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
playbackManager.getPlaybackMediaSources(item).then(function (mediaSources) {
|
|
instance._currentPlaybackMediaSources = mediaSources;
|
|
page.querySelector('.trackSelections').classList.remove('hide');
|
|
select.setLabel(globalize.translate('LabelVersion'));
|
|
var currentValue = select.value;
|
|
var selectedId = mediaSources[0].Id;
|
|
select.innerHTML = mediaSources.map(function (v) {
|
|
var selected = v.Id === selectedId ? ' selected' : '';
|
|
return '<option value="' + v.Id + '"' + selected + '>' + v.Name + '</option>';
|
|
}).join('');
|
|
|
|
if (mediaSources.length > 1) {
|
|
page.querySelector('.selectSourceContainer').classList.remove('hide');
|
|
} else {
|
|
page.querySelector('.selectSourceContainer').classList.add('hide');
|
|
}
|
|
|
|
if (select.value !== currentValue || forceReload) {
|
|
renderVideoSelections(page, mediaSources);
|
|
renderAudioSelections(page, mediaSources);
|
|
renderSubtitleSelections(page, mediaSources);
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderVideoSelections(page, mediaSources) {
|
|
var mediaSourceId = page.querySelector('.selectSource').value;
|
|
var mediaSource = mediaSources.filter(function (m) {
|
|
return m.Id === mediaSourceId;
|
|
})[0];
|
|
var tracks = mediaSource.MediaStreams.filter(function (m) {
|
|
return 'Video' === m.Type;
|
|
});
|
|
var select = page.querySelector('.selectVideo');
|
|
select.setLabel(globalize.translate('LabelVideo'));
|
|
var selectedId = tracks.length ? tracks[0].Index : -1;
|
|
select.innerHTML = tracks.map(function (v) {
|
|
var selected = v.Index === selectedId ? ' selected' : '';
|
|
var titleParts = [];
|
|
var resolutionText = mediaInfo.getResolutionText(v);
|
|
|
|
if (resolutionText) {
|
|
titleParts.push(resolutionText);
|
|
}
|
|
|
|
if (v.Codec) {
|
|
titleParts.push(v.Codec.toUpperCase());
|
|
}
|
|
|
|
return '<option value="' + v.Index + '" ' + selected + '>' + (v.DisplayTitle || titleParts.join(' ')) + '</option>';
|
|
}).join('');
|
|
select.setAttribute('disabled', 'disabled');
|
|
|
|
if (tracks.length) {
|
|
page.querySelector('.selectVideoContainer').classList.remove('hide');
|
|
} else {
|
|
page.querySelector('.selectVideoContainer').classList.add('hide');
|
|
}
|
|
}
|
|
|
|
function renderAudioSelections(page, mediaSources) {
|
|
var mediaSourceId = page.querySelector('.selectSource').value;
|
|
var mediaSource = mediaSources.filter(function (m) {
|
|
return m.Id === mediaSourceId;
|
|
})[0];
|
|
var tracks = mediaSource.MediaStreams.filter(function (m) {
|
|
return 'Audio' === m.Type;
|
|
});
|
|
var select = page.querySelector('.selectAudio');
|
|
select.setLabel(globalize.translate('LabelAudio'));
|
|
var selectedId = mediaSource.DefaultAudioStreamIndex;
|
|
select.innerHTML = tracks.map(function (v) {
|
|
var selected = v.Index === selectedId ? ' selected' : '';
|
|
return '<option value="' + v.Index + '" ' + selected + '>' + v.DisplayTitle + '</option>';
|
|
}).join('');
|
|
|
|
if (tracks.length > 1) {
|
|
select.removeAttribute('disabled');
|
|
} else {
|
|
select.setAttribute('disabled', 'disabled');
|
|
}
|
|
|
|
if (tracks.length) {
|
|
page.querySelector('.selectAudioContainer').classList.remove('hide');
|
|
} else {
|
|
page.querySelector('.selectAudioContainer').classList.add('hide');
|
|
}
|
|
}
|
|
|
|
function renderSubtitleSelections(page, mediaSources) {
|
|
var mediaSourceId = page.querySelector('.selectSource').value;
|
|
var mediaSource = mediaSources.filter(function (m) {
|
|
return m.Id === mediaSourceId;
|
|
})[0];
|
|
var tracks = mediaSource.MediaStreams.filter(function (m) {
|
|
return 'Subtitle' === m.Type;
|
|
});
|
|
var select = page.querySelector('.selectSubtitles');
|
|
select.setLabel(globalize.translate('LabelSubtitles'));
|
|
var selectedId = null == mediaSource.DefaultSubtitleStreamIndex ? -1 : mediaSource.DefaultSubtitleStreamIndex;
|
|
|
|
if (tracks.length) {
|
|
var selected = -1 === selectedId ? ' selected' : '';
|
|
select.innerHTML = '<option value="-1">' + globalize.translate('Off') + '</option>' + tracks.map(function (v) {
|
|
selected = v.Index === selectedId ? ' selected' : '';
|
|
return '<option value="' + v.Index + '" ' + selected + '>' + v.DisplayTitle + '</option>';
|
|
}).join('');
|
|
page.querySelector('.selectSubtitlesContainer').classList.remove('hide');
|
|
} else {
|
|
select.innerHTML = '';
|
|
page.querySelector('.selectSubtitlesContainer').classList.add('hide');
|
|
}
|
|
}
|
|
|
|
function reloadPlayButtons(page, item) {
|
|
var canPlay = false;
|
|
|
|
if ('Program' == item.Type) {
|
|
var now = new Date();
|
|
|
|
if (now >= datetime.parseISO8601Date(item.StartDate, true) && now < datetime.parseISO8601Date(item.EndDate, true)) {
|
|
hideAll(page, 'btnPlay', true);
|
|
canPlay = true;
|
|
} else {
|
|
hideAll(page, 'btnPlay');
|
|
}
|
|
|
|
hideAll(page, 'btnResume');
|
|
hideAll(page, 'btnInstantMix');
|
|
hideAll(page, 'btnShuffle');
|
|
} else if (playbackManager.canPlay(item)) {
|
|
hideAll(page, 'btnPlay', true);
|
|
var enableInstantMix = -1 !== ['Audio', 'MusicAlbum', 'MusicGenre', 'MusicArtist'].indexOf(item.Type);
|
|
hideAll(page, 'btnInstantMix', enableInstantMix);
|
|
var enableShuffle = item.IsFolder || -1 !== ['MusicAlbum', 'MusicGenre', 'MusicArtist'].indexOf(item.Type);
|
|
hideAll(page, 'btnShuffle', enableShuffle);
|
|
canPlay = true;
|
|
hideAll(page, 'btnResume', item.UserData && item.UserData.PlaybackPositionTicks > 0);
|
|
} else {
|
|
hideAll(page, 'btnPlay');
|
|
hideAll(page, 'btnResume');
|
|
hideAll(page, 'btnInstantMix');
|
|
hideAll(page, 'btnShuffle');
|
|
}
|
|
|
|
return canPlay;
|
|
}
|
|
|
|
function reloadUserDataButtons(page, item) {
|
|
var i;
|
|
var length;
|
|
var btnPlaystates = page.querySelectorAll('.btnPlaystate');
|
|
|
|
for (i = 0, length = btnPlaystates.length; i < length; i++) {
|
|
var btnPlaystate = btnPlaystates[i];
|
|
|
|
if (itemHelper.canMarkPlayed(item)) {
|
|
btnPlaystate.classList.remove('hide');
|
|
btnPlaystate.setItem(item);
|
|
} else {
|
|
btnPlaystate.classList.add('hide');
|
|
btnPlaystate.setItem(null);
|
|
}
|
|
}
|
|
|
|
var btnUserRatings = page.querySelectorAll('.btnUserRating');
|
|
|
|
for (i = 0, length = btnUserRatings.length; i < length; i++) {
|
|
var btnUserRating = btnUserRatings[i];
|
|
|
|
if (itemHelper.canRate(item)) {
|
|
btnUserRating.classList.remove('hide');
|
|
btnUserRating.setItem(item);
|
|
} else {
|
|
btnUserRating.classList.add('hide');
|
|
btnUserRating.setItem(null);
|
|
}
|
|
}
|
|
}
|
|
|
|
function getArtistLinksHtml(artists, serverId, context) {
|
|
var html = [];
|
|
|
|
for (var i = 0, length = artists.length; i < length; i++) {
|
|
var artist = artists[i];
|
|
var href = appRouter.getRouteUrl(artist, {
|
|
context: context,
|
|
itemType: 'MusicArtist',
|
|
serverId: serverId
|
|
});
|
|
html.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + href + '">' + artist.Name + '</a>');
|
|
}
|
|
|
|
return html = html.join(' / ');
|
|
}
|
|
function renderName(item, container, isStatic, context) {
|
|
var parentRoute;
|
|
var parentNameHtml = [];
|
|
var parentNameLast = false;
|
|
|
|
if (item.AlbumArtists) {
|
|
parentNameHtml.push(getArtistLinksHtml(item.AlbumArtists, item.ServerId, context));
|
|
parentNameLast = true;
|
|
} else if (item.ArtistItems && item.ArtistItems.length && 'MusicVideo' === item.Type) {
|
|
parentNameHtml.push(getArtistLinksHtml(item.ArtistItems, item.ServerId, context));
|
|
parentNameLast = true;
|
|
} else if (item.SeriesName && 'Episode' === item.Type) {
|
|
parentRoute = appRouter.getRouteUrl({
|
|
Id: item.SeriesId,
|
|
Name: item.SeriesName,
|
|
Type: 'Series',
|
|
IsFolder: true,
|
|
ServerId: item.ServerId
|
|
}, {
|
|
context: context
|
|
});
|
|
parentNameHtml.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeriesName + '</a>');
|
|
} else if (item.IsSeries || item.EpisodeTitle) {
|
|
parentNameHtml.push(item.Name);
|
|
}
|
|
|
|
if (item.SeriesName && 'Season' === item.Type) {
|
|
parentRoute = appRouter.getRouteUrl({
|
|
Id: item.SeriesId,
|
|
Name: item.SeriesName,
|
|
Type: 'Series',
|
|
IsFolder: true,
|
|
ServerId: item.ServerId
|
|
}, {
|
|
context: context
|
|
});
|
|
parentNameHtml.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeriesName + '</a>');
|
|
} else if (null != item.ParentIndexNumber && 'Episode' === item.Type) {
|
|
parentRoute = appRouter.getRouteUrl({
|
|
Id: item.SeasonId,
|
|
Name: item.SeasonName,
|
|
Type: 'Season',
|
|
IsFolder: true,
|
|
ServerId: item.ServerId
|
|
}, {
|
|
context: context
|
|
});
|
|
parentNameHtml.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeasonName + '</a>');
|
|
} else if (null != item.ParentIndexNumber && item.IsSeries) {
|
|
parentNameHtml.push(item.SeasonName || 'S' + item.ParentIndexNumber);
|
|
} else if (item.Album && item.AlbumId && ('MusicVideo' === item.Type || 'Audio' === item.Type)) {
|
|
parentRoute = appRouter.getRouteUrl({
|
|
Id: item.AlbumId,
|
|
Name: item.Album,
|
|
Type: 'MusicAlbum',
|
|
IsFolder: true,
|
|
ServerId: item.ServerId
|
|
}, {
|
|
context: context
|
|
});
|
|
parentNameHtml.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + parentRoute + '">' + item.Album + '</a>');
|
|
} else if (item.Album) {
|
|
parentNameHtml.push(item.Album);
|
|
}
|
|
// FIXME: This whole section needs some refactoring, so it becames easier to scale across all form factors. See GH #1022
|
|
var html = '';
|
|
var tvShowHtml = parentNameHtml[0];
|
|
var tvSeasonHtml = parentNameHtml[1];
|
|
|
|
if (parentNameHtml.length) {
|
|
if (parentNameLast) {
|
|
// Music
|
|
if (layoutManager.mobile) {
|
|
html = '<h3 class="parentName" style="margin: .25em 0;">' + parentNameHtml.join('</br>') + '</h3>';
|
|
} else {
|
|
html = '<h3 class="parentName" style="margin: .25em 0;">' + parentNameHtml.join(' - ') + '</h3>';
|
|
}
|
|
} else {
|
|
if (layoutManager.mobile) {
|
|
html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + parentNameHtml.join('</br>') + '</h1>';
|
|
} else {
|
|
html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + tvShowHtml + '</h1>';
|
|
}
|
|
}
|
|
}
|
|
|
|
var name = itemHelper.getDisplayName(item, {
|
|
includeParentInfo: false
|
|
});
|
|
var offset = parentNameLast ? '.25em' : '.5em';
|
|
|
|
if (html && !parentNameLast) {
|
|
if (!layoutManager.mobile && tvSeasonHtml) {
|
|
html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + tvSeasonHtml + ' - ' + name + '</h3>';
|
|
} else {
|
|
html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + name + '</h3>';
|
|
}
|
|
} else {
|
|
html = '<h1 class="itemName infoText" style="margin: .1em 0 ' + offset + ';">' + name + '</h1>' + html;
|
|
}
|
|
|
|
if (item.OriginalTitle && item.OriginalTitle != item.Name) {
|
|
html += '<h4 class="itemName infoText" style="margin: -' + offset + ' 0 0;">' + item.OriginalTitle + '</h4>';
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
|
|
if (html.length) {
|
|
container.classList.remove('hide');
|
|
} else {
|
|
container.classList.add('hide');
|
|
}
|
|
}
|
|
|
|
function setTrailerButtonVisibility(page, item) {
|
|
if ((item.LocalTrailerCount || item.RemoteTrailers && item.RemoteTrailers.length) && -1 !== playbackManager.getSupportedCommands().indexOf('PlayTrailers')) {
|
|
hideAll(page, 'btnPlayTrailer', true);
|
|
} else {
|
|
hideAll(page, 'btnPlayTrailer');
|
|
}
|
|
}
|
|
|
|
function renderBackdrop(item) {
|
|
if (dom.getWindowSize().innerWidth >= 1000) {
|
|
backdrop.setBackdrops([item]);
|
|
} else {
|
|
backdrop.clear();
|
|
}
|
|
}
|
|
|
|
function renderDetailPageBackdrop(page, item, apiClient) {
|
|
var imgUrl;
|
|
var hasbackdrop = false;
|
|
var itemBackdropElement = page.querySelector('#itemBackdrop');
|
|
var usePrimaryImage = item.MediaType === 'Video' && item.Type !== 'Movie' && item.Type !== 'Trailer' ||
|
|
item.MediaType && item.MediaType !== 'Video' ||
|
|
item.Type === 'MusicAlbum' ||
|
|
item.Type === 'Person';
|
|
|
|
if (!layoutManager.mobile && !userSettings.enableBackdrops()) {
|
|
return false;
|
|
}
|
|
|
|
if ('Program' === item.Type && item.ImageTags && item.ImageTags.Thumb) {
|
|
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
|
type: 'Thumb',
|
|
maxWidth: dom.getScreenWidth(),
|
|
index: 0,
|
|
tag: item.ImageTags.Thumb
|
|
});
|
|
page.classList.remove('noBackdrop');
|
|
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
|
|
hasbackdrop = true;
|
|
} else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) {
|
|
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
|
type: 'Primary',
|
|
maxWidth: dom.getScreenWidth(),
|
|
index: 0,
|
|
tag: item.ImageTags.Primary
|
|
});
|
|
page.classList.remove('noBackdrop');
|
|
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
|
|
hasbackdrop = true;
|
|
} else if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
|
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
|
type: 'Backdrop',
|
|
maxWidth: dom.getScreenWidth(),
|
|
index: 0,
|
|
tag: item.BackdropImageTags[0]
|
|
});
|
|
page.classList.remove('noBackdrop');
|
|
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
|
|
hasbackdrop = true;
|
|
} else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
|
|
imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
|
|
type: 'Backdrop',
|
|
maxWidth: dom.getScreenWidth(),
|
|
index: 0,
|
|
tag: item.ParentBackdropImageTags[0]
|
|
});
|
|
page.classList.remove('noBackdrop');
|
|
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
|
|
hasbackdrop = true;
|
|
} else if (item.ImageTags && item.ImageTags.Thumb) {
|
|
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
|
type: 'Thumb',
|
|
maxWidth: dom.getScreenWidth(),
|
|
index: 0,
|
|
tag: item.ImageTags.Thumb
|
|
});
|
|
page.classList.remove('noBackdrop');
|
|
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
|
|
hasbackdrop = true;
|
|
} else {
|
|
itemBackdropElement.style.backgroundImage = '';
|
|
}
|
|
|
|
if ('Person' === item.Type) {
|
|
// FIXME: This hides the backdrop on all persons to fix a margin issue. Ideally, a proper fix should be made.
|
|
page.classList.add('noBackdrop');
|
|
itemBackdropElement.classList.add('personBackdrop');
|
|
} else {
|
|
itemBackdropElement.classList.remove('personBackdrop');
|
|
}
|
|
|
|
return hasbackdrop;
|
|
}
|
|
|
|
function reloadFromItem(instance, page, params, item, user) {
|
|
var context = params.context;
|
|
page.querySelector('.detailPagePrimaryContainer').classList.add('detailSticky');
|
|
|
|
renderName(item, page.querySelector('.nameContainer'), false, context);
|
|
var apiClient = connectionManager.getApiClient(item.ServerId);
|
|
renderSeriesTimerEditor(page, item, apiClient, user);
|
|
renderTimerEditor(page, item, apiClient, user);
|
|
renderImage(page, item, apiClient, user);
|
|
renderLogo(page, item, apiClient);
|
|
Emby.Page.setTitle('');
|
|
setInitialCollapsibleState(page, item, apiClient, context, user);
|
|
renderDetails(page, item, apiClient, context);
|
|
renderTrackSelections(page, instance, item);
|
|
renderBackdrop(item);
|
|
renderDetailPageBackdrop(page, item, apiClient);
|
|
var canPlay = reloadPlayButtons(page, item);
|
|
|
|
if ((item.LocalTrailerCount || item.RemoteTrailers && item.RemoteTrailers.length) && -1 !== playbackManager.getSupportedCommands().indexOf('PlayTrailers')) {
|
|
hideAll(page, 'btnPlayTrailer', true);
|
|
} else {
|
|
hideAll(page, 'btnPlayTrailer');
|
|
}
|
|
|
|
setTrailerButtonVisibility(page, item);
|
|
|
|
if (item.CanDelete && !item.IsFolder) {
|
|
hideAll(page, 'btnDeleteItem', true);
|
|
} else {
|
|
hideAll(page, 'btnDeleteItem');
|
|
}
|
|
|
|
if ('Program' !== item.Type || canPlay) {
|
|
hideAll(page, 'mainDetailButtons', true);
|
|
} else {
|
|
hideAll(page, 'mainDetailButtons');
|
|
}
|
|
|
|
showRecordingFields(instance, page, item, user);
|
|
var groupedVersions = (item.MediaSources || []).filter(function (g) {
|
|
return 'Grouping' == g.Type;
|
|
});
|
|
|
|
if (user.Policy.IsAdministrator && groupedVersions.length) {
|
|
page.querySelector('.btnSplitVersions').classList.remove('hide');
|
|
} else {
|
|
page.querySelector('.btnSplitVersions').classList.add('hide');
|
|
}
|
|
|
|
if (itemContextMenu.getCommands(getContextMenuOptions(item, user)).length) {
|
|
hideAll(page, 'btnMoreCommands', true);
|
|
} else {
|
|
hideAll(page, 'btnMoreCommands');
|
|
}
|
|
|
|
var itemBirthday = page.querySelector('#itemBirthday');
|
|
|
|
if ('Person' == item.Type && item.PremiereDate) {
|
|
try {
|
|
var birthday = datetime.parseISO8601Date(item.PremiereDate, true).toDateString();
|
|
itemBirthday.classList.remove('hide');
|
|
itemBirthday.innerHTML = globalize.translate('BirthDateValue', birthday);
|
|
} catch (err) {
|
|
itemBirthday.classList.add('hide');
|
|
}
|
|
} else {
|
|
itemBirthday.classList.add('hide');
|
|
}
|
|
|
|
var itemDeathDate = page.querySelector('#itemDeathDate');
|
|
|
|
if ('Person' == item.Type && item.EndDate) {
|
|
try {
|
|
var deathday = datetime.parseISO8601Date(item.EndDate, true).toDateString();
|
|
itemDeathDate.classList.remove('hide');
|
|
itemDeathDate.innerHTML = globalize.translate('DeathDateValue', deathday);
|
|
} catch (err) {
|
|
itemDeathDate.classList.add('hide');
|
|
}
|
|
} else {
|
|
itemDeathDate.classList.add('hide');
|
|
}
|
|
|
|
var itemBirthLocation = page.querySelector('#itemBirthLocation');
|
|
|
|
if ('Person' == item.Type && item.ProductionLocations && item.ProductionLocations.length) {
|
|
var gmap = '<a is="emby-linkbutton" class="button-link textlink" target="_blank" href="https://maps.google.com/maps?q=' + item.ProductionLocations[0] + '">' + item.ProductionLocations[0] + '</a>';
|
|
itemBirthLocation.classList.remove('hide');
|
|
itemBirthLocation.innerHTML = globalize.translate('BirthPlaceValue', gmap);
|
|
} else {
|
|
itemBirthLocation.classList.add('hide');
|
|
}
|
|
|
|
setPeopleHeader(page, item);
|
|
loading.hide();
|
|
|
|
if (item.Type === 'Book') {
|
|
hideAll(page, 'btnDownload', true);
|
|
}
|
|
|
|
require(['autoFocuser'], function (autoFocuser) {
|
|
autoFocuser.autoFocus(page);
|
|
});
|
|
}
|
|
|
|
function logoImageUrl(item, apiClient, options) {
|
|
options = options || {};
|
|
options.type = 'Logo';
|
|
|
|
if (item.ImageTags && item.ImageTags.Logo) {
|
|
options.tag = item.ImageTags.Logo;
|
|
return apiClient.getScaledImageUrl(item.Id, options);
|
|
}
|
|
|
|
if (item.ParentLogoImageTag) {
|
|
options.tag = item.ParentLogoImageTag;
|
|
return apiClient.getScaledImageUrl(item.ParentLogoItemId, options);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function renderLogo(page, item, apiClient) {
|
|
var url = logoImageUrl(item, apiClient, {
|
|
maxWidth: 400
|
|
});
|
|
var detailLogo = page.querySelector('.detailLogo');
|
|
|
|
if (!layoutManager.mobile && !userSettings.enableBackdrops()) {
|
|
detailLogo.classList.add('hide');
|
|
} else if (url) {
|
|
detailLogo.classList.remove('hide');
|
|
detailLogo.classList.add('lazy');
|
|
detailLogo.setAttribute('data-src', url);
|
|
imageLoader.lazyImage(detailLogo);
|
|
} else {
|
|
detailLogo.classList.add('hide');
|
|
}
|
|
}
|
|
|
|
function showRecordingFields(instance, page, item, user) {
|
|
if (!instance.currentRecordingFields) {
|
|
var recordingFieldsElement = page.querySelector('.recordingFields');
|
|
|
|
if ('Program' == item.Type && user.Policy.EnableLiveTvManagement) {
|
|
require(['recordingFields'], function (recordingFields) {
|
|
instance.currentRecordingFields = new recordingFields({
|
|
parent: recordingFieldsElement,
|
|
programId: item.Id,
|
|
serverId: item.ServerId
|
|
});
|
|
recordingFieldsElement.classList.remove('hide');
|
|
});
|
|
} else {
|
|
recordingFieldsElement.classList.add('hide');
|
|
recordingFieldsElement.innerHTML = '';
|
|
}
|
|
}
|
|
}
|
|
|
|
function renderLinks(linksElem, item) {
|
|
var html = [];
|
|
|
|
var links = [];
|
|
|
|
if (!layoutManager.tv && item.HomePageUrl) {
|
|
links.push('<a style="color:inherit;" is="emby-linkbutton" class="button-link" href="' + item.HomePageUrl + '" target="_blank">' + globalize.translate('ButtonWebsite') + '</a>');
|
|
}
|
|
if (item.ExternalUrls) {
|
|
for (var i = 0, length = item.ExternalUrls.length; i < length; i++) {
|
|
var url = item.ExternalUrls[i];
|
|
links.push('<a style="color:inherit;" is="emby-linkbutton" class="button-link" href="' + url.Url + '" target="_blank">' + url.Name + '</a>');
|
|
}
|
|
}
|
|
|
|
if (links.length) {
|
|
html.push(links.join(', '));
|
|
}
|
|
|
|
linksElem.innerHTML = html.join(', ');
|
|
|
|
if (html.length) {
|
|
linksElem.classList.remove('hide');
|
|
} else {
|
|
linksElem.classList.add('hide');
|
|
}
|
|
}
|
|
|
|
function renderDetailImage(page, elem, item, apiClient, editable, imageLoader, indicators) {
|
|
if ('SeriesTimer' === item.Type || 'Program' === item.Type) {
|
|
editable = false;
|
|
}
|
|
|
|
elem.classList.add('detailimg-hidemobile');
|
|
|
|
var imageTags = item.ImageTags || {};
|
|
|
|
if (item.PrimaryImageTag) {
|
|
imageTags.Primary = item.PrimaryImageTag;
|
|
}
|
|
|
|
var url;
|
|
var html = '';
|
|
var shape = 'portrait';
|
|
var detectRatio = false;
|
|
|
|
/* In the following section, getScreenWidth() is multiplied by 0.5 as the posters
|
|
are 25vw and we need double the resolution to counter Skia's scaling. */
|
|
// TODO: Find a reliable way to get the poster width
|
|
if (imageTags.Primary) {
|
|
url = apiClient.getScaledImageUrl(item.Id, {
|
|
type: 'Primary',
|
|
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
|
tag: item.ImageTags.Primary
|
|
});
|
|
detectRatio = true;
|
|
} else if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
|
url = apiClient.getScaledImageUrl(item.Id, {
|
|
type: 'Backdrop',
|
|
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
|
tag: item.BackdropImageTags[0]
|
|
});
|
|
shape = 'thumb';
|
|
} else if (imageTags.Thumb) {
|
|
url = apiClient.getScaledImageUrl(item.Id, {
|
|
type: 'Thumb',
|
|
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
|
tag: item.ImageTags.Thumb
|
|
});
|
|
shape = 'thumb';
|
|
} else if (imageTags.Disc) {
|
|
url = apiClient.getScaledImageUrl(item.Id, {
|
|
type: 'Disc',
|
|
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
|
tag: item.ImageTags.Disc
|
|
});
|
|
shape = 'square';
|
|
} else if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
|
url = apiClient.getScaledImageUrl(item.AlbumId, {
|
|
type: 'Primary',
|
|
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
|
tag: item.AlbumPrimaryImageTag
|
|
});
|
|
shape = 'square';
|
|
} else if (item.SeriesId && item.SeriesPrimaryImageTag) {
|
|
url = apiClient.getScaledImageUrl(item.SeriesId, {
|
|
type: 'Primary',
|
|
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
|
tag: item.SeriesPrimaryImageTag
|
|
});
|
|
} else if (item.ParentPrimaryImageItemId && item.ParentPrimaryImageTag) {
|
|
url = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
|
|
type: 'Primary',
|
|
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
|
tag: item.ParentPrimaryImageTag
|
|
});
|
|
}
|
|
|
|
if (editable && url === undefined) {
|
|
html += "<a class='itemDetailGalleryLink itemDetailImage defaultCardBackground defaultCardBackground"+ cardBuilder.getDefaultBackgroundClass(item.Name) + "' is='emby-linkbutton' style='display:block;margin:0;padding:0;' href='#'>";
|
|
} else if (!editable && url === undefined) {
|
|
html += "<div class='itemDetailGalleryLink itemDetailImage defaultCardBackground defaultCardBackground"+ cardBuilder.getDefaultBackgroundClass(item.Name) + "' is='emby-linkbutton' style='display:block;margin:0;padding:0;' href='#'>";
|
|
} else if (editable) {
|
|
html += "<a class='itemDetailGalleryLink' is='emby-linkbutton' style='display:block;margin:0;padding:0;' href='#'>";
|
|
}
|
|
|
|
if (url) {
|
|
html += "<img class='itemDetailImage lazy' src='data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' />";
|
|
}
|
|
|
|
if (url === undefined) {
|
|
html += cardBuilder.getDefaultText(item);
|
|
}
|
|
|
|
if (editable) {
|
|
html += '</a>';
|
|
} else if (!editable && url === undefined) {
|
|
html += '</div>';
|
|
}
|
|
|
|
var progressHtml = item.IsFolder || !item.UserData ? '' : indicators.getProgressBarHtml(item);
|
|
html += '<div class="detailImageProgressContainer">';
|
|
|
|
if (progressHtml) {
|
|
html += progressHtml;
|
|
}
|
|
|
|
html += '</div>';
|
|
elem.innerHTML = html;
|
|
|
|
if (detectRatio && item.PrimaryImageAspectRatio) {
|
|
if (item.PrimaryImageAspectRatio >= 1.48) {
|
|
shape = 'thumb';
|
|
} else if (item.PrimaryImageAspectRatio >= 0.85 && item.PrimaryImageAspectRatio <= 1.34) {
|
|
shape = 'square';
|
|
}
|
|
}
|
|
|
|
if ('thumb' == shape) {
|
|
elem.classList.add('thumbDetailImageContainer');
|
|
elem.classList.remove('portraitDetailImageContainer');
|
|
elem.classList.remove('squareDetailImageContainer');
|
|
} else if ('square' == shape) {
|
|
elem.classList.remove('thumbDetailImageContainer');
|
|
elem.classList.remove('portraitDetailImageContainer');
|
|
elem.classList.add('squareDetailImageContainer');
|
|
} else {
|
|
elem.classList.remove('thumbDetailImageContainer');
|
|
elem.classList.add('portraitDetailImageContainer');
|
|
elem.classList.remove('squareDetailImageContainer');
|
|
}
|
|
|
|
if (url) {
|
|
imageLoader.lazyImage(elem.querySelector('img'), url);
|
|
}
|
|
}
|
|
|
|
function renderImage(page, item, apiClient, user) {
|
|
renderDetailImage(
|
|
page,
|
|
page.querySelector('.detailImageContainer'),
|
|
item,
|
|
apiClient,
|
|
user.Policy.IsAdministrator && 'Photo' != item.MediaType,
|
|
imageLoader,
|
|
indicators
|
|
);
|
|
}
|
|
|
|
function refreshDetailImageUserData(elem, item) {
|
|
elem.querySelector('.detailImageProgressContainer').innerHTML = indicators.getProgressBarHtml(item);
|
|
}
|
|
|
|
function refreshImage(page, item) {
|
|
refreshDetailImageUserData(page.querySelector('.detailImageContainer'), item);
|
|
}
|
|
|
|
function setPeopleHeader(page, item) {
|
|
if ('Audio' == item.MediaType || 'MusicAlbum' == item.Type || 'Book' == item.MediaType || 'Photo' == item.MediaType) {
|
|
page.querySelector('#peopleHeader').innerHTML = globalize.translate('HeaderPeople');
|
|
} else {
|
|
page.querySelector('#peopleHeader').innerHTML = globalize.translate('HeaderCastAndCrew');
|
|
}
|
|
}
|
|
|
|
function renderNextUp(page, item, user) {
|
|
var section = page.querySelector('.nextUpSection');
|
|
|
|
if ('Series' != item.Type) {
|
|
return void section.classList.add('hide');
|
|
}
|
|
|
|
connectionManager.getApiClient(item.ServerId).getNextUpEpisodes({
|
|
SeriesId: item.Id,
|
|
UserId: user.Id
|
|
}).then(function (result) {
|
|
if (result.Items.length) {
|
|
section.classList.remove('hide');
|
|
} else {
|
|
section.classList.add('hide');
|
|
}
|
|
|
|
var html = cardBuilder.getCardsHtml({
|
|
items: result.Items,
|
|
shape: 'overflowBackdrop',
|
|
showTitle: true,
|
|
displayAsSpecial: 'Season' == item.Type && item.IndexNumber,
|
|
overlayText: false,
|
|
centerText: true,
|
|
overlayPlayButton: true
|
|
});
|
|
var itemsContainer = section.querySelector('.nextUpItems');
|
|
itemsContainer.innerHTML = html;
|
|
imageLoader.lazyChildren(itemsContainer);
|
|
});
|
|
}
|
|
|
|
function setInitialCollapsibleState(page, item, apiClient, context, user) {
|
|
page.querySelector('.collectionItems').innerHTML = '';
|
|
|
|
if ('Playlist' == item.Type) {
|
|
page.querySelector('#childrenCollapsible').classList.remove('hide');
|
|
renderPlaylistItems(page, item);
|
|
} else if ('Studio' == item.Type || 'Person' == item.Type || 'Genre' == item.Type || 'MusicGenre' == item.Type || 'MusicArtist' == item.Type) {
|
|
page.querySelector('#childrenCollapsible').classList.remove('hide');
|
|
renderItemsByName(page, item);
|
|
} else if (item.IsFolder) {
|
|
if ('BoxSet' == item.Type) {
|
|
page.querySelector('#childrenCollapsible').classList.add('hide');
|
|
}
|
|
|
|
renderChildren(page, item);
|
|
} else {
|
|
page.querySelector('#childrenCollapsible').classList.add('hide');
|
|
}
|
|
|
|
if ('Series' == item.Type) {
|
|
renderSeriesSchedule(page, item);
|
|
renderNextUp(page, item, user);
|
|
} else {
|
|
page.querySelector('.nextUpSection').classList.add('hide');
|
|
}
|
|
|
|
renderScenes(page, item);
|
|
|
|
if (item.SpecialFeatureCount && 0 != item.SpecialFeatureCount && 'Series' != item.Type) {
|
|
page.querySelector('#specialsCollapsible').classList.remove('hide');
|
|
renderSpecials(page, item, user, 6);
|
|
} else {
|
|
page.querySelector('#specialsCollapsible').classList.add('hide');
|
|
}
|
|
|
|
renderCast(page, item);
|
|
|
|
if (item.PartCount && item.PartCount > 1) {
|
|
page.querySelector('#additionalPartsCollapsible').classList.remove('hide');
|
|
renderAdditionalParts(page, item, user);
|
|
} else {
|
|
page.querySelector('#additionalPartsCollapsible').classList.add('hide');
|
|
}
|
|
|
|
if ('MusicAlbum' == item.Type) {
|
|
renderMusicVideos(page, item, user);
|
|
} else {
|
|
page.querySelector('#musicVideosCollapsible').classList.add('hide');
|
|
}
|
|
}
|
|
|
|
function renderOverview(elems, item) {
|
|
for (var i = 0, length = elems.length; i < length; i++) {
|
|
var elem = elems[i];
|
|
var overview = item.Overview || '';
|
|
|
|
if (overview) {
|
|
elem.innerHTML = overview;
|
|
elem.classList.remove('hide');
|
|
var anchors = elem.querySelectorAll('a');
|
|
|
|
for (var j = 0, length2 = anchors.length; j < length2; j++) {
|
|
anchors[j].setAttribute('target', '_blank');
|
|
}
|
|
} else {
|
|
elem.innerHTML = '';
|
|
elem.classList.add('hide');
|
|
}
|
|
}
|
|
}
|
|
|
|
function renderGenres(page, item, context) {
|
|
context = context || inferContext(item);
|
|
var type;
|
|
var genres = item.GenreItems || [];
|
|
|
|
switch (context) {
|
|
case 'music':
|
|
type = 'MusicGenre';
|
|
break;
|
|
|
|
default:
|
|
type = 'Genre';
|
|
}
|
|
|
|
var html = genres.map(function (p) {
|
|
return '<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + appRouter.getRouteUrl({
|
|
Name: p.Name,
|
|
Type: type,
|
|
ServerId: item.ServerId,
|
|
Id: p.Id
|
|
}, {
|
|
context: context
|
|
}) + '">' + p.Name + '</a>';
|
|
}).join(', ');
|
|
|
|
var genresLabel = page.querySelector('.genresLabel');
|
|
genresLabel.innerHTML = globalize.translate(genres.length > 1 ? 'Genres' : 'Genre');
|
|
var genresValue = page.querySelector('.genres');
|
|
genresValue.innerHTML = html;
|
|
|
|
var genresGroup = page.querySelector('.genresGroup');
|
|
if (genres.length) {
|
|
genresGroup.classList.remove('hide');
|
|
} else {
|
|
genresGroup.classList.add('hide');
|
|
}
|
|
}
|
|
|
|
function renderDirector(page, item, context) {
|
|
var directors = (item.People || []).filter(function (p) {
|
|
return 'Director' === p.Type;
|
|
});
|
|
var html = directors.map(function (p) {
|
|
return '<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + appRouter.getRouteUrl({
|
|
Name: p.Name,
|
|
Type: 'Person',
|
|
ServerId: item.ServerId,
|
|
Id: p.Id
|
|
}, {
|
|
context: context
|
|
}) + '">' + p.Name + '</a>';
|
|
}).join(', ');
|
|
|
|
var directorsLabel = page.querySelector('.directorsLabel');
|
|
directorsLabel.innerHTML = globalize.translate(directors.length > 1 ? 'Directors' : 'Director');
|
|
var directorsValue = page.querySelector('.directors');
|
|
directorsValue.innerHTML = html;
|
|
|
|
var directorsGroup = page.querySelector('.directorsGroup');
|
|
if (directors.length) {
|
|
directorsGroup.classList.remove('hide');
|
|
} else {
|
|
directorsGroup.classList.add('hide');
|
|
}
|
|
}
|
|
|
|
function renderDetails(page, item, apiClient, context, isStatic) {
|
|
renderSimilarItems(page, item, context);
|
|
renderMoreFromSeason(page, item, apiClient);
|
|
renderMoreFromArtist(page, item, apiClient);
|
|
renderDirector(page, item, context);
|
|
renderGenres(page, item, context);
|
|
renderChannelGuide(page, apiClient, item);
|
|
var taglineElement = page.querySelector('.tagline');
|
|
|
|
if (item.Taglines && item.Taglines.length) {
|
|
taglineElement.classList.remove('hide');
|
|
taglineElement.innerHTML = item.Taglines[0];
|
|
} else {
|
|
taglineElement.classList.add('hide');
|
|
}
|
|
|
|
var overview = page.querySelector('.overview');
|
|
var externalLinksElem = page.querySelector('.itemExternalLinks');
|
|
|
|
renderOverview([overview], item);
|
|
var i;
|
|
var itemMiscInfo;
|
|
itemMiscInfo = page.querySelectorAll('.itemMiscInfo-primary');
|
|
|
|
for (i = 0; i < itemMiscInfo.length; i++) {
|
|
mediaInfo.fillPrimaryMediaInfo(itemMiscInfo[i], item, {
|
|
interactive: true,
|
|
episodeTitle: false,
|
|
subtitles: false
|
|
});
|
|
|
|
if (itemMiscInfo[i].innerHTML && 'SeriesTimer' !== item.Type) {
|
|
itemMiscInfo[i].classList.remove('hide');
|
|
} else {
|
|
itemMiscInfo[i].classList.add('hide');
|
|
}
|
|
}
|
|
|
|
itemMiscInfo = page.querySelectorAll('.itemMiscInfo-secondary');
|
|
|
|
for (i = 0; i < itemMiscInfo.length; i++) {
|
|
mediaInfo.fillSecondaryMediaInfo(itemMiscInfo[i], item, {
|
|
interactive: true
|
|
});
|
|
|
|
if (itemMiscInfo[i].innerHTML && 'SeriesTimer' !== item.Type) {
|
|
itemMiscInfo[i].classList.remove('hide');
|
|
} else {
|
|
itemMiscInfo[i].classList.add('hide');
|
|
}
|
|
}
|
|
|
|
reloadUserDataButtons(page, item);
|
|
renderLinks(externalLinksElem, item);
|
|
renderTags(page, item);
|
|
renderSeriesAirTime(page, item, isStatic);
|
|
}
|
|
|
|
function enableScrollX() {
|
|
return browser.mobile && screen.availWidth <= 1000;
|
|
}
|
|
|
|
function getPortraitShape(scrollX) {
|
|
if (null == scrollX) {
|
|
scrollX = enableScrollX();
|
|
}
|
|
|
|
return scrollX ? 'overflowPortrait' : 'portrait';
|
|
}
|
|
|
|
function getSquareShape(scrollX) {
|
|
if (null == scrollX) {
|
|
scrollX = enableScrollX();
|
|
}
|
|
|
|
return scrollX ? 'overflowSquare' : 'square';
|
|
}
|
|
|
|
function renderMoreFromSeason(view, item, apiClient) {
|
|
var section = view.querySelector('.moreFromSeasonSection');
|
|
|
|
if (section) {
|
|
if ('Episode' !== item.Type || !item.SeasonId || !item.SeriesId) {
|
|
return void section.classList.add('hide');
|
|
}
|
|
|
|
var userId = apiClient.getCurrentUserId();
|
|
apiClient.getEpisodes(item.SeriesId, {
|
|
SeasonId: item.SeasonId,
|
|
UserId: userId,
|
|
Fields: 'ItemCounts,PrimaryImageAspectRatio,BasicSyncInfo,CanDelete,MediaSourceCount'
|
|
}).then(function (result) {
|
|
if (result.Items.length < 2) {
|
|
return void section.classList.add('hide');
|
|
}
|
|
|
|
section.classList.remove('hide');
|
|
section.querySelector('h2').innerHTML = globalize.translate('MoreFromValue', item.SeasonName);
|
|
var itemsContainer = section.querySelector('.itemsContainer');
|
|
cardBuilder.buildCards(result.Items, {
|
|
parentContainer: section,
|
|
itemsContainer: itemsContainer,
|
|
shape: 'autooverflow',
|
|
sectionTitleTagName: 'h2',
|
|
scalable: true,
|
|
showTitle: true,
|
|
overlayText: false,
|
|
centerText: true,
|
|
includeParentInfoInTitle: false,
|
|
allowBottomPadding: false
|
|
});
|
|
var card = itemsContainer.querySelector('.card[data-id="' + item.Id + '"]');
|
|
|
|
if (card) {
|
|
setTimeout(function () {
|
|
section.querySelector('.emby-scroller').toStart(card.previousSibling || card, true);
|
|
}, 100);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function renderMoreFromArtist(view, item, apiClient) {
|
|
var section = view.querySelector('.moreFromArtistSection');
|
|
|
|
if (section) {
|
|
if ('MusicArtist' === item.Type) {
|
|
if (!apiClient.isMinServerVersion('3.4.1.19')) {
|
|
return void section.classList.add('hide');
|
|
}
|
|
} else if ('MusicAlbum' !== item.Type || !item.AlbumArtists || !item.AlbumArtists.length) {
|
|
return void section.classList.add('hide');
|
|
}
|
|
|
|
var query = {
|
|
IncludeItemTypes: 'MusicAlbum',
|
|
Recursive: true,
|
|
ExcludeItemIds: item.Id,
|
|
SortBy: 'ProductionYear,SortName',
|
|
SortOrder: 'Descending'
|
|
};
|
|
|
|
if ('MusicArtist' === item.Type) {
|
|
query.ContributingArtistIds = item.Id;
|
|
} else if (apiClient.isMinServerVersion('3.4.1.18')) {
|
|
query.AlbumArtistIds = item.AlbumArtists[0].Id;
|
|
} else {
|
|
query.ArtistIds = item.AlbumArtists[0].Id;
|
|
}
|
|
|
|
apiClient.getItems(apiClient.getCurrentUserId(), query).then(function (result) {
|
|
if (!result.Items.length) {
|
|
return void section.classList.add('hide');
|
|
}
|
|
|
|
section.classList.remove('hide');
|
|
|
|
if ('MusicArtist' === item.Type) {
|
|
section.querySelector('h2').innerHTML = globalize.translate('HeaderAppearsOn');
|
|
} else {
|
|
section.querySelector('h2').innerHTML = globalize.translate('MoreFromValue', item.AlbumArtists[0].Name);
|
|
}
|
|
|
|
cardBuilder.buildCards(result.Items, {
|
|
parentContainer: section,
|
|
itemsContainer: section.querySelector('.itemsContainer'),
|
|
shape: 'autooverflow',
|
|
sectionTitleTagName: 'h2',
|
|
scalable: true,
|
|
coverImage: 'MusicArtist' === item.Type || 'MusicAlbum' === item.Type,
|
|
showTitle: true,
|
|
showParentTitle: false,
|
|
centerText: true,
|
|
overlayText: false,
|
|
overlayPlayButton: true,
|
|
showYear: true
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
function renderSimilarItems(page, item, context) {
|
|
var similarCollapsible = page.querySelector('#similarCollapsible');
|
|
|
|
if (similarCollapsible) {
|
|
if ('Movie' != item.Type && 'Trailer' != item.Type && 'Series' != item.Type && 'Program' != item.Type && 'Recording' != item.Type && 'MusicAlbum' != item.Type && 'MusicArtist' != item.Type && 'Playlist' != item.Type) {
|
|
return void similarCollapsible.classList.add('hide');
|
|
}
|
|
|
|
similarCollapsible.classList.remove('hide');
|
|
var apiClient = connectionManager.getApiClient(item.ServerId);
|
|
var options = {
|
|
userId: apiClient.getCurrentUserId(),
|
|
limit: 12,
|
|
fields: 'PrimaryImageAspectRatio,UserData,CanDelete'
|
|
};
|
|
|
|
if ('MusicAlbum' == item.Type && item.AlbumArtists && item.AlbumArtists.length) {
|
|
options.ExcludeArtistIds = item.AlbumArtists[0].Id;
|
|
}
|
|
|
|
apiClient.getSimilarItems(item.Id, options).then(function (result) {
|
|
if (!result.Items.length) {
|
|
return void similarCollapsible.classList.add('hide');
|
|
}
|
|
|
|
similarCollapsible.classList.remove('hide');
|
|
var html = '';
|
|
html += cardBuilder.getCardsHtml({
|
|
items: result.Items,
|
|
shape: 'autooverflow',
|
|
showParentTitle: 'MusicAlbum' == item.Type,
|
|
centerText: true,
|
|
showTitle: true,
|
|
context: context,
|
|
lazy: true,
|
|
showDetailsMenu: true,
|
|
coverImage: 'MusicAlbum' == item.Type || 'MusicArtist' == item.Type,
|
|
overlayPlayButton: true,
|
|
overlayText: false,
|
|
showYear: 'Movie' === item.Type || 'Trailer' === item.Type || 'Series' === item.Type
|
|
});
|
|
var similarContent = similarCollapsible.querySelector('.similarContent');
|
|
similarContent.innerHTML = html;
|
|
imageLoader.lazyChildren(similarContent);
|
|
});
|
|
}
|
|
}
|
|
|
|
function renderSeriesAirTime(page, item, isStatic) {
|
|
var seriesAirTime = page.querySelector('#seriesAirTime');
|
|
if ('Series' != item.Type) {
|
|
seriesAirTime.classList.add('hide');
|
|
return;
|
|
}
|
|
var html = '';
|
|
if (item.AirDays && item.AirDays.length) {
|
|
if (7 == item.AirDays.length) {
|
|
html += 'daily';
|
|
} else {
|
|
html += item.AirDays.map(function (a) {
|
|
return a + 's';
|
|
}).join(',');
|
|
}
|
|
}
|
|
if (item.AirTime) {
|
|
html += ' at ' + item.AirTime;
|
|
}
|
|
if (item.Studios.length) {
|
|
if (isStatic) {
|
|
html += ' on ' + item.Studios[0].Name;
|
|
} else {
|
|
var context = inferContext(item);
|
|
var href = appRouter.getRouteUrl(item.Studios[0], {
|
|
context: context,
|
|
itemType: 'Studio',
|
|
serverId: item.ServerId
|
|
});
|
|
html += ' on <a class="textlink button-link" is="emby-linkbutton" href="' + href + '">' + item.Studios[0].Name + '</a>';
|
|
}
|
|
}
|
|
if (html) {
|
|
html = ('Ended' == item.Status ? 'Aired ' : 'Airs ') + html;
|
|
seriesAirTime.innerHTML = html;
|
|
seriesAirTime.classList.remove('hide');
|
|
} else {
|
|
seriesAirTime.classList.add('hide');
|
|
}
|
|
}
|
|
|
|
function renderTags(page, item) {
|
|
var itemTags = page.querySelector('.itemTags');
|
|
var tagElements = [];
|
|
var tags = item.Tags || [];
|
|
|
|
if ('Program' === item.Type) {
|
|
tags = [];
|
|
}
|
|
|
|
for (var i = 0, length = tags.length; i < length; i++) {
|
|
tagElements.push(tags[i]);
|
|
}
|
|
|
|
if (tagElements.length) {
|
|
itemTags.innerHTML = globalize.translate('TagsValue', tagElements.join(', '));
|
|
itemTags.classList.remove('hide');
|
|
} else {
|
|
itemTags.innerHTML = '';
|
|
itemTags.classList.add('hide');
|
|
}
|
|
}
|
|
|
|
function renderChildren(page, item) {
|
|
var fields = 'ItemCounts,PrimaryImageAspectRatio,BasicSyncInfo,CanDelete,MediaSourceCount';
|
|
var query = {
|
|
ParentId: item.Id,
|
|
Fields: fields
|
|
};
|
|
|
|
if ('BoxSet' !== item.Type) {
|
|
query.SortBy = 'SortName';
|
|
}
|
|
|
|
var promise;
|
|
var apiClient = connectionManager.getApiClient(item.ServerId);
|
|
var userId = apiClient.getCurrentUserId();
|
|
|
|
if ('Series' == item.Type) {
|
|
promise = apiClient.getSeasons(item.Id, {
|
|
userId: userId,
|
|
Fields: fields
|
|
});
|
|
} else if ('Season' == item.Type) {
|
|
fields += ',Overview';
|
|
promise = apiClient.getEpisodes(item.SeriesId, {
|
|
seasonId: item.Id,
|
|
userId: userId,
|
|
Fields: fields
|
|
});
|
|
} else if ('MusicArtist' == item.Type) {
|
|
query.SortBy = 'ProductionYear,SortName';
|
|
}
|
|
|
|
promise = promise || apiClient.getItems(apiClient.getCurrentUserId(), query);
|
|
promise.then(function (result) {
|
|
var html = '';
|
|
var scrollX = false;
|
|
var isList = false;
|
|
var childrenItemsContainer = page.querySelector('.childrenItemsContainer');
|
|
|
|
if ('MusicAlbum' == item.Type) {
|
|
html = listView.getListViewHtml({
|
|
items: result.Items,
|
|
smallIcon: true,
|
|
showIndex: true,
|
|
index: 'disc',
|
|
showIndexNumberLeft: true,
|
|
playFromHere: true,
|
|
action: 'playallfromhere',
|
|
image: false,
|
|
artist: 'auto',
|
|
containerAlbumArtists: item.AlbumArtists,
|
|
addToListButton: true
|
|
});
|
|
isList = true;
|
|
} else if ('Series' == item.Type) {
|
|
scrollX = enableScrollX();
|
|
html = cardBuilder.getCardsHtml({
|
|
items: result.Items,
|
|
shape: 'overflowPortrait',
|
|
showTitle: true,
|
|
centerText: true,
|
|
lazy: true,
|
|
overlayPlayButton: true,
|
|
allowBottomPadding: !scrollX
|
|
});
|
|
} else if ('Season' == item.Type || 'Episode' == item.Type) {
|
|
if ('Episode' !== item.Type) {
|
|
isList = true;
|
|
}
|
|
scrollX = 'Episode' == item.Type;
|
|
if (result.Items.length < 2 && 'Episode' === item.Type) {
|
|
return;
|
|
}
|
|
|
|
if ('Episode' === item.Type) {
|
|
html = cardBuilder.getCardsHtml({
|
|
items: result.Items,
|
|
shape: 'overflowBackdrop',
|
|
showTitle: true,
|
|
displayAsSpecial: 'Season' == item.Type && item.IndexNumber,
|
|
playFromHere: true,
|
|
overlayText: true,
|
|
lazy: true,
|
|
showDetailsMenu: true,
|
|
overlayPlayButton: true,
|
|
allowBottomPadding: !scrollX,
|
|
includeParentInfoInTitle: false
|
|
});
|
|
} else if ('Season' === item.Type) {
|
|
html = listView.getListViewHtml({
|
|
items: result.Items,
|
|
showIndexNumber: false,
|
|
enableOverview: true,
|
|
imageSize: 'large',
|
|
enableSideMediaInfo: false,
|
|
highlight: false,
|
|
action: layoutManager.tv ? 'resume' : 'none',
|
|
infoButton: true,
|
|
imagePlayButton: true,
|
|
includeParentInfoInTitle: false
|
|
});
|
|
}
|
|
}
|
|
|
|
if ('BoxSet' !== item.Type) {
|
|
page.querySelector('#childrenCollapsible').classList.remove('hide');
|
|
}
|
|
if (scrollX) {
|
|
childrenItemsContainer.classList.add('scrollX');
|
|
childrenItemsContainer.classList.add('hiddenScrollX');
|
|
childrenItemsContainer.classList.remove('vertical-wrap');
|
|
childrenItemsContainer.classList.remove('vertical-list');
|
|
} else {
|
|
childrenItemsContainer.classList.remove('scrollX');
|
|
childrenItemsContainer.classList.remove('hiddenScrollX');
|
|
childrenItemsContainer.classList.remove('smoothScrollX');
|
|
if (isList) {
|
|
childrenItemsContainer.classList.add('vertical-list');
|
|
childrenItemsContainer.classList.remove('vertical-wrap');
|
|
} else {
|
|
childrenItemsContainer.classList.add('vertical-wrap');
|
|
childrenItemsContainer.classList.remove('vertical-list');
|
|
}
|
|
}
|
|
childrenItemsContainer.innerHTML = html;
|
|
imageLoader.lazyChildren(childrenItemsContainer);
|
|
if ('BoxSet' == item.Type) {
|
|
var collectionItemTypes = [{
|
|
name: globalize.translate('HeaderVideos'),
|
|
mediaType: 'Video'
|
|
}, {
|
|
name: globalize.translate('HeaderSeries'),
|
|
type: 'Series'
|
|
}, {
|
|
name: globalize.translate('HeaderAlbums'),
|
|
type: 'MusicAlbum'
|
|
}, {
|
|
name: globalize.translate('HeaderBooks'),
|
|
type: 'Book'
|
|
}];
|
|
renderCollectionItems(page, item, collectionItemTypes, result.Items);
|
|
}
|
|
});
|
|
|
|
if ('Season' == item.Type) {
|
|
page.querySelector('#childrenTitle').innerHTML = globalize.translate('HeaderEpisodes');
|
|
} else if ('Series' == item.Type) {
|
|
page.querySelector('#childrenTitle').innerHTML = globalize.translate('HeaderSeasons');
|
|
} else if ('MusicAlbum' == item.Type) {
|
|
page.querySelector('#childrenTitle').innerHTML = globalize.translate('HeaderTracks');
|
|
} else {
|
|
page.querySelector('#childrenTitle').innerHTML = globalize.translate('HeaderItems');
|
|
}
|
|
|
|
if ('MusicAlbum' == item.Type || 'Season' == item.Type) {
|
|
page.querySelector('.childrenSectionHeader').classList.add('hide');
|
|
page.querySelector('#childrenCollapsible').classList.add('verticalSection-extrabottompadding');
|
|
} else {
|
|
page.querySelector('.childrenSectionHeader').classList.remove('hide');
|
|
}
|
|
}
|
|
|
|
function renderItemsByName(page, item) {
|
|
require('scripts/itembynamedetailpage'.split(','), function () {
|
|
window.ItemsByName.renderItems(page, item);
|
|
});
|
|
}
|
|
|
|
function renderPlaylistItems(page, item) {
|
|
require('scripts/playlistedit'.split(','), function () {
|
|
PlaylistViewer.render(page, item);
|
|
});
|
|
}
|
|
|
|
function renderProgramsForChannel(page, result) {
|
|
var html = '';
|
|
var currentItems = [];
|
|
var currentStartDate = null;
|
|
|
|
for (var i = 0, length = result.Items.length; i < length; i++) {
|
|
var item = result.Items[i];
|
|
var itemStartDate = datetime.parseISO8601Date(item.StartDate);
|
|
|
|
if (!(currentStartDate && currentStartDate.toDateString() === itemStartDate.toDateString())) {
|
|
if (currentItems.length) {
|
|
html += '<div class="verticalSection verticalDetailSection">';
|
|
html += '<h2 class="sectionTitle padded-left">' + datetime.toLocaleDateString(currentStartDate, {
|
|
weekday: 'long',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
}) + '</h2>';
|
|
html += '<div is="emby-itemscontainer" class="vertical-list padded-left padded-right">' + listView.getListViewHtml({
|
|
items: currentItems,
|
|
enableUserDataButtons: false,
|
|
showParentTitle: true,
|
|
image: false,
|
|
showProgramTime: true,
|
|
mediaInfo: false,
|
|
parentTitleWithTitle: true
|
|
}) + '</div></div>';
|
|
}
|
|
|
|
currentStartDate = itemStartDate;
|
|
currentItems = [];
|
|
}
|
|
|
|
currentItems.push(item);
|
|
}
|
|
|
|
if (currentItems.length) {
|
|
html += '<div class="verticalSection verticalDetailSection">';
|
|
html += '<h2 class="sectionTitle padded-left">' + datetime.toLocaleDateString(currentStartDate, {
|
|
weekday: 'long',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
}) + '</h2>';
|
|
html += '<div is="emby-itemscontainer" class="vertical-list padded-left padded-right">' + listView.getListViewHtml({
|
|
items: currentItems,
|
|
enableUserDataButtons: false,
|
|
showParentTitle: true,
|
|
image: false,
|
|
showProgramTime: true,
|
|
mediaInfo: false,
|
|
parentTitleWithTitle: true
|
|
}) + '</div></div>';
|
|
}
|
|
|
|
page.querySelector('.programGuide').innerHTML = html;
|
|
}
|
|
|
|
function renderChannelGuide(page, apiClient, item) {
|
|
if ('TvChannel' === item.Type) {
|
|
page.querySelector('.programGuideSection').classList.remove('hide');
|
|
apiClient.getLiveTvPrograms({
|
|
ChannelIds: item.Id,
|
|
UserId: apiClient.getCurrentUserId(),
|
|
HasAired: false,
|
|
SortBy: 'StartDate',
|
|
EnableTotalRecordCount: false,
|
|
EnableImages: false,
|
|
ImageTypeLimit: 0,
|
|
EnableUserData: false
|
|
}).then(function (result) {
|
|
renderProgramsForChannel(page, result);
|
|
});
|
|
}
|
|
}
|
|
|
|
function renderSeriesSchedule(page, item) {
|
|
var apiClient = connectionManager.getApiClient(item.ServerId);
|
|
apiClient.getLiveTvPrograms({
|
|
UserId: apiClient.getCurrentUserId(),
|
|
HasAired: false,
|
|
SortBy: 'StartDate',
|
|
EnableTotalRecordCount: false,
|
|
EnableImages: false,
|
|
ImageTypeLimit: 0,
|
|
Limit: 50,
|
|
EnableUserData: false,
|
|
LibrarySeriesId: item.Id
|
|
}).then(function (result) {
|
|
if (result.Items.length) {
|
|
page.querySelector('#seriesScheduleSection').classList.remove('hide');
|
|
} else {
|
|
page.querySelector('#seriesScheduleSection').classList.add('hide');
|
|
}
|
|
|
|
page.querySelector('#seriesScheduleList').innerHTML = listView.getListViewHtml({
|
|
items: result.Items,
|
|
enableUserDataButtons: false,
|
|
showParentTitle: false,
|
|
image: false,
|
|
showProgramDateTime: true,
|
|
mediaInfo: false,
|
|
showTitle: true,
|
|
moreButton: false,
|
|
action: 'programdialog'
|
|
});
|
|
loading.hide();
|
|
});
|
|
}
|
|
|
|
function inferContext(item) {
|
|
if ('Movie' === item.Type || 'BoxSet' === item.Type) {
|
|
return 'movies';
|
|
}
|
|
|
|
if ('Series' === item.Type || 'Season' === item.Type || 'Episode' === item.Type) {
|
|
return 'tvshows';
|
|
}
|
|
|
|
if ('MusicArtist' === item.Type || 'MusicAlbum' === item.Type || 'Audio' === item.Type || 'AudioBook' === item.Type) {
|
|
return 'music';
|
|
}
|
|
|
|
if ('Program' === item.Type) {
|
|
return 'livetv';
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function filterItemsByCollectionItemType(items, typeInfo) {
|
|
return items.filter(function (item) {
|
|
if (typeInfo.mediaType) {
|
|
return item.MediaType == typeInfo.mediaType;
|
|
}
|
|
|
|
return item.Type == typeInfo.type;
|
|
});
|
|
}
|
|
|
|
function canPlaySomeItemInCollection(items) {
|
|
var i = 0;
|
|
|
|
for (var length = items.length; i < length; i++) {
|
|
if (playbackManager.canPlay(items[i])) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
function renderCollectionItems(page, parentItem, types, items) {
|
|
page.querySelector('.collectionItems').innerHTML = '';
|
|
var i;
|
|
var length;
|
|
|
|
for (i = 0, length = types.length; i < length; i++) {
|
|
var type = types[i];
|
|
var typeItems = filterItemsByCollectionItemType(items, type);
|
|
|
|
if (typeItems.length) {
|
|
renderCollectionItemType(page, parentItem, type, typeItems);
|
|
}
|
|
}
|
|
|
|
var otherType = {
|
|
name: globalize.translate('HeaderOtherItems')
|
|
};
|
|
var otherTypeItems = items.filter(function (curr) {
|
|
return !types.filter(function (t) {
|
|
return filterItemsByCollectionItemType([curr], t).length > 0;
|
|
}).length;
|
|
});
|
|
|
|
if (otherTypeItems.length) {
|
|
renderCollectionItemType(page, parentItem, otherType, otherTypeItems);
|
|
}
|
|
|
|
if (!items.length) {
|
|
renderCollectionItemType(page, parentItem, {
|
|
name: globalize.translate('HeaderItems')
|
|
}, items);
|
|
}
|
|
|
|
var containers = page.querySelectorAll('.collectionItemsContainer');
|
|
|
|
var notifyRefreshNeeded = function () {
|
|
renderChildren(page, parentItem);
|
|
};
|
|
|
|
for (i = 0, length = containers.length; i < length; i++) {
|
|
containers[i].notifyRefreshNeeded = notifyRefreshNeeded;
|
|
}
|
|
|
|
// if nothing in the collection can be played hide play and shuffle buttons
|
|
if (!canPlaySomeItemInCollection(items)) {
|
|
hideAll(page, 'btnPlay', false);
|
|
hideAll(page, 'btnShuffle', false);
|
|
}
|
|
|
|
// HACK: Call autoFocuser again because btnPlay may be hidden, but focused by reloadFromItem
|
|
// FIXME: Sometimes focus does not move until all (?) sections are loaded
|
|
require(['autoFocuser'], function (autoFocuser) {
|
|
autoFocuser.autoFocus(page);
|
|
});
|
|
}
|
|
|
|
function renderCollectionItemType(page, parentItem, type, items) {
|
|
var html = '';
|
|
html += '<div class="verticalSection">';
|
|
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
|
|
html += '<h2 class="sectionTitle sectionTitle-cards">';
|
|
html += '<span>' + type.name + '</span>';
|
|
html += '</h2>';
|
|
html += '<button class="btnAddToCollection sectionTitleButton" type="button" is="paper-icon-button-light" style="margin-left:1em;"><span class="material-icons add"></span></button>';
|
|
html += '</div>';
|
|
html += '<div is="emby-itemscontainer" class="itemsContainer collectionItemsContainer vertical-wrap padded-left padded-right">';
|
|
var shape = 'MusicAlbum' == type.type ? getSquareShape(false) : getPortraitShape(false);
|
|
html += cardBuilder.getCardsHtml({
|
|
items: items,
|
|
shape: shape,
|
|
showTitle: true,
|
|
showYear: 'Video' === type.mediaType || 'Series' === type.type,
|
|
centerText: true,
|
|
lazy: true,
|
|
showDetailsMenu: true,
|
|
overlayMoreButton: true,
|
|
showAddToCollection: false,
|
|
showRemoveFromCollection: true,
|
|
collectionId: parentItem.Id
|
|
});
|
|
html += '</div>';
|
|
html += '</div>';
|
|
var collectionItems = page.querySelector('.collectionItems');
|
|
collectionItems.insertAdjacentHTML('beforeend', html);
|
|
imageLoader.lazyChildren(collectionItems);
|
|
collectionItems.querySelector('.btnAddToCollection').addEventListener('click', function () {
|
|
require(['alert'], function (alert) {
|
|
alert({
|
|
text: globalize.translate('AddItemToCollectionHelp'),
|
|
html: globalize.translate('AddItemToCollectionHelp') + '<br/><br/><a is="emby-linkbutton" class="button-link" target="_blank" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections">' + globalize.translate('ButtonLearnMore') + '</a>'
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderMusicVideos(page, item, user) {
|
|
connectionManager.getApiClient(item.ServerId).getItems(user.Id, {
|
|
SortBy: 'SortName',
|
|
SortOrder: 'Ascending',
|
|
IncludeItemTypes: 'MusicVideo',
|
|
Recursive: true,
|
|
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,CanDelete,MediaSourceCount',
|
|
AlbumIds: item.Id
|
|
}).then(function (result) {
|
|
if (result.Items.length) {
|
|
page.querySelector('#musicVideosCollapsible').classList.remove('hide');
|
|
var musicVideosContent = page.querySelector('.musicVideosContent');
|
|
musicVideosContent.innerHTML = getVideosHtml(result.Items, user);
|
|
imageLoader.lazyChildren(musicVideosContent);
|
|
} else {
|
|
page.querySelector('#musicVideosCollapsible').classList.add('hide');
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderAdditionalParts(page, item, user) {
|
|
connectionManager.getApiClient(item.ServerId).getAdditionalVideoParts(user.Id, item.Id).then(function (result) {
|
|
if (result.Items.length) {
|
|
page.querySelector('#additionalPartsCollapsible').classList.remove('hide');
|
|
var additionalPartsContent = page.querySelector('#additionalPartsContent');
|
|
additionalPartsContent.innerHTML = getVideosHtml(result.Items, user);
|
|
imageLoader.lazyChildren(additionalPartsContent);
|
|
} else {
|
|
page.querySelector('#additionalPartsCollapsible').classList.add('hide');
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderScenes(page, item) {
|
|
var chapters = item.Chapters || [];
|
|
|
|
if (chapters.length && !chapters[0].ImageTag && (chapters = []), chapters.length) {
|
|
page.querySelector('#scenesCollapsible').classList.remove('hide');
|
|
var scenesContent = page.querySelector('#scenesContent');
|
|
|
|
require(['chaptercardbuilder'], function (chaptercardbuilder) {
|
|
chaptercardbuilder.buildChapterCards(item, chapters, {
|
|
itemsContainer: scenesContent,
|
|
backdropShape: 'overflowBackdrop',
|
|
squareShape: 'overflowSquare'
|
|
});
|
|
});
|
|
} else {
|
|
page.querySelector('#scenesCollapsible').classList.add('hide');
|
|
}
|
|
}
|
|
|
|
function getVideosHtml(items, user, limit, moreButtonClass) {
|
|
var html = cardBuilder.getCardsHtml({
|
|
items: items,
|
|
shape: 'auto',
|
|
showTitle: true,
|
|
action: 'play',
|
|
overlayText: false,
|
|
centerText: true,
|
|
showRuntime: true
|
|
});
|
|
|
|
if (limit && items.length > limit) {
|
|
html += '<p style="margin: 0;padding-left:5px;"><button is="emby-button" type="button" class="raised more ' + moreButtonClass + '">' + globalize.translate('ButtonMore') + '</button></p>';
|
|
}
|
|
|
|
return html;
|
|
}
|
|
|
|
function renderSpecials(page, item, user, limit) {
|
|
connectionManager.getApiClient(item.ServerId).getSpecialFeatures(user.Id, item.Id).then(function (specials) {
|
|
var specialsContent = page.querySelector('#specialsContent');
|
|
specialsContent.innerHTML = getVideosHtml(specials, user, limit, 'moreSpecials');
|
|
imageLoader.lazyChildren(specialsContent);
|
|
});
|
|
}
|
|
|
|
function renderCast(page, item) {
|
|
var people = (item.People || []).filter(function (p) {
|
|
return 'Director' !== p.Type;
|
|
});
|
|
|
|
if (!people.length) {
|
|
return void page.querySelector('#castCollapsible').classList.add('hide');
|
|
}
|
|
|
|
page.querySelector('#castCollapsible').classList.remove('hide');
|
|
var castContent = page.querySelector('#castContent');
|
|
|
|
require(['peoplecardbuilder'], function (peoplecardbuilder) {
|
|
peoplecardbuilder.buildPeopleCards(people, {
|
|
itemsContainer: castContent,
|
|
coverImage: true,
|
|
serverId: item.ServerId,
|
|
shape: 'overflowPortrait'
|
|
});
|
|
});
|
|
}
|
|
|
|
function itemDetailPage() {
|
|
var self = this;
|
|
self.setInitialCollapsibleState = setInitialCollapsibleState;
|
|
self.renderDetails = renderDetails;
|
|
self.renderCast = renderCast;
|
|
}
|
|
|
|
function bindAll(view, selector, eventName, fn) {
|
|
var i;
|
|
var length;
|
|
var elems = view.querySelectorAll(selector);
|
|
|
|
for (i = 0, length = elems.length; i < length; i++) {
|
|
elems[i].addEventListener(eventName, fn);
|
|
}
|
|
}
|
|
|
|
function onTrackSelectionsSubmit(e) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
|
|
window.ItemDetailPage = new itemDetailPage();
|
|
return function (view, params) {
|
|
function reload(instance, page, params) {
|
|
loading.show();
|
|
var apiClient = params.serverId ? connectionManager.getApiClient(params.serverId) : ApiClient;
|
|
var promises = [getPromise(apiClient, params), apiClient.getCurrentUser()];
|
|
Promise.all(promises).then(function (responses) {
|
|
var item = responses[0];
|
|
var user = responses[1];
|
|
currentItem = item;
|
|
reloadFromItem(instance, page, params, item, user);
|
|
});
|
|
}
|
|
|
|
function splitVersions(instance, page, apiClient, params) {
|
|
require(['confirm'], function (confirm) {
|
|
confirm('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () {
|
|
loading.show();
|
|
apiClient.ajax({
|
|
type: 'DELETE',
|
|
url: apiClient.getUrl('Videos/' + params.id + '/AlternateSources')
|
|
}).then(function () {
|
|
loading.hide();
|
|
reload(instance, page, params);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function getPlayOptions(startPosition) {
|
|
var audioStreamIndex = view.querySelector('.selectAudio').value || null;
|
|
return {
|
|
startPositionTicks: startPosition,
|
|
mediaSourceId: view.querySelector('.selectSource').value,
|
|
audioStreamIndex: audioStreamIndex,
|
|
subtitleStreamIndex: view.querySelector('.selectSubtitles').value
|
|
};
|
|
}
|
|
|
|
function playItem(item, startPosition) {
|
|
var playOptions = getPlayOptions(startPosition);
|
|
playOptions.items = [item];
|
|
playbackManager.play(playOptions);
|
|
}
|
|
|
|
function playTrailer() {
|
|
playbackManager.playTrailers(currentItem);
|
|
}
|
|
|
|
function playCurrentItem(button, mode) {
|
|
var item = currentItem;
|
|
|
|
if ('Program' === item.Type) {
|
|
var apiClient = connectionManager.getApiClient(item.ServerId);
|
|
return void apiClient.getLiveTvChannel(item.ChannelId, apiClient.getCurrentUserId()).then(function (channel) {
|
|
playbackManager.play({
|
|
items: [channel]
|
|
});
|
|
});
|
|
}
|
|
|
|
playItem(item, item.UserData && 'resume' === mode ? item.UserData.PlaybackPositionTicks : 0);
|
|
}
|
|
|
|
function onPlayClick() {
|
|
playCurrentItem(this, this.getAttribute('data-mode'));
|
|
}
|
|
|
|
function onInstantMixClick() {
|
|
playbackManager.instantMix(currentItem);
|
|
}
|
|
|
|
function onShuffleClick() {
|
|
playbackManager.shuffle(currentItem);
|
|
}
|
|
|
|
function onDeleteClick() {
|
|
require(['deleteHelper'], function (deleteHelper) {
|
|
deleteHelper.deleteItem({
|
|
item: currentItem,
|
|
navigate: true
|
|
});
|
|
});
|
|
}
|
|
|
|
function onCancelSeriesTimerClick() {
|
|
require(['recordingHelper'], function (recordingHelper) {
|
|
recordingHelper.cancelSeriesTimerWithConfirmation(currentItem.Id, currentItem.ServerId).then(function () {
|
|
Dashboard.navigate('livetv.html');
|
|
});
|
|
});
|
|
}
|
|
|
|
function onCancelTimerClick() {
|
|
require(['recordingHelper'], function (recordingHelper) {
|
|
recordingHelper.cancelTimer(connectionManager.getApiClient(currentItem.ServerId), currentItem.TimerId).then(function () {
|
|
reload(self, view, params);
|
|
});
|
|
});
|
|
}
|
|
|
|
function onPlayTrailerClick() {
|
|
playTrailer();
|
|
}
|
|
|
|
function onDownloadClick() {
|
|
require(['fileDownloader'], function (fileDownloader) {
|
|
var downloadHref = apiClient.getItemDownloadUrl(currentItem.Id);
|
|
fileDownloader.download([{
|
|
url: downloadHref,
|
|
itemId: currentItem.Id,
|
|
serverId: currentItem.serverId
|
|
}]);
|
|
});
|
|
}
|
|
|
|
function onMoreCommandsClick() {
|
|
var button = this;
|
|
apiClient.getCurrentUser().then(function (user) {
|
|
itemContextMenu.show(getContextMenuOptions(currentItem, user, button)).then(function (result) {
|
|
if (result.deleted) {
|
|
appRouter.goHome();
|
|
} else if (result.updated) {
|
|
reload(self, view, params);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function onPlayerChange() {
|
|
renderTrackSelections(view, self, currentItem);
|
|
setTrailerButtonVisibility(view, currentItem);
|
|
}
|
|
|
|
function editImages() {
|
|
return new Promise(function (resolve, reject) {
|
|
require(['imageEditor'], function (imageEditor) {
|
|
imageEditor.show({
|
|
itemId: currentItem.Id,
|
|
serverId: currentItem.ServerId
|
|
}).then(resolve, reject);
|
|
});
|
|
});
|
|
}
|
|
|
|
function onWebSocketMessage(e, data) {
|
|
var msg = data;
|
|
|
|
if ('UserDataChanged' === msg.MessageType && currentItem && msg.Data.UserId == apiClient.getCurrentUserId()) {
|
|
var key = currentItem.UserData.Key;
|
|
var userData = msg.Data.UserDataList.filter(function (u) {
|
|
return u.Key == key;
|
|
})[0];
|
|
|
|
if (userData) {
|
|
currentItem.UserData = userData;
|
|
reloadPlayButtons(view, currentItem);
|
|
refreshImage(view, currentItem);
|
|
}
|
|
}
|
|
}
|
|
|
|
var currentItem;
|
|
var self = this;
|
|
var apiClient = params.serverId ? connectionManager.getApiClient(params.serverId) : ApiClient;
|
|
view.querySelectorAll('.btnPlay');
|
|
bindAll(view, '.btnPlay', 'click', onPlayClick);
|
|
bindAll(view, '.btnResume', 'click', onPlayClick);
|
|
bindAll(view, '.btnInstantMix', 'click', onInstantMixClick);
|
|
bindAll(view, '.btnShuffle', 'click', onShuffleClick);
|
|
bindAll(view, '.btnPlayTrailer', 'click', onPlayTrailerClick);
|
|
bindAll(view, '.btnCancelSeriesTimer', 'click', onCancelSeriesTimerClick);
|
|
bindAll(view, '.btnCancelTimer', 'click', onCancelTimerClick);
|
|
bindAll(view, '.btnDeleteItem', 'click', onDeleteClick);
|
|
bindAll(view, '.btnDownload', 'click', onDownloadClick);
|
|
view.querySelector('.trackSelections').addEventListener('submit', onTrackSelectionsSubmit);
|
|
view.querySelector('.btnSplitVersions').addEventListener('click', function () {
|
|
splitVersions(self, view, apiClient, params);
|
|
});
|
|
bindAll(view, '.btnMoreCommands', 'click', onMoreCommandsClick);
|
|
view.querySelector('.selectSource').addEventListener('change', function () {
|
|
renderVideoSelections(view, self._currentPlaybackMediaSources);
|
|
renderAudioSelections(view, self._currentPlaybackMediaSources);
|
|
renderSubtitleSelections(view, self._currentPlaybackMediaSources);
|
|
});
|
|
view.addEventListener('click', function (e) {
|
|
if (dom.parentWithClass(e.target, 'moreScenes')) {
|
|
renderScenes(view, currentItem);
|
|
} else if (dom.parentWithClass(e.target, 'morePeople')) {
|
|
renderCast(view, currentItem);
|
|
} else if (dom.parentWithClass(e.target, 'moreSpecials')) {
|
|
apiClient.getCurrentUser().then(function (user) {
|
|
renderSpecials(view, currentItem, user);
|
|
});
|
|
}
|
|
});
|
|
view.querySelector('.detailImageContainer').addEventListener('click', function (e) {
|
|
if (dom.parentWithClass(e.target, 'itemDetailGalleryLink')) {
|
|
editImages().then(function () {
|
|
reload(self, view, params);
|
|
});
|
|
}
|
|
});
|
|
view.addEventListener('viewshow', function (e) {
|
|
var page = this;
|
|
|
|
if (layoutManager.mobile) {
|
|
libraryMenu.setTransparentMenu(true);
|
|
}
|
|
|
|
if (e.detail.isRestored) {
|
|
if (currentItem) {
|
|
Emby.Page.setTitle('');
|
|
renderTrackSelections(page, self, currentItem, true);
|
|
}
|
|
} else {
|
|
reload(self, page, params);
|
|
}
|
|
|
|
events.on(apiClient, 'message', onWebSocketMessage);
|
|
events.on(playbackManager, 'playerchange', onPlayerChange);
|
|
});
|
|
view.addEventListener('viewbeforehide', function () {
|
|
events.off(apiClient, 'message', onWebSocketMessage);
|
|
events.off(playbackManager, 'playerchange', onPlayerChange);
|
|
libraryMenu.setTransparentMenu(false);
|
|
});
|
|
view.addEventListener('viewdestroy', function () {
|
|
currentItem = null;
|
|
self._currentPlaybackMediaSources = null;
|
|
self.currentRecordingFields = null;
|
|
});
|
|
};
|
|
});
|