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

/*!
* v-pip v2.3.1
* (c) 2022 Vinayak Kulkarni
* @license MIT
*/
import { defineComponent, reactive, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode } from 'vue';

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 = 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 = reactive({
        video: null,
        isPipSupported: false,
      });

      // Lifecycle Hooks
      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)]);
      });
      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 (openBlock(), createElementBlock("div", {
    class: normalizeClass(_ctx.wrapper)
  }, [
    createElementVNode("div", {
      class: normalizeClass(_ctx.videoOptions.wrapper)
    }, [
      createElementVNode("video", {
        ref: "video",
        src: _ctx.videoOptions.src,
        poster: _ctx.videoOptions.poster,
        class: normalizeClass(_ctx.videoOptions.class),
        height: _ctx.videoOptions.height,
        width: _ctx.videoOptions.width,
        controls: ""
      }, null, 10 /* CLASS, PROPS */, _hoisted_1)
    ], 2 /* CLASS */),
    createElementVNode("div", {
      class: normalizeClass(_ctx.buttonOptions.wrapper)
    }, [
      (_ctx.state.isPipSupported)
        ? (openBlock(), createElementBlock("button", {
            key: 0,
            type: _ctx.buttonOptions.type,
            class: normalizeClass(_ctx.buttonOptions.class),
            onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.togglePip && _ctx.togglePip(...args)))
          }, toDisplayString(_ctx.buttonOptions.label), 11 /* TEXT, CLASS, PROPS */, _hoisted_2))
        : 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;

export { script as VPip, install$1 as default };
//# sourceMappingURL=v-pip.esm.js.map