[stable31] fix: gracefully handle disabled autoplay policies

REUSE.toml

@@ -36,13 +36,13 @@ 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"
 
 [[annotations]]
-path = ["img/nextcloudHub.mp4", "img/nextcloudHub.webm"]
+path = ["img/nextcloudHub.mp4", "img/nextcloudHub.webm", "img/nextcloudHub.webp"]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2024 Nextcloud GmbH"
 SPDX-License-Identifier = "LicenseRef-NextcloudTrademarks"

js/firstrunwizard-about.mjs

@@ -1,3 +1,3 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('firstrunwizard', '', 'js/main-BW35HjoG.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'js/NcModal-GZ7_Neky.chunk.mjs')])))=>i.map(i=>d[i]);
-import{_ as i}from"./modulepreload-polyfill-CBWYtosv.chunk.mjs";document.addEventListener("DOMContentLoaded",function(){const e=()=>document.querySelector("#firstrunwizard_about"),n=()=>{e().addEventListener("click",async function(t){t.stopPropagation(),t.preventDefault();const o=document.querySelector('[aria-controls="header-menu-user-menu"]')??void 0,{open:r}=await i(async()=>{const{open:u}=await import("./main-BW35HjoG.chunk.mjs");return{open:u}},__vite__mapDeps([0,1]),import.meta.url);r(o),OC.hideMenus(()=>!1)})};e()?n():window._nc_event_bus.subscribe("core:user-menu:mounted",n)});
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('firstrunwizard', '', 'js/main-BlKqj3sO.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'js/NcModal-DB6p1ZIb.chunk.mjs')])))=>i.map(i=>d[i]);
+import{_ as i}from"./modulepreload-polyfill-CBWYtosv.chunk.mjs";document.addEventListener("DOMContentLoaded",function(){const e=()=>document.querySelector("#firstrunwizard_about"),n=()=>{e().addEventListener("click",async function(t){t.stopPropagation(),t.preventDefault();const o=document.querySelector('[aria-controls="header-menu-user-menu"]')??void 0,{open:r}=await i(async()=>{const{open:u}=await import("./main-BlKqj3sO.chunk.mjs");return{open:u}},__vite__mapDeps([0,1]),import.meta.url);r(o),OC.hideMenus(()=>!1)})};e()?n():window._nc_event_bus.subscribe("core:user-menu:mounted",n)});
 //# sourceMappingURL=firstrunwizard-about.mjs.map

js/firstrunwizard-activate.mjs

@@ -1,3 +1,3 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('firstrunwizard', '', 'js/main-BW35HjoG.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'js/NcModal-GZ7_Neky.chunk.mjs')])))=>i.map(i=>d[i]);
-import{_ as t}from"./modulepreload-polyfill-CBWYtosv.chunk.mjs";document.addEventListener("DOMContentLoaded",async function(){(await t(()=>import("./main-BW35HjoG.chunk.mjs"),__vite__mapDeps([0,1]),import.meta.url)).open()});
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('firstrunwizard', '', 'js/main-BlKqj3sO.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'js/NcModal-DB6p1ZIb.chunk.mjs')])))=>i.map(i=>d[i]);
+import{_ as t}from"./modulepreload-polyfill-CBWYtosv.chunk.mjs";document.addEventListener("DOMContentLoaded",async function(){(await t(()=>import("./main-BlKqj3sO.chunk.mjs"),__vite__mapDeps([0,1]),import.meta.url)).open()});
 //# sourceMappingURL=firstrunwizard-activate.mjs.map

src/components/pages/HubRelease.vue

@@ -7,9 +7,10 @@
 	<WizardPage :title="t('firstrunwizard', 'Introducing Nextcloud Hub {version}', { version: HUBRelease.version })">
 		<a :href="HUBRelease.link" :class="$style.anchor" target="_blank">
 			<video :class="$style.animation"
-				playsinline
 				autoplay
-				muted>
+				muted
+				playsinline
+				:poster="videoFallbackImage">
 				<source :src="videoWebm" type="video/webm;codecs=vp9">
 				<source :src="videoMp4" type="video/mp4">
 				{{ HUBRelease.videoAltText }}
@@ -27,6 +28,7 @@ import WizardPage from '../WizardPage.vue'
 
 const videoMp4 = imagePath('firstrunwizard', 'nextcloudHub.mp4')
 const videoWebm = imagePath('firstrunwizard', 'nextcloudHub.webm')
+const videoFallbackImage = imagePath('firstrunwizard', 'nextcloudHub.webp')
 </script>
 
 <style module>

src/components/pages/IntroAnimation.vue

@@ -5,7 +5,8 @@
 
 <template>
 	<div :class="$style.wrapper">
-		<video :class="$style.video"
+		<video ref="videoElement"
+			:class="$style.video"
 			playsinline
 			autoplay
 			muted
@@ -20,16 +21,27 @@
 <script setup lang="ts">
 import { translate as t } from '@nextcloud/l10n'
 import { imagePath } from '@nextcloud/router'
+import { onMounted, ref } 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 = ref<HTMLVideoElement>()
+
+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
  */