Change ProcessStep access and displaying

- make if condition in page and not with visible prop in component
- don't use hash as it was bugging the step 4 for some reason and also was not scrolling to it with hash
- send event when switching a step

src/components/molecules/ProcessStep.svelte

@@ -13,19 +13,10 @@
     export let text: string
     export let image: any = undefined
     export let video: any = undefined
-    export let visible: boolean = false
-
-    let videoEl: HTMLVideoElement
 
     const imageRatio = image ? image.width / image.height : undefined
-
-    // Toggle video playback if step is visible
-    $: if (videoEl) {
-        visible ? videoEl.play() : videoEl.pause()
-    }
 </script>
 
-{#if visible}
 <div class="step grid" style:--index={index}
     in:scaleFade|local={{ scale: [1.1, 1], opacity: [0, 1], x: [20, 0], delay: 0.2 }}
     out:scaleFade|local={{ scale: [1, 0.9], opacity: [1, 0], x: [0, -20] }}
@@ -44,8 +35,8 @@
                 ratio={imageRatio}
                 alt={image.title}
             />
-        {:else if video}
-            <video muted loop playsinline autoplay allow="autoplay" bind:this={videoEl}>
+        {:else if video && video.mp4 && video.webm}
+            <video muted loop playsinline autoplay allow="autoplay">
                 <source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
                 <source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
                 <track kind="captions" />
@@ -57,5 +48,4 @@
     <div class="text text-xsmall">
         {@html text}
     </div>
-</div>
-{/if}
+</div>

src/routes/about/+page.svelte

@@ -21,18 +21,18 @@
     import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
     import ProcessStep from '$components/molecules/ProcessStep.svelte'
     import Banner from '$components/organisms/Banner.svelte'
+    import { sendEvent } from '$utils/analytics';
 
     export let data: PageData
     const { about, photos } = data
 
     let scrollY: number, innerWidth: number, innerHeight: number
     let photosGridEl: HTMLElement
-    let currentStep: number = 0
     let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
+    let currentStep: number = 0
     let emailCopied: string = null
     let emailCopiedTimeout: ReturnType<typeof setTimeout> | number
 
-    $: currentStep = $page.url.hash ? Number($page.url.hash.split('#step-')[1]) - 1 : 0
     $: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true)
     $: fadedPhotosIndexes = innerWidth > 768
         ? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34]
@@ -315,7 +315,12 @@
                     <ol>
                         {#each about.process_steps as { title }, index}
                             <li class:is-active={index === currentStep}>
-                                <a href="#step-{index + 1}" class="title-big">
+                                <a href="#step-{index + 1}" class="title-big"
+                                    on:click|preventDefault={() => {
+                                        currentStep = index
+                                        sendEvent({ action: 'aboutStepSwitch' })
+                                    }}
+                                >
                                     <span>{title}</span>
                                 </a>
                             </li>
@@ -325,15 +330,16 @@
 
                 <div class="steps">
                     {#each about.process_steps as { text, image, video_mp4, video_webm }, index}
-                        <ProcessStep
-                            {index} {text}
-                            image={image ?? undefined}
-                            video={video_mp4 && video_webm ? {
-                                mp4: video_mp4.id,
-                                webm: video_webm.id
-                            } : undefined}
-                            visible={index === currentStep}
-                        />
+                        {#if index === currentStep}
+                            <ProcessStep
+                                {index} {text}
+                                image={image ?? undefined}
+                                video={{
+                                    mp4: video_mp4?.id,
+                                    webm: video_webm?.id
+                                }}
+                            />
+                        {/if}
                     {/each}
                 </div>
             </div>