split js into separate file, oxjs folder needs to be symlinked inside content/ folder

chrome/content/app.js

@@ -0,0 +1,216 @@
+//init globals
+//var seekBar;
+var textArea;
+var Video;
+var filePath = false;
+var videoListener;
+
+$(document).ready(function() {
+                var loadingIcon = new Ox.LoadingIcon({
+                        size: "medium"
+                    })
+                    .css({
+                        marginLeft: "4px"
+                    });
+                var mainMenu = new Ox.MainMenu({
+                    extras: [],
+                    menus: [
+                        {
+                            id: "speedtrans",
+                            title: "Pad.ma",
+                            items: [
+                                { id: "about", title: "About" },
+                                {},
+                                { id: "contact", title: "Contact"}
+                            ]
+                        },
+                        {
+                            id: "video",
+                            title: "Video",
+                            items: [
+                                { id: "loadvideo", title: "Load Ogg Video"},
+                                {},
+                                { id: "convertvideo", title: "Convert and load Video" }
+                            ]
+                        },
+                        {
+                            id: "srt",
+                            title: "Subtitles",
+                            items: [
+                                { id: "load", title: "Open" },
+                                { id: "save", title: "Save" },
+                                { id: "save_as", title: "Save As..."}
+                            ]
+                        },
+                        {
+                            id: "export",
+                            title: "Export",
+                            items: [
+                                { id: "export_srt", title: "Export Srt" },
+                                { id: "export_encore", title: "Export Adobe Encore Subtitle Format" },
+                                {},
+                                { id: "add_time", title: "Add / Subtract time and export" }
+                            ]
+                        },
+                        {
+                            id: "help",
+                            title: "Help",
+                            items: [
+                                { id: "help", title: "Help" }
+                            ]
+                        }
+                    ],
+                    size: "large"
+                });
+  mainMenu.css({'position': 'absolute', 'top': '0px', 'left': '0px', 'width': '90%'}).appendTo('body');
+  Ox.Event.bind(null, "click_loadvideo", function() {
+    var videoFile = selectFile();
+    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);
+      });
+    });
+
+  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() {
+
+    });
+ 
+  $(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();
+      }
+
+    //PageUp - volume Up:
+    if (e.keyCode == 33) {
+      Video.volUp();
+      return false;
+      }
+
+    if (e.keyCode == 34) {
+      Video.volDown();
+      return false;
+      }
+    });
+
+  $('#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");
+    }
+  }

chrome/content/classes.js

@@ -1,8 +1,11 @@
 //elem = string (elementId to make TextArea)
 var TextArea = function(elem) {
-  this.elem = $('#' + elem);
+//  this.elem = $('#' + elem);
+  var that = this;
+  this.elem = new Ox.Input({'type': 'textarea', 'id': 'textArea'}).attr("id", elem).appendTo('#txtWrapper');
   this.hasFocus = false;  
   this.width = this.elem.width();
+  this.spans = [];
   this.init()  
   }
 
@@ -95,7 +98,7 @@ function cleanNewlines(str) {
 
 //takes an srt as param, loads into txtarea
 TextArea.prototype.fromSrt = function(srt) {
-  var spans = [];  
+  this.spans = [];  
   srt = cleanNewlines(srt);
   srt = strip(srt);
   var srt_ = srt.split('\n\n');
@@ -113,10 +116,11 @@ TextArea.prototype.fromSrt = function(srt) {
         }
         var is = toSeconds(i);
         var os = toSeconds(o);
-        spans[spans.length] = new Span(is, os, t, spans.length);
+        this.spans[this.spans.length] = new Span(is, os, t, spans.length);
         }
      }
   var out = '';
+  var spans = this.spans;
   for (span in spans) {
     if (spans.hasOwnProperty(span)) {
       var sp = spans[span];
@@ -194,7 +198,7 @@ TextArea.prototype.toSrt = function(fmt) {
   lines = text.split("\n");
   var i=0;
   var j=0;
-  spans = [];
+  var spans = this.spans;
   while (i < lines.length) {
     var l = lines[i];
     if (isValidTimecode(l.trim())) {
@@ -217,6 +221,7 @@ TextArea.prototype.toSrt = function(fmt) {
       i++;
       }
     }
+  this.spans = spans;
   var srt = spansToSrt(spans, fmt);
 //  console.log(srt);
   return srt;
@@ -225,11 +230,10 @@ TextArea.prototype.toSrt = function(fmt) {
 //Using spans as GLOBAL is ridiculous - please fix.
 TextArea.prototype.addTime = function(ms, start_no) {
 //  console.log(ms);
-  if (typeof spans == 'undefined') {
+  this.toSrt();
-    this.toSrt();
-    }
   var s = [];
-  for (var i=0; i<spans.length;i++) {
+  var spans = this.spans;
+  for (var i=0; i < spans.length;i++) {
     s[i] = {
       index: i,
       tcOutMs: spans[i].tcOutMs + ms,

chrome/content/styles.css

@@ -8,6 +8,7 @@ body {
   }
 
 #wrapper {
+  margin-top: 30px;
   width: 100%;
   height: 100%;
   }
@@ -22,6 +23,11 @@ body {
   text-align: center;
   }
 
+textarea {
+  height: 100%;
+  width: 100%;
+  }
+
 #helpWrapper {
   -moz-border-radius: 8px;
   font-size: 13px;
@@ -38,7 +44,7 @@ body {
   }
 
 #txtWrapper {
-  width: 50%;
+  width: 60%;
   margin-left: 20px;
   float: left;
   }
@@ -94,7 +100,7 @@ input.eventMeta, textarea.eventMeta {
   }
 
 #txt {
-  height: 500px;
+  height: 600px;
   width: 100%;
   }
 

chrome/content/transcribe.html

@@ -2,186 +2,27 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>
-    Pad.ma: Subtitle n more...
+    Pad.ma: Transcription Tool.
   </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="jquery-ui.js"></script> -->
+<script type="text/javascript" src="oxjs/build/js/ox.js"></script>
+<script type="text/javascript" src="oxjs/build/js/ox.ui.js"></script>
 <script type="text/javascript" src="staticfuncs.js"></script>
 <script type="text/javascript" src="classes.js"></script>
+<script type="text/javascript" src="app.js"></script>
 <link rel="stylesheet" href="styles.css" />
-<script type="text/javascript">
+<link rel="stylesheet" href="oxjs/build/css/ox.ui.css" />
-//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();
-    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();
-      }
-
-    //PageUp - volume Up:
-    if (e.keyCode == 33) {
-      Video.volUp();
-      return false;
-      }
-
-    if (e.keyCode == 34) {
-      Video.volDown();
-      return false;
-      }
-    });
-
-  $('#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.
+      Sorry you need <a href="http://getfirefox.com/">Firefox 3.5 or later</a> for this to work.
     </video>
-    <div id="seekBar">
+
-      
-    </div>
     <div id="timeCode">0:00:00.000</div>
     <div id="helpWrapper">
       Shortcuts: <br /><br />
@@ -196,14 +37,16 @@ function saveEncore() {
 
   </div>
   <div id="txtWrapper">
-    <textarea id="txt"></textarea><br /> <br />
+
+<!--
     <div id="buttonsWrapper">
-<!--       <button id="fillMeta" class="button">Enter Metadata</button> -->
+       <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 />