From 0e4cd9780279331f75499cf99c729e7f603b1bb7 Mon Sep 17 00:00:00 2001
From: Visual-Dawg <vdawg@tuta.io>
Date: Tue, 13 Feb 2024 18:54:48 +0100
Subject: [PATCH] Disable autoplay on Firefox (#46)

* previewRice: disable firefox auto-play

* fix some aria hidden attr
---
 src/lib/PatternBackground.svelte   |  2 +-
 src/routes/FeaturesSlice.svelte    |  6 +++---
 src/routes/PreviewRiceSlice.svelte | 12 +++++++-----
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/lib/PatternBackground.svelte b/src/lib/PatternBackground.svelte
index dfe65f4..5d52038 100644
--- a/src/lib/PatternBackground.svelte
+++ b/src/lib/PatternBackground.svelte
@@ -98,7 +98,7 @@
 			x <= clientX && y <= clientY && x + width > clientX && y + height > clientY
 		isMouseOver$.next(isMouseStillOver)
 	}}
-	aria-hidden
+	aria-hidden="true"
 	bind:this={wrapperElement}
 >
 	<div
diff --git a/src/routes/FeaturesSlice.svelte b/src/routes/FeaturesSlice.svelte
index 67fd3b6..db43aa2 100755
--- a/src/routes/FeaturesSlice.svelte
+++ b/src/routes/FeaturesSlice.svelte
@@ -66,7 +66,7 @@
 				Smooth transitions. Great animations. High performance. Instant input.
 			</p>
 
-			<div class="_wrapper absolute inset-0 select-none" aria-hidden>
+			<div class="_wrapper absolute inset-0 select-none" aria-hidden="true">
 				<div class="feature-image">
 					<img
 						src={smoothDefaultImage}
@@ -90,7 +90,7 @@
 				Live reloading config. Easy plain-text format. Sensible defaults. Great documentation.
 			</p>
 
-			<div class="_wrapper absolute inset-0 select-none" aria-hidden>
+			<div class="_wrapper absolute inset-0 select-none" aria-hidden="true">
 				<div class="feature-image">
 					<img
 						src={configDefaultImage}
@@ -113,7 +113,7 @@
 			<p class="max-w-[60ch]">
 				Automatic tiling that just works. Supports multiple fine-tuneable layouts.
 			</p>
-			<div class="_wrapper absolute inset-0 select-none" aria-hidden>
+			<div class="_wrapper absolute inset-0 select-none" aria-hidden="true">
 				<div class="feature-image">
 					<img
 						src={tileDefaultImage}
diff --git a/src/routes/PreviewRiceSlice.svelte b/src/routes/PreviewRiceSlice.svelte
index 34d691a..f3177ef 100755
--- a/src/routes/PreviewRiceSlice.svelte
+++ b/src/routes/PreviewRiceSlice.svelte
@@ -10,9 +10,12 @@
 	let isManuallyPaused = false
 
 	onMount(() => {
-		// The inview_leave event fires at the start and Chromium reports the video as paused, even with autoplay on.
-		// This fixes it. Catch in case autoplay is blocked
-		videoElement.play().catch(() => {})
+		// Only autoplay on Chrome, because Firefox struggles with decoding the video
+		if (navigator.userAgent.toLowerCase().includes('chrome')) {
+			// The inview_leave event fires at the start and Chromium reports the video as paused, even with autoplay on.
+			// This fixes it. Catch in case autoplay is blocked
+			videoElement.play().catch(() => {})
+		}
 	})
 </script>
 
@@ -35,7 +38,6 @@
 	>
 		<div class="video">
 			<Video
-				autoplay
 				muted
 				sources={['/videos/end_4_rice_intro.mp4']}
 				bind:videoElement
@@ -56,7 +58,7 @@
 
 <style lang="postcss">
 	section {
-		@apply relative z-10 -mb-4 w-full max-w-[1400px] px-1 animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards [animation-delay:1700ms] [animation-duration:2000ms] md:-mt-8 lg:px-8;
+		@apply animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards relative z-10 -mb-4 w-full max-w-[1400px] px-1 [animation-delay:1700ms] [animation-duration:2000ms] md:-mt-8 lg:px-8;
 
 		contain: layout style content;
 	}