Add Blurhash to front-end

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/package.json

@@ -30,6 +30,7 @@
     "@tiptap/starter-kit": "^2.0.0-beta.37",
     "@tiptap/vue-2": "^2.0.0-beta.21",
     "apollo-absinthe-upload-link": "^1.5.0",
+    "blurhash": "^1.1.3",
     "buefy": "^0.9.0",
     "bulma-divider": "^0.2.0",
     "core-js": "^3.6.4",

js/src/components/Event/EventBanner.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="banner-container">
+    <lazy-image-wrapper :picture="picture" />
+  </div>
+</template>
+<script lang="ts">
+import { IMedia } from "@/types/media.model";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import LazyImageWrapper from "../Image/LazyImageWrapper.vue";
+
+@Component({
+  components: {
+    LazyImageWrapper,
+  },
+})
+export default class EventBanner extends Vue {
+  @Prop({ required: true, default: null })
+  picture!: IMedia | null;
+}
+</script>
+<style lang="scss" scoped>
+.banner-container {
+  display: flex;
+  justify-content: center;
+  height: 400px;
+}
+::v-deep img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 50%;
+}
+</style>

js/src/components/Event/EventCard.vue

@@ -4,12 +4,11 @@
     :to="{ name: 'Event', params: { uuid: event.uuid } }"
   >
     <div class="card-image">
-      <figure
+      <figure class="image is-16by9">
-        class="image is-16by9"
+        <lazy-image-wrapper
-        :style="`background-image: url('${
+          :picture="event.picture"
-          event.picture ? event.picture.url : '/img/mobilizon_default_card.png'
+          style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
-        }')`"
+        />
-      >
         <div
           class="tag-container"
           v-if="event.tags || event.status !== EventStatus.CONFIRMED"
@@ -34,6 +33,7 @@
       <div class="media">
         <div class="media-left">
           <date-calendar-icon
+            :small="true"
             v-if="!mergedOptions.hideDate"
             :date="event.beginsOn"
           />
@@ -103,6 +103,7 @@
 import { IEvent, IEventCardOptions } from "@/types/event.model";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import { Actor, Person } from "@/types/actor";
 import { EventStatus, ParticipantRole } from "@/types/enums";
 import RouteName from "../../router/name";
@@ -110,6 +111,7 @@ import RouteName from "../../router/name";
 @Component({
   components: {
     DateCalendarIcon,
+    LazyImageWrapper,
   },
 })
 export default class EventCard extends Vue {
@@ -220,6 +222,22 @@ a.card {
   .card-content {
     padding: 0.5rem;
 
+    & > .media {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      & > .media-left {
+        margin-top: -15px;
+        height: 0;
+        display: flex;
+        align-items: flex-end;
+        align-self: flex-start;
+        margin-bottom: 15px;
+        margin-left: 0rem;
+      }
+    }
+
     .event-title {
       font-size: 1.2rem;
       line-height: 1.25rem;

js/src/components/Image/BlurhashImg.vue

@@ -0,0 +1,34 @@
+<template>
+  <canvas ref="canvas" width="32" height="32" />
+</template>
+
+<script lang="ts">
+import { decode } from "blurhash";
+import { Component, Prop, Ref, Vue } from "vue-property-decorator";
+
+@Component
+export default class extends Vue {
+  @Prop({ type: String, required: true }) hash!: string;
+  @Prop({ type: Number, default: 1 }) aspectRatio!: string;
+
+  @Ref("canvas") readonly canvas!: any;
+
+  mounted(): void {
+    const pixels = decode(this.hash, 32, 32);
+    const imageData = new ImageData(pixels, 32, 32);
+    const context = this.canvas.getContext("2d");
+    context.putImageData(imageData, 0, 0);
+  }
+}
+</script>
+<style lang="scss" scoped>
+canvas {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+</style>

js/src/components/Image/LazyImage.vue

@@ -0,0 +1,117 @@
+<template>
+  <div ref="wrapper" class="wrapper" v-bind="$attrs">
+    <div class="relative container">
+      <!-- Show the placeholder as background -->
+      <blurhash-img
+        v-if="blurhash"
+        :hash="blurhash"
+        :aspect-ratio="height / width"
+        class="top-0 left-0 transition-opacity duration-500"
+        :class="isLoaded ? 'opacity-0' : 'opacity-100'"
+      />
+
+      <!-- Show the real image on the top and fade in after loading -->
+      <img
+        ref="image"
+        :width="width"
+        :height="height"
+        class="absolute top-0 left-0 transition-opacity duration-500"
+        :class="isLoaded ? 'opacity-100' : 'opacity-0'"
+        alt=""
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Prop, Component, Vue, Ref, Watch } from "vue-property-decorator";
+import BlurhashImg from "./BlurhashImg.vue";
+
+@Component({
+  components: {
+    BlurhashImg,
+  },
+})
+export default class LazyImage extends Vue {
+  @Prop({ type: String, required: true }) src!: string;
+  @Prop({ type: String, required: false, default: null }) blurhash!: string;
+  @Prop({ type: Number, default: 1 }) width!: number;
+  @Prop({ type: Number, default: 1 }) height!: number;
+
+  inheritAttrs = false;
+  isLoaded = false;
+
+  observer!: IntersectionObserver;
+
+  @Ref("wrapper") readonly wrapper!: any;
+  @Ref("image") image!: any;
+
+  mounted(): void {
+    this.observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        this.onEnter();
+      }
+    });
+
+    this.observer.observe(this.wrapper);
+  }
+
+  unmounted(): void {
+    this.observer.disconnect();
+  }
+
+  onEnter(): void {
+    // Image is visible (means: has entered the viewport),
+    // so start loading by setting the src attribute
+    this.image.src = this.src;
+
+    this.image.onload = () => {
+      // Image is loaded, so start fading in
+      this.isLoaded = true;
+    };
+  }
+
+  @Watch("src")
+  updateImageWithSrcChange(): void {
+    this.onEnter();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.top-0 {
+  top: 0;
+}
+.left-0 {
+  left: 0;
+}
+.opacity-100 {
+  opacity: 100%;
+}
+.opacity-0 {
+  opacity: 0;
+}
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.duration-500 {
+  transition-duration: 0.5s;
+}
+.wrapper,
+.container {
+  display: flex;
+  flex: 1;
+}
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 50%;
+}
+</style>

js/src/components/Image/LazyImageWrapper.vue

@@ -0,0 +1,40 @@
+<template>
+  <lazy-image
+    v-if="pictureOrDefault.url !== undefined"
+    :src="pictureOrDefault.url"
+    :width="pictureOrDefault.metadata.width"
+    :height="pictureOrDefault.metadata.height"
+    :blurhash="pictureOrDefault.metadata.blurhash"
+  />
+</template>
+<script lang="ts">
+import { IMedia } from "@/types/media.model";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import LazyImage from "../Image/LazyImage.vue";
+
+@Component({
+  components: {
+    LazyImage,
+  },
+})
+export default class LazyImageWrapper extends Vue {
+  @Prop({ required: true, default: null })
+  picture!: IMedia | null;
+
+  get pictureOrDefault(): Partial<IMedia> {
+    return {
+      url:
+        this?.picture?.url === null
+          ? "/img/mobilizon_default_card.png"
+          : this?.picture?.url,
+      metadata: {
+        width: this?.picture?.metadata?.width || 630,
+        height: this?.picture?.metadata?.height || 350,
+        blurhash:
+          this?.picture?.metadata?.blurhash ||
+          "MCHKI4El-P-U}+={R-WWoes,Iu-P=?R,xD",
+      },
+    };
+  }
+}
+</script>

js/src/types/media.model.ts

@@ -3,6 +3,7 @@ export interface IMedia {
   url: string;
   name: string;
   alt: string;
+  metadata: IMediaMetadata;
 }
 
 export interface IMediaUpload {
@@ -10,3 +11,9 @@ export interface IMediaUpload {
   name: string;
   alt: string | null;
 }
+
+export interface IMediaMetadata {
+  width?: number;
+  height?: number;
+  blurhash?: string;
+}

js/yarn.lock

@@ -3416,6 +3416,11 @@ bluebird@^3.1.1, bluebird@^3.7.2:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
+blurhash@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-1.1.3.tgz#dc325af7da836d07a0861d830bdd63694382483e"
+  integrity sha512-yUhPJvXexbqbyijCIE/T2NCXcj9iNPhWmOKbPTuR/cm7Q5snXYIfnVnz6m7MWOXxODMz/Cr3UcVkRdHiuDVRDw==
+
 body-parser@1.19.0:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"