Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
5.5 kB
1
Indexable
Never
<!DOCTYPE html>
<html>
  <head>
    <title>garbage editing software</title>
    <style>
    body {
      margin: 0;
    }
    #preview {
      z-index: 10;
    }
    .dataData {
      display: none;
    }
      #sideMenu {
        border: 1px solid gray;
        position: absolute;
        right: 0px;
        width: 400px;
        
        z-index: 3;
        top: 0px;
        bottom: 0px;
      }
      #timeline {
        z-index: 2;
        position: absolute;
        bottom: 0px;
        display: none;
        height: 300px;
        left: 0px;
        right: 0px;
        border: 1px solid gray;
      }
      .caption {
        z-index: 4;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <video id='preview' controls></video>
    <br>
    <input type='file' oninput='loadPreview(event);' id='fileInput'>
    <br>
    <div id='timeline'>
      
    </div>
    <div id='sideMenu'>
      
    </div>
    <div id='mainCaption' class='caption'>
      
    </div>
    <div id='secondaryCaption' class='caption'>
      
    </div>
      <script>
      /*
      All videoData attributes:
      cutTo
      timestamp
      playSound
        soundId
      zoomIn
      zoomOut
      caption
        captionText
        captionLength
      clip
      bgMusic
        bgmId
        bgmLength
      bgVoiceover
      */
      var videoData=[
        
        ];
        var cutting=false;
      var recording=false;
      var fg;
      function loadPreview(event) {
        document.getElementById('preview').src=URL.createObjectURL(event.target.files[0]);
      }
      function recordVideo() {
        if (recording==false) {
        document.getElementById('preview').removeAttribute('controls');
        document.getElementById('preview').setAttribute('width', '100%');
        document.getElementById('preview').setAttribute('height', '100%');
        document.getElementById('fileInput').display='none';
        document.getElementById('sideMenu').display='none';
        document.getElementById('preview').play();
        recording=true;
        }
        else {
          document.getElementById('preview').setAttribute('controls', 'true');
          document.getElementById('preview').removeAttribute('width');
          document.getElementById('preview').removeAttribute('height');
          document.getElementById('fileInput').display='block';
        document.getElementById('sideMenu').display='block';
          recording=false;
        }
      }
      function videoLoop() {
        setInterval(function(){
          var vidTimestamp=document.getElementById('preview').currentTime;
          for (var i=0;i<videoData.length;i++) {
            if (Math.round(videoData[i].tim)==vidTimestamp) {
             eval(videoData[i].editScript);
            }
          }
          parseVidData();
        },1)
      }
      
      document.onkeydown=function(e) {
        if (e.code=="Backquote") {
          recordVideo();
        }
        if (document.getElementById('preview').paused==false) {
        if (e.code=='ShiftLeft') {
          toggleCutting();
        }
        if (e.code=='ShiftRight') {
          toggleCaption();
        }
        parseVidData();
        }
      }
      function parseVidData() {
        var html=`
        `;
        for (var i=0;i<videoData.length;i++) {
          var htmlToAdd=`
          <span onclick='toggleEvt(${i})' class='clickSpan' evtActive='false'>Cut ↓</span>
          <div class='dataData' evtActive='false'>
          ${videoData[i].editType} at ${videoData[i].tim}
          <br>
          EditScript: <br> <textarea class='escriptedit'>${videoData[i].editScript}</textarea>
          <br>
          <button onclick='modEScript(${i})'>Modify EditScript</button>
          <br>
          <button onclick='deleteData(${i});parseVidData();'>Delete Event</button>
          </div>
          `;
          html+=htmlToAdd;
        }
        document.getElementById('sideMenu').innerHTML=html;
      }
      function toggleEvt(id) {
        if (document.getElementsByClassName('dataData')[id].evtActive=='false') {
          document.getElementsByClassName('dataData')[id].evtActive='true';
          document.getElementsByClassName('dataData')[id].style.display='block';
        }
        else {
          document.getElementsByClassName('dataData')[id].evtActive='false'
          document.getElementsByClassName('dataData')[id].style.display='none';
        }
      }
      function modEScript(n) {
        videoData[n].editScript=document.getElementsByClassName('escriptedit')[n].value;
      }
      function deleteData(i) {
        videoData.splice(videoData[i], 1)
      }
        // actual editing functions
        function toggleCutting() {
          var newData={};
          newData.editType='Cut';
          
          if (cutting==true) {
            cutting=false;
            newData.tim=fg;
            newData.editScript='cutTo('+document.getElementById('preview').currentTime+')';
            videoData.push(newData);
          }
          else if (cutting==false) {
            cutting=true;
            fg=document.getElementById('preview').currentTime;
          }
        }
        function playSound(soundId) {
          
        }
        function toggleCaption() {
          
        }
      </script>
  </body>
</html>