mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
added live tv items page
This commit is contained in:
Luke Pulverenti
parent
e46774b7e9
commit
cd790906f9
5 changed files with 339 additions and 6 deletions
|
|
@ -1030,7 +1030,7 @@ progress {
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
.accentButton .fa:not(.notext) {
|
||||
.accentButton:not(.accentButtonRight) .fa:not(.notext) {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
|
|
@ -1042,6 +1042,10 @@ h1 + .accentButton {
|
|||
font-size: 13px;
|
||||
}
|
||||
|
||||
.accentButtonRight .fa:not(.notext) {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.dashboardFooter {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
|
|
|
|||
91
dashboard-ui/livetvitems.html
Normal file
91
dashboard-ui/livetvitems.html
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>${TitleMediaBrowser}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="liveTvItemsPage" data-role="page" class="page libraryPage liveTvPage" data-contextname="${HeaderLiveTv}">
|
||||
<div class="libraryViewNav">
|
||||
<a href="livetvsuggested.html" class="ui-btn-active">${TabSuggested}</a>
|
||||
<a href="livetvguide.html">${TabGuide}</a>
|
||||
<a href="livetvchannels.html">${TabChannels}</a>
|
||||
<a href="livetvrecordings.html">${TabRecordings}</a>
|
||||
<a href="livetvtimers.html">${TabScheduled}</a>
|
||||
<a href="livetvseriestimers.html">${TabSeries}</a>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<div class="viewSettings">
|
||||
<div class="listTopPaging"></div>
|
||||
</div>
|
||||
<div id="items" class="itemsContainer paddedItemsContainer"></div>
|
||||
</div>
|
||||
|
||||
<div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
|
||||
<form>
|
||||
|
||||
<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
|
||||
<a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
|
||||
</div>
|
||||
|
||||
<div class="tabView viewTab">
|
||||
<div>
|
||||
<label for="selectView">${LabelView}</label>
|
||||
<select id="selectView">
|
||||
<option value="Poster">${OptionPoster}</option>
|
||||
<option value="PosterCard">${OptionPosterCard}</option>
|
||||
</select>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="selectPageSize">${LabelPageSize}</label>
|
||||
<select id="selectPageSize"></select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="tabSort viewTab">
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>
|
||||
${HeaderSortBy}
|
||||
</legend>
|
||||
|
||||
<input class="radioSortBy defaultSort" type="radio" name="radioSortBy" id="radioStartDate" value="on" checked="checked" data-sortby="PremiereDate,SortName" data-mini="true">
|
||||
<label for="radioStartDate">${OptionStartDate}</label>
|
||||
|
||||
<input class="radioSortBy" type="radio" name="radioSortBy" id="radioSortName" value="off" checked="checked" data-sortby="SortName,PremiereDate" data-mini="true">
|
||||
<label for="radioSortName">${OptionNameSort}</label>
|
||||
|
||||
<input class="radioSortBy" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating,SortName" data-mini="true">
|
||||
<label for="radioCommunityRating">${OptionImdbRating}</label>
|
||||
|
||||
<input class="radioSortBy" type="radio" name="radioSortBy" id="radioCriticRating" value="off" data-sortby="CriticRating,SortName" data-mini="true">
|
||||
<label for="radioCriticRating">${OptionCriticRating}</label>
|
||||
|
||||
<input class="radioSortBy" type="radio" name="radioSortBy" id="radioContentRating" value="off" data-sortby="OfficialRating,SortName" data-mini="true">
|
||||
<label for="radioContentRating">${OptionParentalRating}</label>
|
||||
|
||||
<input class="radioSortBy" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate,SortName" data-mini="true">
|
||||
<label for="radioPremiereDate">${OptionReleaseDate}</label>
|
||||
|
||||
<input class="radioSortBy" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime,SortName" data-mini="true">
|
||||
<label for="radioRuntime">${OptionRuntime}</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>
|
||||
${HeaderSortOrder}
|
||||
</legend>
|
||||
|
||||
<input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
|
||||
<label for="radioAscending">${OptionAscending}</label>
|
||||
|
||||
<input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true">
|
||||
<label for="radioDescending">${OptionDescending}</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,10 +21,18 @@
|
|||
<br />
|
||||
</div>
|
||||
<div id="upcomingPrograms">
|
||||
<h1 class="listHeader">${HeaderUpcomingTV}</h1>
|
||||
<h1 class="listHeader">${HeaderUpcomingPrograms}</h1>
|
||||
<div class="upcomingProgramItems itemsContainer"></div>
|
||||
<br />
|
||||
</div>
|
||||
<div id="upcomingTvMovies">
|
||||
<h1 class="listHeader">${HeaderUpcomingMovies}</h1>
|
||||
<div class="upcomingTvMovieItems itemsContainer"></div>
|
||||
<div>
|
||||
<a data-role="button" href="livetvitems.html?type=movies" data-inline="true" data-mini="true">${ButtonMoreItems}</a>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
207
dashboard-ui/scripts/livetvitems.js
Normal file
207
dashboard-ui/scripts/livetvitems.js
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
(function ($, document) {
|
||||
|
||||
var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
|
||||
|
||||
var currentDate = new Date();
|
||||
currentDate.setHours(0, 0, 0, 0);
|
||||
|
||||
// The base query options
|
||||
var query = {
|
||||
UserId: Dashboard.getCurrentUserId(),
|
||||
SortBy: "PremiereDate,SortName",
|
||||
SortOrder: "Ascending",
|
||||
StartIndex: 0
|
||||
};
|
||||
|
||||
function getSavedQueryKey() {
|
||||
return 'livetvitems' + (query.ParentId || '');
|
||||
}
|
||||
|
||||
function updateFilterControls(page) {
|
||||
|
||||
// Reset form values using the last used query
|
||||
$('.radioSortBy', page).each(function () {
|
||||
|
||||
this.checked = (query.SortBy || '').toLowerCase() == this.getAttribute('data-sortby').toLowerCase();
|
||||
|
||||
}).checkboxradio('refresh');
|
||||
|
||||
$('.radioSortOrder', page).each(function () {
|
||||
|
||||
this.checked = (query.SortOrder || '').toLowerCase() == this.getAttribute('data-sortorder').toLowerCase();
|
||||
|
||||
}).checkboxradio('refresh');
|
||||
|
||||
$('#selectView', page).val(view).selectmenu('refresh');
|
||||
$('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
|
||||
$('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
|
||||
}
|
||||
|
||||
function reloadItems(page) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.getLiveTvPrograms(query).done(function (result) {
|
||||
|
||||
// Scroll back up so they can see the results from the beginning
|
||||
$(document).scrollTop(0);
|
||||
|
||||
var html = '';
|
||||
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
viewButton: true,
|
||||
showLimit: false,
|
||||
addSelectionButton: true
|
||||
});
|
||||
|
||||
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
||||
|
||||
updateFilterControls(page);
|
||||
var trigger = false;
|
||||
|
||||
if (view == "Poster") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
context: 'livetv',
|
||||
showTitle: false,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
overlayText: false
|
||||
});
|
||||
}
|
||||
else if (view == "PosterCard") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
context: 'livetv',
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
lazy: true,
|
||||
cardLayout: true
|
||||
});
|
||||
}
|
||||
|
||||
$('.itemsContainer', page).html(html).lazyChildren();
|
||||
|
||||
var elem = $('.itemsContainer', page).html(html).lazyChildren();
|
||||
|
||||
if (trigger) {
|
||||
$(elem).trigger('create');
|
||||
}
|
||||
|
||||
$(pagingHtml).appendTo(elem).trigger('create');
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
$('.btnPreviousPage', page).on('click', function () {
|
||||
query.StartIndex -= query.Limit;
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('pageinit', "#liveTvItemsPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
$('.radioSortBy', this).on('click', function () {
|
||||
query.StartIndex = 0;
|
||||
query.SortBy = this.getAttribute('data-sortby');
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
$('.radioSortOrder', this).on('click', function () {
|
||||
query.StartIndex = 0;
|
||||
query.SortOrder = this.getAttribute('data-sortorder');
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
$('#selectView', this).on('change', function () {
|
||||
|
||||
view = this.value;
|
||||
|
||||
reloadItems(page);
|
||||
|
||||
LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
|
||||
});
|
||||
|
||||
$('#radioBasicFilters', this).on('change', function () {
|
||||
|
||||
if (this.checked) {
|
||||
$('.basicFilters', page).show();
|
||||
$('.advancedFilters', page).hide();
|
||||
} else {
|
||||
$('.basicFilters', page).hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#radioAdvancedFilters', this).on('change', function () {
|
||||
|
||||
if (this.checked) {
|
||||
$('.advancedFilters', page).show();
|
||||
$('.basicFilters', page).hide();
|
||||
} else {
|
||||
$('.advancedFilters', page).hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('.itemsContainer', page).on('needsrefresh', function () {
|
||||
|
||||
reloadItems(page);
|
||||
|
||||
});
|
||||
|
||||
$('#selectPageSize', page).on('change', function () {
|
||||
query.Limit = parseInt(this.value);
|
||||
query.StartIndex = 0;
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
}).on('pagebeforeshow', "#liveTvItemsPage", function () {
|
||||
|
||||
query.ParentId = LibraryMenu.getTopParentId();
|
||||
|
||||
var page = this;
|
||||
var limit = LibraryBrowser.getDefaultPageSize();
|
||||
|
||||
// If the default page size has changed, the start index will have to be reset
|
||||
if (limit != query.Limit) {
|
||||
query.Limit = limit;
|
||||
query.StartIndex = 0;
|
||||
}
|
||||
|
||||
query.IsMovie = getParameterByName('type') == 'movies' ? true : null;
|
||||
|
||||
var viewkey = getSavedQueryKey();
|
||||
|
||||
LibraryBrowser.loadSavedQueryValues(viewkey, query);
|
||||
|
||||
QueryFilters.onPageShow(page, query);
|
||||
|
||||
LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
|
||||
|
||||
if (val) {
|
||||
$('#selectView', page).val(val).selectmenu('refresh').trigger('change');
|
||||
} else {
|
||||
reloadItems(page);
|
||||
}
|
||||
});
|
||||
|
||||
}).on('pageshow', "#liveTvItemsPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
updateFilterControls(page);
|
||||
});
|
||||
|
||||
})(jQuery, document);
|
||||
|
|
@ -8,14 +8,14 @@
|
|||
|
||||
userId: Dashboard.getCurrentUserId(),
|
||||
IsAiring: true,
|
||||
limit: 18
|
||||
limit: 16
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
var html = LibraryBrowser.getPosterViewHtml({
|
||||
|
||||
items: result.Items,
|
||||
shape: "square",
|
||||
shape: "auto",
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: true,
|
||||
|
|
@ -32,14 +32,15 @@
|
|||
userId: Dashboard.getCurrentUserId(),
|
||||
IsAiring: false,
|
||||
HasAired: false,
|
||||
limit: 18
|
||||
limit: 10,
|
||||
IsMovie: false
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
var html = LibraryBrowser.getPosterViewHtml({
|
||||
|
||||
items: result.Items,
|
||||
shape: "square",
|
||||
shape: "auto",
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: true,
|
||||
|
|
@ -50,6 +51,28 @@
|
|||
|
||||
$('.upcomingProgramItems', page).html(html).lazyChildren();
|
||||
});
|
||||
|
||||
ApiClient.getLiveTvRecommendedPrograms({
|
||||
|
||||
userId: Dashboard.getCurrentUserId(),
|
||||
IsAiring: false,
|
||||
HasAired: false,
|
||||
limit: 10,
|
||||
IsMovie: true
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
var html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "auto",
|
||||
showTitle: true,
|
||||
coverImage: true,
|
||||
overlayText: false,
|
||||
lazy: true
|
||||
});
|
||||
|
||||
$('.upcomingTvMovieItems', page).html(html).lazyChildren();
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('pagebeforeshow', "#liveTvSuggestedPage", function () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue