From bbef87b5ee679b68dc315c7e2002847afa129de9 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Mon, 18 Apr 2022 17:58:59 +1200
Subject: [PATCH] feat: basic custom bottom sheet

---
 .../CustomComponents/swipeableBottomSheet.vue | 36 ----------
 .../swipeableBottomSheet/_variables.scss      |  2 +
 .../swipeableBottomSheet/index.js             |  4 ++
 .../swipeableBottomSheet.js                   | 33 +++++++++
 .../swipeableBottomSheet.sass                 | 38 ++++++++++
 NUXT/pages/watch.vue                          | 71 +++++++++++++------
 NUXT/plugins/constants.js                     |  2 +-
 7 files changed, 127 insertions(+), 59 deletions(-)
 delete mode 100644 NUXT/components/CustomComponents/swipeableBottomSheet.vue
 create mode 100644 NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss
 create mode 100644 NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js
 create mode 100644 NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
 create mode 100644 NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass

diff --git a/NUXT/components/CustomComponents/swipeableBottomSheet.vue b/NUXT/components/CustomComponents/swipeableBottomSheet.vue
deleted file mode 100644
index b9f552c..0000000
--- a/NUXT/components/CustomComponents/swipeableBottomSheet.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <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>
\ No newline at end of file
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss b/NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss
new file mode 100644
index 0000000..96c8ce2
--- /dev/null
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss
@@ -0,0 +1,2 @@
+@import "~vuetify/src/styles/settings/_variables";
+$bottom-sheet-inset-width: 70% !default;
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js b/NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js
new file mode 100644
index 0000000..e82b45a
--- /dev/null
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js
@@ -0,0 +1,4 @@
+import swipeableBottomSheet from "./swipeableBottomSheet";
+
+export { swipeableBottomSheet };
+export default swipeableBottomSheet;
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
new file mode 100644
index 0000000..1724842
--- /dev/null
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
@@ -0,0 +1,33 @@
+import "./swipeableBottomSheet.sass";
+
+// Extensions
+import { VDialog } from "vuetify/lib";
+
+/* @vue/component */
+export default VDialog.extend({
+  name: "swipeable-bottom-sheet",
+
+  props: {
+    inset: Boolean,
+    maxWidth: [String, Number],
+    transition: {
+      type: String,
+      default: "bottom-sheet-transition",
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        ...VDialog.options.computed.classes.call(this),
+        "swipeable-bottom-sheet": true,
+        "swipeable-bottom-sheet--inset": this.inset,
+      };
+    },
+    contentClasses() {
+      return {
+        "swipeable-bottom-sheet__content": true,
+      };
+    },
+  },
+});
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass
new file mode 100644
index 0000000..e974009
--- /dev/null
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass
@@ -0,0 +1,38 @@
+@import './_variables.scss'
+
+// Transition
+.bottom-sheet-transition
+  &-enter
+    transform: translateY(100%)
+
+  &-leave-to
+    transform: translateY(100%)
+
+// Block
+
+.swipeable-bottom-sheet
+
+  &.v-dialog
+    align-self: flex-end
+    border-radius: 0
+    flex: 0 1 auto
+    margin: 0
+    overflow: visible
+
+    &.swipeable-bottom-sheet--inset
+      max-width: $bottom-sheet-inset-width
+
+      @media #{map-get($display-breakpoints, 'xs-only')}
+        max-width: none
+    
+    &.v-dialog:not(.v-dialog--fullscreen)
+      max-height: 100%
+  
+.swipeable-bottom-sheet__content
+  position: sticky !important
+  bottom: 0
+  top: unset
+  overflow-y: auto
+  height: 100%
+
+
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 80ce577..6f8502f 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="background" id="watch-body">
-    <div class="player-container">
+    <div id="player-container">
       <!--   Stock Player   -->
       <videoPlayer
         :vid-src="vidSrc"
@@ -11,7 +11,13 @@
       <!--   VueTube Player V1   -->
       <vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
     </div>
-    <div class="content-container overflow-y-auto">
+    <div
+      v-bind:class="{
+        'overflow-y-auto': !showComments,
+        'overflow-y-hidden': showComments,
+      }"
+      id="content-container"
+    >
       <v-card v-if="loaded" class="ml-2 mr-2 background" flat>
         <v-card-title
           class="mt-2"
@@ -152,27 +158,47 @@
         <v-divider />
       </div>
 
-      <!-- <v-dialog
-        v-model="showComments"
-        fullscreen
-        hide-overlay
-        transition="dialog-bottom-transition"
-      >
-        <v-card>
-          <v-toolbar dark color="background">
-            <v-btn icon dark @click="showComments = false">
-              <v-icon>mdi-close</v-icon>
-            </v-btn>
-            <v-toolbar-title class="font-weight-bold">Comments</v-toolbar-title>
-          </v-toolbar>
-          <v-subheader>Hello World</v-subheader>
-        </v-card>
-      </v-dialog> -->
-
       <swipeable-bottom-sheet
+        v-model="showComments"
+        hide-overlay
+        persistent
+        no-click-animation
+        attach="#content-container"
+        v-if="loaded && video.commentData"
+      >
+        <v-card height="100%">
+          <div
+            class="toolbar-container"
+            style="position: sticky; inset: -1px; z-index: 2"
+          >
+            <v-toolbar color="background" flat>
+              <v-toolbar-title>
+                <template v-for="text in video.commentData.headerText.runs">
+                  <template v-if="text.bold">
+                    <strong :key="text.text">{{ text.text }}</strong>
+                  </template>
+                  <template v-else>{{ text.text }}</template>
+                </template>
+              </v-toolbar-title>
+              <v-spacer></v-spacer>
+              <v-btn icon dark @click="showComments = !showComments">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-toolbar>
+            <v-divider></v-divider>
+          </div>
+          <div scrollable>
+            <v-sheet color="background" v-for="i in 10" :key="i">
+              <v-skeleton-loader type="list-item-avatar-three-line, actions" />
+            </v-sheet>
+          </div>
+        </v-card>
+      </swipeable-bottom-sheet>
+
+      <!-- <swipeable-bottom-sheet
         :v-model="showComments"
         style="z-index: 9999999"
-      ></swipeable-bottom-sheet>
+      ></swipeable-bottom-sheet> -->
 
       <!-- Related Videos -->
       <div class="loaders" v-if="!loaded">
@@ -194,7 +220,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";
+import SwipeableBottomSheet from "~/components/ExtendedComponents/swipeableBottomSheet";
 
 export default {
   components: {
@@ -390,8 +416,9 @@ export default {
   flex-direction: column;
 }
 
-.content-container {
+#content-container {
   height: 100%;
+  position: relative;
 }
 
 .vertical-button span.v-btn__content {
diff --git a/NUXT/plugins/constants.js b/NUXT/plugins/constants.js
index b45a2ac..67c14df 100644
--- a/NUXT/plugins/constants.js
+++ b/NUXT/plugins/constants.js
@@ -19,7 +19,7 @@ const ytApiVal = {
 const filesystem = {
   plugins: "vuetube/plugins",
   temp: "vuetube/temp",
-}
+};
 
 module.exports = {
   URLS: url,