Merge branch 'develop' of git.pleroma.social:pleroma/pleroma-fe into develop

2020-02-04 10:07:20 +03:00 · 2020-02-04 10:07:20 +03:00 · 64c180c838
commit 64c180c838
parent f892b26d73 e73e235b4d
31 changed files with 719 additions and 69 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -9,6 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Private mode support
 - Support for 'Move' type notifications
 - Pleroma AMOLED dark theme
+- User level domain mutes, under User Settings -> Mutes
+- Emoji reactions for statuses
 ### Changed
 - Captcha now resets on failed registrations
 - Notifications column now cleans itself up to optimize performance when tab is left open for a long time
@ -17,6 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Single notifications left unread when hitting read on another device/tab
 - Registration fixed
 - Deactivation of remote accounts from frontend
+- Fixed NSFW unhiding not working with videos when using one-click unhiding/displaying

 ## [1.1.7 and earlier] - 2019-12-14
 ### Added
--- a/package.json
+++ b/package.json
@ -43,6 +43,7 @@
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/preset-env": "^7.7.6",
    "@babel/register": "^7.7.4",
+    "@ungap/event-target": "^0.1.0",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
    "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
    "@vue/test-utils": "^1.0.0-beta.26",
@ -56,6 +57,7 @@
    "connect-history-api-fallback": "^1.1.0",
    "cross-spawn": "^4.0.2",
    "css-loader": "^0.28.0",
+    "custom-event-polyfill": "^1.0.7",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-friendly-formatter": "^2.0.5",
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -185,12 +185,9 @@ const getAppSecret = async ({ store }) => {
    })
 }

-const resolveStaffAccounts = async ({ store, accounts }) => {
-  const backendInteractor = store.state.api.backendInteractor
-  let nicknames = accounts.map(uri => uri.split('/').pop())
-    .map(id => backendInteractor.fetchUser({ id }))
-  nicknames = await Promise.all(nicknames)
-
+const resolveStaffAccounts = ({ store, accounts }) => {
+  const nicknames = accounts.map(uri => uri.split('/').pop())
+  nicknames.map(nickname => store.dispatch('fetchUser', nickname))
  store.dispatch('setInstanceOption', { name: 'staffAccounts', value: nicknames })
 }

@ -236,7 +233,7 @@ const getNodeInfo = async ({ store }) => {
      })

      const accounts = metadata.staffAccounts
-      await resolveStaffAccounts({ store, accounts })
+      resolveStaffAccounts({ store, accounts })
    } else {
      throw (res)
    }
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@ -2,6 +2,7 @@ import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
+import { mapGetters } from 'vuex'

 const Attachment = {
  props: [
@ -49,7 +50,8 @@ const Attachment = {
    },
    fullwidth () {
      return this.type === 'html' || this.type === 'audio'
-    }
+    },
+    ...mapGetters(['mergedConfig'])
  },
  methods: {
    linkClicked ({ target }) {
@ -58,7 +60,7 @@ const Attachment = {
      }
    },
    openModal (event) {
-      const modalTypes = this.$store.getters.mergedConfig.playVideosInModal
+      const modalTypes = this.mergedConfig.playVideosInModal
        ? ['image', 'video']
        : ['image']
      if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
@ -71,7 +73,10 @@ const Attachment = {
      }
    },
    toggleHidden (event) {
-      if (this.$store.getters.mergedConfig.useOneClickNsfw && !this.showHidden) {
+      if (
+        (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
+        (this.type !== 'video' || this.mergedConfig.playVideosInModal)
+      ) {
        this.openModal(event)
        return
      }
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@ -150,6 +150,7 @@ const conversation = {
      if (!id) return
      this.highlight = id
      this.$store.dispatch('fetchFavsAndRepeats', id)
+      this.$store.dispatch('fetchEmojiReactionsBy', id)
    },
    getHighlight () {
      return this.isExpanded ? this.highlight : null
--- a/src/components/domain_mute_card/domain_mute_card.js
+++ b/src/components/domain_mute_card/domain_mute_card.js
@ -0,0 +1,15 @@
+import ProgressButton from '../progress_button/progress_button.vue'
+
+const DomainMuteCard = {
+  props: ['domain'],
+  components: {
+    ProgressButton
+  },
+  methods: {
+    unmuteDomain () {
+      return this.$store.dispatch('unmuteDomain', this.domain)
+    }
+  }
+}
+
+export default DomainMuteCard
--- a/src/components/domain_mute_card/domain_mute_card.vue
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@ -0,0 +1,38 @@
+<template>
+  <div class="domain-mute-card">
+    <div class="domain-mute-card-domain">
+      {{ domain }}
+    </div>
+    <ProgressButton
+      :click="unmuteDomain"
+      class="btn btn-default"
+    >
+      {{ $t('domain_mute_card.unmute') }}
+      <template slot="progress">
+        {{ $t('domain_mute_card.unmute_progress') }}
+      </template>
+    </ProgressButton>
+  </div>
+</template>
+
+<script src="./domain_mute_card.js"></script>
+
+<style lang="scss">
+.domain-mute-card {
+  flex: 1 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.6em 1em 0.6em 0;
+
+  &-domain {
+    margin-right: 1em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  button {
+    width: 10em;
+  }
+}
+</style>
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@ -0,0 +1,32 @@
+
+const EmojiReactions = {
+  name: 'EmojiReactions',
+  props: ['status'],
+  computed: {
+    emojiReactions () {
+      return this.status.emoji_reactions
+    }
+  },
+  methods: {
+    reactedWith (emoji) {
+      const user = this.$store.state.users.currentUser
+      const reaction = this.status.emoji_reactions.find(r => r.emoji === emoji)
+      return reaction.accounts && reaction.accounts.find(u => u.id === user.id)
+    },
+    reactWith (emoji) {
+      this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
+    },
+    unreact (emoji) {
+      this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
+    },
+    emojiOnClick (emoji, event) {
+      if (this.reactedWith(emoji)) {
+        this.unreact(emoji)
+      } else {
+        this.reactWith(emoji)
+      }
+    }
+  }
+}
+
+export default EmojiReactions
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@ -0,0 +1,49 @@
+<template>
+  <div class="emoji-reactions">
+    <button
+      v-for="(reaction) in emojiReactions"
+      :key="reaction.emoji"
+      class="emoji-reaction btn btn-default"
+      :class="{ 'picked-reaction': reactedWith(reaction.emoji) }"
+      @click="emojiOnClick(reaction.emoji, $event)"
+    >
+      <span class="reaction-emoji">{{ reaction.emoji }}</span>
+      <span>{{ reaction.count }}</span>
+    </button>
+  </div>
+</template>
+
+<script src="./emoji_reactions.js" ></script>
+<style lang="scss">
+@import '../../_variables.scss';
+
+.emoji-reactions {
+  display: flex;
+  margin-top: 0.25em;
+  flex-wrap: wrap;
+}
+
+.emoji-reaction {
+  padding: 0 0.5em;
+  margin-right: 0.5em;
+  margin-top: 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  .reaction-emoji {
+    width: 1.25em;
+    margin-right: 0.25em;
+  }
+  &:focus {
+    outline: none;
+  }
+}
+
+.picked-reaction {
+  border: 1px solid var(--link, $fallback--link);
+  margin-left: -1px; // offset the border, can't use inset shadows either
+  margin-right: calc(0.5em - 1px);
+}
+
+</style>
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@ -3,7 +3,7 @@ import { mapState } from 'vuex'
 const NavPanel = {
  created () {
    if (this.currentUser && this.currentUser.locked) {
-      this.$store.dispatch('startFetchingFollowRequest')
+      this.$store.dispatch('startFetchingFollowRequests')
    }
  },
  computed: mapState({
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -33,7 +33,7 @@
            <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
          </router-link>
        </li>
-        <li v-if="federating && !privateMode">
+        <li v-if="federating && (currentUser || !privateMode)">
          <router-link :to="{ name: 'public-external-timeline' }">
            <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
          </router-link>
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@ -0,0 +1,43 @@
+import { mapGetters } from 'vuex'
+
+const ReactButton = {
+  props: ['status', 'loggedIn'],
+  data () {
+    return {
+      showTooltip: false,
+      filterWord: '',
+      popperOptions: {
+        modifiers: {
+          preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
+        }
+      }
+    }
+  },
+  methods: {
+    openReactionSelect () {
+      this.showTooltip = true
+      this.filterWord = ''
+    },
+    closeReactionSelect () {
+      this.showTooltip = false
+    },
+    addReaction (event, emoji) {
+      this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
+      this.closeReactionSelect()
+    }
+  },
+  computed: {
+    commonEmojis () {
+      return ['❤️', '😠', '👀', '😂', '🔥']
+    },
+    emojis () {
+      if (this.filterWord !== '') {
+        return this.$store.state.instance.emoji.filter(emoji => emoji.displayText.includes(this.filterWord))
+      }
+      return this.$store.state.instance.emoji || []
+    },
+    ...mapGetters(['mergedConfig'])
+  }
+}
+
+export default ReactButton
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@ -0,0 +1,109 @@
+<template>
+  <v-popover
+    :popper-options="popperOptions"
+    :open="showTooltip"
+    trigger="manual"
+    placement="top"
+    class="react-button-popover"
+    @hide="closeReactionSelect"
+  >
+    <div slot="popover">
+      <div class="reaction-picker-filter">
+        <input
+          v-model="filterWord"
+          :placeholder="$t('emoji.search_emoji')"
+        >
+      </div>
+      <div class="reaction-picker">
+        <span
+          v-for="emoji in commonEmojis"
+          :key="emoji"
+          class="emoji-button"
+          @click="addReaction($event, emoji)"
+        >
+          {{ emoji }}
+        </span>
+        <div class="reaction-picker-divider" />
+        <span
+          v-for="(emoji, key) in emojis"
+          :key="key"
+          class="emoji-button"
+          @click="addReaction($event, emoji.replacement)"
+        >
+          {{ emoji.replacement }}
+        </span>
+        <div class="reaction-bottom-fader" />
+      </div>
+    </div>
+    <div
+      v-if="loggedIn"
+      @click.prevent="openReactionSelect"
+    >
+      <i
+        class="icon-smile button-icon add-reaction-button"
+        :title="$t('tool_tip.add_reaction')"
+      />
+    </div>
+  </v-popover>
+</template>
+
+<script src="./react_button.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.reaction-picker-filter {
+  padding: 0.5em;
+}
+
+.reaction-picker-divider {
+  height: 1px;
+  width: 100%;
+  margin: 0.5em;
+  background-color: var(--border, $fallback--border);
+}
+
+.reaction-picker {
+  width: 10em;
+  height: 9em;
+  font-size: 1.5em;
+  overflow-y: scroll;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.5em;
+  text-align: center;
+  align-content: flex-start;
+  user-select: none;
+
+  mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+    linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+    linear-gradient(to top, white, white);
+  transition: mask-size 150ms;
+  mask-size: 100% 20px, 100% 20px, auto;
+  // Autoprefixed seem to ignore this one, and also syntax is different
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+
+  .emoji-button {
+    cursor: pointer;
+
+    flex-basis: 20%;
+    line-height: 1.5em;
+    align-content: center;
+
+    &:hover {
+      transform: scale(1.25);
+    }
+  }
+}
+
+.add-reaction-button {
+  cursor: pointer;
+
+  &:hover {
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
+}
+
+</style>
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@ -12,7 +12,7 @@ const SideDrawer = {
    this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer)

    if (this.currentUser && this.currentUser.locked) {
-      this.$store.dispatch('startFetchingFollowRequest')
+      this.$store.dispatch('startFetchingFollowRequests')
    }
  },
  components: { UserCard },
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@ -88,7 +88,7 @@
          </router-link>
        </li>
        <li
-          v-if="federating && !privateMode"
+          v-if="federating && (currentUser || !privateMode)"
          @click="toggleDrawer"
        >
          <router-link to="/main/all">
--- a/src/components/staff_panel/staff_panel.js
+++ b/src/components/staff_panel/staff_panel.js
@ -1,3 +1,4 @@
+import map from 'lodash/map'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'

 const StaffPanel = {
@ -6,7 +7,7 @@ const StaffPanel = {
  },
  computed: {
    staffAccounts () {
-      return this.$store.state.instance.staffAccounts
+      return map(this.$store.state.instance.staffAccounts, nickname => this.$store.getters.findUser(nickname)).filter(_ => _)
    }
  }
 }
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@ -1,5 +1,6 @@
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
+import ReactButton from '../react_button/react_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
 import Poll from '../poll/poll.vue'
 import ExtraButtons from '../extra_buttons/extra_buttons.vue'
@ -11,6 +12,7 @@ import LinkPreview from '../link-preview/link-preview.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
 import StatusPopover from '../status_popover/status_popover.vue'
+import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import fileType from 'src/services/file_type/file_type.service'
 import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
@ -319,6 +321,7 @@ const Status = {
  components: {
    Attachment,
    FavoriteButton,
+    ReactButton,
    RetweetButton,
    ExtraButtons,
    PostStatusForm,
@ -329,7 +332,8 @@ const Status = {
    LinkPreview,
    AvatarList,
    Timeago,
-    StatusPopover
+    StatusPopover,
+    EmojiReactions
  },
  methods: {
    visibilityIcon (visibility) {
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -354,6 +354,10 @@
            </div>
          </transition>

+          <EmojiReactions
+            :status="status"
+          />
+
          <div
            v-if="!noHeading && !isPreview"
            class="status-actions media-body"
@ -382,6 +386,10 @@
              :logged-in="loggedIn"
              :status="status"
            />
+            <ReactButton
+              :logged-in="loggedIn"
+              :status="status"
+            />
            <extra-buttons
              :status="status"
              @onError="showError"
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@ -9,6 +9,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
+import DomainMuteCard from '../domain_mute_card/domain_mute_card.vue'
 import SelectableList from '../selectable_list/selectable_list.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 import EmojiInput from '../emoji_input/emoji_input.vue'
@ -32,6 +33,12 @@ const MuteList = withSubscription({
  childPropName: 'items'
 })(SelectableList)

+const DomainMuteList = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
+  select: (props, $store) => get($store.state.users.currentUser, 'domainMutes', []),
+  childPropName: 'items'
+})(SelectableList)
+
 const UserSettings = {
  data () {
    return {
@ -67,7 +74,8 @@ const UserSettings = {
      changedPassword: false,
      changePasswordError: false,
      activeTab: 'profile',
-      notificationSettings: this.$store.state.users.currentUser.notification_settings
+      notificationSettings: this.$store.state.users.currentUser.notification_settings,
+      newDomainToMute: ''
    }
  },
  created () {
@ -80,10 +88,12 @@ const UserSettings = {
    ImageCropper,
    BlockList,
    MuteList,
+    DomainMuteList,
    EmojiInput,
    Autosuggest,
    BlockCard,
    MuteCard,
+    DomainMuteCard,
    ProgressButton,
    Importer,
    Exporter,
@ -297,7 +307,7 @@ const UserSettings = {
        newPassword: this.changePasswordInputs[1],
        newPasswordConfirmation: this.changePasswordInputs[2]
      }
-      this.$store.state.api.backendInteractor.changePassword({ params })
+      this.$store.state.api.backendInteractor.changePassword(params)
        .then((res) => {
          if (res.status === 'success') {
            this.changedPassword = true
@ -314,7 +324,7 @@ const UserSettings = {
        email: this.newEmail,
        password: this.changeEmailPassword
      }
-      this.$store.state.api.backendInteractor.changeEmail({ params })
+      this.$store.state.api.backendInteractor.changeEmail(params)
        .then((res) => {
          if (res.status === 'success') {
            this.changedEmail = true
@ -365,6 +375,13 @@ const UserSettings = {
    unmuteUsers (ids) {
      return this.$store.dispatch('unmuteUsers', ids)
    },
+    unmuteDomains (domains) {
+      return this.$store.dispatch('unmuteDomains', domains)
+    },
+    muteDomain () {
+      return this.$store.dispatch('muteDomain', this.newDomainToMute)
+        .then(() => { this.newDomainToMute = '' })
+    },
    identity (value) {
      return value
    }
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@ -509,59 +509,114 @@
        </div>

        <div :label="$t('settings.mutes_tab')">
-          <div class="profile-edit-usersearch-wrapper">
-            <Autosuggest
-              :filter="filterUnMutedUsers"
-              :query="queryUserIds"
-              :placeholder="$t('settings.search_user_to_mute')"
-            >
-              <MuteCard
-                slot-scope="row"
-                :user-id="row.item"
-              />
-            </Autosuggest>
-          </div>
-          <MuteList
-            :refresh="true"
-            :get-key="identity"
-          >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-            >
-              <div class="profile-edit-bulk-actions">
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => muteUsers(selected)"
+          <tab-switcher>
+            <div label="Users">
+              <div class="profile-edit-usersearch-wrapper">
+                <Autosuggest
+                  :filter="filterUnMutedUsers"
+                  :query="queryUserIds"
+                  :placeholder="$t('settings.search_user_to_mute')"
                >
-                  {{ $t('user_card.mute') }}
-                  <template slot="progress">
-                    {{ $t('user_card.mute_progress') }}
-                  </template>
-                </ProgressButton>
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => unmuteUsers(selected)"
+                  <MuteCard
+                    slot-scope="row"
+                    :user-id="row.item"
+                  />
+                </Autosuggest>
+              </div>
+              <MuteList
+                :refresh="true"
+                :get-key="identity"
+              >
+                <template
+                  slot="header"
+                  slot-scope="{selected}"
                >
-                  {{ $t('user_card.unmute') }}
+                  <div class="profile-edit-bulk-actions">
+                    <ProgressButton
+                      v-if="selected.length > 0"
+                      class="btn btn-default"
+                      :click="() => muteUsers(selected)"
+                    >
+                      {{ $t('user_card.mute') }}
+                      <template slot="progress">
+                        {{ $t('user_card.mute_progress') }}
+                      </template>
+                    </ProgressButton>
+                    <ProgressButton
+                      v-if="selected.length > 0"
+                      class="btn btn-default"
+                      :click="() => unmuteUsers(selected)"
+                    >
+                      {{ $t('user_card.unmute') }}
+                      <template slot="progress">
+                        {{ $t('user_card.unmute_progress') }}
+                      </template>
+                    </ProgressButton>
+                  </div>
+                </template>
+                <template
+                  slot="item"
+                  slot-scope="{item}"
+                >
+                  <MuteCard :user-id="item" />
+                </template>
+                <template slot="empty">
+                  {{ $t('settings.no_mutes') }}
+                </template>
+              </MuteList>
+            </div>
+
+            <div :label="$t('settings.domain_mutes')">
+              <div class="profile-edit-domain-mute-form">
+                <input
+                  v-model="newDomainToMute"
+                  :placeholder="$t('settings.type_domains_to_mute')"
+                  type="text"
+                  @keyup.enter="muteDomain"
+                >
+                <ProgressButton
+                  class="btn btn-default"
+                  :click="muteDomain"
+                >
+                  {{ $t('domain_mute_card.mute') }}
                  <template slot="progress">
-                    {{ $t('user_card.unmute_progress') }}
+                    {{ $t('domain_mute_card.mute_progress') }}
                  </template>
                </ProgressButton>
              </div>
-            </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
-              <MuteCard :user-id="item" />
-            </template>
-            <template slot="empty">
-              {{ $t('settings.no_mutes') }}
-            </template>
-          </MuteList>
+              <DomainMuteList
+                :refresh="true"
+                :get-key="identity"
+              >
+                <template
+                  slot="header"
+                  slot-scope="{selected}"
+                >
+                  <div class="profile-edit-bulk-actions">
+                    <ProgressButton
+                      v-if="selected.length > 0"
+                      class="btn btn-default"
+                      :click="() => unmuteDomains(selected)"
+                    >
+                      {{ $t('domain_mute_card.unmute') }}
+                      <template slot="progress">
+                        {{ $t('domain_mute_card.unmute_progress') }}
+                      </template>
+                    </ProgressButton>
+                  </div>
+                </template>
+                <template
+                  slot="item"
+                  slot-scope="{item}"
+                >
+                  <DomainMuteCard :domain="item" />
+                </template>
+                <template slot="empty">
+                  {{ $t('settings.no_mutes') }}
+                </template>
+              </DomainMuteList>
+            </div>
+          </tab-switcher>
        </div>
      </tab-switcher>
    </div>
@ -639,6 +694,18 @@
    }
  }

+  &-domain-mute-form {
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+
+    button {
+      align-self: flex-end;
+      margin-top: 1em;
+      width: 10em;
+    }
+  }
+
  .setting-subitem {
    margin-left: 1.75em;
  }
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -21,6 +21,12 @@
  "chat": {
    "title": "Chat"
  },
+  "domain_mute_card": {
+    "mute": "Mute",
+    "mute_progress": "Muting...",
+    "unmute": "Unmute",
+    "unmute_progress": "Unmuting..."
+  },
  "exporter": {
    "export": "Export",
    "processing": "Processing, you'll soon be asked to download your file"
@ -264,6 +270,7 @@
    "delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
    "delete_account_instructions": "Type your password in the input below to confirm account deletion.",
    "discoverable": "Allow discovery of this account in search results and other services",
+    "domain_mutes": "Domains",
    "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
    "pad_emoji": "Pad emoji with spaces when adding from picker",
    "export_theme": "Save preset",
@ -361,6 +368,7 @@
    "post_status_content_type": "Post status content type",
    "stop_gifs": "Play-on-hover GIFs",
    "streaming": "Enable automatic streaming of new posts when scrolled to the top",
+    "user_mutes": "Users",
    "useStreamingApi": "Receive posts and notifications real-time",
    "useStreamingApiWarning": "(Not recommended, experimental, known to skip posts)",
    "text": "Text",
@ -369,6 +377,7 @@
    "theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
    "theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
    "tooltipRadius": "Tooltips/alerts",
+    "type_domains_to_mute": "Type in domains to mute",
    "upload_a_photo": "Upload a photo",
    "user_settings": "User Settings",
    "values": {
@ -639,6 +648,7 @@
    "repeat": "Repeat",
    "reply": "Reply",
    "favorite": "Favorite",
+    "add_reaction": "Add Reaction",
    "user_settings": "User Settings"
  },
  "upload":{
--- a/src/lib/event_target_polyfill.js
+++ b/src/lib/event_target_polyfill.js
@ -0,0 +1,9 @@
+import EventTargetPolyfill from '@ungap/event-target'
+
+try {
+  /* eslint-disable no-new  */
+  new EventTarget()
+  /* eslint-enable no-new  */
+} catch (e) {
+  window.EventTarget = EventTargetPolyfill
+}
--- a/src/main.js
+++ b/src/main.js
@ -2,6 +2,9 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Vuex from 'vuex'

+import 'custom-event-polyfill'
+import './lib/event_target_polyfill.js'
+
 import interfaceModule from './modules/interface.js'
 import instanceModule from './modules/instance.js'
 import statusesModule from './modules/statuses.js'
--- a/src/modules/api.js
+++ b/src/modules/api.js
@ -146,6 +146,7 @@ const api = {
    startFetchingFollowRequests (store) {
      if (store.state.fetchers['followRequests']) return
      const fetcher = store.state.backendInteractor.startFetchingFollowRequests({ store })
+
      store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
    },
    stopFetchingFollowRequests (store) {
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@ -1,4 +1,17 @@
-import { remove, slice, each, findIndex, find, maxBy, minBy, merge, first, last, isArray, omitBy } from 'lodash'
+import {
+  remove,
+  slice,
+  each,
+  findIndex,
+  find,
+  maxBy,
+  minBy,
+  merge,
+  first,
+  last,
+  isArray,
+  omitBy
+} from 'lodash'
 import { set } from 'vue'
 import apiService from '../services/api/api.service.js'
 // import parse from '../services/status_parser/status_parser.js'
@ -518,6 +531,50 @@ export const mutations = {
    newStatus.fave_num = newStatus.favoritedBy.length
    newStatus.favorited = !!newStatus.favoritedBy.find(({ id }) => currentUser.id === id)
  },
+  addEmojiReactionsBy (state, { id, emojiReactions, currentUser }) {
+    const status = state.allStatusesObject[id]
+    set(status, 'emoji_reactions', emojiReactions)
+  },
+  addOwnReaction (state, { id, emoji, currentUser }) {
+    const status = state.allStatusesObject[id]
+    const reactionIndex = findIndex(status.emoji_reactions, { emoji })
+    const reaction = status.emoji_reactions[reactionIndex] || { emoji, count: 0, accounts: [] }
+
+    const newReaction = {
+      ...reaction,
+      count: reaction.count + 1,
+      accounts: [
+        ...reaction.accounts,
+        currentUser
+      ]
+    }
+
+    // Update count of existing reaction if it exists, otherwise append at the end
+    if (reactionIndex >= 0) {
+      set(status.emoji_reactions, reactionIndex, newReaction)
+    } else {
+      set(status, 'emoji_reactions', [...status.emoji_reactions, newReaction])
+    }
+  },
+  removeOwnReaction (state, { id, emoji, currentUser }) {
+    const status = state.allStatusesObject[id]
+    const reactionIndex = findIndex(status.emoji_reactions, { emoji })
+    if (reactionIndex < 0) return
+
+    const reaction = status.emoji_reactions[reactionIndex]
+
+    const newReaction = {
+      ...reaction,
+      count: reaction.count - 1,
+      accounts: reaction.accounts.filter(acc => acc.id === currentUser.id)
+    }
+
+    if (newReaction.count > 0) {
+      set(status.emoji_reactions, reactionIndex, newReaction)
+    } else {
+      set(status, 'emoji_reactions', status.emoji_reactions.filter(r => r.emoji !== emoji))
+    }
+  },
  updateStatusWithPoll (state, { id, poll }) {
    const status = state.allStatusesObject[id]
    status.poll = poll
@ -622,6 +679,31 @@ const statuses = {
        commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser })
      })
    },
+    reactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
+      const currentUser = rootState.users.currentUser
+      commit('addOwnReaction', { id, emoji, currentUser })
+      rootState.api.backendInteractor.reactWithEmoji({ id, emoji }).then(
+        status => {
+          dispatch('fetchEmojiReactionsBy', id)
+        }
+      )
+    },
+    unreactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
+      const currentUser = rootState.users.currentUser
+      commit('removeOwnReaction', { id, emoji, currentUser })
+      rootState.api.backendInteractor.unreactWithEmoji({ id, emoji }).then(
+        status => {
+          dispatch('fetchEmojiReactionsBy', id)
+        }
+      )
+    },
+    fetchEmojiReactionsBy ({ rootState, commit }, id) {
+      rootState.api.backendInteractor.fetchEmojiReactions({ id }).then(
+        emojiReactions => {
+          commit('addEmojiReactionsBy', { id, emojiReactions, currentUser: rootState.users.currentUser })
+        }
+      )
+    },
    fetchFavs ({ rootState, commit }, id) {
      rootState.api.backendInteractor.fetchFavoritedByUsers({ id })
        .then(favoritedByUsers => commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser }))
--- a/src/modules/users.js
+++ b/src/modules/users.js
@ -72,6 +72,16 @@ const showReblogs = (store, userId) => {
    .then((relationship) => store.commit('updateUserRelationship', [relationship]))
 }

+const muteDomain = (store, domain) => {
+  return store.rootState.api.backendInteractor.muteDomain({ domain })
+    .then(() => store.commit('addDomainMute', domain))
+}
+
+const unmuteDomain = (store, domain) => {
+  return store.rootState.api.backendInteractor.unmuteDomain({ domain })
+    .then(() => store.commit('removeDomainMute', domain))
+}
+
 export const mutations = {
  setMuted (state, { user: { id }, muted }) {
    const user = state.usersObject[id]
@ -177,6 +187,20 @@ export const mutations = {
      state.currentUser.muteIds.push(muteId)
    }
  },
+  saveDomainMutes (state, domainMutes) {
+    state.currentUser.domainMutes = domainMutes
+  },
+  addDomainMute (state, domain) {
+    if (state.currentUser.domainMutes.indexOf(domain) === -1) {
+      state.currentUser.domainMutes.push(domain)
+    }
+  },
+  removeDomainMute (state, domain) {
+    const index = state.currentUser.domainMutes.indexOf(domain)
+    if (index !== -1) {
+      state.currentUser.domainMutes.splice(index, 1)
+    }
+  },
  setPinnedToUser (state, status) {
    const user = state.usersObject[status.user.id]
    const index = user.pinnedStatusIds.indexOf(status.id)
@ -297,6 +321,25 @@ const users = {
    unmuteUsers (store, ids = []) {
      return Promise.all(ids.map(id => unmuteUser(store, id)))
    },
+    fetchDomainMutes (store) {
+      return store.rootState.api.backendInteractor.fetchDomainMutes()
+        .then((domainMutes) => {
+          store.commit('saveDomainMutes', domainMutes)
+          return domainMutes
+        })
+    },
+    muteDomain (store, domain) {
+      return muteDomain(store, domain)
+    },
+    unmuteDomain (store, domain) {
+      return unmuteDomain(store, domain)
+    },
+    muteDomains (store, domains = []) {
+      return Promise.all(domains.map(domain => muteDomain(store, domain)))
+    },
+    unmuteDomains (store, domain = []) {
+      return Promise.all(domain.map(domain => unmuteDomain(store, domain)))
+    },
    fetchFriends ({ rootState, commit }, id) {
      const user = rootState.users.usersObject[id]
      const maxId = last(user.friendIds)
@ -460,6 +503,7 @@ const users = {
              user.credentials = accessToken
              user.blockIds = []
              user.muteIds = []
+              user.domainMutes = []
              commit('setCurrentUser', user)
              commit('addNewUsers', [user])

--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@ -72,7 +72,11 @@ const MASTODON_MUTE_CONVERSATION = id => `/api/v1/statuses/${id}/mute`
 const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute`
 const MASTODON_SEARCH_2 = `/api/v2/search`
 const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
+const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
 const MASTODON_STREAMING = '/api/v1/streaming'
+const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/emoji_reactions_by`
+const PLEROMA_EMOJI_REACT_URL = id => `/api/v1/pleroma/statuses/${id}/react_with_emoji`
+const PLEROMA_EMOJI_UNREACT_URL = id => `/api/v1/pleroma/statuses/${id}/unreact_with_emoji`

 const oldfetch = window.fetch

@ -880,6 +884,28 @@ const fetchRebloggedByUsers = ({ id }) => {
  return promisedRequest({ url: MASTODON_STATUS_REBLOGGEDBY_URL(id) }).then((users) => users.map(parseUser))
 }

+const fetchEmojiReactions = ({ id }) => {
+  return promisedRequest({ url: PLEROMA_EMOJI_REACTIONS_URL(id) })
+}
+
+const reactWithEmoji = ({ id, emoji, credentials }) => {
+  return promisedRequest({
+    url: PLEROMA_EMOJI_REACT_URL(id),
+    method: 'POST',
+    credentials,
+    payload: { emoji }
+  }).then(parseStatus)
+}
+
+const unreactWithEmoji = ({ id, emoji, credentials }) => {
+  return promisedRequest({
+    url: PLEROMA_EMOJI_UNREACT_URL(id),
+    method: 'POST',
+    credentials,
+    payload: { emoji }
+  }).then(parseStatus)
+}
+
 const reportUser = ({ credentials, userId, statusIds, comment, forward }) => {
  return promisedRequest({
    url: MASTODON_REPORT_USER_URL,
@ -948,6 +974,28 @@ const search2 = ({ credentials, q, resolve, limit, offset, following }) => {
    })
 }

+const fetchDomainMutes = ({ credentials }) => {
+  return promisedRequest({ url: MASTODON_DOMAIN_BLOCKS_URL, credentials })
+}
+
+const muteDomain = ({ domain, credentials }) => {
+  return promisedRequest({
+    url: MASTODON_DOMAIN_BLOCKS_URL,
+    method: 'POST',
+    payload: { domain },
+    credentials
+  })
+}
+
+const unmuteDomain = ({ domain, credentials }) => {
+  return promisedRequest({
+    url: MASTODON_DOMAIN_BLOCKS_URL,
+    method: 'DELETE',
+    payload: { domain },
+    credentials
+  })
+}
+
 export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
  return Object.entries({
    ...(credentials
@ -1107,10 +1155,16 @@ const apiService = {
  fetchPoll,
  fetchFavoritedByUsers,
  fetchRebloggedByUsers,
+  fetchEmojiReactions,
+  reactWithEmoji,
+  unreactWithEmoji,
  reportUser,
  updateNotificationSettings,
  search2,
-  searchUsers
+  searchUsers,
+  fetchDomainMutes,
+  muteDomain,
+  unmuteDomain
 }

 export default apiService
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@ -16,7 +16,7 @@ const backendInteractorService = credentials => ({
    return notificationsFetcher.fetchAndUpdate({ store, credentials })
  },

-  startFetchingFollowRequest ({ store }) {
+  startFetchingFollowRequests ({ store }) {
    return followRequestFetcher.startFetching({ store, credentials })
  },

--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@ -242,6 +242,7 @@ export const parseStatus = (data) => {
      output.is_local = pleroma.local
      output.in_reply_to_screen_name = data.pleroma.in_reply_to_account_acct
      output.thread_muted = pleroma.thread_muted
+      output.emoji_reactions = pleroma.emoji_reactions
    } else {
      output.text = data.content
      output.summary = data.spoiler_text
--- a/test/unit/specs/modules/statuses.spec.js
+++ b/test/unit/specs/modules/statuses.spec.js
@ -241,6 +241,51 @@ describe('Statuses module', () => {
    })
  })

+  describe('emojiReactions', () => {
+    it('increments count in existing reaction', () => {
+      const state = defaultState()
+      const status = makeMockStatus({ id: '1' })
+      status.emoji_reactions = [ { emoji: '😂', count: 1, accounts: [] } ]
+
+      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
+      expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(2)
+      expect(state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id).to.eql('me')
+    })
+
+    it('adds a new reaction', () => {
+      const state = defaultState()
+      const status = makeMockStatus({ id: '1' })
+      status.emoji_reactions = []
+
+      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
+      expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(1)
+      expect(state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id).to.eql('me')
+    })
+
+    it('decreases count in existing reaction', () => {
+      const state = defaultState()
+      const status = makeMockStatus({ id: '1' })
+      status.emoji_reactions = [ { emoji: '😂', count: 2, accounts: [{ id: 'me' }] } ]
+
+      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: {} })
+      expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(1)
+      expect(state.allStatusesObject['1'].emoji_reactions[0].accounts).to.eql([])
+    })
+
+    it('removes a reaction', () => {
+      const state = defaultState()
+      const status = makeMockStatus({ id: '1' })
+      status.emoji_reactions = [{ emoji: '😂', count: 1, accounts: [{ id: 'me' }] }]
+
+      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: {} })
+      expect(state.allStatusesObject['1'].emoji_reactions.length).to.eql(0)
+    })
+  })
+
  describe('showNewStatuses', () => {
    it('resets the minId to the min of the visible statuses when adding new to visible statuses', () => {
      const state = defaultState()
--- a/yarn.lock
+++ b/yarn.lock
@ -710,6 +710,11 @@
  dependencies:
    qrcode "^1.3.0"

+"@ungap/event-target@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@ungap/event-target/-/event-target-0.1.0.tgz#88d527d40de86c4b0c99a060ca241d755999915b"
+  integrity sha512-W2oyj0Fe1w/XhPZjkI3oUcDUAmu5P4qsdT2/2S8aMhtAWM/CE/jYWtji0pKNPDfxLI75fa5gWSEmnynKMNP/oA==
+
 "@vue/babel-helper-vue-jsx-merge-props@^1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040"
@ -2281,6 +2286,11 @@ currently-unhandled@^0.4.1:
  dependencies:
    array-find-index "^1.0.1"

+custom-event-polyfill@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
+  integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
+
 custom-event@~1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"