✨ Added working video to kahoot-mode in admin screen

frontend/src/lib/admin.svelte

@@ -14,6 +14,7 @@
 	import CircularTimer from '$lib/play/circular_progress.svelte';
 	import Spinner from '$lib/Spinner.svelte';
 	import { get_foreground_color } from '$lib/helpers';
+	import MediaComponent from '$lib/editor/MediaComponent.svelte';
 
 	export let game_token: string;
 	export let quiz_data: QuizData;
@@ -223,12 +224,10 @@
 				</div>
 			</div>
 			{#if quiz_data.questions[selected_question].image !== null}
-				<div>
-					<img
-						src="/api/v1/storage/download/{quiz_data.questions[selected_question]
-							.image}"
-						class="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
-						alt="Content for Question"
+				<div class="flex w-full">
+					<MediaComponent
+						src={quiz_data.questions[selected_question].image}
+						css_classes="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
 					/>
 				</div>
 			{/if}

frontend/src/lib/editor/MediaComponent.svelte

@@ -6,10 +6,12 @@
 
 <script lang="ts">
 	export let src: string;
+	export let css_classes = 'max-h-64 h-auto w-auto';
 	let type: 'img' | 'video' | undefined = undefined;
 
 	const get_media = async () => {
-		const res = await fetch(src, { method: 'HEAD' });
+		const res = await fetch(`/api/v1/storage/info/${src}`);
+		console.log('Headers', res.headers);
 		const fileType = res.headers.get('Content-Type');
 		console.log(fileType, 'fileType');
 		if (fileType.includes('video')) {
@@ -18,8 +20,9 @@
 		} else {
 			type = 'img';
 			console.log(res);
+			const data = await fetch(`/api/v1/storage/download/${src}`);
 			return {
-				data: URL.createObjectURL(await res.blob()),
+				data: URL.createObjectURL(await data.blob()),
 				alt_text: res.headers.get('X-Alt-Text')
 			};
 		}
@@ -38,17 +41,21 @@
 	<p>Placeholder</p>
 {:then data}
 	{#if type === 'img'}
-		<img src={data.data} alt={data.alt_text ?? 'Not available'} />
+		<img src={data.data} alt={data.alt_text ?? 'Not available'} class={css_classes} />
 	{:else if type === 'video'}
-		<p>Video!</p>
 		<video
+			class={css_classes}
 			disablepictureinpicture
 			disableremoteplayback
 			x-webkit-airplay="deny"
+			controls
+			autoplay
 			loop
+			controlslist="nofullscreen,noremoteplayback"
+			muted
 			preload="metadata"
 		>
-			<source {src} />
+			<source src="/api/v1/storage/download/{src}" />
 		</video>
 	{:else}
 		<p>Unknown media type</p>

frontend/src/lib/editor/card.svelte

@@ -53,7 +53,7 @@
 	let image_url = '';
 
 	const update_image_url = () => {
-		image_url = `/api/v1/storage/download/${data.questions[selected_question].image}`;
+		image_url = data.questions[selected_question].image;
 		console.log('updated!');
 	};
 	$: {

frontend/src/lib/editor/uploader.svelte

@@ -29,7 +29,7 @@
 	export let edit_id: string;
 	export let data: EditorData;
 	export let selected_question: number;
-	export let video_upload: boolean = false;
+	export let video_upload = false;
 
 	// eslint-disable-next-line no-undef
 	let video_popup: undefined | WindowProxy = undefined;

frontend/src/routes/edit/videos/+page.svelte

@@ -143,6 +143,7 @@
 		localStorage.setItem('video_upload_id', json.id);
 		console.log(json, 'done');
 		status = Status.Done;
+		window.close();
 	};
 </script>