Merge branch 'reply-visibility' into 'develop'

Add settings for changing the visibility of replies in the timeline.

See merge request pleroma/pleroma-fe!314

src/components/settings/settings.js

@@ -8,6 +8,7 @@ const settings = {
       hideAttachmentsLocal: this.$store.state.config.hideAttachments,
       hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
+      replyVisibilityLocal: this.$store.state.config.replyVisibility,
       loopVideoLocal: this.$store.state.config.loopVideo,
       loopVideoSilentOnlyLocal: this.$store.state.config.loopVideoSilentOnly,
       muteWordsString: this.$store.state.config.muteWords.join('\n'),
@@ -44,6 +45,9 @@ const settings = {
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
     },
+    replyVisibilityLocal (value) {
+      this.$store.dispatch('setOption', { name: 'replyVisibility', value })
+    },
     loopVideoLocal (value) {
       this.$store.dispatch('setOption', { name: 'loopVideo', value })
     },

src/components/settings/settings.vue

@@ -38,6 +38,16 @@
           <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
           <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
         </li>
+        <li>
+          <label for="replyVisibility" class="select">
+            <select id="replyVisibility" v-model="replyVisibilityLocal">
+              <option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
+              <option value="following">{{$t('settings.reply_visibility_following')}}</option>
+              <option value="self">{{$t('settings.reply_visibility_self')}}</option>
+            </select>
+            <i class="icon-down-open"/>
+          </label>
+        </li>
       </ul>
     </div>
     <div class="setting-item">

src/components/status/status.js

@@ -83,7 +83,6 @@ const Status = {
       return hits
     },
     muted () { return !this.unmuted && (this.status.user.muted || this.muteWordHits.length > 0) },
-    isReply () { return !!this.status.in_reply_to_status_id },
     isFocused () {
       // retweet or root of an expanded conversation
       if (this.focused) {
@@ -105,6 +104,48 @@ const Status = {
       const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
       return lengthScore > 20
     },
+    isReply () {
+      if (this.status.in_reply_to_status_id) {
+        return true
+      }
+      // For private replies where we can't see the OP, in_reply_to_status_id will be null.
+      // So instead, check that the post starts with a @mention.
+      if (this.status.visibility === 'private') {
+        var textBody = this.status.text
+        if (this.status.summary !== null) {
+          textBody = textBody.substring(this.status.summary.length, textBody.length)
+        }
+        return textBody.startsWith('@')
+      }
+      return false
+    },
+    hideReply () {
+      if (this.$store.state.config.replyVisibility === 'all') {
+        return false
+      }
+      if (this.inlineExpanded || this.expanded || this.inConversation || !this.isReply) {
+        return false
+      }
+      if (this.status.user.id === this.$store.state.users.currentUser.id) {
+        return false
+      }
+      if (this.status.activity_type === 'repeat') {
+        return false
+      }
+      var checkFollowing = this.$store.state.config.replyVisibility === 'following'
+      for (var i = 0; i < this.status.attentions.length; ++i) {
+        if (this.status.user.id === this.status.attentions[i].id) {
+          continue
+        }
+        if (checkFollowing && this.status.attentions[i].following) {
+          return false
+        }
+        if (this.status.attentions[i].id === this.$store.state.users.currentUser.id) {
+          return false
+        }
+      }
+      return this.status.attentions.length > 0
+    },
     hideSubjectStatus () {
       if (this.tallStatus && !this.$store.state.config.collapseMessageWithSubject) {
         return false

src/components/status/status.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+  <div class="status-el" v-if="!hideReply" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
     <template v-if="muted && !noReplyLinks">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>

src/i18n/messages.js

@@ -325,6 +325,9 @@ const en = {
     loop_video: 'Loop videos',
     loop_video_silent_only: 'Loop only videos without sound (i.e. Mastodon\'s "gifs")',
     reply_link_preview: 'Enable reply-link preview on mouse hover',
+    reply_visibility_all: 'Show all replies',
+    reply_visibility_following: 'Only show replies directed at me or users I\'m following',
+    reply_visibility_self: 'Only show replies directed at me',
     follow_import: 'Follow import',
     import_followers_from_a_csv_file: 'Import follows from a csv file',
     follows_imported: 'Follows imported! Processing them will take a while.',

src/main.js

@@ -49,6 +49,7 @@ const persistedStateOptions = {
     'config.hideAttachments',
     'config.hideAttachmentsInConv',
     'config.hideNsfw',
+    'config.replyVisibility',
     'config.autoLoad',
     'config.hoverPreview',
     'config.streaming',

src/modules/config.js

@@ -15,6 +15,7 @@ const defaultState = {
   hoverPreview: true,
   pauseOnUnfocused: true,
   stopGifs: false,
+  replyVisibility: 'all',
   muteWords: [],
   highlight: {}
 }