fix: comments

NUXT/components/Comments/mainCommentRenderer.vue

@@ -32,7 +32,7 @@
       <v-divider v-if="getComponents()[Object.keys(comment)[0]]"></v-divider>
     </div>
 
-    <div class="loading" v-if="loading">
+    <div v-if="loading" class="loading">
       <v-sheet
         v-for="i in comments.length <= 0 ? 5 : 1"
         :key="i"
@@ -50,6 +50,7 @@
         :defaultContinuation="replyData.replyContinuation"
         class="transition-fast-in-fast-out v-card--reveal"
         style="height: 100%"
+        @closeComments="$emit('changeState', false)"
       ></main-comment-reply-renderer>
     </template>
   </dialog-base>
@@ -57,26 +58,24 @@
 
 <script>
 import dialogBase from "~/components/dialogBase.vue";
-import commentsHeaderRenderer from "~/components/Comments/commentsHeaderRenderer.vue";
 import commentThreadRenderer from "~/components/Comments/commentThreadRenderer.vue";
-import continuationItemRenderer from "~/components/observer.vue";
+import commentsHeaderRenderer from "~/components/Comments/commentsHeaderRenderer.vue";
 import mainCommentReplyRenderer from "~/components/Comments/mainCommentReplyRenderer.vue";
+import continuationItemRenderer from "~/components/observer.vue";
 
 export default {
-  props: ["defaultContinuation", "commentData", "showComments"],
-
+  components: {
+    dialogBase,
+    commentThreadRenderer,
+    commentsHeaderRenderer,
+    mainCommentReplyRenderer,
+    continuationItemRenderer,
+  },
   model: {
     prop: "showComments",
     event: "changeState",
   },
-
-  components: {
-    dialogBase,
-    commentsHeaderRenderer,
-    commentThreadRenderer,
-    continuationItemRenderer,
-    mainCommentReplyRenderer,
-  },
+  props: ["defaultContinuation", "commentData", "showComments"],
 
   data: () => ({
     loading: true,

NUXT/components/Comments/mainCommentReplyRenderer.vue

@@ -31,18 +31,16 @@ import commentThreadRenderer from "~/components/Comments/commentThreadRenderer.v
 import continuationItemRenderer from "~/components/observer.vue";
 
 export default {
-  props: ["defaultContinuation", "parentComment", "showReplies"],
-
-  model: {
-    prop: "showReplies",
-    event: "changeState",
-  },
-
   components: {
     dialogBase,
     commentsHeaderRenderer,
     commentThreadRenderer,
     continuationItemRenderer,
   },
+  model: {
+    prop: "showReplies",
+    event: "changeState",
+  },
+  props: ["defaultContinuation", "parentComment", "showReplies"],
 };
 </script>

NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss

@@ -1,2 +0,0 @@
-@import "~vuetify/src/styles/settings/_variables";
-$bottom-sheet-inset-width: 70% !default;

NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js

@@ -1,4 +0,0 @@
-import swipeableBottomSheet from "./swipeableBottomSheet";
-
-export { swipeableBottomSheet };
-export default swipeableBottomSheet;

NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js

@@ -1,34 +0,0 @@
-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,
-        "swipeable-bottom-sheet__content--active": this.isActive,
-      };
-    },
-  },
-});

NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass

@@ -1,44 +0,0 @@
-@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%
-      height: 100%
-  
-.swipeable-bottom-sheet__content
-  align-items: center
-  display: flex
-  justify-content: center
-  pointer-events: none
-  position: absolute
-  transition: .2s map-get($transition, 'fast-in-fast-out'), z-index 1ms
-  width: 100%
-  height: 100%
-  outline: none
-  inset: 0
-
-

NUXT/components/dialogBase.vue

@@ -4,7 +4,7 @@
       class="toolbar-container d-flex flex-column background"
       style="flex-direction: column !important"
     >
-      <v-toolbar color="background" flat>
+      <v-toolbar color="background" style="position: sticky; top: 0" flat>
         <slot name="header"></slot>
       </v-toolbar>
       <v-divider></v-divider>

NUXT/pages/watch.vue

@@ -241,21 +241,17 @@
         "
       />
 
-      <swipeable-bottom-sheet
+      <div
         v-if="loaded && video.commentData"
-        v-model="showComments"
-        hide-overlay
-        persistent
-        no-click-animation
-        style="z-index: 2 !important"
-        attach="#content-container"
+        :class="showComments ? 'comments-open' : ''"
+        class="scroll-y comments"
       >
         <mainCommentRenderer
           v-model="showComments"
           :comment-data="video.commentData"
           :default-continuation="video.commentContinuation"
         ></mainCommentRenderer>
-      </swipeable-bottom-sheet>
+      </div>
 
       <!-- <swipeable-bottom-sheet
       :v-model="showComments"
@@ -281,14 +277,12 @@
 </template>
 
 <script>
-import player from "~/components/Player/index.vue";
 import { Share } from "@capacitor/share";
 import { getCpn } from "~/plugins/utils";
-import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
+import player from "~/components/Player/index.vue";
 import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
 import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
 import mainCommentRenderer from "~/components/Comments/mainCommentRenderer.vue";
-import SwipeableBottomSheet from "~/components/ExtendedComponents/swipeableBottomSheet";
 import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDescriptionRenderer.vue";
 
 import backType from "~/plugins/classes/backType";
@@ -296,11 +290,9 @@ import backType from "~/plugins/classes/backType";
 export default {
   components: {
     player,
-    ShelfRenderer,
     VidLoadRenderer,
     ItemSectionRenderer,
     mainCommentRenderer,
-    SwipeableBottomSheet,
     SlimVideoDescriptionRenderer,
   },
   layout: "empty",
@@ -512,6 +504,22 @@ export default {
 </script>
 
 <style>
+.comments {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  opacity: 0;
+  height: 100%;
+  max-height: 100%;
+  position: absolute;
+  transform: translateY(100%);
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+.comments-open {
+  transform: translatey(0);
+  opacity: 1;
+}
 #watch-body {
   height: 100%;
   max-height: 100vh;