cloudinary-video-player 1.6.2-edge.13

package/src/components/playlist/playlist.js

@@ -0,0 +1,413 @@
+import VideoSource from 'plugins/cloudinary/models/video-source/video-source';
+import { isInteger } from 'utils/type-inference';
+
+import 'components/playlist/components/upcoming-video-overlay';
+import {
+  DEFAULT_AUTO_ADVANCE,
+  DEFAULT_PRESENT_UPCOMING,
+  UPCOMING_VIDEO_TRANSITION
+} from './playlist.const';
+
+class Playlist {
+
+  constructor(context, sources = [], { repeat = false, autoAdvance = false, presentUpcoming = false } = {}) {
+    this._context = context;
+    this._sources = [];
+    this._defaultRecResolverCache = {};
+    this._currentIndex = null;
+    this._recommendationsHandler = null;
+    this._autoAdvance = null;
+    this._presentUpcoming = null;
+
+    this.resetState = () => {
+      this.repeat(repeat);
+      this.autoAdvance(autoAdvance);
+      this.presentUpcoming(presentUpcoming);
+    };
+
+    sources.forEach((source) => this.enqueue(source));
+
+    this.resetState();
+  }
+
+  list() {
+    return this._sources;
+  }
+
+  player() {
+    return this._context.player;
+  }
+
+  presentUpcoming(delay) {
+    this._presentUpcoming = this._presentUpcoming || {};
+
+    if (delay === undefined) {
+      return this._presentUpcoming.delay;
+    }
+
+    if (delay === true) {
+      delay = DEFAULT_PRESENT_UPCOMING;
+    } else if (delay === false) {
+      delay = false;
+    } else if (!isInteger(delay) || delay < 0) {
+      throw new Error('presentUpcoming \'delay\' must be either a boolean or a positive integer.');
+    }
+
+    this._presentUpcoming.delay = delay;
+
+    this._setupPresentUpcoming();
+
+    return this._presentUpcoming.delay;
+  }
+
+  autoAdvance(delay) {
+    this._autoAdvance = this._autoAdvance || {};
+
+    if (delay === undefined) {
+      return this._autoAdvance.delay;
+    }
+
+    if (delay === true) {
+      delay = DEFAULT_AUTO_ADVANCE;
+    } else if (delay === false) {
+      delay = false;
+    } else if (!isInteger(delay) || delay < 0) {
+      throw new Error('Auto advance \'delay\' must be either a boolean or a positive integer.');
+    }
+
+    this._autoAdvance.delay = delay;
+
+    this._setupAutoAdvance();
+
+    return this._autoAdvance.delay;
+  }
+
+  _setupAutoAdvance() {
+    this._resetAutoAdvance();
+
+    const delay = this._autoAdvance.delay;
+
+    if (delay === false) {
+      return;
+    }
+
+    const trigger = () => {
+      if (this.player().ended()) {
+        this._autoAdvance.timeout = setTimeout(() => {
+          this.playNext();
+        }, delay * 1000);
+      }
+    };
+
+    this._autoAdvance = { delay, trigger };
+
+    this._context.on('ended', this._autoAdvance.trigger);
+  }
+
+  dispose() {
+    this._resetAutoAdvance();
+    this._resetPresentUpcoming();
+    this._resetRecommendations();
+  }
+
+  _resetPresentUpcoming() {
+    this.player().trigger('upcomingvideohide');
+
+    if (!this._presentUpcoming) {
+      this._presentUpcoming = {};
+    }
+
+    if (this._presentUpcoming.trigger) {
+      this._context.off('timeupdate', this._presentUpcoming.trigger);
+    }
+
+    this._presentUpcoming.trigger = null;
+    this._presentUpcoming.showTriggered = false;
+  }
+
+  _setupPresentUpcoming() {
+    this._resetPresentUpcoming();
+
+    const delay = this._presentUpcoming.delay;
+
+    if (delay === false) {
+      return;
+    }
+
+    this._presentUpcoming.trigger = () => {
+      const currentTime = this.player().currentTime();
+      const duration = this.player().duration();
+
+      const remainingTime = duration - currentTime;
+
+      if (remainingTime < UPCOMING_VIDEO_TRANSITION + 0.5) {
+        if (this._presentUpcoming.showTriggered) {
+          this.player().trigger('upcomingvideohide');
+          this._presentUpcoming.showTriggered = false;
+        }
+      } else if (remainingTime <= this._presentUpcoming.delay && !this._presentUpcoming.showTriggered && !this.player().loop()) {
+        this.player().trigger('upcomingvideoshow');
+        this._presentUpcoming.showTriggered = true;
+      } else if (this._presentUpcoming.showTriggered && (remainingTime > this._presentUpcoming.delay || this.player().loop())) {
+        this.player().trigger('upcomingvideohide');
+        this._presentUpcoming.showTriggered = false;
+      }
+    };
+
+    this._context.on('timeupdate', this._presentUpcoming.trigger);
+  }
+
+  _resetAutoAdvance() {
+    if (!this._autoAdvance) {
+      this._autoAdvance = {};
+    }
+
+    if (this._autoAdvance.timeout) {
+      clearTimeout(this._autoAdvance.timeout);
+    }
+
+    if (this._autoAdvance.trigger) {
+      this._context.off('ended', this._autoAdvance.trigger);
+    }
+
+    this._autoAdvance.timeout = null;
+    this._autoAdvance.trigger = null;
+  }
+
+  _resetRecommendations() {
+    if (this._recommendationsHandler) {
+      this._context.off('ended', this._recommendationsHandler);
+    }
+  }
+
+  _refreshRecommendations() {
+    this._resetRecommendations();
+
+    this._recommendationsHandler = () => {
+      if (this.autoAdvance() === false && this._context.autoShowRecommendations()) {
+        this.player().trigger('recommendationsshow');
+      }
+    };
+
+    this._context.on('ended', this._recommendationsHandler);
+  }
+
+
+  _refreshTextTracks () {
+    this.player().trigger('refreshTextTracks', this.currentSource().textTracks());
+  }
+
+  _recommendationItemBuilder(source) {
+    const defaultResolver = this._defaultRecResolverCache[source.objectId];
+    if (source.recommendations() && (!defaultResolver || source.recommendations() !== defaultResolver)) {
+      return;
+    }
+
+    return (source) => ({ source, action: () => this.playItem(source) });
+  }
+
+  currentIndex(index) {
+    if (index === undefined) {
+      return this._currentIndex;
+    }
+
+    if (index >= this.length() || index < 0) {
+      throw new Error('Invalid playlist index.');
+    }
+
+    this._currentIndex = index;
+
+    const current = this.currentSource();
+
+    const itemBuilder = this._recommendationItemBuilder(current);
+
+    if (!current.recommendations()) {
+      current.recommendations(this._defaultRecommendationsResolver(current));
+    }
+
+    this._context.source(current, { recommendationOptions: { disableAutoShow: true, itemBuilder } });
+
+    const eventData = { playlist: this, current, next: this.next() };
+
+    this.player().trigger('playlistitemchanged', eventData);
+
+    this._refreshRecommendations();
+
+    this._refreshTextTracks();
+
+    return current;
+  }
+
+  _defaultRecommendationsResolver(source) {
+    const defaultResolver = this._defaultRecResolverCache[source.objectId];
+    if (defaultResolver) {
+      return defaultResolver;
+    }
+
+    this._defaultRecResolverCache[source.objectId] = () => {
+      let index = this.list().indexOf(source);
+      const items = [];
+
+      const numOfItems = Math.min(4, this.length() - 1);
+
+      while (items.length < numOfItems) {
+        index = this.nextIndex(index);
+        if (index === -1) {
+          break;
+        }
+
+        const source = this.list()[index];
+        items.push(source);
+      }
+
+      return items;
+    };
+
+    return this._defaultRecResolverCache[source.objectId];
+  }
+
+  buildSource(source, options = {}) {
+    return this._context.buildSource(source, options);
+  }
+
+  enqueue(source, options = {}) {
+    const src = source instanceof VideoSource ? source : this.buildSource(source, options);
+
+    this._sources.push(src);
+
+    return src;
+  }
+
+
+  playItem(item) {
+    let index = this.list().indexOf(item);
+
+    if (index === -1) {
+      throw new Error('Invalid playlist item.');
+    }
+
+    this.playAtIndex(index);
+  }
+
+  playAtIndex(index) {
+    this.currentIndex(index);
+    this.player().play();
+
+    return this.currentSource();
+  }
+
+  currentSource() {
+    return this.list()[this.currentIndex()];
+  }
+
+  removeAt(index) {
+    if (index >= this.length() || index < 0) {
+      throw new Error('Invalid playlist index.');
+    }
+
+    this._sources.splice(index, 1);
+
+    return this;
+  }
+
+  repeat(repeat) {
+    if (repeat === undefined) {
+      return this._repeat;
+    }
+
+    this._repeat = !!repeat;
+
+    return this._repeat;
+  }
+
+  first() {
+    return this.list()[0];
+  }
+
+  last() {
+    return this.list()[this.length() - 1];
+  }
+
+  next() {
+    const nextIndex = this.nextIndex();
+
+    if (nextIndex === -1) {
+      return null;
+    }
+
+    return this.list()[nextIndex];
+  }
+
+  nextIndex(index) {
+    index = index !== undefined ? index : this.currentIndex();
+
+    if (index >= this.length() || index < 0) {
+      throw new Error('Invalid playlist index.');
+    }
+
+    const isLast = index === this.length() - 1;
+
+    let nextIndex = index + 1;
+
+    if (isLast) {
+      if (this.repeat()) {
+        nextIndex = 0;
+      } else {
+        return -1;
+      }
+    }
+
+    return nextIndex;
+  }
+
+  previousIndex() {
+    if (this.isFirst()) {
+      return -1;
+    }
+
+    return this.currentIndex() - 1;
+  }
+
+  playFirst() {
+    return this.playAtIndex(0);
+  }
+
+  playLast() {
+    const lastIndex = this.list().length - 1;
+    return this.playAtIndex(lastIndex);
+  }
+
+  isLast() {
+    return this.currentIndex() >= this.length() - 1;
+  }
+
+  isFirst() {
+    return this.currentIndex() === 0;
+  }
+
+  length() {
+    return this.list().length;
+  }
+
+  playNext() {
+    let nextIndex = this.nextIndex();
+
+    if (nextIndex === -1) {
+      return null;
+    }
+
+    return this.playAtIndex(nextIndex);
+  }
+
+  playPrevious() {
+    let previousIndex = this.previousIndex();
+
+    if (previousIndex === -1) {
+      return null;
+    }
+
+    return this.playAtIndex(previousIndex);
+  }
+}
+
+export default Playlist;

package/src/components/playlist/thumbnail/thumbnail.js

@@ -0,0 +1,69 @@
+import videojs from 'video.js';
+import '../../../assets/styles/components/thumbnail.scss';
+
+// Get the ClickableComponent base class from Video.js
+const ClickableComponent = videojs.getComponent('ClickableComponent');
+
+const THUMB_DEFAULT_WIDTH = 300;
+
+const DEFAULT_OPTIONS = {
+  item: null,
+  transformation: {
+    width: THUMB_DEFAULT_WIDTH,
+    aspect_ratio: '16:9',
+    crop: 'pad',
+    background: 'black'
+  }
+};
+
+class Thumbnail extends ClickableComponent {
+
+  constructor(player, initOptions) {
+    const options = videojs.mergeOptions(DEFAULT_OPTIONS, initOptions);
+    super(player, options);
+  }
+
+  getItem() {
+    return this.options_.item;
+  }
+
+  getTitle() {
+    return this.getItem().info().title;
+  }
+
+  getDuration() {
+    return ' ';// this.getItem().info().title;
+  }
+
+  getThumbnail() {
+    return this.getItem().poster().url({ transformation: this.options_.transformation });
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+  }
+
+  createControlTextEl() {
+    return;
+  }
+
+  createEl(tag = 'a') {
+    const el = super.createEl(tag, {
+      className: 'cld-thumbnail',
+      href: '#'
+    });
+
+    const img = super.createEl('img', {
+      className: 'cld-thumbnail-img',
+      src: this.getThumbnail()
+    });
+
+    el.appendChild(img);
+
+    el.style.backgroundImage = `url('${this.getThumbnail()}')`;
+
+    return el;
+  }
+}
+
+export default Thumbnail;

package/src/components/progress-control-events-blocker/progress-control-events-blocker.js

@@ -0,0 +1,17 @@
+import videojs from 'video.js';
+const Component = videojs.getComponent('Component');
+
+class ProgressControlEventsBlocker extends Component {
+
+  constructor(player, options = {}) {
+    super(player, options);
+  }
+
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-progress-control-events-blocker'
+    });
+  }
+}
+
+videojs.registerComponent('progressControlEventsBlocker', ProgressControlEventsBlocker);

package/src/components/qualitySelector/quality-selector.scss

@@ -0,0 +1,10 @@
+.video-js {
+
+  .vjs-http-source-selector {
+
+    .vjs-button {
+      font-size: 17px;
+    }
+
+  }
+}

package/src/components/qualitySelector/qualitySelector.js

@@ -0,0 +1,152 @@
+import * as djs from 'dashjs';
+import 'videojs-per-source-behaviors';
+import 'videojs-contrib-quality-levels';
+import '../../plugins/videojs-http-source-selector/plugin';
+import { findIndex } from '../../utils/find';
+
+import './quality-selector.scss';
+
+const qualitySelector = {
+
+  init: (player) => {
+    // Handle DASH sources, HLS are handled internally.
+    if (player && player.qualityLevels && player.dash && player.dash.mediaPlayer) {
+      const MediaPlayer = djs.default.MediaPlayer;
+
+      player.dash.qualityLevels = player.qualityLevels();
+      player.dash.mediaPlayer.getAutoSwitchQualityFor = (type) => {
+        const dashPlayer = player.dash.mediaPlayer;
+        const settings = dashPlayer.getSettings();
+
+        if (settings) {
+          return settings.streaming.abr.autoSwitchBitrate[type];
+        }
+
+        return true;
+      };
+
+      player.dash.mediaPlayer.setAutoSwitchQualityFor = (type, val) => {
+        const dashPlayer = player.dash.mediaPlayer;
+        const upSettings = {
+          streaming: {
+            abr: {
+              autoSwitchBitrate: {}
+            }
+          }
+        };
+        upSettings.streaming.abr.autoSwitchBitrate[type] = val;
+        dashPlayer.updateSettings(upSettings);
+      };
+
+      // When loaded, build quality-level list.
+      player.dash.mediaPlayer.on(
+        MediaPlayer.events.PLAYBACK_METADATA_LOADED,
+        () => {
+          const videoRates = player.dash.mediaPlayer.getBitrateInfoListFor('video');
+          const audioRates = player.dash.mediaPlayer.getBitrateInfoListFor('audio');
+
+          if (videoRates.length > 0) {
+            const normalizeFactor = videoRates[videoRates.length - 1].bitrate;
+            player.dash.audioMapper = videoRates.map((rate) =>
+              Math.round((rate.bitrate / normalizeFactor) * (audioRates.length - 1))
+            );
+            videoRates.forEach((vrate) => {
+              player.dash.qualityLevels.addQualityLevel({
+                id: vrate.bitrate,
+                width: vrate.width,
+                height: vrate.height,
+                bandwidth: vrate.bitrate,
+                selected: true,
+                enabled: function(val) {
+                  if (val !== undefined) {
+                    this.selected = val;
+                    if (val === true) {
+                      let selectedIdx = findIndex(player.qualityLevels().levels_, (l => l.id === this.id));
+                      player.qualityLevels().selectedIndex_ = selectedIdx;
+                      player.qualityLevels().trigger({
+                        type: 'change',
+                        selectedIndex: selectedIdx
+                      });
+                    }
+                  } else {
+                    return (this.selected !== undefined ? this.selected : true);
+                  }
+                }
+              });
+            });
+          }
+        }
+      );
+
+      // Pass qualityLevels 'change' event into the DASH player.
+      player.qualityLevels().on('change', (event) => {
+        let enabledQualities = player.dash.qualityLevels.levels_.filter(
+          (q) => q.enabled
+        );
+        if (enabledQualities.length === 1) {
+          player.dash.mediaPlayer.setQualityFor('video', event.selectedIndex);
+          player.dash.mediaPlayer.setQualityFor('audio', player.dash.audioMapper[event.selectedIndex]);
+        } else if (!player.dash.mediaPlayer.getAutoSwitchQualityFor('video')) {
+          player.dash.mediaPlayer.setAutoSwitchQualityFor('video', true);
+          player.dash.mediaPlayer.setAutoSwitchQualityFor('audio', true);
+        }
+      });
+
+      // Handle 'change' event on the DASH player
+      /*
+      player.dash.mediaPlayer.on(
+        MediaPlayer.events.QUALITY_CHANGE_REQUESTED,
+        (event) => {
+          if (event.mediaType === 'video') {
+            player.dash.qualityLevels.selectedIndex_ = event.newQuality;
+            player.dash.qualityLevels.trigger({
+              selectedIndex: event.newQuality,
+              type: 'change'
+            });
+          }
+        }
+      );
+*/
+    }
+  },
+
+  // Show selector only if more then one option available
+  setVisibility: (player) => {
+    const sourceMenuButton = player.controlBar.getChild('sourceMenuButton');
+    if (sourceMenuButton) {
+      const qualityLevels = player.qualityLevels();
+      if (qualityLevels && qualityLevels.length > 1) {
+        const levels = qualityLevels.levels_.filter((q) => q.enabled);
+        if (levels.length === 1) {
+          const idx = qualityLevels.levels_.findIndex(l => l.id === levels[0].id);
+          sourceMenuButton.children()[1].children()[idx].selected(true);
+        } else {
+          sourceMenuButton.children()[1].children()[0].selected(true);
+          sourceMenuButton.children()[1].children().forEach((item, i) => {
+            if (i > 0) {
+              item.selected(false);
+            }
+          });
+        }
+        sourceMenuButton.show();
+      } else {
+        sourceMenuButton.hide();
+      }
+
+      // ToDo: if there are multiple sources with same height (i.e. 720p)
+      // add a bitrate indicator to distinguish them.
+      // Labels: 720p => 1280x720 @ 3500Kbps
+      // sourceMenuButton.items.forEach((item) => {
+      //   const level = qualityLevels.levels_.find(ql => ql.height + 'p' === item.options_.label);
+      //   if (level) {
+      //     item.el_.innerText = level.width + 'x' + level.height + (level.bitrate ? ' @ ' + (Math.round(level.bitrate / 100)) + 'Kbps' : '');
+      //   }
+      // });
+
+    }
+
+  }
+
+};
+
+export default qualitySelector;

package/src/components/recommendations-overlay/index.js

@@ -0,0 +1,3 @@
+import RecommendationsOverlay from './recommendations-overlay';
+
+export default RecommendationsOverlay;