feat: optional wake lock (#1676)

Author: kermanx

docs/custom/index.md

@@ -59,6 +59,8 @@ selectable: true
 record: dev
 # enable Slidev's context menu, can be boolean, 'dev' or 'build'
 contextMenu: true
+# enable wake lock, can be boolean, 'dev' or 'build'
+wakeLock: true
 
 # force color schema for the slides, can be 'auto', 'light', or 'dark'
 colorSchema: auto

packages/client/composables/useWakeLock.ts

@@ -0,0 +1,13 @@
+import { useWakeLock as useVueUseWakeLock } from '@vueuse/core'
+import { watchEffect } from 'vue'
+import { wakeLockEnabled } from '../state'
+
+export function useWakeLock() {
+  const { request, release } = useVueUseWakeLock()
+
+  watchEffect((onCleanup) => {
+    if (wakeLockEnabled.value)
+      request('screen')
+    onCleanup(release)
+  })
+}

packages/client/constants.ts

@@ -80,4 +80,5 @@ export const HEADMATTER_FIELDS = [
   'htmlAttrs',
   'mdc',
   'contextMenu',
+  'wakeLock',
 ]

packages/client/internals/SelectList.vue

@@ -5,7 +5,7 @@ import type { SelectionItem } from './types'
 
 const props = defineProps({
   modelValue: {
-    type: [Object, String, Number] as PropType<any>,
+    type: [Object, String, Number, Boolean] as PropType<any>,
   },
   title: {
     type: String,
@@ -43,7 +43,7 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 
 <style lang="postcss" scoped>
 .select-list {
-  @apply py-2;
+  @apply my-2;
 }
 
 .item {
@@ -55,6 +55,6 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 }
 
 .title {
-  @apply text-xs uppercase opacity-50 tracking-widest px-7 py-1;
+  @apply text-xs uppercase opacity-50 tracking-widest px-7 py-1 select-none text-nowrap;
 }
 </style>

packages/client/internals/Settings.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { slideScale } from '../state'
+import { useWakeLock } from '@vueuse/core'
+import { slideScale, wakeLockEnabled } from '../state'
 import SelectList from './SelectList.vue'
 import type { SelectionItem } from './types'
 
-const items: SelectionItem<number>[] = [
+const scaleItems: SelectionItem<number>[] = [
   {
     display: 'Fit',
     value: 0,
@@ -13,10 +14,24 @@ const items: SelectionItem<number>[] = [
     value: 1,
   },
 ]
+
+const { isSupported } = useWakeLock()
+
+const wakeLockItems: SelectionItem<boolean>[] = [
+  {
+    display: 'Enabled',
+    value: true,
+  },
+  {
+    display: 'Disabled',
+    value: false,
+  },
+]
 </script>
 
 <template>
   <div class="text-sm select-none">
-    <SelectList v-model="slideScale" title="Scale" :items="items" />
+    <SelectList v-model="slideScale" title="Scale" :items="scaleItems" />
+    <SelectList v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported" v-model="wakeLockEnabled" title="Wake lock" :items="wakeLockItems" />
   </div>
 </template>

packages/client/pages/play.vue

@@ -10,6 +10,7 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
+import { useWakeLock } from '../composables/useWakeLock'
 import { useDrawings } from '../composables/useDrawings'
 import PresenterMouse from '../internals/PresenterMouse.vue'
 
@@ -32,6 +33,8 @@ function onClick(e: MouseEvent) {
 
 useSwipeControls(root)
 registerShortcuts()
+if (__SLIDEV_FEATURE_WAKE_LOCK__)
+  useWakeLock()
 
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 

packages/client/pages/presenter.vue

@@ -24,11 +24,14 @@ import ClicksSlider from '../internals/ClicksSlider.vue'
 import ContextMenu from '../internals/ContextMenu.vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import { useWakeLock } from '../composables/useWakeLock'
 
 const main = ref<HTMLDivElement>()
 
 registerShortcuts()
 useSwipeControls(main)
+if (__SLIDEV_FEATURE_WAKE_LOCK__)
+  useWakeLock()
 
 const {
   clicksContext,

packages/client/state/index.ts

@@ -25,6 +25,7 @@ export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.v
 export const currentCamera = useLocalStorage<string>('slidev-camera', 'default', { listenToStorageChanges: false })
 export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { listenToStorageChanges: false })
 export const slideScale = useLocalStorage<number>('slidev-scale', 0)
+export const wakeLockEnabled = useLocalStorage('slidev-wake-lock', true)
 
 export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
 export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })

packages/parser/src/config.ts

@@ -39,6 +39,7 @@ export function getDefaultConfig(): SlidevConfig {
     transition: undefined,
     editor: true,
     contextMenu: undefined,
+    wakeLock: true,
   }
 }
 

packages/slidev/node/vite/extendConfig.ts

@@ -230,6 +230,7 @@ export function getDefine(options: ResolvedSlidevOptions): Record<string, string
     __SLIDEV_FEATURE_RECORD__: JSON.stringify(options.data.config.record === true || options.data.config.record === options.mode),
     __SLIDEV_FEATURE_PRESENTER__: JSON.stringify(options.data.config.presenter === true || options.data.config.presenter === options.mode),
     __SLIDEV_FEATURE_PRINT__: JSON.stringify(options.mode === 'export' || (options.mode === 'build' && [true, 'true', 'auto'].includes(options.data.config.download))),
+    __SLIDEV_FEATURE_WAKE_LOCK__: JSON.stringify(options.data.config.wakeLock === true || options.data.config.wakeLock === options.mode),
     __SLIDEV_HAS_SERVER__: options.mode !== 'build' ? 'true' : 'false',
   }
 }

packages/types/src/config.ts

@@ -251,6 +251,10 @@ export interface SlidevConfig {
    * @default true
    */
   contextMenu: boolean | 'dev' | 'build' | undefined
+  /**
+   * Enable wake lock
+   */
+  wakeLock: boolean | 'dev' | 'build'
 }
 
 export interface FontOptions {

shim.d.ts

@@ -9,6 +9,7 @@ declare global {
   const __SLIDEV_FEATURE_RECORD__: boolean
   const __SLIDEV_FEATURE_PRESENTER__: boolean
   const __SLIDEV_FEATURE_PRINT__: boolean
+  const __SLIDEV_FEATURE_WAKE_LOCK__: boolean
   const __SLIDEV_HAS_SERVER__: boolean
 }
 
@@ -23,6 +24,7 @@ declare module '@vue/runtime-core' {
     __SLIDEV_FEATURE_RECORD__: boolean
     __SLIDEV_FEATURE_PRESENTER__: boolean
     __SLIDEV_FEATURE_PRINT__: boolean
+    __SLIDEV_FEATURE_WAKE_LOCK__: boolean
     __SLIDEV_HAS_SERVER__: boolean
   }
 }