cloudinary-video-player 1.6.2-edge.13

package/src/assets/styles/videojs-ima.scss

@@ -0,0 +1,252 @@
+.cld-video-player {
+  .ima-fullscreen-div, .ima-mute-div, .ima-play-pause-div, .ima-slider-div {
+    line-height: 1.7;
+  }
+
+  &.vjs-ad-loading {
+    > video,
+    > .vjs-poster {
+      opacity: 0;
+    }
+  }
+}
+
+.ima-ad-container {
+  top: 0;
+  left: 0;
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  video {
+    left: 0;
+  }
+}
+
+/* Move overlay if user fast-clicks play button. */
+.video-js.vjs-playing .bumpable-ima-ad-container {
+  margin-top: -50px;
+}
+
+/* Move overlay when controls are active. */
+.video-js.vjs-user-inactive.vjs-playing .bumpable-ima-ad-container {
+  margin-top: 0px;
+}
+
+.video-js.vjs-paused .bumpable-ima-ad-container,
+.video-js.vjs-playing:hover .bumpable-ima-ad-container,
+.video-js.vjs-user-active.vjs-playing .bumpable-ima-ad-container {
+  margin-top: -50px;
+}
+
+.vjs-ima-non-linear .vjs-big-play-button,
+.vjs-ima-non-linear .vjs-menu.vjs-settings-menu,
+.vjs-ima-non-linear .vjs-info-overlay,
+.vjs-ima-non-linear .vjs-modal-overlay,
+.vjs-ima-non-linear .vjs-control-bar {
+  z-index: 1112;
+}
+
+.ima-controls-div {
+  bottom:0px;
+  height: 37px;
+  position: absolute;
+  overflow: hidden;
+  display: none;
+  opacity: 1;
+  background-color: rgba(7, 20, 30, .7);
+  background: -moz-linear-gradient(
+      bottom,
+      rgba(7, 20, 30, .7) 0%,
+      rgba(7, 20, 30, 0) 100%); /* FF3.6+ */
+  background: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0%,rgba(7, 20, 30, .7)),
+      color-stop(100%,rgba(7, 20, 30, 0))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(
+      bottom,
+      rgba(7, 20, 30, .7) 0%,
+      rgba(7, 20, 30, 0) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(bottom,
+    rgba(7, 20, 30, .7) 0%,
+    rgba(7, 20, 30, 0) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(bottom,
+    rgba(7, 20, 30, .7) 0%,
+    rgba(7, 20, 30, 0) 100%); /* IE10+ */
+  background: linear-gradient(to top,
+    rgba(7, 20, 30, .7) 0%,
+    rgba(7, 20, 30, 0) 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient(
+    startColorstr='#0007141E',
+    endColorstr='#07141E',GradientType=0 ); /* IE6-9 */
+}
+
+.ima-countdown-div {
+  height: 10px;
+  color: #FFFFFF;
+  text-shadow: 0 0 0.2em #000;
+  cursor: default;
+}
+
+.ima-seek-bar-div {
+  top: 12px;
+  height: 3px;
+  position: absolute;
+  background: rgba(255, 255, 255, .4);
+}
+
+.ima-progress-div {
+  width: 0px;
+  height: 3px;
+  background-color: #ECC546;
+}
+
+.ima-play-pause-div, .ima-mute-div, .ima-slider-div, .ima-fullscreen-div {
+  width: 35px;
+  height: 20px;
+  top: 11px;
+  left: 0px;
+  position: absolute;
+  color: #CCCCCC;
+  font-size: 1.5em;
+  line-height: 2;
+  text-align: center;
+  font-family: VideoJS;
+  cursor: pointer;
+}
+
+.ima-mute-div {
+  left: auto;
+  right: 85px;
+}
+
+.ima-slider-div {
+  left: auto;
+  right: 35px;
+  width: 50px;
+  height: 10px;
+  top: 20px;
+  background-color: #555555;
+}
+
+.ima-slider-level-div {
+  width: 100%;
+  height: 10px;
+  background-color: #ECC546;
+}
+
+.ima-fullscreen-div {
+  left: auto;
+  right: 0px;
+}
+
+.ima-playing:before {
+  content: "\00f103";
+}
+
+.ima-paused:before {
+  content: "\00f101";
+}
+
+.ima-playing:hover:before, .ima-paused:hover:before {
+  text-shadow: 0 0 1em #fff;
+}
+
+.ima-non-muted:before {
+  content: "\00f107";
+}
+
+.ima-muted:before {
+  content: "\00f104";
+}
+
+.ima-non-muted:hover:before, .ima-muted:hover:before {
+  text-shadow: 0 0 1em #fff;
+}
+
+.ima-non-fullscreen:before {
+  content: "\00f108";
+}
+
+.ima-fullscreen:before {
+  content: "\00f109";
+}
+
+.ima-non-fullscreen:hover:before, .ima-fullscreen:hover:before {
+  text-shadow: 0 0 1em #fff;
+}
+
+.video-js.vjs-ad-playing .vjs-control-bar {
+  z-index: 1112;
+}
+
+.video-js.vjs-ad-playing .vjs-control-bar .vjs-progress-control {
+  pointer-events: none;
+}
+
+.video-js.vjs-ad-playing .vjs-control-bar>:not(.vjs-play-control):not(.vjs-volume-menu-button):not(.vjs-time-control):not(.vjs-progress-control):not(.vjs-spacer):not(.vjs-fullscreen-control):not(.vjs-gradient):not(.ima-countdown-div),
+.video-js.vjs-ad-playing .vjs-control-bar .vjs-mouse-display-tooltip,
+.video-js.vjs-ad-playing .vjs-control-bar .vjs-progress-control:before,
+.video-js.vjs-ad-playing .vjs-control-bar .vjs-play-progress:before,
+.video-js.vjs-ad-playing .vjs-control-bar .vjs-progress-control .vjs-load-progress,
+.video-js.vjs-ad-playing .vjs-control-bar .vjs-progress-control .vjs-mouse-display {
+  display: none;
+}
+
+.video-js.vjs-ad-playing .vjs-control-bar {
+  transition: height 0.1s ease;
+}
+
+.video-js.vjs-ad-playing.vjs-user-inactive:not(.vjs-ad-paused) .vjs-control-bar {
+  opacity: 1;
+  height: 0;
+}
+
+.video-js.vjs-ad-playing.vjs-user-inactive:not(.vjs-ad-paused) .vjs-control-bar .vjs-progress-holder {
+  margin: 0;
+}
+
+.video-js.vjs-ad-playing .vjs-control-bar>:not(.vjs-progress-control):not(.ima-countdown-div) {
+  transition: opacity 0.1s ease, visibility 0.1s ease;
+}
+
+.video-js.vjs-ad-playing .vjs-control-bar>:not(.vjs-progress-control):not(.ima-countdown-div) div{
+  transition: line-height 0.1s ease;
+}
+
+.video-js.vjs-ad-playing.vjs-user-inactive:not(.vjs-ad-paused) .vjs-control-bar>:not(.vjs-progress-control):not(.ima-countdown-div) {
+  opacity: 0;
+  visibility: hidden;
+  overflow: hidden;
+}
+
+.video-js.vjs-ad-playing.vjs-user-inactive:not(.vjs-ad-paused) .vjs-control-bar>:not(.vjs-progress-control):not(.ima-countdown-div) div{
+  line-height: 0.01em;
+}
+
+.video-js.vjs-ad-playing .vjs-control-bar .vjs-progress-control .vjs-thumbnail-holder,
+.video-js.vjs-ad-playing .vjs-control-bar .vjs-progress-control .vjs-thumbnail {
+  display: none !important;
+}
+
+.video-js.vjs-ad-playing .vjs-control-bar .vjs-progress-control .vjs-progress-holder {
+  cursor: auto;
+  box-shadow: none;
+  font-size: 100%;
+  margin: 0 1em;
+}
+
+.video-js .vjs-control-bar .ima-countdown-div {
+  display: none;
+  z-index: 1;
+}
+
+.video-js.vjs-ad-playing .vjs-control-bar .ima-countdown-div {
+  display: block;
+  position: absolute;
+  margin-top: -2em;
+  left: 2em;
+  font-size: 1.2em;
+}

package/src/components/component-utils.js

@@ -0,0 +1,20 @@
+const hide = (el) => {
+  el.style.display = 'none';
+};
+
+const show = (el) => {
+  el.style.display = '';
+};
+
+const setText = (el, text) => {
+  if (!text || text.length <= 0) {
+    el.innerText = '';
+    hide(el);
+    return;
+  }
+
+  el.innerText = text;
+  show(el);
+};
+
+module.exports = { hide, show, setText };

package/src/components/index.js

@@ -0,0 +1,21 @@
+import JumpForwardButton from './jumpButtons/jump-10-plus';
+import JumpBackButton from './jumpButtons/jump-10-minus';
+import LogoButton from './logoButton/logo-button';
+import PlaylistPanel from './playlist/panel/playlist-panel';
+import ProgressControlEventsBlocker from './progress-control-events-blocker/progress-control-events-blocker';
+import RecommendationsOverlay from './recommendations-overlay';
+import ShoppablePanel from './shoppable-bar/panel/shoppable-panel';
+import TitleBar from './title-bar/title-bar';
+
+import 'assets/styles/components/triangle-volume-bar.scss';
+
+export {
+  JumpForwardButton,
+  JumpBackButton,
+  LogoButton,
+  PlaylistPanel,
+  ProgressControlEventsBlocker,
+  RecommendationsOverlay,
+  ShoppablePanel,
+  TitleBar
+};

package/src/components/interaction-area/interaction-area.const.js

@@ -0,0 +1,30 @@
+export const INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME = 'cld-ia-layout-state';
+
+export const INTERACTION_AREAS_PREFIX = 'vp-ia';
+
+export const INTERACTION_AREAS_CONTAINER_CLASS_NAME = 'interaction-areas-container';
+
+export const INTERACTION_AREAS_TEMPLATE = {
+  PORTRAIT: 'portrait',
+  LANDSCAPE: 'landscape',
+  All: 'all',
+  CENTER: 'center'
+};
+
+export const INTERACTION_AREAS_THEME = {
+  PULSING: 'pulsing',
+  SHADOWED: 'shadowed'
+};
+
+export 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'
+};
+
+export const INTERACTION_AREA_HAND_ICON = 'https://res.cloudinary.com/prod/image/upload/v1626764643/video-player/interaction-area-hand.svg';
+
+export const CLOSE_INTERACTION_AREA_LAYOUT_DELAY = 4500;
+
+export const DEFAULT_INTERACTION_ARE_TRANSITION = 250;

package/src/components/interaction-area/interaction-area.service.js

@@ -0,0 +1,223 @@
+import videojs from 'video.js';
+import {
+  CLOSE_INTERACTION_AREA_LAYOUT_DELAY,
+  DEFAULT_INTERACTION_ARE_TRANSITION,
+  INTERACTION_AREAS_CONTAINER_CLASS_NAME, TEMPLATE_INTERACTION_AREAS_VTT
+} from './interaction-area.const';
+import {
+  createInteractionAreaLayoutMessage,
+  getInteractionAreaItem,
+  getZoomTransformation,
+  removeInteractionAreasContainer,
+  setInteractionAreasContainer,
+  setInteractionAreasContainerSize,
+  shouldShowAreaLayoutMessage,
+  updateInteractionAreasItem
+} from './interaction-area.utils';
+import { addEventListener, createElement } from '../../utils/dom';
+import { throttle } from '../../utils/time';
+import { get } from '../../utils/object';
+import { noop } from '../../utils/type-inference';
+import { addMetadataTrack } from '../../video-player.utils';
+
+
+export const interactionAreaService = (player, playerOptions, videojsOptions) => {
+
+  let firstPlayed = false;
+  let isZoomed = false;
+  let currentTrack = null;
+  let unZoom = noop;
+
+  const shouldLayoutMessage = () => shouldShowAreaLayoutMessage(videojsOptions.interactionAreas);
+
+  function isInteractionAreasEnabled(enabled = 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 || TEMPLATE_INTERACTION_AREAS_VTT[interactionAreasConfig.template];
+
+      if (vttUrl) {
+        currentTrack = addMetadataTrack(player.videojs, vttUrl);
+        addCueListener(currentTrack);
+      }
+    }
+  }
+
+  function setGoBackButton() {
+    const button = createElement('div', { 'class': 'go-back-button' });
+
+    button.addEventListener('click', () => {
+      unZoom();
+    }, false);
+
+    const tracksContainer = createElement('div', { 'class': INTERACTION_AREAS_CONTAINER_CLASS_NAME }, button);
+    setInteractionAreasContainer(player.videojs, tracksContainer);
+  }
+
+  function getInteractionAreasConfig() {
+    const { cldSrc } = player.videojs.currentSource();
+    return cldSrc && cldSrc.getInteractionAreas();
+  }
+
+  function removeLayoutMessage() {
+    removeInteractionAreasContainer(player.videojs);
+    setAreasPositionListener();
+    player.play();
+  }
+
+  function setLayoutMessage() {
+    if (!isInteractionAreasEnabled()) {
+      return;
+    }
+
+    if (shouldLayoutMessage()) {
+      let layoutMessageTimout = null;
+      const showItAgainCheckbox = get(videojsOptions, 'interactionAreas.layout.showAgain', false);
+      player.pause();
+
+      createInteractionAreaLayoutMessage(player.videojs, () => {
+        clearTimeout(layoutMessageTimout);
+        removeLayoutMessage();
+      }, showItAgainCheckbox);
+
+      if (!showItAgainCheckbox) {
+        layoutMessageTimout = setTimeout(removeLayoutMessage, CLOSE_INTERACTION_AREA_LAYOUT_DELAY);
+      }
+    } else {
+      removeLayoutMessage();
+    }
+  }
+
+  function init() {
+
+    if (isInteractionAreasEnabled()) {
+
+      player.videojs.one('play', () => {
+        firstPlayed = true;
+        setLayoutMessage();
+      });
+
+      player.videojs.on('sourcechanged', () => {
+        firstPlayed && setAreasPositionListener();
+      });
+
+      const setInteractionAreasContainerSize = throttle(setContainerSize, 100);
+
+      player.videojs.on('fullscreenchange', () => {
+        // waiting for fullscreen will end
+        setTimeout(setInteractionAreasContainerSize, 100);
+      });
+
+      const resizeDestroy = addEventListener(window, 'resize', setContainerSize, false);
+
+      player.videojs.on('dispose', resizeDestroy);
+    }
+
+    player.videojs.on('ended', () => {
+      unZoom();
+    });
+  }
+
+  function onZoom(src, newOption, item) {
+    const currentSource = player.videojs.currentSource();
+    const { cldSrc } = currentSource;
+    const currentSrcOptions = cldSrc.getInitOptions();
+    const option = newOption || { transformation: currentSrcOptions.transformation.toOptions() };
+    const transformation = !src && getZoomTransformation(player.videoElement, item);
+    const sourceOptions = transformation ? videojs.mergeOptions({ transformation }, option) : option;
+
+    const newSource = cldSrc.isRawUrl ? currentSource.src : { publicId: cldSrc.publicId() };
+    player.source(transformation ? { publicId: cldSrc.publicId() } : src, sourceOptions).play();
+
+    isZoomed = true;
+
+    setGoBackButton();
+
+    unZoom = () => {
+      if (isZoomed) {
+        isZoomed = false;
+        player.source(newSource, currentSrcOptions).play();
+      }
+    };
+  }
+
+  function onInteractionAreasClick({ event, item, index }) {
+    const interactionAreasConfig = getInteractionAreasConfig();
+
+    interactionAreasConfig.onClick && interactionAreasConfig.onClick({
+      item,
+      index,
+      event,
+      zoom: (source, option) => {
+        onZoom(source, option, item);
+      }
+    });
+  }
+
+  function addInteractionAreasItems(interactionAreasData, previousInteractionAreasData, durationTime = 0) {
+    const configs = { playerOptions: playerOptions, videojsOptions: videojsOptions };
+
+    if (previousInteractionAreasData) {
+      updateInteractionAreasItem(player.videojs, configs, interactionAreasData, previousInteractionAreasData, durationTime, onInteractionAreasClick);
+    } else {
+      const interactionAreasItems = interactionAreasData.map((item, index) => {
+        return getInteractionAreaItem(configs, item, index, durationTime, (event) => {
+          onInteractionAreasClick({ event, item, index });
+        });
+      });
+
+      setInteractionAreasContainer(player.videojs, createElement('div', { 'class': INTERACTION_AREAS_CONTAINER_CLASS_NAME }, interactionAreasItems));
+    }
+  }
+
+  function setContainerSize() {
+    if (isInteractionAreasEnabled()) {
+      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), DEFAULT_INTERACTION_ARE_TRANSITION);
+
+        const tracksData = JSON.parse(activeCue.text);
+
+        addInteractionAreasItems(tracksData, previousTracksData, durationTime);
+        !previousTracksData && setContainerSize();
+        previousTracksData = tracksData;
+      } else {
+        removeInteractionAreasContainer(player.videojs);
+        previousTracksData = null;
+      }
+    });
+  }
+
+  return {
+    init
+  };
+
+};