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