Implement playerjs for streamable (#706)

build-player.js

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

package.json

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

player/playerjs.coffee

@@ -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)

player/streamable.coffee

@@ -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)

player/update.coffee

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

templates/channel.pug

@@ -255,4 +255,5 @@ html(lang="en")
     script(defer, src="/js/video.js")
     script(defer, src="/js/videojs-contrib-hls.min.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")

www/js/player.js

@@ -1,5 +1,5 @@
 (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; },
     hasProp = {}.hasOwnProperty;
 
@@ -699,6 +699,139 @@
 
   })(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) {
     extend(GoogleDrivePlayer, superClass);
 
@@ -1553,7 +1686,7 @@
     im: ImgurPlayer,
     vm: VideoJSPlayer,
     hl: HLSPlayer,
-    sb: VideoJSPlayer,
+    sb: StreamablePlayer,
     tc: VideoJSPlayer,
     cm: VideoJSPlayer
   };
@@ -1568,7 +1701,7 @@
       error = error1;
       console.error(error);
     }
-    if (data.meta.direct && data.type !== 'gd') {
+    if (data.meta.direct && data.type === 'vi') {
       try {
         return window.PLAYER = new VideoJSPlayer(data);
       } catch (error1) {