@nextcloud/vue/dist/chunks/NcBlurHash.mjs

Nextcloud vue components

import '../assets/NcBlurHash.css';
import { defineComponent, ref, watch, nextTick, openBlock, createBlock, Transition, withCtx, createElementBlock } from "vue";
import { decode } from "blurhash";
import { preloadImage } from "../functions/preloadImage/index.mjs";
import { l as logger } from "./logger.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
const _hoisted_1 = ["aria-hidden", "aria-label"];
const _hoisted_2 = ["alt", "src"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "NcBlurHash",
  props: {
    hash: {},
    alt: {},
    src: {}
  },
  emits: ["load"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const canvas = ref();
    const imageLoaded = ref(false);
    watch(() => props.hash, drawBlurHash);
    watch(imageLoaded, () => {
      if (imageLoaded.value === false) {
        nextTick(() => drawBlurHash());
      }
    }, { immediate: true });
    watch(() => props.src, () => {
      imageLoaded.value = false;
      if (props.src) {
        preloadImage(props.src).then((success) => {
          imageLoaded.value = success;
          emit("load", success);
        });
      }
    }, { immediate: true });
    function drawBlurHash() {
      if (imageLoaded.value) {
        return;
      }
      if (!props.hash) {
        logger.error("Invalid BlurHash value");
        return;
      }
      if (canvas.value === void 0) {
        logger.error("BlurHash canvas not available");
        return;
      }
      const { height, width } = canvas.value;
      const pixels = decode(props.hash, width, height);
      const ctx = canvas.value.getContext("2d");
      if (ctx === null) {
        logger.error("Cannot create context for BlurHash canvas");
        return;
      }
      const imageData = ctx.createImageData(width, height);
      imageData.data.set(pixels);
      ctx.putImageData(imageData, 0, 0);
    }
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Transition, {
        css: __props.src ? void 0 : false,
        enterActiveClass: _ctx.$style.fadeTransition,
        leaveActiveClass: _ctx.$style.fadeTransition,
        enterClass: _ctx.$style.fadeTransitionActive,
        leaveToClass: _ctx.$style.fadeTransitionActive
      }, {
        default: withCtx(() => [
          !imageLoaded.value ? (openBlock(), createElementBlock("canvas", {
            key: 0,
            ref_key: "canvas",
            ref: canvas,
            "aria-hidden": __props.alt ? void 0 : "true",
            "aria-label": __props.alt
          }, null, 8, _hoisted_1)) : (openBlock(), createElementBlock("img", {
            key: 1,
            alt: __props.alt,
            src: __props.src
          }, null, 8, _hoisted_2))
        ]),
        _: 1
      }, 8, ["css", "enterActiveClass", "leaveActiveClass", "enterClass", "leaveToClass"]);
    };
  }
});
const fadeTransition = "_fadeTransition_-Ph13";
const fadeTransitionActive = "_fadeTransitionActive_4p01v";
const style0 = {
  fadeTransition,
  fadeTransitionActive
};
const cssModules = {
  "$style": style0
};
const NcBlurHash = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
export {
  NcBlurHash as N
};
//# sourceMappingURL=NcBlurHash.mjs.map