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

@@ -24,24 +24,26 @@
 	let yRotation = 0;
 	let zRotation = 0;
 
-	let modelViewer;
+	import type { ModelViewerElement } from '@google/model-viewer';
+
+	let modelViewer: ModelViewerElement | null = null;
 
 	$: style = `width: ${progress}%`;
 
-	const onProgress = ({ detail }) => {
+	const onProgress = ({ detail }: { detail: { totalProgress: number } }) => {
 		progress = Math.ceil(detail.totalProgress * 100.0);
 		if (progress == 100) {
 			setTimeout(() => {
 				hideProgressScreen = true;
 			}, 250);
 		} else hideProgressScreen = false;
-	}
+	};
 
 	function onResetView() {
+		if (modelViewer) {
 			cameraAzimuth = 0;
 			cameraPolar = 0;
 			cameraZoom = 100;
-
 			modelViewer.cameraOrbit = cameraOrbit;
 			modelViewer.cameraTarget = cameraTarget;
 			modelViewer.fieldOfView = fieldOfView;
@@ -50,6 +52,7 @@
 			cameraZoom = 100;
 			fieldOfView = '10deg';
 		}
+	}
 
 	function updateCameraOrbit(azimuth: number, polar: number, zoom: number) {
 		cameraAzimuth = azimuth;
@@ -58,9 +61,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
+		class="h-full w-full"
 		ar
 		shadow-intensity="1"
 		src={data.url}
@@ -81,18 +85,25 @@
 			class:opacity-0={!hideProgressScreen}
 			class:hidden={!hideProgressScreen}
 		>
+			<!--AR Tracking erstmal ausgeblendet (hidden/flex)-->
+			<div class="hidden p-4 z-10 bg-red-500">
 				<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
-				>
 
+				<button
+					class="flex"
+					on:click={() => {
+						if (modelViewer) {
+							console.log(modelViewer.ar, modelViewer.getAttribute('ar-status'));
+						}
+					}}>AR Testen</button
+				>
+			</div>
+
+			<div class="flex flex-col bg-white/50">
 				<!--3 Buttons-->
 				<div class="p-2">
 					<Button
@@ -184,22 +195,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>