🐛 Fixed non-latin-1 characters in image description (also closes #266)

classquiz/routers/storage.py

@@ -1,8 +1,7 @@
 # SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 #
 # SPDX-License-Identifier: MPL-2.0
-
+from base64 import b64encode
-
 from datetime import datetime, timedelta
 from tempfile import SpooledTemporaryFile
 
@@ -29,7 +28,7 @@ def headers_from_storage_item(item: StorageItem) -> dict[str, str]:
     if item.thumbhash is not None:
         base_headers["X-Thumbhash"] = item.thumbhash
     if item.alt_text is not None:
-        base_headers["X-Alt-Text"] = item.alt_text
+        base_headers["X-Alt-Text"] = b64encode(item.alt_text.encode("utf-8")).decode()
     if item.size != 0:
         base_headers["Content-Size"] = str(item.size)
     return base_headers

frontend/src/lib/editor/MediaComponent.svelte

@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang="ts">
+<script lang='ts'>
 	import { browser } from '$app/environment';
 	import { fade } from 'svelte/transition';
 
@@ -16,6 +16,11 @@ SPDX-License-Identifier: MPL-2.0
 
 	let img_data;
 
+	function base64ToBytes(base64: string): Uint8Array {
+		const binString = atob(base64);
+		return Uint8Array.from(binString, (m) => m.codePointAt(0));
+	}
+
 	const get_media = async () => {
 		if (!browser) {
 			return;
@@ -29,7 +34,7 @@ SPDX-License-Identifier: MPL-2.0
 			const data = await fetch(`/api/v1/storage/download/${src}`);
 			img_data = {
 				data: URL.createObjectURL(await data.blob()),
-				alt_text: res.headers.get('X-Alt-Text')
+				alt_text: new TextDecoder().decode(base64ToBytes(res.headers.get('X-Alt-Text')))
 			};
 		}
 	};
@@ -66,14 +71,14 @@ SPDX-License-Identifier: MPL-2.0
 		<video
 			class={css_classes}
 			disablepictureinpicture
-			x-webkit-airplay="deny"
+			x-webkit-airplay='deny'
 			controls
 			autoplay
 			loop
 			{muted}
-			preload="metadata"
+			preload='metadata'
 		>
-			<source src="/api/v1/storage/download/{src}" />
+			<source src='/api/v1/storage/download/{src}' />
 		</video>
 	{:else}
 		<p>Unknown media type</p>
@@ -82,14 +87,14 @@ SPDX-License-Identifier: MPL-2.0
 
 {#if fullscreen_open}
 	<div
-		class="fixed top-0 left-0 z-50 w-screen h-screen bg-black bg-opacity-50 fle p-2"
+		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"
+			class='object-cover rounded m-auto max-h-full max-w-full'
 		/>
 	</div>
 {/if}