cloudinary-video-player 1.6.2-edge.13

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

@@ -0,0 +1,236 @@
+import { elementsCreator, styleElement } from '../../utils/dom';
+import { get } from '../../utils/object';
+import {
+  CLOSE_INTERACTION_AREA_LAYOUT_DELAY,
+  INTERACTION_AREA_HAND_ICON,
+  INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME,
+  INTERACTION_AREAS_CONTAINER_CLASS_NAME,
+  INTERACTION_AREAS_PREFIX,
+  INTERACTION_AREAS_THEME
+} from './interaction-area.const';
+import { noop } from '../../utils/type-inference';
+import { getDefaultPlayerColor } from '../../plugins/colors';
+import { forEach, some } from '../../utils/array';
+import { themedButton } from '../themeButton/themedButton';
+import { BUTTON_THEME } from '../themeButton/themedButton.const';
+
+
+const getInteractionAreaItemId = (item, index) => item.id || item.type || `id_${index}`;
+
+export const getInteractionAreaItem = ({ playerOptions, videojsOptions }, item, index, durationTime, onClick) => {
+  const defaultColor = getDefaultPlayerColor(videojsOptions);
+  const accentColor = playerOptions && playerOptions.colors ? playerOptions.colors.accent : defaultColor.accent;
+
+  // theme = 'pulsing' / 'shadowed'
+  const theme = get(videojsOptions, 'interactionAreas.theme.template', INTERACTION_AREAS_THEME.PULSING);
+
+  return elementsCreator({
+    tag: 'div',
+    attr: { class: `${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_PREFIX}-area-marker` },
+        children: [
+          {
+            tag: 'div',
+            attr: { class: `${INTERACTION_AREAS_PREFIX}-marker-shadow` },
+            style: { [theme === INTERACTION_AREAS_THEME.SHADOWED ? 'backgroundColor' : 'borderColor']: accentColor }
+          },
+          {
+            tag: 'div',
+            attr: { class: `${INTERACTION_AREAS_PREFIX}-marker-main` },
+            style: { borderColor: accentColor }
+          }
+        ]
+      }
+    ]
+  });
+};
+
+
+export const percentageToFixedValue = (outOf, value) => (outOf / (100 / +value));
+
+export 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'
+  };
+};
+
+
+export 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)}]`);
+
+
+export const updateInteractionAreasItem = (videojs, configs, interactionAreasData, previousInteractionAreasData, durationTime, onClick) => {
+  const interactionAreasContainer = getInteractionAreasContainer(videojs);
+
+  forEach(interactionAreasData, (item, index) => {
+    const itemElement = getInteractionAreaElementById(interactionAreasContainer, item, index);
+    const itemId = getInteractionAreaItemId(item);
+    const isExistItem = some(previousInteractionAreasData, 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) {
+      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.
+  forEach(previousInteractionAreasData, (item, index) => {
+    const itemElement = getInteractionAreaElementById(interactionAreasContainer, item, index);
+    const itemId = getInteractionAreaItemId(item);
+    const shouldBeRemoved = !some(interactionAreasData, i => getInteractionAreaItemId(i) === itemId);
+
+    if (itemElement && shouldBeRemoved) {
+      // do not use element.remove for ie11 support
+      itemElement.parentNode.removeChild(itemElement);
+    }
+  });
+
+};
+
+export const shouldShowAreaLayoutMessage = (interactionAreasConfig) => {
+  const isLayoutEnabled = get(interactionAreasConfig, 'layout.enable', true);
+
+  return isLayoutEnabled && localStorage.getItem(INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME) !== 'true';
+};
+
+
+const onClickInteractionAreaLayoutClick = (checked, onClick = noop) => {
+  localStorage.setItem(INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME, JSON.parse(checked));
+  onClick();
+};
+
+export const createInteractionAreaLayoutMessage = (videojs, onClick, showItAgainCheckbox = false) => {
+
+  let checked = false;
+
+  const id = `checkbox_${Math.round(Math.random() * 10000)}`;
+
+  const tracksContainer = elementsCreator({
+    tag: 'div',
+    attr: { class: `${INTERACTION_AREAS_CONTAINER_CLASS_NAME} ${INTERACTION_AREAS_PREFIX}-layout-message ${showItAgainCheckbox ? '' : 'clickable'}` },
+    onClick: !showItAgainCheckbox ? () => onClickInteractionAreaLayoutClick(checked, onClick) : null,
+    children: [
+      {
+        tag: 'img',
+        attr: { class: `${INTERACTION_AREAS_PREFIX}-layout-icon`, src: INTERACTION_AREA_HAND_ICON }
+      },
+      {
+        tag: 'h3',
+        attr: { class: `${INTERACTION_AREAS_PREFIX}-layout-message-title` },
+        children: 'Tap on dots to zoom for a product.'
+      },
+      themedButton({
+        text: 'Got it',
+        theme: BUTTON_THEME.TRANSPARENT_WHITE,
+        loadingDelay: showItAgainCheckbox ? 0 : CLOSE_INTERACTION_AREA_LAYOUT_DELAY,
+        onClick: showItAgainCheckbox ? () => onClickInteractionAreaLayoutClick(checked, onClick) : null
+      }),
+      showItAgainCheckbox && {
+        tag: 'div',
+        attr: { class: `${INTERACTION_AREAS_PREFIX}-layout-message-do-not-show` },
+        children: [
+          {
+            tag: 'input',
+            attr: { type: 'checkbox', class: `${INTERACTION_AREAS_PREFIX}-layout-message-checkbox`, id },
+            event: {
+              name: 'input',
+              callback: (event) => {
+                checked = event.target.checked;
+              }
+            }
+          },
+          {
+            tag: 'label',
+            attr: { class: `${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_CONTAINER_CLASS_NAME}`);
+
+export const removeInteractionAreasContainer = (videojs) => {
+  const interactionAreasContainer = getInteractionAreasContainer(videojs);
+
+  // do not use element.remove for ie11 support
+  interactionAreasContainer && interactionAreasContainer.parentNode.removeChild(interactionAreasContainer);
+};
+
+export 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%';
+};

package/src/components/jumpButtons/jump-10-minus.js

@@ -0,0 +1,21 @@
+import videojs from 'video.js';
+
+const ClickableComponent = videojs.getComponent('ClickableComponent');
+
+class JumpBackButton extends ClickableComponent {
+
+  handleClick(event) {
+    super.handleClick(event);
+    this.player().currentTime(this.player().currentTime() - 10);
+  }
+
+  createEl() {
+    return videojs.dom.createEl('button', {
+      className: 'vjs-control vjs-icon-skip-10-min vjs-button'
+    });
+  }
+}
+
+videojs.registerComponent('JumpBackButton', JumpBackButton);
+
+export default JumpBackButton;

package/src/components/jumpButtons/jump-10-plus.js

@@ -0,0 +1,20 @@
+import videojs from 'video.js';
+
+const ClickableComponent = videojs.getComponent('ClickableComponent');
+
+class JumpForwardButton extends ClickableComponent {
+  handleClick(event) {
+    super.handleClick(event);
+    this.player().currentTime(this.player().currentTime() + 10);
+  }
+
+  createEl() {
+    return videojs.dom.createEl('button', {
+      className: 'vjs-control vjs-icon-skip-10-plus vjs-button'
+    });
+  }
+}
+
+videojs.registerComponent('JumpForwardButton', JumpForwardButton);
+
+export default JumpForwardButton;

package/src/components/logoButton/logo-button.const.js

@@ -0,0 +1,3 @@
+export const LIGHT_BG_ICON = 'https://res.cloudinary.com/cloudinary-marketing/image/upload/v1597164189/creative_source/Logo/Cloud%20Glyph/cloudinary_cloud_glyph_regular.svg';
+
+export const DARK_BG_ICON = 'https://res.cloudinary.com/cloudinary-marketing/image/upload/v1597164191/creative_source/Logo/Cloud%20Glyph/cloudinary_cloud_glyph_white.svg';

package/src/components/logoButton/logo-button.js

@@ -0,0 +1,30 @@
+import videojs from 'video.js';
+import './logo-button.scss';
+import { DARK_BG_ICON, LIGHT_BG_ICON } from './logo-button.const';
+import { isLight } from '../../video-player.utils';
+
+// support VJS5 & VJS6 at the same time
+const ClickableComponent = videojs.getComponent('ClickableComponent');
+
+class LogoButton extends ClickableComponent {
+
+  createEl() {
+    const opts = this.options_.playerOptions;
+    const display = opts.showLogo ? 'block' : 'none';
+
+    const _isLight = isLight(opts) ? LIGHT_BG_ICON : DARK_BG_ICON;
+
+    const bgIcon = opts.logoImageUrl ? opts.logoImageUrl : _isLight;
+
+    return videojs.dom.createEl('a', {}, {
+      class: 'vjs-control vjs-cloudinary-button vjs-button',
+      href: opts.logoOnclickUrl,
+      target: '_blank',
+      style: `display: ${display}; background-image: url(${bgIcon})`
+    });
+  }
+}
+
+videojs.registerComponent('logoButton', LogoButton);
+
+export default LogoButton;

package/src/components/logoButton/logo-button.scss

@@ -0,0 +1,15 @@
+// Player Cloudinary button
+.vjs-control-bar a.vjs-control.vjs-cloudinary-button {
+  background-image: url("../../assets/icons/cloudinary_icon_for_black_bg.svg");
+  background-size: 25px;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  .cld-video-player-skin-light & {
+    background-image: url("../../assets/icons/cloudinary_icon_for_white_bg.svg");
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}

package/src/components/playlist/components/playlist-button.js

@@ -0,0 +1,34 @@
+import videojs from 'video.js';
+
+// Get the ClickableComponent base class from Video.js
+const ClickableComponent = videojs.getComponent('ClickableComponent');
+
+// Create a common class for playlist buttons
+class PlaylistButton extends ClickableComponent {
+
+  constructor(player, options) {
+    // It is important to invoke the superclass before anything else,
+    // to get all the features of components out of the box!
+    super(player, options);
+
+    const type = options.type;
+
+    if (!type && type !== 'previous' && type !== 'next') {
+      throw new Error('Type must be either \'previous\' or \'next\'');
+    }
+  }
+
+  // The `createEl` function of a component creates its DOM element.
+  createEl() {
+    const type = this.options_.type;
+    const typeCssClass = `vjs-icon-play-${type}`;
+
+    return videojs.dom.createEl('button', {
+      // Prefixing classes of elements within a player with "vjs-"
+      // is a convention used in Video.js.
+      className: `vjs-control vjs-playlist-button vjs-button ${typeCssClass}`
+    });
+  }
+}
+
+export default PlaylistButton;

package/src/components/playlist/components/playlist-next-button.js

@@ -0,0 +1,18 @@
+import PlaylistButton from './playlist-button';
+import videojs from 'video.js';
+
+class PlaylistNextButton extends PlaylistButton {
+
+  constructor(player) {
+    super(player, { type: 'next' });
+  }
+
+  handleClick(event) {
+    super.handleClick(event);
+    this.player().cloudinary.playlist().playNext();
+  }
+}
+
+videojs.registerComponent('PlaylistNextButton', PlaylistNextButton);
+
+export default PlaylistNextButton;

package/src/components/playlist/components/playlist-previous-button.js

@@ -0,0 +1,18 @@
+import PlaylistButton from './playlist-button';
+import videojs from 'video.js';
+
+class PlaylistPreviousButton extends PlaylistButton {
+
+  constructor(player) {
+    super(player, { type: 'previous' });
+  }
+
+  handleClick(event) {
+    super.handleClick(event);
+    this.player().cloudinary.playlist().playPrevious();
+  }
+}
+
+videojs.registerComponent('PlaylistPreviousButton', PlaylistPreviousButton);
+
+export default PlaylistPreviousButton;

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

@@ -0,0 +1,5 @@
+import PlaylistNextButton from './playlist-next-button';
+import PlaylistPreviousButton from './playlist-previous-button';
+import './playlist.scss';
+
+export { PlaylistNextButton, PlaylistPreviousButton };

package/src/components/playlist/components/playlist.scss

@@ -0,0 +1,15 @@
+.cld-video-player {
+
+  .vjs-playlist-button {
+    display: none;
+  }
+
+  &.vjs-playlist {
+
+    .vjs-playlist-button {
+      display: block;
+    }
+  }
+
+}
+

package/src/components/playlist/components/upcoming-video-overlay.js

@@ -0,0 +1,149 @@
+import videojs from 'video.js';
+import './upcoming-video-overlay.scss';
+
+// support VJS5 & VJS6 at the same time
+const dom = videojs.dom || videojs;
+
+const Component = videojs.getComponent('Component');
+const ClickableComponent = videojs.getComponent('ClickableComponent');
+
+class UpcomingVideoOverlay extends ClickableComponent {
+
+  constructor(player, ...args) {
+    super(player, ...args);
+
+    this._setEvents(player);
+  }
+
+  _setEvents(player) {
+    player.on('upcomingvideoshow', this._show.bind(this));
+    player.on('upcomingvideohide', this._hide.bind(this));
+    player.on('playlistitemchanged', this._onPlaylistItemChange.bind(this));
+  }
+
+  _hide() {
+    this.removeClass('vjs-upcoming-video-show');
+  }
+
+  _disableTransition(block) {
+    this.addClass('disable-transition');
+    block();
+    this.removeClass('disable-transition');
+  }
+
+  _onPlaylistItemChange(_, event) {
+    this._hide();
+    this._disableTransition(() => {
+      if (event.next) {
+        this.setItem(event.next);
+      }
+    });
+  }
+
+  _show() {
+    const videoShowClass = 'vjs-upcoming-video-show';
+    const ima = this.player().ima;
+    const adsManager = ima === 'object' && ima.getAdsManager();
+
+    if (adsManager) {
+      if (!adsManager.getCurrentAd() || adsManager.getCurrentAd().isLinear()) {
+        this.addClass(videoShowClass);
+      }
+    } else {
+      this.addClass(videoShowClass);
+    }
+  }
+
+  setTitle(source) {
+    const title = this.getChild('upcomingVideoOverlayContent')
+      .getChild('upcomingVideoOverlayBar')
+      .getChild('upcomingVideoOverlayTitle');
+
+    title.setContent(source.info().title || source.publicId());
+  }
+
+  setItem(source) {
+    this._source = source;
+
+    const maxWidth = parseInt(window.getComputedStyle(this.el(), null).getPropertyValue('max-width'), 10);
+    const maxHeight = Math.round(maxWidth * (9 / 16.0));
+
+    const transformation = { crop: 'pad', background: 'auto:predominant', width: maxWidth, height: maxHeight };
+    const content = this.getChild('upcomingVideoOverlayContent');
+
+    this.setTitle(source);
+
+    content.el().style.backgroundImage = `url(${this._source.poster().url({ transformation })})`;
+  }
+
+  handleClick() {
+    super.handleClick(event);
+
+    this.player().cloudinary.playlist().playNext();
+  }
+
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-upcoming-video'
+    });
+  }
+}
+
+class UpcomingVideoOverlayContent extends Component {
+  createEl() {
+    // Content wraps image and bar
+    return super.createEl('div', {
+      className: 'aspect-ratio-content'
+    });
+  }
+}
+
+class UpcomingVideoOverlayTitle extends Component {
+
+  setContent(title) {
+    this._contentSpan.innerText = title;
+  }
+
+  createEl() {
+    const el = super.createEl('div', {
+      className: 'vjs-control vjs-upcoming-video-title'
+    });
+
+    const container = dom.createEl('div', {
+      className: 'vjs-upcoming-video-title-display',
+      innerHTML: '<span class="vjs-control-text">Next up</span>Next up: '
+    });
+
+    this._contentSpan = dom.createEl('span', {
+      className: 'vjs-upcoming-video-title-display-label'
+    });
+
+    container.appendChild(this._contentSpan);
+
+    el.appendChild(container);
+
+    return el;
+  }
+}
+
+class UpcomingVideoOverlayBar extends Component {
+
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-upcoming-video-bar'
+    });
+  }
+}
+
+UpcomingVideoOverlay.prototype.options_ = { children: ['upcomingVideoOverlayContent'] };
+videojs.registerComponent('upcomingVideoOverlay', UpcomingVideoOverlay);
+
+UpcomingVideoOverlayContent.prototype.options_ = { children: ['upcomingVideoOverlayBar'] };
+videojs.registerComponent('upcomingVideoOverlayContent', UpcomingVideoOverlayContent);
+
+UpcomingVideoOverlayBar.prototype.options_ = { children: ['upcomingVideoOverlayTitle', 'playlistNextButton'] };
+videojs.registerComponent('upcomingVideoOverlayBar', UpcomingVideoOverlayBar);
+
+videojs.registerComponent('upcomingVideoOverlayTitle', UpcomingVideoOverlayTitle);
+
+export default UpcomingVideoOverlay;

package/src/components/playlist/components/upcoming-video-overlay.scss

@@ -0,0 +1,86 @@
+@import '../../../assets/styles/mixins/aspect-ratio';
+
+$upcoming-video-max-width: 30em;
+// $_upcoming-video-transition: visibility 1s, opacity 1s, background 1.1s 0s step-end;
+$_upcoming-video-transition: visibility 0.4s, opacity 0.4s;
+
+.vjs-upcoming-video {
+  opacity: 0;
+  transition: bottom 0.1s, $_upcoming-video-transition;
+  @include aspect-ratio(16, 9);
+
+  visibility: hidden;
+  position: absolute;
+  bottom: 4.5em;
+  right: 0.75em;
+  width: 38.7%;
+  max-width: $upcoming-video-max-width;
+  border: 1px solid #E8E8E9;
+
+  .aspect-ratio-content {
+    background-size: cover;
+
+    .vjs-upcoming-video-bar {
+      display: flex;
+      flex: auto;
+      justify-content: space-between;
+
+      position: absolute;
+      height: 3.0em;
+      line-height: 3.0em;
+      width: 100%;
+      bottom: 0px;
+
+      .vjs-upcoming-video-title {
+        flex: auto;
+        text-align: left;
+        display: block;
+        width: auto;
+        max-width: 80%;
+        padding-left: 1em;
+        padding-right: 1em;
+
+        .vjs-upcoming-video-title-display {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+
+          .vjs-upcoming-video-title-display-label {
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
+
+  .vjs-has-started.vjs-user-inactive.vjs-playing & {
+    transition: bottom 1s, $_upcoming-video-transition;
+    bottom: 0.7em;
+  }
+
+  &.vjs-upcoming-video-show {
+    transition: $_upcoming-video-transition;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &.disable-transition {
+    transition: visibility 0s;
+  }
+
+
+  @media only screen and (max-width: 768px) {
+    &:before {
+      display: none;
+    }
+
+    .cld-video-player.cld-video-player-skin-dark &,
+    .cld-video-player.cld-video-player-skin-light & {
+      border: none;
+    }
+
+    .aspect-ratio-content {
+      background-image: none !important;
+    }
+  }
+}

package/src/components/playlist/layout/playlist-layout-custom.js

@@ -0,0 +1,21 @@
+import PlaylistLayout from './playlist-layout';
+
+class PlaylistLayoutCustom extends PlaylistLayout {
+
+  getCls() {
+    let cls = super.getCls();
+    cls.push('cld-plw-custom');
+
+    return cls;
+  }
+
+  createEl() {
+    const el = super.createEl();
+    this.options_.renderTo.appendChild(el);
+
+    return el;
+  }
+}
+
+
+export default PlaylistLayoutCustom;