status bar stuff for issue #91

NUXT/layouts/default.vue

@@ -134,6 +134,7 @@ export default {
       const darkTheme = localStorage.getItem('darkTheme');
       if (darkTheme == "true") {
         this.$vuetify.theme.dark = darkTheme;
+        this.$vuetube.statusBar.setDark();
 
         const isOled = localStorage.getItem('isOled')
 
@@ -146,6 +147,8 @@ export default {
           this.$vuetify.theme.themes.dark.accent2 = '#222',
           this.$vuetify.theme.themes.dark.background = '#333'
         }
+      } else {
+        this.$vuetube.statusBar.setLight()
       }
     }, 0);
 

NUXT/nuxt.config.js

@@ -16,8 +16,7 @@ export default {
   target: 'static',
   plugins: [
     { src: "~/plugins/youtube", mode: "client" },
-    { src: "~/plugins/vuetube", mode: "client" },
-    { src: "~/plugins/libs", mode: "client" }
+    { src: "~/plugins/vuetube", mode: "client" }
   ],
   generate: {
     dir: '../dist'

NUXT/pages/mods/theme.vue

@@ -114,7 +114,7 @@ export default {
   watch: {
     accentColor: function (val, oldVal) {
       this.$vuetify.theme.currentTheme.primary = val;
-      let primaryAlt = this.$libs.hexToRgb(val);
+      let primaryAlt = this.$vuetube.hexToRgb(val);
 
       let rgbEdit = 130; //Light Mode
       if (localStorage.getItem('darkTheme') === "true") rgbEdit = -80; //Dark Mode
@@ -125,7 +125,7 @@ export default {
         if (primaryAlt[i] < 0) primaryAlt[i] = 0;
       }
 
-      primaryAlt = this.$libs.rgbToHex(primaryAlt.r, primaryAlt.g, primaryAlt.b);
+      primaryAlt = this.$vuetube.rgbToHex(primaryAlt.r, primaryAlt.g, primaryAlt.b);
 
 
 

NUXT/plugins/libs.js

@@ -1,22 +0,0 @@
-const module = {
-
-    hexToRgb: function (hex, callback) {
-      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-      return result ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-      } : null;
-    },
-
-    rgbToHex: function(r, g, b) {
-      return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-    }
-      
-
-}
-
-//---   Start   ---//
-export default ({ app }, inject) => {
-  inject('libs', module)
-}

NUXT/plugins/utils.js

@@ -10,4 +10,19 @@ function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-module.exports = { getBetweenStrings };
+
+
+function hexToRgb(hex) {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
+function rgbToHex(r, g, b) {
+  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+
+module.exports = { getBetweenStrings, hexToRgb, rgbToHex };

NUXT/plugins/vuetube.js

@@ -1,6 +1,8 @@
 //---   Modules/Imports   ---//
 import { Http } from '@capacitor-community/http';
+import { StatusBar, Style } from '@capacitor/status-bar';
 import constants from '../static/constants';
+import { hexToRgb, rgbToHex } from './utils';
 
 const module = {
 
@@ -37,7 +39,31 @@ const module = {
                 callback(err)
             });
 
+    },
+
+    statusBar: {
+      async hide() {
+        return await StatusBar.hide();
+      },
+      async show() {
+        return await StatusBar.show();
+      },
+      async setLight() {
+        return await StatusBar.setStyle({ style: Style.Light });
+      },
+      async setDark() {
+        return await StatusBar.setStyle({ style: Style.Dark });
+      },
+      async setTransparent() {
+        return StatusBar.setOverlaysWebView({ overlay: true });
+      },
+      async setBackground(color) {
+        return await setBackgroundColor({color: color});
       }
+    },
+
+    hexToRgb(hex) { return hexToRgb(hex); },
+    rgbToHex(r, g, b) { return rgbToHex(r, g, b); }
 
 }
 

package.json

@@ -6,6 +6,7 @@
     "@capacitor/browser": "^1.0.7",
     "@capacitor/cli": "^3.4.0",
     "@capacitor/core": "^3.4.0",
-    "@capacitor/device": "^1.1.2"
+    "@capacitor/device": "^1.1.2",
+    "@capacitor/status-bar": "^1.0.8"
   }
 }