fix: handle disabled auto-play in other browsers than Firefox

* Resolves #1323

We already support firefox but other browsers also can disabled autoplay

and do not properly implement the API. So we need to check it manually.

Can be tested with Vivaldi.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

[skip ci]

Author: susnux

REUSE.toml

@@ -36,7 +36,7 @@ SPDX-FileCopyrightText = "2024 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"
 
 [[annotations]]
-path = ["img/Nextcloud.mp4", "img/Nextcloud.webm", "img/Nextcloud.webp", "img/nextcloudLogo.svg"]
+path = ["img/Nextcloud.mp4", "img/Nextcloud.webm", "img/Nextcloud.webp", "img/Nextcloud-preload.webp", "img/nextcloudLogo.svg"]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2019 Nextcloud GmbH"
 SPDX-License-Identifier = "LicenseRef-NextcloudTrademarks"

img/Nextcloud-preload.webp

@@ -11,7 +11,9 @@
 			playsinline
 			autoplay
 			muted
-			@ended="handleEnded">
+			:poster="videoPoster"
+			@ended="handleEnded"
+			@play="videoStarted = true">
 			<source :src="videoWebm" type="video/webm">
 			<source :src="videoMp4" type="video/mp4">
 			{{ videoFallbackText }}
@@ -22,25 +24,39 @@
 <script setup lang="ts">
 import { translate as t } from '@nextcloud/l10n'
 import { imagePath } from '@nextcloud/router'
-import { onMounted, useTemplateRef } from 'vue'
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
 
 const emit = defineEmits<{
 	(e: 'next'): void
 }>()
 
 const videoMp4 = imagePath('firstrunwizard', 'Nextcloud.mp4')
 const videoWebm = imagePath('firstrunwizard', 'Nextcloud.webm')
-const videoFallbackImage = imagePath('firstrunwizard', 'Nextcloud.webp')
+const videoFallbackImagePre = imagePath('firstrunwizard', 'Nextcloud-preload.webp') // first frame of the video
+const videoFallbackImage = imagePath('firstrunwizard', 'Nextcloud.webp') // best visual fallback image of the video
 const videoFallbackText = t('firstrunwizard', 'Welcome to {cloudName}!', { cloudName: window.OC.theme.name })
 
 const videoElement = useTemplateRef('video')
 
+const autoPlayDisabled = ref(false)
+const videoStarted = ref(false)
+const videoPoster = computed(() => (autoPlayDisabled.value || videoStarted.value) ? videoFallbackImage : videoFallbackImagePre)
+
 onMounted(() => {
-	// check if the browser allows auto play - otherwise we need to skip this
-	if (navigator.getAutoplayPolicy && navigator.getAutoplayPolicy(videoElement.value) === 'disallowed') {
-		videoElement.value!.poster = videoFallbackImage
-		window.setTimeout(handleEnded, 2500)
-	}
+	autoPlayDisabled.value = 'getAutoplayPolicy' in navigator
+		// @ts-expect-error -- firefox experimental API
+		&& navigator.getAutoplayPolicy(videoElement.value) === 'disallowed'
+
+	window.setTimeout(() => {
+		if (!videoStarted.value || autoPlayDisabled) {
+			// skip to the end after showing the fallback image for a short time
+			window.setTimeout(handleEnded, 1700)
+		}
+		if (!videoStarted.value) {
+			// video has not started playing within 800ms - probably due to browser restrictions
+			videoStarted.value = true
+		}
+	}, 800)
 })
 
 /**