136 lines
4.4 KiB
HTML
136 lines
4.4 KiB
HTML
<div class="container text-center">
|
|
<div class="row">
|
|
<div class="col">
|
|
<video onloadedmetadata="set_max()" controls id="video_player" src="{{browserfile}}" width="320" height="240"></video><br>
|
|
<h3>Current Subtitle</h3>
|
|
<label for="begin" class="form-label">Start: </label><br> <input class="form-control" type="number" name="" id="begin"><button onclick="get_begin()" class="btn btn-secondary">To Player</button><button onclick="set_begin()" class="btn btn-primary">From Player</button><br>
|
|
<label for="end" class="form-label">End: </label> <br><input class="form-control" type="number" name="" id="end"><button onclick="get_end()" class="btn btn-secondary">To Player</button><button onclick="set_end()" class="btn btn-primary">From Player</button><br>
|
|
<label for="text" class="form-label">Text: </label><br> <textarea class="form-control" name="" id="text"></textarea><br>
|
|
|
|
<button onclick="add_caption()" class="btn btn-primary">Add</button><br>
|
|
<button onclick="save()" class="btn btn-secondary">Save</button>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>All Subtitles</h3>
|
|
<ul id="captions" class="list-group"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
captions=[];
|
|
const video_player = document.getElementById('video_player');
|
|
const begin = document.getElementById('begin');
|
|
const end = document.getElementById('end');
|
|
const text = document.getElementById('text');
|
|
const _captions = document.getElementById('captions');
|
|
function set_max()
|
|
{
|
|
begin.max = video_player.duration;
|
|
end.max = video_player.duration;
|
|
begin.value = 0;
|
|
end.value = 0;
|
|
}
|
|
function add_caption2(item)
|
|
{
|
|
const li= document.createElement('li');
|
|
li.classList.add('list-group-item');
|
|
const p=document.createElement('p');
|
|
const read = document.createElement('button');
|
|
read.innerText="To Current Subtitle";
|
|
read.classList.add('btn');
|
|
read.classList.add('btn-primary');
|
|
const write = document.createElement('button');
|
|
write.classList.add('btn');
|
|
write.classList.add('btn-secondary');
|
|
write.innerText="From Current Subtitle";
|
|
const _delete = document.createElement('button');
|
|
_delete.classList.add('btn');
|
|
_delete.classList.add('btn-danger');
|
|
_delete.onclick = ()=>{
|
|
var index=captions.indexof(item);
|
|
if(index > -1)
|
|
{
|
|
captions.splice(index,1);
|
|
}
|
|
_captions.removeChild(li);
|
|
};
|
|
_delete.innerText="Delete";
|
|
p.innerText=`${item.text.substring(0,40)} (${item.begin}=>${item.end})`;
|
|
read.onclick = ()=>{
|
|
begin.value = item.begin;
|
|
end.value = item.end;
|
|
text.value = item.text;
|
|
};
|
|
write.onclick = ()=>{
|
|
item.begin = begin.value;
|
|
item.end = end.value;
|
|
item.text = text.value;
|
|
p.innerText=`${item.text.substring(0,40)} (${item.begin}=>${item.end})`;
|
|
};
|
|
|
|
li.appendChild(p);
|
|
li.appendChild(read);
|
|
li.appendChild(write);
|
|
li.appendChild(_delete);
|
|
_captions.appendChild(li);
|
|
captions.push(item);
|
|
}
|
|
function add_caption()
|
|
{
|
|
add_caption2({
|
|
begin: begin.value,
|
|
end: end.value,
|
|
text: text.value
|
|
});
|
|
|
|
}
|
|
function get_end()
|
|
{
|
|
video_player.currentTime = end.value;
|
|
}
|
|
function get_begin()
|
|
{
|
|
video_player.currentTime = begin.value;
|
|
}
|
|
function set_begin()
|
|
{
|
|
begin.value = video_player.currentTime;
|
|
}
|
|
function set_end()
|
|
{
|
|
end.value = video_player.currentTime;
|
|
}
|
|
function loaded()
|
|
{
|
|
|
|
{{if hasjson}}
|
|
{{json}}.forEach(element => {
|
|
add_caption2(element);
|
|
});
|
|
{{end}}
|
|
|
|
}
|
|
addEventListener("DOMContentLoaded", (event) => {loaded();});
|
|
function save()
|
|
{
|
|
fetch("./subtitles?lang={{lang}}",{method: 'POST',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json'
|
|
},body: JSON.stringify(captions)/*https://stackoverflow.com/a/29823632*/}).then(e=>{
|
|
if(e.ok)
|
|
{
|
|
alert("Saved");
|
|
}
|
|
else
|
|
{
|
|
alert("Failed");
|
|
}
|
|
e.close();
|
|
});
|
|
}
|
|
</script>
|