cloudinary-video-player 1.6.2-edge.13

package/src/plugins/index.js

@@ -0,0 +1,31 @@
+// #if (!process.env.WEBPACK_BUILD_LIGHT)
+import 'videojs-contrib-ads';
+import './ima';
+import dashPlugin from './dash';
+import interactive from './interactive-plugin';
+import './videojs-http-source-selector/plugin';
+// #endif
+
+import autoplayOnScroll from './autoplay-on-scroll';
+import floatingPlayer from './floating-player';
+import colors from './colors';
+import contextMenu from './context-menu';
+import cloudinary from './cloudinary';
+import analytics from './analytics';
+import vttThumbnails from './vtt-thumbnails';
+
+const plugins = {
+  autoplayOnScroll,
+  floatingPlayer,
+  colors,
+  contextMenu,
+  cloudinary,
+  analytics,
+  vttThumbnails,
+  // #if (!process.env.WEBPACK_BUILD_LIGHT)
+  interactive,
+  dashPlugin
+  // #endif
+};
+
+export default plugins;

package/src/plugins/interactive-plugin/index.js

@@ -0,0 +1,10 @@
+import ShoppableWidget from '../../components/shoppable-bar/shoppable-widget';
+
+export default function interactivePlugin(player, options) {
+
+  // Shoppable Video
+  if (options.shoppable) {
+    new ShoppableWidget(player, options.shoppable).init();
+  }
+
+}

package/src/plugins/videojs-http-source-selector/components/SourceMenuButton.js

@@ -0,0 +1,98 @@
+import videojs from 'video.js';
+import SourceMenuItem from './SourceMenuItem';
+
+const MenuButton = videojs.getComponent('MenuButton');
+
+class SourceMenuButton extends MenuButton {
+
+  constructor(player, options) {
+    super(player, options);
+
+    // eslint-disable-next-line prefer-rest-params
+    MenuButton.apply(this, arguments);
+
+    const qualityLevels = this.player().qualityLevels();
+
+    // Handle options: We accept an options.default value of ( high || low )
+    // This determines a bias to set initial resolution selection.
+    if (options && options.default) {
+      if (options.default === 'low') {
+        for (let i = 0; i < qualityLevels.length; i++) {
+          qualityLevels[i].enabled = (i === 0);
+        }
+      } else if (options.default === 'high') {
+        for (let i = 0; i < qualityLevels.length; i++) {
+          qualityLevels[i].enabled = (i === (qualityLevels.length - 1));
+        }
+      }
+    }
+
+    // Bind update to qualityLevels changes
+    this.player().qualityLevels().on(['addqualitylevel'], videojs.bind(this, this.update));
+  }
+
+  createEl() {
+    return videojs.dom.createEl('div', {
+      className: 'vjs-http-source-selector vjs-menu-button vjs-menu-button-popup vjs-control vjs-button'
+    });
+  }
+
+  buildCSSClass() {
+    return MenuButton.prototype.buildCSSClass.call(this) + ' vjs-icon-cog';
+  }
+
+  update() {
+    return MenuButton.prototype.update.call(this);
+  }
+
+  createItems() {
+    const menuItems = [];
+    const levels = this.player().qualityLevels();
+    const labels = [];
+
+    for (let i = 0; i < levels.length; i++) {
+      let index = levels.length - (i + 1);
+      let selected = (index === levels.selectedIndex);
+
+      // Display height if height metadata is provided with the stream, else use bitrate
+      let label = `${index}`;
+      let sortVal = index;
+      if (levels[index].height) {
+        label = `${levels[index].height}p`;
+        sortVal = parseInt(levels[index].height, 10);
+      } else if (levels[index].bitrate) {
+        label = `${Math.floor(levels[index].bitrate / 1e3)} kbps`;
+        sortVal = parseInt(levels[index].bitrate, 10);
+      }
+
+      // Skip duplicate labels
+      if (labels.indexOf(label) >= 0) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+      labels.push(label);
+
+      menuItems.push(new SourceMenuItem(this.player_, { label, index, selected, sortVal }));
+    }
+
+    // If there are multiple quality levels, offer an 'auto' option
+    if (levels.length > 1) {
+      menuItems.push(new SourceMenuItem(this.player_, { label: 'Auto', index: levels.length, selected: false, sortVal: 99999 }));
+    }
+
+    // Sort menu items by their label name with Auto always first
+    menuItems.sort(function(a, b) {
+      if (a.options_.sortVal < b.options_.sortVal) {
+        return 1;
+      } else if (a.options_.sortVal > b.options_.sortVal) {
+        return -1;
+      } else {
+        return 0;
+      }
+    });
+
+    return menuItems;
+  }
+}
+
+export default SourceMenuButton;

package/src/plugins/videojs-http-source-selector/components/SourceMenuItem.js

@@ -0,0 +1,52 @@
+import videojs from 'video.js';
+const MenuItem = videojs.getComponent('MenuItem');
+const Component = videojs.getComponent('Component');
+
+class SourceMenuItem extends MenuItem {
+  constructor(player, options) {
+    options.selectable = true;
+    options.multiSelectable = false;
+
+    super(player, options);
+  }
+
+  handleClick() {
+    const selected = this.options_;
+    console.log('Changing quality to:', selected.label);
+    super.handleClick();
+
+    let levels = this.player().qualityLevels();
+    let isAuto = selected.index === levels.length;
+    for (let i = 0; i < levels.length; i++) {
+      if (isAuto) {
+        // If this is the Auto option, enable all renditions for adaptive selection
+        levels[i].enabled = true;
+      } else if (selected.index === i) {
+        levels[i].enabled = true;
+      } else {
+        levels[i].enabled = false;
+      }
+    }
+    if (isAuto) {
+      this.deselectRest(6);
+    } else {
+      this.deselectRest(selected.index);
+    }
+  }
+
+  deselectRest(idx) {
+    if (this.parentComponent_) {
+      this.parentComponent_.children().forEach((item) => {
+        item.selected(idx === item.options_.index);
+      });
+    }
+  }
+
+  update() {
+    let selectedIndex = this.player().qualityLevels().selectedIndex;
+    this.selected(this.options_.index === selectedIndex);
+  }
+}
+
+Component.registerComponent('SourceMenuItem', SourceMenuItem);
+export default SourceMenuItem;

package/src/plugins/videojs-http-source-selector/plugin.js

@@ -0,0 +1,82 @@
+import videojs from 'video.js';
+
+import SourceMenuButton from './components/SourceMenuButton';
+import SourceMenuItem from './components/SourceMenuItem';
+
+// Default options for the plugin.
+const defaults = {};
+
+// Cross-compatibility for Video.js 5 and 6.
+const registerPlugin = videojs.registerPlugin || videojs.plugin;
+// const dom = videojs.dom || videojs;
+
+/**
+* Function to invoke when the player is ready.
+*
+* This is a great place for your plugin to initialize itself. When this
+* function is called, the player will have its DOM and child components
+* in place.
+*
+* @function onPlayerReady
+* @param    {Player} player
+*           A Video.js player object.
+*
+* @param    {Object} [options={}]
+*           A plain object containing options for the plugin.
+*/
+const onPlayerReady = (player) => {
+  player.addClass('vjs-http-source-selector');
+  console.log('videojs-http-source-selector initialized!');
+
+  console.log('player.techName_:' + player.techName_);
+  // This plugin only supports level selection for HLS playback
+  if (player.techName_ !== 'Html5') {
+    return false;
+  }
+
+  /**
+  *
+  * We have to wait for the manifest to load before we can scan renditions for resolutions/bitrates to populate selections
+  *
+  **/
+  player.on(['loadedmetadata'], function() {
+    videojs.log('loadmetadata event');
+    // hack for plugin idempodency... prevents duplicate menubuttons from being inserted into the player if multiple player.httpSourceSelector() functions called.
+    if (player.videojs_http_source_selector_initialized === 'undefined' || player.videojs_http_source_selector_initialized === true) {
+      console.log('player.videojs_http_source_selector_initialized == true');
+    } else {
+      console.log('player.videojs_http_source_selector_initialized == false');
+      player.videojs_http_source_selector_initialized = true;
+      const controlBar = player.controlBar,
+        fullscreenToggle = controlBar.getChild('fullscreenToggle').el();
+      controlBar.el().insertBefore(controlBar.addChild('SourceMenuButton').el(), fullscreenToggle);
+    }
+  });
+};
+
+/**
+  * A video.js plugin.
+  *
+  * In the plugin function, the value of `this` is a video.js `Player`
+  * instance. You cannot rely on the player being in a "ready" state here,
+  * depending on how the plugin is invoked. This may or may not be important
+  * to you; if not, remove the wait for "ready"!
+  *
+  * @function httpSourceSelector
+  * @param    {Object} [options={}]
+  *           An object of options left to the plugin author to define.
+  */
+const httpSourceSelector = function(options) {
+  this.ready(() => {
+    onPlayerReady(this, videojs.mergeOptions(defaults, options));
+    // this.getChild('controlBar').addChild('SourceMenuButton', {});
+  });
+
+  videojs.registerComponent('SourceMenuButton', SourceMenuButton);
+  videojs.registerComponent('SourceMenuItem', SourceMenuItem);
+};
+
+// Register the plugin with video.js.
+registerPlugin('httpSourceSelector', httpSourceSelector);
+
+export default httpSourceSelector;

package/src/plugins/videojs-http-source-selector/plugin.scss

@@ -0,0 +1,9 @@
+// Sass for videojs-http-source-selector
+
+.video-js {
+
+  // This class is added to the video.js element by the plugin by default.
+  &.vjs-http-source-selector {
+    display: block;
+  }
+}