v-pip/dist/v-pip.esm.js

import { defineComponent, ref, onMounted, onBeforeUnmount } from '@vue/composition-api';

//
var script = 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 = ref(null);
    var isPipSupported = ref(false); // Lifecycle Hooks

    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);
      });
    });
    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
  );

export default __vue_component__;