src/components/Image/BlurhashImg.vue

@@ -18,25 +18,21 @@ const props = withDefaults(
 const canvas = ref<HTMLCanvasElement | undefined>(undefined);
 
 onMounted(() => {
+  updateCanvas();
+});
+
+watch(() => props.hash, () => {
+  updateCanvas();
+});
+
+function updateCanvas() {
   try {
-    if (canvas.value) {
     const pixels = decode(props.hash, 128, 32);
     const imageData = new ImageData(pixels, 128, 32);
-      const context = canvas.value.getContext("2d");
-      if (context) {
-        context.putImageData(imageData, 0, 0);
-      }
-    }
-
-    @Watch("hash")
-    updateHashChange(): void {
-      try {
-        const pixels = decode(this.hash, 128, 32);
-        const imageData = new ImageData(pixels, 128, 32);
-        const context = this.canvas.getContext("2d");
+    const context = canvasRef.value.getContext('2d');
     context.putImageData(imageData, 0, 0);
   } catch (e) {
     console.error(e);
   }
-});
+}
 </script>

src/components/Image/BlurhashImgWrapper.vue

@@ -10,17 +10,22 @@
   </div>
 </template>
 
-<script lang="ts">
-import { IMedia } from "@/types/media.model";
-import { Prop, Component, Vue } from "vue-property-decorator";
-import { PropType } from "vue";
-import BlurhashImg from "./BlurhashImg.vue";
+<script setup lang="ts">
+import { IMedia } from '@/types/media.model';
+import BlurhashImg from './BlurhashImg.vue';
 
-const DEFAULT_CARD_URL = "/img/mobilizon_default_card.png";
-const DEFAULT_BLURHASH = "MCHKI4El-P-U}+={R-WWoes,Iu-P=?R,xD";
+const DEFAULT_CARD_URL = '/img/mobilizon_default_card.png';
+const DEFAULT_BLURHASH = 'MCHKI4El-P-U}+={R-WWoes,Iu-P=?R,xD';
 const DEFAULT_WIDTH = 630;
 const DEFAULT_HEIGHT = 350;
-const DEFAULT_PICTURE = {
+
+const props = defineProps({
+  picture: { type: Object as () => IMedia | null, default: null },
+});
+
+const pictureOrDefault = computed(() => {
+  if (props.picture === null) {
+    return {
       url: DEFAULT_CARD_URL,
       metadata: {
         width: DEFAULT_WIDTH,
@@ -28,53 +33,14 @@ const DEFAULT_PICTURE = {
         blurhash: DEFAULT_BLURHASH,
       },
     };
-
-@Component({
-  components: {
-    BlurhashImg,
-  },
-})
-export default class BlurhashImgWrapper extends Vue {
-  @Prop({ required: false, type: Object as PropType<IMedia | null> })
-  picture!: IMedia | null;
-
-  get pictureOrDefault(): Partial<IMedia> {
-    if (this.picture === null) {
-      return DEFAULT_PICTURE;
   }
   return {
-      url: this?.picture?.url,
+    url: props.picture?.url,
     metadata: {
-        width: this?.picture?.metadata?.width,
-        height: this?.picture?.metadata?.height,
-        blurhash: this?.picture?.metadata?.blurhash,
+      width: props.picture?.metadata?.width,
+      height: props.picture?.metadata?.height,
+      blurhash: props.picture?.metadata?.blurhash,
     },
   };
-  }
-}
+});
 </script>
-<style lang="scss" scoped>
-.relative {
-  position: relative;
-}
-.absolute {
-  position: absolute;
-}
-.top-0 {
-  top: 0;
-}
-.left-0 {
-  left: 0;
-}
-.wrapper,
-.container {
-  display: flex;
-  flex: 1;
-}
-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: 50% 50%;
-}
-</style>