Fix chromecast support

Fix chromecast

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Restreamer-UI
 
+## v1.13.0 > v1.14.0
+
+-   Add wettercom service
+-   Add option to select which channels will be displayed on the playersite ([#392](https://github.com/datarhei/restreamer/issues/392), [#800](https://github.com/datarhei/restreamer/issues/800))
+-   Mod updates public videojs >v8
+-   Fix erroneous filter setting
+-   Fix encoded address
+-   Fix double -filter parameter when encoder sets filter
+-   Fix Docker build ([#64](https://github.com/datarhei/restreamer-ui/issues/64))
+
 ## v1.12.0 > v1.13.0
 
 -   Add to allow stream hints in case probing fails

Dockerfile

@@ -1,22 +1,17 @@
-ARG NODE_IMAGE=node:21-alpine3.17
-ARG CADDY_IMAGE=caddy:2.7.5-alpine
+ARG NODE_IMAGE=node:21-alpine3.20
+ARG CADDY_IMAGE=caddy:2.8.4-alpine
 
-FROM $NODE_IMAGE as builder
+FROM $NODE_IMAGE AS builder
 
-ARG NODE_SPACE_SIZE=10240
-ENV NODE_OPTIONS="--openssl-legacy-provider --max-old-space-size=$NODE_SPACE_SIZE"
-
-ENV PUBLIC_URL "./"
+ENV PUBLIC_URL="./"
 
 COPY . /ui
 
 WORKDIR /ui
 
 RUN cd /ui && \
-	yarn set version berry && \
-	yarn config set httpTimeout 600000 && \
- 	yarn install && \
- 	yarn run build
+	yarn install && \
+	yarn build
 
 FROM $CADDY_IMAGE
 

package.json

@@ -1,35 +1,35 @@
 {
 	"name": "restreamer-ui",
-	"version": "1.13.0",
-	"bundle": "restreamer-v2.11.0",
+	"version": "1.14.0",
+	"bundle": "restreamer-v2.12.0",
 	"private": false,
 	"license": "Apache-2.0",
 	"dependencies": {
 		"@auth0/auth0-spa-js": "^2.1.3",
-		"@babel/plugin-syntax-flow": "^7.24.6",
-		"@babel/plugin-transform-react-jsx": "^7.24.6",
-		"@emotion/react": "^11.11.4",
-		"@emotion/styled": "^11.11.5",
-		"@fontsource/dosis": "^5.0.20",
-		"@fontsource/roboto": "^5.0.13",
-		"@fortawesome/fontawesome-svg-core": "^6.5.2",
-		"@fortawesome/free-brands-svg-icons": "^6.5.2",
-		"@fortawesome/free-solid-svg-icons": "^6.5.2",
+		"@babel/plugin-syntax-flow": "^7.24.7",
+		"@babel/plugin-transform-react-jsx": "^7.25.2",
+		"@emotion/react": "^11.13.3",
+		"@emotion/styled": "^11.13.0",
+		"@fontsource/dosis": "^5.0.21",
+		"@fontsource/roboto": "^5.0.14",
+		"@fortawesome/fontawesome-svg-core": "^6.6.0",
+		"@fortawesome/free-brands-svg-icons": "^6.6.0",
+		"@fortawesome/free-solid-svg-icons": "^6.6.0",
 		"@fortawesome/react-fontawesome": "^0.2.2",
-		"@lingui/core": "^4.11.1",
-		"@lingui/macro": "^4.11.1",
-		"@lingui/react": "^4.11.1",
-		"@mui/icons-material": "^5.15.19",
-		"@mui/lab": "^5.0.0-alpha.170",
-		"@mui/material": "^5.15.19",
-		"@mui/styles": "^5.15.19",
-		"@testing-library/dom": "^10.1.0",
-		"@testing-library/jest-dom": "^6.4.5",
-		"@testing-library/react": "^15.0.7",
+		"@lingui/core": "^4.11.4",
+		"@lingui/macro": "^4.11.4",
+		"@lingui/react": "^4.11.4",
+		"@mui/icons-material": "^6.0.1",
+		"@mui/lab": "^6.0.0-beta.8",
+		"@mui/material": "^6.0.1",
+		"@mui/styles": "^6.0.1",
+		"@testing-library/dom": "^10.4.0",
+		"@testing-library/jest-dom": "^6.5.0",
+		"@testing-library/react": "^16.0.1",
 		"@testing-library/user-event": "^14.5.2",
-		"@types/react": "^18.3.3",
+		"@types/react": "^18.3.5",
 		"babel-plugin-macros": "^3.1.0",
-		"eslint": "^9.4.0",
+		"eslint": "^9.9.1",
 		"handlebars": "^4.7.8",
 		"jwt-decode": "^4.0.0",
 		"make-plural": "^7.4.0",
@@ -38,15 +38,15 @@
 		"react-device-detect": "^2.2.3",
 		"react-dom": "^18.3.1",
 		"react-markdown": "^9.0.1",
-		"react-router-dom": "^6.23.1",
+		"react-router-dom": "^6.26.1",
 		"react-scripts": "^5.0.1",
-		"semver": "^7.6.2",
+		"semver": "^7.6.3",
 		"serve": "^14.2.3",
-		"typescript": "^5.4.5",
+		"typescript": "^5.5.4",
 		"url-parse": "^1.5.10",
 		"util": "^0.12.5",
-		"uuid": "^9.0.1",
-		"video.js": "^8.12.0",
+		"uuid": "^10.0.0",
+		"video.js": "^8.17.3",
 		"videojs-overlay": "^3.1.0"
 	},
 	"scripts": {
@@ -86,12 +86,12 @@
 		]
 	},
 	"devDependencies": {
-		"@babel/core": "^7.24.6",
+		"@babel/core": "^7.25.2",
 		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-		"@lingui/cli": "^4.11.1",
+		"@lingui/cli": "^4.11.4",
 		"babel-core": "^6.26.3",
 		"eslint-config-react-app": "^7.0.1",
-		"prettier": "^3.3.0",
+		"prettier": "^3.3.3",
 		"react-error-overlay": "^6.0.11"
 	},
 	"resolutions": {}

public/_player/videojs/dist/videojs-airplay.css

@@ -0,0 +1 @@
+.vjs-airplay-button .vjs-icon-placeholder{background:url("ic_airplay_white_24px.svg") center center no-repeat;background-size:contain;display:inline-block;width:12px;height:12px}.vjs-airplay-button:hover{cursor:pointer}.vjs-airplay-button:hover .vjs-icon-placeholder{background-image:url("ic_airplay_white_24px.svg")}.vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden){display:flex;align-items:center;width:auto;padding:0 4px}.vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden) .vjs-airplay-button-label{flex-grow:1;margin-left:4px}.vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden) .vjs-icon-placeholder{flex-grow:1}

public/_player/videojs/dist/videojs-airplay.js

@@ -0,0 +1,308 @@
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+"use strict";
+
+var hasAirPlayAPISupport = require('../lib/hasAirPlayAPISupport');
+
+/**
+ * Registers the AirPlayButton Component with Video.js. Calls
+ * {@link http://docs.videojs.com/Component.html#.registerComponent}, which will add a
+ * component called `airPlayButton` to the list of globally registered Video.js
+ * components. The `airPlayButton` is added to the player's control bar UI automatically
+ * once {@link module:enableAirPlay} has been called. If you would like to specify the
+ * order of the buttons that appear in the control bar, including this button, you can do
+ * so in the options that you pass to the `videojs` function when creating a player:
+ *
+ * ```
+ * videojs('playerID', {
+ *    controlBar: {
+ *       children: [
+ *          'playToggle',
+ *          'progressControl',
+ *          'volumePanel',
+ *          'fullscreenToggle',
+ *          'airPlayButton',
+ *       ],
+ *    }
+ * });
+ * ```
+ *
+ * @param videojs {object} A reference to {@link http://docs.videojs.com/module-videojs.html|Video.js}
+ * @see http://docs.videojs.com/module-videojs.html#~registerPlugin
+ */
+module.exports = function (videojs) {
+  /**
+   * The AirPlayButton module contains both the AirPlayButton class definition and the
+   * function used to register the button as a Video.js Component.
+   *
+   * @module AirPlayButton
+   */
+
+  const ButtonComponent = videojs.getComponent('Button');
+
+  /**
+  * The Video.js Button class is the base class for UI button components.
+  *
+  * @external Button
+  * @see {@link http://docs.videojs.com/Button.html|Button}
+  */
+
+  /** @lends AirPlayButton.prototype */
+  class AirPlayButton extends ButtonComponent {
+    /**
+     * This class is a button component designed to be displayed in the
+     * player UI's control bar. It displays an Apple AirPlay selection
+     * list when clicked.
+     *
+     * @constructs
+     * @extends external:Button
+     */
+    constructor(player, options) {
+      super(player, options);
+      if (!hasAirPlayAPISupport()) {
+        this.hide();
+      }
+      this._reactToAirPlayAvailableEvents();
+      if (options.addAirPlayLabelToButton) {
+        this.el().classList.add('vjs-airplay-button-lg');
+        this._labelEl = document.createElement('span');
+        this._labelEl.classList.add('vjs-airplay-button-label');
+        this._labelEl.textContent = this.localize('AirPlay');
+        this.el().appendChild(this._labelEl);
+      } else {
+        this.controlText('Start AirPlay');
+      }
+    }
+
+    /**
+     * Overrides Button#buildCSSClass to return the classes used on the button element.
+     *
+     * @param {DOMElement} el
+     * @see {@link http://docs.videojs.com/Button.html#buildCSSClass|Button#buildCSSClass}
+     */
+    buildCSSClass() {
+      return 'vjs-airplay-button ' + super.buildCSSClass();
+    }
+
+    /**
+     * Overrides Button#handleClick to handle button click events. AirPlay
+     * functionality is handled outside of this class, which should be limited
+     * to UI related logic. This function simply triggers an event on the player.
+     *
+     * @fires AirPlayButton#airPlayRequested
+     * @param {DOMElement} el
+     * @see {@link http://docs.videojs.com/Button.html#handleClick|Button#handleClick}
+     */
+    handleClick() {
+      this.player().trigger('airPlayRequested');
+    }
+
+    /**
+     * Gets the underlying DOMElement used by the player.
+     *
+     * @private
+     * @returns {DOMElement} either an <audio> or <video> tag, depending on the type of
+     * player
+     */
+    _getMediaEl() {
+      var playerEl = this.player().el();
+      return playerEl.querySelector('video, audio');
+    }
+
+    /**
+     * Binds a listener to the `webkitplaybacktargetavailabilitychanged` event, if it is
+     * supported, that will show or hide this button Component based on the availability
+     * of the AirPlay function.
+     *
+     * @private
+     */
+    _reactToAirPlayAvailableEvents() {
+      var mediaEl = this._getMediaEl(),
+        self = this;
+      if (!mediaEl || !hasAirPlayAPISupport()) {
+        return;
+      }
+      function onTargetAvailabilityChanged(event) {
+        if (event.availability === 'available') {
+          self.show();
+        } else {
+          self.hide();
+        }
+      }
+      mediaEl.addEventListener('webkitplaybacktargetavailabilitychanged', onTargetAvailabilityChanged);
+      this.on('dispose', function () {
+        mediaEl.removeEventListener('webkitplaybacktargetavailabilitychanged', onTargetAvailabilityChanged);
+      });
+    }
+  }
+  videojs.registerComponent('airPlayButton', AirPlayButton);
+};
+
+},{"../lib/hasAirPlayAPISupport":4}],2:[function(require,module,exports){
+"use strict";
+
+/**
+ * @module enableAirPlay
+ */
+
+var hasAirPlayAPISupport = require('./lib/hasAirPlayAPISupport');
+
+/**
+ * @private
+ * @param {object} the Video.js Player instance
+ * @returns {AirPlayButton} or `undefined` if it does not exist
+ */
+function getExistingAirPlayButton(player) {
+  return player.controlBar.getChild('airPlayButton');
+}
+
+/**
+ * Adds the AirPlayButton Component to the player's ControlBar component, if the
+ * AirPlayButton does not already exist in the ControlBar.
+ * @private
+ * @param player {object} the Video.js Player instance
+ * @param options {object}
+ */
+function ensureAirPlayButtonExists(player, options) {
+  var existingAirPlayButton = getExistingAirPlayButton(player),
+    indexOpt;
+  if (options.addButtonToControlBar && !existingAirPlayButton) {
+    // Figure out AirPlay button's index
+    indexOpt = player.controlBar.children().length;
+    if (typeof options.buttonPositionIndex !== 'undefined') {
+      indexOpt = options.buttonPositionIndex >= 0 ? options.buttonPositionIndex : player.controlBar.children().length + options.buttonPositionIndex;
+    }
+    player.controlBar.addChild('airPlayButton', options, indexOpt);
+  }
+}
+
+/**
+ * Handles requests for AirPlay triggered by the AirPlayButton Component.
+ *
+ * @private
+ * @param player {object} the Video.js Player instance
+ */
+function onAirPlayRequested(player) {
+  var mediaEl = player.el().querySelector('video, audio');
+  if (mediaEl && mediaEl.webkitShowPlaybackTargetPicker) {
+    mediaEl.webkitShowPlaybackTargetPicker();
+  }
+}
+
+/**
+ * Adds an event listener for the `airPlayRequested` event triggered by the AirPlayButton
+ * Component.
+ *
+ * @private
+ * @param player {object} the Video.js Player instance
+ */
+function listenForAirPlayEvents(player) {
+  // Respond to requests for AirPlay. The AirPlayButton component triggers this event
+  // when the user clicks the AirPlay button.
+  player.on('airPlayRequested', onAirPlayRequested.bind(null, player));
+}
+
+/**
+ * Sets up the AirPlay plugin.
+ *
+ * @private
+ * @param player {object} the Video.js player
+ * @param options {object} the plugin options
+ */
+function enableAirPlay(player, options) {
+  if (!player.controlBar) {
+    return;
+  }
+  if (hasAirPlayAPISupport()) {
+    listenForAirPlayEvents(player);
+    ensureAirPlayButtonExists(player, options);
+  }
+}
+
+/**
+ * Registers the AirPlay plugin with Video.js. Calls
+ * {@link http://docs.videojs.com/module-videojs.html#~registerPlugin|videojs#registerPlugin},
+ * which will add a plugin function called `airPlay` to any instance of a Video.js player
+ * that is created after calling this function. Call `player.airPlay(options)`, passing in
+ * configuration options, to enable the AirPlay plugin on your Player instance.
+ *
+ * Currently, the only configuration option is:
+ *
+ *    * **buttonText** - the text to display inside of the button component. By default,
+ *    this text is hidden and is used for accessibility purposes.
+ *
+ * @param {object} videojs
+ * @see http://docs.videojs.com/module-videojs.html#~registerPlugin
+ */
+module.exports = function (videojs) {
+  videojs.registerPlugin('airPlay', function (options) {
+    var pluginOptions = Object.assign({
+      addButtonToControlBar: true
+    }, options || {});
+
+    // `this` is an instance of a Video.js Player.
+    // Wait until the player is "ready" so that the player's control bar component has
+    // been created.
+    this.ready(enableAirPlay.bind(this, this, pluginOptions));
+  });
+};
+
+},{"./lib/hasAirPlayAPISupport":4}],3:[function(require,module,exports){
+"use strict";
+
+var createAirPlayButton = require('./components/AirPlayButton'),
+  createAirPlayPlugin = require('./enableAirPlay');
+
+/**
+ * @module index
+ */
+
+/**
+ * Registers the AirPlay plugin and AirPlayButton Component with Video.js. See
+ * {@link module:AirPlayButton} and {@link module:enableAirPlay} for more details about
+ * how the plugin and button are registered and configured.
+ *
+ * @param {object} videojs
+ * @see module:enableAirPlay
+ * @see module:AirPlayButton
+ */
+module.exports = function (videojs) {
+  videojs = videojs || window.videojs;
+  createAirPlayButton(videojs);
+  createAirPlayPlugin(videojs);
+};
+
+},{"./components/AirPlayButton":1,"./enableAirPlay":2}],4:[function(require,module,exports){
+"use strict";
+
+/**
+ * @module hasAirPlayAPISupport
+ */
+
+/**
+ * Returns whether or not the current browser environment supports AirPlay.
+ *
+ * @private
+ * @returns {boolean} true if AirPlay support is available
+ */
+module.exports = function () {
+  return !!window.WebKitPlaybackTargetAvailabilityEvent;
+};
+
+},{}],5:[function(require,module,exports){
+"use strict";
+
+/**
+ * This module is used as an entry point for the build system to bundle this plugin into a
+ * single javascript file that can be loaded by a script tag on a web page. The javascript
+ * file that is built assumes that `videojs` is available globally at `window.videojs`, so
+ * Video.js must be loaded **before** this plugin is loaded.
+ *
+ * Run `npm install` and then `grunt build` to build the plugin's bundled javascript
+ * file, as well as the CSS and image assets into the project's `./dist/` folder.
+ *
+ * @module standalone
+ */
+
+require('./index')();
+
+},{"./index":3}]},{},[5]);

public/_player/videojs/dist/videojs-airplay.min.css

@@ -1 +1 @@
-.vjs-airplay-button .vjs-icon-placeholder{background:url("ic_airplay_white_24px.svg") center center no-repeat;background-size:contain;display:inline-block;width:20px;height:20px}.vjs-airplay-button:hover{cursor:pointer}.vjs-airplay-button:hover .vjs-icon-placeholder{background-image:url("ic_airplay_white_24px.svg")}
+.vjs-airplay-button .vjs-icon-placeholder{background:url("ic_airplay_white_24px.svg") center center no-repeat;background-size:contain;display:inline-block;width:12px;height:12px}.vjs-airplay-button:hover{cursor:pointer}.vjs-airplay-button:hover .vjs-icon-placeholder{background-image:url("ic_airplay_white_24px.svg")}.vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden){display:flex;align-items:center;width:auto;padding:0 4px}.vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden) .vjs-airplay-button-label{flex-grow:1;margin-left:4px}.vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden) .vjs-icon-placeholder{flex-grow:1}

public/_player/videojs/dist/videojs-chromecast.css

@@ -1,65 +1 @@
-/**	Silvermine Chromecast **/
-.vjs-chromecast-button .vjs-icon-placeholder {
-  background: url('ic_cast_white_24dp.png') center center no-repeat;
-  background-size: contain;
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-}
-.vjs-chromecast-button:hover {
-  cursor: pointer;
-}
-.vjs-chromecast-button:hover .vjs-icon-placeholder {
-  background-image: url('ic_cast_white_24dp.png');
-}
-.vjs-chromecast-button.vjs-chromecast-casting-state .vjs-icon-placeholder {
-  background-image: url('ic_cast_connected_white_24dp.png');
-}
-.vjs-chromecast-button.vjs-chromecast-casting-state:hover .vjs-icon-placeholder {
-  background-image: url('ic_cast_connected_white_24dp.png');
-}
-.vjs-tech-chromecast {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-.vjs-tech-chromecast .vjs-tech-chromecast-poster::after {
-  content: ' ';
-  display: block;
-  height: 2px;
-  width: 100px;
-  background-color: #cccccc;
-  position: absolute;
-  left: calc(50% - 50px);
-}
-.vjs-tech-chromecast .vjs-tech-chromecast-poster-img {
-  max-height: 180px;
-  width: auto;
-  border: 2px solid #cccccc;
-}
-.vjs-tech-chromecast .vjs-tech-chromecast-poster-img.vjs-tech-chromecast-poster-img-empty {
-  width: 160px;
-  height: 90px;
-}
-.vjs-tech-chromecast .vjs-tech-chromecast-title-container {
-  position: absolute;
-  bottom: 50%;
-  margin-bottom: 100px;
-  color: #cccccc;
-  text-align: center;
-}
-.vjs-tech-chromecast .vjs-tech-chromecast-title {
-  font-size: 22px;
-}
-.vjs-tech-chromecast .vjs-tech-chromecast-title.vjs-tech-chromecast-title-empty {
-  display: none;
-}
-.vjs-tech-chromecast .vjs-tech-chromecast-subtitle {
-  font-size: 18px;
-  padding-top: 0.5em;
-}
-.vjs-tech-chromecast .vjs-tech-chromecast-subtitle.vjs-tech-chromecast-subtitle-empty {
-  display: none;
-}
+.vjs-chromecast-button .vjs-icon-placeholder{background:url("ic_cast_white_24dp.png") center center no-repeat;background-size:contain;display:inline-block;width:12px;height:12px}.vjs-chromecast-button:hover{cursor:pointer}.vjs-chromecast-button:hover .vjs-icon-placeholder{background-image:url("ic_cast_white_24dp.png")}.vjs-chromecast-button.vjs-chromecast-casting-state .vjs-icon-placeholder{background-image:url("ic_cast_connected_white_24dp.png")}.vjs-chromecast-button.vjs-chromecast-casting-state:hover .vjs-icon-placeholder{background-image:url("ic_cast_connected_white_24dp.png")}.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden){display:flex;align-items:center;width:auto;padding:0 4px}.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden) .vjs-chromecast-button-label{flex-grow:1;margin-left:4px}.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden) .vjs-icon-placeholder{flex-grow:1}.vjs-tech-chromecast{display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.vjs-tech-chromecast .vjs-tech-chromecast-poster::after{content:" ";display:block;height:2px;width:100px;background-color:#ccc;position:absolute;left:calc(50% - 50px)}.vjs-tech-chromecast .vjs-tech-chromecast-poster-img{max-height:180px;width:auto;border:2px solid #ccc}.vjs-tech-chromecast .vjs-tech-chromecast-poster-img.vjs-tech-chromecast-poster-img-empty{width:160px;height:90px}.vjs-tech-chromecast .vjs-tech-chromecast-title-container{position:absolute;bottom:50%;margin-bottom:100px;color:#ccc;text-align:center}.vjs-tech-chromecast .vjs-tech-chromecast-title{font-size:22px}.vjs-tech-chromecast .vjs-tech-chromecast-title.vjs-tech-chromecast-title-empty{display:none}.vjs-tech-chromecast .vjs-tech-chromecast-subtitle{font-size:18px;padding-top:.5em}.vjs-tech-chromecast .vjs-tech-chromecast-subtitle.vjs-tech-chromecast-subtitle-empty{display:none}

public/_player/videojs/dist/videojs-chromecast.min.css

@@ -1 +1 @@
-.vjs-chromecast-button .vjs-icon-placeholder{background:url(ic_cast_white_24dp.png) center center no-repeat;background-size:contain;display:inline-block;width:20px;height:20px}.vjs-chromecast-button:hover{cursor:pointer}.vjs-chromecast-button:hover .vjs-icon-placeholder{background-image:url(ic_cast_white_24dp.png)}.vjs-chromecast-button.vjs-chromecast-casting-state .vjs-icon-placeholder{background-image:url(ic_cast_connected_white_24dp.png)}.vjs-chromecast-button.vjs-chromecast-casting-state:hover .vjs-icon-placeholder{background-image:url(ic_cast_connected_white_24dp.png)}.vjs-tech-chromecast{display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.vjs-tech-chromecast .vjs-tech-chromecast-poster::after{content:' ';display:block;height:2px;width:100px;background-color:#ccc;position:absolute;left:calc(50% - 50px)}.vjs-tech-chromecast .vjs-tech-chromecast-poster-img{max-height:180px;width:auto;border:2px solid #ccc}.vjs-tech-chromecast .vjs-tech-chromecast-poster-img.vjs-tech-chromecast-poster-img-empty{width:160px;height:90px}.vjs-tech-chromecast .vjs-tech-chromecast-title-container{position:absolute;bottom:50%;margin-bottom:100px;color:#ccc;text-align:center}.vjs-tech-chromecast .vjs-tech-chromecast-title{font-size:22px}.vjs-tech-chromecast .vjs-tech-chromecast-title.vjs-tech-chromecast-title-empty{display:none}.vjs-tech-chromecast .vjs-tech-chromecast-subtitle{font-size:18px;padding-top:.5em}.vjs-tech-chromecast .vjs-tech-chromecast-subtitle.vjs-tech-chromecast-subtitle-empty{display:none}
+.vjs-chromecast-button .vjs-icon-placeholder{background:url("ic_cast_white_24dp.png") center center no-repeat;background-size:contain;display:inline-block;width:12px;height:12px}.vjs-chromecast-button:hover{cursor:pointer}.vjs-chromecast-button:hover .vjs-icon-placeholder{background-image:url("ic_cast_white_24dp.png")}.vjs-chromecast-button.vjs-chromecast-casting-state .vjs-icon-placeholder{background-image:url("ic_cast_connected_white_24dp.png")}.vjs-chromecast-button.vjs-chromecast-casting-state:hover .vjs-icon-placeholder{background-image:url("ic_cast_connected_white_24dp.png")}.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden){display:flex;align-items:center;width:auto;padding:0 4px}.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden) .vjs-chromecast-button-label{flex-grow:1;margin-left:4px}.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden) .vjs-icon-placeholder{flex-grow:1}.vjs-tech-chromecast{display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.vjs-tech-chromecast .vjs-tech-chromecast-poster::after{content:" ";display:block;height:2px;width:100px;background-color:#ccc;position:absolute;left:calc(50% - 50px)}.vjs-tech-chromecast .vjs-tech-chromecast-poster-img{max-height:180px;width:auto;border:2px solid #ccc}.vjs-tech-chromecast .vjs-tech-chromecast-poster-img.vjs-tech-chromecast-poster-img-empty{width:160px;height:90px}.vjs-tech-chromecast .vjs-tech-chromecast-title-container{position:absolute;bottom:50%;margin-bottom:100px;color:#ccc;text-align:center}.vjs-tech-chromecast .vjs-tech-chromecast-title{font-size:22px}.vjs-tech-chromecast .vjs-tech-chromecast-title.vjs-tech-chromecast-title-empty{display:none}.vjs-tech-chromecast .vjs-tech-chromecast-subtitle{font-size:18px;padding-top:.5em}.vjs-tech-chromecast .vjs-tech-chromecast-subtitle.vjs-tech-chromecast-subtitle-empty{display:none}

public/_player/videojs/dist/videojs-license.js

@@ -1,459 +1,340 @@
 /*! @name videojs-license @version 0.1.0 @license MIT */
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js'), require('global/document')) :
-	typeof define === 'function' && define.amd ? define(['video.js', 'global/document'], factory) :
-	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsLicense = factory(global.videojs, global.document));
-}(this, (function (videojs, document) { 'use strict';
-
-	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-	var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
-	var document__default = /*#__PURE__*/_interopDefaultLegacy(document);
-
-	function createCommonjsModule(fn, basedir, module) {
-		return module = {
-		  path: basedir,
-		  exports: {},
-		  require: function (path, base) {
-	      return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
-	    }
-		}, fn(module, module.exports), module.exports;
-	}
-
-	function commonjsRequire () {
-		throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-	}
-
-	var assertThisInitialized = createCommonjsModule(function (module) {
-	  function _assertThisInitialized(self) {
-	    if (self === void 0) {
-	      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-	    }
-
-	    return self;
-	  }
-
-	  module.exports = _assertThisInitialized;
-	  module.exports["default"] = module.exports, module.exports.__esModule = true;
-	});
-
-	var setPrototypeOf = createCommonjsModule(function (module) {
-	  function _setPrototypeOf(o, p) {
-	    module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-	      o.__proto__ = p;
-	      return o;
-	    };
-
-	    module.exports["default"] = module.exports, module.exports.__esModule = true;
-	    return _setPrototypeOf(o, p);
-	  }
-
-	  module.exports = _setPrototypeOf;
-	  module.exports["default"] = module.exports, module.exports.__esModule = true;
-	});
-
-	var inheritsLoose = createCommonjsModule(function (module) {
-	  function _inheritsLoose(subClass, superClass) {
-	    subClass.prototype = Object.create(superClass.prototype);
-	    subClass.prototype.constructor = subClass;
-	    setPrototypeOf(subClass, superClass);
-	  }
-
-	  module.exports = _inheritsLoose;
-	  module.exports["default"] = module.exports, module.exports.__esModule = true;
-	});
-
-	var version = "0.1.0";
-
-	var Plugin = videojs__default['default'].getPlugin('plugin');
-	var Component = videojs__default['default'].getComponent('Component');
-	var Button = videojs__default['default'].getComponent('MenuButton'); // Default options for the plugin.
-
-	var defaults = {
-	  license: 'none',
-	  title: '',
-	  author: '',
-	  languages: {
-	    license: 'License',
-	    loading: 'Loading'
-	  }
-	};
-	/**
-	 * An advanced Video.js plugin. For more information on the API
-	 *
-	 * See: https://blog.videojs.com/feature-spotlight-advanced-plugins/
-	 */
-
-	var License = /*#__PURE__*/function (_Plugin) {
-	  inheritsLoose(License, _Plugin);
-
-	  /**
-	   * Create a License plugin instance.
-	   *
-	   * @param  {Player} player
-	   *         A Video.js Player instance.
-	   *
-	   * @param  {Object} [options]
-	   *         An optional options object.
-	   *
-	   *         While not a core part of the Video.js plugin architecture, a
-	   *         second argument of options is a convenient way to accept inputs
-	   *         from your plugin's caller.
-	   */
-	  function License(player, options) {
-	    var _this;
-
-	    // the parent class will add player under this.player
-	    _this = _Plugin.call(this, player) || this;
-	    _this.playerId = _this.player.id();
-	    _this.options = videojs__default['default'].mergeOptions(defaults, options);
-
-	    if (options.license === 'none') {
-	      return assertThisInitialized(_this);
-	    }
-
-	    _this.player.ready(function () {
-	      _this.player.addClass('vjs-license');
-
-	      _this.buildUI();
-
-	      if (videojs__default['default'].browser.IS_IOS || videojs__default['default'].browser.IS_ANDROID) {
-	        _this.mobileBuildUI();
-	      }
-	    }); // close the menu if open on userinactive
-
-
-	    _this.player.on('userinactive', function () {
-	      document__default['default'].getElementById(_this.playerId).querySelectorAll('.vjs-menu').forEach(function (element) {
-	        element.classList.remove('vjs-lock-open');
-	      });
-	    }); // close the menu if anywhere in the player is clicked
-
-
-	    _this.player.on('click', function (evt) {
-	      if (evt.target.tagName === 'VIDEO') {
-	        document__default['default'].getElementById(_this.playerId).querySelectorAll('.vjs-menu').forEach(function (element) {
-	          element.classList.remove('vjs-lock-open');
-	        });
-	      }
-	    });
-
-	    _this.player.on('loadstart', function (_event) {
-	      _this.removeElementsByClass('vjs-license-clear');
-
-	      if (videojs__default['default'].browser.IS_IOS || videojs__default['default'].browser.IS_ANDROID) {
-	        _this.mobileBuildTopLevelMenu();
-	      } else {
-	        _this.buildTopLevelMenu();
-	      }
-	    });
-
-	    return _this;
-	  }
-	  /**
-	   * Add the menu ui button to the controlbar
-	   */
-
-
-	  var _proto = License.prototype;
-
-	  _proto.buildUI = function buildUI() {
-	    var playerId = this.playerId;
-	    var that = this;
-	    /**
-	     * LicenseMenuButton
-	     */
-
-	    var LicenseMenuButton = /*#__PURE__*/function (_Button) {
-	      inheritsLoose(LicenseMenuButton, _Button);
-
-	      /**
-	       * Contructor
-	       *
-	       * @param {*} player videojs player instance
-	       * @param {*} options videojs player options
-	       */
-	      function LicenseMenuButton(player, options) {
-	        var _this2;
-
-	        _this2 = _Button.call(this, player, options) || this;
-
-	        _this2.addClass('vjs-license');
-
-	        _this2.controlText(that.options.languages.loading);
-
-	        player.one('canplaythrough', function (_event) {
-	          _this2.controlText(that.options.languages.settings);
-	        });
-	        _this2.menu.contentEl_.id = playerId + '-vjs-license-default';
-	        return _this2;
-	      }
-	      /**
-	       * Handle click
-	       */
-
-
-	      var _proto2 = LicenseMenuButton.prototype;
-
-	      _proto2.handleClick = function handleClick() {
-	        if (videojs__default['default'].browser.IS_IOS || videojs__default['default'].browser.IS_ANDROID) {
-	          this.player.getChild('licenseMenuMobileModal').el().style.display = 'block';
-	        } else {
-	          this.el().classList.toggle('vjs-toogle-btn');
-	          this.menu.el().classList.toggle('vjs-lock-open');
-	        }
-	      };
-
-	      return LicenseMenuButton;
-	    }(Button);
-
-	    videojs__default['default'].registerComponent('licenseMenuButton', LicenseMenuButton);
-	    this.player.getChild('controlBar').addChild('licenseMenuButton');
-
-	    if (this.player.getChild('controlBar').getChild('fullscreenToggle')) {
-	      this.player.getChild('controlBar').el().insertBefore(this.player.getChild('controlBar').getChild('licenseMenuButton').el(), this.player.getChild('controlBar').getChild('fullscreenToggle').el());
-	    }
-	  }
-	  /**
-	   *
-	   * This is just build the top level menu no sub menus
-	   */
-	  ;
-
-	  _proto.buildTopLevelMenu = function buildTopLevelMenu() {
-	    var settingsButton = this.player.getChild('controlBar').getChild('licenseMenuButton'); // settingsButton.addClass('vjs-license-is-loaded');
-
-	    var main = settingsButton.menu.contentEl_; // Empty the main menu div to repopulate
-
-	    main.innerHTML = '';
-	    main.classList.add('vjs-license-top-level'); // Start building new list items
-
-	    var menuTitle = document__default['default'].createElement('li');
-	    menuTitle.className = 'vjs-license-top-level-header';
-	    var menuTitleInner = document__default['default'].createElement('span');
-	    menuTitleInner.innerHTML = 'About';
-	    menuTitleInner.className = 'vjs-license-top-level-header-titel';
-	    menuTitle.appendChild(menuTitleInner);
-	    main.appendChild(menuTitle);
-	    var itemTitel = document__default['default'].createElement('li');
-	    itemTitel.innerHTML = this.buildItemTitel();
-	    itemTitel.className = 'vjs-license-top-level-item';
-	    main.appendChild(itemTitel);
-
-	    if (this.options.author) {
-	      var itemAuthor = document__default['default'].createElement('li');
-	      itemAuthor.innerHTML = this.buildItemAuthor();
-	      itemAuthor.className = 'vjs-license-top-level-item';
-	      main.appendChild(itemAuthor);
-	    }
-
-	    var itemLicense = document__default['default'].createElement('li');
-	    itemLicense.innerHTML = this.buildItemLicense();
-	    itemLicense.className = 'vjs-license-top-level-item';
-	    main.appendChild(itemLicense);
-	  }
-	  /**
-	   * Add the menu ui button to the controlbar
-	   */
-	  ;
-
-	  _proto.mobileBuildUI = function mobileBuildUI() {
-	    /**
-	     * bla
-	     */
-	    var LicenseMenuMobileModal = /*#__PURE__*/function (_Component) {
-	      inheritsLoose(LicenseMenuMobileModal, _Component);
-
-	      /**
-	       * Contructor
-	       *
-	       * @param {*} player videojs player instance
-	       * @param {*} options videojs player options
-	       */
-	      function LicenseMenuMobileModal(player, options) {
-	        return _Component.call(this, player, options) || this;
-	      }
-	      /**
-	       * Creates an HTML element
-	       *
-	       * @return {Object} HTML element
-	       */
-
-
-	      var _proto3 = LicenseMenuMobileModal.prototype;
-
-	      _proto3.createEl = function createEl() {
-	        return videojs__default['default'].createEl('div', {
-	          className: 'vjs-license-mobile'
-	        });
-	      };
-
-	      return LicenseMenuMobileModal;
-	    }(Component);
-
-	    videojs__default['default'].registerComponent('licenseMenuMobileModal', LicenseMenuMobileModal);
-	    videojs__default['default'].dom.prependTo(this.player.addChild('licenseMenuMobileModal').el(), document__default['default'].body);
-	  }
-	  /**
-	   * Add the menu ui button to the controlbar
-	   */
-	  ;
-
-	  _proto.mobileBuildTopLevelMenu = function mobileBuildTopLevelMenu() {
-	    var _this3 = this;
-
-	    var settingsButton = this.player.getChild('licenseMenuMobileModal');
-	    var menuTopLevel = document__default['default'].createElement('ul');
-	    menuTopLevel.className = 'vjs-license-mob-top-level vjs-setting-menu-clear';
-	    settingsButton.el().appendChild(menuTopLevel); // Empty the main menu div to repopulate
-
-	    var menuTitle = document__default['default'].createElement('li');
-	    menuTitle.innerHTML = 'About';
-	    menuTitle.className = 'vjs-setting-menu-mobile-top-header';
-	    menuTopLevel.appendChild(menuTitle);
-	    var itemTitel = document__default['default'].createElement('li');
-	    itemTitel.innerHTML = this.buildItemTitel();
-	    itemTitel.className = 'vjs-license-top-level-item';
-
-	    if (this.options.author) {
-	      var itemAuthor = document__default['default'].createElement('li');
-	      itemAuthor.innerHTML = this.buildItemAuthor();
-	      itemAuthor.className = 'vjs-license-top-level-item';
-	    }
-
-	    var itemLicense = document__default['default'].createElement('li');
-	    itemLicense.innerHTML = this.buildItemLicense();
-	    itemLicense.className = 'vjs-license-top-level-item';
-	    var menuClose = document__default['default'].createElement('li');
-	    menuClose.innerHTML = 'Close';
-	    menuClose.className = 'setting-menu-footer-default';
-
-	    menuClose.onclick = function (e) {
-	      _this3.player.getChild('settingsMenuMobileModal').el().style.display = 'none';
-	    };
-
-	    menuTopLevel.appendChild(menuClose);
-	  }
-	  /**
-	   * Add the menu ui button to the controlbar
-	   *
-	   * @return {string} Returns license text
-	   */
-	  ;
-
-	  _proto.buildItemTitel = function buildItemTitel() {
-	    var titel = '';
-
-	    if (this.options.title) {
-	      titel = "" + this.options.title;
-	    }
-
-	    return 'Title: ' + titel;
-	  }
-	  /**
-	   * Add the menu ui button to the controlbar
-	   *
-	   * @return {string} Returns license text
-	   */
-	  ;
-
-	  _proto.buildItemAuthor = function buildItemAuthor() {
-	    var author = '';
-
-	    if (this.options.author) {
-	      author = " by " + this.options.author;
-	    }
-
-	    return 'Author: ' + author;
-	  }
-	  /**
-	   * Add the menu ui button to the controlbar
-	   *
-	   * @return {string} Returns license text
-	   */
-	  ;
-
-	  _proto.buildItemLicense = function buildItemLicense() {
-	    var license = '';
-	    var reVersion = new RegExp('[0-9]+.[0-9]+$');
-	    var version = '4.0';
-	    var matches = this.options.license.match(reVersion);
-
-	    if (matches !== null) {
-	      version = matches[0];
-	    }
-
-	    var which = this.options.license.replace(reVersion, '').trim();
-	    var deed = null;
-
-	    switch (which) {
-	      case 'CC0':
-	        deed = 'https://creativecommons.org/licenses/zero/1.0/';
-	        break;
-
-	      case 'CC BY':
-	        deed = "https://creativecommons.org/licenses/by/" + version + "/";
-	        break;
-
-	      case 'CC BY-SA':
-	        deed = "https://creativecommons.org/licenses/by-sa/" + version + "/";
-	        break;
-
-	      case 'CC BY-NC':
-	        deed = "https://creativecommons.org/licenses/by-nc/" + version + "/";
-	        break;
-
-	      case 'CC BY-NC-SA':
-	        deed = "https://creativecommons.org/licenses/by-nc-sa/" + version + "/";
-	        break;
-
-	      case 'CC BY-ND':
-	        deed = "https://creativecommons.org/licenses/by-nd/" + version + "/";
-	        break;
-
-	      case 'CC BY-NC-ND':
-	        deed = "https://creativecommons.org/licenses/by-nc-nd/" + version + "/";
-	        break;
-	    }
-
-	    if (deed) {
-	      license = "<a href=\"" + deed + "\" onclick=\"window.open('" + deed + "')\" target=\"_blank\" rel=\"noopener\">" + this.options.license + "</a>";
-	    } else {
-	      license = this.options.license;
-	    }
-
-	    return 'License: ' + license;
-	  }
-	  /**
-	   *
-	   * Helper class to clear menu items before rebuild
-	   *
-	   * @param {*} className Name of a class
-	   */
-	  ;
-
-	  _proto.removeElementsByClass = function removeElementsByClass(className) {
-	    // Need to prevent the menu from not showing sometimes
-	    document__default['default'].querySelectorAll('.vjs-sm-top-level').forEach(function (element) {
-	      element.classList.remove('vjs-hidden');
-	    });
-	    var elements = document__default['default'].getElementsByClassName(className);
-
-	    while (elements.length > 0) {
-	      elements[0].parentNode.removeChild(elements[0]);
-	    }
-	  };
-
-	  return License;
-	}(Plugin); // Define default values for the plugin's `state` object here.
-
-
-	License.defaultState = {}; // Include the version number.
-
-	License.VERSION = version; // Register the plugin with video.js.
-
-	videojs__default['default'].registerPlugin('license', License);
-
-	return License;
-
-})));
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
+  typeof define === 'function' && define.amd ? define(['video.js'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsLicense = 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);
+
+  var version = "0.1.0";
+
+  const Plugin = videojs__default["default"].getPlugin('plugin');
+  const Component = videojs__default["default"].getComponent('Component');
+  const Button = videojs__default["default"].getComponent('MenuButton');
+
+  // Default options for the plugin.
+  const defaults = {
+    license: 'none',
+    title: '',
+    author: '',
+    languages: {
+      license: 'License',
+      loading: 'Loading'
+    }
+  };
+
+  /**
+   * An advanced Video.js plugin. For more information on the API
+   *
+   * See: https://blog.videojs.com/feature-spotlight-advanced-plugins/
+   */
+  class License extends Plugin {
+    /**
+     * Create a License plugin instance.
+     *
+     * @param  {Player} player
+     *         A Video.js Player instance.
+     *
+     * @param  {Object} [options]
+     *         An optional options object.
+     *
+     *         While not a core part of the Video.js plugin architecture, a
+     *         second argument of options is a convenient way to accept inputs
+     *         from your plugin's caller.
+     */
+    constructor(player, options) {
+      // the parent class will add player under this.player
+      super(player);
+      this.playerId = this.player.id();
+      this.options = videojs__default["default"].mergeOptions(defaults, options);
+      if (options.license === 'none') {
+        return;
+      }
+      player.addClass('vjs-license');
+      this.buildUI();
+      if (videojs__default["default"].browser.IS_IOS || videojs__default["default"].browser.IS_ANDROID) {
+        this.mobileBuildUI();
+      }
+
+      // close the menu if open on userinactive
+      this.player.on('userinactive', () => {
+        document.getElementById(this.playerId).querySelectorAll('.vjs-menu').forEach(element => {
+          element.classList.remove('vjs-lock-open');
+        });
+      });
+
+      // close the menu if anywhere in the player is clicked
+      this.player.on('click', evt => {
+        if (evt.target.tagName === 'VIDEO') {
+          document.getElementById(this.playerId).querySelectorAll('.vjs-menu').forEach(element => {
+            element.classList.remove('vjs-lock-open');
+          });
+        }
+      });
+      this.player.on('loadstart', _event => {
+        this.removeElementsByClass('vjs-license-clear');
+        if (videojs__default["default"].browser.IS_IOS || videojs__default["default"].browser.IS_ANDROID) {
+          this.mobileBuildTopLevelMenu();
+        } else {
+          this.buildTopLevelMenu();
+        }
+      });
+    }
+
+    /**
+     * Add the menu ui button to the controlbar
+     */
+    buildUI() {
+      const playerId = this.playerId;
+      const that = this;
+
+      /**
+       * LicenseMenuButton
+       */
+      class LicenseMenuButton extends Button {
+        /**
+         * Contructor
+         *
+         * @param {*} player videojs player instance
+         * @param {*} options videojs player options
+         */
+        constructor(player, options) {
+          super(player, options);
+          this.addClass('vjs-license');
+          this.controlText(that.options.languages.loading);
+          player.one('canplaythrough', _event => {
+            this.controlText(that.options.languages.settings);
+          });
+          this.menu.contentEl_.id = playerId + '-vjs-license-default';
+        }
+
+        /**
+         * Handle click
+         */
+        handleClick() {
+          if (videojs__default["default"].browser.IS_IOS || videojs__default["default"].browser.IS_ANDROID) {
+            this.player.getChild('licenseMenuMobileModal').el().style.display = 'block';
+          } else {
+            this.el().classList.toggle('vjs-toogle-btn');
+            this.menu.el().classList.toggle('vjs-lock-open');
+          }
+        }
+      }
+      videojs__default["default"].registerComponent('licenseMenuButton', LicenseMenuButton);
+      this.player.getChild('controlBar').addChild('licenseMenuButton');
+      if (this.player.getChild('controlBar').getChild('fullscreenToggle')) {
+        this.player.getChild('controlBar').el().insertBefore(this.player.getChild('controlBar').getChild('licenseMenuButton').el(), this.player.getChild('controlBar').getChild('fullscreenToggle').el());
+      }
+    }
+
+    /**
+     *
+     * This is just build the top level menu no sub menus
+     */
+    buildTopLevelMenu() {
+      const settingsButton = this.player.getChild('controlBar').getChild('licenseMenuButton');
+
+      // settingsButton.addClass('vjs-license-is-loaded');
+
+      const main = settingsButton.menu.contentEl_;
+
+      // Empty the main menu div to repopulate
+      main.innerHTML = '';
+      main.classList.add('vjs-license-top-level');
+
+      // Start building new list items
+      const menuTitle = document.createElement('li');
+      menuTitle.className = 'vjs-license-top-level-header';
+      const menuTitleInner = document.createElement('span');
+      menuTitleInner.innerHTML = 'About';
+      menuTitleInner.className = 'vjs-license-top-level-header-titel';
+      menuTitle.appendChild(menuTitleInner);
+      main.appendChild(menuTitle);
+      const itemTitel = document.createElement('li');
+      itemTitel.innerHTML = this.buildItemTitel();
+      itemTitel.className = 'vjs-license-top-level-item';
+      main.appendChild(itemTitel);
+      if (this.options.author) {
+        const itemAuthor = document.createElement('li');
+        itemAuthor.innerHTML = this.buildItemAuthor();
+        itemAuthor.className = 'vjs-license-top-level-item';
+        main.appendChild(itemAuthor);
+      }
+      const itemLicense = document.createElement('li');
+      itemLicense.innerHTML = this.buildItemLicense();
+      itemLicense.className = 'vjs-license-top-level-item';
+      main.appendChild(itemLicense);
+    }
+
+    /**
+     * Add the menu ui button to the controlbar
+     */
+    mobileBuildUI() {
+      /**
+       * bla
+       */
+      class LicenseMenuMobileModal extends Component {
+        /**
+         * Contructor
+         *
+         * @param {*} player videojs player instance
+         * @param {*} options videojs player options
+         */
+        constructor(player, options) {
+          super(player, options);
+        }
+
+        /**
+         * Creates an HTML element
+         *
+         * @return {Object} HTML element
+         */
+        createEl() {
+          return videojs__default["default"].createEl('div', {
+            className: 'vjs-license-mobile'
+          });
+        }
+      }
+      videojs__default["default"].registerComponent('licenseMenuMobileModal', LicenseMenuMobileModal);
+      videojs__default["default"].dom.prependTo(this.player.addChild('licenseMenuMobileModal').el(), document.body);
+    }
+
+    /**
+     * Add the menu ui button to the controlbar
+     */
+    mobileBuildTopLevelMenu() {
+      const settingsButton = this.player.getChild('licenseMenuMobileModal');
+      const menuTopLevel = document.createElement('ul');
+      menuTopLevel.className = 'vjs-license-mob-top-level vjs-setting-menu-clear';
+      settingsButton.el().appendChild(menuTopLevel);
+
+      // Empty the main menu div to repopulate
+      const menuTitle = document.createElement('li');
+      menuTitle.innerHTML = 'About';
+      menuTitle.className = 'vjs-setting-menu-mobile-top-header';
+      menuTopLevel.appendChild(menuTitle);
+      const itemTitel = document.createElement('li');
+      itemTitel.innerHTML = this.buildItemTitel();
+      itemTitel.className = 'vjs-license-top-level-item';
+      if (this.options.author) {
+        const itemAuthor = document.createElement('li');
+        itemAuthor.innerHTML = this.buildItemAuthor();
+        itemAuthor.className = 'vjs-license-top-level-item';
+      }
+      const itemLicense = document.createElement('li');
+      itemLicense.innerHTML = this.buildItemLicense();
+      itemLicense.className = 'vjs-license-top-level-item';
+      const menuClose = document.createElement('li');
+      menuClose.innerHTML = 'Close';
+      menuClose.className = 'setting-menu-footer-default';
+      menuClose.onclick = e => {
+        this.player.getChild('settingsMenuMobileModal').el().style.display = 'none';
+      };
+      menuTopLevel.appendChild(menuClose);
+    }
+
+    /**
+     * Add the menu ui button to the controlbar
+     *
+     * @return {string} Returns license text
+     */
+    buildItemTitel() {
+      let titel = '';
+      if (this.options.title) {
+        titel = `${this.options.title}`;
+      }
+      return 'Title: ' + titel;
+    }
+
+    /**
+     * Add the menu ui button to the controlbar
+     *
+     * @return {string} Returns license text
+     */
+    buildItemAuthor() {
+      let author = '';
+      if (this.options.author) {
+        author = ` by ${this.options.author}`;
+      }
+      return 'Author: ' + author;
+    }
+
+    /**
+     * Add the menu ui button to the controlbar
+     *
+     * @return {string} Returns license text
+     */
+    buildItemLicense() {
+      let license = '';
+      const reVersion = new RegExp('[0-9]+.[0-9]+$');
+      let version = '4.0';
+      const matches = this.options.license.match(reVersion);
+      if (matches !== null) {
+        version = matches[0];
+      }
+      const which = this.options.license.replace(reVersion, '').trim();
+      let deed = null;
+      switch (which) {
+        case 'CC0':
+          deed = 'https://creativecommons.org/licenses/zero/1.0/';
+          break;
+        case 'CC BY':
+          deed = `https://creativecommons.org/licenses/by/${version}/`;
+          break;
+        case 'CC BY-SA':
+          deed = `https://creativecommons.org/licenses/by-sa/${version}/`;
+          break;
+        case 'CC BY-NC':
+          deed = `https://creativecommons.org/licenses/by-nc/${version}/`;
+          break;
+        case 'CC BY-NC-SA':
+          deed = `https://creativecommons.org/licenses/by-nc-sa/${version}/`;
+          break;
+        case 'CC BY-ND':
+          deed = `https://creativecommons.org/licenses/by-nd/${version}/`;
+          break;
+        case 'CC BY-NC-ND':
+          deed = `https://creativecommons.org/licenses/by-nc-nd/${version}/`;
+          break;
+      }
+      if (deed) {
+        license = `<a href='${deed}' onclick='window.open('${deed}')' target='_blank' rel='noopener'>${this.options.license}</a>`;
+      } else {
+        license = this.options.license;
+      }
+      return 'License: ' + license;
+    }
+
+    /**
+     *
+     * Helper class to clear menu items before rebuild
+     *
+     * @param {*} className Name of a class
+     */
+    removeElementsByClass(className) {
+      // Need to prevent the menu from not showing sometimes
+      document.querySelectorAll('.vjs-sm-top-level').forEach(element => {
+        element.classList.remove('vjs-hidden');
+      });
+      const elements = document.getElementsByClassName(className);
+      while (elements.length > 0) {
+        elements[0].parentNode.removeChild(elements[0]);
+      }
+    }
+  }
+
+  // Define default values for the plugin's `state` object here.
+  License.defaultState = {};
+
+  // Include the version number.
+  License.VERSION = version;
+
+  // Register the plugin with video.js.
+  videojs__default["default"].registerPlugin('license', License);
+
+  return License;
+
+}));

public/_player/videojs/player.html

@@ -83,9 +83,6 @@
 		responsive: true,
 		fluid: true,
 		sources: [{ src: window.location.origin + '/' + playerConfig.source, type: 'application/x-mpegURL' }],
-		plugins: {
-			license: playerConfig.license
-		}
 	};
 
 	if (playerConfig.chromecast) {
@@ -132,6 +129,8 @@
 					},
 				],
 			});
+
+			player.license(playerConfig.license);
 		}
 
 		if (autoplay === true) {

public/_playersite/videojs.js

@@ -6,25 +6,32 @@ var config = {
 	liveui: true,
 	responsive: true,
 	fluid: true,
-	// Needed to append the url orgin in order for the source to properly pass to the cast device
-	sources: [{ src: playerConfig.source, type: 'application/x-mpegURL' }],
-	plugins: {
-		license: playerConfig.license,
-	},
+	// Needed to append the url origin in order for the source to properly pass to the cast device
+	sources: [{ src: window.location.origin + '/' + playerConfig.source, type: 'application/x-mpegURL' }],
+	plugins: {},
 };
 
 if (chromecast) {
 	config.techOrder = ['chromecast', 'html5'];
-	config.plugins.chromecast = {};
-}
-
-if (airplay) {
-	config.plugins.airPlay = {};
+	// Provide a default reciever application ID
+	config.plugins.chromecast = {
+		receiverApplicationId: 'CC1AD845',
+	};
 }
 
 var player = videojs('player', config);
 
 player.ready(function () {
+	if (chromecast) {
+		player.chromecast();
+	}
+
+	if (airplay) {
+		player.airPlay();
+	}
+
+	player.license(playerConfig.license);
+
 	if (playerConfig.logo.image.length != 0) {
 		var overlay = null;
 

src/misc/MultiSelect.js

@@ -15,16 +15,9 @@ const MenuProps = {
 
 export default function Component(props) {
 	return (
-		<FormControl variant="outlined" fullWidth>
+		<FormControl variant={props.variant} disabled={props.disabled} fullWidth>
 			<InputLabel>{props.label}</InputLabel>
-			<Select
-				multiple
-				value={props.value}
-				onChange={props.onChange}
-				input={<OutlinedInput />}
-				renderValue={(selected) => selected.join(', ')}
-				MenuProps={MenuProps}
-			>
+			<Select multiple value={props.value} onChange={props.onChange} input={<OutlinedInput />} renderValue={props.renderValue} MenuProps={MenuProps}>
 				{props.children}
 			</Select>
 		</FormControl>
@@ -32,7 +25,10 @@ export default function Component(props) {
 }
 
 Component.defaultProps = {
+	variant: 'outlined',
 	label: '',
 	value: [],
+	disabled: false,
+	renderValue: (selected) => selected.join(', '),
 	onChange: function (event) {},
 };

src/misc/coders/Decoders/audio/default.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: [],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/av1_cuvid.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-hwaccel', 'cuda', '-c:v', 'av1_cuvid'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/default.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: [],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/h264_cuvid.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'h264_cuvid'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/h264_mmal.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'h264_mmal'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/hevc_cuvid.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'hevc_cuvid'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/mjpeg_cuvid.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'mjpeg_cuvid'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/mpeg1_cuvid.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'mpeg1_cuvid'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/mpeg2_cuvid.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'mpeg2_cuvid'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/mpeg2_mmal.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'mpeg2_mmal'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/mpeg4_cuvid.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'mpeg4_cuvid'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/mpeg4_mmal.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'mpeg4_mmal'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/nvdec.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-hwaccel', 'cuda', '-hwaccel_output_format', 'cuda'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/vc1_cuvid.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'vc1_cuvid'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/vc1_mmal.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'vc1_mmal'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/videotoolbox.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-hwaccel', 'videotoolbox'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/vp8_cuvid.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'vp8_cuvid'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Decoders/video/vp9_cuvid.js

@@ -17,6 +17,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: ['-c:v', 'vp9_cuvid'],
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/audio/aac.js

@@ -27,6 +27,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/audio/aac_audiotoolbox.js

@@ -27,6 +27,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [['-vsync', 'drop']],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/audio/copy.js

@@ -15,6 +15,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/audio/mp3_libmp3lame.js

@@ -24,6 +24,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [['-vsync', 'drop']],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/audio/none.js

@@ -11,6 +11,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/audio/opus.js

@@ -44,6 +44,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [['-vsync', 'drop']],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/audio/opus_libopus.js

@@ -23,6 +23,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/audio/vorbis.js

@@ -23,6 +23,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [['-vsync', 'drop']],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/audio/vorbis_libvorbis.js

@@ -23,6 +23,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [['-vsync', 'drop']],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/av1_librav1e.js

@@ -78,6 +78,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/copy.js

@@ -11,6 +11,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/h264_libx264.js

@@ -71,6 +71,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/h264_nvenc.js

@@ -64,6 +64,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/h264_omx.js

@@ -47,6 +47,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/h264_v4l2m2m.js

@@ -125,6 +125,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/h264_vaapi.js

@@ -30,13 +30,12 @@ function createMapping(settings, stream, skills) {
 
 	const global = [];
 	const local = [];
+	const filter = [];
 
 	// https://trac.ffmpeg.org/wiki/Hardware/VAAPI
 	global.push(['-vaapi_device', '/dev/dri/renderD128']);
 
 	local.push(
-		'-vf',
-		'format=nv12,hwupload',
 		'-codec:v',
 		'h264_vaapi',
 		'-profile:v',
@@ -51,17 +50,18 @@ function createMapping(settings, stream, skills) {
 		`${settings.bitrate}k`,
 		'-r',
 		`${settings.fps}`,
-		'-g',
-		`${settings.gop}`
 	);
 
 	if (settings.gop !== 'auto') {
 		local.push('-g', `${Math.round(parseInt(settings.fps) * parseInt(settings.gop)).toFixed(0)}`);
 	}
 
+	filter.push('format=nv12', 'hwupload');
+
 	return {
 		global: global,
 		local: local,
+		filter: filter,
 	};
 }
 

src/misc/coders/Encoders/video/h264_videotoolbox.js

@@ -58,6 +58,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/hevc_libx265.js

@@ -71,6 +71,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/hevc_vaapi.js

@@ -30,13 +30,12 @@ function createMapping(settings, stream, skills) {
 
 	const global = [];
 	const local = [];
+	const filter = [];
 
 	// https://trac.ffmpeg.org/wiki/Hardware/VAAPI
 	global.push(['-vaapi_device', '/dev/dri/renderD128']);
 
 	local.push(
-		'-vf',
-		'format=nv12,hwupload',
 		'-codec:v',
 		'hevc_vaapi',
 		'-profile:v',
@@ -59,9 +58,12 @@ function createMapping(settings, stream, skills) {
 		local.push('-g', `${Math.round(parseInt(settings.fps) * parseInt(settings.gop)).toFixed(0)}`);
 	}
 
+	filter.push('format=nv12', 'hwupload');
+
 	return {
 		global: global,
 		local: local,
+		filter: filter,
 	};
 }
 

src/misc/coders/Encoders/video/hevc_videotoolbox.js

@@ -53,6 +53,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/none.js

@@ -11,6 +11,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/rawvideo.js

@@ -11,6 +11,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/vp9_libvpx.js

@@ -54,6 +54,7 @@ function createMapping(settings, stream, skills) {
 	const mapping = {
 		global: [],
 		local: local,
+		filter: [],
 	};
 
 	return mapping;

src/misc/coders/Encoders/video/vp9_vaapi.js

@@ -30,13 +30,12 @@ function createMapping(settings, stream, skills) {
 
 	const global = [];
 	const local = [];
+	const filter = [];
 
 	// https://trac.ffmpeg.org/wiki/Hardware/VAAPI
 	global.push(['-vaapi_device', '/dev/dri/renderD128']);
 
 	local.push(
-		'-vf',
-		'format=nv12,hwupload',
 		'-codec:v',
 		'vp9_vaapi',
 		'-profile:v',
@@ -52,16 +51,19 @@ function createMapping(settings, stream, skills) {
 		'-r',
 		`${settings.fps}`,
 		'-g',
-		`${settings.gop}`
+		`${settings.gop}`,
 	);
 
 	if (settings.gop !== 'auto') {
 		local.push('-g', `${Math.round(parseInt(settings.fps) * parseInt(settings.gop)).toFixed(0)}`);
 	}
 
+	filter.push('format=nv12', 'hwupload');
+
 	return {
 		global: global,
 		local: local,
+		filter: filter,
 	};
 }
 

src/utils/metadata.js

@@ -662,14 +662,17 @@ const createInputsOutputs = (sources, profiles, requireVideo = true) => {
 
 		const local = profile.video.encoder.mapping.local.slice();
 
-		if (profile.video.encoder.coder !== 'copy' && profile.video.filter.graph.length !== 0) {
-			// Check if there's already a video filter in the local mapping
-			let filterIndex = local.indexOf('-filter:v');
-			if (filterIndex !== -1) {
-				local[filterIndex + 1] += ',' + profile.video.filter.graph;
-			} else {
-				local.unshift('-filter:v', profile.video.filter.graph);
+		if (profile.video.encoder.coder !== 'copy' && (profile.video.filter.graph.length !== 0 || profile.video.encoder.mapping.filter.length !== 0)) {
+			let filter = profile.video.filter.graph;
+			if (profile.video.encoder.mapping.filter.length !== 0) {
+				if (filter.length !== 0) {
+					filter += ',';
+				}
+
+				filter += profile.video.encoder.mapping.filter.join(',');
 			}
+
+			local.unshift('-filter:v', filter);
 		}
 
 		const options = ['-map', index + ':' + stream.stream, ...local];
@@ -696,14 +699,17 @@ const createInputsOutputs = (sources, profiles, requireVideo = true) => {
 
 			const local = profile.audio.encoder.mapping.local.slice();
 
-			if (profile.audio.encoder.coder !== 'copy' && profile.audio.filter.graph.length !== 0) {
-				// Check if there's already a audio filter in the local mapping
-				let filterIndex = local.indexOf('-filter:a');
-				if (filterIndex !== -1) {
-					local[filterIndex + 1] += ',' + profile.audio.filter.graph;
-				} else {
-					local.unshift('-filter:a', profile.audio.filter.graph);
+			if (profile.audio.encoder.coder !== 'copy' && (profile.audio.filter.graph.length !== 0 || profile.audio.encoder.mapping.filter.length !== 0)) {
+				let filter = profile.audio.filter.graph;
+				if (profile.audio.encoder.mapping.filter.length !== 0) {
+					if (filter.length !== 0) {
+						filter += ',';
+					}
+
+					filter += profile.audio.encoder.mapping.filter.join(',');
 				}
+
+				local.unshift('-filter:a', filter);
 			}
 
 			options.push('-map', index + ':' + stream.stream, ...local);
@@ -844,11 +850,13 @@ const initProfile = (initialProfile) => {
 		profile.video.encoder.mapping = {
 			global: [],
 			local: profile.video.encoder.mapping,
+			filter: [],
 		};
 	} else {
 		profile.video.encoder.mapping = {
 			global: [],
 			local: [],
+			filter: [],
 			...profile.video.encoder.mapping,
 		};
 	}
@@ -864,11 +872,13 @@ const initProfile = (initialProfile) => {
 		profile.video.decoder.mapping = {
 			global: [],
 			local: profile.video.decoder.mapping,
+			filter: [],
 		};
 	} else {
 		profile.video.decoder.mapping = {
 			global: [],
 			local: [],
+			filter: [],
 			...profile.video.decoder.mapping,
 		};
 	}
@@ -899,11 +909,13 @@ const initProfile = (initialProfile) => {
 		profile.audio.encoder.mapping = {
 			global: [],
 			local: profile.audio.encoder.mapping,
+			filter: [],
 		};
 	} else {
 		profile.audio.encoder.mapping = {
 			global: [],
 			local: [],
+			filter: [],
 			...profile.audio.encoder.mapping,
 		};
 	}
@@ -919,11 +931,13 @@ const initProfile = (initialProfile) => {
 		profile.audio.decoder.mapping = {
 			global: [],
 			local: profile.audio.decoder.mapping,
+			filter: [],
 		};
 	} else {
 		profile.audio.decoder.mapping = {
 			global: [],
 			local: [],
+			filter: [],
 			...profile.audio.decoder.mapping,
 		};
 	}

src/utils/restreamer.js

@@ -2247,6 +2247,7 @@ class Restreamer {
 			player: 'videojs',
 			playersite: false,
 			channelid: 'current',
+			channel_list: this.ListChannels().map((c) => c.channelid),
 			title: 'restreamer',
 			share: true,
 			support: true,
@@ -2311,7 +2312,8 @@ class Restreamer {
 			channel = this.GetChannel(this.GetCurrentChannelID());
 		}
 
-		const channels = this.ListChannels();
+		// filter channels based on the main channel and additional channels
+		const channels = this.ListChannels().filter((c) => settings.channel_list.indexOf(c.channelid) !== -1 || c.channelid === channel.channelid);
 
 		// Handlebars function ifEquals
 		Handlebars.registerHelper('ifEquals', function (arg1, arg2, options) {

src/views/Edit/Summary.js

@@ -37,7 +37,7 @@ export default function Summary(props) {
 		const s = Sources.Get(source.type);
 		if (s !== null) {
 			name = s.name;
-			address = stream.url.replace(/^playout:/, '');
+			address = decodeURIComponent(stream.url.replace(/^playout:/, ''));
 
 			showEncoding = true;
 		}

src/views/Playersite.js

@@ -14,6 +14,11 @@ import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
 
 import * as M from '../utils/metadata';
 import playerSiteThumb from '../assets/images/playersite.png';
@@ -23,6 +28,8 @@ import Dialog from '../misc/modals/Dialog';
 import Filesize from '../misc/Filesize';
 import FormInlineButton from '../misc/FormInlineButton';
 import H from '../utils/help';
+import MultiSelect from '../misc/MultiSelect';
+import MultiSelectOption from '../misc/MultiSelectOption';
 import NotifyContext from '../contexts/Notify';
 import Paper from '../misc/Paper';
 import PaperHeader from '../misc/PaperHeader';
@@ -49,6 +56,61 @@ const imageTypes = [
 
 const templateTypes = [{ mimetype: 'text/html', extension: 'html', maxSize: 500 * 1024 }];
 
+function CheckboxList(props) {
+	const [$checked, setChecked] = React.useState(props.selected);
+
+	const handleToggle = (value) => () => {
+		const currentIndex = $checked.indexOf(value);
+		const newChecked = [...$checked];
+
+		if (currentIndex === -1) {
+			newChecked.push(value);
+		} else {
+			newChecked.splice(currentIndex, 1);
+		}
+
+		setChecked(newChecked);
+
+		props.onChange({
+			target: {
+				value: [...newChecked],
+			},
+		});
+	};
+
+	return (
+		<List sx={{ width: '100%', position: 'relative', overflow: 'auto', maxHeight: 300 }}>
+			{props.items.map((value) => {
+				const labelId = `checkbox-list-label-${value.id}`;
+
+				return (
+					<ListItem key={value.id} disablePadding>
+						<ListItemButton onClick={handleToggle(value.id)} dense disabled={props.disabled}>
+							<ListItemIcon>
+								<Checkbox
+									edge="start"
+									checked={$checked.indexOf(value.id) !== -1}
+									tabIndex={-1}
+									disableRipple
+									inputProps={{ 'aria-labelledby': labelId }}
+								/>
+							</ListItemIcon>
+							<ListItemText id={labelId} primary={value.name} />
+						</ListItemButton>
+					</ListItem>
+				);
+			})}
+		</List>
+	);
+}
+
+CheckboxList.defaultProps = {
+	disabled: false,
+	selected: [],
+	items: [],
+	onChange: function () {},
+};
+
 export default function Playersite(props) {
 	const classes = useStyles();
 	const navigate = useNavigate();
@@ -250,6 +312,12 @@ export default function Playersite(props) {
 		return null;
 	}
 
+	let main_channelid = props.restreamer.GetCurrentChannelID();
+	let channel = props.restreamer.GetChannel($settings.channelid);
+	if (channel !== null) {
+		main_channelid = channel.channelid;
+	}
+
 	return (
 		<React.Fragment>
 			<Paper xs={12} md={10}>
@@ -322,6 +390,44 @@ export default function Playersite(props) {
 										<Trans>Main page channel (index.html).</Trans>
 									</Typography>
 								</Grid>
+								<Grid item xs={12}>
+									<MultiSelect
+										disabled={!$settings.playersite}
+										type="select"
+										label={<Trans>Additional channels</Trans>}
+										value={$settings.channel_list.filter((c) => c !== main_channelid)}
+										renderValue={(selected) => {
+											return selected
+												.map((id) => {
+													let channel = props.restreamer.GetChannel(id);
+													if (channel === null) {
+														return '';
+													}
+													return channel.name;
+												})
+												.filter((name) => name.length !== 0)
+												.join(', ');
+										}}
+										onChange={handleChange('channel_list')}
+									>
+										{$channels
+											.sort((a, b) => {
+												const aname = a.name.toUpperCase();
+												const bname = b.name.toUpperCase();
+												return aname < bname ? -1 : aname > bname ? 1 : 0;
+											})
+											.map((c) => {
+												return { id: c.channelid, name: c.name };
+											})
+											.filter((c) => c.id !== main_channelid)
+											.map((c) => {
+												return <MultiSelectOption key={c.id} value={c.id} name={c.name} />;
+											})}
+									</MultiSelect>
+									<Typography variant="caption">
+										<Trans>Additional channels to display on the playersite.</Trans>
+									</Typography>
+								</Grid>
 								<Grid item xs={12}>
 									<Checkbox
 										label={<Trans>Share button</Trans>}

src/views/Publication/Services/Wettercom.js

@@ -0,0 +1,122 @@
+import React from 'react';
+
+import { Trans } from '@lingui/macro';
+import Grid from '@mui/material/Grid';
+import Link from '@mui/material/Link';
+import TextField from '@mui/material/TextField';
+
+import FormInlineButton from '../../../misc/FormInlineButton';
+import Logo from './logos/wettercom.png';
+
+const id = 'wettercom';
+const name = 'wetter.com';
+const version = '1.0';
+const stream_key_link = 'https://www.wetter.com/hd-live-webcams/informationen/';
+const description = (
+	<Trans>
+		Transmit your Livestream to wetter.com. Contact the publisher {' '}
+		<Link color="secondary" target="_blank" href="https://www.wetter.com/hd-live-webcams/informationen/">
+			here{' '}
+		</Link>
+		.
+	</Trans>
+);
+const image_copyright = <Trans>Please get in touch with the operator of the service and check what happens.</Trans>;
+const author = {
+	creator: {
+		name: 'datarhei',
+		link: 'https://github.com/datarhei',
+	},
+	maintainer: {
+		name: 'datarhei',
+		link: 'https://github.com/datarhei',
+	},
+};
+const category = 'software';
+const requires = {
+	protocols: ['rtmp'],
+	formats: ['flv'],
+	codecs: {
+		audio: ['aac'],
+		video: ['h264'],
+	},
+};
+
+function ServiceIcon(props) {
+	return <img src={Logo} alt="wetter.com Logo" {...props} />;
+}
+
+function init(settings) {
+	const initSettings = {
+		protocol: 'rtmp://',
+		server_url: 'wettercom-c1.livespotting.com/c61cba4f-68a3-488e-b2e4-ffb8e182794f',
+		stream_id: '',
+		stream_key: '',
+		...settings,
+	};
+
+	return initSettings;
+}
+
+function Service(props) {
+	const settings = init(props.settings);
+
+	const handleChange = (what) => (event) => {
+		const value = event.target.value;
+
+		settings[what] = value;
+
+		const output = createOutput(settings);
+
+		props.onChange([output], settings);
+	};
+
+	const createOutput = (settings) => {
+		const output = {
+			address: settings.protocol + settings.server_url + '/' + settings.stream_id + '.stream/' + settings.stream_id + '_token:' + settings.stream_key,
+			options: ['-f', 'flv'],
+		};
+
+		return output;
+	};
+
+	return (
+		<Grid container spacing={2}>
+			<Grid item xs={12} md={12}>
+				<TextField
+					variant="outlined"
+					fullWidth
+					placeholder=""
+					label={<Trans>Stream ID</Trans>}
+					value={settings.stream_id}
+					onChange={handleChange('stream_id')}
+				/>
+			</Grid>
+			<Grid item xs={12} md={9}>
+				<TextField
+					variant="outlined"
+					fullWidth
+					placeholder=""
+					label={<Trans>Stream key</Trans>}
+					value={settings.stream_key}
+					onChange={handleChange('stream_key')}
+				/>
+			</Grid>
+			<Grid item xs={12} md={3}>
+				<FormInlineButton target="blank" href={stream_key_link} component="a">
+					<Trans>GET</Trans>
+				</FormInlineButton>
+			</Grid>
+		</Grid>
+	);
+}
+
+Service.defaultProps = {
+	settings: {},
+	skills: {},
+	metadata: {},
+	streams: [],
+	onChange: function (output, settings) {},
+};
+
+export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };

src/views/Publication/Services/index.js

@@ -36,6 +36,7 @@ import * as Twitter from './Twitter';
 import * as UDP from './UDP';
 import * as Vimeo from './Vimeo';
 import * as WOWZA from './WOWZA';
+import * as Wettercom from './Wettercom';
 import * as Youtube from './Youtube';
 
 class Registry {
@@ -91,6 +92,7 @@ registry.Register(NimoTv);
 registry.Register(PeerTube);
 registry.Register(MediaNetwork);
 registry.Register(Livespotting);
+registry.Register(Wettercom);
 registry.Register(Azure);
 registry.Register(Brightcove);
 registry.Register(Akamai);