Add Blurhash to front-end

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

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
-        class="image is-16by9"
-        :style="`background-image: url('${
-          event.picture ? event.picture.url : '/img/mobilizon_default_card.png'
-        }')`"
-      >
+      <figure class="image is-16by9">
+        <lazy-image-wrapper
+          :picture="event.picture"
+          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;