143 lines
4.6 KiB
Vue
143 lines
4.6 KiB
Vue
<script setup lang="ts">
|
|
import type { InternalApi } from "nitropack/types";
|
|
|
|
const props = defineProps<{
|
|
images: InternalApi["/api/gallery"]["get"][number][];
|
|
initialIndex: number;
|
|
}>();
|
|
|
|
const emit = defineEmits<{ close: [number] }>();
|
|
|
|
const currentIndex = ref(props.initialIndex);
|
|
|
|
const shouldLoad = (index: number) => {
|
|
return Math.abs(index - currentIndex.value) <= 2;
|
|
};
|
|
|
|
const getPlaceholder = (image: InternalApi["/api/gallery"]["get"][number]) => {
|
|
const aspectRatio = image.height / image.width;
|
|
const placeholderWidth = 600;
|
|
const placeholderHeight = Math.round(aspectRatio * placeholderWidth);
|
|
return [placeholderWidth, placeholderHeight, 70, 3] as [
|
|
width: number,
|
|
height: number,
|
|
quality: number,
|
|
blur: number,
|
|
];
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<UModal
|
|
fullscreen
|
|
:dismissible="false"
|
|
:ui="{ body: 'bg-black p-0!', header: 'hidden' }"
|
|
title="Gallery carousel"
|
|
description="View all the images in a carousel"
|
|
@close:prevent="emit('close', currentIndex)"
|
|
>
|
|
<template #body>
|
|
<div class="relative flex flex-col items-center justify-center">
|
|
<UCarousel
|
|
ref="carousel"
|
|
v-slot="{ item, index }"
|
|
:start-index="props.initialIndex"
|
|
:items="images"
|
|
:ui="{
|
|
item: 'relative flex-shrink-0 h-screen flex flex-col items-center justify-center select-none',
|
|
}"
|
|
arrows
|
|
:prev="{
|
|
variant: 'link',
|
|
icon: 'i-lucide-chevron-left',
|
|
class: 'left-4!',
|
|
ui: { leadingIcon: 'size-8' },
|
|
}"
|
|
:next="{
|
|
variant: 'link',
|
|
icon: 'i-lucide-chevron-right',
|
|
class: 'right-4!',
|
|
ui: { leadingIcon: 'size-8' },
|
|
}"
|
|
:duration="15"
|
|
class="w-screen h-screen"
|
|
@select="(index) => (currentIndex = index)"
|
|
>
|
|
<NuxtImg
|
|
v-if="shouldLoad(index)"
|
|
:src="item.url"
|
|
:width="1920"
|
|
:placeholder="getPlaceholder(item)"
|
|
class="xs:max-w-[95vw] sm:max-w-[90vw] md:h-[80vh] object-contain rounded-sm"
|
|
/>
|
|
|
|
<!-- metadata -->
|
|
<p
|
|
class="font-[JetBrains_Mono] text-xs lg:text-sm bottom-13 absolute invisible md:visible"
|
|
>
|
|
<span>{{ new Date(item.exif.date).toLocaleDateString() }}</span>
|
|
<span class="text-white/50"> | </span>
|
|
<span>{{ item.exif.camera }}</span>
|
|
<span class="text-white/50"> | </span>
|
|
<span>{{ item.exif.lens }}</span>
|
|
<span class="text-white/50"> | </span>
|
|
<span
|
|
>{{ item.exif.settings.aperture }}
|
|
{{ item.exif.settings.shutter }} ISO {{ item.exif.settings.iso }}
|
|
{{ item.exif.settings.focalLength }}</span
|
|
>
|
|
</p>
|
|
|
|
<p
|
|
class="font-[JetBrains_Mono] text-xs bottom-16 absolute sm:invisible text-center"
|
|
>
|
|
<span>- {{ new Date(item.exif.date).toLocaleDateString() }} -</span>
|
|
<br />
|
|
<span>{{ item.exif.camera }}</span>
|
|
<br />
|
|
<span>{{ item.exif.lens }}</span>
|
|
<br />
|
|
<span
|
|
>{{ item.exif.settings.aperture }}
|
|
{{ item.exif.settings.shutter }} ISO {{ item.exif.settings.iso }}
|
|
{{ item.exif.settings.focalLength }}</span
|
|
>
|
|
</p>
|
|
|
|
<p
|
|
class="font-[JetBrains_Mono] text-xs bottom-13 absolute invisible sm:visible md:invisible text-center"
|
|
>
|
|
<span>{{ new Date(item.exif.date).toLocaleDateString() }}</span>
|
|
<span class="text-white/50"> | </span>
|
|
<span>{{ item.exif.camera }}</span>
|
|
<span class="text-white/50"> | </span>
|
|
<span>{{ item.exif.lens }}</span>
|
|
<br />
|
|
<span
|
|
>{{ item.exif.settings.aperture }}
|
|
{{ item.exif.settings.shutter }} ISO {{ item.exif.settings.iso }}
|
|
{{ item.exif.settings.focalLength }}</span
|
|
>
|
|
</p>
|
|
</UCarousel>
|
|
|
|
<UButton
|
|
icon="i-lucide-x"
|
|
color="neutral"
|
|
variant="link"
|
|
size="xl"
|
|
class="absolute top-2 right-2 lg:top-4 lg:right-4 xl:top-6 xl:rizght-6"
|
|
aria-label="Close modal"
|
|
@click="emit('close', currentIndex)"
|
|
/>
|
|
|
|
<p
|
|
class="text-white/70 text-sm absolute bottom-6 left-1/2 -translate-x-1/2"
|
|
>
|
|
{{ currentIndex + 1 }} / {{ images.length }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</UModal>
|
|
</template>
|