@cloudnest/redxplyr 1.0.0

package/src/js/media.js

@@ -0,0 +1,61 @@
+// ==========================================================================
+// Plyr Media
+// ==========================================================================
+
+import html5 from './html5';
+import vimeo from './plugins/vimeo';
+import youtube from './plugins/youtube';
+import { createElement, toggleClass, wrap } from './utils/elements';
+
+const media = {
+  // Setup media
+  setup() {
+    // If there's no media, bail
+    if (!this.media) {
+      this.debug.warn('No media element found!');
+      return;
+    }
+
+    // Add type class
+    toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', this.type), true);
+
+    // Add provider class
+    toggleClass(this.elements.container, this.config.classNames.provider.replace('{0}', this.provider), true);
+
+    // Add video class for embeds
+    // This will require changes if audio embeds are added
+    if (this.isEmbed) {
+      toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', 'video'), true);
+    }
+
+    // Inject the player wrapper
+    if (this.isVideo) {
+      // Create the wrapper div
+      this.elements.wrapper = createElement('div', {
+        class: this.config.classNames.video,
+      });
+
+      // Wrap the video in a container
+      wrap(this.media, this.elements.wrapper);
+
+      // Poster image container
+      this.elements.poster = createElement('div', {
+        class: this.config.classNames.poster,
+      });
+
+      this.elements.wrapper.appendChild(this.elements.poster);
+    }
+
+    if (this.isHTML5) {
+      html5.setup.call(this);
+    }
+    else if (this.isYouTube) {
+      youtube.setup.call(this);
+    }
+    else if (this.isVimeo) {
+      vimeo.setup.call(this);
+    }
+  },
+};
+
+export default media;

package/src/js/plugins/ads.js

@@ -0,0 +1,647 @@
+// ==========================================================================
+// Advertisement plugin using Google IMA HTML5 SDK
+// Create an account with our ad partner, vi here:
+// https://www.vi.ai/publisher-video-monetization/
+// ==========================================================================
+
+/* global google */
+
+import { createElement } from '../utils/elements';
+import { triggerEvent } from '../utils/events';
+import i18n from '../utils/i18n';
+import is from '../utils/is';
+import loadScript from '../utils/load-script';
+import { silencePromise } from '../utils/promise';
+import { formatTime } from '../utils/time';
+import { buildUrlParams } from '../utils/urls';
+
+function destroy(instance) {
+  // Destroy our adsManager
+  if (instance.manager) {
+    instance.manager.destroy();
+  }
+
+  // Destroy our adsManager
+  if (instance.elements.displayContainer) {
+    instance.elements.displayContainer.destroy();
+  }
+
+  instance.elements.container.remove();
+}
+
+class Ads {
+  /**
+   * Ads constructor.
+   * @param {object} player
+   * @return {Ads}
+   */
+  constructor(player) {
+    this.player = player;
+    this.config = player.config.ads;
+    this.playing = false;
+    this.initialized = false;
+    this.elements = {
+      container: null,
+      displayContainer: null,
+    };
+    this.manager = null;
+    this.loader = null;
+    this.cuePoints = null;
+    this.events = {};
+    this.safetyTimer = null;
+    this.countdownTimer = null;
+
+    // Setup a promise to resolve when the IMA manager is ready
+    this.managerPromise = new Promise((resolve, reject) => {
+      // The ad is loaded and ready
+      this.on('loaded', resolve);
+
+      // Ads failed
+      this.on('error', reject);
+    });
+
+    this.load();
+  }
+
+  get enabled() {
+    const { config } = this;
+
+    return (
+      this.player.isHTML5
+      && this.player.isVideo
+      && config.enabled
+      && (!is.empty(config.publisherId) || is.url(config.tagUrl))
+    );
+  }
+
+  /**
+   * Load the IMA SDK
+   */
+  load = () => {
+    if (!this.enabled) {
+      return;
+    }
+
+    // Check if the Google IMA3 SDK is loaded or load it ourselves
+    if (!is.object(window.google) || !is.object(window.google.ima)) {
+      loadScript(this.player.config.urls.googleIMA.sdk)
+        .then(() => {
+          this.ready();
+        })
+        .catch(() => {
+          // Script failed to load or is blocked
+          this.trigger('error', new Error('Google IMA SDK failed to load'));
+        });
+    }
+    else {
+      this.ready();
+    }
+  };
+
+  /**
+   * Get the ads instance ready
+   */
+  ready = () => {
+    // Double check we're enabled
+    if (!this.enabled) {
+      destroy(this);
+    }
+
+    // Start ticking our safety timer. If the whole advertisement
+    // thing doesn't resolve within our set time; we bail
+    this.startSafetyTimer(12000, 'ready()');
+
+    // Clear the safety timer
+    this.managerPromise.then(() => {
+      this.clearSafetyTimer('onAdsManagerLoaded()');
+    });
+
+    // Set listeners on the Plyr instance
+    this.listeners();
+
+    // Setup the IMA SDK
+    this.setupIMA();
+  };
+
+  // Build the tag URL
+  get tagUrl() {
+    const { config } = this;
+
+    if (is.url(config.tagUrl)) {
+      return config.tagUrl;
+    }
+
+    const params = {
+      AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
+      AV_CHANNELID: '5a0458dc28a06145e4519d21',
+      AV_URL: window.location.hostname,
+      cb: Date.now(),
+      AV_WIDTH: 640,
+      AV_HEIGHT: 480,
+      AV_CDIM2: config.publisherId,
+    };
+
+    const base = 'https://go.aniview.com/api/adserver6/vast/';
+
+    return `${base}?${buildUrlParams(params)}`;
+  }
+
+  /**
+   * In order for the SDK to display ads for our video, we need to tell it where to put them,
+   * so here we define our ad container. This div is set up to render on top of the video player.
+   * Using the code below, we tell the SDK to render ads within that div. We also provide a
+   * handle to the content video player - the SDK will poll the current time of our player to
+   * properly place mid-rolls. After we create the ad display container, we initialize it. On
+   * mobile devices, this initialization is done as the result of a user action.
+   */
+  setupIMA = () => {
+    // Create the container for our advertisements
+    this.elements.container = createElement('div', {
+      class: this.player.config.classNames.ads,
+    });
+
+    this.player.elements.container.appendChild(this.elements.container);
+
+    // So we can run VPAID2
+    google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED);
+
+    // Set language
+    google.ima.settings.setLocale(this.player.config.ads.language);
+
+    // Set playback for iOS10+
+    google.ima.settings.setDisableCustomPlaybackForIOS10Plus(this.player.config.playsinline);
+
+    // We assume the adContainer is the video container of the plyr element that will house the ads
+    this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container, this.player.media);
+
+    // Create ads loader
+    this.loader = new google.ima.AdsLoader(this.elements.displayContainer);
+
+    // Listen and respond to ads loaded and error events
+    this.loader.addEventListener(
+      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
+      event => this.onAdsManagerLoaded(event),
+      false,
+    );
+    this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false);
+
+    // Request video ads to be pre-loaded
+    this.requestAds();
+  };
+
+  /**
+   * Request advertisements
+   */
+  requestAds = () => {
+    const { container } = this.player.elements;
+
+    try {
+      // Request video ads
+      const request = new google.ima.AdsRequest();
+      request.adTagUrl = this.tagUrl;
+
+      // Specify the linear and nonlinear slot sizes. This helps the SDK
+      // to select the correct creative if multiple are returned
+      request.linearAdSlotWidth = container.offsetWidth;
+      request.linearAdSlotHeight = container.offsetHeight;
+      request.nonLinearAdSlotWidth = container.offsetWidth;
+      request.nonLinearAdSlotHeight = container.offsetHeight;
+
+      // We only overlay ads as we only support video.
+      request.forceNonLinearFullSlot = false;
+
+      // Mute based on current state
+      request.setAdWillPlayMuted(!this.player.muted);
+
+      this.loader.requestAds(request);
+    }
+    catch (error) {
+      this.onAdError(error);
+    }
+  };
+
+  /**
+   * Update the ad countdown
+   * @param {boolean} start
+   */
+  pollCountdown = (start = false) => {
+    if (!start) {
+      clearInterval(this.countdownTimer);
+      this.elements.container.removeAttribute('data-badge-text');
+      return;
+    }
+
+    const update = () => {
+      const time = formatTime(Math.max(this.manager.getRemainingTime(), 0));
+      const label = `${i18n.get('advertisement', this.player.config)} - ${time}`;
+      this.elements.container.setAttribute('data-badge-text', label);
+    };
+
+    this.countdownTimer = setInterval(update, 100);
+  };
+
+  /**
+   * This method is called whenever the ads are ready inside the AdDisplayContainer
+   * @param {Event} event - adsManagerLoadedEvent
+   */
+  onAdsManagerLoaded = (event) => {
+    // Load could occur after a source change (race condition)
+    if (!this.enabled) {
+      return;
+    }
+
+    // Get the ads manager
+    const settings = new google.ima.AdsRenderingSettings();
+
+    // Tell the SDK to save and restore content video state on our behalf
+    settings.restoreCustomPlaybackStateOnAdBreakComplete = true;
+    settings.enablePreloading = true;
+
+    // The SDK is polling currentTime on the contentPlayback. And needs a duration
+    // so it can determine when to start the mid- and post-roll
+    this.manager = event.getAdsManager(this.player, settings);
+
+    // Get the cue points for any mid-rolls by filtering out the pre- and post-roll
+    this.cuePoints = this.manager.getCuePoints();
+
+    // Add listeners to the required events
+    // Advertisement error events
+    this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error));
+
+    // Advertisement regular events
+    Object.keys(google.ima.AdEvent.Type).forEach((type) => {
+      this.manager.addEventListener(google.ima.AdEvent.Type[type], e => this.onAdEvent(e));
+    });
+
+    // Resolve our adsManager
+    this.trigger('loaded');
+  };
+
+  addCuePoints = () => {
+    // Add advertisement cue's within the time line if available
+    if (!is.empty(this.cuePoints)) {
+      this.cuePoints.forEach((cuePoint) => {
+        if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < this.player.duration) {
+          const seekElement = this.player.elements.progress;
+
+          if (is.element(seekElement)) {
+            const cuePercentage = (100 / this.player.duration) * cuePoint;
+            const cue = createElement('span', {
+              class: this.player.config.classNames.cues,
+            });
+
+            cue.style.left = `${cuePercentage.toString()}%`;
+            seekElement.appendChild(cue);
+          }
+        }
+      });
+    }
+  };
+
+  /**
+   * This is where all the event handling takes place. Retrieve the ad from the event. Some
+   * events (e.g. ALL_ADS_COMPLETED) don't have the ad object associated
+   * https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/apis#ima.AdEvent.Type
+   * @param {Event} event
+   */
+  onAdEvent = (event) => {
+    const { container } = this.player.elements;
+    // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
+    // don't have ad object associated
+    const ad = event.getAd();
+    const adData = event.getAdData();
+
+    // Proxy event
+    const dispatchEvent = (type) => {
+      triggerEvent.call(this.player, this.player.media, `ads${type.replace(/_/g, '').toLowerCase()}`);
+    };
+
+    // Bubble the event
+    dispatchEvent(event.type);
+
+    switch (event.type) {
+      case google.ima.AdEvent.Type.LOADED:
+        // This is the first event sent for an ad - it is possible to determine whether the
+        // ad is a video ad or an overlay
+        this.trigger('loaded');
+
+        // Start countdown
+        this.pollCountdown(true);
+
+        if (!ad.isLinear()) {
+          // Position AdDisplayContainer correctly for overlay
+          ad.width = container.offsetWidth;
+          ad.height = container.offsetHeight;
+        }
+
+        // console.info('Ad type: ' + event.getAd().getAdPodInfo().getPodIndex());
+        // console.info('Ad time: ' + event.getAd().getAdPodInfo().getTimeOffset());
+
+        break;
+
+      case google.ima.AdEvent.Type.STARTED:
+        // Set volume to match player
+        this.manager.setVolume(this.player.volume);
+
+        break;
+
+      case google.ima.AdEvent.Type.ALL_ADS_COMPLETED:
+        // All ads for the current videos are done. We can now request new advertisements
+        // in case the video is re-played
+
+        // TODO: Example for what happens when a next video in a playlist would be loaded.
+        // So here we load a new video when all ads are done.
+        // Then we load new ads within a new adsManager. When the video
+        // Is started - after - the ads are loaded, then we get ads.
+        // You can also easily test cancelling and reloading by running
+        // player.ads.cancel() and player.ads.play from the console I guess.
+        // this.player.source = {
+        //     type: 'video',
+        //     title: 'Flower macro study',
+        //     sources: [{
+        //         src:
+        // 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4', type:
+        // 'video/mp4', }], poster:
+        // '/media/redxplyr-cover.svg', tracks:
+        // [ { kind: 'captions', label: 'English', srclang: 'en', src:
+        // '/media/redxplyr-demo.en.vtt', default: true, }, ],
+        // };
+
+        // TODO: So there is still this thing where a video should only be allowed to start
+        // playing when the IMA SDK is ready or has failed
+
+        if (this.player.ended) {
+          this.loadAds();
+        }
+        else {
+          // The SDK won't allow new ads to be called without receiving a contentComplete()
+          this.loader.contentComplete();
+        }
+
+        break;
+
+      case google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED:
+        // This event indicates the ad has started - the video player can adjust the UI,
+        // for example display a pause button and remaining time. Fired when content should
+        // be paused. This usually happens right before an ad is about to cover the content
+
+        this.pauseContent();
+
+        break;
+
+      case google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED:
+        // This event indicates the ad has finished - the video player can perform
+        // appropriate UI actions, such as removing the timer for remaining time detection.
+        // Fired when content should be resumed. This usually happens when an ad finishes
+        // or collapses
+
+        this.pollCountdown();
+
+        this.resumeContent();
+
+        break;
+
+      case google.ima.AdEvent.Type.LOG:
+        if (adData.adError) {
+          this.player.debug.warn(`Non-fatal ad error: ${adData.adError.getMessage()}`);
+        }
+
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  /**
+   * Any ad error handling comes through here
+   * @param {Event} event
+   */
+  onAdError = (event) => {
+    this.cancel();
+    this.player.debug.warn('Ads error', event);
+  };
+
+  /**
+   * Setup hooks for Plyr and window events. This ensures
+   * the mid- and post-roll launch at the correct time. And
+   * resize the advertisement when the player resizes
+   */
+  listeners = () => {
+    const { container } = this.player.elements;
+    let time;
+
+    this.player.on('canplay', () => {
+      this.addCuePoints();
+    });
+
+    this.player.on('ended', () => {
+      this.loader.contentComplete();
+    });
+
+    this.player.on('timeupdate', () => {
+      time = this.player.currentTime;
+    });
+
+    this.player.on('seeked', () => {
+      const seekedTime = this.player.currentTime;
+
+      if (is.empty(this.cuePoints)) {
+        return;
+      }
+
+      this.cuePoints.forEach((cuePoint, index) => {
+        if (time < cuePoint && cuePoint < seekedTime) {
+          this.manager.discardAdBreak();
+          this.cuePoints.splice(index, 1);
+        }
+      });
+    });
+
+    // Listen to the resizing of the window. And resize ad accordingly
+    // TODO: eventually implement ResizeObserver
+    window.addEventListener('resize', () => {
+      if (this.manager) {
+        this.manager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);
+      }
+    });
+  };
+
+  /**
+   * Initialize the adsManager and start playing advertisements
+   */
+  play = () => {
+    const { container } = this.player.elements;
+
+    if (!this.managerPromise) {
+      this.resumeContent();
+    }
+
+    // Play the requested advertisement whenever the adsManager is ready
+    this.managerPromise
+      .then(() => {
+        // Set volume to match player
+        this.manager.setVolume(this.player.volume);
+
+        // Initialize the container. Must be done via a user action on mobile devices
+        this.elements.displayContainer.initialize();
+
+        try {
+          if (!this.initialized) {
+            // Initialize the ads manager. Ad rules playlist will start at this time
+            this.manager.init(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);
+
+            // Call play to start showing the ad. Single video and overlay ads will
+            // start at this time; the call will be ignored for ad rules
+            this.manager.start();
+          }
+
+          this.initialized = true;
+        }
+        catch (adError) {
+          // An error may be thrown if there was a problem with the
+          // VAST response
+          this.onAdError(adError);
+        }
+      })
+      .catch(() => {});
+  };
+
+  /**
+   * Resume our video
+   */
+  resumeContent = () => {
+    // Hide the advertisement container
+    this.elements.container.style.zIndex = '';
+
+    // Ad is stopped
+    this.playing = false;
+
+    // Play video
+    silencePromise(this.player.media.play());
+  };
+
+  /**
+   * Pause our video
+   */
+  pauseContent = () => {
+    // Show the advertisement container
+    this.elements.container.style.zIndex = 3;
+
+    // Ad is playing
+    this.playing = true;
+
+    // Pause our video.
+    this.player.media.pause();
+  };
+
+  /**
+   * Destroy the adsManager so we can grab new ads after this. If we don't then we're not
+   * allowed to call new ads based on google policies, as they interpret this as an accidental
+   * video requests. https://developers.google.com/interactive-
+   * media-ads/docs/sdks/android/faq#8
+   */
+  cancel = () => {
+    // Pause our video
+    if (this.initialized) {
+      this.resumeContent();
+    }
+
+    // Tell our instance that we're done for now
+    this.trigger('error');
+
+    // Re-create our adsManager
+    this.loadAds();
+  };
+
+  /**
+   * Re-create our adsManager
+   */
+  loadAds = () => {
+    // Tell our adsManager to go bye bye
+    this.managerPromise
+      .then(() => {
+        // Destroy our adsManager
+        if (this.manager) {
+          this.manager.destroy();
+        }
+
+        // Re-set our adsManager promises
+        this.managerPromise = new Promise((resolve) => {
+          this.on('loaded', resolve);
+          this.player.debug.log(this.manager);
+        });
+        // Now that the manager has been destroyed set it to also be un-initialized
+        this.initialized = false;
+
+        // Now request some new advertisements
+        this.requestAds();
+      })
+      .catch(() => {});
+  };
+
+  /**
+   * Handles callbacks after an ad event was invoked
+   * @param {string} event - Event type
+   * @param args
+   */
+  trigger = (event, ...args) => {
+    const handlers = this.events[event];
+
+    if (is.array(handlers)) {
+      handlers.forEach((handler) => {
+        if (is.function(handler)) {
+          handler.apply(this, args);
+        }
+      });
+    }
+  };
+
+  /**
+   * Add event listeners
+   * @param {string} event - Event type
+   * @param {Function} callback - Callback for when event occurs
+   * @return {Ads}
+   */
+  on = (event, callback) => {
+    if (!is.array(this.events[event])) {
+      this.events[event] = [];
+    }
+
+    this.events[event].push(callback);
+
+    return this;
+  };
+
+  /**
+   * Setup a safety timer for when the ad network doesn't respond for whatever reason.
+   * The advertisement has 12 seconds to get its things together. We stop this timer when the
+   * advertisement is playing, or when a user action is required to start, then we clear the
+   * timer on ad ready
+   * @param {number} time
+   * @param {string} from
+   */
+  startSafetyTimer = (time, from) => {
+    this.player.debug.log(`Safety timer invoked from: ${from}`);
+
+    this.safetyTimer = setTimeout(() => {
+      this.cancel();
+      this.clearSafetyTimer('startSafetyTimer()');
+    }, time);
+  };
+
+  /**
+   * Clear our safety timer(s)
+   * @param {string} from
+   */
+  clearSafetyTimer = (from) => {
+    if (!is.nullOrUndefined(this.safetyTimer)) {
+      this.player.debug.log(`Safety timer cleared from: ${from}`);
+
+      clearTimeout(this.safetyTimer);
+      this.safetyTimer = null;
+    }
+  };
+}
+
+export default Ads;