cloudinary-video-player 2.6.1-edge.0 → 2.6.1-edge.2

package/dist/interaction-areas.light.js

@@ -1,646 +0,0 @@
-(self["cloudinaryVideoPlayerChunkLoading"] = self["cloudinaryVideoPlayerChunkLoading"] || []).push([["interaction-areas"],{
-
-/***/ "./components/themeButton/themedButton.const.js":
-/*!******************************************************!*\
-  !*** ./components/themeButton/themedButton.const.js ***!
-  \******************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   BUTTON_THEME: () => (/* binding */ BUTTON_THEME)
-/* harmony export */ });
-const BUTTON_THEME = {
-  TRANSPARENT_WHITE: 'transparent-white'
-};
-
-/***/ }),
-
-/***/ "./components/themeButton/themedButton.js":
-/*!************************************************!*\
-  !*** ./components/themeButton/themedButton.js ***!
-  \************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   themedButton: () => (/* binding */ themedButton)
-/* harmony export */ });
-/* harmony import */ var _utils_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../utils/dom */ "./utils/dom.js");
-
-const themedButton = _ref => {
-  let {
-    text,
-    onClick,
-    theme = '',
-    loadingDelay = 0
-  } = _ref;
-  return (0,_utils_dom__WEBPACK_IMPORTED_MODULE_0__.elementsCreator)({
-    tag: 'button',
-    attr: {
-      class: `vp-theme-button theme-${theme}`
-    },
-    onClick,
-    children: [{
-      tag: 'div',
-      attr: {
-        class: 'vp-loading-bar'
-      },
-      style: {
-        'animation-duration': `${loadingDelay}ms`
-      }
-    }, {
-      tag: 'div',
-      attr: {
-        class: 'content'
-      },
-      children: text
-    }]
-  });
-};
-
-/***/ }),
-
-/***/ "./plugins/interaction-areas/interaction-areas.const.js":
-/*!**************************************************************!*\
-  !*** ./plugins/interaction-areas/interaction-areas.const.js ***!
-  \**************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   CLOSE_INTERACTION_AREA_LAYOUT_DELAY: () => (/* binding */ CLOSE_INTERACTION_AREA_LAYOUT_DELAY),
-/* harmony export */   DEFAULT_INTERACTION_ARE_TRANSITION: () => (/* binding */ DEFAULT_INTERACTION_ARE_TRANSITION),
-/* harmony export */   INTERACTION_AREAS_CONTAINER_CLASS_NAME: () => (/* binding */ INTERACTION_AREAS_CONTAINER_CLASS_NAME),
-/* harmony export */   INTERACTION_AREAS_PREFIX: () => (/* binding */ INTERACTION_AREAS_PREFIX),
-/* harmony export */   INTERACTION_AREAS_TEMPLATE: () => (/* binding */ INTERACTION_AREAS_TEMPLATE),
-/* harmony export */   INTERACTION_AREAS_THEME: () => (/* binding */ INTERACTION_AREAS_THEME),
-/* harmony export */   INTERACTION_AREA_HAND_ICON: () => (/* binding */ INTERACTION_AREA_HAND_ICON),
-/* harmony export */   INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME: () => (/* binding */ INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME),
-/* harmony export */   TEMPLATE_INTERACTION_AREAS_VTT: () => (/* binding */ TEMPLATE_INTERACTION_AREAS_VTT)
-/* harmony export */ });
-const INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME = 'cld-ia-layout-state';
-const INTERACTION_AREAS_PREFIX = 'vp-ia';
-const INTERACTION_AREAS_CONTAINER_CLASS_NAME = 'interaction-areas-container';
-const INTERACTION_AREAS_TEMPLATE = {
-  PORTRAIT: 'portrait',
-  LANDSCAPE: 'landscape',
-  All: 'all',
-  CENTER: 'center'
-};
-const INTERACTION_AREAS_THEME = {
-  PULSING: 'pulsing',
-  SHADOWED: 'shadowed'
-};
-const TEMPLATE_INTERACTION_AREAS_VTT = {
-  [INTERACTION_AREAS_TEMPLATE.PORTRAIT]: 'https://res.cloudinary.com/prod/raw/upload/v1623772481/video-player/vtts/portrait.vtt',
-  [INTERACTION_AREAS_TEMPLATE.LANDSCAPE]: 'https://res.cloudinary.com/prod/raw/upload/v1623772303/video-player/vtts/landscape.vtt',
-  [INTERACTION_AREAS_TEMPLATE.All]: 'https://res.cloudinary.com/prod/raw/upload/v1623250266/video-player/vtts/all.vtt',
-  [INTERACTION_AREAS_TEMPLATE.CENTER]: 'https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt'
-};
-const INTERACTION_AREA_HAND_ICON = 'https://res.cloudinary.com/prod/image/upload/v1626764643/video-player/interaction-area-hand.svg';
-const CLOSE_INTERACTION_AREA_LAYOUT_DELAY = 4500;
-const DEFAULT_INTERACTION_ARE_TRANSITION = 250;
-
-/***/ }),
-
-/***/ "./plugins/interaction-areas/interaction-areas.service.js":
-/*!****************************************************************!*\
-  !*** ./plugins/interaction-areas/interaction-areas.service.js ***!
-  \****************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   interactionAreasService: () => (/* binding */ interactionAreasService)
-/* harmony export */ });
-/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ "../node_modules/video.js/dist/alt/video.core-exposed.js");
-/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var lodash_get__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/get */ "../node_modules/lodash/get.js");
-/* harmony import */ var lodash_get__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_get__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/throttle */ "../node_modules/lodash/throttle.js");
-/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lodash/noop */ "../node_modules/lodash/noop.js");
-/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lodash_noop__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _interaction_areas_const__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./interaction-areas.const */ "./plugins/interaction-areas/interaction-areas.const.js");
-/* harmony import */ var _interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./interaction-areas.utils */ "./plugins/interaction-areas/interaction-areas.utils.js");
-/* harmony import */ var _utils_dom__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/dom */ "./utils/dom.js");
-/* harmony import */ var _video_player_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../video-player.utils */ "./video-player.utils.js");
-/* harmony import */ var _utils_consts__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/consts */ "./utils/consts.js");
-/* harmony import */ var _interaction_areas_scss__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./interaction-areas.scss */ "./plugins/interaction-areas/interaction-areas.scss");
-
-
-
-
-
-
-
-
-
-
-const interactionAreasService = (player, playerOptions, videojsOptions) => {
-  let isZoomed = false;
-  let currentSource = null;
-  let currentTrack = null;
-  let unZoom = (lodash_noop__WEBPACK_IMPORTED_MODULE_3___default());
-  const shouldLayoutMessage = () => (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.shouldShowAreaLayoutMessage)(videojsOptions.interactionDisplay);
-  const getIsSyncOffsetTime = () => {
-    const interactionAreasConfig = getInteractionAreasConfig();
-    return interactionAreasConfig && interactionAreasConfig.syncOffsetTime !== undefined ? interactionAreasConfig.syncOffsetTime : false;
-  };
-  function isInteractionAreasEnabled() {
-    let enabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    const interactionAreasConfig = getInteractionAreasConfig();
-    return enabled || interactionAreasConfig && interactionAreasConfig.enable;
-  }
-  function setAreasPositionListener() {
-    currentTrack && player.videojs.removeRemoteTextTrack(currentTrack);
-    const isEnabled = isInteractionAreasEnabled();
-    const interactionAreasConfig = getInteractionAreasConfig();
-    if (!isEnabled || isZoomed) {
-      return null;
-    }
-    if (Array.isArray(interactionAreasConfig.template)) {
-      addInteractionAreasItems(interactionAreasConfig.template);
-      setContainerSize();
-    } else {
-      const vttUrl = interactionAreasConfig.vttUrl || _interaction_areas_const__WEBPACK_IMPORTED_MODULE_4__.TEMPLATE_INTERACTION_AREAS_VTT[interactionAreasConfig.template];
-      if (vttUrl) {
-        currentTrack = (0,_video_player_utils__WEBPACK_IMPORTED_MODULE_7__.addMetadataTrack)(player.videojs, vttUrl);
-        addCueListener(currentTrack);
-      }
-    }
-  }
-  function setGoBackButton() {
-    const button = (0,_utils_dom__WEBPACK_IMPORTED_MODULE_6__.createElement)('div', {
-      'class': 'go-back-button'
-    });
-    button.addEventListener('click', () => {
-      unZoom();
-    }, false);
-    const tracksContainer = (0,_utils_dom__WEBPACK_IMPORTED_MODULE_6__.createElement)('div', {
-      'class': _interaction_areas_const__WEBPACK_IMPORTED_MODULE_4__.INTERACTION_AREAS_CONTAINER_CLASS_NAME
-    }, button);
-    (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.setInteractionAreasContainer)(player.videojs, tracksContainer);
-  }
-  function getInteractionAreasConfig() {
-    const {
-      cldSrc
-    } = currentSource;
-    return cldSrc && cldSrc.getInteractionAreas();
-  }
-  function removeLayoutMessage() {
-    (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.removeInteractionAreasContainer)(player.videojs);
-    setAreasPositionListener();
-    player.play();
-  }
-  function setLayoutMessage() {
-    if (!isInteractionAreasEnabled()) {
-      return;
-    }
-    if (shouldLayoutMessage()) {
-      let layoutMessageTimout = null;
-      const showItAgainCheckbox = lodash_get__WEBPACK_IMPORTED_MODULE_1___default()(videojsOptions, 'interactionDisplay.layout.showAgain', false);
-      player.pause();
-      (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.createInteractionAreaLayoutMessage)(player.videojs, () => {
-        clearTimeout(layoutMessageTimout);
-        removeLayoutMessage();
-      }, showItAgainCheckbox);
-      if (!showItAgainCheckbox) {
-        layoutMessageTimout = setTimeout(removeLayoutMessage, _interaction_areas_const__WEBPACK_IMPORTED_MODULE_4__.CLOSE_INTERACTION_AREA_LAYOUT_DELAY);
-      }
-    } else {
-      removeLayoutMessage();
-    }
-  }
-  function handleAds() {
-    player.on('adsready', () => {
-      player.videojs.ima.addEventListener(window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED, setLayoutMessage);
-    });
-  }
-  function init() {
-    currentSource = currentSource || player.videojs.currentSource();
-    if (isInteractionAreasEnabled()) {
-      player.videojs.el().classList.add('interaction-areas');
-      player.videojs.one(_utils_consts__WEBPACK_IMPORTED_MODULE_8__.PLAYER_EVENT.PLAY, () => {
-        if (typeof player.videojs.ima === 'object') {
-          handleAds();
-        } else {
-          setLayoutMessage();
-        }
-      });
-      const setInteractionAreasContainerSize = lodash_throttle__WEBPACK_IMPORTED_MODULE_2___default()(setContainerSize, 100);
-      player.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_8__.PLAYER_EVENT.FULL_SCREEN_CHANGE, () => {
-        // waiting for fullscreen will end
-        setTimeout(setInteractionAreasContainerSize, 100);
-      });
-      const resizeDestroy = (0,_utils_dom__WEBPACK_IMPORTED_MODULE_6__.addEventListener)(window, 'resize', setContainerSize, false);
-      player.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_8__.PLAYER_EVENT.DISPOSE, resizeDestroy);
-    }
-    player.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_8__.PLAYER_EVENT.ENDED, () => {
-      unZoom();
-    });
-    player.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_8__.PLAYER_EVENT.ERROR, () => {
-      player.pause();
-    });
-  }
-  function onZoom(src, newOption, item) {
-    const originalCurrentTime = player.currentTime();
-    const isSyncOffsetTime = getIsSyncOffsetTime();
-    const {
-      cldSrc
-    } = currentSource;
-    const currentSrcOptions = cldSrc.getInitOptions();
-    const option = newOption || {
-      transformation: currentSrcOptions.transformation
-    };
-    const transformation = !src && (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.getZoomTransformation)(player.videoElement, item);
-    const sourceOptions = transformation ? video_js__WEBPACK_IMPORTED_MODULE_0___default().obj.merge({
-      transformation
-    }, option) : option;
-    const newSource = cldSrc.isRawUrl ? currentSource.src : {
-      publicId: cldSrc.publicId()
-    };
-    player.source(transformation ? {
-      publicId: cldSrc.publicId()
-    } : src, sourceOptions).play();
-    isSyncOffsetTime && player.currentTime(originalCurrentTime);
-    isZoomed = true;
-    setGoBackButton();
-    unZoom = () => {
-      if (isZoomed) {
-        isZoomed = false;
-        const currentZoomedTime = player.currentTime();
-        const duration = player.duration();
-        player.source(newSource, currentSrcOptions).play();
-        isSyncOffsetTime && currentZoomedTime < duration && player.currentTime(currentZoomedTime);
-        setAreasPositionListener();
-      }
-    };
-  }
-  function onInteractionAreasClick(_ref) {
-    let {
-      event,
-      item,
-      index
-    } = _ref;
-    const interactionAreasConfig = getInteractionAreasConfig();
-    interactionAreasConfig.onClick && interactionAreasConfig.onClick({
-      item,
-      index,
-      event,
-      zoom: (source, option) => {
-        onZoom(source, option, item);
-      }
-    });
-  }
-  function addInteractionAreasItems(interactionAreasData, previousInteractionAreasData) {
-    let durationTime = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    const configs = {
-      playerOptions: playerOptions,
-      videojsOptions: videojsOptions
-    };
-    if (previousInteractionAreasData) {
-      (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.updateInteractionAreasItem)(player.videojs, configs, interactionAreasData, previousInteractionAreasData, durationTime, onInteractionAreasClick);
-    } else {
-      const interactionAreasItems = interactionAreasData.map((item, index) => {
-        return (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.getInteractionAreaItem)(configs, item, index, durationTime, event => {
-          onInteractionAreasClick({
-            event,
-            item,
-            index
-          });
-        });
-      });
-      (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.setInteractionAreasContainer)(player.videojs, (0,_utils_dom__WEBPACK_IMPORTED_MODULE_6__.createElement)('div', {
-        'class': _interaction_areas_const__WEBPACK_IMPORTED_MODULE_4__.INTERACTION_AREAS_CONTAINER_CLASS_NAME
-      }, interactionAreasItems));
-    }
-  }
-  function setContainerSize() {
-    if (isInteractionAreasEnabled()) {
-      (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.setInteractionAreasContainerSize)(player.videojs, player.videoElement);
-    }
-  }
-  function addCueListener(track) {
-    if (!track) {
-      return;
-    }
-    let previousTracksData = null;
-    track.addEventListener('cuechange', () => {
-      const activeCue = track.activeCues && track.activeCues[0];
-      if (activeCue) {
-        const durationTime = Math.max(Math.floor((activeCue.endTime - activeCue.startTime) * 1000), _interaction_areas_const__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_INTERACTION_ARE_TRANSITION);
-        const tracksData = JSON.parse(activeCue.text);
-        addInteractionAreasItems(tracksData, previousTracksData, durationTime);
-        !previousTracksData && setContainerSize();
-        previousTracksData = tracksData;
-      } else {
-        (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.removeInteractionAreasContainer)(player.videojs);
-        previousTracksData = null;
-      }
-    });
-  }
-  init();
-};
-
-/***/ }),
-
-/***/ "./plugins/interaction-areas/interaction-areas.utils.js":
-/*!**************************************************************!*\
-  !*** ./plugins/interaction-areas/interaction-areas.utils.js ***!
-  \**************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   createInteractionAreaLayoutMessage: () => (/* binding */ createInteractionAreaLayoutMessage),
-/* harmony export */   getInteractionAreaItem: () => (/* binding */ getInteractionAreaItem),
-/* harmony export */   getZoomTransformation: () => (/* binding */ getZoomTransformation),
-/* harmony export */   percentageToFixedValue: () => (/* binding */ percentageToFixedValue),
-/* harmony export */   removeInteractionAreasContainer: () => (/* binding */ removeInteractionAreasContainer),
-/* harmony export */   setInteractionAreasContainer: () => (/* binding */ setInteractionAreasContainer),
-/* harmony export */   setInteractionAreasContainerSize: () => (/* binding */ setInteractionAreasContainerSize),
-/* harmony export */   shouldShowAreaLayoutMessage: () => (/* binding */ shouldShowAreaLayoutMessage),
-/* harmony export */   updateInteractionAreasItem: () => (/* binding */ updateInteractionAreasItem)
-/* harmony export */ });
-/* harmony import */ var lodash_get__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash/get */ "../node_modules/lodash/get.js");
-/* harmony import */ var lodash_get__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_get__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/noop */ "../node_modules/lodash/noop.js");
-/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_noop__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _utils_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/dom */ "./utils/dom.js");
-/* harmony import */ var _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./interaction-areas.const */ "./plugins/interaction-areas/interaction-areas.const.js");
-/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../colors */ "./plugins/colors/index.js");
-/* harmony import */ var _components_themeButton_themedButton__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../components/themeButton/themedButton */ "./components/themeButton/themedButton.js");
-/* harmony import */ var _components_themeButton_themedButton_const__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../components/themeButton/themedButton.const */ "./components/themeButton/themedButton.const.js");
-
-
-
-
-
-
-
-const getInteractionAreaItemId = (item, index) => item.id || item.type || `id_${index}`;
-const getInteractionAreaItem = (_ref, item, index, durationTime, onClick) => {
-  let {
-    playerOptions,
-    videojsOptions
-  } = _ref;
-  const defaultColor = (0,_colors__WEBPACK_IMPORTED_MODULE_4__.getDefaultPlayerColor)(videojsOptions);
-  const accentColor = playerOptions && playerOptions.colors ? playerOptions.colors.accent : defaultColor.accent;
-
-  // theme = 'pulsing' / 'shadowed'
-  const theme = lodash_get__WEBPACK_IMPORTED_MODULE_0___default()(videojsOptions, 'interactionDisplay.theme.template', _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_THEME.PULSING);
-  return (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.elementsCreator)({
-    tag: 'div',
-    attr: {
-      class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-item theme-${theme}`,
-      'data-id': getInteractionAreaItemId(item, index)
-    },
-    style: {
-      left: `${item.left}%`,
-      top: `${item.top}%`,
-      width: `${item.width}%`,
-      height: `${item.height}%`,
-      transitionDuration: `${durationTime}ms`
-    },
-    event: {
-      name: 'click',
-      callback: onClick
-    },
-    children: [{
-      tag: 'div',
-      attr: {
-        class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-area-marker`
-      },
-      children: [{
-        tag: 'div',
-        attr: {
-          class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-marker-shadow`
-        },
-        style: {
-          [theme === _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_THEME.SHADOWED ? 'backgroundColor' : 'borderColor']: accentColor
-        }
-      }, {
-        tag: 'div',
-        attr: {
-          class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-marker-main`
-        },
-        style: {
-          borderColor: accentColor
-        }
-      }]
-    }]
-  });
-};
-const percentageToFixedValue = (outOf, value) => outOf / (100 / +value);
-const getZoomTransformation = (videoElement, interactionAreaItem) => {
-  const {
-    videoHeight,
-    videoWidth
-  } = videoElement;
-  const itemX = percentageToFixedValue(videoWidth, interactionAreaItem.left);
-  const itemY = percentageToFixedValue(videoHeight, interactionAreaItem.top);
-  const itemWidth = percentageToFixedValue(videoWidth, interactionAreaItem.width);
-  const itemHeight = percentageToFixedValue(videoHeight, interactionAreaItem.height);
-  const videoAspectRatio = videoWidth / videoHeight;
-  const itemAspectRatio = itemWidth / itemHeight;
-  const width = Math.round(itemAspectRatio > 1 || videoAspectRatio > 1 ? itemHeight * itemAspectRatio : itemWidth);
-  const height = Math.round(width / videoAspectRatio);
-  const x = Math.round(itemX - (width - itemWidth) / 2);
-  const y = Math.round(itemY - (height - itemHeight) / 2);
-  return {
-    width,
-    height,
-    x: Math.min(Math.max(x, 0), videoWidth - width),
-    y: Math.min(Math.max(y, 0), videoHeight - height),
-    crop: 'crop'
-  };
-};
-const setInteractionAreasContainer = (videojs, newInteractionAreasContainer) => {
-  const currentInteractionAreasContainer = getInteractionAreasContainer(videojs);
-  if (currentInteractionAreasContainer) {
-    currentInteractionAreasContainer.replaceWith(newInteractionAreasContainer);
-  } else {
-    // do not use element.append for ie11 support
-    videojs.el().appendChild(newInteractionAreasContainer);
-  }
-};
-const getInteractionAreaElementById = (interactionAreasContainer, item, index) => interactionAreasContainer.querySelector(`[data-id=${getInteractionAreaItemId(item, index)}]`);
-const updateInteractionAreasItem = (videojs, configs, interactionAreasData, previousInteractionAreasData, durationTime, onClick) => {
-  const interactionAreasContainer = getInteractionAreasContainer(videojs);
-  interactionAreasData.forEach((item, index) => {
-    const itemElement = getInteractionAreaElementById(interactionAreasContainer, item, index);
-    const itemId = getInteractionAreaItemId(item);
-    const isExistItem = previousInteractionAreasData.some(i => getInteractionAreaItemId(i) === itemId);
-
-    // in case the element of the item is in the dom and exist in the previous data , it update the element position
-    if (isExistItem && itemElement) {
-      (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.styleElement)(itemElement, {
-        left: `${item.left}%`,
-        top: `${item.top}%`,
-        width: `${item.width}%`,
-        height: `${item.height}%`,
-        transitionDuration: `${durationTime}ms`
-      });
-      // if the element did not exist before , not in the dom and not in the previous data , it add a new element
-    } else if (!isExistItem && !itemElement) {
-      // do not use element.append for ie11 support
-      interactionAreasContainer.appendChild(getInteractionAreaItem(configs, item, index, durationTime, event => {
-        onClick({
-          event,
-          item,
-          index
-        });
-      }));
-    }
-  });
-
-  // checking the previous data for element that should be removed if not exist in the new data object.
-  previousInteractionAreasData.forEach((item, index) => {
-    const itemElement = getInteractionAreaElementById(interactionAreasContainer, item, index);
-    const itemId = getInteractionAreaItemId(item);
-    const shouldBeRemoved = !interactionAreasData.some(i => getInteractionAreaItemId(i) === itemId);
-    if (itemElement && shouldBeRemoved) {
-      // do not use element.remove for ie11 support
-      itemElement.parentNode.removeChild(itemElement);
-    }
-  });
-};
-const shouldShowAreaLayoutMessage = interactionAreasConfig => {
-  const isLayoutEnabled = lodash_get__WEBPACK_IMPORTED_MODULE_0___default()(interactionAreasConfig, 'layout.enable', true);
-  return isLayoutEnabled && localStorage.getItem(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME) !== 'true';
-};
-const onClickInteractionAreaLayoutClick = function (checked) {
-  let onClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (lodash_noop__WEBPACK_IMPORTED_MODULE_1___default());
-  localStorage.setItem(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME, JSON.parse(checked));
-  onClick();
-};
-const createInteractionAreaLayoutMessage = function (videojs, onClick) {
-  let showItAgainCheckbox = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  let checked = false;
-  const id = `checkbox_${Math.round(Math.random() * 10000)}`;
-  const tracksContainer = (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.elementsCreator)({
-    tag: 'div',
-    attr: {
-      class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_CONTAINER_CLASS_NAME} ${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message ${showItAgainCheckbox ? '' : 'clickable'}`
-    },
-    onClick: !showItAgainCheckbox ? () => onClickInteractionAreaLayoutClick(checked, onClick) : null,
-    children: [{
-      tag: 'img',
-      attr: {
-        class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-icon`,
-        src: _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREA_HAND_ICON
-      }
-    }, {
-      tag: 'h3',
-      attr: {
-        class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-title`
-      },
-      children: 'Tap on dots to zoom for a product.'
-    }, (0,_components_themeButton_themedButton__WEBPACK_IMPORTED_MODULE_5__.themedButton)({
-      text: 'Got it',
-      theme: _components_themeButton_themedButton_const__WEBPACK_IMPORTED_MODULE_6__.BUTTON_THEME.TRANSPARENT_WHITE,
-      loadingDelay: showItAgainCheckbox ? 0 : _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.CLOSE_INTERACTION_AREA_LAYOUT_DELAY,
-      onClick: showItAgainCheckbox ? () => onClickInteractionAreaLayoutClick(checked, onClick) : null
-    }), showItAgainCheckbox && {
-      tag: 'div',
-      attr: {
-        class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-do-not-show`
-      },
-      children: [{
-        tag: 'input',
-        attr: {
-          type: 'checkbox',
-          class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-checkbox`,
-          id
-        },
-        event: {
-          name: 'input',
-          callback: event => {
-            checked = event.target.checked;
-          }
-        }
-      }, {
-        tag: 'label',
-        attr: {
-          class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-checkbox-title`,
-          for: id
-        },
-        children: 'Don׳t show it again'
-      }]
-    }].filter(i => i)
-  });
-  setInteractionAreasContainer(videojs, tracksContainer);
-};
-const getInteractionAreasContainer = videojs => videojs.el().querySelector(`.${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_CONTAINER_CLASS_NAME}`);
-const removeInteractionAreasContainer = videojs => {
-  const interactionAreasContainer = getInteractionAreasContainer(videojs);
-
-  // do not use element.remove for ie11 support
-  interactionAreasContainer && interactionAreasContainer.parentNode.removeChild(interactionAreasContainer);
-};
-const setInteractionAreasContainerSize = (videojs, videoElement) => {
-  const interactionAreasContainer = getInteractionAreasContainer(videojs);
-  if (!interactionAreasContainer) {
-    return;
-  }
-  const {
-    videoHeight,
-    videoWidth
-  } = videoElement;
-  const videoAspectRatio = videoWidth / videoHeight;
-  const width = videoAspectRatio * videoElement.clientHeight;
-  interactionAreasContainer.style.width = `${videoElement.clientWidth < width ? '100%' : width}px`;
-  interactionAreasContainer.style.height = videoElement.clientWidth < width ? `${videoElement.clientWidth / videoAspectRatio}px` : '100%';
-};
-
-/***/ }),
-
-/***/ "../node_modules/lodash/noop.js":
-/*!**************************************!*\
-  !*** ../node_modules/lodash/noop.js ***!
-  \**************************************/
-/***/ ((module) => {
-
-/**
- * This method returns `undefined`.
- *
- * @static
- * @memberOf _
- * @since 2.3.0
- * @category Util
- * @example
- *
- * _.times(2, _.noop);
- * // => [undefined, undefined]
- */
-function noop() {
-  // No operation performed.
-}
-
-module.exports = noop;
-
-
-/***/ }),
-
-/***/ "./plugins/interaction-areas/interaction-areas.scss":
-/*!**********************************************************!*\
-  !*** ./plugins/interaction-areas/interaction-areas.scss ***!
-  \**********************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-// extracted by mini-css-extract-plugin
-
-
-/***/ })
-
-}]);
-//# sourceMappingURL=interaction-areas.light.js.map

package/dist/interaction-areas.light.min.js

@@ -1,2 +0,0 @@
-(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[404],{9017:(t,e,n)=>{"use strict";n.d(e,{F0:()=>r,Fg:()=>a,IT:()=>s,T$:()=>l,Vv:()=>d,Yx:()=>c,be:()=>o,q3:()=>u,sb:()=>i});const i="cld-ia-layout-state",o="vp-ia",a="interaction-areas-container",r={PORTRAIT:"portrait",LANDSCAPE:"landscape",All:"all",CENTER:"center"},s={PULSING:"pulsing",SHADOWED:"shadowed"},c={[r.PORTRAIT]:"https://res.cloudinary.com/prod/raw/upload/v1623772481/video-player/vtts/portrait.vtt",[r.LANDSCAPE]:"https://res.cloudinary.com/prod/raw/upload/v1623772303/video-player/vtts/landscape.vtt",[r.All]:"https://res.cloudinary.com/prod/raw/upload/v1623250266/video-player/vtts/all.vtt",[r.CENTER]:"https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt"},l="https://res.cloudinary.com/prod/image/upload/v1626764643/video-player/interaction-area-hand.svg",d=4500,u=250},1066:(t,e,n)=>{"use strict";n.d(e,{interactionAreasService:()=>C});var i=n(6673),o=n.n(i),a=n(2832),r=n.n(a),s=n(2858),c=n.n(s),l=n(5114),d=n.n(l),u=n(9017),v=n(7134),p=n(4500);const h=t=>{let{text:e,onClick:n,theme:i="",loadingDelay:o=0}=t;return(0,v.It)({tag:"button",attr:{class:`vp-theme-button theme-${i}`},onClick:n,children:[{tag:"div",attr:{class:"vp-loading-bar"},style:{"animation-duration":`${o}ms`}},{tag:"div",attr:{class:"content"},children:e}]})},f="transparent-white",m=(t,e)=>t.id||t.type||`id_${e}`,g=(t,e,n,i,o)=>{let{playerOptions:a,videojsOptions:s}=t;const c=(0,p.w)(s),l=a&&a.colors?a.colors.accent:c.accent,d=r()(s,"interactionDisplay.theme.template",u.IT.PULSING);return(0,v.It)({tag:"div",attr:{class:`${u.be}-item theme-${d}`,"data-id":m(e,n)},style:{left:`${e.left}%`,top:`${e.top}%`,width:`${e.width}%`,height:`${e.height}%`,transitionDuration:`${i}ms`},event:{name:"click",callback:o},children:[{tag:"div",attr:{class:`${u.be}-area-marker`},children:[{tag:"div",attr:{class:`${u.be}-marker-shadow`},style:{[d===u.IT.SHADOWED?"backgroundColor":"borderColor"]:l}},{tag:"div",attr:{class:`${u.be}-marker-main`},style:{borderColor:l}}]}]})},y=(t,e)=>t/(100/+e),b=(t,e)=>{const n=x(t);n?n.replaceWith(e):t.el().appendChild(e)},T=(t,e,n)=>t.querySelector(`[data-id=${m(e,n)}]`),$=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:d();localStorage.setItem(u.sb,JSON.parse(t)),e()},x=t=>t.el().querySelector(`.${u.Fg}`),E=t=>{const e=x(t);e&&e.parentNode.removeChild(e)};var w=n(8838),k=n(1104);const C=(t,e,n)=>{let i=!1,a=null,s=null,l=d();const p=()=>{return t=n.interactionDisplay,r()(t,"layout.enable",!0)&&"true"!==localStorage.getItem(u.sb);var t},C=()=>{const t=D();return!(!t||void 0===t.syncOffsetTime)&&t.syncOffsetTime};function j(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const e=D();return t||e&&e.enable}function A(){s&&t.videojs.removeRemoteTextTrack(s);const e=j(),n=D();if(!e||i)return null;if(Array.isArray(n.template))L(n.template),M();else{const e=n.vttUrl||u.Yx[n.template];e&&(s=(0,w.eo)(t.videojs,e),function(e){if(!e)return;let n=null;e.addEventListener("cuechange",(()=>{const i=e.activeCues&&e.activeCues[0];if(i){const t=Math.max(Math.floor(1e3*(i.endTime-i.startTime)),u.q3),e=JSON.parse(i.text);L(e,n,t),!n&&M(),n=e}else E(t.videojs),n=null}))}(s))}}function D(){const{cldSrc:t}=a;return t&&t.getInteractionAreas()}function I(){E(t.videojs),A(),t.play()}function S(){if(j())if(p()){let e=null;const i=r()(n,"interactionDisplay.layout.showAgain",!1);t.pause(),function(t,e){let n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=!1;const o=`checkbox_${Math.round(1e4*Math.random())}`,a=(0,v.It)({tag:"div",attr:{class:`${u.Fg} ${u.be}-layout-message ${n?"":"clickable"}`},onClick:n?null:()=>$(i,e),children:[{tag:"img",attr:{class:`${u.be}-layout-icon`,src:u.T$}},{tag:"h3",attr:{class:`${u.be}-layout-message-title`},children:"Tap on dots to zoom for a product."},h({text:"Got it",theme:f,loadingDelay:n?0:u.Vv,onClick:n?()=>$(i,e):null}),n&&{tag:"div",attr:{class:`${u.be}-layout-message-do-not-show`},children:[{tag:"input",attr:{type:"checkbox",class:`${u.be}-layout-message-checkbox`,id:o},event:{name:"input",callback:t=>{i=t.target.checked}}},{tag:"label",attr:{class:`${u.be}-layout-message-checkbox-title`,for:o},children:"Don׳t show it again"}]}].filter((t=>t))});b(t,a)}(t.videojs,(()=>{clearTimeout(e),I()}),i),i||(e=setTimeout(I,u.Vv))}else I()}function O(e,n,r){const s=t.currentTime(),c=C(),{cldSrc:d}=a,p=d.getInitOptions(),h=n||{transformation:p.transformation},f=!e&&((t,e)=>{const{videoHeight:n,videoWidth:i}=t,o=y(i,e.left),a=y(n,e.top),r=y(i,e.width),s=y(n,e.height),c=i/n,l=r/s,d=Math.round(l>1||c>1?s*l:r),u=Math.round(d/c),v=Math.round(o-(d-r)/2),p=Math.round(a-(u-s)/2);return{width:d,height:u,x:Math.min(Math.max(v,0),i-d),y:Math.min(Math.max(p,0),n-u),crop:"crop"}})(t.videoElement,r),m=f?o().obj.merge({transformation:f},h):h,g=d.isRawUrl?a.src:{publicId:d.publicId()};t.source(f?{publicId:d.publicId()}:e,m).play(),c&&t.currentTime(s),i=!0,function(){const e=(0,v.n)("div",{class:"go-back-button"});e.addEventListener("click",(()=>{l()}),!1);const n=(0,v.n)("div",{class:u.Fg},e);b(t.videojs,n)}(),l=()=>{if(i){i=!1;const e=t.currentTime(),n=t.duration();t.source(g,p).play(),c&&e<n&&t.currentTime(e),A()}}}function N(t){let{event:e,item:n,index:i}=t;const o=D();o.onClick&&o.onClick({item:n,index:i,event:e,zoom:(t,e)=>{O(t,e,n)}})}function L(i,o){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;const r={playerOptions:e,videojsOptions:n};if(o)((t,e,n,i,o,a)=>{const r=x(t);n.forEach(((t,n)=>{const s=T(r,t,n),c=m(t),l=i.some((t=>m(t)===c));l&&s?(0,v.cu)(s,{left:`${t.left}%`,top:`${t.top}%`,width:`${t.width}%`,height:`${t.height}%`,transitionDuration:`${o}ms`}):l||s||r.appendChild(g(e,t,n,o,(e=>{a({event:e,item:t,index:n})})))})),i.forEach(((t,e)=>{const i=T(r,t,e),o=m(t),a=!n.some((t=>m(t)===o));i&&a&&i.parentNode.removeChild(i)}))})(t.videojs,r,i,o,a,N);else{const e=i.map(((t,e)=>g(r,t,e,a,(n=>{N({event:n,item:t,index:e})}))));b(t.videojs,(0,v.n)("div",{class:u.Fg},e))}}function M(){j()&&((t,e)=>{const n=x(t);if(!n)return;const{videoHeight:i,videoWidth:o}=e,a=o/i,r=a*e.clientHeight;n.style.width=`${e.clientWidth<r?"100%":r}px`,n.style.height=e.clientWidth<r?e.clientWidth/a+"px":"100%"})(t.videojs,t.videoElement)}!function(){if(a=a||t.videojs.currentSource(),j()){t.videojs.el().classList.add("interaction-areas"),t.videojs.one(k.f.PLAY,(()=>{"object"==typeof t.videojs.ima?t.on("adsready",(()=>{t.videojs.ima.addEventListener(window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED,S)})):S()}));const e=c()(M,100);t.videojs.on(k.f.FULL_SCREEN_CHANGE,(()=>{setTimeout(e,100)}));const n=(0,v.q2)(window,"resize",M,!1);t.videojs.on(k.f.DISPOSE,n)}t.videojs.on(k.f.ENDED,(()=>{l()})),t.videojs.on(k.f.ERROR,(()=>{t.pause()}))}()}},8812:(t,e,n)=>{var i=n(2140),o=/^\s+/;t.exports=function(t){return t?t.slice(0,i(t)+1).replace(o,""):t}},2140:t=>{var e=/\s/;t.exports=function(t){for(var n=t.length;n--&&e.test(t.charAt(n)););return n}},6177:(t,e,n)=>{var i=n(8953),o=n(3664),a=n(5378),r=Math.max,s=Math.min;t.exports=function(t,e,n){var c,l,d,u,v,p,h=0,f=!1,m=!1,g=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var n=c,i=l;return c=l=void 0,h=e,u=t.apply(i,n)}function b(t){var n=t-p;return void 0===p||n>=e||n<0||m&&t-h>=d}function T(){var t=o();if(b(t))return $(t);v=setTimeout(T,function(t){var n=e-(t-p);return m?s(n,d-(t-h)):n}(t))}function $(t){return v=void 0,g&&c?y(t):(c=l=void 0,u)}function x(){var t=o(),n=b(t);if(c=arguments,l=this,p=t,n){if(void 0===v)return function(t){return h=t,v=setTimeout(T,e),f?y(t):u}(p);if(m)return clearTimeout(v),v=setTimeout(T,e),y(p)}return void 0===v&&(v=setTimeout(T,e)),u}return e=a(e)||0,i(n)&&(f=!!n.leading,d=(m="maxWait"in n)?r(a(n.maxWait)||0,e):d,g="trailing"in n?!!n.trailing:g),x.cancel=function(){void 0!==v&&clearTimeout(v),h=0,c=p=l=v=void 0},x.flush=function(){return void 0===v?u:$(o())},x}},5114:t=>{t.exports=function(){}},3664:(t,e,n)=>{var i=n(1433);t.exports=function(){return i.Date.now()}},2858:(t,e,n)=>{var i=n(6177),o=n(8953);t.exports=function(t,e,n){var a=!0,r=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return o(n)&&(a="leading"in n?!!n.leading:a,r="trailing"in n?!!n.trailing:r),i(t,e,{leading:a,maxWait:e,trailing:r})}},5378:(t,e,n)=>{var i=n(8812),o=n(8953),a=n(5414),r=/^[-+]0x[0-9a-f]+$/i,s=/^0b[01]+$/i,c=/^0o[0-7]+$/i,l=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(a(t))return NaN;if(o(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=o(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=i(t);var n=s.test(t);return n||c.test(t)?l(t.slice(2),n?2:8):r.test(t)?NaN:+t}}}]);
-//# sourceMappingURL=interaction-areas.light.min.js.map