Merge branch 'develop' into fedi-absturztau-be

CHANGELOG.md

@@ -4,15 +4,28 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
+### Added
+- New option to optimize timeline rendering to make the site more responsive (enabled by default)
+
 ## [Unreleased patch]
 
+### Fixed
+- Fixed chats list not updating its order when new messages come in
+- Fixed chat messages sometimes getting lost when you receive a message at the same time
+
+### Added
+- Import/export a muted users
+
+## [2.1.1] - 2020-09-08
 ### Changed
 - Polls will be hidden with status content if "Collapse posts with subjects" is enabled and the post is collapsed.
 
 ### Fixed
+- Network fetches don't pile up anymore but wait for previous ones to finish to reduce throttling.
 - Autocomplete won't stop at the second @, so it'll still work with "@lain@l" and not start over.
 - Fixed weird autocomplete behavior when you write ":custom_emoji: ?"
 
+
 ## [2.1.0] - 2020-08-28
 ### Added
 - Autocomplete domains from list of known instances

src/App.scss

@@ -941,6 +941,9 @@ nav {
   min-height: 1.3rem;
   max-height: 1.3rem;
   line-height: 1.3rem;
+  max-width: 10em;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .chat-layout {

src/components/attachment/attachment.vue

@@ -80,6 +80,8 @@
         class="video"
         :attachment="attachment"
         :controls="allowPlay"
+        @play="$emit('play')"
+        @pause="$emit('pause')"
       />
       <i
         v-if="!allowPlay"
@@ -93,6 +95,8 @@
       :alt="attachment.description"
       :title="attachment.description"
       controls
+      @play="$emit('play')"
+      @pause="$emit('pause')"
     />
 
     <div

src/components/chat/chat.js

@@ -5,6 +5,7 @@ import ChatMessage from '../chat_message/chat_message.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
 import chatService from '../../services/chat_service/chat_service.js'
+import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
 import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
 
 const BOTTOMED_OUT_OFFSET = 10
@@ -204,9 +205,9 @@ const Chat = {
       }
     },
     readChat () {
-      if (!(this.currentChatMessageService && this.currentChatMessageService.lastMessage)) { return }
+      if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return }
       if (document.hidden) { return }
-      const lastReadId = this.currentChatMessageService.lastMessage.id
+      const lastReadId = this.currentChatMessageService.maxId
       this.$store.dispatch('readChat', { id: this.currentChat.id, lastReadId })
     },
     bottomedOut (offset) {
@@ -244,9 +245,9 @@ const Chat = {
 
       const chatId = chatMessageService.chatId
       const fetchOlderMessages = !!maxId
-      const sinceId = fetchLatest && chatMessageService.lastMessage && chatMessageService.lastMessage.id
+      const sinceId = fetchLatest && chatMessageService.maxId
 
-      this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
+      return this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
         .then((messages) => {
           // Clear the current chat in case we're recovering from a ws connection loss.
           if (isFirstFetch) {
@@ -287,7 +288,7 @@ const Chat = {
     },
     doStartFetching () {
       this.$store.dispatch('startFetchingCurrentChat', {
-        fetcher: () => setInterval(() => this.fetchChat({ fetchLatest: true }), 5000)
+        fetcher: () => promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000)
       })
       this.fetchChat({ isFirstFetch: true })
     },
@@ -303,7 +304,11 @@ const Chat = {
 
       return this.backendInteractor.sendChatMessage(params)
         .then(data => {
-          this.$store.dispatch('addChatMessages', { chatId: this.currentChat.id, messages: [data] }).then(() => {
+          this.$store.dispatch('addChatMessages', {
+            chatId: this.currentChat.id,
+            messages: [data],
+            updateMaxId: false
+          }).then(() => {
             this.$nextTick(() => {
               this.handleResize()
               // When the posting form size changes because of a media attachment, we need an extra resize

src/components/chat_panel/chat_panel.vue

@@ -63,7 +63,7 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <i class="icon-comment-empty" />
+          <i class="icon-megaphone" />
           {{ $t('shoutbox.title') }}
         </div>
       </div>

src/components/conversation/conversation.js

@@ -44,7 +44,8 @@ const conversation = {
     'isPage',
     'pinnedStatusIdsObject',
     'inProfile',
-    'profileUserId'
+    'profileUserId',
+    'virtualHidden'
   ],
   created () {
     if (this.isPage) {
@@ -52,6 +53,13 @@ const conversation = {
     }
   },
   computed: {
+    hideStatus () {
+      if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
+        return this.virtualHidden && this.$refs.statusComponent[0].suspendable
+      } else {
+        return this.virtualHidden
+      }
+    },
     status () {
       return this.$store.state.statuses.allStatusesObject[this.statusId]
     },
@@ -102,6 +110,10 @@ const conversation = {
     },
     isExpanded () {
       return this.expanded || this.isPage
+    },
+    hiddenStyle () {
+      const height = (this.status && this.status.virtualHeight) || '120px'
+      return this.virtualHidden ? { height } : {}
     }
   },
   components: {
@@ -121,6 +133,12 @@ const conversation = {
       if (value) {
         this.fetchConversation()
       }
+    },
+    virtualHidden (value) {
+      this.$store.dispatch(
+        'setVirtualHeight',
+        { statusId: this.statusId, height: `${this.$el.clientHeight}px` }
+      )
     }
   },
   methods: {

src/components/conversation/conversation.vue

@@ -1,5 +1,7 @@
 <template>
   <div
+    v-if="!hideStatus"
+    :style="hiddenStyle"
     class="Conversation"
     :class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
   >
@@ -18,6 +20,7 @@
     <status
       v-for="status in conversation"
       :key="status.id"
+      ref="statusComponent"
       :inline-expanded="collapsable && isExpanded"
       :statusoid="status"
       :expandable="!isExpanded"
@@ -33,6 +36,10 @@
       @toggleExpanded="toggleExpanded"
     />
   </div>
+  <div
+    v-else
+    :style="hiddenStyle"
+  />
 </template>
 
 <script src="./conversation.js"></script>
@@ -53,8 +60,8 @@
     .conversation-status {
       border-color: $fallback--border;
       border-color: var(--border, $fallback--border);
-      border-left: 4px solid $fallback--cRed;
+      border-left-color: $fallback--cRed;
-      border-left: 4px solid var(--cRed, $fallback--cRed);
+      border-left-color: var(--cRed, $fallback--cRed);
     }
 
     .conversation-status:last-child {

src/components/emoji_picker/emoji_picker.js

@@ -8,7 +8,10 @@ const LOAD_EMOJI_BY = 60
 const LOAD_EMOJI_MARGIN = 64
 
 const filterByKeyword = (list, keyword = '') => {
-  return list.filter(x => x.displayText.includes(keyword))
+  const keywordLowercase = keyword.toLowerCase()
+  return list.filter(emoji =>
+    emoji.displayText.toLowerCase().includes(keywordLowercase)
+  )
 }
 
 const EmojiPicker = {

src/components/nav_panel/nav_panel.vue

@@ -7,12 +7,12 @@
             :to="{ name: timelinesRoute }"
             :class="onTimelineRoute && 'router-link-active'"
           >
-            <i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }}
+            <i class="button-icon icon-home-2" />{{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
+            <i class="button-icon icon-bell-alt" />{{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li v-if="currentUser && pleromaChatMessagesAvailable">
@@ -23,12 +23,12 @@
             >
               {{ unreadChatCount }}
             </div>
-            <i class="button-icon icon-chat" /> {{ $t("nav.chats") }}
+            <i class="button-icon icon-chat" />{{ $t("nav.chats") }}
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
           <router-link :to="{ name: 'friend-requests' }">
-            <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
+            <i class="button-icon icon-user-plus" />{{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -39,7 +39,7 @@
         </li>
         <li>
           <router-link :to="{ name: 'about' }">
-            <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
+            <i class="button-icon icon-info-circled" />{{ $t("nav.about") }}
           </router-link>
         </li>
       </ul>
@@ -125,6 +125,10 @@
   }
 }
 
+.nav-panel .button-icon {
+  margin-right: 0.5em;
+}
+
 .nav-panel .button-icon:before {
   width: 1.1em;
 }

src/components/react_button/react_button.js

@@ -1,5 +1,4 @@
 import Popover from '../popover/popover.vue'
-import { mapGetters } from 'vuex'
 
 const ReactButton = {
   props: ['status'],
@@ -35,7 +34,9 @@ const ReactButton = {
       }
       return this.$store.state.instance.emoji || []
     },
-    ...mapGetters(['mergedConfig'])
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    }
   }
 }
 

src/components/retweet_button/retweet_button.js

@@ -1,4 +1,3 @@
-import { mapGetters } from 'vuex'
 
 const RetweetButton = {
   props: ['status', 'loggedIn', 'visibility'],
@@ -28,7 +27,9 @@ const RetweetButton = {
         'animate-spin': this.animated
       }
     },
-    ...mapGetters(['mergedConfig'])
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    }
   }
 }
 

src/components/settings_modal/tabs/data_import_export_tab.js

@@ -1,6 +1,7 @@
 import Importer from 'src/components/importer/importer.vue'
 import Exporter from 'src/components/exporter/exporter.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import { mapState } from 'vuex'
 
 const DataImportExportTab = {
   data () {
@@ -18,21 +19,26 @@ const DataImportExportTab = {
     Checkbox
   },
   computed: {
-    user () {
+    ...mapState({
-      return this.$store.state.users.currentUser
+      backendInteractor: (state) => state.api.backendInteractor,
-    }
+      user: (state) => state.users.currentUser
+    })
   },
   methods: {
     getFollowsContent () {
-      return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id })
+      return this.backendInteractor.exportFriends({ id: this.user.id })
         .then(this.generateExportableUsersContent)
     },
     getBlocksContent () {
-      return this.$store.state.api.backendInteractor.fetchBlocks()
+      return this.backendInteractor.fetchBlocks()
+        .then(this.generateExportableUsersContent)
+    },
+    getMutesContent () {
+      return this.backendInteractor.fetchMutes()
         .then(this.generateExportableUsersContent)
     },
     importFollows (file) {
-      return this.$store.state.api.backendInteractor.importFollows({ file })
+      return this.backendInteractor.importFollows({ file })
         .then((status) => {
           if (!status) {
             throw new Error('failed')
@@ -40,7 +46,15 @@ const DataImportExportTab = {
         })
     },
     importBlocks (file) {
-      return this.$store.state.api.backendInteractor.importBlocks({ file })
+      return this.backendInteractor.importBlocks({ file })
+        .then((status) => {
+          if (!status) {
+            throw new Error('failed')
+          }
+        })
+    },
+    importMutes (file) {
+      return this.backendInteractor.importMutes({ file })
         .then((status) => {
           if (!status) {
             throw new Error('failed')

src/components/settings_modal/tabs/data_import_export_tab.vue

@@ -36,6 +36,23 @@
         :export-button-label="$t('settings.block_export_button')"
       />
     </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.mute_import') }}</h2>
+      <p>{{ $t('settings.import_mutes_from_a_csv_file') }}</p>
+      <Importer
+        :submit-handler="importMutes"
+        :success-message="$t('settings.mutes_imported')"
+        :error-message="$t('settings.mute_import_error')"
+      />
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.mute_export') }}</h2>
+      <Exporter
+        :get-content="getMutesContent"
+        filename="mutes.csv"
+        :export-button-label="$t('settings.mute_export_button')"
+      />
+    </div>
   </div>
 </template>
 

src/components/settings_modal/tabs/general_tab.vue

@@ -63,6 +63,11 @@
             {{ $t('settings.emoji_reactions_on_timeline') }}
           </Checkbox>
         </li>
+        <li>
+          <Checkbox v-model="virtualScrolling">
+            {{ $t('settings.virtual_scrolling') }}
+          </Checkbox>
+        </li>
       </ul>
     </div>
 

src/components/side_drawer/side_drawer.vue

@@ -90,7 +90,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'chat' }">
-            <i class="button-icon icon-chat" /> {{ $t("nav.chat") }}
+            <i class="button-icon icon-megaphone" /> {{ $t("shoutbox.title") }}
           </router-link>
         </li>
       </ul>

src/components/status/status.js

@@ -15,7 +15,6 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import { muteWordHits } from '../../services/status_parser/status_parser.js'
 import { unescape, uniqBy } from 'lodash'
-import { mapGetters, mapState } from 'vuex'
 
 const Status = {
   name: 'Status',
@@ -54,6 +53,8 @@ const Status = {
       replying: false,
       unmuted: false,
       userExpanded: false,
+      mediaPlaying: [],
+      suspendable: true,
       error: null
     }
   },
@@ -157,7 +158,7 @@ const Status = {
       return this.mergedConfig.hideFilteredStatuses
     },
     hideStatus () {
-      return this.deleted || (this.muted && this.hideFilteredStatuses)
+      return this.deleted || (this.muted && this.hideFilteredStatuses) || this.virtualHidden
     },
     isFocused () {
       // retweet or root of an expanded conversation
@@ -207,11 +208,18 @@ const Status = {
     hidePostStats () {
       return this.mergedConfig.hidePostStats
     },
-    ...mapGetters(['mergedConfig']),
+    currentUser () {
-    ...mapState({
+      return this.$store.state.users.currentUser
-      betterShadow: state => state.interface.browserSupport.cssFilter,
+    },
-      currentUser: state => state.users.currentUser
+    betterShadow () {
-    })
+      return this.$store.state.interface.browserSupport.cssFilter
+    },
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    },
+    isSuspendable () {
+      return !this.replying && this.mediaPlaying.length === 0
+    }
   },
   methods: {
     visibilityIcon (visibility) {
@@ -251,6 +259,12 @@ const Status = {
     },
     generateUserProfileLink (id, name) {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
+    },
+    addMediaPlaying (id) {
+      this.mediaPlaying.push(id)
+    },
+    removeMediaPlaying (id) {
+      this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id)
     }
   },
   watch: {
@@ -280,6 +294,9 @@ const Status = {
       if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
         this.$store.dispatch('fetchFavs', this.status.id)
       }
+    },
+    'isSuspendable': function (val) {
+      this.suspendable = val
     }
   },
   filters: {

src/components/status/status.scss

@@ -25,6 +25,11 @@ $status-margin: 0.75em;
     --icon: var(--selectedPostIcon, $fallback--icon);
   }
 
+  &.-conversation {
+    border-left-width: 4px;
+    border-left-style: solid;
+  }
+
   .status-container {
     display: flex;
     padding: $status-margin;

src/components/status/status.vue

@@ -16,7 +16,7 @@
       />
     </div>
     <template v-if="muted && !isPreview">
-      <div class="status-csontainer muted">
+      <div class="status-container muted">
         <small class="status-username">
           <i
             v-if="muted && retweet"
@@ -227,6 +227,7 @@
                     </span>
                   </a>
                 </StatusPopover>
+
                 <span
                   v-else
                   class="reply-to-no-popover"
@@ -272,6 +273,8 @@
             :no-heading="noHeading"
             :highlight="highlight"
             :focused="isFocused"
+            @mediaplay="addMediaPlaying($event)"
+            @mediapause="removeMediaPlaying($event)"
           />
 
           <transition name="fade">
@@ -354,6 +357,7 @@
               @onSuccess="clearError"
             />
           </div>
+
         </div>
       </div>
       <div
@@ -376,4 +380,5 @@
 </template>
 
 <script src="./status.js" ></script>
+
 <style src="./status.scss" lang="scss"></style>

src/components/status_content/status_content.vue

@@ -107,6 +107,8 @@
         :attachment="attachment"
         :allow-play="true"
         :set-media="setMedia()"
+        @play="$emit('mediaplay', attachment.id)"
+        @pause="$emit('mediapause', attachment.id)"
       />
       <gallery
         v-if="galleryAttachments.length > 0"

src/components/still-image/still-image.js

@@ -19,14 +19,16 @@ const StillImage = {
   },
   methods: {
     onLoad () {
-      this.imageLoadHandler && this.imageLoadHandler(this.$refs.src)
+      const image = this.$refs.src
+      if (!image) return
+      this.imageLoadHandler && this.imageLoadHandler(image)
       const canvas = this.$refs.canvas
       if (!canvas) return
-      const width = this.$refs.src.naturalWidth
+      const width = image.naturalWidth
-      const height = this.$refs.src.naturalHeight
+      const height = image.naturalHeight
       canvas.width = width
       canvas.height = height
-      canvas.getContext('2d').drawImage(this.$refs.src, 0, 0, width, height)
+      canvas.getContext('2d').drawImage(image, 0, 0, width, height)
     },
     onError () {
       this.imageLoadError && this.imageLoadError()

src/components/timeline/timeline.js

@@ -33,7 +33,8 @@ const Timeline = {
     return {
       paused: false,
       unfocused: false,
-      bottomedOut: false
+      bottomedOut: false,
+      virtualScrollIndex: 0
     }
   },
   components: {
@@ -78,6 +79,16 @@ const Timeline = {
     },
     pinnedStatusIdsObject () {
       return keyBy(this.pinnedStatusIds)
+    },
+    statusesToDisplay () {
+      const amount = this.timeline.visibleStatuses.length
+      const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
+      const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
+      const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
+      return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id)
+    },
+    virtualScrollingEnabled () {
+      return this.$store.getters.mergedConfig.virtualScrolling
     }
   },
   created () {
@@ -85,7 +96,7 @@ const Timeline = {
     const credentials = store.state.users.currentUser.credentials
     const showImmediately = this.timeline.visibleStatuses.length === 0
 
-    window.addEventListener('scroll', this.scrollLoad)
+    window.addEventListener('scroll', this.handleScroll)
 
     if (store.state.api.fetchers[this.timelineName]) { return false }
 
@@ -104,9 +115,10 @@ const Timeline = {
       this.unfocused = document.hidden
     }
     window.addEventListener('keydown', this.handleShortKey)
+    setTimeout(this.determineVisibleStatuses, 250)
   },
   destroyed () {
-    window.removeEventListener('scroll', this.scrollLoad)
+    window.removeEventListener('scroll', this.handleScroll)
     window.removeEventListener('keydown', this.handleShortKey)
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
@@ -146,6 +158,48 @@ const Timeline = {
         }
       })
     }, 1000, this),
+    determineVisibleStatuses () {
+      if (!this.$refs.timeline) return
+      if (!this.virtualScrollingEnabled) return
+
+      const statuses = this.$refs.timeline.children
+      const cappedScrollIndex = Math.max(0, Math.min(this.virtualScrollIndex, statuses.length - 1))
+
+      if (statuses.length === 0) return
+
+      const height = Math.max(document.body.offsetHeight, window.pageYOffset)
+
+      const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5)
+
+      // Start from approximating the index of some visible status by using the
+      // the center of the screen on the timeline.
+      let approxIndex = Math.floor(statuses.length * (centerOfScreen / height))
+      let err = statuses[approxIndex].getBoundingClientRect().y
+
+      // if we have a previous scroll index that can be used, test if it's
+      // closer than the previous approximation, use it if so
+
+      const virtualScrollIndexY = statuses[cappedScrollIndex].getBoundingClientRect().y
+      if (Math.abs(err) > virtualScrollIndexY) {
+        approxIndex = cappedScrollIndex
+        err = virtualScrollIndexY
+      }
+
+      // if the status is too far from viewport, check the next/previous ones if
+      // they happen to be better
+      while (err < -20 && approxIndex < statuses.length - 1) {
+        err += statuses[approxIndex].offsetHeight
+        approxIndex++
+      }
+      while (err > window.innerHeight + 100 && approxIndex > 0) {
+        approxIndex--
+        err -= statuses[approxIndex].offsetHeight
+      }
+
+      // this status is now the center point for virtual scrolling and visible
+      // statuses will be nearby statuses before and after it
+      this.virtualScrollIndex = approxIndex
+    },
     scrollLoad (e) {
       const bodyBRect = document.body.getBoundingClientRect()
       const height = Math.max(bodyBRect.height, -(bodyBRect.y))
@@ -155,6 +209,10 @@ const Timeline = {
         this.fetchOlderStatuses()
       }
     },
+    handleScroll: throttle(function (e) {
+      this.determineVisibleStatuses()
+      this.scrollLoad(e)
+    }, 200),
     handleVisibilityChange () {
       this.unfocused = document.hidden
     }

src/components/timeline/timeline.vue

@@ -32,7 +32,10 @@
       </div>
     </div>
     <div :class="classes.body">
-      <div class="timeline">
+      <div
+        ref="timeline"
+        class="timeline"
+      >
         <template v-for="statusId in pinnedStatusIds">
           <conversation
             v-if="timeline.statusesObject[statusId]"
@@ -54,6 +57,7 @@
             :collapsable="true"
             :in-profile="inProfile"
             :profile-user-id="userId"
+            :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
           />
         </template>
       </div>

src/components/timeline_menu/timeline_menu.vue

@@ -138,15 +138,11 @@
     &:last-child {
       border: none;
     }
-
-    i {
-      margin: 0 0.5em;
-    }
   }
 
   a {
     display: block;
-    padding: 0.6em 0;
+    padding: 0.6em 0.65em;
 
     &:hover {
       background-color: $fallback--lightBg;
@@ -174,6 +170,10 @@
         text-decoration: underline;
       }
     }
+
+    i {
+      margin-right: 0.5em;
+    }
   }
 }
 

src/components/user_profile/user_profile.vue

@@ -156,8 +156,7 @@
 
     .user-profile-field {
       display: flex;
-      margin: 0.25em auto;
+      margin: 0.25em;
-      max-width: 32em;
       border: 1px solid var(--border, $fallback--border);
       border-radius: $fallback--inputRadius;
       border-radius: var(--inputRadius, $fallback--inputRadius);

src/components/video_attachment/video_attachment.js

@@ -3,27 +3,48 @@ const VideoAttachment = {
   props: ['attachment', 'controls'],
   data () {
     return {
-      loopVideo: this.$store.getters.mergedConfig.loopVideo
+      blocksSuspend: false,
+      // Start from true because removing "loop" property seems buggy in Vue
+      hasAudio: true
+    }
+  },
+  computed: {
+    loopVideo () {
+      if (this.$store.getters.mergedConfig.loopVideoSilentOnly) {
+        return !this.hasAudio
+      }
+      return this.$store.getters.mergedConfig.loopVideo
     }
   },
   methods: {
-    onVideoDataLoad (e) {
+    onPlaying (e) {
+      this.setHasAudio(e)
+      if (this.loopVideo) {
+        this.$emit('play', { looping: true })
+        return
+      }
+      this.$emit('play')
+    },
+    onPaused (e) {
+      this.$emit('pause')
+    },
+    setHasAudio (e) {
       const target = e.srcElement || e.target
+      // If hasAudio is false, we've already marked this video to not have audio,
+      // a video can't gain audio out of nowhere so don't bother checking again.
+      if (!this.hasAudio) return
       if (typeof target.webkitAudioDecodedByteCount !== 'undefined') {
         // non-zero if video has audio track
-        if (target.webkitAudioDecodedByteCount > 0) {
+        if (target.webkitAudioDecodedByteCount > 0) return
-          this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
       }
-      } else if (typeof target.mozHasAudio !== 'undefined') {
+      if (typeof target.mozHasAudio !== 'undefined') {
         // true if video has audio track
-        if (target.mozHasAudio) {
+        if (target.mozHasAudio) return
-          this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
-        }
-      } else if (typeof target.audioTracks !== 'undefined') {
-        if (target.audioTracks.length > 0) {
-          this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
       }
+      if (typeof target.audioTracks !== 'undefined') {
+        if (target.audioTracks.length > 0) return
       }
+      this.hasAudio = false
     }
   }
 }

src/components/video_attachment/video_attachment.vue

@@ -7,7 +7,8 @@
     :alt="attachment.description"
     :title="attachment.description"
     playsinline
-    @loadeddata="onVideoDataLoad"
+    @playing="onPlaying"
+    @pause="onPaused"
   />
 </template>
 

src/i18n/en.json

@@ -113,7 +113,6 @@
     "about": "About",
     "administration": "Administration",
     "back": "Back",
-    "chat": "Local Chat",
     "friend_requests": "Follow Requests",
     "mentions": "Mentions",
     "interactions": "Interactions",
@@ -276,6 +275,12 @@
     "block_import": "Block import",
     "block_import_error": "Error importing blocks",
     "blocks_imported": "Blocks imported! Processing them will take a while.",
+    "mute_export": "Mute export",
+    "mute_export_button": "Export your mutes to a csv file",
+    "mute_import": "Mute import",
+    "mute_import_error": "Error importing mutes",
+    "mutes_imported": "Mutes imported! Processing them will take a while.",
+    "import_mutes_from_a_csv_file": "Import mutes from a csv file",
     "blocks_tab": "Blocks",
     "bot": "This is a bot account",
     "btnRadius": "Buttons",
@@ -431,6 +436,7 @@
       "false": "no",
       "true": "yes"
     },
+    "virtual_scrolling": "Optimize timeline rendering",
     "fun": "Fun",
     "greentext": "Meme arrows",
     "notifications": "Notifications",

src/modules/api.js

@@ -20,7 +20,7 @@ const api = {
       state.fetchers[fetcherName] = fetcher
     },
     removeFetcher (state, { fetcherName, fetcher }) {
-      window.clearInterval(fetcher)
+      state.fetchers[fetcherName].stop()
       delete state.fetchers[fetcherName]
     },
     setWsToken (state, token) {

src/modules/chats.js

@@ -3,6 +3,7 @@ import { find, omitBy, orderBy, sumBy } from 'lodash'
 import chatService from '../services/chat_service/chat_service.js'
 import { parseChat, parseChatMessage } from '../services/entity_normalizer/entity_normalizer.service.js'
 import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'
+import { promiseInterval } from '../services/promise_interval/promise_interval.js'
 
 const emptyChatList = () => ({
   data: [],
@@ -42,12 +43,10 @@ const chats = {
   actions: {
     // Chat list
     startFetchingChats ({ dispatch, commit }) {
-      const fetcher = () => {
+      const fetcher = () => dispatch('fetchChats', { latest: true })
-        dispatch('fetchChats', { latest: true })
-      }
       fetcher()
       commit('setChatListFetcher', {
-        fetcher: () => setInterval(() => { fetcher() }, 5000)
+        fetcher: () => promiseInterval(fetcher, 5000)
       })
     },
     stopFetchingChats ({ commit }) {
@@ -113,14 +112,14 @@ const chats = {
     setChatListFetcher (state, { commit, fetcher }) {
       const prevFetcher = state.chatListFetcher
       if (prevFetcher) {
-        clearInterval(prevFetcher)
+        prevFetcher.stop()
       }
       state.chatListFetcher = fetcher && fetcher()
     },
     setCurrentChatFetcher (state, { fetcher }) {
       const prevFetcher = state.fetcher
       if (prevFetcher) {
-        clearInterval(prevFetcher)
+        prevFetcher.stop()
       }
       state.fetcher = fetcher && fetcher()
     },
@@ -143,6 +142,7 @@ const chats = {
           const isNewMessage = (chat.lastMessage && chat.lastMessage.id) !== (updatedChat.lastMessage && updatedChat.lastMessage.id)
           chat.lastMessage = updatedChat.lastMessage
           chat.unread = updatedChat.unread
+          chat.updated_at = updatedChat.updated_at
           if (isNewMessage && chat.unread) {
             newChatMessageSideEffects(updatedChat)
           }
@@ -181,30 +181,16 @@ const chats = {
     setChatsLoading (state, { value }) {
       state.chats.loading = value
     },
-    addChatMessages (state, { commit, chatId, messages }) {
+    addChatMessages (state, { chatId, messages, updateMaxId }) {
       const chatMessageService = state.openedChatMessageServices[chatId]
       if (chatMessageService) {
-        chatService.add(chatMessageService, { messages: messages.map(parseChatMessage) })
+        chatService.add(chatMessageService, { messages: messages.map(parseChatMessage), updateMaxId })
-        commit('refreshLastMessage', { chatId })
       }
     },
-    refreshLastMessage (state, { chatId }) {
+    deleteChatMessage (state, { chatId, messageId }) {
-      const chatMessageService = state.openedChatMessageServices[chatId]
-      if (chatMessageService) {
-        const chat = getChatById(state, chatId)
-        if (chat) {
-          chat.lastMessage = chatMessageService.lastMessage
-          if (chatMessageService.lastMessage) {
-            chat.updated_at = chatMessageService.lastMessage.created_at
-          }
-        }
-      }
-    },
-    deleteChatMessage (state, { commit, chatId, messageId }) {
       const chatMessageService = state.openedChatMessageServices[chatId]
       if (chatMessageService) {
         chatService.deleteMessage(chatMessageService, messageId)
-        commit('refreshLastMessage', { chatId })
       }
     },
     resetChatNewMessageCount (state, _value) {

src/modules/config.js

@@ -66,7 +66,8 @@ export const defaultState = {
   useContainFit: false,
   greentext: undefined, // instance default
   hidePostStats: undefined, // instance default
-  hideUserStats: undefined // instance default
+  hideUserStats: undefined, // instance default
+  virtualScrolling: undefined // instance default
 }
 
 // caching the instance default properties

src/modules/instance.js

@@ -41,6 +41,7 @@ const defaultState = {
   sidebarRight: false,
   subjectLineBehavior: 'email',
   theme: 'pleroma-dark',
+  virtualScrolling: true,
 
   // Nasty stuff
   customEmoji: [],

src/modules/statuses.js

@@ -568,6 +568,9 @@ export const mutations = {
   updateStatusWithPoll (state, { id, poll }) {
     const status = state.allStatusesObject[id]
     status.poll = poll
+  },
+  setVirtualHeight (state, { statusId, height }) {
+    state.allStatusesObject[statusId].virtualHeight = height
   }
 }
 
@@ -761,6 +764,9 @@ const statuses = {
           store.commit('addNewStatuses', { statuses: data.statuses })
           return data
         })
+    },
+    setVirtualHeight ({ commit }, { statusId, height }) {
+      commit('setVirtualHeight', { statusId, height })
     }
   },
   mutations

src/services/api/api.service.js

@@ -3,6 +3,7 @@ import { parseStatus, parseUser, parseNotification, parseAttachment, parseChat,
 import { RegistrationError, StatusCodeError } from '../errors/errors'
 
 /* eslint-env browser */
+const MUTES_IMPORT_URL = '/api/pleroma/mutes_import'
 const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import'
 const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
 const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
@@ -539,8 +540,10 @@ const fetchTimeline = ({
 
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
   url += `?${queryString}`
+
   let status = ''
   let statusText = ''
+
   let pagination = {}
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => {
@@ -710,6 +713,17 @@ const setMediaDescription = ({ id, description, credentials }) => {
   }).then((data) => parseAttachment(data))
 }
 
+const importMutes = ({ file, credentials }) => {
+  const formData = new FormData()
+  formData.append('list', file)
+  return fetch(MUTES_IMPORT_URL, {
+    body: formData,
+    method: 'POST',
+    headers: authHeaders(credentials)
+  })
+    .then((response) => response.ok)
+}
+
 const importBlocks = ({ file, credentials }) => {
   const formData = new FormData()
   formData.append('list', file)
@@ -1280,6 +1294,7 @@ const apiService = {
   getCaptcha,
   updateProfileImages,
   updateProfile,
+  importMutes,
   importBlocks,
   importFollows,
   deleteAccount,

src/services/chat_service/chat_service.js

@@ -8,7 +8,7 @@ const empty = (chatId) => {
     lastSeenTimestamp: 0,
     chatId: chatId,
     minId: undefined,
-    lastMessage: undefined
+    maxId: undefined
   }
 }
 
@@ -18,7 +18,7 @@ const clear = (storage) => {
   storage.newMessageCount = 0
   storage.lastSeenTimestamp = 0
   storage.minId = undefined
-  storage.lastMessage = undefined
+  storage.maxId = undefined
 }
 
 const deleteMessage = (storage, messageId) => {
@@ -26,8 +26,9 @@ const deleteMessage = (storage, messageId) => {
   storage.messages = storage.messages.filter(m => m.id !== messageId)
   delete storage.idIndex[messageId]
 
-  if (storage.lastMessage && (storage.lastMessage.id === messageId)) {
+  if (storage.maxId === messageId) {
-    storage.lastMessage = _.maxBy(storage.messages, 'id')
+    const lastMessage = _.maxBy(storage.messages, 'id')
+    storage.maxId = lastMessage.id
   }
 
   if (storage.minId === messageId) {
@@ -36,7 +37,7 @@ const deleteMessage = (storage, messageId) => {
   }
 }
 
-const add = (storage, { messages: newMessages }) => {
+const add = (storage, { messages: newMessages, updateMaxId = true }) => {
   if (!storage) { return }
   for (let i = 0; i < newMessages.length; i++) {
     const message = newMessages[i]
@@ -48,8 +49,10 @@ const add = (storage, { messages: newMessages }) => {
       storage.minId = message.id
     }
 
-    if (!storage.lastMessage || message.id > storage.lastMessage.id) {
+    if (!storage.maxId || message.id > storage.maxId) {
-      storage.lastMessage = message
+      if (updateMaxId) {
+        storage.maxId = message.id
+      }
     }
 
     if (!storage.idIndex[message.id]) {

src/services/follow_request_fetcher/follow_request_fetcher.service.js

@@ -1,4 +1,5 @@
 import apiService from '../api/api.service.js'
+import { promiseInterval } from '../promise_interval/promise_interval.js'
 
 const fetchAndUpdate = ({ store, credentials }) => {
   return apiService.fetchFollowRequests({ credentials })
@@ -10,9 +11,9 @@ const fetchAndUpdate = ({ store, credentials }) => {
 }
 
 const startFetching = ({ credentials, store }) => {
-  fetchAndUpdate({ credentials, store })
   const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
-  return setInterval(boundFetchAndUpdate, 10000)
+  boundFetchAndUpdate()
+  return promiseInterval(boundFetchAndUpdate, 10000)
 }
 
 const followRequestFetcher = {

src/services/notifications_fetcher/notifications_fetcher.service.js

@@ -1,4 +1,5 @@
 import apiService from '../api/api.service.js'
+import { promiseInterval } from '../promise_interval/promise_interval.js'
 
 const update = ({ store, notifications, older }) => {
   store.dispatch('setNotificationsError', { value: false })
@@ -39,6 +40,7 @@ const fetchAndUpdate = ({ store, credentials, older = false }) => {
       args['since'] = Math.max(...readNotifsIds)
       fetchNotifications({ store, args, older })
     }
+
     return result
   }
 }
@@ -53,13 +55,13 @@ const fetchNotifications = ({ store, args, older }) => {
 }
 
 const startFetching = ({ credentials, store }) => {
-  fetchAndUpdate({ credentials, store })
-  const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
   // Initially there's set flag to silence all desktop notifications so
   // that there won't spam of them when user just opened up the FE we
   // reset that flag after a while to show new notifications once again.
   setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000)
-  return setInterval(boundFetchAndUpdate, 10000)
+  const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
+  boundFetchAndUpdate()
+  return promiseInterval(boundFetchAndUpdate, 10000)
 }
 
 const notificationsFetcher = {

src/services/promise_interval/promise_interval.js

@@ -0,0 +1,27 @@
+
+// promiseInterval - replacement for setInterval for promises, starts counting
+// the interval only after a promise is done instead of immediately.
+// - promiseCall is a function that returns a promise, it's called the first
+// time after the first interval.
+// - interval is the interval delay in ms.
+
+export const promiseInterval = (promiseCall, interval) => {
+  let stopped = false
+  let timeout = null
+
+  const func = () => {
+    promiseCall().finally(() => {
+      if (stopped) return
+      timeout = window.setTimeout(func, interval)
+    })
+  }
+
+  const stopFetcher = () => {
+    stopped = true
+    window.clearTimeout(timeout)
+  }
+
+  timeout = window.setTimeout(func, interval)
+
+  return { stop: stopFetcher }
+}

src/services/timeline_fetcher/timeline_fetcher.service.js

@@ -1,6 +1,7 @@
 import { camelCase } from 'lodash'
 
 import apiService from '../api/api.service.js'
+import { promiseInterval } from '../promise_interval/promise_interval.js'
 
 const update = ({ store, statuses, timeline, showImmediately, userId, pagination }) => {
   const ccTimeline = camelCase(timeline)
@@ -71,8 +72,9 @@ const startFetching = ({ timeline = 'friends', credentials, store, userId = fals
   const showImmediately = timelineData.visibleStatuses.length === 0
   timelineData.userId = userId
   fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag })
-  const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
+  const boundFetchAndUpdate = () =>
-  return setInterval(boundFetchAndUpdate, 10000)
+    fetchAndUpdate({ timeline, credentials, store, userId, tag })
+  return promiseInterval(boundFetchAndUpdate, 10000)
 }
 const timelineFetcher = {
   fetchAndUpdate,

static/fontello.json

@@ -405,6 +405,12 @@
       "css": "block",
       "code": 59434,
       "src": "fontawesome"
+    },
+    {
+      "uid": "3e674995cacc2b09692c096ea7eb6165",
+      "css": "megaphone",
+      "code": 59435,
+      "src": "fontawesome"
     }
   ]
 }

test/unit/specs/services/chat_service/chat_service.spec.js

@@ -33,12 +33,12 @@ describe('chatService', () => {
       const chat = chatService.empty()
 
       chatService.add(chat, { messages: [ message1 ] })
-      expect(chat.lastMessage.id).to.eql(message1.id)
+      expect(chat.maxId).to.eql(message1.id)
       expect(chat.minId).to.eql(message1.id)
       expect(chat.newMessageCount).to.eql(1)
 
       chatService.add(chat, { messages: [ message2 ] })
-      expect(chat.lastMessage.id).to.eql(message2.id)
+      expect(chat.maxId).to.eql(message2.id)
       expect(chat.minId).to.eql(message1.id)
       expect(chat.newMessageCount).to.eql(2)
 
@@ -60,15 +60,15 @@ describe('chatService', () => {
       chatService.add(chat, { messages: [ message2 ] })
       chatService.add(chat, { messages: [ message3 ] })
 
-      expect(chat.lastMessage.id).to.eql(message3.id)
+      expect(chat.maxId).to.eql(message3.id)
       expect(chat.minId).to.eql(message1.id)
 
       chatService.deleteMessage(chat, message3.id)
-      expect(chat.lastMessage.id).to.eql(message2.id)
+      expect(chat.maxId).to.eql(message2.id)
       expect(chat.minId).to.eql(message1.id)
 
       chatService.deleteMessage(chat, message1.id)
-      expect(chat.lastMessage.id).to.eql(message2.id)
+      expect(chat.maxId).to.eql(message2.id)
       expect(chat.minId).to.eql(message2.id)
     })
   })