aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/conversation/conversation.js1
-rw-r--r--src/components/react_button/react_button.js49
-rw-r--r--src/components/react_button/react_button.vue107
-rw-r--r--src/components/status/status.js21
-rw-r--r--src/components/status/status.vue48
-rw-r--r--src/i18n/en.json1
-rw-r--r--src/modules/statuses.js69
-rw-r--r--src/services/api/api.service.js28
8 files changed, 323 insertions, 1 deletions
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 08283fff..7ff0ac08 100644
--- 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('fetchEmojiReactions', id)
},
getHighlight () {
return this.isExpanded ? this.highlight : null
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
new file mode 100644
index 00000000..76a49305
--- /dev/null
+++ b/src/components/react_button/react_button.js
@@ -0,0 +1,49 @@
+import { mapGetters } from 'vuex'
+
+const ReactButton = {
+ props: ['status', 'loggedIn'],
+ data () {
+ return {
+ animated: false,
+ showTooltip: false,
+ filterWord: '',
+ popperOptions: {
+ modifiers: {
+ preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
+ }
+ }
+ }
+ },
+ methods: {
+ toggleReactionSelect () {
+ this.showTooltip = !this.showTooltip
+ },
+ 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 || []
+ },
+ classes () {
+ return {
+ 'icon-smile': true,
+ 'animate-spin': this.animated
+ }
+ },
+ ...mapGetters(['mergedConfig'])
+ }
+}
+
+export default ReactButton
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
new file mode 100644
index 00000000..f7015316
--- /dev/null
+++ b/src/components/react_button/react_button.vue
@@ -0,0 +1,107 @@
+<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="Search...">
+ </div>
+ <div class="reaction-picker">
+ <span
+ v-for="emoji in commonEmojis"
+ :key="emoji"
+ class="emoji-reaction-button"
+ @click="addReaction($event, emoji)"
+ >
+ {{ emoji }}
+ </span>
+ <div class="reaction-picker-divider" />
+ <span
+ v-for="(emoji, key) in emojis"
+ :key="key"
+ class="emoji-reaction-button"
+ @click="addReaction($event, emoji.replacement)"
+ >
+ {{ emoji.replacement }}
+ </span>
+ <div class="reaction-bottom-fader" />
+ </div>
+ </div>
+ <div
+ v-if="loggedIn"
+ @click.prevent="toggleReactionSelect"
+ >
+ <i
+ :class="classes"
+ class="button-icon favorite-button fav-active"
+ :title="$t('tool_tip.add_reaction')"
+ />
+ <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
+ </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.4em;
+ 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-reaction-button {
+ flex-basis: 20%;
+ line-height: 1.5em;
+ align-content: center;
+}
+
+.fav-active {
+ cursor: pointer;
+ animation-duration: 0.6s;
+
+ &:hover {
+ color: $fallback--cOrange;
+ color: var(--cOrange, $fallback--cOrange);
+ }
+}
+
+.favorite-button.icon-star {
+ color: $fallback--cOrange;
+ color: var(--cOrange, $fallback--cOrange);
+}
+</style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index c49e729c..18617938 100644
--- 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'
@@ -310,6 +311,9 @@ const Status = {
hidePostStats () {
return this.mergedConfig.hidePostStats
},
+ emojiReactions () {
+ return this.status.emojiReactions
+ },
...mapGetters(['mergedConfig']),
...mapState({
betterShadow: state => state.interface.browserSupport.cssFilter,
@@ -319,6 +323,7 @@ const Status = {
components: {
Attachment,
FavoriteButton,
+ ReactButton,
RetweetButton,
ExtraButtons,
PostStatusForm,
@@ -413,6 +418,22 @@ const Status = {
setMedia () {
const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
return () => this.$store.dispatch('setMedia', attachments)
+ },
+ reactedWith (emoji) {
+ return this.status.reactedWithEmoji.includes(emoji)
+ },
+ 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)
+ }
}
},
watch: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d291e762..4ea1b74b 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -354,6 +354,19 @@
</div>
</transition>
+ <div v-if="isFocused" class="emoji-reactions">
+ <button
+ v-for="(users, emoji) in emojiReactions"
+ :key="emoji"
+ class="emoji-reaction btn btn-default"
+ :class="{ 'picked-reaction': reactedWith(emoji) }"
+ @click="emojiOnClick(emoji, $event)"
+ >
+ <span v-if="users">{{ users.length }}</span>
+ <span>{{ emoji }}</span>
+ </button>
+ </div>
+
<div
v-if="!noHeading && !isPreview"
class="status-actions media-body"
@@ -382,6 +395,10 @@
:logged-in="loggedIn"
:status="status"
/>
+ <ReactButton
+ :logged-in="loggedIn"
+ :status="status"
+ />
<extra-buttons
:status="status"
@onError="showError"
@@ -772,6 +789,37 @@ $status-margin: 0.75em;
}
}
+.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;
+ :first-child {
+ margin-right: 0.25em;
+ }
+ :last-child {
+ width: 1.5em;
+ }
+ &: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);
+}
+
.button-icon.icon-reply {
&:not(.button-icon-disabled):hover,
&.button-icon-active {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 75d66b9f..c840fe6d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -639,6 +639,7 @@
"repeat": "Repeat",
"reply": "Reply",
"favorite": "Favorite",
+ "add_reaction": "Add Reaction",
"user_settings": "User Settings"
},
"upload":{
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 16dae8ce..ae6f6853 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -1,4 +1,20 @@
-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,
+ flow,
+ filter,
+ keys
+} 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 +534,32 @@ export const mutations = {
newStatus.fave_num = newStatus.favoritedBy.length
newStatus.favorited = !!newStatus.favoritedBy.find(({ id }) => currentUser.id === id)
},
+ addEmojiReactions (state, { id, emojiReactions, currentUser }) {
+ const status = state.allStatusesObject[id]
+ set(status, 'emojiReactions', emojiReactions)
+ const reactedWithEmoji = flow(keys, filter(reaction => find(reaction, { id: currentUser.id })))(emojiReactions)
+ set(status, 'reactedWithEmoji', reactedWithEmoji)
+ },
+ addOwnReaction (state, { id, emoji, currentUser }) {
+ const status = state.allStatusesObject[id]
+ status.emojiReactions = status.emojiReactions || {}
+ const listOfUsers = (status.emojiReactions && status.emojiReactions[emoji]) || []
+ const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id })
+ if (!hasSelfAlready) {
+ set(status.emojiReactions, emoji, listOfUsers.concat([{ id: currentUser.id }]))
+ set(status, 'reactedWithEmoji', emoji)
+ }
+ },
+ removeOwnReaction (state, { id, emoji, currentUser }) {
+ const status = state.allStatusesObject[id]
+ const listOfUsers = status.emojiReactions[emoji] || []
+ const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id })
+ if (hasSelfAlready) {
+ const newUsers = filter(listOfUsers, user => user.id !== currentUser.id)
+ set(status.emojiReactions, emoji, newUsers)
+ set(status, 'reactedWith', emoji)
+ }
+ },
updateStatusWithPoll (state, { id, poll }) {
const status = state.allStatusesObject[id]
status.poll = poll
@@ -622,6 +664,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('fetchEmojiReactions', 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('fetchEmojiReactions', id)
+ }
+ )
+ },
+ fetchEmojiReactions ({ rootState, commit }, id) {
+ rootState.api.backendInteractor.fetchEmojiReactions({ id }).then(
+ emojiReactions => {
+ commit('addEmojiReactions', { 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 }))
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index ef0267aa..783c2696 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -73,6 +73,9 @@ 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_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 +883,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(status => parseStatus(status))
+}
+
+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,
@@ -1107,6 +1132,9 @@ const apiService = {
fetchPoll,
fetchFavoritedByUsers,
fetchRebloggedByUsers,
+ fetchEmojiReactions,
+ reactWithEmoji,
+ unreactWithEmoji,
reportUser,
updateNotificationSettings,
search2,
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-20 10:14:04 +0000