';
+ html += '
';
+ } else {
+ html += '
';
+ }) + '" class="raised">
' + globalize.translate('Recordings') + ' ';
- if (enableScrollX()) {
- html += '
';
- 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 += '
' + title + ' ';
- html += '';
-
- if (enableScrollX()) {
- html += '
';
- html += '
';
+ html += '
';
+
+ html += '
';
+ html += '
';
+
+ if (enableScrollX()) {
+ html += '
';
+ html += '
';
+ html += '
';
+
+ elem.innerHTML = html;
+
+ const itemsContainer = elem.querySelector('.itemsContainer');
+ itemsContainer.parentContainer = elem;
+ itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId());
+ itemsContainer.getItemsHtml = getOnNowItemsHtml;
}
- 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 (enableScrollX()) {
+ html += '
';
+ 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 += '
' + title + ' ';
+ html += '';
+
+ if (enableScrollX()) {
+ html += '
';
+ 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/homesections/homesections.scss b/src/components/homesections/homesections.scss
index 2a119c0981..5225ead7c0 100644
--- a/src/components/homesections/homesections.scss
+++ b/src/components/homesections/homesections.scss
@@ -12,13 +12,11 @@
.homeLibraryIcon {
margin-left: 0.5em;
margin-right: 0.5em;
- -webkit-flex-shrink: 0;
flex-shrink: 0;
}
.homeLibraryText {
white-space: nowrap;
- -o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
}
diff --git a/src/components/htmlMediaHelper.js b/src/components/htmlMediaHelper.js
index 7f9d3f36d5..124caa5e0a 100644
--- a/src/components/htmlMediaHelper.js
+++ b/src/components/htmlMediaHelper.js
@@ -1,395 +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';
+}
+
+function canPlayNativeHls() {
+ const media = document.createElement('video');
+
+ 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 getCrossOriginValue(mediaSource) {
- if (mediaSource.IsRemote) {
- return null;
+ // 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;
}
- return 'anonymous';
- }
-
- function canPlayNativeHls() {
- const media = document.createElement('video');
-
- 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) {
+ // simple playback should use the native support
+ if (runTimeTicks) {
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;
- }
-
- if (browser.edge && mediaType === 'Video') {
- //return true;
- }
-
- // simple playback should use the native support
- if (runTimeTicks) {
- //if (!browser.edge) {
- return false;
- //}
- }
-
- //return false;
- }
-
- return true;
}
- let recoverDecodingErrorDate;
- let recoverSwapAudioCodecDate;
- export function handleHlsJsMediaError(instance, reject) {
- const hlsPlayer = instance._hlsPlayer;
+ return true;
+}
- if (!hlsPlayer) {
- return;
- }
+let recoverDecodingErrorDate;
+let recoverSwapAudioCodecDate;
+export function handleHlsJsMediaError(instance, reject) {
+ const hlsPlayer = instance._hlsPlayer;
- let now = Date.now();
+ if (!hlsPlayer) {
+ return;
+ }
- if (window.performance && window.performance.now) {
- now = performance.now(); // eslint-disable-line compat/compat
- }
+ let now = Date.now();
- if (!recoverDecodingErrorDate || (now - recoverDecodingErrorDate) > 3000) {
- recoverDecodingErrorDate = now;
- console.debug('try to recover media Error ...');
+ 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 '
' + p + ' ';
- });
-
- const selectImageProvider = page.querySelector('#selectImageProvider');
- selectImageProvider.innerHTML = '
' + globalize.translate('All') + ' ' + 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 += '
';
-
- html += '
';
-
- const startAtDisplay = totalRecordCount ? startIndex + 1 : 0;
- html += globalize.translate('ListPaging', startAtDisplay, recordsEnd, totalRecordCount);
-
- html += ' ';
-
- if (showControls) {
- html += '
';
-
- html += `= totalRecordCount ? 'disabled' : '')}> `;
- html += '
';
- }
-
- 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 += '
';
-
- if (layoutManager.tv || !appHost.supports('externallinks')) {
- html += '
';
- } else {
- 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);
+ const providersHtml = result.Providers.map(function (p) {
+ return '
' + p + ' ';
});
- 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 = '
' + globalize.translate('All') + ' ' + 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 += '
';
+
+ html += '
';
+
+ const startAtDisplay = totalRecordCount ? startIndex + 1 : 0;
+ html += globalize.translate('ListPaging', startAtDisplay, recordsEnd, totalRecordCount);
+
+ html += ' ';
+
+ if (showControls) {
+ html += '
';
+
+ html += `= totalRecordCount ? 'disabled' : '')}> `;
+ html += '
';
+ }
+
+ 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 += '
';
+
+ if (layoutManager.tv || !appHost.supports('externallinks')) {
+ html += '
';
+ } else {
+ 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 = ['
'].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 039770a217..6a7982cca9 100644
--- a/src/components/imageeditor/imageeditor.js
+++ b/src/components/imageeditor/imageeditor.js
@@ -18,440 +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 += '';
+ html += '
';
+
+ html += '
';
+
+ const imageUrl = getImageUrl(currentItem, apiClient, image.ImageType, image.ImageIndex, { maxWidth: options.imageSize });
+
+ html += '
';
+
+ html += '
';
+ 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, index, numImages, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) {
- // TODO move card creation code to Card component
-
- let html = '';
-
- let cssClass = 'card scalableCard imageEditorCard';
- const cardBoxCssClass = 'cardBox visualCardBox';
-
- cssClass += ' backdropCard backdropCard-scalable';
-
- if (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 += '
';
- html += '';
- html += '
';
-
- html += '
';
-
- const imageUrl = getImageUrl(currentItem, apiClient, image.ImageType, image.ImageIndex, { maxWidth: imageSize });
-
- html += '
';
-
- html += '
';
- 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];
- html += getCardHtml(image, i, length, apiClient, imageProviders, imageSize, tagName, enableFooterButtons);
- }
-
- 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'));
- const providerCount = parseInt(imageCard.getAttribute('data-providers'));
- const numImages = parseInt(imageCard.getAttribute('data-numimages'));
-
- 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);
- 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) {
@@ -464,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/indicators/indicators.scss b/src/components/indicators/indicators.scss
index 3130150d31..29137a5df5 100644
--- a/src/components/indicators/indicators.scss
+++ b/src/components/indicators/indicators.scss
@@ -21,7 +21,6 @@
.indicator {
border-radius: 100em;
- display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
@@ -56,7 +55,6 @@
.countIndicator {
border-radius: 100em;
- display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
@@ -68,7 +66,6 @@
.playedIndicator {
border-radius: 100em;
- display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
@@ -80,7 +77,6 @@
.videoIndicator {
background: #444;
border-radius: 100em;
- display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index 15980b23ad..b96ac14780 100644
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@@ -1,594 +1,658 @@
import browser from '../scripts/browser';
import { copy } from '../scripts/clipboard';
+import dom from '../scripts/dom';
import globalize from '../scripts/globalize';
import actionsheet from './actionSheet/actionSheet';
import { appHost } from './apphost';
-import { appRouter } from './appRouter';
+import { appRouter } from './router/appRouter';
import itemHelper from './itemHelper';
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 restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
+ 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) {
+ // Multiselect is currrently only ran on long clicks of card components
+ // This disables Select on any context menu not originating from a card i.e songs
+ if (options.positionTo && (dom.parentWithClass(options.positionTo, 'card') !== null)) {
commands.push({
- name: globalize.translate('InstantMix'),
- id: 'instantmix',
- icon: 'explore'
+ name: globalize.translate('Select'),
+ id: 'multiSelect',
+ icon: 'library_add_check'
});
}
- if (commands.length) {
+ if (itemHelper.supportsAddingToCollection(item) && (user.Policy.IsAdministrator || user.Policy.EnableCollectionManagement)) {
commands.push({
- divider: true
+ name: globalize.translate('AddToCollection'),
+ id: 'addtocollection',
+ icon: 'playlist_add'
});
}
- if (!restrictOptions) {
- if (itemHelper.supportsAddingToCollection(item)) {
- commands.push({
- name: globalize.translate('AddToCollection'),
- id: 'addtocollection',
- icon: 'playlist_add'
- });
- }
-
- if (itemHelper.supportsAddingToPlaylist(item) && options.playlist !== false) {
- commands.push({
- name: globalize.translate('AddToPlaylist'),
- id: 'addtoplaylist',
- icon: 'playlist_add'
- });
- }
- }
-
- if ((item.Type === 'Timer') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
+ if (itemHelper.supportsAddingToPlaylist(item) && options.playlist !== false) {
commands.push({
- name: globalize.translate('CancelRecording'),
- id: 'canceltimer',
- icon: 'cancel'
+ name: globalize.translate('AddToPlaylist'),
+ id: 'addtoplaylist',
+ icon: 'playlist_add'
});
}
+ }
- if ((item.Type === 'Recording' && item.Status === 'InProgress') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
+ if ((item.Type === 'Timer') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
+ commands.push({
+ name: globalize.translate('CancelRecording'),
+ id: 'canceltimer',
+ icon: 'cancel'
+ });
+ }
+
+ 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 === '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 === 'SeriesTimer') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
- commands.push({
- name: globalize.translate('CancelSeries'),
- id: 'cancelseriestimer',
- 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.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'
- });
- }
- }
+ commands.push({
+ name: globalize.translate('CopyStreamURL'),
+ id: 'copy-stream',
+ icon: 'content_copy'
+ });
+ }
- // 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 (commands.length) {
+ commands.push({
+ divider: true
+ });
+ }
- commands.push({
- name: globalize.translate('CopyStreamURL'),
- id: 'copy-stream',
- icon: 'content_copy'
- });
- }
+ 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 (commands.length) {
- commands.push({
- divider: true
- });
- }
+ if (itemHelper.canEditImages(user, item) && options.editImages !== false) {
+ commands.push({
+ name: globalize.translate('EditImages'),
+ id: 'editimages',
+ icon: 'image'
+ });
+ }
- 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 (!restrictOptions && 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) {
- 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 '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 'multiSelect':
+ import('./multiSelect/multiSelect').then(({ startMultiSelect: startMultiSelect }) => {
+ const card = dom.parentWithClass(options.positionTo, 'card');
+ startMultiSelect(card);
+ });
+ 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 d149a633a0..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.
@@ -20,7 +19,7 @@ import '../../elements/emby-button/emby-button';
import '../../elements/emby-button/paper-icon-button-light';
import '../formdialog.scss';
import 'material-design-icons-iconfont';
-import '../../assets/css/flexstyles.scss';
+import '../../styles/flexstyles.scss';
import ServerConnections from '../ServerConnections';
import template from './itemMediaInfo.template.html';
@@ -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}`;
- }
- 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 += '
';
- 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\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)} 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 += '
';
- 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 = '
';
+ 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 += '
';
+ 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\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 += '
';
+ 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 f9244f22c1..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);
- }
-
- 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'));
-
- 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('
');
+
+ 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 += `
`;
+ html += ``;
+ html += '
';
+ html += `
`;
+
+ html += '
';
+
+ if (result.ImageUrl) {
+ html += `
`;
+ } else {
+ html += `
${escapeHtml(result.Name)}
`;
+ }
+ html += '
';
+ html += '
';
+
+ let numLines = 3;
+ if (currentItemType === 'MusicAlbum') {
+ numLines++;
+ }
+
+ const lines = [result.Name];
+
+ lines.push(result.SearchProviderName);
+
+ if (result.AlbumArtist) {
+ lines.push(result.AlbumArtist.Name);
+ }
+ if (result.ProductionYear) {
+ lines.push(result.ProductionYear);
+ }
+
+ for (let i = 0; i < numLines; i++) {
+ if (i === 0) {
+ html += '
';
+ } else {
+ html += '
';
+ }
+ html += escapeHtml(lines[i] || '') || ' ';
+ html += '
';
+ }
+
+ html += '
';
+ html += '';
+ return html;
+}
+
+function submitIdentficationResult(page) {
+ loading.show();
+
+ const options = {
+ ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked
+ };
+
+ const apiClient = getApiClient();
+
+ apiClient.ajax({
+ type: 'POST',
+ url: apiClient.getUrl(`Items/RemoteSearch/Apply/${currentItem.Id}`, options),
+ data: JSON.stringify(currentSearchResult),
+ contentType: 'application/json'
+
+ }).then(() => {
hasChanges = true;
loading.hide();
- dialogHelper.close(dlg);
- }
+ dialogHelper.close(page);
+ }, () => {
+ loading.hide();
- function showIdentifyOptions(page, identifyResult) {
- const identifyOptionsForm = page.querySelector('.identifyOptionsForm');
+ dialogHelper.close(page);
+ });
+}
- 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('
');
-
- 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
+function showIdentificationForm(page, item) {
+ const apiClient = getApiClient();
+ apiClient.getJSON(apiClient.getUrl(`Items/${item.Id}/ExternalIdInfos`)).then(idList => {
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';
- }
+ for (let i = 0, length = idList.length; i < length; i++) {
+ const idInfo = idList[i];
- if (layoutManager.tv) {
- cssClass += ' show-focus';
+ const id = `txtLookup${idInfo.Key}`;
- if (enableFocusTransform) {
- cssClass += ' show-animation';
+ html += '