Port comments

src/App.vue

@@ -32,11 +32,7 @@
     </v-app-bar>
 
     <v-main class="grey lighten-3">
-      <router-view v-slot="{ Component }">
-        <keep-alive :max="5">
-          <component :key="$route.fullPath" :is="Component" />
-        </keep-alive>
-      </router-view>
+      <router-view />
     </v-main>
   </v-app>
 </template>

src/components/VideoComment.vue

@@ -1,31 +1,28 @@
 <template>
-  <v-card>
-    <div align="left">
-      <div v-if="comment.pinned">
-        <font-awesome-icon icon="thumbtack"></font-awesome-icon>&nbsp; Pinned by
-        {{ video.uploader }}
-      </div>
-      <img
-        :src="comment.thumbnail"
-        style="width: 10vmin"
-        height="176"
-        width="176"
-        loading="lazy"
-        alt="avatar"
-      />
-      <br />
-      <router-link class="uk-link-muted" v-bind:to="comment.commentorUrl">
-        {{ comment.author }} </router-link
-      >&thinsp;<font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
-    </div>
-    <p style="white-space: pre-wrap">{{ comment.commentText }}</p>
-    <div>
-      <b>{{ numberFormat(comment.likeCount) }}</b>
-      &nbsp;
-      <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
-      &nbsp;
-      <font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
-    </div>
+  <v-card elevation="4" class="pa-4">
+    <v-row>
+      <v-col md="1">
+        <v-avatar size="96">
+          <v-img :src="comment.thumbnail"></v-img>
+        </v-avatar>
+      </v-col>
+      <v-col md="11">
+        <v-card-title class="subtitle-1">
+          <span v-if="comment.pinned"><v-icon>mdi-pin</v-icon> Pinned by {{ video.uploader }}</span>
+          <router-link :to="comment.commentorUrl" class="text-decoration-none black--text">
+            <b>{{ comment.author }}</b><v-icon v-if="comment.verified">mdi-account-check</v-icon>
+          </router-link>
+        </v-card-title>
+        <v-card-text>
+          {{ comment.commentText }}
+
+          <v-divider class="my-2" />
+
+          <v-icon>mdi-thumb-up</v-icon> {{ numberFormat(comment.likeCount) }}
+          <v-icon v-if="comment.hearted" class="ml-4">mdi-heart</v-icon>
+        </v-card-text>
+      </v-col>
+    </v-row>
   </v-card>
 </template>
 
@@ -34,7 +31,7 @@ import { LibPiped } from '@/tools/libpiped'
 
 export default {
   name: 'VideoComment',
-  props: ['comment'],
+  props: ['comment', 'video'],
   methods: {
     numberFormat (...args) {
       return LibPiped.numberFormat(...args)

src/routes/WatchVideo.vue

@@ -74,7 +74,7 @@
     <v-row>
       <v-col md="8" offset-md="1" v-if="comments && comments.comments">
         <h5 class="display-1 text-center my-4">Comments</h5>
-        <VideoComment v-for="comment in comments.comments" :key="comment.commentId" :comment="comment" />
+        <VideoComment v-for="comment in comments.comments" :key="comment.commentId" :comment="comment" :video="video" class="my-4" />
         <v-progress-linear indeterminate v-intersect="onCommentsProgressIntersect" v-if="comments.comments.length !== 0" />
       </v-col>
       <v-col md="2" v-if="video && video.relatedStreams">
@@ -100,7 +100,6 @@ export default {
       video: {
         title: 'Loading...'
       },
-      active: false,
       sponsors: null,
       selectedAutoLoop: false,
       showDesc: true,
@@ -110,20 +109,7 @@ export default {
     }
   },
   mounted () {
-    this.getVideoData().then(() => {
-      if (this.active) {
-        this.$refs.videoPlayer.loadVideo()
-      }
-    })
-    this.getSponsors()
-    if (this.$store.getters.getPreferenceBoolean('comments', true)) this.getComments()
-  },
-  activated () {
-    this.active = true
-    if (this.video.duration) this.$refs.videoPlayer.loadVideo()
-  },
-  deactivated () {
-    this.active = false
+    this.initialize()
   },
   watch: {
     '$route.query.v': function (v) {
@@ -133,6 +119,14 @@ export default {
     }
   },
   methods: {
+    initialize () {
+      this.getVideoData().then(() => {
+        this.$refs.videoPlayer.loadVideo()
+      })
+      this.getSponsors()
+      if (this.$store.getters.getPreferenceBoolean('comments', true)) this.getComments()
+    },
+
     numberFormat (...args) {
       return LibPiped.numberFormat(...args)
     },