From cc3428b6f2b7b8d4c0cae4b1cfd7dd807b10b721 Mon Sep 17 00:00:00 2001
From: sanj <sanj@sanj>
Date: Sun, 18 Apr 2010 18:32:15 +0300
Subject: [PATCH] first commit

---
 test.html | 302 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 302 insertions(+)
 create mode 100644 test.html
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..48cea5a
--- /dev/null
+++ b/test.html
@@ -0,0 +1,302 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="text/javascript" src="jquery.js"></script>
+    <script type="text/javascript" src="vidList.js"></script>
+    <script type="text/javascript">
+var VID_PATH = "file:///media/SanjBeirutHFS/9-11/";
+var NETWORKS = ['abc', 'bbc', 'cbs', 'cnn', 'fox', 'nbc'];
+var currentVideos = {};
+var timeInterval = -1;
+var ALL_VIDEOS = {};
+for (var n = 0; n < NETWORKS.length; n++) {
+  var network = NETWORKS[n];
+  ALL_VIDEOS[network] = [];
+}
+
+for (var i=0; i < VID_LIST.length; i++) {
+  var filename = VID_LIST[i],
+      network = filename.substring(0,3),
+      date = filename.substring(9,11),
+      start_time = filename.substring(11,15),
+      end_time = filename.substring(16,20);
+  ALL_VIDEOS[network].push({
+    'network': network,
+    'filename': filename,
+    'path': (VID_PATH + filename).replace("fox", "fox5"),
+    'date': parseInt(date, 10),
+    'start_time': parseInt(start_time, 10),
+    'end_time': parseInt(end_time, 10),
+    'id': '#' + network
+  });    
+}
+
+
+function getVideosAtTime(d, t, channels) {
+  if (typeof channels == 'undefined') {
+    channels = NETWORKS;
+  }  
+  var ret = {};
+  for (var c = 0; c < channels.length; c++) {
+    var channel = channels[c];
+    var v = getVideoAtTime(d, t, channel);
+    if (v) {
+      ret[channel] = v;
+    } 
+  }
+  return ret;
+} 
+
+function getVideoAtTime(d, t, network) {
+  for (var i=0; i < ALL_VIDEOS[network].length; i++) {
+    var thisVid = ALL_VIDEOS[network][i];
+    if (thisVid.date == d) {
+      if (thisVid.start_time < t && thisVid.end_time > t) {
+        return thisVid;
+      }
+    }   
+  }
+  return false;
+}
+
+//accepts an integer like 1450, 45, 930, etc. Returns the correct hour of the time (NOTE: it will return 12 if the time is 45).
+function getTimeHour(time) {    
+  var timeString = time + '';
+  if (timeString.length == 4) {
+    return parseInt(timeString.substring(0,2));
+  }
+  if (timeString.length == 2) { // since we're converting from an int, this would be a time like 0045, which for the sake of math, is 1245 ..
+    return 12;
+  } else {
+    return parseInt(timeString.charAt(0));
+  }  
+}
+
+function getSecs(time, start_time) {
+  var timeHr = getTimeHour(time);
+  var startHr = getTimeHour(start_time);
+  if (timeHr > startHr) {
+    time = time - 40;
+    }
+  return (time - start_time) * 60;
+}
+
+function getTimeMinutes(time) {
+  timeString = time + '';
+  var minutes = timeString.substring(timeString.length - 2, timeString.length);
+  return parseInt(minutes);
+}
+
+function getTime(startTime, currentTime, date) {
+  var seekTime = Math.floor(currentTime / 60);
+  var currTime = startTime + seekTime;
+  if (getTimeMinutes(currTime) >= 60) {
+    currTime = currTime + 40;    
+  }
+  var hr = getTimeHour(currTime) + '';
+  if (hr.length == 1) {
+    hr = '0' + hr;
+  }
+  if ((currTime + '').length == 2) {
+    hr = "00";
+  }
+  var minutes = getTimeMinutes(currTime);    
+  if ((minutes + '').length == 1) {
+    minutes = '0' + minutes;
+  }
+  var seconds = parseInt(currentTime % 60);
+  if ((seconds + '').length == 1) {
+    seconds = '0' + seconds;
+  }
+  return date + "th Sept. " + hr + ":" + minutes + ":" + seconds;    
+}
+
+$(function() {
+  $('#search').click(function() {
+    var date = parseInt($('#date').val());
+    var time = parseInt($('#time').val(), 10);
+    console.log(time);
+    var videos = getVideosAtTime(date, time);
+    currentVideos = videos;
+    console.log(videos);
+    for (var v in videos) {
+      if (videos.hasOwnProperty(v)) {
+        var video = videos[v];
+        var id = '#' + video.network;
+        var jq = $(id);
+        var secondsToSeek = getSecs(time, video.start_time);
+        var currPath = jq.attr("src");
+        if (currPath != video.path) {
+          jq.attr("src", video.path);
+          jq.get(0).load();
+          (function(vid, seconds) {
+            $('#' + video.network).one("loadedmetadata", function() {
+              console.log(vid.network, seconds);
+              this.currentTime = seconds;
+              this.play();      
+            });
+          })(video, secondsToSeek);
+        } else {
+          jq.get(0).currentTime = secondsToSeek;
+        }
+      }
+    }
+  });
+  $('video').click(function(e) {
+    var that = this;
+    e.stopPropagation();
+    clearInterval(timeInterval);
+    $('.menu').remove();
+    var videoObj = currentVideos[$(that).attr('id')];
+    var start_time = videoObj.start_time;
+    var currentTime = getTime(start_time, $(this).get(0).currentTime, videoObj.date);
+    var html = tmpl("videoMenu", {
+        'network': videoObj.network,
+        'time': currentTime
+    });
+    var top = $(this).position().top;
+    var left = $(this).position().left;
+    $('body').append(html);
+    $('.menu').css({'top': top, 'left': left});
+    timeInterval = setInterval(function() {
+      var currentTime = getTime(start_time, $(that).get(0).currentTime, videoObj.date);
+      $('.menuCurrentTime').text(currentTime);
+      }, 800);
+  });
+  $('body').click(function() {
+    clearInterval(timeInterval);
+    $('.menu').remove();
+  });
+});
+
+
+var menuActions = {
+  'muteThis': function(v) {
+    $(v.id).get(0).muted = !$(v.id).get(0).muted;
+  },
+  'muteOthers': function(v) {
+    for (var c in currentVideos) {
+      if (currentVideos.hasOwnProperty(c)) {
+        var t = currentVideos[c];
+        if (v.id != t.id) { 
+          $(t.id).get(0).muted = true;
+        } else {
+          $(t.id).get(0).muted = false;
+        }
+      }
+    }
+  },
+  'pauseThis': function(v) {
+    if ($(v.id).get(0).isPlaying) {
+      $(v.id).get(0).pause();
+    } else {
+      $(v.id).get(0).play();
+    }
+  },
+  'pauseOthers': function(v) {
+    for (var c in currentVideos) {
+      if (currentVideos.hasOwnProperty(c)) {
+        var t = currentVideos[c];
+        if (v.id != t.id) {
+          $(t.id).get(0).pause();
+        } else {
+          $(t.id).get(0).play();
+        }
+      }
+    }
+  }
+}
+
+$('.menuControls a').live("click", function(e) {
+  var videoObj = currentVideos[$(this).parents('.menu').attr('data-network')];
+  menuActions[$(this).attr('data-action')](videoObj);    
+});
+/*
+John Resig's micro-templating: http://ejohn.org/blog/javascript-micro-templating/
+*/
+
+(function(){
+  var cache = {};
+ 
+  window.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;
+  };
+})(); 
+
+
+    </script>
+  <style type="text/css">
+.menu {
+  position: absolute;
+  background: #ccc;
+  }
+
+  </style>
+  </head>
+  <body>
+    <script type="text/html" id="videoMenu">
+<div class="menu" data-network="<%= network %>">
+  <div class="menuMetadata">
+    Network: <%= network %> Time: <span class="menuCurrentTime"><%= time %></span>
+  </div>
+  <div class="menuControls">
+    <a class="muteThis" data-action="muteThis">Mute This</a>
+    <a class="muteOthers" data-action="muteOthers">Mute Others</a>
+    <a class="pauseThis" data-action="pauseThis">Pause This</a>
+    <a class="pauseOthers" data-action="pauseOthers">Pause Others</a>
+  </div>
+</div>
+
+    </script>
+    <div id="wrapper">
+      <div id="header">
+        Date: <select id="date">
+                <option value="11">11th September</option>
+                <option value="12">12th September</option>
+                <option value="13">13th September</option>
+              </select>
+        Time: <input id="time" />
+        <button id="search">Get Videos</button>
+      </div>
+      <div id="videos">
+        <div id="line1">
+          <video id="abc" controls></video>
+          <video id="bbc" controls></video>
+          <video id="cbs" controls></video>
+        </div>
+        <div id="line2">
+          <video id="cnn" controls></video>
+          <video id="fox" controls></video>
+          <video id="nbc" controls></video>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+
