<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Pad.ma: Subtitle n more... </title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="player.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="staticfuncs.js"></script> <script type="text/javascript" src="classes.js"></script> <link rel="stylesheet" href="styles.css" /> <script type="text/javascript"> //init globals var seekBar; var textArea; var Video; var filePath = false; var spans; var videoListener; $(document).ready(function() { textArea = new TextArea("txt"); $('#saveFile').click(saveFile); $('#saveSrt').click(saveSrt); $('#addTime').click(function() { var timeToAdd = npt2ms($.trim($('#timeToAdd').val())); var startNo = parseInt($('#startNo').val()); var r = textArea.addTime(timeToAdd, startNo); $('#addTimeResult').val(r); }); $('#showMore').toggle(function() { $(this).text("Show Less Features"); $('#additionalFeatures').show("fast"); }, function() { $(this).text("Show More Features"); $('#additionalFeatures').hide("fast"); }); $('#saveEncore').click(saveEncore); $('#selectFile').click(function() { var videoFile = selectFile(); alert(videoFile); filePath = getFileNameSansExt(videoFile); var srtTxtFilename = filePath + ".srt.txt"; var srtFilename = filePath + ".srt"; var metaFilename = filePath + ".txt"; if (checkFileExists(srtTxtFilename)) { loadSrtTxt(srtTxtFilename); } else if (checkFileExists(srtFilename)) { loadSrt(srtFilename); } if (checkFileExists(metaFilename)) { loadMeta(metaFilename); } $('#video').attr("src", "file://" + videoFile); document.getElementById("video").load(); $('#video').one("loadedmetadata", function() { $('#selectFileDiv').fadeOut(); Video = new VideoPlayer(); Video.init("video"); // // seekBar = new SeekBar("seekBar"); Video.setDuration(Video.player.duration); $('#insertTc').click(textArea.insertTc); /* $('#video').click(function() { Video.togglePause(); }); */ $('#video').dblclick(function() { textArea.insertTc(); }); videoListener = setInterval(Video.listener, 250); }); }); $(document).keyup(function(e) { //Esc if (e.keyCode == 27 && textArea.hasFocus) { Video.togglePause(); } //Ins if (e.keyCode == 45) { if (!textArea.isTc()) { textArea.insertTc(); } } //Ctrl - Seek Back if (e.keyCode == 17) { var seekTime = parseInt(parseFloat($('#seekTime').val()) * 1000); var currTime = Video.get(); var newTime = currTime - seekTime; Video.set(newTime); } //Alt - Seek Fwd. if (e.keyCode == 18) { var seekTime = parseInt(parseFloat($('#seekTime').val()) * 1000); var currTime = Video.get(); var newTime = currTime + seekTime; Video.set(newTime); } //Space - togglePause if no focus on TA if (e.keyCode == 32 && textArea.hasFocus == false) { Video.togglePause(); } }); $('#fillMeta').click(function() { $('#txtWrapper').hide(); $('#eventMetadata').show(); }); $('#doneMetadata').click(function() { $('#eventMetadata').hide(); $('#txtWrapper').show(); }); $('.eventMeta').each(function() { var defVal = $(this).attr('data-default'); $(this).val(defVal); $(this).focus(function() { if ($(this).val() == $(this).attr("data-default")) { $(this).val(''); } }).blur(function() { if ($(this).val() == '') { $(this).val($(this).attr('data-default')); } }); }); }); function saveFile() { var savePath = filePath + ".srt.txt"; var content = $('#txt').val(); if (mozillaSaveFile(savePath, content)) { alert("saved file at " + savePath); } else { alert("error saving file"); } } function saveSrt() { var srtPath = filePath + ".srt"; var content = textArea.toSrt(); if (mozillaSaveFile(srtPath, content)) { alert("export .srt file to " + srtPath); } else { alert("error exporting srt"); } } function saveEncore() { var encPath = filePath + ".enc.txt"; var content = textArea.toSrt("enc"); if (mozillaSaveFile(encPath, content)) { alert("saved encore compatible subtitle file at " + encPath); } else { alert("error creating encore compatible subtitle file"); } } </script> </head> <body> <div id="wrapper"> <div id="videoWrapper"> <div id="selectFileDiv"> <button id="selectFile">Select File</button> </div> <video id="video" src="" controls="true"> Sorry you need <a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 3.5 Beta</a> for this to work. </video> <div id="seekBar"> </div> <div id="timeCode">0:00:00.000</div> <div id="helpWrapper"> Shortcuts: <br /><br /> Esc: Pause / Unpause <br /> Insert: Insert time-code<br /> Double-click in Textarea: insert time-code <br /> Double-click on video: insert time-code<br /> Double-click on time-code in textarea: Seek video to time-code. <br /> Ctrl / Alt: Seek back / forward <input id="seekTime" value="1" /> seconds. </div> </div> <div id="txtWrapper"> <textarea id="txt"></textarea><br /> <br /> <div id="buttonsWrapper"> <!-- <button id="fillMeta" class="button">Enter Metadata</button> --> <button id="saveFile" class="button">Save File</button> <button id="saveSrt" class="button">Export SRT</button> <button id="saveEncore" class="button">Export to Encore</button> <button id="showMore" class="button">Show More Features</button> </div> <div id="additionalFeatures"> <div id="addTimeWrap"> Time to add: <input id="timeToAdd" /><br /> Start no: <input id="startNo" /> <button id="addTime">Add</button><br /> <textarea id="addTimeResult"></textarea> </div> </div> </div> <div id="eventMetadata"> <input id="title" data-default="Title" class="eventMeta" /><br /> <input id="director" data-default="Director" class="eventMeta" /><br /> <input id="collection" data-default="Collection" class="eventMeta" /><br /> <input id="source" data-default="Source" class="eventMeta" /><br /> <textarea id="description" data-default="Event Description" class="eventMeta"></textarea><br /> Date: <input id="dateYear" data-default="YYYY" class="eventMeta" /> <input id="dateMonth" data-default="MM" class="eventMeta" /> <input id="dateDay" data-default="DD" class="eventMeta" /><br /> Logged by: <input id="loggedBy" data-default="Your name" class="eventMeta" /><br /><br /> <button id="doneMetadata" class="button">Done Adding Metadata</button> </div> </div> </div> </body> </html>