embed-fbcmt-client/dist-client/vue.js

client package for embed-fbcmt

import { defaults, listenResize, setPropValue, listenEvent } from './chunk-63WMFUZV.js';
export { listenResize } from './chunk-63WMFUZV.js';
import { defineComponent, ref, watch, h, isRef, onBeforeUnmount } from 'vue';

var EmbedFbCmt_default = defineComponent({
  props: {
    color_scheme: {
      type: String,
      default: defaults.color_scheme
    },
    href: {
      type: String,
      required: true
    },
    lazy: {
      type: Boolean,
      default: defaults.lazy
    },
    mobile: {
      type: Boolean,
      default: defaults.mobile
    },
    num_posts: {
      type: Number,
      default: defaults.num_posts
    },
    order_by: {
      type: String,
      default: defaults.order_by
    },
    lang: {
      type: String,
      default: defaults.lang
    },
    origin: {
      type: String,
      default: defaults.origin
    },
    no_socket: {
      type: Boolean,
      default: defaults.no_socket
    },
    active: {
      type: Boolean,
      default: defaults.active
    },
    no_popup: {
      type: Boolean,
      default: defaults.no_popup
    },
    service: {
      type: String,
      default: "https://anime-vsub.github.io/embed-fbcmt"
    }
  },
  setup(props) {
    const rootSrc = ref();
    watch(
      () => props.service,
      (service) => {
        const query = new URLSearchParams(
          props
        );
        query.delete("service");
        rootSrc.value = new URL(`?${query}`, service).toString();
      },
      { immediate: true }
    );
    const commentRef = ref();
    watch(props, async (props2) => {
      const cloned = { ...props2 };
      delete cloned.service;
      await setPropValue2(commentRef, cloned);
    });
    const height = useEmbedHeight(commentRef);
    return () => h("iframe", {
      src: rootSrc.value,
      ref: commentRef,
      frameborder: "0",
      allowtransparency: "true",
      allowfullscreen: "true",
      scrolling: "no",
      width: "100%",
      height: "100%",
      allow: "encrypted-media",
      sandbox: "allow-forms allow-scripts allow-same-origin allow-top-navigation allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox",
      style: { height: `${height.value}px` }
    });
  }
});

// src/client/vue.ts
function isComponent(el) {
  return typeof el.$el !== "undefined";
}
function useEmbed(el) {
  const code = ref({
    code: "pending" /* PENDING */
  });
  const loading = ref(false);
  const error = ref();
  let cancelListenEvent = null;
  if (!isRef(el))
    el = ref(el);
  watch(
    el,
    (el2) => {
      if (isComponent(el2))
        el2 = el2.$el;
      cancelListenEvent?.();
      loading.value = false;
      error.value = void 0;
      code.value = {
        code: "pending" /* PENDING */
      };
      if (!el2)
        return;
      cancelListenEvent = listenEvent(el2, (event) => {
        code.value = event;
        if (event.type === "loading") {
          error.value = void 0;
          loading.value = true;
        } else if (event.type === "error") {
          loading.value = false;
          error.value = Object.assign(new Error(event.message), {
            code: event.type
          });
        } else {
          loading.value = false;
          error.value = void 0;
        }
      });
    },
    { immediate: true }
  );
  onBeforeUnmount(() => cancelListenEvent?.());
  return { code, loading, error };
}
function useEmbedSize(el) {
  let cancelResizWEvent = null;
  let cancelResizHEvent = null;
  const width = ref(0);
  const height = ref(0);
  if (!isRef(el))
    el = ref(el);
  watch(el, (el2) => {
    if (isComponent(el2))
      el2 = el2.$el;
    cancelResizWEvent?.();
    cancelResizHEvent?.();
    if (!el2)
      return;
    cancelResizWEvent = listenResize(
      el2,
      "width",
      (value) => width.value = value
    );
    cancelResizHEvent = listenResize(
      el2,
      "height",
      (value) => height.value = value
    );
  });
  onBeforeUnmount(() => {
    cancelResizWEvent?.();
    cancelResizHEvent?.();
  });
  return { width, height };
}
function useEmbedHeight(el) {
  let cancelResizHEvent = null;
  const height = ref(0);
  if (!isRef(el))
    el = ref(el);
  watch(el, (el2) => {
    if (isComponent(el2))
      el2 = el2.$el;
    cancelResizHEvent?.();
    if (!el2)
      return;
    cancelResizHEvent = listenResize(
      el2,
      "height",
      (value) => height.value = value
    );
  });
  onBeforeUnmount(() => {
    cancelResizHEvent?.();
  });
  return height;
}
async function setPropValue2(el, prop, value, origin) {
  if (isRef(el))
    el = el.value;
  if (isComponent(el))
    el = el.$el;
  if (el) {
    await setPropValue(
      el,
      prop,
      value,
      origin
    );
  }
}

export { EmbedFbCmt_default as EmbedFbCmt, setPropValue2 as setPropValue, useEmbed, useEmbedHeight, useEmbedSize };