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