Implement playerjs for streamable (#706)

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