bazarr/views/episodes.html

257 lines
9.7 KiB
HTML

{% extends '_main.html' %}
{% block title %}Series - Bazarr{% endblock %}
{% block head %}
<style>
#seriesFanart {
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
box-sizing: initial;
margin-left: -32px;
margin-top: -30px;
padding: 2em;
}
#seriesDetails {
padding: 30px;
background: rgba(0, 0, 0, 0.7);
color: white;
margin: -32px;
}
#seriesPoster {
width: 250px;
}
h1 {
color: white;
}
span {
margin-right: 0.5em;
}
</style>
{% endblock head %}
{% block bcleft %}
<div class="">
<button class="btn btn-outline">
<i class="fas fa-sync align-top text-themecolor text-center font-20" aria-hidden="true"></i>
<span class="align-bottom text-themecolor small text-center">Update</span>
</button>
</div>
{% endblock bcleft %}
{% block bcright %}
<div class="d-flex m-t-5 justify-content-end">
<h5 class="m-t-0 text-themecolor">Some page settings</h5>
</div>
{% endblock bcright %}
{% block body %}
<div class="container-fluid" id="seriesFanart">
<div class="row justify-content-md-center" id="seriesDetails">
<div class="col-sm-auto" id="seriesPosterColumn">
<img id="seriesPoster" src="">
</div>
<div class="col">
<div class="container-fluid">
<div class="row">
<h1><span id="seriesTitle"></span></h1>
<i class="far fa-clone" id="seriesAlternateTitles" data-toggle="tooltip" data-placement="right"></i>
</div>
<div class="row">
<h5><span id="seriesAudioLanguage" class="badge badge-secondary"></span></h5>
<h5><span id="seriesMappedPath" class="badge badge-secondary"></span></h5>
<h5><span id="seriesFileCount" class="badge badge-secondary"></span></h5>
</div>
<div class="row">
<h5><span id="seriesSubtitlesLanguages"></span></h5>
</div>
<div class="row">
<h5><span id="seriesHearingImpaired" class="badge badge-secondary"></span></h5>
<h5><span id="seriesForced" class="badge badge-secondary"></span></h5>
</div>
<div class="row">
<span id="seriesDescription"></span>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<table id="episodes" class="table table-striped" style="width:100%">
<thead>
<tr>
<th></th>
<th>Episode</th>
<th>Title</th>
<th>Existing Subtitles</th>
<th>Missing Subtitles</th>
<th>Manual Search</th>
<th>Manual Upload</th>
</tr>
</thead>
</table>
</div>
{% endblock body %}
{% block tail %}
<script>
$(document).ready(function () {
$.ajax({
url: "{{ url_for('api.series') }}?id={{id}}",
})
.done(function( data ) {
seriesDetails = data.data[0];
$('#seriesFanart').css('background-image', "url('{{ url_for('image_proxy', url='MediaCover/'+id+'/fanart.jpg') }}')");
$('#seriesPoster').attr("src","{{ url_for('image_proxy', url='MediaCover/'+id+'/poster-250.jpg') }}");
$('#seriesTitle').text(seriesDetails['title']);
if (seriesDetails['alternateTitles'].length > 0) {
$('#seriesAlternateTitles').attr("title", "Alternative Titles:<br>"+seriesDetails['alternateTitles']);
$('#seriesAlternateTitles').tooltip({html:true});
} else {
$('#seriesAlternateTitles').hide();
}
$('#seriesAudioLanguage').text(seriesDetails['audio_language'].name);
$('#seriesMappedPath').text(seriesDetails['mapped_path']);
$('#seriesFileCount').text(seriesDetails['episodeFileCount']+' files');
var languages = '';
if (seriesDetails['languages'] !== 'None') {
seriesDetails['languages'].forEach(appendFunc);
}
function appendFunc(value) {
languages = languages + '<span class="badge badge-secondary" data-toggle="tooltip" data-placement="right" title="' + value.name + '">' + value.code2 + '</span> ';
}
$('#seriesSubtitlesLanguages').html(languages);
$('#seriesHearingImpaired').text('Hearing-Impaired: '+seriesDetails['hearing_impaired']);
$('#seriesForced').text('Forced: '+seriesDetails['forced']);
$('#seriesDescription').text(seriesDetails['overview']);
});
var table = $('#episodes').DataTable({
"processing": false,
"serverSide": true,
"searching": false,
"ordering": false,
"lengthChange": false,
"responsive": true,
"pageLength": 250,
"ajax": "{{ url_for('api.episodes') }}?id={{id}}",
"columns": [
{"data": "monitored",
"render": function (data, type, row) {
if (data === 'False') {
return '<i class="far fa-bookmark" data-toggle="tooltip" data-placement="right" title="Episode unmonitored in Sonarr"></i>';
} else if (data === 'True') {
return '<i class="fas fa-bookmark" data-toggle="tooltip" data-placement="right" title="Episode monitored in Sonarr"></i>';
}
}
},
{"data": "episode"},
{"data": "title"},
{"data": null,
"render": function (data) {
if (data.subtitles !== 'None') {
var languages = '';
data.subtitles.forEach(appendFunc);
return languages;
} else {
return null;
}
function appendFunc(value) {
if (value[1] === null) {
languages = languages + '<span class="badge badge-secondary" data-toggle="tooltip" data-placement="right" title="' + value[0].name + ((value[0].forced) ? ' forced':'') + '">' + value[0].code2 + ((value[0].forced) ? ':forced':'') + '</span> ';
} else {
languages = languages + '<a href="" class="remove_subtitles badge badge-secondary" data-toggle="tooltip" data-placement="right" title="' + value[0].name + ((value[0].forced) ? ' forced':'') + '" data-episodePath="'+data.path+'" data-language="'+value[0].code3+'" data-subtitlesPath="'+value[1]+'" data-sonarrEpisodeId='+data.sonarrEpisodeId+'>' + value[0].code2 + ((value[0].forced) ? ':forced':'') + ' <i class="far fa-trash-alt"></i></a> ';
}
}
}
},
{"data": null,
"render": function (data) {
if (data.missing_subtitles !== 'None') {
var languages = '';
data.missing_subtitles.forEach(appendFunc);
return languages;
} else {
return null;
}
function appendFunc(value) {
languages = languages + '<a href="" class="get_subtitle badge badge-secondary" data-toggle="tooltip" data-placement="right" title="' + value.name + ((value.forced) ? ' forced':'') + '" data-episodepath="'+data.path+'" data-scenename="'+data.scene_name+'" data-title="'+data.title+'" data-language="'+value.code3+'" data-hi="'+seriesDetails.hearing_impaired+'" data-forced="'+value.forced+'" data-sonarrepisodeid='+data.sonarrEpisodeId+'>' + value.code2 + ((value.forced) ? ':forced':'') + ' <i class="fas fa-search"></i></a> ';
}
}
},
{"data": "title"},
{"data": "title"}
]
});
$('#episodes').on('click', '.remove_subtitles', function(e){
e.preventDefault()
const values = {
episodePath: $(this).attr("data-episodePath"),
language: $(this).attr("data-language"),
subtitlesPath: $(this).attr("data-subtitlesPath"),
sonarrSeriesId: seriesDetails['sonarrSeriesId'],
sonarrEpisodeId: $(this).attr("data-sonarrEpisodeId"),
tvdbid: seriesDetails['tvdbId']
};
var cell = $(this).closest('td');
$.ajax({
url: "{{ url_for('remove_subtitles') }}",
type: "POST",
dataType: "json",
data: values,
beforeSend: function() {
cell.html('<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div>');
},
complete: function() {
$('#episodes').DataTable().ajax.reload(null, false);
}
});
});
$('#episodes').on('click', '.get_subtitle', function(e){
e.preventDefault()
const values = {
episodePath: $(this).attr("data-episodepath"),
sceneName: $(this).attr("data-scenename"),
language: $(this).attr("data-language"),
hi: $(this).attr("data-hi"),
forced: $(this).attr("data-forced"),
sonarrSeriesId: seriesDetails['sonarrSeriesId'],
sonarrEpisodeId: $(this).attr('data-sonarrepisodeid'),
title: seriesDetails['title']
};
var cell = $(this).closest('td');
$.ajax({
url: "{{ url_for('get_subtitle') }}",
type: "POST",
dataType: "json",
data: values,
beforeSend: function() {
cell.html('<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div>');
},
complete: function() {
$('#episodes').DataTable().ajax.reload(null, false);
}
});
});
});
</script>
{% endblock tail %}