cloudinary-video-player 1.6.2-edge.13

package/src/components/shoppable-bar/shoppable-widget.scss

@@ -0,0 +1,359 @@
+$width: 20%;
+.cld-spbl-bar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 1;
+}
+.cld-spbl-bar-inner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX($width);
+  transition: transform .3s;
+}
+.cld-video-player .vjs-control-bar {
+  transition: width .3s;
+}
+.shoppable-panel-visible {
+  .cld-spbl-bar-inner {
+    transform: translateX(0);
+  }
+  .vjs-control-bar {
+    width: 100% - $width;
+  }
+  .cld-spbl-toggle-icon:before {
+    content: "\f119";
+  }
+}
+.cld-spbl-banner-msg {
+  position: absolute;
+  font-size: 2em;
+  text-shadow: 0 0 5px rgba(#000, .5);
+  left: 0;
+  top: calc(50% + 3em);
+  width: 100%;
+  text-align: center;
+  .cld-video-player.vjs-has-started &,
+  .cld-video-player.vjs-error & {
+    display: none;
+  }
+}
+.cld-spbl-toggle {
+  position: absolute;
+  top: 3%;
+  right: $width;
+  color: inherit;
+  border-radius: 6px 0 0 6px;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 24px;
+  text-align: center;
+  cursor: pointer;
+  pointer-events: all;
+  text-decoration: none;
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+  &:focus {
+    outline: none;
+  }
+}
+.cld-spbl-toggle-icon {
+
+  // Custom toggle icon
+  &.cld-spbl-toggle-custom-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 75%;
+    .shoppable-panel-hidden & {
+      &:before {
+        display: none;
+      }
+    }
+    .shoppable-panel-visible & {
+      background-image: none !important;
+    }
+  }
+
+  // Animate
+  display: block;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  &.animate,
+  .shoppable-panel-hidden &:hover {
+    animation-name: tada;
+    animation-iteration-count: infinite;
+  }
+
+}
+.cld-spbl-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: $width;
+  overflow: auto;
+  pointer-events: all;
+
+  // Hide scrollbar
+  -ms-overflow-style: none;  // Internet Explorer 10+
+  scrollbar-width: none;  // Firefox
+  &::-webkit-scrollbar {
+    display: none;  // Safari and Chrome
+  }
+}
+.cld-spbl-item {
+  display: block;
+  position: relative;
+  margin: 12px 8px;
+  color: inherit;
+  transform: scale(0.98);
+  transition: transform .3s;
+
+  .cld-spbl-bar[size="md"] & {
+    font-size: 10px;
+  }
+  .cld-spbl-bar[size="sm"] & {
+    font-size: 8px;
+  }
+
+  &:before,
+  &:after {
+    content:  "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+    pointer-events: none;
+    box-shadow: 0 0 0;
+    transition: box-shadow .3s;
+    border-radius: 3px;
+  }
+  &.active {
+    transform: scale(1);
+    &:before {
+      opacity: .5;
+      box-shadow: 0 0 0 4px;
+    }
+    &:after {
+      box-shadow: 0 0 0 2px;
+    }
+
+  }
+  &:hover {
+    color: inherit;
+  }
+}
+.cld-spbl-img {
+  max-width: 100%;
+  height: auto;
+}
+.cld-spbl-hover-img {
+  display: none;
+}
+.cld-spbl-item-info {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  max-height: 100%;
+  overflow: hidden;
+  padding: 6%;
+}
+.cld-spbl-overlay {
+  display: inline-flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  line-height: 1.3;
+  font-size: 120%;
+  text-align: center;
+  padding: 10%;
+  z-index: 1;
+  opacity: 0;
+
+  .cld-spbl-overlay-text {
+    margin: auto;
+  }
+}
+.cld-spbl-item:hover {
+  .cld-spbl-overlay {
+    opacity: 1;
+    ~ .cld-spbl-item-info {
+      display: none;
+    }
+  }
+  .cld-spbl-hover-img {
+    display: block;
+    + {
+      .cld-spbl-img {
+        display: none;
+      }
+    }
+  }
+}
+
+.cld-spbl-post-play {
+  .cld-spbl-post-play-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-size: cover;
+  }
+  .cld-spbl-post-title {
+    position: absolute;
+    font-size: 1.5em;
+    text-shadow: 0 0 5px rgba(#000, .5);
+    left: 0;
+    top: 0.8em;
+    width: 100%;
+    text-align: center;
+  }
+  .cld-spbl-panel {
+    width:  100%;
+    top: 16%;
+    height: 60%;
+    padding: 10px 8px;
+    white-space: nowrap;
+    background: none !important;
+
+    cursor: grab;
+    &:active {
+      cursor: grabbing;
+    }
+  }
+  .cld-spbl-item {
+    display: inline-block;
+    width: 28%;
+    padding-top: 28%;
+    margin: 0 8px;
+    white-space: normal;
+    vertical-align: top;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 4px 6px 1.2px rgba(0,0,0,0.24), 0 6px 8px 4px rgba(0,0,0,0.24);
+    transform: none;
+  }
+  .cld-spbl-img {
+    max-width: 100%;
+    max-height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: 0 auto auto;
+  }
+  .cld-spbl-replay-btn {
+    position: absolute;
+    left: 5%;
+    bottom: 10%;
+    font-family: inherit;
+    padding: 8px 15px;
+    border-radius: 5px;
+    &:before {
+      font-family: VideoJS;
+      vertical-align: bottom;
+      margin-right: 4px;
+    }
+  }
+}
+
+.cld-spbl-post-modal {
+  .cld-spbl-bar,
+  .vjs-big-play-button,
+  .vjs-recommendations-overlay {
+    display: none;
+  }
+}
+
+@keyframes tada {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  10%, 20% {
+    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+  }
+  30%, 50%, 70%, 90% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+  40%, 60%, 80% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+// cld-spbl-products-overlay
+.shoppable-products-overlay {
+  .vjs-title-bar,
+  .vjs-big-play-button {
+    display: none !important;
+  }
+}
+.cld-spbl-product-hotspot {
+  pointer-events: all;
+  position: absolute;
+  cursor: pointer;
+  padding: 15px;
+  &:after {
+    content: '';
+    display: block;
+    width: 8px;
+    height: 8px;
+    background: #fff;
+    box-shadow: 0 0 0 4px #0078FF, 0 0 0 8px rgba(0,120,255,0.24);
+    border-radius: 18px;
+  }
+
+  &:hover .cld-spbl-product-tooltip {
+    display: block;
+  }
+}
+.cld-spbl-product-tooltip {
+  display: none;
+  position: absolute;
+  white-space: nowrap;
+  padding: 4px 6px;
+  border-radius: 4px;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  &.cld-spbl-product-tooltip-top {
+    top: auto;
+    bottom: 100%;
+  }
+  &.cld-spbl-product-tooltip-left {
+    top: 50%;
+    right: 100%;
+    left: auto;
+    transform: translateY(-50%);
+  }
+  &.cld-spbl-product-tooltip-right {
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+  }
+
+}

package/src/components/themeButton/themedButton.const.js

@@ -0,0 +1,3 @@
+export const BUTTON_THEME = {
+  TRANSPARENT_WHITE: 'transparent-white'
+};

package/src/components/themeButton/themedButton.js

@@ -0,0 +1,25 @@
+import { elementsCreator } from '../../utils/dom';
+
+
+export const themedButton = ({ text, onClick, theme = '', loadingDelay = 0 }) => {
+  return 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
+      }
+    ]
+  });
+};
+

package/src/components/title-bar/title-bar.js

@@ -0,0 +1,79 @@
+import videojs from 'video.js';
+import 'assets/styles/components/title-bar.scss';
+import componentUtils from '../component-utils';
+
+// support VJS5 & VJS6 at the same time
+const dom = videojs.dom || videojs;
+
+const Component = videojs.getComponent('Component');
+
+class TitleBar extends Component {
+
+  constructor(player, options = {}) {
+    super(player, options);
+
+    this.on(player, 'cldsourcechanged', (_, { source }) => this.setItem(source));
+  }
+
+  setItem(source) {
+    if (!source) {
+      this.setTitle('');
+      this.setSubtitle('');
+
+      return;
+    }
+
+    const info = source.info();
+
+    this.setTitle(info.title);
+    this.setSubtitle(info.subtitle);
+  }
+
+  setTitle(text) {
+    componentUtils.setText(this.titleEl, text);
+    this.refresh();
+    return text;
+  }
+
+  setSubtitle(text) {
+    componentUtils.setText(this.subtitleEl, text);
+    this.refresh();
+    return text;
+  }
+
+  refresh() {
+    const titleValue = () => this.titleEl.innerText;
+    const subtitleValue = () => this.subtitleEl.innerText;
+
+    if (!titleValue() && !subtitleValue()) {
+      this.hide();
+      return;
+    }
+
+    this.show();
+  }
+
+  createEl() {
+    this.titleEl = dom.createEl('div', {
+      className: 'vjs-title-bar-title'
+    });
+
+    this.subtitleEl = dom.createEl('div', {
+      className: 'vjs-title-bar-subtitle'
+    });
+
+    const el = super.createEl('div', {
+      append: this.titleEl,
+      className: 'vjs-title-bar'
+    });
+
+    el.appendChild(this.titleEl);
+    el.appendChild(this.subtitleEl);
+
+    return el;
+  }
+}
+
+videojs.registerComponent('titleBar', TitleBar);
+
+export default TitleBar;

package/src/config/defaults.js

@@ -0,0 +1,25 @@
+import contextMenuContent from '../plugins/context-menu/contextMenuContent';
+import { FLOATING_TO, PRELOAD } from '../video-player.const';
+
+export default {
+  logoOnclickUrl: 'https://cloudinary.com/',
+  showLogo: true,
+  showJumpControls: false,
+  skin: 'dark',
+  controls: false,
+  controlBar: {
+    'pictureInPictureToggle': false
+  },
+  preload: PRELOAD.AUTO,
+  loop: false,
+  muted: false,
+  posterOptions: {},
+  sourceTypes: ['webm/vp9', 'mp4/h265', 'mp4'],
+  contextMenu: {
+    content: contextMenuContent
+  },
+  floatingWhenNotVisible: FLOATING_TO.NONE,
+  hideContextMenu: false,
+  analytics: false,
+  playedEventPercents: [25, 50, 75, 100]
+};

package/src/extended-events.js

@@ -0,0 +1,228 @@
+import videojs from 'video.js';
+import EventEmitter from 'events';
+import { assign } from 'utils/assign';
+import { isPlainObject } from 'utils/type-inference';
+
+const EVENT_DEFAULTS = {
+  percentsplayed: {
+    percents: [25, 50, 75, 100]
+  }
+};
+
+const DEFAULT_EVENTS = [
+  'percentsplayed',
+  'pausenoseek',
+  'seek',
+  'mute',
+  'unmute',
+  'qualitychanged'
+];
+
+const DEFAULT_OPTIONS = {
+  events: DEFAULT_EVENTS
+};
+
+// Emits the following additional events:
+// percentsplayed, timeplayed, pausenoseek, seek, mute, unmute
+class ExtendedEvents extends EventEmitter {
+
+  constructor(player, initOptions = {}) {
+    super();
+    this.player = player;
+    const options = videojs.mergeOptions(DEFAULT_OPTIONS, initOptions);
+
+    let _muteData = { lastState: undefined };
+    let _seekStart = 0;
+    let _seekEnd = 0;
+    let _seeking = false;
+    let _percentsTracked = [];
+    let _timesTracked = [];
+    let _currentSource = null;
+    let _ended = false;
+
+    const volumechange = (event) => {
+      if (this.player.muted() && _muteData.lastState !== 'muted') {
+        _muteData.lastState = 'muted';
+        this.emit('mute', event);
+      } else if (!this.player.muted() && _muteData.lastState !== 'unmuted') {
+        _muteData.lastState = 'unmuted';
+        this.emit('unmute', event);
+      }
+    };
+
+    const timeupdate = (event) => {
+      const currentTime = this.player.currentTime();
+      const duration = this.player.duration();
+
+      const _emit = (type, data) => {
+        data.originalType = 'timeupdate';
+        this.emit(type, event, data);
+      };
+
+      if (this.events.percentsplayed) {
+        this.events.percentsplayed.percents.forEach((percent) => {
+          if (playedAtPercentage(currentTime, duration, percent) && _percentsTracked.indexOf(percent) === -1) {
+            _percentsTracked.push(percent);
+            _emit('percentsplayed', { percent });
+          }
+        });
+      }
+
+      if (this.events.timeplayed) {
+        const timeplayed = this.events.timeplayed;
+        const times = timeplayed.interval ? [Math.floor(currentTime / timeplayed.interval) * timeplayed.interval] : timeplayed.times;
+
+        times.forEach((time) => {
+          if (playedAtTime(currentTime, time) && _timesTracked.indexOf(time) === -1) {
+            _timesTracked.push(time);
+            _emit('timeplayed', { time });
+          }
+        });
+      }
+
+      if (this.events.seek) {
+        _seekStart = _seekEnd;
+        _seekEnd = currentTime;
+
+        if (Math.abs(_seekStart - _seekEnd) > 1) {
+          _seeking = true;
+
+          // should empty  _timesTracked array on seek, needed for 'timeplayed' event
+          resetPerVideoState();
+          _emit('seek', { seekStart: _seekStart, seekEnd: _seekEnd });
+        }
+      }
+    };
+
+    const pause = (event) => {
+      const currentTime = Math.round(this.player.currentTime());
+      const duration = Math.round(this.player.duration());
+
+      if (currentTime !== duration && !_seeking) {
+        this.emit('pausenoseek', event);
+      }
+    };
+
+    const play = () => {
+      _seeking = false;
+    };
+    const replay = () => {
+      if (_ended) {
+        this.player.trigger('replay');
+        _ended = false;
+      }
+    };
+
+    const loadedmetadata = () => {
+      if (this.player.currentSource().src !== _currentSource) {
+        resetPerVideoState();
+        _currentSource = this.player.currentSource().src;
+      }
+    };
+
+    const adaptiveEvents = (event) => {
+      let ee = this;
+      let tracks = this.player.textTracks();
+      let segmentMetadataTrack = null;
+      for (let i = 0; i < tracks.length; i++) {
+        if (tracks[i].label === 'segment-metadata') {
+          segmentMetadataTrack = tracks[i];
+        }
+
+      }
+      let previousResolution = null;
+
+      if (segmentMetadataTrack) {
+        segmentMetadataTrack.on('cuechange', function() {
+          let activeCue = segmentMetadataTrack.activeCues[0];
+
+          if (activeCue) {
+            let currentRes = activeCue.value.resolution;
+            if (previousResolution !== currentRes) {
+              let data = {
+                from: previousResolution,
+                to: currentRes
+              };
+              ee.emit('qualitychanged', event, data);
+            }
+            previousResolution = currentRes;
+          }
+        });
+      }
+
+
+    };
+
+    const resetState = () => {
+      _muteData = { lastState: undefined };
+      _seekStart = _seekEnd = 0;
+      _seeking = false;
+      resetPerVideoState();
+    };
+
+    const resetPerVideoState = () => {
+      _percentsTracked = [];
+      _timesTracked = [];
+    };
+
+    const ended = () => {
+      _ended = true;
+    };
+
+    this.events = normalizeEventsParam(options.events, EVENT_DEFAULTS);
+    resetState();
+
+    this.player.on('play', replay.bind(this));
+    this.player.on('ended', ended.bind(this));
+    if (this.events.percentsplayed || this.events.timeplayed ||
+      this.events.seek || this.events.totaltimeplayed) {
+
+      this.player.on('timeupdate', timeupdate.bind(this));
+    }
+
+    if (this.events.mute || this.events.unmute) {
+      this.player.on('volumechange', volumechange.bind(this));
+    }
+
+    if (this.events.pausenoseek) {
+      this.player.on('pause', pause.bind(this));
+      this.player.on('play', play.bind(this));
+    }
+
+    this.player.on('loadedmetadata', loadedmetadata.bind(this));
+    this.player.on('loadeddata', adaptiveEvents.bind(this));
+
+  }
+}
+
+const normalizeEventsParam = (events, defaults) => {
+  let normalized = events;
+
+  if (events.constructor.name === 'Array') {
+    normalized = events.reduce((agg, item) => {
+      const eventDefaults = defaults[item] || {};
+
+      if (isPlainObject(item)) {
+        agg[item.type] = assign({}, eventDefaults, item);
+      } else {
+        agg[item] = eventDefaults;
+      }
+
+      return agg;
+    }, {});
+  }
+
+  return normalized;
+};
+
+const playedAtPercentage = (currentTime, duration, percentageCheckpoint, graceRangeSeconds = 0.5) => {
+  const checkPoint = duration * percentageCheckpoint / 100;
+  return playedAtTime(currentTime, checkPoint, graceRangeSeconds);
+};
+
+const playedAtTime = (currentTime, checkpoint, graceRangeSeconds = 0.5) =>
+  (currentTime <= checkpoint + graceRangeSeconds &&
+    currentTime >= checkpoint - graceRangeSeconds);
+
+export { normalizeEventsParam };
+export default ExtendedEvents;