Implement playerjs for streamable (#706)

This commit is contained in:
Calvin Montgomery 2017-09-25 18:55:58 -07:00
parent bfc7cfc193
commit 8db22ad924
8 changed files with 1430 additions and 6 deletions

View file

@ -8,6 +8,8 @@ var order = [
'youtube.coffee', 'youtube.coffee',
'dailymotion.coffee', 'dailymotion.coffee',
'videojs.coffee', 'videojs.coffee',
'playerjs.coffee',
'streamable.coffee',
'gdrive-player.coffee', 'gdrive-player.coffee',
'raw-file.coffee', 'raw-file.coffee',
'soundcloud.coffee', 'soundcloud.coffee',

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.48.0", "version": "3.49.0",
"repository": { "repository": {
"url": "http://github.com/calzoneman/sync" "url": "http://github.com/calzoneman/sync"
}, },

89
player/playerjs.coffee Normal file
View file

@ -0,0 +1,89 @@
window.PlayerJSPlayer = class PlayerJSPlayer extends Player
constructor: (data) ->
if not (this instanceof PlayerJSPlayer)
return new PlayerJSPlayer(data)
@load(data)
load: (data) ->
@setMediaProperties(data)
@ready = false
@finishing = false
if not data.meta.playerjs
throw new Error('Invalid input: missing meta.playerjs')
waitUntilDefined(window, 'playerjs', =>
iframe = $('<iframe/>')
.attr(src: data.meta.playerjs.src)
removeOld(iframe)
@player = new playerjs.Player(iframe[0])
@player.on('ready', =>
@player.on('error', (error) =>
console.error('PlayerJS error', error.stack)
)
@player.on('ended', ->
# Streamable seems to not implement this since it loops
# gotta use the timeupdate hack below
if CLIENT.leader
socket.emit('playNext')
)
@player.on('timeupdate', (time) =>
if time.duration - time.seconds < 1 and not @finishing
setTimeout(=>
if CLIENT.leader
socket.emit('playNext')
@pause()
, (time.duration - time.seconds) * 1000)
@finishing = true
)
@player.on('play', ->
@paused = false
if CLIENT.leader
sendVideoUpdate()
)
@player.on('pause', ->
@paused = true
if CLIENT.leader
sendVideoUpdate()
)
@player.setVolume(VOLUME * 100)
@ready = true
)
)
play: ->
@paused = false
if @player and @ready
@player.play()
pause: ->
@paused = true
if @player and @ready
@player.pause()
seekTo: (time) ->
if @player and @ready
@player.setCurrentTime(time)
setVolume: (volume) ->
if @player and @ready
@player.setVolume(volume * 100)
getTime: (cb) ->
if @player and @ready
@player.getCurrentTime(cb)
else
cb(0)
getVolume: (cb) ->
if @player and @ready
@player.getVolume((volume) ->
cb(volume / 100)
)
else
cb(VOLUME)

12
player/streamable.coffee Normal file
View file

@ -0,0 +1,12 @@
window.StreamablePlayer = class StreamablePlayer extends PlayerJSPlayer
constructor: (data) ->
if not (this instanceof StreamablePlayer)
return new StreamablePlayer(data)
super(data)
load: (data) ->
data.meta.playerjs =
src: "https://streamable.com/e/#{data.id}"
super(data)

View file

@ -17,7 +17,7 @@ TYPE_MAP =
im: ImgurPlayer im: ImgurPlayer
vm: VideoJSPlayer vm: VideoJSPlayer
hl: HLSPlayer hl: HLSPlayer
sb: VideoJSPlayer sb: StreamablePlayer
tc: VideoJSPlayer tc: VideoJSPlayer
cm: VideoJSPlayer cm: VideoJSPlayer
@ -28,7 +28,7 @@ window.loadMediaPlayer = (data) ->
catch error catch error
console.error error console.error error
if data.meta.direct and data.type != 'gd' if data.meta.direct and data.type is 'vi'
try try
window.PLAYER = new VideoJSPlayer(data) window.PLAYER = new VideoJSPlayer(data)
catch e catch e

View file

@ -255,4 +255,5 @@ html(lang="en")
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")
script(defer, src="/js/playerjs-0.0.12.js")
script(defer, src="https://player.twitch.tv/js/embed/v1.js") script(defer, src="https://player.twitch.tv/js/embed/v1.js")

View file

@ -1,5 +1,5 @@
(function() { (function() {
var CUSTOM_EMBED_WARNING, CustomEmbedPlayer, DEFAULT_ERROR, DailymotionPlayer, EmbedPlayer, FilePlayer, GoogleDrivePlayer, GoogleDriveYouTubePlayer, HLSPlayer, ImgurPlayer, LivestreamPlayer, Player, RTMPPlayer, SmashcastPlayer, SoundCloudPlayer, TYPE_MAP, TwitchPlayer, UstreamPlayer, VideoJSPlayer, VimeoPlayer, YouTubePlayer, codecToMimeType, genParam, getSourceLabel, sortSources, var CUSTOM_EMBED_WARNING, CustomEmbedPlayer, DEFAULT_ERROR, DailymotionPlayer, EmbedPlayer, FilePlayer, GoogleDrivePlayer, GoogleDriveYouTubePlayer, HLSPlayer, ImgurPlayer, LivestreamPlayer, Player, PlayerJSPlayer, RTMPPlayer, SmashcastPlayer, SoundCloudPlayer, StreamablePlayer, TYPE_MAP, TwitchPlayer, UstreamPlayer, VideoJSPlayer, VimeoPlayer, YouTubePlayer, codecToMimeType, genParam, getSourceLabel, sortSources,
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
hasProp = {}.hasOwnProperty; hasProp = {}.hasOwnProperty;
@ -699,6 +699,139 @@
})(Player); })(Player);
window.PlayerJSPlayer = PlayerJSPlayer = (function(superClass) {
extend(PlayerJSPlayer, superClass);
function PlayerJSPlayer(data) {
if (!(this instanceof PlayerJSPlayer)) {
return new PlayerJSPlayer(data);
}
this.load(data);
}
PlayerJSPlayer.prototype.load = function(data) {
this.setMediaProperties(data);
this.ready = false;
this.finishing = false;
if (!data.meta.playerjs) {
throw new Error('Invalid input: missing meta.playerjs');
}
return waitUntilDefined(window, 'playerjs', (function(_this) {
return function() {
var iframe;
iframe = $('<iframe/>').attr({
src: data.meta.playerjs.src
});
removeOld(iframe);
_this.player = new playerjs.Player(iframe[0]);
return _this.player.on('ready', function() {
_this.player.on('error', function(error) {
return console.error('PlayerJS error', error.stack);
});
_this.player.on('ended', function() {
if (CLIENT.leader) {
return socket.emit('playNext');
}
});
_this.player.on('timeupdate', function(time) {
if (time.duration - time.seconds < 1 && !_this.finishing) {
setTimeout(function() {
if (CLIENT.leader) {
socket.emit('playNext');
}
return _this.pause();
}, (time.duration - time.seconds) * 1000);
return _this.finishing = true;
}
});
_this.player.on('play', function() {
this.paused = false;
if (CLIENT.leader) {
return sendVideoUpdate();
}
});
_this.player.on('pause', function() {
this.paused = true;
if (CLIENT.leader) {
return sendVideoUpdate();
}
});
_this.player.setVolume(VOLUME * 100);
return _this.ready = true;
});
};
})(this));
};
PlayerJSPlayer.prototype.play = function() {
this.paused = false;
if (this.player && this.ready) {
return this.player.play();
}
};
PlayerJSPlayer.prototype.pause = function() {
this.paused = true;
if (this.player && this.ready) {
return this.player.pause();
}
};
PlayerJSPlayer.prototype.seekTo = function(time) {
if (this.player && this.ready) {
return this.player.setCurrentTime(time);
}
};
PlayerJSPlayer.prototype.setVolume = function(volume) {
if (this.player && this.ready) {
return this.player.setVolume(volume * 100);
}
};
PlayerJSPlayer.prototype.getTime = function(cb) {
if (this.player && this.ready) {
return this.player.getCurrentTime(cb);
} else {
return cb(0);
}
};
PlayerJSPlayer.prototype.getVolume = function(cb) {
if (this.player && this.ready) {
return this.player.getVolume(function(volume) {
return cb(volume / 100);
});
} else {
return cb(VOLUME);
}
};
return PlayerJSPlayer;
})(Player);
window.StreamablePlayer = StreamablePlayer = (function(superClass) {
extend(StreamablePlayer, superClass);
function StreamablePlayer(data) {
if (!(this instanceof StreamablePlayer)) {
return new StreamablePlayer(data);
}
StreamablePlayer.__super__.constructor.call(this, data);
}
StreamablePlayer.prototype.load = function(data) {
data.meta.playerjs = {
src: "https://streamable.com/e/" + data.id
};
return StreamablePlayer.__super__.load.call(this, data);
};
return StreamablePlayer;
})(PlayerJSPlayer);
window.GoogleDrivePlayer = GoogleDrivePlayer = (function(superClass) { window.GoogleDrivePlayer = GoogleDrivePlayer = (function(superClass) {
extend(GoogleDrivePlayer, superClass); extend(GoogleDrivePlayer, superClass);
@ -1553,7 +1686,7 @@
im: ImgurPlayer, im: ImgurPlayer,
vm: VideoJSPlayer, vm: VideoJSPlayer,
hl: HLSPlayer, hl: HLSPlayer,
sb: VideoJSPlayer, sb: StreamablePlayer,
tc: VideoJSPlayer, tc: VideoJSPlayer,
cm: VideoJSPlayer cm: VideoJSPlayer
}; };
@ -1568,7 +1701,7 @@
error = error1; error = error1;
console.error(error); console.error(error);
} }
if (data.meta.direct && data.type !== 'gd') { if (data.meta.direct && data.type === 'vi') {
try { try {
return window.PLAYER = new VideoJSPlayer(data); return window.PLAYER = new VideoJSPlayer(data);
} catch (error1) { } catch (error1) {

1187
www/js/playerjs-0.0.12.js Normal file

File diff suppressed because it is too large Load diff