github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-08-14 02:26:58 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Template the stream modal

Browse source 
Template the history table
Add history history to metadata info screens
Fix some more datatables stuff
More webserve housekeeping
This commit is contained in:
Tim 2015-06-19 22:27:50 +02:00
commit c4504d8be0
8 changed files with 564 additions and 301 deletions
Download patch file Download diff file Expand all files Collapse all files

261
data/interfaces/default/history.html
View file

@ -46,53 +46,6 @@
</tbody>
</table>
<div id="info-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="info-modal" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
<h3 id="myModalLabel">Stream Info: <strong><span id="modal-stream-info"></span></strong></h3>
</div>
<div class="modal-body" id="modal-text">
<div class="span4">
<h4>Stream Details</h4>
<ul>
<h5>Video</h5>
<li>Stream Type: <strong><span id="transcode_video_dec"></span></strong></li>
<li>Video Resolution: <strong><span id="transcode_video_resolution"></span>p</strong></li>
<li>Video Codec: <strong><span id="transcode_video_codec"></span></strong></li>
<li>Video Width: <strong><span id="transcode_video_width"></span></strong></li>
<li>Video Height: <strong><span id="transcode_video_height"></span></strong></li>
</ul>
<ul>
<h5>Audio</h5>
<li>Stream Type: <strong><span id="transcode_audio_dec"></span></strong></li>
<li>Audio Codec: <strong><span id="transcode_audio_codec"></span></strong></li>
<li>Audio Channels: <strong><span id="transcode_audio_channels"></span></strong></li>
</ul>
</div>
<div class="span4">
<h4>Media Source Details</h4>
<li>Container: <strong><span id="media_container"></span></strong></li>
<li>Resolution: <strong><span id="media_resolution"></span>p</strong></li>
<li>Bitrate: <strong><span id="media_bitrate"></span> kbps</strong></li>
</div>
<div class="span4">
<h4>Video Source Details</h4>
<ul>
<li>Width: <strong><span id="video_width"></span></strong></li>
<li>Height: <strong><span id="video_height"></span></strong></li>
<li>Aspect Ratio: <strong><span id="video_aspect"></span></strong></li>
<li>Video Frame Rate: <strong><span id="video_framerate"></span></strong></li>
<li>Video Codec: <strong><span id="video_codec"></span></strong></li>
</ul>
<ul></ul>
<h4>Audio Source Details</h4>
<ul>
<li>Audio Codec: <strong><span id="audio_codec"></span></strong></li>
<li>Audio Channels: <strong><span id="audio_channels"></span></strong></li>
</ul>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
@ -107,213 +60,15 @@
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
<script src="interfaces/default/js/jquery.dataTables.bootstrap.pagination.integration.js"></script>
<script src="interfaces/default/js/moment-with-locale.js"></script>
<script src="interfaces/default/js/tables/history_table.js"></script>
<script>
$(document).ready(function() {
$(document).ready(function() {
history_table_options.ajax = {
"url": "get_history"
}
var history_table;
history_table = $('#history_table').DataTable({
"destroy": true,
"language": {
"search": "Search: ",
"lengthMenu":"Show _MENU_ entries per page",
"info":"Showing _START_ to _END_ of _TOTAL_ history items",
"infoEmpty":"Showing 0 to 0 of 0 entries",
"infoFiltered":"(filtered from _MAX_ total entries)",
"emptyTable": "No data in table",
},
"stateSave": true,
"sPaginationType": "bootstrap",
"processing": false,
"serverSide": true,
"pageLength": 10,
"order": [ 1, 'desc'],
"ajax": {
"url": "getHistory.json"
},
"columnDefs": [
{
"targets": [0],
"data":"id",
"visible": false,
"searchable": false
},
{
"targets": [1],
"data":"date",
"createdCell": function (td, cellData, rowData, row, col) {
if (rowData['stopped'] === null) {
$(td).addClass('currentlyWatching');
$(td).html('Currently watching...');
} else {
$(td).html(moment(cellData,"X").format("${date_format}"));
}
},
"searchable": false
},
{
"targets": [2],
"data":"user"
},
{
"targets": [3],
"data":"platform",
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData !== '') {
$(td).html('<a href="#info-modal" data-toggle="modal"><span data-toggle="tooltip" data-placement="left" title="Stream Info" id="stream-info" class="badge badge-inverse"><i class="fa fa-info"></i></span></a>&nbsp'+cellData);
}
},
"className": "modal-control"
},
{
"targets": [4],
"data":"ip_address",
"createdCell": function (td, cellData, rowData, row, col) {
if ((cellData == '') || (cellData == '0')) {
$(td).html('n/a');
}
}
},
{
"targets": [5],
"data":"title",
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData !== '') {
$(td).html('<a href="info?rating_key=' + rowData['rating_key'] + '">' + cellData + '</a>');
}
}
},
{
"targets": [6],
"data":"started",
"render": function ( data, type, full ) {
return moment(data, "X").format("${time_format}");
},
"searchable": false
},
{
"targets": [7],
"data":"paused_counter",
"render": function ( data, type, full ) {
return Math.round(moment.duration(data, 'seconds').as('minutes')) + ' mins';
},
"searchable": false
},
{
"targets": [8],
"data":"stopped",
"render": function ( data, type, full ) {
if (data !== null) {
return moment(data, "X").format("${time_format}");
} else {
return data;
}
},
"searchable": false
},
{
"targets": [9],
"data":"duration",
"render": function ( data, type, full ) {
if (data !== null) {
return Math.round(moment.duration(data, 'seconds').as('minutes')) + ' mins';
} else {
return data;
}
},
"searchable": false
},
{
"targets": [10],
"data":"percent_complete",
"orderable": false,
"render": function ( data, type, full ) {
if (data < 95) {
return '<span class="badge">'+Math.round(data)+'%</span>';
} else {
return '<span class="badge">100%</span>';
}
},
"searchable": false
},
{
"targets": [11],
"data":"rating_key",
"visible": false,
"searchable": false
},
{
"targets": [12],
"data":"xml",
"searchable":false,
"visible":false
}
],
"drawCallback": function (settings) {
// Jump to top of page
$('html,body').scrollTop(0);
$('#ajaxMsg').addClass('success').fadeOut();
},
"preDrawCallback": function(settings) {
$('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>Fetching rows...</div>");
$('#ajaxMsg').addClass('success').fadeIn();
}
});
$('#history_table').on('mouseenter', 'td.modal-control span', function () {
$(this).tooltip();
} );
$('#history_table').on('click', 'td.modal-control', function () {
var tr = $(this).parents('tr');
var row = history_table.row( tr );
var rowData = row.data();
$.ajax({
url: 'getStreamDetails',
type: 'GET',
data: {id: rowData['id']},
success: function(data) {
$('#modal-stream-info').html(rowData['title']+' ('+rowData['user']+')');
$('#media_container').html(data.data.opt.Media['@container']);
$('#media_resolution').html(data.data.opt.Media['@videoResolution']);
$('#media_bitrate').html(data.data.opt.Media['@bitrate']);
if (data.data.opt.TranscodeSession) {
$('#transcode_video_dec').html(data.data.opt.TranscodeSession['@videoDecision']);
$('#transcode_video_resolution').html(data.data.opt.TranscodeSession['@height']);
$('#transcode_video_codec').html(data.data.opt.TranscodeSession['@videoCodec']);
$('#transcode_video_width').html(data.data.opt.TranscodeSession['@width']);
$('#transcode_video_height').html(data.data.opt.TranscodeSession['@height']);
$('#transcode_audio_dec').html(data.data.opt.TranscodeSession['@audioDecision']);
$('#transcode_audio_codec').html(data.data.opt.TranscodeSession['@audioCodec']);
$('#transcode_audio_channels').html(data.data.opt.TranscodeSession['@audioChannels']);
} else {
$('#transcode_video_dec').html('Direct Play');
$('#transcode_video_resolution').html(data.data.opt.Media['@videoResolution']);
$('#transcode_video_codec').html(data.data.opt.Media.Part.Stream[0]['@codec']);
$('#transcode_video_width').html(data.data.opt.Media['@width']);
$('#transcode_video_height').html(data.data.opt.Media['@height']);
$('#transcode_audio_dec').html('Direct Play');
$('#transcode_audio_codec').html(data.data.opt.Media['@audioCodec']);
$('#transcode_audio_channels').html(data.data.opt.Media['@audioChannels']);
}
$('#video_width').html(data.data.opt.Media['@width']);
$('#video_height').html(data.data.opt.Media['@height']);
$('#video_aspect').html(data.data.opt.Media['@aspectRatio']);
$('#video_framerate').html(data.data.opt.Media['@videoFrameRate']);
$('#video_codec').html(data.data.opt.Media['@videoCodec']);
$('#audio_codec').html(data.data.opt.Media['@audioCodec']);
$('#audio_channels').html(data.data.opt.Media['@audioChannels']);
}
});
});
});
</script>
history_table = $('#history_table').DataTable(history_table_options);
});
</script>
</%def>

68
data/interfaces/default/info.html
View file

@ -4,7 +4,7 @@
%>
<%def name="headIncludes()">
<link rel="stylesheet" href="interfaces/default/css/plexwatch-tables.css">
</%def>
<%def name="body()">
@ -52,12 +52,12 @@
<div class="summary-content-director">
% if metadata['type'] == 'episode' or metadata['type'] == 'movie':
% if metadata['directors']:
Directed by <strong> ${metadata['directors'][0]}
Directed by <strong> ${metadata['directors'][0]}</strong>
% else:
Directed by <strong> unknown
Directed by <strong> unknown</strong>
% endif
% elif metadata['type'] == 'show':
Studio <strong> ${metadata['studio']}
Studio <strong> ${metadata['studio']}</strong>
% endif
</div>
<div class="summary-content-duration">
@ -138,6 +138,44 @@
</div>
<!--}-->
</div>
<div class='container-fluid'>
<div class='row-fluid'>
<div class='span12'>
<div class='wellbg'>
% if metadata['type'] == 'movie' or metadata['type'] == 'episode':
<div class="wellheader">
<div class="dashboard-wellheader">
<h3>Watch history for <strong>${metadata['title']}</strong></h3>
</div>
</div>
<table class="display" id="history_table" width="100%">
<thead>
<tr>
<th align='left' id="id"><i class='fa fa-sort'></i> ID</th>
<th align='left' id="date"><i class='fa fa-sort'></i> Time</th>
<th align='left' id="user"><i class='fa fa-sort'></i> User</th>
<th align='left' id="platform"><i class='fa fa-sort'></i> Platform</th>
<th align='left' id="ip_address"><i class='fa fa-sort'></i> IP Address</th>
<th align='left' id="title"><i class='fa fa-sort'></i> Title</th>
<th align='left' id="started"><i class='fa fa-sort'></i> Started</th>
<th align='left' id="paused_counter"><i class='fa fa-sort'></i> Paused</th>
<th align='left' id="stopped"><i class='fa fa-sort'></i> Stopped</th>
<th align='left' id="duration"><i class='fa fa-sort'></i> Duration</th>
<th align='left' id="percent_complete"> Completed</th>
<th align='left' id="rating_key"> RatingKey</th>
<th align='left' id="xml"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="info-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="info-modal" aria-hidden="true">
</div>
% endif
</div>
</div>
</div>
</div>
% else:
<div class="clear"></div>
<div class="container-fluid">
@ -152,6 +190,10 @@
<%def name="javascriptIncludes()">
<script src="interfaces/default/js/jquery.rateit.min.js"></script>
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
<script src="interfaces/default/js/jquery.dataTables.bootstrap.pagination.integration.js"></script>
<script src="interfaces/default/js/moment-with-locale.js"></script>
% if metadata:
% if metadata['type'] == 'movie':
<script>
@ -160,5 +202,23 @@
$('#stars').attr('data-rateit-value', starRating)
</script>
% endif
% if metadata['type'] == 'movie' or metadata['type'] == 'episode':
<script src="interfaces/default/js/tables/history_table.js"></script>
<script>
$(document).ready(function () {
history_table_options.ajax = {
"url": "get_history",
"data": function(d) {
d.rating_key = ${metadata['ratingKey']};
}
}
history_table = $('#history_table').DataTable(history_table_options);
// Hide the title column
history_table.column(5).visible(false);
});
</script>
%endif
% endif
</%def>

180
data/interfaces/default/js/tables/history_table.js Normal file
View file

@ -0,0 +1,180 @@
var date_format = 'YYYY-MM-DD';
var time_format = 'hh:mm a';
$.ajax({
url: 'get_date_formats',
type: 'GET',
success: function(data) {
date_format = data.date_format;
time_format = data.time_format;
}
});
history_table_options = {
"destroy": true,
"language": {
"search": "Search: ",
"lengthMenu":"Show _MENU_ entries per page",
"info":"Showing _START_ to _END_ of _TOTAL_ history items",
"infoEmpty":"Showing 0 to 0 of 0 entries",
"infoFiltered":"(filtered from _MAX_ total entries)",
"emptyTable": "No data in table",
},
"stateSave": true,
"sPaginationType": "bootstrap",
"processing": false,
"serverSide": true,
"pageLength": 10,
"order": [ 1, 'desc'],
"columnDefs": [
{
"targets": [0],
"data":"id",
"visible": false,
"searchable": false
},
{
"targets": [1],
"data":"date",
"createdCell": function (td, cellData, rowData, row, col) {
if (rowData['stopped'] === null) {
$(td).addClass('currentlyWatching');
$(td).html('Currently watching...');
} else {
$(td).html(moment(cellData,"X").format(date_format));
}
},
"searchable": false
},
{
"targets": [2],
"data":"user"
},
{
"targets": [3],
"data":"platform",
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData !== '') {
$(td).html('<a href="#info-modal" data-toggle="modal"><span data-toggle="tooltip" data-placement="left" title="Stream Info" id="stream-info" class="badge badge-inverse"><i class="fa fa-info"></i></span></a>&nbsp'+cellData);
}
},
"className": "modal-control"
},
{
"targets": [4],
"data":"ip_address",
"createdCell": function (td, cellData, rowData, row, col) {
if ((cellData == '') || (cellData == '0')) {
$(td).html('n/a');
}
}
},
{
"targets": [5],
"data":"title",
"name":"title",
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData !== '') {
$(td).html('<a href="info?rating_key=' + rowData['rating_key'] + '">' + cellData + '</a>');
}
}
},
{
"targets": [6],
"data":"started",
"render": function ( data, type, full ) {
return moment(data, "X").format(time_format);
},
"searchable": false
},
{
"targets": [7],
"data":"paused_counter",
"render": function ( data, type, full ) {
return Math.round(moment.duration(data, 'seconds').as('minutes')) + ' mins';
},
"searchable": false
},
{
"targets": [8],
"data":"stopped",
"render": function ( data, type, full ) {
if (data !== null) {
return moment(data, "X").format(time_format);
} else {
return data;
}
},
"searchable": false
},
{
"targets": [9],
"data":"duration",
"render": function ( data, type, full ) {
if (data !== null) {
return Math.round(moment.duration(data, 'seconds').as('minutes')) + ' mins';
} else {
return data;
}
},
"searchable": false
},
{
"targets": [10],
"data":"percent_complete",
"orderable": false,
"render": function ( data, type, full ) {
if (data < 95) {
return '<span class="badge">'+Math.round(data)+'%</span>';
} else {
return '<span class="badge">100%</span>';
}
},
"searchable": false
},
{
"targets": [11],
"data":"rating_key",
"visible": false,
"searchable": false
},
{
"targets": [12],
"data":"xml",
"searchable":false,
"visible":false
}
],
"drawCallback": function (settings) {
// Jump to top of page
// $('html,body').scrollTop(0);
$('#ajaxMsg').addClass('success').fadeOut();
},
"preDrawCallback": function(settings) {
$('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>Fetching rows...</div>");
$('#ajaxMsg').addClass('success').fadeIn();
}
}
$('#history_table').on('mouseenter', 'td.modal-control span', function () {
$(this).tooltip();
});
$('#history_table').on('click', 'td.modal-control', function () {
var tr = $(this).parents('tr');
var row = history_table.row( tr );
var rowData = row.data();
function showStreamDetails() {
$.ajax({
url: 'get_stream_data',
data: {row_id: rowData['id'], user: rowData['user']},
cache: false,
async: true,
complete: function(xhr, status) {
$("#info-modal").html(xhr.responseText);
}
});
}
showStreamDetails();
});

52
data/interfaces/default/stream_data.html Normal file
View file

@ -0,0 +1,52 @@
% if data is not None:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
% if data['media_type'] == 'episode':
<h3 id="myModalLabel">Stream Info: <strong>${data['grandparent_title']} - ${data['title']} (${user})</strong></h3>
% else:
<h3 id="myModalLabel">Stream Info: <strong>${data['title']} (${user})</strong></h3>
% endif
</div>
<div class="modal-body" id="modal-text">
<div class="span4">
<h4>Stream Details</h4>
<ul>
<h5>Video</h5>
<li>Stream Type: <strong>${data['transcode_video_dec']}</strong></li>
<li>Video Resolution: <strong>${data['transcode_height']}p</strong></li>
<li>Video Codec: <strong>${data['transcode_video_codec']}</strong></li>
<li>Video Width: <strong>${data['transcode_width']}</strong></li>
<li>Video Height: <strong>${data['transcode_height']}</span></strong></li>
</ul>
<ul>
<h5>Audio</h5>
<li>Stream Type: <strong>${data['transcode_audio_dec']}</strong></li>
<li>Audio Codec: <strong>${data['transcode_audio_codec']}</strong></li>
<li>Audio Channels: <strong>${data['transcode_audio_channels']}</strong></li>
</ul>
</div>
<div class="span4">
<h4>Media Source Details</h4>
<li>Container: <strong>${data['container']}</strong></li>
<li>Resolution: <strong>${data['height']}p</strong></li>
<li>Bitrate: <strong>${data['bitrate']} kbps</strong></li>
</div>
<div class="span4">
<h4>Video Source Details</h4>
<ul>
<li>Width: <strong>${data['width']}</strong></li>
<li>Height: <strong>${data['height']}</strong></li>
<li>Aspect Ratio: <strong>${data['aspect_ratio']}</strong></li>
<li>Video Frame Rate: <strong>${data['video_framerate']}</span></strong></li>
<li>Video Codec: <strong>${data['video_codec']}</strong></li>
</ul>
<ul></ul>
<h4>Audio Source Details</h4>
<ul>
<li>Audio Codec: <strong>${data['audio_codec']}</strong></li>
<li>Audio Channels: <strong>${data['audio_channels']}</strong></li>
</ul>
</div>
</div>
<div class="modal-footer"></div>
% endif

94
data/interfaces/default/user.html
View file

@ -121,17 +121,76 @@
</strong></h3>
</div>
</div>
Table
<div id="info-modal" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="info-modal" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"><i class="fa fa-remove"></i></button>
<h3 id="myModalLabel">Stream Info: <span id="modal-stream-info"></span></h3>
</div>
<div class="modal-body" id="modal-text"></div>
<div class="modal-footer"></div>
</div>
<table class="display" id="history_table" width="100%">
<thead>
<tr>
<th align='left' id="id"><i class='fa fa-sort'></i> ID</th>
<th align='left' id="date"><i class='fa fa-sort'></i> Time</th>
<th align='left' id="user"><i class='fa fa-sort'></i> User</th>
<th align='left' id="platform"><i class='fa fa-sort'></i> Platform</th>
<th align='left' id="ip_address"><i class='fa fa-sort'></i> IP Address</th>
<th align='left' id="title"><i class='fa fa-sort'></i> Title</th>
<th align='left' id="started"><i class='fa fa-sort'></i> Started</th>
<th align='left' id="paused_counter"><i class='fa fa-sort'></i> Paused</th>
<th align='left' id="stopped"><i class='fa fa-sort'></i> Stopped</th>
<th align='left' id="duration"><i class='fa fa-sort'></i> Duration</th>
<th align='left' id="percent_complete"> Completed</th>
<th align='left' id="rating_key"> RatingKey</th>
<th align='left' id="xml"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="info-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="info-modal" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
<h3 id="myModalLabel">Stream Info: <strong><span id="modal-stream-info"></span></strong></h3>
</div>
<div class="modal-body" id="modal-text">
<div class="span4">
<h4>Stream Details</h4>
<ul>
<h5>Video</h5>
<li>Stream Type: <strong><span id="transcode_video_dec"></span></strong></li>
<li>Video Resolution: <strong><span id="transcode_video_resolution"></span>p</strong></li>
<li>Video Codec: <strong><span id="transcode_video_codec"></span></strong></li>
<li>Video Width: <strong><span id="transcode_video_width"></span></strong></li>
<li>Video Height: <strong><span id="transcode_video_height"></span></strong></li>
</ul>
<ul>
<h5>Audio</h5>
<li>Stream Type: <strong><span id="transcode_audio_dec"></span></strong></li>
<li>Audio Codec: <strong><span id="transcode_audio_codec"></span></strong></li>
<li>Audio Channels: <strong><span id="transcode_audio_channels"></span></strong></li>
</ul>
</div>
<div class="span4">
<h4>Media Source Details</h4>
<li>Container: <strong><span id="media_container"></span></strong></li>
<li>Resolution: <strong><span id="media_resolution"></span>p</strong></li>
<li>Bitrate: <strong><span id="media_bitrate"></span> kbps</strong></li>
</div>
<div class="span4">
<h4>Video Source Details</h4>
<ul>
<li>Width: <strong><span id="video_width"></span></strong></li>
<li>Height: <strong><span id="video_height"></span></strong></li>
<li>Aspect Ratio: <strong><span id="video_aspect"></span></strong></li>
<li>Video Frame Rate: <strong><span id="video_framerate"></span></strong></li>
<li>Video Codec: <strong><span id="video_codec"></span></strong></li>
</ul>
<ul></ul>
<h4>Audio Source Details</h4>
<ul>
<li>Audio Codec: <strong><span id="audio_codec"></span></strong></li>
<li>Audio Channels: <strong><span id="audio_channels"></span></strong></li>
</ul>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
@ -146,7 +205,20 @@
<script src="interfaces/default/js/jquery.dataTables.bootstrap.pagination.integration.js"></script>
<script src="interfaces/default/js/moment-with-locale.js"></script>
<script src="interfaces/default/js/tables/history_table.js"></script>
<script>
$(document).ready(function () {
history_table_options.ajax = {
"url": "get_history",
"data": function(d) {
d.user = "drzoidberg33";
}
}
history_table = $('#history_table').DataTable(history_table_options);
// Hide the title column
// history_table.column(5).visible(false);
});
</script>
</%def>