cloudinary-video-player 1.6.2-edge.13

package/src/plugins/floating-player/floating-player.scss

@@ -0,0 +1,74 @@
+.cld-video-player-floater {
+  position: static;
+  transition: all 0.5s ease-out;
+  transition-property: bottom, right, left;
+
+  .cld-video-player-floater-close {
+    display: none;
+  }
+
+  // Floated
+  &.cld-video-player-floating {
+    position: fixed;
+    z-index: 9;
+    border: 4px solid #fff;
+    box-shadow: 0 3px 10px rgba(#000, .2);
+
+    .cld-video-player-floater-inner {
+      height: 0;
+      width: 100%;
+    }
+
+    .cld-video-player-floater-close {
+      position: absolute;
+      bottom: 100%;
+      background: #fff;
+      border-bottom: none;
+      margin-bottom: 4px;
+      right: -4px;
+      padding: 4px 6px 2px;
+      display: block;
+      box-shadow: 0 0 4px rgba(#000, .05);
+      cursor: pointer;
+      // Hide bottom shadow
+      &::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        right: 0;
+        width: 120%;
+        height: 4px;
+        background: #fff;
+      }
+    }
+
+    .vjs-time-control,
+    .vjs-upcoming-video-title-display,
+    .vjs-recommendations-overlay {
+      display: none;
+    }
+    .vjs-upcoming-video .vjs-upcoming-video-bar {
+      background-color: transparent;
+    }
+
+    .vjs-big-play-button {
+      font-size: 4em;
+      top: 40%;
+    }
+
+    &.cld-video-player-floater-bottom-right {
+      bottom: 20px !important;
+      right: 20px !important;
+      top: auto !important;
+      left: auto !important;
+    }
+
+    &.cld-video-player-floater-bottom-left {
+      bottom: 20px !important;
+      left: 20px !important;
+      top: auto !important;
+      right: auto !important;
+    }
+
+  }
+}

package/src/plugins/floating-player/index.js

@@ -0,0 +1,129 @@
+import { isElementInViewport } from 'utils/positioning';
+import { sliceProperties } from 'utils/slicing';
+import { assign } from 'utils/assign';
+import './floating-player.scss';
+import { FLOATING_TO } from '../../video-player.const';
+
+const defaults = {
+  fraction: 0.5,
+  collapsedWidth: 300,
+  floatTo: 'right'
+};
+
+class FloatingPlayer {
+
+  constructor(player, opts = {}) {
+    opts = assign({}, defaults, opts);
+    // Handle non left-right values.
+    if (opts.floatTo && opts.floatTo !== FLOATING_TO.LEFT && opts.floatTo !== FLOATING_TO.RIGHT) {
+      opts.floatTo = defaults.floatTo;
+    }
+
+    this.player = player;
+    let _options = sliceProperties(opts, 'fraction');
+
+    let _floater = null;
+    let _floated = false;
+    let _wrapped = false;
+
+    this.init = () => {
+      registerEventHandlers();
+    };
+
+    const wrapInner = (parent) => {
+      const wrapper = document.createElement('div');
+      parent.appendChild(wrapper);
+      while (parent.firstChild !== wrapper) {
+        wrapper.appendChild(parent.firstChild);
+      }
+      return wrapper;
+    };
+
+    const removeWindowEventHandlers = () => {
+      window.removeEventListener('DOMContentLoaded', checkViewportState, false);
+      window.removeEventListener('load', checkViewportState, false);
+      window.removeEventListener('scroll', checkViewportState, false);
+      window.removeEventListener('resize', checkViewportState, false);
+    };
+
+    const addWindowEventHandlers = () => {
+      window.addEventListener('DOMContentLoaded', checkViewportState, false);
+      window.addEventListener('load', checkViewportState, false);
+      window.addEventListener('scroll', checkViewportState, false);
+      window.addEventListener('resize', checkViewportState, false);
+    };
+
+    const registerEventHandlers = () => {
+      this.player.on('play', checkViewportState);
+      this.player.on('play', addWindowEventHandlers);
+      // this.player.on('pause', removeWindowEventHandlers);
+      this.player.on('dispose', removeWindowEventHandlers);
+    };
+
+    const float = () => {
+      const el = this.player.el();
+      const elRect = el.getBoundingClientRect();
+
+      if (!_wrapped) {
+        // Create floater element
+        _floater = wrapInner(el);
+        _floater.setAttribute('class', 'cld-video-player-floater cld-video-player-floater-bottom-' + opts.floatTo);
+        _floater.setAttribute('style', [
+          'width: ' + opts.collapsedWidth + 'px;',
+          'top: ' + elRect.top + 'px;',
+          'left: ' + elRect.left + 'px;',
+          'right: ' + (document.documentElement.clientWidth - elRect.right) + 'px;',
+          'bottom: ' + (document.documentElement.clientHeight - elRect.bottom) + 'px;'
+        ].join(''));
+
+        // Create inner element
+        const inner = wrapInner(_floater);
+        inner.setAttribute('class', 'cld-video-player-floater-inner');
+        inner.setAttribute('style', 'padding-bottom: ' + (100 * elRect.height / elRect.width) + '%;');
+
+        const close = document.createElement('button');
+        close.setAttribute('class', 'cld-video-player-floater-close');
+        close.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><polygon fill-rule="evenodd" points="370 7.41 368.59 6 364 10.59 359.41 6 358 7.41 362.59 12 358 16.59 359.41 18 364 13.41 368.59 18 370 16.59 365.41 12" transform="translate(-358 -6)"/></svg>';
+        close.onclick = () => {
+          unfloat();
+          disable();
+        };
+        _floater.appendChild(close);
+
+        _wrapped = true;
+      }
+
+      setTimeout(() => {
+        _floater.classList.add('cld-video-player-floating');
+      });
+
+      _floated = true;
+    };
+
+    const unfloat = () => {
+      _floater.classList.remove('cld-video-player-floating');
+      _floated = false;
+    };
+
+    const disable = () => {
+      removeWindowEventHandlers();
+      this.player.off('play', checkViewportState);
+      this.player.off('play', addWindowEventHandlers);
+    };
+
+    const checkViewportState = () => {
+      const visible = isElementInViewport(this.player.el(), { fraction: _options.fraction });
+      if (visible) {
+        if (_floated) {
+          unfloat();
+        }
+      } else if (!_floated) {
+        float();
+      }
+    };
+  }
+}
+
+export default function(opts = {}) {
+  new FloatingPlayer(this, opts).init();
+}