feat(ui): Scroll notes into view on first time

source/ui/src/lib/Notes.svelte

@@ -4,6 +4,8 @@ import { fade } from 'svelte/transition';
 import { audioBlob, notesImage, style } from './stores';
 import { styles } from './config.json';
 
+let section: HTMLElement;
+
 let currentTime: number;
 let duration: number;
 let paused = true;
@@ -29,6 +31,8 @@ onMount(() => {
  currentTime = 0;
  });
  }
+
+ section.scrollIntoView({ behavior: 'smooth', block: 'start' });
 });
 
 afterUpdate((): void => {
@@ -57,46 +61,44 @@ const touchMove = (event: TouchEvent): void => {
  currentTime = (duration * (event.touches[0].clientX - left)) / (right - left);
 };
 
-const keyDown = (e: KeyboardEvent): void => {
- e.preventDefault();
+const keyDown = (event: KeyboardEvent): void => {
+ event.preventDefault();
 
- if (e.code === 'Space') {
+ if (event.code === 'Space') {
  paused = !paused;
  }
- if (e.code === 'ArrowLeft') {
+ if (event.code === 'ArrowLeft') {
  currentTime = currentTime >= 1 ? currentTime - 1 : 0;
  }
- if (e.code === 'ArrowRight') {
+ if (event.code === 'ArrowRight') {
  currentTime = currentTime <= duration - 1 ? currentTime + 1 : duration;
  }
 };
 </script>
 
-{#if $audioBlob}
- <section transition:fade>
- <img class="notes" src={$notesImage} alt="" bind:this={visualisation} />
- <div
- bind:this={player}
- class="player"
- style:width={imageWidth + 'px'}
- style:height={imageHeight + 'px'}
- on:mousemove={mouseMove}
- on:touchmove|preventDefault={touchMove}
- on:keydown={keyDown}
- on:click={() => (paused = !paused)}
- tabindex="0"
- >
- <audio bind:currentTime bind:duration bind:paused src={$audioBlob} />
- <div class="handle" style:transform="translate({imageWidth * (currentTime / duration)}px, -2%)" />
- {#if paused}
- <img class="play-button" src="static/play.svg" alt="Play button" draggable="false" transition:fade />
- {/if}
- </div>
- <a href={$audioBlob} download={`${styles[$style]} Composition - AI Guru ft. Hugging Face.wav`} class="download"
- >Download</a
- >
- </section>
-{/if}
+<section bind:this={section} transition:fade>
+ <img class="notes" src={$notesImage} alt="" bind:this={visualisation} />
+ <div
+ bind:this={player}
+ class="player"
+ style:width={imageWidth + 'px'}
+ style:height={imageHeight + 'px'}
+ on:mousemove={mouseMove}
+ on:touchmove|preventDefault={touchMove}
+ on:keydown={keyDown}
+ on:click={() => (paused = !paused)}
+ tabindex="0"
+ >
+ <audio bind:currentTime bind:duration bind:paused src={$audioBlob} />
+ <div class="handle" style:transform="translate({imageWidth * (currentTime / duration)}px, -2%)" />
+ {#if paused}
+ <img class="play-button" src="static/play.svg" alt="Play button" draggable="false" transition:fade />
+ {/if}
+ </div>
+ <a href={$audioBlob} download={`${styles[$style]} Composition - AI Guru ft. Hugging Face.wav`} class="download"
+ >Download</a
+ >
+</section>
 
 <style>
 section {

source/ui/src/routes/index.svelte

@@ -5,6 +5,7 @@ import TemperatureOptions from '$lib/TemperatureOptions.svelte';
 import ComposeButton from '$lib/ComposeButton.svelte';
 import Notes from '$lib/Notes.svelte';
 import Tokens from '$lib/Tokens.svelte';
+import { audioBlob } from '$lib/stores';
 </script>
 
 <main>
@@ -25,8 +26,10 @@ import Tokens from '$lib/Tokens.svelte';
  <TemperatureOptions />
  </section>
  <ComposeButton />
- <Notes />
- <Tokens />
+ {#if $audioBlob}
+ <Notes />
+ <Tokens />
+ {/if}
 </main>
 
 <style>