Commits

Zach Kelling  committed 78ac13d

Player functions, html5 audio

  • Participants
  • Parent commits 587e8b1

Comments (0)

Files changed (2)

File dash/static/js/app.js

         active: false,
     
         new_message: function(data) {
-            $('#newMessageTemplate').tmpl({
+            $('#new_message_template').tmpl({
                 time:    this.time(),
                 name:    data.name,
                 message: data.msg,
             if (user.id !== u.id && this.joined[chan].users[u.id] === undefined) {
                 this.joined[chan].users[u.id] = u.name;
                 if ($('div#user-' + u.id).length === 0) {
-                    $('#addUserTemplate').tmpl(u).appendTo('#users');
+                    $('#add_user_template').tmpl(u).appendTo('#users');
                 }
             }
         },
     return channel;
 })();
 
+player = (function (){
+    var player = {
+        settings: {
+            skin: '/static/swf/skin/full.zip',
+            file: '/static/swf/null.mp3',
+            controlbar: 'top',
+            dock: false,
+            icons: false,
+            height: 130,
+            width: 300,
+            autostart: false,
+            events: {
+                onPlay: function() { 
+                    action('player_playing', {
+                        song: jwplayer().getPlaylistItem(),
+                    });
+                },
+                onPause: function() {
+                    action('player_paused', 0);
+                },
+                onBuffer: function() {
+                    action('player_buffering', 0);
+                },
+                onIdle: function() { 
+                    action('player_idle', 0)
+                },
+                onSeek: function(seeking) {
+                    action('player_seeking', {
+                        offset: seeking.offset,
+                    });
+                },
+            },
+            modes: [
+                {type: 'html5'},
+                {type: 'flash', src: '/static/swf/player.swf'}
+            ]
+        },
+        switch_to: function(skin) {
+            var settings = this.settings;
+            settings.skin = '/static/swf/skin/' + skin + '.zip';
+            $('#player').html('<div id="player-placeholder"></div>');
+            jwplayer('player-placeholder').setup(settings);
+        },
+        setup: function() {
+            jwplayer('player-placeholder').setup(this.settings);
+            jwplayer().get
+        },
+        add: function(location, title) {
+            var playlist = jwplayer().getPlaylist();
+            var item = {
+                file: location,
+                title: title,
+            };
+            playlist.push(item);
+            jwplayer().load(playlist);
+        },
+        play: function(file, artist, title) {
+            jwplayer().load({file: file, artist: artist, title: title}).play();
+            update_meta(file, artist, title);
+        },
+        update_meta: function(url, artist, title) {
+            $('#metadata').html($('#metadata_template').tmpl({
+                    url: url,
+                    artist: artist,
+                    title: title,
+            }));
+        },
+    }
+    return player;
+})();
+
 /* === Websocket === */
 function connect() {
 
     });
 
     // player
-    var flashvars = {
-        flashplayer: "/static/swf/player.swf",
-        controlbar: 'top',
-        dock: false,
-        icons: false,
-        height: 130,
-        skin: '/static/swf/no-controls.zip',
-        autostart:'false',
-    };
-    var params = {
-        allowfullscreen:'false',
-        allowscriptaccess:'always',
-        bgcolor: '#000000',
-    };
-    var attributes = { id:'player1', name:'player1' };
-    
-    function playerLoaded(e) {
-        // Player callbacks
-        jwplayer(e.ref).onPlay(function() { 
-            action('player_playing', {
-                song: jwplayer().getPlaylistItem(),
-            });
-        });
-        jwplayer(e.ref).onPause(function() {
-            action('player_paused', 0);
-        });
-        jwplayer(e.ref).onBuffer(function() { 
-            action('player_buffering', 0);
-        });
-        jwplayer(e.ref).onIdle(function() { 
-            action('player_idle', 0)
-        });
-        jwplayer(e.ref).onSeek(function(seeking) {
-            action('player_seeking', {
-                offset: seeking.offset,
-            });
-        });
-    }
-
-    swfobject.embedSWF('/static/swf/player.swf','player-placeholder','300','120','9.0.115','false', flashvars, params, attributes, playerLoaded);
+    player.setup();
 
 });

File dash/templates/index.html

         .channel a:hover span, .user a:hover span {
             display: inline;
         }
+        #player-placeholder {
+            width: 300px;
+            height: 32px;
+            background-color: #000;
+        }
         #player-playlist {
             width: 100%;
             /* position: fixed; */
             <div id="player">
                 <div id="player-placeholder"></div>
             </div>
-            <div id="metadata-container">
-                <div id="metadata">
-                    <a href="javascript:noop();"><span>+ - f&nbsp;</span>Artist / Song</a>
-                </div>
-            </div>
+            <div id="metadata-container"><div id="metadata"></div></div>
         </div>
 
     </div>
     <script src='{{ STATIC_URL }}js/app.js'></script>
 
     <!-- templates -->
-    <script id="newMessageTemplate" type="text/x-jquery-tmpl">
+    <script id="new_message_template" type="text/x-jquery-tmpl">
         <div class="message">${time} <strong>${name}</strong> ${message}</div>
     </script>
     
-    <script id="addUserTemplate" type="text/x-jquery-tmpl">
+    <script id="add_user_template" type="text/x-jquery-tmpl">
         <div class="user" id="user-${id}">
             <a href="javascript:noop();">${name} <span onclick="follow_user(${id})">follow</span></a>
         </div>
     </script>
 
+    <script id="metadata_template" type="text/x-jquery-tmpl">
+        <div id="metadata">
+            <a href="${url}"><span>+ - f&nbsp;</span>${artist} / ${title}</a>
+        </div>
+    </script>
+
 </body>
 </html>