v-pip/dist/v-pip.js

Vue wrapper for native picture-in-picture (PiP)

import { defineComponent as f, reactive as g, onMounted as P, onBeforeUnmount as h, openBlock as u, createElementBlock as a, normalizeClass as n, createElementVNode as l, toDisplayString as m, createCommentVNode as O } from "vue";
/*!
* v-pip v3.2.0
* (c) 2024 Vinayak Kulkarni
* @license MIT
*/
const b = f({
  name: "VPip",
  props: {
    // Video related options
    videoOptions: {
      type: Object,
      required: !1,
      default: () => ({
        wrapper: "",
        src: "",
        poster: "",
        class: "",
        height: "100%",
        width: "100%"
      })
    },
    // button related options
    buttonOptions: {
      type: Object,
      required: !1,
      default: () => ({
        wrapper: "",
        type: "button",
        class: "",
        label: "Toggle picture-in-picture"
      })
    },
    wrapper: {
      type: String,
      default: "",
      required: !1
    }
  },
  emits: ["video-in-pip", "requesting-pip-failure", "exiting-pip-failure"],
  setup(e, { emit: i }) {
    const t = g({
      video: null,
      isPipSupported: !1
    });
    P(() => {
      t.isPipSupported = "pictureInPictureEnabled" in document, t.video?.addEventListener("enterpictureinpicture", p), t.video?.addEventListener("leavepictureinpicture", o);
    }), h(() => {
      t.video?.removeEventListener("enterpictureinpicture", o), t.video?.removeEventListener("leavepictureinpicture", o);
    });
    const p = () => {
      i("video-in-pip", !0);
    }, o = () => {
      i("video-in-pip", !1);
    };
    return {
      state: t,
      togglePip: () => {
        const { pictureInPictureElement: r, exitPictureInPicture: v } = document;
        !r && t.video ? t.video.requestPictureInPicture().catch((s) => {
          i("requesting-pip-failure", s);
        }) : v().catch((s) => {
          i("exiting-pip-failure", s);
        });
      }
    };
  }
}), w = (e, i) => {
  const t = e.__vccOpts || e;
  for (const [p, o] of i)
    t[p] = o;
  return t;
}, y = ["src", "poster", "height", "width"], E = ["type"];
function q(e, i, t, p, o, c) {
  return u(), a("div", {
    class: n(e.wrapper)
  }, [
    l("div", {
      class: n(e.videoOptions.wrapper)
    }, [
      l("video", {
        ref: "video",
        src: e.videoOptions.src,
        poster: e.videoOptions.poster,
        class: n(e.videoOptions.class),
        height: e.videoOptions.height,
        width: e.videoOptions.width,
        controls: ""
      }, null, 10, y)
    ], 2),
    l("div", {
      class: n(e.buttonOptions.wrapper)
    }, [
      e.state.isPipSupported ? (u(), a("button", {
        key: 0,
        type: e.buttonOptions.type,
        class: n(e.buttonOptions.class),
        onClick: i[0] || (i[0] = (...r) => e.togglePip && e.togglePip(...r))
      }, m(e.buttonOptions.label), 11, E)) : O("", !0)
    ], 2)
  ], 2);
}
const k = /* @__PURE__ */ w(b, [["render", q]]);
let d = !1;
const S = (e) => {
  d || (e.component("VPip", k), d = !0);
}, $ = S;
export {
  k as VPip,
  $ as default
};
//# sourceMappingURL=v-pip.js.map