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

add new tab to series timer page

Browse source
This commit is contained in:
Luke Pulverenti 2014-01-08 00:25:21 -05:00
parent 125a4af7a8
commit 6de0b196ba
7 changed files with 246 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

4
dashboard-ui/css/livetv.css
View file

@ -296,6 +296,10 @@
.guideChannelImage { .guideChannelImage {
display: none; display: none;
} }
.timerPageImageContainer {
display: none !important;
}
} }
/* Account for hidden navigation */ /* Account for hidden navigation */
@media (max-width: 750px) { @media (max-width: 750px) {

10
dashboard-ui/encodingsettings.html
View file

@ -17,15 +17,15 @@
<form class="encodingSettingsForm"> <form class="encodingSettingsForm">
<fieldset data-role="controlgroup"> <fieldset data-role="controlgroup">
<legend>Transcoder Quality:</legend> <legend>Transcoding Quality:</legend>
<input type="radio" name="radioEncodingQuality" class="radioEncodingQuality" id="radioAuto" value="Auto"> <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"> <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"> <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"> <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> </fieldset>
<br /> <br />

148
dashboard-ui/livetvseriestimer.html
View file

@ -14,91 +14,103 @@
<a href="livetvseriestimers.html" class="ui-btn-active">Series</a> <a href="livetvseriestimers.html" class="ui-btn-active">Series</a>
</div> </div>
<div data-role="content"> <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><span class="itemName inlineItemName"></span></p>
<p class="channel" style="margin-top: 2em;"></p> <p class="channel" style="margin-top: 2em;"></p>
<p class="time"></p> <p class="time"></p>
<p class="overview"></p>
<br /> <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>
<div data-role="controlgroup">
<ul data-role="listview" class="ulForm"> <input type="checkbox" data-mini="true" id="chkSunday" />
<li> <label for="chkSunday">Sunday</label>
<h3>Days</h3>
<div data-role="controlgroup">
<input type="checkbox" data-mini="true" id="chkSunday" /> <input type="checkbox" data-mini="true" id="chkMonday" />
<label for="chkSunday">Sunday</label> <label for="chkMonday">Monday</label>
<input type="checkbox" data-mini="true" id="chkMonday" /> <input type="checkbox" data-mini="true" id="chkTuesday" />
<label for="chkMonday">Monday</label> <label for="chkTuesday">Tuesday</label>
<input type="checkbox" data-mini="true" id="chkTuesday" /> <input type="checkbox" data-mini="true" id="chkWednesday" />
<label for="chkTuesday">Tuesday</label> <label for="chkWednesday">Wednesday</label>
<input type="checkbox" data-mini="true" id="chkWednesday" /> <input type="checkbox" data-mini="true" id="chkThursday" />
<label for="chkWednesday">Wednesday</label> <label for="chkThursday">Thursday</label>
<input type="checkbox" data-mini="true" id="chkThursday" /> <input type="checkbox" data-mini="true" id="chkFriday" />
<label for="chkThursday">Thursday</label> <label for="chkFriday">Friday</label>
<input type="checkbox" data-mini="true" id="chkFriday" /> <input type="checkbox" data-mini="true" id="chkSaturday" />
<label for="chkFriday">Friday</label> <label for="chkSaturday">Saturday</label>
</div>
<input type="checkbox" data-mini="true" id="chkSaturday" /> </li>
<label for="chkSaturday">Saturday</label> <li>
<label for="chkNewOnly">Record only new episodes</label>
<input type="checkbox" id="chkNewOnly" data-mini="true" />
</li>
<li>
<label for="chkAnyTime">Record program at any time</label>
<input type="checkbox" id="chkAnyTime" data-mini="true" />
</li>
<li>
<label for="chkAllChannels">Record program on all channels</label>
<input type="checkbox" id="chkAllChannels" data-mini="true" />
</li>
</ul>
<div data-role="collapsible" data-mini="true">
<h3>Pre/Post Padding</h3>
<div>
<br />
<ul data-role="listview" class="ulForm">
<li>
<label for="txtPrePaddingSeconds">Pre-padding minutes: </label>
<input type="number" id="txtPrePaddingSeconds" pattern="[0-9]*" required="required" min="0" max="10" step=".5" />
</li>
<li>
<input type="checkbox" data-mini="true" id="chkPrePaddingRequired" />
<label for="chkPrePaddingRequired">Pre-padding is required in order to record.</label>
</li>
<li>
<div style="height: .5em;"></div>
</li>
<li>
<label for="txtPostPaddingSeconds">Post-padding minutes: </label>
<input type="number" id="txtPostPaddingSeconds" pattern="[0-9]*" required="required" min="0" max="10" step=".5" />
</li>
<li>
<input type="checkbox" data-mini="true" id="chkPostPaddingRequired" />
<label for="chkPostPaddingRequired">Post-padding is required in order to record.</label>
</li>
</ul>
</div> </div>
</li> </div>
<li> <br />
<label for="chkNewOnly">Record only new episodes</label>
<input type="checkbox" id="chkNewOnly" data-mini="true" />
</li>
<li>
<label for="chkAnyTime">Record program at any time</label>
<input type="checkbox" id="chkAnyTime" data-mini="true" />
</li>
<li>
<label for="chkAllChannels">Record program on all channels</label>
<input type="checkbox" id="chkAllChannels" data-mini="true" />
</li>
</ul>
<div data-role="collapsible" data-mini="true">
<h3>Pre/Post Padding</h3>
<div> <div>
<br /> <button type="submit" data-theme="a" data-icon="check" data-mini="true">
<ul data-role="listview" class="ulForm"> Save
<li> </button>
<label for="txtPrePaddingSeconds">Pre-padding minutes: </label> <button type="button" onclick="history.back();" data-icon="delete" data-mini="true">
<input type="number" id="txtPrePaddingSeconds" pattern="[0-9]*" required="required" min="0" max="10" step=".5" /> Cancel
</li> </button>
<li>
<input type="checkbox" data-mini="true" id="chkPrePaddingRequired" />
<label for="chkPrePaddingRequired">Pre-padding is required in order to record.</label>
</li>
<li>
<div style="height: .5em;"></div>
</li>
<li>
<label for="txtPostPaddingSeconds">Post-padding minutes: </label>
<input type="number" id="txtPostPaddingSeconds" pattern="[0-9]*" required="required" min="0" max="10" step=".5" />
</li>
<li>
<input type="checkbox" data-mini="true" id="chkPostPaddingRequired" />
<label for="chkPostPaddingRequired">Post-padding is required in order to record.</label>
</li>
</ul>
</div> </div>
</div> </div>
<br /> <div class="recordingsTab tab"></div>
<div> <div class="scheduleTab tab"></div>
<button type="submit" data-theme="a" data-icon="check" data-mini="true">
Save
</button>
<button type="button" onclick="history.back();" data-icon="delete" data-mini="true">
Cancel
</button>
</div>
</form> </form>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">

20
dashboard-ui/livetvtimer.html
View file

@ -16,13 +16,19 @@
<div data-role="content"> <div data-role="content">
<div class="readOnlyContent" style="margin: 0 auto;"> <div class="readOnlyContent" style="margin: 0 auto;">
<p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p> <div>
<p class="itemEpisodeName"></p> <div style="display: none; vertical-align: top; margin-right: 1em; padding-top: 1em;" class="timerPageImageContainer">
<p class="itemMiscInfo miscTvProgramInfo"></p> </div>
<p> <div style="display: inline-block; vertical-align: middle;">
<span class="itemCommunityRating"></span> <p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>
</p> <p class="itemEpisodeName"></p>
<p class="itemGenres"></p> <p class="itemMiscInfo miscTvProgramInfo"></p>
<p>
<span class="itemCommunityRating"></span>
</p>
<p class="itemGenres"></p>
</div>
</div>
<p class="itemOverview"></p> <p class="itemOverview"></p>
<p style="margin-top: 2em;"> <p style="margin-top: 2em;">

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

@ -10,8 +10,6 @@
var currentDate; var currentDate;
var channelsPromise; var channelsPromise;
var guideInfoPromise;
function normalizeDateToTimeslot(date) { function normalizeDateToTimeslot(date) {
var minutesOffset = date.getMinutes() - cellCurationMinutes; var minutesOffset = date.getMinutes() - cellCurationMinutes;

129
dashboard-ui/scripts/livetvseriestimer.js
View file

@ -2,12 +2,30 @@
var currentItem; 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) { function renderTimer(page, item) {
currentItem = item; currentItem = item;
$('.itemName', page).html(item.Name); $('.itemName', page).html(item.Name);
$('.overview', page).html(item.Overview || '');
$('#txtPrePaddingSeconds', page).val(item.PrePaddingSeconds / 60); $('#txtPrePaddingSeconds', page).val(item.PrePaddingSeconds / 60);
$('#txtPostPaddingSeconds', page).val(item.PostPaddingSeconds / 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) { function reload(page) {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
@ -110,12 +200,47 @@
renderTimer(page, result); 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; 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); reload(page);
}).on('pagehide', "#liveTvSeriesTimerPage", function () { }).on('pagehide', "#liveTvSeriesTimerPage", function () {

16
dashboard-ui/scripts/livetvtimer.js
View file

@ -41,6 +41,22 @@
LibraryBrowser.renderGenres($('.itemGenres', page), programInfo, context); LibraryBrowser.renderGenres($('.itemGenres', page), programInfo, context);
LibraryBrowser.renderOverview($('.itemOverview', page), programInfo); 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)); $('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
LiveTvHelpers.renderMiscProgramInfo($('.miscTvProgramInfo', page), programInfo); LiveTvHelpers.renderMiscProgramInfo($('.miscTvProgramInfo', page), programInfo);