{"version":3,"file":"DQWHOQ0W.js","sources":["../../../../src/components/SkrImage.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default defineComponent({\n  name: 'SkrImage',\n  props: {\n    src: String,\n    lazy: {\n      type: Boolean,\n      default: false,\n    },\n    height: {\n      type: Number,\n      required: false,\n    },\n    emitSize: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup() {\n    const { documentRepository } = useApi()\n    const { getWebPDimensionsFromEXIF } = useExif()\n\n    return { getWebPDimensionsFromEXIF, getDocumentPage: documentRepository.getDocumentPageByUrl }\n  },\n  data() {\n    return {\n      imgSrc: '',\n      loaded: false,\n      imgHeight: '',\n      ready: false,\n      loadTimeout: 0,\n      buf: undefined as ArrayBuffer | undefined,\n    }\n  },\n  watch: {\n    height() {\n      this.setHeight()\n    },\n    /* the two watchers below are because sometimes the parent\n      component updates these values slowly, and if the component\n      has mounted then it might not trigger loading the image\n      simply by scrolling into view */\n    src(val, old) {\n      if (val !== old) {\n        const hasLoaded = this.loaded\n        this.imgSrc = ''\n        this.loaded = false\n        this.imgHeight = ''\n        this.ready = false\n        this.loadTimeout = 0\n        this.buf = undefined\n        // if lazy, only load if it's in the viewport\n        if (this.lazy && !hasLoaded) return\n        void this.loadImg()\n      }\n    },\n    lazy() {\n      if (!this.lazy && !this.loaded) void this.loadImg()\n    },\n  },\n  beforeMount() {\n    this.setHeight()\n  },\n  mounted() {\n    if (!this.lazy) void this.loadImg()\n  },\n  methods: {\n    loadLazy(_: boolean, entries: [IntersectionObserverEntry]) {\n      if (!entries[0]?.isIntersecting) {\n        clearTimeout(this.loadTimeout)\n        return\n      }\n      if (this.imgHeight && this.ready) {\n        this.loadTimeout = window.setTimeout(() => {\n          void this.loadImg()\n        }, 1000)\n      }\n    },\n    async loadImg() {\n      if (this.imgSrc) return\n      const src = this.src\n      if (!src) return\n      try {\n        const blob = await this.getDocumentPage(src)\n        const buf = await new Response(blob).arrayBuffer()\n        this.buf = buf\n        if (blob.type === 'image/webp' && !this.$webp.supported()) {\n          this.imgSrc = await this.$webp.decode(new Uint8Array(buf))\n        } else {\n          this.imgSrc = URL.createObjectURL(blob)\n        }\n        this.imgHeight = ''\n        // just wait for the src value to be set so there's a moment for the image to load\n        this.loaded = true\n      } catch {\n        // silently fail\n      }\n    },\n    getDimensions() {\n      if (!this.buf) return\n      const data: { width: number; height: number; exif?: { width: number; height: number } } = {\n        width: -1,\n        height: -1,\n      }\n      const exif = this.getWebPDimensionsFromEXIF(this.buf as ArrayBuffer)\n      if (exif.width >= 0) {\n        data.exif = exif\n      }\n      const img = this.$refs.image\n      if (img && img instanceof HTMLImageElement) {\n        data.width = img.naturalWidth\n        data.height = img.naturalHeight\n      }\n      return data\n    },\n    setHeight() {\n      /* visibility detection is super fragile, still not sure how to make\n        this work reliably and be clear, but right now, checking the height\n        prop seems to be necessary */\n      if (!this.imgHeight && !this.loaded && this.height && this.height > 0) {\n        this.imgHeight = `${this.height}px`\n        // need to delay the load trigger to allow height to\n        // take effect and prevent v-intersect from running\n        setTimeout(() => {\n          this.ready = true\n          const inviewport = this.isInViewport()\n          if (inviewport) {\n            void this.loadImg()\n          }\n        }, 100)\n      }\n    },\n    isInViewport() {\n      const rect = this.$el.getBoundingClientRect()\n      if (rect.height === 0) return false\n      return (\n        rect.top >= 0 &&\n        rect.left >= 0 &&\n        rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&\n        rect.left <= (window.innerWidth || document.documentElement.clientWidth)\n      )\n    },\n    onLoaded($event) {\n      if (this.emitSize) {\n        this.$emit('size', this.getDimensions())\n      }\n      this.$emit('load', $event)\n    },\n  },\n})\n</script>\n\n<template>\n  <img\n    v-if=\"lazy\"\n    ref=\"image\"\n    v-intersect.quiet=\"loadLazy\"\n    class=\"skr-image skr-image__lazy\"\n    :src=\"imgSrc\"\n    :lazy=\"loaded ? 'loaded' : ''\"\n    :style=\"{ height: imgHeight !== '' ? imgHeight : 'auto' }\"\n    :data-src=\"src\"\n    alt=\" \"\n    @load=\"onLoaded\"\n    @click=\"$emit('click', $event)\"\n  />\n  <img\n    v-else\n    class=\"skr-image\"\n    ref=\"image\"\n    :src=\"imgSrc\"\n    :style=\"{ height: imgHeight !== '' ? imgHeight : 'auto' }\"\n    :data-src=\"src\"\n    alt=\" \"\n    @load=\"onLoaded\"\n    @click=\"$emit('click', $event)\"\n  />\n</template>\n\n<style lang=\"sass\">\n$ns: skr-image\n\n.#{$ns}\n  pointer-events: none // Edge fix\n  &[src='']\n    visibility: hidden\n    width: 0\n  &__lazy\n    &:not([lazy=loaded])\n      visibility: hidden\n      width: 0\n</style>\n"],"names":["_sfc_main","defineComponent","documentRepository","useApi","getWebPDimensionsFromEXIF","useExif","val","old","hasLoaded","_","entries","_a","src","blob","buf","e","data","exif","img","rect","$event","_ctx","_withDirectives","_openBlock","_createElementBlock","imgSrc","loaded","_normalizeStyle","_cache","args"],"mappings":"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"}