mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add new tab to series timer page
This commit is contained in:
Luke Pulverenti
parent
125a4af7a8
commit
6de0b196ba
7 changed files with 246 additions and 85 deletions
|
|
@ -296,6 +296,10 @@
|
|||
.guideChannelImage {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timerPageImageContainer {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
/* Account for hidden navigation */
|
||||
@media (max-width: 750px) {
|
||||
|
|
|
|||
|
|
@ -17,15 +17,15 @@
|
|||
<form class="encodingSettingsForm">
|
||||
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Transcoder Quality:</legend>
|
||||
<legend>Transcoding Quality:</legend>
|
||||
<input type="radio" name="radioEncodingQuality" class="radioEncodingQuality" id="radioAuto" value="Auto">
|
||||
<label for="radioAuto">Auto<br /><span style="font-weight:normal;">The transcoder will decide quality</span></label>
|
||||
<label for="radioAuto">Auto<br /><span style="font-weight:normal;">The server will decide quality and speed</span></label>
|
||||
<input type="radio" name="radioEncodingQuality" class="radioEncodingQuality" id="radioHighSpeed" value="HighSpeed">
|
||||
<label for="radioHighSpeed">Perfer higher speed encoding<br /><span style="font-weight:normal;">Lower quality, but faster transcodes</span></label>
|
||||
<label for="radioHighSpeed">Perfer higher speed<br /><span style="font-weight:normal;">Lower quality, but faster encoding</span></label>
|
||||
<input type="radio" name="radioEncodingQuality" class="radioEncodingQuality" id="radioHighQuality" value="HighQuality">
|
||||
<label for="radioHighQuality">Prefer higher quality encoding<br /><span style="font-weight:normal;">Higher quality, but slower transcodes</span></label>
|
||||
<label for="radioHighQuality">Prefer higher quality<br /><span style="font-weight:normal;">Higher quality, but slower encoding</span></label>
|
||||
<input type="radio" name="radioEncodingQuality" class="radioEncodingQuality" id="radioMaxQuality" value="MaxQuality">
|
||||
<label for="radioMaxQuality">Perfer max quality encoding<br /><span style="font-weight:normal;">Best quality with slower transcodes and high CPU usage</span></label>
|
||||
<label for="radioMaxQuality">Perfer max quality<br /><span style="font-weight:normal;">Best quality with slower encoding and high CPU usage</span></label>
|
||||
</fieldset>
|
||||
|
||||
<br />
|
||||
|
|
|
|||
|
|
@ -14,15 +14,24 @@
|
|||
<a href="livetvseriestimers.html" class="ui-btn-active">Series</a>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<form class="liveTvSeriesTimerForm" style="margin: 0 auto;">
|
||||
<form class="liveTvSeriesTimerForm" style="margin: 0 auto; max-width: 720px;">
|
||||
<p><span class="itemName inlineItemName"></span></p>
|
||||
|
||||
<p class="channel" style="margin-top: 2em;"></p>
|
||||
<p class="time"></p>
|
||||
<p class="overview"></p>
|
||||
|
||||
<br />
|
||||
|
||||
<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="seriesTimerTabs">
|
||||
<input type="radio" name="radioSeriesTimerTab" class="radioSeriesTimerTab" id="radioSettings" value="settings">
|
||||
<label for="radioSettings">Settings</label>
|
||||
<input type="radio" name="radioSeriesTimerTab" class="radioSeriesTimerTab" id="radioRecordings" value="recordings">
|
||||
<label for="radioRecordings">Recordings</label>
|
||||
<input type="radio" name="radioSeriesTimerTab" class="radioSeriesTimerTab" id="radioScheduled" value="schedule">
|
||||
<label for="radioScheduled">Schedule</label>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div class="settingsTab tab">
|
||||
<ul data-role="listview" class="ulForm">
|
||||
<li>
|
||||
<h3>Days</h3>
|
||||
|
|
@ -99,6 +108,9 @@
|
|||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recordingsTab tab"></div>
|
||||
<div class="scheduleTab tab"></div>
|
||||
</form>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@
|
|||
<div data-role="content">
|
||||
|
||||
<div class="readOnlyContent" style="margin: 0 auto;">
|
||||
<div>
|
||||
<div style="display: none; vertical-align: top; margin-right: 1em; padding-top: 1em;" class="timerPageImageContainer">
|
||||
</div>
|
||||
<div style="display: inline-block; vertical-align: middle;">
|
||||
<p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>
|
||||
<p class="itemEpisodeName"></p>
|
||||
<p class="itemMiscInfo miscTvProgramInfo"></p>
|
||||
|
|
@ -23,6 +27,8 @@
|
|||
<span class="itemCommunityRating"></span>
|
||||
</p>
|
||||
<p class="itemGenres"></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="itemOverview"></p>
|
||||
|
||||
<p style="margin-top: 2em;">
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@
|
|||
var currentDate;
|
||||
var channelsPromise;
|
||||
|
||||
var guideInfoPromise;
|
||||
|
||||
function normalizeDateToTimeslot(date) {
|
||||
|
||||
var minutesOffset = date.getMinutes() - cellCurationMinutes;
|
||||
|
|
|
|||
|
|
@ -2,12 +2,30 @@
|
|||
|
||||
var currentItem;
|
||||
|
||||
function deleteTimer(page, id) {
|
||||
|
||||
Dashboard.confirm("Are you sure you wish to cancel this recording?", "Confirm Recording Cancellation", function (result) {
|
||||
|
||||
if (result) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.cancelLiveTvTimer(id).done(function () {
|
||||
|
||||
Dashboard.alert('Recording cancelled.');
|
||||
|
||||
reload(page);
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function renderTimer(page, item) {
|
||||
|
||||
currentItem = item;
|
||||
|
||||
$('.itemName', page).html(item.Name);
|
||||
$('.overview', page).html(item.Overview || '');
|
||||
|
||||
$('#txtPrePaddingSeconds', page).val(item.PrePaddingSeconds / 60);
|
||||
$('#txtPostPaddingSeconds', page).val(item.PostPaddingSeconds / 60);
|
||||
|
|
@ -99,6 +117,78 @@
|
|||
|
||||
}
|
||||
|
||||
function renderRecordings(page, result) {
|
||||
|
||||
$('.recordingsTab', page).html(LibraryBrowser.getPosterViewHtml({
|
||||
|
||||
items: result.Items,
|
||||
shape: "smallBackdrop",
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: true,
|
||||
coverImage: true
|
||||
|
||||
}));
|
||||
}
|
||||
|
||||
function renderSchedule(page, result) {
|
||||
|
||||
var timers = result.Items;
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
|
||||
|
||||
for (var i = 0, length = timers.length; i < length; i++) {
|
||||
|
||||
var timer = timers[i];
|
||||
|
||||
var programInfo = timer.ProgramInfo || {};
|
||||
|
||||
html += '<li><a href="livetvtimer.html?id=' + timer.Id + '">';
|
||||
|
||||
html += '<h3>';
|
||||
html += (programInfo.EpisodeTitle || timer.Name);
|
||||
html += '</h3>';
|
||||
|
||||
var startDate = timer.StartDate;
|
||||
|
||||
try {
|
||||
|
||||
startDate = parseISO8601Date(startDate, { toLocal: true });
|
||||
|
||||
} catch (err) {
|
||||
|
||||
}
|
||||
|
||||
html += '<p>' + startDate.toLocaleDateString() + '</p>';
|
||||
|
||||
html += '<p>';
|
||||
html += LiveTvHelpers.getDisplayTime(timer.StartDate);
|
||||
|
||||
if (timer.ChannelName) {
|
||||
html += ' on ' + timer.ChannelName;
|
||||
}
|
||||
html += '</p>';
|
||||
|
||||
html += '</a>';
|
||||
|
||||
html += '<a data-timerid="' + timer.Id + '" href="#" title="Cancel Recording" class="btnCancelTimer">Cancel Recording</a>';
|
||||
|
||||
html += '</li>';
|
||||
}
|
||||
|
||||
html += '</ul>';
|
||||
|
||||
var elem = $('.scheduleTab', page).html(html).trigger('create');
|
||||
|
||||
$('.btnCancelTimer', elem).on('click', function () {
|
||||
|
||||
deleteTimer(page, this.getAttribute('data-timerid'));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function reload(page) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
|
@ -110,12 +200,47 @@
|
|||
renderTimer(page, result);
|
||||
|
||||
});
|
||||
|
||||
apiClient.getLiveTvRecordings({
|
||||
|
||||
userId: Dashboard.getCurrentUserId(),
|
||||
seriesTimerId: id
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
renderRecordings(page, result);
|
||||
|
||||
});
|
||||
|
||||
apiClient.getLiveTvTimers({
|
||||
|
||||
seriesTimerId: id
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
renderSchedule(page, result);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('pagebeforeshow', "#liveTvSeriesTimerPage", function () {
|
||||
$(document).on('pageinit', "#liveTvSeriesTimerPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
$('.radioSeriesTimerTab', page).on('change', function () {
|
||||
|
||||
$('.tab', page).hide();
|
||||
$('.' + this.value + 'Tab', page).show();
|
||||
|
||||
});
|
||||
|
||||
}).on('pagebeforeshow', "#liveTvSeriesTimerPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
$('.radioSeriesTimerTab', page).checked(false).checkboxradio('refresh');
|
||||
$('#radioSettings', page).checked(true).checkboxradio('refresh').trigger('change');
|
||||
|
||||
reload(page);
|
||||
|
||||
}).on('pagehide', "#liveTvSeriesTimerPage", function () {
|
||||
|
|
|
|||
|
|
@ -41,6 +41,22 @@
|
|||
LibraryBrowser.renderGenres($('.itemGenres', page), programInfo, context);
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), programInfo);
|
||||
|
||||
if (programInfo.ImageTags && programInfo.ImageTags.Primary) {
|
||||
|
||||
var imgUrl = ApiClient.getUrl("LiveTV/Programs/" + programInfo.Id + "/Images/Primary", {
|
||||
maxwidth: 200,
|
||||
maxheight: 200,
|
||||
tag: programInfo.ImageTags.Primary,
|
||||
type: "Primary"
|
||||
});
|
||||
|
||||
$('.timerPageImageContainer', page).css("display", "inline-block")
|
||||
.html('<img src="' + imgUrl + '" />');
|
||||
|
||||
} else {
|
||||
$('.timerPageImageContainer', page).hide();
|
||||
}
|
||||
|
||||
$('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
|
||||
|
||||
LiveTvHelpers.renderMiscProgramInfo($('.miscTvProgramInfo', page), programInfo);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue