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>