Keep original photos ratio if not 3/2 on Viewer

- Fix previousPage usage
- Fix entering animation timings and previous photo navigation
- Add fade transition on fullscreen viewer for mobile
- Display date only if existing

src/routes/[country]/[location]/[photo].svelte

@@ -3,7 +3,7 @@
     import { page } from '$app/stores'
     import { goto } from '$app/navigation'
     import { onMount, tick } from 'svelte'
-    import { scale } from 'svelte/transition'
+    import { fade, scale } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import { getAssetUrlKey } from '$utils/helpers'
     import { fetchAPI } from '$utils/api'
@@ -66,7 +66,7 @@
     }
 
     // Define previous URL
-    $: previousUrl = $previousPage ?? `/${location.country.slug}/${location.slug}`
+    $: previousUrl = $previousPage ? $previousPage : `/${location.country.slug}/${location.slug}`
 
 
     /**
@@ -130,7 +130,7 @@
                 await tick()
                 const picture = fullscreenEl.querySelector('picture')
                 const image = fullscreenEl.querySelector('img')
-                picture.scrollTo((image.offsetWidth - innerWidth) / 2, 0)
+                picture.scrollTo((image.offsetWidth - innerWidth / 2), 0)
             }
         }
     }
@@ -221,6 +221,7 @@
         const timeline: AnimeTimelineInstance = anime.timeline({
             duration: 1600,
             easing: 'easeOutQuart',
+            autoplay: false,
         })
 
         anime.set('.viewer__picture', {
@@ -238,14 +239,14 @@
             duration: 900,
         }, 250)
         timeline.add({
-            targets: '.viewer__picture:not(.is-0):not(.is-1)',
+            targets: '.viewer__picture:not(.is-1)',
             opacity: 1,
             translateX (element: HTMLElement, index: number) {
                 const x = getComputedStyle(element).getPropertyValue('--offset-x').trim()
                 return [`-${x}`, 0]
             },
             delay: anime.stagger(55)
-        }, 500)
+        }, 350)
 
         // Prev/Next buttons
         timeline.add({
@@ -282,7 +283,7 @@
             translateY: ['100%', 0],
             delay: anime.stagger(200),
             duration: 1000,
-        }, 700)
+        }, 1100)
 
         // Transition in
         requestAnimationFrame(timeline.play)
@@ -320,12 +321,12 @@
 
         <div class="viewer__carousel">
             <div class="viewer__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
-                {#each visiblePhotos as photo, index (photo.id)}
+                {#each visiblePhotos as { id, image, title }, index (id)}
                     <div class="viewer__picture is-{currentIndex === 0 ? index + 1 : index}">
                         <Image
-                            class="photo"
-                            id={photo.image.id}
-                            alt={photo.title}
+                            class="photo {image.width / image.height < 1.475 ? 'not-landscape' : ''}"
+                            id={image.id}
+                            alt={title}
                             sizeKey="photo-list"
                             sizes={{
                                 small: { width: 500 },
@@ -366,14 +367,20 @@
                             {/if}
                         </span>
                     </a>
-                    <span class="sep">&middot;</span> <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM YYYY')}</time>
+                    {#if currentPhoto.date_taken}
+                        <span class="sep">&middot;</span>
+                        <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM YYYY')}</time>
+                    {/if}
                 </div>
             </div>
         </div>
     </div>
 
     {#if isFullscreen}
-        <div class="viewer__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}>
+        <div class="viewer__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
+            in:fade={{ easing: quartOut, duration: 1000 }}
+            out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
+        >
             <div class="inner" transition:scale={{ easing: quartOut, start: 1.1, duration: 1000 }}>
                 <Image
                     id={currentPhoto.image.id}

src/routes/[country]/[location]/[photo].ts

@@ -53,6 +53,7 @@ export async function get({ params }: RequestEvent): Promise<RequestHandlerOutpu
                     image {
                         id
                         title
+                        width, height
                     }
                     city
                 }