src/components/Event/EventBanner.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="flex justify-center max-h-80">
-    <lazy-image-wrapper :picture="picture" />
+    <blurhash-img-wrapper :picture="picture" />
   </div>
 </template>
 <script lang="ts" setup>
 import { IMedia } from "@/types/media.model";
-import LazyImageWrapper from "../Image/LazyImageWrapper.vue";
+import BlurhashImgWrapper from "../Image/BlurhashImgWrapper.vue";
 
 withDefaults(
   defineProps<{

src/components/Event/EventMetadataSidebar.vue

@@ -154,6 +154,98 @@
       >
       <span v-else>{{ extra.value }}</span>
     </event-metadata-block>
+    <div v-if="event.picture">
+      <h2>{{ $t("Headline picture") }}</h2>
+      <div style="position: relative" @click="showImage = true">
+        <img :src="event.picture.url" style="width: 100%" />
+      </div>
+    </div>
+    <b-modal v-if="event.picture" :active.sync="showImage" has-modal-card>
+      <div>
+        <header class="modal-card-head">{{ $t("Headline picture") }}</header>
+        <section
+          class="modal-card"
+          style="width: auto; -webkit-overflow-scrolling: touch; overflow: auto"
+        >
+          <img :src="event.picture.url" />
+        </section>
+        <footer class="modal-card-foot"></footer>
+      </div>
+    </b-modal>
+    <b-modal
+      class="map-modal"
+      v-if="physicalAddress && physicalAddress.geom"
+      :active.sync="showMap"
+      has-modal-card
+      full-screen
+    >
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <button type="button" class="delete" @click="showMap = false" />
+        </header>
+        <div class="modal-card-body">
+          <section class="map">
+            <map-leaflet
+              :coords="physicalAddress.geom"
+              :marker="{
+                text: physicalAddress.fullName,
+                icon: physicalAddress.poiInfos.poiIcon.icon,
+              }"
+            />
+          </section>
+          <section class="columns is-centered map-footer">
+            <div class="column is-half has-text-centered">
+              <p class="address">
+                <i class="mdi mdi-map-marker"></i>
+                {{ physicalAddress.fullName }}
+              </p>
+              <p class="getting-there">{{ $t("Getting there") }}</p>
+              <div
+                class="buttons"
+                v-if="
+                  addressLinkToRouteByCar ||
+                  addressLinkToRouteByBike ||
+                  addressLinkToRouteByFeet
+                "
+              >
+                <a
+                  class="button"
+                  target="_blank"
+                  v-if="addressLinkToRouteByFeet"
+                  :href="addressLinkToRouteByFeet"
+                >
+                  <i class="mdi mdi-walk"></i
+                ></a>
+                <a
+                  class="button"
+                  target="_blank"
+                  v-if="addressLinkToRouteByBike"
+                  :href="addressLinkToRouteByBike"
+                >
+                  <i class="mdi mdi-bike"></i
+                ></a>
+                <a
+                  class="button"
+                  target="_blank"
+                  v-if="addressLinkToRouteByTransit"
+                  :href="addressLinkToRouteByTransit"
+                >
+                  <i class="mdi mdi-bus"></i
+                ></a>
+                <a
+                  class="button"
+                  target="_blank"
+                  v-if="addressLinkToRouteByCar"
+                  :href="addressLinkToRouteByCar"
+                >
+                  <i class="mdi mdi-car"></i>
+                </a>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </b-modal>
   </div>
 </template>
 <script lang="ts" setup>

src/components/Image/BlurhashImg.vue

@@ -1,5 +1,5 @@
 <template>
-  <canvas ref="canvas" width="32" height="32" />
+  <canvas ref="canvas" width="128" height="32" />
 </template>
 
 <script lang="ts" setup>
@@ -18,17 +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, 32, 32);
-      const imageData = new ImageData(pixels, 32, 32);
-      const context = canvas.value.getContext("2d");
-      if (context) {
+    const pixels = decode(props.hash, 128, 32);
+    const imageData = new ImageData(pixels, 128, 32);
+    const context = canvasRef.value.getContext('2d');
     context.putImageData(imageData, 0, 0);
-      }
-    }
   } catch (e) {
     console.error(e);
   }
-});
+}
 </script>

src/components/Image/BlurhashImgWrapper.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="wrapper" v-bind="$attrs">
+    <div class="relative container">
+      <blurhash-img
+        v-if="pictureOrDefault.metadata.blurhash"
+        :hash="pictureOrDefault.metadata.blurhash"
+        class="top-0 left-0"
+      />
+    </div>
+  </div>
+</template>
+
+<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_WIDTH = 630;
+const DEFAULT_HEIGHT = 350;
+
+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,
+        height: DEFAULT_HEIGHT,
+        blurhash: DEFAULT_BLURHASH,
+      },
+    };
+  }
+  return {
+    url: props.picture?.url,
+    metadata: {
+      width: props.picture?.metadata?.width,
+      height: props.picture?.metadata?.height,
+      blurhash: props.picture?.metadata?.blurhash,
+    },
+  };
+});
+</script>