feat: navigation + keyboard, gamepad, camera tests

.gitignore

@@ -1,6 +1,3 @@
-assets/generated/*
-!assets/generated/.gitkeep
-
 .DS_Store
 node_modules
 /build

Earthfile

@@ -1,30 +1,6 @@
 VERSION 0.7
 FROM node:lts
 
-site:
-    RUN npm install -g pnpm
-    COPY package.json pnpm-lock.yaml /site
-    WORKDIR /site
-    CACHE --id=pnpm $HOME/.local/share/pnpm
-    RUN pnpm install --frozen-lockfile --prod
-    COPY . /site
-    COPY +assets-generated/* /site/assets/generated
-    RUN pnpm build
-    SAVE ARTIFACT build AS LOCAL build
-
-deploy:
-    FROM alpine
-    RUN apk add openssh-client rsync
-    RUN --secret SSH_CONFIG --secret SSH_UPLOAD_KEY --secret SSH_KNOWN_HOSTS \
-        mkdir -p $HOME/.ssh && \
-        echo "$SSH_CONFIG" > $HOME/.ssh/config && \
-        echo "$SSH_UPLOAD_KEY" > $HOME/.ssh/id_rsa && \
-        echo "$SSH_KNOWN_HOSTS" > $HOME/.ssh/known_hosts && \
-        chmod 600 $HOME/.ssh/*
-    COPY +site/build /build
-    RUN --secret SSH_TARGET --push rsync -cvrz --delete /build/ $SSH_TARGET
-
-
 avsync-video-components:
     # https://pptr.dev/troubleshooting
     RUN apt-get update && apt-get -y install libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 && rm -rf /var/lib/apt/lists/*
@@ -35,22 +11,18 @@ avsync-video-components:
     WORKDIR /site
     CACHE --id=pnpm /home/pptruser/.local/share/pnpm
     RUN pnpm install --frozen-lockfile
-    COPY av-sync av-sync
+    COPY . /site
     ARG FPS=60
     ARG CYCLES=16
     ARG SIZE=1200
     RUN pnpm av:render:video --fps $FPS --cycles 1 --size $SIZE --output /var/tmp/frames
-    SAVE ARTIFACT /var/tmp/frames
     RUN pnpm av:render:audio -i beep.wav -o /var/tmp/track.wav --repeats $CYCLES
+    SAVE ARTIFACT /var/tmp/frames
     SAVE ARTIFACT /var/tmp/track.wav
 
-aux-media:
-    FROM debian:bookworm
-    RUN apt-get update && apt-get install -y ffmpeg sox && rm -rf /var/lib/apt/lists/*
-
 avsync-video:
-    FROM +aux-media
+    FROM debian:bookworm
-    RUN apt-get update && apt-get install -y ffmpeg sox && rm -rf /var/lib/apt/lists/*
+    RUN apt-get update && apt-get install -y ffmpeg && rm -rf /var/lib/apt/lists/*
     COPY +avsync-video-components/track.wav /track.wav
     COPY +avsync-video-components/frames /frames
     RUN find frames -type f | sort | xargs -I {} sh -c 'echo "file {}" >> /frames.txt'
@@ -61,12 +33,11 @@ avsync-video:
     SAVE ARTIFACT avsync.webm
 
 audio-channel-tracks:
-    FROM +aux-media
+    FROM debian:bookworm
-    RUN mkdir -p /input /output
+    RUN apt-get update && apt-get install -y ffmpeg && rm -rf /var/lib/apt/lists/*
-    COPY assets/audio/channels /raw
+    RUN mkdir -p /output
-    WORKDIR /raw
+    COPY assets/audio/channels /channels
-    RUN for file in *.wav; do sox $file /input/$file silence 1 0.1 0.1% reverse silence 1 0.1 0.1% reverse; done
+    WORKDIR /channels
-    WORKDIR /input
     RUN mkdir -p /output/wav/stereo /output/wav/5.1 /output/wav/7.1
     RUN ffmpeg -i Left.wav -af "pan=stereo|FL=c0" /output/wav/stereo/Left.wav -hide_banner -loglevel error && \
         ffmpeg -i Right.wav -af "pan=stereo|FR=c0" /output/wav/stereo/Right.wav -hide_banner -loglevel error && \
@@ -87,25 +58,37 @@ audio-channel-tracks:
         ffmpeg -i Side_Right.wav -af "pan=7.1|SR=c0" /output/wav/7.1/Side_Right.wav -hide_banner -loglevel error && \
         ffmpeg -i Rear_Left.wav -af "pan=7.1|BL=c0" /output/wav/7.1/Rear_Left.wav -hide_banner -loglevel error && \
         ffmpeg -i Rear_Right.wav -af "pan=7.1|BR=c0" /output/wav/7.1/Rear_Right.wav -hide_banner -loglevel error
-    SAVE ARTIFACT /output/wav/
+    SAVE ARTIFACT /output/wav
-
-audio-channel-tracks-ogg:
-    FROM +audio-channel-tracks
     RUN mkdir -p /output/ogg/stereo /output/ogg/5.1 /output/ogg/7.1
     RUN for file in /output/wav/stereo/*.wav; do ffmpeg -i $file -c:a libvorbis /output/ogg/stereo/$(basename $file .wav).ogg -hide_banner -loglevel error; done && \
         for file in /output/wav/5.1/*.wav; do ffmpeg -i $file -c:a libvorbis /output/ogg/5.1/$(basename $file .wav).ogg -hide_banner -loglevel error; done && \
         for file in /output/wav/7.1/*.wav; do ffmpeg -i $file -c:a libvorbis /output/ogg/7.1/$(basename $file .wav).ogg -hide_banner -loglevel error; done
     SAVE ARTIFACT /output/ogg
-
-audio-channel-tracks-mp3:
-    FROM +audio-channel-tracks
     RUN mkdir -p /output/mp3/stereo /output/mp3/5.1 /output/mp3/7.1
     RUN for file in /output/wav/stereo/*.wav; do ffmpeg -i $file -c:a libmp3lame /output/mp3/stereo/$(basename $file .wav).mp3 -hide_banner -loglevel error; done && \
         for file in /output/wav/5.1/*.wav; do ffmpeg -i $file -c:a libmp3lame /output/mp3/5.1/$(basename $file .wav).mp3 -hide_banner -loglevel error; done && \
         for file in /output/wav/7.1/*.wav; do ffmpeg -i $file -c:a libmp3lame /output/mp3/7.1/$(basename $file .wav).mp3 -hide_banner -loglevel error; done
     SAVE ARTIFACT /output/mp3
 
-assets-generated:
+site:
-    COPY +avsync-video/avsync.webm /assets/avsync.webm
+    RUN npm install -g pnpm
-    COPY +audio-channel-tracks-mp3/mp3 /assets/audio/
+    COPY package.json pnpm-lock.yaml /site
-    SAVE ARTIFACT /assets/* AS LOCAL assets/generated/
+    WORKDIR /site
+    CACHE --id=pnpm $HOME/.local/share/pnpm
+    RUN pnpm install --frozen-lockfile --prod
+    COPY . /site
+    RUN pnpm build
+    SAVE ARTIFACT build AS LOCAL build
+
+deploy:
+    FROM alpine
+    RUN apk add openssh-client rsync
+    RUN --secret SSH_CONFIG --secret SSH_UPLOAD_KEY --secret SSH_KNOWN_HOSTS \
+        mkdir -p $HOME/.ssh && \
+        echo "$SSH_CONFIG" > $HOME/.ssh/config && \
+        echo "$SSH_UPLOAD_KEY" > $HOME/.ssh/id_rsa && \
+        echo "$SSH_KNOWN_HOSTS" > $HOME/.ssh/known_hosts && \
+        chmod 600 $HOME/.ssh/*
+    COPY +site/build /build
+    RUN --secret SSH_TARGET --push rsync -cvrz --delete /build/ $SSH_TARGET
+

package.json

@@ -10,7 +10,6 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
-		"generate-assets": "earthly +assets-generated",
 		"av:dev": "cd av-sync && vite",
 		"av:render:video": "cd av-sync && concurrently -P -k -s command-1 \"vite --port 8626\" \"wait-on http://localhost:8626 && node render-video.js --url http://localhost:8626 {@}\" --",
 		"av:render:audio": "cd av-sync && node render-audio.js"

src/routes/+layout.svelte

@@ -25,7 +25,7 @@
 
 <TestCard full={onlyCard} on:focus={() => goto('/card')} />
 <main class:content={!onlyCard} class:sub={$page.url.pathname !== '/' && !onlyCard}>
-	<a href=".." class="button button-back"><i class="ti ti-arrow-back" />Back</a>
+	<a href="/" class="button button-back"><i class="ti ti-arrow-back" />Back</a>
 	<slot />
 </main>
 

src/routes/+page.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { version } from '../../package.json';
 </script>
 
 <nav>
@@ -10,14 +9,10 @@
 			<i class="ti ti-device-desktop"></i>
 			Screen
 		</a>
-		<a href="audio">
+		<a href="audio" class="disabled">
 			<i class="ti ti-volume"></i>
 			Audio
 		</a>
-		<a href="av-sync" class="disabled">
-			<i class="ti ti-time-duration-off"></i>
-			AV&nbsp;Sync
-		</a>
 		<a href="keyboard">
 			<i class="ti ti-keyboard"></i>
 			Keyboard
@@ -44,7 +39,6 @@
 		</a>
 	</div>
 </nav>
-<footer><a href="https://git.thm.place/thm/test-card">testcard v{version}</a></footer>
 
 <style>
 	h1 {
@@ -75,13 +69,4 @@
 			font-size: 3rem;
 		}
 	}
-
-	footer {
-		text-align: center;
-		opacity: 0.6;
-		margin-top: 1rem;
-		& a {
-			text-decoration: none;
-		}
-	}
 </style>

src/routes/audio/+layout.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-</script>
-
-<h2><i class="ti ti-volume"></i> Audio test</h2>
-<slot />

src/routes/audio/+layout.ts

@@ -1 +0,0 @@
-export const trailingSlash = 'always';

src/routes/audio/+page.svelte

@@ -1,20 +0,0 @@
-<h3>Channel tests</h3>
-<ul>
-	<li><a href="channels/stereo">Stereo</a></li>
-	<li><a href="channels/5.1">5.1 Surround</a></li>
-	<li><a href="channels/7.1">7.1 Surround</a></li>
-</ul>
-
-<style>
-	ul {
-		list-style-type: none;
-		padding: 0;
-		margin: 0;
-
-		display: flex;
-		gap: 1rem;
-	}
-	li {
-		margin-bottom: 10px;
-	}
-</style>

src/routes/audio/channels/+layout.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">
-	import { onDestroy } from 'svelte';
-
-	let channelsEl: HTMLDivElement;
-
-	let cycling = false;
-	async function cycleChannels() {
-		cycling = true;
-		const buttons = channelsEl.querySelectorAll('button');
-		buttons.forEach((button) => (button.disabled = true));
-		const channels = channelsEl.querySelectorAll('audio');
-		while (cycling) {
-			for (const channel of channels) {
-				await channel.play();
-				await new Promise((resolve) => {
-					channel.onended = resolve;
-				});
-				if (!cycling) {
-					break;
-				}
-			}
-		}
-		buttons.forEach((button) => (button.disabled = false));
-	}
-
-	function startCycle() {
-		cycling = !cycling;
-		if (cycling) {
-			cycleChannels();
-		}
-	}
-
-	onDestroy(() => {
-		cycling = false;
-	});
-</script>
-
-<div class="channels" bind:this={channelsEl}>
-	<slot />
-</div>
-<div class="controls">
-	<button on:click={startCycle}>Cycle all</button>
-</div>
-
-<style>
-	.channels {
-		display: flex;
-		flex-direction: column;
-		justify-content: space-evenly;
-		font-size: 2rem;
-		flex-grow: 1;
-
-		position: relative;
-	}
-
-	:global(.channels .row) {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.controls {
-		text-align: center;
-		margin: 2rem 0;
-		font-size: 1.5rem;
-	}
-
-	:global(.channels .center) {
-		font-size: 0.9em;
-	}
-
-	:global(.channels .label) {
-		opacity: 0.33;
-		font-size: 6rem;
-
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-
-		pointer-events: none;
-	}
-</style>

src/routes/audio/channels/+page.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { goto } from '$app/navigation';
-
-	onMount(() => {
-		goto('..');
-	});
-</script>

src/routes/audio/channels/5.1/+page.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import Speaker from '../speaker.svelte';
-	import frontLeftUrl from '@assets/audio/5.1/Front_Left.mp3';
-	import frontCenterUrl from '@assets/audio/5.1/Front_Center.mp3';
-	import frontRightUrl from '@assets/audio/5.1/Front_Right.mp3';
-	import rearLeftUrl from '@assets/audio/5.1/Rear_Left.mp3';
-	import rearRightUrl from '@assets/audio/5.1/Rear_Right.mp3';
-	import LfeUrl from '@assets/audio/5.1/LFE_Noise.mp3';
-</script>
-
-<div class="row">
-	<Speaker src={frontLeftUrl} left>Front Left</Speaker>
-	<div class="center">
-		<Speaker src={frontCenterUrl} center>Front Center</Speaker>
-	</div>
-	<Speaker src={frontRightUrl} right>Front Right</Speaker>
-</div>
-<div class="row">
-	<Speaker src={rearLeftUrl} left>Rear Left</Speaker>
-	<Speaker src={rearRightUrl} right>Rear Right</Speaker>
-</div>
-<Speaker src={LfeUrl} lfe>LFE</Speaker>
-
-<div class="label">5.1</div>

src/routes/audio/channels/7.1/+page.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	import Speaker from '../speaker.svelte';
-	import frontLeftUrl from '@assets/audio/7.1/Front_Left.mp3';
-	import frontCenterUrl from '@assets/audio/7.1/Front_Center.mp3';
-	import frontRightUrl from '@assets/audio/7.1/Front_Right.mp3';
-	import sideLeftUrl from '@assets/audio/7.1/Side_Left.mp3';
-	import sideRightUrl from '@assets/audio/7.1/Side_Right.mp3';
-	import rearLeftUrl from '@assets/audio/7.1/Rear_Left.mp3';
-	import rearRightUrl from '@assets/audio/7.1/Rear_Right.mp3';
-	import LfeUrl from '@assets/audio/7.1/LFE_Noise.mp3';
-</script>
-
-<div class="row">
-	<Speaker src={frontLeftUrl} left>Front Left</Speaker>
-	<div class="center">
-		<Speaker src={frontCenterUrl} center>Front Center</Speaker>
-	</div>
-	<Speaker src={frontRightUrl} right>Front Right</Speaker>
-</div>
-<div class="row">
-	<Speaker src={sideLeftUrl} left>Side Left</Speaker>
-	<Speaker src={sideRightUrl} right>Side Right</Speaker>
-</div>
-
-<div class="row">
-	<Speaker src={rearLeftUrl} left>Rear Left</Speaker>
-	<Speaker src={rearRightUrl} right>Rear Right</Speaker>
-</div>
-<Speaker src={LfeUrl} lfe>LFE</Speaker>
-
-<div class="label">7.1</div>

src/routes/audio/channels/speaker.svelte

@@ -1,68 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
-	const dispatch = createEventDispatcher<{ end: void }>();
-
-	export let src: string;
-	export let left = false;
-	export let center = false;
-	export let right = false;
-	export let lfe = false;
-
-	let currentTime = 0;
-	let paused = true;
-	function play() {
-		currentTime = 0;
-		paused = false;
-	}
-</script>
-
-<button
-	class="speaker"
-	class:left
-	class:right
-	class:center
-	class:lfe
-	class:playing={!paused}
-	on:click={play}
->
-	{#if !lfe}
-		<i class="ti ti-volume"></i>
-	{:else}
-		<i class="ti ti-wave-sine"></i>
-	{/if}
-	<label><slot /></label>
-	<audio bind:currentTime bind:paused {src}></audio>
-</button>
-
-<style>
-	.speaker {
-		border: none;
-		background: transparent;
-
-		display: inline-flex;
-		flex-direction: column;
-		text-align: center;
-
-		& .ti {
-			font-size: 3em;
-		}
-
-		&.right .ti {
-			display: block;
-			transform: rotate(180deg);
-		}
-
-		&.center .ti {
-			display: block;
-			transform: rotate(90deg);
-		}
-
-		&:disabled {
-			opacity: 0.33;
-		}
-
-		&.playing {
-			opacity: 0.66;
-		}
-	}
-</style>

src/routes/audio/channels/stereo/+page.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-	import Speaker from '../speaker.svelte';
-	import leftUrl from '@assets/audio/stereo/Left.mp3';
-	import centerUrl from '@assets/audio/stereo/Center.mp3';
-	import rightUrl from '@assets/audio/stereo/Right.mp3';
-</script>
-
-<div class="row">
-	<Speaker src={leftUrl} left>Left</Speaker>
-	<div class="center">
-		<Speaker src={centerUrl} center>Center</Speaker>
-	</div>
-	<Speaker src={rightUrl} right>Right</Speaker>
-</div>

src/routes/av-sync/+page.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-	import videoUrl from '@assets/avsync.webm';
-	let paused = true;
-</script>
-
-<h2><i class="ti ti-time-duration-off"></i> Audio/Video Synchronization</h2>
-<!-- svelte-ignore a11y-media-has-caption -->
-<video
-	class:playing={!paused}
-	autoplay
-	loop
-	bind:paused
-	src={videoUrl}
-	on:click={() => (paused = false)}
-></video>
-
-<style>
-	video {
-		flex-grow: 1;
-
-		&:not(.playing) {
-			opacity: 0.5;
-			filter: grayscale(0.8);
-		}
-
-		transition:
-			opacity 0.3s,
-			filter 0.3s;
-	}
-</style>

vite.config.ts

@@ -1,17 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
-import * as path from 'path';
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [sveltekit()]
-	resolve: {
-		alias: {
-			'@assets': path.join(__dirname, 'assets/generated')
-		}
-	},
-	server: {
-		fs: {
-			allow: [path.join(__dirname, 'assets/generated'), path.join(__dirname, 'package.json')]
-		}
-	}
 });