cloudinary-video-player 1.6.2-edge.13

package/src/components/recommendations-overlay/recommendations-overlay-content.js

@@ -0,0 +1,57 @@
+import videojs from 'video.js';
+
+import RecommendationsOverlayPrimaryItem from './recommendations-overlay-primary-item';
+import RecommendationsOverlaySecondaryItemsContainer from './recommendations-overlay-secondary-items-container';
+
+const Component = videojs.getComponent('Component');
+
+class RecommendationsOverlayContent extends Component {
+
+  constructor(player, ...args) {
+    super(player, ...args);
+
+    this._content = new AspectRatioContent(player);
+    this.addChild(this._content);
+  }
+
+  setItems(primary, ...secondary) {
+    this._content.setItems(primary, ...secondary);
+  }
+
+  clearItems() {
+    this._content._primary.clearItem();
+    this._content._secondaryContainer.clearItems();
+  }
+
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-recommendations-overlay-content'
+    });
+  }
+}
+
+class AspectRatioContent extends Component {
+
+  constructor(player, ...args) {
+    super(player, ...args);
+
+    this._primary = new RecommendationsOverlayPrimaryItem(player);
+    this._secondaryContainer = new RecommendationsOverlaySecondaryItemsContainer(player);
+
+    this.addChild(this._primary);
+    this.addChild(this._secondaryContainer);
+  }
+
+  setItems(primary, ...secondary) {
+    this._primary.setItem(primary);
+    this._secondaryContainer.setItems(...secondary);
+  }
+
+  createEl() {
+    return super.createEl('div', {
+      className: 'aspect-ratio-content'
+    });
+  }
+}
+
+export default RecommendationsOverlayContent;

package/src/components/recommendations-overlay/recommendations-overlay-hide-button.js

@@ -0,0 +1,18 @@
+import videojs from 'video.js';
+
+const ClickableComponent = videojs.getComponent('ClickableComponent');
+
+class RecommendationOverlayHideButton extends ClickableComponent {
+
+  createEl() {
+    return super.createEl('span', {
+      className: 'vjs-recommendations-overlay-hide vjs-icon-close'
+    });
+  }
+
+  handleClick() {
+    this.options_.clickHandler();
+  }
+}
+
+export default RecommendationOverlayHideButton;

package/src/components/recommendations-overlay/recommendations-overlay-item.js

@@ -0,0 +1,35 @@
+import videojs from 'video.js';
+
+const ClickableComponent = videojs.getComponent('ClickableComponent');
+
+class RecommendationsOverlayItem extends ClickableComponent {
+
+  setItem(item) {
+    const { action, source } = item;
+    this.source = source;
+
+    const info = source.info();
+
+    this.setTitle(info.title || source.publicId());
+
+    this.setPoster(this.source.poster().url({ transformation: { aspect_ratio: '16:9', crop: 'pad', background: 'black' } }));
+
+    this.setAction(action);
+  }
+
+  setTitle(text) {
+    this.title.innerText = text;
+  }
+
+  setAction(action) {
+    this.action = action;
+  }
+
+  handleClick() {
+    super.handleClick();
+    this.player().trigger('recommendationshide');
+    this.action();
+  }
+}
+
+export default RecommendationsOverlayItem;

package/src/components/recommendations-overlay/recommendations-overlay-primary-item.js

@@ -0,0 +1,81 @@
+import videojs from 'video.js';
+import RecommendationsOverlayItem from './recommendations-overlay-item';
+import componentUtils from '../component-utils';
+
+// support VJS5 & VJS6 at the same time
+const dom = videojs.dom || videojs;
+
+class RecommendationsOverlayPrimaryItem extends RecommendationsOverlayItem {
+
+  setItem(item) {
+    super.setItem(item);
+
+    const info = this.source.info();
+
+    this.setTitle(info.title);
+    this.setSubtitle(info.subtitle);
+
+    if (info.description) {
+      const descLength = 300;
+      const description = info.description.length > descLength ? info.description.substring(0, descLength) + '...' : info.description;
+      this.setDescription(description);
+    }
+  }
+
+  setPoster(url) {
+    this.poster.style.backgroundImage = `url('${url}')`;
+  }
+
+  setTitle(text) {
+    componentUtils.setText(this.title, text);
+  }
+
+  setSubtitle(text) {
+    componentUtils.setText(this.subtitle, text);
+  }
+
+  setDescription(text) {
+    componentUtils.setText(this.description, text);
+  }
+
+  clearItem() {
+    this.setTitle('');
+    this.setSubtitle('');
+    this.setDescription('');
+    this.poster.style.backgroundImage = null;
+  }
+
+  createEl() {
+    const el = super.createEl('div', {
+      className: 'vjs-recommendations-overlay-item vjs-recommendations-overlay-item-primary'
+    });
+
+    this.poster = dom.createEl('div', {
+      className: 'vjs-recommendations-overlay-item-primary-image'
+    });
+
+    this.title = dom.createEl('h2');
+    this.title.innerHTML = '';
+
+    this.subtitle = dom.createEl('h3');
+    this.subtitle.innerHTML = '';
+
+    this.description = dom.createEl('p');
+    this.description.innerHTML = '';
+
+    this.content = dom.createEl('div', {
+      className: 'vjs-recommendations-overlay-item-info vjs-recommendations-overlay-item-primary-content'
+    });
+
+    this.content.appendChild(this.title);
+    this.content.appendChild(this.subtitle);
+    this.content.appendChild(this.description);
+
+    el.appendChild(this.poster);
+    el.appendChild(this.content);
+
+    return el;
+  }
+}
+
+export default RecommendationsOverlayPrimaryItem;

package/src/components/recommendations-overlay/recommendations-overlay-secondary-item.js

@@ -0,0 +1,48 @@
+import videojs from 'video.js';
+import RecommendationsOverlayItem from './recommendations-overlay-item';
+
+// support VJS5 & VJS6 at the same time
+const dom = videojs.dom || videojs;
+
+class RecommendationsOverlaySecondaryItem extends RecommendationsOverlayItem {
+
+  setItem(item) {
+    super.setItem(item);
+    this.setDuration('');
+  }
+
+  setPoster(url) {
+    this.el().style.backgroundImage = `url('${url}')`;
+  }
+
+  setDuration(text) {
+    this.duration.innerText = text;
+  }
+
+  createEl() {
+    const el = super.createEl('div', {
+      className: 'vjs-recommendations-overlay-item vjs-recommendations-overlay-item-secondary'
+    });
+
+    this.title = dom.createEl('span', { className: 'vjs-recommendations-overlay-item-secondary-title' });
+    this.title.innerHTML = '';
+
+    this.duration = dom.createEl('span', { className: 'vjs-recommendations-overlay-item-secondary-duration' });
+    this.duration.innerHTML = '';
+
+    const caption = dom.createEl('div', { className: 'vjs-recommendations-overlay-item-info' });
+    caption.appendChild(this.title);
+    caption.appendChild(this.duration);
+
+    el.appendChild(caption);
+
+    return el;
+  }
+
+  handleClick() {
+    super.handleClick();
+    this.action();
+  }
+}
+
+export default RecommendationsOverlaySecondaryItem;

package/src/components/recommendations-overlay/recommendations-overlay-secondary-items-container.js

@@ -0,0 +1,35 @@
+import videojs from 'video.js';
+import RecommendationsOverlaySecondaryItem from './recommendations-overlay-secondary-item';
+
+const Component = videojs.getComponent('Component');
+
+class RecommendationsOverlaySecondaryItemsContainer extends Component {
+
+  setItems(...items) {
+    this.clearItems();
+
+    if (!items) {
+      return;
+    }
+
+    items.forEach((item) => {
+      const component = new RecommendationsOverlaySecondaryItem(this.player());
+      component.setItem(item);
+      this.addChild(component);
+    });
+  }
+
+  clearItems() {
+    this.children().forEach(() => {
+      this.removeChild(this.children()[0]);
+    });
+  }
+
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-recommendations-overlay-item-secondary-container'
+    });
+  }
+}
+
+export default RecommendationsOverlaySecondaryItemsContainer;

package/src/components/recommendations-overlay/recommendations-overlay.js

@@ -0,0 +1,94 @@
+import videojs from 'video.js';
+import RecommendationsOverlayContent from './recommendations-overlay-content';
+import RecommendationsOverlayHideButton from './recommendations-overlay-hide-button';
+import './recommendations-overlay.scss';
+
+const MAXIMUM_ITEMS = 4;
+const Component = videojs.getComponent('Component');
+
+// TODO: Use Video.js's ModalDialog instead. It handles clicking block logic.
+class RecommendationsOverlay extends Component {
+
+  constructor(player, options, ...args) {
+    super(player, ...args);
+
+    this._content = new RecommendationsOverlayContent(player);
+
+    this.addChild(this._content);
+
+    this.addChild(new RecommendationsOverlayHideButton(player, { clickHandler: () => {
+      this.close();
+    } }, ...args));
+
+    this.setEvents(player);
+
+    this.doNotOpen = false;
+  }
+
+  setEvents(player) {
+    this.on(player, 'recommendationschanged', (_, eventData) => {
+      this.setItems(...eventData.items);
+    });
+
+    this.on(player, 'recommendationsnoshow', this.setDoNotOpen);
+    this.on(player, 'recommendationsshow', this.open);
+    this.on(player, 'recommendationshide', this.close);
+    this.on(player, 'cldsourcechanged', () => {
+      this.clearItems();
+      this.close();
+    });
+  }
+
+  setDoNotOpen() {
+    this.doNotOpen = true;
+  }
+
+  open() {
+    if (!this.doNotOpen) {
+      // Only show controls on close if they were visible from the first place
+      this._showControlsOnClose = this.player().controls();
+      this.player().controls(false);
+      this.el().style.visibility = 'visible';
+    }
+  }
+
+  clearItems() {
+    this._content.clearItems();
+  }
+
+  close() {
+    this.el().style.visibility = 'hidden';
+    if (this._showControlsOnClose) {
+      this.player().controls(true);
+    }
+  }
+
+  createEl() {
+    const recommendationsOverlayClass = 'vjs-recommendations-overlay';
+
+    const el = super.createEl('div', {
+      className: recommendationsOverlayClass
+    });
+    videojs.dom.addClass(el, recommendationsOverlayClass);
+
+    return el;
+  }
+
+  setItems(primary, ...secondary) {
+    this.doNotOpen = false;
+    secondary = secondary.slice(0, MAXIMUM_ITEMS - 1);
+    this._content.setItems(primary, ...secondary);
+  }
+
+  handleClick() {
+    this.stopPropagation();
+  }
+
+  dispose() {
+    super.dispose();
+  }
+}
+
+videojs.registerComponent('recommendationsOverlay', RecommendationsOverlay);
+
+export default RecommendationsOverlay;

package/src/components/recommendations-overlay/recommendations-overlay.scss

@@ -0,0 +1,182 @@
+@import '../../assets/styles/mixins/aspect-ratio';
+@import '../../assets/styles/mixins/mixins.scss';
+
+.vjs-recommendations-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  visibility: hidden;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(#000000, 0.5);
+
+  .vjs-recommendations-overlay-hide {
+    font-size: 1em;
+    cursor: pointer;
+    position: absolute;
+    display: inline-block;
+    top: 3.75%;
+    right: 1.72%;
+  }
+
+  .vjs-recommendations-overlay-content {
+    position: relative;
+    width: 85%;
+
+    @include aspect-ratio(16, 9);
+
+    .aspect-ratio-content {
+      display: flex;
+      flex-flow: column;
+
+      height: auto;
+
+      .vjs-recommendations-overlay-item {
+        border: 1px solid rgba(#FFFFFF, 0.5);
+      }
+
+      .vjs-recommendations-overlay-item-primary {
+        flex: 1.82;
+        display: flex;
+        flex-flow: row;
+
+        .vjs-recommendations-overlay-item-primary-image {
+          flex: 1;
+          background-size: cover;
+        }
+
+        .vjs-recommendations-overlay-item-primary-content {
+          flex: 0.5625;
+          display: flex;
+          flex-flow: column;
+
+          background: rgba(#000000, 0.6);
+          text-align: left;
+          padding: 3%;
+          min-width: 0; // for use with flex and white-space: nowrap
+
+          h2 {
+            @include ellipsis;
+            padding: 0 0 0 0;
+            font-size: 18px;
+            margin: 0 0 1em 0;
+            font-weight: 600;
+          }
+
+          h3 {
+            @include ellipsis;
+            padding: 0 0 0 0;
+            font-size: 20px;
+            margin: 0 0 1.3em 0;
+            font-weight: 500;
+          }
+
+          p {
+            padding: 0 0 0 0;
+            margin: 0 0 0 0;
+            font-size: 14px;
+            overflow: hidden;
+            line-height: 1.4em;
+            font-weight: 400;
+          }
+
+          @media only screen and (max-width: 1050px) {
+            h2 {
+              font-size: 16px
+            }
+
+            h3 {
+              font-size: 18px;
+            }
+
+            p {
+              font-size: 12px;
+            }
+          }
+
+          @media only screen and (max-width: 900px) {
+            p {
+              font-size: 10px;
+            }
+          }
+
+          @media only screen and (max-width: 768px) {
+            p {
+              display: none;
+            }
+          }
+        }
+      }
+
+      .vjs-recommendations-overlay-item-secondary-container {
+        flex: 1;
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: flex-start;
+
+        .vjs-recommendations-overlay-item-secondary {
+          background-size: 100% 100%;
+          flex: 1;
+
+          max-width: 33%;
+
+          font-size: 1.16em;
+          position: relative;
+
+          margin: 2% 2% 0 0;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          div {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+
+            text-align: left;
+            line-height: normal;
+            position: absolute;
+            width: 100%;
+            bottom: 0;
+            left: 0;
+            padding: 20% 7% 4.5% 7%;
+
+            .cld-video-player-skin-light & {
+              padding: 5% 7%;
+            }
+
+            .cld-video-player-skin-dark & {
+
+              &.vjs-recommendations-overlay-item-info {
+                text-shadow: 1px 1px 0 rgba(#000, .3);
+              }
+            }
+
+            span {
+              display: block;
+              min-width: 0;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap;
+
+              &.vjs-recommendations-overlay-item-secondary-title {
+                flex: 2.3;
+                font-size: 13px;
+              }
+
+              &.vjs-recommendations-overlay-item-secondary-duration {
+                text-align: right;
+                margin-left: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/shoppable-bar/layout/bar-layout.js

@@ -0,0 +1,111 @@
+
+import videojs from 'video.js';
+import { elMatches } from 'utils/matches';
+
+const dom = videojs.dom || videojs;
+const Component = videojs.getComponent('Component');
+import ShoppableProductsOverlay from './shoppable-products-overlay';
+import ShoppablePanelToggle from './shoppable-panel-toggle';
+import {
+  CLD_SPBL_INNER_BAR,
+  SHOPPABLE_PANEL_HIDDEN_CLASS,
+  SHOPPABLE_PANEL_VISIBLE_CLASS
+} from '../shoppable-widget.const';
+
+class ShoppableBarLayout extends Component {
+  constructor(player, options) {
+    super(player, options);
+    this.player_ = player;
+
+    this.player().addClass('cld-shoppable-panel');
+    this.player().addClass(SHOPPABLE_PANEL_HIDDEN_CLASS);
+
+    this.contentWrpEl_ = dom.createEl('div', { className: 'cld-spbl-bar' });
+
+    this.contentBannerEl_ = dom.createEl('div', { className: 'cld-spbl-banner-msg base-color-text' }, {}, this.options_.bannerMsg || 'Shop the Video');
+    this.contentWrpEl_.appendChild(this.contentBannerEl_);
+
+    const productsOverlay = new ShoppableProductsOverlay(this.player_, this.options_);
+    this.contentWrpEl_.appendChild(productsOverlay.el_);
+
+    this.contentEl_ = dom.createEl('div', { className: CLD_SPBL_INNER_BAR });
+    this.contentWrpEl_.appendChild(this.contentEl_);
+
+    this.player().el().appendChild(this.contentWrpEl_);
+
+    this.addChild(new ShoppablePanelToggle(this.player_, {
+      toggleIcon: this.options_.toggleIcon,
+      clickHandler: () => {
+        this.togglePanel();
+      }
+    }));
+
+    this.addChild('ShoppablePanel', this.options_);
+
+    this.dispose = () => {
+      this.removeLayout();
+      super.dispose();
+    };
+
+    this.togglePanel = (open) => {
+      if (open === true) {
+        // Open
+        this.player().removeClass(SHOPPABLE_PANEL_HIDDEN_CLASS);
+        this.player().addClass(SHOPPABLE_PANEL_VISIBLE_CLASS);
+      } else if (open === false) {
+        // Close
+        this.player().removeClass(SHOPPABLE_PANEL_VISIBLE_CLASS);
+        this.player().addClass(SHOPPABLE_PANEL_HIDDEN_CLASS);
+      } else {
+        // Toggle
+        this.player().toggleClass(SHOPPABLE_PANEL_HIDDEN_CLASS);
+        this.player().toggleClass(SHOPPABLE_PANEL_VISIBLE_CLASS);
+      }
+      let eventName = this.player().hasClass(SHOPPABLE_PANEL_VISIBLE_CLASS) ? 'productBarMax' : 'productBarMin';
+      this.player().trigger(eventName);
+    };
+
+    // Open shoppable
+    if (this.options_.startState === 'open') {
+      this.togglePanel(true);
+    }
+
+    // On play start
+    this.player_.on('play', () => {
+      if (this.player_.currentTime() < 0.01) {
+
+        // Open shoppable on-play
+        if (this.options_.startState === 'openOnPlay') {
+          this.togglePanel(true, this.options_.autoClose);
+        }
+
+        // Auto-close shoppable
+        if (this.options_.autoClose && this.options_.startState.indexOf('open') !== -1) {
+          setTimeout(() => {
+            // Keep it open while hovered
+            if (!elMatches(this.contentEl_, ':hover')) {
+              this.togglePanel(false);
+            } else {
+              this.contentEl_.addEventListener('mouseleave', () => {
+                this.togglePanel(false);
+              }, { once: true });
+            }
+          }, this.options_.autoClose * 1000);
+        }
+
+      }
+
+    });
+  }
+
+  createEl() {
+    const el = super.createEl('div');
+
+    return el;
+  }
+
+}
+
+videojs.registerComponent('shoppableBarLayout', ShoppableBarLayout);
+
+export default ShoppableBarLayout;