v-pip/dist/v-pip.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@vue/composition-api')) :
  typeof define === 'function' && define.amd ? define(['@vue/composition-api'], factory) :
  (global = global || self, global.VPip = factory(global.vueCompositionApi));
}(this, (function (compositionApi) { 'use strict';

  //
  var script = compositionApi.defineComponent({
    name: 'VPip',
    props: {
      // Video related options
      videoOptions: {
        type: Object,
        required: false,
        default: function _default() {
          return {
            wrapper: '',
            src: '',
            poster: '',
            class: '',
            height: '100%',
            width: '100%'
          };
        }
      },
      // button related options
      buttonOptions: {
        type: Object,
        required: false,
        default: function _default() {
          return {
            wrapper: '',
            type: 'button',
            class: '',
            label: 'Toggle picture-in-picture'
          };
        }
      },
      wrapper: {
        type: String,
        default: '',
        required: false
      }
    },

    setup(props, _ref) {
      var emit = _ref.emit;
      // State
      var video = compositionApi.ref(null);
      var isPipSupported = compositionApi.ref(false); // Lifecycle Hooks

      compositionApi.onMounted(function () {
        isPipSupported.value = 'pictureInPictureEnabled' in document;
        video.value.addEventListener('enterpictureinpicture', function () {
          emit('video-in-pip', true);
        });
        video.value.addEventListener('leavepictureinpicture', function () {
          emit('video-in-pip', false);
        });
      });
      compositionApi.onBeforeUnmount(function () {
        video.value.removeEventListener('enterpictureinpicture');
        video.value.removeEventListener('leavepictureinpicture');
      }); // Methods

      var togglePip = function togglePip() {
        // If there is no element in Picture-in-Picture yet, let’s request
        // Picture-in-Picture for the video, otherwise leave it.
        if (!document.pictureInPictureElement) {
          video.value.requestPictureInPicture().catch(function (error) {
            // Video failed to enter Picture-in-Picture mode.
            emit('requesting-pip-failure', error);
          });
        } else {
          document.exitPictureInPicture().catch(function (error) {
            // Video failed to leave Picture-in-Picture mode.
            emit('exiting-pip-failure', error);
          });
        }
      };

      return {
        video,
        isPipSupported,
        togglePip
      };
    }

  });

  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
      if (typeof shadowMode !== 'boolean') {
          createInjectorSSR = createInjector;
          createInjector = shadowMode;
          shadowMode = false;
      }
      // Vue.extend constructor export interop.
      const options = typeof script === 'function' ? script.options : script;
      // render functions
      if (template && template.render) {
          options.render = template.render;
          options.staticRenderFns = template.staticRenderFns;
          options._compiled = true;
          // functional template
          if (isFunctionalTemplate) {
              options.functional = true;
          }
      }
      // scopedId
      if (scopeId) {
          options._scopeId = scopeId;
      }
      let hook;
      if (moduleIdentifier) {
          // server build
          hook = function (context) {
              // 2.3 injection
              context =
                  context || // cached call
                      (this.$vnode && this.$vnode.ssrContext) || // stateful
                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
              // 2.2 with runInNewContext: true
              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                  context = __VUE_SSR_CONTEXT__;
              }
              // inject component styles
              if (style) {
                  style.call(this, createInjectorSSR(context));
              }
              // register component module identifier for async chunk inference
              if (context && context._registeredComponents) {
                  context._registeredComponents.add(moduleIdentifier);
              }
          };
          // used by ssr in case component is cached and beforeCreate
          // never gets called
          options._ssrRegister = hook;
      }
      else if (style) {
          hook = shadowMode
              ? function (context) {
                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
              }
              : function (context) {
                  style.call(this, createInjector(context));
              };
      }
      if (hook) {
          if (options.functional) {
              // register for functional component in vue file
              const originalRender = options.render;
              options.render = function renderWithStyleInjection(h, context) {
                  hook.call(context);
                  return originalRender(h, context);
              };
          }
          else {
              // inject component registration as beforeCreate hook
              const existing = options.beforeCreate;
              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
          }
      }
      return script;
  }

  /* script */
  const __vue_script__ = script;

  /* template */
  var __vue_render__ = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { class: _vm.wrapper }, [
      _c("div", { class: _vm.videoOptions.wrapper }, [
        _c("video", {
          ref: "video",
          class: _vm.videoOptions.class,
          attrs: {
            src: _vm.videoOptions.src,
            poster: _vm.videoOptions.poster,
            height: _vm.videoOptions.height,
            width: _vm.videoOptions.width,
            controls: ""
          }
        })
      ]),
      _vm._v(" "),
      _c("div", { class: _vm.buttonOptions.wrapper }, [
        _vm.isPipSupported
          ? _c(
              "button",
              {
                class: _vm.buttonOptions.class,
                attrs: { type: _vm.buttonOptions.type },
                on: { click: _vm.togglePip }
              },
              [_vm._v("\n      " + _vm._s(_vm.buttonOptions.label) + "\n    ")]
            )
          : _vm._e()
      ])
    ])
  };
  var __vue_staticRenderFns__ = [];
  __vue_render__._withStripped = true;

    /* style */
    const __vue_inject_styles__ = undefined;
    /* scoped */
    const __vue_scope_id__ = undefined;
    /* module identifier */
    const __vue_module_identifier__ = undefined;
    /* functional template */
    const __vue_is_functional_template__ = false;
    /* style inject */
    
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__ = normalizeComponent(
      { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
      __vue_inject_styles__,
      __vue_script__,
      __vue_scope_id__,
      __vue_is_functional_template__,
      __vue_module_identifier__,
      false,
      undefined,
      undefined,
      undefined
    );

  return __vue_component__;

})));