update and refine props

Author: dskamiotis

src/templates/components/Fabric.svelte

@@ -40,7 +40,7 @@
 	export let showVideo = false;
 	export let isXL = false;
 
-	const isMobile = window.innerWidth < 740;
+	const isMobile = window.matchMedia('(max-width: 739px)').matches;
 	const isTablet = window.matchMedia(
 		'(min-width: 740px) and (max-width: 979px)',
 	).matches;
@@ -61,8 +61,8 @@
 			if (video) {
 				if (!VideoURL || !VideoURLMobile) return;
 
-				video.load(); //
-				void video.play(); //
+				video.load();
+				void video.play();
 
 				const observer = new IntersectionObserver(
 					(entries) => {

src/templates/csr/fabric-video/index.svelte

@@ -34,9 +34,6 @@
 	export let MobileVideoBackupImage: GAMVariable;
 	export let VideoURLMobile: GAMVariable;
 	export let VideoAlignment: GAMVariable;
-
-	export let isXL = false;
-	export let showVideo = true;
 </script>
 
 <Fabric
@@ -68,6 +65,5 @@
 	{MobileVideoBackupImage}
 	{VideoURLMobile}
 	{VideoAlignment}
-	{isXL}
-	{showVideo}
+	showVideo={true}
 />

src/templates/csr/fabric-xl/index.svelte

@@ -28,8 +28,6 @@
 	export let MobileLayer2BackgroundPosition: GAMVariable;
 	export let MobileLayer3BackgroundImage: GAMVariable;
 	export let MobileLayer3BackgroundPosition: GAMVariable;
-
-	export let isXL = true;
 </script>
 
 <Fabric
@@ -56,5 +54,5 @@
 	{MobileLayer2BackgroundPosition}
 	{MobileLayer3BackgroundImage}
 	{MobileLayer3BackgroundPosition}
-	{isXL}
+	isXL={true}
 />