nx: use js for detection

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/App.vue

@@ -238,6 +238,11 @@ export default defineComponent({
         },
       })
     );
+
+    // Check for native interface
+    if (window.nativex?.isNative()) {
+      document.body.classList.add('native');
+    }
   },
 
   async beforeMount() {

src/global.scss

@@ -2,6 +2,18 @@ body {
   overflow: hidden;
 }
 
+// Native app styles
+body.native {
+  #content-vue {
+    margin-top: 0 !important;
+    height: 100vh !important;
+  }
+
+  #header {
+    display: none !important;
+  }
+}
+
 // Nextcloud 25+: get rid of gap and border radius at right
 #content-vue.remove-gap {
   // was var(--body-container-radius)
@@ -25,12 +37,6 @@ body {
     border-top-left-radius: var(--body-container-radius);
     border-bottom-left-radius: var(--body-container-radius);
   }
-
-  // Nothing on top
-  body.layout-base & {
-    margin-top: 0 !important;
-    height: 100vh !important;
-  }
 }
 
 // Top bar is above everything else on mobile

src/main.ts

@@ -12,6 +12,7 @@ import { getRequestToken } from '@nextcloud/auth';
 
 import type { Route } from 'vue-router';
 import type { IPhoto } from './types';
+import type { NativeX } from './types-native';
 import type PlyrType from 'plyr';
 import type videojsType from 'video.js';
 
@@ -48,6 +49,8 @@ declare global {
   var Plyr: typeof PlyrType;
   var videoClientId: string;
   var videoClientIdPersistent: string;
+
+  var nativex: NativeX | undefined;
 }
 
 // Allow global access to the router

src/types-native.ts

@@ -0,0 +1,3 @@
+export type NativeX = {
+  isNative: () => boolean;
+};