Replace froogaloop

Froogaloop no longer appears to work.

Followed migration guide: https://github.com/vimeo/player.js/blob/master/docs/migrate-from-froogaloop.md
This commit is contained in:
Calvin Montgomery 2017-10-28 23:10:15 -07:00
parent 3cd8bfa8c7
commit b453aecee5
5 changed files with 86 additions and 65 deletions

View File

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

View File

@ -8,11 +8,11 @@ window.VimeoPlayer = class VimeoPlayer extends Player
load: (data) -> load: (data) ->
@setMediaProperties(data) @setMediaProperties(data)
waitUntilDefined(window, '$f', => waitUntilDefined(window, 'Vimeo', =>
video = $('<iframe/>') video = $('<iframe/>')
removeOld(video) removeOld(video)
video.attr( 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 webkitallowfullscreen: true
mozallowfullscreen: true mozallowfullscreen: true
allowfullscreen: true allowfullscreen: true
@ -21,60 +21,71 @@ window.VimeoPlayer = class VimeoPlayer extends Player
if USEROPTS.wmode_transparent if USEROPTS.wmode_transparent
video.attr('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: -> play: ->
@paused = false @paused = false
if @vimeo if @vimeo
@vimeo.api('play') @vimeo.play().catch((error) ->
console.error('vimeo::play():', error)
)
pause: -> pause: ->
@paused = true @paused = true
if @vimeo if @vimeo
@vimeo.api('pause') @vimeo.pause().catch((error) ->
console.error('vimeo::pause():', error)
)
seekTo: (time) -> seekTo: (time) ->
if @vimeo if @vimeo
@vimeo.api('seekTo', time) @vimeo.setCurrentTime(time).catch((error) ->
console.error('vimeo::setCurrentTime():', error)
)
setVolume: (volume) -> setVolume: (volume) ->
if @vimeo if @vimeo
@vimeo.api('setVolume', volume) @vimeo.setVolume(volume).catch((error) ->
console.error('vimeo::setVolume():', error)
)
getTime: (cb) -> getTime: (cb) ->
if @vimeo 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)) cb(parseFloat(time))
).catch((error) ->
console.error('vimeo::getCurrentTime():', error)
) )
else else
cb(0) cb(0)
getVolume: (cb) -> getVolume: (cb) ->
if @vimeo if @vimeo
@vimeo.api('getVolume', cb) @vimeo.getVolume().then((volume) ->
cb(parseFloat(volume))
).catch((error) ->
console.error('vimeo::getVolume():', error)
)
else else
cb(VOLUME) cb(VOLUME)

View File

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

View File

@ -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}();

View File

@ -64,13 +64,13 @@
VimeoPlayer.prototype.load = function(data) { VimeoPlayer.prototype.load = function(data) {
this.setMediaProperties(data); this.setMediaProperties(data);
return waitUntilDefined(window, '$f', (function(_this) { return waitUntilDefined(window, 'Vimeo', (function(_this) {
return function() { return function() {
var video; var video;
video = $('<iframe/>'); video = $('<iframe/>');
removeOld(video); removeOld(video);
video.attr({ 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, webkitallowfullscreen: true,
mozallowfullscreen: true, mozallowfullscreen: true,
allowfullscreen: true allowfullscreen: true
@ -78,28 +78,26 @@
if (USEROPTS.wmode_transparent) { if (USEROPTS.wmode_transparent) {
video.attr('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)); })(this));
}; };
@ -107,33 +105,44 @@
VimeoPlayer.prototype.play = function() { VimeoPlayer.prototype.play = function() {
this.paused = false; this.paused = false;
if (this.vimeo) { 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() { VimeoPlayer.prototype.pause = function() {
this.paused = true; this.paused = true;
if (this.vimeo) { 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) { VimeoPlayer.prototype.seekTo = function(time) {
if (this.vimeo) { 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) { VimeoPlayer.prototype.setVolume = function(volume) {
if (this.vimeo) { 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) { VimeoPlayer.prototype.getTime = function(cb) {
if (this.vimeo) { 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)); return cb(parseFloat(time));
})["catch"](function(error) {
return console.error('vimeo::getCurrentTime():', error);
}); });
} else { } else {
return cb(0); return cb(0);
@ -142,7 +151,12 @@
VimeoPlayer.prototype.getVolume = function(cb) { VimeoPlayer.prototype.getVolume = function(cb) {
if (this.vimeo) { 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 { } else {
return cb(VOLUME); return cb(VOLUME);
} }