wip: Enhance capabilities to handle fullscreen mode #913

core/client/components/action/KAction.vue

@@ -282,6 +282,12 @@ async function onClicked (event) {
 watch(() => props.toggled, (value) => {
   if (isToggled.value !== value) isToggled.value = value
 })
+
+// Expose
+defineExpose({
+  isToggled,
+  toggle
+})
 </script>
 
 <style lang="scss" scoped>

core/client/components/action/KToggleFullscreenAction.vue

@@ -0,0 +1,24 @@
+<template>
+  <KAction
+    ref="actionRef"
+    v-bind="props"
+    :handler="toggleFullscreen"
+  />
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { actionProps, isFullscreen, toggleFullscreen } from '../../utils'
+import KAction from './KAction.vue'
+
+// Props
+const props = defineProps(_.pick(actionProps, ['id', 'label', 'tooltip', 'icon', 'toggle']))
+
+// Data
+const actionRef = ref(null)
+
+// Watch
+watch(isFullscreen, () => {
+  if (actionRef.value.isToggled !== isFullscreen.value) actionRef.value.toggle()
+})
+</script>

core/client/utils/utils.screen.js

@@ -1,8 +1,11 @@
 import _ from 'lodash'
 import logger from 'loglevel'
+import {toRef } from 'vue'
 import { Screen } from 'quasar'
 import { AppFullscreen } from 'quasar'
 
+export const isFullscreen = toRef(AppFullscreen, 'isActive')
+
 export function computeResponsiveWidth (width) {
   let breakpointWidth = width
   if (typeof width === 'object') {
@@ -53,6 +56,14 @@ export function getOrientation () {
 }
 
 export async function toggleFullscreen () {
-  if (AppFullscreen.isActive) return AppFullscreen.request()
-  else return AppFullscreen.exit()
+  return new Promise((resolve, reject) => {
+    AppFullscreen.toggle()
+      .then(() => {
+        resolve(true)
+      })
+      .catch(err => {
+        logger.warn(`[KDK] Cannot toggle fullscreen mode: ${err}`)
+        reject(false)
+      })
+  })
 }