adding support for a url entry as well as a streaming view

hydraflix · Jul 11, 2012 · 5270376 · 5270376
1 parent b2c8eee
commit 5270376
Show file tree

Hide file tree

Showing 11 changed files with 5,202 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -19,8 +19,8 @@
         <!-- pwmckenna/jStorage submodule -->
         <script type="text/javascript" src="javascripts/jStorage/jstorage.min.js"></script>
 
-        <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
-        <script src="http://vjs.zencdn.net/c/video.js"></script>
+        <link href="video-js/video-js.css" rel="stylesheet">
+        <script src="video-js/video.js"></script>
 
         <script type="text/javascript" src="javascripts/application.js"></script>
 
@@ -31,16 +31,19 @@
 
     <!-- templates -->
     <script type="text/template" id="video_template">
-        <video class="video-js vjs-default-skin" controls
-        preload="auto" width="600" height="360"
-        data-setup="{}">
+        <video id="<%= id %>" class="video-js vjs-default-skin" controls
+            preload="auto" width="640" height="264" poster="<%= image %>"
+            data-setup="{}">
+            <source src="<%= video %>" type='video/avi'>
         </video>
+        <p><%= video %></p><br>
+        <p><%= name %></p>
     </script>
 
     <script type="text/template" id="input_template">
         <form class="well form-inline">
           <input type="text" class="input-large" placeholder="magnet link / torrent url">
-          <button type="submit" class="btn">Sign in</button>
+          <button type="submit" class="btn">Stream</button>
         </form>
     </script>
 

diff --git a/javascripts/application.js b/javascripts/application.js
@@ -1,10 +1,17 @@
 jQuery(function() {
+    var videos = 0;
     var FileView = Backbone.View.extend({
         initialize: function() {
             this.template = _.template($('#video_template').html());
         },
         render: function() {
+            var id = 'video' + (++videos);
+            console.log('video id: ' + id);
             this.$el.html(this.template({
+                image: 'http://video-js.zencoder.com/oceans-clip.jpg',
+                video: this.model.get('streaming_url'),
+                name: this.model.get('name'),
+                id: id
             }));
             return this;
         }
@@ -17,18 +24,31 @@ jQuery(function() {
         render: function() {
             this.$el.html(this.template({
             }));
+            this.$el.find('form').submit(_.bind(function(event) {
+                event.preventDefault();
+                 window.location = '#' + this.$el.find('input').val();
+            }, this));
             return this;
         }
     });
 
-    var input = new InputView();
-    $('body > .container').append(input.render().el);
+    if(window.location.hash) {
+        btapp = new Btapp();
+        btapp.connect();
 
-    btapp = new Btapp();
-    btapp.connect();
+        btapp.live('torrent * file * properties', function(properties) {
+            var name = properties.get('name');
+            if(name.substr(name.length - 3) === 'mp4') {
+                var view = new FileView({model: properties});
+                $('body > .container').append(view.render().el);
+            }
+        });
 
-    btapp.live('torrent * file * properties', function(properties) {
-        var view = new FileView({model: properties});
-        $('body > .container').append(view.render().el);
-    });
+        btapp.on('add:add', function(add) {
+            add.torrent(window.location.hash.substring(1));
+        });
+    } else {
+        var input = new InputView();
+        $('body > .container').append(input.render().el);
+    }
 });
diff --git a/stylesheets/application.css b/stylesheets/application.css
@@ -5,6 +5,10 @@ body > .container > div {
   margin-right: auto;
 }
 
+body > .container > form {
+  text-align: center;
+}
+
 
 /* line 31, ../sass/darkstrap.scss */
 .well,

diff --git a/video-js/captions.vtt b/video-js/captions.vtt
@@ -0,0 +1,41 @@
+WEBVTT
+
+00:00.700 --> 00:04.110
+Captions describe all relevant audio for the hearing impaired.
+[ Heroic music playing for a seagull ]
+
+00:04.500 --> 00:05.000
+[ Splash!!! ]
+
+00:05.100 --> 00:06.000
+[ Sploosh!!! ]
+
+00:08.000 --> 00:09.225
+[ Splash...splash...splash splash splash ]
+
+00:10.525 --> 00:11.255
+[ Splash, Sploosh again ]
+
+00:13.500 --> 00:14.984
+Dolphin: eeeEEEEEeeee!
+
+00:14.984 --> 00:16.984
+Dolphin: Squawk! eeeEEE?
+
+00:25.000 --> 00:28.284
+[ A whole ton of splashes ]
+
+00:29.500 --> 00:31.000
+Mine. Mine. Mine.
+
+00:34.300 --> 00:36.000
+Shark: Chomp
+
+00:36.800 --> 00:37.900
+Shark: CHOMP!!!
+
+00:37.861 --> 00:41.193
+EEEEEEOOOOOOOOOOWHALENOISE
+
+00:42.593 --> 00:45.611
+[ BIG SPLASH ]
diff --git a/video-js/demo.html b/video-js/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Video.js | HTML5 Video Player</title>
+
+  <!-- Chang URLs to wherever Video.js files will be hosted -->
+  <link href="video-js.css" rel="stylesheet" type="text/css">
+  <!-- video.js must be in the <head> for older IEs to work. -->
+  <script src="video.js"></script>
+
+  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
+  <script>
+    _V_.options.flash.swf = "video-js.swf";
+  </script>
+
+
+</head>
+<body>
+
+  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
+      poster="http://video-js.zencoder.com/oceans-clip.png"
+      data-setup="{}">
+    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
+    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
+    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
+    <track kind="captions" src="captions.vtt" srclang="en" label="English" />
+  </video>
+
+</body>
+</html>