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>
@@ -20,13 +20,21 @@ const canvas = ref<HTMLCanvasElement | undefined>(undefined);
 onMounted(() => {
   try {
     if (canvas.value) {
-      const pixels = decode(props.hash, 32, 32);
+      const pixels = decode(props.hash, 128, 32);
-      const imageData = new ImageData(pixels, 32, 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");
+        context.putImageData(imageData, 0, 0);
   } catch (e) {
     console.error(e);
   }

src/components/Image/BlurhashImgWrapper.vue

@@ -0,0 +1,80 @@
+<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 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";
+
+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 = {
+  url: DEFAULT_CARD_URL,
+  metadata: {
+    width: DEFAULT_WIDTH,
+    height: DEFAULT_HEIGHT,
+    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,
+      metadata: {
+        width: this?.picture?.metadata?.width,
+        height: this?.picture?.metadata?.height,
+        blurhash: this?.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>