Fix update mediaquery git hash

Upgrade Video.js core to v7.18.0 from v5.10.7
Upgrade Dash.js to v4.2.8 from v2.6.3
Upgrade videojs-contrib-dash to v5.1.1 from v2.9.1
Modify videojs-resolution-switcher

.eslintrc.js

@@ -0,0 +1,45 @@
+/* ESLint Config */
+module.exports = {
+    env: {
+        'es2017': true,
+        // others envs defined by cascading .eslintrc files
+    },
+    extends: 'eslint:recommended',
+    parser: '@babel/eslint-parser',
+    parserOptions: {
+        'sourceType': 'module',
+    },
+    rules: {
+        'brace-style': ['error','1tbs',{ 'allowSingleLine': true }],
+        'indent': [
+            'off', // temporary... a lot of stuff needs to be reformatted | 2020-08-21: I guess it's not so temporary...
+            4,
+            { 'SwitchCase': 1 }
+        ],
+        'linebreak-style': ['error','unix'],
+        'no-control-regex': ['off'],
+        'no-prototype-builtins': ['off'], // should consider cleaning up the code and turning this back on at some point
+        'no-trailing-spaces': ['error'],
+        'no-unused-vars': [
+            'error', {
+                'argsIgnorePattern': '^_',
+                'varsIgnorePattern': '^_|^Promise$'
+            }
+        ],
+        'semi': ['error','always'],
+        'quotes': ['off'] // Old code uses double quotes, new code uses single / template
+    },
+    ignorePatterns: [
+        // These are not ours
+        'www/js/dash.all.min.js',
+        'www/js/jquery-1.12.4.min.js',
+        'www/js/jquery-ui.js',
+        'www/js/peertube.js',
+        'www/js/playerjs-0.0.12.js',
+        'www/js/sc.js',
+        'www/js/video.js',
+        'www/js/videojs-contrib-hls.min.js',
+        'www/js/videojs-dash.js',
+        'www/js/videojs-resolution-switcher.js',
+    ],
+}

.eslintrc.yml

@@ -1,35 +0,0 @@
-env:
-  es6: true
-  node: true
-extends: 'eslint:recommended'
-parser: '@babel/eslint-parser'
-parserOptions:
-  sourceType: module
-  ecmaVersion: 2017 # For async/await
-rules:
-  brace-style:
-    - error
-    - 1tbs
-    - allowSingleLine: true
-  indent:
-    - off # temporary... a lot of stuff needs to be reformatted | 2020-08-21: I guess it's not so temporary...
-    - 4
-    - SwitchCase: 1
-  linebreak-style:
-    - error
-    - unix
-  no-control-regex:
-    - off
-  no-prototype-builtins:
-    - off # should consider cleaning up the code and turning this back on at some point
-  no-trailing-spaces:
-    - error
-  no-unused-vars:
-    - error
-    - argsIgnorePattern: ^_
-      varsIgnorePattern: ^_|^Promise$
-  semi:
-    - error
-    - always
-  quotes:
-    - off # Old code uses double quotes, new code uses single / template

.gitignore

@@ -18,3 +18,4 @@ www/js/cytube-google-drive.user.js
 www/js/cytube-google-drive.meta.js
 www/js/player.js
 tor-exit-list.json
+*.patch

LICENSE

@@ -1,6 +1,6 @@
 /*
 The MIT License (MIT)
-Copyright (c) 2013-2021 Calvin Montgomery and contributors
+Copyright (c) 2013-2022 Calvin Montgomery and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

NEWS.md

@@ -1,3 +1,12 @@
+2022-08-28
+==========
+
+This release integrates Xaekai's added support for Bandcamp, BitChute, Odysee,
+and Nicovideo playback support into the main repository.  The updated support
+for custom fonts and audio tracks in custom media manifests is also included,
+but does not work out of the box -- it requires a separate channel script; this
+may be addressed in the future.
+
 2021-08-14
 ==========
 

bin/build-player.js

@@ -6,25 +6,35 @@ var path = require('path');
 
 var order = [
     'base.coffee',
+
+    'dailymotion.coffee',
+    'niconico.coffee',
+    'peertube.coffee',
+    'soundcloud.coffee',
+    'twitch.coffee',
     'vimeo.coffee',
     'youtube.coffee',
-    'dailymotion.coffee',
+
-    'videojs.coffee',
+    // playerjs-based players
     'playerjs.coffee',
+    'iframechild.coffee',
+    'odysee.coffee',
     'streamable.coffee',
-    'gdrive-player.coffee',
+
-    'raw-file.coffee',
+    // iframe embed-based players
-    'soundcloud.coffee',
     'embed.coffee',
-    'twitch.coffee',
-    'livestream.com.coffee',
     'custom-embed.coffee',
-    'rtmp.coffee',
+    'livestream.com.coffee',
-    'smashcast.coffee',
-    'ustream.coffee',
-    'imgur.coffee',
-    'hls.coffee',
     'twitchclip.coffee',
+
+    // video.js-based players
+    'videojs.coffee',
+    'gdrive-player.coffee',
+    'hls.coffee',
+    'raw-file.coffee',
+    'rtmp.coffee',
+
+    // mediaUpdate handler
     'update.coffee'
 ];
 

docs/custom-media.md

@@ -1,7 +1,7 @@
 CyTube Custom Content Metadata
 ==============================
 
-*Last updated: 2019-05-05*
+*Last updated: 2022-02-12*
 
 ## Purpose ##
 
@@ -61,6 +61,8 @@ To add custom content, the user provides a JSON object with the following keys:
     playlist, but this functionality may be offered in the future.
   * `sources`: A nonempty list of playable sources for the content.  The format
     is described below.
+  * `audioTracks`: An optional list of audio tracks for using demuxed audio
+    and providing multiple audio selections. The format is described below.
   * `textTracks`: An optional list of text tracks for subtitles or closed
     captioning.  The format is described below.
 
@@ -99,19 +101,46 @@ The following MIME types are accepted for the `contentType` field:
       RTMP streams are only supported through the existing `rt:` media
       type.
   * `audio/aac`
-  * `audio/ogg`
+  * `audio/mp4`
   * `audio/mpeg`
+  * `audio/ogg`
 
 Other audio or video formats, such as AVI, MKV, and FLAC, are not supported due
 to lack of common support across browsers for playing these formats.  For more
 information, refer to
 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility).
 
+### Audio Track Format ###
+
+Each audio track entry is a JSON object with the following keys:
+
+  * `label`: A label for the audio track.  This is displayed in the menu for the
+    viewer to select a text track.
+  * `language`: A two or three letter IETF BCP 47 subtype code indicating the
+    language of the audio track.
+  * `url`: A valid URL that browsers can use to retrieve the track.  The URL
+    must resolve to a publicly-routed IP address, and must use the `https:` scheme.
+  * `contentType`: A string representing the MIME type of the track at `url`.
+    Any type starting with `audio` from the list above is acceptable. However
+    the usage of audio/aac is known to cause audio syncrhonization problems
+    for some users. It is recommended to use an m4a file to wrap aac streams.
+
+**Important note regarding audio tracks:**
+
+Because of browsers trying to be too smart for their own good, you should
+include a silent audio stream in the video sources when using separate audio
+tracks. If you do not, the browser will automatically pause the video whenever
+the browser detects the page as not visible. There is no way to instruct it to
+not do so. You can readily accomplish the inclusion of a silent audio track
+with ffmpeg using the anullsrc filter like so:
+`ffmpeg -f lavfi -i anullsrc=channel_layout=stereo:sample_rate=48000 -i input.mp4 -c:v copy -c:a aac -shortest output.mp4`
+It is recommended to match the sample rate and codec you intend to use in your
+audioTracks in your silent track.
+
 ### Text Track Format ###
 
 Each text track entry is a JSON object with the following keys:
 
-
   * `url`: A valid URL that browsers can use to retrieve the track.  The URL
     must resolve to a publicly-routed IP address, and must the `https:` scheme.
   * `contentType`: A string representing the MIME type of the track at `url`.
@@ -177,3 +206,5 @@ non-exhaustive.
     to the browser.
   * The manifest includes source URLs or text track URLs with expiration times,
     session IDs, etc. in the URL querystring.
+  * The manifest provides source URLs with non-silent audio as well as a list
+    of audioTracks.

docs/user-settings.md

@@ -21,7 +21,6 @@ Setting | Description
 --------|------------
 Synchronize video playback | By default, CyTube attempts to synchronize the video so that everyone is watching at the same time.  Some users with poor internet connections may wish to disable this in order to prevent excessive buffering due to constantly seeking forward.
 Synch threshold | The number of seconds your video is allowed to be ahead/behind before it is forcibly seeked to the correct position.  Should be set to at least 2 seconds to avoid buffering problems and choppy playback.
-Set wmode=transparent | There's probably no reason to touch this unless you know what you're doing.  Having a non-transparent wmode can cause modals to display behind the video player, but also can cause performance issues in some situations.
 Remove the video player | Automatically remove the video player on page load.  Equivalent to manually clicking Layout->Remove Video every time you load a channel.
 Hide playlist buttons by default | Hides the control buttons from each video in the playlist, so that only the title is displayed.  The control buttons can be shown by right clicking the video item in the playlist.
 Old style playlist buttons | Legacy feature introduced in CyTube 2.0 for those who preferred the old 1.0-style video control buttons.

package.json

@@ -2,14 +2,14 @@
   "author": "Calvin Montgomery",
   "name": "CyTube",
   "description": "Online media synchronizer and chat",
-  "version": "3.82.11",
+  "version": "3.83.0",
   "repository": {
     "url": "http://github.com/calzoneman/sync"
   },
   "license": "MIT",
   "dependencies": {
     "@calzoneman/jsli": "^2.0.1",
-    "@cytube/mediaquery": "github:CyTube/mediaquery#4f803961d72a4fc7a1e09c0babaf8ea685013b1b",
+    "@cytube/mediaquery": "github:CyTube/mediaquery#c1dcf792cd6e9977c04c1e96f23315dad5e3294d",
     "bcrypt": "^5.0.1",
     "bluebird": "^3.7.2",
     "body-parser": "^1.19.0",
@@ -60,6 +60,7 @@
     "babel-plugin-add-module-exports": "^1.0.4",
     "coffeescript": "^1.9.2",
     "eslint": "^7.32.0",
+    "eslint-plugin-no-jquery": "^2.7.0",
     "mocha": "^9.2.2",
     "sinon": "^10.0.0"
   },

player/custom-embed.coffee

@@ -21,7 +21,7 @@ window.CustomEmbedPlayer = class CustomEmbedPlayer extends EmbedPlayer
             .removeClass('col-md-12')
         $('<button/>').addClass('btn btn-default')
             .text('Embed')
-            .click(=>
+            .on('click', =>
                 super(data)
             )
             .appendTo(alert.find('.alert'))

player/dailymotion.coffee

@@ -12,7 +12,6 @@ window.DailymotionPlayer = class DailymotionPlayer extends Player
 
             params =
                 autoplay: 1
-                wmode: if USEROPTS.wmode_transparent then 'transparent' else 'opaque'
                 logo: 0
 
             quality = @mapQuality(USEROPTS.default_quality)

player/iframechild.coffee

@@ -0,0 +1,33 @@
+window.IframeChild = class IframeChild extends PlayerJSPlayer
+    constructor: (data) ->
+        if not (this instanceof IframeChild)
+            return new IframeChild(data)
+
+        super(data)
+
+    load: (data) ->
+        @setMediaProperties(data)
+        @ready = false
+
+        waitUntilDefined(window, 'playerjs', =>
+            iframe = $('<iframe/>')
+                    .attr(
+                        src: '/iframe'
+                        allow: 'autoplay; fullscreen'
+                    )
+
+            removeOld(iframe)
+            @setupFrame(iframe[0], data)
+            @setupPlayer(iframe[0])
+        )
+
+    setupFrame: (iframe, data) ->
+        iframe.addEventListener('load', =>
+            # TODO: ideally, communication with the child frame should use postMessage()
+            iframe.contentWindow.VOLUME = VOLUME
+            iframe.contentWindow.loadMediaPlayer(Object.assign({}, data, { type: 'cm' } ))
+            iframe.contentWindow.document.querySelector('#ytapiplayer').classList.add('vjs-16-9')
+            adapter = iframe.contentWindow.playerjs.VideoJSAdapter(iframe.contentWindow.PLAYER.player)
+            adapter.ready()
+            typeof data?.meta?.thumbnail == 'string' and iframe.contentWindow.PLAYER.player.poster(data.meta.thumbnail)
+        )

player/imgur.coffee

@@ -1,12 +0,0 @@
-window.ImgurPlayer = class ImgurPlayer extends EmbedPlayer
-    constructor: (data) ->
-        if not (this instanceof ImgurPlayer)
-            return new ImgurPlayer(data)
-
-        @load(data)
-
-    load: (data) ->
-        data.meta.embed =
-            tag: 'iframe'
-            src: "https://imgur.com/a/#{data.id}/embed"
-        super(data)

player/livestream.com.coffee

@@ -6,11 +6,12 @@ window.LivestreamPlayer = class LivestreamPlayer extends EmbedPlayer
         @load(data)
 
     load: (data) ->
+        [ account, event ] = data.id.split(';')
         data.meta.embed =
-            src: "https://cdn.livestream.com/embed/#{data.id}?\
+            src: "https://livestream.com/accounts/#{account}/events/#{event}/player?\
-                    layout=4&\
+                    enableInfoAndActivity=false&\
-                    color=0x000000&\
+                    defaultDrawer=&\
-                    iconColorOver=0xe7e7e7&\
+                    autoPlay=true&\
-                    iconColor=0xcccccc"
+                    mute=false"
             tag: 'iframe'
         super(data)

player/niconico.coffee

@@ -0,0 +1,66 @@
+window.NicoPlayer = class NicoPlayer extends Player
+    constructor: (data) ->
+        if not (this instanceof NicoPlayer)
+            return new NicoPlayer(data)
+
+        @load(data)
+
+    load: (data) ->
+        @setMediaProperties(data)
+
+        waitUntilDefined(window, 'NicovideoEmbed', =>
+            @nico = new NicovideoEmbed({ playerId: 'ytapiplayer', videoId: data.id })
+            removeOld($(@nico.iframe))
+
+            @nico.on('ended', =>
+                if CLIENT.leader
+                    socket.emit('playNext')
+            )
+
+            @nico.on('pause', =>
+                @paused = true
+                if CLIENT.leader
+                    sendVideoUpdate()
+            )
+
+            @nico.on('play', =>
+                @paused = false
+                if CLIENT.leader
+                    sendVideoUpdate()
+            )
+
+            @nico.on('ready', =>
+                @play()
+                @setVolume(VOLUME)
+            )
+        )
+
+    play: ->
+        @paused = false
+        if @nico
+            @nico.play()
+
+    pause: ->
+        @paused = true
+        if @nico
+            @nico.pause()
+
+    seekTo: (time) ->
+        if @nico
+            @nico.seek(time * 1000)
+
+    setVolume: (volume) ->
+        if @nico
+            @nico.volumeChange(volume)
+
+    getTime: (cb) ->
+        if @nico
+            cb(parseFloat(@nico.state.currentTime / 1000))
+        else
+            cb(0)
+
+    getVolume: (cb) ->
+        if @nico
+            cb(parseFloat(@nico.state.volume))
+        else
+            cb(VOLUME)

player/odysee.coffee

@@ -0,0 +1,21 @@
+window.OdyseePlayer = class OdyseePlayer extends PlayerJSPlayer
+    constructor: (data) ->
+        if not (this instanceof OdyseePlayer)
+            return new OdyseePlayer(data)
+
+        super(data)
+
+    load: (data) ->
+        @ready = false
+        @setMediaProperties(data)
+
+        waitUntilDefined(window, 'playerjs', =>
+            iframe = $('<iframe/>')
+                    .attr(
+                        src: data.meta.embed.src
+                        allow: 'autoplay; fullscreen'
+                    )
+
+            removeOld(iframe)
+            @setupPlayer(iframe[0], data)
+        )

player/peertube.coffee

@@ -0,0 +1,122 @@
+PEERTUBE_EMBED_WARNING = 'This channel is embedding PeerTube content from %link%.
+    PeerTube instances may use P2P technology that will expose your IP address to third parties, including but not
+    limited to other users in this channel. It is also conceivable that if the content in question is in violation of
+    copyright laws your IP address could be potentially be observed by legal authorities monitoring the tracker of
+    this PeerTube instance. The operators of %site% are not responsible for the data sent by the embedded player to
+    third parties on your behalf.<br><br> If you understand the risks, wish to assume all liability, and continue to
+    the content, click "Embed" below to allow the content to be embedded.<hr>'
+
+PEERTUBE_RISK = false
+
+window.PeerPlayer = class PeerPlayer extends Player
+    constructor: (data) ->
+        if not (this instanceof PeerPlayer)
+            return new PeerPlayer(data)
+
+        @warn(data)
+
+    warn: (data) ->
+        if USEROPTS.peertube_risk or PEERTUBE_RISK
+            return @load(data)
+
+        site = new URL(document.URL).hostname
+        embedSrc = data.meta.embed.domain
+        link = "<a href=\"http://#{embedSrc}\" target=\"_blank\" rel=\"noopener noreferer\"><strong>#{embedSrc}</strong></a>"
+        alert = makeAlert('Privacy Advisory', PEERTUBE_EMBED_WARNING.replace('%link%', link).replace('%site%', site),
+            'alert-warning')
+            .removeClass('col-md-12')
+        $('<button/>').addClass('btn btn-default')
+            .text('Embed')
+            .on('click', =>
+                @load(data)
+            )
+            .appendTo(alert.find('.alert'))
+        $('<button/>').addClass('btn btn-default pull-right')
+            .text('Embed and dont ask again for this session')
+            .on('click', =>
+                PEERTUBE_RISK = true
+                @load(data)
+            )
+            .appendTo(alert.find('.alert'))
+        removeOld(alert)
+
+    load: (data) ->
+        @setMediaProperties(data)
+
+        waitUntilDefined(window, 'PeerTubePlayer', =>
+            video = $('<iframe/>')
+            removeOld(video)
+            video.attr(
+                src: "https://#{data.meta.embed.domain}/videos/embed/#{data.meta.embed.uuid}?api=1"
+                allow: 'autoplay; fullscreen'
+            )
+
+            @peertube = new PeerTubePlayer(video[0])
+
+            @peertube.addEventListener('playbackStatusChange', (status) =>
+                @paused = status == 'paused'
+                if CLIENT.leader
+                    sendVideoUpdate()
+            )
+
+            @peertube.addEventListener('playbackStatusUpdate', (status) =>
+                @peertube.currentTime = status.position
+
+                if status.playbackState == "ended" and CLIENT.leader
+                    socket.emit('playNext')
+            )
+
+            @peertube.addEventListener('volumeChange', (volume) =>
+                VOLUME = volume
+                setOpt("volume", VOLUME)
+            )
+
+            @play()
+            @setVolume(VOLUME)
+        )
+
+    play: ->
+        @paused = false
+        if @peertube and @peertube.ready
+            @peertube.play().catch((error) ->
+                console.error('PeerTube::play():', error)
+            )
+
+    pause: ->
+        @paused = true
+        if @peertube and @peertube.ready
+            @peertube.pause().catch((error) ->
+                console.error('PeerTube::pause():', error)
+            )
+
+    seekTo: (time) ->
+        if @peertube and @peertube.ready
+            @peertube.seek(time)
+
+    getVolume: (cb) ->
+        if @peertube and @peertube.ready
+            @peertube.getVolume().then((volume) ->
+                cb(parseFloat(volume))
+            ).catch((error) ->
+                console.error('PeerTube::getVolume():', error)
+            )
+        else
+            cb(VOLUME)
+
+    setVolume: (volume) ->
+        if @peertube and @peertube.ready
+            @peertube.setVolume(volume).catch((error) ->
+                console.error('PeerTube::setVolume():', error)
+            )
+
+    getTime: (cb) ->
+        if @peertube and @peertube.ready
+            cb(@peertube.currentTime)
+        else
+            cb(0)
+
+    setQuality: (quality) ->
+        # USEROPTS.default_quality
+        # @peertube.getResolutions()
+        # @peertube.setResolution(resolutionId : number)
+

player/playerjs.coffee

@@ -8,55 +8,48 @@ window.PlayerJSPlayer = class PlayerJSPlayer extends Player
     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)
+                    .attr(
+                        src: data.meta.playerjs.src
+                        allow: 'autoplay; fullscreen'
+                    )
 
             removeOld(iframe)
+            @setupPlayer(iframe[0])
+        )
 
-            @player = new playerjs.Player(iframe[0])
+    setupPlayer: (iframe) ->
-            @player.on('ready', =>
+        @player = new playerjs.Player(iframe)
-                @player.on('error', (error) =>
+        @player.on('ready', =>
-                    console.error('PlayerJS error', error.stack)
+            @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)
-
-                if not @paused
-                    @player.play()
-
-                @ready = true
             )
+            @player.on('ended', ->
+                if CLIENT.leader
+                    socket.emit('playNext')
+            )
+            @player.on('play', ->
+                @paused = false
+                if CLIENT.leader
+                    sendVideoUpdate()
+            )
+            @player.on('pause', ->
+                @paused = true
+                if CLIENT.leader
+                    sendVideoUpdate()
+            )
+
+            @player.setVolume(VOLUME * 100)
+
+            if not @paused
+                @player.play()
+
+            @ready = true
         )
 
     play: ->

player/smashcast.coffee

@@ -1,12 +0,0 @@
-window.SmashcastPlayer = class SmashcastPlayer extends EmbedPlayer
-    constructor: (data) ->
-        if not (this instanceof SmashcastPlayer)
-            return new SmashcastPlayer(data)
-
-        @load(data)
-
-    load: (data) ->
-        data.meta.embed =
-            src: "https://www.smashcast.tv/embed/#{data.id}"
-            tag: 'iframe'
-        super(data)

player/streamable.coffee

@@ -6,7 +6,30 @@ window.StreamablePlayer = class StreamablePlayer extends PlayerJSPlayer
         super(data)
 
     load: (data) ->
-        data.meta.playerjs =
+        @ready = false
-            src: "https://streamable.com/e/#{data.id}"
+        @finishing = false
+        @setMediaProperties(data)
 
-        super(data)
+        waitUntilDefined(window, 'playerjs', =>
+            iframe = $('<iframe/>')
+                    .attr(
+                        src: "https://streamable.com/e/#{data.id}"
+                        allow: 'autoplay; fullscreen'
+                    )
+
+            removeOld(iframe)
+            @setupPlayer(iframe[0])
+            @player.on('ready', =>
+                # Streamable does not implement ended event since it loops
+                # gotta use a timeupdate hack
+                @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/update.coffee

@@ -3,7 +3,6 @@ TYPE_MAP =
     vi: VimeoPlayer
     dm: DailymotionPlayer
     gd: GoogleDrivePlayer
-    gp: VideoJSPlayer
     fi: FilePlayer
     sc: SoundCloudPlayer
     li: LivestreamPlayer
@@ -11,13 +10,15 @@ TYPE_MAP =
     tv: TwitchPlayer
     cu: CustomEmbedPlayer
     rt: RTMPPlayer
-    hb: SmashcastPlayer
-    us: UstreamPlayer
-    im: ImgurPlayer
     hl: HLSPlayer
     sb: StreamablePlayer
     tc: TwitchClipPlayer
     cm: VideoJSPlayer
+    pt: PeerPlayer
+    bc: IframeChild
+    bn: IframeChild
+    od: OdyseePlayer
+    nv: NicoPlayer
 
 window.loadMediaPlayer = (data) ->
     try
@@ -109,7 +110,8 @@ window.removeOld = (replace) ->
     $('#soundcloud-volume-holder').remove()
     replace ?= $('<div/>').addClass('embed-responsive-item')
     old = $('#ytapiplayer')
+    old.attr('id', 'ytapiplayer-old')
+    replace.attr('id', 'ytapiplayer')
     replace.insertBefore(old)
     old.remove()
-    replace.attr('id', 'ytapiplayer')
     return replace

player/ustream.coffee

@@ -1,12 +0,0 @@
-window.UstreamPlayer = class UstreamPlayer extends EmbedPlayer
-    constructor: (data) ->
-        if not (this instanceof UstreamPlayer)
-            return new UstreamPlayer(data)
-
-        @load(data)
-
-    load: (data) ->
-        data.meta.embed =
-            tag: 'iframe'
-            src: "https://www.ustream.tv/embed/#{data.id}?html5ui"
-        super(data)

player/videojs.coffee

@@ -42,14 +42,14 @@ getSourceLabel = (source) ->
     else
         return "#{source.quality}p #{source.contentType.split('/')[1]}"
 
-waitUntilDefined(window, 'videojs', =>
-    videojs.options.flash.swf = '/video-js.swf'
-)
-
 hasAnyTextTracks = (data) ->
     ntracks = data?.meta?.textTracks?.length ? 0
     return ntracks > 0
 
+hasAnyAudioTracks = (data) ->
+    ntracks = data?.meta?.audioTracks?.length ? 0
+    return ntracks > 0
+
 window.VideoJSPlayer = class VideoJSPlayer extends Player
     constructor: (data) ->
         if not (this instanceof VideoJSPlayer)
@@ -112,17 +112,26 @@ window.VideoJSPlayer = class VideoJSPlayer extends Player
                     $('<track/>').attr(attrs).appendTo(video)
                 )
 
+            pluginData =
+                videoJsResolutionSwitcher:
+                    default: @sources[0].res
+
+            if hasAnyAudioTracks(data)
+                pluginData.audioSwitch =
+                    audioTracks: data.meta.audioTracks,
+                    volume: VOLUME
+
             @player = videojs(video[0],
                     # https://github.com/Dash-Industry-Forum/dash.js/issues/2184
                     autoplay: @sources[0].type != 'application/dash+xml',
                     controls: true,
-                    plugins:
+                    plugins: pluginData
-                        videoJsResolutionSwitcher:
+
-                            default: @sources[0].res
             )
             @player.ready(=>
                 # Have to use updateSrc instead of <source> tags
                 # see: https://github.com/videojs/video.js/issues/3428
+                @player.poster(data.meta.thumbnail)
                 @player.updateSrc(@sources)
                 @player.on('error', =>
                     err = @player.error()

player/vimeo.coffee

@@ -13,14 +13,9 @@ window.VimeoPlayer = class VimeoPlayer extends Player
             removeOld(video)
             video.attr(
                 src: "https://player.vimeo.com/video/#{data.id}"
-                webkitallowfullscreen: true
+                allow: 'autoplay; fullscreen'
-                mozallowfullscreen: true
-                allowfullscreen: true
             )
 
-            if USEROPTS.wmode_transparent
-                video.attr('wmode', 'transparent')
-
             @vimeo = new Vimeo.Player(video[0])
 
             @vimeo.on('ended', =>

player/youtube.coffee

@@ -12,7 +12,6 @@ window.YouTubePlayer = class YouTubePlayer extends Player
             waitUntilDefined(YT, 'Player', =>
                 removeOld()
 
-                wmode = if USEROPTS.wmode_transparent then 'transparent' else 'opaque'
                 @yt = new YT.Player('ytapiplayer',
                     videoId: data.id
                     playerVars:
@@ -21,7 +20,6 @@ window.YouTubePlayer = class YouTubePlayer extends Player
                         controls: 1
                         iv_load_policy: 3 # iv_load_policy 3 indicates no annotations
                         rel: 0
-                        wmode: wmode
                     events:
                         onReady: @onReady.bind(this)
                         onStateChange: @onStateChange.bind(this)

src/.eslintrc.json

@@ -0,0 +1 @@
+{ "env": { "node": true } }

src/channel/playlist.js

@@ -158,11 +158,14 @@ PlaylistModule.prototype.load = function (data) {
             }
         } else if (item.media.type === "gd") {
             delete item.media.meta.gpdirect;
-        } else if (["vm", "jw", "mx", "im"].includes(item.media.type)) {
+        } else if (["vm", "jw", "mx", "im", "gp", "us", "hb"].includes(item.media.type)) {
             // JW has been deprecated for a long time
             // VM shut down in December 2017
             // Mixer shut down in July 2020
-            // Dunno when imgur album embeds stopped working but they don't work either
+            // Imgur replaced albums with a feature called galleries in 2019
+            // Picasa shut down in 2016
+            // Ustream was sunset by IBM in September 2018
+            // SmashCast (Hitbox) seemed to just vanish November 2020
             LOGGER.warn(
                 "Dropping playlist item with deprecated type %s",
                 item.media.type

src/custom-media.js

@@ -22,14 +22,27 @@ const SOURCE_CONTENT_TYPES = new Set([
     'application/dash+xml',
     'application/x-mpegURL',
     'audio/aac',
-    'audio/ogg',
+    'audio/mp4',
     'audio/mpeg',
+    'audio/ogg',
     'audio/opus',
     'video/mp4',
     'video/ogg',
     'video/webm'
 ]);
 
+const LIVE_ONLY_CONTENT_TYPES = new Set([
+    'application/dash+xml'
+]);
+
+const AUDIO_ONLY_CONTENT_TYPES = new Set([
+    'audio/aac',
+    'audio/mp4',
+    'audio/mpeg',
+    'audio/ogg',
+    'audio/opus'
+]);
+
 export function lookup(url, opts) {
     if (!opts) opts = {};
     if (!opts.hasOwnProperty('timeout')) opts.timeout = 10000;
@@ -131,6 +144,7 @@ export function convert(id, data) {
 
     const meta = {
         direct: sources,
+        audioTracks: data.audioTracks,
         textTracks: data.textTracks,
         thumbnail: data.thumbnail, // Currently ignored by Media
         live: !!data.live          // Currently ignored by Media
@@ -159,11 +173,20 @@ export function validate(data) {
         validateURL(data.thumbnail);
     }
 
-    validateSources(data.sources);
+    validateSources(data.sources, data);
+    validateAudioTracks(data.audioTracks);
     validateTextTracks(data.textTracks);
+    /*
+     * TODO: Xaekai's Octopus subtitle support uses a separate subTracks array
+     * in a slightly different format than textTracks.  That currently requires
+     * a channel script to use, but if that is integrated in core then it needs
+     * to be validated here (and ideally merged with textTracks so there is only
+     * one array).
+     */
+    validateFonts(data.fonts);
 }
 
-function validateSources(sources) {
+function validateSources(sources, data) {
     if (!Array.isArray(sources))
         throw new ValidationError('sources must be a list');
     if (sources.length === 0)
@@ -179,7 +202,12 @@ function validateSources(sources) {
                 `unacceptable source contentType "${source.contentType}"`
             );
 
-        if (!SOURCE_QUALITIES.has(source.quality))
+        if (LIVE_ONLY_CONTENT_TYPES.has(source.contentType) && !data.live)
+            throw new ValidationError(
+                `contentType "${source.contentType}" requires live: true`
+            );
+        // TODO (Xaekai): This should be allowed
+        if (/*!AUDIO_ONLY_CONTENT_TYPES.has(source.contentType) && */!SOURCE_QUALITIES.has(source.quality))
             throw new ValidationError(`unacceptable source quality "${source.quality}"`);
 
         if (source.hasOwnProperty('bitrate')) {
@@ -193,6 +221,45 @@ function validateSources(sources) {
     }
 }
 
+function validateAudioTracks(audioTracks) {
+    if (typeof audioTracks === 'undefined') {
+        return;
+    }
+
+    if (!Array.isArray(audioTracks)){
+        throw new ValidationError('audioTracks must be a list');
+    }
+
+    for (let track of audioTracks) {
+        if (typeof track.url !== 'string'){
+            throw new ValidationError('audio track URL must be a string');
+        }
+        validateURL(track.url);
+
+        if (!AUDIO_ONLY_CONTENT_TYPES.has(track.contentType)){
+            throw new ValidationError(
+                `unacceptable audio track contentType "${track.contentType}"`
+            );
+        }
+        if (typeof track.label !== 'string'){
+            throw new ValidationError('audio track label must be a string');
+        }
+        if (!track.label){
+            throw new ValidationError('audio track label must be nonempty');
+        }
+
+        if (typeof track.language !== 'string'){
+            throw new ValidationError('audio track language must be a string');
+        }
+        if (!track.language){
+            throw new ValidationError('audio track language must be nonempty');
+        }
+        if (!/^[a-z]{2,3}$/.test(track.language)){
+            throw new ValidationError('audio track language must be a two or three letter IETF BCP 47 subtag');
+        }
+    }
+}
+
 function validateTextTracks(textTracks) {
     if (typeof textTracks === 'undefined') {
         return;
@@ -228,6 +295,20 @@ function validateTextTracks(textTracks) {
     }
 }
 
+function validateFonts(fonts) {
+    if (typeof textTracks === 'undefined') {
+        return;
+    }
+
+    if (!Array.isArray(fonts))
+        throw new ValidationError('fonts must be a list of URLs');
+
+    for (let f of fonts) {
+        if (typeof f !== 'string')
+            throw new ValidationError('fonts must be a list of URLs');
+    }
+}
+
 function parseURL(urlstring) {
     const url = urlParse(urlstring);
 

src/database.js

@@ -85,6 +85,9 @@ module.exports.init = function (newDB) {
                 require('@cytube/mediaquery/lib/provider/youtube').setCache(
                     new MetadataCacheDB(db)
                 );
+                require('@cytube/mediaquery/lib/provider/bitchute').setCache(
+                    new MetadataCacheDB(db)
+                );
             }).catch(error => {
                 LOGGER.error(error.stack);
                 process.exit(1);

src/database/metadata_cache.js

@@ -9,6 +9,8 @@ function mediaquery2cytube(type) {
     switch (type) {
         case 'youtube':
             return 'yt';
+        case 'bitchute':
+            return 'bc';
         default:
             throw new Error(`mediaquery2cytube: no mapping for ${type}`);
     }
@@ -18,14 +20,17 @@ function cytube2mediaquery(type) {
     switch (type) {
         case 'yt':
             return 'youtube';
+        case 'bc':
+            return 'bitchute';
         default:
             throw new Error(`cytube2mediaquery: no mapping for ${type}`);
     }
 }
 
 const cachedResultAge = new Summary({
-    name: 'cytube_yt_cache_result_age_seconds',
+    name: 'cytube_media_cache_result_age_seconds',
-    help: 'Age (in seconds) of cached record'
+    help: 'Age (in seconds) of cached record',
+    labelNames: ['source']
 });
 
 class MetadataCacheDB {
@@ -62,10 +67,11 @@ class MetadataCacheDB {
                 return null;
             }
 
+            let age = 0;
             try {
-                let age = (Date.now() - row.updated_at.getTime())/1000;
+                age = (Date.now() - row.updated_at.getTime())/1000;
                 if (age > 0) {
-                    cachedResultAge.observe(age);
+                    cachedResultAge.labels(type).observe(age);
                 }
             } catch (error) {
                 LOGGER.error('Failed to record cachedResultAge metric: %s', error.stack);
@@ -73,6 +79,7 @@ class MetadataCacheDB {
 
             let metadata = JSON.parse(row.metadata);
             metadata.type = cytube2mediaquery(metadata.type);
+            metadata.meta.cacheAge = age;
             return new Media(metadata);
         });
     }

src/get-info.js

@@ -6,6 +6,11 @@ const ffmpeg = require("./ffmpeg");
 const mediaquery = require("@cytube/mediaquery");
 const YouTube = require("@cytube/mediaquery/lib/provider/youtube");
 const Vimeo = require("@cytube/mediaquery/lib/provider/vimeo");
+const Odysee = require("@cytube/mediaquery/lib/provider/odysee");
+const PeerTube = require("@cytube/mediaquery/lib/provider/peertube");
+const BitChute = require("@cytube/mediaquery/lib/provider/bitchute");
+const BandCamp = require("@cytube/mediaquery/lib/provider/bandcamp");
+const Nicovideo = require("@cytube/mediaquery/lib/provider/nicovideo");
 const Streamable = require("@cytube/mediaquery/lib/provider/streamable");
 const TwitchVOD = require("@cytube/mediaquery/lib/provider/twitch-vod");
 const TwitchClip = require("@cytube/mediaquery/lib/provider/twitch-clip");
@@ -214,14 +219,12 @@ var Getters = {
 
     /* livestream.com */
     li: function (id, callback) {
-        var m = id.match(/([\w-]+)/);
+        if (!id.match(/^\d+;\d+$/)) {
-        if (m) {
-            id = m[1];
-        } else {
             callback("Invalid ID", null);
             return;
         }
-        var title = "Livestream.com - " + id;
+
+        var title = "Livestream.com";
         var media = new Media(id, title, "--:--", "li");
         callback(false, media);
     },
@@ -278,47 +281,6 @@ var Getters = {
         });
     },
 
-    /* ustream.tv */
-    us: function (id, callback) {
-        var m = id.match(/(channel\/[^?&#]+)/);
-        if (m) {
-            id = m[1];
-        } else {
-            callback("Invalid ID", null);
-            return;
-        }
-
-        var options = {
-            host: "www.ustream.tv",
-            port: 443,
-            path: "/" + id,
-            method: "GET",
-            timeout: 1000
-        };
-
-        urlRetrieve(https, options, function (status, data) {
-            if(status !== 200) {
-                callback("Ustream HTTP " + status, null);
-                return;
-            }
-
-            /*
-             * Yes, regexing this information out of the HTML sucks.
-             * No, there is not a better solution -- it seems IBM
-             * deprecated the old API (or at least replaced with an
-             * enterprise API marked "Contact sales") so fuck it.
-             */
-            var m = data.match(/https:\/\/www\.ustream\.tv\/embed\/(\d+)/);
-            if (m) {
-                var title = "Ustream.tv - " + id;
-                var media = new Media(m[1], title, "--:--", "us");
-                callback(false, media);
-            } else {
-                callback("Channel ID not found", null);
-            }
-        });
-    },
-
     /* rtmp stream */
     rt: function (id, callback) {
         var title = "Livestream";
@@ -391,28 +353,6 @@ var Getters = {
         });
     },
 
-    /* hitbox.tv / smashcast.tv */
-    hb: function (id, callback) {
-        var m = id.match(/([\w-]+)/);
-        if (m) {
-            id = m[1];
-        } else {
-            callback("Invalid ID", null);
-            return;
-        }
-        var title = "Smashcast - " + id;
-        var media = new Media(id, title, "--:--", "hb");
-        callback(false, media);
-    },
-
-    /* vid.me */
-    vm: function (id, callback) {
-        process.nextTick(
-            callback,
-            "As of December 2017, vid.me is no longer in service."
-        );
-    },
-
     /* streamable */
     sb: function (id, callback) {
         if (!/^[\w-]+$/.test(id)) {
@@ -429,6 +369,16 @@ var Getters = {
         });
     },
 
+    /* PeerTube network */
+    pt: function (id, callback) {
+        PeerTube.lookup(id).then(video => {
+            video = new Media(video.id, video.title, video.duration, "pt", video.meta);
+            callback(null, video);
+        }).catch(error => {
+            callback(error.message || error);
+        });
+    },
+
     /* custom media - https://github.com/calzoneman/sync/issues/655 */
     cm: async function (id, callback) {
         try {
@@ -439,12 +389,44 @@ var Getters = {
         }
     },
 
-    /* mixer.com */
+    /* BitChute */
-    mx: function (id, callback) {
+    bc: function (id, callback) {
-        process.nextTick(
+        BitChute.lookup(id).then(video => {
-            callback,
+            video = new Media(video.id, video.title, video.duration, "bc", video.meta);
-            "As of July 2020, Mixer is no longer in service."
+            callback(null, video);
-        );
+        }).catch(error => {
+            callback(error.message || error);
+        });
+    },
+
+    /* Odysee */
+    od: function (id, callback) {
+        Odysee.lookup(id).then(video => {
+            video = new Media(video.id, video.title, video.duration, "od", video.meta);
+            callback(null, video);
+        }).catch(error => {
+            callback(error.message || error);
+        });
+    },
+
+    /* BandCamp */
+    bn: function (id, callback) {
+        BandCamp.lookup(id).then(video => {
+            video = new Media(video.id, video.title, video.duration, "bn", video.meta);
+            callback(null, video);
+        }).catch(error => {
+            callback(error.message || error);
+        });
+    },
+
+    /* Niconico */
+    nv: function (id, callback) {
+        Nicovideo.lookup(id).then(video => {
+            video = new Media(video.id, video.title, video.duration, "nv", video.meta);
+            callback(null, video);
+        }).catch(error => {
+            callback(error.message || error);
+        });
     }
 };
 

src/io/ioserver.js

@@ -196,7 +196,7 @@ class IOServer {
 
     handleConnection(socket) {
         if (!this.checkIPLimit(socket)) {
-            //return;
+            return;
         }
 
         patchTypecheckedFunctions(socket);

src/media.js

@@ -39,7 +39,7 @@ Media.prototype = {
                 embed: this.meta.embed,
                 gdrive_subtitles: this.meta.gdrive_subtitles,
                 textTracks: this.meta.textTracks,
-                mixer: this.meta.mixer
+                audioTracks: this.meta.audioTracks
             }
         };
 
@@ -54,6 +54,11 @@ Media.prototype = {
             result.meta.direct = this.meta.direct;
         }
 
+        // Only save thumbnails for items which can be audio track only
+        if (['bn','cm'].includes(this.type)) {
+            result.meta.thumbnail = this.meta.thumbnail;
+        }
+
         return result;
     },
 

src/peertubelist.js

@@ -0,0 +1,29 @@
+import { fetchPeertubeDomains, setDomains } from '@cytube/mediaquery/lib/provider/peertube';
+import { stat, readFile, writeFile } from 'node:fs/promises';
+import path from 'path';
+
+const LOGGER = require('@calzoneman/jsli')('peertubelist');
+const ONE_DAY = 24 * 3600 * 1000;
+const FILENAME = path.join(__dirname, '..', 'peertube-hosts.json');
+
+export async function setupPeertubeDomains() {
+    try {
+        let mtime;
+        try {
+            mtime = (await stat(FILENAME)).mtime;
+        } catch (_error) {
+            mtime = 0;
+        }
+
+        if (Date.now() - mtime > ONE_DAY) {
+            LOGGER.info('Updating peertube host list');
+            const hosts = await fetchPeertubeDomains();
+            await writeFile(FILENAME, JSON.stringify(hosts));
+        }
+
+        const hosts = JSON.parse(await readFile(FILENAME));
+        setDomains(hosts);
+    } catch (error) {
+        LOGGER.error('Failed to initialize peertube host list: %s', error.stack);
+    }
+}

src/server.js

@@ -204,6 +204,8 @@ var Server = function () {
     // background tasks init ----------------------------------------------
     require("./bgtask")(self);
 
+    require("./peertubelist").setupPeertubeDomains().then(() => {});
+
     // prometheus server
     const prometheusConfig = Config.getPrometheusConfig();
     if (prometheusConfig.isEnabled()) {

src/utilities.js

@@ -193,14 +193,10 @@
                 return "https://twitch.tv/" + id;
             case "rt":
                 return id;
-            case "us":
-                return "https://ustream.tv/channel/" + id;
             case "gd":
                 return "https://docs.google.com/file/d/" + id;
             case "fi":
                 return id;
-            case "hb":
-                return "https://www.smashcast.tv/" + id;
             case "hl":
                 return id;
             case "sb":
@@ -209,6 +205,22 @@
                 return "https://clips.twitch.tv/" + id;
             case "cm":
                 return id;
+            case "pt": {
+                const [domain,uuid] = id.split(';');
+                return `https://${domain}/videos/watch/${uuid}`;
+            }
+            case "bc":
+                return `https://www.bitchute.com/video/${id}/`;
+            case "bn": {
+                const [artist,track] = id.split(';');
+                return `https://${artist}.bandcamp.com/track/${track}`;
+            }
+            case "od": {
+                const [user,video] = id.split(';');
+                return `https://odysee.com/@${user}/${video}`;
+            }
+            case "nv":
+                return `https://www.nicovideo.jp/watch/${id}`;
             default:
                 return "";
         }
@@ -218,10 +230,8 @@
         switch (type) {
             case "li":
             case "tw":
-            case "us":
             case "rt":
             case "cu":
-            case "hb":
             case "hl":
                 return true;
             default:

src/web/routes/iframe.js

@@ -0,0 +1,7 @@
+import { sendPug } from '../pug';
+
+export default function initialize(app) {
+    app.get('/iframe', (req, res) => {
+        return sendPug(res, 'iframe');
+    });
+}

src/web/webserver.js

@@ -212,6 +212,7 @@ module.exports = {
         require('./acp').init(app, ioConfig);
         require('../google2vtt').attach(app);
         require('./routes/google_drive_userscript')(app);
+        require('./routes/iframe')(app);
 
         app.use(serveStatic(path.join(__dirname, '..', '..', 'www'), {
             maxAge: webConfig.getCacheTTL()

templates/channel.pug

@@ -63,10 +63,10 @@ html(lang="en")
               button#emotelistbtn.btn.btn-sm.btn-default Emote List
             #rightcontrols.col-lg-7.col-md-7
               #plcontrol.btn-group
-                button#showsearch.btn.btn-sm.btn-default(title="Search for a video", data-toggle="collapse", data-target="#searchcontrol")
-                  span.glyphicon.glyphicon-search
                 button#showmediaurl.btn.btn-sm.btn-default(title="Add video from URL", data-toggle="collapse", data-target="#addfromurl")
                   span.glyphicon.glyphicon-plus
+                button#showsearch.btn.btn-sm.btn-default(title="Search for a video", data-toggle="collapse", data-target="#searchcontrol")
+                  span.glyphicon.glyphicon-search
                 button#showcustomembed.btn.btn-sm.btn-default(title="Embed a custom frame", data-toggle="collapse", data-target="#customembed")
                   span.glyphicon.glyphicon-th-large
                 button#showplaylistmanager.btn.btn-sm.btn-default(title="Manage playlists", data-toggle="collapse", data-target="#playlistmanager")
@@ -249,14 +249,18 @@ html(lang="en")
     script(src="/js/paginator.js")
     script(src="/js/ui.js")
     script(src="/js/callbacks.js")
+    script(defer, src="/js/vjs/dash.all.min.js")
+    script(defer, src="/js/vjs/video.js")
+    script(defer, src="/js/vjs/videojs-dash.js")
+    script(defer, src="/js/vjs/videojs-hlsjs-plugin.js")
+    script(defer, src="/js/vjs/videojs-resolution-switcher.js")
+    script(defer, src="/js/vjs/videojs-audio-switcher.js")
+    script(defer, src="/js/octopus/subtitles-octopus.js")
+    script(defer, src="/js/playerjs-0.0.12.js")
+    script(defer, src="/js/niconico.js")
+    script(defer, src="/js/peertube.js")
+    script(defer, src="/js/sc.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/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="/js/dash.all.min.js")
-    script(defer, src="/js/videojs-dash.js")
     script(defer, src="https://player.twitch.tv/js/embed/v1.js")

templates/footer.pug

@@ -3,7 +3,7 @@ mixin footer
     .container
       p.text-muted.credit.
         Powered by CyTube, available on <a href="https://github.com/calzoneman/sync" target="_blank" rel="noreferrer noopener">GitHub</a>&nbsp;&middot; <a href="/contact" target="_blank">Contact</a>&nbsp;&middot; <a href="https://github.com/calzoneman/sync/wiki" target="_blank" rel="noopener noreferrer">Wiki</a>
-  script(src="/js/jquery-1.11.0.min.js")
+  script(src="/js/jquery-1.12.4.min.js")
   // Must be included before jQuery-UI since jQuery-UI overrides jQuery.fn.button
   // I should really abandon this crap one day
   script(src="/js/jquery-ui.js")

templates/iframe.pug

@@ -0,0 +1,36 @@
+doctype html
+html(lang="en")
+  head
+    meta(charset="utf-8")
+    meta(name="viewport", content="width=device-width, initial-scale=1.0")
+    meta(name="referrer", content="same-origin")
+    link(rel="stylesheet", href="/css/video-js.css")
+    link(rel="stylesheet", href="/css/videojs-resolution-switcher.css")
+    style.
+      body { overflow-y: hidden }
+  body
+    #wrap
+      #videowrap
+        #ytapiplayer
+    script.
+      const USEROPTS = {
+        default_quality: 'auto'
+      }
+      const CLIENT = {
+        leader: false
+      }
+      let VOLUME = 0;
+      function waitUntilDefined(obj, key, fn) {
+          if(typeof obj[key] === "undefined") {
+              setTimeout(function () {
+                  waitUntilDefined(obj, key, fn);
+              }, 100);
+              return;
+          }
+          fn();
+      }
+    script(src="/js/jquery-1.12.4.min.js")
+    script(src="/js/vjs/video.js")
+    script(src="/js/vjs/videojs-resolution-switcher.js")
+    script(src="/js/playerjs-0.0.12.js")
+    script(src="/js/player.js")

templates/index.pug

@@ -21,8 +21,15 @@ block content
 
 append footer
   script(type="text/javascript").
-    $("#channelname").keydown(function (ev) {
+    const entrance = document.querySelector('#channelname');
+    entrance.addEventListener('keydown', function (ev) {
       if (ev.keyCode === 13) {
-        location.href = "/#{channelPath}/" + $("#channelname").val();
+        const channel = `/${CHANNELPATH}/${entrance.value}`;
+        if (ev.shiftKey || ev.ctrlKey) {
+          window.open(channel, '_blank');
+          entrance.value = '';
+        } else {
+          location.href = channel;
+        }
       }
     });

templates/useroptions.pug

@@ -68,11 +68,6 @@ mixin us-playback
     form.form-horizontal(action="javascript:void(0)")
       +rcheckbox("us-synch", "Synchronize video playback")
       +textbox("us-synch-accuracy", "Synch threshold (seconds)", "2")
-      +rcheckbox("us-wmode-transparent", "Set wmode=transparent")
-      .form-group
-        .col-sm-4
-        .col-sm-8
-          p.text-info Setting <code>wmode=transparent</code> allows objects to be displayed above the video player, but may cause performance issues on some systems.
       +rcheckbox("us-hidevideo", "Remove the video player")
       +rcheckbox("us-playlistbuttons", "Hide playlist buttons by default")
       +rcheckbox("us-oldbtns", "Old style playlist buttons")
@@ -91,6 +86,7 @@ mixin us-playback
         .col-sm-4
         .col-sm-8
           p.text-info Due to technical changes on YouTube's side, the CyTube quality preference can no longer be automatically applied on YouTube videos.  See <a href="https://github.com/calzoneman/sync/issues/726" rel="noopener noreferer" target="_blank">this GitHub issue</a> for details.
+      +rcheckbox("us-peertube", "Accept PeerTube embeds automatically")
 
 mixin us-chat
   #us-chat.tab-pane

test/custom-media.js

@@ -233,7 +233,8 @@ describe('custom-media', () => {
                             contentType: 'text/vtt',
                             name: 'English Subtitles'
                         }
-                    ]
+                    ],
+                    thumbnail: 'https://example.com/thumb.jpg',
                 }
             };
         });
@@ -321,7 +322,8 @@ describe('custom-media', () => {
                             contentType: 'text/vtt',
                             name: 'English Subtitles'
                         }
-                    ]
+                    ],
+                    thumbnail: 'https://example.com/thumb.jpg',
                 }
             };
 

www/.eslintrc.json

@@ -0,0 +1,59 @@
+{
+    "env": { "browser": true, "jquery": true },
+    "globals": {
+        "CHANNEL": "writable",
+        "CHANNELNAME": "writable",
+        "CHATHIST": "writable",
+        "CHATHISTIDX": "writable",
+        "CHATSOUND": "writable",
+        "CHATTHROTTLE": "writable",
+        "CLIENT": "writable",
+        "CSEMOTELIST": "writable",
+        "DEFAULT_THEME": "writable",
+        "EMOTELIST": "writable",
+        "EMOTELISTMODAL": "writable",
+        "FILTER_FROM": "writable",
+        "FILTER_TO": "writable",
+        "FOCUSED": "writable",
+        "GS_VERSION": "writable",
+        "HAS_CONNECTED_BEFORE": "writable",
+        "IGNORE_SCROLL_EVENT": "writable",
+        "IGNORED": "writable",
+        "IMAGE_MATCH": "writable",
+        "JSPREF": "writable",
+        "KICKED": "writable",
+        "LASTCHAT": "writable",
+        "LEADTMR": "writable",
+        "PAGETITLE": "writable",
+        "PL_ACTION_QUEUE": "writable",
+        "PL_AFTER": "writable",
+        "PL_CURRENT": "writable",
+        "PL_FROM": "writable",
+        "PL_QUEUED_ACTIONS": "writable",
+        "PL_WAIT_SCROLL": "writable",
+        "PLAYER": "writable",
+        "REBUILDING": "writable",
+        "SCROLLCHAT": "writable",
+        "SOCKETIO_CONNECT_ERROR_COUNT": "writable",
+        "SUPERADMIN": "writable",
+        "TITLE_BLINK": "writable",
+        "USEROPTS": "writable",
+        "VHEIGHT": "writable",
+        "VOLUME": "writable",
+        "VWIDTH": "writable",
+        "CyTube": "writable",
+        "Rank": "writable",
+        "getOpt": "writable",
+        "setOpt": "writable",
+        "socket": "writable"
+    },
+    "plugins": [
+        "no-jquery"
+    ],
+    "extends": [
+        "plugin:no-jquery/deprecated"
+    ],
+    "rules": {
+        "no-jquery/no-event-shorthand": "error"
+    }
+}

www/css/videojs-resolution-switcher.css

@@ -1,4 +1,4 @@
-.vjs-resolution-button .vjs-menu-icon:before {
+.vjs-resolution-button .vjs-icon-placeholder:before {
   content: '\f110';
   font-family: VideoJS;
   font-weight: normal;

www/js/callbacks.js

@@ -1,4 +1,4 @@
-Callbacks = {
+const Callbacks = {
     /* fired when socket connection completes */
     connect: function() {
         HAS_CONNECTED_BEFORE = true;
@@ -82,7 +82,7 @@ Callbacks = {
         var announcement = makeAlert(data.title, data.text + signature)
             .appendTo($("#announcements"));
         if (data.id) {
-            announcement.find(".close").click(function suppressThisAnnouncement() {
+            announcement.find(".close").on('click', function suppressThisAnnouncement() {
                 CyTube.ui.suppressedAnnouncementId = data.id;
                 setOpt("suppressed_announcement_id", data.id);
             });
@@ -179,7 +179,7 @@ Callbacks = {
 
         $("<button/>").addClass("close pull-right")
             .appendTo(div)
-            .click(function () {
+            .on('click', function () {
                 div.parent().remove();
             })
             .html("&times;");
@@ -444,7 +444,7 @@ Callbacks = {
                 var li = $("<li/>").appendTo(menu);
                 $("<a/>").attr("href", "javascript:void(0)")
                     .html(disp)
-                    .click(function() {
+                    .on('click', function() {
                         socket.emit("borrow-rank", r);
                     })
                     .appendTo(li);
@@ -658,8 +658,7 @@ Callbacks = {
             }
             $("#drinkcount").text(text);
             $("#drinkbar").show();
-        }
+        } else {
-        else {
             $("#drinkbar").hide();
         }
     },
@@ -752,8 +751,7 @@ Callbacks = {
             if(data.temp) {
                 btn.html(btn.html().replace("Make Temporary",
                                             "Make Permanent"));
-            }
+            } else {
-            else {
                 btn.html(btn.html().replace("Make Permanent",
                                             "Make Temporary"));
             }
@@ -867,8 +865,7 @@ Callbacks = {
             $("#qlockbtn").find("span")
                 .removeClass("glyphicon-lock")
                 .addClass("glyphicon-ok");
-        }
+        } else {
-        else {
             $("#qlockbtn").removeClass("btn-success")
                 .addClass("btn-danger")
                 .attr("title", "Playlist Locked");
@@ -886,7 +883,7 @@ Callbacks = {
             .css("margin-left", "0")
             .attr("id", "search_clear")
             .text("Clear Results")
-            .click(function() {
+            .on('click', function() {
                 clearSearchResults();
             })
             .insertBefore($("#library"));
@@ -927,12 +924,12 @@ Callbacks = {
         var poll = $("<div/>").addClass("well active").prependTo($("#pollwrap"));
         $("<button/>").addClass("close pull-right").html("&times;")
             .appendTo(poll)
-            .click(function() { poll.remove(); });
+            .on('click', function() { poll.remove(); });
         if(hasPermission("pollctl")) {
             $("<button/>").addClass("btn btn-danger btn-sm pull-right").text("End Poll")
                 .appendTo(poll)
-                .click(function() {
+                .on('click', function() {
-                    socket.emit("closePoll")
+                    socket.emit("closePoll");
                 });
         }
 
@@ -949,11 +946,11 @@ Callbacks = {
                 });
                 $(this).addClass("active");
                 $(this).parent().addClass("option-selected");
-            }
+            };
             $("<button/>").addClass("btn btn-default btn-sm").text(data.counts[i])
                 .prependTo($("<div/>").addClass("option").html(data.options[i])
                         .appendTo(poll))
-                .click(callback);
+                .on('click', callback);
             })(i);
 
         }
@@ -981,7 +978,7 @@ Callbacks = {
                 $(this).attr("disabled", true);
             });
             poll.find(".btn-danger").each(function() {
-                $(this).remove()
+                $(this).remove();
             });
         }
     },
@@ -1000,14 +997,14 @@ Callbacks = {
     updateEmote: function (data) {
         data.regex = new RegExp(data.source, "gi");
         var found = false;
-        for (var i = 0; i < CHANNEL.emotes.length; i++) {
+        for (let i = 0; i < CHANNEL.emotes.length; i++) {
             if (CHANNEL.emotes[i].name === data.name) {
                 found = true;
                 CHANNEL.emotes[i] = data;
                 break;
             }
         }
-        for (var i = 0; i < CHANNEL.badEmotes.length; i++) {
+        for (let i = 0; i < CHANNEL.badEmotes.length; i++) {
             if (CHANNEL.badEmotes[i].name === data.name) {
                 CHANNEL.badEmotes[i] = data;
                 break;
@@ -1050,22 +1047,20 @@ Callbacks = {
             if(!badBefore){
                 CHANNEL.badEmotes.push(data);
                 delete CHANNEL.emoteMap[oldName];
-            }
             // Was bad before too: Update
-            else {
+            } else {
-                for (var i = 0; i < CHANNEL.badEmotes.length; i++) {
+                for (let i = 0; i < CHANNEL.badEmotes.length; i++) {
                     if (CHANNEL.badEmotes[i].name === oldName) {
                         CHANNEL.badEmotes[i] = data;
                         break;
                     }
                 }
             }
-        }
         // Not bad now
-        else {
+        } else {
             // But was bad before: Drop from list
             if(badBefore){
-                for (var i = 0; i < CHANNEL.badEmotes.length; i++) {
+                for (let i = 0; i < CHANNEL.badEmotes.length; i++) {
                     if (CHANNEL.badEmotes[i].name === oldName) {
                         CHANNEL.badEmotes.splice(i, 1);
                         break;
@@ -1083,7 +1078,7 @@ Callbacks = {
 
     removeEmote: function (data) {
         var found = -1;
-        for (var i = 0; i < CHANNEL.emotes.length; i++) {
+        for (let i = 0; i < CHANNEL.emotes.length; i++) {
             if (CHANNEL.emotes[i].name === data.name) {
                 found = i;
                 break;
@@ -1093,9 +1088,9 @@ Callbacks = {
         if (found !== -1) {
             var row = $("code:contains('" + data.name + "')").parent().parent();
             row.hide("fade", row.remove.bind(row));
-            CHANNEL.emotes.splice(i, 1);
+            CHANNEL.emotes.splice(found, 1);
             delete CHANNEL.emoteMap[data.name];
-            for (var i = 0; i < CHANNEL.badEmotes.length; i++) {
+            for (let i = 0; i < CHANNEL.badEmotes.length; i++) {
                 if (CHANNEL.badEmotes[i].name === data.name) {
                     CHANNEL.badEmotes.splice(i, 1);
                     break;
@@ -1171,20 +1166,31 @@ Callbacks = {
             $("#voteskip").attr("disabled", false);
         }
     }
-}
+};
 
-var SOCKET_DEBUG = localStorage.getItem('cytube_socket_debug') === 'true';
+window.Callbacks = Callbacks;
-setupCallbacks = function() {
+
+// For sanity, do this
+//   localStorage.setItem('cytube_socket_omissions', '["mediaUpdate"]')
+var SOCKET_DEBUG = {
+    enabled: (localStorage.getItem('cytube_socket_debug') === 'true'),
+    omit: (((data)=>{
+        const frames = data === null ? [] : JSON.parse(data);
+        return frames;
+    })(localStorage.getItem('cytube_socket_omissions')))
+};
+
+function setupCallbacks() {
     for(var key in Callbacks) {
         (function(key) {
             socket.on(key, function(data) {
-                if (SOCKET_DEBUG) {
+                if (SOCKET_DEBUG.enabled && !SOCKET_DEBUG.omit.includes(key)) {
                     console.log(key, data);
                 }
                 try {
                     Callbacks[key](data);
                 } catch (e) {
-                    if (SOCKET_DEBUG) {
+                    if (SOCKET_DEBUG.enabled) {
                         console.log("EXCEPTION: " + e + "\n" + e.stack);
                     }
                 }
@@ -1211,7 +1217,7 @@ setupCallbacks = function() {
                 .appendTo($("#announcements"));
         }
     });
-};
+}
 
 function ioServerConnect(socketConfig) {
     if (socketConfig.error) {
@@ -1293,7 +1299,7 @@ function initSocketIO(socketConfig) {
 
 function checkLetsEncrypt(socketConfig, nonLetsEncryptError) {
     var servers = socketConfig.servers.filter(function (server) {
-        return !server.secure && !server.ipv6Only
+        return !server.secure && !server.ipv6Only;
     });
 
     if (servers.length === 0) {

www/js/data.js

@@ -1,3 +1,4 @@
+/*eslint no-unused-vars: "off"*/
 var CL_VERSION = 3.0;
 var GS_VERSION = 1.7; // Google Drive Userscript
 
@@ -48,7 +49,8 @@ var CHATMAXSIZE = 100;
 var SCROLLCHAT = true;
 var IGNORE_SCROLL_EVENT = false;
 var LASTCHAT = {
-    name: ""
+    name: "",
+    time: 0
 };
 var FOCUSED = true;
 var PAGETITLE = "CyTube";
@@ -112,33 +114,37 @@ function getOrDefault(k, def) {
 var IGNORED = getOrDefault("ignorelist", []);
 
 var USEROPTS = {
+    // General tab
     theme                : getOrDefault("theme", DEFAULT_THEME), // Set in head template
     layout               : getOrDefault("layout", "fluid"),
-    synch                : getOrDefault("synch", true),
-    hidevid              : getOrDefault("hidevid", false),
-    show_timestamps      : getOrDefault("show_timestamps", true),
-    modhat               : getOrDefault("modhat", false),
-    blink_title          : getOrDefault("blink_title", "onlyping"),
-    sync_accuracy        : getOrDefault("sync_accuracy", 2),
-    wmode_transparent    : getOrDefault("wmode_transparent", true),
-    chatbtn              : getOrDefault("chatbtn", false),
-    altsocket            : getOrDefault("altsocket", false),
-    qbtn_hide            : getOrDefault("qbtn_hide", false),
-    qbtn_idontlikechange : getOrDefault("qbtn_idontlikechange", false),
-    first_visit          : getOrDefault("first_visit", true),
     ignore_channelcss    : getOrDefault("ignore_channelcss", false),
     ignore_channeljs     : getOrDefault("ignore_channeljs", false),
+    // Playback tab
+    synch                : getOrDefault("synch", true),
+    sync_accuracy        : getOrDefault("sync_accuracy", 2),
+    hidevid              : getOrDefault("hidevid", false),
+    default_quality      : getOrDefault("default_quality", "auto"),
+    qbtn_hide            : getOrDefault("qbtn_hide", false),
+    qbtn_idontlikechange : getOrDefault("qbtn_idontlikechange", false),
+    peertube_risk        : getOrDefault("peertube_risk", false),
+    // Chat tab
+    show_timestamps      : getOrDefault("show_timestamps", true),
     sort_rank            : getOrDefault("sort_rank", true),
     sort_afk             : getOrDefault("sort_afk", false),
-    default_quality      : getOrDefault("default_quality", "auto"),
+    blink_title          : getOrDefault("blink_title", "onlyping"),
     boop                 : getOrDefault("boop", "never"),
-    show_shadowchat      : getOrDefault("show_shadowchat", false),
+    notifications        : getOrDefault("notifications", "never"),
-    emotelist_sort       : getOrDefault("emotelist_sort", true),
+    chatbtn              : getOrDefault("chatbtn", false),
     no_emotes            : getOrDefault("no_emotes", false),
     strip_image          : getOrDefault("strip_image", false),
     chat_tab_method      : getOrDefault("chat_tab_method", "Cycle options"),
-    notifications        : getOrDefault("notifications", "never"),
+    // Moderator tab
-    show_ip_in_tooltip   : getOrDefault("show_ip_in_tooltip", true)
+    modhat               : getOrDefault("modhat", false),
+    show_shadowchat      : getOrDefault("show_shadowchat", false),
+    show_ip_in_tooltip   : getOrDefault("show_ip_in_tooltip", true),
+    // Elsewhere
+    first_visit          : getOrDefault("first_visit", true),
+    emotelist_sort       : getOrDefault("emotelist_sort", true),
 };
 
 /* Backwards compatibility check */
@@ -179,7 +185,6 @@ if (["never", "onlyping", "always"].indexOf(USEROPTS.boop) === -1) {
 
 var VOLUME = parseFloat(getOrDefault("volume", 1));
 
-var NO_WEBSOCKETS = USEROPTS.altsocket;
 var NO_VIMEO = Boolean(location.host.match("cytu.be"));
 
 var JSPREF = getOpt("channel_js_pref") || {};

www/js/niconico.js

@@ -0,0 +1,237 @@
+/*
+ *    Niconico iframe embed api
+ *    Written by Xaekai
+ *    Copyright (c) 2022 Radiant Feather; Licensed AGPLv3
+ *
+ *    Dual-licensed MIT when distributed with CyTube/sync.
+ *
+ */
+class NicovideoEmbed {
+    static origin = 'https://embed.nicovideo.jp';
+    static methods = [
+        'loadComplete',
+        'mute',
+        'pause',
+        'play',
+        'seek',
+        'volumeChange',
+    ];
+    static frames = [
+        'error',
+        'loadComplete',
+        'playerMetadataChange',
+        'playerStatusChange',
+        'seekStatusChange',
+        'statusChange',
+        //'player-error:video:play',
+        //'player-error:video:seek',
+    ];
+    static events = [
+        'ended',
+        'error',
+        'muted',
+        'pause',
+        'play',
+        'progress',
+        'ready',
+        'timeupdate',
+        'unmuted',
+        'volumechange',
+    ];
+
+    constructor(options) {
+        this.handlers = Object.fromEntries(NicovideoEmbed.frames.map(key => [key,[]]));
+        this.listeners = Object.fromEntries(NicovideoEmbed.events.map(key => [key,[]]));
+        this.state = ({
+            ready: false,
+            playerStatus: 1,
+            currentTime: 0.0, // ms
+            muted: false,
+            volume: 0.99,
+            maximumBuffered: 0,
+        });
+
+        this.setupHandlers();
+        this.scaffold(options);
+    }
+
+    scaffold({ iframe = null, playerId = 1, videoId = null }){
+        this.playerId = playerId;
+        this.messageListener();
+        if(iframe === null){
+            if(videoId === null){
+                throw new Error('You must provide either an existing iframe or a videoId');
+            }
+            const iframe = this.iframe = document.createElement('iframe');
+
+            const source = new URL(`${NicovideoEmbed.origin}/watch/${videoId}`);
+            source.search = new URLSearchParams({
+                jsapi: 1,
+                autoplay: 1,
+                playerId
+            });
+            iframe.setAttribute('src', source);
+            iframe.setAttribute('id', playerId);
+            iframe.setAttribute('allow', 'autoplay; fullscreen');
+            iframe.addEventListener('load', ()=>{
+                this.observe();
+            })
+        } else {
+            this.iframe = iframe;
+            this.observe();
+        }
+    }
+
+    setupHandlers() {
+        this.handlers.loadComplete.push((data) => {
+            this.emit('ready');
+            this.state.ready = true;
+            Object.assign(this, data);
+        });
+        this.handlers.error.push((data) => {
+            this.emit('error', data);
+        });
+        this.handlers.playerStatusChange.push((data) => {
+            let event;
+            switch (data.playerStatus) {
+                case 1: /* Buffering */ return;
+                case 2: event = 'play'; break;
+                case 3: event = 'pause'; break;
+                case 4: event = 'ended'; break;
+            }
+            this.state.playerStatus = data.playerStatus;
+            this.emit(event);
+        });
+        this.handlers.playerMetadataChange.push(({ currentTime, volume, muted, maximumBuffered }) => {
+            const self = this.state;
+
+            if (currentTime !== self.currentTime) {
+                self.currentTime = currentTime;
+                this.emit('timeupdate', currentTime);
+            }
+
+            if (muted !== self.muted) {
+                self.muted = muted;
+                this.emit(muted ? 'muted' : 'unmuted');
+            }
+
+            if (volume !== self.volume) {
+                self.volume = volume;
+                this.emit('volumechange', volume);
+            }
+
+            if (maximumBuffered !== self.maximumBuffered) {
+                self.maximumBuffered = maximumBuffered;
+                this.emit('progress', maximumBuffered);
+            }
+        });
+        this.handlers.seekStatusChange.push((data) => {
+            //
+        });
+        this.handlers.statusChange.push((data) => {
+            //
+        });
+    }
+
+    messageListener() {
+        const dispatcher = (event) => {
+            if (event.origin === NicovideoEmbed.origin && event.data.playerId === this.playerId) {
+                const { data } = event.data;
+                this.dispatch(event.data.eventName, data);
+            }
+        }
+        window.addEventListener('message', dispatcher);
+
+        /* Clean up */
+        this.observer = new MutationObserver((alterations) => {
+            alterations.forEach((change) => {
+                change.removedNodes.forEach((deletion) => {
+                    if(deletion.nodeName === 'IFRAME') {
+                        window.removeEventListener('message', dispatcher)
+                        this.observer.disconnect();
+                    }
+                });
+            });
+        });
+    }
+
+    observe(){
+        this.state.receptive = true;
+        this.observer.observe(this.iframe.parentElement, { subtree: true, childList: true });
+    }
+
+    dispatch(frame, data = null){
+        if(!NicovideoEmbed.frames.includes(frame)){
+            console.error(JSON.stringify(data, undefined, 4));
+            throw new Error(`NicovideoEmbed ${frame}`);
+        }
+        [...this.handlers[frame]].forEach(handler => {
+            handler.call(this, data);
+        });
+    }
+
+    emit(event, data = null){
+        [...this.listeners[event]].forEach(listener => {
+            listener.call(this, data);
+        });
+        if(event === 'ready'){
+            this.listeners.ready.length = 0;
+        }
+    }
+
+    postMessage(request) {
+        if(!this.state.receptive){
+            setTimeout(() => { this.postMessage(request) }, 1000 / 24);
+            return;
+        }
+        const message = Object.assign({
+            sourceConnectorType: 1,
+            playerId: this.playerId
+        }, request);
+
+        this.iframe.contentWindow.postMessage(message, NicovideoEmbed.origin);
+    }
+
+    on(event, listener){
+        if(!NicovideoEmbed.events.includes(event)){
+            throw new Error('Unrecognized event name');
+        }
+        if(event === 'ready'){
+            if(this.state.ready){
+                listener();
+                return this;
+            } else {
+                setTimeout(() => { this.loadComplete() }, 1000 / 60);
+            }
+        }
+        this.listeners[event].push(listener);
+        return this;
+    }
+
+    mute(state){
+        this.postMessage({ eventName: 'mute', data: { mute: state } });
+    }
+
+    pause(){
+        this.postMessage({ eventName: 'pause' });
+    }
+
+    play(){
+        this.postMessage({ eventName: 'play' });
+    }
+
+    loadComplete(){
+        this.postMessage({ eventName: 'loadComplete' });
+    }
+
+    seek(ms){
+        this.postMessage({ eventName: 'seek', data: { time: ms } });
+    }
+
+    volumeChange(volume){
+        this.postMessage({ eventName: 'volumeChange', data: { volume } });
+    }
+
+}
+
+window.NicovideoEmbed = NicovideoEmbed;

www/js/paginator.js

@@ -31,10 +31,10 @@
         s = s + this.opts.maxPages < pages ? s : pages - this.opts.maxPages;
         s = s < 0 ? 0 : s;
         if(endcaps) {
-            var li = $("<li/>").appendTo(ul);
+            let li = $("<li/>").appendTo(ul);
             $("<a/>").attr("href", "javascript:void(0)")
                 .html("&laquo;")
-                .click(function () {
+                .on('click', function () {
                     this.loadPage(0);
                 }.bind(this))
                 .appendTo(li);
@@ -43,7 +43,7 @@
                 li.addClass("disabled");
 
             if(s > 0) {
-                var sep = $("<li/>").addClass("disabled")
+                let sep = $("<li/>").addClass("disabled")
                     .appendTo(ul);
                 $("<a/>").attr("href", "javascript:void(0)")
                     .html("&hellip;")
@@ -52,12 +52,12 @@
         }
         for(var i = s; i < s + this.opts.maxPages && i < s + pages; i++) {
             (function (i) {
-            var li = $("<li/>").appendTo(ul);
+            let li = $("<li/>").appendTo(ul);
             if(i == p)
                 li.addClass("active");
             $("<a/>").attr("href", "javascript:void(0)")
                 .text(i + 1)
-                .click(function () {
+                .on('click', function () {
                     this.loadPage(i);
                 }.bind(this))
                 .appendTo(li);
@@ -65,17 +65,17 @@
         }
         if(endcaps) {
             if(s + this.opts.maxPages < pages) {
-                var sep = $("<li/>").addClass("disabled")
+                let sep = $("<li/>").addClass("disabled")
                     .appendTo(ul);
                 $("<a/>").attr("href", "javascript:void(0)")
                     .html("&hellip;")
                     .appendTo(sep);
             }
 
-            var li = $("<li/>").appendTo(ul);
+            let li = $("<li/>").appendTo(ul);
             $("<a/>").attr("href", "javascript:void(0)")
                 .html("&raquo;")
-                .click(function () {
+                .on('click', function () {
                     this.loadPage(pages - 1);
                 }.bind(this))
                 .appendTo(li);

www/js/ui.js

@@ -10,11 +10,11 @@ CyTube.ui.onPageBlur = function (event) {
     FOCUSED = false;
 };
 
-$(window).focus(CyTube.ui.onPageFocus).blur(CyTube.ui.onPageBlur);
+$(window).on('focus', CyTube.ui.onPageFocus).on('blur', CyTube.ui.onPageBlur);
 // See #783
-$(".modal").focus(CyTube.ui.onPageFocus);
+$(".modal").on('focus', CyTube.ui.onPageFocus);
 
-$("#togglemotd").click(function () {
+$("#togglemotd").on('click', function () {
     var hidden = $("#motd")[0].style.display === "none";
     $("#motd").toggle();
     if (hidden) {
@@ -30,7 +30,7 @@ $("#togglemotd").click(function () {
 
 /* chatbox */
 
-$("#modflair").click(function () {
+$("#modflair").on('click', function () {
     var m = $("#modflair");
     if (m.hasClass("label-success")) {
         USEROPTS.modhat = false;
@@ -54,7 +54,7 @@ $("#modflair").click(function () {
     setOpt('modhat', USEROPTS.modhat);
 });
 
-$("#usercount").mouseenter(function (ev) {
+$("#usercount").on('mouseenter', function (ev) {
     var breakdown = calcUserBreakdown();
     // re-using profile-box class for convenience
     var popup = $("<div/>")
@@ -72,7 +72,7 @@ $("#usercount").mouseenter(function (ev) {
     popup.html(contents);
 });
 
-$("#usercount").mousemove(function (ev) {
+$("#usercount").on('mousemove', function (ev) {
     var popup = $("#usercount").find(".profile-box");
     if(popup.length == 0)
         return;
@@ -81,11 +81,11 @@ $("#usercount").mousemove(function (ev) {
     popup.css("left", (ev.clientX) + "px");
 });
 
-$("#usercount").mouseleave(function () {
+$("#usercount").on('mouseleave', function () {
     $("#usercount").find(".profile-box").remove();
 });
 
-$("#messagebuffer").scroll(function (ev) {
+$("#messagebuffer").on('scroll', function (ev) {
     if (IGNORE_SCROLL_EVENT) {
         // Skip event, this was triggered by scrollChat() and not by a user action.
         // Reset for next event.
@@ -109,7 +109,7 @@ $("#messagebuffer").scroll(function (ev) {
     }
 });
 
-$("#guestname").keydown(function (ev) {
+$("#guestname").on('keydown', function (ev) {
     if (ev.keyCode === 13) {
         socket.emit("login", {
             name: $("#guestname").val()
@@ -165,7 +165,7 @@ function chatTabComplete(chatline) {
     chatline.setSelectionRange(result.newPosition, result.newPosition);
 }
 
-$("#chatline").keydown(function(ev) {
+$("#chatline").on('keydown', function(ev) {
     // Enter/return
     if(ev.keyCode == 13) {
         if (CHATTHROTTLE) {
@@ -229,10 +229,10 @@ $("#chatline").keydown(function(ev) {
 });
 
 /* poll controls */
-$("#newpollbtn").click(showPollMenu);
+$("#newpollbtn").on('click', showPollMenu);
 
 /* search controls */
-$("#library_search").click(function() {
+$("#library_search").on('click', function() {
     if (!hasPermission("seeplaylist")) {
         $("#searchcontrol .alert").remove();
         var al = makeAlert("Permission Denied",
@@ -248,7 +248,7 @@ $("#library_search").click(function() {
     });
 });
 
-$("#library_query").keydown(function(ev) {
+$("#library_query").on('keydown', function(ev) {
     if(ev.keyCode == 13) {
         if (!hasPermission("seeplaylist")) {
             $("#searchcontrol .alert").remove();
@@ -266,7 +266,7 @@ $("#library_query").keydown(function(ev) {
     }
 });
 
-$("#youtube_search").click(function () {
+$("#youtube_search").on('click', function () {
     var query = $("#library_query").val().toLowerCase();
     try {
         parseMediaLink(query);
@@ -285,7 +285,7 @@ $("#youtube_search").click(function () {
 
 /* user playlists */
 
-$("#userpl_save").click(function() {
+$("#userpl_save").on('click', function() {
     if($("#userpl_name").val().trim() == "") {
         makeAlert("Invalid Name", "Playlist name cannot be empty", "alert-danger")
             .insertAfter($("#userpl_save").parent());
@@ -298,7 +298,7 @@ $("#userpl_save").click(function() {
 
 /* video controls */
 
-$("#mediarefresh").click(function() {
+$("#mediarefresh").on('click', function() {
     PLAYER.mediaType = "";
     PLAYER.mediaId = "";
     // playerReady triggers the server to send a changeMedia.
@@ -459,12 +459,12 @@ function queue(pos, src) {
     }
 }
 
-$("#queue_next").click(queue.bind(this, "next", "url"));
+$("#queue_next").on('click', queue.bind(this, "next", "url"));
-$("#queue_end").click(queue.bind(this, "end", "url"));
+$("#queue_end").on('click', queue.bind(this, "end", "url"));
-$("#ce_queue_next").click(queue.bind(this, "next", "customembed"));
+$("#ce_queue_next").on('click', queue.bind(this, "next", "customembed"));
-$("#ce_queue_end").click(queue.bind(this, "end", "customembed"));
+$("#ce_queue_end").on('click', queue.bind(this, "end", "customembed"));
 
-$("#mediaurl").keyup(function(ev) {
+$("#mediaurl").on('keyup', function(ev) {
     if (ev.keyCode === 13) {
         queue("end", "url");
     } else {
@@ -487,7 +487,7 @@ $("#mediaurl").keyup(function(ev) {
                 $("<input/>").addClass("form-control")
                     .attr("type", "text")
                     .attr("id", "addfromurl-title-val")
-                    .keydown(function (ev) {
+                    .on('keydown', function (ev) {
                         if (ev.keyCode === 13) {
                             queue("end", "url");
                         }
@@ -500,22 +500,22 @@ $("#mediaurl").keyup(function(ev) {
     }
 });
 
-$("#customembed-content").keydown(function(ev) {
+$("#customembed-content").on('keydown', function(ev) {
     if (ev.keyCode === 13) {
         queue("end", "customembed");
     }
 });
 
-$("#qlockbtn").click(function() {
+$("#qlockbtn").on('click', function() {
     socket.emit("togglePlaylistLock");
 });
 
-$("#voteskip").click(function() {
+$("#voteskip").on('click', function() {
     socket.emit("voteskip");
     $("#voteskip").attr("disabled", true);
 });
 
-$("#getplaylist").click(function() {
+$("#getplaylist").on('click', function() {
     var callback = function(data) {
         var idx = socket.listeners("errorMsg").indexOf(errCallback);
         if (idx >= 0) {
@@ -574,14 +574,14 @@ $("#getplaylist").click(function() {
     socket.emit("requestPlaylist");
 });
 
-$("#clearplaylist").click(function() {
+$("#clearplaylist").on('click', function() {
     var clear = confirm("Are you sure you want to clear the playlist?");
     if(clear) {
         socket.emit("clearPlaylist");
     }
 });
 
-$("#shuffleplaylist").click(function() {
+$("#shuffleplaylist").on('click', function() {
     var shuffle = confirm("Are you sure you want to shuffle the playlist?");
     if(shuffle) {
         socket.emit("shufflePlaylist");
@@ -596,13 +596,13 @@ function chanrankSubmit(rank) {
         rank: rank
     });
 }
-$("#cs-chanranks-mod").click(chanrankSubmit.bind(this, 2));
+$("#cs-chanranks-mod").on('click', chanrankSubmit.bind(this, 2));
-$("#cs-chanranks-adm").click(chanrankSubmit.bind(this, 3));
+$("#cs-chanranks-adm").on('click', chanrankSubmit.bind(this, 3));
-$("#cs-chanranks-owner").click(chanrankSubmit.bind(this, 4));
+$("#cs-chanranks-owner").on('click', chanrankSubmit.bind(this, 4));
 
 ["#showmediaurl", "#showsearch", "#showcustomembed", "#showplaylistmanager"]
     .forEach(function (id) {
-    $(id).click(function () {
+    $(id).on('click', function () {
         var wasActive = $(id).hasClass("active");
         $(".plcontrol-collapse").collapse("hide");
         $("#plcontrol button.active").button("toggle");
@@ -616,7 +616,7 @@ $("#plcontrol button").button("hide");
 $(".plcontrol-collapse").collapse();
 $(".plcontrol-collapse").collapse("hide");
 
-$(".cs-checkbox").change(function () {
+$(".cs-checkbox").on('change', function () {
     var box = $(this);
     var key = box.attr("id").replace("cs-", "");
     var value = box.prop("checked");
@@ -625,7 +625,7 @@ $(".cs-checkbox").change(function () {
     socket.emit("setOptions", data);
 });
 
-$(".cs-textbox").keyup(function () {
+$(".cs-textbox").on('keyup', function () {
     var box = $(this);
     var key = box.attr("id").replace("cs-", "");
     var value = box.val();
@@ -652,7 +652,7 @@ $(".cs-textbox").keyup(function () {
     }, 1000);
 });
 
-$(".cs-textbox-timeinput").keyup(function (event) {
+$(".cs-textbox-timeinput").on('keyup', function (event) {
     var box = $(this);
     var key = box.attr("id").replace("cs-", "");
     var value = box.val();
@@ -682,31 +682,31 @@ $(".cs-textbox-timeinput").keyup(function (event) {
     }, 1000);
 });
 
-$("#cs-chanlog-refresh").click(function () {
+$("#cs-chanlog-refresh").on('click', function () {
     socket.emit("readChanLog");
 });
 
-$("#cs-chanlog-filter").change(filterChannelLog);
+$("#cs-chanlog-filter").on('change', filterChannelLog);
 
-$("#cs-motdsubmit").click(function () {
+$("#cs-motdsubmit").on('click', function () {
     socket.emit("setMotd", {
         motd: $("#cs-motdtext").val()
     });
 });
 
-$("#cs-csssubmit").click(function () {
+$("#cs-csssubmit").on('click', function () {
     socket.emit("setChannelCSS", {
         css: $("#cs-csstext").val()
     });
 });
 
-$("#cs-jssubmit").click(function () {
+$("#cs-jssubmit").on('click', function () {
     socket.emit("setChannelJS", {
         js: $("#cs-jstext").val()
     });
 });
 
-$("#cs-chatfilters-newsubmit").click(function () {
+$("#cs-chatfilters-newsubmit").on('click', function () {
     var name = $("#cs-chatfilters-newname").val();
     var regex = $("#cs-chatfilters-newregex").val();
     var flags = $("#cs-chatfilters-newflags").val();
@@ -735,7 +735,7 @@ $("#cs-chatfilters-newsubmit").click(function () {
     });
 });
 
-$("#cs-emotes-newsubmit").click(function () {
+$("#cs-emotes-newsubmit").on('click', function () {
     var name = $("#cs-emotes-newname").val();
     var image = $("#cs-emotes-newimage").val();
 
@@ -748,7 +748,7 @@ $("#cs-emotes-newsubmit").click(function () {
     $("#cs-emotes-newimage").val("");
 });
 
-$("#cs-chatfilters-export").click(function () {
+$("#cs-chatfilters-export").on('click', function () {
     var callback = function (data) {
         socket.listeners("chatFilters").splice(
             socket.listeners("chatFilters").indexOf(callback)
@@ -761,7 +761,7 @@ $("#cs-chatfilters-export").click(function () {
     socket.emit("requestChatFilters");
 });
 
-$("#cs-chatfilters-import").click(function () {
+$("#cs-chatfilters-import").on('click', function () {
     var text = $("#cs-chatfilters-exporttext").val();
     var choose = confirm("You are about to import filters from the contents of the textbox below the import button.  If this is empty, it will clear all of your filters.  Are you sure you want to continue?");
     if (!choose) {
@@ -783,7 +783,7 @@ $("#cs-chatfilters-import").click(function () {
     socket.emit("importFilters", data);
 });
 
-$("#cs-emotes-export").click(function () {
+$("#cs-emotes-export").on('click', function () {
     var em = CHANNEL.emotes.map(function (f) {
         return {
             name: f.name,
@@ -793,7 +793,7 @@ $("#cs-emotes-export").click(function () {
     $("#cs-emotes-exporttext").val(JSON.stringify(em));
 });
 
-$("#cs-emotes-import").click(function () {
+$("#cs-emotes-import").on('click', function () {
     var text = $("#cs-emotes-exporttext").val();
     var choose = confirm("You are about to import emotes from the contents of the textbox below the import button.  If this is empty, it will clear all of your emotes.  Are you sure you want to continue?");
     if (!choose) {
@@ -827,10 +827,10 @@ var toggleUserlist = function () {
     scrollChat();
 };
 
-$("#usercount").click(toggleUserlist);
+$("#usercount").on('click', toggleUserlist);
-$("#userlisttoggle").click(toggleUserlist);
+$("#userlisttoggle").on('click', toggleUserlist);
 
-$(".add-temp").change(function () {
+$(".add-temp").on('change', function () {
     $(".add-temp").prop("checked", $(this).prop("checked"));
 });
 
@@ -878,17 +878,18 @@ applyOpts();
 })();
 
 var EMOTELISTMODAL = $("#emotelist");
-$("#emotelistbtn").click(function () {
+$("#emotelistbtn").on('click', function () {
     EMOTELISTMODAL.modal();
 });
 
+EMOTELISTMODAL.on('shown.bs.modal', function () { $('.emotelist-search').trigger('focus') });
 EMOTELISTMODAL.find(".emotelist-alphabetical").change(function () {
     USEROPTS.emotelist_sort = this.checked;
     setOpt("emotelist_sort", USEROPTS.emotelist_sort);
 });
 EMOTELISTMODAL.find(".emotelist-alphabetical").prop("checked", USEROPTS.emotelist_sort);
 
-$("#fullscreenbtn").click(function () {
+$("#fullscreenbtn").on('click', function () {
     var elem = document.querySelector("#videowrap .embed-responsive");
     // this shit is why frontend web development sucks
     var fn = elem.requestFullscreen ||
@@ -903,27 +904,30 @@ $("#fullscreenbtn").click(function () {
 
 function handleCSSJSTooLarge(selector) {
     if (this.value.length > 20000) {
-        var warning = $(selector);
+        let notice = document.querySelector(selector);
-        if (warning.length > 0) {
+        if (notice !== null) {
             return;
         }
 
-        warning = makeAlert("Maximum Size Exceeded", "Inline CSS and JavaScript are " +
+        notice = makeAlert("Maximum Size Exceeded", "Inline CSS and JavaScript are " +
                 "limited to 20,000 characters or less.  If you need more room, you " +
                 "need to use the external CSS or JavaScript option.", "alert-danger")
                 .attr("id", selector.replace(/#/, ""));
-        warning.insertBefore(this);
+
+        // makeAlert returns jQuery
+        this.parentNode.insertBefore(notice[0], this);
     } else {
-        $(selector).remove();
+        let notice = document.querySelector(selector);
+        notice?.remove();
     }
 }
 
-$("#cs-csstext").bind("input", handleCSSJSTooLarge.bind($("#cs-csstext")[0],
+['#cs-csstext', '#cs-jstext'].forEach((selector)=>{
-        "#cs-csstext-too-big"));
+    elem = document.querySelector(selector);
-$("#cs-jstext").bind("input", handleCSSJSTooLarge.bind($("#cs-jstext")[0],
+    elem.addEventListener('input', handleCSSJSTooLarge.bind(elem, `${selector}-too-big`));
-        "#cs-jstext-too-big"));
+});
 
-$("#resize-video-larger").click(function () {
+$("#resize-video-larger").on('click', function () {
     try {
         CyTube.ui.changeVideoWidth(1);
     } catch (error) {
@@ -931,7 +935,7 @@ $("#resize-video-larger").click(function () {
     }
 });
 
-$("#resize-video-smaller").click(function () {
+$("#resize-video-smaller").on('click', function () {
     try {
         CyTube.ui.changeVideoWidth(-1);
     } catch (error) {

www/js/videojs-dash.js

@@ -1,636 +0,0 @@
-/**
- * videojs-contrib-dash
- * @version 2.9.1
- * @copyright 2017 Brightcove, Inc
- * @license Apache-2.0
- */
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.videojsDash = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-(function (global){
-'use strict';
-
-exports.__esModule = true;
-exports['default'] = setupAudioTracks;
-
-var _dashjs = (typeof window !== "undefined" ? window['dashjs'] : typeof global !== "undefined" ? global['dashjs'] : null);
-
-var _dashjs2 = _interopRequireDefault(_dashjs);
-
-var _video = (typeof window !== "undefined" ? window['videojs'] : typeof global !== "undefined" ? global['videojs'] : null);
-
-var _video2 = _interopRequireDefault(_video);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-/**
- * Setup audio tracks. Take the tracks from dash and add the tracks to videojs. Listen for when
- * videojs changes tracks and apply that to the dash player because videojs doesn't do this
- * natively.
- *
- * @private
- * @param {videojs} player the videojs player instance
- * @param {videojs.tech} tech the videojs tech being used
- */
-function handlePlaybackMetadataLoaded(player, tech) {
-  var mediaPlayer = player.dash.mediaPlayer;
-
-  var dashAudioTracks = mediaPlayer.getTracksFor('audio');
-  var videojsAudioTracks = player.audioTracks();
-
-  function generateIdFromTrackIndex(index) {
-    return 'dash-audio-' + index;
-  }
-
-  function findDashAudioTrack(dashAudioTracks, videojsAudioTrack) {
-    return dashAudioTracks.find(function (_ref) {
-      var index = _ref.index;
-      return generateIdFromTrackIndex(index) === videojsAudioTrack.id;
-    });
-  }
-
-  // Safari creates a single native `AudioTrack` (not `videojs.AudioTrack`) when loading. Clear all
-  // automatically generated audio tracks so we can create them all ourself.
-  if (videojsAudioTracks.length) {
-    tech.clearTracks(['audio']);
-  }
-
-  var currentAudioTrack = mediaPlayer.getCurrentTrackFor('audio');
-
-  dashAudioTracks.forEach(function (dashTrack) {
-    var label = dashTrack.lang;
-
-    if (dashTrack.roles && dashTrack.roles.length) {
-      label += ' (' + dashTrack.roles.join(', ') + ')';
-    }
-
-    // Add the track to the player's audio track list.
-    videojsAudioTracks.addTrack(new _video2['default'].AudioTrack({
-      enabled: dashTrack === currentAudioTrack,
-      id: generateIdFromTrackIndex(dashTrack.index),
-      kind: dashTrack.kind || 'main',
-      label: label,
-      language: dashTrack.lang
-    }));
-  });
-
-  videojsAudioTracks.addEventListener('change', function () {
-    for (var i = 0; i < videojsAudioTracks.length; i++) {
-      var track = videojsAudioTracks[i];
-
-      if (track.enabled) {
-        // Find the audio track we just selected by the id
-        var dashAudioTrack = findDashAudioTrack(dashAudioTracks, track);
-
-        // Set is as the current track
-        mediaPlayer.setCurrentTrack(dashAudioTrack);
-
-        // Stop looping
-        continue;
-      }
-    }
-  });
-}
-
-/*
- * Call `handlePlaybackMetadataLoaded` when `mediaPlayer` emits
- * `dashjs.MediaPlayer.events.PLAYBACK_METADATA_LOADED`.
- */
-function setupAudioTracks(player, tech) {
-  // When `dashjs` finishes loading metadata, create audio tracks for `video.js`.
-  player.dash.mediaPlayer.on(_dashjs2['default'].MediaPlayer.events.PLAYBACK_METADATA_LOADED, handlePlaybackMetadataLoaded.bind(null, player, tech));
-}
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],2:[function(require,module,exports){
-(function (global){
-'use strict';
-
-exports.__esModule = true;
-exports['default'] = setupTextTracks;
-
-var _dashjs = (typeof window !== "undefined" ? window['dashjs'] : typeof global !== "undefined" ? global['dashjs'] : null);
-
-var _dashjs2 = _interopRequireDefault(_dashjs);
-
-var _video = (typeof window !== "undefined" ? window['videojs'] : typeof global !== "undefined" ? global['videojs'] : null);
-
-var _video2 = _interopRequireDefault(_video);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-function find(l, f) {
-  for (var i = 0; i < l.length; i++) {
-    if (f(l[i])) {
-      return l[i];
-    }
-  }
-}
-
-/*
- * Attach text tracks from dash.js to videojs
- *
- * @param {videojs} player the videojs player instance
- * @param {array} tracks the tracks loaded by dash.js to attach to videojs
- *
- * @private
- */
-function attachDashTextTracksToVideojs(player, tech, tracks) {
-  var trackDictionary = [];
-
-  // Add remote tracks
-  var tracksAttached = tracks
-  // Map input data to match HTMLTrackElement spec
-  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement
-  .map(function (track) {
-    return {
-      dashTrack: track,
-      trackConfig: {
-        label: track.lang,
-        language: track.lang,
-        srclang: track.lang
-      }
-    };
-  }
-
-  // Add track to videojs track list
-  ).map(function (_ref) {
-    var trackConfig = _ref.trackConfig,
-        dashTrack = _ref.dashTrack;
-
-    var remoteTextTrack = player.addRemoteTextTrack(trackConfig, true);
-    trackDictionary.push({ textTrack: remoteTextTrack.track, dashTrack: dashTrack });
-
-    // Don't add the cues becuase we're going to let dash handle it natively. This will ensure
-    // that dash handle external time text files and fragmented text tracks.
-    //
-    // Example file with external time text files:
-    // https://storage.googleapis.com/shaka-demo-assets/sintel-mp4-wvtt/dash.mpd
-
-    return remoteTextTrack;
-  });
-
-  /*
-   * Scan `videojs.textTracks()` to find one that is showing. Set the dash text track.
-   */
-  function updateActiveDashTextTrack() {
-    var dashMediaPlayer = player.dash.mediaPlayer;
-    var textTracks = player.textTracks();
-    var activeTextTrackIndex = -1;
-
-    // Iterate through the tracks and find the one marked as showing. If none are showing,
-    // `activeTextTrackIndex` will be set to `-1`, disabling text tracks.
-
-    var _loop = function _loop(i) {
-      var textTrack = textTracks[i];
-
-      if (textTrack.mode === 'showing') {
-        // Find the dash track we want to use
-
-        /* jshint loopfunc: true */
-        var dictionaryLookupResult = find(trackDictionary, function (track) {
-          return track.textTrack === textTrack;
-        });
-        /* jshint loopfunc: false */
-
-        var dashTrackToActivate = dictionaryLookupResult ? dictionaryLookupResult.dashTrack : null;
-
-        // If we found a track, get it's index.
-        if (dashTrackToActivate) {
-          activeTextTrackIndex = tracks.indexOf(dashTrackToActivate);
-        }
-      }
-    };
-
-    for (var i = 0; i < textTracks.length; i += 1) {
-      _loop(i);
-    }
-
-    // If the text track has changed, then set it in dash
-    if (activeTextTrackIndex !== dashMediaPlayer.getCurrentTextTrackIndex()) {
-      dashMediaPlayer.setTextTrack(activeTextTrackIndex);
-    }
-  }
-
-  // Update dash when videojs's selected text track changes.
-  player.textTracks().on('change', updateActiveDashTextTrack);
-
-  // Cleanup event listeners whenever we start loading a new source
-  player.one('loadstart', function () {
-    player.textTracks().off('change', updateActiveDashTextTrack);
-  });
-
-  // Initialize the text track on our first run-through
-  updateActiveDashTextTrack();
-
-  return tracksAttached;
-}
-
-/*
- * Wait for dash to emit `TEXT_TRACKS_ADDED` and then attach the text tracks loaded by dash if
- * we're not using native text tracks.
- *
- * @param {videojs} player the videojs player instance
- * @private
- */
-function setupTextTracks(player, tech, options) {
-  // Clear VTTCue if it was shimmed by vttjs and let dash.js use TextTrackCue.
-  // This is necessary because dash.js creates text tracks
-  // using addTextTrack which is incompatible with vttjs.VTTCue in IE11
-  if (window.VTTCue && !/\[native code\]/.test(window.VTTCue.toString())) {
-    window.VTTCue = false;
-  }
-
-  // Store the tracks that we've added so we can remove them later.
-  var dashTracksAttachedToVideoJs = [];
-
-  // We're relying on the user to disable native captions. Show an error if they didn't do so.
-  if (tech.featuresNativeTextTracks) {
-    _video2['default'].log.error('You must pass {html: {nativeCaptions: false}} in the videojs constructor ' + 'to use text tracks in videojs-contrib-dash');
-    return;
-  }
-
-  var mediaPlayer = player.dash.mediaPlayer;
-
-  // Clear the tracks that we added. We don't clear them all because someone else can add tracks.
-  function clearDashTracks() {
-    dashTracksAttachedToVideoJs.forEach(player.removeRemoteTextTrack.bind(player));
-
-    dashTracksAttachedToVideoJs = [];
-  }
-
-  function handleTextTracksAdded(_ref2) {
-    var index = _ref2.index,
-        tracks = _ref2.tracks;
-
-    // Stop listening for this event. We only want to hear it once.
-    mediaPlayer.off(_dashjs2['default'].MediaPlayer.events.TEXT_TRACKS_ADDED, handleTextTracksAdded);
-
-    // Cleanup old tracks
-    clearDashTracks();
-
-    if (!tracks.length) {
-      // Don't try to add text tracks if there aren't any
-      return;
-    }
-
-    // Save the tracks so we can remove them later
-    dashTracksAttachedToVideoJs = attachDashTextTracksToVideojs(player, tech, tracks, options);
-  }
-
-  // Attach dash text tracks whenever we dash emits `TEXT_TRACKS_ADDED`.
-  mediaPlayer.on(_dashjs2['default'].MediaPlayer.events.TEXT_TRACKS_ADDED, handleTextTracksAdded);
-
-  function cleanup() {
-    mediaPlayer.off(_dashjs2['default'].MediaPlayer.events.TEXT_TRACKS_ADDED, handleTextTracksAdded);
-
-    player.one('loadstart', clearDashTracks);
-  }
-
-  // When the player can play, remove the initialization events. We might not have received
-  // TEXT_TRACKS_ADDED` so we have to stop listening for it or we'll get errors when we load new
-  // videos and are listening for the same event in multiple places, including cleaned up
-  // mediaPlayers.
-  mediaPlayer.on(_dashjs2['default'].MediaPlayer.events.CAN_PLAY, cleanup);
-}
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],3:[function(require,module,exports){
-(function (global){
-var win;
-
-if (typeof window !== "undefined") {
-    win = window;
-} else if (typeof global !== "undefined") {
-    win = global;
-} else if (typeof self !== "undefined"){
-    win = self;
-} else {
-    win = {};
-}
-
-module.exports = win;
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],4:[function(require,module,exports){
-(function (global){
-'use strict';
-
-exports.__esModule = true;
-
-var _window = require('global/window');
-
-var _window2 = _interopRequireDefault(_window);
-
-var _video = (typeof window !== "undefined" ? window['videojs'] : typeof global !== "undefined" ? global['videojs'] : null);
-
-var _video2 = _interopRequireDefault(_video);
-
-var _dashjs = (typeof window !== "undefined" ? window['dashjs'] : typeof global !== "undefined" ? global['dashjs'] : null);
-
-var _dashjs2 = _interopRequireDefault(_dashjs);
-
-var _setupAudioTracks = require('./setup-audio-tracks');
-
-var _setupAudioTracks2 = _interopRequireDefault(_setupAudioTracks);
-
-var _setupTextTracks = require('./setup-text-tracks');
-
-var _setupTextTracks2 = _interopRequireDefault(_setupTextTracks);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-/**
- * videojs-contrib-dash
- *
- * Use Dash.js to playback DASH content inside of Video.js via a SourceHandler
- */
-var Html5DashJS = function () {
-  function Html5DashJS(source, tech, options) {
-    var _this = this;
-
-    _classCallCheck(this, Html5DashJS);
-
-    // Get options from tech if not provided for backwards compatibility
-    options = options || tech.options_;
-
-    this.player = (0, _video2['default'])(options.playerId);
-    this.player.dash = this.player.dash || {};
-
-    this.tech_ = tech;
-    this.el_ = tech.el();
-    this.elParent_ = this.el_.parentNode;
-
-    // Do nothing if the src is falsey
-    if (!source.src) {
-      return;
-    }
-
-    // While the manifest is loading and Dash.js has not finished initializing
-    // we must defer events and functions calls with isReady_ and then `triggerReady`
-    // again later once everything is setup
-    tech.isReady_ = false;
-
-    if (Html5DashJS.updateSourceData) {
-      _video2['default'].log.warn('updateSourceData has been deprecated.' + ' Please switch to using hook("updatesource", callback).');
-      source = Html5DashJS.updateSourceData(source);
-    }
-
-    // call updatesource hooks
-    Html5DashJS.hooks('updatesource').forEach(function (hook) {
-      source = hook(source);
-    });
-
-    var manifestSource = source.src;
-    this.keySystemOptions_ = Html5DashJS.buildDashJSProtData(source.keySystemOptions);
-
-    this.player.dash.mediaPlayer = _dashjs2['default'].MediaPlayer().create();
-
-    this.mediaPlayer_ = this.player.dash.mediaPlayer;
-
-    // Log MedaPlayer messages through video.js
-    if (Html5DashJS.useVideoJSDebug) {
-      _video2['default'].log.warn('useVideoJSDebug has been deprecated.' + ' Please switch to using hook("beforeinitialize", callback).');
-      Html5DashJS.useVideoJSDebug(this.mediaPlayer_);
-    }
-
-    if (Html5DashJS.beforeInitialize) {
-      _video2['default'].log.warn('beforeInitialize has been deprecated.' + ' Please switch to using hook("beforeinitialize", callback).');
-      Html5DashJS.beforeInitialize(this.player, this.mediaPlayer_);
-    }
-
-    Html5DashJS.hooks('beforeinitialize').forEach(function (hook) {
-      hook(_this.player, _this.mediaPlayer_);
-    });
-
-    // Must run controller before these two lines or else there is no
-    // element to bind to.
-    this.mediaPlayer_.initialize();
-
-    // Apply all dash options that are set
-    if (options.dash) {
-      Object.keys(options.dash).forEach(function (key) {
-        var _mediaPlayer_;
-
-        var dashOptionsKey = 'set' + key.charAt(0).toUpperCase() + key.slice(1);
-        var value = options.dash[key];
-
-        if (_this.mediaPlayer_.hasOwnProperty(dashOptionsKey)) {
-          // Providing a key without `set` prefix is now deprecated.
-          _video2['default'].log.warn('Using dash options in videojs-contrib-dash without the set prefix ' + ('has been deprecated. Change \'' + key + '\' to \'' + dashOptionsKey + '\''));
-
-          // Set key so it will still work
-          key = dashOptionsKey;
-        }
-
-        if (!_this.mediaPlayer_.hasOwnProperty(key)) {
-          _video2['default'].log.warn('Warning: dash configuration option unrecognized: ' + key);
-
-          return;
-        }
-
-        // Guarantee `value` is an array
-        if (!Array.isArray(value)) {
-          value = [value];
-        }
-
-        (_mediaPlayer_ = _this.mediaPlayer_)[key].apply(_mediaPlayer_, value);
-      });
-    }
-
-    this.mediaPlayer_.attachView(this.el_);
-
-    // Dash.js autoplays by default, video.js will handle autoplay
-    this.mediaPlayer_.setAutoPlay(false);
-
-    // Setup audio tracks
-    _setupAudioTracks2['default'].call(null, this.player, tech);
-
-    // Setup text tracks
-    _setupTextTracks2['default'].call(null, this.player, tech, options);
-
-    // Attach the source with any protection data
-    this.mediaPlayer_.setProtectionData(this.keySystemOptions_);
-    this.mediaPlayer_.attachSource(manifestSource);
-
-    this.tech_.triggerReady();
-  }
-
-  /*
-   * Iterate over the `keySystemOptions` array and convert each object into
-   * the type of object Dash.js expects in the `protData` argument.
-   *
-   * Also rename 'licenseUrl' property in the options to an 'serverURL' property
-   */
-
-
-  Html5DashJS.buildDashJSProtData = function buildDashJSProtData(keySystemOptions) {
-    var output = {};
-
-    if (!keySystemOptions || !Array.isArray(keySystemOptions)) {
-      return null;
-    }
-
-    for (var i = 0; i < keySystemOptions.length; i++) {
-      var keySystem = keySystemOptions[i];
-      var options = _video2['default'].mergeOptions({}, keySystem.options);
-
-      if (options.licenseUrl) {
-        options.serverURL = options.licenseUrl;
-        delete options.licenseUrl;
-      }
-
-      output[keySystem.name] = options;
-    }
-
-    return output;
-  };
-
-  Html5DashJS.prototype.dispose = function dispose() {
-    if (this.mediaPlayer_) {
-      this.mediaPlayer_.reset();
-    }
-
-    if (this.player.dash) {
-      delete this.player.dash;
-    }
-  };
-
-  Html5DashJS.prototype.duration = function duration() {
-    var duration = this.el_.duration;
-    if (duration === Number.MAX_VALUE) {
-      return Infinity;
-    }
-    return duration;
-  };
-
-  /**
-   * Get a list of hooks for a specific lifecycle
-   *
-   * @param {string} type the lifecycle to get hooks from
-   * @param {Function=|Function[]=} hook Optionally add a hook tothe lifecycle
-   * @return {Array} an array of hooks or epty if none
-   * @method hooks
-   */
-
-
-  Html5DashJS.hooks = function hooks(type, hook) {
-    Html5DashJS.hooks_[type] = Html5DashJS.hooks_[type] || [];
-
-    if (hook) {
-      Html5DashJS.hooks_[type] = Html5DashJS.hooks_[type].concat(hook);
-    }
-
-    return Html5DashJS.hooks_[type];
-  };
-
-  /**
-   * Add a function hook to a specific dash lifecycle
-   *
-   * @param {string} type the lifecycle to hook the function to
-   * @param {Function|Function[]} hook the function or array of functions to attach
-   * @method hook
-   */
-
-
-  Html5DashJS.hook = function hook(type, _hook) {
-    Html5DashJS.hooks(type, _hook);
-  };
-
-  /**
-   * Remove a hook from a specific dash lifecycle.
-   *
-   * @param {string} type the lifecycle that the function hooked to
-   * @param {Function} hook The hooked function to remove
-   * @return {boolean} True if the function was removed, false if not found
-   * @method removeHook
-   */
-
-
-  Html5DashJS.removeHook = function removeHook(type, hook) {
-    var index = Html5DashJS.hooks(type).indexOf(hook);
-
-    if (index === -1) {
-      return false;
-    }
-
-    Html5DashJS.hooks_[type] = Html5DashJS.hooks_[type].slice();
-    Html5DashJS.hooks_[type].splice(index, 1);
-
-    return true;
-  };
-
-  return Html5DashJS;
-}();
-
-Html5DashJS.hooks_ = {};
-
-var canHandleKeySystems = function canHandleKeySystems(source) {
-  // copy the source
-  source = JSON.parse(JSON.stringify(source));
-
-  if (Html5DashJS.updateSourceData) {
-    _video2['default'].log.warn('updateSourceData has been deprecated.' + ' Please switch to using hook("updatesource", callback).');
-    source = Html5DashJS.updateSourceData(source);
-  }
-
-  // call updatesource hooks
-  Html5DashJS.hooks('updatesource').forEach(function (hook) {
-    source = hook(source);
-  });
-
-  var videoEl = document.createElement('video');
-  if (source.keySystemOptions && !(navigator.requestMediaKeySystemAccess ||
-  // IE11 Win 8.1
-  videoEl.msSetMediaKeys)) {
-    return false;
-  }
-
-  return true;
-};
-
-_video2['default'].DashSourceHandler = function () {
-  return {
-    canHandleSource: function canHandleSource(source) {
-      var dashExtRE = /\.mpd/i;
-
-      if (!canHandleKeySystems(source)) {
-        return '';
-      }
-
-      if (_video2['default'].DashSourceHandler.canPlayType(source.type)) {
-        return 'probably';
-      } else if (dashExtRE.test(source.src)) {
-        return 'maybe';
-      } else {
-        return '';
-      }
-    },
-
-    handleSource: function handleSource(source, tech, options) {
-      return new Html5DashJS(source, tech, options);
-    },
-
-    canPlayType: function canPlayType(type) {
-      return _video2['default'].DashSourceHandler.canPlayType(type);
-    }
-  };
-};
-
-_video2['default'].DashSourceHandler.canPlayType = function (type) {
-  var dashTypeRE = /^application\/dash\+xml/i;
-  if (dashTypeRE.test(type)) {
-    return 'probably';
-  }
-
-  return '';
-};
-
-// Only add the SourceHandler if the browser supports MediaSourceExtensions
-if (!!_window2['default'].MediaSource) {
-  _video2['default'].getTech('Html5').registerSourceHandler(_video2['default'].DashSourceHandler(), 0);
-}
-
-_video2['default'].Html5DashJS = Html5DashJS;
-exports['default'] = Html5DashJS;
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./setup-audio-tracks":1,"./setup-text-tracks":2,"global/window":3}]},{},[4])(4)
-});

www/js/vjs/videojs-audio-switcher.js

@@ -0,0 +1,594 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('video.js')) : typeof define === 'function' && define.amd ? define(['video.js'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.videojs));
+}(this, function (videojs) {
+    'use strict';
+    function _interopDefaultLegacy(e) {
+        return e && typeof e === 'object' && 'default' in e ? e : { 'default': e };
+    }
+    var videojs__default = /*#__PURE__*/
+    _interopDefaultLegacy(videojs);
+    /**
+   * Checks if `value` is the
+   * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+   * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+   * @example
+   *
+   * _.isObject({});
+   * // => true
+   *
+   * _.isObject([1, 2, 3]);
+   * // => true
+   *
+   * _.isObject(_.noop);
+   * // => true
+   *
+   * _.isObject(null);
+   * // => false
+   */
+    function isObject(value) {
+        var type = typeof value;
+        return value != null && (type == 'object' || type == 'function');
+    }
+    /** Detect free variable `global` from Node.js. */
+    var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
+    /** Detect free variable `self`. */
+    var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+    /** Used as a reference to the global object. */
+    var root = freeGlobal || freeSelf || Function('return this')();
+    /**
+   * Gets the timestamp of the number of milliseconds that have elapsed since
+   * the Unix epoch (1 January 1970 00:00:00 UTC).
+   *
+   * @static
+   * @memberOf _
+   * @since 2.4.0
+   * @category Date
+   * @returns {number} Returns the timestamp.
+   * @example
+   *
+   * _.defer(function(stamp) {
+   *   console.log(_.now() - stamp);
+   * }, _.now());
+   * // => Logs the number of milliseconds it took for the deferred invocation.
+   */
+    var now = function () {
+        return root.Date.now();
+    };
+    /** Used to match a single whitespace character. */
+    var reWhitespace = /\s/;
+    /**
+   * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+   * character of `string`.
+   *
+   * @private
+   * @param {string} string The string to inspect.
+   * @returns {number} Returns the index of the last non-whitespace character.
+   */
+    function trimmedEndIndex(string) {
+        var index = string.length;
+        while (index-- && reWhitespace.test(string.charAt(index))) {
+        }
+        return index;
+    }
+    /** Used to match leading whitespace. */
+    var reTrimStart = /^\s+/;
+    /**
+   * The base implementation of `_.trim`.
+   *
+   * @private
+   * @param {string} string The string to trim.
+   * @returns {string} Returns the trimmed string.
+   */
+    function baseTrim(string) {
+        return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '') : string;
+    }
+    /** Built-in value references. */
+    var Symbol = root.Symbol;
+    /** Used for built-in method references. */
+    var objectProto$1 = Object.prototype;
+    /** Used to check objects for own properties. */
+    var hasOwnProperty = objectProto$1.hasOwnProperty;
+    /**
+   * Used to resolve the
+   * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+   * of values.
+   */
+    var nativeObjectToString$1 = objectProto$1.toString;
+    /** Built-in value references. */
+    var symToStringTag$1 = Symbol ? Symbol.toStringTag : undefined;
+    /**
+   * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+   *
+   * @private
+   * @param {*} value The value to query.
+   * @returns {string} Returns the raw `toStringTag`.
+   */
+    function getRawTag(value) {
+        var isOwn = hasOwnProperty.call(value, symToStringTag$1), tag = value[symToStringTag$1];
+        try {
+            value[symToStringTag$1] = undefined;
+            var unmasked = true;
+        } catch (e) {
+        }
+        var result = nativeObjectToString$1.call(value);
+        if (unmasked) {
+            if (isOwn) {
+                value[symToStringTag$1] = tag;
+            } else {
+                delete value[symToStringTag$1];
+            }
+        }
+        return result;
+    }
+    /** Used for built-in method references. */
+    var objectProto = Object.prototype;
+    /**
+   * Used to resolve the
+   * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+   * of values.
+   */
+    var nativeObjectToString = objectProto.toString;
+    /**
+   * Converts `value` to a string using `Object.prototype.toString`.
+   *
+   * @private
+   * @param {*} value The value to convert.
+   * @returns {string} Returns the converted string.
+   */
+    function objectToString(value) {
+        return nativeObjectToString.call(value);
+    }
+    /** `Object#toString` result references. */
+    var nullTag = '[object Null]', undefinedTag = '[object Undefined]';
+    /** Built-in value references. */
+    var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
+    /**
+   * The base implementation of `getTag` without fallbacks for buggy environments.
+   *
+   * @private
+   * @param {*} value The value to query.
+   * @returns {string} Returns the `toStringTag`.
+   */
+    function baseGetTag(value) {
+        if (value == null) {
+            return value === undefined ? undefinedTag : nullTag;
+        }
+        return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+    }
+    /**
+   * Checks if `value` is object-like. A value is object-like if it's not `null`
+   * and has a `typeof` result of "object".
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+   * @example
+   *
+   * _.isObjectLike({});
+   * // => true
+   *
+   * _.isObjectLike([1, 2, 3]);
+   * // => true
+   *
+   * _.isObjectLike(_.noop);
+   * // => false
+   *
+   * _.isObjectLike(null);
+   * // => false
+   */
+    function isObjectLike(value) {
+        return value != null && typeof value == 'object';
+    }
+    /** `Object#toString` result references. */
+    var symbolTag = '[object Symbol]';
+    /**
+   * Checks if `value` is classified as a `Symbol` primitive or object.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+   * @example
+   *
+   * _.isSymbol(Symbol.iterator);
+   * // => true
+   *
+   * _.isSymbol('abc');
+   * // => false
+   */
+    function isSymbol(value) {
+        return typeof value == 'symbol' || isObjectLike(value) && baseGetTag(value) == symbolTag;
+    }
+    /** Used as references for various `Number` constants. */
+    var NAN = 0 / 0;
+    /** Used to detect bad signed hexadecimal string values. */
+    var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+    /** Used to detect binary string values. */
+    var reIsBinary = /^0b[01]+$/i;
+    /** Used to detect octal string values. */
+    var reIsOctal = /^0o[0-7]+$/i;
+    /** Built-in method references without a dependency on `root`. */
+    var freeParseInt = parseInt;
+    /**
+   * Converts `value` to a number.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to process.
+   * @returns {number} Returns the number.
+   * @example
+   *
+   * _.toNumber(3.2);
+   * // => 3.2
+   *
+   * _.toNumber(Number.MIN_VALUE);
+   * // => 5e-324
+   *
+   * _.toNumber(Infinity);
+   * // => Infinity
+   *
+   * _.toNumber('3.2');
+   * // => 3.2
+   */
+    function toNumber(value) {
+        if (typeof value == 'number') {
+            return value;
+        }
+        if (isSymbol(value)) {
+            return NAN;
+        }
+        if (isObject(value)) {
+            var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+            value = isObject(other) ? other + '' : other;
+        }
+        if (typeof value != 'string') {
+            return value === 0 ? value : +value;
+        }
+        value = baseTrim(value);
+        var isBinary = reIsBinary.test(value);
+        return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+    }
+    /** Error message constants. */
+    var FUNC_ERROR_TEXT$1 = 'Expected a function';
+    /* Built-in method references for those with the same name as other `lodash` methods. */
+    var nativeMax = Math.max, nativeMin = Math.min;
+    /**
+   * Creates a debounced function that delays invoking `func` until after `wait`
+   * milliseconds have elapsed since the last time the debounced function was
+   * invoked. The debounced function comes with a `cancel` method to cancel
+   * delayed `func` invocations and a `flush` method to immediately invoke them.
+   * Provide `options` to indicate whether `func` should be invoked on the
+   * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+   * with the last arguments provided to the debounced function. Subsequent
+   * calls to the debounced function return the result of the last `func`
+   * invocation.
+   *
+   * **Note:** If `leading` and `trailing` options are `true`, `func` is
+   * invoked on the trailing edge of the timeout only if the debounced function
+   * is invoked more than once during the `wait` timeout.
+   *
+   * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+   * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+   *
+   * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+   * for details over the differences between `_.debounce` and `_.throttle`.
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Function
+   * @param {Function} func The function to debounce.
+   * @param {number} [wait=0] The number of milliseconds to delay.
+   * @param {Object} [options={}] The options object.
+   * @param {boolean} [options.leading=false]
+   *  Specify invoking on the leading edge of the timeout.
+   * @param {number} [options.maxWait]
+   *  The maximum time `func` is allowed to be delayed before it's invoked.
+   * @param {boolean} [options.trailing=true]
+   *  Specify invoking on the trailing edge of the timeout.
+   * @returns {Function} Returns the new debounced function.
+   * @example
+   *
+   * // Avoid costly calculations while the window size is in flux.
+   * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+   *
+   * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+   * jQuery(element).on('click', _.debounce(sendMail, 300, {
+   *   'leading': true,
+   *   'trailing': false
+   * }));
+   *
+   * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+   * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+   * var source = new EventSource('/stream');
+   * jQuery(source).on('message', debounced);
+   *
+   * // Cancel the trailing debounced invocation.
+   * jQuery(window).on('popstate', debounced.cancel);
+   */
+    function debounce(func, wait, options) {
+        var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+        if (typeof func != 'function') {
+            throw new TypeError(FUNC_ERROR_TEXT$1);
+        }
+        wait = toNumber(wait) || 0;
+        if (isObject(options)) {
+            leading = !!options.leading;
+            maxing = 'maxWait' in options;
+            maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+            trailing = 'trailing' in options ? !!options.trailing : trailing;
+        }
+        function invokeFunc(time) {
+            var args = lastArgs, thisArg = lastThis;
+            lastArgs = lastThis = undefined;
+            lastInvokeTime = time;
+            result = func.apply(thisArg, args);
+            return result;
+        }
+        function leadingEdge(time) {
+            // Reset any `maxWait` timer.
+            lastInvokeTime = time;
+            // Start the timer for the trailing edge.
+            timerId = setTimeout(timerExpired, wait);
+            // Invoke the leading edge.
+            return leading ? invokeFunc(time) : result;
+        }
+        function remainingWait(time) {
+            var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
+            return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+        }
+        function shouldInvoke(time) {
+            var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
+            // Either this is the first call, activity has stopped and we're at the
+            // trailing edge, the system time has gone backwards and we're treating
+            // it as the trailing edge, or we've hit the `maxWait` limit.
+            return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+        }
+        function timerExpired() {
+            var time = now();
+            if (shouldInvoke(time)) {
+                return trailingEdge(time);
+            }
+            // Restart the timer.
+            timerId = setTimeout(timerExpired, remainingWait(time));
+        }
+        function trailingEdge(time) {
+            timerId = undefined;
+            // Only invoke if we have `lastArgs` which means `func` has been
+            // debounced at least once.
+            if (trailing && lastArgs) {
+                return invokeFunc(time);
+            }
+            lastArgs = lastThis = undefined;
+            return result;
+        }
+        function cancel() {
+            if (timerId !== undefined) {
+                clearTimeout(timerId);
+            }
+            lastInvokeTime = 0;
+            lastArgs = lastCallTime = lastThis = timerId = undefined;
+        }
+        function flush() {
+            return timerId === undefined ? result : trailingEdge(now());
+        }
+        function debounced() {
+            var time = now(), isInvoking = shouldInvoke(time);
+            lastArgs = arguments;
+            lastThis = this;
+            lastCallTime = time;
+            if (isInvoking) {
+                if (timerId === undefined) {
+                    return leadingEdge(lastCallTime);
+                }
+                if (maxing) {
+                    // Handle invocations in a tight loop.
+                    clearTimeout(timerId);
+                    timerId = setTimeout(timerExpired, wait);
+                    return invokeFunc(lastCallTime);
+                }
+            }
+            if (timerId === undefined) {
+                timerId = setTimeout(timerExpired, wait);
+            }
+            return result;
+        }
+        debounced.cancel = cancel;
+        debounced.flush = flush;
+        return debounced;
+    }
+    /** Error message constants. */
+    var FUNC_ERROR_TEXT = 'Expected a function';
+    /**
+    * Creates a throttled function that only invokes `func` at most once per
+    * every `wait` milliseconds. The throttled function comes with a `cancel`
+    * method to cancel delayed `func` invocations and a `flush` method to
+    * immediately invoke them. Provide `options` to indicate whether `func`
+    * should be invoked on the leading and/or trailing edge of the `wait`
+    * timeout. The `func` is invoked with the last arguments provided to the
+    * throttled function. Subsequent calls to the throttled function return the
+    * result of the last `func` invocation.
+    *
+    * **Note:** If `leading` and `trailing` options are `true`, `func` is
+    * invoked on the trailing edge of the timeout only if the throttled function
+    * is invoked more than once during the `wait` timeout.
+    *
+    * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+    * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+    *
+    * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+    * for details over the differences between `_.throttle` and `_.debounce`.
+    *
+    * @static
+    * @memberOf _
+    * @since 0.1.0
+    * @category Function
+    * @param {Function} func The function to throttle.
+    * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+    * @param {Object} [options={}] The options object.
+    * @param {boolean} [options.leading=true]
+    *  Specify invoking on the leading edge of the timeout.
+    * @param {boolean} [options.trailing=true]
+    *  Specify invoking on the trailing edge of the timeout.
+    * @returns {Function} Returns the new throttled function.
+    * @example
+    *
+    * // Avoid excessively updating the position while scrolling.
+    * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+    *
+    * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+    * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+    * jQuery(element).on('click', throttled);
+    *
+    * // Cancel the trailing throttled invocation.
+    * jQuery(window).on('popstate', throttled.cancel);
+    */
+    function throttle(func, wait, options) {
+        var leading = true, trailing = true;
+        if (typeof func != 'function') {
+            throw new TypeError(FUNC_ERROR_TEXT);
+        }
+        if (isObject(options)) {
+            leading = 'leading' in options ? !!options.leading : leading;
+            trailing = 'trailing' in options ? !!options.trailing : trailing;
+        }
+        return debounce(func, wait, {
+            'leading': leading,
+            'maxWait': wait,
+            'trailing': trailing
+        });
+    }
+    const syncTime = (player, audio) => {
+        const time = player.currentTime();
+        audio.currentTime = time;
+    };
+    function audioSwitchPlugin(options) {
+        const {audioElement, audioTracks, debugInterval, syncInterval, volume, handleDisposal} = options;
+        const player = this;
+        const checkAudioElement = () => {
+            const videoElement = player.el_;
+            let newAudio;
+            if (typeof audioElement !== 'undefined' && audioElement instanceof HTMLElement) {
+                newAudio = audioElement;
+                this.audio = newAudio;
+            } else {
+                newAudio = document.createElement('audio');
+                this.audio = newAudio;
+                this.isOurAudio = true;
+                this.audio.className = 'audioSwitch-audio';
+                this.audioParent = document.createElement('div');
+                this.audioParent.className = 'audioSwitch-parent';
+                this.audioParent.appendChild(this.audio);
+                if (videoElement.nextSibling) {
+                    videoElement.parentNode.insertBefore(this.audioParent, videoElement.nextSibling);
+                } else {
+                    videoElement.parentNode.appendChild(this.audioParent);
+                }
+            }
+            return newAudio;
+        };
+        const audio = checkAudioElement();
+        audio.currentTime = 0;
+        audio.volume = volume;
+        const onAudioTracksChange = (player, audio, event) => {
+            var audioTrackList = player.audioTracks();
+            let enabledTrack;
+            for (let i = 0; i < audioTrackList.length; i++) {
+                let track = audioTrackList[i];
+                if (track.enabled) {
+                    enabledTrack = track;
+                    break;
+                }
+            }
+            enabledTrack = enabledTrack || audioTrackList[0];
+            if (enabledTrack) {
+                const isPlaying = !player.paused();
+                if (isPlaying)
+                    player.pause();
+                audio.setAttribute('src', audioTracks.find(audioTrack => audioTrack.label === enabledTrack.label)?.url);
+                syncTime(player, audio);
+                if (isPlaying)
+                    player.play();
+            }
+        };
+        var audioTrackList = player.audioTracks();
+        audioTrackList.addEventListener('change', onAudioTracksChange.bind(null, player, audio));
+        if (audioTracks.length > 0) {
+            audioTracks[0].kind = 'main';
+            audioTracks[0].enabled = true;
+            audioTracks.forEach(track => audioTrackList.addTrack(new videojs.AudioTrack(track)));
+            audio.setAttribute('src', audioTracks[0].url);
+        }
+        player.on('dispose', () => {
+            this.audio.pause();
+            if(this.isOurAudio || handleDisposal){
+                this.audio.remove();
+                this.audioParent.remove();
+            }
+        });
+        player.on('play', () => {
+            syncTime(player, audio);
+            if (audio.paused)
+                audio.play();
+        });
+        player.on('pause', () => {
+            syncTime(player, audio);
+            if (!audio.paused)
+                audio.pause();
+        });
+        player.on('seeked', () => {
+            if (!player.paused())
+                player.pause();
+            player.one('canplay', () => {
+                const sync = () => {
+                    syncTime(player, audio);
+                    audio.removeEventListener('canplay', sync);
+                    if (player.paused())
+                        player.play();
+                };
+                audio.addEventListener('canplay', sync);
+            });
+        });
+        player.on('volumechange', () => {
+            if (player.muted()) {
+                audio.muted = true;
+            } else {
+                audio.muted = false;
+                audio.volume = player.volume();
+            }
+        });
+        if (syncInterval) {
+            const syncOnInterval = throttle(() => {
+                syncTime(player, audio);
+            }, syncInterval);
+            player.on('timeupdate', syncOnInterval);
+        }
+        if (debugInterval) {
+            const debugOnInterval = throttle(() => {
+                const _audioBefore = audio.currentTime;
+                const _videoBefore = player.currentTime();
+                console.log('debug', {
+                    audio: _audioBefore,
+                    video: _videoBefore,
+                    diff: _videoBefore - _audioBefore
+                });
+            }, debugInterval);
+            player.on('timeupdate', debugOnInterval);
+        }
+    }
+    videojs__default['default'].registerPlugin('audioSwitch', audioSwitchPlugin);
+}));

www/js/vjs/videojs-resolution-switcher.js

@@ -1,6 +1,7 @@
-/*! videojs-resolution-switcher - 2015-7-26
+/*! videojs-resolution-switcher - 2022-02-07
  * Copyright (c) 2016 Kasper Moskwiak
  * Modified by Pierre Kraft and Derk-Jan Hartman
+ * Modified by Nisaba
  * Licensed under the Apache-2.0 license. */
 
 (function() {
@@ -58,11 +59,11 @@
         this.controlText('Quality');
 
         if(options.dynamicLabel){
-          videojs.addClass(this.label, 'vjs-resolution-button-label');
+          videojs.dom.addClass(this.label, 'vjs-resolution-button-label');
           this.el().appendChild(this.label);
         }else{
           var staticLabel = document.createElement('span');
-          videojs.addClass(staticLabel, 'vjs-menu-icon');
+          videojs.dom.addClass(staticLabel, 'vjs-menu-icon');
           this.el().appendChild(staticLabel);
         }
         player.on('updateSources', videojs.bind( this, this.update ) );
@@ -167,9 +168,7 @@
         }
 
         // Change player source and wait for loadeddata event, then play video
-        // loadedmetadata doesn't work right now for flash.
+        // If player preload is 'none' and then loadeddata not fired. So, we need timeupdate event for seek handle
-        // Probably because of https://github.com/videojs/video-js-swf/issues/124
-        // If player preload is 'none' and then loadeddata not fired. So, we need timeupdate event for seek handle (timeupdate doesn't work properly with flash)
         var handleSeekEvent = 'loadeddata';
         if(this.player_.techName_ !== 'Youtube' && this.player_.preload() === 'none' && this.player_.techName_ !== 'Flash') {
           handleSeekEvent = 'timeupdate';
@@ -178,10 +177,8 @@
           .setSourcesSanitized(sources, label, customSourcePicker || settings.customSourcePicker)
           .one(handleSeekEvent, function() {
             player.currentTime(currentTime);
-            player.handleTechSeeked_();
+            if (!isPaused && player.paused()) {
-            if(!isPaused){
+              player.play()
-              // Start playing and hide loadingSpinner (flash issue ?)
-              player.play().handleTechSeeked_();
             }
             player.trigger('resolutionchange');
           });
@@ -348,7 +345,7 @@
           };
         }
         if(player.options_.sources.length > 1){
-          // tech: Html5 and Flash
+          // tech: Html5
           // Create resolution switcher for videos form <source> tag inside <video>
           player.updateSrc(player.options_.sources);
         }
@@ -362,6 +359,6 @@
     };
 
     // register the plugin
-    videojs.plugin('videoJsResolutionSwitcher', videoJsResolutionSwitcher);
+    videojs.registerPlugin('videoJsResolutionSwitcher', videoJsResolutionSwitcher);
   })(window, videojs);
 })();