status bar stuff for issue #91

NUXT/layouts/default.vue

@@ -3,7 +3,7 @@
     <v-card
       :style="{
         borderRadius: roblox ? '0rem' : '1rem 1rem 0px 0px !important'
-      }" 
+      }"
       style="height: 4rem !important; display: flex; box-shadow: none !important;"
       color="accent white--text"
       class="topNav rounded-0"
@@ -29,8 +29,8 @@
 
 
     <div style="height: calc(100% - 1rem); margin-top: 1rem; padding-top: 3rem; background: linear-gradient(var(--v-accent-base) 0%, var(--v-accent2-base) 100%); border-radius: 1rem;">
-      <div 
-        class="background scroll-y" 
+      <div
+        class="background scroll-y"
         style="padding: 0; height: calc(100vh - 8rem); overflow-x: hidedn;"
         :style="{
           borderRadius: roblox ? '0rem' : '1rem'
@@ -128,15 +128,16 @@ export default {
     setInterval(() => { // im sorry I'll fix this later
       this.roblox = localStorage.getItem("roblox") == "true";
     }, 1000);
-    
+
     //---   Load Saved Theme   ---//
     setTimeout(() => { //Set timeout is required to make it load properly... dont ask me why -Front
       const darkTheme = localStorage.getItem('darkTheme');
       if (darkTheme == "true") {
         this.$vuetify.theme.dark = darkTheme;
-        
+        this.$vuetube.statusBar.setDark();
+
         const isOled = localStorage.getItem('isOled')
-        
+
         if(isOled == "true") {
           this.$vuetify.theme.themes.dark.accent = '#000',
           this.$vuetify.theme.themes.dark.accent2 = '#000',
@@ -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

@@ -47,7 +47,7 @@
 
         <v-alert color="primary" dense outlined type="warning">NOTE: This doesn't save after closing the app (yet)</v-alert>
         <v-color-picker dot-size="5" hide-mode-switch mode="hexa" v-model="accentColor" />
-        
+
       </v-card-text>
     </v-card>
 
@@ -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,8 +125,8 @@ 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);
+
 
 
       this.$vuetify.theme.currentTheme.primaryAlt = primaryAlt;

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

@@ -1,13 +1,28 @@
-// Collection of functions that are useful but non-specific to any particular files 
+// Collection of functions that are useful but non-specific to any particular files
 
 function getBetweenStrings(data, start_string, end_string) {
-    const regex = new RegExp(`${escapeRegExp(start_string)}(.*?)${escapeRegExp(end_string)}`, "s");
-    const match = data.match(regex);
-    return match ? match[1] : undefined;
+  const regex = new RegExp(`${escapeRegExp(start_string)}(.*?)${escapeRegExp(end_string)}`, "s");
+  const match = data.match(regex);
+  return match ? match[1] : undefined;
 }
 
 function escapeRegExp(string) {
-    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  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,11 +39,35 @@ 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); }
 
 }
 
 //---   Start   ---//
 export default ({ app }, inject) => {
     inject('vuetube', module)
-}
+}

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"
   }
 }