lots of general improvements

NUXT/layouts/default.vue

@@ -1,22 +1,23 @@
 <template>
-  <v-app dark>
+  <v-app>
 
-    <v-card class="topNav rounded-0" style="display: flex;">
-      <img src="/icon.svg" height="30px" />
+    <v-card class="topNav rounded-0" style="display: flex;" color="accent">
+      <h2>Home</h2>
       <v-spacer />
-      <v-text-field outlined dense label="Search" prepend-inner-icon="mdi-magnify" class="topNavSearch" />
+      <v-btn text><v-icon>mdi-magnify</v-icon></v-btn>
+      <v-btn text><v-icon>mdi-dots-vertical</v-icon></v-btn>
     </v-card>
 
 
-    <v-app-content>
+    <div>
       <nuxt />
-    </v-app-content>
+    </div>
 
     <v-bottom-navigation v-model="tabSelection" class="bottomNav rounded-0">
-      <v-btn v-for="(item, i) in tabs" :key="i" class="navButton">
-        
+      <v-btn v-for="(item, i) in tabs" :key="i" class="navButton" :to="item.link">
+
         <span v-text="item.name" />
-        <v-icon v-text="item.icon" :color="tabSelection == i ? 'primary' : 'white'" />
+        <v-icon v-text="item.icon" :color="tabSelection == i ? 'primary' : 'grey'" />
 
       </v-btn>
     </v-bottom-navigation>
@@ -25,6 +26,12 @@
   </v-app>
 </template>
 
+<style>
+* {
+  font-family: Arial, Helvetica, sans-serif !important;
+}
+</style>
+
 <style scoped>
 .topNav {
   padding: 1em;
@@ -52,8 +59,8 @@
       tabSelection: 0,
       tabs: [
         { name: "Home", icon: "mdi-home", link: "/" },
-        { name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
-        { name: "Upload", icon: "mdi-plus", link: "/upload" },
+        //{ name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
+        //{ name: "Upload", icon: "mdi-plus", link: "/upload" },
         { name: "Subscriptions", icon: "mdi-youtube-subscription", link: "/subs" },
         { name: "Library", icon: "mdi-view-list", link: "/library" },
       ]

NUXT/nuxt.config.js

@@ -1,11 +1,21 @@
 import colors from 'vuetify/es5/util/colors'
 
 export default {
-  
+
   //---   Bettertube Stuff   ---//
   target: 'static',
   buildDir: '../dist',
-  
+  plugins: [
+    { src: "~/plugins/youtubei", mode: "client" }
+  ],
+
+  //---   Bettertube Debugging   ---//
+  server: {
+    port: 80, // default: 3000
+    host: '0.0.0.0', // default: localhost,
+    timing: false
+  },
+
   //---   Default NUXT Stuff   ---//
   head: {
     title: 'BetterTube',
@@ -21,7 +31,6 @@ export default {
 
 
   css: [],
-  plugins: [],
   components: true,
 
   buildModules: [
@@ -32,8 +41,12 @@ export default {
   vuetify: {
     customVariables: ['~/assets/variables.scss'],
     theme: {
-      dark: true,
+      dark: false,
       themes: {
+        light: {
+          primary: colors.red.lighten1,
+          accent: "#E62117"
+        },
         dark: {
           primary: colors.red.darken2, //colors.blue.darken2
           accent: colors.grey.darken3,

NUXT/package-lock.json

@@ -1,10 +1,11 @@
 {
-  "name": "BetterTube",
+  "name": "bettertube",
   "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
+      "name": "bettertube",
       "version": "1.0.0",
       "dependencies": {
         "core-js": "^3.19.3",
@@ -13,7 +14,8 @@
         "vue-server-renderer": "^2.6.14",
         "vue-template-compiler": "^2.6.14",
         "vuetify": "^2.6.1",
-        "webpack": "^4.46.0"
+        "webpack": "^4.46.0",
+        "youtubei": "^0.0.1-rc.28"
       },
       "devDependencies": {
         "@nuxtjs/vuetify": "^1.12.3"
@@ -13663,6 +13665,11 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/youtubei": {
+      "version": "0.0.1-rc.28",
+      "resolved": "https://registry.npmjs.org/youtubei/-/youtubei-0.0.1-rc.28.tgz",
+      "integrity": "sha512-oWR1hK0C/TN7i34MrMAT/MGfTjP52LYuP13VD2rhxTO6Ia+jRw+bI+/gn65h6qxSxg7QC8LleSiNGWwEWkw4FA=="
     }
   },
   "dependencies": {
@@ -24187,6 +24194,11 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "youtubei": {
+      "version": "0.0.1-rc.28",
+      "resolved": "https://registry.npmjs.org/youtubei/-/youtubei-0.0.1-rc.28.tgz",
+      "integrity": "sha512-oWR1hK0C/TN7i34MrMAT/MGfTjP52LYuP13VD2rhxTO6Ia+jRw+bI+/gn65h6qxSxg7QC8LleSiNGWwEWkw4FA=="
     }
   }
 }

NUXT/package.json

@@ -15,9 +15,10 @@
     "vue-server-renderer": "^2.6.14",
     "vue-template-compiler": "^2.6.14",
     "vuetify": "^2.6.1",
-    "webpack": "^4.46.0"
+    "webpack": "^4.46.0",
+    "youtubei": "^0.0.1-rc.28"
   },
   "devDependencies": {
     "@nuxtjs/vuetify": "^1.12.3"
   }
-}
+}

NUXT/pages/library.vue

@@ -0,0 +1,6 @@
+<template>
+  <center>
+    <v-icon size="100">mdi-close-circle</v-icon>
+    <h1 class="grey--text">Incomplete</h1>
+  </center>
+</template>

NUXT/pages/search.vue

@@ -0,0 +1,21 @@
+<template>
+<div>
+  {{ searchData }}
+</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchData: null
+    }
+  },
+  mounted() {
+    // video | playlist | channel | all
+    this.$youtube.search("test", "video", function(data) {
+      console.log(data)
+    })
+  }
+}
+</script>

NUXT/pages/subs.vue

@@ -0,0 +1,6 @@
+<template>
+  <center>
+    <v-icon size="100">mdi-close-circle</v-icon>
+    <h1 class="grey--text">Incomplete</h1>
+  </center>
+</template>

NUXT/plugins/youtubei.js

@@ -0,0 +1,14 @@
+const module = {
+  search(phrase, type, callback) {
+    const ytclient = require("youtubei").Client;
+    const youtube = new ytclient();
+
+    youtube.search(phrase, { type: "video" }).then((results) => {
+      callback(results);
+    });
+  }
+}
+
+export default ({ app }, inject) => {
+  inject('youtube', module)
+}