import { defineComponent, ref, watchEffect, nextTick, computed, watch, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, withModifiers, createVNode, createCommentVNode } from "vue";
import "../../../../adapter-vue.mjs";
import { handleSkeletonSize } from "../../utils/utils.mjs";
import Icon from "../../../common/Icon.vue.mjs";
import closeIcon from "../../../../assets/icon/icon-close.svg.mjs";
import { isPC } from "../../../../utils/env.mjs";
const _hoisted_1 = { class: "message-video" };
const _hoisted_2 = ["src"];
const _hoisted_3 = ["src", "poster"];
const _hoisted_4 = ["src", "poster"];
const _hoisted_5 = {
  key: 0,
  class: "dialog-video"
};
const _hoisted_6 = ["src"];
const transparentPosterUrl = "https://web.sdk.qcloud.com/im/assets/images/transparent.png";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "message-video",
  props: {
    content: { default: () => ({}) },
    messageItem: { default: () => ({}) }
  },
  emits: ["uploading"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const isShow = ref(false);
    const poster = ref("");
    const posterWidth = ref(0);
    const posterHeight = ref(0);
    const skeleton = ref();
    const videoRef = ref();
    watchEffect(async () => {
      if (!props.content) return;
      poster.value = await handlePosterUrl(props.content, props.messageItem);
      nextTick(async () => {
        var _a, _b, _c, _d, _e;
        const containerWidth = ((_a = document.getElementById("messageScrollList")) == null ? void 0 : _a.clientWidth) || 0;
        const max = !isPC ? Math.min(containerWidth - 172, 300) : 300;
        let size;
        if (props.messageItem.status === "success") {
          let { snapshotWidth = 0, snapshotHeight = 0 } = props.content;
          const { snapshotUrl } = props.content;
          if (snapshotWidth === 0 || snapshotHeight === 0) return;
          if (snapshotUrl === transparentPosterUrl) {
            snapshotWidth = posterWidth.value;
            snapshotHeight = posterHeight.value;
          }
          size = handleSkeletonSize(snapshotWidth, snapshotHeight, max, max);
          ((_b = skeleton == null ? void 0 : skeleton.value) == null ? void 0 : _b.style) && (skeleton.value.style.width = `${size.width}px`);
          ((_c = skeleton == null ? void 0 : skeleton.value) == null ? void 0 : _c.style) && (skeleton.value.style.height = `${size.height}px`);
          if (isPC) {
            ((_d = videoRef == null ? void 0 : videoRef.value) == null ? void 0 : _d.style) && (videoRef.value.style.width = `${size.width}px`);
            ((_e = videoRef == null ? void 0 : videoRef.value) == null ? void 0 : _e.style) && (videoRef.value.style.height = `${size.height}px`);
          }
        } else {
          emits("uploading");
        }
      });
    });
    const isWidth = computed(() => {
      const { snapshotWidth = 0, snapshotHeight = 0 } = props.messageItem.payload;
      return snapshotWidth >= snapshotHeight;
    });
    watch(() => props.messageItem.status, (newVal, oldVal) => {
      if (newVal === "success" && oldVal !== "success") {
        emits("uploading");
      }
    });
    function toggleVideoPreviewer() {
      if (props.messageItem.progress > 0 && props.messageItem.progress < 1) {
        return;
      }
      isShow.value = !isShow.value;
    }
    function getVideoBase64(url) {
      return new Promise((resolve) => {
        let dataURL = "";
        const video = document.createElement("video");
        video.setAttribute("crossOrigin", "anonymous");
        video.setAttribute("src", url);
        video.setAttribute("preload", "auto");
        video.addEventListener(
          "loadeddata",
          function() {
            const canvas = document.createElement("canvas"), width = video.videoWidth, height = video.videoHeight;
            canvas.width = width;
            canvas.height = height;
            canvas.getContext("2d").drawImage(video, 0, 0, width, height);
            dataURL = canvas.toDataURL("image/jpeg");
            posterWidth.value = width;
            posterHeight.value = height;
            resolve(dataURL);
          },
          { once: true }
        );
      });
    }
    async function handlePosterUrl(messgeContent, messageItem) {
      var _a, _b, _c, _d;
      if (!messageItem) return "";
      if (messageItem.status !== "success") {
        return await getVideoBase64(messgeContent.url);
      } else {
        return messgeContent.snapshotUrl !== transparentPosterUrl && messgeContent.snapshotUrl || ((_a = messageItem == null ? void 0 : messageItem.payload) == null ? void 0 : _a.snapshotUrl) !== transparentPosterUrl && ((_b = messageItem == null ? void 0 : messageItem.payload) == null ? void 0 : _b.snapshotUrl) || ((_c = messageItem.payload) == null ? void 0 : _c.thumbUrl) !== transparentPosterUrl && ((_d = messageItem == null ? void 0 : messageItem.payload) == null ? void 0 : _d.thumbUrl) || await getVideoBase64(messgeContent.url);
      }
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", {
          ref_key: "skeleton",
          ref: skeleton,
          class: normalizeClass(["message-video-box", [
            (!props.messageItem.progress || props.messageItem.progress === 1) && !unref(isPC) && "message-video-cover"
          ]]),
          onClick: toggleVideoPreviewer
        }, [
          props.messageItem.progress > 0 && props.messageItem.progress < 1 && unref(poster) || !unref(isPC) && unref(poster) ? (openBlock(), createElementBlock("img", {
            key: 0,
            class: normalizeClass(["message-img", [unref(isWidth) ? "is-width" : "is-height"]]),
            src: unref(poster)
          }, null, 10, _hoisted_2)) : !unref(isPC) ? (openBlock(), createElementBlock("video", {
            key: 1,
            ref_key: "videoRef",
            ref: videoRef,
            class: "message-img video-h5-uploading",
            src: props.content.url + "#t=0.1",
            poster: props.content.url,
            preload: "auto",
            muted: ""
          }, null, 8, _hoisted_3)) : (openBlock(), createElementBlock("video", {
            key: 2,
            ref_key: "videoRef",
            ref: videoRef,
            class: "message-img video-web",
            src: props.content.url,
            controls: "",
            preload: "metadata",
            poster: unref(poster)
          }, null, 8, _hoisted_4))
        ], 2),
        unref(isShow) && !unref(isPC) ? (openBlock(), createElementBlock("div", _hoisted_5, [
          createElementVNode("div", {
            class: "dialog-video-close",
            onClick: withModifiers(toggleVideoPreviewer, ["stop"])
          }, [
            createVNode(Icon, { file: unref(closeIcon) }, null, 8, ["file"])
          ]),
          createElementVNode("div", {
            class: normalizeClass(["dialog-video-box", [!unref(isPC) ? "dialog-video-h5" : ""]]),
            onClick: withModifiers(toggleVideoPreviewer, ["self"])
          }, [
            createElementVNode("video", {
              class: normalizeClass([unref(isWidth) ? "is-width" : "is-height"]),
              src: props.content.url,
              controls: "",
              autoplay: ""
            }, null, 10, _hoisted_6)
          ], 2)
        ])) : createCommentVNode("", true)
      ]);
    };
  }
});
export {
  _sfc_main as default
};
