From 277081866882d6531b4f9b1347cb927b215a8f93 Mon Sep 17 00:00:00 2001
From: Preston <freetubeapp@protonmail.com>
Date: Sun, 4 Oct 2020 18:15:06 -0400
Subject: [PATCH] Add placeholder for comments sort

---
 .../watch-video-comments.css                  |  4 +++
 .../watch-video-comments.js                   | 28 +++++++++++++++++--
 .../watch-video-comments.vue                  |  9 ++++++
 static/locales/en-US.yaml                     |  2 ++
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index 86f49e5d..ddb33846 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -12,6 +12,10 @@
   text-align: center;
 }
 
+.commentSort {
+  float: right;
+}
+
 .comment {
   padding: 15px;
   position: relative;
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.js b/src/renderer/components/watch-video-comments/watch-video-comments.js
index 69dda7c7..a318bd37 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.js
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.js
@@ -2,14 +2,17 @@ import Vue from 'vue'
 import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
-import CommentScraper from 'yt-comment-scraper'
+import FtSelect from '../../components/ft-select/ft-select.vue'
 import FtTimestampCatcher from '../../components/ft-timestamp-catcher/ft-timestamp-catcher.vue'
 
+import CommentScraper from 'yt-comment-scraper'
+
 export default Vue.extend({
   name: 'WatchVideoComments',
   components: {
     'ft-card': FtCard,
     'ft-loader': FtLoader,
+    'ft-select': FtSelect,
     'ft-timestamp-catcher': FtTimestampCatcher
   },
   props: {
@@ -38,13 +41,34 @@ export default Vue.extend({
 
     invidiousInstance: function () {
       return this.$store.getters.getInvidiousInstance
+    },
+
+    sortNames: function () {
+      return [
+        this.$t('Comments.Top comments'),
+        this.$t('Comments.Newest first')
+      ]
+    },
+
+    sortValues: function () {
+      return [
+        'top',
+        'newest'
+      ]
     }
   },
   methods: {
-    onTimestamp: function(timestamp) {
+    onTimestamp: function (timestamp) {
       this.$emit('timestamp-event', timestamp)
     },
 
+    handleSortChange: function (sortType) {
+      console.log(sortType)
+      this.showToast({
+        message: 'Not currently implemented'
+      })
+    },
+
     getCommentData: function () {
       this.isLoading = true
       switch (this.backendPreference) {
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.vue b/src/renderer/components/watch-video-comments/watch-video-comments.vue
index d3594d79..a8ce3b32 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.vue
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.vue
@@ -17,6 +17,15 @@
     >
       {{ $t("Comments.Click to View Comments") }}
     </h4>
+    <ft-select
+      v-if="commentData.length > 0 && !isLoading && showComments"
+      class="commentSort"
+      placeholder="Sort by"
+      :value="sortValues[0]"
+      :select-names="sortNames"
+      :select-values="sortValues"
+      @change="handleSortChange"
+    />
     <h3
       v-if="commentData.length > 0 && !isLoading && showComments"
     >
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index c1208313..3cbcdfba 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -478,6 +478,8 @@ Comments:
   There are no more comments for this video: There are no more comments for this video
   Show Comments: Show Comments
   Hide Comments: Hide Comments
+  Top comments: Top comments
+  Newest first: Newest First
   # Context: View 10 Replies, View 1 Reply
   View: View
   Hide: Hide