From 53cf9b30fe4fed8324cf6b116f7adf0bcb481295 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Wed, 26 May 2021 01:16:21 +0530
Subject: [PATCH] Add rendering of comments. (#169)

* Add rendering of comments.

* Finish comments implementation.
---
 src/components/WatchVideo.vue | 74 +++++++++++++++++++++++++++--------
 1 file changed, 57 insertions(+), 17 deletions(-)

diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 877ea765..77bfac33 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -33,23 +33,54 @@
         <b>Auto Play next Video:</b>&nbsp;
         <input class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" />
 
-        <div
-            class="uk-tile-default uk-text-secondary"
-            style="background: #0b0e0f; width: 300px"
-            v-bind:key="related.url"
-            v-for="related in video.relatedStreams"
-        >
-            <router-link class="uk-link-muted" v-bind:to="related.url">
-                <p class="uk-text-emphasis">{{ related.title }}</p>
-                <img style="width: 100%" v-bind:src="related.thumbnail" loading="lazy" />
-            </router-link>
-            <p>
-                <router-link class="uk-link-muted" v-bind:to="related.uploaderUrl || '/'">
-                    <p>{{ related.uploaderName }}</p>
-                </router-link>
-                <font-awesome-icon icon="eye"></font-awesome-icon>
-                {{ related.views }} views
-            </p>
+        <hr />
+
+        <div uk-grid>
+            <div class="uk-width-4-5" v-if="comments">
+                <div
+                    class="uk-tile-default uk-align-left uk-width-expand"
+                    style="background: #0b0e0f"
+                    v-bind:key="comment.commentId"
+                    v-for="comment in comments.comments"
+                >
+                    <div align="left">
+                        <img
+                            :src="comment.thumbnail"
+                            style="width: calc(100% * 1 / 20)"
+                            height="176"
+                            width="176"
+                            loading="lazy"
+                            alt="avatar"
+                        />
+                        <router-link class="uk-link-muted" v-bind:to="comment.commentorUrl">
+                            <p>{{ comment.author }}</p>
+                        </router-link>
+                    </div>
+                    <p>{{ comment.commentText }}</p>
+                    <hr />
+                </div>
+            </div>
+
+            <div class="uk-width-1-5" v-if="video">
+                <div
+                    class="uk-tile-default uk-width-auto"
+                    style="background: #0b0e0f"
+                    v-bind:key="related.url"
+                    v-for="related in video.relatedStreams"
+                >
+                    <router-link class="uk-link-muted" v-bind:to="related.url">
+                        <p class="uk-text-emphasis">{{ related.title }}</p>
+                        <img style="width: 100%" v-bind:src="related.thumbnail" loading="lazy" />
+                    </router-link>
+                    <p>
+                        <router-link class="uk-link-muted" v-bind:to="related.uploaderUrl || '/'">
+                            <p>{{ related.uploaderName }}</p>
+                        </router-link>
+                        <font-awesome-icon icon="eye"></font-awesome-icon>
+                        {{ related.views }} views
+                    </p>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -68,18 +99,21 @@ export default {
             sponsors: null,
             selectedAutoPlay: null,
             showDesc: true,
+            comments: null,
         };
     },
     mounted() {
         this.selectedAutoPlay = Constants.AUTO_PLAY;
         this.getVideoData();
         this.getSponsors();
+        this.getComments();
     },
     watch: {
         "$route.query.v": function(v) {
             if (v) {
                 this.getVideoData();
                 this.getSponsors();
+                this.getComments();
             }
         },
     },
@@ -98,6 +132,9 @@ export default {
                         : encodeURIComponent('["sponsor", "interaction", "selfpromo", "music_offtopic"]')),
             );
         },
+        fetchComments() {
+            return this.fetchJson(Constants.BASE_URL + "/comments/" + this.$route.query.v);
+        },
         onChange() {
             if (localStorage) localStorage.setItem("autoplay", this.selectedAutoPlay);
         },
@@ -121,6 +158,9 @@ export default {
             if (!localStorage || localStorage.getItem("sponsorblock") !== false)
                 this.fetchSponsors().then(data => (this.sponsors = data));
         },
+        async getComments() {
+            this.fetchComments().then(data => (this.comments = data));
+        },
     },
     components: {
         Player,