vue-pip/dist/vue-pip.js

This is a simple utility package for document picture in picture

import { defineComponent as h, ref as I, computed as d, watch as C, onBeforeUnmount as v, createElementBlock as E, openBlock as p, Fragment as S, renderSlot as u, createCommentVNode as m, createBlock as g, Teleport as B } from "vue";
const k = async (r, o) => {
  const c = (e) => new Promise((l, i) => {
    const n = r.document.createElement("script");
    n.src = e, n.onload = () => l(), n.onerror = () => i(new Error(`Failed to load script: ${e}`)), r.document.head.appendChild(n);
  });
  try {
    await Promise.all(o.map(c));
  } catch (e) {
    console.warn("Error loading CDN scripts:", e);
  }
}, W = (r) => {
  [...document.styleSheets].forEach((o) => {
    try {
      const c = [...o.cssRules].map((l) => l.cssText).join(""), e = document.createElement("style");
      e.textContent = c, r.document.head.appendChild(e);
    } catch (c) {
      console.warn("Error copying styles: ", c);
      const e = document.createElement("link");
      e.rel = "stylesheet", e.type = o.type, e.media = o.media.toString(), e.href = o.href ?? "", r.document.head.appendChild(e);
    }
  });
}, R = /* @__PURE__ */ h({
  __name: "DocumentPIP",
  props: {
    size: {},
    mode: { default: "transfer" },
    copyAllStyles: { type: Boolean, default: !0 },
    isPipOpen: { type: Boolean },
    cdnScripts: {},
    disallowReturnToOpener: { type: Boolean, default: !1 },
    preferInitialWindowPlacement: { type: Boolean, default: !1 }
  },
  emits: ["onClose"],
  setup(r, { emit: o }) {
    const c = "documentPictureInPicture" in window, e = r, l = o, i = I(null), n = d(() => i.value?.document.getElementById("pip-root") || null), P = d(() => ({
      width: e.size?.width || 0,
      height: e.size?.height || 0,
      disallowReturnToOpener: e.disallowReturnToOpener,
      preferInitialWindowPlacement: e.preferInitialWindowPlacement
    })), f = (t) => {
      if (!c) {
        console.warn(
          "Document Picture-in-Picture API is not supported in this browser"
        );
        return;
      }
      t ? w() : s();
    }, w = async () => {
      const t = await window.documentPictureInPicture.requestWindow(
        P.value
      );
      e.copyAllStyles && W(t), e.cdnScripts && e.cdnScripts.length > 0 && await k(t, e.cdnScripts);
      const a = t.document.createElement("div");
      a.id = "pip-root", t.document.body.appendChild(a), t.addEventListener("pagehide", y, { once: !0 }), i.value = t;
    }, s = () => {
      i.value && (i.value.close(), i.value = null);
    }, y = () => {
      s(), e.isPipOpen && l("onClose");
    };
    return C(
      () => e.isPipOpen,
      (t) => {
        f(t);
      }
    ), v(() => {
      s();
    }), (t, a) => (p(), E(S, null, [
      !n.value || t.mode === "clone" ? u(t.$slots, "default", { key: 0 }) : m("", !0),
      n.value ? (p(), g(B, {
        key: 1,
        to: n.value
      }, [
        u(t.$slots, "default")
      ], 8, ["to"])) : m("", !0)
    ], 64));
  }
});
export {
  R as default
};