Merge pull request #157 from PickleNik/main

Search & Watch UI improvements
2022-03-21 21:54:31 -04:00 · 2022-03-21 21:54:31 -04:00 · 19f4f1a597
parent f61731061f 0c0dfc9efc
commit 19f4f1a597
9 changed files with 69 additions and 67 deletions
--- a/NUXT/components/bottomNavigation.vue
+++ b/NUXT/components/bottomNavigation.vue
@ -2,7 +2,7 @@
  <v-bottom-navigation
    v-model="tabSelection"
    shift
-    class="bottomNav py-4 accent2"
+    class="bottomNav py-4 accent"
  >
    <v-btn
      v-for="(item, i) in tabs"
@ -15,7 +15,7 @@
      <span v-text="item.name" />
      <v-icon
        :color="tabSelection == i ? 'primary' : 'grey'"
-        :class="tabSelection == i ? 'tab primaryAlt' : ''"
+        :class="tabSelection == i ? 'tab primary lighten-2' : ''"
        v-text="item.icon"
      />
    </v-btn>
@ -58,6 +58,7 @@ export default {
  z-index: 99999;
 }
 .navButton {
+  width: 25vw !important;
  font-size: 0.66rem !important;
 }
 .tab {
--- a/NUXT/components/topNavigation.vue
+++ b/NUXT/components/topNavigation.vue
@ -1,7 +1,7 @@
 <template>
  <v-card
    style="height: 4rem !important; display: flex; box-shadow: none !important"
-    color="accent2"
+    color="accent"
    class="topNav rounded-0 pa-3"
  >
    <h3 v-show="!search" class="my-auto ml-4" v-text="page" />
@ -84,8 +84,4 @@ export default {
 .searchBar {
  margin: 0;
 }
-.searchButton {
-  width: 100%;
-  justify-content: left !important;
-}
 </style>
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@ -8,7 +8,7 @@
      @text-changed="textChanged"
    />

-    <div class="accent2" style="height: 100%; margin-top: 4rem">
+    <div class="accent" style="height: 100%; margin-top: 4rem">
      <div
        v-show="!search"
        class="background"
@ -31,7 +31,7 @@

      <div
        v-show="search"
-        class="accent2"
+        class="accent"
        style="
          padding: 0;
          overflow: hidden;
@ -42,15 +42,17 @@
      >
        <div class="scroll-y" style="height: 100%">
          <div v-if="search" style="min-width: 180px">
-            <v-list-item v-for="(item, index) in response" :key="index">
-              <v-icon>mdi-magnify</v-icon>
+            <v-list-item v-for="(item, index) in response" :key="index" class="px-0">
              <v-btn
                text
+                tile
                dense
                class="info--text searchButton text-left text-capitalize"
                @click="youtubeSearch(item)"
-                v-text="item[0]"
-              />
+              >
+                <v-icon class="mr-5">mdi-magnify</v-icon>
+                {{ item[0] }}
+              </v-btn>
            </v-list-item>
          </div>
        </div>
@ -88,6 +90,13 @@ div {
 }
 </style>

+<style scoped>
+.searchButton {
+  width: 100%;
+  justify-content: left !important;
+}
+</style>
+
 <script>
 import { App as CapacitorApp } from "@capacitor/app";
 import { mapState } from "vuex";
--- a/NUXT/nuxt.config.js
+++ b/NUXT/nuxt.config.js
@ -54,19 +54,21 @@ export default {
      options: { customProperties: true },
      themes: {
        light: {
-          primary: colors.red.lighten2,
-          primaryAlt: colors.red.lighten4,
-          accent: "#CD201F",
-          accent2: "#fff",
+          primary: {
+            base: colors.red.lighten2,
+            lighten2: colors.red.lighten4,
+          },
          background: "#fff",
+          accent: "#fff",
          info: "#000",
        },
        dark: {
-          primary: colors.red.darken2, //colors.blue.darken2
-          primaryAlt: "#533",
-          accent: "#222",
-          accent2: "#222",
+          primary: {
+            base: colors.red.darken2,
+            lighten2: "#533",
+          },
          background: "#333",
+          accent: "#222",
          info: "#fff",
        },
      },
--- a/NUXT/pages/index.vue
+++ b/NUXT/pages/index.vue
@ -42,11 +42,11 @@ export default {

        if (isOled == "true") {
          (this.$vuetify.theme.themes.dark.accent = "#000"),
-            (this.$vuetify.theme.themes.dark.accent2 = "#000"),
+            (this.$vuetify.theme.themes.dark.accent = "#000"),
            (this.$vuetify.theme.themes.dark.background = "#000");
        } else {
          (this.$vuetify.theme.themes.dark.accent = "#222"),
-            (this.$vuetify.theme.themes.dark.accent2 = "#222"),
+            (this.$vuetify.theme.themes.dark.accent = "#222"),
            (this.$vuetify.theme.themes.dark.background = "#333");
        }
      } else {
--- a/NUXT/pages/mods/theme.vue
+++ b/NUXT/pages/mods/theme.vue
@ -63,7 +63,7 @@ export default {

  watch: {
    accentColor: function (val) {
-      this.$vuetify.theme.currentTheme.primary = val;
+      this.$vuetify.theme.currentTheme.primary.base = val;
      let primaryAlt = this.$vuetube.hexToRgb(val);

      let rgbEdit = 130; //Light Mode
@ -81,12 +81,12 @@ export default {
        primaryAlt.b
      );

-      this.$vuetify.theme.currentTheme.primaryAlt = primaryAlt;
+      this.$vuetify.theme.currentTheme.primary.lighten2 = primaryAlt;
    },
  },

  mounted() {
-    this.accentColor = this.$vuetify.theme.themes.dark.primary;
+    this.accentColor = this.$vuetify.theme.themes.dark.primary.base;
    this.roblox = localStorage.getItem("roblox") === "true";
  },

@ -94,17 +94,13 @@ export default {
    amoled() {
      this.$vuetify.theme.themes.dark.background === "#000"
        ? ((this.$vuetify.theme.themes.dark.accent = "#222"),
-          (this.$vuetify.theme.themes.dark.accent2 = "#222"),
+          (this.$vuetify.theme.themes.dark.accent = "#222"),
          (this.$vuetify.theme.themes.dark.background = "#333"),
          localStorage.setItem("isOled", false))
        : ((this.$vuetify.theme.themes.dark.accent = "#000"),
-          (this.$vuetify.theme.themes.dark.accent2 = "#000"),
+          (this.$vuetify.theme.themes.dark.accent = "#000"),
          (this.$vuetify.theme.themes.dark.background = "#000"),
          localStorage.setItem("isOled", true));
-      // doesn't work 😭
-      // console.log(document.getElementsByClassName('v-application--wrap')[0])
-      // console.log(document.getElementsByClassName('v-application--wrap')[0].style)
-      // document.getElementsByClassName('v-application--wrap')[0].style.backgroundColor = "#000000 !important"
    },
    saveTheme(isDark) {
      this.$vuetube.statusBar.setBackground(
--- a/NUXT/pages/search.vue
+++ b/NUXT/pages/search.vue
@ -1,22 +1,22 @@
 <template>
-  <div>
-    <center v-if="videos.length == 0">
+  <div class="accent">
+    <center v-if="videos.length == -1">
      <v-skeleton-loader type="card-avatar, article, actions" />
      <v-skeleton-loader type="card-avatar, article, actions" />
    </center>

-    <v-list-item v-for="(video, index) in videos" :key="index">
-      <v-card class="entry" :to="`/watch?v=${video.id}`">
-        <v-card-text>
-          <div style="position: relative">
-            <v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
-            <div
-              class="videoRuntimeFloat"
-              style="color: #fff"
-              v-text="video.runtime"
-            />
-          </div>
-          <div style="margin-top: 0.5em" v-text="video.title" />
+    <v-list-item v-for="(video, index) in videos" :key="index" class="pa-0">
+      <v-card class="entry background" :to="`/watch?v=${video.id}`" flat>
+        <div style="position: relative">
+          <v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
+          <div
+            class="videoRuntimeFloat"
+            style="color: #fff"
+            v-text="video.runtime"
+          />
+        </div>
+        <div class="px-4 pt-4" v-text="video.title" />
+        <v-card-text class="pt-0">
          <div v-text="`${video.views} • ${video.uploaded}`" />
        </v-card-text>
      </v-card>
@ -26,7 +26,6 @@

 <style scoped>
 .entry {
-  margin-top: 1em;
  width: 100%; /* Prevent Loading Weirdness */
 }
 .videoRuntimeFloat {
@ -35,7 +34,7 @@
  right: 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
-  padding: 0 3px 0 3px;
+  padding: 0px 4px 0px 4px;
 }
 </style>

--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@ -1,13 +1,13 @@
 <template>
  <div>
-    <video controls autoplay :src="vidSrc" width="100%" height="300vh" />
-    <v-card class="ml-2 mr-2 flat light" flat>
-      <v-card-title
-        style="padding-top: 0; padding-bottom: 0; font-size: 0.95em"
+    <video controls autoplay :src="vidSrc" width="100%" style="max-height: 50vh" />
+    <v-card class="ml-2 mr-2 background" flat>
+      <v-card-title class="mt-2"
+        style="padding-top: 0; padding-bottom: 0; font-size: 0.95rem; line-height: 1rem;"
        v-text="title"
      />
      <v-card-text>
-        <div style="margin-bottom: 1em">{{ views }} views • {{ uploaded }}</div>
+        <div style="margin-bottom: 1rem;">{{ views }} views • {{ uploaded }}</div>

        <!--   Scrolling Div For Interactions   --->
        <div style="display: flex; margin-bottom: 1em">
@ -25,7 +25,7 @@
              @click="item.action"
            >
              <v-icon v-text="item.icon" />
-              <div v-text="item.value || item.name" />
+              <div class="mt-2" style="font-size: .66rem;" v-text="item.value || item.name" />
            </v-btn>
          </v-list-item>

@ -36,9 +36,8 @@
          </v-btn>
        </div>
        <!--   End Scrolling Div For Interactions   --->
-        <hr />
+        <!-- <hr /> -->
        <p>Channel Stuff</p>
-        <hr />
      </v-card-text>
      <div v-if="showMore" class="scroll-y ml-2 mr-2">
        {{ description }}
@ -46,7 +45,7 @@

      <v-bottom-sheet
        v-model="showMore"
-        color="accent2"
+        color="accent"
        style="z-index: 9999999"
      >
        <v-sheet style="padding: 1em">
@ -59,7 +58,7 @@
          </div>
        </v-sheet>
      </v-bottom-sheet>
-      <!-- <v-bottom-sheet v-model="share" color="accent2" style="z-index: 9999999">
+      <!-- <v-bottom-sheet v-model="share" color="accent" style="z-index: 9999999">
        <v-sheet style="padding: 1em">
          <div class="scroll-y">
            {{ description }}
@ -86,21 +85,21 @@ export default {
      interactions: [
        {
          name: "Likes",
-          icon: "mdi-thumb-up",
+          icon: "mdi-thumb-up-outline",
          action: null,
          value: this.likes,
          disabled: true,
        },
        {
          name: "Dislikes",
-          icon: "mdi-thumb-down",
+          icon: "mdi-thumb-down-outline",
          action: this.dislike(),
          value: this.dislikes,
          disabled: true,
        },
        {
          name: "Share",
-          icon: "mdi-share",
+          icon: "mdi-share-outline",
          action: this.share(),
          disabled: true,
        },
--- a/ios/App/Podfile
+++ b/ios/App/Podfile
@ -9,12 +9,12 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorCommunityHttp', :path => '..\..\node_modules\@capacitor-community\http'
-  pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
-  pod 'CapacitorBrowser', :path => '..\..\node_modules\@capacitor\browser'
-  pod 'CapacitorDevice', :path => '..\..\node_modules\@capacitor\device'
-  pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen'
-  pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
+  pod 'CapacitorCommunityHttp', :path => '../../node_modules/@capacitor-community/http'
+  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
+  pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
+  pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
+  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
 end

 target 'App' do