Include hide comment photos setting

src/renderer/components/distraction-settings/distraction-settings.js

@@ -50,7 +50,10 @@ export default defineComponent({
     hideComments: function () {
       return this.$store.getters.getHideComments
     },
-    hideLiveStreams: function() {
+    hideCommentPhotos: function () {
+      return this.$store.getters.getHideCommentPhotos
+    },
+    hideLiveStreams: function () {
       return this.$store.getters.getHideLiveStreams
     },
     hideUpcomingPremieres: function () {
@@ -62,31 +65,31 @@ export default defineComponent({
     hideChapters: function () {
       return this.$store.getters.getHideChapters
     },
-    hideFeaturedChannels: function() {
+    hideFeaturedChannels: function () {
       return this.$store.getters.getHideFeaturedChannels
     },
-    hideChannelShorts: function() {
+    hideChannelShorts: function () {
       return this.$store.getters.getHideChannelShorts
     },
-    hideChannelPlaylists: function() {
+    hideChannelPlaylists: function () {
       return this.$store.getters.getHideChannelPlaylists
     },
-    hideChannelPodcasts: function() {
+    hideChannelPodcasts: function () {
       return this.$store.getters.getHideChannelPodcasts
     },
-    hideChannelReleases: function() {
+    hideChannelReleases: function () {
       return this.$store.getters.getHideChannelReleases
     },
-    hideChannelCommunity: function() {
+    hideChannelCommunity: function () {
       return this.$store.getters.getHideChannelCommunity
     },
-    hideSubscriptionsVideos: function() {
+    hideSubscriptionsVideos: function () {
       return this.$store.getters.getHideSubscriptionsVideos
     },
-    hideSubscriptionsShorts: function() {
+    hideSubscriptionsShorts: function () {
       return this.$store.getters.getHideSubscriptionsShorts
     },
-    hideSubscriptionsLive: function() {
+    hideSubscriptionsLive: function () {
       return this.$store.getters.getHideSubscriptionsLive
     },
     showDistractionFreeTitles: function () {
@@ -111,7 +114,7 @@ export default defineComponent({
 
       this.updateHideRecommendedVideos(value)
     },
-    handleChannelsHidden: function(value) {
+    handleChannelsHidden: function (value) {
       this.updateChannelsHidden(JSON.stringify(value))
     },
 
@@ -130,6 +133,7 @@ export default defineComponent({
       'updateDefaultTheatreMode',
       'updateHideVideoDescription',
       'updateHideComments',
+      'updateHideCommentPhotos',
       'updateHideLiveStreams',
       'updateHideUpcomingPremieres',
       'updateHideSharingActions',

src/renderer/components/distraction-settings/distraction-settings.vue

@@ -166,6 +166,12 @@
           :default-value="hideComments"
           @change="updateHideComments"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Profile Pictures in Comments')"
+          :compact="true"
+          :default-value="hideCommentPhotos"
+          @change="updateHideCommentPhotos"
+        />
       </div>
     </div>
     <h4

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

@@ -53,6 +53,22 @@
   -webkit-border-radius: 200px;
 }
 
+.commentThumbnailHidden {
+  float: left;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60px;
+  height: 60px;
+  font-size: 20px;
+  line-height: 1em;
+  text-transform: capitalize;
+  color: rgb(0 0 0);
+  background-color: rgb(235 160 172);
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+}
+
 .commentAuthorWrapper {
   font-weight: bold;
   font-size: 14px;

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

@@ -59,6 +59,10 @@ export default defineComponent({
       return this.$store.getters.getHideCommentLikes
     },
 
+    hideCommentPhotos: function () {
+      return this.$store.getters.getHideCommentPhotos
+    },
+
     commentAutoLoadEnabled: function () {
       return this.$store.getters.getCommentAutoLoadEnabled
     },
@@ -81,7 +85,7 @@ export default defineComponent({
       return (this.sortNewest) ? 'newest' : 'top'
     },
 
-    observeVisibilityOptions: function() {
+    observeVisibilityOptions: function () {
       if (!this.commentAutoLoadEnabled) { return false }
       if (!this.videoPlayerReady) { return false }
 
@@ -106,11 +110,11 @@ export default defineComponent({
       }
     },
 
-    canPerformInitialCommentLoading: function() {
+    canPerformInitialCommentLoading: function () {
       return this.commentData.length === 0 && !this.isLoading && !this.showComments
     },
 
-    canPerformMoreCommentLoading: function() {
+    canPerformMoreCommentLoading: function () {
       return this.commentData.length > 0 && !this.isLoading && this.showComments && this.nextPageToken
     },
   },

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

@@ -62,11 +62,21 @@
           :to="`/channel/${comment.authorLink}`"
           tabindex="-1"
         >
-          <img
-            :src="comment.authorThumb"
-            alt=""
-            class="commentThumbnail"
-          >
+          <!-- Hide comment photo only if it isn't the video uploader -->
+          <template v-if="hideCommentPhotos && !comment.isOwner">
+            <div
+              class="commentThumbnailHidden"
+            >
+              {{ comment.author.substr(1, 1) }}
+            </div>
+          </template>
+          <template v-else>
+            <img
+              :src="comment.authorThumb"
+              alt=""
+              class="commentThumbnail"
+            >
+          </template>
         </router-link>
         <p
           v-if="comment.isPinned"
@@ -167,11 +177,21 @@
               :to="`/channel/${reply.authorLink}`"
               tabindex="-1"
             >
-              <img
-                :src="reply.authorThumb"
-                class="commentThumbnail"
-                alt=""
-              >
+              <!-- Hide comment photo only if it isn't the video uploader -->
+              <template v-if="hideCommentPhotos && !reply.isOwner">
+                <div
+                  class="commentThumbnailHidden"
+                >
+                  {{ reply.author.substr(1, 1) }}
+                </div>
+              </template>
+              <template v-else>
+                <img
+                  :src="reply.authorThumb"
+                  alt=""
+                  class="commentThumbnail"
+                >
+              </template>
             </router-link>
             <p class="commentAuthorWrapper">
               <router-link

src/renderer/store/modules/settings.js

@@ -199,6 +199,7 @@ const state = {
   hideChannelShorts: false,
   hideChannelSubscriptions: false,
   hideCommentLikes: false,
+  hideCommentPhotos: false,
   hideComments: false,
   hideFeaturedChannels: false,
   channelsHidden: '[]',

static/locales/en-US.yaml

@@ -344,6 +344,7 @@ Settings:
     Hide Active Subscriptions: Hide Active Subscriptions
     Hide Video Description: Hide Video Description
     Hide Comments: Hide Comments
+    Hide Profile Pictures in Comments: Hide Profile Pictures in Comments
     Display Titles Without Excessive Capitalisation: Display Titles Without Excessive Capitalisation
     Hide Live Streams: Hide Live Streams
     Hide Upcoming Premieres: Hide Upcoming Premieres