From 724d723729e19e5812bea7fc10f929b046abb8b2 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Sun, 7 Apr 2024 01:55:29 +0200
Subject: [PATCH] optimised how header images are being reacted to and
 displayed

---
 .../components/DetailsImageSlideshowModal.vue | 55 ++++++++++---------
 webclient/pages/[view]/[id].vue               | 19 ++++---
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/webclient/components/DetailsImageSlideshowModal.vue b/webclient/components/DetailsImageSlideshowModal.vue
index 5d070ac7a..081a49244 100644
--- a/webclient/components/DetailsImageSlideshowModal.vue
+++ b/webclient/components/DetailsImageSlideshowModal.vue
@@ -41,33 +41,34 @@ const subtitles = computed<SubTitle[]>(() => {
 
 <template>
   <LazyModal v-model="slideshowOpen" :title="t('header')" :classes="{ modal: '!min-w-[60vw]' }">
-    <Carousel
-      :items-to-show="1.15"
-      snap-align="center"
-      :autoplay="10_000"
-      :pause-autoplay-on-hover="true"
-      @slide-end="onSlide"
-    >
-      <Slide v-for="img in imgs" :key="img.name">
-        <div itemscope itemtype="http://schema.org/ImageObject" class="px-2">
-          <img
-            itemprop="contentUrl"
-            :alt="t('image_alt')"
-            :src="`${runtimeConfig.public.cdnURL}/cdn/lg/${img.name}`"
-            :srcset="`${runtimeConfig.public.cdnURL}/cdn/sm/${img.name} 1024w,${runtimeConfig.public.cdnURL}/cdn/md/${img.name} 1920w,${runtimeConfig.public.cdnURL}/cdn/lg/${img.name} 3860w`"
-            class="max-h-2/3 w-full rounded sm:max-h-[30rem]"
-          />
-          <span v-if="img.license.url" class="hidden" itemprop="license"> {{ img.license.url }}</span>
-          <span v-else class="hidden" itemprop="license"> img.license.text</span>
-          <span v-if="img.license.url" class="hidden" itemprop="author"> {{ img.author.url }}</span>
-          <span v-else class="hidden" itemprop="author"> img.author.text</span>
-        </div>
-      </Slide>
-      <template #addons>
-        <Navigation />
-        <Pagination />
-      </template>
-    </Carousel>
+    <div class="-mx-6 -mt-3">
+      <Carousel
+        :items-to-show="1.1"
+        snap-align="center"
+        :autoplay="10_000"
+        :pause-autoplay-on-hover="true"
+        @slide-end="onSlide"
+      >
+        <Slide v-for="img in imgs" :key="img.name">
+          <div itemscope itemtype="http://schema.org/ImageObject" class="px-2">
+            <NuxtImg
+              itemprop="contentUrl"
+              :alt="t('image_alt')"
+              :src="`${runtimeConfig.public.cdnURL}/cdn/lg/${img.name}`"
+              class="max-h-2/3 w-full rounded sm:max-h-[30rem]"
+            />
+            <span v-if="img.license.url" class="hidden" itemprop="license"> {{ img.license.url }}</span>
+            <span v-else class="hidden" itemprop="license"> img.license.text</span>
+            <span v-if="img.license.url" class="hidden" itemprop="author"> {{ img.author.url }}</span>
+            <span v-else class="hidden" itemprop="author"> img.author.text</span>
+          </div>
+        </Slide>
+        <template #addons>
+          <Navigation />
+          <Pagination />
+        </template>
+      </Carousel>
+    </div>
     <div v-if="shownImage" class="pt-5">
       <div class="grid min-h-20 auto-cols-auto grid-cols-5 gap-5 text-center">
         <div
diff --git a/webclient/pages/[view]/[id].vue b/webclient/pages/[view]/[id].vue
index 92f7800d5..1cdd2fb16 100644
--- a/webclient/pages/[view]/[id].vue
+++ b/webclient/pages/[view]/[id].vue
@@ -18,16 +18,18 @@ type ImageInfo = components["schemas"]["ImageInfo"];
 const { t, locale } = useI18n({ useScope: "local" });
 const route = useRoute();
 const router = useRouter();
-const shownImage = ref<ImageInfo | undefined>(undefined);
 
+const runtimeConfig = useRuntimeConfig();
+const url = computed(() => `${runtimeConfig.public.apiURL}/api/get/${route.params.id}?lang=${locale.value}`);
+const { data, error } = useFetch<DetailsResponse, string>(url, { key: "details" });
+
+const shownImage = ref<ImageInfo | undefined>(data.value?.imgs ? data.value.imgs[0] : undefined);
 const slideshowOpen = ref(false);
+
 const clipboardSource = computed(() => `https://nav.tum.de${route.fullPath}`);
 const { copy, copied, isSupported: clipboardIsSupported } = useClipboard({ source: clipboardSource });
 
 const selectedMap = ref<"interactive" | "roomfinder">("interactive");
-const runtimeConfig = useRuntimeConfig();
-const url = computed(() => `${runtimeConfig.public.apiURL}/api/get/${route.params.id}?lang=${locale.value}`);
-const { data, error } = useFetch<DetailsResponse, string>(url, { key: "details" });
 
 watchEffect(() => {
   if (route.params.id === "root") {
@@ -46,15 +48,14 @@ watchEffect(() => {
 watch([data, route], () => {
   if (!data.value) return;
   if (route.fullPath !== data.value.redirect_url) router.replace({ path: data.value.redirect_url });
+});
+watch([data], () => {
+  if (!data.value) return;
   // --- Additional data ---
   slideshowOpen.value = false;
   selectedMap.value = data.value.maps.default;
   // --- Images ---
-  if (data.value.imgs && data.value.imgs.length > 0) {
-    shownImage.value = data.value.imgs[0];
-  } else {
-    shownImage.value = undefined;
-  }
+  shownImage.value = data.value.imgs ? data.value.imgs[0] : undefined;
   tryToLoadMap();
 });