No OneTemporary
Actions

Size

102 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
	index db5171c80d..b1a3d82b88 100644
	--- a/src/components/attachment/attachment.js
	+++ b/src/components/attachment/attachment.js
	@@ -1,223 +1,217 @@
	import { mapGetters } from 'vuex'

	import nsfwImage from '../../assets/nsfw.png'
	-import fileTypeService from '../../services/file_type/file_type.service.js'
	import Flash from '../flash/flash.vue'
	import StillImage from '../still-image/still-image.vue'
	import VideoAttachment from '../video_attachment/video_attachment.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useMediaViewerStore } from 'src/stores/media_viewer'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAlignRight,
	faFile,
	faImage,
	faMusic,
	faPencilAlt,
	faPlayCircle,
	faSearchPlus,
	faStop,
	faTimes,
	faTrashAlt,
	faVideo,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faFile,
	faMusic,
	faImage,
	faVideo,
	faPlayCircle,
	faTimes,
	faStop,
	faSearchPlus,
	faTrashAlt,
	faPencilAlt,
	faAlignRight,
	)

	const Attachment = {
	props: [
	'attachment',
	'compact',
	'description',
	'hideDescription',
	'nsfw',
	'size',
	'setMedia',
	'remove',
	'shiftUp',
	'shiftDn',
	'edit',
	],
	data() {
	return {
	localDescription: this.description \|\| this.attachment.description,
	nsfwImage:
	useInstanceStore().instanceIdentity.nsfwCensorImage \|\| nsfwImage,
	hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
	preloadImage: this.$store.getters.mergedConfig.preloadImage,
	loading: false,
	- img:
	- fileTypeService.fileType(this.attachment.mimetype) === 'image' &&
	- document.createElement('img'),
	+ img: this.attachment.type === 'image' && document.createElement('img'),
	modalOpen: false,
	showHidden: false,
	flashLoaded: false,
	showDescription: false,
	}
	},
	components: {
	Flash,
	StillImage,
	VideoAttachment,
	},
	computed: {
	classNames() {
	return [
	{
	'-loading': this.loading,
	'-nsfw-placeholder': this.hidden,
	'-editable': this.edit !== undefined,
	'-compact': this.compact,
	},
	- '-type-' + this.type,
	+ '-type-' + this.attachment.type,
	this.size && '-size-' + this.size,
	`-${this.useContainFit ? 'contain' : 'cover'}-fit`,
	]
	},
	usePlaceholder() {
	return this.size === 'hide'
	},
	useContainFit() {
	return this.$store.getters.mergedConfig.useContainFit
	},
	placeholderName() {
	if (this.attachment.description === '' \|\| !this.attachment.description) {
	- return this.type.toUpperCase()
	+ return this.attachment.type.toUpperCase()
	}
	return this.attachment.description
	},
	placeholderIconClass() {
	- if (this.type === 'image') return 'image'
	- if (this.type === 'video') return 'video'
	- if (this.type === 'audio') return 'music'
	+ if (this.attachment.type === 'image') return 'image'
	+ if (this.attachment.type === 'video') return 'video'
	+ if (this.attachment.type === 'audio') return 'music'
	return 'file'
	},
	referrerpolicy() {
	return useInstanceCapabilitiesStore().mediaProxyAvailable
	? ''
	: 'no-referrer'
	},
	- type() {
	- return fileTypeService.fileType(this.attachment.mimetype)
	- },
	hidden() {
	return this.nsfw && this.hideNsfwLocal && !this.showHidden
	},
	isEmpty() {
	- return this.type === 'html' && !this.attachment.oembed
	+ return this.attachment.type === 'html' && !this.attachment.oembed
	},
	useModal() {
	let modalTypes = []
	switch (this.size) {
	case 'hide':
	case 'small':
	modalTypes = ['image', 'video', 'audio', 'flash']
	break
	default:
	modalTypes = this.mergedConfig.playVideosInModal
	? ['image', 'video', 'flash']
	: ['image']
	break
	}
	- return modalTypes.includes(this.type)
	+ return modalTypes.includes(this.attachment.type)
	},
	videoTag() {
	return this.useModal ? 'button' : 'span'
	},
	...mapGetters(['mergedConfig']),
	},
	watch: {
	'attachment.description'(newVal) {
	this.localDescription = newVal
	},
	localDescription(newVal) {
	this.onEdit(newVal)
	},
	},
	methods: {
	linkClicked({ target }) {
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	openModal() {
	if (this.useModal) {
	this.$emit('setMedia')
	useMediaViewerStore().setCurrentMedia(this.attachment)
	- } else if (this.type === 'unknown') {
	+ } else if (this.attachment.type === 'unknown') {
	window.open(this.attachment.url)
	}
	},
	openModalForce() {
	this.$emit('setMedia')
	useMediaViewerStore().setCurrentMedia(this.attachment)
	},
	onEdit(event) {
	this.edit && this.edit(this.attachment, event)
	},
	onRemove() {
	this.remove && this.remove(this.attachment)
	},
	onShiftUp() {
	this.shiftUp && this.shiftUp(this.attachment)
	},
	onShiftDn() {
	this.shiftDn && this.shiftDn(this.attachment)
	},
	stopFlash() {
	this.$refs.flash.closePlayer()
	},
	setFlashLoaded(event) {
	this.flashLoaded = event
	},
	toggleDescription() {
	this.showDescription = !this.showDescription
	},
	toggleHidden(event) {
	if (
	this.mergedConfig.useOneClickNsfw &&
	!this.showHidden &&
	- (this.type !== 'video' \|\| this.mergedConfig.playVideosInModal)
	+ (this.attachment.type !== 'video' \|\| this.mergedConfig.playVideosInModal)
	) {
	this.openModal(event)
	return
	}
	if (this.img && !this.preloadImage) {
	if (this.img.onload) {
	this.img.onload()
	} else {
	this.loading = true
	this.img.src = this.attachment.url
	this.img.onload = () => {
	this.loading = false
	this.showHidden = !this.showHidden
	}
	}
	} else {
	this.showHidden = !this.showHidden
	}
	},
	onImageLoad(image) {
	const width = image.naturalWidth
	const height = image.naturalHeight
	this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
	},
	},
	}

	export default Attachment
	diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
	index 696d3bb8a7..0db86ff8a1 100644
	--- a/src/components/attachment/attachment.vue
	+++ b/src/components/attachment/attachment.vue
	@@ -1,268 +1,268 @@
	<template>
	<button
	v-if="usePlaceholder"
	class="Attachment -placeholder button-default"
	:class="classNames"
	@click="openModal"
	>
	<a
	- v-if="type !== 'html'"
	+ v-if="attachment.type !== 'html'"
	class="placeholder"
	target="_blank"
	:href="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	@click.prevent
	>
	<FAIcon :icon="placeholderIconClass" />
	<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
	</a>
	<div
	v-if="edit \|\| remove"
	class="attachment-buttons"
	>
	<button
	v-if="remove"
	class="button-default attachment-button -transparent"
	@click.prevent="onRemove"
	>
	<FAIcon icon="trash-alt" />
	</button>
	</div>
	<div
	v-if="size !== 'hide' && !hideDescription && (edit \|\| localDescription \|\| showDescription)"
	class="description-container"
	:class="{ '-static': !edit }"
	>
	<input
	v-if="edit"
	v-model="localDescription"
	type="text"
	class="input description-field"
	:placeholder="$t('post_status.media_description')"
	@keydown.enter.prevent=""
	>
	<p v-else>
	{{ localDescription }}
	</p>
	</div>
	</button>
	<div
	v-else
	class="Attachment"
	:class="classNames"
	>
	<div
	v-show="!isEmpty"
	class="attachment-wrapper"
	>
	<a
	v-if="hidden"
	class="image-container"
	:href="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	@click.prevent.stop="toggleHidden"
	>
	<img
	:key="nsfwImage"
	class="nsfw"
	:src="nsfwImage"
	>
	<FAIcon
	- v-if="type === 'video'"
	+ v-if="attachment.type === 'video'"
	class="play-icon"
	icon="play-circle"
	/>
	</a>
	<div
	v-if="!hidden"
	class="attachment-buttons"
	>
	<button
	- v-if="type === 'flash' && flashLoaded"
	+ v-if="attachment.type === 'flash' && flashLoaded"
	class="button-default attachment-button -transparent"
	:title="$t('status.attachment_stop_flash')"
	@click.prevent="stopFlash"
	>
	<FAIcon icon="stop" />
	</button>
	<button
	- v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
	+ v-if="attachment.description && size !== 'small' && !edit && attachment.type !== 'unknown'"
	class="button-default attachment-button -transparent"
	:title="$t('status.show_attachment_description')"
	@click.prevent="toggleDescription"
	>
	<FAIcon icon="align-right" />
	</button>
	<button
	- v-if="!useModal && type !== 'unknown'"
	+ v-if="!useModal && attachment.type !== 'unknown'"
	class="button-default attachment-button -transparent"
	:title="$t('status.show_attachment_in_modal')"
	@click.prevent="openModalForce"
	>
	<FAIcon icon="search-plus" />
	</button>
	<button
	v-if="nsfw && hideNsfwLocal"
	class="button-default attachment-button -transparent"
	:title="$t('status.hide_attachment')"
	@click.prevent="toggleHidden"
	>
	<FAIcon icon="times" />
	</button>
	<button
	v-if="shiftUp"
	class="button-default attachment-button -transparent"
	:title="$t('status.move_up')"
	@click.prevent="onShiftUp"
	>
	<FAIcon icon="chevron-left" />
	</button>
	<button
	v-if="shiftDn"
	class="button-default attachment-button -transparent"
	:title="$t('status.move_down')"
	@click.prevent="onShiftDn"
	>
	<FAIcon icon="chevron-right" />
	</button>
	<button
	v-if="remove"
	class="button-default attachment-button -transparent"
	:title="$t('status.remove_attachment')"
	@click.prevent="onRemove"
	>
	<FAIcon icon="trash-alt" />
	</button>
	</div>

	<a
	- v-if="type === 'image' && (!hidden \|\| preloadImage)"
	+ v-if="attachment.type === 'image' && (!hidden \|\| preloadImage)"
	class="image-container"
	:class="{'-hidden': hidden && preloadImage }"
	:href="attachment.url"
	target="_blank"
	@click.stop.prevent="openModal"
	>
	<StillImage
	class="image"
	:referrerpolicy="referrerpolicy"
	:mimetype="attachment.mimetype"
	:src="attachment.large_thumb_url \|\| attachment.url"
	:image-load-handler="onImageLoad"
	:alt="attachment.description"
	/>
	</a>

	<a
	- v-if="type === 'unknown' && !hidden"
	+ v-if="attachment.type === 'unknown' && !hidden"
	class="placeholder-container"
	:href="attachment.url"
	target="_blank"
	>
	<FAIcon
	:size="compact ? '2x' : '5x'"
	:icon="placeholderIconClass"
	:title="localDescription"
	/>
	<p v-if="!compact">
	{{ localDescription }}
	</p>
	</a>

	<component
	:is="videoTag"
	- v-if="type === 'video' && !hidden"
	+ v-if="attachment.type === 'video' && !hidden"
	class="video-container"
	:href="attachment.url"
	@click.stop.prevent="openModal"
	>
	<VideoAttachment
	class="video"
	:attachment="attachment"
	:controls="!useModal"
	@play="$emit('play')"
	@pause="$emit('pause')"
	/>
	<FAIcon
	v-if="useModal"
	class="play-icon"
	icon="play-circle"
	/>
	</component>

	<span
	- v-if="type === 'audio' && !hidden"
	+ v-if="attachment.type === 'audio' && !hidden"
	class="audio-container"
	:href="attachment.url"
	@click.stop.prevent="openModal"
	>
	<audio
	- v-if="type === 'audio'"
	+ v-if="attachment.type === 'audio'"
	:src="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	controls
	@play="$emit('play')"
	@pause="$emit('pause')"
	/>
	</span>

	<div
	- v-if="type === 'html' && attachment.oembed"
	+ v-if="attachment.type === 'html' && attachment.oembed"
	class="oembed-container"
	@click.prevent="linkClicked"
	>
	<div
	v-if="attachment.thumb_url"
	class="image"
	>
	<img :src="attachment.thumb_url">
	</div>
	<div class="text">
	<!-- eslint-disable vue/no-v-html -->
	<h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
	<div v-html="attachment.oembed.oembedHTML" />
	<!-- eslint-enable vue/no-v-html -->
	</div>
	</div>

	<span
	- v-if="type === 'flash' && !hidden"
	+ v-if="attachment.type === 'flash' && !hidden"
	class="flash-container"
	:href="attachment.url"
	@click.stop.prevent="openModal"
	>
	<Flash
	ref="flash"
	class="flash"
	:src="attachment.large_thumb_url \|\| attachment.url"
	@player-opened="setFlashLoaded(true)"
	@player-closed="setFlashLoaded(false)"
	/>
	</span>
	</div>
	<div
	v-if="size !== 'hide' && !hideDescription && (edit \|\| (localDescription && showDescription))"
	class="description-container"
	:class="{ '-static': !edit }"
	>
	<input
	v-if="edit"
	v-model="localDescription"
	type="text"
	class="input description-field"
	:placeholder="$t('post_status.media_description')"
	@keydown.enter.prevent=""
	>
	<p v-else>
	{{ localDescription }}
	</p>
	</div>
	</div>
	</template>

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

	<style src="./attachment.scss" lang="scss"></style>
	diff --git a/src/components/chat_list_item/chat_list_item.js b/src/components/chat_list_item/chat_list_item.js
	index 4f4ea49557..202455c539 100644
	--- a/src/components/chat_list_item/chat_list_item.js
	+++ b/src/components/chat_list_item/chat_list_item.js
	@@ -1,75 +1,73 @@
	import { mapState } from 'vuex'

	import AvatarList from '../avatar_list/avatar_list.vue'
	import ChatTitle from '../chat_title/chat_title.vue'
	import StatusBody from '../status_content/status_content.vue'
	import Timeago from '../timeago/timeago.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'

	-import fileType from 'src/services/file_type/file_type.service'
	-
	const ChatListItem = {
	name: 'ChatListItem',
	props: ['chat'],
	components: {
	UserAvatar,
	AvatarList,
	Timeago,
	ChatTitle,
	StatusBody,
	},
	computed: {
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	attachmentInfo() {
	if (this.chat.lastMessage.attachments.length === 0) {
	return
	}

	const types = this.chat.lastMessage.attachments.map((file) =>
	- fileType.fileType(file.mimetype),
	+ file.type,
	)
	if (types.includes('video')) {
	return this.$t('file_type.video')
	} else if (types.includes('audio')) {
	return this.$t('file_type.audio')
	} else if (types.includes('image')) {
	return this.$t('file_type.image')
	} else {
	return this.$t('file_type.file')
	}
	},
	messageForStatusContent() {
	const message = this.chat.lastMessage
	const messageEmojis = message ? message.emojis : []
	const isYou = message && message.account_id === this.currentUser.id
	const content = message ? this.attachmentInfo \|\| message.content : ''
	const messagePreview = isYou
	? `<i>${this.$t('chats.you')}</i> ${content}`
	: content
	return {
	summary: '',
	emojis: messageEmojis,
	raw_html: messagePreview,
	text: messagePreview,
	attachments: [],
	}
	},
	},
	methods: {
	openChat() {
	if (this.chat.id) {
	this.$router.push({
	name: 'chat',
	params: {
	username: this.currentUser.screen_name,
	recipient_id: this.chat.account.id,
	},
	})
	}
	},
	},
	}

	export default ChatListItem
	diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
	index 6015861f8b..42cc6cfd6d 100644
	--- a/src/components/gallery/gallery.js
	+++ b/src/components/gallery/gallery.js
	@@ -1,141 +1,137 @@
	import { set, sumBy } from 'lodash'

	import Attachment from '../attachment/attachment.vue'

	import { useMediaViewerStore } from 'src/stores/media_viewer.js'

	+const displayTypes = new Set(["image", "video", "flash"])
	+
	const Gallery = {
	props: [
	'attachments',
	'compact',
	'limitRows',
	'descriptions',
	'limit',
	'nsfw',
	'setMedia',
	'size',
	'editable',
	'removeAttachment',
	'shiftUpAttachment',
	'shiftDnAttachment',
	'editAttachment',
	'grid',
	],
	data() {
	return {
	sizes: {},
	hidingLong: true,
	}
	},
	components: { Attachment },
	computed: {
	rows() {
	if (!this.attachments) {
	return []
	}
	const attachments =
	this.limit > 0
	? this.attachments.slice(0, this.limit)
	: this.attachments
	if (this.size === 'hide') {
	return attachments.map((item) => ({ minimal: true, items: [item] }))
	}
	const rows = this.grid
	? [{ grid: true, items: attachments }]
	: attachments
	.reduce(
	(acc, attachment, i) => {
	- if (attachment.mimetype.includes('audio')) {
	+ if (attachment.type === 'audio') {
	return [
	...acc,
	{ audio: true, items: [attachment] },
	{ items: [] },
	]
	}
	- if (
	- !(
	- attachment.mimetype.includes('image') \|\|
	- attachment.mimetype.includes('video') \|\|
	- attachment.mimetype.includes('flash')
	- )
	- ) {
	+ if (!displayTypes.has(attachment.type)) {
	return [
	...acc,
	{ minimal: true, items: [attachment] },
	{ items: [] },
	]
	}
	const maxPerRow = 3
	const attachmentsRemaining = this.attachments.length - i + 1
	const currentRow = acc[acc.length - 1].items
	currentRow.push(attachment)
	if (
	currentRow.length >= maxPerRow &&
	attachmentsRemaining > maxPerRow
	) {
	return [...acc, { items: [] }]
	} else {
	return acc
	}
	},
	[{ items: [] }],
	)
	.filter((_) => _.items.length > 0)
	return rows
	},
	attachmentsDimensionalScore() {
	return this.rows.reduce((acc, row) => {
	let size = 0
	if (row.minimal) {
	size += 1 / 8
	} else if (row.audio) {
	size += 1 / 4
	} else {
	size += 1 / (row.items.length + 0.6)
	}
	return acc + size
	}, 0)
	},
	tooManyAttachments() {
	if (this.editable \|\| this.size === 'small') {
	return false
	} else if (this.size === 'hide') {
	return this.attachments.length > 8
	} else {
	return this.attachmentsDimensionalScore > 1
	}
	},
	},
	methods: {
	onNaturalSizeLoad({ id, width, height }) {
	set(this.sizes, id, { width, height })
	},
	rowStyle(row) {
	if (row.audio) {
	return { 'padding-bottom': '25%' } // fixed reduced height for audio
	} else if (!row.minimal && !row.grid) {
	return { 'padding-bottom': `${100 / (row.items.length + 0.6)}%` }
	}
	},
	itemStyle(id, row) {
	const total = sumBy(row, (item) => this.getAspectRatio(item.id))
	return { flex: `${this.getAspectRatio(id) / total} 1 0%` }
	},
	getAspectRatio(id) {
	const size = this.sizes[id]
	return size ? size.width / size.height : 1
	},
	toggleHidingLong(event) {
	this.hidingLong = event
	},
	openGallery() {
	useMediaViewerStore().setMedia(this.attachments)
	useMediaViewerStore().setCurrentMedia(this.attachments[0])
	},
	onMedia() {
	useMediaViewerStore().setMedia(this.attachments)
	},
	},
	}

	export default Gallery
	diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
	index f0db02ffdc..0808b8cd61 100644
	--- a/src/components/media_modal/media_modal.js
	+++ b/src/components/media_modal/media_modal.js
	@@ -1,164 +1,157 @@
	import Flash from 'src/components/flash/flash.vue'
	-import fileTypeService from '../../services/file_type/file_type.service.js'
	import GestureService from '../../services/gesture_service/gesture_service'
	import Modal from '../modal/modal.vue'
	import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
	import StillImage from '../still-image/still-image.vue'
	import SwipeClick from '../swipe_click/swipe_click.vue'
	import VideoAttachment from '../video_attachment/video_attachment.vue'

	import { useMediaViewerStore } from 'src/stores/media_viewer.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faChevronLeft,
	faChevronRight,
	faCircleNotch,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faChevronLeft, faChevronRight, faCircleNotch, faTimes)

	const MediaModal = {
	components: {
	StillImage,
	VideoAttachment,
	PinchZoom,
	SwipeClick,
	Modal,
	Flash,
	},
	data() {
	return {
	loading: false,
	swipeDirection: GestureService.DIRECTION_LEFT,
	swipeThreshold: () => {
	const considerableMoveRatio = 1 / 4
	return window.innerWidth * considerableMoveRatio
	},
	pinchZoomMinScale: 1,
	pinchZoomScaleResetLimit: 1.2,
	}
	},
	computed: {
	showing() {
	return useMediaViewerStore().activated
	},
	media() {
	return useMediaViewerStore().media
	},
	description() {
	return this.currentMedia.description
	},
	currentIndex() {
	return useMediaViewerStore().currentIndex
	},
	currentMedia() {
	return this.media[this.currentIndex]
	},
	canNavigate() {
	return this.media.length > 1
	},
	- type() {
	- return this.currentMedia ? this.getType(this.currentMedia) : null
	- },
	swipeDisableClickThreshold() {
	// If there is only one media, allow more mouse movements to close the modal
	// because there is less chance that the user wants to switch to another image
	return () => (this.canNavigate ? 1 : 30)
	},
	},
	methods: {
	- getType(media) {
	- return fileTypeService.fileType(media.mimetype)
	- },
	hide() {
	// HACK: Closing immediately via a touch will cause the click
	// to be processed on the content below the overlay
	const transitionTime = 100 // ms
	setTimeout(() => {
	useMediaViewerStore().closeMediaViewer()
	}, transitionTime)
	},
	hideIfNotSwiped(event) {
	// If we have swiped over SwipeClick, do not trigger hide
	const comp = this.$refs.swipeClick
	if (!comp) {
	this.hide()
	} else {
	comp.$gesture.click(event)
	}
	},
	goPrev() {
	if (this.canNavigate) {
	const prevIndex =
	this.currentIndex === 0
	? this.media.length - 1
	: this.currentIndex - 1
	const newMedia = this.media[prevIndex]
	- if (this.getType(newMedia) === 'image') {
	+ if (newMedia.type === 'image') {
	this.loading = true
	}
	useMediaViewerStore().setCurrentMedia(newMedia)
	}
	},
	goNext() {
	if (this.canNavigate) {
	const nextIndex =
	this.currentIndex === this.media.length - 1
	? 0
	: this.currentIndex + 1
	const newMedia = this.media[nextIndex]
	- if (this.getType(newMedia) === 'image') {
	+ if (newMedia.type === 'image') {
	this.loading = true
	}
	useMediaViewerStore().setCurrentMedia(newMedia)
	}
	},
	onImageLoaded() {
	this.loading = false
	},
	handleSwipePreview(offsets) {
	this.$refs.pinchZoom.setTransform({ scale: 1, x: offsets[0], y: 0 })
	},
	handleSwipeEnd(sign) {
	this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
	if (sign > 0) {
	this.goNext()
	} else if (sign < 0) {
	this.goPrev()
	}
	},
	handleKeyupEvent(e) {
	if (this.showing && e.keyCode === 27) {
	// escape
	this.hide()
	}
	},
	handleKeydownEvent(e) {
	if (!this.showing) {
	return
	}

	if (e.keyCode === 39) {
	// arrow right
	this.goNext()
	} else if (e.keyCode === 37) {
	// arrow left
	this.goPrev()
	}
	},
	},
	mounted() {
	window.addEventListener('popstate', this.hide)
	document.addEventListener('keyup', this.handleKeyupEvent)
	document.addEventListener('keydown', this.handleKeydownEvent)
	},
	unmounted() {
	window.removeEventListener('popstate', this.hide)
	document.removeEventListener('keyup', this.handleKeyupEvent)
	document.removeEventListener('keydown', this.handleKeydownEvent)
	},
	}

	export default MediaModal
	diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
	index 7f625755c1..93587210fa 100644
	--- a/src/components/media_modal/media_modal.vue
	+++ b/src/components/media_modal/media_modal.vue
	@@ -1,294 +1,294 @@
	<template>
	<Modal
	v-if="showing"
	class="media-modal-view"
	@backdrop-clicked="hideIfNotSwiped"
	>
	<SwipeClick
	- v-if="type === 'image'"
	+ v-if="currentMedia.type === 'image'"
	ref="swipeClick"
	class="modal-image-container"
	:direction="swipeDirection"
	:threshold="swipeThreshold"
	:disable-click-threshold="swipeDisableClickThreshold"
	@preview-requested="handleSwipePreview"
	@swipe-finished="handleSwipeEnd"
	@swipeless-clicked="hide"
	>
	<PinchZoom
	ref="pinchZoom"
	class="modal-image-container-inner"
	selector=".modal-image"
	reach-min-scale-strategy="reset"
	stop-propagate-handled="stop-propgate-handled"
	:allow-pan-min-scale="pinchZoomMinScale"
	:min-scale="pinchZoomMinScale"
	:reset-to-min-scale-limit="pinchZoomScaleResetLimit"
	>
	<img
	:class="{ loading }"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	@load="onImageLoaded"
	>
	</PinchZoom>
	</SwipeClick>
	<VideoAttachment
	- v-if="type === 'video'"
	+ v-if="currentMedia.type === 'video'"
	class="modal-image"
	:attachment="currentMedia"
	:controls="true"
	/>
	<audio
	- v-if="type === 'audio'"
	+ v-if="currentMedia.type === 'audio'"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	controls
	/>
	<Flash
	- v-if="type === 'flash'"
	+ v-if="currentMedia.type === 'flash'"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	/>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.previous')"
	class="modal-view-button modal-view-button-arrow modal-view-button-arrow--prev"
	@click.stop.prevent="goPrev"
	>
	<FAIcon
	class="button-icon arrow-icon"
	icon="chevron-left"
	/>
	</button>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.next')"
	class="modal-view-button modal-view-button-arrow modal-view-button-arrow--next"
	@click.stop.prevent="goNext"
	>
	<FAIcon
	class="button-icon arrow-icon"
	icon="chevron-right"
	/>
	</button>
	<button
	class="modal-view-button modal-view-button-hide"
	:title="$t('media_modal.hide')"
	@click.stop.prevent="hide"
	>
	<FAIcon
	class="button-icon"
	icon="times"
	/>
	</button>

	<span
	v-if="description"
	class="description"
	>
	{{ description }}
	</span>
	<span
	class="counter"
	>
	{{ $t('media_modal.counter', { current: currentIndex + 1, total: media.length }, currentIndex + 1) }}
	</span>
	<span
	v-if="loading"
	class="loading-spinner"
	>
	<FAIcon
	spin
	icon="circle-notch"
	size="5x"
	/>
	</span>
	</Modal>
	</template>

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

	<style lang="scss">
	$modal-view-button-icon-height: 3em;
	$modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2);
	$modal-view-button-icon-width: 3em;
	$modal-view-button-icon-margin: 0.5em;

	.media-modal-view {
	@keyframes media-fadein {
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
	}

	.modal-image-container {
	display: flex;
	overflow: hidden;
	align-items: center;
	flex-direction: column;
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	flex-grow: 1;
	justify-content: center;

	&-inner {
	width: 100%;
	height: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}
	}

	.description,
	.counter {
	/* Hardcoded since background is also hardcoded */
	color: white;
	margin-top: 1em;
	text-shadow: 0 0 10px black, 0 0 10px black;
	padding: 0.2em 2em;
	}

	.description {
	flex: 0 0 auto;
	overflow-y: auto;
	min-height: 1em;
	max-width: 35.8em;
	max-height: 9.5em;
	overflow-wrap: break-word;
	text-wrap: pretty;
	}

	.modal-image {
	max-width: 100%;
	max-height: 100%;
	image-orientation: from-image; // NOTE: only FF supports this
	animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;

	&.loading {
	opacity: 0.5;
	}
	}

	.loading-spinner {
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: center;

	svg {
	color: white;
	}
	}

	.modal-view-button {
	border: 0;
	padding: 0;
	opacity: 0;
	box-shadow: none;
	background: none;
	appearance: none;
	overflow: visible;
	cursor: pointer;
	transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
	height: $modal-view-button-icon-height;
	width: $modal-view-button-icon-width;

	.button-icon {
	position: absolute;
	height: $modal-view-button-icon-height;
	width: $modal-view-button-icon-width;
	font-size: 1rem;
	line-height: $modal-view-button-icon-height;
	color: #fff;
	text-align: center;
	background-color: rgb(0 0 0 / 30%);
	}
	}

	.modal-view-button-arrow {
	position: absolute;
	display: block;
	top: 50%;
	margin-top: $modal-view-button-icon-half-height;
	width: $modal-view-button-icon-width;
	height: $modal-view-button-icon-height;

	.arrow-icon {
	position: absolute;
	top: 0;
	line-height: $modal-view-button-icon-height;
	color: #fff;
	text-align: center;
	background-color: rgb(0 0 0 / 30%);
	}

	&--prev {
	left: 0;

	.arrow-icon {
	left: $modal-view-button-icon-margin;
	}
	}

	&--next {
	right: 0;

	.arrow-icon {
	right: $modal-view-button-icon-margin;
	}
	}
	}

	.modal-view-button-hide {
	position: absolute;
	top: 0;
	right: 0;

	.button-icon {
	top: $modal-view-button-icon-margin;
	right: $modal-view-button-icon-margin;
	}
	}
	}

	.modal-view.media-modal-view {
	z-index: var(--ZI_media_modal);
	flex-direction: column;

	.modal-view-button-arrow,
	.modal-view-button-hide {
	opacity: 0.75;

	&:focus,
	&:hover {
	outline: none;
	box-shadow: none;
	}

	&:hover {
	opacity: 1;
	}
	}

	overflow: hidden;
	}
	</style>
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 802d340aba..853e62ee8e 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,934 +1,930 @@
	import { debounce, map, reject, uniqBy } from 'lodash'
	import { mapActions, mapState } from 'pinia'
	import { mapGetters } from 'vuex'

	import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
	import Gallery from 'src/components/gallery/gallery.vue'
	import Popover from 'src/components/popover/popover.vue'
	import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
	-import fileTypeService from '../../services/file_type/file_type.service.js'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
	import genRandomSeed from '../../services/random_seed/random_seed.service.js'
	import statusPoster from '../../services/status_poster/status_poster.service.js'
	import Attachment from '../attachment/attachment.vue'
	import Checkbox from '../checkbox/checkbox.vue'
	import EmojiInput from '../emoji_input/emoji_input.vue'
	import suggestor from '../emoji_input/suggestor.js'
	import MediaUpload from '../media_upload/media_upload.vue'
	import PollForm from '../poll/poll_form.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import Select from '../select/select.vue'
	import StatusContent from '../status_content/status_content.vue'

	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMediaViewerStore } from 'src/stores/media_viewer.js'

	import { pollFormToMasto } from 'src/services/poll/poll.service.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBan,
	faChevronDown,
	faChevronLeft,
	faChevronRight,
	faCircleNotch,
	faPollH,
	faSmileBeam,
	faTimes,
	faUpload,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSmileBeam,
	faPollH,
	faUpload,
	faBan,
	faTimes,
	faCircleNotch,
	faChevronDown,
	faChevronLeft,
	faChevronRight,
	)

	const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
	let allAttentions = [...attentions]

	allAttentions.unshift(user)

	allAttentions = uniqBy(allAttentions, 'id')
	allAttentions = reject(allAttentions, { id: currentUser.id })

	const mentions = map(allAttentions, (attention) => {
	return `@${attention.screen_name}`
	})

	return mentions.length > 0 ? mentions.join(' ') + ' ' : ''
	}

	// Converts a string with px to a number like '2px' -> 2
	const pxStringToNumber = (str) => {
	return Number(str.substring(0, str.length - 2))
	}

	const typeAndRefId = ({ replyTo, profileMention, statusId }) => {
	if (replyTo) {
	return ['reply', replyTo]
	} else if (profileMention) {
	return ['mention', profileMention]
	} else if (statusId) {
	return ['edit', statusId]
	} else {
	return ['new', '']
	}
	}

	const PostStatusForm = {
	props: [
	'statusId',
	'statusText',
	'statusIsSensitive',
	'statusPoll',
	'statusFiles',
	'statusMediaDescriptions',
	'statusScope',
	'statusContentType',
	'replyTo',
	'repliedUser',
	'attentions',
	'copyMessageScope',
	'subject',
	'disableSubject',
	'disableScopeSelector',
	'disableVisibilitySelector',
	'disableNotice',
	'disableLockWarning',
	'disablePolls',
	'disableSensitivityCheckbox',
	'disableSubmit',
	'disablePreview',
	'disableDraft',
	'hideDraft',
	'closeable',
	'placeholder',
	'maxHeight',
	'postHandler',
	'preserveFocus',
	'autoFocus',
	'fileLimit',
	'submitOnEnter',
	'emojiPickerPlacement',
	'optimisticPosting',
	'profileMention',
	'draftId',
	],
	emits: [
	'posted',
	'draft-done',
	'resize',
	'mediaplay',
	'mediapause',
	'can-close',
	'update',
	],
	components: {
	MediaUpload,
	EmojiInput,
	PollForm,
	ScopeSelector,
	Checkbox,
	Select,
	Attachment,
	StatusContent,
	Gallery,
	DraftCloser,
	Popover,
	},
	mounted() {
	this.updateIdempotencyKey()
	this.resize(this.$refs.textarea)

	if (this.replyTo) {
	const textLength = this.$refs.textarea.value.length
	this.$refs.textarea.setSelectionRange(textLength, textLength)
	}

	if (this.replyTo \|\| this.autoFocus) {
	this.$refs.textarea.focus()
	}
	},
	data() {
	const preset = this.$route.query.message
	let statusText = preset \|\| ''

	const { scopeCopy } = this.$store.getters.mergedConfig

	const [statusType, refId] = typeAndRefId({
	replyTo: this.replyTo,
	profileMention: this.profileMention && this.repliedUser?.id,
	statusId: this.statusId,
	})

	// If we are starting a new post, do not associate it with old drafts
	let statusParams =
	!this.disableDraft && (this.draftId \|\| statusType !== 'new')
	? this.getDraft(statusType, refId)
	: null

	if (!statusParams) {
	if (statusType === 'reply' \|\| statusType === 'mention') {
	const currentUser = this.$store.state.users.currentUser
	statusText = buildMentionsString(
	{ user: this.repliedUser, attentions: this.attentions },
	currentUser,
	)
	}

	const scope =
	(this.copyMessageScope && scopeCopy) \|\|
	this.copyMessageScope === 'direct'
	? this.copyMessageScope
	: this.$store.state.users.currentUser.default_scope

	const { postContentType: contentType, sensitiveByDefault } =
	this.$store.getters.mergedConfig

	statusParams = {
	type: statusType,
	refId,
	spoilerText: this.subject \|\| '',
	status: statusText,
	nsfw: !!sensitiveByDefault,
	files: [],
	poll: {},
	hasPoll: false,
	mediaDescriptions: {},
	visibility: scope,
	contentType,
	quoting: false,
	}

	if (statusType === 'edit') {
	const statusContentType = this.statusContentType \|\| contentType
	statusParams = {
	type: statusType,
	refId,
	spoilerText: this.subject \|\| '',
	status: this.statusText \|\| '',
	nsfw: this.statusIsSensitive \|\| !!sensitiveByDefault,
	files: this.statusFiles \|\| [],
	poll: this.statusPoll \|\| {},
	hasPoll: false,
	mediaDescriptions: this.statusMediaDescriptions \|\| {},
	visibility: this.statusScope \|\| scope,
	contentType: statusContentType,
	}
	}
	}

	return {
	randomSeed: genRandomSeed(),
	dropFiles: [],
	uploadingFiles: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: statusParams,
	caret: 0,
	showDropIcon: 'hide',
	dropStopTimeout: null,
	preview: null,
	previewLoading: false,
	emojiInputShown: false,
	idempotencyKey: '',
	saveInhibited: true,
	saveable: false,
	}
	},
	computed: {
	users() {
	return this.$store.state.users.users
	},
	userDefaultScope() {
	return this.$store.state.users.currentUser.default_scope
	},
	showAllScopes() {
	return !this.mergedConfig.minimalScopesMode
	},
	hideExtraActions() {
	return this.disableDraft \|\| this.hideDraft
	},
	emojiUserSuggestor() {
	return suggestor({
	emoji: [
	...useEmojiStore().standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	store: this.$store,
	})
	},
	emojiSuggestor() {
	return suggestor({
	emoji: [
	...useEmojiStore().standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	})
	},
	emoji() {
	return useEmojiStore().standardEmojiList \|\| []
	},
	customEmoji() {
	return useEmojiStore().customEmoji \|\| []
	},
	statusLength() {
	return this.newStatus.status.length
	},
	spoilerTextLength() {
	return this.newStatus.spoilerText.length
	},
	statusLengthLimit() {
	return useInstanceStore().textlimit
	},
	hasStatusLengthLimit() {
	return this.statusLengthLimit > 0
	},
	charactersLeft() {
	return (
	this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
	)
	},
	isOverLengthLimit() {
	return this.hasStatusLengthLimit && this.charactersLeft < 0
	},
	minimalScopesMode() {
	return useInstanceStore().minimalScopesMode
	},
	alwaysShowSubject() {
	return this.mergedConfig.alwaysShowSubjectInput
	},
	postFormats() {
	return useInstanceCapabilitiesStore().postFormats \|\| []
	},
	safeDMEnabled() {
	return useInstanceCapabilitiesStore().safeDM
	},
	pollsAvailable() {
	return (
	useInstanceCapabilitiesStore().pollsAvailable &&
	useInstanceStore().limits.pollLimits.max_options >= 2 &&
	this.disablePolls !== true
	)
	},
	hideScopeNotice() {
	return (
	this.disableNotice \|\| this.$store.getters.mergedConfig.hideScopeNotice
	)
	},
	pollContentError() {
	return (
	this.pollFormVisible && this.newStatus.poll && this.newStatus.poll.error
	)
	},
	showPreview() {
	return !this.disablePreview && (!!this.preview \|\| this.previewLoading)
	},
	emptyStatus() {
	return (
	this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
	)
	},
	uploadFileLimitReached() {
	return this.newStatus.files.length >= this.fileLimit
	},
	isEdit() {
	return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
	},
	quotable() {
	if (!useInstanceCapabilitiesStore().quotingAvailable) {
	return false
	}

	if (!this.replyTo) {
	return false
	}

	const repliedStatus =
	this.$store.state.statuses.allStatusesObject[this.replyTo]
	if (!repliedStatus) {
	return false
	}

	if (
	repliedStatus.visibility === 'public' \|\|
	repliedStatus.visibility === 'unlisted' \|\|
	repliedStatus.visibility === 'local'
	) {
	return true
	} else if (repliedStatus.visibility === 'private') {
	return repliedStatus.user.id === this.$store.state.users.currentUser.id
	}

	return false
	},
	debouncedMaybeAutoSaveDraft() {
	return debounce(this.maybeAutoSaveDraft, 3000)
	},
	pollFormVisible() {
	return this.newStatus.hasPoll
	},
	shouldAutoSaveDraft() {
	return this.$store.getters.mergedConfig.autoSaveDraft
	},
	autoSaveState() {
	if (this.saveable) {
	return this.$t('post_status.auto_save_saving')
	} else if (this.newStatus.id) {
	return this.$t('post_status.auto_save_saved')
	} else {
	return this.$t('post_status.auto_save_nothing_new')
	}
	},
	safeToSaveDraft() {
	return (
	(this.newStatus.status \|\|
	this.newStatus.spoilerText \|\|
	this.newStatus.files?.length \|\|
	this.newStatus.hasPoll) &&
	this.saveable
	)
	},
	hasEmptyDraft() {
	return (
	this.newStatus.id &&
	!(
	this.newStatus.status \|\|
	this.newStatus.spoilerText \|\|
	this.newStatus.files?.length \|\|
	this.newStatus.hasPoll
	)
	)
	},
	...mapGetters(['mergedConfig']),
	...mapState(useInterfaceStore, {
	mobileLayout: (store) => store.mobileLayout,
	}),
	},
	watch: {
	newStatus: {
	deep: true,
	handler() {
	this.statusChanged()
	},
	},
	saveable(val) {
	// https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes
	// MDN says we'd better add the beforeunload event listener only when needed, and remove it when it's no longer needed
	if (val) {
	this.addBeforeUnloadListener()
	} else {
	this.removeBeforeUnloadListener()
	}
	},
	},
	beforeUnmount() {
	this.maybeAutoSaveDraft()
	this.removeBeforeUnloadListener()
	},
	methods: {
	...mapActions(useMediaViewerStore, ['increment']),
	statusChanged() {
	this.autoPreview()
	this.updateIdempotencyKey()
	this.debouncedMaybeAutoSaveDraft()
	this.saveable = true
	this.saveInhibited = false
	},
	clearStatus() {
	const newStatus = this.newStatus
	this.saveInhibited = true
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType,
	poll: {},
	hasPoll: false,
	mediaDescriptions: {},
	quoting: false,
	}
	this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
	this.clearPollForm()
	if (this.preserveFocus) {
	this.$nextTick(() => {
	this.$refs.textarea.focus()
	})
	}
	const el = this.$el.querySelector('textarea')
	el.style.height = 'auto'
	el.style.height = undefined
	this.error = null
	if (this.preview) this.previewStatus()
	this.saveable = false
	},
	async postStatus(event, newStatus) {
	if (this.posting && !this.optimisticPosting) {
	return
	}
	if (this.disableSubmit) {
	return
	}
	if (this.emojiInputShown) {
	return
	}
	if (this.submitOnEnter) {
	event.stopPropagation()
	event.preventDefault()
	}

	if (
	this.optimisticPosting &&
	(this.emptyStatus \|\| this.isOverLengthLimit)
	) {
	return
	}

	if (this.emptyStatus) {
	this.error = this.$t('post_status.empty_status_error')
	return
	}

	const poll = this.newStatus.hasPoll
	? pollFormToMasto(this.newStatus.poll)
	: {}
	if (this.pollContentError) {
	this.error = this.pollContentError
	return
	}

	this.posting = true

	try {
	await this.setAllMediaDescriptions()
	} catch {
	this.error = this.$t('post_status.media_description_error')
	this.posting = false
	return
	}

	const replyOrQuoteAttr = newStatus.quoting
	? 'quoteId'
	: 'inReplyToStatusId'

	const postingOptions = {
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: newStatus.files,
	store: this.$store,
	[replyOrQuoteAttr]: this.replyTo,
	contentType: newStatus.contentType,
	poll,
	idempotencyKey: this.idempotencyKey,
	}

	const postHandler = this.postHandler
	? this.postHandler
	: statusPoster.postStatus

	postHandler(postingOptions).then((data) => {
	if (!data.error) {
	this.abandonDraft()
	this.clearStatus()
	this.$emit('posted', data)
	} else {
	this.error = data.error
	}
	this.posting = false
	})
	},
	previewStatus() {
	if (this.emptyStatus && this.newStatus.spoilerText.trim() === '') {
	this.preview = { error: this.$t('post_status.preview_empty') }
	this.previewLoading = false
	return
	}
	const newStatus = this.newStatus
	this.previewLoading = true
	const replyOrQuoteAttr = newStatus.quoting
	? 'quoteId'
	: 'inReplyToStatusId'
	statusPoster
	.postStatus({
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: [],
	store: this.$store,
	[replyOrQuoteAttr]: this.replyTo,
	contentType: newStatus.contentType,
	poll: {},
	preview: true,
	})
	.then((data) => {
	// Don't apply preview if not loading, because it means
	// user has closed the preview manually.
	if (!this.previewLoading) return
	if (!data.error) {
	this.preview = data
	} else {
	this.preview = { error: data.error }
	}
	})
	.catch((error) => {
	this.preview = { error }
	})
	.finally(() => {
	this.previewLoading = false
	})
	},
	debouncePreviewStatus: debounce(function () {
	this.previewStatus()
	}, 500),
	autoPreview() {
	if (!this.preview) return
	this.previewLoading = true
	this.debouncePreviewStatus()
	},
	closePreview() {
	this.preview = null
	this.previewLoading = false
	},
	togglePreview() {
	if (this.showPreview) {
	this.closePreview()
	} else {
	this.previewStatus()
	}
	},
	addMediaFile(fileInfo) {
	this.newStatus.files.push(fileInfo)
	this.$emit('resize', { delayed: true })
	},
	removeMediaFile(fileInfo) {
	const index = this.newStatus.files.indexOf(fileInfo)
	this.newStatus.files.splice(index, 1)
	this.$emit('resize')
	},
	editAttachment(fileInfo, newText) {
	this.newStatus.mediaDescriptions[fileInfo.id] = newText
	},
	shiftUpMediaFile(fileInfo) {
	const { files } = this.newStatus
	const index = this.newStatus.files.indexOf(fileInfo)
	files.splice(index, 1)
	files.splice(index - 1, 0, fileInfo)
	},
	shiftDnMediaFile(fileInfo) {
	const { files } = this.newStatus
	const index = this.newStatus.files.indexOf(fileInfo)
	files.splice(index, 1)
	files.splice(index + 1, 0, fileInfo)
	},
	uploadFailed(errString, templateArgs) {
	templateArgs = templateArgs \|\| {}
	this.error =
	this.$t('upload.error.base') +
	' ' +
	this.$t('upload.error.' + errString, templateArgs)
	},
	startedUploadingFiles() {
	this.uploadingFiles = true
	},
	finishedUploadingFiles() {
	this.$emit('resize')
	this.uploadingFiles = false
	},
	- type(fileInfo) {
	- return fileTypeService.fileType(fileInfo.mimetype)
	- },
	paste(e) {
	this.autoPreview()
	this.resize(e)
	if (e.clipboardData.files.length > 0) {
	// prevent pasting of file as text
	e.preventDefault()
	// Strangely, files property gets emptied after event propagation
	// Trying to wrap it in array doesn't work. Plus I doubt it's possible
	// to hold more than one file in clipboard.
	this.dropFiles = [e.clipboardData.files[0]]
	}
	},
	fileDrop(e) {
	if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
	e.preventDefault() // allow dropping text like before
	this.dropFiles = e.dataTransfer.files
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'hide'
	}
	},
	fileDragStop() {
	// The false-setting is done with delay because just using leave-events
	// directly caused unwanted flickering, this is not perfect either but
	// much less noticable.
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'fade'
	this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
	},
	fileDrag(e) {
	e.dataTransfer.dropEffect = this.uploadFileLimitReached ? 'none' : 'copy'
	if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'show'
	}
	},
	onEmojiInputInput() {
	this.$nextTick(() => {
	this.resize(this.$refs.textarea)
	})
	},
	resize(e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) {
	return
	}

	// Reset to default height for empty form, nothing else to do here.
	if (target.value === '') {
	target.style.height = null
	this.$emit('resize')
	return
	}

	const formRef = this.$refs.form
	const bottomRef = this.$refs.bottom
	/* Scroller is either `window` (replies in TL), sidebar (main post form,
	* replies in notifs) or mobile post form. Note that getting and setting
	* scroll is different for `Window` and `Element`s
	*/
	const bottomBottomPaddingStr =
	window.getComputedStyle(bottomRef)['padding-bottom']
	const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr)

	const scrollerRef =
	this.$el.closest('.column.-scrollable') \|\|
	this.$el.closest('.post-form-modal-view') \|\|
	window

	// Getting info about padding we have to account for, removing 'px' part
	const topPaddingStr = window.getComputedStyle(target)['padding-top']
	const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom']
	const topPadding = pxStringToNumber(topPaddingStr)
	const bottomPadding = pxStringToNumber(bottomPaddingStr)
	const vertPadding = topPadding + bottomPadding

	const oldHeight = pxStringToNumber(target.style.height)

	/* Explanation:
	*
	* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
	* scrollHeight returns element's scrollable content height, i.e. visible
	* element + overscrolled parts of it. We use it to determine when text
	* inside the textarea exceeded its height, so we can set height to prevent
	* overscroll, i.e. make textarea grow with the text. HOWEVER, since we
	* explicitly set new height, scrollHeight won't go below that, so we can't
	* SHRINK the textarea when there's extra space. To workaround that we set
	* height to 'auto' which makes textarea tiny again, so that scrollHeight
	* will match text height again. HOWEVER, shrinking textarea can screw with
	* the scroll since there might be not enough padding around form-bottom to even
	* warrant a scroll, so it will jump to 0 and refuse to move anywhere,
	* so we check current scroll position before shrinking and then restore it
	* with needed delta.
	*/

	// this part has to be BEFORE the content size update
	const currentScroll =
	scrollerRef === window ? scrollerRef.scrollY : scrollerRef.scrollTop
	const scrollerHeight =
	scrollerRef === window
	? scrollerRef.innerHeight
	: scrollerRef.offsetHeight
	const scrollerBottomBorder = currentScroll + scrollerHeight

	// BEGIN content size update
	target.style.height = 'auto'
	const heightWithoutPadding = Math.floor(target.scrollHeight - vertPadding)
	let newHeight = this.maxHeight
	? Math.min(heightWithoutPadding, this.maxHeight)
	: heightWithoutPadding
	// This is a bit of a hack to combat target.scrollHeight being different on every other input
	// on some browsers for whatever reason. Don't change the height if difference is 1px or less.
	if (Math.abs(newHeight - oldHeight) <= 1) {
	newHeight = oldHeight
	}
	target.style.height = `${newHeight}px`
	this.$emit('resize', newHeight)
	// END content size update

	// We check where the bottom border of form-bottom element is, this uses findOffset
	// to find offset relative to scrollable container (scroller)
	const bottomBottomBorder =
	bottomRef.offsetHeight +
	findOffset(bottomRef, scrollerRef).top +
	bottomBottomPadding

	const isBottomObstructed = scrollerBottomBorder < bottomBottomBorder
	const isFormBiggerThanScroller = scrollerHeight < formRef.offsetHeight
	const bottomChangeDelta = bottomBottomBorder - scrollerBottomBorder
	// The intention is basically this;
	// Keep form-bottom always visible so that submit button is in view EXCEPT
	// if form element bigger than scroller and caret isn't at the end, so that
	// if you scroll up and edit middle of text you won't get scrolled back to bottom
	const shouldScrollToBottom =
	isBottomObstructed &&
	!(
	isFormBiggerThanScroller &&
	this.$refs.textarea.selectionStart !==
	this.$refs.textarea.value.length
	)
	const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
	const targetScroll = Math.round(currentScroll + totalDelta)

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}
	},
	clearError() {
	this.error = null
	},
	changeVis(visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm() {
	this.newStatus.hasPoll = !this.newStatus.hasPoll
	},
	setPoll(poll) {
	this.newStatus.poll = poll
	},
	clearPollForm() {
	if (this.$refs.pollForm) {
	this.$refs.pollForm.clear()
	}
	},
	dismissScopeNotice() {
	this.$store.dispatch('setOption', {
	name: 'hideScopeNotice',
	value: true,
	})
	},
	setMediaDescription(id) {
	const description = this.newStatus.mediaDescriptions[id]
	if (!description \|\| description.trim() === '') return
	return statusPoster.setMediaDescription({
	store: this.$store,
	id,
	description,
	})
	},
	setAllMediaDescriptions() {
	const ids = this.newStatus.files.map((file) => file.id)
	return Promise.all(ids.map((id) => this.setMediaDescription(id)))
	},
	handleEmojiInputShow(value) {
	this.emojiInputShown = value
	},
	updateIdempotencyKey() {
	this.idempotencyKey = Date.now().toString()
	},
	openProfileTab() {
	useInterfaceStore().openSettingsModalTab('profile')
	},
	propsToNative(props) {
	return propsToNative(props)
	},
	saveDraft() {
	if (!this.disableDraft && !this.saveInhibited) {
	if (this.safeToSaveDraft) {
	return this.$store
	.dispatch('addOrSaveDraft', { draft: this.newStatus })
	.then((id) => {
	if (this.newStatus.id !== id) {
	this.newStatus.id = id
	}
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	this.$emit('draft-done')
	}
	})
	} else if (this.hasEmptyDraft) {
	// There is a draft, but there is nothing in it, clear it
	return this.abandonDraft().then(() => {
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	this.$emit('draft-done')
	}
	})
	}
	}
	return Promise.resolve()
	},
	maybeAutoSaveDraft() {
	if (this.shouldAutoSaveDraft) {
	this.saveDraft(false)
	}
	},
	abandonDraft() {
	return this.$store.dispatch('abandonDraft', { id: this.newStatus.id })
	},
	getDraft(statusType, refId) {
	const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
	if (this.draftId && maybeDraft) {
	return maybeDraft
	} else {
	const existingDrafts = this.$store.getters.draftsByTypeAndRefId(
	statusType,
	refId,
	)

	if (existingDrafts.length) {
	return existingDrafts[0]
	}
	}
	// No draft available, fall back
	},
	requestClose() {
	if (!this.saveable) {
	this.$emit('can-close')
	} else {
	this.$refs.draftCloser.requestClose()
	}
	},
	saveAndCloseDraft() {
	this.saveDraft().then(() => {
	this.$emit('can-close')
	})
	},
	discardAndCloseDraft() {
	this.abandonDraft().then(() => {
	this.$emit('can-close')
	})
	},
	addBeforeUnloadListener() {
	this._beforeUnloadListener \|\|= () => {
	this.saveDraft()
	}
	window.addEventListener('beforeunload', this._beforeUnloadListener)
	},
	removeBeforeUnloadListener() {
	if (this._beforeUnloadListener) {
	window.removeEventListener('beforeunload', this._beforeUnloadListener)
	}
	},
	},
	}

	export default PostStatusForm
	diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
	index 4a3872895a..731fcc3902 100644
	--- a/src/components/status_body/status_body.js
	+++ b/src/components/status_body/status_body.js
	@@ -1,164 +1,162 @@
	import { mapGetters } from 'vuex'

	import RichContent from 'src/components/rich_content/rich_content.jsx'

	-import fileType from 'src/services/file_type/file_type.service'
	-
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faFile,
	faImage,
	faLink,
	faMusic,
	faPollH,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faFile, faMusic, faImage, faLink, faPollH)

	const StatusBody = {
	name: 'StatusBody',
	props: [
	'compact',
	'collapse', // replaces newlines with spaces
	'status',
	'focused',
	'noHeading',
	'fullContent',
	'singleLine',
	'showingTall',
	'expandingSubject',
	'showingLongSubject',
	'toggleShowingTall',
	'toggleExpandingSubject',
	'toggleShowingLongSubject',
	],
	data() {
	return {
	postLength: this.status.text.length,
	parseReadyDone: false,
	}
	},
	emits: ['parseReady'],
	computed: {
	localCollapseSubjectDefault() {
	return this.mergedConfig.collapseMessageWithSubject
	},
	// 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() {
	if (this.singleLine \|\| this.compact) return false
	const lengthScore =
	this.status.raw_html.split(/<p\|<br/).length + this.postLength / 80
	return lengthScore > 20
	},
	longSubject() {
	return this.status.summary.length > 240
	},
	// When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
	mightHideBecauseSubject() {
	return !!this.status.summary && this.localCollapseSubjectDefault
	},
	mightHideBecauseTall() {
	return (
	this.tallStatus &&
	!(this.status.summary && this.localCollapseSubjectDefault)
	)
	},
	hideSubjectStatus() {
	return this.mightHideBecauseSubject && !this.expandingSubject
	},
	hideTallStatus() {
	return this.mightHideBecauseTall && !this.showingTall
	},
	shouldShowToggle() {
	return this.mightHideBecauseSubject \|\| this.mightHideBecauseTall
	},
	toggleButtonClasses() {
	return {
	'cw-status-hider': !this.showingMore && this.mightHideBecauseSubject,
	'tall-status-hider': !this.showingMore && this.mightHideBecauseTall,
	'status-unhider': this.showingMore,
	}
	},
	toggleText() {
	if (this.showingMore) {
	return this.mightHideBecauseSubject
	? this.$t('status.hide_content')
	: this.$t('general.show_less')
	} else {
	return this.mightHideBecauseSubject
	? this.$t('status.show_content')
	: this.$t('general.show_more')
	}
	},
	showingMore() {
	return (
	(this.mightHideBecauseTall && this.showingTall) \|\|
	(this.mightHideBecauseSubject && this.expandingSubject)
	)
	},
	attachmentTypes() {
	return this.status.attachments.map((file) =>
	- fileType.fileType(file.mimetype),
	+ file.type,
	)
	},
	collapsedStatus() {
	return this.status.raw_html.replace(/(\n\|<br\s?\/?>)/g, ' ')
	},
	...mapGetters(['mergedConfig']),
	},
	components: {
	RichContent,
	},
	mounted() {
	this.status.attentions &&
	this.status.attentions.forEach((attn) => {
	const { id } = attn
	this.$store.dispatch('fetchUserIfMissing', id)
	})
	},
	methods: {
	onParseReady(event) {
	if (this.parseReadyDone) return
	this.parseReadyDone = true
	this.$emit('parseReady', event)
	const { writtenMentions, invisibleMentions } = event
	writtenMentions
	.filter((mention) => !mention.notifying)
	.forEach((mention) => {
	const { content, url } = mention
	const cleanedString = content.replace(/<[^>]+?>/gi, '') // remove all tags
	if (!cleanedString.startsWith('@')) return
	const handle = cleanedString.slice(1)
	const host = url.replace(/^https?:\/\//, '').replace(/\/.+?$/, '')
	this.$store.dispatch('fetchUserIfMissing', `${handle}@${host}`)
	})
	/* This is a bit of a hack to make current tall status detector work
	* with rich mentions. Invisible mentions are detected at RichContent level
	* and also we generate plaintext version of mentions by stripping tags
	* so here we subtract from post length by each mention that became invisible
	* via MentionsLine
	*/
	this.postLength = invisibleMentions.reduce((acc, mention) => {
	return acc - mention.textContent.length - 1
	}, this.postLength)
	},
	toggleShowMore() {
	if (this.mightHideBecauseTall) {
	this.toggleShowingTall()
	} else if (this.mightHideBecauseSubject) {
	this.toggleExpandingSubject()
	}
	},
	generateTagLink(tag) {
	return `/tag/${tag}`
	},
	},
	}

	export default StatusBody
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index 0df27e6cb8..dd85772339 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,569 +1,569 @@
	import isEqual from 'lodash/isEqual'
	import merge from 'lodash/merge'
	import ldUnescape from 'lodash/unescape'
	import { mapGetters } from 'vuex'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
	import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
	import suggestor from 'src/components/emoji_input/suggestor.js'
	import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
	import { useInterfaceStore } from '../../stores/interface'
	import { useMediaViewerStore } from '../../stores/media_viewer'
	import AccountActions from '../account_actions/account_actions.vue'
	import FollowButton from '../follow_button/follow_button.vue'
	import ModerationTools from '../moderation_tools/moderation_tools.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	import Select from '../select/select.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserLink from '../user_link/user_link.vue'
	import UserNote from '../user_note/user_note.vue'

	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { usePostStatusStore } from 'src/stores/post_status'

	import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
	import localeService from 'src/services/locale/locale.service.js'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBirthdayCake,
	faClockRotateLeft,
	faEdit,
	faExpandAlt,
	faExternalLinkAlt,
	faRss,
	faSave,
	faSearchPlus,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSave,
	faRss,
	faBell,
	faSearchPlus,
	faExternalLinkAlt,
	faEdit,
	faTimes,
	faExpandAlt,
	faBirthdayCake,
	faClockRotateLeft,
	)

	export default {
	props: {
	// Enables all the options for profile editing, used in settings -> profile tab
	editable: {
	required: false,
	default: false,
	type: Boolean,
	},
	// ID of user to show data of
	userId: {
	required: true,
	type: String,
	},
	// Use a compact layout that hides bio, stats etc.
	hideBio: {
	required: false,
	default: false,
	type: Boolean,
	},
	// default - open profile, 'zoom' - zoom, function - call function
	avatarAction: {
	required: false,
	type: String,
	default: 'default',
	},
	// Show note editor if supported
	hasNoteEditor: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Show close icon (for popovers)
	showClose: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Show close icon (for popovers)
	showExpand: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	components: {
	DialogModal,
	UserAvatar,
	Checkbox,
	RemoteFollow,
	ModerationTools,
	AccountActions,
	ProgressButton,
	FollowButton,
	Select,
	RichContent,
	UserLink,
	UserNote,
	UserTimedFilterModal,
	ColorInput,
	EmojiInput,
	ImageCropper,
	},
	data() {
	const user = this.$store.getters.findUser(this.userId)

	return {
	followRequestInProgress: false,

	// Editable stuff
	editImage: false,

	newName: user.name_unescaped,
	editingName: false,

	newBio: ldUnescape(user.description),
	editingBio: false,

	newAvatar: null,
	newAvatarFile: null,

	newBanner: null,
	newBannerFile: null,

	newActorType: user.actor_type,
	newBirthday: user.birthday,
	newShowBirthday: user.show_birthday,
	newShowRole: user.show_role,

	newFields: user.fields?.map((field) => ({
	name: field.name,
	value: field.value,
	})),

	editingFields: false,
	}
	},
	created() {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	somethingToSave() {
	if (this.newName !== this.user.name_unescaped) return true
	if (this.newBio !== ldUnescape(this.user.description)) return true
	if (this.newAvatar !== null) return true
	if (this.newBanner !== null) return true
	if (this.newActorType !== this.user.actor_type) return true
	if (this.newBirthday !== this.user.birthday) return true
	if (this.newShowBirthday !== this.user.show_birthday) return true
	if (this.newShowRole !== this.user.show_role) return true
	if (
	!isEqual(
	this.newFields,
	this.user.fields?.map((field) => ({
	name: field.name,
	value: field.value,
	})),
	)
	)
	return true
	return false
	},
	groupActorAvailable() {
	return useInstanceCapabilitiesStore().groupActorAvailable
	},
	availableActorTypes() {
	return this.groupActorAvailable
	? ['Person', 'Service', 'Group']
	: ['Person', 'Service']
	},
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	role() {
	return this.user.role
	},
	relationship() {
	return this.$store.getters.relationship(this.userId)
	},
	isOtherUser() {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl() {
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn() {
	return this.$store.state.users.currentUser
	},
	dailyAvg() {
	const days = Math.ceil(
	(new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000),
	)
	return Math.round(this.user.statuses_count / days)
	},
	emoji() {
	return useEmojiStore().customEmoji.map((e) => ({
	shortcode: e.displayText,
	static_url: e.imageUrl,
	url: e.imageUrl,
	}))
	},
	userHighlightType: {
	get() {
	const data =
	this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return (data && data.type) \|\| 'disabled'
	},
	set(type) {
	const data =
	this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	if (type !== 'disabled') {
	this.$store.dispatch('setHighlight', {
	user: this.user.screen_name,
	color: (data && data.color) \|\| '#FFFFFF',
	type,
	})
	} else {
	this.$store.dispatch('setHighlight', {
	user: this.user.screen_name,
	color: undefined,
	})
	}
	},
	...mapGetters(['mergedConfig']),
	},
	userHighlightColor: {
	get() {
	const data =
	this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return data && data.color
	},
	set(color) {
	this.$store.dispatch('setHighlight', {
	user: this.user.screen_name,
	color,
	})
	},
	},
	visibleRole() {
	if (!this.newShowRole) {
	return
	}
	const rights = this.user.rights
	if (!rights) {
	return
	}
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	},
	hideFollowsCount() {
	return this.isOtherUser && this.user.hide_follows_count
	},
	hideFollowersCount() {
	return this.isOtherUser && this.user.hide_followers_count
	},
	showModerationMenu() {
	const privileges = this.loggedIn.privileges
	return (
	this.loggedIn.role === 'admin' \|\|
	privileges.includes('users_manage_activation_state') \|\|
	privileges.includes('users_delete') \|\|
	privileges.includes('users_manage_tags')
	)
	},
	hasNote() {
	return this.relationship.note
	},
	supportsNote() {
	return 'note' in this.relationship
	},
	muteExpiryAvailable() {
	return Object.hasOwn(this.user, 'mute_expires_at')
	},
	muteExpiry() {
	return this.user.mute_expires_at === false
	? this.$t('user_card.mute_expires_forever')
	: this.$t('user_card.mute_expires_at', [
	new Date(this.user.mute_expires_at).toLocaleString(),
	])
	},
	blockExpiryAvailable() {
	return Object.hasOwn(this.user, 'block_expires_at')
	},
	blockExpiry() {
	return this.user.block_expires_at == null
	? this.$t('user_card.block_expires_forever')
	: this.$t('user_card.block_expires_at', [
	new Date(this.user.mute_expires_at).toLocaleString(),
	])
	},
	formattedBirthday() {
	const browserLocale = localeService.internalToBrowserLocale(
	this.$i18n.locale,
	)
	return (
	this.user.birthday &&
	new Date(Date.parse(this.user.birthday)).toLocaleDateString(
	browserLocale,
	{ timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' },
	)
	)
	},

	// Editable stuff
	avatarImgSrc() {
	const currentUrl =
	this.user.profile_image_url_original \|\| this.defaultAvatar
	if (!this.editable) return currentUrl
	const newUrl =
	this.newAvatar === null ? this.defaultAvatar : this.newAvatar
	return this.newAvatar === null ? currentUrl : newUrl
	},
	bannerImgSrc() {
	const currentUrl = this.user.cover_photo \|\| this.defaultBanner
	if (!this.editable) return currentUrl
	const newUrl =
	this.newBanner === null ? this.defaultBanner : this.newBanner
	return this.newBanner === null ? currentUrl : newUrl
	},
	defaultAvatar() {
	return (
	useInstanceStore().server +
	useInstanceStore().instanceIdentity.defaultAvatar
	)
	},
	defaultBanner() {
	return (
	useInstanceStore().server +
	useInstanceStore().instanceIdentity.defaultBanner
	)
	},
	isDefaultAvatar() {
	const baseAvatar = useInstanceStore().defaultAvatar
	return (
	!this.$store.state.users.currentUser.profile_image_url \|\|
	this.$store.state.users.currentUser.profile_image_url.includes(
	baseAvatar,
	)
	)
	},
	isDefaultBanner() {
	const baseBanner = useInstanceStore().defaultBanner
	return (
	!this.$store.state.users.currentUser.cover_photo \|\|
	this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
	)
	},
	fieldsLimits() {
	return useInstanceStore().limits.fieldsLimits
	},
	maxFields() {
	return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
	},
	emojiUserSuggestor() {
	return suggestor({
	emoji: [
	...this.$store.getters.standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	store: this.$store,
	})
	},
	emojiSuggestor() {
	return suggestor({
	emoji: [
	...this.$store.getters.standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	})
	},
	...mapGetters(['mergedConfig']),
	},
	methods: {
	muteUser() {
	this.$refs.timedMuteDialog.optionallyPrompt()
	},
	unmuteUser() {
	this.$store.dispatch('unmuteUser', this.user.id)
	},
	subscribeUser() {
	return this.$store.dispatch('subscribeUser', this.user.id)
	},
	unsubscribeUser() {
	return this.$store.dispatch('unsubscribeUser', this.user.id)
	},
	linkClicked({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	userProfileLink(user) {
	return generateProfileLink(
	user.id,
	user.screen_name,
	useInstanceStore().restrictedNicknames,
	)
	},
	openProfileTab() {
	useInterfaceStore().openSettingsModalTab('profile')
	},
	zoomAvatar() {
	const attachment = {
	url: this.user.profile_image_url_original,
	- mimetype: 'image',
	+ type: 'image',
	}
	useMediaViewerStore().setMedia([attachment])
	useMediaViewerStore().setCurrentMedia(attachment)
	},
	mentionUser() {
	usePostStatusStore().openPostStatusModal({
	profileMention: true,
	repliedUser: this.user,
	})
	},
	onAvatarClickHandler(e) {
	if (this.onAvatarClick) {
	e.preventDefault()
	this.onAvatarClick()
	}
	},

	// Editable stuff
	changeAvatar() {
	this.editImage = 'avatar'
	},
	changeBanner() {
	this.editImage = 'banner'
	},
	submitImage({ canvas, file }) {
	if (canvas) {
	return canvas.toBlob((data) =>
	this.submitImage({ canvas: null, file: data }),
	)
	}

	const reader = new window.FileReader()
	reader.onload = (e) => {
	const dataUrl = e.target.result

	if (this.editImage === 'avatar') {
	this.newAvatar = dataUrl
	this.newAvatarFile = file
	} else {
	this.newBanner = dataUrl
	this.newBannerFile = file
	}

	this.editImage = false
	}

	reader.readAsDataURL(file)
	},
	resetImage() {
	if (this.editImage === 'avatar') {
	this.newAvatar = null
	this.newAvatarFile = null
	} else {
	this.newBanner = null
	this.newBannerFile = null
	}
	this.editImage = false
	},
	addField() {
	if (this.newFields.length < this.maxFields) {
	this.newFields.push({ name: '', value: '' })
	}
	},
	deleteField(index) {
	this.newFields.splice(index, 1)
	},
	propsToNative(props) {
	return propsToNative(props)
	},
	cancelImageText() {
	return
	},
	resetState() {
	const user = this.$store.state.users.currentUser

	this.newName = user.name_unescaped
	this.newBio = ldUnescape(user.description)

	this.newAvatar = null
	this.newAvatarFile = null

	this.newBanner = null
	this.newBannerFile = null

	this.newActorType = user.actor_type
	this.newBirthday = user.birthday
	this.newShowBirthday = user.show_birthday
	this.newShowRole = user.show_role

	this.newFields = user.fields.map((field) => ({
	name: field.name,
	value: field.value,
	}))
	},
	updateProfile() {
	const params = {
	note: this.newBio,

	// Backend notation.
	display_name: this.newName,
	fields_attributes: this.newFields.filter((el) => el != null),
	show_role: !!this.newShowRole,
	birthday: this.newBirthday \|\| '',
	show_birthday: !!this.newShowBirthday,
	}

	if (this.newActorType) {
	params.actor_type = this.newActorType
	}

	if (this.newAvatarFile !== null) {
	params.avatar = this.newAvatarFile
	}

	if (this.newBannerFile !== null) {
	params.header = this.newBannerFile
	}

	this.$store.state.api.backendInteractor
	.updateProfile({ params })
	.then((user) => {
	this.newFields.splice(this.newFields.length)
	merge(this.newFields, user.fields)
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	this.resetState()
	})
	.catch((error) => {
	this.displayUploadError(error)
	})
	},
	displayUploadError(error) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'upload.error.message',
	messageArgs: [error.message],
	level: 'error',
	})
	},
	},
	}
	diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
	index 2020f564ea..62d7fa8558 100644
	--- a/src/services/entity_normalizer/entity_normalizer.service.js
	+++ b/src/services/entity_normalizer/entity_normalizer.service.js
	@@ -1,570 +1,576 @@
	import { parseLinkHeader } from '@web3-storage/parse-link-header'
	import escapeHtml from 'escape-html'
	+import fileTypeService from '../file_type/file_type.service.js'
	import punycode from 'punycode.js'

	import { isStatusNotification } from '../notification_utils/notification_utils.js'

	/ NOTICE!
	* Do not initialize UI-generated data here.
	* It will override existing data.
	*
	* i.e. user.pinnedStatusIds was set to [] here
	* UI code would update it with data but upon next user fetch
	* it would be reverted back to []
	*/

	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 = Object.hasOwn(data, 'acct')
	// case for users in "mentions" property for statuses in MastoAPI
	const mastoShort = masto && !Object.hasOwn(data, 'avatar')

	output.inLists = null
	output.id = String(data.id)
	output._original = data // used for server-side settings

	if (masto) {
	output.screen_name = data.acct
	output.fqn = data.fqn
	output.statusnet_profile_url = data.url

	if (Object.hasOwn(data, 'mute_expires_at')) {
	output.mute_expires_at =
	data.mute_expires_at == null ? false : data.mute_expires_at
	}

	if (Object.hasOwn(data, 'block_expires_at')) {
	output.block_expires_at =
	data.block_expires_at == null ? false : data.block_expires_at
	}

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

	output.emoji = data.emojis
	output.name = escapeHtml(data.display_name)
	output.name_html = output.name
	output.name_unescaped = data.display_name

	output.description = data.note
	// TODO cleanup this shit, output.description is overriden with source data
	output.description_html = data.note

	output.fields = data.fields
	output.fields_html = data.fields.map((field) => {
	return {
	name: escapeHtml(field.name),
	value: field.value,
	}
	})
	output.fields_text = data.fields.map((field) => {
	return {
	name: unescape(field.name.replace(/<[^>]*>/g, '')),
	value: unescape(field.value.replace(/<[^>]*>/g, '')),
	}
	})

	// 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.privileges = []

	if (data.pleroma) {
	if (data.pleroma.settings_store) {
	output.storage = data.pleroma.settings_store['pleroma-fe']
	}
	const relationship = data.pleroma.relationship

	output.background_image = data.pleroma.background_image
	output.favicon = data.pleroma.favicon
	output.token = data.pleroma.chat_token

	if (relationship) {
	output.relationship = relationship
	}

	output.allow_following_move = data.pleroma.allow_following_move

	output.hide_favorites = data.pleroma.hide_favorites
	output.hide_follows = data.pleroma.hide_follows
	output.hide_followers = data.pleroma.hide_followers
	output.hide_follows_count = data.pleroma.hide_follows_count
	output.hide_followers_count = data.pleroma.hide_followers_count

	output.rights = {
	moderator: data.pleroma.is_moderator,
	admin: data.pleroma.is_admin,
	}
	// TODO: Clean up in UI? This is duplication from what BE does for qvitterapi
	if (output.rights.admin) {
	output.role = 'admin'
	} else if (output.rights.moderator) {
	output.role = 'moderator'
	} else {
	output.role = 'member'
	}

	output.birthday = data.pleroma.birthday

	if (data.pleroma.privileges) {
	output.privileges = data.pleroma.privileges
	} else if (data.pleroma.is_admin) {
	output.privileges = [
	'users_read',
	'users_manage_invites',
	'users_manage_activation_state',
	'users_manage_tags',
	'users_manage_credentials',
	'users_delete',
	'messages_read',
	'messages_delete',
	'instances_delete',
	'reports_manage_reports',
	'moderation_log_read',
	'announcements_manage_announcements',
	'emoji_manage_emoji',
	'statistics_read',
	]
	} else if (data.pleroma.is_moderator) {
	output.privileges = ['messages_delete', 'reports_manage_reports']
	} else {
	output.privileges = []
	}
	}

	if (data.source) {
	output.description = data.source.note
	output.default_scope = data.source.privacy
	output.fields = data.source.fields
	if (data.source.pleroma) {
	output.no_rich_text = data.source.pleroma.no_rich_text
	output.show_role = data.source.pleroma.show_role
	output.discoverable = data.source.pleroma.discoverable
	output.show_birthday = data.pleroma.show_birthday
	output.actor_type = data.source.pleroma.actor_type
	}
	}

	// 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.is_local = data.is_local
	output.role = data.role
	output.show_role = data.show_role

	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.hide_follows_count = data.hide_follows_count
	output.hide_followers_count = data.hide_followers_count
	output.background_image = data.background_image
	// Websocket token
	output.token = data.token

	// Convert relationsip data to expected format
	output.relationship = {
	muting: data.muted,
	blocking: data.statusnet_blocking,
	followed_by: data.follows_you,
	following: data.following,
	}
	}

	output.created_at = new Date(data.created_at)
	output.locked = data.locked
	output.followers_count = data.followers_count
	output.statuses_count = data.statuses_count

	if (data.pleroma) {
	output.follow_request_count = data.pleroma.follow_request_count

	output.tags = data.pleroma.tags

	// deactivated was changed to is_active in Pleroma 2.3.0
	// so check if is_active is present
	output.deactivated =
	typeof data.pleroma.is_active !== 'undefined'
	? !data.pleroma.is_active // new backend
	: data.pleroma.deactivated // old backend

	output.notification_settings = data.pleroma.notification_settings
	output.unread_chat_count = data.pleroma.unread_chat_count
	}

	output.tags = output.tags \|\| []
	output.rights = output.rights \|\| {}
	output.notification_settings = output.notification_settings \|\| {}

	// Convert punycode to unicode for UI
	output.screen_name_ui = output.screen_name
	if (output.screen_name && output.screen_name.includes('@')) {
	const parts = output.screen_name.split('@')
	const unicodeDomain = punycode.toUnicode(parts[1])
	if (unicodeDomain !== parts[1]) {
	// Add some identifier so users can potentially spot spoofing attempts:
	// lain.com and xn--lin-6cd.com would appear identical otherwise.
	output.screen_name_ui_contains_non_ascii = true
	output.screen_name_ui = [parts[0], unicodeDomain].join('@')
	} else {
	output.screen_name_ui_contains_non_ascii = false
	}
	}

	return output
	}

	export const parseAttachment = (data) => {
	const output = {}
	const masto = !Object.hasOwn(data, '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
	}

	+ if (data.type !== 'unknown') {
	+ output.type = data.type
	+ } else {
	+ output.type = fileTypeService.fileType(output.mimetype)
	+ }
	output.url = data.url
	output.large_thumb_url = data.preview_url
	output.description = data.description

	return output
	}

	export const parseSource = (data) => {
	const output = {}

	output.text = data.text
	output.spoiler_text = data.spoiler_text
	output.content_type = data.content_type

	return output
	}

	export const parseStatus = (data) => {
	const output = {}
	const masto = Object.hasOwn(data, 'account')

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

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

	output.bookmarked = data.bookmarked

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

	output.raw_html = data.content
	output.emojis = data.emojis

	output.tags = data.tags

	output.edited_at = data.edited_at

	const { pleroma } = data

	if (data.pleroma) {
	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 = pleroma.in_reply_to_account_acct
	output.thread_muted = pleroma.thread_muted
	output.emoji_reactions = pleroma.emoji_reactions
	output.parent_visible =
	pleroma.parent_visible === undefined ? true : pleroma.parent_visible
	output.quote_visible = pleroma.quote_visible \|\| true
	output.quotes_count = pleroma.quotes_count
	output.bookmark_folder_id = pleroma.bookmark_folder
	} else {
	output.text = data.content
	output.summary = data.spoiler_text
	}

	const quoteRaw = pleroma?.quote \|\| data.quote
	const quoteData = quoteRaw ? parseStatus(quoteRaw) : undefined
	output.quote = quoteData
	output.quote_id =
	data.quote?.id ?? data.quote_id ?? quoteData?.id ?? pleroma.quote_id
	output.quote_url = data.quote?.url ?? quoteData?.url ?? pleroma.quote_url

	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_raw_html = escapeHtml(data.spoiler_text)
	output.external_url = data.url
	output.poll = data.poll
	if (output.poll) {
	output.poll.options = (output.poll.options \|\| []).map((field) => ({
	...field,
	title_html: escapeHtml(field.title),
	}))
	}
	output.pinned = data.pinned
	output.muted = data.muted
	} 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.raw_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 = []

	if (Object.hasOwn(data, 'originalStatus')) {
	Object.assign(output, data.originalStatus)
	}

	return output
	}

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

	if (masto) {
	output.type = mastoDict[data.type] \|\| data.type
	output.seen = data.pleroma.is_seen
	// TODO: null check should be a temporary fix, I guess.
	// Investigate why backend does this.
	output.status =
	isStatusNotification(output.type) && data.status !== null
	? parseStatus(data.status)
	: null
	output.target = output.type !== 'move' ? null : parseUser(data.target)
	output.from_profile = parseUser(data.account)
	output.emoji = data.emoji
	output.emoji_url = data.emoji_url
	if (data.report) {
	output.report = data.report
	output.report.content = data.report.content
	output.report.acct = parseUser(data.report.account)
	output.report.actor = parseUser(data.report.actor)
	output.report.statuses = data.report.statuses.map(parseStatus)
	}
	} 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 =
	output.type === 'pleroma:chat_mention'
	? parseUser(data.account)
	: 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)
	)
	}

	export const parseLinkHeaderPagination = (linkHeader, opts = {}) => {
	const flakeId = opts.flakeId
	const parsedLinkHeader = parseLinkHeader(linkHeader)
	if (!parsedLinkHeader) return
	const maxId = parsedLinkHeader.next?.max_id
	const minId = parsedLinkHeader.prev?.min_id

	return {
	maxId: flakeId ? maxId : parseInt(maxId, 10),
	minId: flakeId ? minId : parseInt(minId, 10),
	}
	}

	export const parseChat = (chat) => {
	const output = {}
	output.id = chat.id
	output.account = parseUser(chat.account)
	output.unread = chat.unread
	output.lastMessage = parseChatMessage(chat.last_message)
	output.updated_at = new Date(chat.updated_at)
	return output
	}

	export const parseChatMessage = (message) => {
	if (!message) {
	return
	}
	if (message.isNormalized) {
	return message
	}
	const output = message
	output.id = message.id
	output.created_at = new Date(message.created_at)
	output.chat_id = message.chat_id
	output.emojis = message.emojis
	output.content = message.content
	if (message.attachment) {
	output.attachments = [parseAttachment(message.attachment)]
	} else {
	output.attachments = []
	}
	output.pending = !!message.pending
	output.error = false
	output.idempotency_key = message.idempotency_key
	output.isNormalized = true
	return output
	}
	diff --git a/src/stores/media_viewer.js b/src/stores/media_viewer.js
	index 983d46423f..c35c0679e2 100644
	--- a/src/stores/media_viewer.js
	+++ b/src/stores/media_viewer.js
	@@ -1,31 +1,28 @@
	import { defineStore } from 'pinia'

	-import fileTypeService from '../services/file_type/file_type.service.js'
	-
	const supportedTypes = new Set(['image', 'video', 'audio', 'flash'])

	export const useMediaViewerStore = defineStore('mediaViewer', {
	state: () => ({
	media: [],
	currentIndex: 0,
	activated: false,
	}),
	actions: {
	setMedia(attachments) {
	const media = attachments.filter((attachment) => {
	- const type = fileTypeService.fileType(attachment.mimetype)
	- return supportedTypes.has(type)
	+ return supportedTypes.has(attachment.type)
	})

	this.media = media
	},
	setCurrentMedia(current) {
	const index = this.media.indexOf(current)
	this.activated = true
	this.currentIndex = index
	},
	closeMediaViewer() {
	this.activated = false
	},
	},
	})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 29, 9:04 AM (1 d, 13 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1736971
Default Alt Text: (102 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions