Temporary browsable Carousel on photo page

Stuff to be fixed/work on:
- Why is currentPhoto only triggered at the second photo and not the first?
- popState events (prev/next on browser) not working - detect URL changes and change the currentIndex

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

@@ -9,13 +9,14 @@
 
     // Define either to preload data or use the store
     let preloaded
-    currentLocation.subscribe(store => preloaded = store ? store : undefined)
+    currentPhotos.subscribe(store => preloaded = store ? store : undefined)
+
 
     // Preload data
     export async function preload (page, session) {
         // Load the photos if not loaded
         if (!preloaded) {
-            const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,image.*,image.data,location.*,location.country.*,created_on&filter[location.slug][rlike]=%${page.params.location}%`)
+            const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%`)
             const photos = await req.json()
             return {
                 photos: photos.data
@@ -23,14 +24,17 @@
         }
         // Use the store otherwise
         else return {
-            photos: preloaded.photos
+            photos: preloaded
         }
     }
 </script>
 
 <script>
-    import { onMount } from 'svelte'
+    import { onMount, createEventDispatcher } from 'svelte'
+    import { goto } from '@sapper/app'
     import * as fn from '../../../../functions'
+    const { page } = stores()
+    const dispatch = createEventDispatcher()
 
     // Dependencies
     import dayjs from 'dayjs'
@@ -41,38 +45,80 @@
     import IconGlobe from '../../../../atoms/IconGlobe'
     import IconCross from '../../../../atoms/IconCross'
     import Carousel from '../../../../organisms/Carousel'
+    import SocialMetas from '../../../../utils/SocialMetas'
 
-    // Props and variables
-    const { page } = stores()
+    // Props
     export let photos
-    let currentIndex
-    let indexFormated
-    let viewerPhotos
+
+    // Variables
     let windowWidth
-    let changeWindowWidth
+    let currentPhoto
 
     // Define current location
     const location = (!$currentLocation) ? $locations.find(loc => loc.slug === $page.params.location) : $currentLocation
-    const locationFull = `${location.name}, ${location.country.name}`
 
     // Update store current location informations
     if (!$currentLocation) currentLocation.set(location)
     if (!$currentPhotos) currentPhotos.set(photos)
 
-    // Define path
-    const path = `/viewer/${location.country.slug}/${location.slug}/`
+    // The photo has changed from the carousel
+    const photoChanged = event => {
+        currentPhoto = event.detail.currentPhoto
+        console.log('photoChanged [photo] event: ', currentPhoto.slug)
+
+        // Change the URL to the current photo
+        if (!event.detail.init) {
+            const windowPathname = window.location.pathname
+            const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + currentPhoto.slug
+            history.pushState('', document.title, newUrl)
+        }
+    }
+
+    // Access a direct photo or navigate in history
+    const photoSlug = $page.params.photo
+    // On init, send an event to the Carousel component with the photoSlug to set currentIndex and then change the photo
+
+    // Pop event from browser (prev/next)
+    // const changedUrl = event => {
+    //     dispatch('changedUrl', {
+    //         location: event.target.location
+    //     })
+    // }
+
+
+    /*
+    !!! TODO:
+        - URL navigation on photo change (from Carousel)
+        - If coming to direct URL, show the proper photo (i.e currentIndex from photo.slug in URL)
+        - Get currentPhoto from Carousel to update title and metas
+    */
 
 
     /*
     ** Run code on browser only
     */
     onMount(() => {
+        /*
+        !!! TODO:
+            - Change the title with the current photo name and update Metas (with window location url)
+        */
+        // console.log(currentPhoto)
 
+        dispatch('changeUrl', {
+            page: $page
+        })
     })
 </script>
 
 <svelte:head>
-    <title>Houses Of - photoName photoCountryName</title>
+    <title>Houses Of – Photos of {location.name}, {location.country.name}</title>
+    <meta name="description" content={location.description}>
+    <SocialMetas
+        title="Houses Of - Beautiful houses of {location.name}, {location.country.name}"
+        description="Houses Of {location.name} {location.description}"
+    />
+        <!-- url="//{$page.host.split(':3000')[0]}/viewer/{currentPhoto.location.country.slug}/{currentPhoto.location.slug}/{currentPhoto.slug}" -->
+        <!-- image={currentPhoto ? fn.getThumbnail(currentPhoto.image.private_hash, 1200, 630) : null} -->
 </svelte:head>
 
 <svelte:window bind:innerWidth={windowWidth} />
@@ -95,5 +141,10 @@
         </div>
     </div>
 
-    <Carousel {photos} viewer={true} />
+    <Carousel
+        {photos}
+        viewer={true}
+        init={$page}
+        on:photoChange={photoChanged}
+    />
 </section>