No OneTemporary
Actions

Authored By

Unknown

Size

66 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/api/public.js b/src/api/public.js
	index f4ae778bc4..cdb3a1305e 100644
	--- a/src/api/public.js
	+++ b/src/api/public.js
	@@ -1,491 +1,489 @@
	import { concat, each, last, map } from 'lodash'

	import { paramsString, promisedRequest } from './helpers.js'

	import {
	- parseAttachment,
	- parseChat,
	parseLinkHeaderPagination,
	parseNotification,
	parseSource,
	parseStatus,
	parseUser,
	} from 'src/services/entity_normalizer/entity_normalizer.service.js'
	import { RegistrationError, StatusCodeError } from 'src/services/errors/errors'

	const MASTODON_SUGGESTIONS_URL = '/api/v1/suggestions'
	const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials'
	const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
	const MASTODON_PASSWORD_RESET_URL = ({ email }) =>
	`/auth/password${paramsString({ email })}`

	const MASTODON_USER_NOTIFICATIONS_URL = ({
	minId,
	sinceId,
	maxId,
	limit,
	includeTypes,
	replyVisibility,
	}) =>
	`/api/v1/notifications${paramsString({ minId, sinceId, maxId, limit, includeTypes, replyVisibility })}`
	const MASTODON_FOLLOWING_URL = (
	id,
	{ minId, maxId, sinceId, limit, withRelationships },
	) =>
	`/api/v1/accounts/${id}/following${paramsString({ minId, maxId, sinceId, limit, withRelationships })}`
	const MASTODON_FOLLOWERS_URL = (
	id,
	{ minId, maxId, sinceId, limit, withRelationships },
	) =>
	`/api/v1/accounts/${id}/followers${paramsString({ minId, maxId, sinceId, limit, withRelationships })}`

	const MASTODON_USER_HOME_TIMELINE_URL = ({
	minId,
	sinceId,
	maxId,
	limit,
	replyVisibility,
	}) =>
	`/api/v1/timelines/home${paramsString({ minId, sinceId, maxId, limit, replyVisibility })}`
	const MASTODON_LIST_TIMELINE_URL = (
	id,
	{ minId, sinceId, maxId, limit, replyVisibility },
	) =>
	`/api/v1/timelines/list/${id}${paramsString({ minId, sinceId, maxId, limit, replyVisibility })}`
	const MASTODON_DIRECT_MESSAGES_TIMELINE_URL = ({
	minId,
	sinceId,
	maxId,
	limit,
	replyVisibility,
	}) =>
	`/api/v1/timelines/direct${paramsString({ minId, sinceId, maxId, limit, replyVisibility })}`
	const MASTODON_PUBLIC_TIMELINE = ({
	minId,
	sinceId,
	maxId,
	limit,
	replyVisibility,
	local,
	remote,
	onlyMedia,
	}) =>
	`/api/v1/timelines/public${paramsString({ minId, sinceId, maxId, limit, replyVisibility, local, remote, onlyMedia })}`
	const MASTODON_TAG_TIMELINE_URL = (
	tag,
	{ minId, sinceId, maxId, limit, replyVisibility },
	) =>
	`/api/v1/timelines/tag/${tag}${paramsString({ minId, sinceId, maxId, limit, replyVisibility })}`
	const MASTODON_USER_TIMELINE_URL = (
	id,
	{ minId, sinceId, maxId, limit, replyVisibility, pinned, onlyMedia },
	) =>
	`/api/v1/accounts/${id}/statuses${paramsString({ minId, sinceId, maxId, limit, replyVisibility, pinned, onlyMedia })}`
	const MASTODON_USER_FAVORITES_TIMELINE_URL = ({
	minId,
	sinceId,
	maxId,
	limit,
	replyVisibility,
	}) =>
	`/api/v1/favourites${paramsString({ minId, sinceId, maxId, limit, replyVisibility })}`
	const MASTODON_BOOKMARK_TIMELINE_URL = ({
	minId,
	sinceId,
	maxId,
	limit,
	replyVisibility,
	folderId,
	}) =>
	`/api/v1/bookmarks${paramsString({ minId, sinceId, maxId, limit, replyVisibility, folderId })}`
	const PLEROMA_STATUS_QUOTES_URL = (
	id,
	{ minId, sinceId, maxId, limit, replyVisibility },
	) =>
	`/api/v1/pleroma/statuses/${id}/quotes${paramsString({ minId, sinceId, maxId, limit, replyVisibility })}`
	const PLEROMA_USER_FAVORITES_TIMELINE_URL = (
	id,
	{ minId, sinceId, maxId, limit, replyVisibility },
	) =>
	`/api/v1/pleroma/accounts/${id}/favourites${paramsString({ minId, sinceId, maxId, limit, replyVisibility })}`
	const AKKOMA_BUBBLE_TIMELINE_URL = ({
	minId,
	sinceId,
	maxId,
	limit,
	replyVisibility,
	}) =>
	`/api/v1/timelines/bubble${paramsString({ minId, sinceId, maxId, limit, replyVisibility })}`

	export const MASTODON_STATUS_URL = (id) => `/api/v1/statuses/${id}`
	const MASTODON_STATUS_CONTEXT_URL = (id) => `/api/v1/statuses/${id}/context`
	const MASTODON_STATUS_SOURCE_URL = (id) => `/api/v1/statuses/${id}/source`
	const MASTODON_STATUS_HISTORY_URL = (id) => `/api/v1/statuses/${id}/history`
	const MASTODON_USER_URL = '/api/v1/accounts'
	const MASTODON_USER_LOOKUP_URL = ({ acct }) =>
	`/api/v1/accounts/lookup${paramsString({ acct })}`
	const MASTODON_POLL_URL = (id = '') => `/api/v1/polls/${id}`
	const MASTODON_STATUS_FAVORITEDBY_URL = (id) =>
	`/api/v1/statuses/${id}/favourited_by`
	const MASTODON_STATUS_REBLOGGEDBY_URL = (id) =>
	`/api/v1/statuses/${id}/reblogged_by`
	const MASTODON_SEARCH_2 = ({
	q,
	resolve,
	limit,
	offset,
	following,
	type,
	withRelationships,
	accountId,
	excludeUnreviewed,
	}) =>
	`/api/v2/search${paramsString({ q, resolve, limit, offset, following, type, withRelationships, accountId, excludeUnreviewed })}`
	const MASTODON_USER_SEARCH_URL = ({ q, resolve }) =>
	`/api/v1/accounts/search${paramsString({ q, resolve })}`
	const MASTODON_KNOWN_DOMAIN_LIST_URL = '/api/v1/instance/peers'
	const PLEROMA_EMOJI_REACTIONS_URL = (id) =>
	`/api/v1/pleroma/statuses/${id}/reactions`
	const PLEROMA_SCROBBLES_URL = (id, { maxId, sinceId, minId, limit, offset }) =>
	`/api/v1/pleroma/accounts/${id}/scrobbles${paramsString({ maxId, sinceId, minId, limit, offset })}`

	const EMOJI_PACKS_URL = (page, pageSize) =>
	`/api/v1/pleroma/emoji/packs${paramsString({ page, pageSize })}`

	// Params needed:
	// nickname
	// email
	// fullname
	// password
	// password_confirm
	//
	// Optional
	// bio
	// homepage
	// location
	// token
	// language
	export const register = ({ params, credentials }) => {
	const { nickname, ...rest } = params
	return promisedRequest({
	url: MASTODON_REGISTRATION_URL,
	method: 'POST',
	credentials,
	payload: {
	nickname,
	locale: 'en_US',
	agreement: true,
	...rest,
	},
	})
	}

	export const getCaptcha = () =>
	promisedRequest({
	url: '/api/pleroma/captcha',
	})

	export const fetchUser = ({ id, credentials }) =>
	promisedRequest({
	url: `${MASTODON_USER_URL}/${id}`,
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseUser(data) }))

	export const fetchUserByName = ({ name, credentials }) =>
	promisedRequest({
	url: MASTODON_USER_LOOKUP_URL({ acct: name }),
	credentials,
	})
	.then(({ data }) => data.id)
	.catch((error) => {
	if (error && error.statusCode === 404) {
	// Either the backend does not support lookup endpoint,
	// or there is no user with such name. Fallback and treat name as id.
	return name
	} else {
	throw error
	}
	})
	.then((id) => fetchUser({ id, credentials }))

	export const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) =>
	promisedRequest({
	url: MASTODON_FOLLOWING_URL(id, { maxId, sinceId, limit }),
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: data.map(parseUser) }))

	export const fetchFollowers = ({
	id,
	maxId,
	sinceId,
	limit = 20,
	credentials,
	}) =>
	promisedRequest({
	url: MASTODON_FOLLOWERS_URL(id, {
	maxId,
	sinceId,
	limit,
	withRelationships: true,
	}),
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: data.map(parseUser) }))

	export const fetchConversation = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_STATUS_CONTEXT_URL(id),
	credentials,
	})
	.then((result) => ({
	...result,
	data: {
	...result.data,
	ancestors: result.data.ancestors.map(parseStatus),
	descendants: result.data.descendants.map(parseStatus),
	},
	}))
	.catch((error) => {
	throw new Error('Error fetching timeline', error)
	})

	export const fetchStatus = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_STATUS_URL(id),
	credentials,
	})
	.then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))
	.catch((error) => {
	throw new Error('Error fetching timeline', error)
	})

	export const fetchStatusSource = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_STATUS_SOURCE_URL(id),
	credentials,
	})
	.then(({ data, ...rest }) => ({ ...rest, data: parseSource(data) }))
	.catch((error) => {
	throw new Error('Error fetching timeline', error)
	})

	export const fetchStatusHistory = ({ status, credentials }) =>
	promisedRequest({
	url: MASTODON_STATUS_HISTORY_URL(status.id),
	credentials,
	}).then(({ data, ...rest }) => {
	return [...data].reverse().map((item) => {
	item.originalStatus = status
	return { ...rest, data: parseStatus(item) }
	})
	})

	export const fetchTimeline = ({
	timeline,
	credentials,
	sinceId,
	minId,
	maxId,
	userId,
	listId,
	statusId,
	tag,
	withMuted,
	replyVisibility = 'all',
	includeTypes = [],
	bookmarkFolderId,
	}) => {
	const timelineUrls = {
	friends: MASTODON_USER_HOME_TIMELINE_URL,
	public: MASTODON_PUBLIC_TIMELINE,
	publicAndExternal: MASTODON_PUBLIC_TIMELINE,
	dms: MASTODON_DIRECT_MESSAGES_TIMELINE_URL,
	user: MASTODON_USER_TIMELINE_URL,
	media: MASTODON_USER_TIMELINE_URL,
	list: MASTODON_LIST_TIMELINE_URL,
	favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
	publicFavorites: PLEROMA_USER_FAVORITES_TIMELINE_URL,
	bookmarks: MASTODON_BOOKMARK_TIMELINE_URL,
	bubble: AKKOMA_BUBBLE_TIMELINE_URL,
	tag: MASTODON_TAG_TIMELINE_URL,
	quotes: PLEROMA_STATUS_QUOTES_URL,

	notifications: MASTODON_USER_NOTIFICATIONS_URL,
	}
	const urlFunc = timelineUrls[timeline]

	const twoArgs = new Set([
	'user',
	'media',
	'list',
	'publicFavorites',
	'tag',
	'quotes',
	])

	const params = {
	minId,
	sinceId,
	maxId,
	limit: 20,
	}

	const id = (() => {
	switch (timeline) {
	case 'user':
	case 'media':
	return userId
	case 'list':
	return listId
	case 'quotes':
	return statusId
	case 'tag':
	return tag
	}
	})()

	const isNotifications = timeline === 'notifications'

	if (timeline === 'media') {
	params.onlyMedia = true
	}
	if (timeline === 'public') {
	params.local = true
	}
	if (timeline !== 'favorites' && timeline !== 'bookmarks') {
	params.withMuted = withMuted
	}
	if (replyVisibility !== 'all') {
	params.replyVisibility = replyVisibility
	}
	if (timeline === 'bookmarks' && bookmarkFolderId) {
	params.folderId = bookmarkFolderId
	}

	if (isNotifications && includeTypes.length > 0) {
	params.includeTypes = includeTypes
	}

	const url = twoArgs.has(timeline) ? urlFunc(id, params) : urlFunc(params)
	return promisedRequest({ url, credentials }).then((result) => {
	const pagination = parseLinkHeaderPagination(
	result.response.headers.get('Link'),
	{
	flakeId: timeline !== 'bookmarks' && timeline !== 'notifications',
	},
	)

	return {
	...result,
	data: result.data.map(isNotifications ? parseNotification : parseStatus),
	pagination,
	}
	})
	}

	export const listEmojiPacks = ({ page, pageSize, credentials }) =>
	promisedRequest({
	url: EMOJI_PACKS_URL(page, pageSize),
	})

	export const fetchPinnedStatuses = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_USER_TIMELINE_URL(id, { pinned: true }),
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: data.map(parseStatus) }))

	export const verifyCredentials = ({ credentials }) =>
	promisedRequest({
	url: MASTODON_LOGIN_URL,
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseUser(data) }))

	export const resetPassword = ({ email }) => {
	return promisedRequest({
	url: MASTODON_PASSWORD_RESET_URL({ email }),
	method: 'POST',
	})
	}

	export const suggestions = ({ credentials }) =>
	promisedRequest({
	url: MASTODON_SUGGESTIONS_URL,
	credentials,
	})

	export const fetchPoll = ({ pollId, credentials }) =>
	promisedRequest({
	url: MASTODON_POLL_URL(encodeURIComponent(pollId)),
	method: 'GET',
	credentials,
	})

	export const fetchFavoritedByUsers = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_STATUS_FAVORITEDBY_URL(id),
	method: 'GET',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: data.map(parseUser) }))

	export const fetchRebloggedByUsers = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_STATUS_REBLOGGEDBY_URL(id),
	method: 'GET',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: data.map(parseUser) }))

	export const fetchEmojiReactions = ({ id, credentials }) =>
	promisedRequest({
	url: PLEROMA_EMOJI_REACTIONS_URL(id),
	credentials,
	}).then(({ data, ...rest }) => ({
	...rest,
	data: data.map((r) => {
	r.accounts = r.accounts.map(parseUser)
	return r
	}),
	}))

	export const searchUsers = ({ credentials, query }) =>
	promisedRequest({
	url: MASTODON_USER_SEARCH_URL({ q: query, resolve: true }),
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: data.map(parseUser) }))

	export const search2 = ({
	credentials,
	q,
	resolve,
	limit,
	offset,
	following,
	type,
	}) => {
	return promisedRequest({
	url: MASTODON_SEARCH_2({
	q,
	resolve,
	limit,
	offset,
	following,
	type,
	withRelationships: true,
	}),
	credentials,
	})
	.then(({ data, ...rest }) => {
	data.accounts = data.accounts.slice(0, limit).map((u) => parseUser(u))
	data.statuses = data.statuses.slice(0, limit).map((s) => parseStatus(s))
	return { ...rest, data }
	})
	.catch((error) => {
	throw new Error('Error fetching timeline', error)
	})
	}

	export const fetchKnownDomains = ({ credentials }) =>
	promisedRequest({ url: MASTODON_KNOWN_DOMAIN_LIST_URL, credentials })

	export const fetchScrobbles = ({ accountId, limit = 1 }) =>
	promisedRequest({
	url: PLEROMA_SCROBBLES_URL(accountId, { limit }),
	})
	diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
	index acd1f1c5f4..16a03ab1d2 100644
	--- a/src/components/chat/chat.js
	+++ b/src/components/chat/chat.js
	@@ -1,434 +1,432 @@
	import { throttle } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'

	import ChatMessage from 'src/components/chat_message/chat_message.vue'
	import ChatTitle from 'src/components/chat_title/chat_title.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import chatService from '../../services/chat_service/chat_service.js'
	import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
	import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
	import {
	getNewTopPosition,
	getScrollPosition,
	isBottomedOut,
	isScrollable,
	} from './chat_layout_utils.js'

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	import {
	chatMessages,
	getOrCreateChat,
	sendChatMessage,
	} from 'src/api/chats.js'
	-import {
	- WSConnectionStatus,
	-} from 'src/api/websocket.js'
	+import { WSConnectionStatus } from 'src/api/websocket.js'

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

	library.add(faChevronDown, faChevronLeft)

	const BOTTOMED_OUT_OFFSET = 10
	const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
	const SAFE_RESIZE_TIME_OFFSET = 100
	const MARK_AS_READ_DELAY = 1500
	const MAX_RETRIES = 10

	const Chat = {
	components: {
	ChatMessage,
	ChatTitle,
	PostStatusForm,
	},
	data() {
	return {
	jumpToBottomButtonVisible: false,
	hoveredMessageChainId: undefined,
	lastScrollPosition: {},
	scrollableContainerHeight: '100%',
	errorLoadingChat: false,
	messageRetriers: {},
	}
	},
	created() {
	this.startFetching()
	window.addEventListener('resize', this.handleResize)
	},
	mounted() {
	window.addEventListener('scroll', this.handleScroll)
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	}

	this.$nextTick(() => {
	this.handleResize()
	})
	},
	unmounted() {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('resize', this.handleResize)
	if (typeof document.hidden !== 'undefined')
	document.removeEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	this.$store.dispatch('clearCurrentChat')
	},
	computed: {
	recipient() {
	return this.currentChat && this.currentChat.account
	},
	recipientId() {
	return this.$route.params.recipient_id
	},
	formPlaceholder() {
	if (this.recipient) {
	return this.$t('chats.message_user', {
	nickname: this.recipient.screen_name_ui,
	})
	} else {
	return ''
	}
	},
	chatViewItems() {
	return chatService.getView(this.currentChatMessageService)
	},
	newMessageCount() {
	return (
	this.currentChatMessageService &&
	this.currentChatMessageService.newMessageCount
	)
	},
	streamingEnabled() {
	return (
	this.mergedConfig.useStreamingApi &&
	this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	)
	},
	...mapGetters([
	'currentChat',
	'currentChatMessageService',
	'findOpenedChatByRecipientId',
	'mergedConfig',
	]),
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	...mapState({
	mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
	currentUser: (state) => state.users.currentUser,
	}),
	},
	watch: {
	chatViewItems() {
	// We don't want to scroll to the bottom on a new message when the user is viewing older messages.
	// Therefore we need to know whether the scroll position was at the bottom before the DOM update.
	const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
	this.$nextTick(() => {
	if (bottomedOutBeforeUpdate) {
	this.scrollDown()
	}
	})
	},
	$route: function () {
	this.startFetching()
	},
	mastoUserSocketStatus(newValue) {
	if (newValue === WSConnectionStatus.JOINED) {
	this.fetchChat({ isFirstFetch: true })
	}
	},
	},
	methods: {
	// Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
	onMessageHover({ isHovered, messageChainId }) {
	this.hoveredMessageChainId = isHovered ? messageChainId : undefined
	},
	onFilesDropped() {
	this.$nextTick(() => {
	this.handleResize()
	})
	},
	handleVisibilityChange() {
	this.$nextTick(() => {
	if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) {
	this.scrollDown({ forceRead: true })
	}
	})
	},
	// "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
	handleResize(opts = {}) {
	const { delayed = false } = opts

	if (delayed) {
	setTimeout(() => {
	this.handleResize({ ...opts, delayed: false })
	}, SAFE_RESIZE_TIME_OFFSET)
	return
	}

	this.$nextTick(() => {
	const { offsetHeight = undefined } = getScrollPosition()
	const diff = offsetHeight - this.lastScrollPosition.offsetHeight
	if (diff !== 0 && !this.bottomedOut()) {
	this.$nextTick(() => {
	window.scrollBy({ top: -Math.trunc(diff) })
	})
	}
	this.lastScrollPosition = getScrollPosition()
	})
	},
	scrollDown(options = {}) {
	const { behavior = 'auto', forceRead = false } = options
	this.$nextTick(() => {
	window.scrollTo({
	top: document.documentElement.scrollHeight,
	behavior,
	})
	})
	if (forceRead) {
	this.readChat()
	}
	},
	readChat() {
	if (
	!(
	this.currentChatMessageService && this.currentChatMessageService.maxId
	)
	) {
	return
	}
	if (document.hidden) {
	return
	}
	const lastReadId = this.currentChatMessageService.maxId
	this.$store.dispatch('readChat', {
	id: this.currentChat.id,
	lastReadId,
	})
	},
	bottomedOut(offset) {
	return isBottomedOut(offset)
	},
	reachedTop() {
	return window.scrollY <= 0
	},
	cullOlderCheck() {
	window.setTimeout(() => {
	if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.$store.dispatch(
	'cullOlderMessages',
	this.currentChatMessageService.chatId,
	)
	}
	}, 5000)
	},
	handleScroll: throttle(function () {
	this.lastScrollPosition = getScrollPosition()
	if (!this.currentChat) {
	return
	}

	if (this.reachedTop()) {
	this.fetchChat({ maxId: this.currentChatMessageService.minId })
	} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.jumpToBottomButtonVisible = false
	this.cullOlderCheck()
	if (this.newMessageCount > 0) {
	// Use a delay before marking as read to prevent situation where new messages
	// arrive just as you're leaving the view and messages that you didn't actually
	// get to see get marked as read.
	window.setTimeout(() => {
	// Don't mark as read if the element doesn't exist, user has left chat view
	if (this.$el) this.readChat()
	}, MARK_AS_READ_DELAY)
	}
	} else {
	this.jumpToBottomButtonVisible = true
	}
	}, 200),
	handleScrollUp(positionBeforeLoading) {
	const positionAfterLoading = getScrollPosition()
	window.scrollTo({
	top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
	})
	},
	fetchChat({ isFirstFetch = false, fetchLatest = false, maxId }) {
	const chatMessageService = this.currentChatMessageService
	if (!chatMessageService) {
	return
	}
	if (fetchLatest && this.streamingEnabled) {
	return
	}

	const chatId = chatMessageService.chatId
	const fetchOlderMessages = !!maxId
	const sinceId = fetchLatest && chatMessageService.maxId

	return chatMessages({
	id: chatId,
	maxId,
	sinceId,
	credentials: useOAuthStore().token,
	}).then(({ data: messages }) => {
	// Clear the current chat in case we're recovering from a ws connection loss.
	if (isFirstFetch) {
	chatService.clear(chatMessageService)
	}

	const positionBeforeUpdate = getScrollPosition()
	this.$store
	.dispatch('addChatMessages', { chatId, messages })
	.then(() => {
	this.$nextTick(() => {
	if (fetchOlderMessages) {
	this.handleScrollUp(positionBeforeUpdate)
	}

	// In vertical screens, the first batch of fetched messages may not always take the
	// full height of the scrollable container.
	// If this is the case, we want to fetch the messages until the scrollable container
	// is fully populated so that the user has the ability to scroll up and load the history.
	if (!isScrollable() && messages.length > 0) {
	this.fetchChat({
	maxId: this.currentChatMessageService.minId,
	})
	}
	})
	})
	})
	},
	async startFetching() {
	let chat = this.findOpenedChatByRecipientId(this.recipientId)
	if (!chat) {
	try {
	const { data } = await getOrCreateChat({
	accountId: this.recipientId,
	credentials: useOAuthStore().token,
	})
	chat = data
	} catch (e) {
	console.error('Error creating or getting a chat', e)
	this.errorLoadingChat = true
	}
	}
	if (chat) {
	this.$nextTick(() => {
	this.scrollDown({ forceRead: true })
	})
	this.$store.dispatch('addOpenedChat', { chat })
	this.doStartFetching()
	}
	},
	doStartFetching() {
	this.$store.dispatch('startFetchingCurrentChat', {
	fetcher: () =>
	promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000),
	})
	this.fetchChat({ isFirstFetch: true })
	},
	handleAttachmentPosting() {
	this.$nextTick(() => {
	this.handleResize()
	// When the posting form size changes because of a media attachment, we need an extra resize
	// to account for the potential delay in the DOM update.
	this.scrollDown({ forceRead: true })
	})
	},
	sendMessage({ status, media, idempotencyKey }) {
	const params = {
	id: this.currentChat.id,
	content: status,
	idempotencyKey,
	}

	if (media[0]) {
	params.mediaId = media[0].id
	}

	const fakeMessage = buildFakeMessage({
	attachments: media,
	chatId: this.currentChat.id,
	content: status,
	userId: this.currentUser.id,
	idempotencyKey,
	})

	this.$store
	.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	messages: [fakeMessage],
	})
	.then(() => {
	this.handleAttachmentPosting()
	})

	return this.doSendMessage({
	params,
	fakeMessage,
	retriesLeft: MAX_RETRIES,
	})
	},
	doSendMessage({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
	if (retriesLeft <= 0) return

	sendChatMessage({
	params,
	credentials: useOAuthStore().token,
	})
	.then(({ data }) => {
	this.$store.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	updateMaxId: false,
	messages: [{ ...data, fakeId: fakeMessage.id }],
	})

	return data
	})
	.catch((error) => {
	console.error('Error sending message', error)
	this.$store.dispatch('handleMessageError', {
	chatId: this.currentChat.id,
	fakeId: fakeMessage.id,
	isRetry: retriesLeft !== MAX_RETRIES,
	})
	if (
	(error.statusCode >= 500 && error.statusCode < 600) \|\|
	error.message === 'Failed to fetch'
	) {
	this.messageRetriers[fakeMessage.id] = setTimeout(
	() => {
	this.doSendMessage({
	params,
	fakeMessage,
	retriesLeft: retriesLeft - 1,
	})
	},
	1000 * 2 ** (MAX_RETRIES - retriesLeft),
	)
	}
	return {}
	})

	return Promise.resolve(fakeMessage)
	},
	goBack() {
	this.$router.push({
	name: 'chats',
	params: { username: this.currentUser.screen_name },
	})
	},
	},
	}

	export default Chat
	diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
	index af78b7383b..54bcbd3734 100644
	--- a/src/components/conversation/conversation.js
	+++ b/src/components/conversation/conversation.js
	@@ -1,640 +1,635 @@
	import { clone, filter, findIndex, get, reduce } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
	import ThreadTree from 'src/components/thread_tree/thread_tree.vue'

	import { useInterfaceStore } from 'src/stores/interface'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	-import {
	- fetchConversation,
	- fetchStatus,
	-} from 'src/api/public.js'
	-import {
	- WSConnectionStatus,
	-} from 'src/api/websocket.js'
	+import { fetchConversation, fetchStatus } from 'src/api/public.js'
	+import { WSConnectionStatus } from 'src/api/websocket.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAngleDoubleDown,
	faAngleDoubleLeft,
	faChevronLeft,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faAngleDoubleDown, faAngleDoubleLeft, faChevronLeft)

	const sortById = (a, b) => {
	const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
	const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
	const seqA = Number(idA)
	const seqB = Number(idB)
	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 idA < idB ? -1 : 1
	}
	}

	const sortAndFilterConversation = (conversation, statusoid) => {
	if (statusoid.type === 'retweet') {
	conversation = filter(
	conversation,
	(status) =>
	status.type === 'retweet' \|\|
	status.id !== statusoid.retweeted_status.id,
	)
	} else {
	conversation = filter(conversation, (status) => status.type !== 'retweet')
	}
	return conversation.filter((_) => _).sort(sortById)
	}

	const conversation = {
	data() {
	return {
	highlight: null,
	expanded: false,
	threadDisplayStatusObject: {}, // id => 'showing' \| 'hidden'
	statusContentPropertiesObject: {},
	inlineDivePosition: null,
	loadStatusError: null,
	}
	},
	props: [
	'statusId',
	'collapsable',
	'isPage',
	'pinnedStatusIdsObject',
	'inProfile',
	'profileUserId',
	'virtualHidden',
	],
	created() {
	if (this.isPage) {
	this.fetchConversation()
	}
	},
	computed: {
	maxDepthToShowByDefault() {
	// maxDepthInThread = max number of depths that is visible
	// since our depth starts with 0 and "showing" means "showing children"
	// there is a -2 here
	const maxDepth = this.mergedConfig.maxDepthInThread - 2
	return maxDepth >= 1 ? maxDepth : 1
	},
	streamingEnabled() {
	return (
	this.mergedConfig.useStreamingApi &&
	this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	)
	},
	displayStyle() {
	return this.mergedConfig.conversationDisplay
	},
	isTreeView() {
	return !this.isLinearView
	},
	treeViewIsSimple() {
	return !this.mergedConfig.conversationTreeAdvanced
	},
	isLinearView() {
	return this.displayStyle === 'linear'
	},
	shouldFadeAncestors() {
	return this.mergedConfig.conversationTreeFadeAncestors
	},
	otherRepliesButtonPosition() {
	return this.mergedConfig.conversationOtherRepliesButton
	},
	showOtherRepliesButtonBelowStatus() {
	return this.otherRepliesButtonPosition === 'below'
	},
	showOtherRepliesButtonInsideStatus() {
	return this.otherRepliesButtonPosition === 'inside'
	},
	suspendable() {
	if (this.isTreeView) {
	return Object.entries(this.statusContentProperties).every(
	([, prop]) => !prop.replying && prop.mediaPlaying.length === 0,
	)
	}
	if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
	return this.$refs.statusComponent.every((s) => s.suspendable)
	} else {
	return true
	}
	},
	hideStatus() {
	return this.virtualHidden && this.suspendable
	},
	status() {
	return this.$store.state.statuses.allStatusesObject[this.statusId]
	},
	originalStatusId() {
	if (this.status.retweeted_status) {
	return this.status.retweeted_status.id
	} else {
	return this.statusId
	}
	},
	conversationId() {
	return this.getConversationId(this.statusId)
	},
	conversation() {
	if (!this.status) {
	return []
	}

	if (!this.isExpanded) {
	return [this.status]
	}

	const conversation = clone(
	this.$store.state.statuses.conversationsObject[this.conversationId],
	)
	const statusIndex = findIndex(conversation, { id: this.originalStatusId })
	if (statusIndex !== -1) {
	conversation[statusIndex] = this.status
	}

	return sortAndFilterConversation(conversation, this.status)
	},
	statusMap() {
	return this.conversation.reduce((res, s) => {
	res[s.id] = s
	return res
	}, {})
	},
	threadTree() {
	const reverseLookupTable = this.conversation.reduce(
	(table, status, index) => {
	table[status.id] = index
	return table
	},
	{},
	)

	const threads = this.conversation.reduce(
	(a, cur) => {
	const id = cur.id
	a.forest[id] = this.getReplies(id).map((s) => s.id)

	return a
	},
	{
	forest: {},
	},
	)

	const walk = (forest, topLevel, depth = 0, processed = {}) =>
	topLevel
	.map((id) => {
	if (processed[id]) {
	return []
	}

	processed[id] = true
	return [
	{
	status: this.conversation[reverseLookupTable[id]],
	id,
	depth,
	},
	walk(forest, forest[id], depth + 1, processed),
	].reduce((a, b) => a.concat(b), [])
	})
	.reduce((a, b) => a.concat(b), [])

	const linearized = walk(
	threads.forest,
	this.topLevel.map((k) => k.id),
	)

	return linearized
	},
	replyIds() {
	return this.conversation
	.map((k) => k.id)
	.reduce((res, id) => {
	res[id] = (this.replies[id] \|\| []).map((k) => k.id)
	return res
	}, {})
	},
	totalReplyCount() {
	const sizes = {}
	const subTreeSizeFor = (id) => {
	if (sizes[id]) {
	return sizes[id]
	}
	sizes[id] =
	1 +
	this.replyIds[id]
	.map((cid) => subTreeSizeFor(cid))
	.reduce((a, b) => a + b, 0)
	return sizes[id]
	}
	this.conversation.map((k) => k.id).map(subTreeSizeFor)
	return Object.keys(sizes).reduce((res, id) => {
	res[id] = sizes[id] - 1 // exclude itself
	return res
	}, {})
	},
	totalReplyDepth() {
	const depths = {}
	const subTreeDepthFor = (id) => {
	if (depths[id]) {
	return depths[id]
	}
	depths[id] =
	1 +
	this.replyIds[id]
	.map((cid) => subTreeDepthFor(cid))
	.reduce((a, b) => (a > b ? a : b), 0)
	return depths[id]
	}
	this.conversation.map((k) => k.id).map(subTreeDepthFor)
	return Object.keys(depths).reduce((res, id) => {
	res[id] = depths[id] - 1 // exclude itself
	return res
	}, {})
	},
	depths() {
	return this.threadTree.reduce((a, k) => {
	a[k.id] = k.depth
	return a
	}, {})
	},
	topLevel() {
	const topLevel = this.conversation.reduce(
	(tl, cur) =>
	tl.filter(
	(k) =>
	this.getReplies(cur.id)
	.map((v) => v.id)
	.indexOf(k.id) === -1,
	),
	this.conversation,
	)
	return topLevel
	},
	otherTopLevelCount() {
	return this.topLevel.length - 1
	},
	showingTopLevel() {
	if (this.canDive && this.diveRoot) {
	return [this.statusMap[this.diveRoot]]
	}
	return this.topLevel
	},
	diveRoot() {
	const statusId = this.inlineDivePosition \|\| this.statusId
	const isTopLevel = !this.parentOf(statusId)
	return isTopLevel ? null : statusId
	},
	diveDepth() {
	return this.canDive && this.diveRoot ? this.depths[this.diveRoot] : 0
	},
	diveMode() {
	return this.canDive && !!this.diveRoot
	},
	shouldShowAllConversationButton() {
	// The "show all conversation" button tells the user that there exist
	// other toplevel statuses, so do not show it if there is only a single root
	return (
	this.isTreeView &&
	this.isExpanded &&
	this.diveMode &&
	this.topLevel.length > 1
	)
	},
	shouldShowAncestors() {
	return (
	this.isTreeView &&
	this.isExpanded &&
	this.ancestorsOf(this.diveRoot).length
	)
	},
	replies() {
	let i = 1

	return reduce(
	this.conversation,
	(result, { id, in_reply_to_status_id: irid }) => {
	if (irid) {
	result[irid] = result[irid] \|\| []
	result[irid].push({
	name: `#${i}`,
	id,
	})
	}
	i++
	return result
	},
	{},
	)
	},
	isExpanded() {
	return !!(this.expanded \|\| this.isPage)
	},
	hiddenStyle() {
	const height = (this.status && this.status.virtualHeight) \|\| '120px'
	return this.virtualHidden ? { height } : {}
	},
	threadDisplayStatus() {
	return this.conversation.reduce((a, k) => {
	const id = k.id
	const depth = this.depths[id]
	const status = (() => {
	if (this.threadDisplayStatusObject[id]) {
	return this.threadDisplayStatusObject[id]
	}
	if (depth - this.diveDepth <= this.maxDepthToShowByDefault) {
	return 'showing'
	} else {
	return 'hidden'
	}
	})()

	a[id] = status
	return a
	}, {})
	},
	statusContentProperties() {
	return this.conversation.reduce((a, k) => {
	const id = k.id
	const props = (() => {
	const def = {
	showingTall: false,
	expandingSubject: false,
	showingLongSubject: false,
	isReplying: false,
	mediaPlaying: [],
	}

	if (this.statusContentPropertiesObject[id]) {
	return {
	...def,
	...this.statusContentPropertiesObject[id],
	}
	}
	return def
	})()

	a[id] = props
	return a
	}, {})
	},
	canDive() {
	return this.isTreeView && this.isExpanded
	},
	maybeHighlight() {
	return this.isExpanded ? this.highlight : null
	},
	...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	...mapState({
	mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
	}),
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	},
	components: {
	ThreadTree,
	QuickFilterSettings,
	QuickViewSettings,
	},
	watch: {
	statusId(newVal, oldVal) {
	const newConversationId = this.getConversationId(newVal)
	const oldConversationId = this.getConversationId(oldVal)
	if (
	newConversationId &&
	oldConversationId &&
	newConversationId === oldConversationId
	) {
	this.setHighlight(this.originalStatusId)
	} else {
	this.fetchConversation()
	}
	},
	expanded(value) {
	if (value) {
	this.fetchConversation()
	} else {
	this.resetDisplayState()
	}
	},
	virtualHidden() {
	this.$store.dispatch('setVirtualHeight', {
	statusId: this.statusId,
	height: `${this.$el.clientHeight}px`,
	})
	},
	},
	methods: {
	fetchConversation() {
	if (this.status) {
	fetchConversation({
	id: this.statusId,
	credentials: useOAuthStore().token,
	}).then(({ data: { ancestors, descendants } }) => {
	this.$store.dispatch('addNewStatuses', { statuses: ancestors })
	this.$store.dispatch('addNewStatuses', { statuses: descendants })
	this.setHighlight(this.originalStatusId)
	})
	} else {
	this.loadStatusError = null
	fetchStatus({
	id: this.statusId,
	credentials: useOAuthStore().token,
	})
	.then(({ data: status }) => {
	this.$store.dispatch('addNewStatuses', { statuses: [status] })
	this.fetchConversation()
	})
	.catch((error) => {
	console.error(error)
	this.loadStatusError = error
	})
	}
	},
	isFocused(id) {
	return this.isExpanded && id === this.highlight
	},
	getReplies(id) {
	return this.replies[id] \|\| []
	},
	getHighlight() {
	return this.isExpanded ? this.highlight : null
	},
	setHighlight(id) {
	if (!id) return
	this.highlight = id

	if (!this.streamingEnabled) {
	this.$store.dispatch('fetchStatus', id)
	}

	this.$store.dispatch('fetchFavsAndRepeats', id)
	this.$store.dispatch('fetchEmojiReactionsBy', id)
	},
	toggleExpanded() {
	this.expanded = !this.expanded
	},
	getConversationId(statusId) {
	const status = this.$store.state.statuses.allStatusesObject[statusId]
	return get(
	status,
	'retweeted_status.statusnet_conversation_id',
	get(status, 'statusnet_conversation_id'),
	)
	},
	setThreadDisplay(id, nextStatus) {
	this.threadDisplayStatusObject = {
	...this.threadDisplayStatusObject,
	[id]: nextStatus,
	}
	},
	toggleThreadDisplay(id) {
	const curStatus = this.threadDisplayStatus[id]
	const nextStatus = curStatus === 'showing' ? 'hidden' : 'showing'
	this.setThreadDisplay(id, nextStatus)
	},
	setThreadDisplayRecursively(id, nextStatus) {
	this.setThreadDisplay(id, nextStatus)
	this.getReplies(id)
	.map((k) => k.id)
	.map((id) => this.setThreadDisplayRecursively(id, nextStatus))
	},
	showThreadRecursively(id) {
	this.setThreadDisplayRecursively(id, 'showing')
	},
	setStatusContentProperty(id, name, value) {
	this.statusContentPropertiesObject = {
	...this.statusContentPropertiesObject,
	[id]: {
	...this.statusContentPropertiesObject[id],
	[name]: value,
	},
	}
	},
	toggleStatusContentProperty(id, name) {
	this.setStatusContentProperty(
	id,
	name,
	!this.statusContentProperties[id][name],
	)
	},
	leastVisibleAncestor(id) {
	let cur = id
	let parent = this.parentOf(cur)
	while (cur) {
	// if the parent is showing it means cur is visible
	if (this.threadDisplayStatus[parent] === 'showing') {
	return cur
	}
	parent = this.parentOf(parent)
	cur = this.parentOf(cur)
	}
	// nothing found, fall back to toplevel
	return this.topLevel[0] ? this.topLevel[0].id : undefined
	},
	diveIntoStatus(id) {
	this.tryScrollTo(id)
	},
	diveToTopLevel() {
	this.tryScrollTo(
	this.topLevelAncestorOrSelfId(this.diveRoot) \|\| this.topLevel[0].id,
	)
	},
	// only used when we are not on a page
	undive() {
	this.inlineDivePosition = null
	this.setHighlight(this.statusId)
	},
	tryScrollTo(id) {
	if (!id) {
	return
	}
	if (this.isPage) {
	// set statusId
	this.$router.push({ name: 'conversation', params: { id } })
	} else {
	this.inlineDivePosition = id
	}
	// Because the conversation can be unmounted when out of sight
	// and mounted again when it comes into sight,
	// the `mounted` or `created` function in `status` should not
	// contain scrolling calls, as we do not want the page to jump
	// when we scroll with an expanded conversation.
	//
	// Now the method is to rely solely on the `highlight` watcher
	// in `status` components.
	// In linear views, all statuses are rendered at all times, but
	// in tree views, it is possible that a change in active status
	// removes and adds status components (e.g. an originally child
	// status becomes an ancestor status, and thus they will be
	// different).
	// Here, let the components be rendered first, in order to trigger
	// the `highlight` watcher.
	this.$nextTick(() => {
	this.setHighlight(id)
	})
	},
	goToCurrent() {
	this.tryScrollTo(this.diveRoot \|\| this.topLevel[0].id)
	},
	statusById(id) {
	return this.statusMap[id]
	},
	parentOf(id) {
	const status = this.statusById(id)
	if (!status) {
	return undefined
	}
	const { in_reply_to_status_id: parentId } = status
	if (!this.statusMap[parentId]) {
	return undefined
	}
	return parentId
	},
	parentOrSelf(id) {
	return this.parentOf(id) \|\| id
	},
	// Ancestors of some status, from top to bottom
	ancestorsOf(id) {
	const ancestors = []
	let cur = this.parentOf(id)
	while (cur) {
	ancestors.unshift(this.statusMap[cur])
	cur = this.parentOf(cur)
	}
	return ancestors
	},
	topLevelAncestorOrSelfId(id) {
	let cur = id
	let parent = this.parentOf(id)
	while (parent) {
	cur = this.parentOf(cur)
	parent = this.parentOf(parent)
	}
	return cur
	},
	resetDisplayState() {
	this.undive()
	this.threadDisplayStatusObject = {}
	},
	},
	}

	export default conversation
	diff --git a/src/modules/api.js b/src/modules/api.js
	index 9d6426c2e2..ca1aacf059 100644
	--- a/src/modules/api.js
	+++ b/src/modules/api.js
	@@ -1,348 +1,345 @@
	import { Socket } from 'phoenix'

	import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useShoutStore } from 'src/stores/shout.js'

	-import {
	- fetchTimeline,
	-} from 'src/api/public.js'
	+import { fetchTimeline } from 'src/api/public.js'
	import {
	getMastodonSocketURI,
	ProcessedWS,
	WSConnectionStatus,
	} from 'src/api/websocket.js'
	import followRequestFetcher from 'src/services/follow_request_fetcher/follow_request_fetcher.service'
	import notificationsFetcher from 'src/services/notifications_fetcher/notifications_fetcher.service.js'
	import timelineFetcher from 'src/services/timeline_fetcher/timeline_fetcher.service.js'

	const retryTimeout = (multiplier) => 1000 * multiplier

	const api = {
	state: {
	retryMultiplier: 1,
	fetchers: {},
	socket: null,
	mastoUserSocket: null,
	mastoUserSocketStatus: null,
	followRequests: [],
	},
	getters: {
	followRequestCount: (state) => state.followRequests.length,
	},
	mutations: {
	addFetcher(state, { fetcherName, fetcher }) {
	state.fetchers[fetcherName] = fetcher
	},
	removeFetcher(state, { fetcherName }) {
	state.fetchers[fetcherName].stop()
	delete state.fetchers[fetcherName]
	},
	setWsToken(state, token) {
	state.wsToken = token
	},
	setSocket(state, socket) {
	state.socket = socket
	},
	setFollowRequests(state, value) {
	state.followRequests = value
	},
	setMastoUserSocketStatus(state, value) {
	state.mastoUserSocketStatus = value
	},
	incrementRetryMultiplier(state) {
	state.retryMultiplier = Math.max(++state.retryMultiplier, 3)
	},
	resetRetryMultiplier(state) {
	state.retryMultiplier = 1
	},
	},
	actions: {
	/**
	* Global MastoAPI socket control, in future should disable ALL sockets/(re)start relevant sockets
	*
	* @param {Boolean} [initial] - whether this enabling happened at boot time or not
	*/
	enableMastoSockets(store, initial) {
	const { state, dispatch, commit } = store
	// Do not initialize unless nonexistent or closed
	if (
	state.mastoUserSocket &&
	![WebSocket.CLOSED, WebSocket.CLOSING].includes(
	state.mastoUserSocket.getState(),
	)
	) {
	return
	}
	if (initial) {
	commit('setMastoUserSocketStatus', WSConnectionStatus.STARTING_INITIAL)
	} else {
	commit('setMastoUserSocketStatus', WSConnectionStatus.STARTING)
	}
	return dispatch('startMastoUserSocket')
	},
	disableMastoSockets(store) {
	const { state, dispatch, commit } = store
	if (!state.mastoUserSocket) return
	commit('setMastoUserSocketStatus', WSConnectionStatus.DISABLED)
	return dispatch('stopMastoUserSocket')
	},

	// MastoAPI 'User' sockets
	startMastoUserSocket(store) {
	return new Promise((resolve, reject) => {
	try {
	const { state, commit, dispatch, rootState } = store
	const timelineData = rootState.statuses.timelines.friends

	- const serv = useInstanceStore().server.replace('http', 'ws')
	const credentials = useOAuthStore().token
	const url = getMastodonSocketURI({ credentials })

	state.mastoUserSocket = ProcessedWS({
	url,
	id: 'Unified',
	credentials,
	})

	state.mastoUserSocket.addEventListener(
	'pleroma:authenticated',
	() => {
	state.mastoUserSocket.subscribe('user')
	},
	)
	state.mastoUserSocket.addEventListener(
	'message',
	({ detail: message }) => {
	if (!message) return // pings
	if (message.event === 'notification') {
	dispatch('addNewNotifications', {
	notifications: [message.notification],
	older: false,
	})
	} else if (message.event === 'update') {
	dispatch('addNewStatuses', {
	statuses: [message.status],
	userId: false,
	showImmediately: timelineData.visibleStatuses.length === 0,
	timeline: 'friends',
	})
	} else if (message.event === 'status.update') {
	dispatch('addNewStatuses', {
	statuses: [message.status],
	userId: false,
	showImmediately:
	message.status.id in timelineData.visibleStatusesObject,
	timeline: 'friends',
	})
	} else if (message.event === 'delete') {
	dispatch('deleteStatusById', message.id)
	} else if (message.event === 'pleroma:chat_update') {
	// The setTimeout wrapper is a temporary band-aid to avoid duplicates for the user's own messages when doing optimistic sending.
	// The cause of the duplicates is the WS event arriving earlier than the HTTP response.
	// This setTimeout wrapper can be removed once the commit `8e41baff` is in the stable Pleroma release.
	// (`8e41baff` adds the idempotency key to the chat message entity, which PleromaFE uses when it's available, and it makes this artificial delay unnecessary).
	setTimeout(() => {
	dispatch('addChatMessages', {
	chatId: message.chatUpdate.id,
	messages: [message.chatUpdate.lastMessage],
	})
	dispatch('updateChat', { chat: message.chatUpdate })
	maybeShowChatNotification(store, message.chatUpdate)
	}, 100)
	}
	},
	)
	state.mastoUserSocket.addEventListener('open', () => {
	// Do not show notification when we just opened up the page
	if (
	state.mastoUserSocketStatus !==
	WSConnectionStatus.STARTING_INITIAL
	) {
	useInterfaceStore().pushGlobalNotice({
	level: 'success',
	messageKey: 'timeline.socket_reconnected',
	timeout: 5000,
	})
	}
	// Stop polling if we were errored or disabled
	if (
	new Set([
	WSConnectionStatus.ERROR,
	WSConnectionStatus.DISABLED,
	]).has(state.mastoUserSocketStatus)
	) {
	dispatch('stopFetchingTimeline', { timeline: 'friends' })
	dispatch('stopFetchingNotifications')
	dispatch('stopFetchingChats')
	}
	commit('resetRetryMultiplier')
	commit('setMastoUserSocketStatus', WSConnectionStatus.JOINED)
	})
	state.mastoUserSocket.addEventListener(
	'error',
	({ detail: error }) => {
	console.error('Error in MastoAPI websocket:', error)
	// TODO is this needed?
	dispatch('clearOpenedChats')
	},
	)
	state.mastoUserSocket.addEventListener(
	'close',
	({ detail: closeEvent }) => {
	const ignoreCodes = new Set([
	1000, // Normal (intended) closure
	1001, // Going away
	])
	const { code } = closeEvent
	if (ignoreCodes.has(code)) {
	console.debug(
	`Not restarting socket becasue of closure code ${code} is in ignore list`,
	)
	commit('setMastoUserSocketStatus', WSConnectionStatus.CLOSED)
	} else {
	console.warn(
	`MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`,
	)
	setTimeout(() => {
	dispatch('startMastoUserSocket')
	}, retryTimeout(state.retryMultiplier))
	commit('incrementRetryMultiplier')
	if (state.mastoUserSocketStatus !== WSConnectionStatus.ERROR) {
	dispatch('startFetchingTimeline', { timeline: 'friends' })
	dispatch('startFetchingNotifications')
	dispatch('startFetchingChats')
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'timeline.socket_broke',
	messageArgs: [code],
	timeout: 5000,
	})
	}
	commit('setMastoUserSocketStatus', WSConnectionStatus.ERROR)
	}
	dispatch('clearOpenedChats')
	},
	)
	resolve()
	} catch (e) {
	reject(e)
	}
	})
	},
	stopMastoUserSocket({ state, dispatch }) {
	dispatch('startFetchingTimeline', { timeline: 'friends' })
	dispatch('startFetchingNotifications')
	dispatch('startFetchingChats')
	state.mastoUserSocket.close()
	},

	// Timelines
	startFetchingTimeline(
	store,
	{
	timeline = 'friends',
	tag = false,
	userId = false,
	listId = false,
	statusId = false,
	bookmarkFolderId = false,
	},
	) {
	if (
	timeline === 'favourites' &&
	!useInstanceCapabilitiesStore().pleromaPublicFavouritesAvailable
	)
	return
	if (store.state.fetchers[timeline]) return

	const fetcher = timelineFetcher.startFetching({
	timeline,
	store,
	userId,
	listId,
	statusId,
	bookmarkFolderId,
	tag,
	credentials: useOAuthStore().token,
	})

	store.commit('addFetcher', { fetcherName: timeline, fetcher })
	},
	stopFetchingTimeline(store, timeline) {
	const fetcher = store.state.fetchers[timeline]
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: timeline, fetcher })
	},

	fetchTimeline(store, { timeline, ...rest }) {
	fetchTimeline({
	store,
	timeline,
	...rest,
	credentials: useOAuthStore().token,
	})
	},

	// Notifications
	startFetchingNotifications(store) {
	if (store.state.fetchers.notifications) return
	const fetcher = notificationsFetcher.startFetching({
	store,
	credentials: useOAuthStore().token,
	})
	store.commit('addFetcher', { fetcherName: 'notifications', fetcher })
	},
	stopFetchingNotifications(store) {
	const fetcher = store.state.fetchers.notifications
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'notifications', fetcher })
	},

	// Follow requests
	startFetchingFollowRequests(store) {
	if (store.state.fetchers.followRequests) return
	const fetcher = followRequestFetcher.startFetchingFollowRequests({
	store,
	credentials: useOAuthStore().token,
	})

	store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
	},
	stopFetchingFollowRequests(store) {
	const fetcher = store.state.fetchers.followRequests
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'followRequests', fetcher })
	},

	// Pleroma websocket
	setWsToken(store, token) {
	store.commit('setWsToken', token)
	},
	initializeSocket({ commit, state, rootState }) {
	// Set up websocket connection
	const token = state.wsToken
	if (
	useInstanceCapabilitiesStore().shoutAvailable &&
	typeof token !== 'undefined' &&
	state.socket === null
	) {
	const socket = new Socket('/socket', { params: { token } })
	socket.connect()

	commit('setSocket', socket)
	useShoutStore().initializeShout(socket)
	}
	},
	disconnectFromSocket({ commit, state }) {
	state.socket && state.socket.disconnect()
	commit('setSocket', null)
	},
	},
	}

	export default api
	diff --git a/vite.config.js b/vite.config.js
	index 4c7b4f5349..64859ebb17 100644
	--- a/vite.config.js
	+++ b/vite.config.js
	@@ -1,254 +1,254 @@
	import { dirname, resolve } from 'node:path'
	import { fileURLToPath } from 'node:url'
	import { DevTools } from '@vitejs/devtools'
	import vue from '@vitejs/plugin-vue'
	import vueJsx from '@vitejs/plugin-vue-jsx'
	import { playwright } from '@vitest/browser-playwright'
	import { defineConfig } from 'vite'
	import eslint from 'vite-plugin-eslint2'
	import stylelint from 'vite-plugin-stylelint'
	import { configDefaults } from 'vitest/config'

	import { getCommitHash } from './build/commit_hash.js'
	import copyPlugin from './build/copy_plugin.js'
	import emojisPlugin from './build/emojis_plugin.js'
	import mswPlugin from './build/msw_plugin.js'
	import { buildSwPlugin, swMessagesPlugin } from './build/sw_plugin.js'

	const localConfigPath = '<projectRoot>/config/local.json'
	const normalizeTarget = (target) => {
	if (!target \|\| typeof target !== 'string') return target
	return target.endsWith('/') ? target.replace(/\/$/, '') : target
	}

	const getLocalDevSettings = async () => {
	const envTarget = normalizeTarget(process.env.VITE_PROXY_TARGET)
	const envOrigin = normalizeTarget(process.env.VITE_PROXY_ORIGIN)
	try {
	const settings = (await import('./config/local.json')).default
	settings.target = normalizeTarget(settings.target)
	settings.origin = normalizeTarget(settings.origin)
	if (envTarget) settings.target = envTarget
	if (envOrigin) settings.origin = envOrigin
	console.info(`Using local dev server settings (${localConfigPath}):`)
	console.info(JSON.stringify(settings, null, 2))
	return settings
	} catch (e) {
	if (!envTarget && !envOrigin) {
	console.info(
	`Local dev server settings not found (${localConfigPath}), using default`,
	e,
	)
	return {}
	}
	const settings = { target: envTarget, origin: envOrigin }
	console.info(
	'Using dev server settings from VITE_PROXY_TARGET/VITE_PROXY_ORIGIN:',
	)
	console.info(JSON.stringify(settings, null, 2))
	return settings
	}
	}

	const projectRoot = dirname(fileURLToPath(import.meta.url))

	const getTransformSWSettings = (settings) => {
	if ('transformSW' in settings) {
	return settings.transformSW
	} else {
	console.info(
	'`transformSW` is not present in your local settings.\n' +
	'This option controls whether the service worker should be bundled and transformed into iife (immediately-invoked function expression) during development.\n' +
	'If set to false, the service worker will be served as-is, as an ES Module.\n' +
	'Some browsers (e.g. Firefox) does not support ESM service workers.\n' +
	'To avoid surprises, it is defaulted to true, but this can be slow.\n' +
	'If you are using a browser that supports ESM service workers, you can set this option to false.\n' +
	`No matter your choice, you can set the transformSW option in ${localConfigPath} in to disable this message.`,
	)
	return true
	}
	}

	export default defineConfig(async ({ mode, command }) => {
	const settings = await getLocalDevSettings()
	const target = settings.target \|\| 'http://localhost:4000/'
	const origin = settings.origin \|\| target
	- const targetSW = target.replace(/^http/,'ws')
	+ const targetSW = target.replace(/^http/, 'ws')
	const transformSW = getTransformSWSettings(settings)
	const proxy = {
	'/api': {
	target,
	changeOrigin: true,
	cookieDomainRewrite: 'localhost',
	ws: true,
	rewriteWsOrigin: true,
	},
	'/auth': {
	// Mastodon password reset lives here
	target,
	changeOrigin: true,
	cookieDomainRewrite: 'localhost',
	ws: true,
	},
	'/nodeinfo': {
	target,
	changeOrigin: true,
	cookieDomainRewrite: 'localhost',
	},
	'/instance': {
	target,
	changeOrigin: true,
	cookieDomainRewrite: 'localhost',
	},
	'/oauth': {
	target,
	changeOrigin: true,
	cookieDomainRewrite: 'localhost',
	},
	'/socket': {
	target: targetSW,
	changeOrigin: true,
	cookieDomainRewrite: 'localhost',
	rewriteWsOrigin: true,
	ws: true,
	headers: {
	Origin: origin,
	},
	},
	}

	const swSrc = 'src/sw.js'
	const swDest = 'sw-pleroma.js'
	const alias = {
	src: '/src',
	components: '/src/components',
	...(mode === 'test' ? { vue: 'vue/dist/vue.esm-bundler.js' } : {}),
	}

	return {
	plugins: [
	vue({
	template: {
	compilerOptions: {
	isCustomElement(tag) {
	if (tag === 'pinch-zoom') {
	return true
	}
	if (tag.startsWith('cropper-')) {
	return true
	}
	return false
	},
	},
	},
	}),
	vueJsx(),
	buildSwPlugin({ swSrc, swDest }),
	swMessagesPlugin(),
	emojisPlugin(),
	copyPlugin({
	inUrl: '/static/ruffle',
	inFs: resolve(projectRoot, 'node_modules/@ruffle-rs/ruffle'),
	}),
	eslint({
	lintInWorker: true,
	lintOnStart: true,
	cacheLocation: resolve(projectRoot, 'node_modules/.cache/eslintcache'),
	}),
	stylelint({
	lintInWorker: true,
	lintOnStart: true,
	cacheLocation: resolve(
	projectRoot,
	'node_modules/.cache/stylelintcache',
	),
	}),
	...(mode === 'test' ? [mswPlugin()] : []),
	],
	css: {
	devSourcemap: true,
	},
	resolve: {
	alias,
	},
	define: {
	'process.env': JSON.stringify({
	NODE_ENV:
	mode === 'test'
	? 'testing'
	: command === 'serve'
	? 'development'
	: 'production',
	HAS_MODULE_SERVICE_WORKER: command === 'serve' && !transformSW,
	}),
	COMMIT_HASH: JSON.stringify(
	command === 'serve' ? 'DEV' : getCommitHash(),
	),
	DEV_OVERRIDES: JSON.stringify(command === 'serve' ? settings : undefined),
	__VUE_OPTIONS_API__: true,
	__VUE_PROD_DEVTOOLS__: false,
	__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
	},
	// devtools: { enabled: true },
	build: {
	sourcemap: true,
	rolldownOptions: {
	input: {
	main: 'index.html',
	},
	output: {
	entryFileNames(chunkInfo) {
	const id = chunkInfo.facadeModuleId
	if (id.endsWith(swSrc)) {
	return swDest
	} else {
	return 'static/js/[name].[hash].js'
	}
	},
	chunkFileNames(chunkInfo) {
	if (chunkInfo.facadeModuleId) {
	if (
	chunkInfo.facadeModuleId.includes(
	'node_modules/@kazvmoe-infra/unicode-emoji-json/annotations/',
	)
	) {
	return 'static/js/emoji-annotations/[name].[hash].js'
	} else if (chunkInfo.facadeModuleId.includes('src/i18n/')) {
	return 'static/js/i18n/[name].[hash].js'
	}
	}
	return 'static/js/[name].[hash].js'
	},
	assetFileNames(assetInfo) {
	const name = assetInfo.names?.[0] \|\| ''
	if (/\.(png\|jpe?g\|gif\|svg)(\?.*)?$/.test(name)) {
	return 'static/img/[name].[hash][extname]'
	} else if (/\.css$/.test(name)) {
	return 'static/css/[name].[hash][extname]'
	} else {
	return 'static/misc/[name].[hash][extname]'
	}
	},
	},
	},
	},
	server: {
	...(mode === 'test' ? {} : { proxy }),
	port: Number(process.env.PORT) \|\| 8080,
	},
	preview: {
	proxy,
	},
	test: {
	globals: true,
	exclude: [...configDefaults.exclude, 'test/e2e-playwright/**'],
	browser: {
	enabled: true,
	headless: true,
	provider: playwright(),
	// https://github.com/mswjs/msw/issues/2757
	instances: [{ browser: 'chromium' }],
	},
	},
	}
	})

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 30, 1:42 AM (1 d, 13 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1799139
Default Alt Text: (66 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions