remove unused code and use folders

js/app.js

@@ -0,0 +1,358 @@
+//init globals
+//var seekBar;
+var textArea;
+var Video;
+var filePath = false;
+var videoListener;
+var seekBar;
+var globalUser;
+var srtFilePath = undefined;
+var videoPath = undefined;
+var videoHash = undefined;
+
+function adjustSize() {
+  var baseHeight = $(window).height() - 24 - 16;
+  $('#txt').height(baseHeight);
+  var baseWidth = $(window).width() - 400 - 64;
+  $('#txt').width(baseWidth);
+}
+
+Ox.load({
+    UI: {theme: 'oxlight'},
+}, function() {
+  Ox.$body.show();
+  globalUser = new User();
+  adjustSize();
+  $(document).keydown(function(e) {
+    if (!Video)
+      return; 
+    //Esc
+    if (e.keyCode == 27) {
+      Video.togglePause();
+      if (!textArea.hasFocus) {
+        textArea.elem.focus();
+      }
+      e.preventDefault();
+    }
+
+    //The weird `~ key, currently in as a silly hack because Ranjana's Esc key does not work.
+    if (e.keyCode == 192) {
+      Video.togglePause();
+      e.preventDefault();
+    }
+
+    //Ins or TAB
+    if (e.keyCode == 45 || e.keyCode == 9) {
+      if (!textArea.isTc()) {
+        textArea.insertTc();
+        return false;
+      } else {
+        return false;
+      }
+    }
+    //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;
+    }
+  });
+  $(window).bind('resize', adjustSize);
+  var mainMenu = new Ox.MainMenu({
+    extras: [],
+    menus: [
+          {
+              id: "speedtrans",
+              title: "SpeedTrans",
+              items: [
+                  { id: "about", title: "About" },
+                  {},
+                  { id: "contact", title: "Contact", disabled: true}
+              ]
+          },
+          {
+              id: "open",
+              title: "Open",
+              items: [
+                  { id: "load_video", title: "Video", file: {width: 192}},
+                  { id: "load_srt", title: "Open SRT File", file: {width: 192}},
+              ]
+          },
+          {
+              id: "save",
+              title: "Save",
+              items: [
+                  { id: "save_srt", title: "Save SRT"},
+              ]
+          },
+          {
+              id: "edit",
+              title: "Edit",
+              items: [
+                { id: "preferences", title: "Preferences" }
+              ]
+          },
+          {
+              id: "tools",
+              title: "Tools",
+              items: [
+                  { id: "add_time", title: "Add / Subtract time and export", disabled: true },
+                  { id: "export_encore", title: "Export Adobe Encore Subtitle Format" },
+                  { id: "export_html", title: "Export HTML" },
+                  {},
+                  { id: "load_cuts", title: "Load cuts from pan.do/ra", disabled: false }
+              ]
+          },
+          {
+              id: "upload",
+              title: "Upload",
+              items: [
+                  { id: "upload_padma", title: "Upload Transcript to Pad.ma", disabled: true }
+              ]
+          },
+          {
+              id: "help",
+              title: "Help",
+              items: [
+                  { id: "shortcuts", title: "Keyboard Shortcuts" }
+              ]
+          }
+      ],
+      size: "large"
+  })
+    .css({'position': 'fixed', 'top': '0px', 'left': '0px', 'right': '0px', 'height': '20px'})
+    .appendTo(Ox.$body)
+    .bindEvent({
+        click: function(data) {
+            if (data.id == 'load_video') {
+                saveTxt();
+                videoPath = undefined;
+                videoHash = undefined;
+                srtFilePath = undefined;
+                textArea.elem.val('');
+                var path = data.files[0].name;
+                if ($.inArray(getFileNameExt(path.toLowerCase()), [
+                    'oga', 'ogg', 'ogv', 'ogx', 'wav', 'webm', 'mp4', 'm4v'
+                ]) != -1) {
+                  loadVideo(data.files[0]);
+                } else {
+                    alert('can only open video formats supported by browser');
+                }
+            } else if(data.id == 'about') {
+                var html = Ox.tmpl("dialog_about", {});
+                stDialog("About", html);
+            } else if(data.id == 'preferences') {
+                var prefs = globalUser.get_prefs(["fontSize", "theme", "autosave"]);
+                var html = Ox.tmpl("dialog_preferences", {});
+                stDialog("Preferences", html);
+                $('.pref_select').each(function() {
+                  var that = this;
+                  var pref = $(this).attr("data-pref");
+                  var prefVal = prefs[pref];
+                  $(this).children('option').each(function() {
+                    if ($(this).val() == prefVal) {
+                      $(this).attr("selected", "selected");
+                    }
+                  });
+                });
+                $('.pref_select').change(function() {
+                  var key = $(this).attr("data-pref");
+                  var val = $(this).val();
+                  globalUser.set_pref(key, val);
+                });
+            /*
+                $('#pref_fontSize > option').each(function() {
+                  if ($(this).val() == prefs.fontSize) {
+                    $(this).attr("selected", "selected");
+                  }
+                });
+                $('#pref_theme > option').each(function() {
+                  if ($(this).val() == prefs.theme) {
+                    $(this).attr("selected", "selected");
+                  }
+                });
+            */  
+            } else if(data.id == 'shortcuts') {
+                var html = Ox.tmpl("dialog_shortcuts", {});
+                stDialog("Keyboard Shortcuts", html);
+            } else if(data.id == 'save_srt') {
+                var content = textArea.toSrt();
+                saveContent(content, 'text/plain', getFileNameSansExt(videoPath) + '.srt');
+            } else if(data.id == 'load_srt') {
+                loadSrt(data.files[0]);
+            } else if(data.id == 'export_encore') {
+                var content = textArea.toSrt("enc");
+                saveContent(content, 'text/plain', getFileNameSansExt(videoPath) + '.enc.txt');
+            } else if(data.id == 'export_html') {
+                var content = textArea.toHTML();
+                saveContent(content, 'text/html', getFileNameSansExt(videoPath) + '.html');
+            } else if(data.id == 'load_cuts') {
+                var html = Ox.tmpl("dialog_load_cuts");
+                var loadDialog = Ox.Dialog({
+                  buttons: [
+                        Ox.Button({
+                            title: "Cancel"
+                        }).bindEvent({
+                            click: function() {
+                                loadDialog.close()
+                            }
+                        }),
+                        Ox.Button({
+                            title: "Load Cuts"
+                        }).bindEvent({
+                            click: function() {
+                              var url = loadDialog.find('input')[0].value.trim();
+                              var match = url.match(/(.*)\/([A-Z]+)$/);
+                              if (match) {
+                                loadCuts(match[1] + '/api/', match[2]);
+                              }
+                              loadDialog.close();
+                            }
+                        }),
+                  ],
+                  content: Ox.Element().append(html)
+                }).open();
+            }
+        }
+    });
+  textArea = new TextArea("txt");
+  textArea.elem.val('');
+  globalUser.init();
+
+  //autosave every 1 minute.
+  window.autosaveInterval = setInterval(function() {
+    if (typeof(videoHash) !== 'undefined') {
+      saveTxt();
+    }
+  }, 60000);
+
+});
+
+function loadTxt() {
+  var txt = globalUser.get_txt(videoHash);
+  //console.log('loadTxt', videoHash, txt.length);
+  textArea.elem.val(txt);
+}
+
+function saveTxt() {
+  var content = textArea.toSrt();
+  var txt = textArea.elem.val();
+  //console.log('saveTxt', videoHash, txt.length);
+  globalUser.set_txt(videoHash, txt);
+}
+
+function saveContent(content, type, path) {
+    var uriContent = 'data:'+type+';base64,' + btoa(content);
+    var pom = document.createElement('a');
+    pom.setAttribute('href', content);
+    pom.setAttribute('download', path);
+    if (document.createEvent) {
+        var event = document.createEvent('MouseEvents');
+        event.initEvent('click', true, true);
+        pom.dispatchEvent(event);
+    } else {
+        pom.click();
+    }
+}
+
+function stDialog(titleTxt, text) {
+    var that = Ox.Dialog({
+        buttons: [
+            Ox.Button({
+                title: "Close"
+            }).bindEvent({
+                click: function() {
+                    that.close();
+                }
+            })
+          ],
+        title: titleTxt,
+        content: Ox.Element().css({padding: '16px'}).append(text)
+    }).open()
+    return that;
+}
+
+function loadVideo(videoFile) {
+  Ox.oshash(videoFile, function(hash) {
+    videoHash = hash;
+    var storageKey = 'txt_' + videoHash;
+    if (storageKey in storage) {
+      loadTxt();
+    }
+  });
+  var videoUrl = URL.createObjectURL(videoFile);
+  videoPath = videoFile.name;
+  $('#video').attr("src", videoUrl);
+  $('#filepath').text(videoFile.path);
+  document.getElementById("video").load();
+  $('#video').one("loadedmetadata", function() {
+    Video = new VideoPlayer();
+    Video.init("video");  
+    Video.setDuration(Video.player.duration);  
+    $('#insertTc').click(textArea.insertTc);
+    videoListener = setInterval(Video.listener, 250);
+  });
+};
+
+
+/*
+Functions to generate preview while encoding: see http://firefogg.org/examples
+*/
+  //intialize interval to update preview and add event liseners.
+  //any previous listeners and intervals are cleared
+  var previewI=null;
+
+  function seekToEnd() {
+//    console.log("seeking to end of video");
+    var v = document.getElementById('previewVideo');
+    v.currentTime = v.duration-0.4;
+  }
+  //callback function render frame into canvas after seeking
+  function getFrame() {
+    var v = document.getElementById('previewVideo');
+    var canvas = document.getElementById('previewCanvas');
+    canvas.width = 400;
+    canvas.height = canvas.width * v.videoHeight/v.videoWidth;
+    var ctx = canvas.getContext("2d");
+    ctx.drawImage(v, 0, 0, canvas.width, canvas.height);
+  }
+
+/*
+End Preview functions
+*/
+
+
+$(window).unload(function() {
+    console.log('unload');
+  if (typeof filePath != 'undefined' && typeof srtFilePath != 'undefined') {
+    globalUser.set_prefs({
+      'recentVideo': $('#video').attr("src").replace("file://", ""),
+      'recentSrt': srtFilePath
+    });
+  }
+  saveTxt();
+});

js/classes.js

@@ -0,0 +1,448 @@
+var url = "https://speedtrans.pad.ma";
+
+var storage = window.localStorage;
+
+//elem = string (elementId to make TextArea)
+var TextArea = function(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()  
+  }
+
+TextArea.prototype.init = function() {
+  var that = this;
+  var e = this.elem;
+  var tc;
+  e.focus(function() {
+    that.hasFocus = true;
+    }).blur(function() {
+    that.hasFocus = false;
+    });
+  e.dblclick(function(e) {
+    var tc = that.isTc();
+    if (tc) {
+      Video.set(tc);
+      }
+    });
+  }
+
+
+//returns tc in ms if cursor is at a time-code, else returns false
+TextArea.prototype.isTc = function() {
+  var that = this;
+  var e = this.elem;
+  var eDom = e.get(0);  
+  var val = e.val();
+  var pos = eDom.selectionStart;
+  var word = this.getWord(pos);
+  if (isValidTimecode(word)) {
+    return npt2ms(word);
+    } else {
+    return false;
+    }
+  }
+
+//inserts current timecode at cursor position
+TextArea.prototype.insertTc = function(tcNpt) {
+  var that = this;
+  var e = that.elem;
+  var eDom = e.get(0);
+  var scrollTop = eDom.scrollTop;
+  var val = this.elem.val();
+  var pos = eDom.selectionStart;
+  if(!tcNpt) {
+    tcNpt = ms2npt(Video.get());
+  }
+  var newVal = val.substring(0,pos) + "\n" + tcNpt + "\n" + val.substring(pos, val.length);   
+  e.val(newVal);
+  e.focus();
+  eDom.selectionStart = pos + tcNpt.length + 2;
+  eDom.selectionEnd = pos + tcNpt.length + 2;
+  eDom.scrollTop = scrollTop + 15;   
+  }
+
+//gets the word at character pos (int) [in val (str)]
+TextArea.prototype.getWord = function(pos, val) {
+  if (!val) {
+    val = this.elem.val();
+    }
+  var c;
+  var i = pos;
+  var j = pos;
+  while (c != " " && c != "\n") {
+    if (i==0) {
+      i = -1;
+      break;
+      }   
+    i--;      
+    c = val.substring(i,i+1);    
+    }
+  var firstLetter = i+1;
+  var d;
+  while (d != " " && d != "\n") {
+    if (j >= val.length) {
+      break;
+      }
+    j++;    
+    d = val.substring(j,j+1);    
+    }
+  var lastLetter = j;
+  var word = val.substring(firstLetter, lastLetter);
+  return word;
+  }
+
+function cleanNewlines(str) {
+  var s = str.replace(/\r\n|\r|\n/g, '\n');
+  return s;
+  }
+
+//takes an srt as param, loads into txtarea
+TextArea.prototype.fromSrt = function(txt) {
+  var that = this;
+  this.spans = [];  
+  var cleaned = cleanNewlines(txt);
+  var srt = strip(cleaned);
+  var srt_ = srt.split('\n\n');
+  var s;
+  for(s in srt_) {
+    st = srt_[s].split('\n');
+    if(st.length >=2) {
+      var n = st[0];
+      var i = strip(st[1].split(' --> ')[0]);
+      var o = strip(st[1].split(' --> ')[1]);
+      var t = st[2];
+      if(st.length > 2) {
+        for(j=3; j<st.length;j++) {
+          t += '\n'+st[j];
+          }
+        }
+        var is = toSeconds(i);
+        var os = toSeconds(o);
+        if (parseInt(n) - this.spans.length == 1) {
+          this.spans[this.spans.length] = new Span(is, os, t, that.spans.length);
+        } else {
+          return false;
+        }
+     }
+  }
+  var out = '';
+  var spans = this.spans;
+  for (span in spans) {
+    if (spans.hasOwnProperty(span)) {
+      var sp = spans[span];
+      out += ms2npt(sp.tcInMs) + "\n";
+      out += sp.text;
+      out += "\n";
+//If the outpoint of current span is equal to inpoint of next span, dont print out timecode, and just add the extra \n to go to next span.
+      if (span < spans.length - 1) {
+        var p = parseInt(span) + 1;
+        if (spans[p].tcInMs != sp.tcOutMs) {
+          out += ms2npt(sp.tcOutMs) + "\n\n";
+        } else {
+          out += "\n";
+        }
+      } else if (parseInt(sp.tcOutMs) < parseInt(Video.player.duration * 1000)) {
+          out += "\n" + ms2npt(sp.tcOutMs) + "\n\n";
+      }
+    }
+  }
+  this.elem.val(out);
+  if (this.elem.val == '' || this.spans.length == 0) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+function strip(s) {
+  return s.replace(/^\s+|\s+$/g,"");
+  }
+
+function toSeconds(t) {
+  var s = 0.0;
+  if(t) {
+    var p = t.split(':');
+    for(i=0;i<p.length;i++) {
+      s = s * 60 + parseFloat(p[i].replace(',', '.'))
+      }
+    }
+  return s;
+  }
+
+
+function spansToSrt(arr, fmt, start_no) {
+  if (typeof start_no == 'undefined') {
+    start_no = 1;
+    }
+  var srt = '';
+  var srtNo = start_no;
+  for (var k=0; k < arr.length; k++) {
+    var s = arr[k];
+    if (s.text.trim() == '') {      
+      } else {
+      var text = s.text.trim();
+      linebreaksRegex = new RegExp('\n+', "g")
+      text = text.replace(linebreaksRegex, "\n");
+      if (!s.tcOutMs) {
+        s.tcOutMs = parseInt(Video.player.duration * 1000);
+        }
+      if (fmt == 'srt') {
+        srt += srtNo + " ";
+        srt += "\n";
+        srt += "0" + ms2npt(s.tcInMs).replace(".", ",") + " --> " + "0" + ms2npt(s.tcOutMs).replace(".", ",");
+        srt += "\n";
+        srt += text;
+        srt += "\n\n";
+        }
+      else if (fmt == 'enc') {
+        srt += srtNo + ms2frames(s.tcInMs) + " " + ms2frames(s.tcOutMs) + " " + text;
+        srt += "\n\n";
+        }
+      srtNo++;
+      }
+    }
+  return srt;
+  }
+
+//returns textarea formatted to .srt
+TextArea.prototype.toSrt = function(fmt) {
+  if (!fmt) var fmt = 'srt';
+  var text = cleanNewlines(this.elem.val());
+  var lines = [];
+  lines = text.split("\n");
+  var i=0;
+  var j=0;
+  var spans = this.spans = [];
+  while (i < lines.length) {
+    var l = lines[i];
+    if (isValidTimecode(l.trim())) {
+      var tcIn = l.trim();
+      var t = "";
+      var thisLine = '';
+      while (!isValidTimecode(thisLine.trim())) {
+        i++;
+        if (i >= lines.length) {
+          break;
+          } 
+        thisLine = lines[i];
+        if (!isValidTimecode(thisLine.trim())) {
+          t += thisLine + "\n";
+          }       
+        }
+      var tcOut = $.trim(thisLine);
+      spans[j] = new Span(tcIn, tcOut, t, j);
+      j++;
+      } else {
+      i++;
+      }
+    }
+  this.spans = spans;
+  var srt = spansToSrt(spans, fmt);
+//  console.log(srt);
+  return Ox.encodeUTF8(srt);
+}
+
+
+TextArea.prototype.addTime = function(ms, start_no) {
+//  console.log(ms);
+  this.toSrt();
+  var s = [];
+  var spans = this.spans;
+  for (var i=0; i < spans.length;i++) {
+    s[i] = {
+      index: i,
+      tcOutMs: spans[i].tcOutMs + ms,
+      text: spans[i].text,
+      tcInMs: spans[i].tcInMs + ms
+      }
+    }
+  return spansToSrt(s, 'srt', start_no);
+}
+
+
+TextArea.prototype.toHTML = function() {
+  var spans = this.spans;
+  var html = '';
+  var span, txt;
+  for (var i=0; i<spans.length; i++) {
+    span = spans[i];
+    txt = '';
+    txt += '<p>\n';
+    txt += '<a href="https://pad.ma/PADMA_VIDEO_ID/' + ms2npt(span.tcInMs) + "-" + ms2npt(span.tcOutMs) + '">';
+    txt += (i + 1).toString();
+    txt += "</a>\n";
+    txt += '<br />\n';
+    txt += span.text + "\n";
+    txt += "</p>\n\n";
+    html += txt;
+  }
+  return Ox.encodeUTF8(html);
+}
+
+
+//creates new Span (tcIn and tcOut in npt format)
+var Span = function(tcIn, tcOut, text, index) {
+  this.index = index;
+  this.tcOutMs = npt2ms(tcOut);
+  this.text = text;
+  this.tcInMs = npt2ms(tcIn);
+  }
+
+var SeekBar = function(elem) {
+  this.elem = $('#' + elem);
+  this.pointerId = "seekPointer";
+  this.width = this.elem.width();
+  this.init()
+  }
+
+SeekBar.prototype.init = function() {
+  var that = this;
+  var e = $('<div />');
+  e.attr("id", that.pointerId);
+  e.draggable({
+    containment: 'parent',
+    axis: 'horizontally',
+    drag: function() {
+      clearInterval(videoListener);
+      var pos = that.get();
+      $('#timeCode').html(ms2npt(pos));
+      },
+    stop: function() {
+      var pos = that.get();
+      Video.set(pos);
+      videoListener = setInterval(Video.listener, 250);
+      }
+    });  
+  that.elem.append(e);
+  this.pointerElem = e;
+  }
+
+//gets current time-code (int) of seekbar position
+SeekBar.prototype.get = function() {
+  var cssPos = parseInt(this.pointerElem.css("left"));
+  var pos = parseInt((cssPos / this.width) * (Video.player.duration * 1000));
+  return pos;
+  }
+
+//sets seek bar css pos according to current time-code
+SeekBar.prototype.set = function(ms) {
+  var cssPos = parseInt(((ms / 1000) / Video.player.duration) * this.width);
+  this.elem.css("left", cssPos + "px");
+  }
+
+/*
+var KeyboardController = function() {
+  this.
+  }
+*/
+
+var User = function() {
+  this.padmaUser = typeof user != 'undefined' ? user : null;
+  this.hostname = 'chrome://speedtrans';
+  this.defaults = {
+    'fontSize': '13',
+    'theme': 'oxlight',
+    'recentVideo': '',
+    'recentSrt': '',
+    'autosave': 5,
+    'direction': 'ltr'
+  };
+  var autoSaveInterval = -1;
+  this.callbacks = {
+    'fontSize': function(newSize) {
+      textArea.elem.css("font-size", newSize + "px");
+    },
+    'theme': function(theme) {
+      if(['oxdark', 'oxmedium', 'oxlight'].indexOf(theme) == -1) {
+          console.log('only supporting oxlight, oxmedium, oxdark, but ' + theme + ' was requested');
+          theme = 'oxlight';
+      }
+      Ox.Theme(theme);
+    },
+    'recentVideo': $.noop,
+    'recentSrt': $.noop,
+    'direction': function(val) {
+      textArea.elem.css("direction", val);
+    }
+  }
+}
+
+User.prototype.init = function() {
+  var prefs = ['fontSize', 'theme', 'direction'];
+  for (var i = 0; i < prefs.length; i++) {
+    var key = prefs[i];
+    var val = this.get_pref(key);
+    this.callbacks[key](val);
+  }
+}
+
+User.prototype.set_pref = function(key, val) {
+  var that = this;
+  storage[key] = val;
+  this.callbacks[key](val);
+}
+
+User.prototype.get_pref = function(key) {
+  var that = this;
+  if (typeof storage[key] === 'undefined') {
+    storage[key] = that.defaults[key];
+  }
+  return storage[key];
+}
+
+User.prototype.set_prefs = function(keyvals) {
+  for (key in keyvals) {
+    if (keyvals.hasOwnProperty(key)) {
+      this.set_pref(key, keyvals[key]);
+    }    
+  }
+}
+
+User.prototype.get_prefs = function(keys) {
+  var ret = {};
+  for (var i=0; i < keys.length; i++) {
+    var key = keys[i];
+    ret[key] = this.get_pref(key);   
+  }
+  return ret;
+}
+
+User.prototype.set_txt = function(filename, txt) {
+  var that = this;
+  storage['txt_' + filename] = txt;
+}
+
+User.prototype.get_txt = function(filename) {
+  var that = this;
+  return storage['txt_' + filename];
+}
+
+function loadCuts(url, id) {
+    function pandora_api(action, data, callback) {
+        $.ajax({
+            type: "POST",
+            url: url,
+            data: {action: action, data: JSON.stringify(data)},
+            success: callback,
+            dataType: 'json'
+        });
+    }
+    pandora_api('get', {id: id, keys: ['cuts']}, function(result) {
+        var txt = '';
+        result.data.cuts.forEach(function(cut) {
+            textArea.insertTc(ms2npt(cut*1000));
+        });
+    });
+}
+
+function loadSrt(file) {
+    var reader = new FileReader();
+    reader.onload = function(data) {
+        textArea.fromSrt(data.target.result);
+    };
+    reader.readAsBinaryString(file);
+}

js/dnd.js

@@ -0,0 +1,14 @@
+$(function() {
+    document.addEventListener('dragenter', function(event) {
+        event.preventDefault();
+    });
+    document.addEventListener('dragover', function(event) {
+        event.preventDefault();
+    });
+    document.addEventListener('drop', function(event) {
+        if (event.dataTransfer.files && event.dataTransfer.files.length) {
+            event.preventDefault();
+            loadVideo(event.dataTransfer.files[0])
+        }
+    });
+});

js/ox.extra.js

@@ -0,0 +1,36 @@
+/*
+John Resig's micro-templating: http://ejohn.org/blog/javascript-micro-templating/
+*/
+(function(){
+  var cache = {};
+ 
+  Ox.tmpl = function tmpl(str, data){
+    // Figure out if we're getting a template, or if we need to
+    // load the template - and be sure to cache the result.
+    var fn = !/\W/.test(str) ?
+      cache[str] = cache[str] ||
+        tmpl(document.getElementById(str).innerHTML) :
+     
+      // Generate a reusable function that will serve as a template
+      // generator (and which will be cached).
+      new Function("obj",
+        "var p=[],print=function(){p.push.apply(p,arguments);};" +
+       
+        // Introduce the data as local variables using with(){}
+        "with(obj){p.push('" +
+       
+        // Convert the template into pure JavaScript
+        str
+          .replace(/[\r\t\n]/g, " ")
+          .split("<%").join("\t")
+          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
+          .replace(/\t=(.*?)%>/g, "',$1,'")
+          .split("\t").join("');")
+          .split("%>").join("p.push('")
+          .split("\r").join("\\'")
+      + "');}return p.join('');");
+   
+    // Provide some basic currying to the user
+    return data ? fn( data ) : fn;
+  };
+})(); 

js/player.js

@@ -0,0 +1,132 @@
+function Player() {
+  this.supportsOverlay = false;
+  this.muted = false;
+}
+Player.prototype.init = function(elemID) {
+  //make overlay settings happy..., add a dummy element
+  this.player = document.getElementById(elemID);
+}
+Player.prototype.play = function() { }
+Player.prototype.pause = function() { }
+Player.prototype.get = function() { }
+Player.prototype.listener = function() { }
+Player.prototype.set = function(pos) { }
+Player.prototype.mute = function(pos) { }
+Player.prototype.volUp = function() { }
+Player.prototype.volDown = function() { }
+Player.prototype.seekFwd = function(ms) {
+  var currentMs = this.get();
+  var newMs = currentMs + ms;
+  this.set(newMs);
+  }
+
+Player.prototype.seekBack = function(ms) {
+  var currentMs = this.get();
+  var newMs = currentMs - ms;
+  this.set(newMs);
+  }
+
+Player.prototype.unmute = function(pos) { }
+/* Player.prototype.url = function(pos) {
+  var timecode = pos2npt(pos);
+  var link = video.url;
+  if(pos > 0)
+    link += "?t=npt:" + timecode;
+  return link;
+};
+*/
+
+function VideoPlayer() {
+  this.supportsOverlay = true;
+  this.isPlaying = false;
+}
+
+VideoPlayer.prototype = new Player();
+VideoPlayer.prototype.init = function(elemID) {
+  this.player = document.getElementById(elemID);
+  this.width = $(this.player).attr('width');
+  this.height = $(this.player).attr('height');
+}
+
+VideoPlayer.prototype.volUp = function() {
+  var vol = this.player.volume;
+  if (vol <= 0.9) { var newVol = vol + 0.1 } else { return false; }
+  this.player.volume = newVol;
+  return true;  
+  }
+
+VideoPlayer.prototype.volDown = function() {
+  var vol = this.player.volume;
+  if (vol >= 0.1) { var newVol = vol - 0.1 } else { return false; }
+  this.player.volume = newVol;
+  return true;
+  }
+
+VideoPlayer.prototype.set = function(pos) {
+/*  var url = this.url(pos);
+  var autoplay = 'true';
+  if(this.isPlaying)
+    varautoplay = 'true';
+  if(this.player) {
+    var element = $(this.player);
+    this.player.pause();
+  } else {
+    var element = $('#' + playerID);
+  }
+  this.player = document.createElement('video');
+  this.player.id = playerID;
+  this.player.width = this.width;
+  this.player.height = this.height;
+  this.player.setAttribute('src', url);
+  //this.player.setAttribute('autoplay', autoplay);
+  element.replaceWith(this.player); */
+  this.player.currentTime = pos / 1000;
+}
+
+
+VideoPlayer.prototype.get = function() {
+  try {
+    return parseInt(this.player.currentTime * 1000);
+  } catch(err) { }
+  return -1;
+}
+
+VideoPlayer.prototype.play = function() {
+  this.isPlaying = true;
+  this.player.play();
+}
+
+VideoPlayer.prototype.pause = function() {
+  this.isPlaying = false;
+  this.player.pause();
+}
+
+VideoPlayer.prototype.mute = function(pos) {
+  this.player.muted = true;
+  this.muted = true;
+}
+
+VideoPlayer.prototype.unmute = function(pos) {
+  this.player.muted = false;
+  this.muted = false;
+}
+
+VideoPlayer.prototype.togglePause = function() {
+  if (Video.isPlaying == true) {
+    Video.pause();
+    } else {
+    Video.play();
+    }
+  }
+
+VideoPlayer.prototype.listener = function() {
+  var ms = Video.get();  
+  var npt = ms2npt(ms);
+  $('#timeCode').html(npt);
+  var seekBarPos = parseInt((ms / (Video.duration * 1000)) * 320);
+  $('#seekPointer').css("left", seekBarPos + "px");
+  }
+
+VideoPlayer.prototype.setDuration = function(duration) {
+  this.duration = duration;
+  }

js/staticfuncs.js

@@ -0,0 +1,94 @@
+function npt2ms(npt) {
+  var ms = 0.0
+  npt = String(npt);
+  var p = npt.split(':')
+  for(i=0;i<p.length;i++)
+    ms = ms * 60 + parseFloat(p[i])
+  return ms * 1000;
+}
+
+function ms2npt(ms) {
+  var it, ss, mm, hh, npt;
+  var it = parseInt(ms / 1000)
+  ms = ms - it * 1000;
+  if (ms.toString().length > 3) {
+    ms = ms.toString().substring(0,3);
+    }
+  ss = it % 60;
+  mm = ((it - ss) / 60) % 60;
+  hh = ((it - (mm * 60) - ss) / 3600) % 60;
+  npt = hh+':'+strpad(mm.toString(), '0', 2, 'left')
+  npt += ':'+strpad(ss.toString(), '0', 2, 'left')
+  npt += '.'+strpad(ms.toString(), '0', 3, 'left')
+  return npt;
+}
+
+function ms2frames(ms, fmt) {
+    if (!fmt) var fmt = "PAL";
+    var npt = ms2npt(ms);
+    var dotpos = npt.lastIndexOf(".");
+    var mmStr = npt.substring(dotpos + 1, npt.length);
+    var mmInt = parseInt(mmStr);
+    if (fmt == 'PAL') {
+      var frames = parseInt((mmInt / 1000) * 24);
+    } else if (fmt == "NTSC") {
+      var frames = parseInt((mmInt / 1000) * 29.97);
+    }
+    var framesTc = '';
+    var joinToken = ":";
+    var framesTc = npt.substring(0, dotpos ) + joinToken + frames;
+    return framesTc;
+} 
+
+function ms2time(ms) {
+    var npt = ms2npt(ms)
+    return npt.substr(npt.length-9, npt.length-6);
+}
+
+function framesToNpt(timeCode) {
+    var frames = timeCode.substring(9, 11);
+    var ms = parseInt(frames) / 25 * 1000;
+    var ms = String(ms);
+    var ms = strpad(ms, '0', 3, 'right');
+    var timeCodeNpt = timeCode.substring(0,8) + "." + ms;
+    return timeCodeNpt;
+}
+
+function strpad(str, pad, len, dir) {
+      while (str.length < len) {
+      if (dir == 'left')
+        str = pad + str;
+      else if (dir == 'right')
+        str = str + pad;
+      }
+      return str;
+}
+
+function isValidTimecode(tc) {
+  var tc = $.trim(tc);
+  var nptRegex = new RegExp("^[0-9][0-9]?\:[0-9][0-9]\:[0-9][0-9][\.|\,|\:][0-9]?[0-9]?[0-9]?$");
+  return nptRegex.test(tc);to
+}
+
+//where filters is a JSON object, for eg. {'Video Files': '*.dv;*.ogg;*.ogv;*.ogx;*.avi;*.mov;*.mp4;*.mpeg;*.mpg;*.vob'}
+function selectFile(filters, callback) {
+    alert('select file');
+    //fixme. select file
+    callback && callback(fp);
+}
+
+function getFileNameExt(filename) {
+  var dotPos = filename.lastIndexOf(".");
+  var ext = filename.substring(dotPos + 1, filename.length);
+  return ext;  
+}
+
+function getFileNameSansExt(filename) {
+  var dotPos = filename.lastIndexOf(".");
+  if (dotPos != '-1') {
+    var filenameSansExt = filename.substring(0,dotPos);
+    } else {
+    var filenameSansExt = filename;
+    }
+  return filenameSansExt;
+}