Feature: Add pinned, owner and reply from owner indicators for comments (#1795)

* Add pinned, owner and reply from owner indicators

* fix locale

* show owner for invidious

* add margin to pinned indicator

* show owner indicator for replies

* don't show "from owner and others" on hide

* Pass variable into translated string

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

* fix replacing channelName

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

src/renderer/components/watch-video-comments/watch-video-comments.css

@@ -46,6 +46,11 @@
   text-overflow: ellipsis;
 }
 
+.commentOwner {
+  background-color: var(--scrollbar-color);
+  border-radius: 10px;
+  padding: 0 10px;
+}
 
 .commentAuthor {
   cursor: pointer;
@@ -58,6 +63,14 @@
   margin-left: 70px;
   word-wrap: break-word;
 }
+.commentPinned {
+  font-weight: normal;
+  font-size: 12px;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-left: 68px;
+  margin-bottom: 5px;
+}
 
 .commentDate {
   font-weight: normal;

src/renderer/components/watch-video-comments/watch-video-comments.js

@@ -20,6 +20,10 @@ export default Vue.extend({
       type: String,
       required: true
     },
+    channelName: {
+      type: String,
+      required: true
+    },
     channelThumbnail: {
       type: String,
       required: true
@@ -298,6 +302,7 @@ export default Vue.extend({
           }
           comment.text = autolinker.link(comment.content.replace(/(<(?!br>)([^>]+)>)/ig, ''))
           comment.dataType = 'invidious'
+          comment.isOwner = comment.authorIsChannelOwner
 
           if (typeof (comment.replies) !== 'undefined' && typeof (comment.replies.replyCount) !== 'undefined') {
             comment.numReplies = comment.replies.replyCount

src/renderer/components/watch-video-comments/watch-video-comments.vue

@@ -47,11 +47,23 @@
           class="commentThumbnail"
           @click="goToChannel(comment.authorLink)"
         >
+        <p
+          v-if="comment.isPinned"
+          class="commentPinned"
+        >
+          <font-awesome-icon
+            icon="thumbtack"
+          />
+          {{ $t("Comments.Pinned by") }} {{ channelName }}
+        </p>
         <p
           class="commentAuthorWrapper"
         >
           <span
             class="commentAuthor"
+            :class="{
+              commentOwner: comment.isOwner
+            }"
             @click="goToChannel(comment.authorLink)"
           >
             {{ comment.author }}
@@ -97,6 +109,8 @@
             {{ comment.numReplies }}
             <span v-if="comment.numReplies === 1">{{ $t("Comments.Reply").toLowerCase() }}</span>
             <span v-else>{{ $t("Comments.Replies").toLowerCase() }}</span>
+            <span v-if="comment.hasOwnerReplied && !comment.showReplies"> {{ $t("Comments.From $channelName").replace("$channelName", channelName) }}</span>
+            <span v-if="comment.numReplies > 1 && comment.hasOwnerReplied && !comment.showReplies">{{ $t("Comments.And others") }}</span>
           </span>
         </p>
         <div
@@ -115,6 +129,9 @@
             <p class="commentAuthorWrapper">
               <span
                 class="commentAuthor"
+                :class="{
+                  commentOwner: reply.isOwner
+                }"
                 @click="goToChannel(reply.authorLink)"
               >
                 {{ reply.author }}

src/renderer/views/Watch/Watch.vue

@@ -50,7 +50,7 @@
               v-if="upcomingTimestamp !== null"
               class="premiereText"
             >
-              Premieres on:
+              {{ $t("Video.Premieres on") }}:
               <br>
               {{ upcomingTimestamp }}
             </p>
@@ -110,6 +110,7 @@
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
         :channel-thumbnail="channelThumbnail"
+        :channel-name="channelName"
         @timestamp-event="changeTimestamp"
       />
     </div>

static/locales/en-US.yaml

@@ -459,6 +459,7 @@ Video:
   Starting soon, please refresh the page to check again: Starting soon, please refresh
     the page to check again
   # As in a Live Video
+  Premieres on: Premieres on
   Live: Live
   Live Now: Live Now
   Live Chat: Live Chat
@@ -602,16 +603,19 @@ Comments:
   Sort by: Sort by
   Top comments: Top comments
   Newest first: Newest First
-  # Context: View 10 Replies, View 1 Reply
+  # Context: View 10 Replies, View 1 Reply, View 1 Reply from Owner, View 2 Replies from Owner and others
   View: View
   Hide: Hide
   Replies: Replies
   Show More Replies: Show More Replies
   Reply: Reply
+  From $channelName: from $channelName
+  And others: and others
   There are no comments available for this video: There are no comments available
     for this video
   Load More Comments: Load More Comments
   No more comments available: No more comments available
+  Pinned by: Pinned by
 Up Next: Up Next
 
 #Tooltips