Remote interaction with posts (#168)

From: https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1419

This is the frontend side of AkkomaGang/akkoma#198 (merged in a6d85003fe).

Co-authored-by: Tusooa Zhu <tusooa@kazv.moe>
Reviewed-on: AkkomaGang/pleroma-fe#168
Co-authored-by: Norm <normandy@biribiri.dev>
Co-committed-by: Norm <normandy@biribiri.dev>
This commit is contained in:
Norm 2022-09-19 17:39:21 +00:00 committed by floatingghost
parent 92927bb7e6
commit aedd0794a4
8 changed files with 49 additions and 7 deletions

View file

@ -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 - Ability to rearrange order of attachments when uploading
- Enabled users to zoom and pan images in media viewer with mouse and touch - Enabled users to zoom and pan images in media viewer with mouse and touch
- Added frontend ui for account migration - Added frontend ui for account migration
- Implemented remote interaction with statuses
## [2.4.2] - 2022-01-09 ## [2.4.2] - 2022-01-09

View file

@ -31,7 +31,10 @@ const FavoriteButton = {
} }
}, },
computed: { computed: {
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig']),
remoteInteractionLink () {
return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
}
} }
} }

View file

@ -13,13 +13,19 @@
:spin="animated" :spin="animated"
/> />
</button> </button>
<span v-else> <a
v-else
class="button-unstyled interactive"
target="_blank"
role="button"
:href="remoteInteractionLink"
>
<FAIcon <FAIcon
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
:icon="['far', 'star']" :icon="['far', 'star']"
/> />
</span> </a>
<span <span
v-if="!mergedConfig.hidePostStats && status.fave_num > 0" v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
class="action-counter" class="action-counter"

View file

@ -9,6 +9,9 @@ const ReplyButton = {
computed: { computed: {
loggedIn () { loggedIn () {
return !!this.$store.state.users.currentUser return !!this.$store.state.users.currentUser
},
remoteInteractionLink () {
return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
} }
} }
} }

View file

@ -12,13 +12,19 @@
icon="reply" icon="reply"
/> />
</button> </button>
<span v-else> <a
v-else
class="button-unstyled interactive"
target="_blank"
role="button"
:href="remoteInteractionLink"
>
<FAIcon <FAIcon
icon="reply" icon="reply"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
:title="$t('tool_tip.reply')" :title="$t('tool_tip.reply')"
/> />
</span> </a>
<span <span
v-if="status.replies_count > 0" v-if="status.replies_count > 0"
class="action-counter" class="action-counter"

View file

@ -51,6 +51,9 @@ const RetweetButton = {
}, },
shouldConfirmRepeat () { shouldConfirmRepeat () {
return this.mergedConfig.modalOnRepeat return this.mergedConfig.modalOnRepeat
},
remoteInteractionLink () {
return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
} }
} }
} }

View file

@ -20,13 +20,19 @@
:title="$t('timeline.no_retweet_hint')" :title="$t('timeline.no_retweet_hint')"
/> />
</span> </span>
<span v-else> <a
v-else
class="button-unstyled interactive"
target="_blank"
role="button"
:href="remoteInteractionLink"
>
<FAIcon <FAIcon
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="retweet" icon="retweet"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
/> />
</span> </a>
<span <span
v-if="!mergedConfig.hidePostStats && status.repeat_num > 0" v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
class="no-event" class="no-event"

View file

@ -3,6 +3,8 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
import apiService from '../services/api/api.service.js' import apiService from '../services/api/api.service.js'
import { instanceDefaultProperties } from './config.js' import { instanceDefaultProperties } from './config.js'
const REMOTE_INTERACTION_URL = '/main/ostatus'
const defaultState = { const defaultState = {
// Stuff from apiConfig // Stuff from apiConfig
name: 'Pleroma FE', name: 'Pleroma FE',
@ -128,6 +130,18 @@ const instance = {
}, },
instanceDomain (state) { instanceDomain (state) {
return new URL(state.server).hostname 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: { actions: {