Merge branch 'develop' into 'feat/masto-ws-deletes'

# Conflicts: # CHANGELOG.md # src/components/status/status.js # src/components/status/status.scss
2020-10-01 12:54:54 +00:00 · 2020-10-01 12:54:54 +00:00 · 8a34ff2957
commit 8a34ff2957
parent fa91766519 68c2a5b18f
41 changed files with 568 additions and 143 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,11 +4,19 @@ 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
 - Proper handling of deletes when using websocket streaming

+## [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.

@ -16,6 +24,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - 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
--- a/src/App.scss
+++ b/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 {
--- a/src/components/attachment/attachment.vue
+++ b/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
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@ -204,9 +204,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,7 +244,7 @@ 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 })
        .then((messages) => {
@ -303,7 +303,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
--- a/src/components/chat_panel/chat_panel.vue
+++ b/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>
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@ -39,13 +39,16 @@
 export default {
  props: {
    large: {
-      required: false
+      required: false,
+      type: Boolean,
+      default: false
    },
    // TODO: Make theme switcher compute theme initially so that contrast
    // component won't be called without contrast data
    contrast: {
      required: false,
-      type: Object
+      type: Object,
+      default: () => ({})
    }
  },
  computed: {
--- a/src/components/conversation/conversation.js
+++ b/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: {
--- a/src/components/conversation/conversation.vue
+++ b/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: 4px solid var(--cRed, $fallback--cRed);
+      border-left-color: $fallback--cRed;
+      border-left-color: var(--cRed, $fallback--cRed);
    }

    .conversation-status:last-child {
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/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 = {
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -125,6 +125,10 @@
  }
 }

+.nav-panel .button-icon {
+  margin-right: 0.5em;
+}
+
 .nav-panel .button-icon:before {
  width: 1.1em;
 }
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@ -17,6 +17,7 @@
          <span class="result-percentage">
            {{ percentageForOption(option.votes_count) }}%
          </span>
+          <!-- eslint-disable-next-line vue/no-v-html -->
          <span v-html="option.title_html" />
        </div>
        <div
--- a/src/components/react_button/react_button.js
+++ b/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
+    }
  }
 }

--- a/src/components/retweet_button/retweet_button.js
+++ b/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
+    }
  }
 }

--- a/src/components/settings_modal/tabs/data_import_export_tab.js
+++ b/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 () {
-      return this.$store.state.users.currentUser
-    }
+    ...mapState({
+      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')
--- a/src/components/settings_modal/tabs/data_import_export_tab.vue
+++ b/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>

--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -58,6 +58,11 @@
            {{ $t('settings.emoji_reactions_on_timeline') }}
          </Checkbox>
        </li>
+        <li>
+          <Checkbox v-model="virtualScrolling">
+            {{ $t('settings.virtual_scrolling') }}
+          </Checkbox>
+        </li>
      </ul>
    </div>

--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@ -278,7 +278,7 @@
            />
            <ContrastRatio
              :contrast="previewContrast.alertErrorText"
-              large="true"
+              large
            />
            <ColorInput
              v-model="alertWarningColorLocal"
@ -294,7 +294,7 @@
            />
            <ContrastRatio
              :contrast="previewContrast.alertWarningText"
-              large="true"
+              large
            />
            <ColorInput
              v-model="alertNeutralColorLocal"
@ -310,7 +310,7 @@
            />
            <ContrastRatio
              :contrast="previewContrast.alertNeutralText"
-              large="true"
+              large
            />
            <OpacityInput
              v-model="alertOpacityLocal"
@ -334,7 +334,7 @@
            />
            <ContrastRatio
              :contrast="previewContrast.badgeNotificationText"
-              large="true"
+              large
            />
          </div>
          <div class="color-item">
@ -359,7 +359,7 @@
            />
            <ContrastRatio
              :contrast="previewContrast.panelText"
-              large="true"
+              large
            />
            <ColorInput
              v-model="panelLinkColorLocal"
@ -369,7 +369,7 @@
            />
            <ContrastRatio
              :contrast="previewContrast.panelLink"
-              large="true"
+              large
            />
          </div>
          <div class="color-item">
@ -740,57 +740,57 @@
            <ColorInput
              v-model="chatBgColorLocal"
              name="chatBgColor"
-              :fallback="previewTheme.colors.bg || 1"
+              :fallback="previewTheme.colors.bg"
              :label="$t('settings.background')"
            />
            <h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
            <ColorInput
              v-model="chatMessageIncomingBgColorLocal"
              name="chatMessageIncomingBgColor"
-              :fallback="previewTheme.colors.bg || 1"
+              :fallback="previewTheme.colors.bg"
              :label="$t('settings.background')"
            />
            <ColorInput
              v-model="chatMessageIncomingTextColorLocal"
              name="chatMessageIncomingTextColor"
-              :fallback="previewTheme.colors.text || 1"
+              :fallback="previewTheme.colors.text"
              :label="$t('settings.text')"
            />
            <ColorInput
              v-model="chatMessageIncomingLinkColorLocal"
              name="chatMessageIncomingLinkColor"
-              :fallback="previewTheme.colors.link || 1"
+              :fallback="previewTheme.colors.link"
              :label="$t('settings.links')"
            />
            <ColorInput
              v-model="chatMessageIncomingBorderColorLocal"
              name="chatMessageIncomingBorderLinkColor"
-              :fallback="previewTheme.colors.fg || 1"
+              :fallback="previewTheme.colors.fg"
              :label="$t('settings.style.advanced_colors.chat.border')"
            />
            <h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
            <ColorInput
              v-model="chatMessageOutgoingBgColorLocal"
              name="chatMessageOutgoingBgColor"
-              :fallback="previewTheme.colors.bg || 1"
+              :fallback="previewTheme.colors.bg"
              :label="$t('settings.background')"
            />
            <ColorInput
              v-model="chatMessageOutgoingTextColorLocal"
              name="chatMessageOutgoingTextColor"
-              :fallback="previewTheme.colors.text || 1"
+              :fallback="previewTheme.colors.text"
              :label="$t('settings.text')"
            />
            <ColorInput
              v-model="chatMessageOutgoingLinkColorLocal"
              name="chatMessageOutgoingLinkColor"
-              :fallback="previewTheme.colors.link || 1"
+              :fallback="previewTheme.colors.link"
              :label="$t('settings.links')"
            />
            <ColorInput
              v-model="chatMessageOutgoingBorderColorLocal"
              name="chatMessageOutgoingBorderLinkColor"
-              :fallback="previewTheme.colors.bg || 1"
+              :fallback="previewTheme.colors.bg"
              :label="$t('settings.style.advanced_colors.chat.border')"
            />
          </div>
--- a/src/components/side_drawer/side_drawer.vue
+++ b/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>
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@ -16,7 +16,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',
@ -56,6 +55,8 @@ const Status = {
      replying: false,
      unmuted: false,
      userExpanded: false,
+      mediaPlaying: [],
+      suspendable: true,
      error: null
    }
  },
@ -159,7 +160,7 @@ const Status = {
      return this.mergedConfig.hideFilteredStatuses
    },
    hideStatus () {
-      return (this.muted && this.hideFilteredStatuses)
+      return (this.muted && this.hideFilteredStatuses) || this.virtualHidden
    },
    isFocused () {
      // retweet or root of an expanded conversation
@ -209,11 +210,18 @@ const Status = {
    hidePostStats () {
      return this.mergedConfig.hidePostStats
    },
-    ...mapGetters(['mergedConfig']),
-    ...mapState({
-      betterShadow: state => state.interface.browserSupport.cssFilter,
-      currentUser: state => state.users.currentUser
-    })
+    currentUser () {
+      return this.$store.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) {
@ -253,6 +261,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: {
@ -282,6 +296,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: {
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@ -37,6 +37,11 @@ $status-margin: 0.75em;
    }
  }
  
+  &.-conversation {
+    border-left-width: 4px;
+    border-left-style: solid;
+  }
+
  .status-container {
    display: flex;
    padding: $status-margin;
--- a/src/components/status/status.vue
+++ b/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"
@ -228,6 +228,7 @@
                    </span>
                  </a>
                </StatusPopover>
+
                <span
                  v-else
                  class="reply-to-no-popover"
@ -273,6 +274,8 @@
            :no-heading="noHeading"
            :highlight="highlight"
            :focused="isFocused"
+            @mediaplay="addMediaPlaying($event)"
+            @mediapause="removeMediaPlaying($event)"
          />

          <transition name="fade">
@ -345,6 +348,7 @@
              @onSuccess="clearError"
            />
          </div>
+
        </div>
      </div>
      <div
@ -386,4 +390,5 @@
 </template>

 <script src="./status.js" ></script>
+
 <style src="./status.scss" lang="scss"></style>
--- a/src/components/status_content/status_content.vue
+++ b/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"
--- a/src/components/still-image/still-image.js
+++ b/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 height = this.$refs.src.naturalHeight
+      const width = image.naturalWidth
+      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()
--- a/src/components/timeline/timeline.js
+++ b/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
    }
--- a/src/components/timeline/timeline.vue
+++ b/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>
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/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;
+    }
  }
 }

--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@ -156,8 +156,7 @@

    .user-profile-field {
      display: flex;
-      margin: 0.25em auto;
-      max-width: 32em;
+      margin: 0.25em;
      border: 1px solid var(--border, $fallback--border);
      border-radius: $fallback--inputRadius;
      border-radius: var(--inputRadius, $fallback--inputRadius);
--- a/src/components/video_attachment/video_attachment.js
+++ b/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) {
-          this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
+        if (target.webkitAudioDecodedByteCount > 0) return
      }
-      } else if (typeof target.mozHasAudio !== 'undefined') {
+      if (typeof target.mozHasAudio !== 'undefined') {
        // true if video has audio track
-        if (target.mozHasAudio) {
-          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 (target.mozHasAudio) return
      }
+      if (typeof target.audioTracks !== 'undefined') {
+        if (target.audioTracks.length > 0) return
      }
+      this.hasAudio = false
    }
  }
 }
--- a/src/components/video_attachment/video_attachment.vue
+++ b/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>

--- a/src/i18n/en.json
+++ b/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",
@ -430,6 +435,7 @@
      "false": "no",
      "true": "yes"
    },
+    "virtual_scrolling": "Optimize timeline rendering",
    "fun": "Fun",
    "greentext": "Meme arrows",
    "notifications": "Notifications",
--- a/src/i18n/es.json
+++ b/src/i18n/es.json
@ -13,7 +13,8 @@
    "scope_options": "Opciones del alcance de la visibilidad",
    "text_limit": "Límite de caracteres",
    "title": "Características",
-    "who_to_follow": "A quién seguir"
+    "who_to_follow": "A quién seguir",
+    "pleroma_chat_messages": "Chat de Pleroma"
  },
  "finder": {
    "error_fetching_user": "Error al buscar usuario",
@ -31,7 +32,13 @@
    "disable": "Inhabilitar",
    "enable": "Habilitar",
    "confirm": "Confirmar",
-    "verify": "Verificar"
+    "verify": "Verificar",
+    "peek": "Ojear",
+    "close": "Cerrar",
+    "dismiss": "Descartar",
+    "retry": "Inténtalo de nuevo",
+    "error_retry": "Por favor, inténtalo de nuevo",
+    "loading": "Cargando…"
  },
  "image_cropper": {
    "crop_picture": "Recortar la foto",
@ -41,7 +48,7 @@
  },
  "importer": {
    "submit": "Enviar",
-    "success": "Importado con éxito",
+    "success": "Importado con éxito.",
    "error": "Se ha producido un error al importar el archivo."
  },
  "login": {
@ -77,21 +84,27 @@
    "dms": "Mensajes Directos",
    "public_tl": "Línea Temporal Pública",
    "timeline": "Línea Temporal",
-    "twkn": "Toda La Red Conocida",
+    "twkn": "Red Conocida",
    "user_search": "Búsqueda de Usuarios",
    "search": "Buscar",
    "who_to_follow": "A quién seguir",
-    "preferences": "Preferencias"
+    "preferences": "Preferencias",
+    "chats": "Chats",
+    "timelines": "Líneas de Tiempo",
+    "bookmarks": "Marcadores"
  },
  "notifications": {
-    "broken_favorite": "Estado desconocido, buscándolo...",
+    "broken_favorite": "Estado desconocido, buscándolo…",
    "favorited_you": "le gusta tu estado",
    "followed_you": "empezó a seguirte",
    "load_older": "Cargar notificaciones antiguas",
    "notifications": "Notificaciones",
    "read": "¡Leído!",
    "repeated_you": "repitió tu estado",
-    "no_more_notifications": "No hay más notificaciones"
+    "no_more_notifications": "No hay más notificaciones",
+    "reacted_with": "reaccionó con {0}",
+    "migrated_to": "migrado a",
+    "follow_request": "quiere seguirte"
  },
  "polls": {
    "add_poll": "Añadir encuesta",
@ -114,7 +127,9 @@
    "search_emoji": "Buscar un emoji",
    "add_emoji": "Insertar un emoji",
    "custom": "Emojis personalizados",
-    "unicode": "Emojis unicode"
+    "unicode": "Emojis unicode",
+    "load_all": "Cargando todos los {emojiAmount} emoji",
+    "load_all_hint": "Cargado el primer emoji {saneAmount}, cargar todos los emoji puede causar problemas de rendimiento."
  },
  "stickers": {
    "add_sticker": "Añadir Pegatina"
@ -122,7 +137,8 @@
  "interactions": {
    "favs_repeats": "Favoritos y Repetidos",
    "follows": "Nuevos seguidores",
-    "load_older": "Cargar interacciones más antiguas"
+    "load_older": "Cargar interacciones más antiguas",
+    "moves": "Usuario Migrado"
  },
  "post_status": {
    "new_status": "Publicar un nuevo estado",
@ -142,7 +158,7 @@
    "posting": "Publicando",
    "scope_notice": {
      "public": "Esta publicación será visible para todo el mundo",
-      "private": "Esta publicación solo será visible para tus seguidores.",
+      "private": "Esta publicación solo será visible para tus seguidores",
      "unlisted": "Esta publicación no será visible en la Línea Temporal Pública ni en Toda La Red Conocida"
    },
    "scope": {
@ -150,7 +166,12 @@
      "private": "Solo-seguidores - Solo tus seguidores leerán la publicación",
      "public": "Público - Entradas visibles en las Líneas Temporales Públicas",
      "unlisted": "Sin listar - Entradas no visibles en las Líneas Temporales Públicas"
-    }
+    },
+    "media_description_error": "Error al actualizar el archivo, inténtalo de nuevo",
+    "empty_status_error": "No se puede publicar un estado vacío y sin archivos adjuntos",
+    "preview_empty": "Vacío",
+    "preview": "Vista previa",
+    "media_description": "Descripción multimedia"
  },
  "registration": {
    "bio": "Biografía",
@ -189,7 +210,7 @@
      "generate_new_recovery_codes": "Generar códigos de recuperación nuevos",
      "warning_of_generate_new_codes": "Cuando generas nuevos códigos de recuperación, los antiguos dejarán de funcionar.",
      "recovery_codes": "Códigos de recuperación.",
-      "waiting_a_recovery_codes": "Recibiendo códigos de respaldo",
+      "waiting_a_recovery_codes": "Recibiendo códigos de respaldo…",
      "recovery_codes_warning": "Anote los códigos o guárdelos en un lugar seguro, de lo contrario no los volverá a ver. Si pierde el acceso a su aplicación 2FA y los códigos de recuperación, su cuenta quedará bloqueada.",
      "authentication_methods": "Métodos de autentificación",
      "scan": {
@ -232,7 +253,7 @@
    "default_vis": "Alcance de visibilidad por defecto",
    "delete_account": "Eliminar la cuenta",
    "discoverable": "Permitir la aparición de esta cuenta en los resultados de búsqueda y otros servicios",
-    "delete_account_description": "Eliminar para siempre la cuenta y todos los mensajes.",
+    "delete_account_description": "Eliminar para siempre los datos y desactivar la cuenta.",
    "pad_emoji": "Rellenar con espacios al agregar emojis desde el selector",
    "delete_account_error": "Hubo un error al eliminar tu cuenta. Si el fallo persiste, ponte en contacto con el administrador de tu instancia.",
    "delete_account_instructions": "Escribe tu contraseña para confirmar la eliminación de tu cuenta.",
@ -253,7 +274,7 @@
    "max_thumbnails": "Cantidad máxima de miniaturas por publicación",
    "hide_isp": "Ocultar el panel específico de la instancia",
    "preload_images": "Precargar las imágenes",
-    "use_one_click_nsfw": "Abrir los adjuntos NSFW con un solo click.",
+    "use_one_click_nsfw": "Abrir los adjuntos NSFW con un solo click",
    "hide_post_stats": "Ocultar las estadísticas de las entradas (p.ej. el número de favoritos)",
    "hide_user_stats": "Ocultar las estadísticas del usuario (p.ej. el número de seguidores)",
    "hide_filtered_statuses": "Ocultar estados filtrados",
@ -299,7 +320,7 @@
    "valid_until": "Válido hasta",
    "revoke_token": "Revocar",
    "panelRadius": "Paneles",
-    "pause_on_unfocused": "Parar la transmisión cuando no estés en foco.",
+    "pause_on_unfocused": "Parar la transmisión cuando no estés en foco",
    "presets": "Por defecto",
    "profile_background": "Fondo del Perfil",
    "profile_banner": "Cabecera del Perfil",
@ -355,7 +376,24 @@
        "save_load_hint": "Las opciones \"Mantener\" conservan las opciones configuradas actualmente al seleccionar o cargar temas, también almacena dichas opciones al exportar un tema. Cuando se desactiven todas las casillas de verificación, el tema de exportación lo guardará todo.",
        "reset": "Reiniciar",
        "clear_all": "Limpiar todo",
-        "clear_opacity": "Limpiar opacidad"
+        "clear_opacity": "Limpiar opacidad",
+        "help": {
+          "snapshot_source_mismatch": "Conflicto de versiones: lo más probable es que el frontend se haya revertido y actualizado nuevamente, si cambió el tema con una versión anterior del frontend, lo más probable es que desee usar la versión anterior; de lo contrario, use la nueva versión.",
+          "migration_napshot_gone": "Por alguna razón, faltaba la instantánea, algunas cosas podrían verse diferentes de lo que recuerdas.",
+          "migration_snapshot_ok": "Solo para estar seguro, se cargó la instantánea del tema. Puede intentar cargar los datos del tema.",
+          "fe_downgraded": "Versión de PleromaFE revertida.",
+          "fe_upgraded": "El creador de temas de PleromaFE se actualizó después de la actualización de la versión.",
+          "snapshot_missing": "No había ninguna instantánea del tema en el archivo, por lo que podría verse diferente de lo previsto originalmente.",
+          "snapshot_present": "Se ha cargado una instantánea del tema, por lo que todos los valores se sobrescriben. De lo contrario, puede cargar el tema por completo.",
+          "older_version_imported": "El archivo que ha importado se creó en una versión anterior del frontend actual.",
+          "v2_imported": "El archivo que ha importado fue creado para un frontend más antiguo. Intentamos maximizar la compatibilidad, pero aún podría haber inconsistencias.",
+          "future_version_imported": "El archivo que ha importado se creó para una versión más reciente del frontend.",
+          "upgraded_from_v2": "PleromaFE se ha actualizado, el tema podría verse un poco diferente de lo que recuerdas."
+        },
+        "use_source": "Nueva versión",
+        "use_snapshot": "Versión antigua",
+        "keep_as_is": "Mantener como está",
+        "load_theme": "Cargar tema"
      },
      "common": {
        "color": "Color",
@ -390,7 +428,26 @@
        "borders": "Bordes",
        "buttons": "Botones",
        "inputs": "Campos de entrada",
-        "faint_text": "Texto desvanecido"
+        "faint_text": "Texto desvanecido",
+        "alert_neutral": "Neutral",
+        "chat": {
+          "border": "Borde",
+          "outgoing": "Salientes",
+          "incoming": "Entrantes"
+        },
+        "tabs": "Pestañas",
+        "toggled": "Intercambiado",
+        "disabled": "Deshabilitado",
+        "selectedMenu": "Elemento del menú seleccionado",
+        "selectedPost": "Publicación seleccionada",
+        "pressed": "Presionado",
+        "highlight": "Elementos destacados",
+        "icons": "Iconos",
+        "poll": "Gráfico de la encuesta",
+        "underlay": "Subrayado",
+        "popover": "Sugerencias, menús, superposiciones",
+        "post": "Publicaciones/Biografías de Usuarios",
+        "alert_warning": "Precaución"
      },
      "radii": {
        "_tab_label": "Redondez"
@ -423,7 +480,8 @@
          "buttonPressed": "Botón (presionado)",
          "buttonPressedHover": "Botón (presionado+encima)",
          "input": "Campo de entrada"
-        }
+        },
+        "hintV3": "Para las sombras, también puede usar la notación {0} para usar otro espacio de color."
      },
      "fonts": {
        "_tab_label": "Fuentes",
@ -458,7 +516,42 @@
      "title": "Versión",
      "backend_version": "Versión del Backend",
      "frontend_version": "Versión del Frontend"
-    }
+    },
+    "notification_visibility_moves": "Usuario Migrado",
+    "greentext": "Texto verde (meme arrows)",
+    "notification_setting_hide_notification_contents": "Ocultar el remitente y el contenido de las notificaciones push",
+    "notification_setting_privacy": "Privacidad",
+    "notification_setting_block_from_strangers": "Bloquea las notificaciones de los usuarios que no sigues",
+    "notification_setting_filters": "Filtros",
+    "fun": "Divertido",
+    "type_domains_to_mute": "Buscar dominios para silenciar",
+    "useStreamingApiWarning": "(no recomendado, experimental, puede omitir publicaciones)",
+    "useStreamingApi": "Recibir entradas y notificaciones en tiempo real",
+    "user_mutes": "Usuarios",
+    "reset_profile_background": "Restablecer el fondo de pantalla",
+    "reset_background_confirm": "¿Estás seguro de restablecer el fondo de pantalla?",
+    "reset_banner_confirm": "¿Estás seguro de restablecer la imagen del banner?",
+    "reset_avatar_confirm": "¿Estás seguro de restablecer la imagen de avatar?",
+    "reset_profile_banner": "Restabler imagen del banner del perfil",
+    "reset_avatar": "Restablecer avatar",
+    "notification_visibility_emoji_reactions": "Reacciones",
+    "new_email": "Nuevo correo electrónico",
+    "profile_fields": {
+      "value": "Contenido",
+      "name": "Etiqueta",
+      "add_field": "Añadir un campo",
+      "label": "Metadatos del perfil"
+    },
+    "accent": "Acento",
+    "emoji_reactions_on_timeline": "Mostrar las reacciones de emoji en la línea de tiempo",
+    "domain_mutes": "Dominios",
+    "mutes_and_blocks": "Silenciado y Bloqueados",
+    "chatMessageRadius": "Mensaje de chat",
+    "changed_email": "¡Correo electrónico modificado correctamente!",
+    "change_email_error": "Ha ocurrido un error al intentar modificar tu correo electrónico.",
+    "change_email": "Modificar el correo electrónico",
+    "bot": "Esta cuenta es un bot",
+    "allow_following_move": "Permitir el seguimiento automático, cuando la cuenta que sigues se traslada a otra instancia"
  },
  "time": {
    "day": "{0} día",
@ -504,7 +597,8 @@
    "show_new": "Mostrar lo nuevo",
    "up_to_date": "Actualizado",
    "no_more_statuses": "No hay más estados",
-    "no_statuses": "Sin estados"
+    "no_statuses": "Sin estados",
+    "reload": "Recargar"
  },
  "status": {
    "favorites": "Favoritos",
@ -517,7 +611,17 @@
    "reply_to": "Respondiendo a",
    "replies_list": "Respuestas:",
    "mute_conversation": "Silenciar la conversación",
-    "unmute_conversation": "Mostrar la conversación"
+    "unmute_conversation": "Mostrar la conversación",
+    "hide_content": "Ocultar el contenido",
+    "show_content": "Mostrar el contenido",
+    "hide_full_subject": "Ocultar el tema completo",
+    "show_full_subject": "Mostrar el tema completo",
+    "thread_muted_and_words": ", contiene:",
+    "thread_muted": "Conversación silenciada",
+    "copy_link": "Copiar el enlace al estado",
+    "status_unavailable": "Estado no disponible",
+    "bookmark": "Marcar",
+    "unbookmark": "Desmarcar"
  },
  "user_card": {
    "approve": "Aprobar",
@ -546,11 +650,11 @@
    "subscribe": "Suscribirse",
    "unsubscribe": "Desuscribirse",
    "unblock": "Desbloquear",
-    "unblock_progress": "Desbloqueando...",
-    "block_progress": "Bloqueando...",
-    "unmute": "Quitar silencio",
-    "unmute_progress": "Quitando silencio...",
-    "mute_progress": "Silenciando...",
+    "unblock_progress": "Desbloqueando…",
+    "block_progress": "Bloqueando…",
+    "unmute": "Dejar de silenciar",
+    "unmute_progress": "Quitando silencio…",
+    "mute_progress": "Silenciando…",
    "admin_menu": {
      "moderation": "Moderación",
      "grant_admin": "Conceder permisos de Administrador",
@ -564,12 +668,16 @@
      "strip_media": "Eliminar archivos multimedia de las publicaciones",
      "force_unlisted": "Forzar que se publique en el modo -Sin Listar-",
      "sandbox": "Forzar que se publique solo para tus seguidores",
-      "disable_remote_subscription": "No permitir que usuarios de instancias remotas te siga.",
+      "disable_remote_subscription": "No permitir que usuarios de instancias remotas te siga",
      "disable_any_subscription": "No permitir que ningún usuario te siga",
      "quarantine": "No permitir publicaciones de usuarios de instancias remotas",
      "delete_user": "Eliminar usuario",
      "delete_user_confirmation": "¿Estás completamente seguro? Esta acción no se puede deshacer."
-    }
+    },
+    "show_repeats": "Mostrar repetidos",
+    "hide_repeats": "Ocultar repetidos",
+    "message": "Mensaje",
+    "hidden": "Oculto"
  },
  "user_profile": {
    "timeline_title": "Linea Temporal del Usuario",
@ -594,7 +702,11 @@
    "repeat": "Repetir",
    "reply": "Contestar",
    "favorite": "Favorito",
-    "user_settings": "Ajustes de usuario"
+    "user_settings": "Ajustes de usuario",
+    "bookmark": "Marcador",
+    "reject_follow_request": "Rechazar la solicitud de seguimiento",
+    "accept_follow_request": "Aceptar la solicitud de seguimiento",
+    "add_reaction": "Añadir Reacción"
  },
  "upload": {
    "error": {
@ -625,6 +737,77 @@
    "check_email": "Revise su correo electrónico para obtener un enlace para restablecer su contraseña.",
    "return_home": "Volver a la página de inicio",
    "too_many_requests": "Has alcanzado el límite de intentos, vuelve a intentarlo más tarde.",
-    "password_reset_disabled": "El restablecimiento de contraseñas está deshabilitado. Póngase en contacto con el administrador de su instancia."
+    "password_reset_disabled": "El restablecimiento de contraseñas está deshabilitado. Póngase en contacto con el administrador de su instancia.",
+    "password_reset_required_but_mailer_is_disabled": "Debes restablecer la contraseña, pero el restablecimiento de contraseñas está deshabilitado. Por favor contacta con el administrador de la instancia.",
+    "password_reset_required": "Debes restablecer la contraseña para iniciar sesión."
+  },
+  "errors": {
+    "storage_unavailable": "Pleroma no pudo acceder al almacenamiento del navegador. Su inicio de sesión o su configuración local no se guardarán y puede encontrar problemas inesperados. Intente habilitar las cookies."
+  },
+  "domain_mute_card": {
+    "unmute_progress": "Quitando silencio…",
+    "unmute": "Dejar de silenciar",
+    "mute_progress": "Silenciando…",
+    "mute": "Silenciar"
+  },
+  "about": {
+    "mrf": {
+      "simple": {
+        "accept_desc": "Esta instancia solo acepta mensajes de las siguientes instancias:",
+        "media_nsfw_desc": "Esta instancia obliga a que los archivos multimedia se establezcan como sensibles en las publicaciones de las siguientes instancias:",
+        "media_nsfw": "Forzar Multimedia Como Sensible",
+        "media_removal_desc": "Esta instancia elimina los archivos multimedia de las publicaciones de las siguientes instancias:",
+        "media_removal": "Eliminar Multimedia",
+        "quarantine": "Cuarentena",
+        "ftl_removal_desc": "Esta instancia elimina las siguientes instancias de la línea de tiempo \"Toda la red conocida\":",
+        "ftl_removal": "Eliminar de la línea de tiempo \"Toda La Red Conocida\"",
+        "quarantine_desc": "Esta instancia enviará solo publicaciones públicas a las siguientes instancias:",
+        "simple_policies": "Políticas sobre instancias específicas",
+        "reject_desc": "Esta instancia no aceptará mensajes de las siguientes instancias:",
+        "reject": "Rechazar",
+        "accept": "Aceptar"
+      },
+      "mrf_policies_desc": "Las políticas MRF manipulan la federación de esta instancia con el resto del fediverso. Las siguientes políticas están habilitadas:",
+      "mrf_policies": "Habilitar políticas MRF",
+      "keyword": {
+        "ftl_removal": "Eliminar de la línea de tiempo \"Toda La Red Conocida\"",
+        "keyword_policies": "Política de Palabras Clave",
+        "is_replaced_by": "→",
+        "replace": "Reemplazar",
+        "reject": "Rechazar"
+      },
+      "federation": "Federación"
+    },
+    "staff": "Equipo"
+  },
+  "shoutbox": {
+    "title": "Jaula de Grillos"
+  },
+  "remote_user_resolver": {
+    "remote_user_resolver": "Resolución de usuario remoto",
+    "error": "No encontrado.",
+    "searching_for": "Buscando"
+  },
+  "chats": {
+    "chats": "Chats",
+    "empty_chat_list_placeholder": "Aún no tienes ninguna conversación. ¡Inicia una nueva conversación!",
+    "error_sending_message": "Algo salió mal al enviar el mensaje.",
+    "error_loading_chat": "Algo salió mal al cargar el chat.",
+    "delete_confirm": "¿Realmente quieres borrar este mensaje?",
+    "more": "Más",
+    "empty_message_error": "No puedes publicar un mensaje vacío",
+    "new": "Nueva conversación",
+    "delete": "Borrar",
+    "message_user": "Mensaje de {nickname}",
+    "you": "Tú:"
+  },
+  "display_date": {
+    "today": "Hoy"
+  },
+  "file_type": {
+    "file": "Archivo",
+    "image": "Imagen",
+    "video": "Vídeo",
+    "audio": "Audio"
  }
 }
--- a/src/i18n/eu.json
+++ b/src/i18n/eu.json
@ -232,7 +232,7 @@
    "default_vis": "Lehenetsitako ikusgaitasunak",
    "delete_account": "Ezabatu kontua",
    "discoverable": "Baimendu zure kontua kanpo bilaketa-emaitzetan eta bestelako zerbitzuetan agertzea",
-    "delete_account_description": "Betirako ezabatu zure kontua eta zure mezu guztiak",
+    "delete_account_description": "Betirako ezabatu zure datuak eta desaktibatu kontua.",
    "pad_emoji": "Zuriuneak gehitu emoji bat aukeratzen denean",
    "delete_account_error": "Arazo bat gertatu da zure kontua ezabatzerakoan. Arazoa jarraitu eskero, administratzailearekin harremanetan jarri.",
    "delete_account_instructions": "Idatzi zure pasahitza kontua ezabatzeko.",
@ -630,5 +630,13 @@
    "password_reset_disabled": "Pasahitza berrezartzea debekatuta dago. Mesedez, jarri harremanetan instantzia administratzailearekin.",
    "password_reset_required": "Pasahitza berrezarri behar duzu saioa hasteko.",
    "password_reset_required_but_mailer_is_disabled": "Pasahitza berrezarri behar duzu, baina pasahitza berrezartzeko aukera desgaituta dago. Mesedez, jarri harremanetan instantziaren administratzailearekin."
+  },
+  "about": {
+    "mrf": {
+      "keyword": {
+        "keyword_policies": "Gako-hitz politika"
+      },
+      "federation": "Federazioa"
+    }
  }
 }
--- a/src/modules/chats.js
+++ b/src/modules/chats.js
@ -143,6 +143,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 +182,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) })
-        commit('refreshLastMessage', { chatId })
+        chatService.add(chatMessageService, { messages: messages.map(parseChatMessage), updateMaxId })
      }
    },
-    refreshLastMessage (state, { chatId }) {
-      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 }) {
+    deleteChatMessage (state, { chatId, messageId }) {
      const chatMessageService = state.openedChatMessageServices[chatId]
      if (chatMessageService) {
        chatService.deleteMessage(chatMessageService, messageId)
-        commit('refreshLastMessage', { chatId })
      }
    },
    resetChatNewMessageCount (state, _value) {
--- a/src/modules/config.js
+++ b/src/modules/config.js
@ -65,7 +65,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
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@ -41,6 +41,7 @@ const defaultState = {
  sidebarRight: false,
  subjectLineBehavior: 'email',
  theme: 'pleroma-dark',
+  virtualScrolling: true,

  // Nasty stuff
  customEmoji: [],
--- a/src/modules/statuses.js
+++ b/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
  }
 }

@ -757,6 +760,9 @@ const statuses = {
          store.commit('addNewStatuses', { statuses: data.statuses })
          return data
        })
+    },
+    setVirtualHeight ({ commit }, { statusId, height }) {
+      commit('setVirtualHeight', { statusId, height })
    }
  },
  mutations
--- a/src/services/api/api.service.js
+++ b/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,
--- a/src/services/chat_service/chat_service.js
+++ b/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)) {
-    storage.lastMessage = _.maxBy(storage.messages, 'id')
+  if (storage.maxId === messageId) {
+    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) {
-      storage.lastMessage = message
+    if (!storage.maxId || message.id > storage.maxId) {
+      if (updateMaxId) {
+        storage.maxId = message.id
+      }
    }

    if (!storage.idIndex[message.id]) {
--- a/src/services/chat_utils/chat_utils.js
+++ b/src/services/chat_utils/chat_utils.js
@ -3,6 +3,7 @@ import { showDesktopNotification } from '../desktop_notification_utils/desktop_n
 export const maybeShowChatNotification = (store, chat) => {
  if (!chat.lastMessage) return
  if (store.rootState.chats.currentChatId === chat.id && !document.hidden) return
+  if (store.rootState.users.currentUser.id === chat.lastMessage.account.id) return

  const opts = {
    tag: chat.lastMessage.id,
--- a/static/fontello.json
+++ b/static/fontello.json
@ -405,6 +405,12 @@
      "css": "block",
      "code": 59434,
      "src": "fontawesome"
+    },
+    {
+      "uid": "3e674995cacc2b09692c096ea7eb6165",
+      "css": "megaphone",
+      "code": 59435,
+      "src": "fontawesome"
    }
  ]
 }
--- a/test/unit/specs/services/chat_service/chat_service.spec.js
+++ b/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)
    })
  })