Keep alive in presentation mode

frontend/src/modals/SetlistPresent.vue

@@ -210,7 +210,7 @@ import { injectStrict, hkBackKey, hkCancelKey, hkDownKey, hkForwardKey, hkHideKe
 import 'vue3-carousel/dist/carousel.css';
 import { Carousel, Slide, type CarouselExposed } from 'vue3-carousel';
 import { logicOr } from '@vueuse/math';
-import { whenever } from '@vueuse/core';
+import { useWakeLock, whenever } from '@vueuse/core';
 import { ref, computed, watch, onMounted, onUnmounted, nextTick, type PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { SetlistSongPresentation } from '@/definitions';
@@ -363,6 +363,13 @@ watch (() => props.remoteHide, (val: boolean) => {
 	}
 });
 
+// keep the screen awake while presenting
+const { request: requestWakeLock, release: releaseWakeLock } = useWakeLock();
+watch(() => props.active, (isActive) => {
+	if (isActive) requestWakeLock('screen');
+	else releaseWakeLock();
+}, { immediate: true });
+
 // handle mount / unmount hooks
 onMounted(() => {
 	// alternate colon visibility of clock each second

frontend/src/modals/SongPresent.vue

@@ -47,7 +47,7 @@
 <script setup lang="ts">
 import { injectStrict, hkCancelKey, hkThemeKey } from '@/keys';
 import { ref, watch, onMounted, onUnmounted, nextTick, type PropType } from 'vue';
-import { whenever } from '@vueuse/core';
+import { useWakeLock, whenever } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import ModalDialog from '@/elements/ModalDialog.vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
@@ -122,6 +122,13 @@ watch (
 	() => maximizeFontsize()
 );
 
+// keep the screen awake while presenting
+const { request: requestWakeLock, release: releaseWakeLock } = useWakeLock();
+watch(() => props.active, (isActive) => {
+	if (isActive) requestWakeLock('screen');
+	else releaseWakeLock();
+}, { immediate: true });
+
 // handle mount / unmount hooks
 onMounted(() => {
 	// handle viewport resizes