{"version":3,"file":"ChatImagePreview-f17b4f3d.js","sources":["../../../app/javascript/components/chat/ChatImagePreview.vue"],"sourcesContent":["<template>\n  <Teleport to=\"body\">\n    <div\n      v-if=\"image\"\n      class=\"absolute bottom-0 left-0 right-0 top-0 z-[100] h-full w-full\"\n      style=\"background: hsl(0, calc(var(--saturation-factor, 1) * 0%), 0%); opacity: 0.85\"\n      @click=\"$store.dispatch('setImageForPreview', null)\"\n    ></div>\n    <div v-if=\"image\" class=\"absolute bottom-0 left-0 right-0 top-0 z-[100] my-auto h-full w-full\">\n      <div\n        class=\"flex h-full flex-col items-center justify-center\"\n        @click.self=\"$store.dispatch('setImageForPreview', null)\"\n      >\n        <div style=\"max-width: 75%\">\n          <img :src=\"image\" alt=\"\" class=\"max-h-104\" />\n          <a target=\"_blank\" class=\"mt-1 text-xs text-gray-400 underline\" :href=\"image\">Open Original</a>\n        </div>\n      </div>\n    </div>\n  </Teleport>\n</template>\n<script setup>\nimport { ref, watch, computed } from 'vue';\nimport { useStore } from 'vuex';\nconst $store = useStore();\n\nconst imageHeight = ref(0);\nconst imageWidth = ref(0);\nconst image = computed(() => {\n  return $store.state.previewImage;\n});\nwatch(\n  () => image.value,\n  (newVal, oldVal) => {\n    if (image.value) {\n      let img = new Image();\n      img.addEventListener('load', function () {\n        imageWidth.value = img.naturalWidth;\n        imageHeight.value = img.naturalHeight;\n      });\n      img.src = image.value;\n    }\n  }\n);\n</script>\n"],"names":["$store","useStore","imageHeight","ref","imageWidth","image","computed","watch","newVal","oldVal","img"],"mappings":"mTAwBA,MAAMA,EAASC,EAAQ,EAEjBC,EAAcC,EAAI,CAAC,EACnBC,EAAaD,EAAI,CAAC,EAClBE,EAAQC,EAAS,IACdN,EAAO,MAAM,YACrB,EACD,OAAAO,EACE,IAAMF,EAAM,MACZ,CAACG,EAAQC,IAAW,CAClB,GAAIJ,EAAM,MAAO,CACf,IAAIK,EAAM,IAAI,MACdA,EAAI,iBAAiB,OAAQ,UAAY,CACvCN,EAAW,MAAQM,EAAI,aACvBR,EAAY,MAAQQ,EAAI,aAChC,CAAO,EACDA,EAAI,IAAML,EAAM,KACjB,CACF,CACH"}