mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update live tv tabs

Browse source
This commit is contained in:
Luke Pulverenti 2016-05-15 13:11:26 -04:00
parent 26dcecb51f
commit 2fd65cdcd9
7 changed files with 513 additions and 502 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dashboard-ui/livetv.html
View file

@ -1,4 +1,4 @@
<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="scripts/livetvsuggested,livetvcss,scripts/livetvcomponents,paper-checkbox"> <div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie">
<div class="libraryViewNav"> <div class="libraryViewNav">
<button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button> <button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>

246
dashboard-ui/scripts/livetvchannels.js
View file

@ -1,122 +1,126 @@
define(['jQuery'], function ($) { define(['jQuery'], function ($) {
var data = {}; return function (view, params, tabContent) {
function getPageData(context) { var self = this;
var key = getSavedQueryKey(context); var data = {};
var pageData = data[key];
function getPageData(context) {
if (!pageData) { var key = getSavedQueryKey(context);
pageData = data[key] = { var pageData = data[key];
query: {
StartIndex: 0, if (!pageData) {
EnableFavoriteSorting: true, pageData = data[key] = {
Limit: LibraryBrowser.getDefaultPageSize() query: {
} StartIndex: 0,
}; EnableFavoriteSorting: true,
Limit: LibraryBrowser.getDefaultPageSize()
LibraryBrowser.loadSavedQueryValues(key, pageData.query); }
} };
return pageData;
} LibraryBrowser.loadSavedQueryValues(key, pageData.query);
}
function getQuery(context) { return pageData;
}
return getPageData(context).query;
} function getQuery(context) {
function getSavedQueryKey(context) { return getPageData(context).query;
}
if (!context.savedQueryKey) {
context.savedQueryKey = LibraryBrowser.getSavedQueryKey('channels'); function getSavedQueryKey(context) {
}
return context.savedQueryKey; if (!context.savedQueryKey) {
} context.savedQueryKey = LibraryBrowser.getSavedQueryKey('channels');
}
function getChannelsHtml(channels) { return context.savedQueryKey;
}
return LibraryBrowser.getPosterViewHtml({
items: channels, function getChannelsHtml(channels) {
shape: "square",
showTitle: true, return LibraryBrowser.getPosterViewHtml({
lazy: true, items: channels,
cardLayout: true, shape: "square",
showDetailsMenu: true showTitle: true,
}); lazy: true,
} cardLayout: true,
showDetailsMenu: true
function renderChannels(page, result) { });
}
var query = getQuery(page);
function renderChannels(context, result) {
$('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex, var query = getQuery(context);
limit: query.Limit,
totalRecordCount: result.TotalRecordCount, $('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
showLimit: false, startIndex: query.StartIndex,
updatePageSizeSetting: false, limit: query.Limit,
filterButton: true totalRecordCount: result.TotalRecordCount,
})); showLimit: false,
updatePageSizeSetting: false,
var html = getChannelsHtml(result.Items); filterButton: true
}));
var elem = page.querySelector('#items');
elem.innerHTML = html; var html = getChannelsHtml(result.Items);
ImageLoader.lazyChildren(elem);
var elem = context.querySelector('#items');
$('.btnNextPage', page).on('click', function () { elem.innerHTML = html;
query.StartIndex += query.Limit; ImageLoader.lazyChildren(elem);
reloadItems(page);
}); $('.btnNextPage', context).on('click', function () {
query.StartIndex += query.Limit;
$('.btnPreviousPage', page).on('click', function () { reloadItems(context);
query.StartIndex -= query.Limit; });
reloadItems(page);
}); $('.btnPreviousPage', context).on('click', function () {
query.StartIndex -= query.Limit;
$('.btnFilter', page).on('click', function () { reloadItems(context);
showFilterMenu(page); });
});
$('.btnFilter', context).on('click', function () {
LibraryBrowser.saveQueryValues(getSavedQueryKey(page), query); showFilterMenu(context);
} });
function showFilterMenu(page) { LibraryBrowser.saveQueryValues(getSavedQueryKey(context), query);
}
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
function showFilterMenu(context) {
var filterDialog = new filterDialogFactory({
query: getQuery(page), require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
mode: 'livetvchannels'
}); var filterDialog = new filterDialogFactory({
query: getQuery(context),
Events.on(filterDialog, 'filterchange', function () { mode: 'livetvchannels'
reloadItems(page); });
});
Events.on(filterDialog, 'filterchange', function () {
filterDialog.show(); reloadItems(context);
}); });
}
filterDialog.show();
function reloadItems(page) { });
}
Dashboard.showLoadingMsg();
function reloadItems(context) {
var query = getQuery(page);
Dashboard.showLoadingMsg();
query.UserId = Dashboard.getCurrentUserId();
var query = getQuery(context);
ApiClient.getLiveTvChannels(query).then(function (result) {
query.UserId = Dashboard.getCurrentUserId();
renderChannels(page, result);
ApiClient.getLiveTvChannels(query).then(function (result) {
Dashboard.hideLoadingMsg();
}); renderChannels(context, result);
}
Dashboard.hideLoadingMsg();
window.LiveTvPage.renderChannelsTab = function (page, tabContent) { });
}
reloadItems(tabContent);
}; self.renderTab = function () {
reloadItems(tabContent);
};
};
}); });

30
dashboard-ui/scripts/livetvguide.js
View file

@ -1,17 +1,15 @@
define(['tvguide'], function (tvguide) { define(['tvguide'], function (tvguide) {
window.LiveTvPage.initGuideTab = function (page, tabContent) { return function (view, params, tabContent) {
}; var self = this;
var guideInstance;
window.LiveTvPage.renderGuideTab = function (page, tabContent) { self.renderTab = function () {
if (!guideInstance) {
if (!page.guideInstance) { guideInstance = new tvguide({
element: tabContent
page.guideInstance = new tvguide({ });
element: tabContent }
}); };
} };
};
}); });

338
dashboard-ui/scripts/livetvrecordings.js
View file

@ -1,170 +1,170 @@
define(['jQuery'], function ($) { define(['jQuery', 'scripts/livetvcomponents'], function ($) {
function getRecordingGroupHtml(group) { function getRecordingGroupHtml(group) {
var html = ''; var html = '';
html += '<paper-icon-item>'; html += '<paper-icon-item>';
html += '<paper-fab mini class="blue" icon="live-tv" item-icon></paper-fab>'; html += '<paper-fab mini class="blue" icon="live-tv" item-icon></paper-fab>';
html += '<paper-item-body two-line>'; html += '<paper-item-body two-line>';
html += '<a href="livetvrecordinglist.html?groupid=' + group.Id + '" class="clearLink">'; html += '<a href="livetvrecordinglist.html?groupid=' + group.Id + '" class="clearLink">';
html += '<div>'; html += '<div>';
html += group.Name; html += group.Name;
html += '</div>'; html += '</div>';
html += '<div secondary>'; html += '<div secondary>';
if (group.RecordingCount == 1) { if (group.RecordingCount == 1) {
html += Globalize.translate('ValueItemCount', group.RecordingCount); html += Globalize.translate('ValueItemCount', group.RecordingCount);
} else { } else {
html += Globalize.translate('ValueItemCountPlural', group.RecordingCount); html += Globalize.translate('ValueItemCountPlural', group.RecordingCount);
} }
html += '</div>'; html += '</div>';
html += '</a>'; html += '</a>';
html += '</paper-item-body>'; html += '</paper-item-body>';
html += '</paper-icon-item>'; html += '</paper-icon-item>';
return html; return html;
} }
function renderRecordingGroups(page, groups) { function renderRecordingGroups(context, groups) {
if (groups.length) { if (groups.length) {
$('#recordingGroups', page).show(); $('#recordingGroups', context).show();
} else { } else {
$('#recordingGroups', page).hide(); $('#recordingGroups', context).hide();
} }
var html = ''; var html = '';
html += '<div class="paperList">'; html += '<div class="paperList">';
for (var i = 0, length = groups.length; i < length; i++) { for (var i = 0, length = groups.length; i < length; i++) {
html += getRecordingGroupHtml(groups[i]); html += getRecordingGroupHtml(groups[i]);
} }
html += '</div>'; html += '</div>';
page.querySelector('#recordingGroupItems').innerHTML = html; context.querySelector('#recordingGroupItems').innerHTML = html;
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
} }
function renderRecordings(elem, recordings) { function renderRecordings(elem, recordings) {
if (recordings.length) { if (recordings.length) {
elem.classList.remove('hide'); elem.classList.remove('hide');
} else { } else {
elem.classList.add('hide'); elem.classList.add('hide');
} }
var recordingItems = elem.querySelector('.recordingItems'); var recordingItems = elem.querySelector('.recordingItems');
recordingItems.innerHTML = LibraryBrowser.getPosterViewHtml({ recordingItems.innerHTML = LibraryBrowser.getPosterViewHtml({
items: recordings, items: recordings,
shape: "auto", shape: "auto",
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
centerText: true, centerText: true,
coverImage: true, coverImage: true,
lazy: true, lazy: true,
overlayPlayButton: true overlayPlayButton: true
}); });
ImageLoader.lazyChildren(recordingItems); ImageLoader.lazyChildren(recordingItems);
} }
function renderActiveRecordings(page) { function renderActiveRecordings(context) {
ApiClient.getLiveTvRecordings({ ApiClient.getLiveTvRecordings({
userId: Dashboard.getCurrentUserId(), userId: Dashboard.getCurrentUserId(),
IsInProgress: true, IsInProgress: true,
Fields: 'CanDelete' Fields: 'CanDelete'
}).then(function (result) { }).then(function (result) {
renderRecordings(page.querySelector('#activeRecordings'), result.Items); renderRecordings(context.querySelector('#activeRecordings'), result.Items);
}); });
} }
function renderLatestRecordings(page) { function renderLatestRecordings(context) {
ApiClient.getLiveTvRecordings({ ApiClient.getLiveTvRecordings({
userId: Dashboard.getCurrentUserId(), userId: Dashboard.getCurrentUserId(),
limit: 4, limit: 4,
IsInProgress: false, IsInProgress: false,
Fields: 'CanDelete,PrimaryImageAspectRatio' Fields: 'CanDelete,PrimaryImageAspectRatio'
}).then(function (result) { }).then(function (result) {
renderRecordings(page.querySelector('#latestRecordings'), result.Items); renderRecordings(context.querySelector('#latestRecordings'), result.Items);
}); });
} }
function renderTimers(page, timers) { function renderTimers(context, timers) {
LiveTvHelpers.getTimersHtml(timers).then(function (html) { LiveTvHelpers.getTimersHtml(timers).then(function (html) {
var elem = page.querySelector('#upcomingRecordings'); var elem = context.querySelector('#upcomingRecordings');
if (html) { if (html) {
elem.classList.remove('hide'); elem.classList.remove('hide');
} else { } else {
elem.classList.add('hide'); elem.classList.add('hide');
} }
elem.querySelector('.recordingItems').innerHTML = html; elem.querySelector('.recordingItems').innerHTML = html;
ImageLoader.lazyChildren(elem); ImageLoader.lazyChildren(elem);
$(elem).createCardMenus(); $(elem).createCardMenus();
}); });
} }
function renderUpcomingRecordings(page) { function renderUpcomingRecordings(context) {
ApiClient.getLiveTvTimers().then(function (result) { ApiClient.getLiveTvTimers().then(function (result) {
renderTimers(page, result.Items); renderTimers(context, result.Items);
}); });
} }
function reload(page) { function reload(context) {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
renderUpcomingRecordings(page); renderUpcomingRecordings(context);
renderActiveRecordings(page); renderActiveRecordings(context);
renderLatestRecordings(page); renderLatestRecordings(context);
ApiClient.getLiveTvRecordingGroups({ ApiClient.getLiveTvRecordingGroups({
userId: Dashboard.getCurrentUserId() userId: Dashboard.getCurrentUserId()
}).then(function (result) { }).then(function (result) {
require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () { require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () {
renderRecordingGroups(page, result.Items); renderRecordingGroups(context, result.Items);
}); });
}); });
} }
window.LiveTvPage.initRecordingsTab = function (page, tabContent) { return function (view, params, tabContent) {
tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () { var self = this;
reload(tabContent); tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () {
}); reload(tabContent);
}; });
window.LiveTvPage.renderRecordingsTab = function (page, tabContent) { self.renderTab = function () {
reload(tabContent);
reload(tabContent); };
}; };
}); });

240
dashboard-ui/scripts/livetvseriestimers.js
View file

@ -1,119 +1,123 @@
define(['datetime', 'jQuery', 'paper-icon-button-light'], function (datetime, $) { define(['datetime', 'jQuery', 'paper-icon-button-light'], function (datetime, $) {
var query = { var query = {
SortBy: "SortName", SortBy: "SortName",
SortOrder: "Ascending" SortOrder: "Ascending"
}; };
function deleteSeriesTimer(page, id) { function deleteSeriesTimer(context, id) {
require(['confirm'], function (confirm) { require(['confirm'], function (confirm) {
confirm(Globalize.translate('MessageConfirmSeriesCancellation'), Globalize.translate('HeaderConfirmSeriesCancellation')).then(function () { confirm(Globalize.translate('MessageConfirmSeriesCancellation'), Globalize.translate('HeaderConfirmSeriesCancellation')).then(function () {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
ApiClient.cancelLiveTvSeriesTimer(id).then(function () { ApiClient.cancelLiveTvSeriesTimer(id).then(function () {
require(['toast'], function (toast) { require(['toast'], function (toast) {
toast(Globalize.translate('MessageSeriesCancelled')); toast(Globalize.translate('MessageSeriesCancelled'));
}); });
reload(page); reload(context);
}); });
}); });
}); });
} }
function renderTimers(page, timers) { function renderTimers(context, timers) {
var html = ''; var html = '';
if (timers.length) { if (timers.length) {
html += '<div class="paperList">'; html += '<div class="paperList">';
} }
for (var i = 0, length = timers.length; i < length; i++) { for (var i = 0, length = timers.length; i < length; i++) {
var timer = timers[i]; var timer = timers[i];
html += '<paper-icon-item>'; html += '<paper-icon-item>';
html += '<paper-fab mini icon="live-tv" item-icon></paper-fab>'; html += '<paper-fab mini icon="live-tv" item-icon></paper-fab>';
html += '<paper-item-body three-line>'; html += '<paper-item-body three-line>';
html += '<a class="clearLink" href="livetvseriestimer.html?id=' + timer.Id + '">'; html += '<a class="clearLink" href="livetvseriestimer.html?id=' + timer.Id + '">';
html += '<div>'; html += '<div>';
html += timer.Name; html += timer.Name;
html += '</div>'; html += '</div>';
html += '<div secondary>'; html += '<div secondary>';
if (timer.DayPattern) { if (timer.DayPattern) {
html += timer.DayPattern; html += timer.DayPattern;
} }
else { else {
var days = timer.Days || []; var days = timer.Days || [];
html += days.join(', '); html += days.join(', ');
} }
if (timer.RecordAnyTime) { if (timer.RecordAnyTime) {
html += ' - ' + Globalize.translate('LabelAnytime'); html += ' - ' + Globalize.translate('LabelAnytime');
} else { } else {
html += ' - ' + datetime.getDisplayTime(timer.StartDate); html += ' - ' + datetime.getDisplayTime(timer.StartDate);
} }
html += '</div>'; html += '</div>';
html += '<div secondary>'; html += '<div secondary>';
if (timer.RecordAnyChannel) { if (timer.RecordAnyChannel) {
html += Globalize.translate('LabelAllChannels'); html += Globalize.translate('LabelAllChannels');
} }
else if (timer.ChannelId) { else if (timer.ChannelId) {
html += timer.ChannelName; html += timer.ChannelName;
} }
html += '</div>'; html += '</div>';
html += '</a>'; html += '</a>';
html += '</paper-item-body>'; html += '</paper-item-body>';
html += '<button type="button" is="paper-icon-button-light" data-seriestimerid="' + timer.Id + '" title="' + Globalize.translate('ButtonCancelSeries') + '" class="btnCancelSeries"><iron-icon icon="cancel"></iron-icon></button>'; html += '<button type="button" is="paper-icon-button-light" data-seriestimerid="' + timer.Id + '" title="' + Globalize.translate('ButtonCancelSeries') + '" class="btnCancelSeries"><iron-icon icon="cancel"></iron-icon></button>';
html += '</paper-icon-item>'; html += '</paper-icon-item>';
} }
if (timers.length) { if (timers.length) {
html += '</div>'; html += '</div>';
} }
var elem = $('#items', page).html(html); var elem = $('#items', context).html(html);
$('.btnCancelSeries', elem).on('click', function () { $('.btnCancelSeries', elem).on('click', function () {
deleteSeriesTimer(page, this.getAttribute('data-seriestimerid')); deleteSeriesTimer(context, this.getAttribute('data-seriestimerid'));
}); });
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
} }
function reload(page) { function reload(context) {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
ApiClient.getLiveTvSeriesTimers(query).then(function (result) { ApiClient.getLiveTvSeriesTimers(query).then(function (result) {
require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () { require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () {
renderTimers(page, result.Items); renderTimers(context, result.Items);
}); });
}); });
} }
window.LiveTvPage.renderSeriesTimersTab = function (page, tabContent) { return function (view, params, tabContent) {
reload(tabContent); var self = this;
}; self.renderTab = function () {
reload(tabContent);
};
};
}); });

156
dashboard-ui/scripts/livetvsuggested.js
View file

@ -125,106 +125,110 @@
ImageLoader.lazyChildren(elem); ImageLoader.lazyChildren(elem);
} }
function initSuggestedTab(page, tabContent) { return function (view, params) {
if (enableScrollX()) { var self = this;
$('.itemsContainer', tabContent).addClass('hiddenScrollX').createCardMenus();
} else {
$('.itemsContainer', tabContent).removeClass('hiddenScrollX').createCardMenus();
}
}
function renderSuggestedTab(page, tabContent) { self.initTab = function () {
reload(tabContent); var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
} if (enableScrollX()) {
$('.itemsContainer', tabContent).addClass('hiddenScrollX').createCardMenus();
} else {
$('.itemsContainer', tabContent).removeClass('hiddenScrollX').createCardMenus();
}
};
function loadTab(page, index) { self.renderTab = function () {
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
reload(tabContent);
};
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']'); var tabControllers = [];
var depends = []; var renderedTabs = [];
var scope = 'LiveTvPage';
var renderMethod = '';
var initMethod = '';
var viewMenuBar = document.querySelector('.viewMenuBar'); function loadTab(page, index) {
switch (index) { var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var depends = [];
case 0: switch (index) {
renderMethod = 'renderSuggestedTab';
initMethod = 'initSuggestedTab';
break;
case 1:
depends.push('registrationservices');
depends.push('scripts/livetvguide');
renderMethod = 'renderGuideTab';
initMethod = 'initGuideTab';
break;
case 2:
depends.push('scripts/livetvchannels');
depends.push('paper-icon-item');
depends.push('paper-item-body');
renderMethod = 'renderChannelsTab';
break;
case 3:
depends.push('scripts/livetvrecordings');
initMethod = 'initRecordingsTab';
renderMethod = 'renderRecordingsTab';
break;
case 4:
depends.push('scripts/livetvseriestimers');
renderMethod = 'renderSeriesTimersTab';
break;
default:
break;
}
require(depends, function () { case 0:
break;
if (initMethod && !tabContent.initComplete) { case 1:
depends.push('scripts/livetvguide');
window[scope][initMethod](page, tabContent); break;
tabContent.initComplete = true; case 2:
depends.push('scripts/livetvchannels');
depends.push('paper-icon-item');
depends.push('paper-item-body');
break;
case 3:
depends.push('scripts/livetvrecordings');
break;
case 4:
depends.push('scripts/livetvseriestimers');
break;
default:
break;
} }
window[scope][renderMethod](page, tabContent); require(depends, function (controllerFactory) {
}); if (index == 0) {
} self.tabContent = tabContent;
}
var controller = tabControllers[index];
if (!controller) {
controller = index ? new controllerFactory(view, params, tabContent) : self;
tabControllers[index] = controller;
pageIdOn('pageinit', "liveTvSuggestedPage", function () { if (controller.initTab) {
controller.initTab();
}
}
var page = this; if (renderedTabs.indexOf(index) == -1) {
renderedTabs.push(index);
controller.renderTab();
}
});
}
var mdlTabs = page.querySelector('.libraryViewNav'); var mdlTabs = view.querySelector('.libraryViewNav');
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs, page.querySelectorAll('.pageTabContent')); var baseUrl = 'tv.html';
var topParentId = params.topParentId;
if (topParentId) {
baseUrl += '?topParentId=' + topParentId;
}
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent'));
mdlTabs.addEventListener('tabchange', function (e) { mdlTabs.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex)); loadTab(view, parseInt(e.detail.selectedTabIndex));
}); });
});
pageIdOn('viewshow', "liveTvSuggestedPage", function () { view.addEventListener('viewshow', function (e) {
var page = this; // Needed on the guide tab
// Ideally this should be moved to the guide tab on show/hide
document.body.classList.add('autoScrollY');
});
// Needed on the guide tab view.addEventListener('viewbeforehide', function (e) {
// Ideally this should be moved to the guide tab on show/hide
document.body.classList.add('autoScrollY');
});
pageIdOn('viewbeforehide', "liveTvSuggestedPage", function () { document.body.classList.remove('autoScrollY');
});
var page = this; view.addEventListener('viewdestroy', function (e) {
document.body.classList.remove('autoScrollY'); tabControllers.forEach(function (t) {
}); if (t.destroy) {
t.destroy();
window.LiveTvPage = { }
renderSuggestedTab: renderSuggestedTab, });
initSuggestedTab: initSuggestedTab });
}; };
}); });

3
dashboard-ui/scripts/site.js
View file

@ -2613,7 +2613,8 @@ var AppInfo = {};
defineRoute({ defineRoute({
path: '/livetv.html', path: '/livetv.html',
dependencies: ['paper-button'], dependencies: ['paper-button', 'livetvcss', 'paper-checkbox'],
controller: 'scripts/livetvsuggested',
autoFocus: false autoFocus: false
}); });