mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update live tv filters
This commit is contained in:
Luke Pulverenti
parent
71cc832d1c
commit
6fb474ce5f
6 changed files with 134 additions and 121 deletions
|
|
@ -1,15 +1,25 @@
|
|||
define(['paperdialoghelper', 'events', 'paper-checkbox'], function (paperDialogHelper, events) {
|
||||
|
||||
function updateFilterControls(context, query) {
|
||||
function updateFilterControls(context, options) {
|
||||
|
||||
$('.chkStandardFilter', context).each(function () {
|
||||
var query = options.query;
|
||||
|
||||
var filters = "," + (query.Filters || "");
|
||||
var filterName = this.getAttribute('data-filter');
|
||||
if (options.mode == 'livetvchannels') {
|
||||
|
||||
this.checked = filters.indexOf(',' + filterName) != -1;
|
||||
$('.chkFavorite', context).checked(query.IsFavorite == true);
|
||||
$('.chkLikes', context).checked(query.IsLiked == true);
|
||||
$('.chkDislikes', context).checked(query.IsDisliked == true);
|
||||
|
||||
});
|
||||
} else {
|
||||
$('.chkStandardFilter', context).each(function () {
|
||||
|
||||
var filters = "," + (query.Filters || "");
|
||||
var filterName = this.getAttribute('data-filter');
|
||||
|
||||
this.checked = filters.indexOf(',' + filterName) != -1;
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function triggerChange(instance) {
|
||||
|
|
@ -17,23 +27,67 @@
|
|||
events.trigger(instance, 'filterchange');
|
||||
}
|
||||
|
||||
function bindEvents(instance, context, query) {
|
||||
|
||||
$('.chkStandardFilter', context).on('change', function () {
|
||||
function bindEvents(instance, context, options) {
|
||||
|
||||
var filterName = this.getAttribute('data-filter');
|
||||
var filters = query.Filters || "";
|
||||
var query = options.query;
|
||||
|
||||
filters = (',' + filters).replace(',' + filterName, '').substring(1);
|
||||
if (options.mode == 'livetvchannels') {
|
||||
|
||||
if (this.checked) {
|
||||
filters = filters ? (filters + ',' + filterName) : filterName;
|
||||
}
|
||||
$('.chkFavorite', context).on('change', function () {
|
||||
query.StartIndex = 0;
|
||||
query.IsFavorite = this.checked ? true : null;
|
||||
triggerChange(instance);
|
||||
});
|
||||
|
||||
query.StartIndex = 0;
|
||||
query.Filters = filters;
|
||||
triggerChange(instance);
|
||||
});
|
||||
|
||||
$('.chkLikes', context).on('change', function () {
|
||||
|
||||
query.StartIndex = 0;
|
||||
query.IsLiked = this.checked ? true : null;
|
||||
triggerChange(instance);
|
||||
});
|
||||
|
||||
$('.chkDislikes', context).on('change', function () {
|
||||
|
||||
query.StartIndex = 0;
|
||||
query.IsDisliked = this.checked ? true : null;
|
||||
triggerChange(instance);
|
||||
});
|
||||
|
||||
} else {
|
||||
$('.chkStandardFilter', context).on('change', function () {
|
||||
|
||||
var filterName = this.getAttribute('data-filter');
|
||||
var filters = query.Filters || "";
|
||||
|
||||
filters = (',' + filters).replace(',' + filterName, '').substring(1);
|
||||
|
||||
if (this.checked) {
|
||||
filters = filters ? (filters + ',' + filterName) : filterName;
|
||||
}
|
||||
|
||||
query.StartIndex = 0;
|
||||
query.Filters = filters;
|
||||
triggerChange(instance);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setVisibility(context, options) {
|
||||
|
||||
if (options.mode == 'livetvchannels') {
|
||||
hideByClass(context, 'nolivetvchannels');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function hideByClass(context, className) {
|
||||
|
||||
var elems = context.querySelectorAll('.' + className);
|
||||
|
||||
for (var i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].classList.add('hide');
|
||||
}
|
||||
}
|
||||
|
||||
return function (options) {
|
||||
|
|
@ -57,8 +111,8 @@
|
|||
exitAnimationDuration: 200
|
||||
});
|
||||
|
||||
dlg.classList.add('ui-body-b');
|
||||
dlg.classList.add('background-theme-b');
|
||||
dlg.classList.add('ui-body-a');
|
||||
dlg.classList.add('background-theme-a');
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
|
|
@ -67,14 +121,15 @@
|
|||
html += Globalize.translateDocument(template);
|
||||
|
||||
dlg.innerHTML = html;
|
||||
setVisibility(dlg, options);
|
||||
document.body.appendChild(dlg);
|
||||
|
||||
paperDialogHelper.open(dlg);
|
||||
|
||||
dlg.addEventListener('iron-overlay-closed', resolve);
|
||||
|
||||
updateFilterControls(dlg, options.query);
|
||||
bindEvents(self, dlg, options.query);
|
||||
updateFilterControls(dlg, options);
|
||||
bindEvents(self, dlg, options);
|
||||
}
|
||||
|
||||
xhr.send();
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<div style="margin: 0;padding:1.5em 2em;">
|
||||
<h1>
|
||||
<h2 style="margin-bottom: .5em;">
|
||||
${HeaderFilters}
|
||||
</h1>
|
||||
|
||||
</h2>
|
||||
<div class="paperCheckboxList">
|
||||
<paper-checkbox class="chkStandardFilter" data-filter="IsPlayed">${OptionPlayed}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter" data-filter="IsUnPlayed">${OptionUnplayed}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter" data-filter="IsResumable">${OptionResumable}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter nolivetvchannels" data-filter="IsPlayed">${OptionPlayed}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter nolivetvchannels" data-filter="IsUnPlayed">${OptionUnplayed}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter nolivetvchannels" data-filter="IsResumable">${OptionResumable}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter chkFavorite" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter chkLikes" data-filter="Likes">${OptionLikes}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter chkDislikes" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="jqmpanel,scripts/livetvsuggested,livetvcss,scripts/livetvcomponents,paper-tabs,neon-animated-pages,paper-checkbox">
|
||||
<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-tabs,neon-animated-pages,paper-checkbox">
|
||||
|
||||
<div class="libraryViewNav libraryViewNavWithMinHeight">
|
||||
<paper-tabs hidescrollbuttons noink>
|
||||
|
|
@ -34,31 +34,31 @@
|
|||
<div class="activeProgramItems itemsContainer noautoinit"></div>
|
||||
<br />
|
||||
</div>
|
||||
<div id="upcomingPrograms" class="homePageSection" style="margin-top:1em;">
|
||||
<div id="upcomingPrograms" class="homePageSection" style="margin-top: 1em;">
|
||||
<h1 class="listHeader">${HeaderUpcomingPrograms}</h1>
|
||||
<div class="upcomingProgramItems itemsContainer noautoinit"></div>
|
||||
<br />
|
||||
</div>
|
||||
<div id="upcomingTvMovies" class="homePageSection" style="margin-top:1em;">
|
||||
<div id="upcomingTvMovies" class="homePageSection" style="margin-top: 1em;">
|
||||
<div>
|
||||
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderUpcomingMovies}</h1>
|
||||
<a href="livetvitems.html?type=movies" class="clearLink" style="margin-left:1em;vertical-align:middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
|
||||
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingMovies}</h1>
|
||||
<a href="livetvitems.html?type=movies" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
|
||||
</div>
|
||||
<div class="upcomingTvMovieItems itemsContainer noautoinit"></div>
|
||||
<br />
|
||||
</div>
|
||||
<div id="upcomingSports" class="homePageSection" style="margin-top:1em;">
|
||||
<div id="upcomingSports" class="homePageSection" style="margin-top: 1em;">
|
||||
<div>
|
||||
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderUpcomingSports}</h1>
|
||||
<a href="livetvitems.html?type=sports" class="clearLink" style="margin-left:1em;vertical-align:middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
|
||||
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingSports}</h1>
|
||||
<a href="livetvitems.html?type=sports" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
|
||||
</div>
|
||||
<div class="upcomingSportsItems itemsContainer noautoinit"></div>
|
||||
<br />
|
||||
</div>
|
||||
<div id="upcomingKids" class="homePageSection" style="margin-top:1em;">
|
||||
<div id="upcomingKids" class="homePageSection" style="margin-top: 1em;">
|
||||
<div>
|
||||
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderUpcomingForKids}</h1>
|
||||
<a href="livetvitems.html?type=kids" class="clearLink" style="margin-left:1em;vertical-align:middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
|
||||
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingForKids}</h1>
|
||||
<a href="livetvitems.html?type=kids" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
|
||||
</div>
|
||||
<div class="upcomingKidsItems itemsContainer noautoinit"></div>
|
||||
<br />
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</div>
|
||||
</neon-animatable>
|
||||
<neon-animatable>
|
||||
<div class="pageTabContent guideTabContent" style="width:auto;" data-index="1">
|
||||
<div class="pageTabContent guideTabContent" style="width: auto;" data-index="1">
|
||||
</div>
|
||||
</neon-animatable>
|
||||
<neon-animatable>
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
<div class="listTopPaging">
|
||||
</div>
|
||||
</div>
|
||||
<div id="items" class="itemsContainer" style="max-width:800px;margin: 0 auto;"></div>
|
||||
<div id="items" class="itemsContainer" style="max-width: 800px; margin: 0 auto;"></div>
|
||||
</div>
|
||||
</neon-animatable>
|
||||
<neon-animatable>
|
||||
|
|
@ -87,14 +87,16 @@
|
|||
</div>
|
||||
<div id="latestRecordings" class="homePageSection hide">
|
||||
<div>
|
||||
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestRecordings}</h1>
|
||||
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestRecordings}</h1>
|
||||
<paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
|
||||
</div>
|
||||
<div class="recordingItems itemsContainer"></div>
|
||||
<br />
|
||||
</div>
|
||||
<div id="recordingGroups" style="display: none;" class="homePageSection">
|
||||
<h1 class="listHeader"><a href="livetvrecordinglist.html">${HeaderAllRecordings}<img src="css/images/rightarrow.png" class="headerArrowImage" /></a></h1>
|
||||
<h1 class="listHeader">
|
||||
<a href="livetvrecordinglist.html">${HeaderAllRecordings}<img src="css/images/rightarrow.png" class="headerArrowImage" /></a>
|
||||
</h1>
|
||||
<div id="recordingGroupItems"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -114,20 +116,6 @@
|
|||
</neon-animated-pages>
|
||||
</div>
|
||||
|
||||
<div data-role="panel" class="viewPanel channelViewPanel hide" data-theme="b" data-position="right" data-display="overlay" data-position-fixed="true">
|
||||
<div class="ui-panel-inner">
|
||||
<form>
|
||||
<div>
|
||||
<h1>${HeaderFilters}</h1>
|
||||
<div class="paperCheckboxList">
|
||||
<paper-checkbox class="chkStandardFilter chkFavorite" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter chkLikes" data-filter="Likes">${OptionLikes}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter chkDislikes" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2910,7 +2910,7 @@
|
|||
|
||||
var option = options.items[i];
|
||||
|
||||
html += '<paper-radio-button class="menuSortBy block" data-id="' + option.id + '" name="' + option.id.replace(',', '_') + '">' + option.name + '</paper-radio-button>';
|
||||
html += '<paper-radio-button class="menuSortBy" style="display:block;" data-id="' + option.id + '" name="' + option.id.replace(',', '_') + '">' + option.name + '</paper-radio-button>';
|
||||
}
|
||||
html += '</paper-radio-group>';
|
||||
|
||||
|
|
@ -2918,8 +2918,8 @@
|
|||
html += Globalize.translate('HeaderSortOrder');
|
||||
html += '</h2>';
|
||||
html += '<paper-radio-group class="groupSortOrder" selected="' + (options.query.SortOrder || 'Ascending') + '">';
|
||||
html += '<paper-radio-button name="Ascending" class="menuSortOrder block">' + Globalize.translate('OptionAscending') + '</paper-radio-button>';
|
||||
html += '<paper-radio-button name="Descending" class="menuSortOrder block">' + Globalize.translate('OptionDescending') + '</paper-radio-button>';
|
||||
html += '<paper-radio-button name="Ascending" style="display:block;" class="menuSortOrder block">' + Globalize.translate('OptionAscending') + '</paper-radio-button>';
|
||||
html += '<paper-radio-button name="Descending" style="display:block;" class="menuSortOrder block">' + Globalize.translate('OptionDescending') + '</paper-radio-button>';
|
||||
html += '</paper-radio-group>';
|
||||
html += '</div>';
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
});
|
||||
}
|
||||
|
||||
function renderChannels(page, viewPanel, result) {
|
||||
function renderChannels(page, result) {
|
||||
|
||||
var query = getQuery();
|
||||
|
||||
|
|
@ -46,16 +46,11 @@
|
|||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
viewButton: true,
|
||||
showLimit: false,
|
||||
viewPanelClass: 'channelViewPanel',
|
||||
updatePageSizeSetting: false,
|
||||
viewIcon: 'filter-list'
|
||||
|
||||
filterButton: true
|
||||
}));
|
||||
|
||||
updateFilterControls(viewPanel);
|
||||
|
||||
var html = getChannelsHtml(result.Items);
|
||||
|
||||
var elem = page.querySelector('#items');
|
||||
|
|
@ -64,18 +59,39 @@
|
|||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
reloadItems(page, viewPanel);
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
$('.btnPreviousPage', page).on('click', function () {
|
||||
query.StartIndex -= query.Limit;
|
||||
reloadItems(page, viewPanel);
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
$('.btnFilter', page).on('click', function () {
|
||||
showFilterMenu(page);
|
||||
});
|
||||
|
||||
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
||||
}
|
||||
|
||||
function reloadItems(page, viewPanel) {
|
||||
function showFilterMenu(page) {
|
||||
|
||||
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
|
||||
|
||||
var filterDialog = new filterDialogFactory({
|
||||
query: getQuery(),
|
||||
mode: 'livetvchannels'
|
||||
});
|
||||
|
||||
Events.on(filterDialog, 'filterchange', function () {
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
filterDialog.show();
|
||||
});
|
||||
}
|
||||
|
||||
function reloadItems(page) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
|
|
@ -85,7 +101,7 @@
|
|||
|
||||
ApiClient.getLiveTvChannels(query).then(function (result) {
|
||||
|
||||
renderChannels(page, viewPanel, result);
|
||||
renderChannels(page, result);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
|
|
@ -93,54 +109,10 @@
|
|||
});
|
||||
}
|
||||
|
||||
function updateFilterControls(page) {
|
||||
|
||||
var query = getQuery();
|
||||
$('.chkFavorite', page).checked(query.IsFavorite == true);
|
||||
$('.chkLikes', page).checked(query.IsLiked == true);
|
||||
$('.chkDislikes', page).checked(query.IsDisliked == true);
|
||||
}
|
||||
|
||||
window.LiveTvPage.initChannelsTab = function (page, tabContent) {
|
||||
|
||||
var viewPanel = page.querySelector('.channelViewPanel');
|
||||
|
||||
$('.chkFavorite', viewPanel).on('change', function () {
|
||||
|
||||
var query = getQuery();
|
||||
query.StartIndex = 0;
|
||||
query.IsFavorite = this.checked ? true : null;
|
||||
|
||||
reloadItems(tabContent, viewPanel);
|
||||
});
|
||||
|
||||
|
||||
$('.chkLikes', viewPanel).on('change', function () {
|
||||
|
||||
var query = getQuery();
|
||||
query.StartIndex = 0;
|
||||
query.IsLiked = this.checked ? true : null;
|
||||
|
||||
reloadItems(tabContent, viewPanel);
|
||||
});
|
||||
|
||||
$('.chkDislikes', viewPanel).on('change', function () {
|
||||
|
||||
var query = getQuery();
|
||||
query.StartIndex = 0;
|
||||
query.IsDisliked = this.checked ? true : null;
|
||||
|
||||
reloadItems(tabContent, viewPanel);
|
||||
});
|
||||
};
|
||||
|
||||
window.LiveTvPage.renderChannelsTab = function (page, tabContent) {
|
||||
|
||||
var viewPanel = page.querySelector('.channelViewPanel');
|
||||
|
||||
if (LibraryBrowser.needsRefresh(tabContent)) {
|
||||
reloadItems(tabContent, viewPanel);
|
||||
updateFilterControls(viewPanel);
|
||||
reloadItems(tabContent);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -162,7 +162,6 @@
|
|||
depends.push('paper-icon-item');
|
||||
depends.push('paper-item-body');
|
||||
renderMethod = 'renderChannelsTab';
|
||||
initMethod = 'initChannelsTab';
|
||||
break;
|
||||
case 3:
|
||||
depends.push('scripts/livetvrecordings');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue