Add rendering of comments. (#169)

* Add rendering of comments.

* Finish comments implementation.

src/components/WatchVideo.vue

@@ -33,9 +33,38 @@
         <b>Auto Play next Video:</b>&nbsp;
         <input class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" />
 
+        <hr />
+
+        <div uk-grid>
+            <div class="uk-width-4-5" v-if="comments">
                 <div
-            class="uk-tile-default uk-text-secondary"
+                    class="uk-tile-default uk-align-left uk-width-expand"
-            style="background: #0b0e0f; width: 300px"
+                    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"
                 >
@@ -52,6 +81,8 @@
                     </p>
                 </div>
             </div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -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,