From 786960e2d2d2c870f8feaa1b905a0a1a13049881 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Thu, 14 Apr 2022 00:54:06 +1200
Subject: [PATCH] feat(WIP): comments front end

---
 .../CustomComponents/swipeableBottomSheet.vue |  3 ++
 NUXT/pages/watch.vue                          | 29 +++++++++++++++----
 2 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 NUXT/components/CustomComponents/swipeableBottomSheet.vue

diff --git a/NUXT/components/CustomComponents/swipeableBottomSheet.vue b/NUXT/components/CustomComponents/swipeableBottomSheet.vue
new file mode 100644
index 0000000..7dbd6d7
--- /dev/null
+++ b/NUXT/components/CustomComponents/swipeableBottomSheet.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="swipeableBottomSheet" :open-state="state ? 1 : 0"></div>
+</template>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 1a4c555..384e8e3 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="background" id="watch-body">
-    <div
-      class="player-container"
-      style="position: sticky; top: 0; z-index: 696969"
-    >
+    <div class="player-container">
       <!--   Stock Player   -->
       <videoPlayer
         :vid-src="vidSrc"
@@ -135,7 +132,11 @@
       </div>
 
       <!-- Comments -->
-      <div class="comment-container" v-if="loaded && video.commentData">
+      <div
+        class="comment-container"
+        v-if="loaded && video.commentData"
+        @click="showComments = !showComments"
+      >
         <v-card flat class="background comment-renderer">
           <v-text class="comment-count keep-spaces">
             <template v-for="text in video.commentData.headerText.runs">
@@ -150,6 +151,23 @@
         <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>
+
       <!-- Related Videos -->
       <div class="loaders" v-if="!loaded">
         <v-skeleton-loader
@@ -329,6 +347,7 @@ export default {
           },
         ],
         showMore: false,
+        showComments: false,
         // share: false,
         vidSrc: null,
         sources: [],