✨ 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}

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

@@ -187,7 +187,7 @@
 	</div>
 	<div class="flex relative my-2">
 		<div class="w-full">
-			<BrownButton disabled={stats.progress !== 1} on:click={upload_video}>
+			<BrownButton disabled={status !== Status.CompressDone} on:click={upload_video}>
 				Upload {file_size_in_mi ? `${file_size_in_mi.toFixed(2)}Mi` : ''}</BrownButton
 			>
 		</div>

frontend/src/routes/view/[quiz_id]/+page.svelte

@@ -13,6 +13,7 @@
 	import { onMount } from 'svelte';
 	import Spinner from '$lib/Spinner.svelte';
 	import GrayButton from '$lib/components/buttons/gray.svelte';
+	import MediaComponent from '$lib/editor/MediaComponent.svelte';
 
 	const tippy = createTippy({
 		arrow: true,
@@ -189,10 +190,11 @@
 					<!--					</label>-->
 					{#if question.image}
 						<span>
-							<img
-								class="pl-8"
-								src="/api/v1/storage/download/{question.image}"
+							<MediaComponent
+								css_classes="mx-auto"
+								src={question.image}
 								alt="Not provided"
+								muted={true}
 							/>
 						</span>
 					{/if}