Feat: external adds (#90)

* feat: add external ads feature with layout and page components

* feat: enhance gallery functionality with store management and debug options

* feat: refactor external ads and gallery components for improved structure and functionality

- Added new layout and page components for external ads under (random-set) route.
- Implemented logic to handle external ads, including random selection and error handling.
- Refactored gallery components to align with new structure, including store management for current item.
- Removed deprecated components and styles related to external ads and gallery.
- Enhanced utility styles for better layout management.

* feat: consolidate store management for external ads and gallery components

* feat: update external ads and gallery components to use musical parameter in item parsing and storage functions

* feat: improve code formatting and readability in layout and store management files

* feat: update import statement for sharedStore to use namespace import

Author: mayfinn

src/_styles/util.pcss

@@ -226,3 +226,44 @@ h6,
 	hyphens: none;
 	word-break: keep-all;
 }
+
+.flow {
+	--flow-gap: 1em;
+}
+
+.flow--gap-0 {
+	--flow-gap: 0;
+}
+
+.flow--gap-xxs {
+	--flow-gap: var(--fs-xxs);
+}
+
+.flow--gap-xs {
+	--flow-gap: var(--fs-xs);
+}
+
+.flow--gap-s {
+	--flow-gap: var(--fs-s);
+}
+
+.flow--gap-m {
+	--flow-gap: var(--fs-m);
+}
+
+.flow--gap-l {
+	--flow-gap: var(--fs-l);
+}
+
+.flow--gap-xl {
+	--flow-gap: var(--fs-xl);
+}
+
+.flow > *:first-child {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+.flow > * + * {
+	margin-bottom: 0;
+	margin-top: var(--flow-gap, 1em);
+}

src/lib/ShowData.d.ts

@@ -5,10 +5,17 @@ type RolePersons = {
 };
 
 type SourceImage = {
+	type: 'image';
 	source: Array<{ srcset: string; type?: string }>;
 	img: { src: string; srcset?: string; alt?: string; focus?: string };
 };
 
+type SourceVideo = {
+	type: 'video';
+	source: Array<{ src: string; type: string }>;
+	video: { poster?: string | null };
+};
+
 type SingleShow = {
 	isPublic: boolean;
 	timestamp: string;
@@ -23,6 +30,7 @@ type SingleShow = {
 
 type ShowData = {
 	common: {
+		showId: string;
 		title: string;
 		venue: {
 			type: string;
@@ -35,19 +43,25 @@ type ShowData = {
 		orchestra: RolePersons[];
 		creativeTeam: (RolePersons & { lead: boolean })[];
 		foh: RolePersons[];
-		disclaimer: string?;
+		disclaimer?: string;
 		media: {
 			image: SourceImage?;
 			video: {
 				source: Array<{ src: string; type: string }>;
 				video: { poster: string | null };
 			} | null;
 		};
-		gallery: Array<{
+		gallery?: Array<{
+			showId: string;
 			title: string;
 			subtitle?: string;
 			year: string;
 			images: SourceImage[];
+			photographers?: string[];
+		}>;
+		externalAds?: Array<{
+			company: string;
+			media: SourceImage | SourceVideo;
 		}>;
 	};
 	shows: SingleShow[];

src/routes/+page.ts

@@ -18,7 +18,9 @@ export const load: PageLoad = async ({ fetch }) => {
 		return {
 			productionsData
 		};
-	} catch {
+	} catch (e) {
+		console.error('Error fetching data from server:', e);
+
 		error(500, 'Failed to fetch data from server');
 	}
 };

src/routes/[musical]/(heroimage)/+page.svelte

@@ -16,6 +16,7 @@
 		<li><a href="{params.musical}/crew">Crew</a></li>
 		<li><a href="{params.musical}/disclaimer">Disclaimer</a></li>
 		<li><a href="{params.musical}/gallery">Gallery</a></li>
+		<li><a href="{params.musical}/external-ads">External Ads</a></li>
 	</ul>
 </main>
 

src/routes/[musical]/(random-set)/external-ads/+layout.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	const { children } = $props<{ children: Snippet }>();
+</script>
+
+<main>
+	{@render children()}
+</main>
+
+<style>
+	main {
+		max-width: none;
+		padding: var(--m);
+		gap: var(--m);
+		max-height: 100vh;
+		height: calc(100vh - 2 * var(--m));
+		overflow: hidden;
+		display: grid;
+		align-items: stretch;
+		grid-template-columns: 1fr;
+		grid-template-rows: 7fr 1fr;
+	}
+</style>

src/routes/[musical]/(random-set)/external-ads/+layout.ts

@@ -0,0 +1,21 @@
+import { error } from '@sveltejs/kit';
+import type { LayoutLoad } from './$types';
+import sharedStore, { parseItemParam } from '../store.svelte';
+
+export const load = (async ({ url, params, parent }) => {
+	const { showData } = await parent();
+
+	if (showData.common.externalAds === undefined || showData.common.externalAds.length === 0) {
+		error(404, 'No external ads found for ' + showData.common.title);
+	}
+
+	const numItem = parseItemParam(
+		url,
+		params.musical,
+		'external-ads',
+		showData.common.externalAds.length
+	);
+	sharedStore.numItem.set(numItem);
+
+	return {};
+}) satisfies LayoutLoad;

src/routes/[musical]/(random-set)/external-ads/+page.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { ShowData } from '$lib';
+	import type { PageData } from './$types';
+	import * as sharedStore from '../store.svelte';
+
+	const { data } = $props<{ data: PageData }>();
+	const showData: ShowData = $derived(data.showData);
+
+	let currentNumItem = $state(0);
+	sharedStore.numItem.subscribe((value) => {
+		currentNumItem = value;
+	});
+
+	const singleAd = $derived(showData.common.externalAds?.[currentNumItem]);
+</script>
+
+{#if singleAd?.media.type === 'image'}
+	<picture>
+		{#each singleAd.media.source as source}
+			<source srcset={source.srcset} type={source.type} />
+		{/each}
+		<img
+			src={singleAd.media.img.src}
+			alt={singleAd.media.img.alt}
+			style="object-position: {singleAd.media.img.focus ?? '50% 50%'}"
+		/>
+	</picture>
+{:else if singleAd?.media.type === 'video'}
+	<video autoplay loop muted playsinline poster={singleAd.media.video.poster ?? undefined}>
+		{#each singleAd.media.source as source}
+			<source src={source.src} type={source.type} />
+		{/each}
+		Your browser does not support the video tag.
+	</video>
+{:else}
+	<p>Kein gültiges Werbematerial gefunden.</p>
+{/if}
+
+<header class="flow flow--gap-0 ta-center">
+	{#if singleAd?.company}
+		<p class="fs-xxs c-fg-3">Anzeige von</p>
+		<h1 class=" typo-heading-2">{singleAd.company}</h1>
+	{/if}
+</header>
+
+<style lang="scss">
+	header {
+		align-self: center;
+		justify-self: center;
+	}
+
+	picture {
+		display: block;
+		align-self: stretch;
+		justify-self: stretch;
+		width: 100%;
+		height: 100%;
+	}
+
+	img {
+		width: 100%;
+		height: 100%;
+		aspect-ratio: 1 / 1.414;
+		object-fit: contain;
+	}
+
+	video {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+</style>

src/routes/[musical]/gallery/+page.ts …ical]/(random-set)/external-ads/+page.tssrc/routes/[musical]/gallery/+page.ts renamed to src/routes/[musical]/(random-set)/external-ads/+page.ts src/routes/[musical]/gallery/+page.ts renamed to src/routes/[musical]/(random-set)/external-ads/+page.ts

@@ -0,0 +1,22 @@
+import { error } from '@sveltejs/kit';
+import type { LayoutLoad } from './$types';
+import sharedStore, { parseItemParam } from '../store.svelte';
+
+export const load = (async ({ url, params, parent }) => {
+	const { showData } = await parent();
+
+	if (showData.common.gallery === undefined || showData.common.gallery.length === 0) {
+		error(404, 'No gallery items found for ' + showData.common.title);
+	}
+
+	const numItem = parseItemParam(url, params.musical, 'gallery', showData.common.gallery.length);
+	sharedStore.numItem.set(numItem);
+
+	// Debug
+	const debugParam = url.searchParams.get('debug');
+	const debug = debugParam === 'true' || debugParam === '1' || debugParam !== null;
+
+	return {
+		debug
+	};
+}) satisfies LayoutLoad;