media-container.js

  1. import { queryOne } from '@ecl/dom-utils';
  3. /**
  4.  * @param {HTMLElement} element DOM element for component instantiation and scope
  5.  * @param {Object} options
  6.  * @param {String} options.iframeSelector Selector for iframe element
  7.  * @param {boolean} options.useAutomaticRatio Toggle automatic ratio calculus
  8.  * @param {String} options.videoTitleSelector Selector for video title
  9.  */
  10. export class MediaContainer {
  11.   /**
  12.    * @static
  13.    * Shorthand for instance creation and initialisation.
  14.    *
  15.    * @param {HTMLElement} root DOM element for component instantiation and scope
  16.    *
  17.    * @return {MediaContainer} An instance of MediaContainer.
  18.    */
  19.   static autoInit(root, { MEDIA_CONTAINER: defaultOptions = {} } = {}) {
  20.     const mediaContainer = new MediaContainer(root, defaultOptions);
  21.     mediaContainer.init();
  22.     root.ECLMediaContainer = mediaContainer;
  23.     return mediaContainer;
  24.   }
  26.   constructor(
  27.     element,
  28.     {
  29.       iframeSelector = 'iframe',
  30.       useAutomaticRatio = true,
  31.       videoTitleSelector = 'data-ecl-media-container-video-title',
  32.     } = {},
  33.   ) {
  34.     // Check element
  35.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  36.       throw new TypeError(
  37.         'DOM element should be given to initialize this widget.',
  38.       );
  39.     }
  41.     this.element = element;
  43.     // Options
  44.     this.iframeSelector = iframeSelector;
  45.     this.useAutomaticRatio = useAutomaticRatio;
  46.     this.videoTitleSelector = videoTitleSelector;
  48.     // Private variables
  49.     this.iframe = null;
  50.     this.videoTitle = '';
  52.     // Bind `this` for use in callbacks
  53.     this.calculateRatio = this.calculateRatio.bind(this);
  54.     this.handleParameters = this.handleParameters.bind(this);
  55.   }
  57.   /**
  58.    * Initialise component.
  59.    */
  60.   init() {
  61.     if (!ECL) {
  62.       throw new TypeError('Called init but ECL is not present');
  63.     }
  64.     ECL.components = ECL.components || new Map();
  66.     // Get elements
  67.     this.videoTitle = this.element.getAttribute(this.videoTitleSelector);
  69.     // Check if a ratio has been set manually
  70.     const media = queryOne('.ecl-media-container__media', this.element);
  71.     if (media && !/ecl-media-container__media--ratio/.test(media.className)) {
  72.       // Get the iframe
  73.       this.iframe = queryOne(this.iframeSelector, this.element);
  75.       // Check if there is an iframe to handle
  76.       if (this.iframe) {
  77.         this.handleParameters();
  78.         if (this.useAutomaticRatio) this.calculateRatio();
  79.       }
  80.     }
  82.     // Set ecl initialized attribute
  83.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  84.     ECL.components.set(this.element, this);
  85.   }
  87.   /**
  88.    * Destroy component.
  89.    */
  90.   destroy() {
  91.     if (this.element) {
  92.       this.element.removeAttribute('data-ecl-auto-initialized');
  93.       ECL.components.delete(this.element);
  94.     }
  95.   }
  97.   /**
  98.    * Handle the parameters of the iframe video.
  99.    */
  100.   handleParameters() {
  101.     const iframeUrl = new URL(this.iframe.src);
  103.     // Youtube
  104.     if (iframeUrl.host.includes('youtube')) {
  105.       this.iframe.src = iframeUrl;
  106.     }
  108.     // Update iframe title
  109.     if (this.videoTitle) {
  110.       this.iframe.setAttribute('title', this.videoTitle);
  111.     }
  112.   }
  114.   /**
  115.    * Calculate the ratio of the iframe video.
  116.    */
  117.   calculateRatio() {
  118.     // Get dimension if they are provided
  119.     let iframeWidth = this.iframe.width;
  120.     let iframeHeight = this.iframe.height;
  122.     // If at least one dimension in not provided, calculate them (less reliable)
  123.     if (!iframeWidth || !iframeHeight) {
  124.       iframeWidth = this.iframe.offsetWidth;
  125.       iframeHeight = this.iframe.offsetHeight;
  126.     }
  128.     // Set aspect ratio
  129.     this.iframe.style.aspectRatio = `${iframeWidth}/${iframeHeight}`;
  130.   }
  131. }
  133. export default MediaContainer;