fix: gracefully handle disabled autoplay policies

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

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/nextcloudLogo.svg"]
+path = ["img/Nextcloud.mp4", "img/Nextcloud.webm", "img/Nextcloud.webp", "img/nextcloudLogo.svg"]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2019 Nextcloud GmbH"
 SPDX-License-Identifier = "LicenseRef-NextcloudTrademarks"

img/Nextcloud.webp

@@ -6,6 +6,7 @@
 <template>
 	<div :class="$style.wrapper">
 		<video
+			ref="video"
 			:class="$style.video"
 			playsinline
 			autoplay
@@ -21,16 +22,27 @@
 <script setup lang="ts">
 import { translate as t } from '@nextcloud/l10n'
 import { imagePath } from '@nextcloud/router'
+import { onMounted, 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 videoFallbackText = t('firstrunwizard', 'Welcome to {cloudName}!', { cloudName: window.OC.theme.name })
 
+const videoElement = useTemplateRef('video')
+
+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)
+	}
+})
+
 /**
  * Handle video has ended
  */