No OneTemporary
Actions

Size

51 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index b8832ff93e..749e0a12ea 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,589 +1,591 @@
	import { uniqBy } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import AvatarList from 'src/components/avatar_list/avatar_list.vue'
	import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
	import MentionLink from 'src/components/mention_link/mention_link.vue'
	import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'
	import StatusPopover from 'src/components/status_popover/status_popover.vue'
	import Timeago from 'src/components/timeago/timeago.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserLink from 'src/components/user_link/user_link.vue'
	import UserListPopover from 'src/components/user_list_popover/user_list_popover.vue'
	import UserPopover from 'src/components/user_popover/user_popover.vue'
	import { muteFilterHits } from '../../services/status_parser/status_parser.js'
	import {
	highlightClass,
	highlightStyle,
	} from '../../services/user_highlighter/user_highlighter.js'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useScrobblesStore } from 'src/stores/scrobbles.js'
	import { useStatusesStore } from 'src/stores/statuses.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'
	import { useUsersStore } from 'src/stores/users.js'

	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAngleDoubleRight,
	faChevronDown,
	faChevronUp,
	faEllipsisH,
	faEnvelope,
	faEye,
	faEyeSlash,
	faGlobe,
	faIgloo,
	faLock,
	faLockOpen,
	faPlay,
	faPlusSquare,
	faReply,
	faRetweet,
	faSmileBeam,
	faStar,
	faThumbtack,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faEnvelope,
	faGlobe,
	faIgloo,
	faLock,
	faLockOpen,
	faTimes,
	faRetweet,
	faReply,
	faPlusSquare,
	faStar,
	faSmileBeam,
	faEllipsisH,
	faEyeSlash,
	faEye,
	faThumbtack,
	faChevronUp,
	faChevronDown,
	faAngleDoubleRight,
	faPlay,
	)

	const Status = {
	name: 'Status',
	components: {
	PostStatusForm,
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent,
	MentionLink,
	MentionsLine,
	UserPopover,
	UserLink,
	Quote: defineAsyncComponent(() => import('src/components/quote/quote.vue')),
	StatusActionButtons,
	},
	props: {
	statusId: String,
	statusoid: Object,
	replies: Array,

	expandable: Boolean,
	focused: Boolean,
	compact: Boolean,
	isPreview: Boolean,
	noHeading: Boolean,
	inlineExpanded: Boolean,
	showPinned: Boolean,
	inProfile: Boolean,
	inConversation: Boolean,
	inQuote: Boolean,

	profileUserId: String,
	simpleTree: Boolean,
	showOtherRepliesAsButton: Boolean,
	canDive: Boolean,
	ignoreMute: Boolean,

	threadDisplayStatus: String,
	},
	emits: ['goto', 'dive', 'toggleExpanded', 'suspendableStateChange'],
	data() {
	return {
	replying: false,
	unmuted: false,
	userExpanded: false,
	mediaPlaying: new Set(),
	error: null,
	headTailLinks: null,
	}
	},
	created() {
	useScrobblesStore().getLatestScrobble(this.status.user.id)
	},
	computed: {
	status() {
	return this.statusoid ?? useStatusesStore().allStatuses.get(this.statusId)
	},
	- retweetedStatus() {
	+ repeatedStatus() {
	return useStatusesStore().allStatuses.get(this.status.retweeted_status.id)
	},
	repeater() {
	return useUsersStore().findUser(this.status.user.id)
	},
	user() {
	return useUsersStore().findUser(this.mainStatus.user.id)
	},
	showReasonMutedThread() {
	return (
	(this.mainStatus.thread_muted \|\|
	this.smainSatus.reblog?.thread_muted) &&
	!this.inConversation
	)
	},
	allowNonSquareEmoji() {
	return this.mergedConfig.nonSquareEmoji
	},
	pauseMfm() {
	return this.mergedConfig.pauseMfm
	},
	scaleMfm() {
	return this.mergedConfig.scaleMfm
	},
	repeaterClass() {
	return highlightClass(this.repeater)
	},
	userClass() {
	return highlightClass(this.user)
	},
	- deleted() {
	+ isDeleted() {
	return this.status.deleted
	},
	repeaterStyle() {
	return highlightStyle(
	useUserHighlightStore().get(this.repeater.screen_name),
	)
	},
	userStyle() {
	if (this.noHeading) return
	return highlightStyle(useUserHighlightStore().get(this.user.screen_name))
	},
	userProfileLink() {
	return this.generateUserProfileLink(this.user.id, this.user.screen_name)
	},
	replyProfileLink() {
	if (this.isReply) {
	const user = useUsersStore().findUser(
	this.mainStatus.in_reply_to_user_id,
	)
	- // FIXME Why user not found sometimes???
	- return user ? user.statusnet_profile_url : 'NOT_FOUND'
	+
	+ // User referenced in post might not be yet present in store
	+ // since their data is not included in status data
	+ return user?.statusnet_profile_url
	}
	},
	- retweet() {
	+ isRepeat() {
	return !!this.status.retweeted_status
	},
	repeaterName() {
	return this.status.user.name \|\| this.status.user.screen_name_ui
	},
	repeaterHtml() {
	return this.status.user.name
	},
	repeaterProfileLink() {
	return this.generateUserProfileLink(
	this.repeater.id,
	this.repeater.screen_name,
	)
	},
	mainStatus() {
	- if (this.retweet) {
	- return this.retweetedStatus
	+ if (this.isRepeat) {
	+ return this.repeatedStatus
	} else {
	return this.status
	}
	},
	loggedIn() {
	return !!this.currentUser
	},
	muteFilterHits() {
	return muteFilterHits(
	Object.values(
	useSyncConfigStore().prefsStorage.simple.muteFilters \|\| {},
	),
	this.status,
	)
	},
	botStatus() {
	return this.status.user.actor_type === 'Service'
	},
	sensitiveStatus() {
	return this.status.nsfw
	},
	mentionsLine() {
	if (!this.headTailLinks) return []
	const writtenSet = new Set(
	this.headTailLinks.writtenMentions.map((_) => _.url),
	)
	return this.mainStatus.attentions
	.filter((attn) => {
	// no reply user
	return (
	attn.id !== this.mainStatus.in_reply_to_user_id &&
	// no self-replies
	attn.statusnet_profile_url !==
	this.mainStatus.user.statusnet_profile_url &&
	// don't include if mentions is written
	!writtenSet.has(attn.statusnet_profile_url)
	)
	})
	.map((attn) => ({
	url: attn.statusnet_profile_url,
	content: attn.screen_name,
	userId: attn.id,
	}))
	},
	hasMentionsLine() {
	return this.mentionsLine.length > 0
	},
	muteReasons() {
	return [
	this.userIsMuted ? 'user' : null,
	this.mainStatus.thread_muted ? 'thread' : null,
	this.muteFilterHits.length > 0 ? 'filtered' : null,
	this.muteBotStatuses && this.botStatus ? 'bot' : null,
	this.muteSensitiveStatuses && this.sensitiveStatus ? 'nsfw' : null,
	].filter(Boolean)
	},
	muteLocalized() {
	if (this.muteReasons.length === 0) return null
	const mainReason = () => {
	switch (this.muteReasons[0]) {
	case 'user':
	return this.$t('status.muted_user')
	case 'thread':
	return this.$t('status.thread_muted')
	case 'filtered':
	return this.$t(
	'status.muted_filters',
	{
	name: this.muteFilterHits[0].name,
	filterMore: this.muteFilterHits.length - 1,
	},
	this.muteFilterHits.length,
	)
	case 'bot':
	return this.$t('status.bot_muted')
	case 'nsfw':
	return this.$t('status.sensitive_muted')
	}
	}
	if (this.muteReasons.length > 1) {
	return this.$t(
	'status.multi_reason_mute',
	{
	main: mainReason(),
	numReasonsMore: this.muteReasons.length - 1,
	},
	this.muteReasons.length - 1,
	)
	} else {
	return mainReason()
	}
	},
	muted() {
	if (this.ignoreMute) return false
	if (this.status.user.id === this.currentUser?.id) return false
	return !this.unmuted && !this.shouldNotMute && this.muteReasons.length > 0
	},
	userIsMuted() {
	if (this.status.user.id === this.currentUser?.id) return false
	const { reblog } = this.status
	const relationship = useUsersStore().relationship(this.status.user.id)
	const relationshipReblog =
	reblog && useUsersStore().relationship(reblog.user.id)
	return (
	(status.muted && !status.thread_muted) \|\|
	// Reprööt of a muted post according to BE
	(reblog?.muted && !reblog.thread_muted) \|\|
	// Muted user
	relationship.muting \|\|
	// Muted user of a reprööt
	relationshipReblog?.muting
	)
	},
	shouldNotMute() {
	if (this.ignoreMute) return true
	if (this.focused) return true
	const { reblog } = this.mainStatus
	return (
	((this.inProfile &&
	// Don't mute user's posts on user timeline (except reblogs)
	((!reblog && this.mainStatus.user.id === this.profileUserId) \|\|
	// Same as above but also allow self-reblogs
	reblog?.user.id === this.profileUserId)) \|\|
	// Don't mute statuses in muted conversation when said conversation is opened
	(this.inConversation && this.mainStatus.thread_muted)) &&
	// No excuses if post has muted words
	!this.muteFilterHits.length > 0
	)
	},
	hideMutedUsers() {
	return this.mergedConfig.hideMutedPosts
	},
	hideMutedThreads() {
	return this.mergedConfig.hideMutedThreads
	},
	hideFilteredStatuses() {
	return this.mergedConfig.hideFilteredStatuses
	},
	hideWordFilteredPosts() {
	return this.mergedConfig.hideWordFilteredPosts
	},
	hideStatus() {
	return (
	!this.shouldNotMute &&
	((this.muted && this.hideFilteredStatuses) \|\|
	(this.userIsMuted && this.hideMutedUsers) \|\|
	(this.status.thread_muted && this.hideMutedThreads) \|\|
	(this.muteFilterHits.length > 0 && this.hideWordFilteredPosts) \|\|
	this.muteFilterHits.some((x) => x.hide))
	)
	},
	isReply() {
	return !!(
	this.mainStatus.in_reply_to_status_id &&
	this.mainStatus.in_reply_to_user_id
	)
	},
	replyToName() {
	if (this.mainStatus.in_reply_to_screen_name) {
	return this.status.in_reply_to_screen_name
	} else {
	const user = useUsersStore().findUser(
	this.mainStatus.in_reply_to_user_id,
	)
	return user?.screen_name_ui
	}
	},
	combinedFavsAndRepeatsUsers() {
	// Use the status from the global status repository since favs and repeats are saved in it
	const combinedUsers = [].concat(
	this.mainStatus.favoritedBy,
	this.mainStatus.rebloggedBy,
	)
	return uniqBy(combinedUsers, 'id')
	},
	tags() {
	return this.status.tags
	.filter((tagObj) => Object.hasOwn(tagObj, 'name'))
	.map((tagObj) => tagObj.name)
	.join(' ')
	},
	hidePostStats() {
	return this.mergedConfig.hidePostStats
	},
	shouldDisplayFavsAndRepeats() {
	return (
	!this.hidePostStats &&
	this.focused &&
	(this.combinedFavsAndRepeatsUsers.length > 0 \|\|
	this.mainStatus.quotes_count)
	)
	},
	muteBotStatuses() {
	return this.mergedConfig.muteBotStatuses
	},
	muteSensitiveStatuses() {
	return this.mergedConfig.muteSensitiveStatuses
	},
	hideBotIndication() {
	return this.mergedConfig.hideBotIndication
	},
	currentUser() {
	return useUsersStore().currentUser
	},
	mergedConfig() {
	return useMergedConfigStore().mergedConfig
	},
	isSuspendable() {
	return !this.replying && this.mediaPlaying.size === 0
	},
	inThreadForest() {
	return !!this.threadDisplayStatus
	},
	threadShowing() {
	return this.threadDisplayStatus === 'showing'
	},
	visibilityLocalized() {
	return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
	},
	isEdited() {
	return this.mainStatus.edited_at !== null
	},
	editingAvailable() {
	return useInstanceCapabilitiesStore().editingAvailable
	},
	quoteId() {
	return this.mainStatus.quote_id
	},
	quoteUrl() {
	return this.mainStatus.quote_url
	},
	quoteVisible() {
	return this.mainStatus.quote_visible
	},
	quoteExpanded() {
	return !this.inQuote
	},
	scrobblePresent() {
	if (this.mergedConfig.hideScrobbles) return false
	if (!this.status.user?.latestScrobble) return false
	const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
	const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
	let multiplier = 60 * 1000 // minutes is smallest unit
	switch (unit) {
	case 'm':
	break
	case 'h':
	multiplier *= 60 // hour
	break
	case 'd':
	multiplier *= 60 // hour
	multiplier *= 24 // day
	break
	}
	const maxAge = Number(value) * multiplier
	const createdAt = Date.parse(this.status.user.latestScrobble.created_at)
	const age = Date.now() - createdAt
	if (age > maxAge) return false
	return this.status.user.latestScrobble.artist
	},
	scrobble() {
	return this.status.user?.latestScrobble
	},
	},
	methods: {
	visibilityIcon(visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	case 'local':
	return 'igloo'
	default:
	return 'globe'
	}
	},
	showError(error) {
	this.error = error
	},
	clearError() {
	this.error = undefined
	},
	toggleReplyForm() {
	if (this.replying) {
	// This emits 'close-accepted' if successful
	// which in turn callse closeReply()
	this.$refs.postStatusForm.requestClose()
	} else {
	this.replying = true
	}
	},
	closeReplyForm() {
	this.replying = false
	},
	gotoOriginal(id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded() {
	this.$emit('toggleExpanded')
	},
	toggleMute() {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded() {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink(id, name) {
	return generateProfileLink(
	id,
	name,
	useInstanceStore().restrictedNicknames,
	)
	},
	addMediaPlaying(id) {
	this.mediaPlaying.add(id)
	},
	removeMediaPlaying(id) {
	this.mediaPlaying.delete(id)
	},
	setHeadTailLinks(headTailLinks) {
	this.headTailLinks = headTailLinks
	},
	toggleThreadDisplay() {
	this.controlledToggleThreadDisplay()
	},
	scrollIfFocused(focused) {
	if (this.$el.getBoundingClientRect == null) return
	if (focused) {
	const rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= window.innerHeight - 50) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	},
	},
	watch: {
	focused: function (id) {
	this.scrollIfFocused(id)
	},
	'mainStatus.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (
	this.focused &&
	this.mainStatus.rebloggedBy &&
	this.mainStatus.rebloggedBy.length !== num
	) {
	useStatusesStore().fetchRepeats(this.status.id)
	}
	},
	'mainStatus.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (
	this.focused &&
	this.mainStatus.favoritedBy &&
	this.mainStatus.favoritedBy.length !== num
	) {
	useStatusesStore().fetchFavs(this.status.id)
	}
	},
	isSuspendable: function (suspend) {
	this.$emit('suspendableStateChange', { id: this.status.id, suspend })
	},
	},
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index a42432f259..38e75857b9 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,557 +1,557 @@
	<template>
	<div
	v-if="!hideStatus"
	ref="root"
	class="Status"
	:class="[{ '-focused': focused }, { '-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<button
	class="fa-scale-110 fa-old-padding"
	type="button"
	@click="clearError"
	>
	<FAIcon icon="times" />
	</button>
	</div>
	<template v-if="muted && !isPreview">
	<div class="status-container muted">
	<small class="status-username">
	<FAIcon
	- v-if="muted && retweet"
	+ v-if="muted && isRepeat"
	class="fa-scale-110 fa-old-padding repeat-icon"
	icon="retweet"
	/>
	<user-link
	:user="repeater"
	:at="false"
	/>
	</small>
	<small class="mute-reason">
	{{ muteLocalized }}
	</small>
	<button
	class="unmute button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	icon="eye-slash"
	class="fa-scale-110 fa-old-padding"
	/>
	</button>
	</div>
	</template>
	<template v-else>
	<div
	- v-if="retweet && !noHeading && !inConversation"
	+ v-if="isRepeat && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="status-container repeat-info"
	>
	<UserAvatar
	class="left-side repeater-avatar"
	:user-id="repeater.id"
	/>
	<div class="right-side faint">
	<bdi
	class="status-username repeater-name"
	:title="repeaterName"
	>
	<router-link
	v-if="repeaterHtml"
	:to="repeaterProfileLink"
	>
	<RichContent
	:html="repeaterHtml"
	:emoji="repeater.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	:pause-mfm="pauseMfm"
	:scale-mfm="scaleMfm"
	:is-local="repeater.is_local"
	/>
	</router-link>
	<router-link
	v-else
	:to="repeaterProfileLink"
	>{{ repeaterName }}</router-link>
	</bdi>
	<div class="repeat-label">
	<FAIcon
	icon="retweet"
	class="repeat-icon"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>
	</div>

	<div
	- v-if="!deleted"
	- :class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
	+ v-if="!isDeleted"
	+ :class="[userClass, { highlighted: userStyle, '-repeat': isRepeat && !inConversation }]"
	:style="[ userStyle ]"
	class="status-container"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	class="left-side"
	>
	<a
	v-if="user.name"
	:href="$router.resolve(userProfileLink).href"
	@click.prevent
	>
	<UserPopover
	:user-id="user.id"
	:overlay-centers="true"
	>
	<UserAvatar
	class="post-avatar"
	:compact="compact"
	:user-id="user.id"
	/>
	</UserPopover>
	</a>
	<UserAvatar
	v-else
	:user-id="user.id"
	class="post-avatar"
	:compact="compact"
	:title="$t('status.unknown_user_info')"
	/>
	</div>
	<div class="right-side">
	<div
	v-if="!noHeading"
	class="status-heading"
	>
	<div class="heading-name-row">
	<div
	v-if="user"
	class="heading-left"
	>
	<h4
	v-if="user.name_html"
	class="status-username"
	:title="user.name"
	>
	<RichContent
	:html="user.name"
	:emoji="user.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	:is-local="user.is_local"
	/>
	</h4>
	<h4
	v-else
	class="status-username"
	:title="user.name"
	>
	{{ user.name }}
	</h4>
	<user-link
	class="account-name"
	:title="user.screen_name_ui"
	:user="user"
	:at="false"
	/>
	<img
	v-if="!!(user && user.favicon)"
	class="status-favicon"
	:src="user.favicon"
	>
	</div>

	<span class="heading-right">
	<span
	v-if="showPinned"
	class="pin"
	>
	<FAIcon
	icon="thumbtack"
	class="faint"
	/>
	<span class="faint">{{ $t('status.pinned') }}</span>
	</span>
	<router-link
	class="timeago faint"
	:to="{ name: 'conversation', params: { id: status.id } }"
	>
	<Timeago
	:time="mainStatus.created_at"
	:auto-update="60"
	/>
	</router-link>
	<span
	v-if="mainStatus.visibility"
	class="visibility-icon"
	:title="visibilityLocalized"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="visibilityIcon(status.visibility)"
	/>
	</span>
	<button
	v-if="expandable && !isPreview"
	class="button-unstyled"
	:title="$t('status.expand')"
	@click.prevent="toggleExpanded"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	icon="plus-square"
	/>
	</button>
	<button
	v-if="unmuted"
	class="button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	class="fa-scale-110"
	/>
	</button>
	<button
	v-if="inThreadForest && replies?.length && !simpleTree"
	class="button-unstyled"
	:title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
	:aria-expanded="threadShowing ? 'true' : 'false'"
	@click.prevent="toggleThreadDisplay"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="threadShowing ? 'chevron-up' : 'chevron-down'"
	/>
	</button>
	<button
	v-if="canDive && !simpleTree"
	class="button-unstyled"
	:title="$t('status.show_only_conversation_under_this')"
	@click.prevent="$emit('dive')"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="'angle-double-right'"
	/>
	</button>
	</span>
	</div>
	<div
	v-if="scrobblePresent"
	class="status-rich-presence"
	>
	<a
	v-if="scrobble.externalLink"
	:href="scrobble.externalLink"
	target="_blank"
	>
	{{ scrobble.artist }} — {{ scrobble.title }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="play"
	/>
	<span class="status-rich-presence-time">
	<Timeago
	template-key="time.in_past"
	:time="scrobble.created_at"
	:auto-update="60"
	/>
	</span>
	</a>
	<span v-if="!scrobble.externalLink">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="music"
	/>
	{{ scrobble.artist }} — {{ scrobble.title }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="play"
	/>
	<span class="status-rich-presence-time">
	<Timeago
	template-key="time.in_past"
	:time="scrobble.created_at"
	:auto-update="60"
	/>
	</span>
	</span>
	</div>
	<div
	v-if="isReply \|\| hasMentionsLine"
	class="heading-reply-row"
	>
	<span
	v-if="isReply"
	class="glued-label reply-glued-label"
	>
	<i18n-t
	keypath="status.reply_to_with_arg"
	scope="global"
	>
	<template #replyToWithIcon>
	<StatusPopover
	v-if="!isPreview"
	:status-id="mainStatus.parent_visible && mainStatus.in_reply_to_status_id"
	class="reply-to-popover"
	style="min-width: 0;"
	:class="{ '-strikethrough': !mainStatus.parent_visible }"
	>
	<button
	class="button-unstyled reply-to"
	:aria-label="$t('tool_tip.reply')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<i18n-t
	keypath="status.reply_to_with_icon"
	scope="global"
	>
	<template #icon>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="reply"
	flip="horizontal"
	/>
	</template>
	<template #replyTo>
	<span
	class="reply-to-text"
	>
	{{ $t('status.reply_to') }}
	</span>
	</template>
	</i18n-t>
	</button>
	</StatusPopover>

	<span
	v-else
	class="reply-to-no-popover"
	>
	<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
	</span>
	</template>
	<template #user>
	<MentionLink
	:content="replyToName"
	:url="replyProfileLink"
	:user-id="status.in_reply_to_user_id"
	:user-screen-name="status.in_reply_to_screen_name"
	/>
	</template>
	</i18n-t>
	</span>

	<!-- This little wrapper is made for sole purpose of "gluing" -->
	<!-- "Mentions" label to the first mention -->
	<span
	v-if="hasMentionsLine"
	class="glued-label"
	>
	<span
	class="mentions"
	:aria-label="$t('tool_tip.mentions')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<span
	class="mentions-text"
	>
	{{ $t('status.mentions') }}
	</span>
	</span>
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(0, 1)"
	class="mentions-line-first"
	/>
	</span>
	{{ ' ' }}
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(1)"
	class="mentions-line"
	/>
	</div>
	<div
	v-if="isEdited && editingAvailable && !isPreview"
	class="heading-edited-row"
	>
	<i18n-t
	scope="global"
	keypath="status.edited_at"
	tag="span"
	>
	<template #time>
	<Timeago
	template-key="time.in_past"
	:time="mainStatus.edited_at"
	:auto-update="60"
	:long-format="true"
	/>
	</template>
	</i18n-t>
	</div>
	</div>

	<StatusContent
	ref="content"
	:status="mainStatus"
	:focused="focused"
	:in-conversation="inConversation"
	@mediaplay="addMediaPlaying($event)"
	@mediapause="removeMediaPlaying($event)"
	@parse-ready="setHeadTailLinks"
	/>

	<Quote
	:status-id="quoteId"
	:status-url="quoteUrl"
	:status-visible="quoteVisible"
	:initially-expanded="quoteExpanded"
	/>

	<div
	v-if="inConversation && !isPreview && replies?.length"
	class="replies"
	>
	<button
	v-if="showOtherRepliesAsButton && replies.length > 1"
	class="button-unstyled -link"
	:title="$t('status.ancestor_follow', { numReplies: replies.length - 1 }, replies.length - 1)"
	@click.prevent="$emit('dive')"
	>
	{{ $t('status.replies_list_with_others', { numReplies: replies.length - 1 }, replies.length - 1) }}
	</button>
	<span
	v-else
	class="faint"
	>
	{{ $t('status.replies_list') }}
	</span>
	<StatusPopover
	v-for="reply in replies"
	:key="reply.id"
	:status-id="reply.id"
	>
	<button
	class="button-unstyled -link reply-link"
	@click.prevent="gotoOriginal(reply.id)"
	>
	{{ reply.name }}
	</button>
	</StatusPopover>
	</div>

	<transition name="fade">
	<div
	v-if="shouldDisplayFavsAndRepeats"
	class="favs-repeated-users"
	>
	<div class="stats">
	<UserListPopover
	v-if="mainStatus.rebloggedBy && mainStatus.rebloggedBy.length > 0"
	:users="mainStatus.rebloggedBy"
	>
	<div class="stat-count">
	<a class="stat-title">{{ $t('status.repeats') }}</a>
	<div class="stat-number">
	{{ mainStatus.rebloggedBy.length }}
	</div>
	</div>
	</UserListPopover>
	<UserListPopover
	v-if="mainStatus.favoritedBy && mainStatus.favoritedBy.length > 0"
	:users="mainStatus.favoritedBy"
	>
	<div
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.favorites') }}</a>
	<div class="stat-number">
	{{ mainStatus.favoritedBy.length }}
	</div>
	</div>
	</UserListPopover>
	<router-link
	v-if="mainStatus.quotes_count > 0"
	:to="{ name: 'quotes', params: { id: status.id } }"
	>
	<div
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.quotes') }}</a>
	<div class="stat-number">
	{{ mainStatus.quotes_count }}
	</div>
	</div>
	</router-link>
	<div class="avatar-row">
	<AvatarList :users="combinedFavsAndRepeatsUsers" />
	</div>
	</div>
	</div>
	</transition>

	<EmojiReactions
	v-if="(mergedConfig.emojiReactionsOnTimeline \|\| focused) && (!noHeading && !isPreview)"
	:status="mainStatus"
	/>

	<StatusActionButtons
	v-if="!noHeading && !isPreview"
	class="status-action-buttons"
	:status="mainStatus"
	:replying="replying"
	@toggle-replying="toggleReplyForm"
	/>
	</div>
	</div>
	<div
	v-else
	class="gravestone"
	>
	<div class="left-side">
	<UserAvatar
	class="post-avatar"
	:compact="compact"
	/>
	</div>
	<div class="right-side">
	<div class="deleted-text">
	{{ $t('status.status_deleted') }}
	</div>
	</div>
	</div>
	<div
	v-if="replying"
	class="status-container reply-form"
	>
	<PostStatusForm
	ref="postStatusForm"
	class="reply-body"
	:closeable="true"
	:replied-status="status"
	@posted="closeReplyForm"
	@draft-done="closeReplyForm"
	@close-accepted="closeReplyForm"
	/>
	</div>
	</template>
	</div>
	</template>

	<script src="./status.js"></script>

	<style src="./status.scss" lang="scss"></style>
	diff --git a/src/stores/statuses.js b/src/stores/statuses.js
	index 91a3448a80..a08d1293bb 100644
	--- a/src/stores/statuses.js
	+++ b/src/stores/statuses.js
	@@ -1,545 +1,549 @@
	import { defineStore } from 'pinia'

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useStreamingStore } from 'src/stores/streaming.js'
	import { useUsersStore } from 'src/stores/users.js'

	import {
	fetchEmojiReactions,
	fetchFavoritedByUsers,
	fetchRebloggedByUsers,
	fetchStatus,
	fetchStatusSource,
	} from 'src/api/public.js'
	import {
	bookmarkStatus,
	deleteStatus,
	favorite,
	muteConversation,
	pinOwnStatus,
	reactWithEmoji,
	retweet,
	unbookmarkStatus,
	unfavorite,
	unmuteConversation,
	unpinOwnStatus,
	unreactWithEmoji,
	unretweet,
	} from 'src/api/user.js'

	export const defaultState = () => ({
	allStatuses: new Map(),
	timestamps: new WeakMap(),
	scrobblesNextFetch: {},
	conversations: new Map(),
	favorites: new Set(),
	socket: null,
	})

	export const useStatusesStore = defineStore('statuses', {
	state: defaultState,
	actions: {
	// Init
	attachSocket() {
	const et = new EventTarget()
	const handleUpdate = ({ data, timestamp }) =>
	this.addNewStatuses({ statuses: data, timestamp })
	const handleDelete = ({ data }) =>
	data.forEach((id) => this.setDeleted(id))

	const socket = {
	et,
	handlers: {
	handleUpdate,
	handleDelete,
	},
	}

	et.addEventListener('update', handleUpdate)
	et.addEventListener('status.update', handleUpdate)
	et.addEventListener('delete', handleDelete)

	useStreamingStore().addSubscriber(socket)
	this.socket = socket
	},
	resetStatuses() {
	this.socket.et.removeEventListener('update', this.socket.handleUpdate)
	this.socket.et.removeEventListener(
	'status.update',
	this.socket.handleUpdate,
	)
	this.socket.et.removeEventListener('delete', this.socket.handleDelete)

	const emptyState = defaultState()
	Object.entries(emptyState).forEach(([key, value]) => {
	this[key] = value
	})
	},

	addNewStatuses({ statuses, timestamp }) {
	// Sanity check
	if (!Array.isArray(statuses)) {
	throw new TypeError("Statuses aren't an array!")
	}

	// addStatus should always return "main" status,
	// not "sub-status" i.e. retweeted/quoted/liked status
	// in case of likes (which are not statuses) it should return null
	const addStatus = (data) => {
	const [status] = this.mergeOrAdd(this.allStatuses, data, timestamp)

	// Add to conversation
	const conversations = this.conversations
	const conversationId = status.statusnet_conversation_id

	if (conversations.has(conversationId)) {
	conversations.get(conversationId).add(status.id)
	} else {
	conversations.set(conversationId, new Set([status.id]))
	}

	// Work on quote
	if (status.quote) {
	status.quote = addStatus(status.quote)
	}

	return status
	}

	const processors = {
	status: (status) => {
	return addStatus(status)
	},
	edit: (status) => {
	return addStatus(status)
	},
	retweet: (status) => {
	- // RetweetedStatuses are never shown immediately
	if (status.retweeted_status) addStatus(status.retweeted_status)
	return addStatus(status)
	},
	default: (unknown) => {
	console.warn('unknown status type', unknown)
	return null
	},
	}

	return statuses.map((status) => {
	const type = status.type
	const processor = processors[type] ?? processors.default
	return processor(status)
	})
	},
	mergeOrAdd(map, status, timestamp) {
	const existing = map.get(status.id) ?? {}
	const oldTimestamp = this.timestamps.get(existing)

	const { user: unused0, ...old } = existing
	const { user: statusUser, ...neu } = status

	const [user] = useUsersStore().addNewUsers({
	data: statusUser,
	timestamp,
	})

	+ const { in_reply_to_user_id } = status
	+ if (in_reply_to_user_id) {
	+ useUsersStore().fetchUserIfMissing({ id: in_reply_to_user_id })
	+ }
	+
	existing.user = user // reactive update in case we return old

	// implicit: if oldTimestamp is undefined this will still be false
	if (oldTimestamp > timestamp) return [existing, false] // not overwriting old data with new

	const newStatus = {
	...old,
	...neu,
	user,
	}

	map.set(newStatus.id, newStatus)

	this.timestamps.set(newStatus, timestamp)

	return [map.get(newStatus.id), true]
	},

	// Fetches
	fetchStatus(id) {
	return fetchStatus({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data: status, timestamp }) =>
	this.addNewStatuses({ statuses: [status], timestamp }),
	)
	},
	fetchStatusSource(id) {
	return fetchStatusSource({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data)
	},
	fetchEmojiReactions(id) {
	return fetchEmojiReactions({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data: emojiReactions }) => {
	this.addEmojiReactionsBy({
	id,
	emojiReactions,
	})
	})
	},
	fetchFavs(id) {
	return fetchFavoritedByUsers({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data: favoritedByUsers }) =>
	this.addFavs({
	id,
	favoritedByUsers,
	}),
	)
	},
	fetchRepeats(id) {
	return fetchRebloggedByUsers({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data: rebloggedByUsers }) =>
	this.addRepeats({
	id,
	rebloggedByUsers,
	}),
	)
	},
	fetchFavsAndRepeats(id) {
	return Promise.all([this.fetchFavs(id), this.fetchRepeats(id)])
	},

	// Updates
	addRepeats({ id, rebloggedByUsers }) {
	const currentUser = useUsersStore().currentUser
	const newStatus = this.allStatuses.get(id)
	newStatus.rebloggedBy = rebloggedByUsers.filter(Boolean)
	// repeats stats can be incorrect based on polling condition, let's update them using the most recent data
	newStatus.repeat_num = newStatus.rebloggedBy.length
	newStatus.repeated = !!newStatus.rebloggedBy.find(
	({ id }) => currentUser?.id === id,
	)
	},
	addFavs({ id, favoritedByUsers }) {
	const currentUser = useUsersStore().currentUser
	const newStatus = this.allStatuses.get(id)
	newStatus.favoritedBy = favoritedByUsers.filter(Boolean)
	// favorites stats can be incorrect based on polling condition, let's update them using the most recent data
	newStatus.fave_num = newStatus.favoritedBy.length
	newStatus.favorited = !!newStatus.favoritedBy.find(
	({ id }) => currentUser?.id === id,
	)
	},
	addEmojiReactionsBy({ id, emojiReactions }) {
	const status = this.allStatuses.get(id)
	status.emoji_reactions = emojiReactions
	},
	updateStatusWithPoll(id, poll) {
	const status = this.allStatuses.get(id)
	status.poll = poll
	},

	// Actions
	requestInteract({ name, id, optimisticCall, apiCall, argument, value }) {
	const oldValue = !value // Assumption

	const apiArgs = (() => {
	switch (name) {
	case 'emoji':
	return { emoji: argument }
	case 'bookmark':
	return { folder_id: argument }
	default:
	return {}
	}
	})()

	// Optimistic
	optimisticCall(id, value, argument)

	return apiCall({
	id,
	...apiArgs,
	credentials: useOAuthStore().token,
	})
	.then(({ data: status, timestamp }) => {
	this.addNewStatuses({
	statuses: [status],
	timestamp,
	})
	})
	.catch((error) => {
	optimisticCall(id, oldValue, argument)

	console.error('Interact Error', error)
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'status.interact_error',
	messageArgs: [error],
	timeout: 5000,
	})
	})
	},

	/// Favorite
	favorite(id) {
	return this.requestInteract({
	name: 'favorite',
	id,
	apiCall: favorite,
	optimisticCall: this.setFavorited,
	value: true,
	})
	},
	unfavorite(id) {
	return this.requestInteract({
	name: 'favorite',
	id,
	apiCall: unfavorite,
	optimisticCall: this.setFavorited,
	value: false,
	})
	},
	setFavorited(id, value) {
	const newStatus = this.allStatuses.get(id)

	if (newStatus.favorited !== value) {
	if (value) {
	newStatus.fave_num++
	} else {
	newStatus.fave_num--
	}
	}

	newStatus.favorited = value
	},

	/// Reprööt
	retweet(id) {
	return this.requestInteract({
	name: 'retweet',
	id,
	apiCall: retweet,
	optimisticCall: this.setRetweeted,
	value: true,
	})
	},
	unretweet(id) {
	return this.requestInteract({
	name: 'retweet',
	id,
	apiCall: unretweet,
	optimisticCall: this.setRetweeted,
	value: false,
	})
	},
	setRetweeted(id, value) {
	const newStatus = this.allStatuses.get(id)

	if (newStatus.repeated !== value) {
	if (value) {
	newStatus.repeat_num++
	} else {
	newStatus.repeat_num--
	}
	}

	newStatus.repeated = value
	},

	// React
	reactWithEmoji(id, emoji) {
	return this.requestInteract({
	name: 'emoji',
	id,
	apiCall: reactWithEmoji,
	optimisticCall: this.setOwnReaction,
	argument: emoji,
	value: true,
	})
	},
	unreactWithEmoji(id, emoji) {
	return this.requestInteract({
	name: 'emoji',
	id,
	apiCall: unreactWithEmoji,
	optimisticCall: this.setOwnReaction,
	argument: emoji,
	value: false,
	})
	},
	setOwnReaction(id, value, emoji) {
	const currentUser = useUsersStore().currentUser
	const status = this.allStatuses.get(id)
	const reactionIndex = status.emoji_reactions.findIndex(
	(react) => react.name === emoji,
	)
	const reactionPresent = reactionIndex >= 0
	if (!value && !reactionPresent) return

	const reaction = status.emoji_reactions[reactionIndex] \|\| {
	name: emoji,
	count: 0,
	accounts: [],
	}

	const count = value ? reaction.count + 1 : reaction.count - 1

	const accounts = value
	? [...reaction.accounts, currentUser]
	: reaction.accounts.filter((acc) => acc.id !== currentUser.id)

	const newReaction = {
	...reaction,
	count,
	me: value,
	accounts,
	}

	if (reactionPresent && count > 0) {
	status.emoji_reactions[reactionIndex] = newReaction
	} else if (count === 0) {
	status.emoji_reactions = status.emoji_reactions.filter(
	(r) => r.name !== emoji,
	)
	} else {
	status.emoji_reactions.push(newReaction)
	}
	},

	/// Bookmark
	bookmark(id, bookmark_folder_id) {
	return this.requestInteract({
	name: 'bookmark',
	id,
	apiCall: bookmarkStatus,
	optimisticCall: this.setBookmarked,
	argument: bookmark_folder_id,
	value: true,
	})
	},
	unbookmark(id) {
	return this.requestInteract({
	name: 'bookmark',
	id,
	apiCall: unbookmarkStatus,
	optimisticCall: this.setBookmarked,
	value: false,
	})
	},
	setBookmarked(id, value, bookmark_folder_id) {
	const status = this.allStatuses.get(id)
	status.bookmarked = value

	// When unbookmarking we don't specify folder so we wanna keep
	// reference to the folder even when setting bookmarked to false
	// the proper reference will be updated when api call resolves
	if (bookmark_folder_id) {
	status.bookmark_folder_id = value ? bookmark_folder_id : null
	}
	},

	/// Mute
	muteConversation(id) {
	return this.requestInteract({
	name: 'mute',
	id,
	apiCall: muteConversation,
	optimisticCall: this.setMutedStatus,
	value: true,
	})
	},
	unmuteConversation(id) {
	return this.requestInteract({
	name: 'mute',
	id,
	apiCall: unmuteConversation,
	optimisticCall: this.setMutedStatus,
	value: false,
	})
	},
	setMutedStatus(id, value) {
	// Setting thread_muted flag on all other known statuses
	// belonging to same conversation
	const newStatus = this.allStatuses.get(id)
	newStatus.thread_muted = value

	if (newStatus.thread_muted !== undefined) {
	this.conversations
	.get(newStatus.statusnet_conversation_id)
	.forEach((statusId) => {
	this.allStatuses.get(statusId).thread_muted = value
	})
	}
	},

	/// Pin
	pinStatus(id) {
	return this.requestInteract({
	name: 'pin',
	id,
	apiCall: pinOwnStatus,
	optimisticCall: () => {
	/* no-op */
	},
	value: true,
	})
	},
	unpinStatus(id) {
	return this.requestInteract({
	name: 'pin',
	id,
	apiCall: unpinOwnStatus,
	optimisticCall: () => {
	/* no-op */
	},
	value: false,
	})
	},

	/// Delete
	deleteStatus(id) {
	return deleteStatus({
	id,
	credentials: useOAuthStore().token,
	})
	.then(() => {
	this.setDeleted(id)
	})
	.catch((e) => {
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'status.delete_error',
	messageArgs: [e.message],
	timeout: 5000,
	})
	})
	},
	setDeleted(id) {
	const newStatus = this.allStatuses.get(id)
	if (newStatus) newStatus.deleted = true
	},

	// For when blocking a user
	wipeUserStatuses(userId) {
	const removed = new Set()
	this.allStatuses.forEach((status) => {
	if (status.user.id === userId) {
	this.allStatuses.delete(status.id)

	removed.add(status.id)
	}
	})
	return removed
	},

	// Misc
	setVirtualHeight({ statusId, height }) {
	this.allStatuses.get(statusId).virtualHeight = height
	},
	},
	})

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 9, 5:53 PM (1 d, 19 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1784805
Default Alt Text: (51 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions