From aedd0794a403fd1afd46e72c8cf8feef5daaeb31 Mon Sep 17 00:00:00 2001 From: Norm <normandy@biribiri.dev> Date: Mon, 19 Sep 2022 17:39:21 +0000 Subject: [PATCH] Remote interaction with posts (#168) From: https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1419 This is the frontend side of https://akkoma.dev/AkkomaGang/akkoma/pulls/198 (merged in https://akkoma.dev/AkkomaGang/akkoma/commit/a6d85003fe0cedab924a14f1065c181a2d468a1b). Co-authored-by: Tusooa Zhu <tusooa@kazv.moe> Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/168 Co-authored-by: Norm <normandy@biribiri.dev> Co-committed-by: Norm <normandy@biribiri.dev> --- CHANGELOG.md | 1 + src/components/favorite_button/favorite_button.js | 5 ++++- src/components/favorite_button/favorite_button.vue | 10 ++++++++-- src/components/reply_button/reply_button.js | 3 +++ src/components/reply_button/reply_button.vue | 10 ++++++++-- src/components/retweet_button/retweet_button.js | 3 +++ src/components/retweet_button/retweet_button.vue | 10 ++++++++-- src/modules/instance.js | 14 ++++++++++++++ 8 files changed, 49 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 74bad07b..4b18ac9b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -62,6 +62,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Ability to rearrange order of attachments when uploading - Enabled users to zoom and pan images in media viewer with mouse and touch - Added frontend ui for account migration +- Implemented remote interaction with statuses ## [2.4.2] - 2022-01-09 diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js index 5cd05f73..d15699f7 100644 --- a/src/components/favorite_button/favorite_button.js +++ b/src/components/favorite_button/favorite_button.js @@ -31,7 +31,10 @@ const FavoriteButton = { } }, computed: { - ...mapGetters(['mergedConfig']) + ...mapGetters(['mergedConfig']), + remoteInteractionLink () { + return this.$store.getters.remoteInteractionLink({ statusId: this.status.id }) + } } } diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index dce25e24..7d23572e 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -13,13 +13,19 @@ :spin="animated" /> </button> - <span v-else> + <a + v-else + class="button-unstyled interactive" + target="_blank" + role="button" + :href="remoteInteractionLink" + > <FAIcon class="fa-scale-110 fa-old-padding" :title="$t('tool_tip.favorite')" :icon="['far', 'star']" /> - </span> + </a> <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0" class="action-counter" diff --git a/src/components/reply_button/reply_button.js b/src/components/reply_button/reply_button.js index c7bd2a2b..fb1c43cf 100644 --- a/src/components/reply_button/reply_button.js +++ b/src/components/reply_button/reply_button.js @@ -9,6 +9,9 @@ const ReplyButton = { computed: { loggedIn () { return !!this.$store.state.users.currentUser + }, + remoteInteractionLink () { + return this.$store.getters.remoteInteractionLink({ statusId: this.status.id }) } } } diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue index c17041da..ab493311 100644 --- a/src/components/reply_button/reply_button.vue +++ b/src/components/reply_button/reply_button.vue @@ -12,13 +12,19 @@ icon="reply" /> </button> - <span v-else> + <a + v-else + class="button-unstyled interactive" + target="_blank" + role="button" + :href="remoteInteractionLink" + > <FAIcon icon="reply" class="fa-scale-110 fa-old-padding" :title="$t('tool_tip.reply')" /> - </span> + </a> <span v-if="status.replies_count > 0" class="action-counter" diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js index 9dc4d091..15542a11 100644 --- a/src/components/retweet_button/retweet_button.js +++ b/src/components/retweet_button/retweet_button.js @@ -51,6 +51,9 @@ const RetweetButton = { }, shouldConfirmRepeat () { return this.mergedConfig.modalOnRepeat + }, + remoteInteractionLink () { + return this.$store.getters.remoteInteractionLink({ statusId: this.status.id }) } } } diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index 6bb7a283..c574f4cb 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -20,13 +20,19 @@ :title="$t('timeline.no_retweet_hint')" /> </span> - <span v-else> + <a + v-else + class="button-unstyled interactive" + target="_blank" + role="button" + :href="remoteInteractionLink" + > <FAIcon class="fa-scale-110 fa-old-padding" icon="retweet" :title="$t('tool_tip.repeat')" /> - </span> + </a> <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0" class="no-event" diff --git a/src/modules/instance.js b/src/modules/instance.js index 5ab34f85..bc8f694b 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -3,6 +3,8 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import apiService from '../services/api/api.service.js' import { instanceDefaultProperties } from './config.js' +const REMOTE_INTERACTION_URL = '/main/ostatus' + const defaultState = { // Stuff from apiConfig name: 'Pleroma FE', @@ -128,6 +130,18 @@ const instance = { }, instanceDomain (state) { return new URL(state.server).hostname + }, + remoteInteractionLink (state) { + const server = state.server.endsWith('/') ? state.server.slice(0, -1) : state.server + const link = server + REMOTE_INTERACTION_URL + + return ({ statusId, nickname }) => { + if (statusId) { + return `${link}?status_id=${statusId}` + } else { + return `${link}?nickname=${nickname}` + } + } } }, actions: {