Merge pull request #322 from calzoneman/flatvolume

Synchronize volume across player types

www/assets/js/callbacks.js

@@ -1,5 +1,4 @@
 /*
-return null;
 The MIT License (MIT)
 Copyright (c) 2013 Calvin Montgomery
 
@@ -1010,6 +1009,13 @@ Callbacks = {
     },
 
     changeMedia: function(data) {
+        if (PLAYER) {
+            PLAYER.getVolume(function (v) {
+                VOLUME = v;
+                setOpt("volume", VOLUME);
+            });
+        }
+
         if(CHANNEL.opts.allow_voteskip)
             $("#voteskip").attr("disabled", false);
 

www/assets/js/data.js

@@ -123,6 +123,8 @@ var USEROPTS = {
     secure_connection    : getOrDefault("secure_connection", false)
 };
 
+var VOLUME = getOrDefault("volume", 1);
+
 var NO_WEBSOCKETS = USEROPTS.altsocket;
 
 var Rank = {

www/assets/js/player.js

@@ -43,6 +43,7 @@ var YouTubePlayer = function (data) {
                 },
                 events: {
                     onReady: function () {
+                        PLAYER.setVolume(VOLUME);
                     },
                     onStateChange: function (ev) {
                         if(PLAYER.paused && ev.data != YT.PlayerState.PAUSED ||
@@ -105,6 +106,27 @@ var YouTubePlayer = function (data) {
         if(self.player && self.player.seekTo)
             self.player.seekTo(time, true);
     };
+
+    self.getVolume = function (cb) {
+        if (!self.player || !self.player.getVolume || !self.player.isMuted) {
+            return;
+        }
+
+        // YouTube's API is strange in the sense that getVolume() returns
+        // the regular (unmuted) volume even if it is muted...
+        // YouTube's volume is 0..100, normalize it to 0..1
+        var vol = self.player.isMuted() ? 0 : (self.player.getVolume() / 100);
+        cb(vol);
+    };
+
+    self.setVolume = function (vol) {
+        if (self.player && self.player.setVolume) {
+            if (vol > 0) {
+                self.player.unMute();
+            }
+            self.player.setVolume(vol * 100);
+        }
+    };
 };
 
 var VimeoPlayer = function (data) {
@@ -147,11 +169,11 @@ var VimeoPlayer = function (data) {
                     if(CLIENT.leader)
                         sendVideoUpdate();
                 });
+
+                self.setVolume(VOLUME);
             }.bind(self));
         };
 
-        self.init();
-
         self.load = function (data) {
             self.videoId = data.id;
             self.videoLength = data.seconds;
@@ -185,6 +207,16 @@ var VimeoPlayer = function (data) {
             if(self.player && self.player.api)
                 self.player.api("seekTo", time);
         };
+
+        self.getVolume = function (cb) {
+            self.player.api("getVolume", cb);
+        };
+
+        self.setVolume = function (vol) {
+            self.player.api("setVolume", vol);
+        };
+
+        self.init();
     });
 };
 
@@ -244,12 +276,12 @@ var VimeoFlashPlayer = function (data) {
                     if(CLIENT.leader)
                         sendVideoUpdate();
                 });
+
+                self.setVolume(VOLUME);
             });
         });
     };
 
-    self.init();
-
     self.load = function (data) {
         self.videoId = data.id;
         self.videoLength = data.seconds;
@@ -281,6 +313,16 @@ var VimeoFlashPlayer = function (data) {
         if(self.player.api_seekTo);
             self.player.api_seekTo(time);
     };
+
+    self.getVolume = function (cb) {
+        cb(self.player.api_getVolume());
+    };
+
+    self.setVolume = function (vol) {
+        self.player.api_setVolume(vol);
+    };
+
+    self.init();
 };
 
 var DailymotionPlayer = function (data) {
@@ -314,14 +356,17 @@ var DailymotionPlayer = function (data) {
                 if(CLIENT.leader)
                     sendVideoUpdate();
             });
+
+            self.setVolume(VOLUME);
         });
     });
 
     self.load = function (data) {
         self.videoId = data.id;
         self.videoLength = data.seconds;
-        if(self.player && self.player.api)
+        if (self.player && self.player.api) {
             self.player.api("load", data.id);
+        }
     };
 
     self.pause = function () {
@@ -347,10 +392,21 @@ var DailymotionPlayer = function (data) {
         if(self.player && self.player.api)
             self.player.api("seek", seconds);
     };
+
+    self.getVolume = function (cb) {
+        cb(self.player.volume);
+    };
+
+    self.setVolume = function (vol) {
+        self.player.api("volume", vol);
+    };
 };
 
 var SoundcloudPlayer = function (data) {
     var self = this;
+    // The getVolume function on their widget throws TypeErrors
+    // Go figure
+    self.soundcloudIsSeriouslyFuckingBroken = VOLUME;
     self.videoId = data.id;
     self.videoLength = data.seconds;
     waitUntilDefined(window, "SC", function () {
@@ -368,9 +424,10 @@ var SoundcloudPlayer = function (data) {
 
         volslider.slider({
             range: "min",
-            value: 100,
+            value: VOLUME * 100,
             stop: function (event, ui) {
                 self.player.setVolume(ui.value);
+                self.soundcloudIsSeriouslyFuckingBroken = ui.value / 100;
             }
         });
 
@@ -385,25 +442,38 @@ var SoundcloudPlayer = function (data) {
                     sendVideoUpdate();
             });
 
+            self.player.bind(SC.Widget.Events.FINISH, function () {
+                if(CLIENT.leader) {
+                    socket.emit("playNext");
+                }
+            });
+
             self.player.bind(SC.Widget.Events.PLAY, function () {
                 PLAYER.paused = false;
                 if(CLIENT.leader)
                     sendVideoUpdate();
             });
 
-            self.player.bind(SC.Widget.Events.FINISH, function () {
+            // THAT'S RIGHT, YOU CAN'T SET THE VOLUME BEFORE IT STARTS PLAYING
-                if(CLIENT.leader) {
+            var soundcloudNeedsToFuckingFixTheirPlayer = function () {
-                    socket.emit("playNext");
+                self.setVolume(VOLUME);
-                }
+                self.player.unbind(SC.Widget.Events.PLAY_PROGRESS);
-            });
+            };
+            self.player.bind(SC.Widget.Events.PLAY_PROGRESS, soundcloudNeedsToFuckingFixTheirPlayer);
         }.bind(self));
     });
 
     self.load = function (data) {
         self.videoId = data.id;
         self.videoLength = data.seconds;
-        if(self.player && self.player.load)
+        if(self.player && self.player.load) {
             self.player.load(data.id, { auto_play: true });
+            var soundcloudNeedsToFuckingFixTheirPlayer = function () {
+                self.setVolume(VOLUME);
+                self.player.unbind(SC.Widget.Events.PLAY_PROGRESS);
+            };
+            self.player.bind(SC.Widget.Events.PLAY_PROGRESS, soundcloudNeedsToFuckingFixTheirPlayer);
+        }
     };
 
     self.pause = function () {
@@ -435,6 +505,14 @@ var SoundcloudPlayer = function (data) {
         if(self.player && self.player.seekTo)
             self.player.seekTo(seconds * 1000);
     };
+
+    self.getVolume = function (cb) {
+        cb(self.soundcloudIsSeriouslyFuckingBroken);
+    };
+
+    self.setVolume = function (vol) {
+        self.player.setVolume(vol * 100);
+    };
 };
 
 var LivestreamPlayer = function (data) {
@@ -474,6 +552,10 @@ var LivestreamPlayer = function (data) {
     self.getTime = function () { };
 
     self.seek = function () { };
+
+    self.getVolume = function () { };
+
+    self.setVolume = function () { };
 };
 
 var TwitchTVPlayer = function (data) {
@@ -489,7 +571,7 @@ var TwitchTVPlayer = function (data) {
             allowNetworking: "all",
             movie: "http://www.twitch.tv/widgets/live_embed_player.swf",
             id: "live_embed_player_flash",
-            flashvars: "hostname=www.twitch.tv&channel="+self.videoId+"&auto_play=true&start_volume=100"
+            flashvars: "hostname=www.twitch.tv&channel="+self.videoId+"&auto_play=true&start_volume=" + VOLUME
         };
         swfobject.embedSWF(url,
             "ytapiplayer",
@@ -520,6 +602,10 @@ var TwitchTVPlayer = function (data) {
     self.getTime = function () { };
 
     self.seek = function () { };
+
+    self.getVolume = function () { };
+
+    self.setVolume = function () { };
 };
 
 var JustinTVPlayer = function (data) {
@@ -536,7 +622,7 @@ var JustinTVPlayer = function (data) {
             allowNetworking: "all",
             movie: "http://www.justin.tv/widgets/live_embed_player.swf",
             id: "live_embed_player_flash",
-            flashvars: "hostname=www.justin.tv&channel="+self.videoId+"&auto_play=true&start_volume=100"
+            flashvars: "hostname=www.justin.tv&channel="+self.videoId+"&auto_play=true&start_volume=" + VOLUME
         };
         swfobject.embedSWF(url,
             "ytapiplayer",
@@ -567,11 +653,22 @@ var JustinTVPlayer = function (data) {
     self.getTime = function () { };
 
     self.seek = function () { };
+
+    self.getVolume = function () { };
+
+    self.setVolume = function () { };
 };
 
+function rtmpEventHandler(id, ev, data) {
+    if (ev === "volumechange") {
+        PLAYER.volume = (data.muted ? 0 : data.volume);
+    }
+}
+
 var RTMPPlayer = function (data) {
     removeOld();
-    var self = this;
+    var self =this;
+    self.volume = VOLUME;
     self.videoId = data.id;
     self.videoLength = data.seconds;
     self.init = function () {
@@ -584,7 +681,7 @@ var RTMPPlayer = function (data) {
             allowNetworking: "all",
             wMode: "direct",
             movie: prto+"//fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf",
-            flashvars: "src="+src+"&streamType=live&autoPlay=true"
+            flashvars: "src="+src+"&streamType=live&javascriptCallbackFunction=rtmpEventHandler&autoPlay=true&volume=" + VOLUME
         };
         swfobject.embedSWF(url,
             "ytapiplayer",
@@ -615,6 +712,12 @@ var RTMPPlayer = function (data) {
     self.getTime = function () { };
 
     self.seek = function () { };
+
+    self.getVolume = function (cb) {
+        cb(self.volume);
+    };
+
+    self.setVolume = function () { };
 };
 
 var JWPlayer = function (data) {
@@ -630,7 +733,6 @@ var JWPlayer = function (data) {
             height: VHEIGHT,
             autostart: true
         });
-
         jwplayer().onPlay(function() {
             self.paused = false;
             if(CLIENT.leader)
@@ -644,6 +746,7 @@ var JWPlayer = function (data) {
         jwplayer().onComplete(function() {
             socket.emit("playNext");
         });
+        self.setVolume(VOLUME);
     };
 
     waitUntilDefined(window, "jwplayer", function () { self.init(); });
@@ -680,6 +783,14 @@ var JWPlayer = function (data) {
         if(jwplayer)
             jwplayer().seek(time);
     };
+
+    self.getVolume = function (cb) {
+        cb(jwplayer().getVolume() / 100);
+    };
+
+    self.setVolume = function (vol) {
+        jwplayer().setVolume(vol * 100);
+    };
 };
 
 var UstreamPlayer = function (data) {
@@ -715,6 +826,10 @@ var UstreamPlayer = function (data) {
     self.getTime = function () { };
 
     self.seek = function () { };
+
+    self.getVolume = function () { };
+
+    self.setVolume = function () { };
 };
 
 var ImgurPlayer = function (data) {
@@ -748,6 +863,10 @@ var ImgurPlayer = function (data) {
     self.getTime = function () { };
 
     self.seek = function () { };
+
+    self.getVolume = function () { };
+
+    self.setVolume = function () { };
 };
 
 var CustomPlayer = function (data) {
@@ -785,6 +904,10 @@ var CustomPlayer = function (data) {
     self.getTime = function () { };
 
     self.seek = function () { };
+
+    self.getVolume = function () { };
+
+    self.setVolume = function () { };
 };
 
 var GoogleDocsPlayer = function (data) {
@@ -802,6 +925,7 @@ var GoogleDocsPlayer = function (data) {
             $("<param/>", p).appendTo(self.player);
         });
         removeOld($(self.player));
+        self.setVolume(VOLUME);
     };
 
     self.init(data);
@@ -838,6 +962,24 @@ var GoogleDocsPlayer = function (data) {
         if(self.player && self.player.seekTo)
             self.player.seekTo(time, true);
     };
+
+    self.getVolume = function (cb) {
+        if (!self.player || !self.player.getVolume || !self.player.isMuted) {
+            return;
+        }
+
+        // YouTube's API is strange in the sense that getVolume() returns
+        // the regular (unmuted) volume even if it is muted...
+        // YouTube's volume is 0..100, normalize it to 0..1
+        var vol = self.player.isMuted() ? 0 : (self.player.getVolume() / 100);
+        cb(vol);
+    };
+
+    self.setVolume = function (vol) {
+        if (self.player && self.player.setVolume) {
+            self.player.setVolume(vol * 100);
+        }
+    };
 };
 
 function handleMediaUpdate(data) {