';
-
- html += getDisplayTime(startDate);
- html += '
';
-
- // Add 30 mins
- startDate.setTime(startDate.getTime() + cellDurationMs);
- }
-
- return html;
- }
-
- function parseDates(program) {
- if (!program.StartDateLocal) {
- try {
- program.StartDateLocal = datetime.parseISO8601Date(program.StartDate, { toLocal: true });
- } catch (err) {
- console.error('error parsing timestamp for start date');
- }
- }
-
- if (!program.EndDateLocal) {
- try {
- program.EndDateLocal = datetime.parseISO8601Date(program.EndDate, { toLocal: true });
- } catch (err) {
- console.error('error parsing timestamp for end date');
- }
- }
-
- return null;
- }
-
- function getTimerIndicator(item) {
- var status;
-
- if (item.Type === 'SeriesTimer') {
- return '';
- } else if (item.TimerId || item.SeriesTimerId) {
- status = item.Status || 'Cancelled';
- } else if (item.Type === 'Timer') {
- status = item.Status;
- } else {
- return '';
- }
-
- if (item.SeriesTimerId) {
- if (status !== 'Cancelled') {
- return '';
- }
-
- return '';
- }
-
- return '';
- }
-
- function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
- var html = '';
-
- var startMs = date.getTime();
- var endMs = startMs + msPerDay - 1;
-
- var outerCssClass = layoutManager.tv ? 'channelPrograms channelPrograms-tv' : 'channelPrograms';
-
- html += '';
-
- var clickAction = layoutManager.tv ? 'link' : 'programdialog';
-
- var categories = self.categoryOptions.categories || [];
- var displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
- var displaySportsContent = !categories.length || categories.indexOf('sports') !== -1;
- var displayNewsContent = !categories.length || categories.indexOf('news') !== -1;
- var displayKidsContent = !categories.length || categories.indexOf('kids') !== -1;
- var displaySeriesContent = !categories.length || categories.indexOf('series') !== -1;
- var enableColorCodedBackgrounds = userSettings.get('guide-colorcodedbackgrounds') === 'true';
-
- var programsFound;
- var now = new Date().getTime();
-
- for (var i = listInfo.startIndex, length = programs.length; i < length; i++) {
- var program = programs[i];
-
- if (program.ChannelId !== channel.Id) {
- if (programsFound) {
- break;
- }
-
- continue;
- }
-
- programsFound = true;
- listInfo.startIndex++;
-
- parseDates(program);
-
- var startDateLocalMs = program.StartDateLocal.getTime();
- var endDateLocalMs = program.EndDateLocal.getTime();
-
- if (endDateLocalMs < startMs) {
- continue;
- }
-
- if (startDateLocalMs > endMs) {
- break;
- }
-
- items[program.Id] = program;
-
- var renderStartMs = Math.max(startDateLocalMs, startMs);
- var startPercent = (startDateLocalMs - startMs) / msPerDay;
- startPercent *= 100;
- startPercent = Math.max(startPercent, 0);
-
- var renderEndMs = Math.min(endDateLocalMs, endMs);
- var endPercent = (renderEndMs - renderStartMs) / msPerDay;
- endPercent *= 100;
-
- var cssClass = 'programCell itemAction';
- var accentCssClass = null;
- var displayInnerContent = true;
-
- if (program.IsKids) {
- displayInnerContent = displayKidsContent;
- accentCssClass = 'kids';
- } else if (program.IsSports) {
- displayInnerContent = displaySportsContent;
- accentCssClass = 'sports';
- } else if (program.IsNews) {
- displayInnerContent = displayNewsContent;
- accentCssClass = 'news';
- } else if (program.IsMovie) {
- displayInnerContent = displayMovieContent;
- accentCssClass = 'movie';
- } else if (program.IsSeries) {
- displayInnerContent = displaySeriesContent;
- } else {
- displayInnerContent = displayMovieContent && displayNewsContent && displaySportsContent && displayKidsContent && displaySeriesContent;
- }
-
- if (displayInnerContent && enableColorCodedBackgrounds && accentCssClass) {
- cssClass += ' programCell-' + accentCssClass;
- }
-
- if (now >= startDateLocalMs && now < endDateLocalMs) {
- cssClass += ' programCell-active';
- }
-
- var timerAttributes = '';
- if (program.TimerId) {
- timerAttributes += ' data-timerid="' + program.TimerId + '"';
- }
- if (program.SeriesTimerId) {
- timerAttributes += ' data-seriestimerid="' + program.SeriesTimerId + '"';
- }
-
- var isAttribute = endPercent >= 2 ? ' is="emby-programcell"' : '';
-
- html += '';
-
- if (displayInnerContent) {
- var guideProgramNameClass = 'guideProgramName';
-
- html += '
';
-
- return html;
- }
-
- function renderChannelHeaders(context, channels, apiClient) {
- var html = '';
-
- for (var i = 0, length = channels.length; i < length; i++) {
- var channel = channels[i];
- var hasChannelImage = channel.ImageTags.Primary;
-
- var cssClass = 'guide-channelHeaderCell itemAction';
-
- if (layoutManager.tv) {
- cssClass += ' guide-channelHeaderCell-tv';
- }
-
- var title = [];
- if (channel.ChannelNumber) {
- title.push(channel.ChannelNumber);
- }
- if (channel.Name) {
- title.push(channel.Name);
- }
-
- html += '';
- }
-
- var channelList = context.querySelector('.channelsContainer');
- channelList.innerHTML = html;
- imageLoader.lazyChildren(channelList);
- }
-
- function renderPrograms(context, date, channels, programs, options) {
- var listInfo = {
- startIndex: 0
- };
-
- var html = [];
-
- for (var i = 0, length = channels.length; i < length; i++) {
- html.push(getChannelProgramsHtml(context, date, channels[i], programs, options, listInfo));
- }
-
- programGrid.innerHTML = html.join('');
-
- programCells = programGrid.querySelectorAll('[is=emby-programcell]');
-
- updateProgramCellsOnScroll(programGrid, programCells);
- }
-
- function getProgramSortOrder(program, channels) {
- var channelId = program.ChannelId;
- var channelIndex = -1;
-
- for (var i = 0, length = channels.length; i < length; i++) {
- if (channelId === channels[i].Id) {
- channelIndex = i;
- break;
- }
- }
-
- var start = datetime.parseISO8601Date(program.StartDate, { toLocal: true });
-
- return (channelIndex * 10000000) + (start.getTime() / 60000);
- }
-
- function renderGuide(context, date, channels, programs, renderOptions, apiClient, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
- programs.sort(function (a, b) {
- return getProgramSortOrder(a, channels) - getProgramSortOrder(b, channels);
- });
-
- var activeElement = document.activeElement;
- var itemId = activeElement && activeElement.getAttribute ? activeElement.getAttribute('data-id') : null;
- var channelRowId = null;
-
- if (activeElement) {
- channelRowId = dom.parentWithClass(activeElement, 'channelPrograms');
- channelRowId = channelRowId && channelRowId.getAttribute ? channelRowId.getAttribute('data-channelid') : null;
- }
-
- renderChannelHeaders(context, channels, apiClient);
-
- var startDate = date;
- var endDate = new Date(startDate.getTime() + msPerDay);
- context.querySelector('.timeslotHeaders').innerHTML = getTimeslotHeadersHtml(startDate, endDate);
- items = {};
- renderPrograms(context, date, channels, programs, renderOptions);
-
- if (focusProgramOnRender) {
- focusProgram(context, itemId, channelRowId, focusToTimeMs, startTimeOfDayMs);
- }
-
- scrollProgramGridToTimeMs(context, scrollToTimeMs, startTimeOfDayMs);
- }
-
- function scrollProgramGridToTimeMs(context, scrollToTimeMs, startTimeOfDayMs) {
- scrollToTimeMs -= startTimeOfDayMs;
-
- var pct = scrollToTimeMs / msPerDay;
-
- programGrid.scrollTop = 0;
-
- var scrollPos = pct * programGrid.scrollWidth;
-
- nativeScrollTo(programGrid, scrollPos, true);
- }
-
- function focusProgram(context, itemId, channelRowId, focusToTimeMs, startTimeOfDayMs) {
- var focusElem;
- if (itemId) {
- focusElem = context.querySelector('[data-id="' + itemId + '"]');
- }
-
- if (focusElem) {
- focusManager.focus(focusElem);
- } else {
- var autoFocusParent;
-
- if (channelRowId) {
- autoFocusParent = context.querySelector('[data-channelid="' + channelRowId + '"]');
- }
-
- if (!autoFocusParent) {
- autoFocusParent = programGrid;
- }
-
- focusToTimeMs -= startTimeOfDayMs;
-
- var pct = (focusToTimeMs / msPerDay) * 100;
-
- var programCell = autoFocusParent.querySelector('.programCell');
-
- while (programCell) {
- var left = (programCell.style.left || '').replace('%', '');
- left = left ? parseFloat(left) : 0;
- var width = (programCell.style.width || '').replace('%', '');
- width = width ? parseFloat(width) : 0;
-
- if (left >= pct || (left + width) >= pct) {
- break;
- }
- programCell = programCell.nextSibling;
- }
-
- if (programCell) {
- focusManager.focus(programCell);
- } else {
- focusManager.autoFocus(autoFocusParent, true);
- }
- }
- }
-
- function nativeScrollTo(container, pos, horizontal) {
- if (container.scrollTo) {
- if (horizontal) {
- container.scrollTo(pos, 0);
- } else {
- container.scrollTo(0, pos);
- }
- } else {
- if (horizontal) {
- container.scrollLeft = Math.round(pos);
- } else {
- container.scrollTop = Math.round(pos);
- }
- }
- }
-
- var lastGridScroll = 0;
- var lastHeaderScroll = 0;
- var scrollXPct = 0;
- function onProgramGridScroll(context, elem, timeslotHeaders) {
- if ((new Date().getTime() - lastHeaderScroll) >= 1000) {
- lastGridScroll = new Date().getTime();
-
- var scrollLeft = elem.scrollLeft;
- scrollXPct = (scrollLeft * 100) / elem.scrollWidth;
- nativeScrollTo(timeslotHeaders, scrollLeft, true);
- }
-
- updateProgramCellsOnScroll(elem, programCells);
- }
-
- function onTimeslotHeadersScroll(context, elem) {
- if ((new Date().getTime() - lastGridScroll) >= 1000) {
- lastHeaderScroll = new Date().getTime();
- nativeScrollTo(programGrid, elem.scrollLeft, true);
- }
- }
-
- function changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
- var newStartDate = normalizeDateToTimeslot(date);
- currentDate = newStartDate;
-
- reloadGuide(page, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender);
- }
-
- function getDateTabText(date, isActive, tabIndex) {
- var cssClass = isActive ? 'emby-tab-button guide-date-tab-button emby-tab-button-active' : 'emby-tab-button guide-date-tab-button';
-
- var html = '';
-
- return html;
- }
-
- function setDateRange(page, guideInfo) {
- var today = new Date();
- var nowHours = today.getHours();
- today.setHours(nowHours, 0, 0, 0);
-
- var start = datetime.parseISO8601Date(guideInfo.StartDate, { toLocal: true });
- var end = datetime.parseISO8601Date(guideInfo.EndDate, { toLocal: true });
-
- start.setHours(nowHours, 0, 0, 0);
- end.setHours(0, 0, 0, 0);
-
- if (start.getTime() >= end.getTime()) {
- end.setDate(start.getDate() + 1);
- }
-
- start = new Date(Math.max(today, start));
-
- var dateTabsHtml = '';
- var tabIndex = 0;
-
- // TODO: Use date-fns
- var date = new Date();
-
- if (currentDate) {
- date.setTime(currentDate.getTime());
- }
-
- date.setHours(nowHours, 0, 0, 0);
-
- var startTimeOfDayMs = (start.getHours() * 60 * 60 * 1000);
- startTimeOfDayMs += start.getMinutes() * 60 * 1000;
-
- while (start <= end) {
- var isActive = date.getDate() === start.getDate() && date.getMonth() === start.getMonth() && date.getFullYear() === start.getFullYear();
-
- dateTabsHtml += getDateTabText(start, isActive, tabIndex);
-
- start.setDate(start.getDate() + 1);
- start.setHours(0, 0, 0, 0);
- tabIndex++;
- }
-
- page.querySelector('.emby-tabs-slider').innerHTML = dateTabsHtml;
- page.querySelector('.guideDateTabs').refresh();
-
- var newDate = new Date();
- var newDateHours = newDate.getHours();
- var scrollToTimeMs = newDateHours * 60 * 60 * 1000;
-
- var minutes = newDate.getMinutes();
- if (minutes >= 30) {
- scrollToTimeMs += 30 * 60 * 1000;
- }
-
- var focusToTimeMs = ((newDateHours * 60) + minutes) * 60 * 1000;
- changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, layoutManager.tv);
- }
-
- function reloadPage(page) {
- showLoading();
-
- var apiClient = connectionManager.getApiClient(options.serverId);
-
- apiClient.getLiveTvGuideInfo().then(function (guideInfo) {
- setDateRange(page, guideInfo);
- });
- }
-
- function getChannelProgramsFocusableElements(container) {
- var elements = container.querySelectorAll('.programCell');
-
- var list = [];
- // add 1 to avoid programs that are out of view to the left
- var currentScrollXPct = scrollXPct + 1;
-
- for (var i = 0, length = elements.length; i < length; i++) {
- var elem = elements[i];
-
- var left = (elem.style.left || '').replace('%', '');
- left = left ? parseFloat(left) : 0;
- var width = (elem.style.width || '').replace('%', '');
- width = width ? parseFloat(width) : 0;
-
- if ((left + width) >= currentScrollXPct) {
- list.push(elem);
- }
- }
-
- return list;
- }
-
- function onInputCommand(e) {
- var target = e.target;
- var programCell = dom.parentWithClass(target, 'programCell');
- var container;
- var channelPrograms;
- var focusableElements;
- var newRow;
-
- switch (e.detail.command) {
- case 'up':
- if (programCell) {
- container = programGrid;
- channelPrograms = dom.parentWithClass(programCell, 'channelPrograms');
-
- newRow = channelPrograms.previousSibling;
- if (newRow) {
- focusableElements = getChannelProgramsFocusableElements(newRow);
- if (focusableElements.length) {
- container = newRow;
- } else {
- focusableElements = null;
- }
- } else {
- container = null;
- }
- } else {
- container = null;
- }
- lastFocusDirection = e.detail.command;
-
- focusManager.moveUp(target, {
- container: container,
- focusableElements: focusableElements
- });
- break;
- case 'down':
- if (programCell) {
- container = programGrid;
- channelPrograms = dom.parentWithClass(programCell, 'channelPrograms');
-
- newRow = channelPrograms.nextSibling;
- if (newRow) {
- focusableElements = getChannelProgramsFocusableElements(newRow);
- if (focusableElements.length) {
- container = newRow;
- } else {
- focusableElements = null;
- }
- } else {
- container = null;
- }
- } else {
- container = null;
- }
- lastFocusDirection = e.detail.command;
-
- focusManager.moveDown(target, {
- container: container,
- focusableElements: focusableElements
- });
- break;
- case 'left':
- container = programCell ? dom.parentWithClass(programCell, 'channelPrograms') : null;
- // allow left outside the channelProgramsContainer when the first child is currently focused
- if (container && !programCell.previousSibling) {
- container = null;
- }
- lastFocusDirection = e.detail.command;
-
- focusManager.moveLeft(target, {
- container: container
- });
- break;
- case 'right':
- container = programCell ? dom.parentWithClass(programCell, 'channelPrograms') : null;
- lastFocusDirection = e.detail.command;
-
- focusManager.moveRight(target, {
- container: container
- });
- break;
- default:
- return;
- }
+ isUpdatingProgramCellScroll = false;
+ });
+}
+
+function onProgramGridClick(e) {
+ if (!layoutManager.tv) {
+ return;
+ }
+
+ const programCell = dom.parentWithClass(e.target, 'programCell');
+ if (programCell) {
+ let startDate = programCell.getAttribute('data-startdate');
+ let endDate = programCell.getAttribute('data-enddate');
+ startDate = datetime.parseISO8601Date(startDate, { toLocal: true }).getTime();
+ endDate = datetime.parseISO8601Date(endDate, { toLocal: true }).getTime();
+
+ const now = new Date().getTime();
+ if (now >= startDate && now < endDate) {
+ const channelId = programCell.getAttribute('data-channelid');
+ const serverId = programCell.getAttribute('data-serverid');
e.preventDefault();
e.stopPropagation();
- }
- function onScrollerFocus(e) {
- var target = e.target;
- var programCell = dom.parentWithClass(target, 'programCell');
-
- if (programCell) {
- var focused = target;
-
- var id = focused.getAttribute('data-id');
- var item = items[id];
-
- if (item) {
- events.trigger(self, 'focus', [
- {
- item: item
- }]);
- }
- }
-
- if (lastFocusDirection === 'left') {
- if (programCell) {
- scrollHelper.toStart(programGrid, programCell, true, true);
- }
- } else if (lastFocusDirection === 'right') {
- if (programCell) {
- scrollHelper.toCenter(programGrid, programCell, true, true);
- }
- } else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') {
- var verticalScroller = dom.parentWithClass(target, 'guideVerticalScroller');
- if (verticalScroller) {
- var focusedElement = programCell || dom.parentWithTag(target, 'BUTTON');
- verticalScroller.toCenter(focusedElement, true);
- }
- }
- }
-
- function setScrollEvents(view, enabled) {
- if (layoutManager.tv) {
- var guideVerticalScroller = view.querySelector('.guideVerticalScroller');
-
- if (enabled) {
- inputManager.on(guideVerticalScroller, onInputCommand);
- } else {
- inputManager.off(guideVerticalScroller, onInputCommand);
- }
- }
- }
-
- function onTimerCreated(e, apiClient, data) {
- var programId = data.ProgramId;
- // This could be null, not supported by all tv providers
- var newTimerId = data.Id;
-
- // find guide cells by program id, ensure timer icon
- var cells = options.element.querySelectorAll('.programCell[data-id="' + programId + '"]');
- for (var i = 0, length = cells.length; i < length; i++) {
- var cell = cells[i];
-
- var icon = cell.querySelector('.timerIcon');
- if (!icon) {
- cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '');
- }
-
- if (newTimerId) {
- cell.setAttribute('data-timerid', newTimerId);
- }
- }
- }
-
- function onSeriesTimerCreated(e, apiClient, data) {
- }
-
- function onTimerCancelled(e, apiClient, data) {
- var id = data.Id;
- // find guide cells by timer id, remove timer icon
- var cells = options.element.querySelectorAll('.programCell[data-timerid="' + id + '"]');
- for (var i = 0, length = cells.length; i < length; i++) {
- var cell = cells[i];
- var icon = cell.querySelector('.timerIcon');
- if (icon) {
- icon.parentNode.removeChild(icon);
- }
- cell.removeAttribute('data-timerid');
- }
- }
-
- function onSeriesTimerCancelled(e, apiClient, data) {
- var id = data.Id;
- // find guide cells by timer id, remove timer icon
- var cells = options.element.querySelectorAll('.programCell[data-seriestimerid="' + id + '"]');
- for (var i = 0, length = cells.length; i < length; i++) {
- var cell = cells[i];
- var icon = cell.querySelector('.seriesTimerIcon');
- if (icon) {
- icon.parentNode.removeChild(icon);
- }
- cell.removeAttribute('data-seriestimerid');
- }
- }
-
- require(['text!./tvguide.template.html'], function (template) {
- var context = options.element;
-
- context.classList.add('tvguide');
-
- context.innerHTML = globalize.translateHtml(template, 'core');
-
- programGrid = context.querySelector('.programGrid');
- var timeslotHeaders = context.querySelector('.timeslotHeaders');
-
- if (layoutManager.tv) {
- dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, {
- capture: true,
- passive: true
- });
- } else if (layoutManager.desktop) {
- timeslotHeaders.classList.add('timeslotHeaders-desktop');
- }
-
- if (browser.iOS || browser.osx) {
- context.querySelector('.channelsContainer').classList.add('noRubberBanding');
-
- programGrid.classList.add('noRubberBanding');
- }
-
- dom.addEventListener(programGrid, 'scroll', function (e) {
- onProgramGridScroll(context, this, timeslotHeaders);
- }, {
- passive: true
+ playbackManager.play({
+ ids: [channelId],
+ serverId: serverId
});
+ }
+ }
+}
- dom.addEventListener(timeslotHeaders, 'scroll', function () {
- onTimeslotHeadersScroll(context, this);
- }, {
- passive: true
- });
+function Guide(options) {
+ const self = this;
+ let items = {};
- programGrid.addEventListener('click', onProgramGridClick);
+ self.options = options;
+ self.categoryOptions = { categories: [] };
- context.querySelector('.btnNextPage').addEventListener('click', function () {
- currentStartIndex += currentChannelLimit;
- reloadPage(context);
- restartAutoRefresh();
- });
+ // 30 mins
+ const cellCurationMinutes = 30;
+ const cellDurationMs = cellCurationMinutes * 60 * 1000;
+ const msPerDay = 86400000;
- context.querySelector('.btnPreviousPage').addEventListener('click', function () {
- currentStartIndex = Math.max(currentStartIndex - currentChannelLimit, 0);
- reloadPage(context);
- restartAutoRefresh();
- });
+ let currentDate;
+ let currentStartIndex = 0;
+ let currentChannelLimit = 0;
+ let autoRefreshInterval;
+ let programCells;
+ let lastFocusDirection;
+ let programGrid;
- context.querySelector('.btnGuideViewSettings').addEventListener('click', function () {
- showViewSettings(self);
- restartAutoRefresh();
- });
+ self.refresh = function () {
+ currentDate = null;
+ reloadPage(options.element);
+ restartAutoRefresh();
+ };
- context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) {
- var allTabButtons = e.target.querySelectorAll('.guide-date-tab-button');
-
- var tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)];
- if (tabButton) {
- var previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)];
-
- var date = new Date();
- date.setTime(parseInt(tabButton.getAttribute('data-date')));
-
- var scrollWidth = programGrid.scrollWidth;
- var scrollToTimeMs;
- if (scrollWidth) {
- scrollToTimeMs = (programGrid.scrollLeft / scrollWidth) * msPerDay;
- } else {
- scrollToTimeMs = 0;
- }
-
- if (previousButton) {
- var previousDate = new Date();
- previousDate.setTime(parseInt(previousButton.getAttribute('data-date')));
-
- scrollToTimeMs += (previousDate.getHours() * 60 * 60 * 1000);
- scrollToTimeMs += (previousDate.getMinutes() * 60 * 1000);
- }
-
- var startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000);
- startTimeOfDayMs += (date.getMinutes() * 60 * 1000);
-
- changeDate(context, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false);
- }
- });
-
- setScrollEvents(context, true);
- itemShortcuts.on(context);
-
- events.trigger(self, 'load');
-
- events.on(serverNotifications, 'TimerCreated', onTimerCreated);
- events.on(serverNotifications, 'SeriesTimerCreated', onSeriesTimerCreated);
- events.on(serverNotifications, 'TimerCancelled', onTimerCancelled);
- events.on(serverNotifications, 'SeriesTimerCancelled', onSeriesTimerCancelled);
+ self.pause = function () {
+ stopAutoRefresh();
+ };
+ self.resume = function (refreshData) {
+ if (refreshData) {
self.refresh();
+ } else {
+ restartAutoRefresh();
+ }
+ };
+
+ self.destroy = function () {
+ stopAutoRefresh();
+
+ events.off(serverNotifications, 'TimerCreated', onTimerCreated);
+ events.off(serverNotifications, 'SeriesTimerCreated', onSeriesTimerCreated);
+ events.off(serverNotifications, 'TimerCancelled', onTimerCancelled);
+ events.off(serverNotifications, 'SeriesTimerCancelled', onSeriesTimerCancelled);
+
+ setScrollEvents(options.element, false);
+ itemShortcuts.off(options.element);
+ items = {};
+ };
+
+ function restartAutoRefresh() {
+ stopAutoRefresh();
+
+ const intervalMs = 60000 * 15; // (minutes)
+
+ autoRefreshInterval = setInterval(function () {
+ self.refresh();
+ }, intervalMs);
+ }
+
+ function stopAutoRefresh() {
+ if (autoRefreshInterval) {
+ clearInterval(autoRefreshInterval);
+ autoRefreshInterval = null;
+ }
+ }
+
+ function normalizeDateToTimeslot(date) {
+ const minutesOffset = date.getMinutes() - cellCurationMinutes;
+
+ if (minutesOffset >= 0) {
+ date.setHours(date.getHours(), cellCurationMinutes, 0, 0);
+ } else {
+ date.setHours(date.getHours(), 0, 0, 0);
+ }
+
+ return date;
+ }
+
+ function showLoading() {
+ loading.show();
+ }
+
+ function hideLoading() {
+ loading.hide();
+ }
+
+ function reloadGuide(context, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
+ const apiClient = connectionManager.getApiClient(options.serverId);
+
+ const channelQuery = {
+
+ StartIndex: 0,
+ EnableFavoriteSorting: userSettings.get('livetv-favoritechannelsattop') !== 'false'
+ };
+
+ channelQuery.UserId = apiClient.getCurrentUserId();
+
+ const channelLimit = 500;
+ currentChannelLimit = channelLimit;
+
+ showLoading();
+
+ channelQuery.StartIndex = currentStartIndex;
+ channelQuery.Limit = channelLimit;
+ channelQuery.AddCurrentProgram = false;
+ channelQuery.EnableUserData = false;
+ channelQuery.EnableImageTypes = 'Primary';
+
+ const categories = self.categoryOptions.categories || [];
+ const displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
+ const displaySportsContent = !categories.length || categories.indexOf('sports') !== -1;
+ const displayNewsContent = !categories.length || categories.indexOf('news') !== -1;
+ const displayKidsContent = !categories.length || categories.indexOf('kids') !== -1;
+ const displaySeriesContent = !categories.length || categories.indexOf('series') !== -1;
+
+ if (displayMovieContent && displaySportsContent && displayNewsContent && displayKidsContent) {
+ channelQuery.IsMovie = null;
+ channelQuery.IsSports = null;
+ channelQuery.IsKids = null;
+ channelQuery.IsNews = null;
+ channelQuery.IsSeries = null;
+ } else {
+ if (displayNewsContent) {
+ channelQuery.IsNews = true;
+ }
+ if (displaySportsContent) {
+ channelQuery.IsSports = true;
+ }
+ if (displayKidsContent) {
+ channelQuery.IsKids = true;
+ }
+ if (displayMovieContent) {
+ channelQuery.IsMovie = true;
+ }
+ if (displaySeriesContent) {
+ channelQuery.IsSeries = true;
+ }
+ }
+
+ if (userSettings.get('livetv-channelorder') === 'DatePlayed') {
+ channelQuery.SortBy = 'DatePlayed';
+ channelQuery.SortOrder = 'Descending';
+ } else {
+ channelQuery.SortBy = null;
+ channelQuery.SortOrder = null;
+ }
+
+ let date = newStartDate;
+ // Add one second to avoid getting programs that are just ending
+ date = new Date(date.getTime() + 1000);
+
+ // Subtract to avoid getting programs that are starting when the grid ends
+ const nextDay = new Date(date.getTime() + msPerDay - 2000);
+
+ // Normally we'd want to just let responsive css handle this,
+ // but since mobile browsers are often underpowered,
+ // it can help performance to get them out of the markup
+ const allowIndicators = dom.getWindowSize().innerWidth >= 600;
+
+ const renderOptions = {
+ showHdIcon: allowIndicators && userSettings.get('guide-indicator-hd') === 'true',
+ showLiveIndicator: allowIndicators && userSettings.get('guide-indicator-live') !== 'false',
+ showPremiereIndicator: allowIndicators && userSettings.get('guide-indicator-premiere') !== 'false',
+ showNewIndicator: allowIndicators && userSettings.get('guide-indicator-new') !== 'false',
+ showRepeatIndicator: allowIndicators && userSettings.get('guide-indicator-repeat') === 'true',
+ showEpisodeTitle: layoutManager.tv ? false : true
+ };
+
+ apiClient.getLiveTvChannels(channelQuery).then(function (channelsResult) {
+ const btnPreviousPage = context.querySelector('.btnPreviousPage');
+ const btnNextPage = context.querySelector('.btnNextPage');
+
+ if (channelsResult.TotalRecordCount > channelLimit) {
+ context.querySelector('.guideOptions').classList.remove('hide');
+
+ btnPreviousPage.classList.remove('hide');
+ btnNextPage.classList.remove('hide');
+
+ if (channelQuery.StartIndex) {
+ context.querySelector('.btnPreviousPage').disabled = false;
+ } else {
+ context.querySelector('.btnPreviousPage').disabled = true;
+ }
+
+ if ((channelQuery.StartIndex + channelLimit) < channelsResult.TotalRecordCount) {
+ btnNextPage.disabled = false;
+ } else {
+ btnNextPage.disabled = true;
+ }
+ } else {
+ context.querySelector('.guideOptions').classList.add('hide');
+ }
+
+ const programFields = [];
+
+ const programQuery = {
+ UserId: apiClient.getCurrentUserId(),
+ MaxStartDate: nextDay.toISOString(),
+ MinEndDate: date.toISOString(),
+ channelIds: channelsResult.Items.map(function (c) {
+ return c.Id;
+ }).join(','),
+ ImageTypeLimit: 1,
+ EnableImages: false,
+ //EnableImageTypes: layoutManager.tv ? "Primary,Backdrop" : "Primary",
+ SortBy: 'StartDate',
+ EnableTotalRecordCount: false,
+ EnableUserData: false
+ };
+
+ if (renderOptions.showHdIcon) {
+ programFields.push('IsHD');
+ }
+
+ if (programFields.length) {
+ programQuery.Fields = programFields.join('');
+ }
+
+ apiClient.getLiveTvPrograms(programQuery).then(function (programsResult) {
+ renderGuide(context, date, channelsResult.Items, programsResult.Items, renderOptions, apiClient, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender);
+
+ hideLoading();
+ });
});
}
- return Guide;
-});
+ function getDisplayTime(date) {
+ if ((typeof date).toString().toLowerCase() === 'string') {
+ try {
+ date = datetime.parseISO8601Date(date, { toLocal: true });
+ } catch (err) {
+ return date;
+ }
+ }
+
+ return datetime.getDisplayTime(date).toLowerCase();
+ }
+
+ function getTimeslotHeadersHtml(startDate, endDateTime) {
+ let html = '';
+
+ // clone
+ startDate = new Date(startDate.getTime());
+
+ html += '';
-
- html += '';
-
- html += '
';
- }
-
- html += '';
- }
-
- html += '' + program.Name;
-
- var indicatorHtml = null;
- if (program.IsLive && options.showLiveIndicator) {
- indicatorHtml = '' + globalize.translate('Live') + '';
- } else if (program.IsPremiere && options.showPremiereIndicator) {
- indicatorHtml = '' + globalize.translate('Premiere') + '';
- } else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
- indicatorHtml = '' + globalize.translate('AttributeNew') + '';
- } else if (program.IsSeries && program.IsRepeat && options.showRepeatIndicator) {
- indicatorHtml = '' + globalize.translate('Repeat') + '';
- }
- html += indicatorHtml || '';
-
- if ((program.EpisodeTitle && options.showEpisodeTitle)) {
- html += '
';
-
- if (program.IsHD && options.showHdIcon) {
- if (layoutManager.tv) {
- html += '';
-
- if (program.EpisodeTitle && options.showEpisodeTitle) {
- html += '' + program.EpisodeTitle + '';
- }
- html += '
';
- }
-
- html += 'HD
';
- } else {
- html += 'HD
';
- }
- }
-
- html += getTimerIndicator(program);
-
- html += '';
+
+ while (startDate.getTime() < endDateTime) {
+ html += '.split('?')[0] + '/empty.png)
';
+ imageContainer.classList.remove('hide');
+
+ imageLoader.lazyChildren(imageContainer);
+ } else {
+ imageContainer.innerHTML = '';
+ imageContainer.classList.add('hide');
}
- if (imageTags.Primary) {
- return apiClient.getScaledImageUrl(item.Id, {
- type: 'Primary',
- maxHeight: imageHeight,
- tag: item.ImageTags.Primary
- });
- } else if (imageTags.Thumb) {
- return apiClient.getScaledImageUrl(item.Id, {
- type: 'Thumb',
- maxHeight: imageHeight,
- tag: item.ImageTags.Thumb
- });
+ context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
+ context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
+ context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
+ context.querySelector('.itemOverview').innerHTML = program.Overview || '';
+
+ const formDialogFooter = context.querySelector('.formDialogFooter');
+ const now = new Date();
+ if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
+ formDialogFooter.classList.remove('hide');
+ } else {
+ formDialogFooter.classList.add('hide');
}
- return null;
+ context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
}
- function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
- if (!refreshRecordingStateOnly) {
- var imgUrl = getImageUrl(program, apiClient, 200);
- var imageContainer = context.querySelector('.recordingDialog-imageContainer');
+ context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program, {
+ });
- if (imgUrl) {
- imageContainer.innerHTML = '';
- imageContainer.classList.remove('hide');
+ loading.hide();
+}
- imageLoader.lazyChildren(imageContainer);
- } else {
- imageContainer.innerHTML = '';
- imageContainer.classList.add('hide');
- }
+function reload(context, programId, serverId, refreshRecordingStateOnly) {
+ loading.show();
- context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
- context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
- context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
- context.querySelector('.itemOverview').innerHTML = program.Overview || '';
+ const apiClient = connectionManager.getApiClient(serverId);
- var formDialogFooter = context.querySelector('.formDialogFooter');
- var now = new Date();
- if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
- formDialogFooter.classList.remove('hide');
- } else {
- formDialogFooter.classList.add('hide');
- }
+ const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
+ const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
- context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
- }
+ Promise.all([promise1, promise2]).then(function (responses) {
+ const defaults = responses[0];
+ const program = responses[1];
- context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program, {
- });
+ renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
+ });
+}
- loading.hide();
- }
+function executeCloseAction(action, programId, serverId) {
+ if (action === 'play') {
+ import('playbackManager').then(({default: playbackManager}) => {
+ const apiClient = connectionManager.getApiClient(serverId);
- function reload(context, programId, serverId, refreshRecordingStateOnly) {
- loading.show();
-
- var apiClient = connectionManager.getApiClient(serverId);
-
- var promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
- var promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
-
- Promise.all([promise1, promise2]).then(function (responses) {
- var defaults = responses[0];
- var program = responses[1];
-
- renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
- });
- }
-
- function executeCloseAction(action, programId, serverId) {
- if (action === 'play') {
- require(['playbackManager'], function (playbackManager) {
- var apiClient = connectionManager.getApiClient(serverId);
-
- apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
- playbackManager.default.play({
- ids: [item.ChannelId],
- serverId: serverId
- });
- });
- });
- return;
- }
- }
-
- function showEditor(itemId, serverId) {
- return new Promise(function (resolve, reject) {
- closeAction = null;
-
- loading.show();
-
- require(['text!./recordingcreator.template.html'], function (template) {
- var dialogOptions = {
- removeOnClose: true,
- scrollY: false
- };
-
- if (layoutManager.tv) {
- dialogOptions.size = 'fullscreen';
- } else {
- dialogOptions.size = 'small';
- }
-
- var dlg = dialogHelper.createDialog(dialogOptions);
-
- dlg.classList.add('formDialog');
- dlg.classList.add('recordingDialog');
-
- var html = '';
-
- html += globalize.translateHtml(template, 'core');
-
- dlg.innerHTML = html;
-
- currentDialog = dlg;
-
- function onRecordingChanged() {
- reload(dlg, itemId, serverId, true);
- }
-
- dlg.addEventListener('close', function () {
- events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
- executeCloseAction(closeAction, itemId, serverId);
-
- if (currentRecordingFields && currentRecordingFields.hasChanged()) {
- resolve();
- } else {
- reject();
- }
- });
-
- if (layoutManager.tv) {
- scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
- }
-
- init(dlg);
-
- reload(dlg, itemId, serverId);
-
- currentRecordingFields = new recordingFields({
- parent: dlg.querySelector('.recordingFields'),
- programId: itemId,
+ apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
+ playbackManager.play({
+ ids: [item.ChannelId],
serverId: serverId
});
-
- events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged);
-
- dialogHelper.open(dlg);
});
});
+ return;
}
+}
- return {
- show: showEditor
- };
-});
+function showEditor(itemId, serverId) {
+ return new Promise(function (resolve, reject) {
+ closeAction = null;
+
+ loading.show();
+
+ import('text!./recordingcreator.template.html').then(({default: template}) => {
+ const dialogOptions = {
+ removeOnClose: true,
+ scrollY: false
+ };
+
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
+ } else {
+ dialogOptions.size = 'small';
+ }
+
+ const dlg = dialogHelper.createDialog(dialogOptions);
+
+ dlg.classList.add('formDialog');
+ dlg.classList.add('recordingDialog');
+
+ let html = '';
+
+ html += globalize.translateHtml(template, 'core');
+
+ dlg.innerHTML = html;
+
+ currentDialog = dlg;
+
+ function onRecordingChanged() {
+ reload(dlg, itemId, serverId, true);
+ }
+
+ dlg.addEventListener('close', function () {
+ events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
+ executeCloseAction(closeAction, itemId, serverId);
+
+ if (currentRecordingFields && currentRecordingFields.hasChanged()) {
+ resolve();
+ } else {
+ reject();
+ }
+ });
+
+ if (layoutManager.tv) {
+ scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+ }
+
+ init(dlg);
+
+ reload(dlg, itemId, serverId);
+
+ currentRecordingFields = new recordingFields({
+ parent: dlg.querySelector('.recordingFields'),
+ programId: itemId,
+ serverId: serverId
+ });
+
+ events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged);
+
+ dialogHelper.open(dlg);
+ });
+ });
+}
+
+export default {
+ show: showEditor
+};
diff --git a/src/components/recordingcreator/recordingeditor.js b/src/components/recordingcreator/recordingeditor.js
index 7117778eb0..e9aca85347 100644
--- a/src/components/recordingcreator/recordingeditor.js
+++ b/src/components/recordingcreator/recordingeditor.js
@@ -3,6 +3,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
scrollHelper = scrollHelper.default || scrollHelper;
loading = loading.default || loading;
+ layoutManager = layoutManager.default || layoutManager;
var currentDialog;
var recordingDeleted = false;
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index b5ac4c9a8b..6048c918c7 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -1,939 +1,954 @@
-define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'globalize', 'layoutManager', 'userSettings', 'cardBuilder', 'itemContextMenu', 'cardStyle', 'emby-itemscontainer', 'css!./remotecontrol.css', 'emby-ratingbutton'], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings, cardBuilder, itemContextMenu) {
- 'use strict';
+import datetime from 'datetime';
+import backdrop from 'backdrop';
+import listView from 'listView';
+import imageLoader from 'imageLoader';
+import playbackManager from 'playbackManager';
+import nowPlayingHelper from 'nowPlayingHelper';
+import events from 'events';
+import connectionManager from 'connectionManager';
+import appHost from 'apphost';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import * as userSettings from 'userSettings';
+import cardBuilder from 'cardBuilder';
+import itemContextMenu from 'itemContextMenu';
+import 'cardStyle';
+import 'emby-itemscontainer';
+import 'css!./remotecontrol.css';
+import 'emby-ratingbutton';
- playbackManager = playbackManager.default || playbackManager;
+/*eslint prefer-const: "error"*/
- var showMuteButton = true;
- var showVolumeSlider = true;
+let showMuteButton = true;
+let showVolumeSlider = true;
- function showAudioMenu(context, player, button, item) {
- var currentIndex = playbackManager.getAudioStreamIndex(player);
- var streams = playbackManager.audioTracks(player);
- var menuItems = streams.map(function (s) {
- var menuItem = {
- name: s.DisplayTitle,
- id: s.Index
- };
+function showAudioMenu(context, player, button, item) {
+ const currentIndex = playbackManager.getAudioStreamIndex(player);
+ const streams = playbackManager.audioTracks(player);
+ const menuItems = streams.map(function (s) {
+ const menuItem = {
+ name: s.DisplayTitle,
+ id: s.Index
+ };
- if (s.Index == currentIndex) {
- menuItem.selected = true;
- }
-
- return menuItem;
- });
-
- require(['actionsheet'], function (actionsheet) {
- actionsheet.show({
- items: menuItems,
- positionTo: button,
- callback: function (id) {
- playbackManager.setAudioStreamIndex(parseInt(id), player);
- }
- });
- });
- }
-
- function showSubtitleMenu(context, player, button, item) {
- var currentIndex = playbackManager.getSubtitleStreamIndex(player);
- var streams = playbackManager.subtitleTracks(player);
- var menuItems = streams.map(function (s) {
- var menuItem = {
- name: s.DisplayTitle,
- id: s.Index
- };
-
- if (s.Index == currentIndex) {
- menuItem.selected = true;
- }
-
- return menuItem;
- });
- menuItems.unshift({
- id: -1,
- name: globalize.translate('ButtonOff'),
- selected: currentIndex == null
- });
-
- require(['actionsheet'], function (actionsheet) {
- actionsheet.show({
- items: menuItems,
- positionTo: button,
- callback: function (id) {
- playbackManager.setSubtitleStreamIndex(parseInt(id), player);
- }
- });
- });
- }
-
- function getNowPlayingNameHtml(nowPlayingItem, includeNonNameInfo) {
- return nowPlayingHelper.getNowPlayingNames(nowPlayingItem, includeNonNameInfo).map(function (i) {
- return i.text;
- }).join('
'); - } - - function seriesImageUrl(item, options) { - if (item.Type !== 'Episode') { - return null; + if (s.Index == currentIndex) { + menuItem.selected = true; } - options = options || {}; - options.type = options.type || 'Primary'; - if (options.type === 'Primary' && item.SeriesPrimaryImageTag) { - options.tag = item.SeriesPrimaryImageTag; + return menuItem; + }); + + import('actionsheet').then(({ default: actionsheet }) => { + actionsheet.show({ + items: menuItems, + positionTo: button, + callback: function (id) { + playbackManager.setAudioStreamIndex(parseInt(id), player); + } + }); + }); +} + +function showSubtitleMenu(context, player, button, item) { + const currentIndex = playbackManager.getSubtitleStreamIndex(player); + const streams = playbackManager.subtitleTracks(player); + const menuItems = streams.map(function (s) { + const menuItem = { + name: s.DisplayTitle, + id: s.Index + }; + + if (s.Index == currentIndex) { + menuItem.selected = true; + } + + return menuItem; + }); + menuItems.unshift({ + id: -1, + name: globalize.translate('ButtonOff'), + selected: currentIndex == null + }); + + import('actionsheet').then(({ default: actionsheet }) => { + actionsheet.show({ + items: menuItems, + positionTo: button, + callback: function (id) { + playbackManager.setSubtitleStreamIndex(parseInt(id), player); + } + }); + }); +} + +function getNowPlayingNameHtml(nowPlayingItem, includeNonNameInfo) { + return nowPlayingHelper.getNowPlayingNames(nowPlayingItem, includeNonNameInfo).map(function (i) { + return i.text; + }).join('
'); +} + +function seriesImageUrl(item, options) { + if (item.Type !== 'Episode') { + return null; + } + + options = options || {}; + options.type = options.type || 'Primary'; + if (options.type === 'Primary' && item.SeriesPrimaryImageTag) { + options.tag = item.SeriesPrimaryImageTag; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); + } + + if (options.type === 'Thumb') { + if (item.SeriesThumbImageTag) { + options.tag = item.SeriesThumbImageTag; return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); } - if (options.type === 'Thumb') { - if (item.SeriesThumbImageTag) { - options.tag = item.SeriesThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - - if (item.ParentThumbImageTag) { - options.tag = item.ParentThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); - } + if (item.ParentThumbImageTag) { + options.tag = item.ParentThumbImageTag; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); } - - return null; } - function imageUrl(item, options) { - options = options || {}; - options.type = options.type || 'Primary'; + return null; +} - if (item.ImageTags && item.ImageTags[options.type]) { - options.tag = item.ImageTags[options.type]; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); - } +function imageUrl(item, options) { + options = options || {}; + options.type = options.type || 'Primary'; - if (item.AlbumId && item.AlbumPrimaryImageTag) { - options.tag = item.AlbumPrimaryImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); - } - - return null; + if (item.ImageTags && item.ImageTags[options.type]) { + options.tag = item.ImageTags[options.type]; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); } - function updateNowPlayingInfo(context, state, serverId) { - var item = state.NowPlayingItem; - var displayName = item ? getNowPlayingNameHtml(item).replace('
', ' - ') : ''; - if (typeof item !== 'undefined') { - var nowPlayingServerId = (item.ServerId || serverId); - if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') { - var songName = item.Name; - var artistsSeries = ''; - var albumName = ''; - if (item.Artists != null) { - if (item.ArtistItems != null) { - for (const artist of item.ArtistItems) { - let artistName = artist.Name; - let artistId = artist.Id; - artistsSeries += `${artistName}`; - if (artist !== item.ArtistItems.slice(-1)[0]) { - artistsSeries += ', '; - } + if (item.AlbumId && item.AlbumPrimaryImageTag) { + options.tag = item.AlbumPrimaryImageTag; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); + } + + return null; +} + +function updateNowPlayingInfo(context, state, serverId) { + const item = state.NowPlayingItem; + const displayName = item ? getNowPlayingNameHtml(item).replace('
', ' - ') : ''; + if (typeof item !== 'undefined') { + const nowPlayingServerId = (item.ServerId || serverId); + if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') { + const songName = item.Name; + let artistsSeries = ''; + let albumName = ''; + if (item.Artists != null) { + if (item.ArtistItems != null) { + for (const artist of item.ArtistItems) { + const artistName = artist.Name; + const artistId = artist.Id; + artistsSeries += `${artistName}`; + if (artist !== item.ArtistItems.slice(-1)[0]) { + artistsSeries += ', '; } - } else if (item.Artists) { - // For some reason, Chromecast Player doesn't return a item.ArtistItems object, so we need to fallback - // to normal item.Artists item. - // TODO: Normalise fields returned by all the players - for (const artist of item.Artists) { - artistsSeries += `${artist}`; - if (artist !== item.Artists.slice(-1)[0]) { - artistsSeries += ', '; - } + } + } else if (item.Artists) { + // For some reason, Chromecast Player doesn't return a item.ArtistItems object, so we need to fallback + // to normal item.Artists item. + // TODO: Normalise fields returned by all the players + for (const artist of item.Artists) { + artistsSeries += `${artist}`; + if (artist !== item.Artists.slice(-1)[0]) { + artistsSeries += ', '; } } } - if (item.Album != null) { - albumName = '` + item.Album + ''; - } - context.querySelector('.nowPlayingAlbum').innerHTML = albumName; - context.querySelector('.nowPlayingArtist').innerHTML = artistsSeries; - context.querySelector('.nowPlayingSongName').innerHTML = songName; - } else if (item.Type == 'Episode') { - if (item.SeasonName != null) { - var seasonName = item.SeasonName; - context.querySelector('.nowPlayingSeason').innerHTML = '${seasonName}`; - } - if (item.SeriesName != null) { - var seriesName = item.SeriesName; - if (item.SeriesId != null) { - context.querySelector('.nowPlayingSerie').innerHTML = '${seriesName}`; - } else { - context.querySelector('.nowPlayingSerie').innerHTML = seriesName; - } - } - context.querySelector('.nowPlayingEpisode').innerHTML = item.Name; - } else { - context.querySelector('.nowPlayingPageTitle').innerHTML = displayName; } - - if (displayName.length > 0 && item.Type != 'Audio' && item.Type != 'Episode') { - context.querySelector('.nowPlayingPageTitle').classList.remove('hide'); - } else { - context.querySelector('.nowPlayingPageTitle').classList.add('hide'); + if (item.Album != null) { + albumName = '` + item.Album + ''; } - - var url = item ? seriesImageUrl(item, { - maxHeight: 300 - }) || imageUrl(item, { - maxHeight: 300 - }) : null; - - let contextButton = context.querySelector('.btnToggleContextMenu'); - // We remove the previous event listener by replacing the item in each update event - const autoFocusContextButton = document.activeElement === contextButton; - let contextButtonClone = contextButton.cloneNode(true); - contextButton.parentNode.replaceChild(contextButtonClone, contextButton); - contextButton = context.querySelector('.btnToggleContextMenu'); - if (autoFocusContextButton) { - contextButton.focus(); + context.querySelector('.nowPlayingAlbum').innerHTML = albumName; + context.querySelector('.nowPlayingArtist').innerHTML = artistsSeries; + context.querySelector('.nowPlayingSongName').innerHTML = songName; + } else if (item.Type == 'Episode') { + if (item.SeasonName != null) { + const seasonName = item.SeasonName; + context.querySelector('.nowPlayingSeason').innerHTML = '${seasonName}`; } - const stopPlayback = !!layoutManager.mobile; - var options = { - play: false, - queue: false, - stopPlayback: stopPlayback, - clearQueue: true, - openAlbum: false, - positionTo: contextButton - }; - var apiClient = connectionManager.getApiClient(item.ServerId); - apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { - apiClient.getCurrentUser().then(function (user) { - contextButton.addEventListener('click', function () { - itemContextMenu.show(Object.assign({ - item: fullItem, - user: user - }, options)); - }); - }); - }); - setImageUrl(context, state, url); - if (item) { - backdrop.setBackdrops([item]); - apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { - var userData = fullItem.UserData || {}; - var likes = userData.Likes == null ? '' : userData.Likes; - context.querySelector('.nowPlayingPageUserDataButtonsTitle').innerHTML = ''; - context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; - }); - } else { - backdrop.clearBackdrop(); - context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; - } - } - } - - function setImageUrl(context, state, url) { - var item = state.NowPlayingItem; - var imgContainer = context.querySelector('.nowPlayingPageImageContainer'); - - if (url) { - imgContainer.innerHTML = '
';
- if (item.Type == 'Audio') {
- context.querySelector('.nowPlayingPageImage').classList.add('nowPlayingPageImageAudio');
- context.querySelector('.nowPlayingPageImageContainer').classList.remove('nowPlayingPageImageAudio');
- } else {
- context.querySelector('.nowPlayingPageImageContainer').classList.add('nowPlayingPageImagePoster');
- context.querySelector('.nowPlayingPageImage').classList.remove('nowPlayingPageImageAudio');
- }
- } else {
- imgContainer.innerHTML = '';
- }
- }
-
- function buttonVisible(btn, enabled) {
- if (enabled) {
- btn.classList.remove('hide');
- } else {
- btn.classList.add('hide');
- }
- }
-
- function updateSupportedCommands(context, commands) {
- var all = context.querySelectorAll('.btnCommand');
-
- for (var i = 0, length = all.length; i < length; i++) {
- var enableButton = commands.indexOf(all[i].getAttribute('data-command')) !== -1;
- all[i].disabled = !enableButton;
- }
- }
-
- return function () {
- function toggleRepeat() {
- switch (playbackManager.getRepeatMode()) {
- case 'RepeatAll':
- playbackManager.setRepeatMode('RepeatOne');
- break;
- case 'RepeatOne':
- playbackManager.setRepeatMode('RepeatNone');
- break;
- case 'RepeatNone':
- playbackManager.setRepeatMode('RepeatAll');
- }
- }
-
- function updatePlayerState(player, context, state) {
- lastPlayerState = state;
- var item = state.NowPlayingItem;
- var playerInfo = playbackManager.getPlayerInfo();
- var supportedCommands = playerInfo.supportedCommands;
- currentPlayerSupportedCommands = supportedCommands;
- var playState = state.PlayState || {};
- var isSupportedCommands = supportedCommands.includes('DisplayMessage') || supportedCommands.includes('SendString') || supportedCommands.includes('Select');
- buttonVisible(context.querySelector('.btnToggleFullscreen'), item && item.MediaType == 'Video' && supportedCommands.includes('ToggleFullscreen'));
- updateAudioTracksDisplay(player, context);
- updateSubtitleTracksDisplay(player, context);
-
- if (supportedCommands.includes('DisplayMessage') && !currentPlayer.isLocalPlayer) {
- context.querySelector('.sendMessageSection').classList.remove('hide');
- } else {
- context.querySelector('.sendMessageSection').classList.add('hide');
- }
-
- if (supportedCommands.includes('SendString') && !currentPlayer.isLocalPlayer) {
- context.querySelector('.sendTextSection').classList.remove('hide');
- } else {
- context.querySelector('.sendTextSection').classList.add('hide');
- }
-
- if (supportedCommands.includes('Select') && !currentPlayer.isLocalPlayer) {
- context.querySelector('.navigationSection').classList.remove('hide');
- } else {
- context.querySelector('.navigationSection').classList.add('hide');
- }
-
- if (isSupportedCommands && !currentPlayer.isLocalPlayer) {
- context.querySelector('.remoteControlSection').classList.remove('hide');
- } else {
- context.querySelector('.remoteControlSection').classList.add('hide');
- }
-
- buttonVisible(context.querySelector('.btnStop'), item != null);
- buttonVisible(context.querySelector('.btnNextTrack'), item != null);
- buttonVisible(context.querySelector('.btnPreviousTrack'), item != null);
- if (layoutManager.mobile) {
- buttonVisible(context.querySelector('.btnRewind'), false);
- buttonVisible(context.querySelector('.btnFastForward'), false);
- } else {
- buttonVisible(context.querySelector('.btnRewind'), item != null);
- buttonVisible(context.querySelector('.btnFastForward'), item != null);
- }
- var positionSlider = context.querySelector('.nowPlayingPositionSlider');
-
- if (positionSlider && item && item.RunTimeTicks) {
- positionSlider.setKeyboardSteps(userSettings.skipBackLength() * 1000000 / item.RunTimeTicks,
- userSettings.skipForwardLength() * 1000000 / item.RunTimeTicks);
- }
-
- if (positionSlider && !positionSlider.dragging) {
- positionSlider.disabled = !playState.CanSeek;
- var isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null;
- positionSlider.setIsClear(isProgressClear);
- }
-
- updatePlayPauseState(playState.IsPaused, item != null);
- updateTimeDisplay(playState.PositionTicks, item ? item.RunTimeTicks : null);
- updatePlayerVolumeState(context, playState.IsMuted, playState.VolumeLevel);
-
- if (item && item.MediaType == 'Video') {
- context.classList.remove('hideVideoButtons');
- } else {
- context.classList.add('hideVideoButtons');
- }
-
- updateRepeatModeDisplay(playbackManager.getRepeatMode());
- onShuffleQueueModeChange(false);
- updateNowPlayingInfo(context, state);
- }
-
- function updateAudioTracksDisplay(player, context) {
- var supportedCommands = currentPlayerSupportedCommands;
- buttonVisible(context.querySelector('.btnAudioTracks'), playbackManager.audioTracks(player).length > 1 && supportedCommands.indexOf('SetAudioStreamIndex') != -1);
- }
-
- function updateSubtitleTracksDisplay(player, context) {
- var supportedCommands = currentPlayerSupportedCommands;
- buttonVisible(context.querySelector('.btnSubtitles'), playbackManager.subtitleTracks(player).length && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1);
- }
-
- function updateRepeatModeDisplay(repeatMode) {
- var context = dlg;
- let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
- const cssClass = 'buttonActive';
- let innHtml = '';
- let repeatOn = true;
-
- switch (repeatMode) {
- case 'RepeatAll':
- break;
- case 'RepeatOne':
- innHtml = '';
- break;
- case 'RepeatNone':
- default:
- repeatOn = false;
- break;
- }
-
- for (const toggleRepeatButton of toggleRepeatButtons) {
- toggleRepeatButton.classList.toggle(cssClass, repeatOn);
- toggleRepeatButton.innerHTML = innHtml;
- }
- }
-
- function updatePlayerVolumeState(context, isMuted, volumeLevel) {
- var view = context;
- var supportedCommands = currentPlayerSupportedCommands;
-
- if (supportedCommands.indexOf('Mute') === -1) {
- showMuteButton = false;
- }
-
- if (supportedCommands.indexOf('SetVolume') === -1) {
- showVolumeSlider = false;
- }
-
- if (currentPlayer.isLocalPlayer && appHost.supports('physicalvolumecontrol')) {
- showMuteButton = false;
- showVolumeSlider = false;
- }
-
- const buttonMute = view.querySelector('.buttonMute');
- const buttonMuteIcon = buttonMute.querySelector('.material-icons');
-
- buttonMuteIcon.classList.remove('volume_off', 'volume_up');
-
- if (isMuted) {
- buttonMute.setAttribute('title', globalize.translate('Unmute'));
- buttonMuteIcon.classList.add('volume_off');
- } else {
- buttonMute.setAttribute('title', globalize.translate('Mute'));
- buttonMuteIcon.classList.add('volume_up');
- }
-
- if (!showMuteButton && !showVolumeSlider) {
- context.querySelector('.volumecontrol').classList.add('hide');
- } else {
- buttonMute.classList.toggle('hide', !showMuteButton);
-
- var nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider');
- var nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer');
-
- if (nowPlayingVolumeSlider) {
- nowPlayingVolumeSliderContainer.classList.toggle('hide', !showVolumeSlider);
-
- if (!nowPlayingVolumeSlider.dragging) {
- nowPlayingVolumeSlider.value = volumeLevel || 0;
- }
- }
- }
- }
-
- function updatePlayPauseState(isPaused, isActive) {
- var context = dlg;
- var btnPlayPause = context.querySelector('.btnPlayPause');
- const btnPlayPauseIcon = btnPlayPause.querySelector('.material-icons');
-
- btnPlayPauseIcon.classList.remove('play_circle_filled', 'pause_circle_filled');
- btnPlayPauseIcon.classList.add(isPaused ? 'play_circle_filled' : 'pause_circle_filled');
-
- buttonVisible(btnPlayPause, isActive);
- }
-
- function updateTimeDisplay(positionTicks, runtimeTicks) {
- var context = dlg;
- var positionSlider = context.querySelector('.nowPlayingPositionSlider');
-
- if (positionSlider && !positionSlider.dragging) {
- if (runtimeTicks) {
- var pct = positionTicks / runtimeTicks;
- pct *= 100;
- positionSlider.value = pct;
+ if (item.SeriesName != null) {
+ const seriesName = item.SeriesName;
+ if (item.SeriesId != null) {
+ context.querySelector('.nowPlayingSerie').innerHTML = '${seriesName}`;
} else {
- positionSlider.value = 0;
+ context.querySelector('.nowPlayingSerie').innerHTML = seriesName;
}
}
-
- context.querySelector('.positionTime').innerHTML = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
- context.querySelector('.runtime').innerHTML = runtimeTicks != null ? datetime.getDisplayRunningTime(runtimeTicks) : '--:--';
+ context.querySelector('.nowPlayingEpisode').innerHTML = item.Name;
+ } else {
+ context.querySelector('.nowPlayingPageTitle').innerHTML = displayName;
}
- function getPlaylistItems(player) {
- return playbackManager.getPlaylist(player);
+ if (displayName.length > 0 && item.Type != 'Audio' && item.Type != 'Episode') {
+ context.querySelector('.nowPlayingPageTitle').classList.remove('hide');
+ } else {
+ context.querySelector('.nowPlayingPageTitle').classList.add('hide');
}
- function loadPlaylist(context, player) {
- getPlaylistItems(player).then(function (items) {
- var html = '';
- let favoritesEnabled = true;
- if (layoutManager.mobile) {
- if (items.length > 0) {
- context.querySelector('.btnTogglePlaylist').classList.remove('hide');
- } else {
- context.querySelector('.btnTogglePlaylist').classList.add('hide');
- }
- favoritesEnabled = false;
- }
+ const url = item ? seriesImageUrl(item, {
+ maxHeight: 300
+ }) || imageUrl(item, {
+ maxHeight: 300
+ }) : null;
- html += listView.getListViewHtml({
- items: items,
- smallIcon: true,
- action: 'setplaylistindex',
- enableUserDataButtons: favoritesEnabled,
- rightButtons: [{
- icon: 'remove_circle_outline',
- title: globalize.translate('ButtonRemove'),
- id: 'remove'
- }],
- dragHandle: true
+ let contextButton = context.querySelector('.btnToggleContextMenu');
+ // We remove the previous event listener by replacing the item in each update event
+ const autoFocusContextButton = document.activeElement === contextButton;
+ const contextButtonClone = contextButton.cloneNode(true);
+ contextButton.parentNode.replaceChild(contextButtonClone, contextButton);
+ contextButton = context.querySelector('.btnToggleContextMenu');
+ if (autoFocusContextButton) {
+ contextButton.focus();
+ }
+ const stopPlayback = !!layoutManager.mobile;
+ const options = {
+ play: false,
+ queue: false,
+ stopPlayback: stopPlayback,
+ clearQueue: true,
+ openAlbum: false,
+ positionTo: contextButton
+ };
+ const apiClient = connectionManager.getApiClient(item.ServerId);
+ apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
+ apiClient.getCurrentUser().then(function (user) {
+ contextButton.addEventListener('click', function () {
+ itemContextMenu.show(Object.assign({
+ item: fullItem,
+ user: user
+ }, options));
});
-
- var itemsContainer = context.querySelector('.playlist');
- let focusedItemPlaylistId = itemsContainer.querySelector('button:focus');
- itemsContainer.innerHTML = html;
- if (focusedItemPlaylistId !== null) {
- focusedItemPlaylistId = focusedItemPlaylistId.getAttribute('data-playlistitemid');
- const newFocusedItem = itemsContainer.querySelector(`button[data-playlistitemid="${focusedItemPlaylistId}"]`);
- if (newFocusedItem !== null) {
- newFocusedItem.focus();
- }
- }
-
- var playlistItemId = playbackManager.getCurrentPlaylistItemId(player);
-
- if (playlistItemId) {
- var img = itemsContainer.querySelector(`.listItem[data-playlistItemId="${playlistItemId}"] .listItemImage`);
-
- if (img) {
- img.classList.remove('lazy');
- img.classList.add('playlistIndexIndicatorImage');
- }
- }
-
- imageLoader.lazyChildren(itemsContainer);
});
+ });
+ setImageUrl(context, state, url);
+ if (item) {
+ backdrop.setBackdrops([item]);
+ apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
+ const userData = fullItem.UserData || {};
+ const likes = userData.Likes == null ? '' : userData.Likes;
+ context.querySelector('.nowPlayingPageUserDataButtonsTitle').innerHTML = '';
+ context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
+ });
+ } else {
+ backdrop.clearBackdrop();
+ context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
+ }
+ }
+}
+
+function setImageUrl(context, state, url) {
+ const item = state.NowPlayingItem;
+ const imgContainer = context.querySelector('.nowPlayingPageImageContainer');
+
+ if (url) {
+ imgContainer.innerHTML = '';
+ if (item.Type == 'Audio') {
+ context.querySelector('.nowPlayingPageImage').classList.add('nowPlayingPageImageAudio');
+ context.querySelector('.nowPlayingPageImageContainer').classList.remove('nowPlayingPageImageAudio');
+ } else {
+ context.querySelector('.nowPlayingPageImageContainer').classList.add('nowPlayingPageImagePoster');
+ context.querySelector('.nowPlayingPageImage').classList.remove('nowPlayingPageImageAudio');
+ }
+ } else {
+ imgContainer.innerHTML = '';
+ }
+}
+
+function buttonVisible(btn, enabled) {
+ if (enabled) {
+ btn.classList.remove('hide');
+ } else {
+ btn.classList.add('hide');
+ }
+}
+
+function updateSupportedCommands(context, commands) {
+ const all = context.querySelectorAll('.btnCommand');
+
+ for (let i = 0, length = all.length; i < length; i++) {
+ const enableButton = commands.indexOf(all[i].getAttribute('data-command')) !== -1;
+ all[i].disabled = !enableButton;
+ }
+}
+
+export default function () {
+ function toggleRepeat() {
+ switch (playbackManager.getRepeatMode()) {
+ case 'RepeatAll':
+ playbackManager.setRepeatMode('RepeatOne');
+ break;
+ case 'RepeatOne':
+ playbackManager.setRepeatMode('RepeatNone');
+ break;
+ case 'RepeatNone':
+ playbackManager.setRepeatMode('RepeatAll');
+ }
+ }
+
+ function updatePlayerState(player, context, state) {
+ lastPlayerState = state;
+ const item = state.NowPlayingItem;
+ const playerInfo = playbackManager.getPlayerInfo();
+ const supportedCommands = playerInfo.supportedCommands;
+ currentPlayerSupportedCommands = supportedCommands;
+ const playState = state.PlayState || {};
+ const isSupportedCommands = supportedCommands.includes('DisplayMessage') || supportedCommands.includes('SendString') || supportedCommands.includes('Select');
+ buttonVisible(context.querySelector('.btnToggleFullscreen'), item && item.MediaType == 'Video' && supportedCommands.includes('ToggleFullscreen'));
+ updateAudioTracksDisplay(player, context);
+ updateSubtitleTracksDisplay(player, context);
+
+ if (supportedCommands.includes('DisplayMessage') && !currentPlayer.isLocalPlayer) {
+ context.querySelector('.sendMessageSection').classList.remove('hide');
+ } else {
+ context.querySelector('.sendMessageSection').classList.add('hide');
}
- function onPlaybackStart(e, state) {
- console.debug('remotecontrol event: ' + e.type);
- var player = this;
- onStateChanged.call(player, e, state);
+ if (supportedCommands.includes('SendString') && !currentPlayer.isLocalPlayer) {
+ context.querySelector('.sendTextSection').classList.remove('hide');
+ } else {
+ context.querySelector('.sendTextSection').classList.add('hide');
}
- function onRepeatModeChange() {
- updateRepeatModeDisplay(playbackManager.getRepeatMode());
+ if (supportedCommands.includes('Select') && !currentPlayer.isLocalPlayer) {
+ context.querySelector('.navigationSection').classList.remove('hide');
+ } else {
+ context.querySelector('.navigationSection').classList.add('hide');
}
- function onShuffleQueueModeChange(updateView = true) {
- let shuffleMode = playbackManager.getQueueShuffleMode(this);
- let context = dlg;
- const cssClass = 'buttonActive';
- let shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
+ if (isSupportedCommands && !currentPlayer.isLocalPlayer) {
+ context.querySelector('.remoteControlSection').classList.remove('hide');
+ } else {
+ context.querySelector('.remoteControlSection').classList.add('hide');
+ }
- for (let shuffleButton of shuffleButtons) {
- switch (shuffleMode) {
- case 'Shuffle':
- shuffleButton.classList.add(cssClass);
- break;
- case 'Sorted':
- default:
- shuffleButton.classList.remove(cssClass);
- break;
+ buttonVisible(context.querySelector('.btnStop'), item != null);
+ buttonVisible(context.querySelector('.btnNextTrack'), item != null);
+ buttonVisible(context.querySelector('.btnPreviousTrack'), item != null);
+ if (layoutManager.mobile) {
+ buttonVisible(context.querySelector('.btnRewind'), false);
+ buttonVisible(context.querySelector('.btnFastForward'), false);
+ } else {
+ buttonVisible(context.querySelector('.btnRewind'), item != null);
+ buttonVisible(context.querySelector('.btnFastForward'), item != null);
+ }
+ const positionSlider = context.querySelector('.nowPlayingPositionSlider');
+
+ if (positionSlider && item && item.RunTimeTicks) {
+ positionSlider.setKeyboardSteps(userSettings.skipBackLength() * 1000000 / item.RunTimeTicks,
+ userSettings.skipForwardLength() * 1000000 / item.RunTimeTicks);
+ }
+
+ if (positionSlider && !positionSlider.dragging) {
+ positionSlider.disabled = !playState.CanSeek;
+ const isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null;
+ positionSlider.setIsClear(isProgressClear);
+ }
+
+ updatePlayPauseState(playState.IsPaused, item != null);
+ updateTimeDisplay(playState.PositionTicks, item ? item.RunTimeTicks : null);
+ updatePlayerVolumeState(context, playState.IsMuted, playState.VolumeLevel);
+
+ if (item && item.MediaType == 'Video') {
+ context.classList.remove('hideVideoButtons');
+ } else {
+ context.classList.add('hideVideoButtons');
+ }
+
+ updateRepeatModeDisplay(playbackManager.getRepeatMode());
+ onShuffleQueueModeChange(false);
+ updateNowPlayingInfo(context, state);
+ }
+
+ function updateAudioTracksDisplay(player, context) {
+ const supportedCommands = currentPlayerSupportedCommands;
+ buttonVisible(context.querySelector('.btnAudioTracks'), playbackManager.audioTracks(player).length > 1 && supportedCommands.indexOf('SetAudioStreamIndex') != -1);
+ }
+
+ function updateSubtitleTracksDisplay(player, context) {
+ const supportedCommands = currentPlayerSupportedCommands;
+ buttonVisible(context.querySelector('.btnSubtitles'), playbackManager.subtitleTracks(player).length && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1);
+ }
+
+ function updateRepeatModeDisplay(repeatMode) {
+ const context = dlg;
+ const toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
+ const cssClass = 'buttonActive';
+ let innHtml = '';
+ let repeatOn = true;
+
+ switch (repeatMode) {
+ case 'RepeatAll':
+ break;
+ case 'RepeatOne':
+ innHtml = '';
+ break;
+ case 'RepeatNone':
+ default:
+ repeatOn = false;
+ break;
+ }
+
+ for (const toggleRepeatButton of toggleRepeatButtons) {
+ toggleRepeatButton.classList.toggle(cssClass, repeatOn);
+ toggleRepeatButton.innerHTML = innHtml;
+ }
+ }
+
+ function updatePlayerVolumeState(context, isMuted, volumeLevel) {
+ const view = context;
+ const supportedCommands = currentPlayerSupportedCommands;
+
+ if (supportedCommands.indexOf('Mute') === -1) {
+ showMuteButton = false;
+ }
+
+ if (supportedCommands.indexOf('SetVolume') === -1) {
+ showVolumeSlider = false;
+ }
+
+ if (currentPlayer.isLocalPlayer && appHost.supports('physicalvolumecontrol')) {
+ showMuteButton = false;
+ showVolumeSlider = false;
+ }
+
+ const buttonMute = view.querySelector('.buttonMute');
+ const buttonMuteIcon = buttonMute.querySelector('.material-icons');
+
+ buttonMuteIcon.classList.remove('volume_off', 'volume_up');
+
+ if (isMuted) {
+ buttonMute.setAttribute('title', globalize.translate('Unmute'));
+ buttonMuteIcon.classList.add('volume_off');
+ } else {
+ buttonMute.setAttribute('title', globalize.translate('Mute'));
+ buttonMuteIcon.classList.add('volume_up');
+ }
+
+ if (!showMuteButton && !showVolumeSlider) {
+ context.querySelector('.volumecontrol').classList.add('hide');
+ } else {
+ buttonMute.classList.toggle('hide', !showMuteButton);
+
+ const nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider');
+ const nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer');
+
+ if (nowPlayingVolumeSlider) {
+ nowPlayingVolumeSliderContainer.classList.toggle('hide', !showVolumeSlider);
+
+ if (!nowPlayingVolumeSlider.dragging) {
+ nowPlayingVolumeSlider.value = volumeLevel || 0;
}
}
-
- if (updateView) {
- onPlaylistUpdate();
- }
}
+ }
- function onPlaylistUpdate(e) {
- loadPlaylist(dlg, this);
- }
+ function updatePlayPauseState(isPaused, isActive) {
+ const context = dlg;
+ const btnPlayPause = context.querySelector('.btnPlayPause');
+ const btnPlayPauseIcon = btnPlayPause.querySelector('.material-icons');
- function onPlaylistItemRemoved(e, info) {
- var context = dlg;
- if (info !== undefined) {
- var playlistItemIds = info.playlistItemIds;
+ btnPlayPauseIcon.classList.remove('play_circle_filled', 'pause_circle_filled');
+ btnPlayPauseIcon.classList.add(isPaused ? 'play_circle_filled' : 'pause_circle_filled');
- for (var i = 0, length = playlistItemIds.length; i < length; i++) {
- var listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]');
+ buttonVisible(btnPlayPause, isActive);
+ }
- if (listItem) {
- listItem.parentNode.removeChild(listItem);
- }
- }
+ function updateTimeDisplay(positionTicks, runtimeTicks) {
+ const context = dlg;
+ const positionSlider = context.querySelector('.nowPlayingPositionSlider');
+
+ if (positionSlider && !positionSlider.dragging) {
+ if (runtimeTicks) {
+ let pct = positionTicks / runtimeTicks;
+ pct *= 100;
+ positionSlider.value = pct;
} else {
- onPlaylistUpdate();
+ positionSlider.value = 0;
}
}
- function onPlaybackStopped(e, state) {
- console.debug('remotecontrol event: ' + e.type);
- var player = this;
+ context.querySelector('.positionTime').innerHTML = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
+ context.querySelector('.runtime').innerHTML = runtimeTicks != null ? datetime.getDisplayRunningTime(runtimeTicks) : '--:--';
+ }
- if (!state.NextMediaType) {
- updatePlayerState(player, dlg, {});
- Emby.Page.back();
+ function getPlaylistItems(player) {
+ return playbackManager.getPlaylist(player);
+ }
+
+ function loadPlaylist(context, player) {
+ getPlaylistItems(player).then(function (items) {
+ let html = '';
+ let favoritesEnabled = true;
+ if (layoutManager.mobile) {
+ if (items.length > 0) {
+ context.querySelector('.btnTogglePlaylist').classList.remove('hide');
+ } else {
+ context.querySelector('.btnTogglePlaylist').classList.add('hide');
+ }
+ favoritesEnabled = false;
+ }
+
+ html += listView.getListViewHtml({
+ items: items,
+ smallIcon: true,
+ action: 'setplaylistindex',
+ enableUserDataButtons: favoritesEnabled,
+ rightButtons: [{
+ icon: 'remove_circle_outline',
+ title: globalize.translate('ButtonRemove'),
+ id: 'remove'
+ }],
+ dragHandle: true
+ });
+
+ const itemsContainer = context.querySelector('.playlist');
+ let focusedItemPlaylistId = itemsContainer.querySelector('button:focus');
+ itemsContainer.innerHTML = html;
+ if (focusedItemPlaylistId !== null) {
+ focusedItemPlaylistId = focusedItemPlaylistId.getAttribute('data-playlistitemid');
+ const newFocusedItem = itemsContainer.querySelector(`button[data-playlistitemid="${focusedItemPlaylistId}"]`);
+ if (newFocusedItem !== null) {
+ newFocusedItem.focus();
+ }
+ }
+
+ const playlistItemId = playbackManager.getCurrentPlaylistItemId(player);
+
+ if (playlistItemId) {
+ const img = itemsContainer.querySelector(`.listItem[data-playlistItemId="${playlistItemId}"] .listItemImage`);
+
+ if (img) {
+ img.classList.remove('lazy');
+ img.classList.add('playlistIndexIndicatorImage');
+ }
+ }
+
+ imageLoader.lazyChildren(itemsContainer);
+ });
+ }
+
+ function onPlaybackStart(e, state) {
+ console.debug('remotecontrol event: ' + e.type);
+ const player = this;
+ onStateChanged.call(player, e, state);
+ }
+
+ function onRepeatModeChange() {
+ updateRepeatModeDisplay(playbackManager.getRepeatMode());
+ }
+
+ function onShuffleQueueModeChange(updateView = true) {
+ const shuffleMode = playbackManager.getQueueShuffleMode(this);
+ const context = dlg;
+ const cssClass = 'buttonActive';
+ const shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
+
+ for (const shuffleButton of shuffleButtons) {
+ switch (shuffleMode) {
+ case 'Shuffle':
+ shuffleButton.classList.add(cssClass);
+ break;
+ case 'Sorted':
+ default:
+ shuffleButton.classList.remove(cssClass);
+ break;
}
}
- function onPlayPauseStateChanged(e) {
- updatePlayPauseState(this.paused(), true);
- }
-
- function onStateChanged(event, state) {
- var player = this;
- updatePlayerState(player, dlg, state);
+ if (updateView) {
onPlaylistUpdate();
}
+ }
- function onTimeUpdate(e) {
- var now = new Date().getTime();
+ function onPlaylistUpdate(e) {
+ loadPlaylist(dlg, this);
+ }
- if (!(now - lastUpdateTime < 700)) {
- lastUpdateTime = now;
- var player = this;
- currentRuntimeTicks = playbackManager.duration(player);
- updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks);
+ function onPlaylistItemRemoved(e, info) {
+ const context = dlg;
+ if (info !== undefined) {
+ const playlistItemIds = info.playlistItemIds;
+
+ for (let i = 0, length = playlistItemIds.length; i < length; i++) {
+ const listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]');
+
+ if (listItem) {
+ listItem.parentNode.removeChild(listItem);
+ }
+ }
+ } else {
+ onPlaylistUpdate();
+ }
+ }
+
+ function onPlaybackStopped(e, state) {
+ console.debug('remotecontrol event: ' + e.type);
+ const player = this;
+
+ if (!state.NextMediaType) {
+ updatePlayerState(player, dlg, {});
+ Emby.Page.back();
+ }
+ }
+
+ function onPlayPauseStateChanged(e) {
+ updatePlayPauseState(this.paused(), true);
+ }
+
+ function onStateChanged(event, state) {
+ const player = this;
+ updatePlayerState(player, dlg, state);
+ onPlaylistUpdate();
+ }
+
+ function onTimeUpdate(e) {
+ const now = new Date().getTime();
+
+ if (!(now - lastUpdateTime < 700)) {
+ lastUpdateTime = now;
+ const player = this;
+ currentRuntimeTicks = playbackManager.duration(player);
+ updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks);
+ }
+ }
+
+ function onVolumeChanged(e) {
+ const player = this;
+ updatePlayerVolumeState(dlg, player.isMuted(), player.getVolume());
+ }
+
+ function releaseCurrentPlayer() {
+ const player = currentPlayer;
+
+ if (player) {
+ events.off(player, 'playbackstart', onPlaybackStart);
+ events.off(player, 'statechange', onStateChanged);
+ events.off(player, 'repeatmodechange', onRepeatModeChange);
+ events.off(player, 'shufflequeuemodechange', onShuffleQueueModeChange);
+ events.off(player, 'playlistitemremove', onPlaylistItemRemoved);
+ events.off(player, 'playlistitemmove', onPlaylistUpdate);
+ events.off(player, 'playlistitemadd', onPlaylistUpdate);
+ events.off(player, 'playbackstop', onPlaybackStopped);
+ events.off(player, 'volumechange', onVolumeChanged);
+ events.off(player, 'pause', onPlayPauseStateChanged);
+ events.off(player, 'unpause', onPlayPauseStateChanged);
+ events.off(player, 'timeupdate', onTimeUpdate);
+ currentPlayer = null;
+ }
+ }
+
+ function bindToPlayer(context, player) {
+ if (releaseCurrentPlayer(), currentPlayer = player, player) {
+ const state = playbackManager.getPlayerState(player);
+ onStateChanged.call(player, {
+ type: 'init'
+ }, state);
+ events.on(player, 'playbackstart', onPlaybackStart);
+ events.on(player, 'statechange', onStateChanged);
+ events.on(player, 'repeatmodechange', onRepeatModeChange);
+ events.on(player, 'shufflequeuemodechange', onShuffleQueueModeChange);
+ events.on(player, 'playlistitemremove', onPlaylistItemRemoved);
+ events.on(player, 'playlistitemmove', onPlaylistUpdate);
+ events.on(player, 'playlistitemadd', onPlaylistUpdate);
+ events.on(player, 'playbackstop', onPlaybackStopped);
+ events.on(player, 'volumechange', onVolumeChanged);
+ events.on(player, 'pause', onPlayPauseStateChanged);
+ events.on(player, 'unpause', onPlayPauseStateChanged);
+ events.on(player, 'timeupdate', onTimeUpdate);
+ const playerInfo = playbackManager.getPlayerInfo();
+ const supportedCommands = playerInfo.supportedCommands;
+ currentPlayerSupportedCommands = supportedCommands;
+ updateSupportedCommands(context, supportedCommands);
+ }
+ }
+
+ function onBtnCommandClick() {
+ if (currentPlayer) {
+ if (this.classList.contains('repeatToggleButton')) {
+ toggleRepeat();
+ } else {
+ playbackManager.sendCommand({
+ Name: this.getAttribute('data-command')
+ }, currentPlayer);
}
}
+ }
- function onVolumeChanged(e) {
- var player = this;
- updatePlayerVolumeState(dlg, player.isMuted(), player.getVolume());
+ function getSaveablePlaylistItems() {
+ return getPlaylistItems(currentPlayer).then(function (items) {
+ return items.filter(function (i) {
+ return i.Id && i.ServerId;
+ });
+ });
+ }
+
+ function savePlaylist() {
+ import('playlistEditor').then(({ default: playlistEditor }) => {
+ getSaveablePlaylistItems().then(function (items) {
+ const serverId = items.length ? items[0].ServerId : ApiClient.serverId();
+ new playlistEditor({
+ items: items.map(function (i) {
+ return i.Id;
+ }),
+ serverId: serverId,
+ enableAddToPlayQueue: false,
+ defaultValue: 'new'
+ });
+ });
+ });
+ }
+
+ function bindEvents(context) {
+ const btnCommand = context.querySelectorAll('.btnCommand');
+ const positionSlider = context.querySelector('.nowPlayingPositionSlider');
+
+ for (let i = 0, length = btnCommand.length; i < length; i++) {
+ btnCommand[i].addEventListener('click', onBtnCommandClick);
}
- function releaseCurrentPlayer() {
- var player = currentPlayer;
-
- if (player) {
- events.off(player, 'playbackstart', onPlaybackStart);
- events.off(player, 'statechange', onStateChanged);
- events.off(player, 'repeatmodechange', onRepeatModeChange);
- events.off(player, 'shufflequeuemodechange', onShuffleQueueModeChange);
- events.off(player, 'playlistitemremove', onPlaylistItemRemoved);
- events.off(player, 'playlistitemmove', onPlaylistUpdate);
- events.off(player, 'playlistitemadd', onPlaylistUpdate);
- events.off(player, 'playbackstop', onPlaybackStopped);
- events.off(player, 'volumechange', onVolumeChanged);
- events.off(player, 'pause', onPlayPauseStateChanged);
- events.off(player, 'unpause', onPlayPauseStateChanged);
- events.off(player, 'timeupdate', onTimeUpdate);
- currentPlayer = null;
- }
- }
-
- function bindToPlayer(context, player) {
- if (releaseCurrentPlayer(), currentPlayer = player, player) {
- var state = playbackManager.getPlayerState(player);
- onStateChanged.call(player, {
- type: 'init'
- }, state);
- events.on(player, 'playbackstart', onPlaybackStart);
- events.on(player, 'statechange', onStateChanged);
- events.on(player, 'repeatmodechange', onRepeatModeChange);
- events.on(player, 'shufflequeuemodechange', onShuffleQueueModeChange);
- events.on(player, 'playlistitemremove', onPlaylistItemRemoved);
- events.on(player, 'playlistitemmove', onPlaylistUpdate);
- events.on(player, 'playlistitemadd', onPlaylistUpdate);
- events.on(player, 'playbackstop', onPlaybackStopped);
- events.on(player, 'volumechange', onVolumeChanged);
- events.on(player, 'pause', onPlayPauseStateChanged);
- events.on(player, 'unpause', onPlayPauseStateChanged);
- events.on(player, 'timeupdate', onTimeUpdate);
- var playerInfo = playbackManager.getPlayerInfo();
- var supportedCommands = playerInfo.supportedCommands;
- currentPlayerSupportedCommands = supportedCommands;
- updateSupportedCommands(context, supportedCommands);
- }
- }
-
- function onBtnCommandClick() {
+ context.querySelector('.btnToggleFullscreen').addEventListener('click', function (e) {
if (currentPlayer) {
- if (this.classList.contains('repeatToggleButton')) {
- toggleRepeat();
+ playbackManager.sendCommand({
+ Name: e.target.getAttribute('data-command')
+ }, currentPlayer);
+ }
+ });
+ context.querySelector('.btnAudioTracks').addEventListener('click', function (e) {
+ if (currentPlayer && lastPlayerState && lastPlayerState.NowPlayingItem) {
+ showAudioMenu(context, currentPlayer, e.target, lastPlayerState.NowPlayingItem);
+ }
+ });
+ context.querySelector('.btnSubtitles').addEventListener('click', function (e) {
+ if (currentPlayer && lastPlayerState && lastPlayerState.NowPlayingItem) {
+ showSubtitleMenu(context, currentPlayer, e.target, lastPlayerState.NowPlayingItem);
+ }
+ });
+ context.querySelector('.btnStop').addEventListener('click', function () {
+ if (currentPlayer) {
+ playbackManager.stop(currentPlayer);
+ }
+ });
+ context.querySelector('.btnPlayPause').addEventListener('click', function () {
+ if (currentPlayer) {
+ playbackManager.playPause(currentPlayer);
+ }
+ });
+ context.querySelector('.btnNextTrack').addEventListener('click', function () {
+ if (currentPlayer) {
+ playbackManager.nextTrack(currentPlayer);
+ }
+ });
+ context.querySelector('.btnRewind').addEventListener('click', function () {
+ if (currentPlayer) {
+ playbackManager.rewind(currentPlayer);
+ }
+ });
+ context.querySelector('.btnFastForward').addEventListener('click', function () {
+ if (currentPlayer) {
+ playbackManager.fastForward(currentPlayer);
+ }
+ });
+ for (const shuffleButton of context.querySelectorAll('.btnShuffleQueue')) {
+ shuffleButton.addEventListener('click', function () {
+ if (currentPlayer) {
+ playbackManager.toggleQueueShuffleMode(currentPlayer);
+ }
+ });
+ }
+
+ context.querySelector('.btnPreviousTrack').addEventListener('click', function (e) {
+ if (currentPlayer) {
+ if (lastPlayerState.NowPlayingItem.MediaType === 'Audio' && (currentPlayer._currentTime >= 5 || !playbackManager.previousTrack(currentPlayer))) {
+ // Cancel this event if doubleclick is fired
+ if (e.detail > 1 && playbackManager.previousTrack(currentPlayer)) {
+ return;
+ }
+ playbackManager.seekPercent(0, currentPlayer);
+ // This is done automatically by playbackManager. However, setting this here gives instant visual feedback.
+ // TODO: Check why seekPercentage doesn't reflect the changes inmmediately, so we can remove this workaround.
+ positionSlider.value = 0;
} else {
- playbackManager.sendCommand({
- Name: this.getAttribute('data-command')
- }, currentPlayer);
- }
- }
- }
-
- function getSaveablePlaylistItems() {
- return getPlaylistItems(currentPlayer).then(function (items) {
- return items.filter(function (i) {
- return i.Id && i.ServerId;
- });
- });
- }
-
- function savePlaylist() {
- require(['playlistEditor'], function (playlistEditor) {
- getSaveablePlaylistItems().then(function (items) {
- var serverId = items.length ? items[0].ServerId : ApiClient.serverId();
- new playlistEditor.showEditor({
- items: items.map(function (i) {
- return i.Id;
- }),
- serverId: serverId,
- enableAddToPlayQueue: false,
- defaultValue: 'new'
- });
- });
- });
- }
-
- function bindEvents(context) {
- var btnCommand = context.querySelectorAll('.btnCommand');
- var positionSlider = context.querySelector('.nowPlayingPositionSlider');
-
- for (var i = 0, length = btnCommand.length; i < length; i++) {
- btnCommand[i].addEventListener('click', onBtnCommandClick);
- }
-
- context.querySelector('.btnToggleFullscreen').addEventListener('click', function (e) {
- if (currentPlayer) {
- playbackManager.sendCommand({
- Name: e.target.getAttribute('data-command')
- }, currentPlayer);
- }
- });
- context.querySelector('.btnAudioTracks').addEventListener('click', function (e) {
- if (currentPlayer && lastPlayerState && lastPlayerState.NowPlayingItem) {
- showAudioMenu(context, currentPlayer, e.target, lastPlayerState.NowPlayingItem);
- }
- });
- context.querySelector('.btnSubtitles').addEventListener('click', function (e) {
- if (currentPlayer && lastPlayerState && lastPlayerState.NowPlayingItem) {
- showSubtitleMenu(context, currentPlayer, e.target, lastPlayerState.NowPlayingItem);
- }
- });
- context.querySelector('.btnStop').addEventListener('click', function () {
- if (currentPlayer) {
- playbackManager.stop(currentPlayer);
- }
- });
- context.querySelector('.btnPlayPause').addEventListener('click', function () {
- if (currentPlayer) {
- playbackManager.playPause(currentPlayer);
- }
- });
- context.querySelector('.btnNextTrack').addEventListener('click', function () {
- if (currentPlayer) {
- playbackManager.nextTrack(currentPlayer);
- }
- });
- context.querySelector('.btnRewind').addEventListener('click', function () {
- if (currentPlayer) {
- playbackManager.rewind(currentPlayer);
- }
- });
- context.querySelector('.btnFastForward').addEventListener('click', function () {
- if (currentPlayer) {
- playbackManager.fastForward(currentPlayer);
- }
- });
- for (const shuffleButton of context.querySelectorAll('.btnShuffleQueue')) {
- shuffleButton.addEventListener('click', function () {
- if (currentPlayer) {
- playbackManager.toggleQueueShuffleMode(currentPlayer);
- }
- });
- }
-
- context.querySelector('.btnPreviousTrack').addEventListener('click', function (e) {
- if (currentPlayer) {
- if (lastPlayerState.NowPlayingItem.MediaType === 'Audio' && (currentPlayer._currentTime >= 5 || !playbackManager.previousTrack(currentPlayer))) {
- // Cancel this event if doubleclick is fired
- if (e.detail > 1 && playbackManager.previousTrack(currentPlayer)) {
- return;
- }
- playbackManager.seekPercent(0, currentPlayer);
- // This is done automatically by playbackManager. However, setting this here gives instant visual feedback.
- // TODO: Check why seekPercentage doesn't reflect the changes inmmediately, so we can remove this workaround.
- positionSlider.value = 0;
- } else {
- playbackManager.previousTrack(currentPlayer);
- }
- }
- });
-
- context.querySelector('.btnPreviousTrack').addEventListener('dblclick', function () {
- if (currentPlayer) {
playbackManager.previousTrack(currentPlayer);
}
- });
- positionSlider.addEventListener('change', function () {
- var value = this.value;
+ }
+ });
- if (currentPlayer) {
- var newPercent = parseFloat(value);
- playbackManager.seekPercent(newPercent, currentPlayer);
- }
- });
+ context.querySelector('.btnPreviousTrack').addEventListener('dblclick', function () {
+ if (currentPlayer) {
+ playbackManager.previousTrack(currentPlayer);
+ }
+ });
+ positionSlider.addEventListener('change', function () {
+ const value = this.value;
- positionSlider.getBubbleText = function (value) {
- var state = lastPlayerState;
+ if (currentPlayer) {
+ const newPercent = parseFloat(value);
+ playbackManager.seekPercent(newPercent, currentPlayer);
+ }
+ });
- if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
- return '--:--';
- }
+ positionSlider.getBubbleText = function (value) {
+ const state = lastPlayerState;
- var ticks = currentRuntimeTicks;
- ticks /= 100;
- ticks *= value;
- return datetime.getDisplayRunningTime(ticks);
- };
+ if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
+ return '--:--';
+ }
- context.querySelector('.nowPlayingVolumeSlider').addEventListener('input', (e) => {
- playbackManager.setVolume(e.target.value, currentPlayer);
- });
+ let ticks = currentRuntimeTicks;
+ ticks /= 100;
+ ticks *= value;
+ return datetime.getDisplayRunningTime(ticks);
+ };
- context.querySelector('.buttonMute').addEventListener('click', function () {
- playbackManager.toggleMute(currentPlayer);
- });
- var playlistContainer = context.querySelector('.playlist');
- playlistContainer.addEventListener('action-remove', function (e) {
- playbackManager.removeFromPlaylist([e.detail.playlistItemId], currentPlayer);
- });
- playlistContainer.addEventListener('itemdrop', function (e) {
- var newIndex = e.detail.newIndex;
- var playlistItemId = e.detail.playlistItemId;
- playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer);
- });
- context.querySelector('.btnSavePlaylist').addEventListener('click', savePlaylist);
- context.querySelector('.btnTogglePlaylist').addEventListener('click', function () {
- if (context.querySelector('.playlist').classList.contains('hide')) {
- context.querySelector('.playlist').classList.remove('hide');
- context.querySelector('.btnSavePlaylist').classList.remove('hide');
- context.querySelector('.volumecontrol').classList.add('hide');
- if (layoutManager.mobile) {
- context.querySelector('.playlistSectionButton').classList.remove('playlistSectionButtonTransparent');
- }
- } else {
- context.querySelector('.playlist').classList.add('hide');
- context.querySelector('.btnSavePlaylist').classList.add('hide');
- if (showMuteButton || showVolumeSlider) {
- context.querySelector('.volumecontrol').classList.remove('hide');
- }
- if (layoutManager.mobile) {
- context.querySelector('.playlistSectionButton').classList.add('playlistSectionButtonTransparent');
- }
- }
- });
- }
+ context.querySelector('.nowPlayingVolumeSlider').addEventListener('input', (e) => {
+ playbackManager.setVolume(e.target.value, currentPlayer);
+ });
- function onPlayerChange() {
- bindToPlayer(dlg, playbackManager.getCurrentPlayer());
- }
-
- function onMessageSubmit(e) {
- var form = e.target;
- playbackManager.sendCommand({
- Name: 'DisplayMessage',
- Arguments: {
- Header: form.querySelector('#txtMessageTitle').value,
- Text: form.querySelector('#txtMessageText', form).value
- }
- }, currentPlayer);
- form.querySelector('input').value = '';
-
- require(['toast'], function (toast) {
- toast('Message sent.');
- });
-
- e.preventDefault();
- e.stopPropagation();
- return false;
- }
-
- function onSendStringSubmit(e) {
- var form = e.target;
- playbackManager.sendCommand({
- Name: 'SendString',
- Arguments: {
- String: form.querySelector('#txtTypeText', form).value
- }
- }, currentPlayer);
- form.querySelector('input').value = '';
-
- require(['toast'], function (toast) {
- toast('Text sent.');
- });
-
- e.preventDefault();
- e.stopPropagation();
- return false;
- }
-
- function init(ownerView, context) {
- let volumecontrolHtml = '
';
+ }
+
+ let elem = context.querySelector('.subtitleResults');
+ elem.innerHTML = html;
+
+ loading.hide();
+}
+
+function searchForSubtitles(context, language) {
+ userSettings.set('subtitleeditor-language', language);
+
+ loading.show();
+
+ let apiClient = connectionManager.getApiClient(currentItem.ServerId);
+ let url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
+
+ apiClient.getJSON(url).then(function (results) {
+ renderSearchResults(context, results);
+ });
+}
+
+function reload(context, apiClient, itemId) {
+ context.querySelector('.noSearchResults').classList.add('hide');
+
+ function onGetItem(item) {
+ currentItem = item;
+
+ fillSubtitleList(context, item);
+ let file = item.Path || '';
+ let index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
+ if (index > -1) {
+ file = file.substring(index + 1);
+ }
+
+ if (file) {
+ context.querySelector('.pathValue').innerHTML = file;
+ context.querySelector('.originalFile').classList.remove('hide');
+ } else {
+ context.querySelector('.pathValue').innerHTML = '';
+ context.querySelector('.originalFile').classList.add('hide');
+ }
loading.hide();
}
- function searchForSubtitles(context, language) {
- userSettings.set('subtitleeditor-language', language);
+ if (typeof itemId === 'string') {
+ apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(onGetItem);
+ } else {
+ onGetItem(itemId);
+ }
+}
- loading.show();
+function onSearchSubmit(e) {
+ let form = this;
- var apiClient = connectionManager.getApiClient(currentItem.ServerId);
- var url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
+ let lang = form.querySelector('#selectLanguage', form).value;
- apiClient.getJSON(url).then(function (results) {
- renderSearchResults(context, results);
- });
+ searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
+
+ e.preventDefault();
+ return false;
+}
+
+function onSubtitleListClick(e) {
+ let btnDelete = dom.parentWithClass(e.target, 'btnDelete');
+ if (btnDelete) {
+ let index = btnDelete.getAttribute('data-index');
+ let context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
+ deleteLocalSubtitle(context, index);
+ }
+}
+
+function onSubtitleResultsClick(e) {
+ let subtitleId;
+ let context;
+
+ let btnOptions = dom.parentWithClass(e.target, 'btnOptions');
+ if (btnOptions) {
+ subtitleId = btnOptions.getAttribute('data-subid');
+ context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
+ showDownloadOptions(btnOptions, context, subtitleId);
}
- function reload(context, apiClient, itemId) {
- context.querySelector('.noSearchResults').classList.add('hide');
+ let btnDownload = dom.parentWithClass(e.target, 'btnDownload');
+ if (btnDownload) {
+ subtitleId = btnDownload.getAttribute('data-subid');
+ context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
+ downloadRemoteSubtitles(context, subtitleId);
+ }
+}
- function onGetItem(item) {
- currentItem = item;
+function showDownloadOptions(button, context, subtitleId) {
+ let items = [];
- fillSubtitleList(context, item);
- var file = item.Path || '';
- var index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
- if (index > -1) {
- file = file.substring(index + 1);
+ items.push({
+ name: globalize.translate('Download'),
+ id: 'download'
+ });
+
+ import('actionsheet').then(({default: actionsheet}) => {
+ actionsheet.show({
+ items: items,
+ positionTo: button
+
+ }).then(function (id) {
+ switch (id) {
+ case 'download':
+ downloadRemoteSubtitles(context, subtitleId);
+ break;
+ default:
+ break;
}
+ });
+ });
+}
- if (file) {
- context.querySelector('.pathValue').innerHTML = file;
- context.querySelector('.originalFile').classList.remove('hide');
- } else {
- context.querySelector('.pathValue').innerHTML = '';
- context.querySelector('.originalFile').classList.add('hide');
- }
+function centerFocus(elem, horiz, on) {
+ import('scrollHelper').then(({default: scrollHelper}) => {
+ let fn = on ? 'on' : 'off';
+ scrollHelper.centerFocus[fn](elem, horiz);
+ });
+}
- loading.hide();
- }
+function showEditorInternal(itemId, serverId, template) {
+ hasChanges = false;
- if (typeof itemId === 'string') {
- apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(onGetItem);
+ let apiClient = connectionManager.getApiClient(serverId);
+ return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
+ let dialogOptions = {
+ removeOnClose: true,
+ scrollY: false
+ };
+
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
} else {
- onGetItem(itemId);
- }
- }
-
- function onSearchSubmit(e) {
- var form = this;
-
- var lang = form.querySelector('#selectLanguage', form).value;
-
- searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
-
- e.preventDefault();
- return false;
- }
-
- function onSubtitleListClick(e) {
- var btnDelete = dom.parentWithClass(e.target, 'btnDelete');
- if (btnDelete) {
- var index = btnDelete.getAttribute('data-index');
- var context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
- deleteLocalSubtitle(context, index);
- }
- }
-
- function onSubtitleResultsClick(e) {
- var subtitleId;
- var context;
-
- var btnOptions = dom.parentWithClass(e.target, 'btnOptions');
- if (btnOptions) {
- subtitleId = btnOptions.getAttribute('data-subid');
- context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
- showDownloadOptions(btnOptions, context, subtitleId);
+ dialogOptions.size = 'small';
}
- var btnDownload = dom.parentWithClass(e.target, 'btnDownload');
- if (btnDownload) {
- subtitleId = btnDownload.getAttribute('data-subid');
- context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
- downloadRemoteSubtitles(context, subtitleId);
+ let dlg = dialogHelper.createDialog(dialogOptions);
+
+ dlg.classList.add('formDialog');
+ dlg.classList.add('subtitleEditorDialog');
+
+ dlg.innerHTML = globalize.translateHtml(template, 'core');
+
+ dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');
+
+ dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
+
+ let btnSubmit = dlg.querySelector('.btnSubmit');
+
+ if (layoutManager.tv) {
+ centerFocus(dlg.querySelector('.formDialogContent'), false, true);
+ dlg.querySelector('.btnSearchSubtitles').classList.add('hide');
+ } else {
+ btnSubmit.classList.add('hide');
}
- }
- function showDownloadOptions(button, context, subtitleId) {
- var items = [];
+ let editorContent = dlg.querySelector('.formDialogContent');
- items.push({
- name: globalize.translate('Download'),
- id: 'download'
+ dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
+ dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
+
+ apiClient.getCultures().then(function (languages) {
+ fillLanguages(editorContent, apiClient, languages);
});
- require(['actionsheet'], function (actionsheet) {
- actionsheet.show({
- items: items,
- positionTo: button
-
- }).then(function (id) {
- switch (id) {
- case 'download':
- downloadRemoteSubtitles(context, subtitleId);
- break;
- default:
- break;
- }
- });
+ dlg.querySelector('.btnCancel').addEventListener('click', function () {
+ dialogHelper.close(dlg);
});
- }
-
- function centerFocus(elem, horiz, on) {
- require(['scrollHelper'], function (scrollHelper) {
- scrollHelper = scrollHelper.default || scrollHelper;
- var fn = on ? 'on' : 'off';
- scrollHelper.centerFocus[fn](elem, horiz);
- });
- }
-
- function showEditorInternal(itemId, serverId, template) {
- hasChanges = false;
-
- var apiClient = connectionManager.getApiClient(serverId);
- return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
- var dialogOptions = {
- removeOnClose: true,
- scrollY: false
- };
-
- if (layoutManager.tv) {
- dialogOptions.size = 'fullscreen';
- } else {
- dialogOptions.size = 'small';
- }
-
- var dlg = dialogHelper.createDialog(dialogOptions);
-
- dlg.classList.add('formDialog');
- dlg.classList.add('subtitleEditorDialog');
-
- dlg.innerHTML = globalize.translateHtml(template, 'core');
-
- dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');
-
- dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
-
- var btnSubmit = dlg.querySelector('.btnSubmit');
-
- if (layoutManager.tv) {
- centerFocus(dlg.querySelector('.formDialogContent'), false, true);
- dlg.querySelector('.btnSearchSubtitles').classList.add('hide');
- } else {
- btnSubmit.classList.add('hide');
- }
-
- var editorContent = dlg.querySelector('.formDialogContent');
-
- dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
- dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
-
- apiClient.getCultures().then(function (languages) {
- fillLanguages(editorContent, apiClient, languages);
- });
-
- dlg.querySelector('.btnCancel').addEventListener('click', function () {
- dialogHelper.close(dlg);
- });
-
- return new Promise(function (resolve, reject) {
- dlg.addEventListener('close', function () {
- if (layoutManager.tv) {
- centerFocus(dlg.querySelector('.formDialogContent'), false, false);
- }
-
- if (hasChanges) {
- resolve();
- } else {
- reject();
- }
- });
-
- dialogHelper.open(dlg);
-
- reload(editorContent, apiClient, item);
- });
- });
- }
-
- function showEditor(itemId, serverId) {
- loading.show();
return new Promise(function (resolve, reject) {
- require(['text!./subtitleeditor.template.html'], function (template) {
- showEditorInternal(itemId, serverId, template).then(resolve, reject);
- });
- });
- }
+ dlg.addEventListener('close', function () {
+ if (layoutManager.tv) {
+ centerFocus(dlg.querySelector('.formDialogContent'), false, false);
+ }
- return {
- show: showEditor
- };
-});
+ if (hasChanges) {
+ resolve();
+ } else {
+ reject();
+ }
+ });
+
+ dialogHelper.open(dlg);
+
+ reload(editorContent, apiClient, item);
+ });
+ });
+}
+
+function showEditor(itemId, serverId) {
+ loading.show();
+
+ return new Promise(function (resolve, reject) {
+ import('text!./subtitleeditor.template.html').then(({default: template}) => {
+ showEditorInternal(itemId, serverId, template).then(resolve, reject);
+ });
+ });
+}
+
+export default {
+ show: showEditor
+};
diff --git a/src/components/subtitlesync/subtitlesync.js b/src/components/subtitlesync/subtitlesync.js
index 203d88535f..efb2087a1b 100644
--- a/src/components/subtitlesync/subtitlesync.js
+++ b/src/components/subtitlesync/subtitlesync.js
@@ -1,147 +1,148 @@
-define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, layoutManager, template, css) {
- 'use strict';
+import playbackManager from 'playbackManager';
+import layoutManager from 'layoutManager';
+import template from 'text!./subtitlesync.template.html';
+import 'css!./subtitlesync';
- playbackManager = playbackManager.default || playbackManager;
+let player;
+let subtitleSyncSlider;
+let subtitleSyncTextField;
+let subtitleSyncCloseButton;
+let subtitleSyncContainer;
- var player;
- var subtitleSyncSlider;
- var subtitleSyncTextField;
- var subtitleSyncCloseButton;
- var subtitleSyncContainer;
+function init(instance) {
+ const parent = document.createElement('div');
+ document.body.appendChild(parent);
+ parent.innerHTML = template;
- function init(instance) {
- var parent = document.createElement('div');
- document.body.appendChild(parent);
- parent.innerHTML = template;
+ subtitleSyncSlider = parent.querySelector('.subtitleSyncSlider');
+ subtitleSyncTextField = parent.querySelector('.subtitleSyncTextField');
+ subtitleSyncCloseButton = parent.querySelector('.subtitleSync-closeButton');
+ subtitleSyncContainer = parent.querySelector('.subtitleSyncContainer');
- subtitleSyncSlider = parent.querySelector('.subtitleSyncSlider');
- subtitleSyncTextField = parent.querySelector('.subtitleSyncTextField');
- subtitleSyncCloseButton = parent.querySelector('.subtitleSync-closeButton');
- subtitleSyncContainer = parent.querySelector('.subtitleSyncContainer');
+ if (layoutManager.tv) {
+ subtitleSyncSlider.classList.add('focusable');
+ // HACK: Delay to give time for registered element attach (Firefox)
+ setTimeout(function () {
+ subtitleSyncSlider.enableKeyboardDragging();
+ }, 0);
+ }
- if (layoutManager.tv) {
- subtitleSyncSlider.classList.add('focusable');
- // HACK: Delay to give time for registered element attach (Firefox)
- setTimeout(function () {
- subtitleSyncSlider.enableKeyboardDragging();
- }, 0);
- }
+ subtitleSyncContainer.classList.add('hide');
- subtitleSyncContainer.classList.add('hide');
+ subtitleSyncTextField.updateOffset = function (offset) {
+ this.textContent = offset + 's';
+ };
- subtitleSyncTextField.updateOffset = function(offset) {
- this.textContent = offset + 's';
- };
+ subtitleSyncTextField.addEventListener('click', function () {
+ // keep focus to prevent fade with osd
+ this.hasFocus = true;
+ });
- subtitleSyncTextField.addEventListener('click', function () {
+ subtitleSyncTextField.addEventListener('keydown', function (event) {
+ if (event.key === 'Enter') {
+ // if input key is enter search for float pattern
+ let inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
+ if (inputOffset) {
+ inputOffset = inputOffset[0];
+
+ // replace current text by considered offset
+ this.textContent = inputOffset + 's';
+
+ inputOffset = parseFloat(inputOffset);
+ // set new offset
+ playbackManager.setSubtitleOffset(inputOffset, player);
+ // synchronize with slider value
+ subtitleSyncSlider.updateOffset(
+ getPercentageFromOffset(inputOffset));
+ } else {
+ this.textContent = (playbackManager.getPlayerSubtitleOffset(player) || 0) + 's';
+ }
+ this.hasFocus = false;
+ event.preventDefault();
+ } else {
// keep focus to prevent fade with osd
this.hasFocus = true;
- });
-
- subtitleSyncTextField.addEventListener('keydown', function(event) {
- if (event.key === 'Enter') {
- // if input key is enter search for float pattern
- var inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
- if (inputOffset) {
- inputOffset = inputOffset[0];
-
- // replace current text by considered offset
- this.textContent = inputOffset + 's';
-
- inputOffset = parseFloat(inputOffset);
- // set new offset
- playbackManager.setSubtitleOffset(inputOffset, player);
- // synchronize with slider value
- subtitleSyncSlider.updateOffset(
- getPercentageFromOffset(inputOffset));
- } else {
- this.textContent = (playbackManager.getPlayerSubtitleOffset(player) || 0) + 's';
- }
- this.hasFocus = false;
+ if (event.key.match(/[+-\d.s]/) === null) {
event.preventDefault();
- } else {
- // keep focus to prevent fade with osd
- this.hasFocus = true;
- if (event.key.match(/[+-\d.s]/) === null) {
- event.preventDefault();
- }
}
+ }
- // FIXME: TV layout will require special handling for navigation keys. But now field is not focusable
- event.stopPropagation();
- });
+ // FIXME: TV layout will require special handling for navigation keys. But now field is not focusable
+ event.stopPropagation();
+ });
- subtitleSyncTextField.blur = function() {
- // prevent textfield to blur while element has focus
- if (!this.hasFocus && this.prototype) {
- this.prototype.blur();
- }
- };
+ subtitleSyncTextField.blur = function () {
+ // prevent textfield to blur while element has focus
+ if (!this.hasFocus && this.prototype) {
+ this.prototype.blur();
+ }
+ };
- subtitleSyncSlider.updateOffset = function(percent) {
- // default value is 0s = 50%
- this.value = percent === undefined ? 50 : percent;
- };
+ subtitleSyncSlider.updateOffset = function (percent) {
+ // default value is 0s = 50%
+ this.value = percent === undefined ? 50 : percent;
+ };
- subtitleSyncSlider.addEventListener('change', function () {
- // set new offset
- playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
- // synchronize with textField value
- subtitleSyncTextField.updateOffset(
- getOffsetFromPercentage(this.value));
- });
+ subtitleSyncSlider.addEventListener('change', function () {
+ // set new offset
+ playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
+ // synchronize with textField value
+ subtitleSyncTextField.updateOffset(
+ getOffsetFromPercentage(this.value));
+ });
- subtitleSyncSlider.getBubbleHtml = function (value) {
- var newOffset = getOffsetFromPercentage(value);
- return '';
+
+ html += getDisplayTime(startDate);
+ html += '
';
+
+ // Add 30 mins
+ startDate.setTime(startDate.getTime() + cellDurationMs);
+ }
+
+ return html;
+ }
+
+ function parseDates(program) {
+ if (!program.StartDateLocal) {
+ try {
+ program.StartDateLocal = datetime.parseISO8601Date(program.StartDate, { toLocal: true });
+ } catch (err) {
+ console.error('error parsing timestamp for start date');
+ }
+ }
+
+ if (!program.EndDateLocal) {
+ try {
+ program.EndDateLocal = datetime.parseISO8601Date(program.EndDate, { toLocal: true });
+ } catch (err) {
+ console.error('error parsing timestamp for end date');
+ }
+ }
+
+ return null;
+ }
+
+ function getTimerIndicator(item) {
+ let status;
+
+ if (item.Type === 'SeriesTimer') {
+ return '';
+ } else if (item.TimerId || item.SeriesTimerId) {
+ status = item.Status || 'Cancelled';
+ } else if (item.Type === 'Timer') {
+ status = item.Status;
+ } else {
+ return '';
+ }
+
+ if (item.SeriesTimerId) {
+ if (status !== 'Cancelled') {
+ return '';
+ }
+
+ return '';
+ }
+
+ return '';
+ }
+
+ function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
+ let html = '';
+
+ const startMs = date.getTime();
+ const endMs = startMs + msPerDay - 1;
+
+ const outerCssClass = layoutManager.tv ? 'channelPrograms channelPrograms-tv' : 'channelPrograms';
+
+ html += '';
+
+ const clickAction = layoutManager.tv ? 'link' : 'programdialog';
+
+ const categories = self.categoryOptions.categories || [];
+ const displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
+ const displaySportsContent = !categories.length || categories.indexOf('sports') !== -1;
+ const displayNewsContent = !categories.length || categories.indexOf('news') !== -1;
+ const displayKidsContent = !categories.length || categories.indexOf('kids') !== -1;
+ const displaySeriesContent = !categories.length || categories.indexOf('series') !== -1;
+ const enableColorCodedBackgrounds = userSettings.get('guide-colorcodedbackgrounds') === 'true';
+
+ let programsFound;
+ const now = new Date().getTime();
+
+ for (let i = listInfo.startIndex, length = programs.length; i < length; i++) {
+ const program = programs[i];
+
+ if (program.ChannelId !== channel.Id) {
+ if (programsFound) {
+ break;
+ }
+
+ continue;
+ }
+
+ programsFound = true;
+ listInfo.startIndex++;
+
+ parseDates(program);
+
+ const startDateLocalMs = program.StartDateLocal.getTime();
+ const endDateLocalMs = program.EndDateLocal.getTime();
+
+ if (endDateLocalMs < startMs) {
+ continue;
+ }
+
+ if (startDateLocalMs > endMs) {
+ break;
+ }
+
+ items[program.Id] = program;
+
+ const renderStartMs = Math.max(startDateLocalMs, startMs);
+ let startPercent = (startDateLocalMs - startMs) / msPerDay;
+ startPercent *= 100;
+ startPercent = Math.max(startPercent, 0);
+
+ const renderEndMs = Math.min(endDateLocalMs, endMs);
+ let endPercent = (renderEndMs - renderStartMs) / msPerDay;
+ endPercent *= 100;
+
+ let cssClass = 'programCell itemAction';
+ let accentCssClass = null;
+ let displayInnerContent = true;
+
+ if (program.IsKids) {
+ displayInnerContent = displayKidsContent;
+ accentCssClass = 'kids';
+ } else if (program.IsSports) {
+ displayInnerContent = displaySportsContent;
+ accentCssClass = 'sports';
+ } else if (program.IsNews) {
+ displayInnerContent = displayNewsContent;
+ accentCssClass = 'news';
+ } else if (program.IsMovie) {
+ displayInnerContent = displayMovieContent;
+ accentCssClass = 'movie';
+ } else if (program.IsSeries) {
+ displayInnerContent = displaySeriesContent;
+ } else {
+ displayInnerContent = displayMovieContent && displayNewsContent && displaySportsContent && displayKidsContent && displaySeriesContent;
+ }
+
+ if (displayInnerContent && enableColorCodedBackgrounds && accentCssClass) {
+ cssClass += ' programCell-' + accentCssClass;
+ }
+
+ if (now >= startDateLocalMs && now < endDateLocalMs) {
+ cssClass += ' programCell-active';
+ }
+
+ let timerAttributes = '';
+ if (program.TimerId) {
+ timerAttributes += ' data-timerid="' + program.TimerId + '"';
+ }
+ if (program.SeriesTimerId) {
+ timerAttributes += ' data-seriestimerid="' + program.SeriesTimerId + '"';
+ }
+
+ const isAttribute = endPercent >= 2 ? ' is="emby-programcell"' : '';
+
+ html += '';
+
+ if (displayInnerContent) {
+ const guideProgramNameClass = 'guideProgramName';
+
+ html += '
';
+
+ return html;
+ }
+
+ function renderChannelHeaders(context, channels, apiClient) {
+ let html = '';
+
+ for (const channel of channels) {
+ const hasChannelImage = channel.ImageTags.Primary;
+
+ let cssClass = 'guide-channelHeaderCell itemAction';
+
+ if (layoutManager.tv) {
+ cssClass += ' guide-channelHeaderCell-tv';
+ }
+
+ const title = [];
+ if (channel.ChannelNumber) {
+ title.push(channel.ChannelNumber);
+ }
+ if (channel.Name) {
+ title.push(channel.Name);
+ }
+
+ html += '';
+ }
+
+ const channelList = context.querySelector('.channelsContainer');
+ channelList.innerHTML = html;
+ imageLoader.lazyChildren(channelList);
+ }
+
+ function renderPrograms(context, date, channels, programs, options) {
+ const listInfo = {
+ startIndex: 0
+ };
+
+ const html = [];
+
+ for (const channel of channels) {
+ html.push(getChannelProgramsHtml(context, date, channel, programs, options, listInfo));
+ }
+
+ programGrid.innerHTML = html.join('');
+
+ programCells = programGrid.querySelectorAll('[is=emby-programcell]');
+
+ updateProgramCellsOnScroll(programGrid, programCells);
+ }
+
+ function getProgramSortOrder(program, channels) {
+ const channelId = program.ChannelId;
+ let channelIndex = -1;
+
+ for (let i = 0, length = channels.length; i < length; i++) {
+ if (channelId === channels[i].Id) {
+ channelIndex = i;
+ break;
+ }
+ }
+
+ const start = datetime.parseISO8601Date(program.StartDate, { toLocal: true });
+
+ return (channelIndex * 10000000) + (start.getTime() / 60000);
+ }
+
+ function renderGuide(context, date, channels, programs, renderOptions, apiClient, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
+ programs.sort(function (a, b) {
+ return getProgramSortOrder(a, channels) - getProgramSortOrder(b, channels);
+ });
+
+ const activeElement = document.activeElement;
+ const itemId = activeElement && activeElement.getAttribute ? activeElement.getAttribute('data-id') : null;
+ let channelRowId = null;
+
+ if (activeElement) {
+ channelRowId = dom.parentWithClass(activeElement, 'channelPrograms');
+ channelRowId = channelRowId && channelRowId.getAttribute ? channelRowId.getAttribute('data-channelid') : null;
+ }
+
+ renderChannelHeaders(context, channels, apiClient);
+
+ const startDate = date;
+ const endDate = new Date(startDate.getTime() + msPerDay);
+ context.querySelector('.timeslotHeaders').innerHTML = getTimeslotHeadersHtml(startDate, endDate);
+ items = {};
+ renderPrograms(context, date, channels, programs, renderOptions);
+
+ if (focusProgramOnRender) {
+ focusProgram(context, itemId, channelRowId, focusToTimeMs, startTimeOfDayMs);
+ }
+
+ scrollProgramGridToTimeMs(context, scrollToTimeMs, startTimeOfDayMs);
+ }
+
+ function scrollProgramGridToTimeMs(context, scrollToTimeMs, startTimeOfDayMs) {
+ scrollToTimeMs -= startTimeOfDayMs;
+
+ const pct = scrollToTimeMs / msPerDay;
+
+ programGrid.scrollTop = 0;
+
+ const scrollPos = pct * programGrid.scrollWidth;
+
+ nativeScrollTo(programGrid, scrollPos, true);
+ }
+
+ function focusProgram(context, itemId, channelRowId, focusToTimeMs, startTimeOfDayMs) {
+ let focusElem;
+ if (itemId) {
+ focusElem = context.querySelector('[data-id="' + itemId + '"]');
+ }
+
+ if (focusElem) {
+ focusManager.focus(focusElem);
+ } else {
+ let autoFocusParent;
+
+ if (channelRowId) {
+ autoFocusParent = context.querySelector('[data-channelid="' + channelRowId + '"]');
+ }
+
+ if (!autoFocusParent) {
+ autoFocusParent = programGrid;
+ }
+
+ focusToTimeMs -= startTimeOfDayMs;
+
+ const pct = (focusToTimeMs / msPerDay) * 100;
+
+ let programCell = autoFocusParent.querySelector('.programCell');
+
+ while (programCell) {
+ let left = (programCell.style.left || '').replace('%', '');
+ left = left ? parseFloat(left) : 0;
+ let width = (programCell.style.width || '').replace('%', '');
+ width = width ? parseFloat(width) : 0;
+
+ if (left >= pct || (left + width) >= pct) {
+ break;
+ }
+ programCell = programCell.nextSibling;
+ }
+
+ if (programCell) {
+ focusManager.focus(programCell);
+ } else {
+ focusManager.autoFocus(autoFocusParent, true);
+ }
+ }
+ }
+
+ function nativeScrollTo(container, pos, horizontal) {
+ if (container.scrollTo) {
+ if (horizontal) {
+ container.scrollTo(pos, 0);
+ } else {
+ container.scrollTo(0, pos);
+ }
+ } else {
+ if (horizontal) {
+ container.scrollLeft = Math.round(pos);
+ } else {
+ container.scrollTop = Math.round(pos);
+ }
+ }
+ }
+
+ let lastGridScroll = 0;
+ let lastHeaderScroll = 0;
+ let scrollXPct = 0;
+ function onProgramGridScroll(context, elem, timeslotHeaders) {
+ if ((new Date().getTime() - lastHeaderScroll) >= 1000) {
+ lastGridScroll = new Date().getTime();
+
+ const scrollLeft = elem.scrollLeft;
+ scrollXPct = (scrollLeft * 100) / elem.scrollWidth;
+ nativeScrollTo(timeslotHeaders, scrollLeft, true);
+ }
+
+ updateProgramCellsOnScroll(elem, programCells);
+ }
+
+ function onTimeslotHeadersScroll(context, elem) {
+ if ((new Date().getTime() - lastGridScroll) >= 1000) {
+ lastHeaderScroll = new Date().getTime();
+ nativeScrollTo(programGrid, elem.scrollLeft, true);
+ }
+ }
+
+ function changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
+ const newStartDate = normalizeDateToTimeslot(date);
+ currentDate = newStartDate;
+
+ reloadGuide(page, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender);
+ }
+
+ function getDateTabText(date, isActive, tabIndex) {
+ const cssClass = isActive ? 'emby-tab-button guide-date-tab-button emby-tab-button-active' : 'emby-tab-button guide-date-tab-button';
+
+ let html = '';
+
+ return html;
+ }
+
+ function setDateRange(page, guideInfo) {
+ const today = new Date();
+ const nowHours = today.getHours();
+ today.setHours(nowHours, 0, 0, 0);
+
+ let start = datetime.parseISO8601Date(guideInfo.StartDate, { toLocal: true });
+ const end = datetime.parseISO8601Date(guideInfo.EndDate, { toLocal: true });
+
+ start.setHours(nowHours, 0, 0, 0);
+ end.setHours(0, 0, 0, 0);
+
+ if (start.getTime() >= end.getTime()) {
+ end.setDate(start.getDate() + 1);
+ }
+
+ start = new Date(Math.max(today, start));
+
+ let dateTabsHtml = '';
+ let tabIndex = 0;
+
+ // TODO: Use date-fns
+ const date = new Date();
+
+ if (currentDate) {
+ date.setTime(currentDate.getTime());
+ }
+
+ date.setHours(nowHours, 0, 0, 0);
+
+ let startTimeOfDayMs = (start.getHours() * 60 * 60 * 1000);
+ startTimeOfDayMs += start.getMinutes() * 60 * 1000;
+
+ while (start <= end) {
+ const isActive = date.getDate() === start.getDate() && date.getMonth() === start.getMonth() && date.getFullYear() === start.getFullYear();
+
+ dateTabsHtml += getDateTabText(start, isActive, tabIndex);
+
+ start.setDate(start.getDate() + 1);
+ start.setHours(0, 0, 0, 0);
+ tabIndex++;
+ }
+
+ page.querySelector('.emby-tabs-slider').innerHTML = dateTabsHtml;
+ page.querySelector('.guideDateTabs').refresh();
+
+ const newDate = new Date();
+ const newDateHours = newDate.getHours();
+ let scrollToTimeMs = newDateHours * 60 * 60 * 1000;
+
+ const minutes = newDate.getMinutes();
+ if (minutes >= 30) {
+ scrollToTimeMs += 30 * 60 * 1000;
+ }
+
+ const focusToTimeMs = ((newDateHours * 60) + minutes) * 60 * 1000;
+ changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, layoutManager.tv);
+ }
+
+ function reloadPage(page) {
+ showLoading();
+
+ const apiClient = connectionManager.getApiClient(options.serverId);
+
+ apiClient.getLiveTvGuideInfo().then(function (guideInfo) {
+ setDateRange(page, guideInfo);
+ });
+ }
+
+ function getChannelProgramsFocusableElements(container) {
+ const elements = container.querySelectorAll('.programCell');
+
+ const list = [];
+ // add 1 to avoid programs that are out of view to the left
+ const currentScrollXPct = scrollXPct + 1;
+
+ for (const elem of elements) {
+ let left = (elem.style.left || '').replace('%', '');
+ left = left ? parseFloat(left) : 0;
+
+ let width = (elem.style.width || '').replace('%', '');
+ width = width ? parseFloat(width) : 0;
+
+ if ((left + width) >= currentScrollXPct) {
+ list.push(elem);
+ }
+ }
+
+ return list;
+ }
+
+ function onInputCommand(e) {
+ const target = e.target;
+ const programCell = dom.parentWithClass(target, 'programCell');
+ let container;
+ let channelPrograms;
+ let focusableElements;
+ let newRow;
+
+ switch (e.detail.command) {
+ case 'up':
+ if (programCell) {
+ container = programGrid;
+ channelPrograms = dom.parentWithClass(programCell, 'channelPrograms');
+
+ newRow = channelPrograms.previousSibling;
+ if (newRow) {
+ focusableElements = getChannelProgramsFocusableElements(newRow);
+ if (focusableElements.length) {
+ container = newRow;
+ } else {
+ focusableElements = null;
+ }
+ } else {
+ container = null;
+ }
+ } else {
+ container = null;
+ }
+ lastFocusDirection = e.detail.command;
+
+ focusManager.moveUp(target, {
+ container: container,
+ focusableElements: focusableElements
+ });
+ break;
+ case 'down':
+ if (programCell) {
+ container = programGrid;
+ channelPrograms = dom.parentWithClass(programCell, 'channelPrograms');
+
+ newRow = channelPrograms.nextSibling;
+ if (newRow) {
+ focusableElements = getChannelProgramsFocusableElements(newRow);
+ if (focusableElements.length) {
+ container = newRow;
+ } else {
+ focusableElements = null;
+ }
+ } else {
+ container = null;
+ }
+ } else {
+ container = null;
+ }
+ lastFocusDirection = e.detail.command;
+
+ focusManager.moveDown(target, {
+ container: container,
+ focusableElements: focusableElements
+ });
+ break;
+ case 'left':
+ container = programCell ? dom.parentWithClass(programCell, 'channelPrograms') : null;
+ // allow left outside the channelProgramsContainer when the first child is currently focused
+ if (container && !programCell.previousSibling) {
+ container = null;
+ }
+ lastFocusDirection = e.detail.command;
+
+ focusManager.moveLeft(target, {
+ container: container
+ });
+ break;
+ case 'right':
+ container = programCell ? dom.parentWithClass(programCell, 'channelPrograms') : null;
+ lastFocusDirection = e.detail.command;
+
+ focusManager.moveRight(target, {
+ container: container
+ });
+ break;
+ default:
+ return;
+ }
+
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+ function onScrollerFocus(e) {
+ const target = e.target;
+ const programCell = dom.parentWithClass(target, 'programCell');
+
+ if (programCell) {
+ const focused = target;
+
+ const id = focused.getAttribute('data-id');
+ const item = items[id];
+
+ if (item) {
+ events.trigger(self, 'focus', [
+ {
+ item: item
+ }]);
+ }
+ }
+
+ if (lastFocusDirection === 'left') {
+ if (programCell) {
+ scrollHelper.toStart(programGrid, programCell, true, true);
+ }
+ } else if (lastFocusDirection === 'right') {
+ if (programCell) {
+ scrollHelper.toCenter(programGrid, programCell, true, true);
+ }
+ } else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') {
+ const verticalScroller = dom.parentWithClass(target, 'guideVerticalScroller');
+ if (verticalScroller) {
+ const focusedElement = programCell || dom.parentWithTag(target, 'BUTTON');
+ verticalScroller.toCenter(focusedElement, true);
+ }
+ }
+ }
+
+ function setScrollEvents(view, enabled) {
+ if (layoutManager.tv) {
+ const guideVerticalScroller = view.querySelector('.guideVerticalScroller');
+
+ if (enabled) {
+ inputManager.on(guideVerticalScroller, onInputCommand);
+ } else {
+ inputManager.off(guideVerticalScroller, onInputCommand);
+ }
+ }
+ }
+
+ function onTimerCreated(e, apiClient, data) {
+ const programId = data.ProgramId;
+ // This could be null, not supported by all tv providers
+ const newTimerId = data.Id;
+
+ // find guide cells by program id, ensure timer icon
+ const cells = options.element.querySelectorAll('.programCell[data-id="' + programId + '"]');
+ for (const cell of cells) {
+ const icon = cell.querySelector('.timerIcon');
+ if (!icon) {
+ cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '');
+ }
+
+ if (newTimerId) {
+ cell.setAttribute('data-timerid', newTimerId);
+ }
+ }
+ }
+
+ function onSeriesTimerCreated(e, apiClient, data) {
+ }
+
+ function onTimerCancelled(e, apiClient, data) {
+ const id = data.Id;
+ // find guide cells by timer id, remove timer icon
+ const cells = options.element.querySelectorAll('.programCell[data-timerid="' + id + '"]');
+
+ for (const cell of cells) {
+ const icon = cell.querySelector('.timerIcon');
+
+ if (icon) {
+ icon.parentNode.removeChild(icon);
+ }
+
+ cell.removeAttribute('data-timerid');
+ }
+ }
+
+ function onSeriesTimerCancelled(e, apiClient, data) {
+ const id = data.Id;
+ // find guide cells by timer id, remove timer icon
+ const cells = options.element.querySelectorAll('.programCell[data-seriestimerid="' + id + '"]');
+
+ for (const cell of cells) {
+ const icon = cell.querySelector('.seriesTimerIcon');
+
+ if (icon) {
+ icon.parentNode.removeChild(icon);
+ }
+
+ cell.removeAttribute('data-seriestimerid');
+ }
+ }
+
+ import('text!./tvguide.template.html').then(({default: template}) => {
+ const context = options.element;
+
+ context.classList.add('tvguide');
+
+ context.innerHTML = globalize.translateHtml(template, 'core');
+
+ programGrid = context.querySelector('.programGrid');
+ const timeslotHeaders = context.querySelector('.timeslotHeaders');
+
+ if (layoutManager.tv) {
+ dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, {
+ capture: true,
+ passive: true
+ });
+ } else if (layoutManager.desktop) {
+ timeslotHeaders.classList.add('timeslotHeaders-desktop');
+ }
+
+ if (browser.iOS || browser.osx) {
+ context.querySelector('.channelsContainer').classList.add('noRubberBanding');
+
+ programGrid.classList.add('noRubberBanding');
+ }
+
+ dom.addEventListener(programGrid, 'scroll', function (e) {
+ onProgramGridScroll(context, this, timeslotHeaders);
+ }, {
+ passive: true
+ });
+
+ dom.addEventListener(timeslotHeaders, 'scroll', function () {
+ onTimeslotHeadersScroll(context, this);
+ }, {
+ passive: true
+ });
+
+ programGrid.addEventListener('click', onProgramGridClick);
+
+ context.querySelector('.btnNextPage').addEventListener('click', function () {
+ currentStartIndex += currentChannelLimit;
+ reloadPage(context);
+ restartAutoRefresh();
+ });
+
+ context.querySelector('.btnPreviousPage').addEventListener('click', function () {
+ currentStartIndex = Math.max(currentStartIndex - currentChannelLimit, 0);
+ reloadPage(context);
+ restartAutoRefresh();
+ });
+
+ context.querySelector('.btnGuideViewSettings').addEventListener('click', function () {
+ showViewSettings(self);
+ restartAutoRefresh();
+ });
+
+ context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) {
+ const allTabButtons = e.target.querySelectorAll('.guide-date-tab-button');
+
+ const tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)];
+ if (tabButton) {
+ const previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)];
+
+ const date = new Date();
+ date.setTime(parseInt(tabButton.getAttribute('data-date')));
+
+ const scrollWidth = programGrid.scrollWidth;
+ let scrollToTimeMs;
+ if (scrollWidth) {
+ scrollToTimeMs = (programGrid.scrollLeft / scrollWidth) * msPerDay;
+ } else {
+ scrollToTimeMs = 0;
+ }
+
+ if (previousButton) {
+ const previousDate = new Date();
+ previousDate.setTime(parseInt(previousButton.getAttribute('data-date')));
+
+ scrollToTimeMs += (previousDate.getHours() * 60 * 60 * 1000);
+ scrollToTimeMs += (previousDate.getMinutes() * 60 * 1000);
+ }
+
+ let startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000);
+ startTimeOfDayMs += (date.getMinutes() * 60 * 1000);
+
+ changeDate(context, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false);
+ }
+ });
+
+ setScrollEvents(context, true);
+ itemShortcuts.on(context);
+
+ events.trigger(self, 'load');
+
+ events.on(serverNotifications, 'TimerCreated', onTimerCreated);
+ events.on(serverNotifications, 'SeriesTimerCreated', onSeriesTimerCreated);
+ events.on(serverNotifications, 'TimerCancelled', onTimerCancelled);
+ events.on(serverNotifications, 'SeriesTimerCancelled', onSeriesTimerCancelled);
+
+ self.refresh();
+ });
+}
+
+export default Guide;
diff --git a/src/components/imageDownloader/imageDownloader.js b/src/components/imageDownloader/imageDownloader.js
index 2be2ef09b2..3f78a5ecbb 100644
--- a/src/components/imageDownloader/imageDownloader.js
+++ b/src/components/imageDownloader/imageDownloader.js
@@ -8,7 +8,6 @@ import browser from 'browser';
import layoutManager from 'layoutManager';
import scrollHelper from 'scrollHelper';
import globalize from 'globalize';
-import require from 'require';
import 'emby-checkbox';
import 'paper-icon-button-light';
import 'emby-button';
@@ -317,7 +316,7 @@ import 'cardStyle';
function showEditor(itemId, serverId, itemType) {
loading.show();
- require(['text!./imageDownloader.template.html'], function (template) {
+ import('text!./imageDownloader.template.html').then(({default: template}) => {
const apiClient = connectionManager.getApiClient(serverId);
currentItemId = itemId;
diff --git a/src/components/itemsrefresher.js b/src/components/itemsrefresher.js
index 5ce9a3b6e4..3883e6e490 100644
--- a/src/components/itemsrefresher.js
+++ b/src/components/itemsrefresher.js
@@ -1,131 +1,130 @@
-define(['playbackManager', 'serverNotifications', 'events'], function (playbackManager, serverNotifications, events) {
- 'use strict';
+import playbackManager from 'playbackManager';
+import serverNotifications from 'serverNotifications';
+import events from 'events';
- serverNotifications = serverNotifications.default || serverNotifications;
- playbackManager = playbackManager.default || playbackManager;
+function onUserDataChanged(e, apiClient, userData) {
+ const instance = this;
- function onUserDataChanged(e, apiClient, userData) {
- var instance = this;
-
- var eventsToMonitor = getEventsToMonitor(instance);
-
- // TODO: Check user data change reason?
- if (eventsToMonitor.indexOf('markfavorite') !== -1) {
- instance.notifyRefreshNeeded();
- } else if (eventsToMonitor.indexOf('markplayed') !== -1) {
- instance.notifyRefreshNeeded();
- }
- }
-
- function getEventsToMonitor(instance) {
- var options = instance.options;
- var monitor = options ? options.monitorEvents : null;
- if (monitor) {
- return monitor.split(',');
- }
-
- return [];
- }
-
- function onTimerCreated(e, apiClient, data) {
- var instance = this;
-
- if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
- instance.notifyRefreshNeeded();
- return;
- }
- }
-
- function onSeriesTimerCreated(e, apiClient, data) {
- var instance = this;
- if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
- instance.notifyRefreshNeeded();
- return;
- }
- }
-
- function onTimerCancelled(e, apiClient, data) {
- var instance = this;
-
- if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
- instance.notifyRefreshNeeded();
- return;
- }
- }
-
- function onSeriesTimerCancelled(e, apiClient, data) {
- var instance = this;
- if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
- instance.notifyRefreshNeeded();
- return;
- }
- }
-
- function onLibraryChanged(e, apiClient, data) {
- var instance = this;
- var eventsToMonitor = getEventsToMonitor(instance);
- if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
- // yes this is an assumption
- return;
- }
-
- var itemsAdded = data.ItemsAdded || [];
- var itemsRemoved = data.ItemsRemoved || [];
- if (!itemsAdded.length && !itemsRemoved.length) {
- return;
- }
-
- var options = instance.options || {};
- var parentId = options.parentId;
- if (parentId) {
- var foldersAddedTo = data.FoldersAddedTo || [];
- var foldersRemovedFrom = data.FoldersRemovedFrom || [];
- var collectionFolders = data.CollectionFolders || [];
-
- if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
- return;
- }
- }
+ const eventsToMonitor = getEventsToMonitor(instance);
+ // TODO: Check user data change reason?
+ if (eventsToMonitor.indexOf('markfavorite') !== -1) {
+ instance.notifyRefreshNeeded();
+ } else if (eventsToMonitor.indexOf('markplayed') !== -1) {
instance.notifyRefreshNeeded();
}
+}
- function onPlaybackStopped(e, stopInfo) {
- var instance = this;
+function getEventsToMonitor(instance) {
+ const options = instance.options;
+ const monitor = options ? options.monitorEvents : null;
+ if (monitor) {
+ return monitor.split(',');
+ }
- var state = stopInfo.state;
+ return [];
+}
- var eventsToMonitor = getEventsToMonitor(instance);
- if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
- if (eventsToMonitor.indexOf('videoplayback') !== -1) {
- instance.notifyRefreshNeeded(true);
- return;
- }
- } else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
- if (eventsToMonitor.indexOf('audioplayback') !== -1) {
- instance.notifyRefreshNeeded(true);
- return;
- }
+function onTimerCreated(e, apiClient, data) {
+ const instance = this;
+
+ if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
+ instance.notifyRefreshNeeded();
+ return;
+ }
+}
+
+function onSeriesTimerCreated(e, apiClient, data) {
+ const instance = this;
+ if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
+ instance.notifyRefreshNeeded();
+ return;
+ }
+}
+
+function onTimerCancelled(e, apiClient, data) {
+ const instance = this;
+
+ if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
+ instance.notifyRefreshNeeded();
+ return;
+ }
+}
+
+function onSeriesTimerCancelled(e, apiClient, data) {
+ const instance = this;
+ if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
+ instance.notifyRefreshNeeded();
+ return;
+ }
+}
+
+function onLibraryChanged(e, apiClient, data) {
+ const instance = this;
+ const eventsToMonitor = getEventsToMonitor(instance);
+ if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
+ // yes this is an assumption
+ return;
+ }
+
+ const itemsAdded = data.ItemsAdded || [];
+ const itemsRemoved = data.ItemsRemoved || [];
+ if (!itemsAdded.length && !itemsRemoved.length) {
+ return;
+ }
+
+ const options = instance.options || {};
+ const parentId = options.parentId;
+ if (parentId) {
+ const foldersAddedTo = data.FoldersAddedTo || [];
+ const foldersRemovedFrom = data.FoldersRemovedFrom || [];
+ const collectionFolders = data.CollectionFolders || [];
+
+ if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
+ return;
}
}
- function addNotificationEvent(instance, name, handler, owner) {
- var localHandler = handler.bind(instance);
+ instance.notifyRefreshNeeded();
+}
+
+function onPlaybackStopped(e, stopInfo) {
+ const instance = this;
+
+ const state = stopInfo.state;
+
+ const eventsToMonitor = getEventsToMonitor(instance);
+ if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
+ if (eventsToMonitor.indexOf('videoplayback') !== -1) {
+ instance.notifyRefreshNeeded(true);
+ return;
+ }
+ } else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
+ if (eventsToMonitor.indexOf('audioplayback') !== -1) {
+ instance.notifyRefreshNeeded(true);
+ return;
+ }
+ }
+}
+
+function addNotificationEvent(instance, name, handler, owner) {
+ const localHandler = handler.bind(instance);
+ owner = owner || serverNotifications;
+ events.on(owner, name, localHandler);
+ instance['event_' + name] = localHandler;
+}
+
+function removeNotificationEvent(instance, name, owner) {
+ const handler = instance['event_' + name];
+ if (handler) {
owner = owner || serverNotifications;
- events.on(owner, name, localHandler);
- instance['event_' + name] = localHandler;
+ events.off(owner, name, handler);
+ instance['event_' + name] = null;
}
+}
- function removeNotificationEvent(instance, name, owner) {
- var handler = instance['event_' + name];
- if (handler) {
- owner = owner || serverNotifications;
- events.off(owner, name, handler);
- instance['event_' + name] = null;
- }
- }
-
- function ItemsRefresher(options) {
+class ItemsRefresher {
+ constructor(options) {
this.options = options || {};
addNotificationEvent(this, 'UserDataChanged', onUserDataChanged);
@@ -137,18 +136,18 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
addNotificationEvent(this, 'playbackstop', onPlaybackStopped, playbackManager);
}
- ItemsRefresher.prototype.pause = function () {
+ pause() {
clearRefreshInterval(this, true);
this.paused = true;
- };
+ }
- ItemsRefresher.prototype.resume = function (options) {
+ resume(options) {
this.paused = false;
- var refreshIntervalEndTime = this.refreshIntervalEndTime;
+ const refreshIntervalEndTime = this.refreshIntervalEndTime;
if (refreshIntervalEndTime) {
- var remainingMs = refreshIntervalEndTime - new Date().getTime();
+ const remainingMs = refreshIntervalEndTime - new Date().getTime();
if (remainingMs > 0 && !this.needsRefresh) {
resetRefreshInterval(this, remainingMs);
} else {
@@ -162,9 +161,9 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
}
return Promise.resolve();
- };
+ }
- ItemsRefresher.prototype.refreshItems = function () {
+ refreshItems() {
if (!this.fetchData) {
return Promise.resolve();
}
@@ -177,15 +176,15 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
this.needsRefresh = false;
return this.fetchData().then(onDataFetched.bind(this));
- };
+ }
- ItemsRefresher.prototype.notifyRefreshNeeded = function (isInForeground) {
+ notifyRefreshNeeded(isInForeground) {
if (this.paused) {
this.needsRefresh = true;
return;
}
- var timeout = this.refreshTimeout;
+ const timeout = this.refreshTimeout;
if (timeout) {
clearTimeout(timeout);
}
@@ -195,44 +194,9 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} else {
this.refreshTimeout = setTimeout(this.refreshItems.bind(this), 10000);
}
- };
-
- function clearRefreshInterval(instance, isPausing) {
- if (instance.refreshInterval) {
- clearInterval(instance.refreshInterval);
- instance.refreshInterval = null;
-
- if (!isPausing) {
- instance.refreshIntervalEndTime = null;
- }
- }
}
- function resetRefreshInterval(instance, intervalMs) {
- clearRefreshInterval(instance);
-
- if (!intervalMs) {
- var options = instance.options;
- if (options) {
- intervalMs = options.refreshIntervalMs;
- }
- }
-
- if (intervalMs) {
- instance.refreshInterval = setInterval(instance.notifyRefreshNeeded.bind(instance), intervalMs);
- instance.refreshIntervalEndTime = new Date().getTime() + intervalMs;
- }
- }
-
- function onDataFetched(result) {
- resetRefreshInterval(this);
-
- if (this.afterRefresh) {
- this.afterRefresh(result);
- }
- }
-
- ItemsRefresher.prototype.destroy = function () {
+ destroy() {
clearRefreshInterval(this);
removeNotificationEvent(this, 'UserDataChanged');
@@ -245,7 +209,42 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
this.fetchData = null;
this.options = null;
- };
+ }
+}
- return ItemsRefresher;
-});
+function clearRefreshInterval(instance, isPausing) {
+ if (instance.refreshInterval) {
+ clearInterval(instance.refreshInterval);
+ instance.refreshInterval = null;
+
+ if (!isPausing) {
+ instance.refreshIntervalEndTime = null;
+ }
+ }
+}
+
+function resetRefreshInterval(instance, intervalMs) {
+ clearRefreshInterval(instance);
+
+ if (!intervalMs) {
+ const options = instance.options;
+ if (options) {
+ intervalMs = options.refreshIntervalMs;
+ }
+ }
+
+ if (intervalMs) {
+ instance.refreshInterval = setInterval(instance.notifyRefreshNeeded.bind(instance), intervalMs);
+ instance.refreshIntervalEndTime = new Date().getTime() + intervalMs;
+ }
+}
+
+function onDataFetched(result) {
+ resetRefreshInterval(this);
+
+ if (this.afterRefresh) {
+ this.afterRefresh(result);
+ }
+}
+
+export default ItemsRefresher;
diff --git a/src/components/layoutManager.js b/src/components/layoutManager.js
index 85d78f8ff4..88a7265f8b 100644
--- a/src/components/layoutManager.js
+++ b/src/components/layoutManager.js
@@ -1,23 +1,19 @@
-define(['browser', 'appSettings', 'events'], function (browser, appSettings, events) {
- 'use strict';
+import browser from 'browser';
+import appSettings from 'appSettings';
+import events from 'events';
- browser = browser.default || browser;
-
- function setLayout(instance, layout, selectedLayout) {
- if (layout === selectedLayout) {
- instance[layout] = true;
- document.documentElement.classList.add('layout-' + layout);
- } else {
- instance[layout] = false;
- document.documentElement.classList.remove('layout-' + layout);
- }
+function setLayout(instance, layout, selectedLayout) {
+ if (layout === selectedLayout) {
+ instance[layout] = true;
+ document.documentElement.classList.add('layout-' + layout);
+ } else {
+ instance[layout] = false;
+ document.documentElement.classList.remove('layout-' + layout);
}
+}
- function LayoutManager() {
-
- }
-
- LayoutManager.prototype.setLayout = function (layout, save) {
+class LayoutManager {
+ setLayout(layout, save) {
if (!layout || layout === 'auto') {
this.autoLayout();
@@ -35,13 +31,13 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
}
events.trigger(this, 'modechange');
- };
+ }
- LayoutManager.prototype.getSavedLayout = function (layout) {
+ getSavedLayout(layout) {
return appSettings.get('layout');
- };
+ }
- LayoutManager.prototype.autoLayout = function () {
+ autoLayout() {
// Take a guess at initial layout. The consuming app can override
if (browser.mobile) {
this.setLayout('mobile', false);
@@ -50,16 +46,16 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
} else {
this.setLayout(this.defaultLayout || 'tv', false);
}
- };
+ }
- LayoutManager.prototype.init = function () {
- var saved = this.getSavedLayout();
+ init() {
+ const saved = this.getSavedLayout();
if (saved) {
this.setLayout(saved, false);
} else {
this.autoLayout();
}
- };
+ }
+}
- return new LayoutManager();
-});
+export default new LayoutManager();
diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js
index be44e86b44..162da8984a 100644
--- a/src/components/metadataEditor/metadataEditor.js
+++ b/src/components/metadataEditor/metadataEditor.js
@@ -6,7 +6,6 @@ import loading from 'loading';
import focusManager from 'focusManager';
import connectionManager from 'connectionManager';
import globalize from 'globalize';
-import require from 'require';
import shell from 'shell';
import 'emby-checkbox';
import 'emby-input';
@@ -37,7 +36,7 @@ import 'flexStyles';
function submitUpdatedItem(form, item) {
function afterContentTypeUpdated() {
- require(['toast'], function (toast) {
+ import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageItemSaved'));
});
@@ -227,7 +226,7 @@ import 'flexStyles';
}
function editPerson(context, person, index) {
- require(['personEditor'], function (personEditor) {
+ import('personEditor').then(({default: personEditor}) => {
personEditor.show(person).then(function (updatedPerson) {
const isNew = index === -1;
@@ -246,14 +245,14 @@ import 'flexStyles';
if (parentId) {
reload(context, parentId, item.ServerId);
} else {
- require(['appRouter'], function (appRouter) {
+ import('appRouter').then(({default: appRouter}) => {
appRouter.goHome();
});
}
}
function showMoreMenu(context, button, user) {
- require(['itemContextMenu'], function (itemContextMenu) {
+ import('itemContextMenu').then(({default: itemContextMenu}) => {
var item = currentItem;
itemContextMenu.show({
diff --git a/src/components/recordingcreator/recordingbutton.js b/src/components/recordingcreator/recordingbutton.js
index 1207208e90..9f102e2f9c 100644
--- a/src/components/recordingcreator/recordingbutton.js
+++ b/src/components/recordingcreator/recordingbutton.js
@@ -1,37 +1,40 @@
-define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields'], function (globalize, connectionManager, require, loading, appHost, dom, recordingHelper, events) {
- 'use strict';
+import connectionManager from 'connectionManager';
+import dom from 'dom';
+import recordingHelper from 'recordingHelper';
+import 'paper-icon-button-light';
+import 'emby-button';
+import 'css!./recordingfields';
- recordingHelper = recordingHelper.default || recordingHelper;
+function onRecordingButtonClick(e) {
+ const item = this.item;
- function onRecordingButtonClick(e) {
- var item = this.item;
+ if (item) {
+ const serverId = item.ServerId;
+ const programId = item.Id;
+ const timerId = item.TimerId;
+ const timerStatus = item.Status;
+ const seriesTimerId = item.SeriesTimerId;
- if (item) {
- var serverId = item.ServerId;
- var programId = item.Id;
- var timerId = item.TimerId;
- var timerStatus = item.Status;
- var seriesTimerId = item.SeriesTimerId;
+ const instance = this;
- var instance = this;
-
- recordingHelper.toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId).then(function () {
- instance.refresh(serverId, programId);
- });
- }
+ recordingHelper.toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId).then(function () {
+ instance.refresh(serverId, programId);
+ });
}
+}
- function setButtonIcon(button, icon) {
- var inner = button.querySelector('.material-icons');
- inner.classList.remove('fiber_smart_record');
- inner.classList.remove('fiber_manual_record');
- inner.classList.add(icon);
- }
+function setButtonIcon(button, icon) {
+ const inner = button.querySelector('.material-icons');
+ inner.classList.remove('fiber_smart_record');
+ inner.classList.remove('fiber_manual_record');
+ inner.classList.add(icon);
+}
- function RecordingButton(options) {
+class RecordingButton {
+ constructor(options) {
this.options = options;
- var button = options.button;
+ const button = options.button;
setButtonIcon(button, 'fiber_manual_record');
@@ -41,7 +44,7 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
this.refresh(options.itemId, options.serverId);
}
- var clickFn = onRecordingButtonClick.bind(this);
+ const clickFn = onRecordingButtonClick.bind(this);
this.clickFn = clickFn;
dom.addEventListener(button, 'click', clickFn, {
@@ -49,39 +52,17 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
});
}
- function getIndicatorIcon(item) {
- var status;
-
- if (item.Type === 'SeriesTimer') {
- return 'fiber_smart_record';
- } else if (item.TimerId || item.SeriesTimerId) {
- status = item.Status || 'Cancelled';
- } else if (item.Type === 'Timer') {
- status = item.Status;
- } else {
- return 'fiber_manual_record';
- }
-
- if (item.SeriesTimerId) {
- if (status !== 'Cancelled') {
- return 'fiber_smart_record';
- }
- }
-
- return 'fiber_manual_record';
- }
-
- RecordingButton.prototype.refresh = function (serverId, itemId) {
- var apiClient = connectionManager.getApiClient(serverId);
- var self = this;
+ refresh(serverId, itemId) {
+ const apiClient = connectionManager.getApiClient(serverId);
+ const self = this;
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
self.refreshItem(item);
});
- };
+ }
- RecordingButton.prototype.refreshItem = function (item) {
- var options = this.options;
- var button = options.button;
+ refreshItem(item) {
+ const options = this.options;
+ const button = options.button;
this.item = item;
setButtonIcon(button, getIndicatorIcon(item));
@@ -90,15 +71,15 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
} else {
button.classList.remove('recordingIcon-active');
}
- };
+ }
- RecordingButton.prototype.destroy = function () {
- var options = this.options;
+ destroy() {
+ const options = this.options;
if (options) {
- var button = options.button;
+ const button = options.button;
- var clickFn = this.clickFn;
+ const clickFn = this.clickFn;
if (clickFn) {
dom.removeEventListener(button, 'click', clickFn, {
@@ -109,7 +90,29 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
this.options = null;
this.item = null;
- };
+ }
+}
- return RecordingButton;
-});
+function getIndicatorIcon(item) {
+ let status;
+
+ if (item.Type === 'SeriesTimer') {
+ return 'fiber_smart_record';
+ } else if (item.TimerId || item.SeriesTimerId) {
+ status = item.Status || 'Cancelled';
+ } else if (item.Type === 'Timer') {
+ status = item.Status;
+ } else {
+ return 'fiber_manual_record';
+ }
+
+ if (item.SeriesTimerId) {
+ if (status !== 'Cancelled') {
+ return 'fiber_smart_record';
+ }
+ }
+
+ return 'fiber_manual_record';
+}
+
+export default RecordingButton;
diff --git a/src/components/recordingcreator/recordingcreator.js b/src/components/recordingcreator/recordingcreator.js
index 9c2d8fcb68..f4ae64977d 100644
--- a/src/components/recordingcreator/recordingcreator.js
+++ b/src/components/recordingcreator/recordingcreator.js
@@ -1,189 +1,204 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'datetime', 'imageLoader', 'recordingFields', 'events', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, datetime, imageLoader, recordingFields, events) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import mediaInfo from 'mediaInfo';
+import connectionManager from 'connectionManager';
+import require from 'require';
+import loading from 'loading';
+import scrollHelper from 'scrollHelper';
+import datetime from 'datetime';
+import imageLoader from 'imageLoader';
+import recordingFields from 'recordingFields';
+import events from 'events';
+import 'emby-checkbox';
+import 'emby-button';
+import 'emby-collapse';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'css!./recordingcreator';
+import 'material-icons';
- scrollHelper = scrollHelper.default || scrollHelper;
+let currentDialog;
+let closeAction;
+let currentRecordingFields;
- var currentDialog;
- var closeAction;
- var currentRecordingFields;
+function closeDialog() {
+ dialogHelper.close(currentDialog);
+}
- function closeDialog() {
- dialogHelper.close(currentDialog);
+function init(context) {
+ context.querySelector('.btnPlay').addEventListener('click', function () {
+ closeAction = 'play';
+ closeDialog();
+ });
+
+ context.querySelector('.btnCancel').addEventListener('click', function () {
+ closeAction = null;
+ closeDialog();
+ });
+}
+
+function getImageUrl(item, apiClient, imageHeight) {
+ const imageTags = item.ImageTags || {};
+
+ if (item.PrimaryImageTag) {
+ imageTags.Primary = item.PrimaryImageTag;
}
- function init(context) {
- context.querySelector('.btnPlay').addEventListener('click', function () {
- closeAction = 'play';
- closeDialog();
+ if (imageTags.Primary) {
+ return apiClient.getScaledImageUrl(item.Id, {
+ type: 'Primary',
+ maxHeight: imageHeight,
+ tag: item.ImageTags.Primary
});
-
- context.querySelector('.btnCancel').addEventListener('click', function () {
- closeAction = null;
- closeDialog();
+ } else if (imageTags.Thumb) {
+ return apiClient.getScaledImageUrl(item.Id, {
+ type: 'Thumb',
+ maxHeight: imageHeight,
+ tag: item.ImageTags.Thumb
});
}
- function getImageUrl(item, apiClient, imageHeight) {
- var imageTags = item.ImageTags || {};
+ return null;
+}
- if (item.PrimaryImageTag) {
- imageTags.Primary = item.PrimaryImageTag;
+function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
+ if (!refreshRecordingStateOnly) {
+ const imgUrl = getImageUrl(program, apiClient, 200);
+ const imageContainer = context.querySelector('.recordingDialog-imageContainer');
+
+ if (imgUrl) {
+ imageContainer.innerHTML = '';
+
+ html += '';
+
+ html += '
';
+ }
+
+ html += '';
+ }
+
+ html += '' + program.Name;
+
+ let indicatorHtml = null;
+ if (program.IsLive && options.showLiveIndicator) {
+ indicatorHtml = '' + globalize.translate('Live') + '';
+ } else if (program.IsPremiere && options.showPremiereIndicator) {
+ indicatorHtml = '' + globalize.translate('Premiere') + '';
+ } else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
+ indicatorHtml = '' + globalize.translate('AttributeNew') + '';
+ } else if (program.IsSeries && program.IsRepeat && options.showRepeatIndicator) {
+ indicatorHtml = '' + globalize.translate('Repeat') + '';
+ }
+ html += indicatorHtml || '';
+
+ if ((program.EpisodeTitle && options.showEpisodeTitle)) {
+ html += '
';
+
+ if (program.IsHD && options.showHdIcon) {
+ if (layoutManager.tv) {
+ html += '';
+
+ if (program.EpisodeTitle && options.showEpisodeTitle) {
+ html += '' + program.EpisodeTitle + '';
+ }
+ html += '
';
+ }
+
+ html += 'HD
';
+ } else {
+ html += 'HD
';
+ }
+ }
+
+ html += getTimerIndicator(program);
+
+ html += '
';
+ imageContainer.classList.remove('hide');
+
+ imageLoader.lazyChildren(imageContainer);
+ } else {
+ imageContainer.innerHTML = '';
+ imageContainer.classList.add('hide');
}
- if (imageTags.Primary) {
- return apiClient.getScaledImageUrl(item.Id, {
- type: 'Primary',
- maxHeight: imageHeight,
- tag: item.ImageTags.Primary
- });
- } else if (imageTags.Thumb) {
- return apiClient.getScaledImageUrl(item.Id, {
- type: 'Thumb',
- maxHeight: imageHeight,
- tag: item.ImageTags.Thumb
- });
+ context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
+ context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
+ context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
+ context.querySelector('.itemOverview').innerHTML = program.Overview || '';
+
+ const formDialogFooter = context.querySelector('.formDialogFooter');
+ const now = new Date();
+ if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
+ formDialogFooter.classList.remove('hide');
+ } else {
+ formDialogFooter.classList.add('hide');
}
- return null;
+ context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
}
- function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
- if (!refreshRecordingStateOnly) {
- var imgUrl = getImageUrl(program, apiClient, 200);
- var imageContainer = context.querySelector('.recordingDialog-imageContainer');
+ context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program, {
+ });
- if (imgUrl) {
- imageContainer.innerHTML = '';
- imageContainer.classList.remove('hide');
+ loading.hide();
+}
- imageLoader.lazyChildren(imageContainer);
- } else {
- imageContainer.innerHTML = '';
- imageContainer.classList.add('hide');
- }
+function reload(context, programId, serverId, refreshRecordingStateOnly) {
+ loading.show();
- context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
- context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
- context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
- context.querySelector('.itemOverview').innerHTML = program.Overview || '';
+ const apiClient = connectionManager.getApiClient(serverId);
- var formDialogFooter = context.querySelector('.formDialogFooter');
- var now = new Date();
- if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
- formDialogFooter.classList.remove('hide');
- } else {
- formDialogFooter.classList.add('hide');
- }
+ const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
+ const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
- context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
- }
+ Promise.all([promise1, promise2]).then(function (responses) {
+ const defaults = responses[0];
+ const program = responses[1];
- context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program, {
- });
+ renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
+ });
+}
- loading.hide();
- }
+function executeCloseAction(action, programId, serverId) {
+ if (action === 'play') {
+ import('playbackManager').then(({default: playbackManager}) => {
+ const apiClient = connectionManager.getApiClient(serverId);
- function reload(context, programId, serverId, refreshRecordingStateOnly) {
- loading.show();
-
- var apiClient = connectionManager.getApiClient(serverId);
-
- var promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
- var promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
-
- Promise.all([promise1, promise2]).then(function (responses) {
- var defaults = responses[0];
- var program = responses[1];
-
- renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
- });
- }
-
- function executeCloseAction(action, programId, serverId) {
- if (action === 'play') {
- require(['playbackManager'], function (playbackManager) {
- var apiClient = connectionManager.getApiClient(serverId);
-
- apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
- playbackManager.default.play({
- ids: [item.ChannelId],
- serverId: serverId
- });
- });
- });
- return;
- }
- }
-
- function showEditor(itemId, serverId) {
- return new Promise(function (resolve, reject) {
- closeAction = null;
-
- loading.show();
-
- require(['text!./recordingcreator.template.html'], function (template) {
- var dialogOptions = {
- removeOnClose: true,
- scrollY: false
- };
-
- if (layoutManager.tv) {
- dialogOptions.size = 'fullscreen';
- } else {
- dialogOptions.size = 'small';
- }
-
- var dlg = dialogHelper.createDialog(dialogOptions);
-
- dlg.classList.add('formDialog');
- dlg.classList.add('recordingDialog');
-
- var html = '';
-
- html += globalize.translateHtml(template, 'core');
-
- dlg.innerHTML = html;
-
- currentDialog = dlg;
-
- function onRecordingChanged() {
- reload(dlg, itemId, serverId, true);
- }
-
- dlg.addEventListener('close', function () {
- events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
- executeCloseAction(closeAction, itemId, serverId);
-
- if (currentRecordingFields && currentRecordingFields.hasChanged()) {
- resolve();
- } else {
- reject();
- }
- });
-
- if (layoutManager.tv) {
- scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
- }
-
- init(dlg);
-
- reload(dlg, itemId, serverId);
-
- currentRecordingFields = new recordingFields({
- parent: dlg.querySelector('.recordingFields'),
- programId: itemId,
+ apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
+ playbackManager.play({
+ ids: [item.ChannelId],
serverId: serverId
});
-
- events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged);
-
- dialogHelper.open(dlg);
});
});
+ return;
}
+}
- return {
- show: showEditor
- };
-});
+function showEditor(itemId, serverId) {
+ return new Promise(function (resolve, reject) {
+ closeAction = null;
+
+ loading.show();
+
+ import('text!./recordingcreator.template.html').then(({default: template}) => {
+ const dialogOptions = {
+ removeOnClose: true,
+ scrollY: false
+ };
+
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
+ } else {
+ dialogOptions.size = 'small';
+ }
+
+ const dlg = dialogHelper.createDialog(dialogOptions);
+
+ dlg.classList.add('formDialog');
+ dlg.classList.add('recordingDialog');
+
+ let html = '';
+
+ html += globalize.translateHtml(template, 'core');
+
+ dlg.innerHTML = html;
+
+ currentDialog = dlg;
+
+ function onRecordingChanged() {
+ reload(dlg, itemId, serverId, true);
+ }
+
+ dlg.addEventListener('close', function () {
+ events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
+ executeCloseAction(closeAction, itemId, serverId);
+
+ if (currentRecordingFields && currentRecordingFields.hasChanged()) {
+ resolve();
+ } else {
+ reject();
+ }
+ });
+
+ if (layoutManager.tv) {
+ scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+ }
+
+ init(dlg);
+
+ reload(dlg, itemId, serverId);
+
+ currentRecordingFields = new recordingFields({
+ parent: dlg.querySelector('.recordingFields'),
+ programId: itemId,
+ serverId: serverId
+ });
+
+ events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged);
+
+ dialogHelper.open(dlg);
+ });
+ });
+}
+
+export default {
+ show: showEditor
+};
diff --git a/src/components/recordingcreator/recordingeditor.js b/src/components/recordingcreator/recordingeditor.js
index 7117778eb0..e9aca85347 100644
--- a/src/components/recordingcreator/recordingeditor.js
+++ b/src/components/recordingcreator/recordingeditor.js
@@ -3,6 +3,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
scrollHelper = scrollHelper.default || scrollHelper;
loading = loading.default || loading;
+ layoutManager = layoutManager.default || layoutManager;
var currentDialog;
var recordingDeleted = false;
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index b5ac4c9a8b..6048c918c7 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -1,939 +1,954 @@
-define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'globalize', 'layoutManager', 'userSettings', 'cardBuilder', 'itemContextMenu', 'cardStyle', 'emby-itemscontainer', 'css!./remotecontrol.css', 'emby-ratingbutton'], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings, cardBuilder, itemContextMenu) {
- 'use strict';
+import datetime from 'datetime';
+import backdrop from 'backdrop';
+import listView from 'listView';
+import imageLoader from 'imageLoader';
+import playbackManager from 'playbackManager';
+import nowPlayingHelper from 'nowPlayingHelper';
+import events from 'events';
+import connectionManager from 'connectionManager';
+import appHost from 'apphost';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import * as userSettings from 'userSettings';
+import cardBuilder from 'cardBuilder';
+import itemContextMenu from 'itemContextMenu';
+import 'cardStyle';
+import 'emby-itemscontainer';
+import 'css!./remotecontrol.css';
+import 'emby-ratingbutton';
- playbackManager = playbackManager.default || playbackManager;
+/*eslint prefer-const: "error"*/
- var showMuteButton = true;
- var showVolumeSlider = true;
+let showMuteButton = true;
+let showVolumeSlider = true;
- function showAudioMenu(context, player, button, item) {
- var currentIndex = playbackManager.getAudioStreamIndex(player);
- var streams = playbackManager.audioTracks(player);
- var menuItems = streams.map(function (s) {
- var menuItem = {
- name: s.DisplayTitle,
- id: s.Index
- };
+function showAudioMenu(context, player, button, item) {
+ const currentIndex = playbackManager.getAudioStreamIndex(player);
+ const streams = playbackManager.audioTracks(player);
+ const menuItems = streams.map(function (s) {
+ const menuItem = {
+ name: s.DisplayTitle,
+ id: s.Index
+ };
- if (s.Index == currentIndex) {
- menuItem.selected = true;
- }
-
- return menuItem;
- });
-
- require(['actionsheet'], function (actionsheet) {
- actionsheet.show({
- items: menuItems,
- positionTo: button,
- callback: function (id) {
- playbackManager.setAudioStreamIndex(parseInt(id), player);
- }
- });
- });
- }
-
- function showSubtitleMenu(context, player, button, item) {
- var currentIndex = playbackManager.getSubtitleStreamIndex(player);
- var streams = playbackManager.subtitleTracks(player);
- var menuItems = streams.map(function (s) {
- var menuItem = {
- name: s.DisplayTitle,
- id: s.Index
- };
-
- if (s.Index == currentIndex) {
- menuItem.selected = true;
- }
-
- return menuItem;
- });
- menuItems.unshift({
- id: -1,
- name: globalize.translate('ButtonOff'),
- selected: currentIndex == null
- });
-
- require(['actionsheet'], function (actionsheet) {
- actionsheet.show({
- items: menuItems,
- positionTo: button,
- callback: function (id) {
- playbackManager.setSubtitleStreamIndex(parseInt(id), player);
- }
- });
- });
- }
-
- function getNowPlayingNameHtml(nowPlayingItem, includeNonNameInfo) {
- return nowPlayingHelper.getNowPlayingNames(nowPlayingItem, includeNonNameInfo).map(function (i) {
- return i.text;
- }).join(''); - } - - function seriesImageUrl(item, options) { - if (item.Type !== 'Episode') { - return null; + if (s.Index == currentIndex) { + menuItem.selected = true; } - options = options || {}; - options.type = options.type || 'Primary'; - if (options.type === 'Primary' && item.SeriesPrimaryImageTag) { - options.tag = item.SeriesPrimaryImageTag; + return menuItem; + }); + + import('actionsheet').then(({ default: actionsheet }) => { + actionsheet.show({ + items: menuItems, + positionTo: button, + callback: function (id) { + playbackManager.setAudioStreamIndex(parseInt(id), player); + } + }); + }); +} + +function showSubtitleMenu(context, player, button, item) { + const currentIndex = playbackManager.getSubtitleStreamIndex(player); + const streams = playbackManager.subtitleTracks(player); + const menuItems = streams.map(function (s) { + const menuItem = { + name: s.DisplayTitle, + id: s.Index + }; + + if (s.Index == currentIndex) { + menuItem.selected = true; + } + + return menuItem; + }); + menuItems.unshift({ + id: -1, + name: globalize.translate('ButtonOff'), + selected: currentIndex == null + }); + + import('actionsheet').then(({ default: actionsheet }) => { + actionsheet.show({ + items: menuItems, + positionTo: button, + callback: function (id) { + playbackManager.setSubtitleStreamIndex(parseInt(id), player); + } + }); + }); +} + +function getNowPlayingNameHtml(nowPlayingItem, includeNonNameInfo) { + return nowPlayingHelper.getNowPlayingNames(nowPlayingItem, includeNonNameInfo).map(function (i) { + return i.text; + }).join('
'); +} + +function seriesImageUrl(item, options) { + if (item.Type !== 'Episode') { + return null; + } + + options = options || {}; + options.type = options.type || 'Primary'; + if (options.type === 'Primary' && item.SeriesPrimaryImageTag) { + options.tag = item.SeriesPrimaryImageTag; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); + } + + if (options.type === 'Thumb') { + if (item.SeriesThumbImageTag) { + options.tag = item.SeriesThumbImageTag; return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); } - if (options.type === 'Thumb') { - if (item.SeriesThumbImageTag) { - options.tag = item.SeriesThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - - if (item.ParentThumbImageTag) { - options.tag = item.ParentThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); - } + if (item.ParentThumbImageTag) { + options.tag = item.ParentThumbImageTag; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); } - - return null; } - function imageUrl(item, options) { - options = options || {}; - options.type = options.type || 'Primary'; + return null; +} - if (item.ImageTags && item.ImageTags[options.type]) { - options.tag = item.ImageTags[options.type]; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); - } +function imageUrl(item, options) { + options = options || {}; + options.type = options.type || 'Primary'; - if (item.AlbumId && item.AlbumPrimaryImageTag) { - options.tag = item.AlbumPrimaryImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); - } - - return null; + if (item.ImageTags && item.ImageTags[options.type]) { + options.tag = item.ImageTags[options.type]; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); } - function updateNowPlayingInfo(context, state, serverId) { - var item = state.NowPlayingItem; - var displayName = item ? getNowPlayingNameHtml(item).replace('
', ' - ') : ''; - if (typeof item !== 'undefined') { - var nowPlayingServerId = (item.ServerId || serverId); - if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') { - var songName = item.Name; - var artistsSeries = ''; - var albumName = ''; - if (item.Artists != null) { - if (item.ArtistItems != null) { - for (const artist of item.ArtistItems) { - let artistName = artist.Name; - let artistId = artist.Id; - artistsSeries += `${artistName}`; - if (artist !== item.ArtistItems.slice(-1)[0]) { - artistsSeries += ', '; - } + if (item.AlbumId && item.AlbumPrimaryImageTag) { + options.tag = item.AlbumPrimaryImageTag; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); + } + + return null; +} + +function updateNowPlayingInfo(context, state, serverId) { + const item = state.NowPlayingItem; + const displayName = item ? getNowPlayingNameHtml(item).replace('
', ' - ') : ''; + if (typeof item !== 'undefined') { + const nowPlayingServerId = (item.ServerId || serverId); + if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') { + const songName = item.Name; + let artistsSeries = ''; + let albumName = ''; + if (item.Artists != null) { + if (item.ArtistItems != null) { + for (const artist of item.ArtistItems) { + const artistName = artist.Name; + const artistId = artist.Id; + artistsSeries += `${artistName}`; + if (artist !== item.ArtistItems.slice(-1)[0]) { + artistsSeries += ', '; } - } else if (item.Artists) { - // For some reason, Chromecast Player doesn't return a item.ArtistItems object, so we need to fallback - // to normal item.Artists item. - // TODO: Normalise fields returned by all the players - for (const artist of item.Artists) { - artistsSeries += `${artist}`; - if (artist !== item.Artists.slice(-1)[0]) { - artistsSeries += ', '; - } + } + } else if (item.Artists) { + // For some reason, Chromecast Player doesn't return a item.ArtistItems object, so we need to fallback + // to normal item.Artists item. + // TODO: Normalise fields returned by all the players + for (const artist of item.Artists) { + artistsSeries += `${artist}`; + if (artist !== item.Artists.slice(-1)[0]) { + artistsSeries += ', '; } } } - if (item.Album != null) { - albumName = '` + item.Album + ''; - } - context.querySelector('.nowPlayingAlbum').innerHTML = albumName; - context.querySelector('.nowPlayingArtist').innerHTML = artistsSeries; - context.querySelector('.nowPlayingSongName').innerHTML = songName; - } else if (item.Type == 'Episode') { - if (item.SeasonName != null) { - var seasonName = item.SeasonName; - context.querySelector('.nowPlayingSeason').innerHTML = '${seasonName}`; - } - if (item.SeriesName != null) { - var seriesName = item.SeriesName; - if (item.SeriesId != null) { - context.querySelector('.nowPlayingSerie').innerHTML = '${seriesName}`; - } else { - context.querySelector('.nowPlayingSerie').innerHTML = seriesName; - } - } - context.querySelector('.nowPlayingEpisode').innerHTML = item.Name; - } else { - context.querySelector('.nowPlayingPageTitle').innerHTML = displayName; } - - if (displayName.length > 0 && item.Type != 'Audio' && item.Type != 'Episode') { - context.querySelector('.nowPlayingPageTitle').classList.remove('hide'); - } else { - context.querySelector('.nowPlayingPageTitle').classList.add('hide'); + if (item.Album != null) { + albumName = '` + item.Album + ''; } - - var url = item ? seriesImageUrl(item, { - maxHeight: 300 - }) || imageUrl(item, { - maxHeight: 300 - }) : null; - - let contextButton = context.querySelector('.btnToggleContextMenu'); - // We remove the previous event listener by replacing the item in each update event - const autoFocusContextButton = document.activeElement === contextButton; - let contextButtonClone = contextButton.cloneNode(true); - contextButton.parentNode.replaceChild(contextButtonClone, contextButton); - contextButton = context.querySelector('.btnToggleContextMenu'); - if (autoFocusContextButton) { - contextButton.focus(); + context.querySelector('.nowPlayingAlbum').innerHTML = albumName; + context.querySelector('.nowPlayingArtist').innerHTML = artistsSeries; + context.querySelector('.nowPlayingSongName').innerHTML = songName; + } else if (item.Type == 'Episode') { + if (item.SeasonName != null) { + const seasonName = item.SeasonName; + context.querySelector('.nowPlayingSeason').innerHTML = '${seasonName}`; } - const stopPlayback = !!layoutManager.mobile; - var options = { - play: false, - queue: false, - stopPlayback: stopPlayback, - clearQueue: true, - openAlbum: false, - positionTo: contextButton - }; - var apiClient = connectionManager.getApiClient(item.ServerId); - apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { - apiClient.getCurrentUser().then(function (user) { - contextButton.addEventListener('click', function () { - itemContextMenu.show(Object.assign({ - item: fullItem, - user: user - }, options)); - }); - }); - }); - setImageUrl(context, state, url); - if (item) { - backdrop.setBackdrops([item]); - apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { - var userData = fullItem.UserData || {}; - var likes = userData.Likes == null ? '' : userData.Likes; - context.querySelector('.nowPlayingPageUserDataButtonsTitle').innerHTML = ''; - context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; - }); - } else { - backdrop.clearBackdrop(); - context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; - } - } - } - - function setImageUrl(context, state, url) { - var item = state.NowPlayingItem; - var imgContainer = context.querySelector('.nowPlayingPageImageContainer'); - - if (url) { - imgContainer.innerHTML = '
';
- volumecontrolHtml += ``;
- volumecontrolHtml += '';
- volumecontrolHtml += '
';
- let optionsSection = context.querySelector('.playlistSectionButton');
- if (!layoutManager.mobile) {
- context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml);
- optionsSection.classList.remove('align-items-center', 'justify-content-center');
- optionsSection.classList.add('align-items-right', 'justify-content-flex-end');
+ context.querySelector('.buttonMute').addEventListener('click', function () {
+ playbackManager.toggleMute(currentPlayer);
+ });
+ const playlistContainer = context.querySelector('.playlist');
+ playlistContainer.addEventListener('action-remove', function (e) {
+ playbackManager.removeFromPlaylist([e.detail.playlistItemId], currentPlayer);
+ });
+ playlistContainer.addEventListener('itemdrop', function (e) {
+ const newIndex = e.detail.newIndex;
+ const playlistItemId = e.detail.playlistItemId;
+ playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer);
+ });
+ context.querySelector('.btnSavePlaylist').addEventListener('click', savePlaylist);
+ context.querySelector('.btnTogglePlaylist').addEventListener('click', function () {
+ if (context.querySelector('.playlist').classList.contains('hide')) {
context.querySelector('.playlist').classList.remove('hide');
context.querySelector('.btnSavePlaylist').classList.remove('hide');
- context.classList.add('padded-bottom');
+ context.querySelector('.volumecontrol').classList.add('hide');
+ if (layoutManager.mobile) {
+ context.querySelector('.playlistSectionButton').classList.remove('playlistSectionButtonTransparent');
+ }
} else {
- optionsSection.querySelector('.btnTogglePlaylist').insertAdjacentHTML('afterend', volumecontrolHtml);
- optionsSection.classList.add('playlistSectionButtonTransparent');
- context.querySelector('.btnTogglePlaylist').classList.remove('hide');
- context.querySelector('.playlistSectionButton').classList.remove('justify-content-center');
- context.querySelector('.playlistSectionButton').classList.add('justify-content-space-between');
+ context.querySelector('.playlist').classList.add('hide');
+ context.querySelector('.btnSavePlaylist').classList.add('hide');
+ if (showMuteButton || showVolumeSlider) {
+ context.querySelector('.volumecontrol').classList.remove('hide');
+ }
+ if (layoutManager.mobile) {
+ context.querySelector('.playlistSectionButton').classList.add('playlistSectionButtonTransparent');
+ }
}
+ });
+ }
- bindEvents(context);
- context.querySelector('.sendMessageForm').addEventListener('submit', onMessageSubmit);
- context.querySelector('.typeTextForm').addEventListener('submit', onSendStringSubmit);
- events.on(playbackManager, 'playerchange', onPlayerChange);
+ function onPlayerChange() {
+ bindToPlayer(dlg, playbackManager.getCurrentPlayer());
+ }
- if (layoutManager.tv) {
- var positionSlider = context.querySelector('.nowPlayingPositionSlider');
- positionSlider.classList.add('focusable');
- positionSlider.enableKeyboardDragging();
+ function onMessageSubmit(e) {
+ const form = e.target;
+ playbackManager.sendCommand({
+ Name: 'DisplayMessage',
+ Arguments: {
+ Header: form.querySelector('#txtMessageTitle').value,
+ Text: form.querySelector('#txtMessageText', form).value
}
+ }, currentPlayer);
+ form.querySelector('input').value = '';
+
+ import('toast').then(({ default: toast }) => {
+ toast('Message sent.');
+ });
+
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ }
+
+ function onSendStringSubmit(e) {
+ const form = e.target;
+ playbackManager.sendCommand({
+ Name: 'SendString',
+ Arguments: {
+ String: form.querySelector('#txtTypeText', form).value
+ }
+ }, currentPlayer);
+ form.querySelector('input').value = '';
+
+ import('toast').then(({ default: toast }) => {
+ toast('Text sent.');
+ });
+
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ }
+
+ function init(ownerView, context) {
+ let volumecontrolHtml = '';
+ volumecontrolHtml += ``;
+ volumecontrolHtml += '';
+ volumecontrolHtml += '
';
+ const optionsSection = context.querySelector('.playlistSectionButton');
+ if (!layoutManager.mobile) {
+ context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml);
+ optionsSection.classList.remove('align-items-center', 'justify-content-center');
+ optionsSection.classList.add('align-items-right', 'justify-content-flex-end');
+ context.querySelector('.playlist').classList.remove('hide');
+ context.querySelector('.btnSavePlaylist').classList.remove('hide');
+ context.classList.add('padded-bottom');
+ } else {
+ optionsSection.querySelector('.btnTogglePlaylist').insertAdjacentHTML('afterend', volumecontrolHtml);
+ optionsSection.classList.add('playlistSectionButtonTransparent');
+ context.querySelector('.btnTogglePlaylist').classList.remove('hide');
+ context.querySelector('.playlistSectionButton').classList.remove('justify-content-center');
+ context.querySelector('.playlistSectionButton').classList.add('justify-content-space-between');
}
- function onDialogClosed(e) {
- releaseCurrentPlayer();
- events.off(playbackManager, 'playerchange', onPlayerChange);
- lastPlayerState = null;
+ bindEvents(context);
+ context.querySelector('.sendMessageForm').addEventListener('submit', onMessageSubmit);
+ context.querySelector('.typeTextForm').addEventListener('submit', onSendStringSubmit);
+ events.on(playbackManager, 'playerchange', onPlayerChange);
+
+ if (layoutManager.tv) {
+ const positionSlider = context.querySelector('.nowPlayingPositionSlider');
+ positionSlider.classList.add('focusable');
+ positionSlider.enableKeyboardDragging();
}
+ }
- function onShow(context, tab) {
- bindToPlayer(context, playbackManager.getCurrentPlayer());
- }
+ function onDialogClosed(e) {
+ releaseCurrentPlayer();
+ events.off(playbackManager, 'playerchange', onPlayerChange);
+ lastPlayerState = null;
+ }
- var dlg;
- var currentPlayer;
- var lastPlayerState;
- var currentPlayerSupportedCommands = [];
- var lastUpdateTime = 0;
- var currentRuntimeTicks = 0;
- var self = this;
+ function onShow(context, tab) {
+ bindToPlayer(context, playbackManager.getCurrentPlayer());
+ }
- self.init = function (ownerView, context) {
- dlg = context;
- init(ownerView, dlg);
- };
+ let dlg;
+ let currentPlayer;
+ let lastPlayerState;
+ let currentPlayerSupportedCommands = [];
+ let lastUpdateTime = 0;
+ let currentRuntimeTicks = 0;
+ const self = this;
- self.onShow = function () {
- onShow(dlg, window.location.hash);
- };
-
- self.destroy = function () {
- onDialogClosed();
- };
+ self.init = function (ownerView, context) {
+ dlg = context;
+ init(ownerView, dlg);
};
-});
+
+ self.onShow = function () {
+ onShow(dlg, window.location.hash);
+ };
+
+ self.destroy = function () {
+ onDialogClosed();
+ };
+}
diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js
index 38728ec6c6..82f541a116 100644
--- a/src/components/slideshow/slideshow.js
+++ b/src/components/slideshow/slideshow.js
@@ -2,667 +2,672 @@
* Image viewer component
* @module components/slideshow/slideshow
*/
-define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'dom', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost, dom) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import inputManager from 'inputManager';
+import connectionManager from 'connectionManager';
+import layoutManager from 'layoutManager';
+import focusManager from 'focusManager';
+import browser from 'browser';
+import appHost from 'apphost';
+import dom from 'dom';
+import 'css!./style';
+import 'material-icons';
+import 'paper-icon-button-light';
- browser = browser.default || browser;
- focusManager = focusManager.default || focusManager;
+/**
+ * Name of transition event.
+ */
+const transitionEndEventName = dom.whichTransitionEvent();
- /**
- * Name of transition event.
- */
- const transitionEndEventName = dom.whichTransitionEvent();
+/**
+ * Flag to use fake image to fix blurry zoomed image.
+ * At least WebKit doesn't restore quality for zoomed images.
+ */
+const useFakeZoomImage = browser.safari;
- /**
- * Flag to use fake image to fix blurry zoomed image.
- * At least WebKit doesn't restore quality for zoomed images.
- */
- const useFakeZoomImage = browser.safari;
+/**
+ * Retrieves an item's image URL from the API.
+ * @param {object|string} item - Item used to generate the image URL.
+ * @param {object} options - Options of the image.
+ * @param {object} apiClient - API client instance used to retrieve the image.
+ * @returns {null|string} URL of the item's image.
+ */
+function getImageUrl(item, options, apiClient) {
+ options = options || {};
+ options.type = options.type || 'Primary';
- /**
- * Retrieves an item's image URL from the API.
- * @param {object|string} item - Item used to generate the image URL.
- * @param {object} options - Options of the image.
- * @param {object} apiClient - API client instance used to retrieve the image.
- * @returns {null|string} URL of the item's image.
- */
- function getImageUrl(item, options, apiClient) {
- options = options || {};
- options.type = options.type || 'Primary';
+ if (typeof (item) === 'string') {
+ return apiClient.getScaledImageUrl(item, options);
+ }
- if (typeof (item) === 'string') {
- return apiClient.getScaledImageUrl(item, options);
+ if (item.ImageTags && item.ImageTags[options.type]) {
+ options.tag = item.ImageTags[options.type];
+ return apiClient.getScaledImageUrl(item.Id, options);
+ }
+
+ if (options.type === 'Primary') {
+ if (item.AlbumId && item.AlbumPrimaryImageTag) {
+ options.tag = item.AlbumPrimaryImageTag;
+ return apiClient.getScaledImageUrl(item.AlbumId, options);
}
+ }
- if (item.ImageTags && item.ImageTags[options.type]) {
- options.tag = item.ImageTags[options.type];
- return apiClient.getScaledImageUrl(item.Id, options);
+ return null;
+}
+
+/**
+ * Retrieves a backdrop's image URL from the API.
+ * @param {object} item - Item used to generate the image URL.
+ * @param {object} options - Options of the image.
+ * @param {object} apiClient - API client instance used to retrieve the image.
+ * @returns {null|string} URL of the item's backdrop.
+ */
+function getBackdropImageUrl(item, options, apiClient) {
+ options = options || {};
+ options.type = options.type || 'Backdrop';
+
+ // If not resizing, get the original image
+ if (!options.maxWidth && !options.width && !options.maxHeight && !options.height) {
+ options.quality = 100;
+ }
+
+ if (item.BackdropImageTags && item.BackdropImageTags.length) {
+ options.tag = item.BackdropImageTags[0];
+ return apiClient.getScaledImageUrl(item.Id, options);
+ }
+
+ return null;
+}
+
+/**
+ * Dispatches a request for an item's image to its respective handler.
+ * @param {object} item - Item used to generate the image URL.
+ * @returns {string} URL of the item's image.
+ */
+function getImgUrl(item, user) {
+ const apiClient = connectionManager.getApiClient(item.ServerId);
+ const imageOptions = {};
+
+ if (item.BackdropImageTags && item.BackdropImageTags.length) {
+ return getBackdropImageUrl(item, imageOptions, apiClient);
+ } else {
+ if (item.MediaType === 'Photo' && user && user.Policy.EnableContentDownloading) {
+ return apiClient.getItemDownloadUrl(item.Id);
}
+ imageOptions.type = 'Primary';
+ return getImageUrl(item, imageOptions, apiClient);
+ }
+}
- if (options.type === 'Primary') {
- if (item.AlbumId && item.AlbumPrimaryImageTag) {
- options.tag = item.AlbumPrimaryImageTag;
- return apiClient.getScaledImageUrl(item.AlbumId, options);
+/**
+ * Generates a button using the specified icon, classes and properties.
+ * @param {string} icon - Name of the material icon on the button
+ * @param {string} cssClass - CSS classes to assign to the button
+ * @param {boolean} canFocus - Flag to set the tabindex attribute on the button to -1.
+ * @param {boolean} autoFocus - Flag to set the autofocus attribute on the button.
+ * @returns {string} The HTML markup of the button.
+ */
+function getIcon(icon, cssClass, canFocus, autoFocus) {
+ const tabIndex = canFocus ? '' : ' tabindex="-1"';
+ autoFocus = autoFocus ? ' autofocus' : '';
+ return '';
+}
+
+/**
+ * Sets the viewport meta tag to enable or disable scaling by the user.
+ * @param {boolean} scalable - Flag to set the scalability of the viewport.
+ */
+function setUserScalable(scalable) {
+ try {
+ appHost.setUserScalable(scalable);
+ } catch (err) {
+ console.error('error in appHost.setUserScalable: ' + err);
+ }
+}
+
+export default function (options) {
+ const self = this;
+ /** Initialized instance of Swiper. */
+ let swiperInstance;
+ /** Initialized instance of the dialog containing the Swiper instance. */
+ let dialog;
+ /** Options of the slideshow components */
+ let currentOptions;
+ /** ID of the timeout used to hide the OSD. */
+ let hideTimeout;
+ /** Last coordinates of the mouse pointer. */
+ let lastMouseMoveData;
+
+ /**
+ * Creates the HTML markup for the dialog and the OSD.
+ * @param {Object} options - Options used to create the dialog and slideshow.
+ */
+ function createElements(options) {
+ currentOptions = options;
+
+ dialog = dialogHelper.createDialog({
+ exitAnimationDuration: options.interactive ? 400 : 800,
+ size: 'fullscreen',
+ autoFocus: false,
+ scrollY: false,
+ exitAnimation: 'fadeout',
+ removeOnClose: true
+ });
+
+ dialog.classList.add('slideshowDialog');
+
+ let html = '';
+
+ html += '';
+
+ if (options.interactive && !layoutManager.tv) {
+ const actionButtonsOnTop = layoutManager.mobile;
+
+ html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false);
+ html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false);
+
+ html += '';
+ if (actionButtonsOnTop) {
+ if (appHost.supports('filedownload') && options.user && options.user.Policy.EnableContentDownloading) {
+ html += getIcon('file_download', 'btnDownload slideshowButton', true);
+ }
+ if (appHost.supports('sharing')) {
+ html += getIcon('share', 'btnShare slideshowButton', true);
+ }
}
- }
+ html += getIcon('close', 'slideshowButton btnSlideshowExit hide-mouse-idle-tv', false);
+ html += '
';
- return null;
- }
+ if (!actionButtonsOnTop) {
+ html += '';
+ }
} else {
- if (item.MediaType === 'Photo' && user && user.Policy.EnableContentDownloading) {
- return apiClient.getItemDownloadUrl(item.Id);
- }
- imageOptions.type = 'Primary';
- return getImageUrl(item, imageOptions, apiClient);
- }
- }
-
- /**
- * Generates a button using the specified icon, classes and properties.
- * @param {string} icon - Name of the material icon on the button
- * @param {string} cssClass - CSS classes to assign to the button
- * @param {boolean} canFocus - Flag to set the tabindex attribute on the button to -1.
- * @param {boolean} autoFocus - Flag to set the autofocus attribute on the button.
- * @returns {string} The HTML markup of the button.
- */
- function getIcon(icon, cssClass, canFocus, autoFocus) {
- var tabIndex = canFocus ? '' : ' tabindex="-1"';
- autoFocus = autoFocus ? ' autofocus' : '';
- return '';
- }
-
- /**
- * Sets the viewport meta tag to enable or disable scaling by the user.
- * @param {boolean} scalable - Flag to set the scalability of the viewport.
- */
- function setUserScalable(scalable) {
- try {
- appHost.setUserScalable(scalable);
- } catch (err) {
- console.error('error in appHost.setUserScalable: ' + err);
- }
- }
-
- return function (options) {
- var self = this;
- /** Initialized instance of Swiper. */
- var swiperInstance;
- /** Initialized instance of the dialog containing the Swiper instance. */
- var dialog;
- /** Options of the slideshow components */
- var currentOptions;
- /** ID of the timeout used to hide the OSD. */
- var hideTimeout;
- /** Last coordinates of the mouse pointer. */
- var lastMouseMoveData;
-
- /**
- * Creates the HTML markup for the dialog and the OSD.
- * @param {Object} options - Options used to create the dialog and slideshow.
- */
- function createElements(options) {
- currentOptions = options;
-
- dialog = dialogHelper.createDialog({
- exitAnimationDuration: options.interactive ? 400 : 800,
- size: 'fullscreen',
- autoFocus: false,
- scrollY: false,
- exitAnimation: 'fadeout',
- removeOnClose: true
- });
-
- dialog.classList.add('slideshowDialog');
-
- var html = '';
-
- html += '';
-
- if (options.interactive && !layoutManager.tv) {
- var actionButtonsOnTop = layoutManager.mobile;
-
- html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false);
- html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false);
-
- html += '';
- if (actionButtonsOnTop) {
- if (appHost.supports('filedownload') && options.user && options.user.Policy.EnableContentDownloading) {
- html += getIcon('file_download', 'btnDownload slideshowButton', true);
- }
- if (appHost.supports('sharing')) {
- html += getIcon('share', 'btnShare slideshowButton', true);
- }
- }
- html += getIcon('close', 'slideshowButton btnSlideshowExit hide-mouse-idle-tv', false);
- html += '
';
-
- if (!actionButtonsOnTop) {
- html += '';
- }
- } else {
- html += '';
- }
-
- dialog.innerHTML = html;
-
- if (options.interactive && !layoutManager.tv) {
- dialog.querySelector('.btnSlideshowExit').addEventListener('click', function (e) {
- dialogHelper.close(dialog);
- });
-
- var btnPause = dialog.querySelector('.btnSlideshowPause');
- if (btnPause) {
- btnPause.addEventListener('click', playPause);
- }
-
- var btnDownload = dialog.querySelector('.btnDownload');
- if (btnDownload) {
- btnDownload.addEventListener('click', download);
- }
-
- var btnShare = dialog.querySelector('.btnShare');
- if (btnShare) {
- btnShare.addEventListener('click', share);
- }
- }
-
- setUserScalable(true);
-
- dialogHelper.open(dialog).then(function () {
- setUserScalable(false);
- });
-
- inputManager.on(window, onInputCommand);
- /* eslint-disable-next-line compat/compat */
- document.addEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
-
- dialog.addEventListener('close', onDialogClosed);
-
- loadSwiper(dialog, options);
+ html += '';
}
- /**
- * Handles OSD changes when the autoplay is started.
- */
- function onAutoplayStart() {
- var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
- if (btnSlideshowPause) {
- btnSlideshowPause.classList.replace('play_arrow', 'pause');
- }
- }
+ dialog.innerHTML = html;
- /**
- * Handles OSD changes when the autoplay is stopped.
- */
- function onAutoplayStop() {
- var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
- if (btnSlideshowPause) {
- btnSlideshowPause.classList.replace('pause', 'play_arrow');
- }
- }
-
- /**
- * Handles zoom changes.
- */
- function onZoomChange(scale, imageEl, slideEl) {
- const zoomImage = slideEl.querySelector('.swiper-zoom-fakeimg');
-
- if (zoomImage) {
- zoomImage.style.width = zoomImage.style.height = scale * 100 + '%';
-
- if (scale > 1) {
- if (zoomImage.classList.contains('swiper-zoom-fakeimg-hidden')) {
- // Await for Swiper style changes
- setTimeout(() => {
- const callback = () => {
- imageEl.removeEventListener(transitionEndEventName, callback);
- zoomImage.classList.remove('swiper-zoom-fakeimg-hidden');
- };
-
- // Swiper set 'transition-duration: 300ms' for auto zoom
- // and 'transition-duration: 0s' for touch zoom
- const transitionDuration = parseFloat(imageEl.style.transitionDuration.replace(/[a-z]/i, ''));
-
- if (transitionDuration > 0) {
- imageEl.addEventListener(transitionEndEventName, callback);
- } else {
- callback();
- }
- }, 0);
- }
- } else {
- zoomImage.classList.add('swiper-zoom-fakeimg-hidden');
- }
- }
- }
-
- /**
- * Initializes the Swiper instance and binds the relevant events.
- * @param {HTMLElement} dialog - Element containing the dialog.
- * @param {Object} options - Options used to initialize the Swiper instance.
- */
- function loadSwiper(dialog, options) {
- var slides;
- if (currentOptions.slides) {
- slides = currentOptions.slides;
- } else {
- slides = currentOptions.items;
- }
-
- require(['swiper'], function (Swiper) {
- swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
- direction: 'horizontal',
- // Loop is disabled due to the virtual slides option not supporting it.
- loop: false,
- zoom: {
- minRatio: 1,
- toggle: true
- },
- autoplay: !options.interactive,
- keyboard: {
- enabled: true
- },
- preloadImages: true,
- slidesPerView: 1,
- slidesPerColumn: 1,
- initialSlide: options.startIndex || 0,
- speed: 240,
- navigation: {
- nextEl: '.btnSlideshowNext',
- prevEl: '.btnSlideshowPrevious'
- },
- // Virtual slides reduce memory consumption for large libraries while allowing preloading of images;
- virtual: {
- slides: slides,
- cache: true,
- renderSlide: getSwiperSlideHtml,
- addSlidesBefore: 1,
- addSlidesAfter: 1
- }
- });
-
- swiperInstance.on('autoplayStart', onAutoplayStart);
- swiperInstance.on('autoplayStop', onAutoplayStop);
-
- if (useFakeZoomImage) {
- swiperInstance.on('zoomChange', onZoomChange);
- }
- });
- }
-
- /**
- * Renders the HTML markup of a slide for an item or a slide.
- * @param {Object} item - The item used to render the slide.
- * @param {number} index - The index of the item in the Swiper instance.
- * @returns {string} The HTML markup of the slide.
- */
- function getSwiperSlideHtml(item, index) {
- if (currentOptions.slides) {
- return getSwiperSlideHtmlFromSlide(item);
- } else {
- return getSwiperSlideHtmlFromItem(item);
- }
- }
-
- /**
- * Renders the HTML markup of a slide for an item.
- * @param {Object} item - Item used to generate the slide.
- * @returns {string} The HTML markup of the slide.
- */
- function getSwiperSlideHtmlFromItem(item) {
- return getSwiperSlideHtmlFromSlide({
- originalImage: getImgUrl(item, currentOptions.user),
- Id: item.Id,
- ServerId: item.ServerId
- });
- }
-
- /**
- * Renders the HTML markup of a slide for a slide object.
- * @param {Object} item - Slide object used to generate the slide.
- * @returns {string} The HTML markup of the slide.
- */
- function getSwiperSlideHtmlFromSlide(item) {
- var html = '';
- html += '';
- html += '
';
-
- return html;
- }
-
- /**
- * Fetches the information of the currently displayed slide.
- * @returns {null|{itemId: string, shareUrl: string, serverId: string, url: string}} Object containing the information of the currently displayed slide.
- */
- function getCurrentImageInfo() {
- if (swiperInstance) {
- var slide = document.querySelector('.swiper-slide-active');
-
- if (slide) {
- return {
- url: slide.getAttribute('data-original'),
- shareUrl: slide.getAttribute('data-original'),
- itemId: slide.getAttribute('data-itemid'),
- serverId: slide.getAttribute('data-serverid')
- };
- }
- return null;
- } else {
- return null;
- }
- }
-
- /**
- * Starts a download for the currently displayed slide.
- */
- function download() {
- var imageInfo = getCurrentImageInfo();
-
- require(['fileDownloader'], function (fileDownloader) {
- fileDownloader.download([imageInfo]);
- });
- }
-
- /**
- * Shares the currently displayed slide using the browser's built-in sharing feature.
- */
- function share() {
- var imageInfo = getCurrentImageInfo();
-
- navigator.share({
- url: imageInfo.shareUrl
- });
- }
-
- /**
- * Starts the autoplay feature of the Swiper instance.
- */
- function play() {
- if (swiperInstance.autoplay) {
- swiperInstance.autoplay.start();
- }
- }
-
- /**
- * Pauses the autoplay feature of the Swiper instance;
- */
- function pause() {
- if (swiperInstance.autoplay) {
- swiperInstance.autoplay.stop();
- }
- }
-
- /**
- * Toggles the autoplay feature of the Swiper instance.
- */
- function playPause() {
- var paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause');
- if (paused) {
- play();
- } else {
- pause();
- }
- }
-
- /**
- * Closes the dialog and destroys the Swiper instance.
- */
- function onDialogClosed() {
- var swiper = swiperInstance;
- if (swiper) {
- swiper.destroy(true, true);
- swiperInstance = null;
- }
-
- inputManager.off(window, onInputCommand);
- /* eslint-disable-next-line compat/compat */
- document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
- // Shows page scrollbar
- document.body.classList.remove('hide-scroll');
- document.body.classList.add('force-scroll');
- }
-
- /**
- * Shows the OSD.
- */
- function showOsd() {
- var bottom = dialog.querySelector('.slideshowBottomBar');
- if (bottom) {
- slideUpToShow(bottom);
- startHideTimer();
- }
- }
-
- /**
- * Hides the OSD.
- */
- function hideOsd() {
- var bottom = dialog.querySelector('.slideshowBottomBar');
- if (bottom) {
- slideDownToHide(bottom);
- }
- }
-
- /**
- * Starts the timer used to automatically hide the OSD.
- */
- function startHideTimer() {
- stopHideTimer();
- hideTimeout = setTimeout(hideOsd, 3000);
- }
-
- /**
- * Stops the timer used to automatically hide the OSD.
- */
- function stopHideTimer() {
- if (hideTimeout) {
- clearTimeout(hideTimeout);
- hideTimeout = null;
- }
- }
-
- /**
- * Shows the OSD by sliding it into view.
- * @param {HTMLElement} element - Element containing the OSD.
- */
- function slideUpToShow(element) {
- if (!element.classList.contains('hide')) {
- return;
- }
-
- element.classList.remove('hide');
-
- var onFinish = function () {
- focusManager.focus(element.querySelector('.btnSlideshowPause'));
- };
-
- if (!element.animate) {
- onFinish();
- return;
- }
-
- requestAnimationFrame(function () {
- var keyframes = [
- { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
- { transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
- ];
- var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
- element.animate(keyframes, timing).onfinish = onFinish;
- });
- }
-
- /**
- * Hides the OSD by sliding it out of view.
- * @param {HTMLElement} element - Element containing the OSD.
- */
- function slideDownToHide(element) {
- if (element.classList.contains('hide')) {
- return;
- }
-
- var onFinish = function () {
- element.classList.add('hide');
- };
-
- if (!element.animate) {
- onFinish();
- return;
- }
-
- requestAnimationFrame(function () {
- var keyframes = [
- { transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
- { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
- ];
- var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
- element.animate(keyframes, timing).onfinish = onFinish;
- });
- }
-
- /**
- * Shows the OSD when moving the mouse pointer or touching the screen.
- * @param {Event} event - Pointer movement event.
- */
- function onPointerMove(event) {
- var pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
-
- if (pointerType === 'mouse') {
- var eventX = event.screenX || 0;
- var eventY = event.screenY || 0;
-
- var obj = lastMouseMoveData;
- if (!obj) {
- lastMouseMoveData = {
- x: eventX,
- y: eventY
- };
- return;
- }
-
- // if coord are same, it didn't move
- if (Math.abs(eventX - obj.x) < 10 && Math.abs(eventY - obj.y) < 10) {
- return;
- }
-
- obj.x = eventX;
- obj.y = eventY;
-
- showOsd();
- }
- }
-
- /**
- * Dispatches keyboard inputs to their proper handlers.
- * @param {Event} event - Keyboard input event.
- */
- function onInputCommand(event) {
- switch (event.detail.command) {
- case 'up':
- case 'down':
- case 'select':
- case 'menu':
- case 'info':
- showOsd();
- break;
- case 'play':
- play();
- break;
- case 'pause':
- pause();
- break;
- case 'playpause':
- playPause();
- break;
- default:
- break;
- }
- }
-
- /**
- * Shows the slideshow component.
- */
- self.show = function () {
- createElements(options);
- // Hides page scrollbar
- document.body.classList.remove('force-scroll');
- document.body.classList.add('hide-scroll');
- };
-
- /**
- * Hides the slideshow element.
- */
- self.hide = function () {
- if (dialog) {
+ if (options.interactive && !layoutManager.tv) {
+ dialog.querySelector('.btnSlideshowExit').addEventListener('click', function (e) {
dialogHelper.close(dialog);
+ });
+
+ const btnPause = dialog.querySelector('.btnSlideshowPause');
+ if (btnPause) {
+ btnPause.addEventListener('click', playPause);
}
+
+ const btnDownload = dialog.querySelector('.btnDownload');
+ if (btnDownload) {
+ btnDownload.addEventListener('click', download);
+ }
+
+ const btnShare = dialog.querySelector('.btnShare');
+ if (btnShare) {
+ btnShare.addEventListener('click', share);
+ }
+ }
+
+ setUserScalable(true);
+
+ dialogHelper.open(dialog).then(function () {
+ setUserScalable(false);
+ });
+
+ inputManager.on(window, onInputCommand);
+ /* eslint-disable-next-line compat/compat */
+ document.addEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
+
+ dialog.addEventListener('close', onDialogClosed);
+
+ loadSwiper(dialog, options);
+ }
+
+ /**
+ * Handles OSD changes when the autoplay is started.
+ */
+ function onAutoplayStart() {
+ const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
+ if (btnSlideshowPause) {
+ btnSlideshowPause.classList.replace('play_arrow', 'pause');
+ }
+ }
+
+ /**
+ * Handles OSD changes when the autoplay is stopped.
+ */
+ function onAutoplayStop() {
+ const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
+ if (btnSlideshowPause) {
+ btnSlideshowPause.classList.replace('pause', 'play_arrow');
+ }
+ }
+
+ /**
+ * Handles zoom changes.
+ */
+ function onZoomChange(scale, imageEl, slideEl) {
+ const zoomImage = slideEl.querySelector('.swiper-zoom-fakeimg');
+
+ if (zoomImage) {
+ zoomImage.style.width = zoomImage.style.height = scale * 100 + '%';
+
+ if (scale > 1) {
+ if (zoomImage.classList.contains('swiper-zoom-fakeimg-hidden')) {
+ // Await for Swiper style changes
+ setTimeout(() => {
+ const callback = () => {
+ imageEl.removeEventListener(transitionEndEventName, callback);
+ zoomImage.classList.remove('swiper-zoom-fakeimg-hidden');
+ };
+
+ // Swiper set 'transition-duration: 300ms' for auto zoom
+ // and 'transition-duration: 0s' for touch zoom
+ const transitionDuration = parseFloat(imageEl.style.transitionDuration.replace(/[a-z]/i, ''));
+
+ if (transitionDuration > 0) {
+ imageEl.addEventListener(transitionEndEventName, callback);
+ } else {
+ callback();
+ }
+ }, 0);
+ }
+ } else {
+ zoomImage.classList.add('swiper-zoom-fakeimg-hidden');
+ }
+ }
+ }
+
+ /**
+ * Initializes the Swiper instance and binds the relevant events.
+ * @param {HTMLElement} dialog - Element containing the dialog.
+ * @param {Object} options - Options used to initialize the Swiper instance.
+ */
+ function loadSwiper(dialog, options) {
+ let slides;
+ if (currentOptions.slides) {
+ slides = currentOptions.slides;
+ } else {
+ slides = currentOptions.items;
+ }
+
+ import('swiper').then(({default: Swiper}) => {
+ swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
+ direction: 'horizontal',
+ // Loop is disabled due to the virtual slides option not supporting it.
+ loop: false,
+ zoom: {
+ minRatio: 1,
+ toggle: true
+ },
+ autoplay: !options.interactive,
+ keyboard: {
+ enabled: true
+ },
+ preloadImages: true,
+ slidesPerView: 1,
+ slidesPerColumn: 1,
+ initialSlide: options.startIndex || 0,
+ speed: 240,
+ navigation: {
+ nextEl: '.btnSlideshowNext',
+ prevEl: '.btnSlideshowPrevious'
+ },
+ // Virtual slides reduce memory consumption for large libraries while allowing preloading of images;
+ virtual: {
+ slides: slides,
+ cache: true,
+ renderSlide: getSwiperSlideHtml,
+ addSlidesBefore: 1,
+ addSlidesAfter: 1
+ }
+ });
+
+ swiperInstance.on('autoplayStart', onAutoplayStart);
+ swiperInstance.on('autoplayStop', onAutoplayStop);
+
+ if (useFakeZoomImage) {
+ swiperInstance.on('zoomChange', onZoomChange);
+ }
+ });
+ }
+
+ /**
+ * Renders the HTML markup of a slide for an item or a slide.
+ * @param {Object} item - The item used to render the slide.
+ * @param {number} index - The index of the item in the Swiper instance.
+ * @returns {string} The HTML markup of the slide.
+ */
+ function getSwiperSlideHtml(item, index) {
+ if (currentOptions.slides) {
+ return getSwiperSlideHtmlFromSlide(item);
+ } else {
+ return getSwiperSlideHtmlFromItem(item);
+ }
+ }
+
+ /**
+ * Renders the HTML markup of a slide for an item.
+ * @param {Object} item - Item used to generate the slide.
+ * @returns {string} The HTML markup of the slide.
+ */
+ function getSwiperSlideHtmlFromItem(item) {
+ return getSwiperSlideHtmlFromSlide({
+ originalImage: getImgUrl(item, currentOptions.user),
+ Id: item.Id,
+ ServerId: item.ServerId
+ });
+ }
+
+ /**
+ * Renders the HTML markup of a slide for a slide object.
+ * @param {Object} item - Slide object used to generate the slide.
+ * @returns {string} The HTML markup of the slide.
+ */
+ function getSwiperSlideHtmlFromSlide(item) {
+ let html = '';
+ html += '';
- if (useFakeZoomImage) {
- html += ``;
- }
- html += '
';
- html += '
';
- if (item.title || item.subtitle) {
- html += '';
- }
- html += '';
+ html += '
';
+
+ return html;
+ }
+
+ /**
+ * Fetches the information of the currently displayed slide.
+ * @returns {null|{itemId: string, shareUrl: string, serverId: string, url: string}} Object containing the information of the currently displayed slide.
+ */
+ function getCurrentImageInfo() {
+ if (swiperInstance) {
+ const slide = document.querySelector('.swiper-slide-active');
+
+ if (slide) {
+ return {
+ url: slide.getAttribute('data-original'),
+ shareUrl: slide.getAttribute('data-original'),
+ itemId: slide.getAttribute('data-itemid'),
+ serverId: slide.getAttribute('data-serverid')
+ };
+ }
+ return null;
+ } else {
+ return null;
+ }
+ }
+
+ /**
+ * Starts a download for the currently displayed slide.
+ */
+ function download() {
+ const imageInfo = getCurrentImageInfo();
+
+ import('fileDownloader').then(({default: fileDownloader}) => {
+ fileDownloader.download([imageInfo]);
+ });
+ }
+
+ /**
+ * Shares the currently displayed slide using the browser's built-in sharing feature.
+ */
+ function share() {
+ const imageInfo = getCurrentImageInfo();
+
+ navigator.share({
+ url: imageInfo.shareUrl
+ });
+ }
+
+ /**
+ * Starts the autoplay feature of the Swiper instance.
+ */
+ function play() {
+ if (swiperInstance.autoplay) {
+ swiperInstance.autoplay.start();
+ }
+ }
+
+ /**
+ * Pauses the autoplay feature of the Swiper instance;
+ */
+ function pause() {
+ if (swiperInstance.autoplay) {
+ swiperInstance.autoplay.stop();
+ }
+ }
+
+ /**
+ * Toggles the autoplay feature of the Swiper instance.
+ */
+ function playPause() {
+ const paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause');
+ if (paused) {
+ play();
+ } else {
+ pause();
+ }
+ }
+
+ /**
+ * Closes the dialog and destroys the Swiper instance.
+ */
+ function onDialogClosed() {
+ const swiper = swiperInstance;
+ if (swiper) {
+ swiper.destroy(true, true);
+ swiperInstance = null;
+ }
+
+ inputManager.off(window, onInputCommand);
+ /* eslint-disable-next-line compat/compat */
+ document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
+ // Shows page scrollbar
+ document.body.classList.remove('hide-scroll');
+ document.body.classList.add('force-scroll');
+ }
+
+ /**
+ * Shows the OSD.
+ */
+ function showOsd() {
+ const bottom = dialog.querySelector('.slideshowBottomBar');
+ if (bottom) {
+ slideUpToShow(bottom);
+ startHideTimer();
+ }
+ }
+
+ /**
+ * Hides the OSD.
+ */
+ function hideOsd() {
+ const bottom = dialog.querySelector('.slideshowBottomBar');
+ if (bottom) {
+ slideDownToHide(bottom);
+ }
+ }
+
+ /**
+ * Starts the timer used to automatically hide the OSD.
+ */
+ function startHideTimer() {
+ stopHideTimer();
+ hideTimeout = setTimeout(hideOsd, 3000);
+ }
+
+ /**
+ * Stops the timer used to automatically hide the OSD.
+ */
+ function stopHideTimer() {
+ if (hideTimeout) {
+ clearTimeout(hideTimeout);
+ hideTimeout = null;
+ }
+ }
+
+ /**
+ * Shows the OSD by sliding it into view.
+ * @param {HTMLElement} element - Element containing the OSD.
+ */
+ function slideUpToShow(element) {
+ if (!element.classList.contains('hide')) {
+ return;
+ }
+
+ element.classList.remove('hide');
+
+ const onFinish = function () {
+ focusManager.focus(element.querySelector('.btnSlideshowPause'));
};
+
+ if (!element.animate) {
+ onFinish();
+ return;
+ }
+
+ requestAnimationFrame(function () {
+ const keyframes = [
+ { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
+ { transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
+ ];
+ const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
+ element.animate(keyframes, timing).onfinish = onFinish;
+ });
+ }
+
+ /**
+ * Hides the OSD by sliding it out of view.
+ * @param {HTMLElement} element - Element containing the OSD.
+ */
+ function slideDownToHide(element) {
+ if (element.classList.contains('hide')) {
+ return;
+ }
+
+ const onFinish = function () {
+ element.classList.add('hide');
+ };
+
+ if (!element.animate) {
+ onFinish();
+ return;
+ }
+
+ requestAnimationFrame(function () {
+ const keyframes = [
+ { transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
+ { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
+ ];
+ const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
+ element.animate(keyframes, timing).onfinish = onFinish;
+ });
+ }
+
+ /**
+ * Shows the OSD when moving the mouse pointer or touching the screen.
+ * @param {Event} event - Pointer movement event.
+ */
+ function onPointerMove(event) {
+ const pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
+
+ if (pointerType === 'mouse') {
+ const eventX = event.screenX || 0;
+ const eventY = event.screenY || 0;
+
+ const obj = lastMouseMoveData;
+ if (!obj) {
+ lastMouseMoveData = {
+ x: eventX,
+ y: eventY
+ };
+ return;
+ }
+
+ // if coord are same, it didn't move
+ if (Math.abs(eventX - obj.x) < 10 && Math.abs(eventY - obj.y) < 10) {
+ return;
+ }
+
+ obj.x = eventX;
+ obj.y = eventY;
+
+ showOsd();
+ }
+ }
+
+ /**
+ * Dispatches keyboard inputs to their proper handlers.
+ * @param {Event} event - Keyboard input event.
+ */
+ function onInputCommand(event) {
+ switch (event.detail.command) {
+ case 'up':
+ case 'down':
+ case 'select':
+ case 'menu':
+ case 'info':
+ showOsd();
+ break;
+ case 'play':
+ play();
+ break;
+ case 'pause':
+ pause();
+ break;
+ case 'playpause':
+ playPause();
+ break;
+ default:
+ break;
+ }
+ }
+
+ /**
+ * Shows the slideshow component.
+ */
+ self.show = function () {
+ createElements(options);
+ // Hides page scrollbar
+ document.body.classList.remove('force-scroll');
+ document.body.classList.add('hide-scroll');
};
-});
+
+ /**
+ * Hides the slideshow element.
+ */
+ self.hide = function () {
+ if (dialog) {
+ dialogHelper.close(dialog);
+ }
+ };
+}
diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js
index d1cea0c490..d38d98c090 100644
--- a/src/components/sortmenu/sortmenu.js
+++ b/src/components/sortmenu/sortmenu.js
@@ -1,49 +1,51 @@
-define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'globalize', 'userSettings', 'emby-select', 'paper-icon-button-light', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dom, focusManager, dialogHelper, loading, layoutManager, connectionManager, globalize, userSettings) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
+import 'flexStyles';
- focusManager = focusManager.default || focusManager;
+function onSubmit(e) {
+ e.preventDefault();
+ return false;
+}
- function onSubmit(e) {
- e.preventDefault();
- return false;
- }
+function initEditor(context, settings) {
+ context.querySelector('form').addEventListener('submit', onSubmit);
- function initEditor(context, settings) {
- context.querySelector('form').addEventListener('submit', onSubmit);
+ context.querySelector('.selectSortOrder').value = settings.sortOrder;
+ context.querySelector('.selectSortBy').value = settings.sortBy;
+}
- context.querySelector('.selectSortOrder').value = settings.sortOrder;
- context.querySelector('.selectSortBy').value = settings.sortBy;
- }
+function centerFocus(elem, horiz, on) {
+ import('scrollHelper').then(({default: scrollHelper}) => {
+ const fn = on ? 'on' : 'off';
+ scrollHelper.centerFocus[fn](elem, horiz);
+ });
+}
- function centerFocus(elem, horiz, on) {
- require(['scrollHelper'], function (scrollHelper) {
- scrollHelper = scrollHelper.default || scrollHelper;
- var fn = on ? 'on' : 'off';
- scrollHelper.centerFocus[fn](elem, horiz);
- });
- }
+function fillSortBy(context, options) {
+ const selectSortBy = context.querySelector('.selectSortBy');
- function fillSortBy(context, options) {
- var selectSortBy = context.querySelector('.selectSortBy');
+ selectSortBy.innerHTML = options.map(function (o) {
+ return '';
+ }).join('');
+}
- selectSortBy.innerHTML = options.map(function (o) {
- return '';
- }).join('');
- }
+function saveValues(context, settingsKey) {
+ userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
+ userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
+}
- function saveValues(context, settings, settingsKey) {
- userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
- userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
- }
-
- function SortMenu() {
-
- }
-
- SortMenu.prototype.show = function (options) {
+class SortMenu {
+ show(options) {
return new Promise(function (resolve, reject) {
- require(['text!./sortmenu.template.html'], function (template) {
- var dialogOptions = {
+ import('text!./sortmenu.template.html').then(({default: template}) => {
+ const dialogOptions = {
removeOnClose: true,
scrollY: false
};
@@ -54,11 +56,11 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
dialogOptions.size = 'small';
}
- var dlg = dialogHelper.createDialog(dialogOptions);
+ const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
- var html = '';
+ let html = '';
html += '';
+ if (useFakeZoomImage) {
+ html += ``;
+ }
+ html += '';
+ html += '
';
+ if (item.title || item.subtitle) {
+ html += '';
+ }
+ html += '';
html += '';
@@ -81,7 +83,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
centerFocus(dlg.querySelector('.formDialogContent'), false, true);
}
- var submitted;
+ let submitted;
dlg.querySelector('form').addEventListener('change', function () {
submitted = true;
@@ -93,7 +95,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
}
if (submitted) {
- saveValues(dlg, options.settings, options.settingsKey);
+ saveValues(dlg, options.settingsKey);
resolve();
return;
}
@@ -102,7 +104,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
});
});
});
- };
+ }
+}
- return SortMenu;
-});
+export default SortMenu;
diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js
index b52b911cb9..dfd7f9446c 100644
--- a/src/components/subtitleeditor/subtitleeditor.js
+++ b/src/components/subtitleeditor/subtitleeditor.js
@@ -1,428 +1,437 @@
-define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', 'connectionManager', 'loading', 'focusManager', 'dom', 'apphost', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'css!./subtitleeditor', 'emby-button', 'flexStyles'], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import focusManager from 'focusManager';
+import dom from 'dom';
+import 'emby-select';
+import 'listViewStyle';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'material-icons';
+import 'css!./subtitleeditor';
+import 'emby-button';
+import 'flexStyles';
- loading = loading.default || loading;
- focusManager = focusManager.default || focusManager;
+let currentItem;
+let hasChanges;
- var currentItem;
- var hasChanges;
+function downloadRemoteSubtitles(context, id) {
+ let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
- function downloadRemoteSubtitles(context, id) {
- var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
+ let apiClient = connectionManager.getApiClient(currentItem.ServerId);
+ apiClient.ajax({
- var apiClient = connectionManager.getApiClient(currentItem.ServerId);
- apiClient.ajax({
+ type: 'POST',
+ url: apiClient.getUrl(url)
- type: 'POST',
- url: apiClient.getUrl(url)
+ }).then(function () {
+ hasChanges = true;
+
+ import('toast').then(({default: toast}) => {
+ toast(globalize.translate('MessageDownloadQueued'));
+ });
+
+ focusManager.autoFocus(context);
+ });
+}
+
+function deleteLocalSubtitle(context, index) {
+ let msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
+
+ import('confirm').then(({default: confirm}) => {
+ confirm({
+
+ title: globalize.translate('ConfirmDeletion'),
+ text: msg,
+ confirmText: globalize.translate('Delete'),
+ primary: 'delete'
}).then(function () {
- hasChanges = true;
+ loading.show();
- require(['toast'], function (toast) {
- toast(globalize.translate('MessageDownloadQueued'));
- });
+ let itemId = currentItem.Id;
+ let url = 'Videos/' + itemId + '/Subtitles/' + index;
- focusManager.autoFocus(context);
- });
- }
+ let apiClient = connectionManager.getApiClient(currentItem.ServerId);
- function deleteLocalSubtitle(context, index) {
- var msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
+ apiClient.ajax({
- require(['confirm'], function (confirm) {
- confirm.default({
-
- title: globalize.translate('ConfirmDeletion'),
- text: msg,
- confirmText: globalize.translate('Delete'),
- primary: 'delete'
+ type: 'DELETE',
+ url: apiClient.getUrl(url)
}).then(function () {
- loading.show();
-
- var itemId = currentItem.Id;
- var url = 'Videos/' + itemId + '/Subtitles/' + index;
-
- var apiClient = connectionManager.getApiClient(currentItem.ServerId);
-
- apiClient.ajax({
-
- type: 'DELETE',
- url: apiClient.getUrl(url)
-
- }).then(function () {
- hasChanges = true;
- reload(context, apiClient, itemId);
- });
+ hasChanges = true;
+ reload(context, apiClient, itemId);
});
});
- }
+ });
+}
- function fillSubtitleList(context, item) {
- var streams = item.MediaStreams || [];
+function fillSubtitleList(context, item) {
+ let streams = item.MediaStreams || [];
- var subs = streams.filter(function (s) {
- return s.Type === 'Subtitle';
- });
+ let subs = streams.filter(function (s) {
+ return s.Type === 'Subtitle';
+ });
- var html = '';
+ let html = '';
- if (subs.length) {
- html += '
';
+ }
+ html += '' + globalize.translate('MySubtitles') + '
'; + if (subs.length) { + html += '' + globalize.translate('MySubtitles') + '
'; - html += '';
+ html += '
';
- }
- html += '';
- html += subs.map(function (s) {
- var itemHtml = '';
+ html += subs.map(function (s) {
+ let itemHtml = '';
- var tagName = layoutManager.tv ? 'button' : 'div';
- var className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
+ let tagName = layoutManager.tv ? 'button' : 'div';
+ let className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
- if (layoutManager.tv) {
- className += ' listItem-focusscale listItem-button';
- }
-
- className += ' listItem-noborder';
-
- itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
-
- itemHtml += '';
-
- itemHtml += '
';
- }
-
- var elem = context.querySelector('.subtitleList');
-
- if (subs.length) {
- elem.classList.remove('hide');
- } else {
- elem.classList.add('hide');
- }
- elem.innerHTML = html;
- }
-
- function fillLanguages(context, apiClient, languages) {
- var selectLanguage = context.querySelector('#selectLanguage');
-
- selectLanguage.innerHTML = languages.map(function (l) {
- return '';
- });
-
- var lastLanguage = userSettings.get('subtitleeditor-language');
- if (lastLanguage) {
- selectLanguage.value = lastLanguage;
- } else {
- apiClient.getCurrentUser().then(function (user) {
- var lang = user.Configuration.SubtitleLanguagePreference;
-
- if (lang) {
- selectLanguage.value = lang;
- }
- });
- }
- }
-
- function renderSearchResults(context, results) {
- var lastProvider = '';
- var html = '';
-
- if (!results.length) {
- context.querySelector('.noSearchResults').classList.remove('hide');
- context.querySelector('.subtitleResults').innerHTML = '';
- loading.hide();
- return;
- }
-
- context.querySelector('.noSearchResults').classList.add('hide');
-
- for (var i = 0, length = results.length; i < length; i++) {
- var result = results[i];
-
- var provider = result.ProviderName;
-
- if (provider !== lastProvider) {
- if (i > 0) {
- html += '';
-
- itemHtml += '
';
-
- if (!layoutManager.tv) {
- if (s.Path) {
- itemHtml += '';
- }
- }
-
- itemHtml += '';
-
- return itemHtml;
- }).join('');
-
- html += '';
- itemHtml += s.DisplayTitle || '';
- itemHtml += '
';
-
- if (s.Path) {
- itemHtml += '' + (s.Path) + '
';
- }
-
- itemHtml += '';
- itemHtml += '' + provider + '
'; - html += '';
- lastProvider = provider;
- }
-
- var tagName = layoutManager.tv ? 'button' : 'div';
- var className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
if (layoutManager.tv) {
className += ' listItem-focusscale listItem-button';
}
- html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
+ className += ' listItem-noborder';
- html += '';
+ itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
- var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
+ itemHtml += '';
- html += '
';
+ }
+
+ let elem = context.querySelector('.subtitleList');
+
+ if (subs.length) {
+ elem.classList.remove('hide');
+ } else {
+ elem.classList.add('hide');
+ }
+ elem.innerHTML = html;
+}
+
+function fillLanguages(context, apiClient, languages) {
+ let selectLanguage = context.querySelector('#selectLanguage');
+
+ selectLanguage.innerHTML = languages.map(function (l) {
+ return '';
+ });
+
+ let lastLanguage = userSettings.get('subtitleeditor-language');
+ if (lastLanguage) {
+ selectLanguage.value = lastLanguage;
+ } else {
+ apiClient.getCurrentUser().then(function (user) {
+ let lang = user.Configuration.SubtitleLanguagePreference;
+
+ if (lang) {
+ selectLanguage.value = lang;
+ }
+ });
+ }
+}
+
+function renderSearchResults(context, results) {
+ let lastProvider = '';
+ let html = '';
+
+ if (!results.length) {
+ context.querySelector('.noSearchResults').classList.remove('hide');
+ context.querySelector('.subtitleResults').innerHTML = '';
+ loading.hide();
+ return;
+ }
+
+ context.querySelector('.noSearchResults').classList.add('hide');
+
+ for (let i = 0, length = results.length; i < length; i++) {
+ let result = results[i];
+
+ let provider = result.ProviderName;
+
+ if (provider !== lastProvider) {
+ if (i > 0) {
+ html += '';
+ itemHtml += '
';
if (!layoutManager.tv) {
- html += '';
+ if (s.Path) {
+ itemHtml += '';
+ }
}
- html += '';
+ itemHtml += '';
+
+ return itemHtml;
+ }).join('');
+
+ html += '';
- html += '';
- }
-
- html += '
';
+ itemHtml += '';
+ itemHtml += '' + (result.Name) + '
';
- html += '';
+ itemHtml += '
';
-
- if (result.Comment) {
- html += '';
+ itemHtml += s.DisplayTitle || '';
+ itemHtml += '
';
- if (result.Format) {
- html += '' + globalize.translate('FormatValue', result.Format) + '';
+ if (s.Path) {
+ itemHtml += '' + (s.Path) + '
';
}
- if (result.DownloadCount != null) {
- html += '' + globalize.translate('DownloadsValue', result.DownloadCount) + '';
- }
- html += '' + (result.Comment) + '
';
- }
-
- if (result.IsHashMatch) {
- html += '' + globalize.translate('PerfectMatch') + '
' + provider + '
'; + html += '';
+ lastProvider = provider;
}
- if (results.length) {
- html += '
';
+ let tagName = layoutManager.tv ? 'button' : 'div';
+ let className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
+ if (layoutManager.tv) {
+ className += ' listItem-focusscale listItem-button';
}
- var elem = context.querySelector('.subtitleResults');
- elem.innerHTML = html;
+ html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
+
+ html += '';
+
+ let bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
+
+ html += '';
+
+ html += '';
+ }
+
+ html += '
';
+
+ if (!layoutManager.tv) {
+ html += '';
+ }
+
+ html += '';
+ }
+
+ if (results.length) {
+ html += '' + (result.Name) + '
';
+ html += '';
+
+ if (result.Format) {
+ html += '' + globalize.translate('FormatValue', result.Format) + '';
+ }
+
+ if (result.DownloadCount != null) {
+ html += '' + globalize.translate('DownloadsValue', result.DownloadCount) + '';
+ }
+ html += '
';
+
+ if (result.Comment) {
+ html += '' + (result.Comment) + '
';
+ }
+
+ if (result.IsHashMatch) {
+ html += '' + globalize.translate('PerfectMatch') + '
';
}
- }
- function getRandomInt(min, max) {
- return Math.floor(Math.random() * (max - min + 1)) + min;
- }
-
- function bounceInLeft(elem, iterations) {
- var keyframes = [
- { transform: 'translate3d(-3000px, 0, 0)', opacity: '0', offset: 0 },
- { transform: 'translate3d(25px, 0, 0)', opacity: '1', offset: 0.6 },
- { transform: 'translate3d(-100px, 0, 0)', offset: 0.75 },
- { transform: 'translate3d(5px, 0, 0)', offset: 0.9 },
- { transform: 'none', opacity: '1', offset: 1 }];
- var timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
- return elem.animate(keyframes, timing);
- }
-
- function bounceInRight(elem, iterations) {
- var keyframes = [
- { transform: 'translate3d(3000px, 0, 0)', opacity: '0', offset: 0 },
- { transform: 'translate3d(-25px, 0, 0)', opacity: '1', offset: 0.6 },
- { transform: 'translate3d(100px, 0, 0)', offset: 0.75 },
- { transform: 'translate3d(-5px, 0, 0)', offset: 0.9 },
- { transform: 'none', opacity: '1', offset: 1 }];
- var timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
- return elem.animate(keyframes, timing);
- }
-
- function swing(elem, iterations) {
- var keyframes = [
- { transform: 'translate(0%)', offset: 0 },
- { transform: 'rotate3d(0, 0, 1, 15deg)', offset: 0.2 },
- { transform: 'rotate3d(0, 0, 1, -10deg)', offset: 0.4 },
- { transform: 'rotate3d(0, 0, 1, 5deg)', offset: 0.6 },
- { transform: 'rotate3d(0, 0, 1, -5deg)', offset: 0.8 },
- { transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }];
- var timing = { duration: 900, iterations: iterations };
- return elem.animate(keyframes, timing);
- }
-
- function tada(elem, iterations) {
- var keyframes = [
- { transform: 'scale3d(1, 1, 1)', offset: 0 },
- { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.1 },
- { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.2 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.3 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.4 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.5 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.6 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.7 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.8 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.9 },
- { transform: 'scale3d(1, 1, 1)', offset: 1 }];
- var timing = { duration: 900, iterations: iterations };
- return elem.animate(keyframes, timing);
- }
-
- function wobble(elem, iterations) {
- var keyframes = [
- { transform: 'translate(0%)', offset: 0 },
- { transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)', offset: 0.15 },
- { transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)', offset: 0.45 },
- { transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)', offset: 0.6 },
- { transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)', offset: 0.75 },
- { transform: 'translateX(0%)', offset: 1 }];
- var timing = { duration: 900, iterations: iterations };
- return elem.animate(keyframes, timing);
- }
-
- function rotateIn(elem, iterations) {
- var keyframes = [{ transform: 'rotate3d(0, 0, 1, -200deg)', opacity: '0', transformOrigin: 'center', offset: 0 },
- { transform: 'none', opacity: '1', transformOrigin: 'center', offset: 1 }];
- var timing = { duration: 900, iterations: iterations };
- return elem.animate(keyframes, timing);
- }
-
- function rotateOut(elem, iterations) {
- var keyframes = [{ transform: 'none', opacity: '1', transformOrigin: 'center', offset: 0 },
- { transform: 'rotate3d(0, 0, 1, 200deg)', opacity: '0', transformOrigin: 'center', offset: 1 }];
- var timing = { duration: 900, iterations: iterations };
- return elem.animate(keyframes, timing);
- }
-
- function fadeOut(elem, iterations) {
- var keyframes = [
- { opacity: '1', offset: 0 },
- { opacity: '0', offset: 1 }];
- var timing = { duration: 400, iterations: iterations };
- return elem.animate(keyframes, timing);
- }
-
- function stopInterval() {
- if (interval) {
- clearInterval(interval);
- interval = null;
- }
- }
-
- self.show = function () {
- require(['css!' + pluginManager.mapPath(self, 'style.css')], function () {
- var elem = document.querySelector('.logoScreenSaver');
-
- if (!elem) {
- elem = document.createElement('div');
- elem.classList.add('logoScreenSaver');
- document.body.appendChild(elem);
-
- elem.innerHTML = '
';
html += '