Replace froogaloop

Froogaloop no longer appears to work.

Followed migration guide: https://github.com/vimeo/player.js/blob/master/docs/migrate-from-froogaloop.md

package.json

@@ -2,7 +2,7 @@
   "author": "Calvin Montgomery",
   "name": "CyTube",
   "description": "Online media synchronizer and chat",
-  "version": "3.51.0",
+  "version": "3.51.1",
   "repository": {
     "url": "http://github.com/calzoneman/sync"
   },

player/vimeo.coffee

@@ -8,11 +8,11 @@ window.VimeoPlayer = class VimeoPlayer extends Player
     load: (data) ->
         @setMediaProperties(data)
 
-        waitUntilDefined(window, '$f', =>
+        waitUntilDefined(window, 'Vimeo', =>
             video = $('<iframe/>')
             removeOld(video)
             video.attr(
-                src: "https://player.vimeo.com/video/#{data.id}?api=1&player_id=ytapiplayer"
+                src: "https://player.vimeo.com/video/#{data.id}"
                 webkitallowfullscreen: true
                 mozallowfullscreen: true
                 allowfullscreen: true
@@ -21,60 +21,71 @@ window.VimeoPlayer = class VimeoPlayer extends Player
             if USEROPTS.wmode_transparent
                 video.attr('wmode', 'transparent')
 
-            $f(video[0]).addEvent('ready', =>
+            @vimeo = new Vimeo.Player(video[0])
-                @vimeo = $f(video[0])
-                @play()
 
-                @vimeo.addEvent('finish', =>
+            @vimeo.on('ended', =>
-                    if CLIENT.leader
+                if CLIENT.leader
-                        socket.emit('playNext')
+                    socket.emit('playNext')
-                )
-
-                @vimeo.addEvent('pause', =>
-                    @paused = true
-                    if CLIENT.leader
-                        sendVideoUpdate()
-                )
-
-                @vimeo.addEvent('play', =>
-                    @paused = false
-                    if CLIENT.leader
-                        sendVideoUpdate()
-                )
-
-                @setVolume(VOLUME)
             )
+
+            @vimeo.on('pause', =>
+                @paused = true
+                if CLIENT.leader
+                    sendVideoUpdate()
+            )
+
+            @vimeo.on('play', =>
+                @paused = false
+                if CLIENT.leader
+                    sendVideoUpdate()
+            )
+
+            @play()
+            @setVolume(VOLUME)
         )
 
     play: ->
         @paused = false
         if @vimeo
-            @vimeo.api('play')
+            @vimeo.play().catch((error) ->
+                console.error('vimeo::play():', error)
+            )
 
     pause: ->
         @paused = true
         if @vimeo
-            @vimeo.api('pause')
+            @vimeo.pause().catch((error) ->
+                console.error('vimeo::pause():', error)
+            )
 
     seekTo: (time) ->
         if @vimeo
-            @vimeo.api('seekTo', time)
+            @vimeo.setCurrentTime(time).catch((error) ->
+                console.error('vimeo::setCurrentTime():', error)
+            )
 
     setVolume: (volume) ->
         if @vimeo
-            @vimeo.api('setVolume', volume)
+            @vimeo.setVolume(volume).catch((error) ->
+                console.error('vimeo::setVolume():', error)
+            )
 
     getTime: (cb) ->
         if @vimeo
-            @vimeo.api('getCurrentTime', (time) ->
+            @vimeo.getCurrentTime().then((time) ->
-                # I will never understand why Vimeo returns current time as a string
                 cb(parseFloat(time))
+            ).catch((error) ->
+                console.error('vimeo::getCurrentTime():', error)
             )
         else
             cb(0)
 
     getVolume: (cb) ->
         if @vimeo
-            @vimeo.api('getVolume', cb)
+            @vimeo.getVolume().then((volume) ->
+                cb(parseFloat(volume))
+            ).catch((error) ->
+                console.error('vimeo::getVolume():', error)
+            )
         else
             cb(VOLUME)

templates/channel.pug

@@ -250,8 +250,8 @@ html(lang="en")
     script(src="/js/callbacks.js")
     script(defer, src="https://www.youtube.com/iframe_api")
     script(defer, src="https://api.dmcdn.net/all.js")
+    script(defer, src="https://player.vimeo.com/api/player.js")
     script(defer, src="/js/sc.js")
-    script(defer, src="/js/froogaloop.min.js")
     script(defer, src="/js/video.js")
     script(defer, src="/js/videojs-contrib-hls.min.js")
     script(defer, src="/js/videojs-resolution-switcher.js")

www/js/froogaloop.min.js

@@ -1,4 +0,0 @@
-var Froogaloop=function(){function e(a){return new e.fn.init(a)}function h(a,c,b){if(!b.contentWindow.postMessage)return!1;var f=b.getAttribute("src").split("?")[0],a=JSON.stringify({method:a,value:c});"//"===f.substr(0,2)&&(f=window.location.protocol+f);b.contentWindow.postMessage(a,f)}function j(a){var c,b;try{c=JSON.parse(a.data),b=c.event||c.method}catch(f){}"ready"==b&&!i&&(i=!0);if(a.origin!=k)return!1;var a=c.value,e=c.data,g=""===g?null:c.player_id;c=g?d[g][b]:d[b];b=[];if(!c)return!1;void 0!==
-a&&b.push(a);e&&b.push(e);g&&b.push(g);return 0<b.length?c.apply(null,b):c.call()}function l(a,c,b){b?(d[b]||(d[b]={}),d[b][a]=c):d[a]=c}var d={},i=!1,k="";e.fn=e.prototype={element:null,init:function(a){"string"===typeof a&&(a=document.getElementById(a));this.element=a;a=this.element.getAttribute("src");"//"===a.substr(0,2)&&(a=window.location.protocol+a);for(var a=a.split("/"),c="",b=0,f=a.length;b<f;b++){if(3>b)c+=a[b];else break;2>b&&(c+="/")}k=c;return this},api:function(a,c){if(!this.element||
-!a)return!1;var b=this.element,f=""!==b.id?b.id:null,d=!c||!c.constructor||!c.call||!c.apply?c:null,e=c&&c.constructor&&c.call&&c.apply?c:null;e&&l(a,e,f);h(a,d,b);return this},addEvent:function(a,c){if(!this.element)return!1;var b=this.element,d=""!==b.id?b.id:null;l(a,c,d);"ready"!=a?h("addEventListener",a,b):"ready"==a&&i&&c.call(null,d);return this},removeEvent:function(a){if(!this.element)return!1;var c=this.element,b;a:{if((b=""!==c.id?c.id:null)&&d[b]){if(!d[b][a]){b=!1;break a}d[b][a]=null}else{if(!d[a]){b=
-!1;break a}d[a]=null}b=!0}"ready"!=a&&b&&h("removeEventListener",a,c)}};e.fn.init.prototype=e.fn;window.addEventListener?window.addEventListener("message",j,!1):window.attachEvent("onmessage",j);return window.Froogaloop=window.$f=e}();

www/js/player.js

@@ -64,13 +64,13 @@
 
     VimeoPlayer.prototype.load = function(data) {
       this.setMediaProperties(data);
-      return waitUntilDefined(window, '$f', (function(_this) {
+      return waitUntilDefined(window, 'Vimeo', (function(_this) {
         return function() {
           var video;
           video = $('<iframe/>');
           removeOld(video);
           video.attr({
-            src: "https://player.vimeo.com/video/" + data.id + "?api=1&player_id=ytapiplayer",
+            src: "https://player.vimeo.com/video/" + data.id,
             webkitallowfullscreen: true,
             mozallowfullscreen: true,
             allowfullscreen: true
@@ -78,28 +78,26 @@
           if (USEROPTS.wmode_transparent) {
             video.attr('wmode', 'transparent');
           }
-          return $f(video[0]).addEvent('ready', function() {
+          _this.vimeo = new Vimeo.Player(video[0]);
-            _this.vimeo = $f(video[0]);
+          _this.vimeo.on('ended', function() {
-            _this.play();
+            if (CLIENT.leader) {
-            _this.vimeo.addEvent('finish', function() {
+              return socket.emit('playNext');
-              if (CLIENT.leader) {
+            }
-                return socket.emit('playNext');
-              }
-            });
-            _this.vimeo.addEvent('pause', function() {
-              _this.paused = true;
-              if (CLIENT.leader) {
-                return sendVideoUpdate();
-              }
-            });
-            _this.vimeo.addEvent('play', function() {
-              _this.paused = false;
-              if (CLIENT.leader) {
-                return sendVideoUpdate();
-              }
-            });
-            return _this.setVolume(VOLUME);
           });
+          _this.vimeo.on('pause', function() {
+            _this.paused = true;
+            if (CLIENT.leader) {
+              return sendVideoUpdate();
+            }
+          });
+          _this.vimeo.on('play', function() {
+            _this.paused = false;
+            if (CLIENT.leader) {
+              return sendVideoUpdate();
+            }
+          });
+          _this.play();
+          return _this.setVolume(VOLUME);
         };
       })(this));
     };
@@ -107,33 +105,44 @@
     VimeoPlayer.prototype.play = function() {
       this.paused = false;
       if (this.vimeo) {
-        return this.vimeo.api('play');
+        return this.vimeo.play()["catch"](function(error) {
+          return console.error('vimeo::play():', error);
+        });
       }
     };
 
     VimeoPlayer.prototype.pause = function() {
       this.paused = true;
       if (this.vimeo) {
-        return this.vimeo.api('pause');
+        return this.vimeo.pause()["catch"](function(error) {
+          return console.error('vimeo::pause():', error);
+        });
       }
     };
 
     VimeoPlayer.prototype.seekTo = function(time) {
       if (this.vimeo) {
-        return this.vimeo.api('seekTo', time);
+        return this.vimeo.setCurrentTime(time)["catch"](function(error) {
+          return console.error('vimeo::seekTo():', error);
+        });
       }
     };
 
     VimeoPlayer.prototype.setVolume = function(volume) {
       if (this.vimeo) {
-        return this.vimeo.api('setVolume', volume);
+        return this.vimeo.setVolume(volume)["catch"](function(error) {
+          return console.error('vimeo::setVolume():', error);
+        });
       }
     };
 
     VimeoPlayer.prototype.getTime = function(cb) {
       if (this.vimeo) {
-        return this.vimeo.api('getCurrentTime', function(time) {
+        return this.vimeo.getCurrentTime().then(function(time) {
+          console.log('time', time);
           return cb(parseFloat(time));
+        })["catch"](function(error) {
+          return console.error('vimeo::getCurrentTime():', error);
         });
       } else {
         return cb(0);
@@ -142,7 +151,12 @@
 
     VimeoPlayer.prototype.getVolume = function(cb) {
       if (this.vimeo) {
-        return this.vimeo.api('getVolume', cb);
+        return this.vimeo.getVolume().then(function(volume) {
+          console.log('volume', volume);
+          return cb(parseFloat(volume));
+        })["catch"](function(error) {
+          return console.error('vimeo::getVolume():', error);
+        });
       } else {
         return cb(VOLUME);
       }