✨ Quick save

frontend/src/lib/editor/MediaComponent.svelte

@@ -0,0 +1,56 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+
+<script lang="ts">
+	export let src: string;
+	let type: 'img' | 'video' | undefined = undefined;
+
+	const get_media = async () => {
+		const res = await fetch(src, { method: 'HEAD' });
+		const fileType = res.headers.get('Content-Type');
+		console.log(fileType, 'fileType');
+		if (fileType.includes('video')) {
+			console.log('Setting type to video');
+			type = 'video';
+		} else {
+			type = 'img';
+			console.log(res);
+			return {
+				data: URL.createObjectURL(await res.blob()),
+				alt_text: res.headers.get('X-Alt-Text')
+			};
+		}
+	};
+	const update_url = () => {
+		media = get_media();
+	};
+	let media = get_media();
+	$: {
+		src;
+		update_url();
+	}
+</script>
+
+{#await media}
+	<p>Placeholder</p>
+{:then data}
+	{#if type === 'img'}
+		<img src={data.data} alt={data.alt_text ?? 'Not available'} />
+	{:else if type === 'video'}
+		<p>Video!</p>
+		<video
+			disablepictureinpicture
+			disableremoteplayback
+			x-webkit-airplay="deny"
+			loop
+			preload="metadata"
+		>
+			<source {src} />
+		</video>
+	{:else}
+		<p>Unknown media type</p>
+	{/if}
+{/await}

frontend/src/lib/editor/card.svelte

@@ -12,14 +12,15 @@
 	import Spinner from '../Spinner.svelte';
 	// import { createTippy } from 'svelte-tippy';
 	import { getLocalization } from '$lib/i18n';
+	// import MediaComponent from "$lib/editor/MediaComponent.svelte";
 
 	const { t } = getLocalization();
 
 	/*	const tippy = createTippy({
-		arrow: true,
-		animation: 'perspective-subtle',
-		placement: 'top'
-	});*/
+        arrow: true,
+        animation: 'perspective-subtle',
+        placement: 'top'
+    });*/
 
 	export let data: EditorData;
 	export let selected_question: number;
@@ -49,6 +50,17 @@
 		selected_question;
 		set_unique();
 	}
+	let image_url = '';
+
+	const update_image_url = () => {
+		image_url = `/api/v1/storage/download/${data.questions[selected_question].image}`;
+		console.log('updated!');
+	};
+	$: {
+		update_image_url();
+		selected_question;
+		data.questions;
+	}
 	/*
     if (typeof data.questions[selected_question].type !== QuizQuestionType) {
         console.log(data.questions[selected_question].type !== QuizQuestionType.ABCD || data.questions[selected_question].type !== QuizQuestionType.RANGE)
@@ -126,12 +138,9 @@
 									/>
 								</svg>
 							</button>
-							<img
-								src="/api/v1/storage/download/{data.questions[selected_question]
-									.image}"
-								alt="not available"
-								class="max-h-64 h-auto w-auto"
-							/>
+							{#await import('$lib/editor/MediaComponent.svelte') then c}
+								<svelte:component this={c.default} bind:src={image_url} />
+							{/await}
 						</div>
 					</div>
 				{:else}
@@ -144,6 +153,7 @@
 							bind:edit_id
 							bind:data
 							bind:selected_question
+							video_upload={true}
 						/>
 					{/await}
 				{/if}

frontend/src/lib/editor/settings-card.svelte

@@ -82,6 +82,7 @@
 						bind:modalOpen={uppyOpen}
 						bind:edit_id
 						bind:data
+						video_upload={false}
 					/>
 				{/await}
 			{/if}
@@ -194,6 +195,7 @@
 							bind:edit_id
 							bind:data
 							selected_question={-1}
+							video_upload={false}
 						/>
 					{/await}
 				{/if}

frontend/src/lib/editor/uploader.svelte

@@ -21,6 +21,7 @@
 	import '@uppy/image-editor/dist/style.css';
 	import type { EditorData } from '../quiz_types';
 	import { getLocalization } from '$lib/i18n';
+	import { onMount } from 'svelte';
 
 	const { t } = getLocalization();
 
@@ -28,6 +29,10 @@
 	export let edit_id: string;
 	export let data: EditorData;
 	export let selected_question: number;
+	export let video_upload: boolean = false;
+
+	// eslint-disable-next-line no-undef
+	let video_popup: undefined | WindowProxy = undefined;
 
 	const uppy = new Uppy()
 		.use(DropTarget, {
@@ -47,8 +52,9 @@
 	const props = {
 		inline: true,
 		restrictions: {
-			maxFileSize: 10_000_000,
-			maxNumberOfFiles: 1
+			maxFileSize: 10_490_000,
+			maxNumberOfFiles: 1,
+			allowedFileTypes: ['image/*']
 			// allowedFileTypes: ['.gif', '.jpg', '.jpeg', '.png', '.svg', '.webp']
 		}
 	};
@@ -69,6 +75,28 @@
 		modalOpen = false;
 	});
 	console.log(edit_id);
+
+	onMount(() => {
+		window.addEventListener('storage', (e) => {
+			if (e.key !== 'video_upload_id') {
+				return;
+			}
+			localStorage.removeItem('video_upload_id');
+			data.questions[selected_question].image = e.newValue;
+		});
+	});
+
+	const upload_video = async () => {
+		video_popup = window.open(
+			'/edit/videos',
+			'_blank',
+			'popup=true,toolbar=false,menubar=false,location=false,'
+		);
+		video_popup.addEventListener('beforeunload', () => {
+			console.log('Unloaded');
+			video_popup = undefined;
+		});
+	};
 </script>
 
 {#if modalOpen}
@@ -77,17 +105,33 @@
 		transition:fade|local
 	>
 		<div>
-			<button
-				type="button"
-				class="rounded-t-lg bg-black text-white px-1"
-				on:click={() => {
-					modalOpen = false;
-				}}
-				>Close
-			</button>
 			<div>
-				<SvelteDashboard {uppy} width="100%" {props} />
+				<button
+					type="button"
+					class="rounded-t-lg bg-black text-white px-1"
+					on:click={() => {
+						modalOpen = false;
+					}}
+					>Close
+				</button>
+				{#if video_upload}
+					<button
+						class="rounded-t-lg bg-black text-white px-1"
+						on:click={upload_video}
+						type="button"
+						>Upload video
+					</button>
+				{/if}
 			</div>
+			{#if video_popup}
+				<div class="flex w-full h-1/3 bg-white dark:bg-gray-700 p-4">
+					<h2 class="text-4xl m-auto">Popup open</h2>
+				</div>
+			{:else}
+				<div>
+					<SvelteDashboard {uppy} width="100%" {props} />
+				</div>
+			{/if}
 		</div>
 	</div>
 {/if}