');
-
- cardImageContainerClose = '
';
+ if (primaryImageAspectRatio) {
+ if (primaryImageAspectRatio >= 1.33) {
+ shape = 'mixedBackdrop';
+ } else if (primaryImageAspectRatio > 0.71) {
+ shape = 'mixedSquare';
} else {
- const cardImageContainerAriaLabelAttribute = ` aria-label="${escapeHtml(item.Name)}"`;
-
- const url = appRouter.getRouteUrl(item);
- // Don't use the IMG tag with safari because it puts a white border around it
- cardImageContainerOpen = imgUrl ? ('') : ('');
-
- cardImageContainerClose = '';
+ shape = 'mixedPortrait';
}
-
- const cardScalableClass = 'cardScalable';
-
- let cardPadderIcon = '';
-
- // TV Channel logos are transparent so skip the placeholder to avoid overlapping
- if (imgUrl && item.Type !== 'TvChannel') {
- cardPadderIcon = getDefaultText(item, {
- // Always use an icon
- defaultCardImageIcon: 'folder',
- ...options
- });
- }
-
- cardImageContainerOpen = `${cardPadderIcon}
${cardImageContainerOpen}`;
- cardBoxClose = '' + indicatorsHtml + '
';
- }
- }
-
- if (!imgUrl) {
- cardImageContainerOpen += getDefaultText(item, options);
- }
-
- const tagName = (layoutManager.tv) && !overlayButtons ? 'button' : 'div';
-
- const nameWithPrefix = (item.SortName || item.Name || '');
- let prefix = nameWithPrefix.substring(0, Math.min(3, nameWithPrefix.length));
-
- if (prefix) {
- prefix = prefix.toUpperCase();
- }
-
- let timerAttributes = '';
- if (item.TimerId) {
- timerAttributes += ' data-timerid="' + item.TimerId + '"';
- }
- if (item.SeriesTimerId) {
- timerAttributes += ' data-seriestimerid="' + item.SeriesTimerId + '"';
- }
-
- let actionAttribute;
- let ariaLabelAttribute = '';
-
- if (tagName === 'button') {
- className += ' itemAction';
- actionAttribute = ' data-action="' + action + '"';
- ariaLabelAttribute = ` aria-label="${escapeHtml(item.Name)}"`;
- } else {
- actionAttribute = '';
- }
-
- if (item.Type !== 'MusicAlbum' && item.Type !== 'MusicArtist' && item.Type !== 'Audio') {
- className += ' card-withuserdata';
- }
-
- const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
- const collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
- const playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
- const mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : '';
- const collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : '';
- const channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : '';
- const pathData = item.Path ? (' data-path="' + escapeHtml(item.Path) + '"') : '';
- const contextData = options.context ? (' data-context="' + options.context + '"') : '';
- const parentIdData = options.parentId ? (' data-parentid="' + options.parentId + '"') : '';
- const startDate = item.StartDate ? (' data-startdate="' + item.StartDate.toString() + '"') : '';
- const endDate = item.EndDate ? (' data-enddate="' + item.EndDate.toString() + '"') : '';
-
- let additionalCardContent = '';
-
- if (layoutManager.desktop && !options.disableHoverMenu) {
- additionalCardContent += getHoverMenuHtml(item, action);
- }
-
- return '<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId || options.serverId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + pathData + positionTicksData + collectionIdData + playlistIdData + contextData + parentIdData + startDate + endDate + ' data-prefix="' + escapeHtml(prefix) + '" class="' + className + '"' + ariaLabelAttribute + '>' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + overlayButtons + additionalCardContent + cardScalableClose + outerCardFooter + cardBoxClose + '';
}
- /**
+ shape = shape || 'mixedSquare';
+ }
+
+ // TODO move card creation code to Card component
+
+ let className = 'card';
+
+ if (shape) {
+ className += ' ' + shape + 'Card';
+ }
+
+ if (options.cardCssClass) {
+ className += ' ' + options.cardCssClass;
+ }
+
+ if (options.cardClass) {
+ className += ' ' + options.cardClass;
+ }
+
+ if (layoutManager.desktop) {
+ className += ' card-hoverable';
+ }
+
+ if (layoutManager.tv) {
+ className += ' show-focus';
+
+ if (enableFocusTransform) {
+ className += ' show-animation';
+ }
+ }
+
+ const imgInfo = getCardImageUrl(item, apiClient, options, shape);
+ const imgUrl = imgInfo.imgUrl;
+ const blurhash = imgInfo.blurhash;
+
+ const forceName = imgInfo.forceName;
+
+ const overlayText = options.overlayText;
+
+ let cardImageContainerClass = 'cardImageContainer';
+ const coveredImage = options.coverImage || imgInfo.coverImage;
+
+ if (coveredImage) {
+ cardImageContainerClass += ' coveredImage';
+
+ if (item.Type === 'TvChannel') {
+ cardImageContainerClass += ' coveredImage-contain';
+ }
+ }
+
+ if (!imgUrl) {
+ cardImageContainerClass += ' ' + getDefaultBackgroundClass(item.Name);
+ }
+
+ let cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
+
+ let footerCssClass;
+ let progressHtml = indicators.getProgressBarHtml(item);
+
+ let innerCardFooter = '';
+
+ let footerOverlayed = false;
+
+ let logoUrl;
+ const logoHeight = 40;
+
+ if (options.showChannelLogo && item.ChannelPrimaryImageTag) {
+ logoUrl = apiClient.getScaledImageUrl(item.ChannelId, {
+ type: 'Primary',
+ height: logoHeight,
+ tag: item.ChannelPrimaryImageTag
+ });
+ } else if (options.showLogo && item.ParentLogoImageTag) {
+ logoUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
+ type: 'Logo',
+ height: logoHeight,
+ tag: item.ParentLogoImageTag
+ });
+ }
+
+ if (overlayText) {
+ logoUrl = null;
+
+ footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
+ innerCardFooter += getCardFooterText(item, apiClient, options, footerCssClass, progressHtml, { forceName, overlayText, isOuterFooter: false }, { imgUrl, logoUrl });
+ footerOverlayed = true;
+ } else if (progressHtml) {
+ innerCardFooter += '';
+
+ progressHtml = '';
+ }
+
+ const mediaSourceCount = item.MediaSourceCount || 1;
+ if (mediaSourceCount > 1 && options.disableIndicators !== true) {
+ innerCardFooter += '' + mediaSourceCount + '
';
+ }
+
+ let outerCardFooter = '';
+ if (!overlayText && !footerOverlayed) {
+ footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter cardFooter-transparent';
+
+ if (logoUrl) {
+ footerCssClass += ' cardFooter-withlogo';
+ }
+
+ if (!options.cardLayout) {
+ logoUrl = null;
+ }
+
+ outerCardFooter = getCardFooterText(item, apiClient, options, footerCssClass, progressHtml, { forceName, overlayText, isOuterFooter: true }, { imgUrl, logoUrl });
+ }
+
+ if (outerCardFooter && !options.cardLayout) {
+ cardBoxClass += ' cardBox-bottompadded';
+ }
+
+ let overlayButtons = '';
+ if (layoutManager.mobile) {
+ let overlayPlayButton = options.overlayPlayButton;
+
+ if (overlayPlayButton == null && !options.overlayMoreButton && !options.overlayInfoButton && !options.cardLayout) {
+ overlayPlayButton = item.MediaType === 'Video';
+ }
+
+ const btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';
+
+ if (options.centerPlayButton) {
+ overlayButtons += ``;
+ }
+
+ if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') {
+ overlayButtons += ``;
+ }
+
+ if (options.overlayMoreButton) {
+ overlayButtons += ``;
+ }
+ }
+
+ if (options.showChildCountIndicator && item.ChildCount) {
+ className += ' groupedCard';
+ }
+
+ // cardBox can be it's own separate element if an outer footer is ever needed
+ let cardImageContainerOpen;
+ let cardImageContainerClose = '';
+ let cardBoxClose = '';
+ let cardScalableClose = '';
+
+ const cardContentClass = 'cardContent';
+
+ let blurhashAttrib = '';
+ if (blurhash && blurhash.length > 0) {
+ blurhashAttrib = 'data-blurhash="' + blurhash + '"';
+ }
+
+ if (layoutManager.tv) {
+ // Don't use the IMG tag with safari because it puts a white border around it
+ cardImageContainerOpen = imgUrl ? ('') : ('';
+ cardScalableClose = '';
+
+ if (options.disableIndicators !== true) {
+ let indicatorsHtml = '';
+
+ if (options.missingIndicator !== false) {
+ indicatorsHtml += indicators.getMissingIndicator(item);
+ }
+
+ indicatorsHtml += indicators.getSyncIndicator(item);
+ indicatorsHtml += indicators.getTimerIndicator(item);
+
+ indicatorsHtml += indicators.getTypeIndicator(item);
+
+ if (options.showGroupCount) {
+ indicatorsHtml += indicators.getChildCountIndicatorHtml(item, {
+ minCount: 1
+ });
+ } else {
+ indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
+ }
+
+ if (item.Type === 'CollectionFolder' || item.CollectionType) {
+ const refreshClass = item.RefreshProgress ? '' : ' class="hide"';
+ indicatorsHtml += '';
+ importRefreshIndicator();
+ }
+
+ if (indicatorsHtml) {
+ cardImageContainerOpen += '
');
+
+ cardImageContainerClose = '
';
+ } else {
+ const cardImageContainerAriaLabelAttribute = ` aria-label="${escapeHtml(item.Name)}"`;
+
+ const url = appRouter.getRouteUrl(item);
+ // Don't use the IMG tag with safari because it puts a white border around it
+ cardImageContainerOpen = imgUrl ? ('') : ('');
+
+ cardImageContainerClose = '';
+ }
+
+ const cardScalableClass = 'cardScalable';
+
+ let cardPadderIcon = '';
+
+ // TV Channel logos are transparent so skip the placeholder to avoid overlapping
+ if (imgUrl && item.Type !== 'TvChannel') {
+ cardPadderIcon = getDefaultText(item, {
+ // Always use an icon
+ defaultCardImageIcon: 'folder',
+ ...options
+ });
+ }
+
+ cardImageContainerOpen = `${cardPadderIcon}
${cardImageContainerOpen}`;
+ cardBoxClose = '' + indicatorsHtml + '
';
+ }
+ }
+
+ if (!imgUrl) {
+ cardImageContainerOpen += getDefaultText(item, options);
+ }
+
+ const tagName = (layoutManager.tv) && !overlayButtons ? 'button' : 'div';
+
+ const nameWithPrefix = (item.SortName || item.Name || '');
+ let prefix = nameWithPrefix.substring(0, Math.min(3, nameWithPrefix.length));
+
+ if (prefix) {
+ prefix = prefix.toUpperCase();
+ }
+
+ let timerAttributes = '';
+ if (item.TimerId) {
+ timerAttributes += ' data-timerid="' + item.TimerId + '"';
+ }
+ if (item.SeriesTimerId) {
+ timerAttributes += ' data-seriestimerid="' + item.SeriesTimerId + '"';
+ }
+
+ let actionAttribute;
+ let ariaLabelAttribute = '';
+
+ if (tagName === 'button') {
+ className += ' itemAction';
+ actionAttribute = ' data-action="' + action + '"';
+ ariaLabelAttribute = ` aria-label="${escapeHtml(item.Name)}"`;
+ } else {
+ actionAttribute = '';
+ }
+
+ if (item.Type !== 'MusicAlbum' && item.Type !== 'MusicArtist' && item.Type !== 'Audio') {
+ className += ' card-withuserdata';
+ }
+
+ const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
+ const collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
+ const playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
+ const mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : '';
+ const collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : '';
+ const channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : '';
+ const pathData = item.Path ? (' data-path="' + escapeHtml(item.Path) + '"') : '';
+ const contextData = options.context ? (' data-context="' + options.context + '"') : '';
+ const parentIdData = options.parentId ? (' data-parentid="' + options.parentId + '"') : '';
+ const startDate = item.StartDate ? (' data-startdate="' + item.StartDate.toString() + '"') : '';
+ const endDate = item.EndDate ? (' data-enddate="' + item.EndDate.toString() + '"') : '';
+
+ let additionalCardContent = '';
+
+ if (layoutManager.desktop && !options.disableHoverMenu) {
+ additionalCardContent += getHoverMenuHtml(item, action);
+ }
+
+ return '<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId || options.serverId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + pathData + positionTicksData + collectionIdData + playlistIdData + contextData + parentIdData + startDate + endDate + ' data-prefix="' + escapeHtml(prefix) + '" class="' + className + '"' + ariaLabelAttribute + '>' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + overlayButtons + additionalCardContent + cardScalableClose + outerCardFooter + cardBoxClose + '';
+}
+
+/**
* Generates HTML markup for the card overlay.
* @param {object} item - Item used to generate the card overlay.
* @param {string} action - Action assigned to the overlay.
* @returns {string} HTML markup of the card overlay.
*/
- function getHoverMenuHtml(item, action) {
- let html = '';
+function getHoverMenuHtml(item, action) {
+ let html = '';
- html += '';
- const url = appRouter.getRouteUrl(item);
- html += '';
+ html += '
';
- return html;
- }
+ return html;
+}
- /**
+/**
* Generates the text or icon used for default card backgrounds.
* @param {object} item - Item used to generate the card overlay.
* @param {object} options - Options used to generate the card overlay.
* @returns {string} HTML markup of the card overlay.
*/
- export function getDefaultText(item, options) {
- if (item.CollectionType) {
- return '';
- }
+export function getDefaultText(item, options) {
+ if (item.CollectionType) {
+ return '';
+ }
- switch (item.Type) {
- case 'MusicAlbum':
- return '';
- case 'MusicArtist':
- case 'Person':
- return '';
- case 'Audio':
- return '';
- case 'Movie':
- return '';
- case 'Episode':
- case 'Series':
- return '';
- case 'Program':
- return '';
- case 'Book':
- return '';
- case 'Folder':
- return '';
- case 'BoxSet':
- return '';
- case 'Playlist':
- return '';
- case 'Photo':
- return '';
- case 'PhotoAlbum':
- return '';
- }
+ switch (item.Type) {
+ case 'MusicAlbum':
+ return '';
+ case 'MusicArtist':
+ case 'Person':
+ return '';
+ case 'Audio':
+ return '';
+ case 'Movie':
+ return '';
+ case 'Episode':
+ case 'Series':
+ return '';
+ case 'Program':
+ return '';
+ case 'Book':
+ return '';
+ case 'Folder':
+ return '';
+ case 'BoxSet':
+ return '';
+ case 'Playlist':
+ return '';
+ case 'Photo':
+ return '';
+ case 'PhotoAlbum':
+ return '';
+ }
- if (options?.defaultCardImageIcon) {
- return '';
- }
+ if (options?.defaultCardImageIcon) {
+ return '';
+ }
- const defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item);
- return '';
+ const url = appRouter.getRouteUrl(item);
+ html += '';
- const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
+ const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
- if (playbackManager.canPlay(item)) {
- html += '';
- }
+ if (playbackManager.canPlay(item)) {
+ html += '';
+ }
- html += '
';
+ html += '';
+ html += '
';
+ html += ``;
+ html += '';
- const userData = item.UserData || {};
+ const userData = item.UserData || {};
- if (itemHelper.canMarkPlayed(item)) {
- /* eslint-disable-next-line @babel/no-unused-expressions */
- import('../../elements/emby-playstatebutton/emby-playstatebutton');
- html += '';
- }
+ if (itemHelper.canMarkPlayed(item)) {
+ /* eslint-disable-next-line @babel/no-unused-expressions */
+ import('../../elements/emby-playstatebutton/emby-playstatebutton');
+ html += '';
+ }
- if (itemHelper.canRate(item)) {
- const likes = userData.Likes == null ? '' : userData.Likes;
+ if (itemHelper.canRate(item)) {
+ const likes = userData.Likes == null ? '' : userData.Likes;
- /* eslint-disable-next-line @babel/no-unused-expressions */
- import('../../elements/emby-ratingbutton/emby-ratingbutton');
- html += '';
- }
+ /* eslint-disable-next-line @babel/no-unused-expressions */
+ import('../../elements/emby-ratingbutton/emby-ratingbutton');
+ html += '';
+ }
- html += ``;
- html += '
';
- html += '' + escapeHtml(defaultName) + '
';
- }
+ const defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item);
+ return '' + escapeHtml(defaultName) + '
';
+}
- /**
+/**
* Builds a set of cards and inserts them into the page.
* @param {Array} items - Array of items used to build the cards.
* @param {options} options - Options of the cards to build.
*/
- export function buildCards(items, options) {
- // Abort if the container has been disposed
- if (!document.body.contains(options.itemsContainer)) {
- return;
- }
+export function buildCards(items, options) {
+ // Abort if the container has been disposed
+ if (!document.body.contains(options.itemsContainer)) {
+ return;
+ }
- if (options.parentContainer) {
- if (items.length) {
- options.parentContainer.classList.remove('hide');
- } else {
- options.parentContainer.classList.add('hide');
- return;
- }
- }
+ if (options.parentContainer) {
+ if (items.length) {
+ options.parentContainer.classList.remove('hide');
+ } else {
+ options.parentContainer.classList.add('hide');
+ return;
+ }
+ }
- const html = buildCardsHtmlInternal(items, options);
+ const html = buildCardsHtmlInternal(items, options);
- if (html) {
- if (options.itemsContainer.cardBuilderHtml !== html) {
- options.itemsContainer.innerHTML = html;
+ if (html) {
+ if (options.itemsContainer.cardBuilderHtml !== html) {
+ options.itemsContainer.innerHTML = html;
- if (items.length < 50) {
- options.itemsContainer.cardBuilderHtml = html;
- } else {
- options.itemsContainer.cardBuilderHtml = null;
- }
- }
-
- imageLoader.lazyChildren(options.itemsContainer);
+ if (items.length < 50) {
+ options.itemsContainer.cardBuilderHtml = html;
} else {
- options.itemsContainer.innerHTML = html;
options.itemsContainer.cardBuilderHtml = null;
}
-
- if (options.autoFocus) {
- focusManager.autoFocus(options.itemsContainer, true);
- }
}
- /**
+ imageLoader.lazyChildren(options.itemsContainer);
+ } else {
+ options.itemsContainer.innerHTML = html;
+ options.itemsContainer.cardBuilderHtml = null;
+ }
+
+ if (options.autoFocus) {
+ focusManager.autoFocus(options.itemsContainer, true);
+ }
+}
+
+/**
* Ensures the indicators for a card exist and creates them if they don't exist.
* @param {HTMLDivElement} card - DOM element of the card.
* @param {HTMLDivElement} indicatorsElem - DOM element of the indicators.
* @returns {HTMLDivElement} - DOM element of the indicators.
*/
- function ensureIndicators(card, indicatorsElem) {
- if (indicatorsElem) {
- return indicatorsElem;
- }
+function ensureIndicators(card, indicatorsElem) {
+ if (indicatorsElem) {
+ return indicatorsElem;
+ }
- indicatorsElem = card.querySelector('.cardIndicators');
+ indicatorsElem = card.querySelector('.cardIndicators');
- if (!indicatorsElem) {
- const cardImageContainer = card.querySelector('.cardImageContainer');
- indicatorsElem = document.createElement('div');
- indicatorsElem.classList.add('cardIndicators');
- cardImageContainer.appendChild(indicatorsElem);
- }
+ if (!indicatorsElem) {
+ const cardImageContainer = card.querySelector('.cardImageContainer');
+ indicatorsElem = document.createElement('div');
+ indicatorsElem.classList.add('cardIndicators');
+ cardImageContainer.appendChild(indicatorsElem);
+ }
- return indicatorsElem;
- }
+ return indicatorsElem;
+}
- /**
+/**
* Adds user data to the card such as progress indicators and played status.
* @param {HTMLDivElement} card - DOM element of the card.
* @param {Object} userData - User data to apply to the card.
*/
- function updateUserData(card, userData) {
- const type = card.getAttribute('data-type');
- const enableCountIndicator = type === 'Series' || type === 'BoxSet' || type === 'Season';
- let indicatorsElem = null;
- let playedIndicator = null;
- let countIndicator = null;
- let itemProgressBar = null;
+function updateUserData(card, userData) {
+ const type = card.getAttribute('data-type');
+ const enableCountIndicator = type === 'Series' || type === 'BoxSet' || type === 'Season';
+ let indicatorsElem = null;
+ let playedIndicator = null;
+ let countIndicator = null;
+ let itemProgressBar = null;
- if (userData.Played) {
- playedIndicator = card.querySelector('.playedIndicator');
+ if (userData.Played) {
+ playedIndicator = card.querySelector('.playedIndicator');
- if (!playedIndicator) {
- playedIndicator = document.createElement('div');
- playedIndicator.classList.add('playedIndicator');
- playedIndicator.classList.add('indicator');
- indicatorsElem = ensureIndicators(card, indicatorsElem);
- indicatorsElem.appendChild(playedIndicator);
- }
- playedIndicator.innerHTML = '';
- } else {
- playedIndicator = card.querySelector('.playedIndicator');
- if (playedIndicator) {
- playedIndicator.parentNode.removeChild(playedIndicator);
- }
- }
- if (userData.UnplayedItemCount) {
- countIndicator = card.querySelector('.countIndicator');
-
- if (!countIndicator) {
- countIndicator = document.createElement('div');
- countIndicator.classList.add('countIndicator');
- indicatorsElem = ensureIndicators(card, indicatorsElem);
- indicatorsElem.appendChild(countIndicator);
- }
- countIndicator.innerHTML = userData.UnplayedItemCount;
- } else if (enableCountIndicator) {
- countIndicator = card.querySelector('.countIndicator');
- if (countIndicator) {
- countIndicator.parentNode.removeChild(countIndicator);
- }
- }
-
- const progressHtml = indicators.getProgressBarHtml({
- Type: type,
- UserData: userData,
- MediaType: 'Video'
- });
-
- if (progressHtml) {
- itemProgressBar = card.querySelector('.itemProgressBar');
-
- if (!itemProgressBar) {
- itemProgressBar = document.createElement('div');
- itemProgressBar.classList.add('itemProgressBar');
-
- let innerCardFooter = card.querySelector('.innerCardFooter');
- if (!innerCardFooter) {
- innerCardFooter = document.createElement('div');
- innerCardFooter.classList.add('innerCardFooter');
- const cardImageContainer = card.querySelector('.cardImageContainer');
- cardImageContainer.appendChild(innerCardFooter);
- }
- innerCardFooter.appendChild(itemProgressBar);
- }
-
- itemProgressBar.innerHTML = progressHtml;
- } else {
- itemProgressBar = card.querySelector('.itemProgressBar');
- if (itemProgressBar) {
- itemProgressBar.parentNode.removeChild(itemProgressBar);
- }
+ if (!playedIndicator) {
+ playedIndicator = document.createElement('div');
+ playedIndicator.classList.add('playedIndicator');
+ playedIndicator.classList.add('indicator');
+ indicatorsElem = ensureIndicators(card, indicatorsElem);
+ indicatorsElem.appendChild(playedIndicator);
+ }
+ playedIndicator.innerHTML = '';
+ } else {
+ playedIndicator = card.querySelector('.playedIndicator');
+ if (playedIndicator) {
+ playedIndicator.parentNode.removeChild(playedIndicator);
+ }
+ }
+ if (userData.UnplayedItemCount) {
+ countIndicator = card.querySelector('.countIndicator');
+
+ if (!countIndicator) {
+ countIndicator = document.createElement('div');
+ countIndicator.classList.add('countIndicator');
+ indicatorsElem = ensureIndicators(card, indicatorsElem);
+ indicatorsElem.appendChild(countIndicator);
+ }
+ countIndicator.innerHTML = userData.UnplayedItemCount;
+ } else if (enableCountIndicator) {
+ countIndicator = card.querySelector('.countIndicator');
+ if (countIndicator) {
+ countIndicator.parentNode.removeChild(countIndicator);
+ }
+ }
+
+ const progressHtml = indicators.getProgressBarHtml({
+ Type: type,
+ UserData: userData,
+ MediaType: 'Video'
+ });
+
+ if (progressHtml) {
+ itemProgressBar = card.querySelector('.itemProgressBar');
+
+ if (!itemProgressBar) {
+ itemProgressBar = document.createElement('div');
+ itemProgressBar.classList.add('itemProgressBar');
+
+ let innerCardFooter = card.querySelector('.innerCardFooter');
+ if (!innerCardFooter) {
+ innerCardFooter = document.createElement('div');
+ innerCardFooter.classList.add('innerCardFooter');
+ const cardImageContainer = card.querySelector('.cardImageContainer');
+ cardImageContainer.appendChild(innerCardFooter);
}
+ innerCardFooter.appendChild(itemProgressBar);
}
- /**
+ itemProgressBar.innerHTML = progressHtml;
+ } else {
+ itemProgressBar = card.querySelector('.itemProgressBar');
+ if (itemProgressBar) {
+ itemProgressBar.parentNode.removeChild(itemProgressBar);
+ }
+ }
+}
+
+/**
* Handles when user data has changed.
* @param {Object} userData - User data to apply to the card.
* @param {HTMLElement} scope - DOM element to use as a scope when selecting cards.
*/
- export function onUserDataChanged(userData, scope) {
- const cards = (scope || document.body).querySelectorAll('.card-withuserdata[data-id="' + userData.ItemId + '"]');
+export function onUserDataChanged(userData, scope) {
+ const cards = (scope || document.body).querySelectorAll('.card-withuserdata[data-id="' + userData.ItemId + '"]');
- for (let i = 0, length = cards.length; i < length; i++) {
- updateUserData(cards[i], userData);
- }
- }
+ for (let i = 0, length = cards.length; i < length; i++) {
+ updateUserData(cards[i], userData);
+ }
+}
- /**
+/**
* Handles when a timer has been created.
* @param {string} programId - ID of the program.
* @param {string} newTimerId - ID of the new timer.
* @param {HTMLElement} itemsContainer - DOM element of the itemsContainer.
*/
- export function onTimerCreated(programId, newTimerId, itemsContainer) {
- const cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]');
+export function onTimerCreated(programId, newTimerId, itemsContainer) {
+ const cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]');
- for (let i = 0, length = cells.length; i < length; i++) {
- const cell = cells[i];
- const icon = cell.querySelector('.timerIndicator');
- if (!icon) {
- const indicatorsElem = ensureIndicators(cell);
- indicatorsElem.insertAdjacentHTML('beforeend', '');
- }
- cell.setAttribute('data-timerid', newTimerId);
- }
+ for (let i = 0, length = cells.length; i < length; i++) {
+ const cell = cells[i];
+ const icon = cell.querySelector('.timerIndicator');
+ if (!icon) {
+ const indicatorsElem = ensureIndicators(cell);
+ indicatorsElem.insertAdjacentHTML('beforeend', '');
}
+ cell.setAttribute('data-timerid', newTimerId);
+ }
+}
- /**
+/**
* Handles when a timer has been cancelled.
* @param {string} timerId - ID of the cancelled timer.
* @param {HTMLElement} itemsContainer - DOM element of the itemsContainer.
*/
- export function onTimerCancelled(timerId, itemsContainer) {
- const cells = itemsContainer.querySelectorAll('.card[data-timerid="' + timerId + '"]');
+export function onTimerCancelled(timerId, itemsContainer) {
+ const cells = itemsContainer.querySelectorAll('.card[data-timerid="' + timerId + '"]');
- for (let i = 0; i < cells.length; i++) {
- const cell = cells[i];
- const icon = cell.querySelector('.timerIndicator');
- if (icon) {
- icon.parentNode.removeChild(icon);
- }
- cell.removeAttribute('data-timerid');
- }
+ for (let i = 0; i < cells.length; i++) {
+ const cell = cells[i];
+ const icon = cell.querySelector('.timerIndicator');
+ if (icon) {
+ icon.parentNode.removeChild(icon);
}
+ cell.removeAttribute('data-timerid');
+ }
+}
- /**
+/**
* Handles when a series timer has been cancelled.
* @param {string} cancelledTimerId - ID of the cancelled timer.
* @param {HTMLElement} itemsContainer - DOM element of the itemsContainer.
*/
- export function onSeriesTimerCancelled(cancelledTimerId, itemsContainer) {
- const cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + cancelledTimerId + '"]');
+export function onSeriesTimerCancelled(cancelledTimerId, itemsContainer) {
+ const cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + cancelledTimerId + '"]');
- for (let i = 0; i < cells.length; i++) {
- const cell = cells[i];
- const icon = cell.querySelector('.timerIndicator');
- if (icon) {
- icon.parentNode.removeChild(icon);
- }
- cell.removeAttribute('data-seriestimerid');
- }
+ for (let i = 0; i < cells.length; i++) {
+ const cell = cells[i];
+ const icon = cell.querySelector('.timerIndicator');
+ if (icon) {
+ icon.parentNode.removeChild(icon);
}
-
-/* eslint-enable indent */
+ cell.removeAttribute('data-seriestimerid');
+ }
+}
export default {
getCardsHtml: getCardsHtml,
diff --git a/src/components/cardbuilder/chaptercardbuilder.js b/src/components/cardbuilder/chaptercardbuilder.js
index 794e845f8f..4a359cd9f4 100644
--- a/src/components/cardbuilder/chaptercardbuilder.js
+++ b/src/components/cardbuilder/chaptercardbuilder.js
@@ -1,4 +1,3 @@
-/* eslint-disable indent */
/**
* Module for building cards from item data.
@@ -12,123 +11,121 @@ import layoutManager from '../layoutManager';
import browser from '../../scripts/browser';
import ServerConnections from '../ServerConnections';
- const enableFocusTransform = !browser.slow && !browser.edge;
+const enableFocusTransform = !browser.slow && !browser.edge;
- function buildChapterCardsHtml(item, chapters, options) {
- // TODO move card creation code to Card component
+function buildChapterCardsHtml(item, chapters, options) {
+ // TODO move card creation code to Card component
- let className = 'card itemAction chapterCard';
+ let className = 'card itemAction chapterCard';
- if (layoutManager.tv) {
- className += ' show-focus';
+ if (layoutManager.tv) {
+ className += ' show-focus';
- if (enableFocusTransform) {
- className += ' show-animation';
- }
+ if (enableFocusTransform) {
+ className += ' show-animation';
}
-
- const mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
- const videoStream = mediaStreams.filter(({ Type }) => {
- return Type === 'Video';
- })[0] || {};
-
- let shape = (options.backdropShape || 'backdrop');
-
- if (videoStream.Width && videoStream.Height && (videoStream.Width / videoStream.Height) <= 1.2) {
- shape = (options.squareShape || 'square');
- }
-
- className += ` ${shape}Card`;
-
- if (options.block || options.rows) {
- className += ' block';
- }
-
- let html = '';
- let itemsInRow = 0;
-
- const apiClient = ServerConnections.getApiClient(item.ServerId);
-
- for (let i = 0, length = chapters.length; i < length; i++) {
- if (options.rows && itemsInRow === 0) {
- html += '';
- }
-
- const chapter = chapters[i];
-
- html += buildChapterCard(item, apiClient, chapter, i, options, className, shape);
- itemsInRow++;
-
- if (options.rows && itemsInRow >= options.rows) {
- itemsInRow = 0;
- html += '
';
- }
- }
-
- return html;
}
- function getImgUrl({ Id }, { ImageTag }, index, maxWidth, apiClient) {
- if (ImageTag) {
- return apiClient.getScaledImageUrl(Id, {
+ const mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
+ const videoStream = mediaStreams.filter(({ Type }) => {
+ return Type === 'Video';
+ })[0] || {};
- maxWidth: maxWidth,
- tag: ImageTag,
- type: 'Chapter',
- index
- });
- }
+ let shape = (options.backdropShape || 'backdrop');
- return null;
+ if (videoStream.Width && videoStream.Height && (videoStream.Width / videoStream.Height) <= 1.2) {
+ shape = (options.squareShape || 'square');
}
- function buildChapterCard(item, apiClient, chapter, index, { width, coverImage }, className, shape) {
- const imgUrl = getImgUrl(item, chapter, index, width || 400, apiClient);
+ className += ` ${shape}Card`;
- let cardImageContainerClass = 'cardContent cardContent-shadow cardImageContainer chapterCardImageContainer';
- if (coverImage) {
- cardImageContainerClass += ' coveredImage';
- }
- const dataAttributes = ` data-action="play" data-isfolder="${item.IsFolder}" data-id="${item.Id}" data-serverid="${item.ServerId}" data-type="${item.Type}" data-mediatype="${item.MediaType}" data-positionticks="${chapter.StartPositionTicks}"`;
- let cardImageContainer = imgUrl ? (``) : (`
`);
-
- if (!imgUrl) {
- cardImageContainer += '';
- }
-
- let nameHtml = '';
- nameHtml += `
`;
+ if (options.block || options.rows) {
+ className += ' block';
}
- export function buildChapterCards(item, chapters, options) {
- if (options.parentContainer) {
- // Abort if the container has been disposed
- if (!document.body.contains(options.parentContainer)) {
- return;
- }
+ let html = '';
+ let itemsInRow = 0;
- if (chapters.length) {
- options.parentContainer.classList.remove('hide');
- } else {
- options.parentContainer.classList.add('hide');
- return;
- }
+ const apiClient = ServerConnections.getApiClient(item.ServerId);
+
+ for (let i = 0, length = chapters.length; i < length; i++) {
+ if (options.rows && itemsInRow === 0) {
+ html += '${escapeHtml(chapter.Name)}
`;
- nameHtml += `${datetime.getDisplayRunningTime(chapter.StartPositionTicks)}
`;
-
- const cardBoxCssClass = 'cardBox';
- const cardScalableClass = 'cardScalable';
-
- return `';
}
- const html = buildChapterCardsHtml(item, chapters, options);
+ const chapter = chapters[i];
- options.itemsContainer.innerHTML = html;
+ html += buildChapterCard(item, apiClient, chapter, i, options, className, shape);
+ itemsInRow++;
- imageLoader.lazyChildren(options.itemsContainer);
+ if (options.rows && itemsInRow >= options.rows) {
+ itemsInRow = 0;
+ html += '
';
+ }
}
-/* eslint-enable indent */
+ return html;
+}
+
+function getImgUrl({ Id }, { ImageTag }, index, maxWidth, apiClient) {
+ if (ImageTag) {
+ return apiClient.getScaledImageUrl(Id, {
+
+ maxWidth: maxWidth,
+ tag: ImageTag,
+ type: 'Chapter',
+ index
+ });
+ }
+
+ return null;
+}
+
+function buildChapterCard(item, apiClient, chapter, index, { width, coverImage }, className, shape) {
+ const imgUrl = getImgUrl(item, chapter, index, width || 400, apiClient);
+
+ let cardImageContainerClass = 'cardContent cardContent-shadow cardImageContainer chapterCardImageContainer';
+ if (coverImage) {
+ cardImageContainerClass += ' coveredImage';
+ }
+ const dataAttributes = ` data-action="play" data-isfolder="${item.IsFolder}" data-id="${item.Id}" data-serverid="${item.ServerId}" data-type="${item.Type}" data-mediatype="${item.MediaType}" data-positionticks="${chapter.StartPositionTicks}"`;
+ let cardImageContainer = imgUrl ? (``) : (`
`);
+
+ if (!imgUrl) {
+ cardImageContainer += '';
+ }
+
+ let nameHtml = '';
+ nameHtml += `
`;
+}
+
+export function buildChapterCards(item, chapters, options) {
+ if (options.parentContainer) {
+ // Abort if the container has been disposed
+ if (!document.body.contains(options.parentContainer)) {
+ return;
+ }
+
+ if (chapters.length) {
+ options.parentContainer.classList.remove('hide');
+ } else {
+ options.parentContainer.classList.add('hide');
+ return;
+ }
+ }
+
+ const html = buildChapterCardsHtml(item, chapters, options);
+
+ options.itemsContainer.innerHTML = html;
+
+ imageLoader.lazyChildren(options.itemsContainer);
+}
export default {
buildChapterCards: buildChapterCards
diff --git a/src/components/cardbuilder/peoplecardbuilder.js b/src/components/cardbuilder/peoplecardbuilder.js
index 00b8f0fb89..a991953704 100644
--- a/src/components/cardbuilder/peoplecardbuilder.js
+++ b/src/components/cardbuilder/peoplecardbuilder.js
@@ -1,4 +1,3 @@
-/* eslint-disable indent */
/**
* Module for building cards from item data.
@@ -7,20 +6,18 @@
import cardBuilder from './cardBuilder';
- export function buildPeopleCards(items, options) {
- options = Object.assign(options || {}, {
- cardLayout: false,
- centerText: true,
- showTitle: true,
- cardFooterAside: 'none',
- showPersonRoleOrType: true,
- cardCssClass: 'personCard',
- defaultCardImageIcon: 'person'
- });
- cardBuilder.buildCards(items, options);
- }
-
- /* eslint-enable indent */
+export function buildPeopleCards(items, options) {
+ options = Object.assign(options || {}, {
+ cardLayout: false,
+ centerText: true,
+ showTitle: true,
+ cardFooterAside: 'none',
+ showPersonRoleOrType: true,
+ cardCssClass: 'personCard',
+ defaultCardImageIcon: 'person'
+ });
+ cardBuilder.buildCards(items, options);
+}
export default {
buildPeopleCards: buildPeopleCards
diff --git a/src/components/collectionEditor/collectionEditor.js b/src/components/collectionEditor/collectionEditor.js
index 89862725a5..efcd7f86e7 100644
--- a/src/components/collectionEditor/collectionEditor.js
+++ b/src/components/collectionEditor/collectionEditor.js
@@ -16,254 +16,251 @@ import '../../styles/flexstyles.scss';
import ServerConnections from '../ServerConnections';
import toast from '../toast/toast';
-/* eslint-disable indent */
+let currentServerId;
- let currentServerId;
+function onSubmit(e) {
+ loading.show();
- function onSubmit(e) {
- loading.show();
+ const panel = dom.parentWithClass(this, 'dialog');
- const panel = dom.parentWithClass(this, 'dialog');
+ const collectionId = panel.querySelector('#selectCollectionToAddTo').value;
- const collectionId = panel.querySelector('#selectCollectionToAddTo').value;
+ const apiClient = ServerConnections.getApiClient(currentServerId);
- const apiClient = ServerConnections.getApiClient(currentServerId);
-
- if (collectionId) {
- addToCollection(apiClient, panel, collectionId);
- } else {
- createCollection(apiClient, panel);
- }
-
- e.preventDefault();
- return false;
+ if (collectionId) {
+ addToCollection(apiClient, panel, collectionId);
+ } else {
+ createCollection(apiClient, panel);
}
- function createCollection(apiClient, dlg) {
- const url = apiClient.getUrl('Collections', {
+ e.preventDefault();
+ return false;
+}
- Name: dlg.querySelector('#txtNewCollectionName').value,
- IsLocked: !dlg.querySelector('#chkEnableInternetMetadata').checked,
- Ids: dlg.querySelector('.fldSelectedItemIds').value || ''
- });
+function createCollection(apiClient, dlg) {
+ const url = apiClient.getUrl('Collections', {
- apiClient.ajax({
- type: 'POST',
- url: url,
- dataType: 'json'
+ Name: dlg.querySelector('#txtNewCollectionName').value,
+ IsLocked: !dlg.querySelector('#chkEnableInternetMetadata').checked,
+ Ids: dlg.querySelector('.fldSelectedItemIds').value || ''
+ });
- }).then(result => {
- loading.hide();
+ apiClient.ajax({
+ type: 'POST',
+ url: url,
+ dataType: 'json'
- const id = result.Id;
+ }).then(result => {
+ loading.hide();
- dlg.submitted = true;
- dialogHelper.close(dlg);
- redirectToCollection(apiClient, id);
- });
- }
+ const id = result.Id;
- function redirectToCollection(apiClient, id) {
- appRouter.showItem(id, apiClient.serverId());
- }
+ dlg.submitted = true;
+ dialogHelper.close(dlg);
+ redirectToCollection(apiClient, id);
+ });
+}
- function addToCollection(apiClient, dlg, id) {
- const url = apiClient.getUrl(`Collections/${id}/Items`, {
+function redirectToCollection(apiClient, id) {
+ appRouter.showItem(id, apiClient.serverId());
+}
- Ids: dlg.querySelector('.fldSelectedItemIds').value || ''
- });
+function addToCollection(apiClient, dlg, id) {
+ const url = apiClient.getUrl(`Collections/${id}/Items`, {
- apiClient.ajax({
- type: 'POST',
- url: url
+ Ids: dlg.querySelector('.fldSelectedItemIds').value || ''
+ });
- }).then(() => {
- loading.hide();
+ apiClient.ajax({
+ type: 'POST',
+ url: url
- dlg.submitted = true;
- dialogHelper.close(dlg);
+ }).then(() => {
+ loading.hide();
- toast(globalize.translate('MessageItemsAdded'));
- });
- }
+ dlg.submitted = true;
+ dialogHelper.close(dlg);
- function triggerChange(select) {
- select.dispatchEvent(new CustomEvent('change', {}));
- }
+ toast(globalize.translate('MessageItemsAdded'));
+ });
+}
- function populateCollections(panel) {
- loading.show();
+function triggerChange(select) {
+ select.dispatchEvent(new CustomEvent('change', {}));
+}
- const select = panel.querySelector('#selectCollectionToAddTo');
+function populateCollections(panel) {
+ loading.show();
- panel.querySelector('.newCollectionInfo').classList.add('hide');
+ const select = panel.querySelector('#selectCollectionToAddTo');
- const options = {
+ panel.querySelector('.newCollectionInfo').classList.add('hide');
- Recursive: true,
- IncludeItemTypes: 'BoxSet',
- SortBy: 'SortName',
- EnableTotalRecordCount: false
- };
+ const options = {
- const apiClient = ServerConnections.getApiClient(currentServerId);
- apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
- let html = '';
+ Recursive: true,
+ IncludeItemTypes: 'BoxSet',
+ SortBy: 'SortName',
+ EnableTotalRecordCount: false
+ };
- html += ``;
-
- html += result.Items.map(i => {
- return ``;
- });
-
- select.innerHTML = html;
- select.value = '';
- triggerChange(select);
-
- loading.hide();
- });
- }
-
- function getEditorHtml() {
+ const apiClient = ServerConnections.getApiClient(currentServerId);
+ apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
let html = '';
- html += '${escapeHtml(chapter.Name)}
`;
+ nameHtml += `${datetime.getDisplayRunningTime(chapter.StartPositionTicks)}
`;
+
+ const cardBoxCssClass = 'cardBox';
+ const cardScalableClass = 'cardScalable';
+
+ return `';
- html += '
';
-
- return html;
- }
-
- function initEditor(content, items) {
- content.querySelector('#selectCollectionToAddTo').addEventListener('change', function () {
- if (this.value) {
- content.querySelector('.newCollectionInfo').classList.add('hide');
- content.querySelector('#txtNewCollectionName').removeAttribute('required');
- } else {
- content.querySelector('.newCollectionInfo').classList.remove('hide');
- content.querySelector('#txtNewCollectionName').setAttribute('required', 'required');
- }
+ html += result.Items.map(i => {
+ return ``;
});
- content.querySelector('form').addEventListener('submit', onSubmit);
+ select.innerHTML = html;
+ select.value = '';
+ triggerChange(select);
- content.querySelector('.fldSelectedItemIds', content).value = items.join(',');
+ loading.hide();
+ });
+}
- if (items.length) {
- content.querySelector('.fldSelectCollection').classList.remove('hide');
- populateCollections(content);
+function getEditorHtml() {
+ let html = '';
+
+ html += '';
- html += '';
- html += '
';
- html += '';
+ html += '
';
+
+ return html;
+}
+
+function initEditor(content, items) {
+ content.querySelector('#selectCollectionToAddTo').addEventListener('change', function () {
+ if (this.value) {
+ content.querySelector('.newCollectionInfo').classList.add('hide');
+ content.querySelector('#txtNewCollectionName').removeAttribute('required');
} else {
- content.querySelector('.fldSelectCollection').classList.add('hide');
-
- const selectCollectionToAddTo = content.querySelector('#selectCollectionToAddTo');
- selectCollectionToAddTo.innerHTML = '';
- selectCollectionToAddTo.value = '';
- triggerChange(selectCollectionToAddTo);
+ content.querySelector('.newCollectionInfo').classList.remove('hide');
+ content.querySelector('#txtNewCollectionName').setAttribute('required', 'required');
}
- }
+ });
- function centerFocus(elem, horiz, on) {
- import('../../scripts/scrollHelper').then((scrollHelper) => {
- const fn = on ? 'on' : 'off';
- scrollHelper.centerFocus[fn](elem, horiz);
+ content.querySelector('form').addEventListener('submit', onSubmit);
+
+ content.querySelector('.fldSelectedItemIds', content).value = items.join(',');
+
+ if (items.length) {
+ content.querySelector('.fldSelectCollection').classList.remove('hide');
+ populateCollections(content);
+ } else {
+ content.querySelector('.fldSelectCollection').classList.add('hide');
+
+ const selectCollectionToAddTo = content.querySelector('#selectCollectionToAddTo');
+ selectCollectionToAddTo.innerHTML = '';
+ selectCollectionToAddTo.value = '';
+ triggerChange(selectCollectionToAddTo);
+ }
+}
+
+function centerFocus(elem, horiz, on) {
+ import('../../scripts/scrollHelper').then((scrollHelper) => {
+ const fn = on ? 'on' : 'off';
+ scrollHelper.centerFocus[fn](elem, horiz);
+ });
+}
+
+class CollectionEditor {
+ show(options) {
+ const items = options.items || {};
+ currentServerId = options.serverId;
+
+ const dialogOptions = {
+ removeOnClose: true,
+ scrollY: false
+ };
+
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
+ } else {
+ dialogOptions.size = 'small';
+ }
+
+ const dlg = dialogHelper.createDialog(dialogOptions);
+
+ dlg.classList.add('formDialog');
+
+ let html = '';
+ const title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
+
+ html += '';
+ html += '';
+ html += '
';
+ html += '';
+ html += ``;
+ html += '
';
+
+ html += getEditorHtml();
+
+ dlg.innerHTML = html;
+
+ initEditor(dlg, items);
+
+ dlg.querySelector('.btnCancel').addEventListener('click', () => {
+ dialogHelper.close(dlg);
+ });
+
+ if (layoutManager.tv) {
+ centerFocus(dlg.querySelector('.formDialogContent'), false, true);
+ }
+
+ return dialogHelper.open(dlg).then(() => {
+ if (layoutManager.tv) {
+ centerFocus(dlg.querySelector('.formDialogContent'), false, false);
+ }
+
+ if (dlg.submitted) {
+ return Promise.resolve();
+ }
+
+ return Promise.reject();
});
}
+}
- class CollectionEditor {
- show(options) {
- const items = options.items || {};
- currentServerId = options.serverId;
-
- const dialogOptions = {
- removeOnClose: true,
- scrollY: false
- };
-
- if (layoutManager.tv) {
- dialogOptions.size = 'fullscreen';
- } else {
- dialogOptions.size = 'small';
- }
-
- const dlg = dialogHelper.createDialog(dialogOptions);
-
- dlg.classList.add('formDialog');
-
- let html = '';
- const title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
-
- html += ''; + html += title; + html += '
'; + + html += '';
- html += ``;
- html += '
';
-
- html += getEditorHtml();
-
- dlg.innerHTML = html;
-
- initEditor(dlg, items);
-
- dlg.querySelector('.btnCancel').addEventListener('click', () => {
- dialogHelper.close(dlg);
- });
-
- if (layoutManager.tv) {
- centerFocus(dlg.querySelector('.formDialogContent'), false, true);
- }
-
- return dialogHelper.open(dlg).then(() => {
- if (layoutManager.tv) {
- centerFocus(dlg.querySelector('.formDialogContent'), false, false);
- }
-
- if (dlg.submitted) {
- return Promise.resolve();
- }
-
- return Promise.reject();
- });
- }
- }
-
-/* eslint-enable indent */
export default CollectionEditor;
diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
index 85e81abb02..3e285514e1 100644
--- a/src/components/dialog/dialog.js
+++ b/src/components/dialog/dialog.js
@@ -13,129 +13,126 @@ import '../formdialog.scss';
import '../../styles/flexstyles.scss';
import template from './dialog.template.html';
-/* eslint-disable indent */
+function showDialog(options = { dialogOptions: {}, buttons: [] }) {
+ const dialogOptions = {
+ removeOnClose: true,
+ scrollY: false,
+ ...options.dialogOptions
+ };
- function showDialog(options = { dialogOptions: {}, buttons: [] }) {
- const dialogOptions = {
- removeOnClose: true,
- scrollY: false,
- ...options.dialogOptions
- };
+ const enableTvLayout = layoutManager.tv;
- const enableTvLayout = layoutManager.tv;
+ if (enableTvLayout) {
+ dialogOptions.size = 'fullscreen';
+ }
- if (enableTvLayout) {
- dialogOptions.size = 'fullscreen';
+ const dlg = dialogHelper.createDialog(dialogOptions);
+
+ dlg.classList.add('formDialog');
+
+ dlg.innerHTML = globalize.translateHtml(template, 'core');
+
+ dlg.classList.add('align-items-center');
+ dlg.classList.add('justify-content-center');
+ const formDialogContent = dlg.querySelector('.formDialogContent');
+ formDialogContent.classList.add('no-grow');
+
+ if (enableTvLayout) {
+ formDialogContent.style['max-width'] = '50%';
+ formDialogContent.style['max-height'] = '60%';
+ scrollHelper.centerFocus.on(formDialogContent, false);
+ } else {
+ formDialogContent.style.maxWidth = `${Math.min((options.buttons.length * 150) + 200, dom.getWindowSize().innerWidth - 50)}px`;
+ dlg.classList.add('dialog-fullscreen-lowres');
+ }
+
+ if (options.title) {
+ dlg.querySelector('.formDialogHeaderTitle').innerText = options.title || '';
+ } else {
+ dlg.querySelector('.formDialogHeaderTitle').classList.add('hide');
+ }
+
+ const displayText = options.html || options.text || '';
+ dlg.querySelector('.text').innerHTML = DOMPurify.sanitize(displayText);
+
+ if (!displayText) {
+ dlg.querySelector('.dialogContentInner').classList.add('hide');
+ }
+
+ let i;
+ let length;
+ let html = '';
+ let hasDescriptions = false;
+
+ for (i = 0, length = options.buttons.length; i < length; i++) {
+ const item = options.buttons[i];
+ const autoFocus = i === 0 ? ' autofocus' : '';
+
+ let buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize';
+
+ if (item.type) {
+ buttonClass += ` button-${item.type}`;
}
- const dlg = dialogHelper.createDialog(dialogOptions);
-
- dlg.classList.add('formDialog');
-
- dlg.innerHTML = globalize.translateHtml(template, 'core');
-
- dlg.classList.add('align-items-center');
- dlg.classList.add('justify-content-center');
- const formDialogContent = dlg.querySelector('.formDialogContent');
- formDialogContent.classList.add('no-grow');
-
- if (enableTvLayout) {
- formDialogContent.style['max-width'] = '50%';
- formDialogContent.style['max-height'] = '60%';
- scrollHelper.centerFocus.on(formDialogContent, false);
- } else {
- formDialogContent.style.maxWidth = `${Math.min((options.buttons.length * 150) + 200, dom.getWindowSize().innerWidth - 50)}px`;
- dlg.classList.add('dialog-fullscreen-lowres');
+ if (item.description) {
+ hasDescriptions = true;
}
- if (options.title) {
- dlg.querySelector('.formDialogHeaderTitle').innerText = options.title || '';
- } else {
- dlg.querySelector('.formDialogHeaderTitle').classList.add('hide');
- }
-
- const displayText = options.html || options.text || '';
- dlg.querySelector('.text').innerHTML = DOMPurify.sanitize(displayText);
-
- if (!displayText) {
- dlg.querySelector('.dialogContentInner').classList.add('hide');
- }
-
- let i;
- let length;
- let html = '';
- let hasDescriptions = false;
-
- for (i = 0, length = options.buttons.length; i < length; i++) {
- const item = options.buttons[i];
- const autoFocus = i === 0 ? ' autofocus' : '';
-
- let buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize';
-
- if (item.type) {
- buttonClass += ` button-${item.type}`;
- }
-
- if (item.description) {
- hasDescriptions = true;
- }
-
- if (hasDescriptions) {
- buttonClass += ' formDialogFooterItem-vertical formDialogFooterItem-nomarginbottom';
- }
-
- html += ``;
-
- if (item.description) {
- html += ``;
- }
- }
-
- dlg.querySelector('.formDialogFooter').innerHTML = html;
-
if (hasDescriptions) {
- dlg.querySelector('.formDialogFooter').classList.add('formDialogFooter-vertical');
+ buttonClass += ' formDialogFooterItem-vertical formDialogFooterItem-nomarginbottom';
}
- let dialogResult;
- function onButtonClick() {
- dialogResult = this.getAttribute('data-id');
- dialogHelper.close(dlg);
+ html += ``;
+
+ if (item.description) {
+ html += ``;
}
-
- const buttons = dlg.querySelectorAll('.btnOption');
- for (i = 0, length = buttons.length; i < length; i++) {
- buttons[i].addEventListener('click', onButtonClick);
- }
-
- return dialogHelper.open(dlg).then(() => {
- if (enableTvLayout) {
- scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
- }
-
- if (dialogResult) {
- return dialogResult;
- } else {
- return Promise.reject();
- }
- });
}
- export function show(text, title) {
- let options;
- if (typeof text === 'string') {
- options = {
- title: title,
- text: text
- };
+ dlg.querySelector('.formDialogFooter').innerHTML = html;
+
+ if (hasDescriptions) {
+ dlg.querySelector('.formDialogFooter').classList.add('formDialogFooter-vertical');
+ }
+
+ let dialogResult;
+ function onButtonClick() {
+ dialogResult = this.getAttribute('data-id');
+ dialogHelper.close(dlg);
+ }
+
+ const buttons = dlg.querySelectorAll('.btnOption');
+ for (i = 0, length = buttons.length; i < length; i++) {
+ buttons[i].addEventListener('click', onButtonClick);
+ }
+
+ return dialogHelper.open(dlg).then(() => {
+ if (enableTvLayout) {
+ scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
+ }
+
+ if (dialogResult) {
+ return dialogResult;
} else {
- options = text;
+ return Promise.reject();
}
+ });
+}
- return showDialog(options);
+export function show(text, title) {
+ let options;
+ if (typeof text === 'string') {
+ options = {
+ title: title,
+ text: text
+ };
+ } else {
+ options = text;
}
-/* eslint-enable indent */
+ return showDialog(options);
+}
+
export default {
show: show
};
diff --git a/src/components/dialogHelper/dialogHelper.js b/src/components/dialogHelper/dialogHelper.js
index 32fa105041..5819f0a755 100644
--- a/src/components/dialogHelper/dialogHelper.js
+++ b/src/components/dialogHelper/dialogHelper.js
@@ -9,505 +9,501 @@ import dom from '../../scripts/dom';
import './dialoghelper.scss';
import '../../styles/scrollstyles.scss';
-/* eslint-disable indent */
+let globalOnOpenCallback;
- let globalOnOpenCallback;
-
- function enableAnimation() {
- // too slow
- if (browser.tv) {
- return false;
- }
-
- return browser.supportsCssAnimation();
+function enableAnimation() {
+ // too slow
+ if (browser.tv) {
+ return false;
}
- function removeCenterFocus(dlg) {
- if (layoutManager.tv) {
- if (dlg.classList.contains('scrollX')) {
- centerFocus(dlg, true, false);
- } else if (dlg.classList.contains('smoothScrollY')) {
- centerFocus(dlg, false, false);
- }
+ return browser.supportsCssAnimation();
+}
+
+function removeCenterFocus(dlg) {
+ if (layoutManager.tv) {
+ if (dlg.classList.contains('scrollX')) {
+ centerFocus(dlg, true, false);
+ } else if (dlg.classList.contains('smoothScrollY')) {
+ centerFocus(dlg, false, false);
+ }
+ }
+}
+
+function tryRemoveElement(elem) {
+ const parentNode = elem.parentNode;
+ if (parentNode) {
+ // Seeing crashes in edge webview
+ try {
+ parentNode.removeChild(elem);
+ } catch (err) {
+ console.error('[dialogHelper] error removing dialog element: ' + err);
+ }
+ }
+}
+
+function DialogHashHandler(dlg, hash, resolve) {
+ const self = this;
+ self.originalUrl = window.location.href;
+ const activeElement = document.activeElement;
+ let removeScrollLockOnClose = false;
+ let unlisten;
+
+ function onHashChange({ location }) {
+ const dialogs = location.state?.dialogs || [];
+ const shouldClose = !dialogs.includes(hash);
+
+ if ((shouldClose || !isOpened(dlg)) && unlisten) {
+ unlisten();
+ unlisten = null;
+ }
+
+ if (shouldClose) {
+ close(dlg);
}
}
- function tryRemoveElement(elem) {
- const parentNode = elem.parentNode;
- if (parentNode) {
- // Seeing crashes in edge webview
- try {
- parentNode.removeChild(elem);
- } catch (err) {
- console.error('[dialogHelper] error removing dialog element: ' + err);
- }
- }
- }
-
- function DialogHashHandler(dlg, hash, resolve) {
- const self = this;
- self.originalUrl = window.location.href;
- const activeElement = document.activeElement;
- let removeScrollLockOnClose = false;
- let unlisten;
-
- function onHashChange({ location }) {
- const dialogs = location.state?.dialogs || [];
- const shouldClose = !dialogs.includes(hash);
-
- if ((shouldClose || !isOpened(dlg)) && unlisten) {
- unlisten();
- unlisten = null;
- }
-
- if (shouldClose) {
- close(dlg);
- }
+ function finishClose() {
+ if (unlisten) {
+ unlisten();
+ unlisten = null;
}
- function finishClose() {
- if (unlisten) {
- unlisten();
- unlisten = null;
- }
-
- dlg.dispatchEvent(new CustomEvent('close', {
- bubbles: false,
- cancelable: false
- }));
-
- resolve({
- element: dlg
- });
- }
-
- function onBackCommand(e) {
- if (e.detail.command === 'back') {
- e.preventDefault();
- e.stopPropagation();
- close(dlg);
- }
- }
-
- function onDialogClosed() {
- if (!isHistoryEnabled(dlg)) {
- inputManager.off(dlg, onBackCommand);
- }
-
- if (unlisten) {
- unlisten();
- unlisten = null;
- }
-
- removeBackdrop(dlg);
- dlg.classList.remove('opened');
-
- if (removeScrollLockOnClose) {
- document.body.classList.remove('noScroll');
- }
-
- if (isHistoryEnabled(dlg)) {
- const state = history.location.state || {};
- if (state.dialogs?.length > 0) {
- if (state.dialogs[state.dialogs.length - 1] === hash) {
- unlisten = history.listen(finishClose);
- history.back();
- } else if (state.dialogs.includes(hash)) {
- console.warn('[dialogHelper] dialog "%s" was closed, but is not the last dialog opened', hash);
-
- unlisten = history.listen(finishClose);
-
- // Remove the closed dialog hash from the history state
- history.replace(
- `${history.location.pathname}${history.location.search}`,
- {
- ...state,
- dialogs: state.dialogs.filter(dialog => dialog !== hash)
- }
- );
- }
- }
- }
-
- if (layoutManager.tv) {
- focusManager.focus(activeElement);
- }
-
- if (toBoolean(dlg.getAttribute('data-removeonclose'), true)) {
- removeCenterFocus(dlg);
-
- const dialogContainer = dlg.dialogContainer;
- if (dialogContainer) {
- tryRemoveElement(dialogContainer);
- dlg.dialogContainer = null;
- } else {
- tryRemoveElement(dlg);
- }
- }
-
- if (!unlisten) {
- finishClose();
- }
- }
-
- dlg.addEventListener('_close', onDialogClosed);
-
- const center = !dlg.classList.contains('dialog-fixedSize');
- if (center) {
- dlg.classList.add('centeredDialog');
- }
-
- dlg.classList.remove('hide');
-
- addBackdropOverlay(dlg);
-
- dlg.classList.add('opened');
- dlg.dispatchEvent(new CustomEvent('open', {
+ dlg.dispatchEvent(new CustomEvent('close', {
bubbles: false,
cancelable: false
}));
- if (dlg.getAttribute('data-lockscroll') === 'true' && !document.body.classList.contains('noScroll')) {
- document.body.classList.add('noScroll');
- removeScrollLockOnClose = true;
+ resolve({
+ element: dlg
+ });
+ }
+
+ function onBackCommand(e) {
+ if (e.detail.command === 'back') {
+ e.preventDefault();
+ e.stopPropagation();
+ close(dlg);
+ }
+ }
+
+ function onDialogClosed() {
+ if (!isHistoryEnabled(dlg)) {
+ inputManager.off(dlg, onBackCommand);
}
- animateDialogOpen(dlg);
+ if (unlisten) {
+ unlisten();
+ unlisten = null;
+ }
+
+ removeBackdrop(dlg);
+ dlg.classList.remove('opened');
+
+ if (removeScrollLockOnClose) {
+ document.body.classList.remove('noScroll');
+ }
if (isHistoryEnabled(dlg)) {
const state = history.location.state || {};
- const dialogs = state.dialogs || [];
- // Add new dialog to the list of open dialogs
- dialogs.push(hash);
+ if (state.dialogs?.length > 0) {
+ if (state.dialogs[state.dialogs.length - 1] === hash) {
+ unlisten = history.listen(finishClose);
+ history.back();
+ } else if (state.dialogs.includes(hash)) {
+ console.warn('[dialogHelper] dialog "%s" was closed, but is not the last dialog opened', hash);
- history.push(
- `${history.location.pathname}${history.location.search}`,
- {
- ...state,
- dialogs
+ unlisten = history.listen(finishClose);
+
+ // Remove the closed dialog hash from the history state
+ history.replace(
+ `${history.location.pathname}${history.location.search}`,
+ {
+ ...state,
+ dialogs: state.dialogs.filter(dialog => dialog !== hash)
+ }
+ );
}
- );
-
- unlisten = history.listen(onHashChange);
- } else {
- inputManager.on(dlg, onBackCommand);
- }
- }
-
- function addBackdropOverlay(dlg) {
- const backdrop = document.createElement('div');
- backdrop.classList.add('dialogBackdrop');
-
- const backdropParent = dlg.dialogContainer || dlg;
- backdropParent.parentNode.insertBefore(backdrop, backdropParent);
- dlg.backdrop = backdrop;
-
- // trigger reflow or the backdrop will not animate
- void backdrop.offsetWidth;
- backdrop.classList.add('dialogBackdropOpened');
-
- dom.addEventListener((dlg.dialogContainer || backdrop), 'click', e => {
- if (e.target === dlg.dialogContainer) {
- close(dlg);
}
- }, {
- passive: true
- });
+ }
- dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', e => {
- if (e.target === dlg.dialogContainer) {
- // Close the application dialog menu
- close(dlg);
- // Prevent the default browser context menu from appearing
- e.preventDefault();
+ if (layoutManager.tv) {
+ focusManager.focus(activeElement);
+ }
+
+ if (toBoolean(dlg.getAttribute('data-removeonclose'), true)) {
+ removeCenterFocus(dlg);
+
+ const dialogContainer = dlg.dialogContainer;
+ if (dialogContainer) {
+ tryRemoveElement(dialogContainer);
+ dlg.dialogContainer = null;
+ } else {
+ tryRemoveElement(dlg);
}
- });
- }
-
- function isHistoryEnabled(dlg) {
- return dlg.getAttribute('data-history') === 'true';
- }
-
- export function open(dlg) {
- if (globalOnOpenCallback) {
- globalOnOpenCallback(dlg);
}
- const parent = dlg.parentNode;
- if (parent) {
- parent.removeChild(dlg);
+ if (!unlisten) {
+ finishClose();
}
-
- const dialogContainer = document.createElement('div');
- dialogContainer.classList.add('dialogContainer');
- dialogContainer.appendChild(dlg);
- dlg.dialogContainer = dialogContainer;
- document.body.appendChild(dialogContainer);
-
- return new Promise((resolve) => {
- new DialogHashHandler(dlg, `dlg${new Date().getTime()}`, resolve);
- });
}
- function isOpened(dlg) {
- return !dlg.classList.contains('hide');
+ dlg.addEventListener('_close', onDialogClosed);
+
+ const center = !dlg.classList.contains('dialog-fixedSize');
+ if (center) {
+ dlg.classList.add('centeredDialog');
}
- export function close(dlg) {
- if (!dlg.classList.contains('hide')) {
- dlg.dispatchEvent(new CustomEvent('closing', {
+ dlg.classList.remove('hide');
+
+ addBackdropOverlay(dlg);
+
+ dlg.classList.add('opened');
+ dlg.dispatchEvent(new CustomEvent('open', {
+ bubbles: false,
+ cancelable: false
+ }));
+
+ if (dlg.getAttribute('data-lockscroll') === 'true' && !document.body.classList.contains('noScroll')) {
+ document.body.classList.add('noScroll');
+ removeScrollLockOnClose = true;
+ }
+
+ animateDialogOpen(dlg);
+
+ if (isHistoryEnabled(dlg)) {
+ const state = history.location.state || {};
+ const dialogs = state.dialogs || [];
+ // Add new dialog to the list of open dialogs
+ dialogs.push(hash);
+
+ history.push(
+ `${history.location.pathname}${history.location.search}`,
+ {
+ ...state,
+ dialogs
+ }
+ );
+
+ unlisten = history.listen(onHashChange);
+ } else {
+ inputManager.on(dlg, onBackCommand);
+ }
+}
+
+function addBackdropOverlay(dlg) {
+ const backdrop = document.createElement('div');
+ backdrop.classList.add('dialogBackdrop');
+
+ const backdropParent = dlg.dialogContainer || dlg;
+ backdropParent.parentNode.insertBefore(backdrop, backdropParent);
+ dlg.backdrop = backdrop;
+
+ // trigger reflow or the backdrop will not animate
+ void backdrop.offsetWidth;
+ backdrop.classList.add('dialogBackdropOpened');
+
+ dom.addEventListener((dlg.dialogContainer || backdrop), 'click', e => {
+ if (e.target === dlg.dialogContainer) {
+ close(dlg);
+ }
+ }, {
+ passive: true
+ });
+
+ dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', e => {
+ if (e.target === dlg.dialogContainer) {
+ // Close the application dialog menu
+ close(dlg);
+ // Prevent the default browser context menu from appearing
+ e.preventDefault();
+ }
+ });
+}
+
+function isHistoryEnabled(dlg) {
+ return dlg.getAttribute('data-history') === 'true';
+}
+
+export function open(dlg) {
+ if (globalOnOpenCallback) {
+ globalOnOpenCallback(dlg);
+ }
+
+ const parent = dlg.parentNode;
+ if (parent) {
+ parent.removeChild(dlg);
+ }
+
+ const dialogContainer = document.createElement('div');
+ dialogContainer.classList.add('dialogContainer');
+ dialogContainer.appendChild(dlg);
+ dlg.dialogContainer = dialogContainer;
+ document.body.appendChild(dialogContainer);
+
+ return new Promise((resolve) => {
+ new DialogHashHandler(dlg, `dlg${new Date().getTime()}`, resolve);
+ });
+}
+
+function isOpened(dlg) {
+ return !dlg.classList.contains('hide');
+}
+
+export function close(dlg) {
+ if (!dlg.classList.contains('hide')) {
+ dlg.dispatchEvent(new CustomEvent('closing', {
+ bubbles: false,
+ cancelable: false
+ }));
+
+ const onAnimationFinish = () => {
+ focusManager.popScope(dlg);
+
+ dlg.classList.add('hide');
+ dlg.dispatchEvent(new CustomEvent('_close', {
bubbles: false,
cancelable: false
}));
+ };
- const onAnimationFinish = () => {
- focusManager.popScope(dlg);
-
- dlg.classList.add('hide');
- dlg.dispatchEvent(new CustomEvent('_close', {
- bubbles: false,
- cancelable: false
- }));
- };
-
- animateDialogClose(dlg, onAnimationFinish);
- }
+ animateDialogClose(dlg, onAnimationFinish);
}
+}
- const getAnimationEndHandler = (dlg, callback) => function handler() {
- dom.removeEventListener(dlg, dom.whichAnimationEvent(), handler, { once: true });
- callback();
+const getAnimationEndHandler = (dlg, callback) => function handler() {
+ dom.removeEventListener(dlg, dom.whichAnimationEvent(), handler, { once: true });
+ callback();
+};
+
+function animateDialogOpen(dlg) {
+ const onAnimationFinish = () => {
+ focusManager.pushScope(dlg);
+
+ if (dlg.getAttribute('data-autofocus') === 'true') {
+ focusManager.autoFocus(dlg);
+ }
+
+ if (document.activeElement && !dlg.contains(document.activeElement)) {
+ // Blur foreign element to prevent triggering of an action from the previous scope
+ document.activeElement.blur();
+ }
};
- function animateDialogOpen(dlg) {
- const onAnimationFinish = () => {
- focusManager.pushScope(dlg);
+ if (enableAnimation()) {
+ dom.addEventListener(
+ dlg,
+ dom.whichAnimationEvent(),
+ getAnimationEndHandler(dlg, onAnimationFinish),
+ { once: true });
- if (dlg.getAttribute('data-autofocus') === 'true') {
- focusManager.autoFocus(dlg);
- }
+ return;
+ }
- if (document.activeElement && !dlg.contains(document.activeElement)) {
- // Blur foreign element to prevent triggering of an action from the previous scope
- document.activeElement.blur();
- }
- };
+ onAnimationFinish();
+}
- if (enableAnimation()) {
- dom.addEventListener(
- dlg,
- dom.whichAnimationEvent(),
- getAnimationEndHandler(dlg, onAnimationFinish),
- { once: true });
+function animateDialogClose(dlg, onAnimationFinish) {
+ if (enableAnimation()) {
+ let animated = true;
+ switch (dlg.animationConfig.exit.name) {
+ case 'fadeout':
+ dlg.style.animation = `fadeout ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
+ break;
+ case 'scaledown':
+ dlg.style.animation = `scaledown ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
+ break;
+ case 'slidedown':
+ dlg.style.animation = `slidedown ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
+ break;
+ default:
+ animated = false;
+ break;
+ }
+
+ dom.addEventListener(
+ dlg,
+ dom.whichAnimationEvent(),
+ getAnimationEndHandler(dlg, onAnimationFinish),
+ { once: true });
+
+ if (animated) {
return;
}
-
- onAnimationFinish();
}
- function animateDialogClose(dlg, onAnimationFinish) {
- if (enableAnimation()) {
- let animated = true;
+ onAnimationFinish();
+}
- switch (dlg.animationConfig.exit.name) {
- case 'fadeout':
- dlg.style.animation = `fadeout ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
- break;
- case 'scaledown':
- dlg.style.animation = `scaledown ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
- break;
- case 'slidedown':
- dlg.style.animation = `slidedown ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
- break;
- default:
- animated = false;
- break;
+const supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style;
+
+function shouldLockDocumentScroll(options) {
+ if (options.lockScroll != null) {
+ return options.lockScroll;
+ }
+
+ if (options.size === 'fullscreen') {
+ return true;
+ }
+
+ if (supportsOverscrollBehavior && (options.size || !browser.touch)) {
+ return false;
+ }
+
+ if (options.size) {
+ return true;
+ }
+
+ return browser.touch;
+}
+
+function removeBackdrop(dlg) {
+ const backdrop = dlg.backdrop;
+
+ if (!backdrop) {
+ return;
+ }
+
+ dlg.backdrop = null;
+
+ const onAnimationFinish = () => {
+ tryRemoveElement(backdrop);
+ };
+
+ if (enableAnimation()) {
+ backdrop.classList.remove('dialogBackdropOpened');
+
+ // this is not firing animationend
+ setTimeout(onAnimationFinish, 300);
+ return;
+ }
+
+ onAnimationFinish();
+}
+
+function centerFocus(elem, horiz, on) {
+ import('../../scripts/scrollHelper').then((scrollHelper) => {
+ const fn = on ? 'on' : 'off';
+ scrollHelper.centerFocus[fn](elem, horiz);
+ });
+}
+
+export function createDialog(options = {}) {
+ // If there's no native dialog support, use a plain div
+ // Also not working well in samsung tizen browser, content inside not clickable
+ // Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog
+ const dlg = document.createElement('div');
+
+ // Add an id so we can access the dialog element
+ if (options.id) {
+ dlg.id = options.id;
+ }
+
+ dlg.classList.add('focuscontainer');
+ dlg.classList.add('hide');
+
+ if (shouldLockDocumentScroll(options)) {
+ dlg.setAttribute('data-lockscroll', 'true');
+ }
+
+ if (options.enableHistory !== false) {
+ dlg.setAttribute('data-history', 'true');
+ }
+
+ // without this safari will scroll the background instead of the dialog contents
+ // but not needed here since this is already on top of an existing dialog
+ // but skip it in IE because it's causing the entire browser to hang
+ // Also have to disable for firefox because it's causing select elements to not be clickable
+ if (options.modal !== false) {
+ dlg.setAttribute('modal', 'modal');
+ }
+
+ if (options.autoFocus !== false) {
+ dlg.setAttribute('data-autofocus', 'true');
+ }
+
+ const defaultEntryAnimation = 'scaleup';
+ const defaultExitAnimation = 'scaledown';
+ const entryAnimation = options.entryAnimation || defaultEntryAnimation;
+ const exitAnimation = options.exitAnimation || defaultExitAnimation;
+
+ // If it's not fullscreen then lower the default animation speed to make it open really fast
+ const entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280);
+ const exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220);
+
+ dlg.animationConfig = {
+ // scale up
+ 'entry': {
+ name: entryAnimation,
+ timing: {
+ duration: entryAnimationDuration,
+ easing: 'ease-out'
}
-
- dom.addEventListener(
- dlg,
- dom.whichAnimationEvent(),
- getAnimationEndHandler(dlg, onAnimationFinish),
- { once: true });
-
- if (animated) {
- return;
+ },
+ // fade out
+ 'exit': {
+ name: exitAnimation,
+ timing: {
+ duration: exitAnimationDuration,
+ easing: 'ease-out',
+ fill: 'both'
}
}
+ };
- onAnimationFinish();
+ dlg.classList.add('dialog');
+
+ if (options.scrollX) {
+ dlg.classList.add('scrollX');
+ dlg.classList.add('smoothScrollX');
+
+ if (layoutManager.tv) {
+ centerFocus(dlg, true, true);
+ }
+ } else if (options.scrollY !== false) {
+ dlg.classList.add('smoothScrollY');
+
+ if (layoutManager.tv) {
+ centerFocus(dlg, false, true);
+ }
}
- const supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style;
-
- function shouldLockDocumentScroll(options) {
- if (options.lockScroll != null) {
- return options.lockScroll;
- }
-
- if (options.size === 'fullscreen') {
- return true;
- }
-
- if (supportsOverscrollBehavior && (options.size || !browser.touch)) {
- return false;
- }
-
- if (options.size) {
- return true;
- }
-
- return browser.touch;
+ if (options.removeOnClose) {
+ dlg.setAttribute('data-removeonclose', 'true');
}
- function removeBackdrop(dlg) {
- const backdrop = dlg.backdrop;
-
- if (!backdrop) {
- return;
- }
-
- dlg.backdrop = null;
-
- const onAnimationFinish = () => {
- tryRemoveElement(backdrop);
- };
-
- if (enableAnimation()) {
- backdrop.classList.remove('dialogBackdropOpened');
-
- // this is not firing animationend
- setTimeout(onAnimationFinish, 300);
- return;
- }
-
- onAnimationFinish();
+ if (options.size) {
+ dlg.classList.add('dialog-fixedSize');
+ dlg.classList.add(`dialog-${options.size}`);
}
- function centerFocus(elem, horiz, on) {
- import('../../scripts/scrollHelper').then((scrollHelper) => {
- const fn = on ? 'on' : 'off';
- scrollHelper.centerFocus[fn](elem, horiz);
- });
+ if (enableAnimation()) {
+ switch (dlg.animationConfig.entry.name) {
+ case 'fadein':
+ dlg.style.animation = `fadein ${entryAnimationDuration}ms ease-out normal`;
+ break;
+ case 'scaleup':
+ dlg.style.animation = `scaleup ${entryAnimationDuration}ms ease-out normal both`;
+ break;
+ case 'slideup':
+ dlg.style.animation = `slideup ${entryAnimationDuration}ms ease-out normal`;
+ break;
+ case 'slidedown':
+ dlg.style.animation = `slidedown ${entryAnimationDuration}ms ease-out normal`;
+ break;
+ default:
+ break;
+ }
}
- export function createDialog(options = {}) {
- // If there's no native dialog support, use a plain div
- // Also not working well in samsung tizen browser, content inside not clickable
- // Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog
- const dlg = document.createElement('div');
+ return dlg;
+}
- // Add an id so we can access the dialog element
- if (options.id) {
- dlg.id = options.id;
- }
-
- dlg.classList.add('focuscontainer');
- dlg.classList.add('hide');
-
- if (shouldLockDocumentScroll(options)) {
- dlg.setAttribute('data-lockscroll', 'true');
- }
-
- if (options.enableHistory !== false) {
- dlg.setAttribute('data-history', 'true');
- }
-
- // without this safari will scroll the background instead of the dialog contents
- // but not needed here since this is already on top of an existing dialog
- // but skip it in IE because it's causing the entire browser to hang
- // Also have to disable for firefox because it's causing select elements to not be clickable
- if (options.modal !== false) {
- dlg.setAttribute('modal', 'modal');
- }
-
- if (options.autoFocus !== false) {
- dlg.setAttribute('data-autofocus', 'true');
- }
-
- const defaultEntryAnimation = 'scaleup';
- const defaultExitAnimation = 'scaledown';
- const entryAnimation = options.entryAnimation || defaultEntryAnimation;
- const exitAnimation = options.exitAnimation || defaultExitAnimation;
-
- // If it's not fullscreen then lower the default animation speed to make it open really fast
- const entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280);
- const exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220);
-
- dlg.animationConfig = {
- // scale up
- 'entry': {
- name: entryAnimation,
- timing: {
- duration: entryAnimationDuration,
- easing: 'ease-out'
- }
- },
- // fade out
- 'exit': {
- name: exitAnimation,
- timing: {
- duration: exitAnimationDuration,
- easing: 'ease-out',
- fill: 'both'
- }
- }
- };
-
- dlg.classList.add('dialog');
-
- if (options.scrollX) {
- dlg.classList.add('scrollX');
- dlg.classList.add('smoothScrollX');
-
- if (layoutManager.tv) {
- centerFocus(dlg, true, true);
- }
- } else if (options.scrollY !== false) {
- dlg.classList.add('smoothScrollY');
-
- if (layoutManager.tv) {
- centerFocus(dlg, false, true);
- }
- }
-
- if (options.removeOnClose) {
- dlg.setAttribute('data-removeonclose', 'true');
- }
-
- if (options.size) {
- dlg.classList.add('dialog-fixedSize');
- dlg.classList.add(`dialog-${options.size}`);
- }
-
- if (enableAnimation()) {
- switch (dlg.animationConfig.entry.name) {
- case 'fadein':
- dlg.style.animation = `fadein ${entryAnimationDuration}ms ease-out normal`;
- break;
- case 'scaleup':
- dlg.style.animation = `scaleup ${entryAnimationDuration}ms ease-out normal both`;
- break;
- case 'slideup':
- dlg.style.animation = `slideup ${entryAnimationDuration}ms ease-out normal`;
- break;
- case 'slidedown':
- dlg.style.animation = `slidedown ${entryAnimationDuration}ms ease-out normal`;
- break;
- default:
- break;
- }
- }
-
- return dlg;
- }
-
- export function setOnOpen(val) {
- globalOnOpenCallback = val;
- }
-
-/* eslint-enable indent */
+export function setOnOpen(val) {
+ globalOnOpenCallback = val;
+}
export default {
open: open,
diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js
index 195c919e9b..c0ede8aec5 100644
--- a/src/components/displaySettings/displaySettings.js
+++ b/src/components/displaySettings/displaySettings.js
@@ -18,238 +18,235 @@ import ServerConnections from '../ServerConnections';
import toast from '../toast/toast';
import template from './displaySettings.template.html';
-/* eslint-disable indent */
-
- function fillThemes(select, selectedTheme) {
- skinManager.getThemes().then(themes => {
- select.innerHTML = themes.map(t => {
- return ``;
- }).join('');
-
- // get default theme
- const defaultTheme = themes.find(theme => theme.default);
-
- // set the current theme
- select.value = selectedTheme || defaultTheme.id;
- });
- }
-
- function loadScreensavers(context, userSettings) {
- const selectScreensaver = context.querySelector('.selectScreensaver');
- const options = pluginManager.ofType(PluginType.Screensaver).map(plugin => {
- return {
- name: plugin.name,
- value: plugin.id
- };
- });
-
- options.unshift({
- name: globalize.translate('None'),
- value: 'none'
- });
-
- selectScreensaver.innerHTML = options.map(o => {
- return ``;
+function fillThemes(select, selectedTheme) {
+ skinManager.getThemes().then(themes => {
+ select.innerHTML = themes.map(t => {
+ return ``;
}).join('');
- selectScreensaver.value = userSettings.screensaver();
+ // get default theme
+ const defaultTheme = themes.find(theme => theme.default);
- if (!selectScreensaver.value) {
- // TODO: set the default instead of none
- selectScreensaver.value = 'none';
- }
+ // set the current theme
+ select.value = selectedTheme || defaultTheme.id;
+ });
+}
+
+function loadScreensavers(context, userSettings) {
+ const selectScreensaver = context.querySelector('.selectScreensaver');
+ const options = pluginManager.ofType(PluginType.Screensaver).map(plugin => {
+ return {
+ name: plugin.name,
+ value: plugin.id
+ };
+ });
+
+ options.unshift({
+ name: globalize.translate('None'),
+ value: 'none'
+ });
+
+ selectScreensaver.innerHTML = options.map(o => {
+ return ``;
+ }).join('');
+
+ selectScreensaver.value = userSettings.screensaver();
+
+ if (!selectScreensaver.value) {
+ // TODO: set the default instead of none
+ selectScreensaver.value = 'none';
+ }
+}
+
+function showOrHideMissingEpisodesField(context) {
+ if (browser.tizen || browser.web0s) {
+ context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide');
+ return;
}
- function showOrHideMissingEpisodesField(context) {
- if (browser.tizen || browser.web0s) {
- context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide');
- return;
- }
+ context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide');
+}
- context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide');
+function loadForm(context, user, userSettings) {
+ if (appHost.supports('displaylanguage')) {
+ context.querySelector('.languageSection').classList.remove('hide');
+ } else {
+ context.querySelector('.languageSection').classList.add('hide');
}
- function loadForm(context, user, userSettings) {
- if (appHost.supports('displaylanguage')) {
- context.querySelector('.languageSection').classList.remove('hide');
- } else {
- context.querySelector('.languageSection').classList.add('hide');
- }
-
- if (appHost.supports('displaymode')) {
- context.querySelector('.fldDisplayMode').classList.remove('hide');
- } else {
- context.querySelector('.fldDisplayMode').classList.add('hide');
- }
-
- if (appHost.supports('externallinks')) {
- context.querySelector('.learnHowToContributeContainer').classList.remove('hide');
- } else {
- context.querySelector('.learnHowToContributeContainer').classList.add('hide');
- }
-
- context.querySelector('.selectDashboardThemeContainer').classList.toggle('hide', !user.Policy.IsAdministrator);
-
- if (appHost.supports('screensaver')) {
- context.querySelector('.selectScreensaverContainer').classList.remove('hide');
- } else {
- context.querySelector('.selectScreensaverContainer').classList.add('hide');
- }
-
- if (datetime.supportsLocalization()) {
- context.querySelector('.fldDateTimeLocale').classList.remove('hide');
- } else {
- context.querySelector('.fldDateTimeLocale').classList.add('hide');
- }
-
- fillThemes(context.querySelector('#selectTheme'), userSettings.theme());
- fillThemes(context.querySelector('#selectDashboardTheme'), userSettings.dashboardTheme());
-
- loadScreensavers(context, userSettings);
-
- context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
-
- context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs();
- context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos();
- context.querySelector('#chkFadein').checked = userSettings.enableFastFadein();
- context.querySelector('#chkBlurhash').checked = userSettings.enableBlurhash();
- context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops();
- context.querySelector('#chkDetailsBanner').checked = userSettings.detailsBanner();
-
- context.querySelector('#chkDisableCustomCss').checked = userSettings.disableCustomCss();
- context.querySelector('#txtLocalCustomCss').value = userSettings.customCss();
-
- context.querySelector('#selectLanguage').value = userSettings.language() || '';
- context.querySelector('.selectDateTimeLocale').value = userSettings.dateTimeLocale() || '';
-
- context.querySelector('#txtLibraryPageSize').value = userSettings.libraryPageSize();
-
- context.querySelector('#txtMaxDaysForNextUp').value = userSettings.maxDaysForNextUp();
- context.querySelector('#chkRewatchingNextUp').checked = userSettings.enableRewatchingInNextUp();
- context.querySelector('#chkUseEpisodeImagesInNextUp').checked = userSettings.useEpisodeImagesInNextUpAndResume();
-
- context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || '';
-
- showOrHideMissingEpisodesField(context);
-
- loading.hide();
+ if (appHost.supports('displaymode')) {
+ context.querySelector('.fldDisplayMode').classList.remove('hide');
+ } else {
+ context.querySelector('.fldDisplayMode').classList.add('hide');
}
- function saveUser(context, user, userSettingsInstance, apiClient) {
- user.Configuration.DisplayMissingEpisodes = context.querySelector('.chkDisplayMissingEpisodes').checked;
-
- if (appHost.supports('displaylanguage')) {
- userSettingsInstance.language(context.querySelector('#selectLanguage').value);
- }
-
- userSettingsInstance.dateTimeLocale(context.querySelector('.selectDateTimeLocale').value);
-
- userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked);
- userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked);
- userSettingsInstance.theme(context.querySelector('#selectTheme').value);
- userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);
- userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
-
- userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);
-
- userSettingsInstance.maxDaysForNextUp(context.querySelector('#txtMaxDaysForNextUp').value);
- userSettingsInstance.enableRewatchingInNextUp(context.querySelector('#chkRewatchingNextUp').checked);
- userSettingsInstance.useEpisodeImagesInNextUpAndResume(context.querySelector('#chkUseEpisodeImagesInNextUp').checked);
-
- userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);
- userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked);
- userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);
- userSettingsInstance.detailsBanner(context.querySelector('#chkDetailsBanner').checked);
-
- userSettingsInstance.disableCustomCss(context.querySelector('#chkDisableCustomCss').checked);
- userSettingsInstance.customCss(context.querySelector('#txtLocalCustomCss').value);
-
- if (user.Id === apiClient.getCurrentUserId()) {
- skinManager.setTheme(userSettingsInstance.theme());
- }
-
- layoutManager.setLayout(context.querySelector('.selectLayout').value);
- return apiClient.updateUserConfiguration(user.Id, user.Configuration);
+ if (appHost.supports('externallinks')) {
+ context.querySelector('.learnHowToContributeContainer').classList.remove('hide');
+ } else {
+ context.querySelector('.learnHowToContributeContainer').classList.add('hide');
}
- function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
+ context.querySelector('.selectDashboardThemeContainer').classList.toggle('hide', !user.Policy.IsAdministrator);
+
+ if (appHost.supports('screensaver')) {
+ context.querySelector('.selectScreensaverContainer').classList.remove('hide');
+ } else {
+ context.querySelector('.selectScreensaverContainer').classList.add('hide');
+ }
+
+ if (datetime.supportsLocalization()) {
+ context.querySelector('.fldDateTimeLocale').classList.remove('hide');
+ } else {
+ context.querySelector('.fldDateTimeLocale').classList.add('hide');
+ }
+
+ fillThemes(context.querySelector('#selectTheme'), userSettings.theme());
+ fillThemes(context.querySelector('#selectDashboardTheme'), userSettings.dashboardTheme());
+
+ loadScreensavers(context, userSettings);
+
+ context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
+
+ context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs();
+ context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos();
+ context.querySelector('#chkFadein').checked = userSettings.enableFastFadein();
+ context.querySelector('#chkBlurhash').checked = userSettings.enableBlurhash();
+ context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops();
+ context.querySelector('#chkDetailsBanner').checked = userSettings.detailsBanner();
+
+ context.querySelector('#chkDisableCustomCss').checked = userSettings.disableCustomCss();
+ context.querySelector('#txtLocalCustomCss').value = userSettings.customCss();
+
+ context.querySelector('#selectLanguage').value = userSettings.language() || '';
+ context.querySelector('.selectDateTimeLocale').value = userSettings.dateTimeLocale() || '';
+
+ context.querySelector('#txtLibraryPageSize').value = userSettings.libraryPageSize();
+
+ context.querySelector('#txtMaxDaysForNextUp').value = userSettings.maxDaysForNextUp();
+ context.querySelector('#chkRewatchingNextUp').checked = userSettings.enableRewatchingInNextUp();
+ context.querySelector('#chkUseEpisodeImagesInNextUp').checked = userSettings.useEpisodeImagesInNextUpAndResume();
+
+ context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || '';
+
+ showOrHideMissingEpisodesField(context);
+
+ loading.hide();
+}
+
+function saveUser(context, user, userSettingsInstance, apiClient) {
+ user.Configuration.DisplayMissingEpisodes = context.querySelector('.chkDisplayMissingEpisodes').checked;
+
+ if (appHost.supports('displaylanguage')) {
+ userSettingsInstance.language(context.querySelector('#selectLanguage').value);
+ }
+
+ userSettingsInstance.dateTimeLocale(context.querySelector('.selectDateTimeLocale').value);
+
+ userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked);
+ userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked);
+ userSettingsInstance.theme(context.querySelector('#selectTheme').value);
+ userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);
+ userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
+
+ userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);
+
+ userSettingsInstance.maxDaysForNextUp(context.querySelector('#txtMaxDaysForNextUp').value);
+ userSettingsInstance.enableRewatchingInNextUp(context.querySelector('#chkRewatchingNextUp').checked);
+ userSettingsInstance.useEpisodeImagesInNextUpAndResume(context.querySelector('#chkUseEpisodeImagesInNextUp').checked);
+
+ userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);
+ userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked);
+ userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);
+ userSettingsInstance.detailsBanner(context.querySelector('#chkDetailsBanner').checked);
+
+ userSettingsInstance.disableCustomCss(context.querySelector('#chkDisableCustomCss').checked);
+ userSettingsInstance.customCss(context.querySelector('#txtLocalCustomCss').value);
+
+ if (user.Id === apiClient.getCurrentUserId()) {
+ skinManager.setTheme(userSettingsInstance.theme());
+ }
+
+ layoutManager.setLayout(context.querySelector('.selectLayout').value);
+ return apiClient.updateUserConfiguration(user.Id, user.Configuration);
+}
+
+function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
+ loading.show();
+
+ apiClient.getUser(userId).then(user => {
+ saveUser(context, user, userSettings, apiClient).then(() => {
+ loading.hide();
+ if (enableSaveConfirmation) {
+ toast(globalize.translate('SettingsSaved'));
+ }
+ Events.trigger(instance, 'saved');
+ }, () => {
+ loading.hide();
+ });
+ });
+}
+
+function onSubmit(e) {
+ const self = this;
+ const apiClient = ServerConnections.getApiClient(self.options.serverId);
+ const userId = self.options.userId;
+ const userSettings = self.options.userSettings;
+
+ userSettings.setUserInfo(userId, apiClient).then(() => {
+ const enableSaveConfirmation = self.options.enableSaveConfirmation;
+ save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
+ });
+
+ // Disable default form submission
+ if (e) {
+ e.preventDefault();
+ }
+ return false;
+}
+
+function embed(options, self) {
+ options.element.innerHTML = globalize.translateHtml(template, 'core');
+ options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
+ if (options.enableSaveButton) {
+ options.element.querySelector('.btnSave').classList.remove('hide');
+ }
+ self.loadData(options.autoFocus);
+}
+
+class DisplaySettings {
+ constructor(options) {
+ this.options = options;
+ embed(options, this);
+ }
+
+ loadData(autoFocus) {
+ const self = this;
+ const context = self.options.element;
+
loading.show();
- apiClient.getUser(userId).then(user => {
- saveUser(context, user, userSettings, apiClient).then(() => {
- loading.hide();
- if (enableSaveConfirmation) {
- toast(globalize.translate('SettingsSaved'));
- }
- Events.trigger(instance, 'saved');
- }, () => {
- loading.hide();
- });
- });
- }
-
- function onSubmit(e) {
- const self = this;
- const apiClient = ServerConnections.getApiClient(self.options.serverId);
const userId = self.options.userId;
+ const apiClient = ServerConnections.getApiClient(self.options.serverId);
const userSettings = self.options.userSettings;
- userSettings.setUserInfo(userId, apiClient).then(() => {
- const enableSaveConfirmation = self.options.enableSaveConfirmation;
- save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
- });
-
- // Disable default form submission
- if (e) {
- e.preventDefault();
- }
- return false;
- }
-
- function embed(options, self) {
- options.element.innerHTML = globalize.translateHtml(template, 'core');
- options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
- if (options.enableSaveButton) {
- options.element.querySelector('.btnSave').classList.remove('hide');
- }
- self.loadData(options.autoFocus);
- }
-
- class DisplaySettings {
- constructor(options) {
- this.options = options;
- embed(options, this);
- }
-
- loadData(autoFocus) {
- const self = this;
- const context = self.options.element;
-
- loading.show();
-
- const userId = self.options.userId;
- const apiClient = ServerConnections.getApiClient(self.options.serverId);
- const userSettings = self.options.userSettings;
-
- return apiClient.getUser(userId).then(user => {
- return userSettings.setUserInfo(userId, apiClient).then(() => {
- self.dataLoaded = true;
- loadForm(context, user, userSettings);
- if (autoFocus) {
- focusManager.autoFocus(context);
- }
- });
+ return apiClient.getUser(userId).then(user => {
+ return userSettings.setUserInfo(userId, apiClient).then(() => {
+ self.dataLoaded = true;
+ loadForm(context, user, userSettings);
+ if (autoFocus) {
+ focusManager.autoFocus(context);
+ }
});
- }
-
- submit() {
- onSubmit.call(this);
- }
-
- destroy() {
- this.options = null;
- }
+ });
}
-/* eslint-enable indent */
+ submit() {
+ onSubmit.call(this);
+ }
+
+ destroy() {
+ this.options = null;
+ }
+}
+
export default DisplaySettings;
diff --git a/src/components/favoriteitems.js b/src/components/favoriteitems.js
index 6bba5c3bdc..ac0f3c0de0 100644
--- a/src/components/favoriteitems.js
+++ b/src/components/favoriteitems.js
@@ -9,236 +9,232 @@ import { getParameterByName } from '../utils/url.ts';
import '../styles/scrollstyles.scss';
import '../elements/emby-itemscontainer/emby-itemscontainer';
-/* eslint-disable indent */
+function enableScrollX() {
+ return !layoutManager.desktop;
+}
- function enableScrollX() {
- return !layoutManager.desktop;
+function getThumbShape() {
+ return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+}
+
+function getPosterShape() {
+ return enableScrollX() ? 'overflowPortrait' : 'portrait';
+}
+
+function getSquareShape() {
+ return enableScrollX() ? 'overflowSquare' : 'square';
+}
+
+function getSections() {
+ return [{
+ name: 'Movies',
+ types: 'Movie',
+ id: 'favoriteMovies',
+ shape: getPosterShape(),
+ showTitle: false,
+ overlayPlayButton: true
+ }, {
+ name: 'Shows',
+ types: 'Series',
+ id: 'favoriteShows',
+ shape: getPosterShape(),
+ showTitle: false,
+ overlayPlayButton: true
+ }, {
+ name: 'Episodes',
+ types: 'Episode',
+ id: 'favoriteEpisode',
+ shape: getThumbShape(),
+ preferThumb: false,
+ showTitle: true,
+ showParentTitle: true,
+ overlayPlayButton: true,
+ overlayText: false,
+ centerText: true
+ }, {
+ name: 'Videos',
+ types: 'Video,MusicVideo',
+ id: 'favoriteVideos',
+ shape: getThumbShape(),
+ preferThumb: true,
+ showTitle: true,
+ overlayPlayButton: true,
+ overlayText: false,
+ centerText: true
+ }, {
+ name: 'Artists',
+ types: 'MusicArtist',
+ id: 'favoriteArtists',
+ shape: getSquareShape(),
+ preferThumb: false,
+ showTitle: true,
+ overlayText: false,
+ showParentTitle: false,
+ centerText: true,
+ overlayPlayButton: true,
+ coverImage: true
+ }, {
+ name: 'Albums',
+ types: 'MusicAlbum',
+ id: 'favoriteAlbums',
+ shape: getSquareShape(),
+ preferThumb: false,
+ showTitle: true,
+ overlayText: false,
+ showParentTitle: true,
+ centerText: true,
+ overlayPlayButton: true,
+ coverImage: true
+ }, {
+ name: 'Songs',
+ types: 'Audio',
+ id: 'favoriteSongs',
+ shape: getSquareShape(),
+ preferThumb: false,
+ showTitle: true,
+ overlayText: false,
+ showParentTitle: true,
+ centerText: true,
+ overlayMoreButton: true,
+ action: 'instantmix',
+ coverImage: true
+ }];
+}
+
+function loadSection(elem, userId, topParentId, section, isSingleSection) {
+ const screenWidth = dom.getWindowSize().innerWidth;
+ const options = {
+ SortBy: 'SortName',
+ SortOrder: 'Ascending',
+ Filters: 'IsFavorite',
+ Recursive: true,
+ Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
+ CollapseBoxSetItems: false,
+ ExcludeLocationTypes: 'Virtual',
+ EnableTotalRecordCount: false
+ };
+
+ if (topParentId) {
+ options.ParentId = topParentId;
}
- function getThumbShape() {
- return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
- }
+ if (!isSingleSection) {
+ options.Limit = 6;
- function getPosterShape() {
- return enableScrollX() ? 'overflowPortrait' : 'portrait';
- }
-
- function getSquareShape() {
- return enableScrollX() ? 'overflowSquare' : 'square';
- }
-
- function getSections() {
- return [{
- name: 'Movies',
- types: 'Movie',
- id: 'favoriteMovies',
- shape: getPosterShape(),
- showTitle: false,
- overlayPlayButton: true
- }, {
- name: 'Shows',
- types: 'Series',
- id: 'favoriteShows',
- shape: getPosterShape(),
- showTitle: false,
- overlayPlayButton: true
- }, {
- name: 'Episodes',
- types: 'Episode',
- id: 'favoriteEpisode',
- shape: getThumbShape(),
- preferThumb: false,
- showTitle: true,
- showParentTitle: true,
- overlayPlayButton: true,
- overlayText: false,
- centerText: true
- }, {
- name: 'Videos',
- types: 'Video,MusicVideo',
- id: 'favoriteVideos',
- shape: getThumbShape(),
- preferThumb: true,
- showTitle: true,
- overlayPlayButton: true,
- overlayText: false,
- centerText: true
- }, {
- name: 'Artists',
- types: 'MusicArtist',
- id: 'favoriteArtists',
- shape: getSquareShape(),
- preferThumb: false,
- showTitle: true,
- overlayText: false,
- showParentTitle: false,
- centerText: true,
- overlayPlayButton: true,
- coverImage: true
- }, {
- name: 'Albums',
- types: 'MusicAlbum',
- id: 'favoriteAlbums',
- shape: getSquareShape(),
- preferThumb: false,
- showTitle: true,
- overlayText: false,
- showParentTitle: true,
- centerText: true,
- overlayPlayButton: true,
- coverImage: true
- }, {
- name: 'Songs',
- types: 'Audio',
- id: 'favoriteSongs',
- shape: getSquareShape(),
- preferThumb: false,
- showTitle: true,
- overlayText: false,
- showParentTitle: true,
- centerText: true,
- overlayMoreButton: true,
- action: 'instantmix',
- coverImage: true
- }];
- }
-
- function loadSection(elem, userId, topParentId, section, isSingleSection) {
- const screenWidth = dom.getWindowSize().innerWidth;
- const options = {
- SortBy: 'SortName',
- SortOrder: 'Ascending',
- Filters: 'IsFavorite',
- Recursive: true,
- Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
- CollapseBoxSetItems: false,
- ExcludeLocationTypes: 'Virtual',
- EnableTotalRecordCount: false
- };
-
- if (topParentId) {
- options.ParentId = topParentId;
+ if (enableScrollX()) {
+ options.Limit = 20;
+ } else if (screenWidth >= 1920) {
+ options.Limit = 10;
+ } else if (screenWidth >= 1440) {
+ options.Limit = 8;
}
+ }
- if (!isSingleSection) {
- options.Limit = 6;
+ let promise;
+ if (section.types === 'MusicArtist') {
+ promise = ApiClient.getArtists(userId, options);
+ } else {
+ options.IncludeItemTypes = section.types;
+ promise = ApiClient.getItems(userId, options);
+ }
+
+ return promise.then(function (result) {
+ let html = '';
+
+ if (result.Items.length) {
+ html += ''; - html += title; - html += '
'; - - html += '';
+
+ if (!layoutManager.tv && options.Limit && result.Items.length >= options.Limit) {
+ html += '';
+ html += '
';
if (enableScrollX()) {
- options.Limit = 20;
- } else if (screenWidth >= 1920) {
- options.Limit = 10;
- } else if (screenWidth >= 1440) {
- options.Limit = 8;
- }
- }
-
- let promise;
-
- if (section.types === 'MusicArtist') {
- promise = ApiClient.getArtists(userId, options);
- } else {
- options.IncludeItemTypes = section.types;
- promise = ApiClient.getItems(userId, options);
- }
-
- return promise.then(function (result) {
- let html = '';
-
- if (result.Items.length) {
- html += ''; + html += globalize.translate(section.name); + html += '
'; + html += ''; + html += ''; + } else { + html += '' + globalize.translate(section.name) + '
'; + } + + html += '';
-
- if (!layoutManager.tv && options.Limit && result.Items.length >= options.Limit) {
- html += '';
- html += '
';
- if (enableScrollX()) {
- let scrollXClass = 'scrollX hiddenScrollX';
- if (layoutManager.tv) {
- scrollXClass += ' smoothScrollX';
- }
-
- html += ''; - html += globalize.translate(section.name); - html += '
'; - html += ''; - html += ''; - } else { - html += '' + globalize.translate(section.name) + '
'; + let scrollXClass = 'scrollX hiddenScrollX'; + if (layoutManager.tv) { + scrollXClass += ' smoothScrollX'; } - html += '';
- } else {
- html += '
';
- }
-
- let cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle;
- cardLayout = false;
- html += cardBuilder.getCardsHtml(result.Items, {
- preferThumb: section.preferThumb,
- shape: section.shape,
- centerText: section.centerText && !cardLayout,
- overlayText: section.overlayText !== false,
- showTitle: section.showTitle,
- showParentTitle: section.showParentTitle,
- scalable: true,
- coverImage: section.coverImage,
- overlayPlayButton: section.overlayPlayButton,
- overlayMoreButton: section.overlayMoreButton && !cardLayout,
- action: section.action,
- allowBottomPadding: !enableScrollX(),
- cardLayout: cardLayout
- });
- html += '
';
+ html += '';
+ } else {
+ html += '}
* @returns {string} Query string
*/
- function paramsToString(params) {
- return Object.entries(params)
- .filter(([, v]) => v !== null && v !== undefined && v !== '')
- .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
- .join('&');
+function paramsToString(params) {
+ return Object.entries(params)
+ .filter(([, v]) => v !== null && v !== undefined && v !== '')
+ .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+ .join('&');
+}
+
+export function ajax(request) {
+ if (!request) {
+ throw new Error('Request cannot be null');
}
- export function ajax(request) {
- if (!request) {
- throw new Error('Request cannot be null');
- }
+ request.headers = request.headers || {};
- request.headers = request.headers || {};
+ console.debug(`requesting url: ${request.url}`);
- console.debug(`requesting url: ${request.url}`);
-
- return getFetchPromise(request).then(function (response) {
- console.debug(`response status: ${response.status}, url: ${request.url}`);
- if (response.status < 400) {
- if (request.dataType === 'json' || request.headers.accept === 'application/json') {
- return response.json();
- } else if (request.dataType === 'text' || (response.headers.get('Content-Type') || '').toLowerCase().startsWith('text/')) {
- return response.text();
- } else {
- return response;
- }
+ return getFetchPromise(request).then(function (response) {
+ console.debug(`response status: ${response.status}, url: ${request.url}`);
+ if (response.status < 400) {
+ if (request.dataType === 'json' || request.headers.accept === 'application/json') {
+ return response.json();
+ } else if (request.dataType === 'text' || (response.headers.get('Content-Type') || '').toLowerCase().startsWith('text/')) {
+ return response.text();
} else {
- return Promise.reject(response);
+ return response;
}
- }, function (err) {
- console.error(`request failed to url: ${request.url}`);
- throw err;
- });
- }
-/* eslint-enable indent */
+ } else {
+ return Promise.reject(response);
+ }
+ }, function (err) {
+ console.error(`request failed to url: ${request.url}`);
+ throw err;
+ });
+}
diff --git a/src/components/filterdialog/filterdialog.js b/src/components/filterdialog/filterdialog.js
index 83d7ccbd2e..2301dcd404 100644
--- a/src/components/filterdialog/filterdialog.js
+++ b/src/components/filterdialog/filterdialog.js
@@ -8,417 +8,414 @@ import './style.scss';
import ServerConnections from '../ServerConnections';
import template from './filterdialog.template.html';
-/* eslint-disable indent */
- function renderOptions(context, selector, cssClass, items, isCheckedFn) {
- const elem = context.querySelector(selector);
- if (items.length) {
- elem.classList.remove('hide');
- } else {
- elem.classList.add('hide');
- }
- let html = '';
- html += '
', ''); - } else { - noLibDescription = globalize.translate('AskAdminToCreateLibrary'); - } - - html += '
', ''); + } else { + noLibDescription = globalize.translate('AskAdminToCreateLibrary'); + } + + html += '
';
}
- elem.innerHTML = html;
- imageLoader.lazyChildren(elem);
+ let cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle;
+ cardLayout = false;
+ html += cardBuilder.getCardsHtml(result.Items, {
+ preferThumb: section.preferThumb,
+ shape: section.shape,
+ centerText: section.centerText && !cardLayout,
+ overlayText: section.overlayText !== false,
+ showTitle: section.showTitle,
+ showParentTitle: section.showParentTitle,
+ scalable: true,
+ coverImage: section.coverImage,
+ overlayPlayButton: section.overlayPlayButton,
+ overlayMoreButton: section.overlayMoreButton && !cardLayout,
+ action: section.action,
+ allowBottomPadding: !enableScrollX(),
+ cardLayout: cardLayout
+ });
+ html += '
';
+ }
+
+ elem.innerHTML = html;
+ imageLoader.lazyChildren(elem);
+ });
+}
+
+export function loadSections(page, userId, topParentId, types) {
+ loading.show();
+ let sections = getSections();
+ const sectionid = getParameterByName('sectionid');
+
+ if (sectionid) {
+ sections = sections.filter(function (s) {
+ return s.id === sectionid;
});
}
- export function loadSections(page, userId, topParentId, types) {
- loading.show();
- let sections = getSections();
- const sectionid = getParameterByName('sectionid');
+ if (types) {
+ sections = sections.filter(function (s) {
+ return types.indexOf(s.id) !== -1;
+ });
+ }
- if (sectionid) {
- sections = sections.filter(function (s) {
- return s.id === sectionid;
- });
- }
+ let elem = page.querySelector('.favoriteSections');
- if (types) {
- sections = sections.filter(function (s) {
- return types.indexOf(s.id) !== -1;
- });
- }
-
- let elem = page.querySelector('.favoriteSections');
-
- if (!elem.innerHTML) {
- let html = '';
-
- for (let i = 0, length = sections.length; i < length; i++) {
- html += '';
- }
-
- elem.innerHTML = html;
- }
-
- const promises = [];
+ if (!elem.innerHTML) {
+ let html = '';
for (let i = 0, length = sections.length; i < length; i++) {
- const section = sections[i];
- elem = page.querySelector('.section' + section.id);
- promises.push(loadSection(elem, userId, topParentId, section, sections.length === 1));
+ html += '';
}
- Promise.all(promises).then(function () {
- loading.hide();
- });
+ elem.innerHTML = html;
}
+ const promises = [];
+
+ for (let i = 0, length = sections.length; i < length; i++) {
+ const section = sections[i];
+ elem = page.querySelector('.section' + section.id);
+ promises.push(loadSection(elem, userId, topParentId, section, sections.length === 1));
+ }
+
+ Promise.all(promises).then(function () {
+ loading.hide();
+ });
+}
+
export default {
render: loadSections
};
-
-/* eslint-enable indent */
diff --git a/src/components/fetchhelper.js b/src/components/fetchhelper.js
index efc490fc66..f63fa62ced 100644
--- a/src/components/fetchhelper.js
+++ b/src/components/fetchhelper.js
@@ -1,110 +1,108 @@
-/* eslint-disable indent */
- export function getFetchPromise(request) {
- const headers = request.headers || {};
+export function getFetchPromise(request) {
+ const headers = request.headers || {};
- if (request.dataType === 'json') {
- headers.accept = 'application/json';
- }
-
- const fetchRequest = {
- headers: headers,
- method: request.type,
- credentials: 'same-origin'
- };
-
- let contentType = request.contentType;
-
- if (request.data) {
- if (typeof request.data === 'string') {
- fetchRequest.body = request.data;
- } else {
- fetchRequest.body = paramsToString(request.data);
-
- contentType = contentType || 'application/x-www-form-urlencoded; charset=UTF-8';
- }
- }
-
- if (contentType) {
- headers['Content-Type'] = contentType;
- }
-
- let url = request.url;
-
- if (request.query) {
- const paramString = paramsToString(request.query);
- if (paramString) {
- url += `?${paramString}`;
- }
- }
-
- if (!request.timeout) {
- return fetch(url, fetchRequest);
- }
-
- return fetchWithTimeout(url, fetchRequest, request.timeout);
+ if (request.dataType === 'json') {
+ headers.accept = 'application/json';
}
- function fetchWithTimeout(url, options, timeoutMs) {
- console.debug(`fetchWithTimeout: timeoutMs: ${timeoutMs}, url: ${url}`);
+ const fetchRequest = {
+ headers: headers,
+ method: request.type,
+ credentials: 'same-origin'
+ };
- return new Promise(function (resolve, reject) {
- const timeout = setTimeout(reject, timeoutMs);
+ let contentType = request.contentType;
- options = options || {};
- options.credentials = 'same-origin';
+ if (request.data) {
+ if (typeof request.data === 'string') {
+ fetchRequest.body = request.data;
+ } else {
+ fetchRequest.body = paramsToString(request.data);
- fetch(url, options).then(function (response) {
- clearTimeout(timeout);
+ contentType = contentType || 'application/x-www-form-urlencoded; charset=UTF-8';
+ }
+ }
- console.debug(`fetchWithTimeout: succeeded connecting to url: ${url}`);
+ if (contentType) {
+ headers['Content-Type'] = contentType;
+ }
- resolve(response);
- }, function (error) {
- clearTimeout(timeout);
+ let url = request.url;
- console.debug(`fetchWithTimeout: timed out connecting to url: ${url}`);
+ if (request.query) {
+ const paramString = paramsToString(request.query);
+ if (paramString) {
+ url += `?${paramString}`;
+ }
+ }
- reject(error);
- });
+ if (!request.timeout) {
+ return fetch(url, fetchRequest);
+ }
+
+ return fetchWithTimeout(url, fetchRequest, request.timeout);
+}
+
+function fetchWithTimeout(url, options, timeoutMs) {
+ console.debug(`fetchWithTimeout: timeoutMs: ${timeoutMs}, url: ${url}`);
+
+ return new Promise(function (resolve, reject) {
+ const timeout = setTimeout(reject, timeoutMs);
+
+ options = options || {};
+ options.credentials = 'same-origin';
+
+ fetch(url, options).then(function (response) {
+ clearTimeout(timeout);
+
+ console.debug(`fetchWithTimeout: succeeded connecting to url: ${url}`);
+
+ resolve(response);
+ }, function (error) {
+ clearTimeout(timeout);
+
+ console.debug(`fetchWithTimeout: timed out connecting to url: ${url}`);
+
+ reject(error);
});
- }
+ });
+}
- /**
+/**
* @param params {Record';
- html += items.map(function (filter) {
- let itemHtml = '';
- const checkedHtml = isCheckedFn(filter) ? 'checked' : '';
- itemHtml += '';
- return itemHtml;
- }).join('');
- html += '
';
- elem.querySelector('.filterOptions').innerHTML = html;
+function renderOptions(context, selector, cssClass, items, isCheckedFn) {
+ const elem = context.querySelector(selector);
+ if (items.length) {
+ elem.classList.remove('hide');
+ } else {
+ elem.classList.add('hide');
}
+ let html = '';
+ html += '';
+ html += items.map(function (filter) {
+ let itemHtml = '';
+ const checkedHtml = isCheckedFn(filter) ? 'checked' : '';
+ itemHtml += '';
+ return itemHtml;
+ }).join('');
+ html += '
';
+ elem.querySelector('.filterOptions').innerHTML = html;
+}
- function renderFilters(context, result, query) {
- renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
- const delimeter = '|';
- return (delimeter + (query.Genres || '') + delimeter).includes(delimeter + i + delimeter);
- });
- renderOptions(context, '.officialRatingFilters', 'chkOfficialRatingFilter', result.OfficialRatings, function (i) {
- const delimeter = '|';
- return (delimeter + (query.OfficialRatings || '') + delimeter).includes(delimeter + i + delimeter);
- });
- renderOptions(context, '.tagFilters', 'chkTagFilter', result.Tags, function (i) {
- const delimeter = '|';
- return (delimeter + (query.Tags || '') + delimeter).includes(delimeter + i + delimeter);
- });
- renderOptions(context, '.yearFilters', 'chkYearFilter', result.Years, function (i) {
- const delimeter = ',';
- return (delimeter + (query.Years || '') + delimeter).includes(delimeter + i + delimeter);
- });
- }
+function renderFilters(context, result, query) {
+ renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
+ const delimeter = '|';
+ return (delimeter + (query.Genres || '') + delimeter).includes(delimeter + i + delimeter);
+ });
+ renderOptions(context, '.officialRatingFilters', 'chkOfficialRatingFilter', result.OfficialRatings, function (i) {
+ const delimeter = '|';
+ return (delimeter + (query.OfficialRatings || '') + delimeter).includes(delimeter + i + delimeter);
+ });
+ renderOptions(context, '.tagFilters', 'chkTagFilter', result.Tags, function (i) {
+ const delimeter = '|';
+ return (delimeter + (query.Tags || '') + delimeter).includes(delimeter + i + delimeter);
+ });
+ renderOptions(context, '.yearFilters', 'chkYearFilter', result.Years, function (i) {
+ const delimeter = ',';
+ return (delimeter + (query.Years || '') + delimeter).includes(delimeter + i + delimeter);
+ });
+}
- function loadDynamicFilters(context, apiClient, userId, itemQuery) {
- return apiClient.getJSON(apiClient.getUrl('Items/Filters', {
- UserId: userId,
- ParentId: itemQuery.ParentId,
- IncludeItemTypes: itemQuery.IncludeItemTypes
- })).then(function (result) {
- renderFilters(context, result, itemQuery);
- });
- }
+function loadDynamicFilters(context, apiClient, userId, itemQuery) {
+ return apiClient.getJSON(apiClient.getUrl('Items/Filters', {
+ UserId: userId,
+ ParentId: itemQuery.ParentId,
+ IncludeItemTypes: itemQuery.IncludeItemTypes
+ })).then(function (result) {
+ renderFilters(context, result, itemQuery);
+ });
+}
- /**
+/**
* @param context {HTMLDivElement} Dialog
* @param options {any} Options
*/
- function updateFilterControls(context, options) {
- const query = options.query;
+function updateFilterControls(context, options) {
+ const query = options.query;
- if (options.mode === 'livetvchannels') {
- context.querySelector('.chkFavorite').checked = query.IsFavorite === true;
+ if (options.mode === 'livetvchannels') {
+ context.querySelector('.chkFavorite').checked = query.IsFavorite === true;
+ } else {
+ for (const elem of context.querySelectorAll('.chkStandardFilter')) {
+ const filters = `,${query.Filters || ''}`;
+ const filterName = elem.getAttribute('data-filter');
+ elem.checked = filters.includes(`,${filterName}`);
+ }
+ }
+
+ for (const elem of context.querySelectorAll('.chkVideoTypeFilter')) {
+ const filters = `,${query.VideoTypes || ''}`;
+ const filterName = elem.getAttribute('data-filter');
+ elem.checked = filters.includes(`,${filterName}`);
+ }
+ context.querySelector('.chk3DFilter').checked = query.Is3D === true;
+ context.querySelector('.chkHDFilter').checked = query.IsHD === true;
+ context.querySelector('.chk4KFilter').checked = query.Is4K === true;
+ context.querySelector('.chkSDFilter').checked = query.IsHD === false;
+ context.querySelector('#chkSubtitle').checked = query.HasSubtitles === true;
+ context.querySelector('#chkTrailer').checked = query.HasTrailer === true;
+ context.querySelector('#chkThemeSong').checked = query.HasThemeSong === true;
+ context.querySelector('#chkThemeVideo').checked = query.HasThemeVideo === true;
+ context.querySelector('#chkSpecialFeature').checked = query.HasSpecialFeature === true;
+ context.querySelector('#chkSpecialEpisode').checked = query.ParentIndexNumber === 0;
+ context.querySelector('#chkMissingEpisode').checked = query.IsMissing === true;
+ context.querySelector('#chkFutureEpisode').checked = query.IsUnaired === true;
+ for (const elem of context.querySelectorAll('.chkStatus')) {
+ const filters = `,${query.SeriesStatus || ''}`;
+ const filterName = elem.getAttribute('data-filter');
+ elem.checked = filters.includes(`,${filterName}`);
+ }
+}
+
+/**
+ * @param instance {FilterDialog} An instance of FilterDialog
+ */
+function triggerChange(instance) {
+ Events.trigger(instance, 'filterchange');
+}
+
+function setVisibility(context, options) {
+ if (options.mode === 'livetvchannels' || options.mode === 'albums' || options.mode === 'artists' || options.mode === 'albumartists' || options.mode === 'songs') {
+ hideByClass(context, 'videoStandard');
+ }
+
+ if (enableDynamicFilters(options.mode)) {
+ context.querySelector('.genreFilters').classList.remove('hide');
+ context.querySelector('.officialRatingFilters').classList.remove('hide');
+ context.querySelector('.tagFilters').classList.remove('hide');
+ context.querySelector('.yearFilters').classList.remove('hide');
+ }
+
+ if (options.mode === 'movies' || options.mode === 'episodes') {
+ context.querySelector('.videoTypeFilters').classList.remove('hide');
+ }
+
+ if (options.mode === 'movies' || options.mode === 'series' || options.mode === 'episodes') {
+ context.querySelector('.features').classList.remove('hide');
+ }
+
+ if (options.mode === 'series') {
+ context.querySelector('.seriesStatus').classList.remove('hide');
+ }
+
+ if (options.mode === 'episodes') {
+ showByClass(context, 'episodeFilter');
+ }
+}
+
+function showByClass(context, className) {
+ for (const elem of context.querySelectorAll(`.${className}`)) {
+ elem.classList.remove('hide');
+ }
+}
+
+function hideByClass(context, className) {
+ for (const elem of context.querySelectorAll(`.${className}`)) {
+ elem.classList.add('hide');
+ }
+}
+
+function enableDynamicFilters(mode) {
+ return mode === 'movies' || mode === 'series' || mode === 'albums' || mode === 'albumartists' || mode === 'artists' || mode === 'songs' || mode === 'episodes';
+}
+
+class FilterDialog {
+ constructor(options) {
+ /**
+ * @private
+ */
+ this.options = options;
+ }
+
+ /**
+ * @private
+ */
+ onFavoriteChange(elem) {
+ const query = this.options.query;
+ query.StartIndex = 0;
+ query.IsFavorite = !!elem.checked || null;
+ triggerChange(this);
+ }
+
+ /**
+ * @private
+ */
+ onStandardFilterChange(elem) {
+ const query = this.options.query;
+ const filterName = elem.getAttribute('data-filter');
+ let filters = query.Filters || '';
+ filters = (`,${filters}`).replace(`,${filterName}`, '').substring(1);
+
+ if (elem.checked) {
+ filters = filters ? `${filters},${filterName}` : filterName;
+ }
+
+ query.StartIndex = 0;
+ query.Filters = filters;
+ triggerChange(this);
+ }
+
+ /**
+ * @private
+ */
+ onVideoTypeFilterChange(elem) {
+ const query = this.options.query;
+ const filterName = elem.getAttribute('data-filter');
+ let filters = query.VideoTypes || '';
+ filters = (`,${filters}`).replace(`,${filterName}`, '').substring(1);
+
+ if (elem.checked) {
+ filters = filters ? `${filters},${filterName}` : filterName;
+ }
+
+ query.StartIndex = 0;
+ query.VideoTypes = filters;
+ triggerChange(this);
+ }
+
+ /**
+ * @private
+ */
+ onStatusChange(elem) {
+ const query = this.options.query;
+ const filterName = elem.getAttribute('data-filter');
+ let filters = query.SeriesStatus || '';
+ filters = (`,${filters}`).replace(`,${filterName}`, '').substring(1);
+
+ if (elem.checked) {
+ filters = filters ? `${filters},${filterName}` : filterName;
+ }
+
+ query.SeriesStatus = filters;
+ query.StartIndex = 0;
+ triggerChange(this);
+ }
+
+ /**
+ * @param context {HTMLDivElement} The dialog
+ */
+ bindEvents(context) {
+ const query = this.options.query;
+
+ if (this.options.mode === 'livetvchannels') {
+ for (const elem of context.querySelectorAll('.chkFavorite')) {
+ elem.addEventListener('change', () => this.onFavoriteChange(elem));
+ }
} else {
for (const elem of context.querySelectorAll('.chkStandardFilter')) {
- const filters = `,${query.Filters || ''}`;
- const filterName = elem.getAttribute('data-filter');
- elem.checked = filters.includes(`,${filterName}`);
+ elem.addEventListener('change', () => this.onStandardFilterChange(elem));
}
}
for (const elem of context.querySelectorAll('.chkVideoTypeFilter')) {
- const filters = `,${query.VideoTypes || ''}`;
- const filterName = elem.getAttribute('data-filter');
- elem.checked = filters.includes(`,${filterName}`);
+ elem.addEventListener('change', () => this.onVideoTypeFilterChange(elem));
}
- context.querySelector('.chk3DFilter').checked = query.Is3D === true;
- context.querySelector('.chkHDFilter').checked = query.IsHD === true;
- context.querySelector('.chk4KFilter').checked = query.Is4K === true;
- context.querySelector('.chkSDFilter').checked = query.IsHD === false;
- context.querySelector('#chkSubtitle').checked = query.HasSubtitles === true;
- context.querySelector('#chkTrailer').checked = query.HasTrailer === true;
- context.querySelector('#chkThemeSong').checked = query.HasThemeSong === true;
- context.querySelector('#chkThemeVideo').checked = query.HasThemeVideo === true;
- context.querySelector('#chkSpecialFeature').checked = query.HasSpecialFeature === true;
- context.querySelector('#chkSpecialEpisode').checked = query.ParentIndexNumber === 0;
- context.querySelector('#chkMissingEpisode').checked = query.IsMissing === true;
- context.querySelector('#chkFutureEpisode').checked = query.IsUnaired === true;
- for (const elem of context.querySelectorAll('.chkStatus')) {
- const filters = `,${query.SeriesStatus || ''}`;
- const filterName = elem.getAttribute('data-filter');
- elem.checked = filters.includes(`,${filterName}`);
- }
- }
-
- /**
- * @param instance {FilterDialog} An instance of FilterDialog
- */
- function triggerChange(instance) {
- Events.trigger(instance, 'filterchange');
- }
-
- function setVisibility(context, options) {
- if (options.mode === 'livetvchannels' || options.mode === 'albums' || options.mode === 'artists' || options.mode === 'albumartists' || options.mode === 'songs') {
- hideByClass(context, 'videoStandard');
- }
-
- if (enableDynamicFilters(options.mode)) {
- context.querySelector('.genreFilters').classList.remove('hide');
- context.querySelector('.officialRatingFilters').classList.remove('hide');
- context.querySelector('.tagFilters').classList.remove('hide');
- context.querySelector('.yearFilters').classList.remove('hide');
- }
-
- if (options.mode === 'movies' || options.mode === 'episodes') {
- context.querySelector('.videoTypeFilters').classList.remove('hide');
- }
-
- if (options.mode === 'movies' || options.mode === 'series' || options.mode === 'episodes') {
- context.querySelector('.features').classList.remove('hide');
- }
-
- if (options.mode === 'series') {
- context.querySelector('.seriesStatus').classList.remove('hide');
- }
-
- if (options.mode === 'episodes') {
- showByClass(context, 'episodeFilter');
- }
- }
-
- function showByClass(context, className) {
- for (const elem of context.querySelectorAll(`.${className}`)) {
- elem.classList.remove('hide');
- }
- }
-
- function hideByClass(context, className) {
- for (const elem of context.querySelectorAll(`.${className}`)) {
- elem.classList.add('hide');
- }
- }
-
- function enableDynamicFilters(mode) {
- return mode === 'movies' || mode === 'series' || mode === 'albums' || mode === 'albumartists' || mode === 'artists' || mode === 'songs' || mode === 'episodes';
- }
-
- class FilterDialog {
- constructor(options) {
- /**
- * @private
- */
- this.options = options;
- }
-
- /**
- * @private
- */
- onFavoriteChange(elem) {
- const query = this.options.query;
+ const chk3DFilter = context.querySelector('.chk3DFilter');
+ chk3DFilter.addEventListener('change', () => {
query.StartIndex = 0;
- query.IsFavorite = !!elem.checked || null;
+ query.Is3D = chk3DFilter.checked ? true : null;
triggerChange(this);
- }
-
- /**
- * @private
- */
- onStandardFilterChange(elem) {
- const query = this.options.query;
- const filterName = elem.getAttribute('data-filter');
- let filters = query.Filters || '';
- filters = (`,${filters}`).replace(`,${filterName}`, '').substring(1);
-
- if (elem.checked) {
- filters = filters ? `${filters},${filterName}` : filterName;
- }
-
+ });
+ const chk4KFilter = context.querySelector('.chk4KFilter');
+ chk4KFilter.addEventListener('change', () => {
query.StartIndex = 0;
- query.Filters = filters;
+ query.Is4K = chk4KFilter.checked ? true : null;
triggerChange(this);
- }
-
- /**
- * @private
- */
- onVideoTypeFilterChange(elem) {
- const query = this.options.query;
- const filterName = elem.getAttribute('data-filter');
- let filters = query.VideoTypes || '';
- filters = (`,${filters}`).replace(`,${filterName}`, '').substring(1);
-
- if (elem.checked) {
- filters = filters ? `${filters},${filterName}` : filterName;
- }
-
+ });
+ const chkHDFilter = context.querySelector('.chkHDFilter');
+ const chkSDFilter = context.querySelector('.chkSDFilter');
+ chkHDFilter.addEventListener('change', () => {
query.StartIndex = 0;
- query.VideoTypes = filters;
- triggerChange(this);
- }
-
- /**
- * @private
- */
- onStatusChange(elem) {
- const query = this.options.query;
- const filterName = elem.getAttribute('data-filter');
- let filters = query.SeriesStatus || '';
- filters = (`,${filters}`).replace(`,${filterName}`, '').substring(1);
-
- if (elem.checked) {
- filters = filters ? `${filters},${filterName}` : filterName;
- }
-
- query.SeriesStatus = filters;
- query.StartIndex = 0;
- triggerChange(this);
- }
-
- /**
- * @param context {HTMLDivElement} The dialog
- */
- bindEvents(context) {
- const query = this.options.query;
-
- if (this.options.mode === 'livetvchannels') {
- for (const elem of context.querySelectorAll('.chkFavorite')) {
- elem.addEventListener('change', () => this.onFavoriteChange(elem));
- }
+ if (chkHDFilter.checked) {
+ chkSDFilter.checked = false;
+ query.IsHD = true;
} else {
- for (const elem of context.querySelectorAll('.chkStandardFilter')) {
- elem.addEventListener('change', () => this.onStandardFilterChange(elem));
- }
+ query.IsHD = null;
}
-
- for (const elem of context.querySelectorAll('.chkVideoTypeFilter')) {
- elem.addEventListener('change', () => this.onVideoTypeFilterChange(elem));
+ triggerChange(this);
+ });
+ chkSDFilter.addEventListener('change', () => {
+ query.StartIndex = 0;
+ if (chkSDFilter.checked) {
+ chkHDFilter.checked = false;
+ query.IsHD = false;
+ } else {
+ query.IsHD = null;
}
- const chk3DFilter = context.querySelector('.chk3DFilter');
- chk3DFilter.addEventListener('change', () => {
- query.StartIndex = 0;
- query.Is3D = chk3DFilter.checked ? true : null;
- triggerChange(this);
- });
- const chk4KFilter = context.querySelector('.chk4KFilter');
- chk4KFilter.addEventListener('change', () => {
- query.StartIndex = 0;
- query.Is4K = chk4KFilter.checked ? true : null;
- triggerChange(this);
- });
- const chkHDFilter = context.querySelector('.chkHDFilter');
- const chkSDFilter = context.querySelector('.chkSDFilter');
- chkHDFilter.addEventListener('change', () => {
- query.StartIndex = 0;
- if (chkHDFilter.checked) {
- chkSDFilter.checked = false;
- query.IsHD = true;
- } else {
- query.IsHD = null;
- }
- triggerChange(this);
- });
- chkSDFilter.addEventListener('change', () => {
- query.StartIndex = 0;
- if (chkSDFilter.checked) {
- chkHDFilter.checked = false;
- query.IsHD = false;
- } else {
- query.IsHD = null;
- }
- triggerChange(this);
- });
- for (const elem of context.querySelectorAll('.chkStatus')) {
- elem.addEventListener('change', () => this.onStatusChange(elem));
- }
- const chkTrailer = context.querySelector('#chkTrailer');
- chkTrailer.addEventListener('change', () => {
- query.StartIndex = 0;
- query.HasTrailer = chkTrailer.checked ? true : null;
- triggerChange(this);
- });
- const chkThemeSong = context.querySelector('#chkThemeSong');
- chkThemeSong.addEventListener('change', () => {
- query.StartIndex = 0;
- query.HasThemeSong = chkThemeSong.checked ? true : null;
- triggerChange(this);
- });
- const chkSpecialFeature = context.querySelector('#chkSpecialFeature');
- chkSpecialFeature.addEventListener('change', () => {
- query.StartIndex = 0;
- query.HasSpecialFeature = chkSpecialFeature.checked ? true : null;
- triggerChange(this);
- });
- const chkThemeVideo = context.querySelector('#chkThemeVideo');
- chkThemeVideo.addEventListener('change', () => {
- query.StartIndex = 0;
- query.HasThemeVideo = chkThemeVideo.checked ? true : null;
- triggerChange(this);
- });
- const chkMissingEpisode = context.querySelector('#chkMissingEpisode');
- chkMissingEpisode.addEventListener('change', () => {
- query.StartIndex = 0;
- query.IsMissing = !!chkMissingEpisode.checked;
- triggerChange(this);
- });
- const chkSpecialEpisode = context.querySelector('#chkSpecialEpisode');
- chkSpecialEpisode.addEventListener('change', () => {
- query.StartIndex = 0;
- query.ParentIndexNumber = chkSpecialEpisode.checked ? 0 : null;
- triggerChange(this);
- });
- const chkFutureEpisode = context.querySelector('#chkFutureEpisode');
- chkFutureEpisode.addEventListener('change', () => {
- query.StartIndex = 0;
- if (chkFutureEpisode.checked) {
- query.IsUnaired = true;
- query.IsVirtualUnaired = null;
- } else {
- query.IsUnaired = null;
- query.IsVirtualUnaired = false;
- }
- triggerChange(this);
- });
- const chkSubtitle = context.querySelector('#chkSubtitle');
- chkSubtitle.addEventListener('change', () => {
- query.StartIndex = 0;
- query.HasSubtitles = chkSubtitle.checked ? true : null;
- triggerChange(this);
- });
- context.addEventListener('change', (e) => {
- const chkGenreFilter = dom.parentWithClass(e.target, 'chkGenreFilter');
- if (chkGenreFilter) {
- const filterName = chkGenreFilter.getAttribute('data-filter');
- let filters = query.Genres || '';
- const delimiter = '|';
- filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
- if (chkGenreFilter.checked) {
- filters = filters ? (filters + delimiter + filterName) : filterName;
- }
- query.StartIndex = 0;
- query.Genres = filters;
- triggerChange(this);
- return;
- }
- const chkTagFilter = dom.parentWithClass(e.target, 'chkTagFilter');
- if (chkTagFilter) {
- const filterName = chkTagFilter.getAttribute('data-filter');
- let filters = query.Tags || '';
- const delimiter = '|';
- filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
- if (chkTagFilter.checked) {
- filters = filters ? (filters + delimiter + filterName) : filterName;
- }
- query.StartIndex = 0;
- query.Tags = filters;
- triggerChange(this);
- return;
- }
- const chkYearFilter = dom.parentWithClass(e.target, 'chkYearFilter');
- if (chkYearFilter) {
- const filterName = chkYearFilter.getAttribute('data-filter');
- let filters = query.Years || '';
- const delimiter = ',';
- filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
- if (chkYearFilter.checked) {
- filters = filters ? (filters + delimiter + filterName) : filterName;
- }
- query.StartIndex = 0;
- query.Years = filters;
- triggerChange(this);
- return;
- }
- const chkOfficialRatingFilter = dom.parentWithClass(e.target, 'chkOfficialRatingFilter');
- if (chkOfficialRatingFilter) {
- const filterName = chkOfficialRatingFilter.getAttribute('data-filter');
- let filters = query.OfficialRatings || '';
- const delimiter = '|';
- filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
- if (chkOfficialRatingFilter.checked) {
- filters = filters ? (filters + delimiter + filterName) : filterName;
- }
- query.StartIndex = 0;
- query.OfficialRatings = filters;
- triggerChange(this);
- }
- });
+ triggerChange(this);
+ });
+ for (const elem of context.querySelectorAll('.chkStatus')) {
+ elem.addEventListener('change', () => this.onStatusChange(elem));
}
-
- show() {
- return new Promise((resolve) => {
- const dlg = dialogHelper.createDialog({
- removeOnClose: true,
- modal: false
- });
- dlg.classList.add('ui-body-a');
- dlg.classList.add('background-theme-a');
- dlg.classList.add('formDialog');
- dlg.classList.add('filterDialog');
- dlg.innerHTML = globalize.translateHtml(template);
- setVisibility(dlg, this.options);
- dialogHelper.open(dlg);
- dlg.addEventListener('close', resolve);
- updateFilterControls(dlg, this.options);
- this.bindEvents(dlg);
- if (enableDynamicFilters(this.options.mode)) {
- dlg.classList.add('dynamicFilterDialog');
- const apiClient = ServerConnections.getApiClient(this.options.serverId);
- loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), this.options.query);
+ const chkTrailer = context.querySelector('#chkTrailer');
+ chkTrailer.addEventListener('change', () => {
+ query.StartIndex = 0;
+ query.HasTrailer = chkTrailer.checked ? true : null;
+ triggerChange(this);
+ });
+ const chkThemeSong = context.querySelector('#chkThemeSong');
+ chkThemeSong.addEventListener('change', () => {
+ query.StartIndex = 0;
+ query.HasThemeSong = chkThemeSong.checked ? true : null;
+ triggerChange(this);
+ });
+ const chkSpecialFeature = context.querySelector('#chkSpecialFeature');
+ chkSpecialFeature.addEventListener('change', () => {
+ query.StartIndex = 0;
+ query.HasSpecialFeature = chkSpecialFeature.checked ? true : null;
+ triggerChange(this);
+ });
+ const chkThemeVideo = context.querySelector('#chkThemeVideo');
+ chkThemeVideo.addEventListener('change', () => {
+ query.StartIndex = 0;
+ query.HasThemeVideo = chkThemeVideo.checked ? true : null;
+ triggerChange(this);
+ });
+ const chkMissingEpisode = context.querySelector('#chkMissingEpisode');
+ chkMissingEpisode.addEventListener('change', () => {
+ query.StartIndex = 0;
+ query.IsMissing = !!chkMissingEpisode.checked;
+ triggerChange(this);
+ });
+ const chkSpecialEpisode = context.querySelector('#chkSpecialEpisode');
+ chkSpecialEpisode.addEventListener('change', () => {
+ query.StartIndex = 0;
+ query.ParentIndexNumber = chkSpecialEpisode.checked ? 0 : null;
+ triggerChange(this);
+ });
+ const chkFutureEpisode = context.querySelector('#chkFutureEpisode');
+ chkFutureEpisode.addEventListener('change', () => {
+ query.StartIndex = 0;
+ if (chkFutureEpisode.checked) {
+ query.IsUnaired = true;
+ query.IsVirtualUnaired = null;
+ } else {
+ query.IsUnaired = null;
+ query.IsVirtualUnaired = false;
+ }
+ triggerChange(this);
+ });
+ const chkSubtitle = context.querySelector('#chkSubtitle');
+ chkSubtitle.addEventListener('change', () => {
+ query.StartIndex = 0;
+ query.HasSubtitles = chkSubtitle.checked ? true : null;
+ triggerChange(this);
+ });
+ context.addEventListener('change', (e) => {
+ const chkGenreFilter = dom.parentWithClass(e.target, 'chkGenreFilter');
+ if (chkGenreFilter) {
+ const filterName = chkGenreFilter.getAttribute('data-filter');
+ let filters = query.Genres || '';
+ const delimiter = '|';
+ filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
+ if (chkGenreFilter.checked) {
+ filters = filters ? (filters + delimiter + filterName) : filterName;
}
- });
- }
+ query.StartIndex = 0;
+ query.Genres = filters;
+ triggerChange(this);
+ return;
+ }
+ const chkTagFilter = dom.parentWithClass(e.target, 'chkTagFilter');
+ if (chkTagFilter) {
+ const filterName = chkTagFilter.getAttribute('data-filter');
+ let filters = query.Tags || '';
+ const delimiter = '|';
+ filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
+ if (chkTagFilter.checked) {
+ filters = filters ? (filters + delimiter + filterName) : filterName;
+ }
+ query.StartIndex = 0;
+ query.Tags = filters;
+ triggerChange(this);
+ return;
+ }
+ const chkYearFilter = dom.parentWithClass(e.target, 'chkYearFilter');
+ if (chkYearFilter) {
+ const filterName = chkYearFilter.getAttribute('data-filter');
+ let filters = query.Years || '';
+ const delimiter = ',';
+ filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
+ if (chkYearFilter.checked) {
+ filters = filters ? (filters + delimiter + filterName) : filterName;
+ }
+ query.StartIndex = 0;
+ query.Years = filters;
+ triggerChange(this);
+ return;
+ }
+ const chkOfficialRatingFilter = dom.parentWithClass(e.target, 'chkOfficialRatingFilter');
+ if (chkOfficialRatingFilter) {
+ const filterName = chkOfficialRatingFilter.getAttribute('data-filter');
+ let filters = query.OfficialRatings || '';
+ const delimiter = '|';
+ filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
+ if (chkOfficialRatingFilter.checked) {
+ filters = filters ? (filters + delimiter + filterName) : filterName;
+ }
+ query.StartIndex = 0;
+ query.OfficialRatings = filters;
+ triggerChange(this);
+ }
+ });
}
-/* eslint-enable indent */
+ show() {
+ return new Promise((resolve) => {
+ const dlg = dialogHelper.createDialog({
+ removeOnClose: true,
+ modal: false
+ });
+ dlg.classList.add('ui-body-a');
+ dlg.classList.add('background-theme-a');
+ dlg.classList.add('formDialog');
+ dlg.classList.add('filterDialog');
+ dlg.innerHTML = globalize.translateHtml(template);
+ setVisibility(dlg, this.options);
+ dialogHelper.open(dlg);
+ dlg.addEventListener('close', resolve);
+ updateFilterControls(dlg, this.options);
+ this.bindEvents(dlg);
+ if (enableDynamicFilters(this.options.mode)) {
+ dlg.classList.add('dynamicFilterDialog');
+ const apiClient = ServerConnections.getApiClient(this.options.serverId);
+ loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), this.options.query);
+ }
+ });
+ }
+}
export default FilterDialog;
diff --git a/src/components/focusManager.js b/src/components/focusManager.js
index 1eacc49e77..48ccd6b92c 100644
--- a/src/components/focusManager.js
+++ b/src/components/focusManager.js
@@ -1,470 +1,466 @@
-/* eslint-disable indent */
-
import dom from '../scripts/dom';
import scrollManager from './scrollManager';
- const scopes = [];
- function pushScope(elem) {
- scopes.push(elem);
- }
+const scopes = [];
+function pushScope(elem) {
+ scopes.push(elem);
+}
- function popScope() {
- if (scopes.length) {
- scopes.length -= 1;
+function popScope() {
+ if (scopes.length) {
+ scopes.length -= 1;
+ }
+}
+
+function autoFocus(view, defaultToFirst, findAutoFocusElement) {
+ let element;
+ if (findAutoFocusElement !== false) {
+ element = view.querySelector('*[autofocus]');
+ if (element) {
+ focus(element);
+ return element;
}
}
- function autoFocus(view, defaultToFirst, findAutoFocusElement) {
- let element;
- if (findAutoFocusElement !== false) {
- element = view.querySelector('*[autofocus]');
- if (element) {
- focus(element);
- return element;
- }
- }
+ if (defaultToFirst !== false) {
+ element = getFocusableElements(view, 1, 'noautofocus')[0];
- if (defaultToFirst !== false) {
- element = getFocusableElements(view, 1, 'noautofocus')[0];
-
- if (element) {
- focus(element);
- return element;
- }
- }
-
- return null;
- }
-
- function focus(element) {
- try {
- element.focus({
- preventScroll: scrollManager.isEnabled()
- });
- } catch (err) {
- console.error('Error in focusManager.autoFocus: ' + err);
+ if (element) {
+ focus(element);
+ return element;
}
}
- const focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'];
- const focusableContainerTagNames = ['BODY', 'DIALOG'];
- const focusableQuery = focusableTagNames.map(function (t) {
- if (t === 'INPUT') {
- t += ':not([type="range"]):not([type="file"])';
- }
- return t + ':not([tabindex="-1"]):not(:disabled)';
- }).join(',') + ',.focusable';
+ return null;
+}
- function isFocusable(elem) {
- return focusableTagNames.indexOf(elem.tagName) !== -1
+function focus(element) {
+ try {
+ element.focus({
+ preventScroll: scrollManager.isEnabled()
+ });
+ } catch (err) {
+ console.error('Error in focusManager.autoFocus: ' + err);
+ }
+}
+
+const focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'];
+const focusableContainerTagNames = ['BODY', 'DIALOG'];
+const focusableQuery = focusableTagNames.map(function (t) {
+ if (t === 'INPUT') {
+ t += ':not([type="range"]):not([type="file"])';
+ }
+ return t + ':not([tabindex="-1"]):not(:disabled)';
+}).join(',') + ',.focusable';
+
+function isFocusable(elem) {
+ return focusableTagNames.indexOf(elem.tagName) !== -1
|| (elem.classList?.contains('focusable'));
+}
+
+function normalizeFocusable(elem, originalElement) {
+ if (elem) {
+ const tagName = elem.tagName;
+ if (!tagName || tagName === 'HTML' || tagName === 'BODY') {
+ elem = originalElement;
+ }
}
- function normalizeFocusable(elem, originalElement) {
- if (elem) {
- const tagName = elem.tagName;
- if (!tagName || tagName === 'HTML' || tagName === 'BODY') {
- elem = originalElement;
- }
+ return elem;
+}
+
+function focusableParent(elem) {
+ const originalElement = elem;
+
+ while (!isFocusable(elem)) {
+ const parent = elem.parentNode;
+
+ if (!parent) {
+ return normalizeFocusable(elem, originalElement);
}
- return elem;
+ elem = parent;
}
- function focusableParent(elem) {
- const originalElement = elem;
+ return normalizeFocusable(elem, originalElement);
+}
- while (!isFocusable(elem)) {
- const parent = elem.parentNode;
-
- if (!parent) {
- return normalizeFocusable(elem, originalElement);
- }
-
- elem = parent;
- }
-
- return normalizeFocusable(elem, originalElement);
- }
-
- // Determines if a focusable element can be focused at a given point in time
- function isCurrentlyFocusableInternal(elem) {
- // http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
- return elem.offsetParent !== null;
- }
-
- // Determines if a focusable element can be focused at a given point in time
- function isCurrentlyFocusable(elem) {
- if (elem.disabled) {
- return false;
- }
-
- if (elem.getAttribute('tabindex') === '-1') {
- return false;
- }
-
- if (elem.tagName === 'INPUT') {
- const type = elem.type;
- if (type === 'range') {
- return false;
- }
- if (type === 'file') {
- return false;
- }
- }
-
- return isCurrentlyFocusableInternal(elem);
- }
-
- function getDefaultScope() {
- return scopes[0] || document.body;
- }
-
- function getFocusableElements(parent, limit, excludeClass) {
- const elems = (parent || getDefaultScope()).querySelectorAll(focusableQuery);
- const focusableElements = [];
-
- for (let i = 0, length = elems.length; i < length; i++) {
- const elem = elems[i];
-
- if (excludeClass && elem.classList.contains(excludeClass)) {
- continue;
- }
-
- if (isCurrentlyFocusableInternal(elem)) {
- focusableElements.push(elem);
-
- if (limit && focusableElements.length >= limit) {
- break;
- }
- }
- }
-
- return focusableElements;
- }
-
- function isFocusContainer(elem, direction) {
- if (focusableContainerTagNames.indexOf(elem.tagName) !== -1) {
- return true;
- }
-
- const classList = elem.classList;
-
- if (classList.contains('focuscontainer')) {
- return true;
- }
-
- if (direction === 0) {
- if (classList.contains('focuscontainer-x')) {
- return true;
- }
- if (classList.contains('focuscontainer-left')) {
- return true;
- }
- } else if (direction === 1) {
- if (classList.contains('focuscontainer-x')) {
- return true;
- }
- if (classList.contains('focuscontainer-right')) {
- return true;
- }
- } else if (direction === 2) {
- if (classList.contains('focuscontainer-y')) {
- return true;
- }
- } else if (direction === 3) {
- if (classList.contains('focuscontainer-y')) {
- return true;
- }
- if (classList.contains('focuscontainer-down')) {
- return true;
- }
- }
+// Determines if a focusable element can be focused at a given point in time
+function isCurrentlyFocusableInternal(elem) {
+ // http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
+ return elem.offsetParent !== null;
+}
+// Determines if a focusable element can be focused at a given point in time
+function isCurrentlyFocusable(elem) {
+ if (elem.disabled) {
return false;
}
- function getFocusContainer(elem, direction) {
- while (!isFocusContainer(elem, direction)) {
- elem = elem.parentNode;
+ if (elem.getAttribute('tabindex') === '-1') {
+ return false;
+ }
- if (!elem) {
- return getDefaultScope();
+ if (elem.tagName === 'INPUT') {
+ const type = elem.type;
+ if (type === 'range') {
+ return false;
+ }
+ if (type === 'file') {
+ return false;
+ }
+ }
+
+ return isCurrentlyFocusableInternal(elem);
+}
+
+function getDefaultScope() {
+ return scopes[0] || document.body;
+}
+
+function getFocusableElements(parent, limit, excludeClass) {
+ const elems = (parent || getDefaultScope()).querySelectorAll(focusableQuery);
+ const focusableElements = [];
+
+ for (let i = 0, length = elems.length; i < length; i++) {
+ const elem = elems[i];
+
+ if (excludeClass && elem.classList.contains(excludeClass)) {
+ continue;
+ }
+
+ if (isCurrentlyFocusableInternal(elem)) {
+ focusableElements.push(elem);
+
+ if (limit && focusableElements.length >= limit) {
+ break;
}
}
-
- return elem;
}
- function getOffset(elem) {
- let box;
+ return focusableElements;
+}
- // Support: BlackBerry 5, iOS 3 (original iPhone)
- // If we don't have gBCR, just use 0,0 rather than error
- if (elem.getBoundingClientRect) {
- box = elem.getBoundingClientRect();
- } else {
- box = {
- top: 0,
- left: 0,
- width: 0,
- height: 0
- };
- }
-
- if (box.right === null) {
- // Create a new object because some browsers will throw an error when trying to set data onto the Rect object
- const newBox = {
- top: box.top,
- left: box.left,
- width: box.width,
- height: box.height
- };
-
- box = newBox;
-
- box.right = box.left + box.width;
- box.bottom = box.top + box.height;
- }
-
- return box;
+function isFocusContainer(elem, direction) {
+ if (focusableContainerTagNames.indexOf(elem.tagName) !== -1) {
+ return true;
}
- function nav(activeElement, direction, container, focusableElements) {
- activeElement = activeElement || document.activeElement;
+ const classList = elem.classList;
+ if (classList.contains('focuscontainer')) {
+ return true;
+ }
+
+ if (direction === 0) {
+ if (classList.contains('focuscontainer-x')) {
+ return true;
+ }
+ if (classList.contains('focuscontainer-left')) {
+ return true;
+ }
+ } else if (direction === 1) {
+ if (classList.contains('focuscontainer-x')) {
+ return true;
+ }
+ if (classList.contains('focuscontainer-right')) {
+ return true;
+ }
+ } else if (direction === 2) {
+ if (classList.contains('focuscontainer-y')) {
+ return true;
+ }
+ } else if (direction === 3) {
+ if (classList.contains('focuscontainer-y')) {
+ return true;
+ }
+ if (classList.contains('focuscontainer-down')) {
+ return true;
+ }
+ }
+
+ return false;
+}
+
+function getFocusContainer(elem, direction) {
+ while (!isFocusContainer(elem, direction)) {
+ elem = elem.parentNode;
+
+ if (!elem) {
+ return getDefaultScope();
+ }
+ }
+
+ return elem;
+}
+
+function getOffset(elem) {
+ let box;
+
+ // Support: BlackBerry 5, iOS 3 (original iPhone)
+ // If we don't have gBCR, just use 0,0 rather than error
+ if (elem.getBoundingClientRect) {
+ box = elem.getBoundingClientRect();
+ } else {
+ box = {
+ top: 0,
+ left: 0,
+ width: 0,
+ height: 0
+ };
+ }
+
+ if (box.right === null) {
+ // Create a new object because some browsers will throw an error when trying to set data onto the Rect object
+ const newBox = {
+ top: box.top,
+ left: box.left,
+ width: box.width,
+ height: box.height
+ };
+
+ box = newBox;
+
+ box.right = box.left + box.width;
+ box.bottom = box.top + box.height;
+ }
+
+ return box;
+}
+
+function nav(activeElement, direction, container, focusableElements) {
+ activeElement = activeElement || document.activeElement;
+
+ if (activeElement) {
+ activeElement = focusableParent(activeElement);
+ }
+
+ container = container || (activeElement ? getFocusContainer(activeElement, direction) : getDefaultScope());
+
+ if (!activeElement) {
+ autoFocus(container, true, false);
+ return;
+ }
+
+ const focusableContainer = dom.parentWithClass(activeElement, 'focusable');
+
+ const rect = getOffset(activeElement);
+
+ // Get elements and work out x/y points
+ const point1x = parseFloat(rect.left) || 0;
+ const point1y = parseFloat(rect.top) || 0;
+ const point2x = parseFloat(point1x + rect.width - 1) || point1x;
+ const point2y = parseFloat(point1y + rect.height - 1) || point1y;
+
+ const sourceMidX = rect.left + (rect.width / 2);
+ const sourceMidY = rect.top + (rect.height / 2);
+
+ const focusable = focusableElements || container.querySelectorAll(focusableQuery);
+
+ const maxDistance = Infinity;
+ let minDistance = maxDistance;
+ let nearestElement;
+
+ for (let i = 0, length = focusable.length; i < length; i++) {
+ const curr = focusable[i];
+
+ if (curr === activeElement) {
+ continue;
+ }
+ // Don't refocus into the same container
+ if (curr === focusableContainer) {
+ continue;
+ }
+
+ const elementRect = getOffset(curr);
+
+ // not currently visible
+ if (!elementRect.width && !elementRect.height) {
+ continue;
+ }
+
+ switch (direction) {
+ case 0:
+ // left
+ if (elementRect.left >= rect.left) {
+ continue;
+ }
+ if (elementRect.right === rect.right) {
+ continue;
+ }
+ break;
+ case 1:
+ // right
+ if (elementRect.right <= rect.right) {
+ continue;
+ }
+ if (elementRect.left === rect.left) {
+ continue;
+ }
+ break;
+ case 2:
+ // up
+ if (elementRect.top >= rect.top) {
+ continue;
+ }
+ if (elementRect.bottom >= rect.bottom) {
+ continue;
+ }
+ break;
+ case 3:
+ // down
+ if (elementRect.bottom <= rect.bottom) {
+ continue;
+ }
+ if (elementRect.top <= rect.top) {
+ continue;
+ }
+ break;
+ default:
+ break;
+ }
+
+ const x = elementRect.left;
+ const y = elementRect.top;
+ const x2 = x + elementRect.width - 1;
+ const y2 = y + elementRect.height - 1;
+
+ const intersectX = intersects(point1x, point2x, x, x2);
+ const intersectY = intersects(point1y, point2y, y, y2);
+
+ const midX = elementRect.left + (elementRect.width / 2);
+ const midY = elementRect.top + (elementRect.height / 2);
+
+ let distX;
+ let distY;
+
+ switch (direction) {
+ case 0:
+ // left
+ distX = Math.abs(point1x - Math.min(point1x, x2));
+ distY = intersectY ? 0 : Math.abs(sourceMidY - midY);
+ break;
+ case 1:
+ // right
+ distX = Math.abs(point2x - Math.max(point2x, x));
+ distY = intersectY ? 0 : Math.abs(sourceMidY - midY);
+ break;
+ case 2:
+ // up
+ distY = Math.abs(point1y - Math.min(point1y, y2));
+ distX = intersectX ? 0 : Math.abs(sourceMidX - midX);
+ break;
+ case 3:
+ // down
+ distY = Math.abs(point2y - Math.max(point2y, y));
+ distX = intersectX ? 0 : Math.abs(sourceMidX - midX);
+ break;
+ default:
+ break;
+ }
+
+ const dist = Math.sqrt(distX * distX + distY * distY);
+
+ if (dist < minDistance) {
+ nearestElement = curr;
+ minDistance = dist;
+ }
+ }
+
+ if (nearestElement) {
+ // See if there's a focusable container, and if so, send the focus command to that
if (activeElement) {
- activeElement = focusableParent(activeElement);
- }
-
- container = container || (activeElement ? getFocusContainer(activeElement, direction) : getDefaultScope());
-
- if (!activeElement) {
- autoFocus(container, true, false);
- return;
- }
-
- const focusableContainer = dom.parentWithClass(activeElement, 'focusable');
-
- const rect = getOffset(activeElement);
-
- // Get elements and work out x/y points
- const point1x = parseFloat(rect.left) || 0;
- const point1y = parseFloat(rect.top) || 0;
- const point2x = parseFloat(point1x + rect.width - 1) || point1x;
- const point2y = parseFloat(point1y + rect.height - 1) || point1y;
-
- const sourceMidX = rect.left + (rect.width / 2);
- const sourceMidY = rect.top + (rect.height / 2);
-
- const focusable = focusableElements || container.querySelectorAll(focusableQuery);
-
- const maxDistance = Infinity;
- let minDistance = maxDistance;
- let nearestElement;
-
- for (let i = 0, length = focusable.length; i < length; i++) {
- const curr = focusable[i];
-
- if (curr === activeElement) {
- continue;
- }
- // Don't refocus into the same container
- if (curr === focusableContainer) {
- continue;
- }
-
- const elementRect = getOffset(curr);
-
- // not currently visible
- if (!elementRect.width && !elementRect.height) {
- continue;
- }
-
- switch (direction) {
- case 0:
- // left
- if (elementRect.left >= rect.left) {
- continue;
- }
- if (elementRect.right === rect.right) {
- continue;
- }
- break;
- case 1:
- // right
- if (elementRect.right <= rect.right) {
- continue;
- }
- if (elementRect.left === rect.left) {
- continue;
- }
- break;
- case 2:
- // up
- if (elementRect.top >= rect.top) {
- continue;
- }
- if (elementRect.bottom >= rect.bottom) {
- continue;
- }
- break;
- case 3:
- // down
- if (elementRect.bottom <= rect.bottom) {
- continue;
- }
- if (elementRect.top <= rect.top) {
- continue;
- }
- break;
- default:
- break;
- }
-
- const x = elementRect.left;
- const y = elementRect.top;
- const x2 = x + elementRect.width - 1;
- const y2 = y + elementRect.height - 1;
-
- const intersectX = intersects(point1x, point2x, x, x2);
- const intersectY = intersects(point1y, point2y, y, y2);
-
- const midX = elementRect.left + (elementRect.width / 2);
- const midY = elementRect.top + (elementRect.height / 2);
-
- let distX;
- let distY;
-
- switch (direction) {
- case 0:
- // left
- distX = Math.abs(point1x - Math.min(point1x, x2));
- distY = intersectY ? 0 : Math.abs(sourceMidY - midY);
- break;
- case 1:
- // right
- distX = Math.abs(point2x - Math.max(point2x, x));
- distY = intersectY ? 0 : Math.abs(sourceMidY - midY);
- break;
- case 2:
- // up
- distY = Math.abs(point1y - Math.min(point1y, y2));
- distX = intersectX ? 0 : Math.abs(sourceMidX - midX);
- break;
- case 3:
- // down
- distY = Math.abs(point2y - Math.max(point2y, y));
- distX = intersectX ? 0 : Math.abs(sourceMidX - midX);
- break;
- default:
- break;
- }
-
- const dist = Math.sqrt(distX * distX + distY * distY);
-
- if (dist < minDistance) {
- nearestElement = curr;
- minDistance = dist;
- }
- }
-
- if (nearestElement) {
- // See if there's a focusable container, and if so, send the focus command to that
- if (activeElement) {
- const nearestElementFocusableParent = dom.parentWithClass(nearestElement, 'focusable');
- if (nearestElementFocusableParent
+ const nearestElementFocusableParent = dom.parentWithClass(nearestElement, 'focusable');
+ if (nearestElementFocusableParent
&& nearestElementFocusableParent !== nearestElement
&& focusableContainer !== nearestElementFocusableParent
- ) {
- nearestElement = nearestElementFocusableParent;
- }
- }
- focus(nearestElement);
- }
- }
-
- function intersectsInternal(a1, a2, b1, b2) {
- return (b1 >= a1 && b1 <= a2) || (b2 >= a1 && b2 <= a2);
- }
-
- function intersects(a1, a2, b1, b2) {
- return intersectsInternal(a1, a2, b1, b2) || intersectsInternal(b1, b2, a1, a2);
- }
-
- function sendText(text) {
- const elem = document.activeElement;
-
- elem.value = text;
- }
-
- function focusFirst(container, focusableSelector) {
- const elems = container.querySelectorAll(focusableSelector);
-
- for (let i = 0, length = elems.length; i < length; i++) {
- const elem = elems[i];
-
- if (isCurrentlyFocusableInternal(elem)) {
- focus(elem);
- break;
+ ) {
+ nearestElement = nearestElementFocusableParent;
}
}
+ focus(nearestElement);
}
+}
- function focusLast(container, focusableSelector) {
- const elems = [].slice.call(container.querySelectorAll(focusableSelector), 0).reverse();
+function intersectsInternal(a1, a2, b1, b2) {
+ return (b1 >= a1 && b1 <= a2) || (b2 >= a1 && b2 <= a2);
+}
- for (let i = 0, length = elems.length; i < length; i++) {
- const elem = elems[i];
+function intersects(a1, a2, b1, b2) {
+ return intersectsInternal(a1, a2, b1, b2) || intersectsInternal(b1, b2, a1, a2);
+}
- if (isCurrentlyFocusableInternal(elem)) {
- focus(elem);
- break;
- }
+function sendText(text) {
+ const elem = document.activeElement;
+
+ elem.value = text;
+}
+
+function focusFirst(container, focusableSelector) {
+ const elems = container.querySelectorAll(focusableSelector);
+
+ for (let i = 0, length = elems.length; i < length; i++) {
+ const elem = elems[i];
+
+ if (isCurrentlyFocusableInternal(elem)) {
+ focus(elem);
+ break;
+ }
+ }
+}
+
+function focusLast(container, focusableSelector) {
+ const elems = [].slice.call(container.querySelectorAll(focusableSelector), 0).reverse();
+
+ for (let i = 0, length = elems.length; i < length; i++) {
+ const elem = elems[i];
+
+ if (isCurrentlyFocusableInternal(elem)) {
+ focus(elem);
+ break;
+ }
+ }
+}
+
+function moveFocus(sourceElement, container, focusableSelector, offset) {
+ const elems = container.querySelectorAll(focusableSelector);
+ const list = [];
+ let i;
+ let length;
+ let elem;
+
+ for (i = 0, length = elems.length; i < length; i++) {
+ elem = elems[i];
+
+ if (isCurrentlyFocusableInternal(elem)) {
+ list.push(elem);
}
}
- function moveFocus(sourceElement, container, focusableSelector, offset) {
- const elems = container.querySelectorAll(focusableSelector);
- const list = [];
- let i;
- let length;
- let elem;
+ let currentIndex = -1;
- for (i = 0, length = elems.length; i < length; i++) {
- elem = elems[i];
+ for (i = 0, length = list.length; i < length; i++) {
+ elem = list[i];
- if (isCurrentlyFocusableInternal(elem)) {
- list.push(elem);
- }
- }
-
- let currentIndex = -1;
-
- for (i = 0, length = list.length; i < length; i++) {
- elem = list[i];
-
- if (sourceElement === elem || elem.contains(sourceElement)) {
- currentIndex = i;
- break;
- }
- }
-
- if (currentIndex === -1) {
- return;
- }
-
- let newIndex = currentIndex + offset;
- newIndex = Math.max(0, newIndex);
- newIndex = Math.min(newIndex, list.length - 1);
-
- const newElem = list[newIndex];
- if (newElem) {
- focus(newElem);
+ if (sourceElement === elem || elem.contains(sourceElement)) {
+ currentIndex = i;
+ break;
}
}
-/* eslint-enable indent */
+ if (currentIndex === -1) {
+ return;
+ }
+
+ let newIndex = currentIndex + offset;
+ newIndex = Math.max(0, newIndex);
+ newIndex = Math.min(newIndex, list.length - 1);
+
+ const newElem = list[newIndex];
+ if (newElem) {
+ focus(newElem);
+ }
+}
export default {
autoFocus: autoFocus,
diff --git a/src/components/groupedcards.js b/src/components/groupedcards.js
index 295c3170cc..a2f7b757e0 100644
--- a/src/components/groupedcards.js
+++ b/src/components/groupedcards.js
@@ -1,47 +1,43 @@
-/* eslint-disable indent */
-
import dom from '../scripts/dom';
import { appRouter } from './appRouter';
import Dashboard from '../utils/dashboard';
import ServerConnections from './ServerConnections';
- function onGroupedCardClick(e, card) {
- const itemId = card.getAttribute('data-id');
- const serverId = card.getAttribute('data-serverid');
- const apiClient = ServerConnections.getApiClient(serverId);
- const userId = apiClient.getCurrentUserId();
- const playedIndicator = card.querySelector('.playedIndicator');
- const playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null;
- const options = {
- Limit: parseInt(playedIndicatorHtml || '10', 10),
- Fields: 'PrimaryImageAspectRatio,DateCreated',
- ParentId: itemId,
- GroupItems: false
- };
- const actionableParent = dom.parentWithTag(e.target, ['A', 'BUTTON', 'INPUT']);
+function onGroupedCardClick(e, card) {
+ const itemId = card.getAttribute('data-id');
+ const serverId = card.getAttribute('data-serverid');
+ const apiClient = ServerConnections.getApiClient(serverId);
+ const userId = apiClient.getCurrentUserId();
+ const playedIndicator = card.querySelector('.playedIndicator');
+ const playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null;
+ const options = {
+ Limit: parseInt(playedIndicatorHtml || '10', 10),
+ Fields: 'PrimaryImageAspectRatio,DateCreated',
+ ParentId: itemId,
+ GroupItems: false
+ };
+ const actionableParent = dom.parentWithTag(e.target, ['A', 'BUTTON', 'INPUT']);
- if (!actionableParent || actionableParent.classList.contains('cardContent')) {
- apiClient.getJSON(apiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
- if (items.length === 1) {
- appRouter.showItem(items[0]);
- return;
- }
+ if (!actionableParent || actionableParent.classList.contains('cardContent')) {
+ apiClient.getJSON(apiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
+ if (items.length === 1) {
+ appRouter.showItem(items[0]);
+ return;
+ }
- const url = 'details?id=' + itemId + '&serverId=' + serverId;
- Dashboard.navigate(url);
- });
- e.stopPropagation();
- e.preventDefault();
- return false;
- }
+ const url = 'details?id=' + itemId + '&serverId=' + serverId;
+ Dashboard.navigate(url);
+ });
+ e.stopPropagation();
+ e.preventDefault();
+ return false;
}
+}
- export default function onItemsContainerClick(e) {
- const groupedCard = dom.parentWithClass(e.target, 'groupedCard');
+export default function onItemsContainerClick(e) {
+ const groupedCard = dom.parentWithClass(e.target, 'groupedCard');
- if (groupedCard) {
- onGroupedCardClick(e, groupedCard);
- }
+ if (groupedCard) {
+ onGroupedCardClick(e, groupedCard);
}
-
-/* eslint-enable indent */
+}
diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js
index a28a18438c..64bc69a810 100644
--- a/src/components/homeScreenSettings/homeScreenSettings.js
+++ b/src/components/homeScreenSettings/homeScreenSettings.js
@@ -14,498 +14,494 @@ import ServerConnections from '../ServerConnections';
import toast from '../toast/toast';
import template from './homeScreenSettings.template.html';
-/* eslint-disable indent */
+const numConfigurableSections = 7;
- const numConfigurableSections = 7;
+function renderViews(page, user, result) {
+ let folderHtml = '';
- function renderViews(page, user, result) {
- let folderHtml = '';
+ folderHtml += '';
+ folderHtml += result.map(i => {
+ let currentHtml = '';
- folderHtml += '
';
+ page.querySelector('.folderGroupList').innerHTML = folderHtml;
+}
- page.querySelector('.folderGroupList').innerHTML = folderHtml;
+function getLandingScreenOptions(type) {
+ const list = [];
+
+ if (type === 'movies') {
+ list.push({
+ name: globalize.translate('Movies'),
+ value: 'movies',
+ isDefault: true
+ });
+ list.push({
+ name: globalize.translate('Suggestions'),
+ value: 'suggestions'
+ });
+ list.push({
+ name: globalize.translate('Trailers'),
+ value: 'trailers'
+ });
+ list.push({
+ name: globalize.translate('Favorites'),
+ value: 'favorites'
+ });
+ list.push({
+ name: globalize.translate('Collections'),
+ value: 'collections'
+ });
+ list.push({
+ name: globalize.translate('Genres'),
+ value: 'genres'
+ });
+ } else if (type === 'tvshows') {
+ list.push({
+ name: globalize.translate('Shows'),
+ value: 'shows',
+ isDefault: true
+ });
+ list.push({
+ name: globalize.translate('Suggestions'),
+ value: 'suggestions'
+ });
+ list.push({
+ name: globalize.translate('TabUpcoming'),
+ value: 'upcoming'
+ });
+ list.push({
+ name: globalize.translate('Genres'),
+ value: 'genres'
+ });
+ list.push({
+ name: globalize.translate('TabNetworks'),
+ value: 'networks'
+ });
+ list.push({
+ name: globalize.translate('Episodes'),
+ value: 'episodes'
+ });
+ } else if (type === 'music') {
+ list.push({
+ name: globalize.translate('Albums'),
+ value: 'albums',
+ isDefault: true
+ });
+ list.push({
+ name: globalize.translate('Suggestions'),
+ value: 'suggestions'
+ });
+ list.push({
+ name: globalize.translate('HeaderAlbumArtists'),
+ value: 'albumartists'
+ });
+ list.push({
+ name: globalize.translate('Artists'),
+ value: 'artists'
+ });
+ list.push({
+ name: globalize.translate('Playlists'),
+ value: 'playlists'
+ });
+ list.push({
+ name: globalize.translate('Songs'),
+ value: 'songs'
+ });
+ list.push({
+ name: globalize.translate('Genres'),
+ value: 'genres'
+ });
+ } else if (type === 'livetv') {
+ list.push({
+ name: globalize.translate('Programs'),
+ value: 'programs',
+ isDefault: true
+ });
+ list.push({
+ name: globalize.translate('Guide'),
+ value: 'guide'
+ });
+ list.push({
+ name: globalize.translate('Channels'),
+ value: 'channels'
+ });
+ list.push({
+ name: globalize.translate('Recordings'),
+ value: 'recordings'
+ });
+ list.push({
+ name: globalize.translate('Schedule'),
+ value: 'schedule'
+ });
+ list.push({
+ name: globalize.translate('Series'),
+ value: 'series'
+ });
}
- function getLandingScreenOptions(type) {
- const list = [];
+ return list;
+}
- if (type === 'movies') {
- list.push({
- name: globalize.translate('Movies'),
- value: 'movies',
- isDefault: true
- });
- list.push({
- name: globalize.translate('Suggestions'),
- value: 'suggestions'
- });
- list.push({
- name: globalize.translate('Trailers'),
- value: 'trailers'
- });
- list.push({
- name: globalize.translate('Favorites'),
- value: 'favorites'
- });
- list.push({
- name: globalize.translate('Collections'),
- value: 'collections'
- });
- list.push({
- name: globalize.translate('Genres'),
- value: 'genres'
- });
- } else if (type === 'tvshows') {
- list.push({
- name: globalize.translate('Shows'),
- value: 'shows',
- isDefault: true
- });
- list.push({
- name: globalize.translate('Suggestions'),
- value: 'suggestions'
- });
- list.push({
- name: globalize.translate('TabUpcoming'),
- value: 'upcoming'
- });
- list.push({
- name: globalize.translate('Genres'),
- value: 'genres'
- });
- list.push({
- name: globalize.translate('TabNetworks'),
- value: 'networks'
- });
- list.push({
- name: globalize.translate('Episodes'),
- value: 'episodes'
- });
- } else if (type === 'music') {
- list.push({
- name: globalize.translate('Albums'),
- value: 'albums',
- isDefault: true
- });
- list.push({
- name: globalize.translate('Suggestions'),
- value: 'suggestions'
- });
- list.push({
- name: globalize.translate('HeaderAlbumArtists'),
- value: 'albumartists'
- });
- list.push({
- name: globalize.translate('Artists'),
- value: 'artists'
- });
- list.push({
- name: globalize.translate('Playlists'),
- value: 'playlists'
- });
- list.push({
- name: globalize.translate('Songs'),
- value: 'songs'
- });
- list.push({
- name: globalize.translate('Genres'),
- value: 'genres'
- });
- } else if (type === 'livetv') {
- list.push({
- name: globalize.translate('Programs'),
- value: 'programs',
- isDefault: true
- });
- list.push({
- name: globalize.translate('Guide'),
- value: 'guide'
- });
- list.push({
- name: globalize.translate('Channels'),
- value: 'channels'
- });
- list.push({
- name: globalize.translate('Recordings'),
- value: 'recordings'
- });
- list.push({
- name: globalize.translate('Schedule'),
- value: 'schedule'
- });
- list.push({
- name: globalize.translate('Series'),
- value: 'series'
- });
+function getLandingScreenOptionsHtml(type, userValue) {
+ return getLandingScreenOptions(type).map(o => {
+ const selected = userValue === o.value || (o.isDefault && !userValue);
+ const selectedHtml = selected ? ' selected' : '';
+ const optionValue = o.isDefault ? '' : o.value;
+
+ return ``;
+ }).join('');
+}
+
+function renderViewOrder(context, user, result) {
+ let html = '';
+
+ html += result.Items.map((view) => {
+ let currentHtml = '';
+
+ currentHtml += `';
- folderHtml += result.map(i => {
- let currentHtml = '';
+ const id = `chkGroupFolder${i.Id}`;
- const id = `chkGroupFolder${i.Id}`;
+ const isChecked = user.Configuration.GroupedFolders.includes(i.Id);
- const isChecked = user.Configuration.GroupedFolders.includes(i.Id);
+ const checkedHtml = isChecked ? ' checked="checked"' : '';
- const checkedHtml = isChecked ? ' checked="checked"' : '';
+ currentHtml += '';
- currentHtml += '';
+ return currentHtml;
+ }).join('');
- return currentHtml;
- }).join('');
+ folderHtml += '
';
- folderHtml += '`;
+
+ currentHtml += '';
+
+ currentHtml += '
';
+
+ return currentHtml;
+ }).join('');
+
+ context.querySelector('.viewOrderList').innerHTML = html;
+}
+
+function updateHomeSectionValues(context, userSettings) {
+ for (let i = 1; i <= 7; i++) {
+ const select = context.querySelector(`#selectHomeSection${i}`);
+ const defaultValue = homeSections.getDefaultSection(i - 1);
+
+ const option = select.querySelector(`option[value=${defaultValue}]`) || select.querySelector('option[value=""]');
+
+ const userValue = userSettings.get(`homesection${i - 1}`);
+
+ option.value = '';
+
+ if (userValue === defaultValue || !userValue) {
+ select.value = '';
+ } else {
+ select.value = userValue;
}
-
- return list;
}
- function getLandingScreenOptionsHtml(type, userValue) {
- return getLandingScreenOptions(type).map(o => {
- const selected = userValue === o.value || (o.isDefault && !userValue);
- const selectedHtml = selected ? ' selected' : '';
- const optionValue = o.isDefault ? '' : o.value;
+ context.querySelector('.selectTVHomeScreen').value = userSettings.get('tvhome') || '';
+}
- return ``;
- }).join('');
+function getPerLibrarySettingsHtml(item, user, userSettings) {
+ let html = '';
+
+ let isChecked;
+
+ if (item.Type === 'Channel' || item.CollectionType === 'boxsets' || item.CollectionType === 'playlists') {
+ isChecked = !(user.Configuration.MyMediaExcludes || []).includes(item.Id);
+ html += '';
+
+ currentHtml += '
';
+
+ currentHtml += ``;
+ currentHtml += ``;
+
+ currentHtml += '';
+ currentHtml += escapeHtml(view.Name);
+ currentHtml += '
';
+
+ currentHtml += '';
+ html += '';
+ html += '
';
}
- function renderViewOrder(context, user, result) {
- let html = '';
-
- html += result.Items.map((view) => {
- let currentHtml = '';
-
- currentHtml += ``;
-
- currentHtml += '';
-
- currentHtml += '
';
-
- return currentHtml;
- }).join('');
-
- context.querySelector('.viewOrderList').innerHTML = html;
+ const excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels'];
+ if (!excludeFromLatest.includes(item.CollectionType || '')) {
+ isChecked = !user.Configuration.LatestItemsExcludes.includes(item.Id);
+ html += '';
}
- function updateHomeSectionValues(context, userSettings) {
- for (let i = 1; i <= 7; i++) {
- const select = context.querySelector(`#selectHomeSection${i}`);
- const defaultValue = homeSections.getDefaultSection(i - 1);
+ if (html) {
+ html = `';
-
- currentHtml += '
';
-
- currentHtml += ``;
- currentHtml += ``;
-
- currentHtml += '';
- currentHtml += escapeHtml(view.Name);
- currentHtml += '
';
-
- currentHtml += '${html}
`;
+ }
- const option = select.querySelector(`option[value=${defaultValue}]`) || select.querySelector('option[value=""]');
+ if (item.CollectionType === 'movies' || item.CollectionType === 'tvshows' || item.CollectionType === 'music' || item.CollectionType === 'livetv') {
+ const idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id;
+ html += '';
+ html += `';
+ html += '
';
+ }
+
+ if (html) {
+ let prefix = '';
+ prefix += '';
+
+ prefix += '
';
+ }
+
+ return html;
+}
+
+function renderPerLibrarySettings(context, user, userViews, userSettings) {
+ const elem = context.querySelector('.perLibrarySettings');
+ let html = '';
+
+ for (let i = 0, length = userViews.length; i < length; i++) {
+ html += getPerLibrarySettingsHtml(userViews[i], user, userSettings);
+ }
+
+ elem.innerHTML = html;
+}
+
+function loadForm(context, user, userSettings, apiClient) {
+ context.querySelector('.chkHidePlayedFromLatest').checked = user.Configuration.HidePlayedInLatest || false;
+
+ updateHomeSectionValues(context, userSettings);
+
+ const promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id);
+ const promise2 = apiClient.getJSON(apiClient.getUrl(`Users/${user.Id}/GroupingOptions`));
+
+ Promise.all([promise1, promise2]).then(responses => {
+ renderViewOrder(context, user, responses[0]);
+
+ renderPerLibrarySettings(context, user, responses[0].Items, userSettings);
+
+ renderViews(context, user, responses[1]);
+
+ loading.hide();
+ });
+}
+
+function onSectionOrderListClick(e) {
+ const target = dom.parentWithClass(e.target, 'btnViewItemMove');
+
+ if (target) {
+ const viewItem = dom.parentWithClass(target, 'viewItem');
+
+ if (viewItem) {
+ if (target.classList.contains('btnViewItemDown')) {
+ const next = viewItem.nextSibling;
+
+ if (next) {
+ viewItem.parentNode.removeChild(viewItem);
+ next.parentNode.insertBefore(viewItem, next.nextSibling);
+ focusManager.focus(e.target);
+ }
} else {
- select.value = userValue;
+ const prev = viewItem.previousSibling;
+
+ if (prev) {
+ viewItem.parentNode.removeChild(viewItem);
+ prev.parentNode.insertBefore(viewItem, prev);
+ focusManager.focus(e.target);
+ }
}
}
+ }
+}
- context.querySelector('.selectTVHomeScreen').value = userSettings.get('tvhome') || '';
+function getCheckboxItems(selector, context, isChecked) {
+ const inputs = context.querySelectorAll(selector);
+ const list = [];
+
+ for (let i = 0, length = inputs.length; i < length; i++) {
+ if (inputs[i].checked === isChecked) {
+ list.push(inputs[i]);
+ }
}
- function getPerLibrarySettingsHtml(item, user, userSettings) {
- let html = '';
+ return list;
+}
- let isChecked;
+function saveUser(context, user, userSettingsInstance, apiClient) {
+ user.Configuration.HidePlayedInLatest = context.querySelector('.chkHidePlayedFromLatest').checked;
- if (item.Type === 'Channel' || item.CollectionType === 'boxsets' || item.CollectionType === 'playlists') {
- isChecked = !(user.Configuration.MyMediaExcludes || []).includes(item.Id);
- html += ''; + prefix += escapeHtml(item.Name); + prefix += '
'; + + html = prefix + html; + html += '';
- html += '';
- html += '
';
- }
+ user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(i => {
+ return i.getAttribute('data-folderid');
+ });
- const excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels'];
- if (!excludeFromLatest.includes(item.CollectionType || '')) {
- isChecked = !user.Configuration.LatestItemsExcludes.includes(item.Id);
- html += '';
- }
+ user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(i => {
+ return i.getAttribute('data-folderid');
+ });
- if (html) {
- html = `${html}
`;
- }
+ user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(i => {
+ return i.getAttribute('data-folderid');
+ });
- if (item.CollectionType === 'movies' || item.CollectionType === 'tvshows' || item.CollectionType === 'music' || item.CollectionType === 'livetv') {
- const idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id;
- html += '';
- html += `';
- html += '
';
- }
-
- if (html) {
- let prefix = '';
- prefix += '';
-
- prefix += '
';
- }
-
- return html;
+ const viewItems = context.querySelectorAll('.viewItem');
+ const orderedViews = [];
+ let i;
+ let length;
+ for (i = 0, length = viewItems.length; i < length; i++) {
+ orderedViews.push(viewItems[i].getAttribute('data-viewid'));
}
- function renderPerLibrarySettings(context, user, userViews, userSettings) {
- const elem = context.querySelector('.perLibrarySettings');
- let html = '';
+ user.Configuration.OrderedViews = orderedViews;
- for (let i = 0, length = userViews.length; i < length; i++) {
- html += getPerLibrarySettingsHtml(userViews[i], user, userSettings);
- }
+ userSettingsInstance.set('tvhome', context.querySelector('.selectTVHomeScreen').value);
- elem.innerHTML = html;
+ userSettingsInstance.set('homesection0', context.querySelector('#selectHomeSection1').value);
+ userSettingsInstance.set('homesection1', context.querySelector('#selectHomeSection2').value);
+ userSettingsInstance.set('homesection2', context.querySelector('#selectHomeSection3').value);
+ userSettingsInstance.set('homesection3', context.querySelector('#selectHomeSection4').value);
+ userSettingsInstance.set('homesection4', context.querySelector('#selectHomeSection5').value);
+ userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value);
+ userSettingsInstance.set('homesection6', context.querySelector('#selectHomeSection7').value);
+
+ const selectLandings = context.querySelectorAll('.selectLanding');
+ for (i = 0, length = selectLandings.length; i < length; i++) {
+ const selectLanding = selectLandings[i];
+ userSettingsInstance.set(`landing-${selectLanding.getAttribute('data-folderid')}`, selectLanding.value);
}
- function loadForm(context, user, userSettings, apiClient) {
- context.querySelector('.chkHidePlayedFromLatest').checked = user.Configuration.HidePlayedInLatest || false;
+ return apiClient.updateUserConfiguration(user.Id, user.Configuration);
+}
- updateHomeSectionValues(context, userSettings);
+function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
+ loading.show();
- const promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id);
- const promise2 = apiClient.getJSON(apiClient.getUrl(`Users/${user.Id}/GroupingOptions`));
-
- Promise.all([promise1, promise2]).then(responses => {
- renderViewOrder(context, user, responses[0]);
-
- renderPerLibrarySettings(context, user, responses[0].Items, userSettings);
-
- renderViews(context, user, responses[1]);
+ apiClient.getUser(userId).then(user => {
+ saveUser(context, user, userSettings, apiClient).then(() => {
+ loading.hide();
+ if (enableSaveConfirmation) {
+ toast(globalize.translate('SettingsSaved'));
+ }
+ Events.trigger(instance, 'saved');
+ }, () => {
loading.hide();
});
+ });
+}
+
+function onSubmit(e) {
+ const self = this;
+ const apiClient = ServerConnections.getApiClient(self.options.serverId);
+ const userId = self.options.userId;
+ const userSettings = self.options.userSettings;
+
+ userSettings.setUserInfo(userId, apiClient).then(() => {
+ const enableSaveConfirmation = self.options.enableSaveConfirmation;
+ save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
+ });
+
+ // Disable default form submission
+ if (e) {
+ e.preventDefault();
+ }
+ return false;
+}
+
+function onChange(e) {
+ const chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia');
+ if (!chkIncludeInMyMedia) {
+ return;
}
- function onSectionOrderListClick(e) {
- const target = dom.parentWithClass(e.target, 'btnViewItemMove');
-
- if (target) {
- const viewItem = dom.parentWithClass(target, 'viewItem');
-
- if (viewItem) {
- if (target.classList.contains('btnViewItemDown')) {
- const next = viewItem.nextSibling;
-
- if (next) {
- viewItem.parentNode.removeChild(viewItem);
- next.parentNode.insertBefore(viewItem, next.nextSibling);
- focusManager.focus(e.target);
- }
- } else {
- const prev = viewItem.previousSibling;
-
- if (prev) {
- viewItem.parentNode.removeChild(viewItem);
- prev.parentNode.insertBefore(viewItem, prev);
- focusManager.focus(e.target);
- }
- }
- }
+ const section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection');
+ const fldIncludeInLatest = section.querySelector('.fldIncludeInLatest');
+ if (fldIncludeInLatest) {
+ if (chkIncludeInMyMedia.checked) {
+ fldIncludeInLatest.classList.remove('hide');
+ } else {
+ fldIncludeInLatest.classList.add('hide');
}
}
+}
- function getCheckboxItems(selector, context, isChecked) {
- const inputs = context.querySelectorAll(selector);
- const list = [];
-
- for (let i = 0, length = inputs.length; i < length; i++) {
- if (inputs[i].checked === isChecked) {
- list.push(inputs[i]);
- }
- }
-
- return list;
+function embed(options, self) {
+ let workingTemplate = template;
+ for (let i = 1; i <= numConfigurableSections; i++) {
+ workingTemplate = workingTemplate.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i));
}
- function saveUser(context, user, userSettingsInstance, apiClient) {
- user.Configuration.HidePlayedInLatest = context.querySelector('.chkHidePlayedFromLatest').checked;
+ options.element.innerHTML = globalize.translateHtml(workingTemplate, 'core');
- user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(i => {
- return i.getAttribute('data-folderid');
- });
+ options.element.querySelector('.viewOrderList').addEventListener('click', onSectionOrderListClick);
+ options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
+ options.element.addEventListener('change', onChange);
- user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(i => {
- return i.getAttribute('data-folderid');
- });
-
- user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(i => {
- return i.getAttribute('data-folderid');
- });
-
- const viewItems = context.querySelectorAll('.viewItem');
- const orderedViews = [];
- let i;
- let length;
- for (i = 0, length = viewItems.length; i < length; i++) {
- orderedViews.push(viewItems[i].getAttribute('data-viewid'));
- }
-
- user.Configuration.OrderedViews = orderedViews;
-
- userSettingsInstance.set('tvhome', context.querySelector('.selectTVHomeScreen').value);
-
- userSettingsInstance.set('homesection0', context.querySelector('#selectHomeSection1').value);
- userSettingsInstance.set('homesection1', context.querySelector('#selectHomeSection2').value);
- userSettingsInstance.set('homesection2', context.querySelector('#selectHomeSection3').value);
- userSettingsInstance.set('homesection3', context.querySelector('#selectHomeSection4').value);
- userSettingsInstance.set('homesection4', context.querySelector('#selectHomeSection5').value);
- userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value);
- userSettingsInstance.set('homesection6', context.querySelector('#selectHomeSection7').value);
-
- const selectLandings = context.querySelectorAll('.selectLanding');
- for (i = 0, length = selectLandings.length; i < length; i++) {
- const selectLanding = selectLandings[i];
- userSettingsInstance.set(`landing-${selectLanding.getAttribute('data-folderid')}`, selectLanding.value);
- }
-
- return apiClient.updateUserConfiguration(user.Id, user.Configuration);
+ if (options.enableSaveButton) {
+ options.element.querySelector('.btnSave').classList.remove('hide');
}
- function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
+ if (layoutManager.tv) {
+ options.element.querySelector('.selectTVHomeScreenContainer').classList.remove('hide');
+ } else {
+ options.element.querySelector('.selectTVHomeScreenContainer').classList.add('hide');
+ }
+
+ self.loadData(options.autoFocus);
+}
+
+class HomeScreenSettings {
+ constructor(options) {
+ this.options = options;
+ embed(options, this);
+ }
+
+ loadData(autoFocus) {
+ const self = this;
+ const context = self.options.element;
+
loading.show();
- apiClient.getUser(userId).then(user => {
- saveUser(context, user, userSettings, apiClient).then(() => {
- loading.hide();
- if (enableSaveConfirmation) {
- toast(globalize.translate('SettingsSaved'));
- }
-
- Events.trigger(instance, 'saved');
- }, () => {
- loading.hide();
- });
- });
- }
-
- function onSubmit(e) {
- const self = this;
- const apiClient = ServerConnections.getApiClient(self.options.serverId);
const userId = self.options.userId;
+ const apiClient = ServerConnections.getApiClient(self.options.serverId);
const userSettings = self.options.userSettings;
- userSettings.setUserInfo(userId, apiClient).then(() => {
- const enableSaveConfirmation = self.options.enableSaveConfirmation;
- save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
- });
+ apiClient.getUser(userId).then(user => {
+ userSettings.setUserInfo(userId, apiClient).then(() => {
+ self.dataLoaded = true;
- // Disable default form submission
- if (e) {
- e.preventDefault();
- }
- return false;
- }
+ loadForm(context, user, userSettings, apiClient);
- function onChange(e) {
- const chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia');
- if (!chkIncludeInMyMedia) {
- return;
- }
-
- const section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection');
- const fldIncludeInLatest = section.querySelector('.fldIncludeInLatest');
- if (fldIncludeInLatest) {
- if (chkIncludeInMyMedia.checked) {
- fldIncludeInLatest.classList.remove('hide');
- } else {
- fldIncludeInLatest.classList.add('hide');
- }
- }
- }
-
- function embed(options, self) {
- let workingTemplate = template;
- for (let i = 1; i <= numConfigurableSections; i++) {
- workingTemplate = workingTemplate.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i));
- }
-
- options.element.innerHTML = globalize.translateHtml(workingTemplate, 'core');
-
- options.element.querySelector('.viewOrderList').addEventListener('click', onSectionOrderListClick);
- options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
- options.element.addEventListener('change', onChange);
-
- if (options.enableSaveButton) {
- options.element.querySelector('.btnSave').classList.remove('hide');
- }
-
- if (layoutManager.tv) {
- options.element.querySelector('.selectTVHomeScreenContainer').classList.remove('hide');
- } else {
- options.element.querySelector('.selectTVHomeScreenContainer').classList.add('hide');
- }
-
- self.loadData(options.autoFocus);
- }
-
- class HomeScreenSettings {
- constructor(options) {
- this.options = options;
- embed(options, this);
- }
-
- loadData(autoFocus) {
- const self = this;
- const context = self.options.element;
-
- loading.show();
-
- const userId = self.options.userId;
- const apiClient = ServerConnections.getApiClient(self.options.serverId);
- const userSettings = self.options.userSettings;
-
- apiClient.getUser(userId).then(user => {
- userSettings.setUserInfo(userId, apiClient).then(() => {
- self.dataLoaded = true;
-
- loadForm(context, user, userSettings, apiClient);
-
- if (autoFocus) {
- focusManager.autoFocus(context);
- }
- });
+ if (autoFocus) {
+ focusManager.autoFocus(context);
+ }
});
- }
-
- submit() {
- onSubmit.call(this);
- }
-
- destroy() {
- this.options = null;
- }
+ });
}
-/* eslint-enable indent */
+ submit() {
+ onSubmit.call(this);
+ }
+
+ destroy() {
+ this.options = null;
+ }
+}
export default HomeScreenSettings;
diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js
index 86e154f7b6..5cf83ced94 100644
--- a/src/components/homesections/homesections.js
+++ b/src/components/homesections/homesections.js
@@ -13,733 +13,731 @@ import './homesections.scss';
import Dashboard from '../../utils/dashboard';
import ServerConnections from '../ServerConnections';
-/* eslint-disable indent */
+export function getDefaultSection(index) {
+ switch (index) {
+ case 0:
+ return 'smalllibrarytiles';
+ case 1:
+ return 'resume';
+ case 2:
+ return 'resumeaudio';
+ case 3:
+ return 'resumebook';
+ case 4:
+ return 'livetv';
+ case 5:
+ return 'nextup';
+ case 6:
+ return 'latestmedia';
+ case 7:
+ return 'none';
+ default:
+ return '';
+ }
+}
- export function getDefaultSection(index) {
- switch (index) {
- case 0:
- return 'smalllibrarytiles';
- case 1:
- return 'resume';
- case 2:
- return 'resumeaudio';
- case 3:
- return 'resumebook';
- case 4:
- return 'livetv';
- case 5:
- return 'nextup';
- case 6:
- return 'latestmedia';
- case 7:
- return 'none';
- default:
- return '';
+function getAllSectionsToShow(userSettings, sectionCount) {
+ const sections = [];
+ for (let i = 0, length = sectionCount; i < length; i++) {
+ let section = userSettings.get('homesection' + i) || getDefaultSection(i);
+ if (section === 'folders') {
+ section = getDefaultSection(0);
}
+
+ sections.push(section);
}
- function getAllSectionsToShow(userSettings, sectionCount) {
- const sections = [];
- for (let i = 0, length = sectionCount; i < length; i++) {
- let section = userSettings.get('homesection' + i) || getDefaultSection(i);
- if (section === 'folders') {
- section = getDefaultSection(0);
+ return sections;
+}
+
+export function loadSections(elem, apiClient, user, userSettings) {
+ return getUserViews(apiClient, user.Id).then(function (userViews) {
+ let html = '';
+
+ if (userViews.length) {
+ const sectionCount = 7;
+ for (let i = 0; i < sectionCount; i++) {
+ html += '';
}
- sections.push(section);
- }
+ elem.innerHTML = html;
+ elem.classList.add('homeSectionsContainer');
- return sections;
- }
+ const promises = [];
+ const sections = getAllSectionsToShow(userSettings, sectionCount);
+ for (let i = 0; i < sections.length; i++) {
+ promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i));
+ }
- export function loadSections(elem, apiClient, user, userSettings) {
- return getUserViews(apiClient, user.Id).then(function (userViews) {
- let html = '';
-
- if (userViews.length) {
- const sectionCount = 7;
- for (let i = 0; i < sectionCount; i++) {
- html += '';
- }
-
- elem.innerHTML = html;
- elem.classList.add('homeSectionsContainer');
-
- const promises = [];
- const sections = getAllSectionsToShow(userSettings, sectionCount);
- for (let i = 0; i < sections.length; i++) {
- promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i));
- }
-
- return Promise.all(promises).then(function () {
- return resume(elem, {
- refresh: true
- });
+ return Promise.all(promises).then(function () {
+ return resume(elem, {
+ refresh: true
});
- } else {
- let noLibDescription;
- if (user['Policy'] && user['Policy']['IsAdministrator']) {
- noLibDescription = globalize.translate('NoCreatedLibraries', ''; - prefix += escapeHtml(item.Name); - prefix += '
'; - - html = prefix + html; - html += '', ''); - } else { - noLibDescription = globalize.translate('AskAdminToCreateLibrary'); - } - - html += '
';
- html += '
';
- elem.innerHTML = html;
-
- const createNowLink = elem.querySelector('#button-createLibrary');
- if (createNowLink) {
- createNowLink.addEventListener('click', function () {
- Dashboard.navigate('library.html');
- });
- }
- }
- });
- }
-
- export function destroySections(elem) {
- const elems = elem.querySelectorAll('.itemsContainer');
- for (let i = 0; i < elems.length; i++) {
- elems[i].fetchData = null;
- elems[i].parentContainer = null;
- elems[i].getItemsHtml = null;
- }
-
- elem.innerHTML = '';
- }
-
- export function pause(elem) {
- const elems = elem.querySelectorAll('.itemsContainer');
- for (let i = 0; i < elems.length; i++) {
- elems[i].pause();
- }
- }
-
- export function resume(elem, options) {
- const elems = elem.querySelectorAll('.itemsContainer');
- const promises = [];
-
- for (let i = 0, length = elems.length; i < length; i++) {
- promises.push(elems[i].resume(options));
- }
-
- return Promise.all(promises);
- }
-
- function loadSection(page, apiClient, user, userSettings, userViews, allSections, index) {
- const section = allSections[index];
- const elem = page.querySelector('.section' + index);
-
- if (section === 'latestmedia') {
- loadRecentlyAdded(elem, apiClient, user, userViews);
- } else if (section === 'librarytiles' || section === 'smalllibrarytiles' || section === 'smalllibrarytiles-automobile' || section === 'librarytiles-automobile') {
- loadLibraryTiles(elem, apiClient, user, userSettings, 'smallBackdrop', userViews);
- } else if (section === 'librarybuttons') {
- loadlibraryButtons(elem, apiClient, user, userSettings, userViews);
- } else if (section === 'resume') {
- return loadResume(elem, apiClient, 'HeaderContinueWatching', 'Video', userSettings);
- } else if (section === 'resumeaudio') {
- return loadResume(elem, apiClient, 'HeaderContinueListening', 'Audio', userSettings);
- } else if (section === 'activerecordings') {
- loadLatestLiveTvRecordings(elem, true, apiClient);
- } else if (section === 'nextup') {
- loadNextUp(elem, apiClient, userSettings);
- } else if (section === 'onnow' || section === 'livetv') {
- return loadOnNow(elem, apiClient, user);
- } else if (section === 'resumebook') {
- return loadResume(elem, apiClient, 'HeaderContinueReading', 'Book', userSettings);
+ });
} else {
- elem.innerHTML = '';
- return Promise.resolve();
+ let noLibDescription;
+ if (user['Policy'] && user['Policy']['IsAdministrator']) {
+ noLibDescription = globalize.translate('NoCreatedLibraries', '' + globalize.translate('MessageNothingHere') + '
'; - html += '' + noLibDescription + '
'; - html += '', ''); + } else { + noLibDescription = globalize.translate('AskAdminToCreateLibrary'); + } + + html += '
';
+ html += '
';
+ elem.innerHTML = html;
+
+ const createNowLink = elem.querySelector('#button-createLibrary');
+ if (createNowLink) {
+ createNowLink.addEventListener('click', function () {
+ Dashboard.navigate('library.html');
+ });
+ }
}
+ });
+}
+
+export function destroySections(elem) {
+ const elems = elem.querySelectorAll('.itemsContainer');
+ for (let i = 0; i < elems.length; i++) {
+ elems[i].fetchData = null;
+ elems[i].parentContainer = null;
+ elems[i].getItemsHtml = null;
+ }
+
+ elem.innerHTML = '';
+}
+
+export function pause(elem) {
+ const elems = elem.querySelectorAll('.itemsContainer');
+ for (let i = 0; i < elems.length; i++) {
+ elems[i].pause();
+ }
+}
+
+export function resume(elem, options) {
+ const elems = elem.querySelectorAll('.itemsContainer');
+ const promises = [];
+
+ for (let i = 0, length = elems.length; i < length; i++) {
+ promises.push(elems[i].resume(options));
+ }
+
+ return Promise.all(promises);
+}
+
+function loadSection(page, apiClient, user, userSettings, userViews, allSections, index) {
+ const section = allSections[index];
+ const elem = page.querySelector('.section' + index);
+
+ if (section === 'latestmedia') {
+ loadRecentlyAdded(elem, apiClient, user, userViews);
+ } else if (section === 'librarytiles' || section === 'smalllibrarytiles' || section === 'smalllibrarytiles-automobile' || section === 'librarytiles-automobile') {
+ loadLibraryTiles(elem, apiClient, user, userSettings, 'smallBackdrop', userViews);
+ } else if (section === 'librarybuttons') {
+ loadlibraryButtons(elem, apiClient, user, userSettings, userViews);
+ } else if (section === 'resume') {
+ return loadResume(elem, apiClient, 'HeaderContinueWatching', 'Video', userSettings);
+ } else if (section === 'resumeaudio') {
+ return loadResume(elem, apiClient, 'HeaderContinueListening', 'Audio', userSettings);
+ } else if (section === 'activerecordings') {
+ loadLatestLiveTvRecordings(elem, true, apiClient);
+ } else if (section === 'nextup') {
+ loadNextUp(elem, apiClient, userSettings);
+ } else if (section === 'onnow' || section === 'livetv') {
+ return loadOnNow(elem, apiClient, user);
+ } else if (section === 'resumebook') {
+ return loadResume(elem, apiClient, 'HeaderContinueReading', 'Book', userSettings);
+ } else {
+ elem.innerHTML = '';
return Promise.resolve();
}
+ return Promise.resolve();
+}
- function getUserViews(apiClient, userId) {
- return apiClient.getUserViews({}, userId || apiClient.getCurrentUserId()).then(function (result) {
- return result.Items;
- });
+function getUserViews(apiClient, userId) {
+ return apiClient.getUserViews({}, userId || apiClient.getCurrentUserId()).then(function (result) {
+ return result.Items;
+ });
+}
+
+function enableScrollX() {
+ return true;
+}
+
+function getSquareShape() {
+ return enableScrollX() ? 'overflowSquare' : 'square';
+}
+
+function getThumbShape() {
+ return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+}
+
+function getPortraitShape() {
+ return enableScrollX() ? 'overflowPortrait' : 'portrait';
+}
+
+function getLibraryButtonsHtml(items) {
+ let html = '';
+
+ html += '' + globalize.translate('MessageNothingHere') + '
'; + html += '' + noLibDescription + '
'; + html += '';
+ html += '
';
- function getSquareShape() {
- return enableScrollX() ? 'overflowSquare' : 'square';
- }
+ return html;
+}
- function getThumbShape() {
- return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
- }
+function loadlibraryButtons(elem, apiClient, user, userSettings, userViews) {
+ elem.classList.remove('verticalSection');
+ const html = getLibraryButtonsHtml(userViews);
- function getPortraitShape() {
- return enableScrollX() ? 'overflowPortrait' : 'portrait';
- }
+ elem.innerHTML = html;
+ imageLoader.lazyChildren(elem);
+}
- function getLibraryButtonsHtml(items) {
- let html = '';
+function getFetchLatestItemsFn(serverId, parentId, collectionType) {
+ return function () {
+ const apiClient = ServerConnections.getApiClient(serverId);
+ let limit = 16;
- html += '' + globalize.translate('HeaderMyMedia') + '
'; + + html += '';
+
+ // library card background images
+ for (let i = 0, length = items.length; i < length; i++) {
+ const item = items[i];
+ const icon = imageHelper.getLibraryIcon(item.CollectionType);
+ html += '' + escapeHtml(item.Name) + '';
}
- function enableScrollX() {
- return true;
- }
+ html += '
';
+ html += '';
- html += '
';
-
- return html;
- }
-
- function loadlibraryButtons(elem, apiClient, user, userSettings, userViews) {
- elem.classList.remove('verticalSection');
- const html = getLibraryButtonsHtml(userViews);
-
- elem.innerHTML = html;
- imageLoader.lazyChildren(elem);
- }
-
- function getFetchLatestItemsFn(serverId, parentId, collectionType) {
- return function () {
- const apiClient = ServerConnections.getApiClient(serverId);
- let limit = 16;
-
- if (enableScrollX()) {
- if (collectionType === 'music') {
- limit = 30;
- }
- } else {
- if (collectionType === 'tvshows') {
- limit = 5;
- } else if (collectionType === 'music') {
- limit = 9;
- } else {
- limit = 8;
- }
+ if (enableScrollX()) {
+ if (collectionType === 'music') {
+ limit = 30;
}
-
- const options = {
- Limit: limit,
- Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,Path',
- ImageTypeLimit: 1,
- EnableImageTypes: 'Primary,Backdrop,Thumb',
- ParentId: parentId
- };
-
- return apiClient.getLatestItems(options);
- };
- }
-
- function getLatestItemsHtmlFn(itemType, viewType) {
- return function (items) {
- const cardLayout = false;
- let shape;
- if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') {
- shape = getPortraitShape();
- } else if (viewType === 'music' || viewType === 'homevideos') {
- shape = getSquareShape();
- } else {
- shape = getThumbShape();
- }
-
- return cardBuilder.getCardsHtml({
- items: items,
- shape: shape,
- preferThumb: viewType !== 'movies' && viewType !== 'tvshows' && itemType !== 'Channel' && viewType !== 'music' ? 'auto' : null,
- showUnplayedIndicator: false,
- showChildCountIndicator: true,
- context: 'home',
- overlayText: false,
- centerText: !cardLayout,
- overlayPlayButton: viewType !== 'photos',
- allowBottomPadding: !enableScrollX() && !cardLayout,
- cardLayout: cardLayout,
- showTitle: viewType !== 'photos',
- showYear: viewType === 'movies' || viewType === 'tvshows' || !viewType,
- showParentTitle: viewType === 'music' || viewType === 'tvshows' || !viewType || (cardLayout && (viewType === 'tvshows')),
- lines: 2
- });
- };
- }
-
- function renderLatestSection(elem, apiClient, user, parent) {
- let html = '';
-
- html += '' + globalize.translate('HeaderMyMedia') + '
'; - - html += '';
-
- // library card background images
- for (let i = 0, length = items.length; i < length; i++) {
- const item = items[i];
- const icon = imageHelper.getLibraryIcon(item.CollectionType);
- html += '' + escapeHtml(item.Name) + '';
- }
-
- html += '
';
- html += '';
- if (!layoutManager.tv) {
- html += '';
- html += '
';
+ const options = {
+ Limit: limit,
+ Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,Path',
+ ImageTypeLimit: 1,
+ EnableImageTypes: 'Primary,Backdrop,Thumb',
+ ParentId: parentId
+ };
+
+ return apiClient.getLatestItems(options);
+ };
+}
+
+function getLatestItemsHtmlFn(itemType, viewType) {
+ return function (items) {
+ const cardLayout = false;
+ let shape;
+ if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') {
+ shape = getPortraitShape();
+ } else if (viewType === 'music' || viewType === 'homevideos') {
+ shape = getSquareShape();
+ } else {
+ shape = getThumbShape();
+ }
+
+ return cardBuilder.getCardsHtml({
+ items: items,
+ shape: shape,
+ preferThumb: viewType !== 'movies' && viewType !== 'tvshows' && itemType !== 'Channel' && viewType !== 'music' ? 'auto' : null,
+ showUnplayedIndicator: false,
+ showChildCountIndicator: true,
+ context: 'home',
+ overlayText: false,
+ centerText: !cardLayout,
+ overlayPlayButton: viewType !== 'photos',
+ allowBottomPadding: !enableScrollX() && !cardLayout,
+ cardLayout: cardLayout,
+ showTitle: viewType !== 'photos',
+ showYear: viewType === 'movies' || viewType === 'tvshows' || !viewType,
+ showParentTitle: viewType === 'music' || viewType === 'tvshows' || !viewType || (cardLayout && (viewType === 'tvshows')),
+ lines: 2
+ });
+ };
+}
+
+function renderLatestSection(elem, apiClient, user, parent) {
+ let html = '';
+
+ html += ''; - html += globalize.translate('LatestFromLibrary', escapeHtml(parent.Name)); - html += '
'; - html += ''; - html += ''; } else { - html += '' + globalize.translate('LatestFromLibrary', escapeHtml(parent.Name)) + '
'; + if (collectionType === 'tvshows') { + limit = 5; + } else if (collectionType === 'music') { + limit = 9; + } else { + limit = 8; + } } - html += '';
+ if (!layoutManager.tv) {
+ html += '';
+ html += '
';
+
+ if (enableScrollX()) {
+ html += ''; + html += globalize.translate('LatestFromLibrary', escapeHtml(parent.Name)); + html += '
'; + html += ''; + html += ''; + } else { + html += '' + globalize.translate('LatestFromLibrary', escapeHtml(parent.Name)) + '
'; + } + html += '';
+ html += '
';
+ } else {
+ html += '
';
+
+ elem.innerHTML = html;
+
+ const itemsContainer = elem.querySelector('.itemsContainer');
+ itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType);
+ itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType);
+ itemsContainer.parentContainer = elem;
+}
+
+function loadRecentlyAdded(elem, apiClient, user, userViews) {
+ elem.classList.remove('verticalSection');
+ const excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels'];
+
+ for (let i = 0, length = userViews.length; i < length; i++) {
+ const item = userViews[i];
+ if (user.Configuration.LatestItemsExcludes.indexOf(item.Id) !== -1) {
+ continue;
+ }
+
+ if (excludeViewTypes.indexOf(item.CollectionType || []) !== -1) {
+ continue;
+ }
+
+ const frag = document.createElement('div');
+ frag.classList.add('verticalSection');
+ frag.classList.add('hide');
+ elem.appendChild(frag);
+
+ renderLatestSection(frag, apiClient, user, item);
+ }
+}
+
+export function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews) {
+ let html = '';
+ if (userViews.length) {
+ html += '';
+ }
+
+ if (enableScrollX()) {
+ html += '
';
+ }
+ html += '' + globalize.translate('HeaderMyMedia') + '
'; if (enableScrollX()) { html += '';
html += '
';
} else {
- html += '
';
+ html += '
';
-
- elem.innerHTML = html;
-
- const itemsContainer = elem.querySelector('.itemsContainer');
- itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType);
- itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType);
- itemsContainer.parentContainer = elem;
- }
-
- function loadRecentlyAdded(elem, apiClient, user, userViews) {
- elem.classList.remove('verticalSection');
- const excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels'];
-
- for (let i = 0, length = userViews.length; i < length; i++) {
- const item = userViews[i];
- if (user.Configuration.LatestItemsExcludes.indexOf(item.Id) !== -1) {
- continue;
- }
-
- if (excludeViewTypes.indexOf(item.CollectionType || []) !== -1) {
- continue;
- }
-
- const frag = document.createElement('div');
- frag.classList.add('verticalSection');
- frag.classList.add('hide');
- elem.appendChild(frag);
-
- renderLatestSection(frag, apiClient, user, item);
- }
- }
-
- export function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews) {
- let html = '';
- if (userViews.length) {
- html += '';
}
- if (enableScrollX()) {
- html += '
';
- }
- html += '' + globalize.translate('HeaderMyMedia') + '
'; - if (enableScrollX()) { - html += '';
- html += '
';
}
- function loadOnNow(elem, apiClient, user) {
- if (!user.Policy.EnableLiveTvAccess) {
- return Promise.resolve();
- }
+ elem.innerHTML = html;
+ imageLoader.lazyChildren(elem);
+}
+const dataMonitorHints = {
+ 'Audio': 'audioplayback,markplayed',
+ 'Video': 'videoplayback,markplayed'
+};
+
+function loadResume(elem, apiClient, headerText, mediaType, userSettings) {
+ let html = '';
+
+ const dataMonitor = dataMonitorHints[mediaType] || 'markplayed';
+
+ html += '';
- } else {
- html += '
';
- }
-
- elem.innerHTML = html;
- imageLoader.lazyChildren(elem);
- }
-
- const dataMonitorHints = {
- 'Audio': 'audioplayback,markplayed',
- 'Video': 'videoplayback,markplayed'
- };
-
- function loadResume(elem, apiClient, headerText, mediaType, userSettings) {
- let html = '';
-
- const dataMonitor = dataMonitorHints[mediaType] || 'markplayed';
-
- html += '';
- }
-
- html += cardBuilder.getCardsHtml({
- items: userViews,
- shape: getThumbShape(),
- showTitle: true,
- centerText: true,
- overlayText: false,
- lazy: true,
- transition: false,
- allowBottomPadding: !enableScrollX()
- });
-
- if (enableScrollX()) {
- html += '
';
- }
- html += '' + globalize.translate(headerText) + '
'; - if (enableScrollX()) { - html += '';
- html += `
';
+ }
+ html += '`;
- } else {
- html += `
';
-
- elem.classList.add('hide');
- elem.innerHTML = html;
-
- const itemsContainer = elem.querySelector('.itemsContainer');
- itemsContainer.fetchData = getItemsToResumeFn(mediaType, apiClient.serverId());
- itemsContainer.getItemsHtml = getItemsToResumeHtmlFn(userSettings.useEpisodeImagesInNextUpAndResume(), mediaType);
- itemsContainer.parentContainer = elem;
- }
-
- function getItemsToResumeFn(mediaType, serverId) {
- return function () {
- const apiClient = ServerConnections.getApiClient(serverId);
-
- const limit = enableScrollX() ? 12 : 5;
-
- const options = {
- Limit: limit,
- Recursive: true,
- Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
- ImageTypeLimit: 1,
- EnableImageTypes: 'Primary,Backdrop,Thumb',
- EnableTotalRecordCount: false,
- MediaTypes: mediaType
- };
-
- return apiClient.getResumableItems(apiClient.getCurrentUserId(), options);
- };
- }
-
- function getItemsToResumeHtmlFn(useEpisodeImages, mediaType) {
- return function (items) {
- const cardLayout = false;
- return cardBuilder.getCardsHtml({
- items: items,
- preferThumb: true,
- inheritThumb: !useEpisodeImages,
- shape: (mediaType === 'Book') ? getPortraitShape() : getThumbShape(),
- overlayText: false,
- showTitle: true,
- showParentTitle: true,
- lazy: true,
- showDetailsMenu: true,
- overlayPlayButton: true,
- context: 'home',
- centerText: !cardLayout,
- allowBottomPadding: false,
- cardLayout: cardLayout,
- showYear: true,
- lines: 2
- });
- };
- }
-
- function getOnNowFetchFn(serverId) {
- return function () {
- const apiClient = ServerConnections.getApiClient(serverId);
- return apiClient.getLiveTvRecommendedPrograms({
- userId: apiClient.getCurrentUserId(),
- IsAiring: true,
- limit: 24,
- ImageTypeLimit: 1,
- EnableImageTypes: 'Primary,Thumb,Backdrop',
- EnableTotalRecordCount: false,
- Fields: 'ChannelInfo,PrimaryImageAspectRatio'
- });
- };
- }
-
- function getOnNowItemsHtml(items) {
- return cardBuilder.getCardsHtml({
- items: items,
- preferThumb: 'auto',
- inheritThumb: false,
- shape: (enableScrollX() ? 'autooverflow' : 'auto'),
- showParentTitleOrTitle: true,
+ html += cardBuilder.getCardsHtml({
+ items: userViews,
+ shape: getThumbShape(),
showTitle: true,
centerText: true,
- coverImage: true,
overlayText: false,
- allowBottomPadding: !enableScrollX(),
- showAirTime: true,
- showChannelName: false,
- showAirDateTime: false,
- showAirEndTime: true,
- defaultShape: getThumbShape(),
- lines: 3,
- overlayPlayButton: true
+ lazy: true,
+ transition: false,
+ allowBottomPadding: !enableScrollX()
});
+
+ if (enableScrollX()) {
+ html += '`;
- }
-
- if (enableScrollX()) {
- html += '
';
- }
- html += '' + globalize.translate(headerText) + '
'; + if (enableScrollX()) { + html += '';
+ html += `
`;
+ } else {
+ html += `
';
+
+ elem.classList.add('hide');
+ elem.innerHTML = html;
+
+ const itemsContainer = elem.querySelector('.itemsContainer');
+ itemsContainer.fetchData = getItemsToResumeFn(mediaType, apiClient.serverId());
+ itemsContainer.getItemsHtml = getItemsToResumeHtmlFn(userSettings.useEpisodeImagesInNextUpAndResume(), mediaType);
+ itemsContainer.parentContainer = elem;
+}
+
+function getItemsToResumeFn(mediaType, serverId) {
+ return function () {
+ const apiClient = ServerConnections.getApiClient(serverId);
+
+ const limit = enableScrollX() ? 12 : 5;
+
+ const options = {
+ Limit: limit,
+ Recursive: true,
+ Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
+ ImageTypeLimit: 1,
+ EnableImageTypes: 'Primary,Backdrop,Thumb',
+ EnableTotalRecordCount: false,
+ MediaTypes: mediaType
+ };
+
+ return apiClient.getResumableItems(apiClient.getCurrentUserId(), options);
+ };
+}
+
+function getItemsToResumeHtmlFn(useEpisodeImages, mediaType) {
+ return function (items) {
+ const cardLayout = false;
+ return cardBuilder.getCardsHtml({
+ items: items,
+ preferThumb: true,
+ inheritThumb: !useEpisodeImages,
+ shape: (mediaType === 'Book') ? getPortraitShape() : getThumbShape(),
+ overlayText: false,
+ showTitle: true,
+ showParentTitle: true,
+ lazy: true,
+ showDetailsMenu: true,
+ overlayPlayButton: true,
+ context: 'home',
+ centerText: !cardLayout,
+ allowBottomPadding: false,
+ cardLayout: cardLayout,
+ showYear: true,
+ lines: 2
+ });
+ };
+}
+
+function getOnNowFetchFn(serverId) {
+ return function () {
+ const apiClient = ServerConnections.getApiClient(serverId);
return apiClient.getLiveTvRecommendedPrograms({
userId: apiClient.getCurrentUserId(),
IsAiring: true,
- limit: 1,
+ limit: 24,
ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Thumb,Backdrop',
EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio'
- }).then(function (result) {
- let html = '';
- if (result.Items.length) {
- elem.classList.remove('padded-left');
- elem.classList.remove('padded-right');
- elem.classList.remove('padded-bottom');
- elem.classList.remove('verticalSection');
-
- html += '`;
+ }
+
+ if (enableScrollX()) {
+ html += '
';
+ }
+ html += '';
- html += '
';
-
- html += '';
- html += '
';
-
- if (enableScrollX()) {
- html += '' + globalize.translate('LiveTV') + '
'; - html += '';
- html += '
';
- html += '';
- } else {
- html += '
';
- }
- html += '';
- }
-
- html += '' + globalize.translate('Programs') + '';
-
- html += '' + globalize.translate('Guide') + '';
-
- html += '' + globalize.translate('Channels') + '';
-
- html += '' + globalize.translate('Recordings') + '';
-
- html += '' + globalize.translate('Schedule') + '';
-
- html += '' + globalize.translate('Series') + '';
-
- html += '
';
- if (enableScrollX()) {
- html += '';
- html += '
';
-
- if (!layoutManager.tv) {
- html += '';
- html += '
';
-
- if (enableScrollX()) {
- html += ''; - html += globalize.translate('HeaderOnNow'); - html += '
'; - html += ''; - html += ''; - } else { - html += '' + globalize.translate('HeaderOnNow') + '
'; - } - html += '';
- html += '
';
-
- elem.innerHTML = html;
-
- const itemsContainer = elem.querySelector('.itemsContainer');
- itemsContainer.parentContainer = elem;
- itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId());
- itemsContainer.getItemsHtml = getOnNowItemsHtml;
- }
});
+ };
+}
+
+function getOnNowItemsHtml(items) {
+ return cardBuilder.getCardsHtml({
+ items: items,
+ preferThumb: 'auto',
+ inheritThumb: false,
+ shape: (enableScrollX() ? 'autooverflow' : 'auto'),
+ showParentTitleOrTitle: true,
+ showTitle: true,
+ centerText: true,
+ coverImage: true,
+ overlayText: false,
+ allowBottomPadding: !enableScrollX(),
+ showAirTime: true,
+ showChannelName: false,
+ showAirDateTime: false,
+ showAirEndTime: true,
+ defaultShape: getThumbShape(),
+ lines: 3,
+ overlayPlayButton: true
+ });
+}
+
+function loadOnNow(elem, apiClient, user) {
+ if (!user.Policy.EnableLiveTvAccess) {
+ return Promise.resolve();
}
- function getNextUpFetchFn(serverId, userSettings) {
- return function () {
- const apiClient = ServerConnections.getApiClient(serverId);
- const oldestDateForNextUp = new Date();
- oldestDateForNextUp.setDate(oldestDateForNextUp.getDate() - userSettings.maxDaysForNextUp());
- return apiClient.getNextUpEpisodes({
- Limit: enableScrollX() ? 24 : 15,
- Fields: 'PrimaryImageAspectRatio,DateCreated,BasicSyncInfo,Path,MediaSourceCount',
- UserId: apiClient.getCurrentUserId(),
- ImageTypeLimit: 1,
- EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
- EnableTotalRecordCount: false,
- DisableFirstEpisode: false,
- NextUpDateCutoff: oldestDateForNextUp.toISOString(),
- EnableRewatching: userSettings.enableRewatchingInNextUp()
- });
- };
- }
-
- function getNextUpItemsHtmlFn(useEpisodeImages) {
- return function (items) {
- const cardLayout = false;
- return cardBuilder.getCardsHtml({
- items: items,
- preferThumb: true,
- inheritThumb: !useEpisodeImages,
- shape: getThumbShape(),
- overlayText: false,
- showTitle: true,
- showParentTitle: true,
- lazy: true,
- overlayPlayButton: true,
- context: 'home',
- centerText: !cardLayout,
- allowBottomPadding: !enableScrollX(),
- cardLayout: cardLayout
- });
- };
- }
-
- function loadNextUp(elem, apiClient, userSettings) {
+ return apiClient.getLiveTvRecommendedPrograms({
+ userId: apiClient.getCurrentUserId(),
+ IsAiring: true,
+ limit: 1,
+ ImageTypeLimit: 1,
+ EnableImageTypes: 'Primary,Thumb,Backdrop',
+ EnableTotalRecordCount: false,
+ Fields: 'ChannelInfo,PrimaryImageAspectRatio'
+ }).then(function (result) {
let html = '';
+ if (result.Items.length) {
+ elem.classList.remove('padded-left');
+ elem.classList.remove('padded-right');
+ elem.classList.remove('padded-bottom');
+ elem.classList.remove('verticalSection');
- html += '';
- } else {
- html += '
';
- html += '';
- }
-
- if (enableScrollX()) {
- html += '
';
- }
-
- html += '';
- if (!layoutManager.tv) {
- html += '';
+ html += '
';
+ html += '
';
+
+ if (enableScrollX()) {
+ html += '' + globalize.translate('LiveTV') + '
'; + html += '';
+ html += '
${html}`; - } - const mediaInfoContent = page.querySelector('#mediaInfoContent'); - mediaInfoContent.innerHTML = html; - - for (const btn of mediaInfoContent.querySelectorAll('.btnCopy')) { - btn.addEventListener('click', () => { - const infoBlock = dom.parentWithClass(btn, 'mediaInfoStream') || dom.parentWithClass(btn, 'mediaInfoSource') || mediaInfoContent; - - copy(infoBlock.textContent).then(() => { - toast(globalize.translate('Copied')); - }).catch(() => { - console.error('Could not copy text'); - toast(globalize.translate('CopyFailed')); - }); - }); - } +function setMediaInfo(user, page, item) { + let html = item.MediaSources.map(version => { + return getMediaSourceHtml(user, item, version); + }).join(''); + if (item.MediaSources.length > 1) { + html = `
${html}`; } + const mediaInfoContent = page.querySelector('#mediaInfoContent'); + mediaInfoContent.innerHTML = html; - function getMediaSourceHtml(user, item, version) { - let html = '
'); + + if (identifyResult.ImageUrl) { + resultHtml = `
';
+ } else {
+ html += '
';
- html += '';
-
- return html;
- }
-
- function deleteImage(context, itemId, type, index, apiClient, enableConfirmation) {
- const afterConfirm = function () {
- apiClient.deleteItemImage(itemId, type, index).then(function () {
- hasChanges = true;
- reload(context);
+ if (providerCount) {
+ commands.push({
+ name: globalize.translate('Search'),
+ id: 'search'
});
+ }
+
+ actionSheet.show({
+
+ items: commands,
+ positionTo: imageCard
+
+ }).then(function (id) {
+ switch (id) {
+ case 'delete':
+ deleteImage(context, itemId, type, index, apiClient, false);
+ break;
+ case 'search':
+ showImageDownloader(context, type);
+ break;
+ case 'moveleft':
+ moveImage(context, apiClient, itemId, type, index, index - 1, dom.parentWithClass(imageCard, 'itemsContainer'));
+ break;
+ case 'moveright':
+ moveImage(context, apiClient, itemId, type, index, index + 1, dom.parentWithClass(imageCard, 'itemsContainer'));
+ break;
+ default:
+ break;
+ }
+ });
+ });
+}
+
+function initEditor(context, options) {
+ const uploadButtons = context.querySelectorAll('.btnOpenUploadMenu');
+ const isFileInputSupported = appHost.supports('fileinput');
+ for (let i = 0, length = uploadButtons.length; i < length; i++) {
+ if (isFileInputSupported) {
+ uploadButtons[i].classList.remove('hide');
+ } else {
+ uploadButtons[i].classList.add('hide');
+ }
+ }
+
+ addListeners(context, 'btnOpenUploadMenu', 'click', function () {
+ const imageType = this.getAttribute('data-imagetype');
+
+ import('../imageUploader/imageUploader').then(({ default: imageUploader }) => {
+ imageUploader.show({
+
+ theme: options.theme,
+ imageType: imageType,
+ itemId: currentItem.Id,
+ serverId: currentItem.ServerId
+
+ }).then(function (hasChanged) {
+ if (hasChanged) {
+ hasChanges = true;
+ reload(context);
+ }
+ });
+ });
+ });
+
+ addListeners(context, 'btnSearchImages', 'click', function () {
+ showImageDownloader(context, this.getAttribute('data-imagetype'));
+ });
+
+ addListeners(context, 'btnBrowseAllImages', 'click', function () {
+ showImageDownloader(context, this.getAttribute('data-imagetype') || 'Primary');
+ });
+
+ addListeners(context, 'btnImageCard', 'click', function () {
+ showActionSheet(context, this);
+ });
+
+ addListeners(context, 'btnDeleteImage', 'click', function () {
+ const type = this.getAttribute('data-imagetype');
+ let index = this.getAttribute('data-index');
+ index = index === 'null' ? null : parseInt(index, 10);
+ const apiClient = ServerConnections.getApiClient(currentItem.ServerId);
+ deleteImage(context, currentItem.Id, type, index, apiClient, true);
+ });
+
+ addListeners(context, 'btnMoveImage', 'click', function () {
+ const type = this.getAttribute('data-imagetype');
+ const index = this.getAttribute('data-index');
+ const newIndex = this.getAttribute('data-newindex');
+ const apiClient = ServerConnections.getApiClient(currentItem.ServerId);
+ moveImage(context, apiClient, currentItem.Id, type, index, newIndex, dom.parentWithClass(this, 'itemsContainer'));
+ });
+}
+
+function showEditor(options, resolve, reject) {
+ const itemId = options.itemId;
+ const serverId = options.serverId;
+
+ loading.show();
+
+ const apiClient = ServerConnections.getApiClient(serverId);
+ apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
+ const dialogOptions = {
+ removeOnClose: true
};
- if (!enableConfirmation) {
- afterConfirm();
- return;
- }
-
- confirm({
- text: globalize.translate('ConfirmDeleteImage'),
- confirmText: globalize.translate('Delete'),
- primary: 'delete'
- }).then(afterConfirm);
- }
-
- function moveImage(context, apiClient, itemId, type, index, newIndex, focusContext) {
- apiClient.updateItemImageIndex(itemId, type, index, newIndex).then(function () {
- hasChanges = true;
- reload(context, null, focusContext);
- }, function () {
- alert(globalize.translate('ErrorDefault'));
- });
- }
-
- function renderImages(page, item, apiClient, images, imageProviders, elem) {
- let html = '';
-
- let imageSize = 300;
- const windowSize = dom.getWindowSize();
- if (windowSize.innerWidth >= 1280) {
- imageSize = Math.round(windowSize.innerWidth / 4);
- }
-
- const tagName = layoutManager.tv ? 'button' : 'div';
- const enableFooterButtons = !layoutManager.tv;
-
- for (let i = 0, length = images.length; i < length; i++) {
- const image = images[i];
- const options = { index: i, numImages: length, imageProviders, imageSize, tagName, enableFooterButtons };
- html += getCardHtml(image, apiClient, options);
- }
-
- elem.innerHTML = html;
- imageLoader.lazyChildren(elem);
- }
-
- function renderStandardImages(page, apiClient, item, imageInfos, imageProviders) {
- const images = imageInfos.filter(function (i) {
- return i.ImageType !== 'Backdrop' && i.ImageType !== 'Chapter';
- });
-
- renderImages(page, item, apiClient, images, imageProviders, page.querySelector('#images'));
- }
-
- function renderBackdrops(page, apiClient, item, imageInfos, imageProviders) {
- const images = imageInfos.filter(function (i) {
- return i.ImageType === 'Backdrop';
- }).sort(function (a, b) {
- return a.ImageIndex - b.ImageIndex;
- });
-
- if (images.length) {
- page.querySelector('#backdropsContainer', page).classList.remove('hide');
- renderImages(page, item, apiClient, images, imageProviders, page.querySelector('#backdrops'));
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
} else {
- page.querySelector('#backdropsContainer', page).classList.add('hide');
- }
- }
-
- function showImageDownloader(page, imageType) {
- import('../imageDownloader/imageDownloader').then((ImageDownloader) => {
- ImageDownloader.show(
- currentItem.Id,
- currentItem.ServerId,
- currentItem.Type,
- imageType,
- currentItem.Type == 'Season' ? currentItem.ParentId : null
- ).then(function () {
- hasChanges = true;
- reload(page);
- });
- });
- }
-
- function showActionSheet(context, imageCard) {
- const itemId = imageCard.getAttribute('data-id');
- const serverId = imageCard.getAttribute('data-serverid');
- const apiClient = ServerConnections.getApiClient(serverId);
-
- const type = imageCard.getAttribute('data-imagetype');
- const index = parseInt(imageCard.getAttribute('data-index'), 10);
- const providerCount = parseInt(imageCard.getAttribute('data-providers'), 10);
- const numImages = parseInt(imageCard.getAttribute('data-numimages'), 10);
-
- import('../actionSheet/actionSheet').then(({ default: actionSheet }) => {
- const commands = [];
-
- commands.push({
- name: globalize.translate('Delete'),
- id: 'delete'
- });
-
- if (type === 'Backdrop') {
- if (index > 0) {
- commands.push({
- name: globalize.translate('MoveLeft'),
- id: 'moveleft'
- });
- }
-
- if (index < numImages - 1) {
- commands.push({
- name: globalize.translate('MoveRight'),
- id: 'moveright'
- });
- }
- }
-
- if (providerCount) {
- commands.push({
- name: globalize.translate('Search'),
- id: 'search'
- });
- }
-
- actionSheet.show({
-
- items: commands,
- positionTo: imageCard
-
- }).then(function (id) {
- switch (id) {
- case 'delete':
- deleteImage(context, itemId, type, index, apiClient, false);
- break;
- case 'search':
- showImageDownloader(context, type);
- break;
- case 'moveleft':
- moveImage(context, apiClient, itemId, type, index, index - 1, dom.parentWithClass(imageCard, 'itemsContainer'));
- break;
- case 'moveright':
- moveImage(context, apiClient, itemId, type, index, index + 1, dom.parentWithClass(imageCard, 'itemsContainer'));
- break;
- default:
- break;
- }
- });
- });
- }
-
- function initEditor(context, options) {
- const uploadButtons = context.querySelectorAll('.btnOpenUploadMenu');
- const isFileInputSupported = appHost.supports('fileinput');
- for (let i = 0, length = uploadButtons.length; i < length; i++) {
- if (isFileInputSupported) {
- uploadButtons[i].classList.remove('hide');
- } else {
- uploadButtons[i].classList.add('hide');
- }
+ dialogOptions.size = 'small';
}
- addListeners(context, 'btnOpenUploadMenu', 'click', function () {
- const imageType = this.getAttribute('data-imagetype');
+ const dlg = dialogHelper.createDialog(dialogOptions);
- import('../imageUploader/imageUploader').then(({ default: imageUploader }) => {
- imageUploader.show({
+ dlg.classList.add('formDialog');
- theme: options.theme,
- imageType: imageType,
- itemId: currentItem.Id,
- serverId: currentItem.ServerId
+ dlg.innerHTML = globalize.translateHtml(template, 'core');
- }).then(function (hasChanged) {
- if (hasChanged) {
- hasChanges = true;
- reload(context);
- }
- });
- });
- });
+ if (layoutManager.tv) {
+ scrollHelper.centerFocus.on(dlg, false);
+ }
- addListeners(context, 'btnSearchImages', 'click', function () {
- showImageDownloader(context, this.getAttribute('data-imagetype'));
- });
-
- addListeners(context, 'btnBrowseAllImages', 'click', function () {
- showImageDownloader(context, this.getAttribute('data-imagetype') || 'Primary');
- });
-
- addListeners(context, 'btnImageCard', 'click', function () {
- showActionSheet(context, this);
- });
-
- addListeners(context, 'btnDeleteImage', 'click', function () {
- const type = this.getAttribute('data-imagetype');
- let index = this.getAttribute('data-index');
- index = index === 'null' ? null : parseInt(index, 10);
- const apiClient = ServerConnections.getApiClient(currentItem.ServerId);
- deleteImage(context, currentItem.Id, type, index, apiClient, true);
- });
-
- addListeners(context, 'btnMoveImage', 'click', function () {
- const type = this.getAttribute('data-imagetype');
- const index = this.getAttribute('data-index');
- const newIndex = this.getAttribute('data-newindex');
- const apiClient = ServerConnections.getApiClient(currentItem.ServerId);
- moveImage(context, apiClient, currentItem.Id, type, index, newIndex, dom.parentWithClass(this, 'itemsContainer'));
- });
- }
-
- function showEditor(options, resolve, reject) {
- const itemId = options.itemId;
- const serverId = options.serverId;
-
- loading.show();
-
- const apiClient = ServerConnections.getApiClient(serverId);
- apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
- const dialogOptions = {
- removeOnClose: true
- };
+ initEditor(dlg, options);
+ // Has to be assigned a z-index after the call to .open()
+ dlg.addEventListener('close', function () {
if (layoutManager.tv) {
- dialogOptions.size = 'fullscreen';
+ scrollHelper.centerFocus.off(dlg, false);
+ }
+
+ loading.hide();
+
+ if (hasChanges) {
+ resolve();
} else {
- dialogOptions.size = 'small';
+ reject();
}
-
- const dlg = dialogHelper.createDialog(dialogOptions);
-
- dlg.classList.add('formDialog');
-
- dlg.innerHTML = globalize.translateHtml(template, 'core');
-
- if (layoutManager.tv) {
- scrollHelper.centerFocus.on(dlg, false);
- }
-
- initEditor(dlg, options);
-
- // Has to be assigned a z-index after the call to .open()
- dlg.addEventListener('close', function () {
- if (layoutManager.tv) {
- scrollHelper.centerFocus.off(dlg, false);
- }
-
- loading.hide();
-
- if (hasChanges) {
- resolve();
- } else {
- reject();
- }
- });
-
- dialogHelper.open(dlg);
-
- reload(dlg, item);
-
- dlg.querySelector('.btnCancel').addEventListener('click', function () {
- dialogHelper.close(dlg);
- });
});
- }
+
+ dialogHelper.open(dlg);
+
+ reload(dlg, item);
+
+ dlg.querySelector('.btnCancel').addEventListener('click', function () {
+ dialogHelper.close(dlg);
+ });
+ });
+}
export function show (options) {
return new Promise(function (resolve, reject) {
@@ -465,4 +463,3 @@ export default {
show
};
-/* eslint-enable indent */
diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js
index d1095a01dc..beb4bb31a5 100644
--- a/src/components/images/imageLoader.js
+++ b/src/components/images/imageLoader.js
@@ -17,237 +17,235 @@ worker.addEventListener(
}
}
);
-/* eslint-disable indent */
- export function lazyImage(elem, source = elem.getAttribute('data-src')) {
- if (!source) {
- return;
- }
-
- fillImageElement(elem, source);
+export function lazyImage(elem, source = elem.getAttribute('data-src')) {
+ if (!source) {
+ return;
}
- function drawBlurhash(target, pixels, width, height) {
- const canvas = document.createElement('canvas');
- canvas.setAttribute('aria-hidden', 'true');
- canvas.width = width;
- canvas.height = height;
- const ctx = canvas.getContext('2d');
- const imgData = ctx.createImageData(width, height);
+ fillImageElement(elem, source);
+}
- imgData.data.set(pixels);
- ctx.putImageData(imgData, 0, 0);
+function drawBlurhash(target, pixels, width, height) {
+ const canvas = document.createElement('canvas');
+ canvas.setAttribute('aria-hidden', 'true');
+ canvas.width = width;
+ canvas.height = height;
+ const ctx = canvas.getContext('2d');
+ const imgData = ctx.createImageData(width, height);
- requestAnimationFrame(() => {
- // This class is just an utility class, so users can customize the canvas using their own CSS.
- canvas.classList.add('blurhash-canvas');
+ imgData.data.set(pixels);
+ ctx.putImageData(imgData, 0, 0);
- target.parentNode.insertBefore(canvas, target);
- target.classList.add('blurhashed');
- target.removeAttribute('data-blurhash');
+ requestAnimationFrame(() => {
+ // This class is just an utility class, so users can customize the canvas using their own CSS.
+ canvas.classList.add('blurhash-canvas');
+
+ target.parentNode.insertBefore(canvas, target);
+ target.classList.add('blurhashed');
+ target.removeAttribute('data-blurhash');
+ });
+}
+
+function itemBlurhashing(target, hash) {
+ try {
+ // Although the default values recommended by Blurhash developers is 32x32, a size of 20x20 seems to be the sweet spot for us,
+ // improving the performance and reducing the memory usage, while retaining almost full blur quality.
+ // Lower values had more visible pixelation
+ const width = 20;
+ const height = 20;
+ targetDic[hash] = (targetDic[hash] || []).filter(item => item !== target);
+ targetDic[hash].push(target);
+
+ worker.postMessage({
+ hash,
+ width,
+ height
});
+ } catch (err) {
+ console.error(err);
+ target.classList.add('non-blurhashable');
+ return;
+ }
+}
+
+export function fillImage(entry) {
+ if (!entry) {
+ throw new Error('entry cannot be null');
+ }
+ const target = entry.target;
+ let source = undefined;
+
+ if (target) {
+ source = target.getAttribute('data-src');
+ } else {
+ source = entry;
}
- function itemBlurhashing(target, hash) {
- try {
- // Although the default values recommended by Blurhash developers is 32x32, a size of 20x20 seems to be the sweet spot for us,
- // improving the performance and reducing the memory usage, while retaining almost full blur quality.
- // Lower values had more visible pixelation
- const width = 20;
- const height = 20;
- targetDic[hash] = (targetDic[hash] || []).filter(item => item !== target);
- targetDic[hash].push(target);
-
- worker.postMessage({
- hash,
- width,
- height
- });
- } catch (err) {
- console.error(err);
- target.classList.add('non-blurhashable');
- return;
+ if (entry.isIntersecting) {
+ if (source) {
+ fillImageElement(target, source);
}
+ } else if (!source) {
+ emptyImageElement(target);
}
+}
- export function fillImage(entry) {
- if (!entry) {
- throw new Error('entry cannot be null');
- }
- const target = entry.target;
- let source = undefined;
-
- if (target) {
- source = target.getAttribute('data-src');
- } else {
- source = entry;
- }
-
- if (entry.isIntersecting) {
- if (source) {
- fillImageElement(target, source);
- }
- } else if (!source) {
- emptyImageElement(target);
- }
- }
-
- function onAnimationEnd(event) {
- const elem = event.target;
- requestAnimationFrame(() => {
- const canvas = elem.previousSibling;
- if (elem.classList.contains('blurhashed') && canvas?.tagName === 'CANVAS') {
- canvas.classList.add('lazy-hidden');
- }
-
- // HACK: Hide the content of the card padder
- elem.parentNode?.querySelector('.cardPadder')?.classList.add('lazy-hidden-children');
- });
- elem.removeEventListener('animationend', onAnimationEnd);
- }
-
- function fillImageElement(elem, url) {
- if (url === undefined) {
- throw new TypeError('url cannot be undefined');
- }
-
- const preloaderImg = new Image();
- preloaderImg.src = url;
-
- elem.classList.add('lazy-hidden');
- elem.addEventListener('animationend', onAnimationEnd);
-
- preloaderImg.addEventListener('load', () => {
- requestAnimationFrame(() => {
- if (elem.tagName !== 'IMG') {
- elem.style.backgroundImage = "url('" + url + "')";
- } else {
- elem.setAttribute('src', url);
- }
- elem.removeAttribute('data-src');
-
- if (userSettings.enableFastFadein()) {
- elem.classList.add('lazy-image-fadein-fast');
- } else {
- elem.classList.add('lazy-image-fadein');
- }
- elem.classList.remove('lazy-hidden');
- });
- });
- }
-
- function emptyImageElement(elem) {
- elem.removeEventListener('animationend', onAnimationEnd);
+function onAnimationEnd(event) {
+ const elem = event.target;
+ requestAnimationFrame(() => {
const canvas = elem.previousSibling;
- if (canvas?.tagName === 'CANVAS') {
- canvas.classList.remove('lazy-hidden');
+ if (elem.classList.contains('blurhashed') && canvas?.tagName === 'CANVAS') {
+ canvas.classList.add('lazy-hidden');
}
- // HACK: Unhide the content of the card padder
- elem.parentNode?.querySelector('.cardPadder')?.classList.remove('lazy-hidden-children');
+ // HACK: Hide the content of the card padder
+ elem.parentNode?.querySelector('.cardPadder')?.classList.add('lazy-hidden-children');
+ });
+ elem.removeEventListener('animationend', onAnimationEnd);
+}
- let url;
-
- if (elem.tagName !== 'IMG') {
- url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, '');
- elem.style.backgroundImage = 'none';
- } else {
- url = elem.getAttribute('src');
- elem.setAttribute('src', '');
- }
- elem.setAttribute('data-src', url);
-
- elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein');
- elem.classList.add('lazy-hidden');
+function fillImageElement(elem, url) {
+ if (url === undefined) {
+ throw new TypeError('url cannot be undefined');
}
- export function lazyChildren(elem) {
- if (userSettings.enableBlurhash()) {
- for (const lazyElem of elem.querySelectorAll('.lazy')) {
- const blurhashstr = lazyElem.getAttribute('data-blurhash');
- if (!lazyElem.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) {
- itemBlurhashing(lazyElem, blurhashstr);
- } else if (!blurhashstr && !lazyElem.classList.contains('blurhashed')) {
- lazyElem.classList.add('non-blurhashable');
- }
+ const preloaderImg = new Image();
+ preloaderImg.src = url;
+
+ elem.classList.add('lazy-hidden');
+ elem.addEventListener('animationend', onAnimationEnd);
+
+ preloaderImg.addEventListener('load', () => {
+ requestAnimationFrame(() => {
+ if (elem.tagName !== 'IMG') {
+ elem.style.backgroundImage = "url('" + url + "')";
+ } else {
+ elem.setAttribute('src', url);
}
- }
+ elem.removeAttribute('data-src');
- lazyLoader.lazyChildren(elem, fillImage);
- }
-
- export function getPrimaryImageAspectRatio(items) {
- const values = [];
-
- for (let i = 0, length = items.length; i < length; i++) {
- const ratio = items[i].PrimaryImageAspectRatio || 0;
-
- if (!ratio) {
- continue;
+ if (userSettings.enableFastFadein()) {
+ elem.classList.add('lazy-image-fadein-fast');
+ } else {
+ elem.classList.add('lazy-image-fadein');
}
-
- values[values.length] = ratio;
- }
-
- if (!values.length) {
- return null;
- }
-
- // Use the median
- values.sort(function (a, b) {
- return a - b;
+ elem.classList.remove('lazy-hidden');
});
+ });
+}
- const half = Math.floor(values.length / 2);
-
- let result;
-
- if (values.length % 2) {
- result = values[half];
- } else {
- result = (values[half - 1] + values[half]) / 2.0;
- }
-
- // If really close to 2:3 (poster image), just return 2:3
- const aspect2x3 = 2 / 3;
- if (Math.abs(aspect2x3 - result) <= 0.15) {
- return aspect2x3;
- }
-
- // If really close to 16:9 (episode image), just return 16:9
- const aspect16x9 = 16 / 9;
- if (Math.abs(aspect16x9 - result) <= 0.2) {
- return aspect16x9;
- }
-
- // If really close to 1 (square image), just return 1
- if (Math.abs(1 - result) <= 0.15) {
- return 1;
- }
-
- // If really close to 4:3 (poster image), just return 2:3
- const aspect4x3 = 4 / 3;
- if (Math.abs(aspect4x3 - result) <= 0.15) {
- return aspect4x3;
- }
-
- return result;
+function emptyImageElement(elem) {
+ elem.removeEventListener('animationend', onAnimationEnd);
+ const canvas = elem.previousSibling;
+ if (canvas?.tagName === 'CANVAS') {
+ canvas.classList.remove('lazy-hidden');
}
- export function fillImages(elems) {
- for (let i = 0, length = elems.length; i < length; i++) {
- const elem = elems[0];
- fillImage(elem);
+ // HACK: Unhide the content of the card padder
+ elem.parentNode?.querySelector('.cardPadder')?.classList.remove('lazy-hidden-children');
+
+ let url;
+
+ if (elem.tagName !== 'IMG') {
+ url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, '');
+ elem.style.backgroundImage = 'none';
+ } else {
+ url = elem.getAttribute('src');
+ elem.setAttribute('src', '');
+ }
+ elem.setAttribute('data-src', url);
+
+ elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein');
+ elem.classList.add('lazy-hidden');
+}
+
+export function lazyChildren(elem) {
+ if (userSettings.enableBlurhash()) {
+ for (const lazyElem of elem.querySelectorAll('.lazy')) {
+ const blurhashstr = lazyElem.getAttribute('data-blurhash');
+ if (!lazyElem.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) {
+ itemBlurhashing(lazyElem, blurhashstr);
+ } else if (!blurhashstr && !lazyElem.classList.contains('blurhashed')) {
+ lazyElem.classList.add('non-blurhashable');
+ }
}
}
- export function setLazyImage(element, url) {
- element.classList.add('lazy');
- element.setAttribute('data-src', url);
- lazyImage(element);
+ lazyLoader.lazyChildren(elem, fillImage);
+}
+
+export function getPrimaryImageAspectRatio(items) {
+ const values = [];
+
+ for (let i = 0, length = items.length; i < length; i++) {
+ const ratio = items[i].PrimaryImageAspectRatio || 0;
+
+ if (!ratio) {
+ continue;
+ }
+
+ values[values.length] = ratio;
}
-/* eslint-enable indent */
+ if (!values.length) {
+ return null;
+ }
+
+ // Use the median
+ values.sort(function (a, b) {
+ return a - b;
+ });
+
+ const half = Math.floor(values.length / 2);
+
+ let result;
+
+ if (values.length % 2) {
+ result = values[half];
+ } else {
+ result = (values[half - 1] + values[half]) / 2.0;
+ }
+
+ // If really close to 2:3 (poster image), just return 2:3
+ const aspect2x3 = 2 / 3;
+ if (Math.abs(aspect2x3 - result) <= 0.15) {
+ return aspect2x3;
+ }
+
+ // If really close to 16:9 (episode image), just return 16:9
+ const aspect16x9 = 16 / 9;
+ if (Math.abs(aspect16x9 - result) <= 0.2) {
+ return aspect16x9;
+ }
+
+ // If really close to 1 (square image), just return 1
+ if (Math.abs(1 - result) <= 0.15) {
+ return 1;
+ }
+
+ // If really close to 4:3 (poster image), just return 2:3
+ const aspect4x3 = 4 / 3;
+ if (Math.abs(aspect4x3 - result) <= 0.15) {
+ return aspect4x3;
+ }
+
+ return result;
+}
+
+export function fillImages(elems) {
+ for (let i = 0, length = elems.length; i < length; i++) {
+ const elem = elems[0];
+ fillImage(elem);
+ }
+}
+
+export function setLazyImage(element, url) {
+ element.classList.add('lazy');
+ element.setAttribute('data-src', url);
+ lazyImage(element);
+}
+
export default {
setLazyImage: setLazyImage,
fillImages: fillImages,
diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index e132c706e3..a90effb336 100644
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@@ -9,636 +9,633 @@ import { playbackManager } from './playback/playbackmanager';
import ServerConnections from './ServerConnections';
import toast from './toast/toast';
-/* eslint-disable indent */
- export function getCommands(options) {
- const item = options.item;
- const user = options.user;
+export function getCommands(options) {
+ const item = options.item;
+ const user = options.user;
- const canPlay = playbackManager.canPlay(item);
+ const canPlay = playbackManager.canPlay(item);
- const commands = [];
+ const commands = [];
- if (canPlay && item.MediaType !== 'Photo') {
- if (options.play !== false) {
- commands.push({
- name: globalize.translate('Play'),
- id: 'resume',
- icon: 'play_arrow'
- });
- }
-
- if (options.playAllFromHere && item.Type !== 'Program' && item.Type !== 'TvChannel') {
- commands.push({
- name: globalize.translate('PlayAllFromHere'),
- id: 'playallfromhere',
- icon: 'play_arrow'
- });
- }
+ if (canPlay && item.MediaType !== 'Photo') {
+ if (options.play !== false) {
+ commands.push({
+ name: globalize.translate('Play'),
+ id: 'resume',
+ icon: 'play_arrow'
+ });
}
- if (playbackManager.getCurrentPlayer() !== null) {
- if (options.stopPlayback) {
- commands.push({
- name: globalize.translate('StopPlayback'),
- id: 'stopPlayback',
- icon: 'stop'
- });
- }
- if (options.clearQueue) {
- commands.push({
- name: globalize.translate('ClearQueue'),
- id: 'clearQueue',
- icon: 'clear_all'
- });
- }
+ if (options.playAllFromHere && item.Type !== 'Program' && item.Type !== 'TvChannel') {
+ commands.push({
+ name: globalize.translate('PlayAllFromHere'),
+ id: 'playallfromhere',
+ icon: 'play_arrow'
+ });
+ }
+ }
+
+ if (playbackManager.getCurrentPlayer() !== null) {
+ if (options.stopPlayback) {
+ commands.push({
+ name: globalize.translate('StopPlayback'),
+ id: 'stopPlayback',
+ icon: 'stop'
+ });
+ }
+ if (options.clearQueue) {
+ commands.push({
+ name: globalize.translate('ClearQueue'),
+ id: 'clearQueue',
+ icon: 'clear_all'
+ });
+ }
+ }
+
+ if (playbackManager.canQueue(item)) {
+ if (options.queue !== false) {
+ commands.push({
+ name: globalize.translate('AddToPlayQueue'),
+ id: 'queue',
+ icon: 'playlist_add'
+ });
}
- if (playbackManager.canQueue(item)) {
- if (options.queue !== false) {
- commands.push({
- name: globalize.translate('AddToPlayQueue'),
- id: 'queue',
- icon: 'playlist_add'
- });
- }
-
- if (options.queue !== false) {
- commands.push({
- name: globalize.translate('PlayNext'),
- id: 'queuenext',
- icon: 'playlist_add'
- });
- }
+ if (options.queue !== false) {
+ commands.push({
+ name: globalize.translate('PlayNext'),
+ id: 'queuenext',
+ icon: 'playlist_add'
+ });
}
+ }
- if ((item.IsFolder || item.Type === 'MusicArtist' || item.Type === 'MusicGenre')
+ if ((item.IsFolder || item.Type === 'MusicArtist' || item.Type === 'MusicGenre')
&& item.CollectionType !== 'livetv'
&& options.shuffle !== false
- ) {
- commands.push({
- name: globalize.translate('Shuffle'),
- id: 'shuffle',
- icon: 'shuffle'
- });
- }
+ ) {
+ commands.push({
+ name: globalize.translate('Shuffle'),
+ id: 'shuffle',
+ icon: 'shuffle'
+ });
+ }
- if ((item.MediaType === 'Audio' || item.Type === 'MusicAlbum' || item.Type === 'MusicArtist' || item.Type === 'MusicGenre')
+ if ((item.MediaType === 'Audio' || item.Type === 'MusicAlbum' || item.Type === 'MusicArtist' || item.Type === 'MusicGenre')
&& options.instantMix !== false && !itemHelper.isLocalItem(item)
- ) {
+ ) {
+ commands.push({
+ name: globalize.translate('InstantMix'),
+ id: 'instantmix',
+ icon: 'explore'
+ });
+ }
+
+ if (commands.length) {
+ commands.push({
+ divider: true
+ });
+ }
+
+ if (!browser.tv) {
+ if (itemHelper.supportsAddingToCollection(item) && options.EnableCollectionManagement) {
commands.push({
- name: globalize.translate('InstantMix'),
- id: 'instantmix',
- icon: 'explore'
+ name: globalize.translate('AddToCollection'),
+ id: 'addtocollection',
+ icon: 'playlist_add'
});
}
- if (commands.length) {
+ if (itemHelper.supportsAddingToPlaylist(item) && options.playlist !== false) {
commands.push({
- divider: true
+ name: globalize.translate('AddToPlaylist'),
+ id: 'addtoplaylist',
+ icon: 'playlist_add'
});
}
+ }
- if (!browser.tv) {
- if (itemHelper.supportsAddingToCollection(item) && options.EnableCollectionManagement) {
- commands.push({
- name: globalize.translate('AddToCollection'),
- id: 'addtocollection',
- icon: 'playlist_add'
- });
- }
+ if ((item.Type === 'Timer') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
+ commands.push({
+ name: globalize.translate('CancelRecording'),
+ id: 'canceltimer',
+ icon: 'cancel'
+ });
+ }
- if (itemHelper.supportsAddingToPlaylist(item) && options.playlist !== false) {
- commands.push({
- name: globalize.translate('AddToPlaylist'),
- id: 'addtoplaylist',
- icon: 'playlist_add'
- });
- }
- }
+ if ((item.Type === 'Recording' && item.Status === 'InProgress') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
+ commands.push({
+ name: globalize.translate('CancelRecording'),
+ id: 'canceltimer',
+ icon: 'cancel'
+ });
+ }
- if ((item.Type === 'Timer') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
+ if ((item.Type === 'SeriesTimer') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
+ commands.push({
+ name: globalize.translate('CancelSeries'),
+ id: 'cancelseriestimer',
+ icon: 'cancel'
+ });
+ }
+
+ if (item.Type === 'Season' || item.Type == 'Series') {
+ commands.push({
+ name: globalize.translate('DownloadAll'),
+ id: 'downloadall',
+ icon: 'file_download'
+ });
+ }
+
+ if (item.CanDelete && options.deleteItem !== false) {
+ if (item.Type === 'Playlist' || item.Type === 'BoxSet') {
commands.push({
- name: globalize.translate('CancelRecording'),
- id: 'canceltimer',
- icon: 'cancel'
+ name: globalize.translate('Delete'),
+ id: 'delete',
+ icon: 'delete'
+ });
+ } else {
+ commands.push({
+ name: globalize.translate('DeleteMedia'),
+ id: 'delete',
+ icon: 'delete'
});
}
+ }
- if ((item.Type === 'Recording' && item.Status === 'InProgress') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
- commands.push({
- name: globalize.translate('CancelRecording'),
- id: 'canceltimer',
- icon: 'cancel'
- });
- }
+ // Books are promoted to major download Button and therefor excluded in the context menu
+ if ((item.CanDownload && appHost.supports('filedownload')) && item.Type !== 'Book') {
+ commands.push({
+ name: globalize.translate('Download'),
+ id: 'download',
+ icon: 'file_download'
+ });
- if ((item.Type === 'SeriesTimer') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
- commands.push({
- name: globalize.translate('CancelSeries'),
- id: 'cancelseriestimer',
- icon: 'cancel'
- });
- }
+ commands.push({
+ name: globalize.translate('CopyStreamURL'),
+ id: 'copy-stream',
+ icon: 'content_copy'
+ });
+ }
- if (item.Type === 'Season' || item.Type == 'Series') {
- commands.push({
- name: globalize.translate('DownloadAll'),
- id: 'downloadall',
- icon: 'file_download'
- });
- }
+ if (commands.length) {
+ commands.push({
+ divider: true
+ });
+ }
- if (item.CanDelete && options.deleteItem !== false) {
- if (item.Type === 'Playlist' || item.Type === 'BoxSet') {
- commands.push({
- name: globalize.translate('Delete'),
- id: 'delete',
- icon: 'delete'
- });
- } else {
- commands.push({
- name: globalize.translate('DeleteMedia'),
- id: 'delete',
- icon: 'delete'
- });
- }
- }
+ const canEdit = itemHelper.canEdit(user, item);
+ if (canEdit && options.edit !== false && item.Type !== 'SeriesTimer') {
+ const text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata');
+ commands.push({
+ name: text,
+ id: 'edit',
+ icon: 'edit'
+ });
+ }
- // Books are promoted to major download Button and therefor excluded in the context menu
- if ((item.CanDownload && appHost.supports('filedownload')) && item.Type !== 'Book') {
- commands.push({
- name: globalize.translate('Download'),
- id: 'download',
- icon: 'file_download'
- });
+ if (itemHelper.canEditImages(user, item) && options.editImages !== false) {
+ commands.push({
+ name: globalize.translate('EditImages'),
+ id: 'editimages',
+ icon: 'image'
+ });
+ }
- commands.push({
- name: globalize.translate('CopyStreamURL'),
- id: 'copy-stream',
- icon: 'content_copy'
- });
- }
-
- if (commands.length) {
- commands.push({
- divider: true
- });
- }
-
- const canEdit = itemHelper.canEdit(user, item);
- if (canEdit && options.edit !== false && item.Type !== 'SeriesTimer') {
- const text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata');
- commands.push({
- name: text,
- id: 'edit',
- icon: 'edit'
- });
- }
-
- if (itemHelper.canEditImages(user, item) && options.editImages !== false) {
- commands.push({
- name: globalize.translate('EditImages'),
- id: 'editimages',
- icon: 'image'
- });
- }
-
- if (canEdit && item.MediaType === 'Video' && item.Type !== 'TvChannel' && item.Type !== 'Program'
+ if (canEdit && item.MediaType === 'Video' && item.Type !== 'TvChannel' && item.Type !== 'Program'
&& item.LocationType !== 'Virtual'
&& !(item.Type === 'Recording' && item.Status !== 'Completed')
&& options.editSubtitles !== false
- ) {
- commands.push({
- name: globalize.translate('EditSubtitles'),
- id: 'editsubtitles',
- icon: 'closed_caption'
- });
- }
-
- if (options.identify !== false && itemHelper.canIdentify(user, item)) {
- commands.push({
- name: globalize.translate('Identify'),
- id: 'identify',
- icon: 'edit'
- });
- }
-
- if (item.MediaSources && options.moremediainfo !== false) {
- commands.push({
- name: globalize.translate('MoreMediaInfo'),
- id: 'moremediainfo',
- icon: 'info'
- });
- }
-
- if (item.Type === 'Program' && options.record !== false) {
- if (item.TimerId) {
- commands.push({
- name: globalize.translate('ManageRecording'),
- id: 'record',
- icon: 'fiber_manual_record'
- });
- } else {
- commands.push({
- name: globalize.translate('Record'),
- id: 'record',
- icon: 'fiber_manual_record'
- });
- }
- }
-
- if (itemHelper.canRefreshMetadata(item, user)) {
- commands.push({
- name: globalize.translate('RefreshMetadata'),
- id: 'refresh',
- icon: 'refresh'
- });
- }
-
- if (item.PlaylistItemId && options.playlistId) {
- commands.push({
- name: globalize.translate('RemoveFromPlaylist'),
- id: 'removefromplaylist',
- icon: 'remove'
- });
- }
-
- if (options.collectionId) {
- commands.push({
- name: globalize.translate('RemoveFromCollection'),
- id: 'removefromcollection',
- icon: 'remove'
- });
- }
-
- if (!browser.tv && options.share === true && itemHelper.canShare(item, user)) {
- commands.push({
- name: globalize.translate('Share'),
- id: 'share',
- icon: 'share'
- });
- }
-
- if (options.sync !== false && itemHelper.canSync(user, item)) {
- commands.push({
- name: globalize.translate('Sync'),
- id: 'sync',
- icon: 'sync'
- });
- }
-
- if (options.openAlbum !== false && item.AlbumId && item.MediaType !== 'Photo') {
- commands.push({
- name: globalize.translate('ViewAlbum'),
- id: 'album',
- icon: 'album'
- });
- }
- // Show Album Artist by default, as a song can have multiple artists, which specific one would this option refer to?
- // Although some albums can have multiple artists, it's not as common as songs.
- if (options.openArtist !== false && item.AlbumArtists && item.AlbumArtists.length) {
- commands.push({
- name: globalize.translate('ViewAlbumArtist'),
- id: 'artist',
- icon: 'person'
- });
- }
-
- return commands;
- }
-
- function getResolveFunction(resolve, id, changed, deleted) {
- return function () {
- resolve({
- command: id,
- updated: changed,
- deleted: deleted
- });
- };
- }
-
- function executeCommand(item, id, options) {
- const itemId = item.Id;
- const serverId = item.ServerId;
- const apiClient = ServerConnections.getApiClient(serverId);
-
- return new Promise(function (resolve, reject) {
- // eslint-disable-next-line sonarjs/max-switch-cases
- switch (id) {
- case 'addtocollection':
- import('./collectionEditor/collectionEditor').then(({ default: CollectionEditor }) => {
- const collectionEditor = new CollectionEditor();
- collectionEditor.show({
- items: [itemId],
- serverId: serverId
- }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
- });
- break;
- case 'addtoplaylist':
- import('./playlisteditor/playlisteditor').then(({ default: playlistEditor }) => {
- new playlistEditor({
- items: [itemId],
- serverId: serverId
- }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
- });
- break;
- case 'download':
- import('../scripts/fileDownloader').then((fileDownloader) => {
- const downloadHref = apiClient.getItemDownloadUrl(itemId);
- fileDownloader.download([{
- url: downloadHref,
- itemId: itemId,
- serverId: serverId,
- title: item.Name,
- filename: item.Path.replace(/^.*[\\/]/, '')
- }]);
- getResolveFunction(getResolveFunction(resolve, id), id)();
- });
- break;
- case 'downloadall': {
- const downloadEpisodes = episodes => {
- import('../scripts/fileDownloader').then((fileDownloader) => {
- const downloads = episodes.map(episode => {
- const downloadHref = apiClient.getItemDownloadUrl(episode.Id);
- return {
- url: downloadHref,
- itemId: episode.Id,
- serverId: serverId,
- title: episode.Name,
- filename: episode.Path.replace(/^.*[\\/]/, '')
- };
- });
-
- fileDownloader.download(downloads);
- });
- };
- const downloadSeasons = seasons => {
- Promise.all(seasons.map(seasonItem => {
- return apiClient.getEpisodes(seasonItem.SeriesId, {
- seasonId: seasonItem.Id,
- userId: options.user.Id,
- Fields: 'CanDownload,Path'
- });
- }
- )).then(seasonData => {
- downloadEpisodes(seasonData.map(season => season.Items).flat());
- });
- };
-
- if (item.Type === 'Season') {
- downloadSeasons([item]);
- } else if (item.Type === 'Series') {
- apiClient.getSeasons(item.Id, {
- userId: options.user.Id,
- Fields: 'ItemCounts'
- }).then(seasons => downloadSeasons(seasons.Items));
- }
-
- getResolveFunction(getResolveFunction(resolve, id), id)();
- break;
- }
- case 'copy-stream': {
- const downloadHref = apiClient.getItemDownloadUrl(itemId);
- copy(downloadHref).then(() => {
- toast(globalize.translate('CopyStreamURLSuccess'));
- }).catch(() => {
- prompt(globalize.translate('CopyStreamURL'), downloadHref);
- });
- getResolveFunction(resolve, id)();
- break;
- }
- case 'editsubtitles':
- import('./subtitleeditor/subtitleeditor').then(({ default: subtitleEditor }) => {
- subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
- });
- break;
- case 'edit':
- editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
- break;
- case 'editimages':
- import('./imageeditor/imageeditor').then((imageEditor) => {
- imageEditor.show({
- itemId: itemId,
- serverId: serverId
- }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
- });
- break;
- case 'identify':
- import('./itemidentifier/itemidentifier').then((itemIdentifier) => {
- itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
- });
- break;
- case 'moremediainfo':
- import('./itemMediaInfo/itemMediaInfo').then((itemMediaInfo) => {
- itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
- });
- break;
- case 'refresh':
- refresh(apiClient, item);
- getResolveFunction(resolve, id)();
- break;
- case 'open':
- appRouter.showItem(item);
- getResolveFunction(resolve, id)();
- break;
- case 'play':
- play(item, false);
- getResolveFunction(resolve, id)();
- break;
- case 'resume':
- play(item, true);
- getResolveFunction(resolve, id)();
- break;
- case 'queue':
- play(item, false, true);
- getResolveFunction(resolve, id)();
- break;
- case 'queuenext':
- play(item, false, true, true);
- getResolveFunction(resolve, id)();
- break;
- case 'stopPlayback':
- playbackManager.stop();
- break;
- case 'clearQueue':
- playbackManager.clearQueue();
- break;
- case 'record':
- import('./recordingcreator/recordingcreator').then(({ default: recordingCreator }) => {
- recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
- });
- break;
- case 'shuffle':
- playbackManager.shuffle(item);
- getResolveFunction(resolve, id)();
- break;
- case 'instantmix':
- playbackManager.instantMix(item);
- getResolveFunction(resolve, id)();
- break;
- case 'delete':
- deleteItem(apiClient, item).then(getResolveFunction(resolve, id, true, true), getResolveFunction(resolve, id));
- break;
- case 'share':
- navigator.share({
- title: item.Name,
- text: item.Overview,
- url: `${apiClient.serverAddress()}/web/index.html${appRouter.getRouteUrl(item)}`
- });
- break;
- case 'album':
- appRouter.showItem(item.AlbumId, item.ServerId);
- getResolveFunction(resolve, id)();
- break;
- case 'artist':
- appRouter.showItem(item.AlbumArtists[0].Id, item.ServerId);
- getResolveFunction(resolve, id)();
- break;
- case 'playallfromhere':
- getResolveFunction(resolve, id)();
- break;
- case 'queueallfromhere':
- getResolveFunction(resolve, id)();
- break;
- case 'removefromplaylist':
- apiClient.ajax({
- url: apiClient.getUrl('Playlists/' + options.playlistId + '/Items', {
- EntryIds: [item.PlaylistItemId].join(',')
- }),
- type: 'DELETE'
- }).then(function () {
- getResolveFunction(resolve, id, true)();
- });
- break;
- case 'removefromcollection':
- apiClient.ajax({
- type: 'DELETE',
- url: apiClient.getUrl('Collections/' + options.collectionId + '/Items', {
-
- Ids: [item.Id].join(',')
- })
- }).then(function () {
- getResolveFunction(resolve, id, true)();
- });
- break;
- case 'canceltimer':
- deleteTimer(apiClient, item, resolve, id);
- break;
- case 'cancelseriestimer':
- deleteSeriesTimer(apiClient, item, resolve, id);
- break;
- default:
- reject();
- break;
- }
+ ) {
+ commands.push({
+ name: globalize.translate('EditSubtitles'),
+ id: 'editsubtitles',
+ icon: 'closed_caption'
});
}
- function deleteTimer(apiClient, item, resolve, command) {
- import('./recordingcreator/recordinghelper').then(({ default: recordingHelper }) => {
- const timerId = item.TimerId || item.Id;
- recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
- getResolveFunction(resolve, command, true)();
- });
+ if (options.identify !== false && itemHelper.canIdentify(user, item)) {
+ commands.push({
+ name: globalize.translate('Identify'),
+ id: 'identify',
+ icon: 'edit'
});
}
- function deleteSeriesTimer(apiClient, item, resolve, command) {
- import('./recordingcreator/recordinghelper').then(({ default: recordingHelper }) => {
- recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
- getResolveFunction(resolve, command, true)();
- });
+ if (item.MediaSources && options.moremediainfo !== false) {
+ commands.push({
+ name: globalize.translate('MoreMediaInfo'),
+ id: 'moremediainfo',
+ icon: 'info'
});
}
- function play(item, resume, queue, queueNext) {
- let method = 'play';
- if (queue) {
- if (queueNext) {
- method = 'queueNext';
- } else {
- method = 'queue';
- }
- }
-
- let startPosition = 0;
- if (resume && item.UserData && item.UserData.PlaybackPositionTicks) {
- startPosition = item.UserData.PlaybackPositionTicks;
- }
-
- if (item.Type === 'Program') {
- playbackManager[method]({
- ids: [item.ChannelId],
- startPositionTicks: startPosition,
- serverId: item.ServerId
+ if (item.Type === 'Program' && options.record !== false) {
+ if (item.TimerId) {
+ commands.push({
+ name: globalize.translate('ManageRecording'),
+ id: 'record',
+ icon: 'fiber_manual_record'
});
} else {
- playbackManager[method]({
- items: [item],
- startPositionTicks: startPosition
+ commands.push({
+ name: globalize.translate('Record'),
+ id: 'record',
+ icon: 'fiber_manual_record'
});
}
}
- function editItem(apiClient, item) {
- return new Promise(function (resolve, reject) {
- const serverId = apiClient.serverInfo().Id;
+ if (itemHelper.canRefreshMetadata(item, user)) {
+ commands.push({
+ name: globalize.translate('RefreshMetadata'),
+ id: 'refresh',
+ icon: 'refresh'
+ });
+ }
- if (item.Type === 'Timer') {
- import('./recordingcreator/recordingeditor').then(({ default: recordingEditor }) => {
- recordingEditor.show(item.Id, serverId).then(resolve, reject);
+ if (item.PlaylistItemId && options.playlistId) {
+ commands.push({
+ name: globalize.translate('RemoveFromPlaylist'),
+ id: 'removefromplaylist',
+ icon: 'remove'
+ });
+ }
+
+ if (options.collectionId) {
+ commands.push({
+ name: globalize.translate('RemoveFromCollection'),
+ id: 'removefromcollection',
+ icon: 'remove'
+ });
+ }
+
+ if (!browser.tv && options.share === true && itemHelper.canShare(item, user)) {
+ commands.push({
+ name: globalize.translate('Share'),
+ id: 'share',
+ icon: 'share'
+ });
+ }
+
+ if (options.sync !== false && itemHelper.canSync(user, item)) {
+ commands.push({
+ name: globalize.translate('Sync'),
+ id: 'sync',
+ icon: 'sync'
+ });
+ }
+
+ if (options.openAlbum !== false && item.AlbumId && item.MediaType !== 'Photo') {
+ commands.push({
+ name: globalize.translate('ViewAlbum'),
+ id: 'album',
+ icon: 'album'
+ });
+ }
+ // Show Album Artist by default, as a song can have multiple artists, which specific one would this option refer to?
+ // Although some albums can have multiple artists, it's not as common as songs.
+ if (options.openArtist !== false && item.AlbumArtists && item.AlbumArtists.length) {
+ commands.push({
+ name: globalize.translate('ViewAlbumArtist'),
+ id: 'artist',
+ icon: 'person'
+ });
+ }
+
+ return commands;
+}
+
+function getResolveFunction(resolve, id, changed, deleted) {
+ return function () {
+ resolve({
+ command: id,
+ updated: changed,
+ deleted: deleted
+ });
+ };
+}
+
+function executeCommand(item, id, options) {
+ const itemId = item.Id;
+ const serverId = item.ServerId;
+ const apiClient = ServerConnections.getApiClient(serverId);
+
+ return new Promise(function (resolve, reject) {
+ // eslint-disable-next-line sonarjs/max-switch-cases
+ switch (id) {
+ case 'addtocollection':
+ import('./collectionEditor/collectionEditor').then(({ default: CollectionEditor }) => {
+ const collectionEditor = new CollectionEditor();
+ collectionEditor.show({
+ items: [itemId],
+ serverId: serverId
+ }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
});
- } else if (item.Type === 'SeriesTimer') {
- import('./recordingcreator/seriesrecordingeditor').then(({ default: recordingEditor }) => {
- recordingEditor.show(item.Id, serverId).then(resolve, reject);
+ break;
+ case 'addtoplaylist':
+ import('./playlisteditor/playlisteditor').then(({ default: playlistEditor }) => {
+ new playlistEditor({
+ items: [itemId],
+ serverId: serverId
+ }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
});
- } else {
- import('./metadataEditor/metadataEditor').then(({ default: metadataEditor }) => {
- metadataEditor.show(item.Id, serverId).then(resolve, reject);
+ break;
+ case 'download':
+ import('../scripts/fileDownloader').then((fileDownloader) => {
+ const downloadHref = apiClient.getItemDownloadUrl(itemId);
+ fileDownloader.download([{
+ url: downloadHref,
+ itemId: itemId,
+ serverId: serverId,
+ title: item.Name,
+ filename: item.Path.replace(/^.*[\\/]/, '')
+ }]);
+ getResolveFunction(getResolveFunction(resolve, id), id)();
});
+ break;
+ case 'downloadall': {
+ const downloadEpisodes = episodes => {
+ import('../scripts/fileDownloader').then((fileDownloader) => {
+ const downloads = episodes.map(episode => {
+ const downloadHref = apiClient.getItemDownloadUrl(episode.Id);
+ return {
+ url: downloadHref,
+ itemId: episode.Id,
+ serverId: serverId,
+ title: episode.Name,
+ filename: episode.Path.replace(/^.*[\\/]/, '')
+ };
+ });
+
+ fileDownloader.download(downloads);
+ });
+ };
+ const downloadSeasons = seasons => {
+ Promise.all(seasons.map(seasonItem => {
+ return apiClient.getEpisodes(seasonItem.SeriesId, {
+ seasonId: seasonItem.Id,
+ userId: options.user.Id,
+ Fields: 'CanDownload,Path'
+ });
+ }
+ )).then(seasonData => {
+ downloadEpisodes(seasonData.map(season => season.Items).flat());
+ });
+ };
+
+ if (item.Type === 'Season') {
+ downloadSeasons([item]);
+ } else if (item.Type === 'Series') {
+ apiClient.getSeasons(item.Id, {
+ userId: options.user.Id,
+ Fields: 'ItemCounts'
+ }).then(seasons => downloadSeasons(seasons.Items));
+ }
+
+ getResolveFunction(getResolveFunction(resolve, id), id)();
+ break;
}
- });
- }
-
- function deleteItem(apiClient, item) {
- return new Promise(function (resolve, reject) {
- import('../scripts/deleteHelper').then((deleteHelper) => {
- deleteHelper.deleteItem({
- item: item,
- navigate: false
+ case 'copy-stream': {
+ const downloadHref = apiClient.getItemDownloadUrl(itemId);
+ copy(downloadHref).then(() => {
+ toast(globalize.translate('CopyStreamURLSuccess'));
+ }).catch(() => {
+ prompt(globalize.translate('CopyStreamURL'), downloadHref);
+ });
+ getResolveFunction(resolve, id)();
+ break;
+ }
+ case 'editsubtitles':
+ import('./subtitleeditor/subtitleeditor').then(({ default: subtitleEditor }) => {
+ subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
+ });
+ break;
+ case 'edit':
+ editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
+ break;
+ case 'editimages':
+ import('./imageeditor/imageeditor').then((imageEditor) => {
+ imageEditor.show({
+ itemId: itemId,
+ serverId: serverId
+ }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
+ });
+ break;
+ case 'identify':
+ import('./itemidentifier/itemidentifier').then((itemIdentifier) => {
+ itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
+ });
+ break;
+ case 'moremediainfo':
+ import('./itemMediaInfo/itemMediaInfo').then((itemMediaInfo) => {
+ itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
+ });
+ break;
+ case 'refresh':
+ refresh(apiClient, item);
+ getResolveFunction(resolve, id)();
+ break;
+ case 'open':
+ appRouter.showItem(item);
+ getResolveFunction(resolve, id)();
+ break;
+ case 'play':
+ play(item, false);
+ getResolveFunction(resolve, id)();
+ break;
+ case 'resume':
+ play(item, true);
+ getResolveFunction(resolve, id)();
+ break;
+ case 'queue':
+ play(item, false, true);
+ getResolveFunction(resolve, id)();
+ break;
+ case 'queuenext':
+ play(item, false, true, true);
+ getResolveFunction(resolve, id)();
+ break;
+ case 'stopPlayback':
+ playbackManager.stop();
+ break;
+ case 'clearQueue':
+ playbackManager.clearQueue();
+ break;
+ case 'record':
+ import('./recordingcreator/recordingcreator').then(({ default: recordingCreator }) => {
+ recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
+ });
+ break;
+ case 'shuffle':
+ playbackManager.shuffle(item);
+ getResolveFunction(resolve, id)();
+ break;
+ case 'instantmix':
+ playbackManager.instantMix(item);
+ getResolveFunction(resolve, id)();
+ break;
+ case 'delete':
+ deleteItem(apiClient, item).then(getResolveFunction(resolve, id, true, true), getResolveFunction(resolve, id));
+ break;
+ case 'share':
+ navigator.share({
+ title: item.Name,
+ text: item.Overview,
+ url: `${apiClient.serverAddress()}/web/index.html${appRouter.getRouteUrl(item)}`
+ });
+ break;
+ case 'album':
+ appRouter.showItem(item.AlbumId, item.ServerId);
+ getResolveFunction(resolve, id)();
+ break;
+ case 'artist':
+ appRouter.showItem(item.AlbumArtists[0].Id, item.ServerId);
+ getResolveFunction(resolve, id)();
+ break;
+ case 'playallfromhere':
+ getResolveFunction(resolve, id)();
+ break;
+ case 'queueallfromhere':
+ getResolveFunction(resolve, id)();
+ break;
+ case 'removefromplaylist':
+ apiClient.ajax({
+ url: apiClient.getUrl('Playlists/' + options.playlistId + '/Items', {
+ EntryIds: [item.PlaylistItemId].join(',')
+ }),
+ type: 'DELETE'
}).then(function () {
- resolve(true);
- }, reject);
- });
- });
- }
+ getResolveFunction(resolve, id, true)();
+ });
+ break;
+ case 'removefromcollection':
+ apiClient.ajax({
+ type: 'DELETE',
+ url: apiClient.getUrl('Collections/' + options.collectionId + '/Items', {
- function refresh(apiClient, item) {
- import('./refreshdialog/refreshdialog').then(({ default: refreshDialog }) => {
- new refreshDialog({
- itemIds: [item.Id],
- serverId: apiClient.serverInfo().Id,
- mode: item.Type === 'CollectionFolder' ? 'scan' : null
- }).show();
- });
- }
-
- export function show(options) {
- const commands = getCommands(options);
- if (!commands.length) {
- return Promise.reject();
+ Ids: [item.Id].join(',')
+ })
+ }).then(function () {
+ getResolveFunction(resolve, id, true)();
+ });
+ break;
+ case 'canceltimer':
+ deleteTimer(apiClient, item, resolve, id);
+ break;
+ case 'cancelseriestimer':
+ deleteSeriesTimer(apiClient, item, resolve, id);
+ break;
+ default:
+ reject();
+ break;
}
+ });
+}
- return actionsheet.show({
- items: commands,
- positionTo: options.positionTo,
- resolveOnClick: ['share']
- }).then(function (id) {
- return executeCommand(options.item, id, options);
+function deleteTimer(apiClient, item, resolve, command) {
+ import('./recordingcreator/recordinghelper').then(({ default: recordingHelper }) => {
+ const timerId = item.TimerId || item.Id;
+ recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
+ getResolveFunction(resolve, command, true)();
});
+ });
+}
+
+function deleteSeriesTimer(apiClient, item, resolve, command) {
+ import('./recordingcreator/recordinghelper').then(({ default: recordingHelper }) => {
+ recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
+ getResolveFunction(resolve, command, true)();
+ });
+ });
+}
+
+function play(item, resume, queue, queueNext) {
+ let method = 'play';
+ if (queue) {
+ if (queueNext) {
+ method = 'queueNext';
+ } else {
+ method = 'queue';
+ }
}
-/* eslint-enable indent */
+ let startPosition = 0;
+ if (resume && item.UserData && item.UserData.PlaybackPositionTicks) {
+ startPosition = item.UserData.PlaybackPositionTicks;
+ }
+
+ if (item.Type === 'Program') {
+ playbackManager[method]({
+ ids: [item.ChannelId],
+ startPositionTicks: startPosition,
+ serverId: item.ServerId
+ });
+ } else {
+ playbackManager[method]({
+ items: [item],
+ startPositionTicks: startPosition
+ });
+ }
+}
+
+function editItem(apiClient, item) {
+ return new Promise(function (resolve, reject) {
+ const serverId = apiClient.serverInfo().Id;
+
+ if (item.Type === 'Timer') {
+ import('./recordingcreator/recordingeditor').then(({ default: recordingEditor }) => {
+ recordingEditor.show(item.Id, serverId).then(resolve, reject);
+ });
+ } else if (item.Type === 'SeriesTimer') {
+ import('./recordingcreator/seriesrecordingeditor').then(({ default: recordingEditor }) => {
+ recordingEditor.show(item.Id, serverId).then(resolve, reject);
+ });
+ } else {
+ import('./metadataEditor/metadataEditor').then(({ default: metadataEditor }) => {
+ metadataEditor.show(item.Id, serverId).then(resolve, reject);
+ });
+ }
+ });
+}
+
+function deleteItem(apiClient, item) {
+ return new Promise(function (resolve, reject) {
+ import('../scripts/deleteHelper').then((deleteHelper) => {
+ deleteHelper.deleteItem({
+ item: item,
+ navigate: false
+ }).then(function () {
+ resolve(true);
+ }, reject);
+ });
+ });
+}
+
+function refresh(apiClient, item) {
+ import('./refreshdialog/refreshdialog').then(({ default: refreshDialog }) => {
+ new refreshDialog({
+ itemIds: [item.Id],
+ serverId: apiClient.serverInfo().Id,
+ mode: item.Type === 'CollectionFolder' ? 'scan' : null
+ }).show();
+ });
+}
+
+export function show(options) {
+ const commands = getCommands(options);
+ if (!commands.length) {
+ return Promise.reject();
+ }
+
+ return actionsheet.show({
+ items: commands,
+ positionTo: options.positionTo,
+ resolveOnClick: ['share']
+ }).then(function (id) {
+ return executeCommand(options.item, id, options);
+ });
+}
export default {
getCommands: getCommands,
diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js
index ac04df4815..0eb1348760 100644
--- a/src/components/itemMediaInfo/itemMediaInfo.js
+++ b/src/components/itemMediaInfo/itemMediaInfo.js
@@ -1,4 +1,3 @@
-/* eslint-disable indent */
/**
* Module for display media info.
@@ -30,229 +29,228 @@ const copyButtonHtml = layoutManager.tv ? '' :
>`;
const attributeDelimiterHtml = layoutManager.tv ? '' : ': ';
- function setMediaInfo(user, page, item) {
- let html = item.MediaSources.map(version => {
- return getMediaSourceHtml(user, item, version);
- }).join('');
- if (item.MediaSources.length > 1) {
- html = `';
+ }
+
+ html += '' + globalize.translate('Programs') + '';
+
+ html += '' + globalize.translate('Guide') + '';
+
+ html += '' + globalize.translate('Channels') + '';
+
+ html += '';
- html += '
';
+ }) + '" class="raised">' + globalize.translate('Recordings') + '';
- if (enableScrollX()) {
- html += ''; - html += globalize.translate('NextUp'); - html += '
'; - html += ''; - html += ''; - } else { - html += ''; - html += globalize.translate('NextUp'); - html += '
'; - } - html += '';
- html += '
'].join('');
+
+ page.querySelector('#imageOutput').innerHTML = html;
+ page.querySelector('#dropImageText').classList.add('hide');
+ page.querySelector('#fldUpload').classList.remove('hide');
+ };
+ })(file);
+
+ // Read in the image file as a data URL.
+ reader.readAsDataURL(file);
+}
+
+function onSubmit(e) {
+ const file = currentFile;
+
+ if (!file) {
+ return false;
}
- function setFiles(page, files) {
- const file = files[0];
-
- if (!file || !file.type.match('image.*')) {
- page.querySelector('#imageOutput').innerHTML = '';
- page.querySelector('#fldUpload').classList.add('hide');
- currentFile = null;
- return;
- }
-
- currentFile = file;
-
- const reader = new FileReader();
-
- reader.onerror = onFileReaderError;
- reader.onloadstart = () => {
- page.querySelector('#fldUpload').classList.add('hide');
- };
- reader.onabort = () => {
- loading.hide();
- console.debug('File read cancelled');
- };
-
- // Closure to capture the file information.
- reader.onload = (theFile => {
- return e => {
- // Render thumbnail.
- const html = [''].join('');
-
- page.querySelector('#imageOutput').innerHTML = html;
- page.querySelector('#dropImageText').classList.add('hide');
- page.querySelector('#fldUpload').classList.remove('hide');
- };
- })(file);
-
- // Read in the image file as a data URL.
- reader.readAsDataURL(file);
- }
-
- function onSubmit(e) {
- const file = currentFile;
-
- if (!file) {
- return false;
- }
-
- if (!file.type.startsWith('image/')) {
- toast(globalize.translate('MessageImageFileTypeAllowed'));
- e.preventDefault();
- return false;
- }
-
- loading.show();
-
- const dlg = dom.parentWithClass(this, 'dialog');
-
- const imageType = dlg.querySelector('#selectImageType').value;
- if (imageType === 'None') {
- toast(globalize.translate('MessageImageTypeNotSelected'));
- e.preventDefault();
- return false;
- }
-
- ServerConnections.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
- dlg.querySelector('#uploadImage').value = '';
-
- loading.hide();
- hasChanges = true;
- dialogHelper.close(dlg);
- });
-
+ if (!file.type.startsWith('image/')) {
+ toast(globalize.translate('MessageImageFileTypeAllowed'));
e.preventDefault();
return false;
}
- function initEditor(page) {
- page.querySelector('form').addEventListener('submit', onSubmit);
+ loading.show();
- page.querySelector('#uploadImage').addEventListener('change', function () {
- setFiles(page, this.files);
- });
+ const dlg = dom.parentWithClass(this, 'dialog');
- page.querySelector('.btnBrowse').addEventListener('click', () => {
- page.querySelector('#uploadImage').click();
- });
+ const imageType = dlg.querySelector('#selectImageType').value;
+ if (imageType === 'None') {
+ toast(globalize.translate('MessageImageTypeNotSelected'));
+ e.preventDefault();
+ return false;
}
- function showEditor(options, resolve) {
- options = options || {};
+ ServerConnections.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
+ dlg.querySelector('#uploadImage').value = '';
- currentItemId = options.itemId;
- currentServerId = options.serverId;
+ loading.hide();
+ hasChanges = true;
+ dialogHelper.close(dlg);
+ });
- const dialogOptions = {
- removeOnClose: true
- };
+ e.preventDefault();
+ return false;
+}
+function initEditor(page) {
+ page.querySelector('form').addEventListener('submit', onSubmit);
+
+ page.querySelector('#uploadImage').addEventListener('change', function () {
+ setFiles(page, this.files);
+ });
+
+ page.querySelector('.btnBrowse').addEventListener('click', () => {
+ page.querySelector('#uploadImage').click();
+ });
+}
+
+function showEditor(options, resolve) {
+ options = options || {};
+
+ currentItemId = options.itemId;
+ currentServerId = options.serverId;
+
+ const dialogOptions = {
+ removeOnClose: true
+ };
+
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
+ } else {
+ dialogOptions.size = 'small';
+ }
+
+ const dlg = dialogHelper.createDialog(dialogOptions);
+
+ dlg.classList.add('formDialog');
+
+ dlg.innerHTML = globalize.translateHtml(template, 'core');
+
+ if (layoutManager.tv) {
+ scrollHelper.centerFocus.on(dlg, false);
+ }
+
+ // Has to be assigned a z-index after the call to .open()
+ dlg.addEventListener('close', () => {
if (layoutManager.tv) {
- dialogOptions.size = 'fullscreen';
- } else {
- dialogOptions.size = 'small';
+ scrollHelper.centerFocus.off(dlg, false);
}
- const dlg = dialogHelper.createDialog(dialogOptions);
+ loading.hide();
+ resolve(hasChanges);
+ });
- dlg.classList.add('formDialog');
+ dialogHelper.open(dlg);
- dlg.innerHTML = globalize.translateHtml(template, 'core');
+ initEditor(dlg);
- if (layoutManager.tv) {
- scrollHelper.centerFocus.on(dlg, false);
- }
+ dlg.querySelector('#selectImageType').value = options.imageType || 'Primary';
- // Has to be assigned a z-index after the call to .open()
- dlg.addEventListener('close', () => {
- if (layoutManager.tv) {
- scrollHelper.centerFocus.off(dlg, false);
- }
+ dlg.querySelector('.btnCancel').addEventListener('click', () => {
+ dialogHelper.close(dlg);
+ });
+}
- loading.hide();
- resolve(hasChanges);
- });
+export function show(options) {
+ return new Promise(resolve => {
+ hasChanges = false;
- dialogHelper.open(dlg);
+ showEditor(options, resolve);
+ });
+}
- initEditor(dlg);
-
- dlg.querySelector('#selectImageType').value = options.imageType || 'Primary';
-
- dlg.querySelector('.btnCancel').addEventListener('click', () => {
- dialogHelper.close(dlg);
- });
- }
-
- export function show(options) {
- return new Promise(resolve => {
- hasChanges = false;
-
- showEditor(options, resolve);
- });
- }
-
-/* eslint-enable indent */
export default {
show: show
};
diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js
index b2c9033bc3..6a7982cca9 100644
--- a/src/components/imageeditor/imageeditor.js
+++ b/src/components/imageeditor/imageeditor.js
@@ -18,441 +18,439 @@ import alert from '../alert';
import confirm from '../confirm/confirm';
import template from './imageeditor.template.html';
-/* eslint-disable indent */
+const enableFocusTransform = !browser.slow && !browser.edge;
- const enableFocusTransform = !browser.slow && !browser.edge;
+let currentItem;
+let hasChanges = false;
- let currentItem;
- let hasChanges = false;
+function getBaseRemoteOptions() {
+ return { itemId: currentItem.Id };
+}
- function getBaseRemoteOptions() {
- return { itemId: currentItem.Id };
+function reload(page, item, focusContext) {
+ loading.show();
+
+ let apiClient;
+
+ if (item) {
+ apiClient = ServerConnections.getApiClient(item.ServerId);
+ reloadItem(page, item, apiClient, focusContext);
+ } else {
+ apiClient = ServerConnections.getApiClient(currentItem.ServerId);
+ apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (itemToReload) {
+ reloadItem(page, itemToReload, apiClient, focusContext);
+ });
}
+}
- function reload(page, item, focusContext) {
- loading.show();
-
- let apiClient;
-
- if (item) {
- apiClient = ServerConnections.getApiClient(item.ServerId);
- reloadItem(page, item, apiClient, focusContext);
- } else {
- apiClient = ServerConnections.getApiClient(currentItem.ServerId);
- apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (itemToReload) {
- reloadItem(page, itemToReload, apiClient, focusContext);
- });
+function addListeners(container, className, eventName, fn) {
+ container.addEventListener(eventName, function (e) {
+ const elem = dom.parentWithClass(e.target, className);
+ if (elem) {
+ fn.call(elem, e);
}
- }
+ });
+}
- function addListeners(container, className, eventName, fn) {
- container.addEventListener(eventName, function (e) {
- const elem = dom.parentWithClass(e.target, className);
- if (elem) {
- fn.call(elem, e);
+function reloadItem(page, item, apiClient, focusContext) {
+ currentItem = item;
+
+ apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) {
+ const btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
+ for (let i = 0, length = btnBrowseAllImages.length; i < length; i++) {
+ if (providers.length) {
+ btnBrowseAllImages[i].classList.remove('hide');
+ } else {
+ btnBrowseAllImages[i].classList.add('hide');
+ }
+ }
+
+ apiClient.getItemImageInfos(currentItem.Id).then(function (imageInfos) {
+ renderStandardImages(page, apiClient, item, imageInfos, providers);
+ renderBackdrops(page, apiClient, item, imageInfos, providers);
+ loading.hide();
+
+ if (layoutManager.tv) {
+ focusManager.autoFocus((focusContext || page));
}
});
+ });
+}
+
+function getImageUrl(item, apiClient, type, index, options) {
+ options = options || {};
+ options.type = type;
+ options.index = index;
+
+ if (type === 'Backdrop') {
+ options.tag = item.BackdropImageTags[index];
+ } else if (type === 'Primary') {
+ options.tag = item.PrimaryImageTag || item.ImageTags[type];
+ } else {
+ options.tag = item.ImageTags[type];
}
- function reloadItem(page, item, apiClient, focusContext) {
- currentItem = item;
+ // For search hints
+ return apiClient.getScaledImageUrl(item.Id || item.ItemId, options);
+}
- apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) {
- const btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
- for (let i = 0, length = btnBrowseAllImages.length; i < length; i++) {
- if (providers.length) {
- btnBrowseAllImages[i].classList.remove('hide');
- } else {
- btnBrowseAllImages[i].classList.add('hide');
- }
+function getCardHtml(image, apiClient, options) {
+ // TODO move card creation code to Card component
+
+ let html = '';
+
+ let cssClass = 'card scalableCard imageEditorCard';
+ const cardBoxCssClass = 'cardBox visualCardBox';
+
+ cssClass += ' backdropCard backdropCard-scalable';
+
+ if (options.tagName === 'button') {
+ cssClass += ' btnImageCard';
+
+ if (layoutManager.tv) {
+ cssClass += ' show-focus';
+
+ if (enableFocusTransform) {
+ cssClass += ' show-animation';
+ }
+ }
+
+ html += '
';
+ html += '';
+
+ return html;
+}
+
+function deleteImage(context, itemId, type, index, apiClient, enableConfirmation) {
+ const afterConfirm = function () {
+ apiClient.deleteItemImage(itemId, type, index).then(function () {
+ hasChanges = true;
+ reload(context);
+ });
+ };
+
+ if (!enableConfirmation) {
+ afterConfirm();
+ return;
+ }
+
+ confirm({
+ text: globalize.translate('ConfirmDeleteImage'),
+ confirmText: globalize.translate('Delete'),
+ primary: 'delete'
+ }).then(afterConfirm);
+}
+
+function moveImage(context, apiClient, itemId, type, index, newIndex, focusContext) {
+ apiClient.updateItemImageIndex(itemId, type, index, newIndex).then(function () {
+ hasChanges = true;
+ reload(context, null, focusContext);
+ }, function () {
+ alert(globalize.translate('ErrorDefault'));
+ });
+}
+
+function renderImages(page, item, apiClient, images, imageProviders, elem) {
+ let html = '';
+
+ let imageSize = 300;
+ const windowSize = dom.getWindowSize();
+ if (windowSize.innerWidth >= 1280) {
+ imageSize = Math.round(windowSize.innerWidth / 4);
+ }
+
+ const tagName = layoutManager.tv ? 'button' : 'div';
+ const enableFooterButtons = !layoutManager.tv;
+
+ for (let i = 0, length = images.length; i < length; i++) {
+ const image = images[i];
+ const options = { index: i, numImages: length, imageProviders, imageSize, tagName, enableFooterButtons };
+ html += getCardHtml(image, apiClient, options);
+ }
+
+ elem.innerHTML = html;
+ imageLoader.lazyChildren(elem);
+}
+
+function renderStandardImages(page, apiClient, item, imageInfos, imageProviders) {
+ const images = imageInfos.filter(function (i) {
+ return i.ImageType !== 'Backdrop' && i.ImageType !== 'Chapter';
+ });
+
+ renderImages(page, item, apiClient, images, imageProviders, page.querySelector('#images'));
+}
+
+function renderBackdrops(page, apiClient, item, imageInfos, imageProviders) {
+ const images = imageInfos.filter(function (i) {
+ return i.ImageType === 'Backdrop';
+ }).sort(function (a, b) {
+ return a.ImageIndex - b.ImageIndex;
+ });
+
+ if (images.length) {
+ page.querySelector('#backdropsContainer', page).classList.remove('hide');
+ renderImages(page, item, apiClient, images, imageProviders, page.querySelector('#backdrops'));
+ } else {
+ page.querySelector('#backdropsContainer', page).classList.add('hide');
+ }
+}
+
+function showImageDownloader(page, imageType) {
+ import('../imageDownloader/imageDownloader').then((ImageDownloader) => {
+ ImageDownloader.show(
+ currentItem.Id,
+ currentItem.ServerId,
+ currentItem.Type,
+ imageType,
+ currentItem.Type == 'Season' ? currentItem.ParentId : null
+ ).then(function () {
+ hasChanges = true;
+ reload(page);
+ });
+ });
+}
+
+function showActionSheet(context, imageCard) {
+ const itemId = imageCard.getAttribute('data-id');
+ const serverId = imageCard.getAttribute('data-serverid');
+ const apiClient = ServerConnections.getApiClient(serverId);
+
+ const type = imageCard.getAttribute('data-imagetype');
+ const index = parseInt(imageCard.getAttribute('data-index'), 10);
+ const providerCount = parseInt(imageCard.getAttribute('data-providers'), 10);
+ const numImages = parseInt(imageCard.getAttribute('data-numimages'), 10);
+
+ import('../actionSheet/actionSheet').then(({ default: actionSheet }) => {
+ const commands = [];
+
+ commands.push({
+ name: globalize.translate('Delete'),
+ id: 'delete'
+ });
if (type === 'Backdrop') {
- options.tag = item.BackdropImageTags[index];
- } else if (type === 'Primary') {
- options.tag = item.PrimaryImageTag || item.ImageTags[type];
- } else {
- options.tag = item.ImageTags[type];
- }
-
- // For search hints
- return apiClient.getScaledImageUrl(item.Id || item.ItemId, options);
- }
-
- function getCardHtml(image, apiClient, options) {
- // TODO move card creation code to Card component
-
- let html = '';
-
- let cssClass = 'card scalableCard imageEditorCard';
- const cardBoxCssClass = 'cardBox visualCardBox';
-
- cssClass += ' backdropCard backdropCard-scalable';
-
- if (options.tagName === 'button') {
- cssClass += ' btnImageCard';
-
- if (layoutManager.tv) {
- cssClass += ' show-focus';
-
- if (enableFocusTransform) {
- cssClass += ' show-animation';
- }
+ if (index > 0) {
+ commands.push({
+ name: globalize.translate('MoveLeft'),
+ id: 'moveleft'
+ });
}
- html += '';
- } else {
- html += '
';
-
- elem.classList.add('hide');
- elem.innerHTML = html;
-
- const itemsContainer = elem.querySelector('.itemsContainer');
- itemsContainer.fetchData = getNextUpFetchFn(apiClient.serverId(), userSettings);
- itemsContainer.getItemsHtml = getNextUpItemsHtmlFn(userSettings.useEpisodeImagesInNextUpAndResume());
- itemsContainer.parentContainer = elem;
- }
-
- function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
- return function () {
- const apiClient = ServerConnections.getApiClient(serverId);
- return apiClient.getLiveTvRecordings({
- userId: apiClient.getCurrentUserId(),
- Limit: enableScrollX() ? 12 : 5,
- Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
- EnableTotalRecordCount: false,
- IsLibraryItem: activeRecordingsOnly ? null : false,
- IsInProgress: activeRecordingsOnly ? true : null
- });
- };
- }
-
- function getLatestRecordingItemsHtml(activeRecordingsOnly) {
- return function (items) {
- return cardBuilder.getCardsHtml({
- items: items,
- shape: enableScrollX() ? 'autooverflow' : 'auto',
- showTitle: true,
- showParentTitle: true,
- coverImage: true,
- lazy: true,
- showDetailsMenu: true,
- centerText: true,
- overlayText: false,
- showYear: true,
- lines: 2,
- overlayPlayButton: !activeRecordingsOnly,
- allowBottomPadding: !enableScrollX(),
- preferThumb: true,
- cardLayout: false,
- overlayMoreButton: activeRecordingsOnly,
- action: activeRecordingsOnly ? 'none' : null,
- centerPlayButton: activeRecordingsOnly
- });
- };
- }
-
- function loadLatestLiveTvRecordings(elem, activeRecordingsOnly, apiClient) {
- const title = activeRecordingsOnly ?
- globalize.translate('HeaderActiveRecordings') :
- globalize.translate('HeaderLatestRecordings');
-
- let html = '';
-
- html += '';
- }
+ html += '' + globalize.translate('Schedule') + '';
+
+ html += '' + globalize.translate('Series') + '';
- if (enableScrollX()) {
html += '
';
- }
- html += '';
- html += '
';
-
- if (enableScrollX()) {
- html += '' + title + '
'; - html += '';
- html += '
';
+
+ html += '';
- } else {
- html += '
';
+ html += '';
- }
-
- if (enableScrollX()) {
+ if (enableScrollX()) {
+ html += '
';
+ }
html += '';
+ html += '
';
+ });
+}
- elem.classList.add('hide');
- elem.innerHTML = html;
+function getNextUpFetchFn(serverId, userSettings) {
+ return function () {
+ const apiClient = ServerConnections.getApiClient(serverId);
+ const oldestDateForNextUp = new Date();
+ oldestDateForNextUp.setDate(oldestDateForNextUp.getDate() - userSettings.maxDaysForNextUp());
+ return apiClient.getNextUpEpisodes({
+ Limit: enableScrollX() ? 24 : 15,
+ Fields: 'PrimaryImageAspectRatio,DateCreated,BasicSyncInfo,Path,MediaSourceCount',
+ UserId: apiClient.getCurrentUserId(),
+ ImageTypeLimit: 1,
+ EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
+ EnableTotalRecordCount: false,
+ DisableFirstEpisode: false,
+ NextUpDateCutoff: oldestDateForNextUp.toISOString(),
+ EnableRewatching: userSettings.enableRewatchingInNextUp()
+ });
+ };
+}
- const itemsContainer = elem.querySelector('.itemsContainer');
- itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly);
- itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly);
- itemsContainer.parentContainer = elem;
+function getNextUpItemsHtmlFn(useEpisodeImages) {
+ return function (items) {
+ const cardLayout = false;
+ return cardBuilder.getCardsHtml({
+ items: items,
+ preferThumb: true,
+ inheritThumb: !useEpisodeImages,
+ shape: getThumbShape(),
+ overlayText: false,
+ showTitle: true,
+ showParentTitle: true,
+ lazy: true,
+ overlayPlayButton: true,
+ context: 'home',
+ centerText: !cardLayout,
+ allowBottomPadding: !enableScrollX(),
+ cardLayout: cardLayout
+ });
+ };
+}
+
+function loadNextUp(elem, apiClient, userSettings) {
+ let html = '';
+
+ html += '';
+
+ if (!layoutManager.tv) {
+ html += '';
+ html += '
';
+
+ if (enableScrollX()) {
+ html += ''; + html += globalize.translate('HeaderOnNow'); + html += '
'; + html += ''; + html += ''; + } else { + html += '' + globalize.translate('HeaderOnNow') + '
'; + } + html += '';
+ html += '
';
+
+ elem.innerHTML = html;
+
+ const itemsContainer = elem.querySelector('.itemsContainer');
+ itemsContainer.parentContainer = elem;
+ itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId());
+ itemsContainer.getItemsHtml = getOnNowItemsHtml;
}
- html += '';
+ } else {
+ html += '
';
+ html += '';
+ }
+
+ if (enableScrollX()) {
+ html += '
';
+ }
+
+ html += '';
+ if (!layoutManager.tv) {
+ html += '';
+ html += '
';
+
+ if (enableScrollX()) {
+ html += ''; + html += globalize.translate('NextUp'); + html += '
'; + html += ''; + html += ''; + } else { + html += ''; + html += globalize.translate('NextUp'); + html += '
'; } + html += '';
+ html += '
';
+
+ html += '';
+
+ return html;
+}
+
+function reloadBrowsableImagesFirstPage(page, apiClient) {
+ browsableImageStartIndex = 0;
+ reloadBrowsableImages(page, apiClient);
+}
+
+function initEditor(page, apiClient) {
+ page.querySelector('#selectBrowsableImageType').addEventListener('change', function () {
+ browsableImageType = this.value;
+ selectedProvider = null;
+
+ reloadBrowsableImagesFirstPage(page, apiClient);
+ });
+
+ page.querySelector('#selectImageProvider').addEventListener('change', function () {
+ selectedProvider = this.value;
+
+ reloadBrowsableImagesFirstPage(page, apiClient);
+ });
+
+ page.querySelector('#chkAllLanguages').addEventListener('change', function () {
+ reloadBrowsableImagesFirstPage(page, apiClient);
+ });
+
+ page.querySelector('#chkShowParentImages').addEventListener('change', function () {
+ reloadBrowsableImagesFirstPage(page, apiClient);
+ });
+
+ page.addEventListener('click', function (e) {
+ const btnDownloadRemoteImage = dom.parentWithClass(e.target, 'btnDownloadRemoteImage');
+ if (btnDownloadRemoteImage) {
+ const card = dom.parentWithClass(btnDownloadRemoteImage, 'card');
+ downloadRemoteImage(page, apiClient, card.getAttribute('data-imageurl'), card.getAttribute('data-imagetype'), card.getAttribute('data-imageprovider'));
+ return;
+ }
+
+ const btnImageCard = dom.parentWithClass(e.target, 'btnImageCard');
+ if (btnImageCard) {
+ downloadRemoteImage(page, apiClient, btnImageCard.getAttribute('data-imageurl'), btnImageCard.getAttribute('data-imagetype'), btnImageCard.getAttribute('data-imageprovider'));
+ }
+ });
+}
+
+function showEditor(itemId, serverId, itemType) {
+ loading.show();
+
+ const apiClient = ServerConnections.getApiClient(serverId);
+
+ currentItemId = itemId;
+ currentItemType = itemType;
+
+ const dialogOptions = {
+ removeOnClose: true
+ };
+
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
+ } else {
+ dialogOptions.size = 'small';
+ }
+
+ const dlg = dialogHelper.createDialog(dialogOptions);
+
+ dlg.innerHTML = globalize.translateHtml(template, 'core');
+
+ if (layoutManager.tv) {
+ scrollHelper.centerFocus.on(dlg, false);
+ }
+
+ if (browsableParentId) {
+ dlg.querySelector('#lblShowParentImages').classList.remove('hide');
+ }
+
+ // Has to be assigned a z-index after the call to .open()
+ dlg.addEventListener('close', onDialogClosed);
+
+ dialogHelper.open(dlg);
+
+ const editorContent = dlg.querySelector('.formDialogContent');
+ initEditor(editorContent, apiClient);
+
+ dlg.querySelector('.btnCancel').addEventListener('click', function () {
+ dialogHelper.close(dlg);
+ });
+
+ reloadBrowsableImages(editorContent, apiClient);
+}
+
+function onDialogClosed() {
+ const dlg = this;
+
+ if (layoutManager.tv) {
+ scrollHelper.centerFocus.off(dlg, false);
+ }
+
+ loading.hide();
+ if (hasChanges) {
+ currentResolve();
+ } else {
+ currentReject();
+ }
+}
+
export function show(itemId, serverId, itemType, imageType, parentId) {
return new Promise(function (resolve, reject) {
currentResolve = resolve;
@@ -397,4 +395,3 @@ export default {
show: show
};
-/* eslint-enable indent */
diff --git a/src/components/imageOptionsEditor/imageOptionsEditor.js b/src/components/imageOptionsEditor/imageOptionsEditor.js
index 39d2e69df8..0b9e0ad0b7 100644
--- a/src/components/imageOptionsEditor/imageOptionsEditor.js
+++ b/src/components/imageOptionsEditor/imageOptionsEditor.js
@@ -1,4 +1,3 @@
-/* eslint-disable indent */
/**
* Module for image Options Editor.
@@ -13,95 +12,95 @@ import '../../elements/emby-select/emby-select';
import '../../elements/emby-input/emby-input';
import template from './imageOptionsEditor.template.html';
- function getDefaultImageConfig(itemType, type) {
- return {
- Type: type,
- MinWidth: 0,
- Limit: type === 'Primary' ? 1 : 0
- };
- }
+function getDefaultImageConfig(itemType, type) {
+ return {
+ Type: type,
+ MinWidth: 0,
+ Limit: type === 'Primary' ? 1 : 0
+ };
+}
- function findImageOptions(imageOptions, type) {
- return imageOptions.filter(i => {
- return i.Type == type;
- })[0];
- }
+function findImageOptions(imageOptions, type) {
+ return imageOptions.filter(i => {
+ return i.Type == type;
+ })[0];
+}
- function getImageConfig(options, availableOptions, imageType, itemType) {
- return findImageOptions(options.ImageOptions || [], imageType) || findImageOptions(availableOptions.DefaultImageOptions || [], imageType) || getDefaultImageConfig(itemType, imageType);
- }
+function getImageConfig(options, availableOptions, imageType, itemType) {
+ return findImageOptions(options.ImageOptions || [], imageType) || findImageOptions(availableOptions.DefaultImageOptions || [], imageType) || getDefaultImageConfig(itemType, imageType);
+}
- function setVisibilityOfBackdrops(elem, visible) {
- if (visible) {
- elem.classList.remove('hide');
- elem.querySelector('input').setAttribute('required', 'required');
+function setVisibilityOfBackdrops(elem, visible) {
+ if (visible) {
+ elem.classList.remove('hide');
+ elem.querySelector('input').setAttribute('required', 'required');
+ } else {
+ elem.classList.add('hide');
+ elem.querySelector('input').setAttribute('required', '');
+ elem.querySelector('input').removeAttribute('required');
+ }
+}
+
+function loadValues(context, itemType, options, availableOptions) {
+ const supportedImageTypes = availableOptions.SupportedImageTypes || [];
+ setVisibilityOfBackdrops(context.querySelector('.backdropFields'), supportedImageTypes.includes('Backdrop'));
+ Array.prototype.forEach.call(context.querySelectorAll('.imageType'), i => {
+ const imageType = i.getAttribute('data-imagetype');
+ const container = dom.parentWithTag(i, 'LABEL');
+
+ if (!supportedImageTypes.includes(imageType)) {
+ container.classList.add('hide');
} else {
- elem.classList.add('hide');
- elem.querySelector('input').setAttribute('required', '');
- elem.querySelector('input').removeAttribute('required');
+ container.classList.remove('hide');
}
- }
- function loadValues(context, itemType, options, availableOptions) {
- const supportedImageTypes = availableOptions.SupportedImageTypes || [];
- setVisibilityOfBackdrops(context.querySelector('.backdropFields'), supportedImageTypes.includes('Backdrop'));
- Array.prototype.forEach.call(context.querySelectorAll('.imageType'), i => {
- const imageType = i.getAttribute('data-imagetype');
- const container = dom.parentWithTag(i, 'LABEL');
+ if (getImageConfig(options, availableOptions, imageType, itemType).Limit) {
+ i.checked = true;
+ } else {
+ i.checked = false;
+ }
+ });
+ const backdropConfig = getImageConfig(options, availableOptions, 'Backdrop', itemType);
+ context.querySelector('#txtMaxBackdrops').value = backdropConfig.Limit;
+ context.querySelector('#txtMinBackdropDownloadWidth').value = backdropConfig.MinWidth;
+}
- if (!supportedImageTypes.includes(imageType)) {
- container.classList.add('hide');
- } else {
- container.classList.remove('hide');
- }
+function saveValues(context, options) {
+ options.ImageOptions = Array.prototype.map.call(context.querySelectorAll('.imageType:not(.hide)'), c => {
+ return {
+ Type: c.getAttribute('data-imagetype'),
+ Limit: c.checked ? 1 : 0,
+ MinWidth: 0
+ };
+ });
+ options.ImageOptions.push({
+ Type: 'Backdrop',
+ Limit: context.querySelector('#txtMaxBackdrops').value,
+ MinWidth: context.querySelector('#txtMinBackdropDownloadWidth').value
+ });
+}
- if (getImageConfig(options, availableOptions, imageType, itemType).Limit) {
- i.checked = true;
- } else {
- i.checked = false;
- }
- });
- const backdropConfig = getImageConfig(options, availableOptions, 'Backdrop', itemType);
- context.querySelector('#txtMaxBackdrops').value = backdropConfig.Limit;
- context.querySelector('#txtMinBackdropDownloadWidth').value = backdropConfig.MinWidth;
- }
-
- function saveValues(context, options) {
- options.ImageOptions = Array.prototype.map.call(context.querySelectorAll('.imageType:not(.hide)'), c => {
- return {
- Type: c.getAttribute('data-imagetype'),
- Limit: c.checked ? 1 : 0,
- MinWidth: 0
- };
- });
- options.ImageOptions.push({
- Type: 'Backdrop',
- Limit: context.querySelector('#txtMaxBackdrops').value,
- MinWidth: context.querySelector('#txtMinBackdropDownloadWidth').value
- });
- }
-
- function showEditor(itemType, options, availableOptions) {
- const dlg = dialogHelper.createDialog({
- size: 'small',
- removeOnClose: true,
- scrollY: false
- });
- dlg.classList.add('formDialog');
- dlg.innerHTML = globalize.translateHtml(template);
- dlg.addEventListener('close', function () {
- saveValues(dlg, options);
- });
- loadValues(dlg, itemType, options, availableOptions);
- dialogHelper.open(dlg).then(() => {
- return;
- }).catch(() => {
- return;
- });
- dlg.querySelector('.btnCancel').addEventListener('click', function () {
- dialogHelper.close(dlg);
- });
- }
+function showEditor(itemType, options, availableOptions) {
+ const dlg = dialogHelper.createDialog({
+ size: 'small',
+ removeOnClose: true,
+ scrollY: false
+ });
+ dlg.classList.add('formDialog');
+ dlg.innerHTML = globalize.translateHtml(template);
+ dlg.addEventListener('close', function () {
+ saveValues(dlg, options);
+ });
+ loadValues(dlg, itemType, options, availableOptions);
+ dialogHelper.open(dlg).then(() => {
+ return;
+ }).catch(() => {
+ return;
+ });
+ dlg.querySelector('.btnCancel').addEventListener('click', function () {
+ dialogHelper.close(dlg);
+ });
+}
export class editor {
constructor() {
@@ -109,5 +108,4 @@ export class editor {
}
}
-/* eslint-enable indent */
export default editor;
diff --git a/src/components/imageUploader/imageUploader.js b/src/components/imageUploader/imageUploader.js
index 246bf92f7f..c2c70d32ec 100644
--- a/src/components/imageUploader/imageUploader.js
+++ b/src/components/imageUploader/imageUploader.js
@@ -1,4 +1,3 @@
-/* eslint-disable indent */
/**
* Module for imageUploader.
@@ -19,169 +18,168 @@ import ServerConnections from '../ServerConnections';
import toast from '../toast/toast';
import template from './imageUploader.template.html';
- let currentItemId;
- let currentServerId;
- let currentFile;
- let hasChanges = false;
+let currentItemId;
+let currentServerId;
+let currentFile;
+let hasChanges = false;
- function onFileReaderError(evt) {
+function onFileReaderError(evt) {
+ loading.hide();
+
+ switch (evt.target.error.code) {
+ case evt.target.error.NOT_FOUND_ERR:
+ toast(globalize.translate('MessageFileReadError'));
+ break;
+ case evt.target.error.ABORT_ERR:
+ break; // noop
+ default:
+ toast(globalize.translate('MessageFileReadError'));
+ break;
+ }
+}
+
+function setFiles(page, files) {
+ const file = files[0];
+
+ if (!file || !file.type.match('image.*')) {
+ page.querySelector('#imageOutput').innerHTML = '';
+ page.querySelector('#fldUpload').classList.add('hide');
+ currentFile = null;
+ return;
+ }
+
+ currentFile = file;
+
+ const reader = new FileReader();
+
+ reader.onerror = onFileReaderError;
+ reader.onloadstart = () => {
+ page.querySelector('#fldUpload').classList.add('hide');
+ };
+ reader.onabort = () => {
loading.hide();
+ console.debug('File read cancelled');
+ };
- switch (evt.target.error.code) {
- case evt.target.error.NOT_FOUND_ERR:
- toast(globalize.translate('MessageFileReadError'));
- break;
- case evt.target.error.ABORT_ERR:
- break; // noop
- default:
- toast(globalize.translate('MessageFileReadError'));
- break;
- }
+ // Closure to capture the file information.
+ reader.onload = (theFile => {
+ return e => {
+ // Render thumbnail.
+ const html = ['';
+ } else {
+ html += '
';
+
+ elem.classList.add('hide');
+ elem.innerHTML = html;
+
+ const itemsContainer = elem.querySelector('.itemsContainer');
+ itemsContainer.fetchData = getNextUpFetchFn(apiClient.serverId(), userSettings);
+ itemsContainer.getItemsHtml = getNextUpItemsHtmlFn(userSettings.useEpisodeImagesInNextUpAndResume());
+ itemsContainer.parentContainer = elem;
+}
+
+function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
+ return function () {
+ const apiClient = ServerConnections.getApiClient(serverId);
+ return apiClient.getLiveTvRecordings({
+ userId: apiClient.getCurrentUserId(),
+ Limit: enableScrollX() ? 12 : 5,
+ Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
+ EnableTotalRecordCount: false,
+ IsLibraryItem: activeRecordingsOnly ? null : false,
+ IsInProgress: activeRecordingsOnly ? true : null
+ });
+ };
+}
+
+function getLatestRecordingItemsHtml(activeRecordingsOnly) {
+ return function (items) {
+ return cardBuilder.getCardsHtml({
+ items: items,
+ shape: enableScrollX() ? 'autooverflow' : 'auto',
+ showTitle: true,
+ showParentTitle: true,
+ coverImage: true,
+ lazy: true,
+ showDetailsMenu: true,
+ centerText: true,
+ overlayText: false,
+ showYear: true,
+ lines: 2,
+ overlayPlayButton: !activeRecordingsOnly,
+ allowBottomPadding: !enableScrollX(),
+ preferThumb: true,
+ cardLayout: false,
+ overlayMoreButton: activeRecordingsOnly,
+ action: activeRecordingsOnly ? 'none' : null,
+ centerPlayButton: activeRecordingsOnly
+ });
+ };
+}
+
+function loadLatestLiveTvRecordings(elem, activeRecordingsOnly, apiClient) {
+ const title = activeRecordingsOnly ?
+ globalize.translate('HeaderActiveRecordings') :
+ globalize.translate('HeaderLatestRecordings');
+
+ let html = '';
+
+ html += '';
+ }
+
+ if (enableScrollX()) {
+ html += '
';
+ }
+ html += '';
+ html += '
';
+
+ if (enableScrollX()) {
+ html += '' + title + '
'; + html += '';
+ html += '
';
-
- html += '';
-
- return html;
- }
-
- function reloadBrowsableImagesFirstPage(page, apiClient) {
- browsableImageStartIndex = 0;
- reloadBrowsableImages(page, apiClient);
- }
-
- function initEditor(page, apiClient) {
- page.querySelector('#selectBrowsableImageType').addEventListener('change', function () {
- browsableImageType = this.value;
- selectedProvider = null;
-
- reloadBrowsableImagesFirstPage(page, apiClient);
+ const providersHtml = result.Providers.map(function (p) {
+ return '';
});
- page.querySelector('#selectImageProvider').addEventListener('change', function () {
- selectedProvider = this.value;
-
- reloadBrowsableImagesFirstPage(page, apiClient);
- });
-
- page.querySelector('#chkAllLanguages').addEventListener('change', function () {
- reloadBrowsableImagesFirstPage(page, apiClient);
- });
-
- page.querySelector('#chkShowParentImages').addEventListener('change', function () {
- reloadBrowsableImagesFirstPage(page, apiClient);
- });
-
- page.addEventListener('click', function (e) {
- const btnDownloadRemoteImage = dom.parentWithClass(e.target, 'btnDownloadRemoteImage');
- if (btnDownloadRemoteImage) {
- const card = dom.parentWithClass(btnDownloadRemoteImage, 'card');
- downloadRemoteImage(page, apiClient, card.getAttribute('data-imageurl'), card.getAttribute('data-imagetype'), card.getAttribute('data-imageprovider'));
- return;
- }
-
- const btnImageCard = dom.parentWithClass(e.target, 'btnImageCard');
- if (btnImageCard) {
- downloadRemoteImage(page, apiClient, btnImageCard.getAttribute('data-imageurl'), btnImageCard.getAttribute('data-imagetype'), btnImageCard.getAttribute('data-imageprovider'));
- }
- });
- }
-
- function showEditor(itemId, serverId, itemType) {
- loading.show();
-
- const apiClient = ServerConnections.getApiClient(serverId);
-
- currentItemId = itemId;
- currentItemType = itemType;
-
- const dialogOptions = {
- removeOnClose: true
- };
-
- if (layoutManager.tv) {
- dialogOptions.size = 'fullscreen';
- } else {
- dialogOptions.size = 'small';
- }
-
- const dlg = dialogHelper.createDialog(dialogOptions);
-
- dlg.innerHTML = globalize.translateHtml(template, 'core');
-
- if (layoutManager.tv) {
- scrollHelper.centerFocus.on(dlg, false);
- }
-
- if (browsableParentId) {
- dlg.querySelector('#lblShowParentImages').classList.remove('hide');
- }
-
- // Has to be assigned a z-index after the call to .open()
- dlg.addEventListener('close', onDialogClosed);
-
- dialogHelper.open(dlg);
-
- const editorContent = dlg.querySelector('.formDialogContent');
- initEditor(editorContent, apiClient);
-
- dlg.querySelector('.btnCancel').addEventListener('click', function () {
- dialogHelper.close(dlg);
- });
-
- reloadBrowsableImages(editorContent, apiClient);
- }
-
- function onDialogClosed() {
- const dlg = this;
-
- if (layoutManager.tv) {
- scrollHelper.centerFocus.off(dlg, false);
- }
+ const selectImageProvider = page.querySelector('#selectImageProvider');
+ selectImageProvider.innerHTML = '' + providersHtml;
+ selectImageProvider.value = provider;
loading.hide();
- if (hasChanges) {
- currentResolve();
+ });
+}
+
+function renderRemoteImages(page, apiClient, imagesResult, imageType, startIndex, limit) {
+ page.querySelector('.availableImagesPaging').innerHTML = getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount);
+
+ let html = '';
+
+ for (let i = 0, length = imagesResult.Images.length; i < length; i++) {
+ html += getRemoteImageHtml(imagesResult.Images[i], imageType);
+ }
+
+ const availableImagesList = page.querySelector('.availableImagesList');
+ availableImagesList.innerHTML = html;
+ imageLoader.lazyChildren(availableImagesList);
+
+ const btnNextPage = page.querySelector('.btnNextPage');
+ const btnPreviousPage = page.querySelector('.btnPreviousPage');
+
+ if (btnNextPage) {
+ btnNextPage.addEventListener('click', function () {
+ browsableImageStartIndex += browsableImagePageSize;
+ reloadBrowsableImages(page, apiClient);
+ });
+ }
+
+ if (btnPreviousPage) {
+ btnPreviousPage.addEventListener('click', function () {
+ browsableImageStartIndex -= browsableImagePageSize;
+ reloadBrowsableImages(page, apiClient);
+ });
+ }
+}
+
+function getPagingHtml(startIndex, limit, totalRecordCount) {
+ let html = '';
+
+ const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
+
+ // 20 is the minimum page size
+ const showControls = totalRecordCount > limit;
+
+ html += '';
+ } else {
+ html += '
';
+
+ elem.classList.add('hide');
+ elem.innerHTML = html;
+
+ const itemsContainer = elem.querySelector('.itemsContainer');
+ itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly);
+ itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly);
+ itemsContainer.parentContainer = elem;
+}
export default {
loadLibraryTiles: loadLibraryTiles,
@@ -750,4 +748,3 @@ export default {
resume: resume
};
-/* eslint-enable indent */
diff --git a/src/components/htmlMediaHelper.js b/src/components/htmlMediaHelper.js
index 92fb4d0135..124caa5e0a 100644
--- a/src/components/htmlMediaHelper.js
+++ b/src/components/htmlMediaHelper.js
@@ -1,387 +1,382 @@
-
-/* eslint-disable indent */
-
import appSettings from '../scripts/settings/appSettings' ;
import browser from '../scripts/browser';
import Events from '../utils/events.ts';
- export function getSavedVolume() {
- return appSettings.get('volume') || 1;
+export function getSavedVolume() {
+ return appSettings.get('volume') || 1;
+}
+
+export function saveVolume(value) {
+ if (value) {
+ appSettings.set('volume', value);
+ }
+}
+
+export function getCrossOriginValue(mediaSource) {
+ if (mediaSource.IsRemote) {
+ return null;
}
- export function saveVolume(value) {
- if (value) {
- appSettings.set('volume', value);
- }
- }
+ return 'anonymous';
+}
- export function getCrossOriginValue(mediaSource) {
- if (mediaSource.IsRemote) {
- return null;
- }
+function canPlayNativeHls() {
+ const media = document.createElement('video');
- return 'anonymous';
- }
-
- function canPlayNativeHls() {
- const media = document.createElement('video');
-
- return !!(media.canPlayType('application/x-mpegURL').replace(/no/, '')
+ return !!(media.canPlayType('application/x-mpegURL').replace(/no/, '')
|| media.canPlayType('application/vnd.apple.mpegURL').replace(/no/, ''));
+}
+
+export function enableHlsJsPlayer(runTimeTicks, mediaType) {
+ if (window.MediaSource == null) {
+ return false;
}
- export function enableHlsJsPlayer(runTimeTicks, mediaType) {
- if (window.MediaSource == null) {
- return false;
- }
-
- // hls.js is only in beta. needs more testing.
- if (browser.iOS) {
- return false;
- }
-
- // The native players on these devices support seeking live streams, no need to use hls.js here
- if (browser.tizen || browser.web0s) {
- return false;
- }
-
- if (canPlayNativeHls()) {
- // Having trouble with chrome's native support and transcoded music
- if (browser.android && mediaType === 'Audio') {
- return true;
- }
-
- // simple playback should use the native support
- if (runTimeTicks) {
- return false;
- }
- }
-
- return true;
+ // hls.js is only in beta. needs more testing.
+ if (browser.iOS) {
+ return false;
}
- let recoverDecodingErrorDate;
- let recoverSwapAudioCodecDate;
- export function handleHlsJsMediaError(instance, reject) {
- const hlsPlayer = instance._hlsPlayer;
+ // The native players on these devices support seeking live streams, no need to use hls.js here
+ if (browser.tizen || browser.web0s) {
+ return false;
+ }
- if (!hlsPlayer) {
- return;
+ if (canPlayNativeHls()) {
+ // Having trouble with chrome's native support and transcoded music
+ if (browser.android && mediaType === 'Audio') {
+ return true;
}
- let now = Date.now();
-
- if (window.performance && window.performance.now) {
- now = performance.now(); // eslint-disable-line compat/compat
+ // simple playback should use the native support
+ if (runTimeTicks) {
+ return false;
}
+ }
- if (!recoverDecodingErrorDate || (now - recoverDecodingErrorDate) > 3000) {
- recoverDecodingErrorDate = now;
- console.debug('try to recover media Error ...');
+ return true;
+}
+
+let recoverDecodingErrorDate;
+let recoverSwapAudioCodecDate;
+export function handleHlsJsMediaError(instance, reject) {
+ const hlsPlayer = instance._hlsPlayer;
+
+ if (!hlsPlayer) {
+ return;
+ }
+
+ let now = Date.now();
+
+ if (window.performance && window.performance.now) {
+ now = performance.now(); // eslint-disable-line compat/compat
+ }
+
+ if (!recoverDecodingErrorDate || (now - recoverDecodingErrorDate) > 3000) {
+ recoverDecodingErrorDate = now;
+ console.debug('try to recover media Error ...');
+ hlsPlayer.recoverMediaError();
+ } else {
+ if (!recoverSwapAudioCodecDate || (now - recoverSwapAudioCodecDate) > 3000) {
+ recoverSwapAudioCodecDate = now;
+ console.debug('try to swap Audio Codec and recover media Error ...');
+ hlsPlayer.swapAudioCodec();
hlsPlayer.recoverMediaError();
} else {
- if (!recoverSwapAudioCodecDate || (now - recoverSwapAudioCodecDate) > 3000) {
- recoverSwapAudioCodecDate = now;
- console.debug('try to swap Audio Codec and recover media Error ...');
- hlsPlayer.swapAudioCodec();
- hlsPlayer.recoverMediaError();
+ console.error('cannot recover, last media error recovery failed ...');
+
+ if (reject) {
+ reject();
} else {
- console.error('cannot recover, last media error recovery failed ...');
-
- if (reject) {
- reject();
- } else {
- onErrorInternal(instance, 'mediadecodeerror');
- }
+ onErrorInternal(instance, 'mediadecodeerror');
}
}
}
+}
- export function onErrorInternal(instance, type) {
- // Needed for video
- if (instance.destroyCustomTrack) {
- instance.destroyCustomTrack(instance._mediaElement);
- }
-
- Events.trigger(instance, 'error', [
- {
- type: type
- }
- ]);
+export function onErrorInternal(instance, type) {
+ // Needed for video
+ if (instance.destroyCustomTrack) {
+ instance.destroyCustomTrack(instance._mediaElement);
}
- export function isValidDuration(duration) {
- return duration
+ Events.trigger(instance, 'error', [
+ {
+ type: type
+ }
+ ]);
+}
+
+export function isValidDuration(duration) {
+ return duration
&& !isNaN(duration)
&& duration !== Number.POSITIVE_INFINITY
&& duration !== Number.NEGATIVE_INFINITY;
- }
+}
- function setCurrentTimeIfNeeded(element, seconds) {
- // If it's worth skipping (1 sec or less of a difference)
- if (Math.abs((element.currentTime || 0) - seconds) >= 1) {
- element.currentTime = seconds;
+function setCurrentTimeIfNeeded(element, seconds) {
+ // If it's worth skipping (1 sec or less of a difference)
+ if (Math.abs((element.currentTime || 0) - seconds) >= 1) {
+ element.currentTime = seconds;
+ }
+}
+
+export function seekOnPlaybackStart(instance, element, ticks, onMediaReady) {
+ const seconds = (ticks || 0) / 10000000;
+
+ if (seconds) {
+ // Appending #t=xxx to the query string doesn't seem to work with HLS
+ // For plain video files, not all browsers support it either
+
+ if (element.duration >= seconds) {
+ // media is ready, seek immediately
+ setCurrentTimeIfNeeded(element, seconds);
+ if (onMediaReady) onMediaReady();
+ } else {
+ // update video player position when media is ready to be sought
+ const events = ['durationchange', 'loadeddata', 'play', 'loadedmetadata'];
+ const onMediaChange = function(e) {
+ if (element.currentTime === 0 && element.duration >= seconds) {
+ // seek only when video position is exactly zero,
+ // as this is true only if video hasn't started yet or
+ // user rewound to the very beginning
+ // (but rewinding cannot happen as the first event with media of non-empty duration)
+ console.debug(`seeking to ${seconds} on ${e.type} event`);
+ setCurrentTimeIfNeeded(element, seconds);
+ events.forEach(name => {
+ element.removeEventListener(name, onMediaChange);
+ });
+ if (onMediaReady) onMediaReady();
+ }
+ };
+ events.forEach(name => {
+ element.addEventListener(name, onMediaChange);
+ });
}
}
+}
- export function seekOnPlaybackStart(instance, element, ticks, onMediaReady) {
- const seconds = (ticks || 0) / 10000000;
+export function applySrc(elem, src, options) {
+ if (window.Windows && options.mediaSource && options.mediaSource.IsLocal) {
+ return Windows.Storage.StorageFile.getFileFromPathAsync(options.url).then(function (file) {
+ const playlist = new Windows.Media.Playback.MediaPlaybackList();
- if (seconds) {
- // Appending #t=xxx to the query string doesn't seem to work with HLS
- // For plain video files, not all browsers support it either
-
- if (element.duration >= seconds) {
- // media is ready, seek immediately
- setCurrentTimeIfNeeded(element, seconds);
- if (onMediaReady) onMediaReady();
- } else {
- // update video player position when media is ready to be sought
- const events = ['durationchange', 'loadeddata', 'play', 'loadedmetadata'];
- const onMediaChange = function(e) {
- if (element.currentTime === 0 && element.duration >= seconds) {
- // seek only when video position is exactly zero,
- // as this is true only if video hasn't started yet or
- // user rewound to the very beginning
- // (but rewinding cannot happen as the first event with media of non-empty duration)
- console.debug(`seeking to ${seconds} on ${e.type} event`);
- setCurrentTimeIfNeeded(element, seconds);
- events.forEach(name => {
- element.removeEventListener(name, onMediaChange);
- });
- if (onMediaReady) onMediaReady();
- }
- };
- events.forEach(name => {
- element.addEventListener(name, onMediaChange);
- });
- }
- }
+ const source1 = Windows.Media.Core.MediaSource.createFromStorageFile(file);
+ const startTime = (options.playerStartPositionTicks || 0) / 10000;
+ playlist.items.append(new Windows.Media.Playback.MediaPlaybackItem(source1, startTime));
+ elem.src = URL.createObjectURL(playlist, { oneTimeOnly: true });
+ return Promise.resolve();
+ });
+ } else {
+ elem.src = src;
}
- export function applySrc(elem, src, options) {
- if (window.Windows && options.mediaSource && options.mediaSource.IsLocal) {
- return Windows.Storage.StorageFile.getFileFromPathAsync(options.url).then(function (file) {
- const playlist = new Windows.Media.Playback.MediaPlaybackList();
+ return Promise.resolve();
+}
- const source1 = Windows.Media.Core.MediaSource.createFromStorageFile(file);
- const startTime = (options.playerStartPositionTicks || 0) / 10000;
- playlist.items.append(new Windows.Media.Playback.MediaPlaybackItem(source1, startTime));
- elem.src = URL.createObjectURL(playlist, { oneTimeOnly: true });
+export function resetSrc(elem) {
+ elem.src = '';
+ elem.innerHTML = '';
+ elem.removeAttribute('src');
+}
+
+function onSuccessfulPlay(elem, onErrorFn) {
+ elem.addEventListener('error', onErrorFn);
+}
+
+export function playWithPromise(elem, onErrorFn) {
+ try {
+ return elem.play()
+ .catch((e) => {
+ const errorName = (e.name || '').toLowerCase();
+ // safari uses aborterror
+ if (errorName === 'notallowederror'
+ || errorName === 'aborterror') {
+ // swallow this error because the user can still click the play button on the video element
+ return Promise.resolve();
+ }
+ return Promise.reject();
+ })
+ .then(() => {
+ onSuccessfulPlay(elem, onErrorFn);
return Promise.resolve();
});
- } else {
- elem.src = src;
- }
-
- return Promise.resolve();
+ } catch (err) {
+ console.error('error calling video.play: ' + err);
+ return Promise.reject();
}
+}
- export function resetSrc(elem) {
- elem.src = '';
- elem.innerHTML = '';
- elem.removeAttribute('src');
- }
-
- function onSuccessfulPlay(elem, onErrorFn) {
- elem.addEventListener('error', onErrorFn);
- }
-
- export function playWithPromise(elem, onErrorFn) {
+export function destroyCastPlayer(instance) {
+ const player = instance._castPlayer;
+ if (player) {
try {
- return elem.play()
- .catch((e) => {
- const errorName = (e.name || '').toLowerCase();
- // safari uses aborterror
- if (errorName === 'notallowederror'
- || errorName === 'aborterror') {
- // swallow this error because the user can still click the play button on the video element
- return Promise.resolve();
- }
- return Promise.reject();
- })
- .then(() => {
- onSuccessfulPlay(elem, onErrorFn);
- return Promise.resolve();
- });
+ player.unload();
} catch (err) {
- console.error('error calling video.play: ' + err);
- return Promise.reject();
+ console.error(err);
}
- }
- export function destroyCastPlayer(instance) {
- const player = instance._castPlayer;
- if (player) {
- try {
- player.unload();
- } catch (err) {
- console.error(err);
+ instance._castPlayer = null;
+ }
+}
+
+export function destroyHlsPlayer(instance) {
+ const player = instance._hlsPlayer;
+ if (player) {
+ try {
+ player.destroy();
+ } catch (err) {
+ console.error(err);
+ }
+
+ instance._hlsPlayer = null;
+ }
+}
+
+export function destroyFlvPlayer(instance) {
+ const player = instance._flvPlayer;
+ if (player) {
+ try {
+ player.unload();
+ player.detachMediaElement();
+ player.destroy();
+ } catch (err) {
+ console.error(err);
+ }
+
+ instance._flvPlayer = null;
+ }
+}
+
+export function bindEventsToHlsPlayer(instance, hls, elem, onErrorFn, resolve, reject) {
+ hls.on(Hls.Events.MANIFEST_PARSED, function () {
+ playWithPromise(elem, onErrorFn).then(resolve, function () {
+ if (reject) {
+ reject();
+ reject = null;
}
-
- instance._castPlayer = null;
- }
- }
-
- export function destroyHlsPlayer(instance) {
- const player = instance._hlsPlayer;
- if (player) {
- try {
- player.destroy();
- } catch (err) {
- console.error(err);
- }
-
- instance._hlsPlayer = null;
- }
- }
-
- export function destroyFlvPlayer(instance) {
- const player = instance._flvPlayer;
- if (player) {
- try {
- player.unload();
- player.detachMediaElement();
- player.destroy();
- } catch (err) {
- console.error(err);
- }
-
- instance._flvPlayer = null;
- }
- }
-
- export function bindEventsToHlsPlayer(instance, hls, elem, onErrorFn, resolve, reject) {
- hls.on(Hls.Events.MANIFEST_PARSED, function () {
- playWithPromise(elem, onErrorFn).then(resolve, function () {
- if (reject) {
- reject();
- reject = null;
- }
- });
});
+ });
- hls.on(Hls.Events.ERROR, function (event, data) {
- console.error('HLS Error: Type: ' + data.type + ' Details: ' + (data.details || '') + ' Fatal: ' + (data.fatal || false));
+ hls.on(Hls.Events.ERROR, function (event, data) {
+ console.error('HLS Error: Type: ' + data.type + ' Details: ' + (data.details || '') + ' Fatal: ' + (data.fatal || false));
- // try to recover network error
- if (data.type === Hls.ErrorTypes.NETWORK_ERROR
+ // try to recover network error
+ if (data.type === Hls.ErrorTypes.NETWORK_ERROR
&& data.response?.code && data.response.code >= 400
- ) {
- console.debug('hls.js response error code: ' + data.response.code);
+ ) {
+ console.debug('hls.js response error code: ' + data.response.code);
- // Trigger failure differently depending on whether this is prior to start of playback, or after
- hls.destroy();
+ // Trigger failure differently depending on whether this is prior to start of playback, or after
+ hls.destroy();
- if (reject) {
- reject('servererror');
- reject = null;
- } else {
- onErrorInternal(instance, 'servererror');
- }
-
- return;
+ if (reject) {
+ reject('servererror');
+ reject = null;
+ } else {
+ onErrorInternal(instance, 'servererror');
}
- if (data.fatal) {
- switch (data.type) {
- case Hls.ErrorTypes.NETWORK_ERROR:
+ return;
+ }
- if (data.response && data.response.code === 0) {
- // This could be a CORS error related to access control response headers
+ if (data.fatal) {
+ switch (data.type) {
+ case Hls.ErrorTypes.NETWORK_ERROR:
- console.debug('hls.js response error code: ' + data.response.code);
+ if (data.response && data.response.code === 0) {
+ // This could be a CORS error related to access control response headers
- // Trigger failure differently depending on whether this is prior to start of playback, or after
- hls.destroy();
+ console.debug('hls.js response error code: ' + data.response.code);
- if (reject) {
- reject('network');
- reject = null;
- } else {
- onErrorInternal(instance, 'network');
- }
- } else {
- console.debug('fatal network error encountered, try to recover');
- hls.startLoad();
- }
-
- break;
- case Hls.ErrorTypes.MEDIA_ERROR:
- console.debug('fatal media error encountered, try to recover');
- handleHlsJsMediaError(instance, reject);
- reject = null;
- break;
- default:
-
- console.debug('Cannot recover from hls error - destroy and trigger error');
- // cannot recover
// Trigger failure differently depending on whether this is prior to start of playback, or after
hls.destroy();
if (reject) {
- reject();
+ reject('network');
reject = null;
} else {
- onErrorInternal(instance, 'mediadecodeerror');
+ onErrorInternal(instance, 'network');
}
- break;
- }
+ } else {
+ console.debug('fatal network error encountered, try to recover');
+ hls.startLoad();
+ }
+
+ break;
+ case Hls.ErrorTypes.MEDIA_ERROR:
+ console.debug('fatal media error encountered, try to recover');
+ handleHlsJsMediaError(instance, reject);
+ reject = null;
+ break;
+ default:
+
+ console.debug('Cannot recover from hls error - destroy and trigger error');
+ // cannot recover
+ // Trigger failure differently depending on whether this is prior to start of playback, or after
+ hls.destroy();
+
+ if (reject) {
+ reject();
+ reject = null;
+ } else {
+ onErrorInternal(instance, 'mediadecodeerror');
+ }
+ break;
}
+ }
+ });
+}
+
+export function onEndedInternal(instance, elem, onErrorFn) {
+ elem.removeEventListener('error', onErrorFn);
+
+ resetSrc(elem);
+
+ destroyHlsPlayer(instance);
+ destroyFlvPlayer(instance);
+ destroyCastPlayer(instance);
+
+ const stopInfo = {
+ src: instance._currentSrc
+ };
+
+ Events.trigger(instance, 'stopped', [stopInfo]);
+
+ instance._currentTime = null;
+ instance._currentSrc = null;
+ instance._currentPlayOptions = null;
+}
+
+export function getBufferedRanges(instance, elem) {
+ const ranges = [];
+ const seekable = elem.buffered || [];
+
+ let offset;
+ const currentPlayOptions = instance._currentPlayOptions;
+ if (currentPlayOptions) {
+ offset = currentPlayOptions.transcodingOffsetTicks;
+ }
+
+ offset = offset || 0;
+
+ for (let i = 0, length = seekable.length; i < length; i++) {
+ let start = seekable.start(i);
+ let end = seekable.end(i);
+
+ if (!isValidDuration(start)) {
+ start = 0;
+ }
+ if (!isValidDuration(end)) {
+ end = 0;
+ continue;
+ }
+
+ ranges.push({
+ start: (start * 10000000) + offset,
+ end: (end * 10000000) + offset
});
}
- export function onEndedInternal(instance, elem, onErrorFn) {
- elem.removeEventListener('error', onErrorFn);
-
- resetSrc(elem);
-
- destroyHlsPlayer(instance);
- destroyFlvPlayer(instance);
- destroyCastPlayer(instance);
-
- const stopInfo = {
- src: instance._currentSrc
- };
-
- Events.trigger(instance, 'stopped', [stopInfo]);
-
- instance._currentTime = null;
- instance._currentSrc = null;
- instance._currentPlayOptions = null;
- }
-
- export function getBufferedRanges(instance, elem) {
- const ranges = [];
- const seekable = elem.buffered || [];
-
- let offset;
- const currentPlayOptions = instance._currentPlayOptions;
- if (currentPlayOptions) {
- offset = currentPlayOptions.transcodingOffsetTicks;
- }
-
- offset = offset || 0;
-
- for (let i = 0, length = seekable.length; i < length; i++) {
- let start = seekable.start(i);
- let end = seekable.end(i);
-
- if (!isValidDuration(start)) {
- start = 0;
- }
- if (!isValidDuration(end)) {
- end = 0;
- continue;
- }
-
- ranges.push({
- start: (start * 10000000) + offset,
- end: (end * 10000000) + offset
- });
- }
-
- return ranges;
- }
-
-/* eslint-enable indent */
+ return ranges;
+}
diff --git a/src/components/imageDownloader/imageDownloader.js b/src/components/imageDownloader/imageDownloader.js
index b88eea6688..1955896180 100644
--- a/src/components/imageDownloader/imageDownloader.js
+++ b/src/components/imageDownloader/imageDownloader.js
@@ -15,371 +15,369 @@ import '../cardbuilder/card.scss';
import ServerConnections from '../ServerConnections';
import template from './imageDownloader.template.html';
-/* eslint-disable indent */
+const enableFocusTransform = !browser.slow && !browser.edge;
- const enableFocusTransform = !browser.slow && !browser.edge;
+let currentItemId;
+let currentItemType;
+let currentResolve;
+let currentReject;
+let hasChanges = false;
- let currentItemId;
- let currentItemType;
- let currentResolve;
- let currentReject;
- let hasChanges = false;
+// These images can be large and we're seeing memory problems in safari
+const browsableImagePageSize = browser.slow ? 6 : 30;
- // These images can be large and we're seeing memory problems in safari
- const browsableImagePageSize = browser.slow ? 6 : 30;
+let browsableImageStartIndex = 0;
+let browsableImageType = 'Primary';
+let selectedProvider;
+let browsableParentId;
- let browsableImageStartIndex = 0;
- let browsableImageType = 'Primary';
- let selectedProvider;
- let browsableParentId;
+function getBaseRemoteOptions(page, forceCurrentItemId = false) {
+ const options = {};
- function getBaseRemoteOptions(page, forceCurrentItemId = false) {
- const options = {};
-
- if (!forceCurrentItemId && page.querySelector('#chkShowParentImages').checked && browsableParentId) {
- options.itemId = browsableParentId;
- } else {
- options.itemId = currentItemId;
- }
-
- return options;
+ if (!forceCurrentItemId && page.querySelector('#chkShowParentImages').checked && browsableParentId) {
+ options.itemId = browsableParentId;
+ } else {
+ options.itemId = currentItemId;
}
- function reloadBrowsableImages(page, apiClient) {
- loading.show();
+ return options;
+}
- const options = getBaseRemoteOptions(page);
+function reloadBrowsableImages(page, apiClient) {
+ loading.show();
- options.type = browsableImageType;
- options.startIndex = browsableImageStartIndex;
- options.limit = browsableImagePageSize;
- options.IncludeAllLanguages = page.querySelector('#chkAllLanguages').checked;
+ const options = getBaseRemoteOptions(page);
- const provider = selectedProvider || '';
+ options.type = browsableImageType;
+ options.startIndex = browsableImageStartIndex;
+ options.limit = browsableImagePageSize;
+ options.IncludeAllLanguages = page.querySelector('#chkAllLanguages').checked;
- if (provider) {
- options.ProviderName = provider;
- }
+ const provider = selectedProvider || '';
- apiClient.getAvailableRemoteImages(options).then(function (result) {
- renderRemoteImages(page, apiClient, result, browsableImageType, options.startIndex, options.limit);
-
- page.querySelector('#selectBrowsableImageType').value = browsableImageType;
-
- const providersHtml = result.Providers.map(function (p) {
- return '';
- });
-
- const selectImageProvider = page.querySelector('#selectImageProvider');
- selectImageProvider.innerHTML = '' + providersHtml;
- selectImageProvider.value = provider;
-
- loading.hide();
- });
- }
-
- function renderRemoteImages(page, apiClient, imagesResult, imageType, startIndex, limit) {
- page.querySelector('.availableImagesPaging').innerHTML = getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount);
-
- let html = '';
-
- for (let i = 0, length = imagesResult.Images.length; i < length; i++) {
- html += getRemoteImageHtml(imagesResult.Images[i], imageType);
- }
-
- const availableImagesList = page.querySelector('.availableImagesList');
- availableImagesList.innerHTML = html;
- imageLoader.lazyChildren(availableImagesList);
-
- const btnNextPage = page.querySelector('.btnNextPage');
- const btnPreviousPage = page.querySelector('.btnPreviousPage');
-
- if (btnNextPage) {
- btnNextPage.addEventListener('click', function () {
- browsableImageStartIndex += browsableImagePageSize;
- reloadBrowsableImages(page, apiClient);
- });
- }
-
- if (btnPreviousPage) {
- btnPreviousPage.addEventListener('click', function () {
- browsableImageStartIndex -= browsableImagePageSize;
- reloadBrowsableImages(page, apiClient);
- });
- }
- }
-
- function getPagingHtml(startIndex, limit, totalRecordCount) {
- let html = '';
-
- const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
-
- // 20 is the minimum page size
- const showControls = totalRecordCount > limit;
-
- html += '';
+ }
+
+ if (enableScrollX()) {
+ html += '
';
+ }
+ html += '';
-
- html += '';
-
- const startAtDisplay = totalRecordCount ? startIndex + 1 : 0;
- html += globalize.translate('ListPaging', startAtDisplay, recordsEnd, totalRecordCount);
-
- html += '';
-
- if (showControls) {
- html += '
';
-
- return html;
- }
-
- function downloadRemoteImage(page, apiClient, url, type, provider) {
- const options = getBaseRemoteOptions(page, true);
-
- options.Type = type;
- options.ImageUrl = url;
+ if (provider) {
options.ProviderName = provider;
-
- loading.show();
-
- apiClient.downloadRemoteImage(options).then(function () {
- hasChanges = true;
- const dlg = dom.parentWithClass(page, 'dialog');
- dialogHelper.close(dlg);
- });
}
- function getRemoteImageHtml(image, imageType) {
- const tagName = layoutManager.tv ? 'button' : 'div';
- const enableFooterButtons = !layoutManager.tv;
+ apiClient.getAvailableRemoteImages(options).then(function (result) {
+ renderRemoteImages(page, apiClient, result, browsableImageType, options.startIndex, options.limit);
- // TODO move card creation code to Card component
+ page.querySelector('#selectBrowsableImageType').value = browsableImageType;
- let html = '';
-
- let cssClass = 'card scalableCard imageEditorCard';
- const cardBoxCssClass = 'cardBox visualCardBox';
-
- let shape;
- if (imageType === 'Backdrop' || imageType === 'Art' || imageType === 'Thumb' || imageType === 'Logo') {
- shape = 'backdrop';
- } else if (imageType === 'Banner') {
- shape = 'banner';
- } else if (imageType === 'Disc') {
- shape = 'square';
- } else {
- if (currentItemType === 'Episode') {
- shape = 'backdrop';
- } else if (currentItemType === 'MusicAlbum' || currentItemType === 'MusicArtist') {
- shape = 'square';
- } else {
- shape = 'portrait';
- }
- }
-
- cssClass += ' ' + shape + 'Card ' + shape + 'Card-scalable';
- if (tagName === 'button') {
- cssClass += ' btnImageCard';
-
- if (layoutManager.tv) {
- cssClass += ' show-focus';
-
- if (enableFocusTransform) {
- cssClass += ' show-animation';
- }
- }
-
- html += '';
-
- html += ``;
- html += ``;
- html += '
';
- }
-
- html += '';
+
+ html += '';
+
+ const startAtDisplay = totalRecordCount ? startIndex + 1 : 0;
+ html += globalize.translate('ListPaging', startAtDisplay, recordsEnd, totalRecordCount);
+
+ html += '';
+
+ if (showControls) {
+ html += '
';
+
+ return html;
+}
+
+function downloadRemoteImage(page, apiClient, url, type, provider) {
+ const options = getBaseRemoteOptions(page, true);
+
+ options.Type = type;
+ options.ImageUrl = url;
+ options.ProviderName = provider;
+
+ loading.show();
+
+ apiClient.downloadRemoteImage(options).then(function () {
+ hasChanges = true;
+ const dlg = dom.parentWithClass(page, 'dialog');
+ dialogHelper.close(dlg);
+ });
+}
+
+function getRemoteImageHtml(image, imageType) {
+ const tagName = layoutManager.tv ? 'button' : 'div';
+ const enableFooterButtons = !layoutManager.tv;
+
+ // TODO move card creation code to Card component
+
+ let html = '';
+
+ let cssClass = 'card scalableCard imageEditorCard';
+ const cardBoxCssClass = 'cardBox visualCardBox';
+
+ let shape;
+ if (imageType === 'Backdrop' || imageType === 'Art' || imageType === 'Thumb' || imageType === 'Logo') {
+ shape = 'backdrop';
+ } else if (imageType === 'Banner') {
+ shape = 'banner';
+ } else if (imageType === 'Disc') {
+ shape = 'square';
+ } else {
+ if (currentItemType === 'Episode') {
+ shape = 'backdrop';
+ } else if (currentItemType === 'MusicAlbum' || currentItemType === 'MusicArtist') {
+ shape = 'square';
} else {
- currentReject();
+ shape = 'portrait';
}
}
+ cssClass += ' ' + shape + 'Card ' + shape + 'Card-scalable';
+ if (tagName === 'button') {
+ cssClass += ' btnImageCard';
+
+ if (layoutManager.tv) {
+ cssClass += ' show-focus';
+
+ if (enableFocusTransform) {
+ cssClass += ' show-animation';
+ }
+ }
+
+ html += '';
+
+ html += ``;
+ html += ``;
+ html += '
';
+ }
+
+ html += '${html}`; - } - const mediaInfoContent = page.querySelector('#mediaInfoContent'); - mediaInfoContent.innerHTML = html; - - for (const btn of mediaInfoContent.querySelectorAll('.btnCopy')) { - btn.addEventListener('click', () => { - const infoBlock = dom.parentWithClass(btn, 'mediaInfoStream') || dom.parentWithClass(btn, 'mediaInfoSource') || mediaInfoContent; - - copy(infoBlock.textContent).then(() => { - toast(globalize.translate('Copied')); - }).catch(() => { - console.error('Could not copy text'); - toast(globalize.translate('CopyFailed')); - }); - }); - } +function setMediaInfo(user, page, item) { + let html = item.MediaSources.map(version => { + return getMediaSourceHtml(user, item, version); + }).join(''); + if (item.MediaSources.length > 1) { + html = `
${html}`; } + const mediaInfoContent = page.querySelector('#mediaInfoContent'); + mediaInfoContent.innerHTML = html; - function getMediaSourceHtml(user, item, version) { - let html = '
';
- if (version.Name) {
- html += `\n`;
- }
- if (version.Container) {
- html += `${createAttribute(globalize.translate('MediaInfoContainer'), version.Container)}
`; - } - if (version.Formats && version.Formats.length) { - html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}
`; - } - if (version.Path && user && user.Policy.IsAdministrator) { - html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path, true)}
`; - } - if (version.Size) { - const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`; - html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}
`; - } - version.MediaStreams.sort(itemHelper.sortTracks); - for (const stream of version.MediaStreams) { - if (stream.Type === 'Data') { - continue; - } + for (const btn of mediaInfoContent.querySelectorAll('.btnCopy')) { + btn.addEventListener('click', () => { + const infoBlock = dom.parentWithClass(btn, 'mediaInfoStream') || dom.parentWithClass(btn, 'mediaInfoSource') || mediaInfoContent; - html += '
';
- return html;
- }
-
- // File Paths should be always ltr. The isLtr parameter allows this.
- function createAttribute(label, value, isLtr) {
- return `${label}${attributeDelimiterHtml}${escapeHtml(value)}\n`;
- }
-
- function loadMediaInfo(itemId, serverId) {
- const apiClient = ServerConnections.getApiClient(serverId);
- return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
- const dialogOptions = {
- size: 'small',
- removeOnClose: true,
- scrollY: false
- };
- if (layoutManager.tv) {
- dialogOptions.size = 'fullscreen';
- }
- const dlg = dialogHelper.createDialog(dialogOptions);
- dlg.classList.add('formDialog');
- let html = '';
- html += globalize.translateHtml(template, 'core');
- dlg.innerHTML = html;
- if (layoutManager.tv) {
- dlg.querySelector('.formDialogContent');
- }
- dialogHelper.open(dlg);
- dlg.querySelector('.btnCancel').addEventListener('click', () => {
- dialogHelper.close(dlg);
+ copy(infoBlock.textContent).then(() => {
+ toast(globalize.translate('Copied'));
+ }).catch(() => {
+ console.error('Could not copy text');
+ toast(globalize.translate('CopyFailed'));
});
- apiClient.getCurrentUser().then(user => {
- setMediaInfo(user, dlg, item);
- });
- loading.hide();
});
}
+}
- export function show(itemId, serverId) {
- loading.show();
- return loadMediaInfo(itemId, serverId);
+function getMediaSourceHtml(user, item, version) {
+ let html = '${escapeHtml(version.Name)}${copyButtonHtml}
`; - } - if (version.Formats && version.Formats.length) { - html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}
`; - } - if (version.Path && user && user.Policy.IsAdministrator) { - html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path, true)}
`; - } - if (version.Size) { - const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`; - html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}
`; - } - version.MediaStreams.sort(itemHelper.sortTracks); - for (const stream of version.MediaStreams) { - if (stream.Type === 'Data') { - continue; - } + for (const btn of mediaInfoContent.querySelectorAll('.btnCopy')) { + btn.addEventListener('click', () => { + const infoBlock = dom.parentWithClass(btn, 'mediaInfoStream') || dom.parentWithClass(btn, 'mediaInfoSource') || mediaInfoContent; - html += '
';
- let translateString;
- switch (stream.Type) {
- case 'Audio':
- case 'Data':
- case 'Subtitle':
- case 'Video':
- translateString = stream.Type;
- break;
- case 'EmbeddedImage':
- translateString = 'Image';
- break;
- }
-
- const displayType = globalize.translate(translateString);
- html += `\n
'); - html += '
';
- }
- html += '${displayType}${copyButtonHtml}
\n`; - const attributes = []; - if (stream.DisplayTitle) { - attributes.push(createAttribute(globalize.translate('MediaInfoTitle'), stream.DisplayTitle)); - } - if (stream.Language && stream.Type !== 'Video') { - attributes.push(createAttribute(globalize.translate('MediaInfoLanguage'), stream.Language)); - } - if (stream.Codec) { - attributes.push(createAttribute(globalize.translate('MediaInfoCodec'), stream.Codec.toUpperCase())); - } - if (stream.CodecTag) { - attributes.push(createAttribute(globalize.translate('MediaInfoCodecTag'), stream.CodecTag)); - } - if (stream.IsAVC != null) { - attributes.push(createAttribute('AVC', (stream.IsAVC ? 'Yes' : 'No'))); - } - if (stream.Profile) { - attributes.push(createAttribute(globalize.translate('MediaInfoProfile'), stream.Profile)); - } - if (stream.Level > 0) { - attributes.push(createAttribute(globalize.translate('MediaInfoLevel'), stream.Level)); - } - if (stream.Width || stream.Height) { - attributes.push(createAttribute(globalize.translate('MediaInfoResolution'), `${stream.Width}x${stream.Height}`)); - } - if (stream.AspectRatio && stream.Codec !== 'mjpeg') { - attributes.push(createAttribute(globalize.translate('MediaInfoAspectRatio'), stream.AspectRatio)); - } - if (stream.Type === 'Video') { - if (stream.IsAnamorphic != null) { - attributes.push(createAttribute(globalize.translate('MediaInfoAnamorphic'), (stream.IsAnamorphic ? 'Yes' : 'No'))); - } - attributes.push(createAttribute(globalize.translate('MediaInfoInterlaced'), (stream.IsInterlaced ? 'Yes' : 'No'))); - } - if ((stream.AverageFrameRate || stream.RealFrameRate) && stream.Type === 'Video') { - attributes.push(createAttribute(globalize.translate('MediaInfoFramerate'), (stream.AverageFrameRate || stream.RealFrameRate))); - } - if (stream.ChannelLayout) { - attributes.push(createAttribute(globalize.translate('MediaInfoLayout'), stream.ChannelLayout)); - } - if (stream.Channels) { - attributes.push(createAttribute(globalize.translate('MediaInfoChannels'), `${stream.Channels} ch`)); - } - if (stream.BitRate) { - attributes.push(createAttribute(globalize.translate('MediaInfoBitrate'), `${parseInt(stream.BitRate / 1000, 10)} kbps`)); - } - if (stream.SampleRate) { - attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), `${stream.SampleRate} Hz`)); - } - if (stream.BitDepth) { - attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), `${stream.BitDepth} bit`)); - } - if (stream.VideoRange) { - attributes.push(createAttribute(globalize.translate('MediaInfoVideoRange'), stream.VideoRange)); - } - if (stream.VideoRangeType) { - attributes.push(createAttribute(globalize.translate('MediaInfoVideoRangeType'), stream.VideoRangeType)); - } - if (stream.VideoDoViTitle) { - attributes.push(createAttribute(globalize.translate('MediaInfoDoViTitle'), stream.VideoDoViTitle)); - if (stream.DvVersionMajor != null) { - attributes.push(createAttribute(globalize.translate('MediaInfoDvVersionMajor'), stream.DvVersionMajor)); - } - if (stream.DvVersionMinor != null) { - attributes.push(createAttribute(globalize.translate('MediaInfoDvVersionMinor'), stream.DvVersionMinor)); - } - if (stream.DvProfile != null) { - attributes.push(createAttribute(globalize.translate('MediaInfoDvProfile'), stream.DvProfile)); - } - if (stream.DvLevel != null) { - attributes.push(createAttribute(globalize.translate('MediaInfoDvLevel'), stream.DvLevel)); - } - if (stream.RpuPresentFlag != null) { - attributes.push(createAttribute(globalize.translate('MediaInfoRpuPresentFlag'), stream.RpuPresentFlag)); - } - if (stream.ElPresentFlag != null) { - attributes.push(createAttribute(globalize.translate('MediaInfoElPresentFlag'), stream.ElPresentFlag)); - } - if (stream.BlPresentFlag != null) { - attributes.push(createAttribute(globalize.translate('MediaInfoBlPresentFlag'), stream.BlPresentFlag)); - } - if (stream.DvBlSignalCompatibilityId != null) { - attributes.push(createAttribute(globalize.translate('MediaInfoDvBlSignalCompatibilityId'), stream.DvBlSignalCompatibilityId)); - } - } - if (stream.ColorSpace) { - attributes.push(createAttribute(globalize.translate('MediaInfoColorSpace'), stream.ColorSpace)); - } - if (stream.ColorTransfer) { - attributes.push(createAttribute(globalize.translate('MediaInfoColorTransfer'), stream.ColorTransfer)); - } - if (stream.ColorPrimaries) { - attributes.push(createAttribute(globalize.translate('MediaInfoColorPrimaries'), stream.ColorPrimaries)); - } - if (stream.PixelFormat) { - attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat)); - } - if (stream.RefFrames) { - attributes.push(createAttribute(globalize.translate('MediaInfoRefFrames'), stream.RefFrames)); - } - if (stream.NalLengthSize) { - attributes.push(createAttribute('NAL', stream.NalLengthSize)); - } - if (stream.Type === 'Subtitle' || stream.Type === 'Audio') { - attributes.push(createAttribute(globalize.translate('MediaInfoDefault'), (stream.IsDefault ? 'Yes' : 'No'))); - attributes.push(createAttribute(globalize.translate('MediaInfoForced'), (stream.IsForced ? 'Yes' : 'No'))); - attributes.push(createAttribute(globalize.translate('MediaInfoExternal'), (stream.IsExternal ? 'Yes' : 'No'))); - } - if (stream.Type === 'Video' && version.Timestamp) { - attributes.push(createAttribute(globalize.translate('MediaInfoTimestamp'), version.Timestamp)); - } - html += attributes.join(''); - html += '
';
+ if (version.Name) {
+ html += `\n`;
}
+ if (version.Container) {
+ html += `${createAttribute(globalize.translate('MediaInfoContainer'), version.Container)}
`; + } + if (version.Formats && version.Formats.length) { + html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}
`; + } + if (version.Path && user && user.Policy.IsAdministrator) { + html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path, true)}
`; + } + if (version.Size) { + const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`; + html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}
`; + } + version.MediaStreams.sort(itemHelper.sortTracks); + for (const stream of version.MediaStreams) { + if (stream.Type === 'Data') { + continue; + } + + html += '
';
+ return html;
+}
+
+// File Paths should be always ltr. The isLtr parameter allows this.
+function createAttribute(label, value, isLtr) {
+ return `${label}${attributeDelimiterHtml}${escapeHtml(value)}\n`;
+}
+
+function loadMediaInfo(itemId, serverId) {
+ const apiClient = ServerConnections.getApiClient(serverId);
+ return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
+ const dialogOptions = {
+ size: 'small',
+ removeOnClose: true,
+ scrollY: false
+ };
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
+ }
+ const dlg = dialogHelper.createDialog(dialogOptions);
+ dlg.classList.add('formDialog');
+ let html = '';
+ html += globalize.translateHtml(template, 'core');
+ dlg.innerHTML = html;
+ if (layoutManager.tv) {
+ dlg.querySelector('.formDialogContent');
+ }
+ dialogHelper.open(dlg);
+ dlg.querySelector('.btnCancel').addEventListener('click', () => {
+ dialogHelper.close(dlg);
+ });
+ apiClient.getCurrentUser().then(user => {
+ setMediaInfo(user, dlg, item);
+ });
+ loading.hide();
+ });
+}
+
+export function show(itemId, serverId) {
+ loading.show();
+ return loadMediaInfo(itemId, serverId);
+}
-/* eslint-enable indent */
export default {
show: show
};
diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js
index 9ada1d60c2..b1aa1a1b9b 100644
--- a/src/components/itemidentifier/itemidentifier.js
+++ b/src/components/itemidentifier/itemidentifier.js
@@ -1,4 +1,3 @@
-/* eslint-disable indent */
/**
* Module for itemidentifier media item.
@@ -24,388 +23,314 @@ import toast from '../toast/toast';
import template from './itemidentifier.template.html';
import datetime from '../../scripts/datetime';
- const enableFocusTransform = !browser.slow && !browser.edge;
+const enableFocusTransform = !browser.slow && !browser.edge;
- let currentItem;
- let currentItemType;
- let currentServerId;
- let currentResolve;
- let currentReject;
- let hasChanges = false;
- let currentSearchResult;
+let currentItem;
+let currentItemType;
+let currentServerId;
+let currentResolve;
+let currentReject;
+let hasChanges = false;
+let currentSearchResult;
- function getApiClient() {
- return ServerConnections.getApiClient(currentServerId);
+function getApiClient() {
+ return ServerConnections.getApiClient(currentServerId);
+}
+
+function searchForIdentificationResults(page) {
+ let lookupInfo = {
+ ProviderIds: {}
+ };
+
+ let i;
+ let length;
+ const identifyField = page.querySelectorAll('.identifyField');
+ let value;
+ for (i = 0, length = identifyField.length; i < length; i++) {
+ value = identifyField[i].value;
+
+ if (value) {
+ if (identifyField[i].type === 'number') {
+ value = parseInt(value, 10);
+ }
+
+ lookupInfo[identifyField[i].getAttribute('data-lookup')] = value;
+ }
}
- function searchForIdentificationResults(page) {
- let lookupInfo = {
- ProviderIds: {}
- };
+ let hasId = false;
- let i;
- let length;
- const identifyField = page.querySelectorAll('.identifyField');
- let value;
- for (i = 0, length = identifyField.length; i < length; i++) {
- value = identifyField[i].value;
+ const txtLookupId = page.querySelectorAll('.txtLookupId');
+ for (i = 0, length = txtLookupId.length; i < length; i++) {
+ value = txtLookupId[i].value;
- if (value) {
- if (identifyField[i].type === 'number') {
- value = parseInt(value, 10);
- }
-
- lookupInfo[identifyField[i].getAttribute('data-lookup')] = value;
- }
+ if (value) {
+ hasId = true;
}
+ lookupInfo.ProviderIds[txtLookupId[i].getAttribute('data-providerkey')] = value;
+ }
- let hasId = false;
+ if (!hasId && !lookupInfo.Name) {
+ toast(globalize.translate('PleaseEnterNameOrId'));
+ return;
+ }
- const txtLookupId = page.querySelectorAll('.txtLookupId');
- for (i = 0, length = txtLookupId.length; i < length; i++) {
- value = txtLookupId[i].value;
+ lookupInfo = {
+ SearchInfo: lookupInfo
+ };
- if (value) {
- hasId = true;
- }
- lookupInfo.ProviderIds[txtLookupId[i].getAttribute('data-providerkey')] = value;
- }
+ if (currentItem && currentItem.Id) {
+ lookupInfo.ItemId = currentItem.Id;
+ } else {
+ lookupInfo.IncludeDisabledProviders = true;
+ }
- if (!hasId && !lookupInfo.Name) {
- toast(globalize.translate('PleaseEnterNameOrId'));
- return;
- }
+ loading.show();
- lookupInfo = {
- SearchInfo: lookupInfo
- };
+ const apiClient = getApiClient();
- if (currentItem && currentItem.Id) {
- lookupInfo.ItemId = currentItem.Id;
+ apiClient.ajax({
+ type: 'POST',
+ url: apiClient.getUrl(`Items/RemoteSearch/${currentItemType}`),
+ data: JSON.stringify(lookupInfo),
+ contentType: 'application/json',
+ dataType: 'json'
+
+ }).then(results => {
+ loading.hide();
+ showIdentificationSearchResults(page, results);
+ });
+}
+
+function showIdentificationSearchResults(page, results) {
+ const identificationSearchResults = page.querySelector('.identificationSearchResults');
+
+ page.querySelector('.popupIdentifyForm').classList.add('hide');
+ identificationSearchResults.classList.remove('hide');
+ page.querySelector('.identifyOptionsForm').classList.add('hide');
+ page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered');
+
+ let html = '';
+ let i;
+ let length;
+ for (i = 0, length = results.length; i < length; i++) {
+ const result = results[i];
+ html += getSearchResultHtml(result, i);
+ }
+
+ const elem = page.querySelector('.identificationSearchResultList');
+ elem.innerHTML = html;
+
+ function onSearchImageClick() {
+ const index = parseInt(this.getAttribute('data-index'), 10);
+
+ const currentResult = results[index];
+
+ if (currentItem != null) {
+ showIdentifyOptions(page, currentResult);
} else {
- lookupInfo.IncludeDisabledProviders = true;
- }
-
- loading.show();
-
- const apiClient = getApiClient();
-
- apiClient.ajax({
- type: 'POST',
- url: apiClient.getUrl(`Items/RemoteSearch/${currentItemType}`),
- data: JSON.stringify(lookupInfo),
- contentType: 'application/json',
- dataType: 'json'
-
- }).then(results => {
- loading.hide();
- showIdentificationSearchResults(page, results);
- });
- }
-
- function showIdentificationSearchResults(page, results) {
- const identificationSearchResults = page.querySelector('.identificationSearchResults');
-
- page.querySelector('.popupIdentifyForm').classList.add('hide');
- identificationSearchResults.classList.remove('hide');
- page.querySelector('.identifyOptionsForm').classList.add('hide');
- page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered');
-
- let html = '';
- let i;
- let length;
- for (i = 0, length = results.length; i < length; i++) {
- const result = results[i];
- html += getSearchResultHtml(result, i);
- }
-
- const elem = page.querySelector('.identificationSearchResultList');
- elem.innerHTML = html;
-
- function onSearchImageClick() {
- const index = parseInt(this.getAttribute('data-index'), 10);
-
- const currentResult = results[index];
-
- if (currentItem != null) {
- showIdentifyOptions(page, currentResult);
- } else {
- finishFindNewDialog(page, currentResult);
- }
- }
-
- const searchImages = elem.querySelectorAll('.card');
- for (i = 0, length = searchImages.length; i < length; i++) {
- searchImages[i].addEventListener('click', onSearchImageClick);
- }
-
- if (layoutManager.tv) {
- focusManager.autoFocus(identificationSearchResults);
+ finishFindNewDialog(page, currentResult);
}
}
- function finishFindNewDialog(dlg, identifyResult) {
- currentSearchResult = identifyResult;
+ const searchImages = elem.querySelectorAll('.card');
+ for (i = 0, length = searchImages.length; i < length; i++) {
+ searchImages[i].addEventListener('click', onSearchImageClick);
+ }
+
+ if (layoutManager.tv) {
+ focusManager.autoFocus(identificationSearchResults);
+ }
+}
+
+function finishFindNewDialog(dlg, identifyResult) {
+ currentSearchResult = identifyResult;
+ hasChanges = true;
+ loading.hide();
+
+ dialogHelper.close(dlg);
+}
+
+function showIdentifyOptions(page, identifyResult) {
+ const identifyOptionsForm = page.querySelector('.identifyOptionsForm');
+
+ page.querySelector('.popupIdentifyForm').classList.add('hide');
+ page.querySelector('.identificationSearchResults').classList.add('hide');
+ identifyOptionsForm.classList.remove('hide');
+ page.querySelector('#chkIdentifyReplaceImages').checked = true;
+ page.querySelector('.dialogContentInner').classList.add('dialog-content-centered');
+
+ currentSearchResult = identifyResult;
+
+ const lines = [];
+ lines.push(escapeHtml(identifyResult.Name));
+
+ if (identifyResult.ProductionYear) {
+ lines.push(datetime.toLocaleString(identifyResult.ProductionYear, { useGrouping: false }));
+ }
+
+ let resultHtml = lines.join('${escapeHtml(version.Name)}${copyButtonHtml}
`; + } + if (version.Formats && version.Formats.length) { + html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}
`; + } + if (version.Path && user && user.Policy.IsAdministrator) { + html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path, true)}
`; + } + if (version.Size) { + const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`; + html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}
`; + } + version.MediaStreams.sort(itemHelper.sortTracks); + for (const stream of version.MediaStreams) { + if (stream.Type === 'Data') { + continue; + } + + html += '
';
+ let translateString;
+ switch (stream.Type) {
+ case 'Audio':
+ case 'Data':
+ case 'Subtitle':
+ case 'Video':
+ translateString = stream.Type;
+ break;
+ case 'EmbeddedImage':
+ translateString = 'Image';
+ break;
+ }
+
+ const displayType = globalize.translate(translateString);
+ html += `\n
'); + html += '
';
+ }
+ html += '${displayType}${copyButtonHtml}
\n`; + const attributes = []; + if (stream.DisplayTitle) { + attributes.push(createAttribute(globalize.translate('MediaInfoTitle'), stream.DisplayTitle)); + } + if (stream.Language && stream.Type !== 'Video') { + attributes.push(createAttribute(globalize.translate('MediaInfoLanguage'), stream.Language)); + } + if (stream.Codec) { + attributes.push(createAttribute(globalize.translate('MediaInfoCodec'), stream.Codec.toUpperCase())); + } + if (stream.CodecTag) { + attributes.push(createAttribute(globalize.translate('MediaInfoCodecTag'), stream.CodecTag)); + } + if (stream.IsAVC != null) { + attributes.push(createAttribute('AVC', (stream.IsAVC ? 'Yes' : 'No'))); + } + if (stream.Profile) { + attributes.push(createAttribute(globalize.translate('MediaInfoProfile'), stream.Profile)); + } + if (stream.Level > 0) { + attributes.push(createAttribute(globalize.translate('MediaInfoLevel'), stream.Level)); + } + if (stream.Width || stream.Height) { + attributes.push(createAttribute(globalize.translate('MediaInfoResolution'), `${stream.Width}x${stream.Height}`)); + } + if (stream.AspectRatio && stream.Codec !== 'mjpeg') { + attributes.push(createAttribute(globalize.translate('MediaInfoAspectRatio'), stream.AspectRatio)); + } + if (stream.Type === 'Video') { + if (stream.IsAnamorphic != null) { + attributes.push(createAttribute(globalize.translate('MediaInfoAnamorphic'), (stream.IsAnamorphic ? 'Yes' : 'No'))); + } + attributes.push(createAttribute(globalize.translate('MediaInfoInterlaced'), (stream.IsInterlaced ? 'Yes' : 'No'))); + } + if ((stream.AverageFrameRate || stream.RealFrameRate) && stream.Type === 'Video') { + attributes.push(createAttribute(globalize.translate('MediaInfoFramerate'), (stream.AverageFrameRate || stream.RealFrameRate))); + } + if (stream.ChannelLayout) { + attributes.push(createAttribute(globalize.translate('MediaInfoLayout'), stream.ChannelLayout)); + } + if (stream.Channels) { + attributes.push(createAttribute(globalize.translate('MediaInfoChannels'), `${stream.Channels} ch`)); + } + if (stream.BitRate) { + attributes.push(createAttribute(globalize.translate('MediaInfoBitrate'), `${parseInt(stream.BitRate / 1000, 10)} kbps`)); + } + if (stream.SampleRate) { + attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), `${stream.SampleRate} Hz`)); + } + if (stream.BitDepth) { + attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), `${stream.BitDepth} bit`)); + } + if (stream.VideoRange) { + attributes.push(createAttribute(globalize.translate('MediaInfoVideoRange'), stream.VideoRange)); + } + if (stream.VideoRangeType) { + attributes.push(createAttribute(globalize.translate('MediaInfoVideoRangeType'), stream.VideoRangeType)); + } + if (stream.VideoDoViTitle) { + attributes.push(createAttribute(globalize.translate('MediaInfoDoViTitle'), stream.VideoDoViTitle)); + if (stream.DvVersionMajor != null) { + attributes.push(createAttribute(globalize.translate('MediaInfoDvVersionMajor'), stream.DvVersionMajor)); + } + if (stream.DvVersionMinor != null) { + attributes.push(createAttribute(globalize.translate('MediaInfoDvVersionMinor'), stream.DvVersionMinor)); + } + if (stream.DvProfile != null) { + attributes.push(createAttribute(globalize.translate('MediaInfoDvProfile'), stream.DvProfile)); + } + if (stream.DvLevel != null) { + attributes.push(createAttribute(globalize.translate('MediaInfoDvLevel'), stream.DvLevel)); + } + if (stream.RpuPresentFlag != null) { + attributes.push(createAttribute(globalize.translate('MediaInfoRpuPresentFlag'), stream.RpuPresentFlag)); + } + if (stream.ElPresentFlag != null) { + attributes.push(createAttribute(globalize.translate('MediaInfoElPresentFlag'), stream.ElPresentFlag)); + } + if (stream.BlPresentFlag != null) { + attributes.push(createAttribute(globalize.translate('MediaInfoBlPresentFlag'), stream.BlPresentFlag)); + } + if (stream.DvBlSignalCompatibilityId != null) { + attributes.push(createAttribute(globalize.translate('MediaInfoDvBlSignalCompatibilityId'), stream.DvBlSignalCompatibilityId)); + } + } + if (stream.ColorSpace) { + attributes.push(createAttribute(globalize.translate('MediaInfoColorSpace'), stream.ColorSpace)); + } + if (stream.ColorTransfer) { + attributes.push(createAttribute(globalize.translate('MediaInfoColorTransfer'), stream.ColorTransfer)); + } + if (stream.ColorPrimaries) { + attributes.push(createAttribute(globalize.translate('MediaInfoColorPrimaries'), stream.ColorPrimaries)); + } + if (stream.PixelFormat) { + attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat)); + } + if (stream.RefFrames) { + attributes.push(createAttribute(globalize.translate('MediaInfoRefFrames'), stream.RefFrames)); + } + if (stream.NalLengthSize) { + attributes.push(createAttribute('NAL', stream.NalLengthSize)); + } + if (stream.Type === 'Subtitle' || stream.Type === 'Audio') { + attributes.push(createAttribute(globalize.translate('MediaInfoDefault'), (stream.IsDefault ? 'Yes' : 'No'))); + attributes.push(createAttribute(globalize.translate('MediaInfoForced'), (stream.IsForced ? 'Yes' : 'No'))); + attributes.push(createAttribute(globalize.translate('MediaInfoExternal'), (stream.IsExternal ? 'Yes' : 'No'))); + } + if (stream.Type === 'Video' && version.Timestamp) { + attributes.push(createAttribute(globalize.translate('MediaInfoTimestamp'), version.Timestamp)); + } + html += attributes.join(''); + html += '
'); + + if (identifyResult.ImageUrl) { + resultHtml = `
${resultHtml}
`;
+ }
+
+ page.querySelector('.selectedSearchResult').innerHTML = resultHtml;
+
+ focusManager.focus(identifyOptionsForm.querySelector('.btnSubmit'));
+}
+
+function getSearchResultHtml(result, index) {
+ // TODO move card creation code to Card component
+
+ let html = '';
+ let cssClass = 'card scalableCard';
+ let cardBoxCssClass = 'cardBox';
+ let padderClass;
+
+ if (currentItemType === 'Episode') {
+ cssClass += ' backdropCard backdropCard-scalable';
+ padderClass = 'cardPadder-backdrop';
+ } else if (currentItemType === 'MusicAlbum' || currentItemType === 'MusicArtist') {
+ cssClass += ' squareCard squareCard-scalable';
+ padderClass = 'cardPadder-square';
+ } else {
+ cssClass += ' portraitCard portraitCard-scalable';
+ padderClass = 'cardPadder-portrait';
+ }
+
+ if (layoutManager.tv) {
+ cssClass += ' show-focus';
+
+ if (enableFocusTransform) {
+ cssClass += ' show-animation';
+ }
+ }
+
+ cardBoxCssClass += ' cardBox-bottompadded';
+
+ html += `