From f6962a30444a74f06f0abcabaa5815a04a3bcab0 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Sat, 17 Jun 2023 17:41:19 +0200
Subject: [PATCH] :sparkles: Closes #182

---
 frontend/src/lib/editor/MediaComponent.svelte | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/editor/MediaComponent.svelte b/frontend/src/lib/editor/MediaComponent.svelte
index 9ea325a..f00f582 100644
--- a/frontend/src/lib/editor/MediaComponent.svelte
+++ b/frontend/src/lib/editor/MediaComponent.svelte
@@ -6,12 +6,16 @@
 
 <script lang="ts">
 	import { browser } from '$app/environment';
+	import { fade } from 'svelte/transition';
 
 	export let src: string;
 	export let css_classes = 'max-h-64 h-auto w-auto';
 	export let muted = true;
+	export let allow_fullscreen = true;
 	let type: 'img' | 'video' | undefined = undefined;
 
+	let img_data;
+
 	const get_media = async () => {
 		if (!browser) {
 			return;
@@ -23,7 +27,7 @@
 		} else {
 			type = 'img';
 			const data = await fetch(`/api/v1/storage/download/${src}`);
-			return {
+			img_data = {
 				data: URL.createObjectURL(await data.blob()),
 				alt_text: res.headers.get('X-Alt-Text')
 			};
@@ -37,13 +41,27 @@
 		src;
 		update_url();
 	}
+
+	let fullscreen_open = false;
+
+	const open_fullscreen = () => {
+		if (!allow_fullscreen) {
+			return;
+		}
+		fullscreen_open = true;
+	};
 </script>
 
 {#await media}
 	<p>Placeholder</p>
 {:then data}
 	{#if type === 'img'}
-		<img src={data.data} alt={data.alt_text ?? 'Not available'} class={css_classes} />
+		<img
+			src={img_data.data}
+			alt={img_data.alt_text ?? 'Not available'}
+			class={css_classes}
+			on:click={() => open_fullscreen()}
+		/>
 	{:else if type === 'video'}
 		<video
 			class={css_classes}
@@ -61,3 +79,17 @@
 		<p>Unknown media type</p>
 	{/if}
 {/await}
+
+{#if fullscreen_open}
+	<div
+		class="fixed top-0 left-0 z-50 w-screen h-screen bg-black bg-opacity-50 fle p-2"
+		transition:fade={{ duration: 80 }}
+		on:click={() => (fullscreen_open = false)}
+	>
+		<img
+			src={img_data.data}
+			alt={img_data.alt_text ?? 'Not available'}
+			class="object-cover rounded m-auto max-h-full max-w-full"
+		/>
+	</div>
+{/if}