No OneTemporary
Actions

Authored By

Unknown

Size

64 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index c01cfe79cc..c52e026a2a 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,412 +1,422 @@
	import Attachment from '../attachment/attachment.vue'
	import FavoriteButton from '../favorite_button/favorite_button.vue'
	import RetweetButton from '../retweet_button/retweet_button.vue'
	import DeleteButton from '../delete_button/delete_button.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import UserCard from '../user_card/user_card.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import Gallery from '../gallery/gallery.vue'
	import LinkPreview from '../link-preview/link-preview.vue'
	import AvatarList from '../avatar_list/avatar_list.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 { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
	import { filter, find, unescape, uniqBy } from 'lodash'

	const Status = {
	name: 'Status',
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded'
	],
	data () {
	return {
	replying: false,
	unmuted: false,
	userExpanded: false,
	preview: null,
	showPreview: false,
	showingTall: this.inConversation && this.focused,
	showingLongSubject: false,
	expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
	? !this.$store.state.instance.collapseMessageWithSubject
	: !this.$store.state.config.collapseMessageWithSubject,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter
	}
	},
	computed: {
	localCollapseSubjectDefault () {
	return typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
	? this.$store.state.instance.collapseMessageWithSubject
	: this.$store.state.config.collapseMessageWithSubject
	},
	muteWords () {
	return this.$store.state.config.muteWords
	},
	repeaterClass () {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass () {
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	return highlightClass(user)
	},
	deleted () {
	return this.statusoid.deleted
	},
	repeaterStyle () {
	const user = this.statusoid.user
	const highlight = this.$store.state.config.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userStyle () {
	if (this.noHeading) return
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	const highlight = this.$store.state.config.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	hideAttachments () {
	return (this.$store.state.config.hideAttachments && !this.inConversation) \|\|
	(this.$store.state.config.hideAttachmentsInConv && this.inConversation)
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
	},
	replyProfileLink () {
	if (this.isReply) {
	return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName)
	}
	},
	retweet () { return !!this.statusoid.retweeted_status },
	retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name },
	retweeterHtml () { return this.statusoid.user.name_html },
	retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
	status () {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository () {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn () {
	return !!this.$store.state.users.currentUser
	},
	muteWordHits () {
	const statusText = this.status.text.toLowerCase()
	const hits = filter(this.muteWords, (muteWord) => {
	return statusText.includes(muteWord.toLowerCase())
	})

	return hits
	},
	muted () { return !this.unmuted && (this.status.user.muted \|\| this.muteWordHits.length > 0) },
	hideFilteredStatuses () {
	return typeof this.$store.state.config.hideFilteredStatuses === 'undefined'
	? this.$store.state.instance.hideFilteredStatuses
	: this.$store.state.config.hideFilteredStatuses
	},
	hideStatus () {
	return (this.hideReply \|\| this.deleted) \|\| (this.muted && this.hideFilteredStatuses)
	},
	isFocused () {
	// retweet or root of an expanded conversation
	if (this.focused) {
	return true
	} else if (!this.inConversation) {
	return false
	}
	// use conversation highlight only when in conversation
	return this.status.id === this.highlight
	},
	// This is a bit hacky, but we want to approximate post height before rendering
	// so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
	// as well as approximate line count by counting characters and approximating ~80
	// per line.
	//
	// Using max-height + overflow: auto for status components resulted in false positives
	// very often with japanese characters, and it was very annoying.
	tallStatus () {
	const lengthScore = this.status.statusnet_html.split(/<p\|<br/).length + this.status.text.length / 80
	return lengthScore > 20
	},
	longSubject () {
	return this.status.summary.length > 900
	},
	isReply () {
	return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
	},
	replyToName () {
	if (this.status.in_reply_to_screen_name) {
	return this.status.in_reply_to_screen_name
	} else {
	const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
	return user && user.screen_name
	}
	},
	hideReply () {
	if (this.$store.state.config.replyVisibility === 'all') {
	return false
	}
	if (this.inConversation \|\| !this.isReply) {
	return false
	}
	if (this.status.user.id === this.$store.state.users.currentUser.id) {
	return false
	}
	if (this.status.type === 'retweet') {
	return false
	}
	var checkFollowing = this.$store.state.config.replyVisibility === 'following'
	for (var i = 0; i < this.status.attentions.length; ++i) {
	if (this.status.user.id === this.status.attentions[i].id) {
	continue
	}
	if (checkFollowing && this.$store.getters.findUser(this.status.attentions[i].id).following) {
	return false
	}
	if (this.status.attentions[i].id === this.$store.state.users.currentUser.id) {
	return false
	}
	}
	return this.status.attentions.length > 0
	},
	hideSubjectStatus () {
	if (this.tallStatus && !this.localCollapseSubjectDefault) {
	return false
	}
	return !this.expandingSubject && this.status.summary
	},
	hideTallStatus () {
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	if (this.showingTall) {
	return false
	}
	return this.tallStatus
	},
	showingMore () {
	return (this.tallStatus && this.showingTall) \|\| (this.status.summary && this.expandingSubject)
	},
	nsfwClickthrough () {
	if (!this.status.nsfw) {
	return false
	}
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	return true
	},
	replySubject () {
	if (!this.status.summary) return ''
	const decodedSummary = unescape(this.status.summary)
	const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined'
	? this.$store.state.instance.subjectLineBehavior
	: this.$store.state.config.subjectLineBehavior
	const startsWithRe = decodedSummary.match(/^re[: ]/i)
	if (behavior !== 'noop' && startsWithRe \|\| behavior === 'masto') {
	return decodedSummary
	} else if (behavior === 'email') {
	return 're: '.concat(decodedSummary)
	} else if (behavior === 'noop') {
	return ''
	}
	},
	attachmentSize () {
	if ((this.$store.state.config.hideAttachments && !this.inConversation) \|\|
	(this.$store.state.config.hideAttachmentsInConv && this.inConversation) \|\|
	(this.status.attachments.length > this.maxThumbnails)) {
	return 'hide'
	} else if (this.compact) {
	return 'small'
	}
	return 'normal'
	},
	galleryTypes () {
	if (this.attachmentSize === 'hide') {
	return []
	}
	return this.$store.state.config.playVideosInModal
	? ['image', 'video']
	: ['image']
	},
	galleryAttachments () {
	return this.status.attachments.filter(
	file => fileType.fileMatchesSomeType(this.galleryTypes, file)
	)
	},
	nonGalleryAttachments () {
	return this.status.attachments.filter(
	file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
	)
	},
	maxThumbnails () {
	return this.$store.state.config.maxThumbnails
	},
	contentHtml () {
	if (!this.status.summary_html) {
	return this.status.statusnet_html
	}
	return this.status.summary_html + '<br />' + this.status.statusnet_html
	},
	combinedFavsAndRepeatsUsers () {
	// Use the status from the global status repository since favs and repeats are saved in it
	const combinedUsers = [].concat(
	this.statusFromGlobalRepository.favoritedBy,
	this.statusFromGlobalRepository.rebloggedBy
	)
	return uniqBy(combinedUsers, 'id')
	}
	},
	components: {
	Attachment,
	FavoriteButton,
	RetweetButton,
	DeleteButton,
	PostStatusForm,
	UserCard,
	UserAvatar,
	Gallery,
	LinkPreview,
	AvatarList
	},
	methods: {
	visibilityIcon (visibility) {
	switch (visibility) {
	case 'private':
	return 'icon-lock'
	case 'unlisted':
	return 'icon-lock-open-alt'
	case 'direct':
	return 'icon-mail-alt'
	default:
	return 'icon-globe'
	}
	},
	linkClicked (event) {
	let { target } = event
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	if (target.className.match(/mention/)) {
	const href = target.href
	const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
	if (attn) {
	event.stopPropagation()
	event.preventDefault()
	const link = this.generateUserProfileLink(attn.id, attn.screen_name)
	this.$router.push(link)
	return
	}
	}
	if (target.className.match(/hashtag/)) {
	// Extract tag name from link url
	const tag = extractTagFromUrl(target.href)
	if (tag) {
	const link = this.generateTagLink(tag)
	this.$router.push(link)
	return
	}
	}
	window.open(target.href, '_blank')
	}
	},
	toggleReplying () {
	this.replying = !this.replying
	},
	gotoOriginal (id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded () {
	this.$emit('toggleExpanded')
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	toggleShowMore () {
	if (this.showingTall) {
	this.showingTall = false
	} else if (this.expandingSubject && this.status.summary) {
	this.expandingSubject = false
	} else if (this.hideTallStatus) {
	this.showingTall = true
	} else if (this.hideSubjectStatus && this.status.summary) {
	this.expandingSubject = true
	}
	},
	+ pinStatus () {
	+ this.$store.state.api.backendInteractor.pinOwnStatus(this.status.id).then((status) => {
	+ this.$store.dispatch('updatePinned', status)
	+ })
	+ },
	+ unpinStatus () {
	+ this.$store.state.api.backendInteractor.unpinOwnStatus(this.status.id).then((status) => {
	+ this.$store.dispatch('updatePinned', status)
	+ })
	+ },
	replyEnter (id, event) {
	this.showPreview = true
	const targetId = id
	const statuses = this.$store.state.statuses.allStatuses

	if (!this.preview) {
	// if we have the status somewhere already
	this.preview = find(statuses, { 'id': targetId })
	// or if we have to fetch it
	if (!this.preview) {
	this.$store.state.api.backendInteractor.fetchStatus({id}).then((status) => {
	this.preview = status
	})
	}
	} else if (this.preview.id !== targetId) {
	this.preview = find(statuses, { 'id': targetId })
	}
	},
	replyLeave () {
	this.showPreview = false
	},
	generateUserProfileLink (id, name) {
	return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
	},
	generateTagLink (tag) {
	return `/tag/${tag}`
	},
	setMedia () {
	const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
	return () => this.$store.dispatch('setMedia', attachments)
	}
	},
	watch: {
	'highlight': function (id) {
	if (this.status.id === id) {
	let 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)
	}
	}
	}
	},
	filters: {
	capitalize: function (str) {
	return str.charAt(0).toUpperCase() + str.slice(1)
	}
	}
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 210779723f..0a2562c0fe 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,704 +1,714 @@
	<template>
	<div class="status-el" v-if="!hideStatus" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
	<template v-if="muted && !isPreview">
	<div class="media status container muted">
	<small>
	<router-link :to="userProfileLink">
	{{status.user.screen_name}}
	</router-link>
	</small>
	<small class="muteWords">{{muteWordHits.join(', ')}}</small>
	<a href="#" class="unmute" @click.prevent="toggleMute"><i class="button-icon icon-eye-off"></i></a>
	</div>
	</template>
	<template v-else>
	<div v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
	<UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :user="statusoid.user"/>
	<div class="media-body faint">
	<span class="user-name">
	<router-link v-if="retweeterHtml" :to="retweeterProfileLink" v-html="retweeterHtml"/>
	<router-link v-else :to="retweeterProfileLink">{{retweeter}}</router-link>
	</span>
	<i class='fa icon-retweet retweeted' :title="$t('tool_tip.repeat')"></i>
	{{$t('timeline.repeated')}}
	</div>
	</div>

	<div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]" :style="[ userStyle ]" class="media status">
	<div v-if="!noHeading" class="media-left">
	<router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded">
	<UserAvatar :compact="compact" :betterShadow="betterShadow" :user="status.user"/>
	</router-link>
	</div>
	<div class="status-body">
	<UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard" v-if="userExpanded"/>
	<div v-if="!noHeading" class="media-heading">
	<div class="heading-name-row">
	<div class="name-and-account-name">
	<h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
	<h4 class="user-name" v-else>{{status.user.name}}</h4>
	<router-link class="account-name" :to="userProfileLink">
	{{status.user.screen_name}}
	</router-link>
	</div>

	<span class="heading-right">
	<router-link class="timeago faint-link" :to="{ name: 'conversation', params: { id: status.id } }">
	<timeago :since="status.created_at" :auto-update="60"></timeago>
	</router-link>
	<div class="button-icon visibility-icon" v-if="status.visibility">
	<i :class="visibilityIcon(status.visibility)" :title="status.visibility \| capitalize"></i>
	</div>
	<a :href="status.external_url" target="_blank" v-if="!status.is_local && !isPreview" class="source_url" title="Source">
	<i class="button-icon icon-link-ext-alt"></i>
	</a>
	- <template v-if="expandable && !isPreview">
	- <a href="#" @click.prevent="toggleExpanded" title="Expand">
	- <i class="button-icon icon-plus-squared"></i>
	- </a>
	- </template>
	- <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
	+ <div class="button-icon button-action-icon" v-if="!status.pinned" @click.prevent="pinStatus" title="Pin">
	+ <i class="fa icon-pin"></i>
	+ </div>
	+ <div class="button-icon button-action-icon" v-else @click.prevent="unpinStatus" title="Unpin">
	+ <i class="fa icon-cancel"></i>
	+ </div>
	+ <div class="button-icon button-action-icon" v-if="expandable && !isPreview" @click.prevent="toggleExpanded" title="Expand">
	+ <i class="button-icon icon-plus-squared"></i>
	+ </div>
	+ <div class="button-icon button-action-icon" v-if="unmuted" @click.prevent="toggleMute" title="Toggle Mute">
	+ <i class="button-icon icon-eye-off"></i>
	+ </div>
	</span>
	</div>

	<div class="heading-reply-row">
	<div v-if="isReply" class="reply-to-and-accountname">
	<a class="reply-to"
	href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	:aria-label="$t('tool_tip.reply')"
	@mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)"
	@mouseleave.prevent.stop="replyLeave()"
	>
	<i class="button-icon icon-reply" v-if="!isPreview"></i>
	<span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
	</a>
	<router-link :to="replyProfileLink">
	{{replyToName}}
	</router-link>
	<span class="faint replies-separator" v-if="replies && replies.length">
	-
	</span>
	</div>
	<div class="replies" v-if="inConversation && !isPreview">
	<span class="faint" v-if="replies && replies.length">{{$t('status.replies_list')}}</span>
	<span class="reply-link faint" v-if="replies" v-for="reply in replies">
	<a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}</a>
	</span>
	</div>
	</div>


	</div>

	<div v-if="showPreview" class="status-preview-container">
	<status class="status-preview"
	v-if="preview"
	:isPreview="true"
	:statusoid="preview"
	:compact=true
	/>
	<div v-else class="status-preview status-preview-loading">
	<i class="icon-spin4 animate-spin"></i>
	</div>
	</div>

	<div class="status-content-wrapper" :class="{ 'tall-status': !showingLongSubject }" v-if="longSubject">
	<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">{{$t("general.show_more")}}</a>
	<div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml"></div>
	<a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">{{$t("general.show_less")}}</a>
	</div>
	<div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper" v-else>
	<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
	<div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml" v-if="!hideSubjectStatus"></div>
	<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary_html" v-else></div>
	<a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
	<a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">{{$t("general.show_less")}}</a>
	</div>

	<div v-if="status.attachments && (!hideSubjectStatus \|\| showingLongSubject)" class="attachments media-body">
	<attachment
	class="non-gallery"
	v-for="attachment in nonGalleryAttachments"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	:attachment="attachment"
	:allowPlay="true"
	:setMedia="setMedia()"
	:key="attachment.id"
	/>
	<gallery
	v-if="galleryAttachments.length > 0"
	:nsfw="nsfwClickthrough"
	:attachments="galleryAttachments"
	:setMedia="setMedia()"
	/>
	</div>

	<div v-if="status.card && !hideSubjectStatus && !noHeading" class="link-preview media-body">
	<link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" />
	</div>

	<transition name="fade">
	<div class="favs-repeated-users" v-if="isFocused && combinedFavsAndRepeatsUsers.length > 0">
	<div class="stats">
	<div class="stat-count" v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0">
	<a class="stat-title">{{ $t('status.repeats') }}</a>
	<div class="stat-number">{{ statusFromGlobalRepository.rebloggedBy.length }}</div>
	</div>
	<div class="stat-count" v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0">
	<a class="stat-title">{{ $t('status.favorites') }}</a>
	<div class="stat-number">{{ statusFromGlobalRepository.favoritedBy.length }}</div>
	</div>
	<div class="avatar-row">
	<AvatarList :users="combinedFavsAndRepeatsUsers"></AvatarList>
	</div>
	</div>
	</div>
	</transition>

	<div v-if="!noHeading && !isPreview" class='status-actions media-body'>
	<div>
	<i class="button-icon icon-reply" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')" :class="{'button-icon-active': replying}" v-if="loggedIn"/>
	<i class="button-icon button-icon-disabled icon-reply" :title="$t('tool_tip.reply')" v-else />
	<span v-if="status.replies_count > 0">{{status.replies_count}}</span>
	</div>
	<retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
	<favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
	<delete-button :status='status'></delete-button>
	</div>
	</div>
	</div>
	<div class="container" v-if="replying">
	<div class="reply-left"/>
	<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :copy-message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/>
	</div>
	</template>
	</div>
	</template>

	<script src="./status.js" ></script>
	<style lang="scss">
	@import '../../_variables.scss';

	$status-margin: 0.75em;

	.status-body {
	flex: 1;
	min-width: 0;
	}

	.status-preview.status-el {
	border-style: solid;
	border-width: 1px;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}

	.status-preview-container {
	position: relative;
	max-width: 100%;
	}

	.status-preview {
	position: absolute;
	max-width: 95%;
	display: flex;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	border-style: solid;
	border-width: 1px;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
	box-shadow: var(--popupShadow);
	margin-top: 0.25em;
	margin-left: 0.5em;
	z-index: 50;

	.status {
	flex: 1;
	border: 0;
	min-width: 15em;
	}
	}

	.status-preview-loading {
	display: block;
	min-width: 15em;
	padding: 1em;
	text-align: center;
	border-width: 1px;
	border-style: solid;

	i {
	font-size: 2em;
	}
	}

	.media-left {
	margin-right: $status-margin;
	}

	.status-el {
	hyphens: auto;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	border-left-width: 0px;
	min-width: 0;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);

	border-left: 4px $fallback--cRed;
	border-left: 4px var(--cRed, $fallback--cRed);

	&_focused {
	background-color: $fallback--lightBg;
	background-color: var(--lightBg, $fallback--lightBg);
	}

	.timeline & {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	}

	.media-body {
	flex: 1;
	padding: 0;
	}

	.status-usercard {
	margin-bottom: $status-margin;
	}

	.user-name {
	white-space: nowrap;
	font-size: 14px;
	overflow: hidden;
	flex-shrink: 0;
	max-width: 85%;
	font-weight: bold;

	img {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	object-fit: contain
	}
	}

	.media-heading {
	padding: 0;
	vertical-align: bottom;
	flex-basis: 100%;
	margin-bottom: 0.5em;

	a {
	display: inline-block;
	word-break: break-all;
	}

	small {
	font-weight: lighter;
	}

	.heading-name-row {
	padding: 0;
	display: flex;
	justify-content: space-between;
	line-height: 18px;

	.name-and-account-name {
	display: flex;
	min-width: 0;
	}

	.user-name {
	flex-shrink: 1;
	margin-right: 0.4em;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.account-name {
	min-width: 1.6em;
	margin-right: 0.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 0;
	}
	}

	.heading-right {
	display: flex;
	flex-shrink: 0;
	}

	.timeago {
	margin-right: 0.2em;
	}

	.heading-reply-row {
	align-content: baseline;
	font-size: 12px;
	line-height: 18px;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;

	a {
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	}
	}

	.reply-to-and-accountname {
	display: flex;
	height: 18px;
	margin-right: 0.5em;
	overflow: hidden;
	max-width: 100%;
	.icon-reply {
	transform: scaleX(-1);
	}
	}

	.reply-info {
	display: flex;
	}

	.reply-to {
	display: flex;
	}

	.reply-to-text {
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 0.4em 0 0.2em;
	}

	.replies-separator {
	margin-left: 0.4em;
	}

	.replies {
	line-height: 18px;
	font-size: 12px;
	display: flex;
	flex-wrap: wrap;
	& > * {
	margin-right: 0.4em;
	}
	}

	.reply-link {
	height: 17px;
	}
	}

	.tall-status {
	position: relative;
	height: 220px;
	overflow-x: hidden;
	overflow-y: hidden;
	}

	.tall-status-hider {
	display: inline-block;
	word-break: break-all;
	position: absolute;
	height: 70px;
	margin-top: 150px;
	width: 100%;
	text-align: center;
	line-height: 110px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
	&_focused {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--lightBg 80%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--lightBg, $fallback--lightBg) 80%);
	}
	}

	.status-unhider, .cw-status-hider {
	width: 100%;
	text-align: center;
	display: inline-block;
	word-break: break-all;
	}

	.status-content {
	font-family: var(--postFont, sans-serif);
	line-height: 1.4em;

	img, video {
	max-width: 100%;
	max-height: 400px;
	vertical-align: middle;
	object-fit: contain;

	&.emoji {
	width: 32px;
	height: 32px;
	}
	}

	blockquote {
	margin: 0.2em 0 0.2em 2em;
	font-style: italic;
	}

	pre {
	overflow: auto;
	}

	code, samp, kbd, var, pre {
	font-family: var(--postCodeFont, monospace);
	}

	p {
	margin: 0 0 1em 0;
	}

	p:last-child {
	margin: 0 0 0 0;
	}

	h1 {
	font-size: 1.1em;
	line-height: 1.2em;
	margin: 1.4em 0;
	}

	h2 {
	font-size: 1.1em;
	margin: 1.0em 0;
	}

	h3 {
	font-size: 1em;
	margin: 1.2em 0;
	}

	h4 {
	margin: 1.1em 0;
	}
	}

	.retweet-info {
	padding: 0.4em $status-margin;
	margin: 0;

	.avatar.still-image {
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	margin-left: 28px;
	width: 20px;
	height: 20px;
	}

	.media-body {
	font-size: 1em;
	line-height: 22px;

	display: flex;
	align-content: center;
	flex-wrap: wrap;

	.user-name {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;

	img {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	object-fit: contain
	}
	}

	i {
	padding: 0 0.2em;
	}

	a {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}
	}
	}

	.status-fadein {
	animation-duration: 0.4s;
	animation-name: fadein;
	}

	@keyframes fadein {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}

	.greentext {
	color: green;
	}

	.status-conversation {
	border-left-style: solid;
	}

	.status-actions {
	width: 100%;
	display: flex;
	margin-top: $status-margin;

	div, favorite-button {
	max-width: 4em;
	flex: 1;
	}
	}

	.button-icon.icon-reply {
	&:not(.button-icon-disabled):hover,
	&.button-icon-active {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	cursor: pointer;
	}
	}

	.status:hover .animated.avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	.status {
	display: flex;
	padding: $status-margin;
	&.is-retweet {
	padding-top: 0;
	}
	}

	.status-conversation:last-child {
	border-bottom: none;
	}

	.muted {
	padding: 0.25em 0.5em;
	button {
	margin-left: auto;
	}

	.muteWords {
	margin-left: 10px;
	}
	}

	a.unmute {
	display: block;
	margin-left: auto;
	}

	.reply-left {
	flex: 0;
	min-width: 48px;
	}

	.reply-body {
	flex: 1;
	}

	.timeline > {
	.status-el:last-child {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	border-bottom: none;
	}
	}

	.favs-repeated-users {
	margin-top: $status-margin;

	.stats {
	width: 100%;
	display: flex;
	line-height: 1em;

	.stat-count {
	margin-right: $status-margin;

	.stat-title {
	color: var(--faint, $fallback--faint);
	font-size: 12px;
	text-transform: uppercase;
	position: relative;
	}

	.stat-number {
	font-weight: bolder;
	font-size: 16px;
	line-height: 1em;
	}
	}

	.avatar-row {
	flex: 1;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;

	&::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 1px;
	left: 0;
	background-color: var(--faint, $fallback--faint);
	}
	}
	}
	}

	+.button-action-icon {
	+ cursor: pointer;
	+}
	+
	@media all and (max-width: 800px) {
	.status-el {
	.retweet-info {
	.avatar.still-image {
	margin-left: 20px;
	}
	}
	}
	.status {
	max-width: 100%;
	}

	.status .avatar.still-image {
	width: 40px;
	height: 40px;

	&.avatar-compact {
	width: 32px;
	height: 32px;
	}
	}
	}

	</style>
	diff --git a/src/modules/statuses.js b/src/modules/statuses.js
	index 4c92d4e153..176e5f4298 100644
	--- a/src/modules/statuses.js
	+++ b/src/modules/statuses.js
	@@ -1,570 +1,577 @@
	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'

	const emptyTl = (userId = 0) => ({
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: 0,
	minId: 0,
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	userId,
	flushMarker: 0
	})

	const emptyNotifications = () => ({
	desktopNotificationSilence: true,
	maxId: 0,
	minId: Number.POSITIVE_INFINITY,
	data: [],
	idStore: {},
	loading: false,
	error: false
	})

	export const defaultState = () => ({
	allStatuses: [],
	allStatusesObject: {},
	conversationsObject: {},
	maxId: 0,
	notifications: emptyNotifications(),
	favorites: new Set(),
	error: false,
	timelines: {
	mentions: emptyTl(),
	public: emptyTl(),
	user: emptyTl(),
	favorites: emptyTl(),
	media: emptyTl(),
	publicAndExternal: emptyTl(),
	friends: emptyTl(),
	tag: emptyTl(),
	dms: emptyTl()
	}
	})

	export const prepareStatus = (status) => {
	// Set deleted flag
	status.deleted = false

	// To make the array reactive
	status.attachments = status.attachments \|\| []

	return status
	}

	const visibleNotificationTypes = (rootState) => {
	return [
	rootState.config.notificationVisibility.likes && 'like',
	rootState.config.notificationVisibility.mentions && 'mention',
	rootState.config.notificationVisibility.repeats && 'repeat',
	rootState.config.notificationVisibility.follows && 'follow'
	].filter(_ => _)
	}

	const mergeOrAdd = (arr, obj, item) => {
	const oldItem = obj[item.id]

	if (oldItem) {
	// We already have this, so only merge the new info.
	// We ignore null values to avoid overwriting existing properties with missing data
	// we also skip 'user' because that is handled by users module
	merge(oldItem, omitBy(item, (v, k) => v === null \|\| k === 'user'))
	// Reactivity fix.
	oldItem.attachments.splice(oldItem.attachments.length)
	return {item: oldItem, new: false}
	} else {
	// This is a new item, prepare it
	prepareStatus(item)
	arr.push(item)
	set(obj, item.id, item)
	return {item, new: true}
	}
	}

	const sortById = (a, b) => {
	const seqA = Number(a.id)
	const seqB = Number(b.id)
	const isSeqA = !Number.isNaN(seqA)
	const isSeqB = !Number.isNaN(seqB)
	if (isSeqA && isSeqB) {
	return seqA > seqB ? -1 : 1
	} else if (isSeqA && !isSeqB) {
	return 1
	} else if (!isSeqA && isSeqB) {
	return -1
	} else {
	return a.id > b.id ? -1 : 1
	}
	}

	const sortTimeline = (timeline) => {
	timeline.visibleStatuses = timeline.visibleStatuses.sort(sortById)
	timeline.statuses = timeline.statuses.sort(sortById)
	timeline.minVisibleId = (last(timeline.visibleStatuses) \|\| {}).id
	return timeline
	}

	// Add status to the global storages (arrays and objects maintaining statuses) except timelines
	const addStatusToGlobalStorage = (state, data) => {
	const result = mergeOrAdd(state.allStatuses, state.allStatusesObject, data)
	if (result.new) {
	// Add to conversation
	const status = result.item
	const conversationsObject = state.conversationsObject
	const conversationId = status.statusnet_conversation_id
	if (conversationsObject[conversationId]) {
	conversationsObject[conversationId].push(status)
	} else {
	set(conversationsObject, conversationId, [status])
	}
	}
	return result
	}

	// Remove status from the global storages (arrays and objects maintaining statuses) except timelines
	const removeStatusFromGlobalStorage = (state, status) => {
	remove(state.allStatuses, { id: status.id })

	// TODO: Need to remove from allStatusesObject?

	// Remove possible notification
	remove(state.notifications.data, ({action: {id}}) => id === status.id)

	// Remove from conversation
	const conversationId = status.statusnet_conversation_id
	if (state.conversationsObject[conversationId]) {
	remove(state.conversationsObject[conversationId], { id: status.id })
	}
	}

	const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {}, noIdUpdate = false, userId }) => {
	// Sanity check
	if (!isArray(statuses)) {
	return false
	}

	const allStatuses = state.allStatuses
	const timelineObject = state.timelines[timeline]

	const maxNew = statuses.length > 0 ? maxBy(statuses, 'id').id : 0
	const minNew = statuses.length > 0 ? minBy(statuses, 'id').id : 0
	const newer = timeline && (maxNew > timelineObject.maxId \|\| timelineObject.maxId === 0) && statuses.length > 0
	const older = timeline && (minNew < timelineObject.minId \|\| timelineObject.minId === 0) && statuses.length > 0

	if (!noIdUpdate && newer) {
	timelineObject.maxId = maxNew
	}
	if (!noIdUpdate && older) {
	timelineObject.minId = minNew
	}

	// This makes sure that user timeline won't get data meant for other
	// user. I.e. opening different user profiles makes request which could
	// return data late after user already viewing different user profile
	if ((timeline === 'user' \|\| timeline === 'media') && timelineObject.userId !== userId) {
	return
	}

	const addStatus = (data, showImmediately, addToTimeline = true) => {
	const result = addStatusToGlobalStorage(state, data)
	const status = result.item

	if (result.new) {
	// We are mentioned in a post
	if (status.type === 'status' && find(status.attentions, { id: user.id })) {
	const mentions = state.timelines.mentions

	// Add the mention to the mentions timeline
	if (timelineObject !== mentions) {
	mergeOrAdd(mentions.statuses, mentions.statusesObject, status)
	mentions.newStatusCount += 1

	sortTimeline(mentions)
	}
	}
	if (status.visibility === 'direct') {
	const dms = state.timelines.dms

	mergeOrAdd(dms.statuses, dms.statusesObject, status)
	dms.newStatusCount += 1

	sortTimeline(dms)
	}
	}

	// Decide if we should treat the status as new for this timeline.
	let resultForCurrentTimeline
	// Some statuses should only be added to the global status repository.
	if (timeline && addToTimeline) {
	resultForCurrentTimeline = mergeOrAdd(timelineObject.statuses, timelineObject.statusesObject, status)
	}

	if (timeline && showImmediately) {
	// Add it directly to the visibleStatuses, don't change
	// newStatusCount
	mergeOrAdd(timelineObject.visibleStatuses, timelineObject.visibleStatusesObject, status)
	} else if (timeline && addToTimeline && resultForCurrentTimeline.new) {
	// Just change newStatuscount
	timelineObject.newStatusCount += 1
	}

	return status
	}

	const favoriteStatus = (favorite, counter) => {
	const status = find(allStatuses, { id: favorite.in_reply_to_status_id })
	if (status) {
	// This is our favorite, so the relevant bit.
	if (favorite.user.id === user.id) {
	status.favorited = true
	} else {
	status.fave_num += 1
	}
	}
	return status
	}

	const processors = {
	'status': (status) => {
	addStatus(status, showImmediately)
	},
	'retweet': (status) => {
	// RetweetedStatuses are never shown immediately
	const retweetedStatus = addStatus(status.retweeted_status, false, false)

	let retweet
	// If the retweeted status is already there, don't add the retweet
	// to the timeline.
	if (timeline && find(timelineObject.statuses, (s) => {
	if (s.retweeted_status) {
	return s.id === retweetedStatus.id \|\| s.retweeted_status.id === retweetedStatus.id
	} else {
	return s.id === retweetedStatus.id
	}
	})) {
	// Already have it visible (either as the original or another RT), don't add to timeline, don't show.
	retweet = addStatus(status, false, false)
	} else {
	retweet = addStatus(status, showImmediately)
	}

	retweet.retweeted_status = retweetedStatus
	},
	'favorite': (favorite) => {
	// Only update if this is a new favorite.
	// Ignore our own favorites because we get info about likes as response to like request
	if (!state.favorites.has(favorite.id)) {
	state.favorites.add(favorite.id)
	favoriteStatus(favorite)
	}
	},
	'deletion': (deletion) => {
	const uri = deletion.uri
	const status = find(allStatuses, {uri})
	if (!status) {
	return
	}

	removeStatusFromGlobalStorage(state, status)

	if (timeline) {
	remove(timelineObject.statuses, { uri })
	remove(timelineObject.visibleStatuses, { uri })
	}
	},
	'follow': (follow) => {
	// NOOP, it is known status but we don't do anything about it for now
	},
	'default': (unknown) => {
	console.log('unknown status type')
	console.log(unknown)
	}
	}

	each(statuses, (status) => {
	const type = status.type
	const processor = processors[type] \|\| processors['default']
	processor(status)
	})

	// Keep the visible statuses sorted
	if (timeline) {
	sortTimeline(timelineObject)
	}
	}

	const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes, rootGetters }) => {
	each(notifications, (notification) => {
	if (notification.type !== 'follow') {
	notification.action = addStatusToGlobalStorage(state, notification.action).item
	notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item
	}

	// Only add a new notification if we don't have one for the same action
	if (!state.notifications.idStore.hasOwnProperty(notification.id)) {
	state.notifications.maxId = notification.id > state.notifications.maxId
	? notification.id
	: state.notifications.maxId
	state.notifications.minId = notification.id < state.notifications.minId
	? notification.id
	: state.notifications.minId

	state.notifications.data.push(notification)
	state.notifications.idStore[notification.id] = notification

	if ('Notification' in window && window.Notification.permission === 'granted') {
	const notifObj = {}
	const status = notification.status
	const title = notification.from_profile.name
	notifObj.icon = notification.from_profile.profile_image_url
	let i18nString
	switch (notification.type) {
	case 'like':
	i18nString = 'favorited_you'
	break
	case 'repeat':
	i18nString = 'repeated_you'
	break
	case 'follow':
	i18nString = 'followed_you'
	break
	}

	if (i18nString) {
	notifObj.body = rootGetters.i18n.t('notifications.' + i18nString)
	} else {
	notifObj.body = notification.status.text
	}

	// Shows first attached non-nsfw image, if any. Should add configuration for this somehow...
	if (status && status.attachments && status.attachments.length > 0 && !status.nsfw &&
	status.attachments[0].mimetype.startsWith('image/')) {
	notifObj.image = status.attachments[0].url
	}

	if (!notification.seen && !state.notifications.desktopNotificationSilence && visibleNotificationTypes.includes(notification.type)) {
	let notification = new window.Notification(title, notifObj)
	// Chrome is known for not closing notifications automatically
	// according to MDN, anyway.
	setTimeout(notification.close.bind(notification), 5000)
	}
	}
	} else if (notification.seen) {
	state.notifications.idStore[notification.id].seen = true
	}
	})
	}

	const removeStatus = (state, { timeline, userId }) => {
	const timelineObject = state.timelines[timeline]
	if (userId) {
	remove(timelineObject.statuses, { user: { id: userId } })
	remove(timelineObject.visibleStatuses, { user: { id: userId } })
	timelineObject.minVisibleId = timelineObject.visibleStatuses.length > 0 ? last(timelineObject.visibleStatuses).id : 0
	timelineObject.maxId = timelineObject.statuses.length > 0 ? first(timelineObject.statuses).id : 0
	}
	}

	export const mutations = {
	addNewStatuses,
	addNewNotifications,
	removeStatus,
	showNewStatuses (state, { timeline }) {
	const oldTimeline = (state.timelines[timeline])

	oldTimeline.newStatusCount = 0
	oldTimeline.visibleStatuses = slice(oldTimeline.statuses, 0, 50)
	oldTimeline.minVisibleId = last(oldTimeline.visibleStatuses).id
	oldTimeline.minId = oldTimeline.minVisibleId
	oldTimeline.visibleStatusesObject = {}
	each(oldTimeline.visibleStatuses, (status) => { oldTimeline.visibleStatusesObject[status.id] = status })
	},
	resetStatuses (state) {
	const emptyState = defaultState()
	Object.entries(emptyState).forEach(([key, value]) => {
	state[key] = value
	})
	},
	clearTimeline (state, { timeline }) {
	state.timelines[timeline] = emptyTl(state.timelines[timeline].userId)
	},
	clearNotifications (state) {
	state.notifications = emptyNotifications()
	},
	setFavorited (state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]

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

	newStatus.favorited = value
	},
	setFavoritedConfirm (state, { status, user }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.favorited = status.favorited
	newStatus.fave_num = status.fave_num
	const index = findIndex(newStatus.favoritedBy, { id: user.id })
	if (index !== -1 && !newStatus.favorited) {
	newStatus.favoritedBy.splice(index, 1)
	} else if (index === -1 && newStatus.favorited) {
	newStatus.favoritedBy.push(user)
	}
	},
	+ setPinned (state, { status }) {
	+ const newStatus = state.allStatusesObject[status.id]
	+ newStatus.pinned = status.pinned
	+ },
	setRetweeted (state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]

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

	newStatus.repeated = value
	},
	setRetweetedConfirm (state, { status, user }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.repeated = status.repeated
	newStatus.repeat_num = status.repeat_num
	const index = findIndex(newStatus.rebloggedBy, { id: user.id })
	if (index !== -1 && !newStatus.repeated) {
	newStatus.rebloggedBy.splice(index, 1)
	} else if (index === -1 && newStatus.repeated) {
	newStatus.rebloggedBy.push(user)
	}
	},
	setDeleted (state, { status }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.deleted = true
	},
	setManyDeleted (state, condition) {
	Object.values(state.allStatusesObject).forEach(status => {
	if (condition(status)) {
	status.deleted = true
	}
	})
	},
	setLoading (state, { timeline, value }) {
	state.timelines[timeline].loading = value
	},
	setNsfw (state, { id, nsfw }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.nsfw = nsfw
	},
	setError (state, { value }) {
	state.error = value
	},
	setNotificationsLoading (state, { value }) {
	state.notifications.loading = value
	},
	setNotificationsError (state, { value }) {
	state.notifications.error = value
	},
	setNotificationsSilence (state, { value }) {
	state.notifications.desktopNotificationSilence = value
	},
	markNotificationsAsSeen (state) {
	each(state.notifications.data, (notification) => {
	notification.seen = true
	})
	},
	queueFlush (state, { timeline, id }) {
	state.timelines[timeline].flushMarker = id
	},
	addFavsAndRepeats (state, { id, favoritedByUsers, rebloggedByUsers }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.favoritedBy = favoritedByUsers.filter(_ => _)
	newStatus.rebloggedBy = rebloggedByUsers.filter(_ => _)
	}
	}

	const statuses = {
	state: defaultState(),
	actions: {
	addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId }) {
	commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId })
	},
	addNewNotifications ({ rootState, commit, dispatch, rootGetters }, { notifications, older }) {
	commit('addNewNotifications', { visibleNotificationTypes: visibleNotificationTypes(rootState), dispatch, notifications, older, rootGetters })
	},
	setError ({ rootState, commit }, { value }) {
	commit('setError', { value })
	},
	setNotificationsLoading ({ rootState, commit }, { value }) {
	commit('setNotificationsLoading', { value })
	},
	setNotificationsError ({ rootState, commit }, { value }) {
	commit('setNotificationsError', { value })
	},
	setNotificationsSilence ({ rootState, commit }, { value }) {
	commit('setNotificationsSilence', { value })
	},
	deleteStatus ({ rootState, commit }, status) {
	commit('setDeleted', { status })
	apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
	},
	markStatusesAsDeleted ({ commit }, condition) {
	commit('setManyDeleted', condition)
	},
	favorite ({ rootState, commit }, status) {
	// Optimistic favoriting...
	commit('setFavorited', { status, value: true })
	rootState.api.backendInteractor.favorite(status.id)
	.then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
	},
	unfavorite ({ rootState, commit }, status) {
	// Optimistic unfavoriting...
	commit('setFavorited', { status, value: false })
	rootState.api.backendInteractor.unfavorite(status.id)
	.then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
	},
	+ updatePinned ({ rootState, commit }, status) {
	+ commit('setPinned', { status })
	+ },
	retweet ({ rootState, commit }, status) {
	// Optimistic retweeting...
	commit('setRetweeted', { status, value: true })
	rootState.api.backendInteractor.retweet(status.id)
	.then(status => commit('setRetweetedConfirm', { status: status.retweeted_status, user: rootState.users.currentUser }))
	},
	unretweet ({ rootState, commit }, status) {
	// Optimistic unretweeting...
	commit('setRetweeted', { status, value: false })
	rootState.api.backendInteractor.unretweet(status.id)
	.then(status => commit('setRetweetedConfirm', { status, user: rootState.users.currentUser }))
	},
	queueFlush ({ rootState, commit }, { timeline, id }) {
	commit('queueFlush', { timeline, id })
	},
	markNotificationsAsSeen ({ rootState, commit }) {
	commit('markNotificationsAsSeen')
	apiService.markNotificationsAsSeen({
	id: rootState.statuses.notifications.maxId,
	credentials: rootState.users.currentUser.credentials
	})
	},
	fetchFavsAndRepeats ({ rootState, commit }, id) {
	Promise.all([
	rootState.api.backendInteractor.fetchFavoritedByUsers(id),
	rootState.api.backendInteractor.fetchRebloggedByUsers(id)
	]).then(([favoritedByUsers, rebloggedByUsers]) =>
	commit('addFavsAndRepeats', { id, favoritedByUsers, rebloggedByUsers })
	)
	}
	},
	mutations
	}

	export default statuses
	diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
	index 7a8708d563..97e20b997e 100644
	--- a/src/services/entity_normalizer/entity_normalizer.service.js
	+++ b/src/services/entity_normalizer/entity_normalizer.service.js
	@@ -1,320 +1,321 @@
	const qvitterStatusType = (status) => {
	if (status.is_post_verb) {
	return 'status'
	}

	if (status.retweeted_status) {
	return 'retweet'
	}

	if ((typeof status.uri === 'string' && status.uri.match(/(fave\|objectType=Favourite)/)) \|\|
	(typeof status.text === 'string' && status.text.match(/favorited/))) {
	return 'favorite'
	}

	if (status.text.match(/deleted notice {{tag/) \|\| status.qvitter_delete_notice) {
	return 'deletion'
	}

	if (status.text.match(/started following/) \|\| status.activity_type === 'follow') {
	return 'follow'
	}

	return 'unknown'
	}

	export const parseUser = (data) => {
	const output = {}
	const masto = data.hasOwnProperty('acct')
	// case for users in "mentions" property for statuses in MastoAPI
	const mastoShort = masto && !data.hasOwnProperty('avatar')

	output.id = String(data.id)

	if (masto) {
	output.screen_name = data.acct

	// There's nothing else to get
	if (mastoShort) {
	return output
	}

	output.name = data.display_name
	output.name_html = addEmojis(data.display_name, data.emojis)

	// output.description = ??? missing
	output.description_html = addEmojis(data.note, data.emojis)

	// Utilize avatar_static for gif avatars?
	output.profile_image_url = data.avatar
	output.profile_image_url_original = data.avatar

	// Same, utilize header_static?
	output.cover_photo = data.header

	output.friends_count = data.following_count

	output.bot = data.bot

	output.statusnet_profile_url = data.url

	if (data.pleroma) {
	const relationship = data.pleroma.relationship

	if (relationship) {
	output.follows_you = relationship.followed_by
	output.following = relationship.following
	output.statusnet_blocking = relationship.blocking
	output.muted = relationship.muting
	}

	output.rights = {
	moderator: data.pleroma.is_moderator,
	admin: data.pleroma.is_admin
	}
	}

	// TODO: handle is_local
	output.is_local = !output.screen_name.includes('@')
	} else {
	output.screen_name = data.screen_name

	output.name = data.name
	output.name_html = data.name_html

	output.description = data.description
	output.description_html = data.description_html

	output.profile_image_url = data.profile_image_url
	output.profile_image_url_original = data.profile_image_url_original

	output.cover_photo = data.cover_photo

	output.friends_count = data.friends_count

	// output.bot = ??? missing

	output.statusnet_profile_url = data.statusnet_profile_url

	output.statusnet_blocking = data.statusnet_blocking

	output.is_local = data.is_local
	output.role = data.role
	output.show_role = data.show_role

	output.follows_you = data.follows_you

	output.muted = data.muted

	// QVITTER ONLY FOR NOW
	// Really only applies to logged in user, really.. I THINK
	if (data.rights) {
	output.rights = {
	moderator: data.rights.delete_others_notice,
	admin: data.rights.admin
	}
	}
	output.no_rich_text = data.no_rich_text
	output.default_scope = data.default_scope
	output.hide_follows = data.hide_follows
	output.hide_followers = data.hide_followers
	output.background_image = data.background_image
	// on mastoapi this info is contained in a "relationship"
	output.following = data.following
	// Websocket token
	output.token = data.token
	}

	output.created_at = new Date(data.created_at)
	output.locked = data.locked
	output.followers_count = data.followers_count
	output.statuses_count = data.statuses_count
	output.friendIds = []
	output.followerIds = []
	if (data.pleroma) {
	output.follow_request_count = data.pleroma.follow_request_count
	}

	if (data.pleroma) {
	output.tags = data.pleroma.tags
	output.deactivated = data.pleroma.deactivated
	}

	output.tags = output.tags \|\| []

	return output
	}

	export const parseAttachment = (data) => {
	const output = {}
	const masto = !data.hasOwnProperty('oembed')

	if (masto) {
	// Not exactly same...
	output.mimetype = data.pleroma ? data.pleroma.mime_type : data.type
	output.meta = data.meta // not present in BE yet
	output.id = data.id
	} else {
	output.mimetype = data.mimetype
	// output.meta = ??? missing
	}

	output.url = data.url
	output.description = data.description

	return output
	}
	export const addEmojis = (string, emojis) => {
	return emojis.reduce((acc, emoji) => {
	return acc.replace(
	new RegExp(`:${emoji.shortcode}:`, 'g'),
	`<img src='${emoji.url}' alt='${emoji.shortcode}' class='emoji' />`
	)
	}, string)
	}

	export const parseStatus = (data) => {
	const output = {}
	const masto = data.hasOwnProperty('account')

	if (masto) {
	output.favorited = data.favourited
	output.fave_num = data.favourites_count

	output.repeated = data.reblogged
	output.repeat_num = data.reblogs_count

	output.type = data.reblog ? 'retweet' : 'status'
	output.nsfw = data.sensitive

	output.statusnet_html = addEmojis(data.content, data.emojis)

	if (data.pleroma) {
	const { pleroma } = data
	output.text = pleroma.content ? data.pleroma.content['text/plain'] : data.content
	output.summary = pleroma.spoiler_text ? data.pleroma.spoiler_text['text/plain'] : data.spoiler_text
	output.statusnet_conversation_id = data.pleroma.conversation_id
	output.is_local = pleroma.local
	output.in_reply_to_screen_name = data.pleroma.in_reply_to_account_acct
	} else {
	output.text = data.content
	output.summary = data.spoiler_text
	}

	output.in_reply_to_status_id = data.in_reply_to_id
	output.in_reply_to_user_id = data.in_reply_to_account_id
	output.replies_count = data.replies_count

	if (output.type === 'retweet') {
	output.retweeted_status = parseStatus(data.reblog)
	}

	output.summary_html = addEmojis(data.spoiler_text, data.emojis)
	output.external_url = data.url
	+ output.pinned = data.pinned
	} else {
	output.favorited = data.favorited
	output.fave_num = data.fave_num

	output.repeated = data.repeated
	output.repeat_num = data.repeat_num

	// catchall, temporary
	// Object.assign(output, data)

	output.type = qvitterStatusType(data)

	if (data.nsfw === undefined) {
	output.nsfw = isNsfw(data)
	if (data.retweeted_status) {
	output.nsfw = data.retweeted_status.nsfw
	}
	} else {
	output.nsfw = data.nsfw
	}

	output.statusnet_html = data.statusnet_html
	output.text = data.text

	output.in_reply_to_status_id = data.in_reply_to_status_id
	output.in_reply_to_user_id = data.in_reply_to_user_id
	output.in_reply_to_screen_name = data.in_reply_to_screen_name
	output.statusnet_conversation_id = data.statusnet_conversation_id

	if (output.type === 'retweet') {
	output.retweeted_status = parseStatus(data.retweeted_status)
	}

	output.summary = data.summary
	output.summary_html = data.summary_html
	output.external_url = data.external_url
	output.is_local = data.is_local
	}

	output.id = String(data.id)
	output.visibility = data.visibility
	output.card = data.card
	output.created_at = new Date(data.created_at)

	// Converting to string, the right way.
	output.in_reply_to_status_id = output.in_reply_to_status_id
	? String(output.in_reply_to_status_id)
	: null
	output.in_reply_to_user_id = output.in_reply_to_user_id
	? String(output.in_reply_to_user_id)
	: null

	output.user = parseUser(masto ? data.account : data.user)

	output.attentions = ((masto ? data.mentions : data.attentions) \|\| []).map(parseUser)

	output.attachments = ((masto ? data.media_attachments : data.attachments) \|\| [])
	.map(parseAttachment)

	const retweetedStatus = masto ? data.reblog : data.retweeted_status
	if (retweetedStatus) {
	output.retweeted_status = parseStatus(retweetedStatus)
	}

	output.favoritedBy = []
	output.rebloggedBy = []

	return output
	}

	export const parseNotification = (data) => {
	const mastoDict = {
	'favourite': 'like',
	'reblog': 'repeat'
	}
	const masto = !data.hasOwnProperty('ntype')
	const output = {}

	if (masto) {
	output.type = mastoDict[data.type] \|\| data.type
	output.seen = data.pleroma.is_seen
	output.status = output.type === 'follow'
	? null
	: parseStatus(data.status)
	output.action = output.status // TODO: Refactor, this is unneeded
	output.from_profile = parseUser(data.account)
	} else {
	const parsedNotice = parseStatus(data.notice)
	output.type = data.ntype
	output.seen = Boolean(data.is_seen)
	output.status = output.type === 'like'
	? parseStatus(data.notice.favorited_status)
	: parsedNotice
	output.action = parsedNotice
	output.from_profile = parseUser(data.from_profile)
	}

	output.created_at = new Date(data.created_at)
	output.id = parseInt(data.id)

	return output
	}

	const isNsfw = (status) => {
	const nsfwRegex = /#nsfw/i
	return (status.tags \|\| []).includes('nsfw') \|\| !!(status.text \|\| '').match(nsfwRegex)
	}

File Metadata

Mime Type: text/x-diff
Expires: Thu, Oct 29, 1:12 PM (1 d, 43 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1798121
Default Alt Text: (64 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions