04b290173c
No longer exposing passwords in html forms. Removed some old headphones js. Minor styling adjustments. Current activity on home screen now works. Some history table fixes and additions. Info screen for video items now works.
292 lines
14 KiB
HTML
292 lines
14 KiB
HTML
<%inherit file="base.html"/>
|
|
<%!
|
|
from plexpy import helpers
|
|
%>
|
|
|
|
<%def name="headIncludes()">
|
|
<link rel="stylesheet" href="interfaces/default/css/plexwatch-tables.css">
|
|
</%def>
|
|
|
|
<%def name="body()">
|
|
|
|
<div class="container-fluid">
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="wellheader-bg">
|
|
<div class="dashboard-wellheader-no-chevron">
|
|
<h2><i class="fa fa-history"></i> History</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='container-fluid'>
|
|
<div class='row-fluid'>
|
|
<div class='span12'>
|
|
<div class='wellbg'>
|
|
<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="time"><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"><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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</%def>
|
|
|
|
|
|
<%def name="javascriptIncludes()">
|
|
|
|
<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>
|
|
$(document).ready(function() {
|
|
|
|
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_ entries",
|
|
"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": 25,
|
|
"order": [ 1, 'desc'],
|
|
"ajax": {
|
|
"url": "getHistory.json"
|
|
},
|
|
"columnDefs": [
|
|
{
|
|
"targets": [0],
|
|
"data":"id",
|
|
"visible": false
|
|
},
|
|
{
|
|
"targets": [1],
|
|
"data":"date",
|
|
"render": function ( data, type, full ) {
|
|
return moment(data, "X").format("${date_format}");
|
|
}
|
|
},
|
|
{
|
|
"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> '+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}");
|
|
}
|
|
},
|
|
{
|
|
"targets": [7],
|
|
"data":"paused",
|
|
"render": function ( data, type, full ) {
|
|
return Math.round(moment.duration(data, 'seconds').as('minutes')) + ' mins';
|
|
}
|
|
},
|
|
{
|
|
"targets": [8],
|
|
"data":"stopped",
|
|
"render": function ( data, type, full ) {
|
|
return moment(data, "X").format("${time_format}");
|
|
}
|
|
},
|
|
{
|
|
"targets": [9],
|
|
"data":"duration",
|
|
"render": function ( data, type, full ) {
|
|
return Math.round(moment.duration(data, 'seconds').as('minutes')) + ' mins';
|
|
}
|
|
},
|
|
{
|
|
"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>';
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"targets": [11],
|
|
"data":"rating_key",
|
|
"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>
|
|
|
|
</%def>
|