mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-22 22:59:41 +02:00
50 lines
1.4 KiB
Vue
50 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
v-if="wakeIsSupported"
|
||
|
|
class="d-print-none d-flex px-2"
|
||
|
|
:class="$vuetify.breakpoint.smAndDown ? 'justify-center' : 'justify-end'"
|
||
|
|
>
|
||
|
|
<v-switch v-model="wakeLock" small :label="$t('recipe.screen-awake')" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, computed, onMounted, onUnmounted } from "@nuxtjs/composition-api";
|
||
|
|
import { useWakeLock } from "@vueuse/core";
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
setup() {
|
||
|
|
const { isSupported: wakeIsSupported, isActive, request, release } = useWakeLock();
|
||
|
|
const wakeLock = computed({
|
||
|
|
get: () => isActive,
|
||
|
|
set: () => {
|
||
|
|
if (isActive.value) {
|
||
|
|
unlockScreen();
|
||
|
|
} else {
|
||
|
|
lockScreen();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
async function lockScreen() {
|
||
|
|
if (wakeIsSupported) {
|
||
|
|
console.log("Wake Lock Requested");
|
||
|
|
await request("screen");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
async function unlockScreen() {
|
||
|
|
if (wakeIsSupported || isActive) {
|
||
|
|
console.log("Wake Lock Released");
|
||
|
|
await release();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onMounted(() => lockScreen());
|
||
|
|
onUnmounted(() => unlockScreen());
|
||
|
|
|
||
|
|
return {
|
||
|
|
wakeLock,
|
||
|
|
wakeIsSupported,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|