tesses-cms/Tesses.CMS/Assets/SubtitleEditor.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>