plexpy/data/interfaces/default/index.html
2017-08-13 09:09:39 -07:00

659 lines
No EOL
31 KiB
HTML

<%inherit file="base.html"/>
<%def name="headIncludes()">
</%def>
<%def name="body()">
<div class="container-fluid">
% for section in config['home_sections']:
% if section == 'current_activity':
<div class="row">
<div class="col-md-12">
<div class="padded-header" id="current-activity-header">
<h3>Activity</h3>
</div>
<div id="currentActivity">
<div class="text-muted" id="dashboard-checking-activity"><i class="fa fa-refresh fa-spin"></i> Checking for activity...</div>
</div>
</div>
</div>
% elif section == 'watch_stats':
<div class="row">
<div class="col-md-12">
<div class="home-padded-header padded-header">
<h3 class="pull-left">Watch Statistics</h3>
<div class="btn-group pull-left" data-toggle="buttons" id="watch-stats-toggles" style="margin-right: 3px">
% if config['home_stats_type'] == 0:
<label class="btn btn-dark active">
<input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-plays" value="0" autocomplete="off" checked> Play Count
</label>
<label class="btn btn-dark">
<input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-duration" value="1" autocomplete="off"> Play Duration
</label>
% else:
<label class="btn btn-dark">
<input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-plays" value="0" autocomplete="off"> Play Count
</label>
<label class="btn btn-dark active">
<input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-duration" value="1" autocomplete="off" checked> Play Duration
</label>
% endif
</div>
<div class="input-group pull-left" style="width: 1px; margin-right: 3px" id="watched-stats-days-selection">
<span class="input-group-addon btn-dark inactive">Last</span>
<input type="number" class="form-control" name="watched-stats-days" id="watched-stats-days" value="${config['home_stats_length']}" min="1" data-default="30" data-toggle="tooltip" title="Min: 1 day" />
<span class="input-group-addon btn-dark inactive">days</span>
</div>
<div class="input-group pull-left" style="width: 1px; margin-right: 3px" id="watched-stats-count-selection">
<span class="input-group-addon btn-dark inactive">Top</span>
<input type="number" class="form-control" name="watched-stats-count" id="watched-stats-count" value="${config['home_stats_count']}" min="1" max="10" data-default="5" data-toggle="tooltip" title="Min: 1 item<br>Max: 10 items" />
<span class="input-group-addon btn-dark inactive">items</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="home-stats" class="home-platforms">
<div class="text-muted"><i class="fa fa-refresh fa-spin"></i> Loading stats...</div>
<br>
</div>
</div>
</div>
% elif section == 'library_stats':
<div class="row">
<div class="col-md-12">
<div class="home-padded-header padded-header" id="library-statistics-header">
<h3 class="pull-left">Library Statistics</h3>
<span class="btn btn-dark active" style="cursor: default">${config['pms_name']}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="library-stats" class="library-platforms">
<div class="text-muted"><i class="fa fa-refresh fa-spin"></i> Loading stats...</div>
<br>
</div>
</div>
</div>
% elif section == 'recently_added':
<div class="row">
<div class="col-md-12">
<div class="home-padded-header padded-header">
<h3 class="pull-left">Recently Added</h3>
<ul class="nav nav-header nav-dashboard pull-right" style="margin-top: -3px;">
<li>
<a href="#" id="recently-added-page-left" class="paginate btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
</li>
<li>
<a href="#" id="recently-added-page-right" class="paginate btn-gray disabled" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
</li>
</ul>
<div class="btn-group pull-left" data-toggle="buttons" id="recently-added-toggles" style="margin-right: 3px">
<label class="btn btn-dark active" id="recently-added-label-all">
<input type="radio" name="recently-added-toggle" id="recently-added-toggle-all" value="" autocomplete="off"> All
</label>
<label class="btn btn-dark" id="recently-added-label-movies">
<input type="radio" name="recently-added-toggle" id="recently-added-toggle-movie" value="movie" autocomplete="off"> Movies
</label>
<label class="btn btn-dark" id="recently-added-label-tv">
<input type="radio" name="recently-added-toggle" id="recently-added-toggle-show" value="show" autocomplete="off"> TV Shows
</label>
<label class="btn btn-dark" id="recently-added-label-music">
<input type="radio" name="recently-added-toggle" id="recently-added-toggle-music" value="artist" autocomplete="off"> Music
</label>
</div>
<div class="input-group pull-left" style="width: 1px;" id="recently-added-count-selection">
<input type="number" class="form-control" name="recently-added-count" id="recently-added-count" value="${config['home_stats_recently_added_count']}" min="1" max="100" data-default="50" data-toggle="tooltip" title="Min: 1 item<br>Max: 100 items" />
<span class="input-group-addon btn-dark inactive">items</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="recentlyAdded" style="margin-right: -15px;">
<div class="text-muted"><i class="fa fa-refresh fa-spin"></i> Looking for new items...</div>
<br>
</div>
</div>
</div>
% endif
% endfor
</div>
</%def>
<%def name="modalIncludes()">
% if _session['user_group'] == 'admin' and config['update_show_changelog']:
<div id="changelog-modal" class="modal fade wide" tabindex="-1" role="dialog" aria-labelledby="changelog-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
<h4 class="modal-title">PlexPy Updated</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<input type="button" class="btn btn-bright" data-dismiss="modal" value="Close">
</div>
</div>
</div>
</div>
% endif
% if _session['user_group'] == 'admin':
<div id="terminate-session-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="terminate-session-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
<h4 class="modal-title">Terminate Session</h4>
</div>
<div class="modal-body" style="text-align: center;">
<p>Are you sure you want to terminate this session?</p>
<p>
<strong>
<span id="terminate-user"></span><br />
<span id="terminate-title"></span><br />
<span id="terminate-subtitle"></span>
</strong>
</p>
<br />
<label for="terminate-message">Terminate Message</label>
<div class="row">
<div class="col-md-8" style="float: none; margin: 0 auto;">
<input type="text" class="form-control" id="terminate-message" name="terminate-message" value="" placeholder="The server owner has ended the stream." style="text-align: center;">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok" data-dismiss="modal" id="confirm-terminate-session">Terminate</button>
</div>
</div>
</div>
</div>
% endif
</%def>
<%def name="javascriptIncludes()">
<script src="${http_root}js/moment-with-locale.js"></script>
<script>
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;
}
});
</script>
% if 'current_activity' in config['home_sections']:
<script>
function currentActivityHeader() {
$.ajax({
url: 'get_current_activity_header',
cache: false,
async: true,
complete: function (xhr, status) {
$("#current-activity-header").html(xhr.responseText);
}
});
}
currentActivityHeader();
function getCurrentActivity() {
$.ajax({
url: 'get_activity',
type: 'GET',
cache: false,
async: true,
error: function (xhr, status, error) {
console.log(status + ': ' + error);
},
complete: function (xhr, status) {
$('#dashboard-checking-activity').remove();
var current_activity;
try {
current_activity = $.parseJSON(xhr.responseText);
} catch (e) {
console.log(status + ': ' + e);
current_activity = null;
}
if (!(current_activity)) {
$('#currentActivity').html('<div id="dashboard-no-activity" class="text-muted">There was an error communicating with your Plex Server.</div>');
return
}
var stream_count = parseInt(current_activity.stream_count);
var sessions = current_activity.sessions;
if (stream_count) {
$('#dashboard-no-activity').remove();
sessions.forEach(function (s) {
var key = s.session_key;
var instance = $('#instance-' + key);
// create a new instance if it doesn't exist
if (!(instance.length)) {
getActivityInstance(s);
return;
}
// update play state
switch (s.state) {
case 'playing':
var overlay_state = 'State &nbsp;<strong>Playing</strong>';
var state_icon = '<i class="fa fa-fw fa-play"></i>&nbsp;';
break;
case 'paused':
var overlay_state = 'State &nbsp;<strong>Paused</strong>';
var state_icon = '<i class="fa fa-fw fa-pause"></i>&nbsp;';
break;
case 'buffering':
var overlay_state = 'State &nbsp;<strong>Buffering</strong>';
var state_icon = '<i class="fa fa-fw fa-spinner"></i>&nbsp;';
break;
default:
var overlay_state = 'State &nbsp;<strong>Unknown</strong>';
var state_icon = '<i class="fa fa-fw fa-question-circle"></i>&nbsp;';
}
$('#overlay-play-state-' + key).html(overlay_state);
$('#play-state-' + key).html(state_icon);
% if config['pms_use_bif']:
// if using bif indexes, update the bif thumbnail
if (s.indexes) {
var bif_poster = $('#bif-' + key);
bif_poster.animate({ opacity: 0 }, { duration: 1000, queue: false });
bif_poster.after($('<div id="bif-' + key + '"class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img='
+ s.bif_thumb + '&width=500&height=280&fallback=art);"></div>').fadeIn(1000, function () { bif_poster.remove() }));
blurArtwork(key);
}
% endif
// if transcoding, update the transcode state
var ts = '';
if (s.video_decision == 'transcode' || s.audio_decision == 'transcode') {
var throttled = (s.throttled == '1') ? ' (Throttled)' : '';
var hw = (s.transcode_hardware == '1') ? ' (HW)' : '';
ts += 'Stream &nbsp;<strong>Transcode' + hw + ' (Speed: ' + s.transcode_speed + ')' + throttled + '</strong><br>';
} else if (s.video_decision == 'copy' || s.audio_decision == 'copy') {
ts += 'Stream &nbsp;<strong>Direct Stream</strong><br>';
} else {
ts += 'Stream &nbsp;<strong>Direct Play</strong><br>';
}
if (['movie', 'episode', 'clip'].indexOf(s.media_type) > -1 && s.video_decision != '') {
switch (s.video_resolution.toLowerCase()) {
case 'sd':
var v_res = 'SD';
break;
case '4k':
var v_res = '4k';
break;
default:
var v_res = s.video_resolution + 'p'
}
switch (s.stream_video_resolution.toLowerCase()) {
case 'sd':
var sv_res = 'SD';
break;
case '4k':
var sv_res = '4k';
break;
default:
var sv_res = s.stream_video_resolution + 'p'
}
if (s.video_decision == 'transcode') {
ts += 'Video &nbsp;<strong>Transcode (' + s.video_codec.toUpperCase() + ' ' + v_res + ' &rarr; ' + s.stream_video_codec.toUpperCase() + ' ' + sv_res + ')</strong><br>';
} else if (s.video_decision == 'copy') {
ts += 'Video &nbsp;<strong>Direct Stream (' + s.stream_video_codec.toUpperCase() + ' ' + sv_res + ')</strong><br>';
} else {
ts += 'Video &nbsp;<strong>Direct Play (' + s.video_codec.toUpperCase() + ' ' + v_res + ')</strong><br>';
}
} else if (s.media_type == 'photo') {
ts += 'Video &nbsp;<strong>Direct Play (' + s.width + 'x' + s.height + ')</strong><br>';
} else {
ts += 'Video &nbsp;<strong>None</strong><br>';
}
if (['movie', 'episode', 'clip', 'track'].indexOf(s.media_type) > -1 && s.audio_codec) {
var a_codec = (s.audio_codec == 'truehd') ? 'TrueHD' : s.audio_codec.toUpperCase();
var sa_codec = (s.stream_audio_codec == 'truehd') ? 'TrueHD' : s.stream_audio_codec.toUpperCase();
if (s.audio_decision == 'transcode') {
ts += 'Audio &nbsp;<strong>Transcode (' + a_codec + ' ' + s.audio_channel_layout + ' &rarr; ' + sa_codec + ' ' + s.stream_audio_channel_layout + ')</strong><br>';
} else if (s.audio_decision == 'copy') {
ts += 'Audio &nbsp;<strong>Direct Stream (' + sa_codec + ' ' + s.stream_audio_channel_layout + ')</strong><br>';
} else {
ts += 'Audio &nbsp;<strong>Direct Play (' + a_codec + ' ' + s.audio_channel_layout + ')</strong><br>';
}
}
else {
ts += 'Audio &nbsp;<strong>None</strong><br>';
}
if (['movie', 'episode', 'clip'].indexOf(s.media_type) > -1 && s.subtitles == '1') {
if (s.subtitle_decision == 'transcode') {
ts += 'Subtitle &nbsp;<strong>Transcode (' + s.subtitle_codec.toUpperCase() + ' &rarr; ' + s.stream_subtitle_codec.toUpperCase() + ')</strong>';
} else if (s.subtitle_decision == 'copy') {
ts += 'Subtitle &nbsp;<strong>Direct Stream (' + s.subtitle_codec.toUpperCase() + ')</strong>';
} else if (s.subtitle_decision == 'burn') {
ts += 'Subtitle &nbsp;<strong>Burn (' + s.subtitle_codec.toUpperCase() + ')</strong>';
} else {
ts += 'Subtitle &nbsp;<strong>Direct Play (' + s.subtitle_codec.toUpperCase() + ')</strong>';
}
} else {
ts += 'Subtitle &nbsp;<strong>None</strong>';
}
$('#transcode-state-' + key).html(ts);
// update the stream quality profile and bandwidth
var br = parseInt(s.stream_bitrate) || 'Unknown';
var br_units = 'kbps'
if (br != "Unknown" && br > 1000) {
br = (br / 1000).toFixed(1);
br_units = 'Mbps';
}
$('#stream-quality-' + key).html(s.quality_profile);
$('#stream-quality-bitrate-' + key).html(br);
$('#stream-quality-bitrate-units-' + key).html(br_units);
var bw = parseInt(s.bandwidth) || 'Unknown';
var bw_units = 'kbps'
if (bw != "Unknown" && bw > 1000) {
bw = (bw / 1000).toFixed(1);
bw_units = 'Mbps';
}
$('#stream-bandwidth-' + key).html(bw);
$('#stream-bandwidth-units-' + key).html(bw_units);
// update the stream progress times
$('#stream-eta-' + key).html(moment().add(parseInt(s.duration) - parseInt(s.view_offset), 'milliseconds').format(time_format));
$('#stream-view-offset-' + key).html(millisecondsToMinutes(s.view_offset, false));
// update the progress bars
// percent - 3 because of 3px padding-right
$('#bufferbar-' + key).width(parseInt(s.transcode_progress) - 3 + '%').html(s.transcode_progress + '%')
.attr('data-original-title', 'Transcoder Progress ' + s.transcode_progress + '%');
$('#bar-' + key).width(parseInt(s.progress_percent) - 3 + '%').html(s.progress_percent + '%')
.attr('data-original-title', 'Stream Progress ' + s.progress_percent + '%');
// add temporary class so we know which instances are still active
instance.addClass('updated-temp');
});
// Remove finished instances
var all_instances = $('div[id^=instance-]');
all_instances.each(function (i, instance) {
if ($(instance).hasClass('updated-temp')) {
$(instance).removeClass('updated-temp');
} else {
$(instance).remove();
}
});
} else {
$('#currentActivity').html('<div id="dashboard-no-activity" class="text-muted">Nothing is currently being played.</div>');
}
}
});
}
function getActivityInstance(session) {
$.ajax({
url: 'get_current_activity_instance',
type: 'GET',
cache: false,
async: true,
data: session,
complete: function(xhr, status) {
$('#currentActivity').append(xhr.responseText);
$('#instance-' + session.session_key).find('.dashboard-activity-poster-face').hide().fadeIn(1000);
$('#terminate-button-' + session.session_key + ' span').tooltip({ container: 'body', placement: 'right', delay: 50 });
$('#bufferbar-' + session.session_key).tooltip({ container: 'body', placement: 'right', delay: 50 });
$('#bar-' + session.session_key).tooltip({ container: 'body', placement: 'right', delay: 50 });
}
});
}
getCurrentActivity();
setInterval(function () {
currentActivityHeader();
getCurrentActivity();
}, 15000);
function blurArtwork(session_key) {
var filterVal = $('#stream-' + session_key).is(':visible') ? 'blur(5px)' : '';
$($('#poster-' + session_key).find('.dashboard-activity-poster-face, .dashboard-activity-cover-face'))
.css('filter', filterVal).css('webkitFilter', filterVal).css('mozFilter', filterVal).css('oFilter', filterVal).css('msFilter', filterVal);
}
// Show/Hide activity info
$('#currentActivity').on('click', '.btn-activity-info', function (e) {
e.preventDefault();
$($(this).attr('data-target')).toggle();
var key = $(this).data('key');
blurArtwork(key);
$('#terminate-button-' + key).toggle();
});
// Add hover class to dashboard-instance
$('#currentActivity').on('mouseover', '.dashboard-hover-container', function () {
$(this).closest('.dashboard-instance').addClass('hover');
var key = $(this).closest('.dashboard-instance').data('key');
});
$('#currentActivity').on('mouseleave', '.dashboard-hover-container', function () {
var key = $(this).closest('.dashboard-instance').data('key');
if (!($('#stream-' + key).is(':visible'))) {
$(this).closest('.dashboard-instance').removeClass('hover');
}
});
% if _session['user_group'] == 'admin':
// Terminate session
$('#currentActivity').on('click', '.dashboard-activity-terminate-session', function (e) {
e.preventDefault();
var session_id = $(this).data('id');
var key = $(this).data('key');
var instance = $('#instance-' + key);
$('#terminate-user').text(instance.find('.dashboard-activity-metadata-user').text());
$('#terminate-title').text(instance.find('.dashboard-activity-metadata-title').text());
$('#terminate-subtitle').text(instance.find('.dashboard-activity-metadata-subtitle').text());
$('#terminate-session-modal').modal();
$('#terminate-session-modal').one('click', '#confirm-terminate-session', function () {
var message = $('#terminate-message').val();
showMsg('Terminating session', true);
$.ajax({
url: 'terminate_session',
data: {
session_id: session_id,
message: message
},
async: true,
success: function (data) {
if (data.result === 'success') {
setTimeout(function() {
currentActivityHeader();
getCurrentActivity();
showMsg('<i class="fa fa-check"></i> ' + data.message, false, true, 5000);
}, 2500);
} else {
showMsg('<i class="fa fa-exclamation-circle"></i> ' + data.message, false, true, 5000, true);
}
}
});
});
});
% endif
</script>
% endif
% if 'watch_stats' in config['home_sections']:
<script>
function getHomeStats(time_range, stats_type, stats_count) {
$.ajax({
url: 'home_stats',
type: 'GET',
cache: false,
async: true,
data: {
time_range: time_range,
stats_type: stats_type,
stats_count: stats_count
},
complete: function (xhr, status) {
$("#home-stats").html(xhr.responseText);
}
});
}
var time_range = $('#watched-stats-days').val();
var stats_type = $('input[name=watched-stats-type]:checked', '#watch-stats-toggles').val();
var stats_count = $('#watched-stats-count').val();
getHomeStats(time_range, stats_type, stats_count);
$('input[name=watched-stats-type]').change(function () {
stats_type = $(this).filter(':checked').val();
getHomeStats(time_range, stats_type, stats_count);
$.post('set_home_stats_config', { stats_type: stats_type });
});
$('#watched-stats-days').change(function () {
forceMinMax($(this));
time_range = $(this).val();
getHomeStats(time_range, stats_type, stats_count);
$.post('set_home_stats_config', { time_range: time_range });
});
$('#watched-stats-count').change(function () {
forceMinMax($(this));
stats_count = $(this).val();
getHomeStats(time_range, stats_type, stats_count);
$.post('set_home_stats_config', { stats_count: stats_count });
});
$('#watched-stats-days').tooltip({ container: 'body', placement: 'top', html: true });
$('#watched-stats-count').tooltip({ container: 'body', placement: 'top', html: true });
</script>
% endif
% if 'library_stats' in config['home_sections']:
<script>
function getLibraryStats() {
$.ajax({
url: 'library_stats',
type: 'GET',
cache: false,
async: true,
data: { },
complete: function (xhr, status) {
$("#library-stats").html(xhr.responseText);
}
});
}
getLibraryStats();
</script>
% endif
% if 'recently_added' in config['home_sections']:
<script>
function recentlyAdded(recently_added_count, recently_added_type) {
$.ajax({
url: 'get_recently_added',
type: 'GET',
async: true,
data: {
count: recently_added_count,
type: recently_added_type
},
complete: function (xhr, status) {
$("#recentlyAdded").html(xhr.responseText);
highlightAddedScrollerButton();
}
});
}
var recently_added_count = $('#recently-added-count').val();
var recently_added_type = '';
recentlyAdded(recently_added_count, recently_added_type);
function highlightAddedScrollerButton() {
var scroller = $("#recently-added-row-scroller");
var numElems = scroller.find("li:visible").length;
scroller.width(numElems * 175);
if (scroller.width() > $("body").find(".container-fluid").width()) {
$("#recently-added-page-right").removeClass("disabled");
} else {
$("#recently-added-page-right").addClass("disabled");
}
}
$(window).resize(function () {
highlightAddedScrollerButton();
});
var leftTotal = 0;
$(".paginate").click(function (e) {
e.preventDefault();
var scroller = $("#recently-added-row-scroller");
var containerWidth = $("body").find(".container-fluid").width();
var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175;
var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0);
leftTotal = Math.max(Math.min(leftTotal + scrollAmount, 0), leftMax);
scroller.animate({ left: leftTotal }, 250);
if (leftTotal == 0) {
$("#recently-added-page-left").addClass("disabled").blur();
} else {
$("#recently-added-page-left").removeClass("disabled");
}
if (leftTotal == leftMax) {
$("#recently-added-page-right").addClass("disabled").blur();
} else {
$("#recently-added-page-right").removeClass("disabled");
}
});
$('#recently-added-toggles').on('change', function () {
$('#recently-added-toggles > label').removeClass('active');
selected_filter = $('input[name=recently-added-toggle]:checked', '#recently-added-toggles');
$(selected_filter).closest('label').addClass('active');
recently_added_type = $(selected_filter).val();
recentlyAdded(recently_added_count, recently_added_type);
});
$('#recently-added-count').change(function () {
forceMinMax($(this));
recently_added_count = $(this).val();
recentlyAdded(recently_added_count, recently_added_type);
$.post('set_home_stats_config', { recently_added_count: recently_added_count });
});
$('#recently-added-count').tooltip({ container: 'body', placement: 'top', html: true });
</script>
% endif
% if _session['user_group'] == 'admin' and config['update_show_changelog']:
<script>
$.ajax({
url: 'get_changelog',
data: {
latest_only: true,
update_shown: true
},
cache: false,
async: true,
complete: function (xhr, status) {
$("#changelog-modal .modal-body").html(xhr.responseText);
$('#changelog-modal').modal();
}
});
</script>
% endif
</%def>