v-pip/dist/v-pip.js

/*!
* v-pip v2.3.1
* (c) 2022 Vinayak Kulkarni
* @license MIT
*/
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VPip = {}, global.vue));
})(this, (function (exports, vue) { 'use strict';

  function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }


    var script = vue.defineComponent({
      name: 'VPip',
      props: {
        // Video related options
        videoOptions: {
          type: Object ,
          required: false,
          default: () => ({
            wrapper: '',
            src: '',
            poster: '',
            class: '',
            height: '100%',
            width: '100%',
          }),
        },
        // button related options
        buttonOptions: {
          type: Object ,
          required: false,
          default: () => ({
            wrapper: '',
            type: 'button',
            class: '',
            label: 'Toggle picture-in-picture',
          }),
        },
        wrapper: {
          type: String ,
          default: '',
          required: false,
        },
      },
      emits: ['video-in-pip', 'requesting-pip-failure', 'exiting-pip-failure'],
      setup(_, { emit }) {
        // State
        const state = vue.reactive({
          video: null,
          isPipSupported: false,
        });

        // Lifecycle Hooks
        vue.onMounted(() => {
          state.isPipSupported = 'pictureInPictureEnabled' in document;
          _optionalChain([state, 'access', _2 => _2.video, 'optionalAccess', _3 => _3.addEventListener, 'call', _4 => _4('enterpictureinpicture', enteredPip)]);
          _optionalChain([state, 'access', _5 => _5.video, 'optionalAccess', _6 => _6.addEventListener, 'call', _7 => _7('leavepictureinpicture', leftPip)]);
        });
        vue.onBeforeUnmount(() => {
          _optionalChain([state, 'access', _8 => _8.video, 'optionalAccess', _9 => _9.removeEventListener, 'call', _10 => _10('enterpictureinpicture', leftPip)]);
          _optionalChain([state, 'access', _11 => _11.video, 'optionalAccess', _12 => _12.removeEventListener, 'call', _13 => _13('leavepictureinpicture', leftPip)]);
        });
        /**
         * Emit an event when entered PiP mode
         *
         * @returns {void}
         */
        function enteredPip() {
          emit('video-in-pip', true);
        }
        /**
         * Emit an event when left PiP mode
         *
         * @returns {void}
         */
        function leftPip() {
          emit('video-in-pip', false);
        }
        // Methods
        const togglePip = () => {
          // If there is no element in Picture-in-Picture yet, let’s request
          // Picture-in-Picture for the video, otherwise leave it.
          const { pictureInPictureElement, exitPictureInPicture } =
            document ;
          if (!pictureInPictureElement && state.video) {
            state.video.requestPictureInPicture().catch((error) => {
              // Video failed to enter Picture-in-Picture mode.
              emit('requesting-pip-failure', error);
            });
          } else {
            exitPictureInPicture().catch((error) => {
              // Video failed to leave Picture-in-Picture mode.
              emit('exiting-pip-failure', error);
            });
          }
        };

        return {
          state,
          togglePip,
        };
      },
    });

  const _hoisted_1 = ["src", "poster", "height", "width"];
  const _hoisted_2 = ["type"];

  function render(_ctx, _cache, $props, $setup, $data, $options) {
    return (vue.openBlock(), vue.createElementBlock("div", {
      class: vue.normalizeClass(_ctx.wrapper)
    }, [
      vue.createElementVNode("div", {
        class: vue.normalizeClass(_ctx.videoOptions.wrapper)
      }, [
        vue.createElementVNode("video", {
          ref: "video",
          src: _ctx.videoOptions.src,
          poster: _ctx.videoOptions.poster,
          class: vue.normalizeClass(_ctx.videoOptions.class),
          height: _ctx.videoOptions.height,
          width: _ctx.videoOptions.width,
          controls: ""
        }, null, 10 /* CLASS, PROPS */, _hoisted_1)
      ], 2 /* CLASS */),
      vue.createElementVNode("div", {
        class: vue.normalizeClass(_ctx.buttonOptions.wrapper)
      }, [
        (_ctx.state.isPipSupported)
          ? (vue.openBlock(), vue.createElementBlock("button", {
              key: 0,
              type: _ctx.buttonOptions.type,
              class: vue.normalizeClass(_ctx.buttonOptions.class),
              onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.togglePip && _ctx.togglePip(...args)))
            }, vue.toDisplayString(_ctx.buttonOptions.label), 11 /* TEXT, CLASS, PROPS */, _hoisted_2))
          : vue.createCommentVNode("v-if", true)
      ], 2 /* CLASS */)
    ], 2 /* CLASS */))
  }

  script.render = render;
  script.__file = "src/VPip.vue";

  let installed = false;

  const install = {
    install(app) {
      if (installed) return;
      app.component('VPip', script);
      installed = true;
    },
  };

  var install$1 = install;

  exports.VPip = script;
  exports["default"] = install$1;

  Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=v-pip.js.map