auto-hide onscreen navigation bar in fullscreen

NUXT/pages/watch.vue

@@ -180,8 +180,10 @@ export default {
     handleFullscreenChange() {
       if (document.fullscreenElement === this.$refs.player) {
         this.$vuetube.statusBar.hide();
+        this.$vuetube.navigationBar.hide();
       } else {
         this.$vuetube.statusBar.show();
+        this.$vuetube.navigationBar.show();
       }
     }
   },

NUXT/plugins/vuetube.js

@@ -1,6 +1,7 @@
 //---   Modules/Imports   ---//
 import { Http } from "@capacitor-community/http";
 import { StatusBar, Style } from "@capacitor/status-bar";
+import { NavigationBar } from "@hugotomazi/capacitor-navigation-bar";
 import constants from "./constants";
 import { hexToRgb, rgbToHex } from "./utils";
 
@@ -57,6 +58,15 @@ const module = {
     },
   },
 
+  navigationBar: {
+    async hide() {
+      return await NavigationBar.hide();
+    },
+    async show() {
+      return await NavigationBar.show();
+    },
+  },
+
   hexToRgb(hex) {
     return hexToRgb(hex);
   },

android/app/capacitor.build.gradle

@@ -16,6 +16,7 @@ dependencies {
     implementation project(':capacitor-share')
     implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')
+    implementation project(':hugotomazi-capacitor-navigation-bar')
 
 }
 

android/app/src/main/assets/capacitor.plugins.json

@@ -26,5 +26,9 @@
 	{
 		"pkg": "@capacitor/status-bar",
 		"classpath": "com.capacitorjs.plugins.statusbar.StatusBarPlugin"
+	},
+	{
+		"pkg": "@hugotomazi/capacitor-navigation-bar",
+		"classpath": "br.com.tombus.capacitor.plugin.navigationbar.NavigationBarPlugin"
 	}
 ]

android/capacitor.settings.gradle

@@ -22,3 +22,6 @@ project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capa
 
 include ':capacitor-status-bar'
 project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
+
+include ':hugotomazi-capacitor-navigation-bar'
+project(':hugotomazi-capacitor-navigation-bar').projectDir = new File('../node_modules/@hugotomazi/capacitor-navigation-bar/android')

ios/App/Podfile

@@ -16,6 +16,7 @@ def capacitor_pods
   pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
   pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
+  pod 'HugotomaziCapacitorNavigationBar', :path => '../../node_modules/@hugotomazi/capacitor-navigation-bar'
 end
 
 target 'App' do

package.json

@@ -9,6 +9,7 @@
     "@capacitor/device": "^1.1.2",
     "@capacitor/share": "^1.1.2",
     "@capacitor/splash-screen": "^1.2.2",
-    "@capacitor/status-bar": "^1.0.8"
+    "@capacitor/status-bar": "^1.0.8",
+    "@hugotomazi/capacitor-navigation-bar": "^1.1.1"
   }
 }