✨ Fixed multiple things

frontend/src/lib/admin.svelte

@@ -227,6 +227,7 @@
 				<div class="flex w-full">
 					<MediaComponent
 						src={quiz_data.questions[selected_question].image}
+						muted={false}
 						css_classes="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
 					/>
 				</div>

frontend/src/lib/editor/MediaComponent.svelte

@@ -5,11 +5,17 @@
   -->
 
 <script lang="ts">
+	import { browser } from '$app/environment';
+
 	export let src: string;
 	export let css_classes = 'max-h-64 h-auto w-auto';
+	export let muted = true;
 	let type: 'img' | 'video' | undefined = undefined;
 
 	const get_media = async () => {
+		if (!browser) {
+			return;
+		}
 		const res = await fetch(`/api/v1/storage/info/${src}`);
 		console.log('Headers', res.headers);
 		const fileType = res.headers.get('Content-Type');
@@ -46,13 +52,11 @@
 		<video
 			class={css_classes}
 			disablepictureinpicture
-			disableremoteplayback
 			x-webkit-airplay="deny"
 			controls
 			autoplay
 			loop
-			controlslist="nofullscreen,noremoteplayback"
-			muted
+			{muted}
 			preload="metadata"
 		>
 			<source src="/api/v1/storage/download/{src}" />

frontend/src/lib/practice/question.svelte

@@ -11,6 +11,7 @@
 	import Spinner from '$lib/Spinner.svelte';
 	import { flip } from 'svelte/animate';
 	import BrownButton from '$lib/components/buttons/brown.svelte';
+	import MediaComponent from '$lib/editor/MediaComponent.svelte';
 
 	export let question: Question;
 
@@ -93,10 +94,9 @@
 	<h1 class="text-3xl text-center">{@html question.question}</h1>
 	{#if question.image !== null}
 		<div>
-			<img
-				src="/api/v1/storage/download/{question.image}"
-				class="max-h-[40vh] object-cover mx-auto mb-8 w-auto"
-				alt="Content for Question"
+			<MediaComponent
+				src={question.image}
+				css_classes="max-h-[40vh] object-cover mx-auto mb-8 w-auto"
 			/>
 		</div>
 	{/if}