adding audio-js as a submodule and adding audio support

hydraflix · Jul 12, 2012 · 001592f · 001592f
1 parent a3e4a3b
commit 001592f
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 5 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -7,3 +7,6 @@
 [submodule "javascripts/jStorage"]
 	path = javascripts/jStorage
 	url = git://github.com/pwmckenna/jStorage.git
+[submodule "audio-js"]
+	path = audio-js
+	url = git://github.com/dz0ny/AudioJS.git
diff --git a/audio-js b/audio-js
diff --git a/index.html b/index.html
@@ -19,6 +19,14 @@
         <!-- pwmckenna/jStorage submodule -->
         <script type="text/javascript" src="javascripts/jStorage/jstorage.min.js"></script>
 
+        <!-- audio support -->
+        <link rel="stylesheet" href="audio-js/audio-js.css" type="text/css" media="all" title="Audio JS" charset="utf-8">
+        <link rel="stylesheet" href="audio-js/skins/hu.css" type="text/css" media="all" title="Audio JS" charset="utf-8">
+        <link rel="stylesheet" href="audio-js/skins/tube.css" type="text/css" media="all" title="Audio JS" charset="utf-8">
+        <link rel="stylesheet" href="audio-js/skins/vim.css" type="text/css" media="all" title="Audio JS" charset="utf-8">
+        <script src="audio-js/audio.js" type="text/javascript" charset="utf-8"></script>
+
+        <!-- video support -->
         <link href="video-js/video-js.css" rel="stylesheet">
         <script src="video-js/video.js"></script>
 
@@ -40,6 +48,14 @@
         </div>
     </script>
 
+    <script type="text/template" id="audio_template">
+        <div class="audio-js-box vim-css">
+            <audio class="audio-js" controls preload>
+                <source src="<%= url %>">
+            </audio>
+        </div>
+    </script>
+
     <script type="text/template" id="input_template">
         <form class="well form-inline">
           <input type="text" class="input-large" placeholder="magnet link / torrent url">

diff --git a/javascripts/application.js b/javascripts/application.js
@@ -23,10 +23,14 @@ jQuery(function() {
         4: 'MEDIA_ERR_SRC_NOT_SUPPORTED'
     };
 
-    SUPPORTED_EXTENSIONS = [
+    SUPPORTED_VIDEO_EXTENSIONS = [
          'mp4', 'avi', 'mkv'
     ];
 
+    SUPPORTED_AUDIO_EXTENSIONS = [
+        'mp3'
+    ]
+
     STATUS_MESSAGES = {
         'plugin:plugin_installed': 'plugin installed',
         'plugin:plugin_running': 'plugin running',
@@ -42,7 +46,22 @@ jQuery(function() {
         'client:error': 'error',
     };
 
-    var FileView = Backbone.View.extend({
+    var AudioFileView = Backbone.View.extend({
+        initialize: function() {
+            this.template = _.template($('#audio_template').html());
+            this.model.on('destroy', this.remove, this);
+        },
+
+        render: function() {
+            this.$el.html(this.template({
+                url: this.model.get('streaming_url')
+            }));
+            new AudioJS(this.$el.find('audio')[0]);
+            return this;
+        }
+    });
+
+    var VideoFileView = Backbone.View.extend({
         initialize: function() {
             this.template = _.template($('#video_template').html());
             this.model.on('destroy', this.destroy, this);
@@ -144,19 +163,26 @@ jQuery(function() {
     var link = window.location.hash.substring(1);
     console.log('link: ' + link);
     if(link) {
+        AudioJS.setup();
         window.btapp = new Btapp();
 
         var status = new StatusView({model: btapp});
 
-        btapp.connect({});
+        btapp.connect({
+            product: 'uTorrent',
+            plugin: false
+        });
 
         btapp.live('torrent * file * properties', function(properties, file, file_list, torrent, torrent_list) {
             console.log('uri: ' + torrent.get('properties').get('uri'));
             if(torrent.get('properties').get('uri') === link) {
                 var name = properties.get('name');
                 console.log('file in the correct torrent: ' + name);
-                if(_.include(SUPPORTED_EXTENSIONS, name.substr(name.length - 3))) {
-                    var view = new FileView({model: properties});
+                if(_.include(SUPPORTED_VIDEO_EXTENSIONS, name.substr(name.length - 3))) {
+                    var view = new VideoFileView({model: properties});
+                    $('body > .container').append(view.render().el);
+                } else if(_.include(SUPPORTED_AUDIO_EXTENSIONS, name.substr(name.length - 3))) {
+                    var view = new AudioFileView({model: properties});
                     $('body > .container').append(view.render().el);
                 }
             }