src/routes/(token-based)/view/[vorgang]/[tatort]/+page.svelte

@@ -2,6 +2,7 @@
 	import Panel from '$lib/components/Panel.svelte';
 	import { onMount } from 'svelte';
 	import Button from '$lib/components/Button.svelte';
+	import type { ModelViewerElement } from '@google/model-viewer';
 
 	export let data;
 
@@ -24,31 +25,32 @@
 	let yRotation = 0;
 	let zRotation = 0;
 
-	let modelViewer;
+	let modelViewer: ModelViewerElement | null = null;
 
 	$: style = `width: ${progress}%`;
 
-	const onProgress = ({ detail }) => {
+	const updateModelProgress = ({ detail }: { detail: { totalProgress: number } }) => {
 		progress = Math.ceil(detail.totalProgress * 100.0);
 		if (progress == 100) {
 			setTimeout(() => {
 				hideProgressScreen = true;
 			}, 250);
 		} else hideProgressScreen = false;
-	}
+	};
 
 	function onResetView() {
-		cameraAzimuth = 0;
-		cameraPolar = 0;
-		cameraZoom = 100;
-
-		modelViewer.cameraOrbit = cameraOrbit;
-		modelViewer.cameraTarget = cameraTarget;
-		modelViewer.fieldOfView = fieldOfView;
-		cameraAzimuth = 0;
-		cameraPolar = 0;
-		cameraZoom = 100;
-		fieldOfView = '10deg';
+		if (modelViewer) {
+			cameraAzimuth = 0;
+			cameraPolar = 0;
+			cameraZoom = 100;
+			modelViewer.cameraOrbit = cameraOrbit;
+			modelViewer.cameraTarget = cameraTarget;
+			modelViewer.fieldOfView = fieldOfView;
+			cameraAzimuth = 0;
+			cameraPolar = 0;
+			cameraZoom = 100;
+			fieldOfView = '10deg';
+		}
 	}
 
 	function updateCameraOrbit(azimuth: number, polar: number, zoom: number) {
@@ -58,10 +60,10 @@
 	}
 </script>
 
-<div class="h-full model w-full bg-neutral-200 p-4 transition-all delay-250">
+<div class="h-full w-full bg-neutral-200 p-4 transition-all delay-250">
 	<!-- xr-environment -->
 	<model-viewer
-		ar
+		class="h-full w-full"
 		shadow-intensity="1"
 		src={data.url}
 		bind:this={modelViewer}
@@ -73,7 +75,7 @@
 		orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
 		camera-target="0m 0m 0m"
 		camera-orbit={`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}%`}
-		on:progress={onProgress}
+		on:progress={updateModelProgress}
 	>
 		<!--Buttons zum Steuern-->
 		<div
@@ -81,18 +83,7 @@
 			class:opacity-0={!hideProgressScreen}
 			class:hidden={!hideProgressScreen}
 		>
-			<button slot="ar-button" id="ar-button"> 👋 Activate AR </button>
-
-			<div id="ar-prompt">AR-Prompt</div>
-
-			<button id="ar-failure"> AR is not tracking! </button>
 			<div class="flex flex-col bg-white/50">
-				<button
-					on:click={() => {
-						console.log(modelViewer.ar, modelViewer.getAttribute('ar-status'));
-					}}>Test</button
-				>
-
 				<!--3 Buttons-->
 				<div class="p-2">
 					<Button
@@ -184,22 +175,4 @@
 </div>
 
 <style>
-	model-viewer {
-		height: 100%;
-		width: 100%;
-	}
-
-	/* .vertical-slider {
-		writing-mode: bt-lr; /* Schreibt von unten nach oben (Vertikale Darstellung)
-		transform: rotate(270deg); /* Slider um 270° drehen
-		height: 200px;
-	} */
-
-	.model {
-		height: calc(100%-84px);
-	}
-
-	/* .active-border {
-		border: 2px blue solid;
-	} */
 </style>