mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
display recording groups
This commit is contained in:
Luke Pulverenti
parent
6d15c55327
commit
04a52bcd6d
8 changed files with 112 additions and 54 deletions
11
ApiClient.js
11
ApiClient.js
|
|
@ -445,6 +445,17 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
|
|||
});
|
||||
};
|
||||
|
||||
self.getLiveTvRecordingGroups = function (options) {
|
||||
|
||||
var url = self.getUrl("LiveTv/Recordings/Groups", options || {});
|
||||
|
||||
return self.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
dataType: "json"
|
||||
});
|
||||
};
|
||||
|
||||
self.getLiveTvRecording = function (id, userId) {
|
||||
|
||||
if (!id) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* Now playing bar */
|
||||
.nowPlayingBar {
|
||||
padding: 6px 0 12px 0;
|
||||
padding: 6px 0 15px 0;
|
||||
border-top: 2px solid green;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -62,9 +62,11 @@
|
|||
overflow: hidden;
|
||||
text-wrap: none;
|
||||
white-space: nowrap;
|
||||
padding: 5px 5px 4px;
|
||||
padding: 5px 4px 4px;
|
||||
background-color: #222;
|
||||
text-shadow: none;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.posterItemTextOverlay {
|
||||
|
|
|
|||
|
|
@ -13,27 +13,9 @@
|
|||
<a href="livetvseriestimers.html">Series</a>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<div class="itemsContainer">
|
||||
|
||||
<br />
|
||||
<div class="detailTableContainer">
|
||||
<table id="table-column-toggle" class="detailTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="desktopColumn"></th>
|
||||
<th>Name</th>
|
||||
<th class="desktopColumn">Channel</th>
|
||||
<th>Date</th>
|
||||
<th>Start</th>
|
||||
<th class="tabletColumn">Length</th>
|
||||
<th class="tabletColumn">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="max-width: 700px; margin: 0 auto;">
|
||||
<h1 class="listHeader">Recording Groups</h1>
|
||||
<div id="items"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,9 @@
|
|||
<a href="livetvseriestimers.html">Series</a>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<br />
|
||||
<div id="items" class="itemsContainer"></div>
|
||||
<div style="max-width: 700px; margin: 0 auto;">
|
||||
<div id="items"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -19,31 +19,76 @@
|
|||
});
|
||||
}
|
||||
|
||||
function renderRecordings(page, recordings) {
|
||||
function loadRecordings(page, elem, groupId) {
|
||||
|
||||
var contentElem = $('.recordingList', elem).html('<div class="circle"></div><div class="circle1"></div>');
|
||||
|
||||
apiClient.getLiveTvRecordings({
|
||||
|
||||
userId: Dashboard.getCurrentUserId(),
|
||||
groupId: groupId
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
renderRecordings(page, contentElem, result.Items);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function getRecordingGroupHtml(group) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<div data-role="collapsible" class="recordingGroupCollapsible" data-recordinggroupid="' + group.Id + '" style="margin-top:1em" data-mini="true">';
|
||||
|
||||
html += '<h3>' + group.Name + '</h3>';
|
||||
|
||||
html += '<div class="recordingList">';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderRecordingGroups(page, groups) {
|
||||
|
||||
var html = '';
|
||||
|
||||
for (var i = 0, length = groups.length; i < length; i++) {
|
||||
|
||||
html += getRecordingGroupHtml(groups[i]);
|
||||
}
|
||||
|
||||
var elem = $('#items', page).html(html).trigger('create');
|
||||
|
||||
$('.recordingGroupCollapsible', elem).on('collapsibleexpand.lazyload', function () {
|
||||
|
||||
$(this).off('collapsibleexpand.lazyload');
|
||||
|
||||
var groupId = this.getAttribute('data-recordinggroupid');
|
||||
|
||||
loadRecordings(page, this, groupId);
|
||||
});
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
function renderRecordings(page, elem, recordings) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<ul data-role="listview" data-split-icon="delete" data-inset="false">';
|
||||
|
||||
for (var i = 0, length = recordings.length; i < length; i++) {
|
||||
|
||||
var recording = recordings[i];
|
||||
|
||||
html += '<tr>';
|
||||
html += '<li><a href="livetvrecording.html?id=' + recording.Id + '">';
|
||||
|
||||
html += '<td class="desktopColumn">';
|
||||
html += '<button data-recordingid="' + recording.Id + '" class="btnDeleteRecording" type="button" data-icon="delete" data-inline="true" data-mini="true" data-iconpos="notext">Delete</button>';
|
||||
html += '</td>';
|
||||
|
||||
html += '<td>';
|
||||
html += '<a href="livetvrecording.html?id=' + recording.Id + '">';
|
||||
html += recording.Name || '(blank)';
|
||||
html += '</a>';
|
||||
html += '</td>';
|
||||
|
||||
html += '<td class="desktopColumn">';
|
||||
if (recording.ChannelId) {
|
||||
html += '<a href="livetvchannel.html?id=' + recording.ChannelId + '">' + recording.ChannelName + '</a>';
|
||||
}
|
||||
html += '</td>';
|
||||
html += '<h3>';
|
||||
html += recording.EpisodeTitle || recording.Name;
|
||||
html += '</h3>';
|
||||
|
||||
var startDate = recording.StartDate;
|
||||
|
||||
|
|
@ -55,22 +100,29 @@
|
|||
|
||||
}
|
||||
|
||||
html += '<td>' + startDate.toLocaleDateString() + '</td>';
|
||||
|
||||
html += '<td>' + LiveTvHelpers.getDisplayTime(recording.StartDate) + '</td>';
|
||||
|
||||
var minutes = recording.RunTimeTicks / 600000000;
|
||||
|
||||
minutes = minutes || 1;
|
||||
|
||||
html += '<td class="tabletColumn">' + Math.round(minutes) + 'min</td>';
|
||||
html += '<p>';
|
||||
html += startDate.toLocaleDateString();
|
||||
html += ' • ' + Math.round(minutes) + 'min';
|
||||
html += '</p>';
|
||||
|
||||
html += '<td class="tabletColumn">' + (recording.Status || '') + '</td>';
|
||||
|
||||
html += '</tr>';
|
||||
if (recording.Status !== 'Completed') {
|
||||
html += '<p class="ui-li-aside"><span style="color:red;">' + recording.StatusName + '</span></p>';
|
||||
}
|
||||
|
||||
var elem = $('#table-column-toggle tbody', page).html(html).trigger('create');
|
||||
html += '</a>';
|
||||
|
||||
html += '<a href="#" class="btnDeleteRecording" data-recordingid="' + recording.Id + '">Delete</a>';
|
||||
|
||||
html += '</li>';
|
||||
}
|
||||
|
||||
html += '</ul>';
|
||||
|
||||
elem.html(html).trigger('create');
|
||||
|
||||
$('.btnDeleteRecording', elem).on('click', function () {
|
||||
|
||||
|
|
@ -86,9 +138,13 @@
|
|||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
apiClient.getLiveTvRecordings().done(function (result) {
|
||||
apiClient.getLiveTvRecordingGroups({
|
||||
|
||||
renderRecordings(page, result.Items);
|
||||
userId: Dashboard.getCurrentUserId()
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
renderRecordingGroups(page, result.Items);
|
||||
|
||||
});
|
||||
}
|
||||
|
|
@ -98,6 +154,12 @@
|
|||
var page = this;
|
||||
|
||||
reload(page);
|
||||
|
||||
}).on('pagehide', "#liveTvRecordingsPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
$('.recordingGroupCollapsible', page).off('collapsibleexpand.lazyload');
|
||||
});
|
||||
|
||||
})(jQuery, document, ApiClient);
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
html += '</li>';
|
||||
}
|
||||
|
||||
html += '</a></ul>';
|
||||
html += '</ul>';
|
||||
|
||||
$('#items', page).html(html).trigger('create');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<packages>
|
||||
<package id="MediaBrowser.ApiClient.Javascript" version="3.0.210" targetFramework="net45" />
|
||||
<package id="MediaBrowser.ApiClient.Javascript" version="3.0.212" targetFramework="net45" />
|
||||
</packages>
|
||||
Loading…
Add table
Add a link
Reference in a new issue