Untitled
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>