feat(WIP): comments

NUXT/components/CustomComponents/swipeableBottomSheet.vue

@@ -1,3 +1,36 @@
 <template>
-  <div class="swipeableBottomSheet" :open-state="state ? 1 : 0"></div>
+  <div class="swipeableBottomSheet">
+    <v-bottom-sheet v-model="sheetMode">
+      <v-sheet class="text-center" height="200px">
+        <v-btn class="mt-6" text color="red" @click="sheetMode = !sheetMode">
+          close
+        </v-btn>
+        <div class="py-3">
+          This is a bottom sheet using the controlled by v-model instead of
+          activator
+        </div>
+      </v-sheet>
+    </v-bottom-sheet>
+  </div>
 </template>
+
+<script>
+export default {
+  props: ["enableBottomSheet"],
+
+  computed: {
+    sheetMode: {
+      get() {
+        return this.enableBottomSheet;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+};
+</script>
+
+
+<style>
+</style>

NUXT/layouts/default.vue

@@ -39,7 +39,7 @@
                 text
                 tile
                 dense
-                class="searchButton text-left"
+                class="searchButton text-left text-none"
                 @click="youtubeSearch(item)"
               >
                 <v-icon class="mr-5">mdi-magnify</v-icon>
@@ -227,7 +227,6 @@ div {
 <style scoped>
 .searchButton {
   width: 100%;
-  text-transform: none !important;
   justify-content: left !important;
 }
 </style>

NUXT/pages/watch.vue

@@ -132,12 +132,13 @@
       </div>
 
       <!-- Comments -->
-      <div
-        class="comment-container"
-        v-if="loaded && video.commentData"
-        @click="showComments = !showComments"
-      >
-        <v-card flat class="background comment-renderer">
+      <div class="comment-container" v-if="loaded && video.commentData">
+        <v-btn
+          class="background comment-renderer text-none"
+          @click="showComments = !showComments"
+          block
+          large
+        >
           <v-text class="comment-count keep-spaces">
             <template v-for="text in video.commentData.headerText.runs">
               <template v-if="text.bold">
@@ -147,11 +148,11 @@
             </template>
           </v-text>
           <v-icon>mdi-unfold-more-horizontal</v-icon>
-        </v-card>
+        </v-btn>
         <v-divider />
       </div>
 
-      <v-dialog
+      <!-- <v-dialog
         v-model="showComments"
         fullscreen
         hide-overlay
@@ -166,7 +167,12 @@
           </v-toolbar>
           <v-subheader>Hello World</v-subheader>
         </v-card>
-      </v-dialog>
+      </v-dialog> -->
+
+      <swipeable-bottom-sheet
+        :v-model="showComments"
+        style="z-index: 9999999"
+      ></swipeable-bottom-sheet>
 
       <!-- Related Videos -->
       <div class="loaders" v-if="!loaded">
@@ -188,6 +194,7 @@ import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDe
 import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
 import vuetubePlayer from "~/components/Player/index.vue";
 import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
+import SwipeableBottomSheet from "../components/CustomComponents/swipeableBottomSheet.vue";
 
 export default {
   components: {
@@ -196,6 +203,7 @@ export default {
     SlimVideoDescriptionRenderer,
     vuetubePlayer,
     ItemSectionRenderer,
+    SwipeableBottomSheet,
   },
 
   data: function () {