Merge pull request #12 from SlovakNationalGallery/NSNG-638-idle-screens

Nsng 638 idle screens

app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

assets/css/main.css

@@ -4,3 +4,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+    body {
+      touch-action: pan-x pan-y;
+    }
+}

components/Annotation.vue

@@ -1,17 +1,19 @@
 <template>
-  <div class="pointer-events-none flex p-16">
-    <div class="max-w-lg rounded-xl border-2 border-black bg-white p-6">
+  <div class="pointer-events-none flex">
+    <div
+      class="z-10 w-[315px] rounded-xl border-2 border-white bg-black/70 fill-white text-white"
+    >
       <div
-        class="pointer-events-auto flex items-center justify-between gap-4 pb-5 pt-2"
+        class="pointer-events-auto flex items-center justify-between gap-4 border-b-2 px-4 pb-3 pt-4"
       >
         <button @click="$emit('onPrevClick')">
-          <ArrowLeft />
+          <ArrowLeft class="h-12 w-12 p-1" />
         </button>
-        <h3 class="font-display text-2xl font-bold">
+        <h3 class="font-display font-bold text-center text-lg">
           <slot name="header"></slot>
         </h3>
         <button @click="$emit('onNextClick')">
-          <ArrowLeft class="rotate-180" />
+          <ArrowLeft class="h-12 w-12 rotate-180 p-1" />
         </button>
       </div>
       <slot name="body"></slot>
@@ -21,4 +23,4 @@
 
 <script setup>
 import ArrowLeft from "~/assets/img/arrow-left.svg?component";
-</script>
+</script>

components/ArtworkOverlay.vue

@@ -0,0 +1,35 @@
+<template>
+  <ClientOnly>
+    <div class="absolute z-10 top-20 bottom-0 inset-x-0 pointer-events-none bg-black/80">
+      <div
+        class="absolute bottom-4 left-4 right-[350px] top-0 z-50 mt-4 overflow-hidden rounded-xl bg-neutral-700 pointer-events-auto"
+      >
+        <ZoomViewer
+          v-if="deepZoomSrc"
+          :tile-sources="`${baseURL}${deepZoomSrc}`"
+          @close="$emit('close')"
+        />
+        <img
+          v-else
+          class="h-full w-full object-contain"
+          :src="`${baseURL}${thumbnailSrc}`"
+        />
+        <button
+          @click="$emit('close')"
+          class="absolute right-4 top-4 z-50 rounded-xl border-2 border-black bg-white p-0.5"
+        >
+          <X class="h-8 w-8" />
+        </button>
+      </div>
+    </div>
+  </ClientOnly>
+</template>
+<script setup>
+import ZoomViewer from "~/components/ZoomViewer.vue";
+import X from "~/assets/img/x-mark.svg?component";
+const config = useRuntimeConfig()
+const { baseURL } = config.app
+
+const props = defineProps(["item"]);
+const { thumbnailSrc, deepZoomSrc } = props.item;
+</script>

components/AudioDuration.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div class="h-2 w-full overflow-hidden rounded-full bg-white/20" />
+    <!-- Progress Bar Overlay -->
+    <div
+      class="pointer-events-none absolute left-0 top-0 h-2 rounded-full bg-white"
+      :style="{
+        width: `calc(${((props.currentTime - (min - 2)) / (max + 2 - min)) * 100}%)`,
+      }"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  currentTime: { type: Number, default: 0 },
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+});
+</script>

components/AudioPlayer.vue

@@ -1,35 +1,39 @@
 <template>
   <div>
-    <div class="flex gap-16 pb-6">
-      <button @click="fastBackwards(10)" class="flex items-center gap-2">
-        <span class="font-bold">10s</span><ClockCounterClockwise class="w-8" />
+    <div class="flex w-full justify-between pb-6">
+      <button
+        @click="fastBackwards(10)"
+        class="flex items-center gap-2 px-1 py-2"
+      >
+        <span class="font-bold">10s</span><ClockCounterClockwise class="w-10" />
       </button>
       <button @click="playPause">
-        <Pause class="w-8" v-if="isPlaying" />
-        <Play class="w-8" v-else />
+        <Pause class="w-12 p-2" v-if="isPlaying" />
+        <Play class="w-12 p-2" v-else />
       </button>
-      <button class="flex items-center gap-2">
-        <ClockClockwise @click="fastForwards(10)" class="w-8" /><span
+      <button class="flex items-center gap-2 px-1 py-2">
+        <ClockClockwise @click="fastForwards(10)" class="w-10" /><span
           class="font-bold"
           >10s</span
         >
       </button>
     </div>
-    <RangeSlider
+    <AudioDuration
       class="relative flex w-full flex-col items-center"
+      :currentTime="currentTime"
       :min="0"
       :max="duration"
-      :model-value="currentTime"
-      :step="1"
-      @mousedown="seekUp"
-      @mouseup="seekDown"
-      @mousemove="seekMove"
     />
     <!-- Time indicators -->
-    <div class="mt-2 flex w-full justify-between text-sm text-black">
+    <div class="mt-2 flex w-full justify-between text-sm text-white">
       <span>{{ formattedTime }}</span>
       <span>{{ formattedDuration }}</span>
     </div>
+    <Subtitles
+      :audioTime="currentTime"
+      :subtitleSrc="props.subtitleSrc"
+      class="pointer-events-none fixed inset-x-0 bottom-9 mx-auto max-w-screen-sm text-center"
+    />
   </div>
 </template>
 
@@ -39,11 +43,12 @@ import ClockClockwise from "~/assets/img/clock-clockwise.svg?component";
 import ClockCounterClockwise from "~/assets/img/clock-counter-clockwise.svg?component";
 import Play from "~/assets/img/play.svg?component";
 import Pause from "~/assets/img/pause.svg?component";
+const config = useRuntimeConfig();
+const { baseURL } = config.app;
 
-const props = defineProps(["index"]);
-
+const props = defineProps(["audioSrc", "subtitleSrc"]);
 const isPlaying = defineModel();
-const audio = ref(new Audio(`assets/audio/audio_${props.index || 1}.mp3`));
+const audio = ref(new Audio(`${baseURL}${props.audioSrc}`));
 const currentTime = ref(0);
 const duration = ref(0);
 const isSeeking = ref(false);

components/Micrio.vue

@@ -178,15 +178,15 @@ async function changeStepBy(delta: number) {
       class="w-full rounded-xl bg-blue-ribbon-600 py-3 text-lg text-white"
       @click="onStartClick()"
     >
-      Začni objavovať
+      {{ $t("Spusti prehliadku") }}
     </button>
   </Teleport>
   <Teleport to="#restart-button">
     <button
       class="w-full rounded-xl border-2 border-white py-3 text-lg text-white"
-      @click="onStartClick()"
+      @click="() => window.location.reload()"
     >
-      Začni objavovať
+      {{ $t("Začni odznova") }}
     </button>
   </Teleport>
 </template>

components/Subtitles.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <span
+      class="mx-auto bg-black/80 p-1 text-2xl"
+      v-if="renderedText[0] && renderedText[0].text"
+      >{{ renderedText[0].text }}</span
+    >
+  </div>
+</template>
+<script setup>
+import moment from "moment";
+const props = defineProps(["audioTime", "subtitleSrc"]);
+const config = useRuntimeConfig()
+const { baseURL } = config.app
+
+const { data: subtitlesData } = await useFetch(`${baseURL}${props.subtitleSrc}`);
+
+const renderedText = computed(() =>
+  subtitlesData.value.filter((subtitle) => {
+    const formattedAudioTime = moment.duration(
+      parseFloat(props.audioTime),
+      "seconds",
+    );
+    const formattedSubtitleStart = moment.duration(
+      subtitle.start.replace(",", "."),
+      "hh:mm:ss.SSS",
+    );
+    const formattedSubtitleEnd = moment.duration(
+      subtitle.end.replace(",", "."),
+      "hh:mm:ss.SSS",
+    );
+
+    if (formattedAudioTime < formattedSubtitleStart) {
+      return false;
+    }
+    if (formattedAudioTime > formattedSubtitleEnd) {
+      return false;
+    }
+    return true;
+  }),
+);
+</script>

components/ZoomViewer.vue

@@ -0,0 +1,26 @@
+<template>
+  <div id="viewer" class="h-full w-full bg-neutral-700" />
+</template>
+
+<script setup>
+import OpenSeaDragon from "openseadragon";
+import { onMounted, onBeforeUnmount, ref } from "vue";
+
+const props = defineProps(["tileSources"]);
+const viewer = ref(null);
+
+onMounted(() => {
+  viewer.value = OpenSeaDragon({
+    id: "viewer",
+    tileSources: props.tileSources,
+    showNavigationControl: false,
+    showNavigator: false,
+  });
+});
+
+onBeforeUnmount(() => {
+  if (viewer.value) {
+    viewer.value.destroy();
+  }
+});
+</script>