No OneTemporary
Actions

Size

41 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/api/api_base.js b/src/api/api_base.js
	new file mode 100644
	index 0000000000..632c04252b
	--- /dev/null
	+++ b/src/api/api_base.js
	@@ -0,0 +1,24 @@
	+// Where the instance's API lives. Empty when the page is served by the
	+// instance itself (paths stay relative, as always); the chosen instance's
	+// origin when this frontend is hosted on its own domain.
	+
	+let base = ''
	+
	+export const setApiBase = (url) => {
	+ base = url ? url.replace(/\/+$/, '') : ''
	+}
	+
	+const isAbsolute = (url) => /^[a-z][a-z\d+.-]*:/i.test(url)
	+
	+// a path on the instance
	+export const apiUrl = (path) => (base && !isAbsolute(path) ? base + path : path)
	+
	+// a WebSocket URL on the instance (ws: for http:, wss: for https:),
	+// always absolute: WebSocket takes relative URLs only in recent browsers
	+export const streamingUrl = (path) =>
	+ (base \|\| window.location.origin).replace(/^http/, 'ws') + path
	+
	+// a file the server provides (default avatar, banner): the server in front
	+// of a path, a full URL as it is
	+export const serverUrl = (server, path) =>
	+ isAbsolute(path) ? path : server + path
	diff --git a/src/api/helpers.js b/src/api/helpers.js
	index 6afd204684..765615dccf 100644
	--- a/src/api/helpers.js
	+++ b/src/api/helpers.js
	@@ -1,139 +1,140 @@
	import { snakeCase } from 'lodash-es'

	+import { apiUrl } from 'src/api/api_base.js'
	import { StatusCodeError } from 'src/services/errors/errors'

	export const paramsString = (params = {}) => {
	if (params == null \|\| params === undefined) return ''

	if (typeof params !== 'object' \|\| Array.isArray(params)) {
	throw new TypeError('Params are not an object!')
	}

	const entries = (() => {
	if (params instanceof Map) {
	return [...params.entries()]
	} else {
	return Object.entries(params)
	}
	})()

	const arrays = []
	const nonArrays = []

	entries.forEach(([k, v]) => {
	if (v == null) return // Drop nulls
	if (
	(typeof v === 'object' && !Array.isArray(v)) \|\|
	typeof v === 'function'
	) {
	throw new TypeError('Param cannot be non-primitive!')
	}
	if (Array.isArray(v)) {
	arrays.push([k, v])
	} else {
	nonArrays.push([k, v])
	}
	})

	arrays.forEach(([k, array]) => {
	array.forEach((v) => {
	if (typeof v === 'object' \|\| typeof v === 'function' \|\| v === undefined)
	throw new TypeError('Array param cannot contain non-primitives!')
	})
	})

	if (nonArrays.length + arrays.length === 0) return ''

	return (
	'?' +
	[
	...nonArrays.map(([k, v]) => [snakeCase(k), v]),
	// turning [a,[1,2,3]] into [[a[],1],[a[],2],[a[],3]]
	...arrays.reduce(
	(acc, [k, arrayValue]) => [
	...acc,
	...arrayValue.map((v) => [snakeCase(k) + '[]', v]),
	],
	[],
	),
	]
	.map(([k, v]) => `${k}=${window.encodeURIComponent(v)}`)
	.join('&')
	)
	}

	export const promisedRequest = async ({
	method = 'GET',
	url,
	payload,
	formData,
	forceContentType,
	cache,
	credentials,
	headers = {},
	}) => {
	const options = {
	method,
	credentials: 'same-origin',
	headers: {
	Accept: forceContentType ?? 'application/json',
	...headers,
	},
	}

	if (!formData) {
	options.headers['Content-Type'] = 'application/json'
	}

	if (cache) {
	options.cache = cache
	}

	if (formData \|\| payload) {
	options.body = formData \|\| JSON.stringify(payload)
	}

	if (credentials) {
	options.headers = {
	...options.headers,
	...authHeaders(credentials),
	}
	}

	- const response = await fetch(url, options)
	+ const response = await fetch(apiUrl(url), options)
	const data = await (async () => {
	const [contentType] = response.headers
	.get('content-type')
	.split(';')
	.map((x) => x.toLowerCase().trim())
	const contentLength = Number.parseInt(
	response.headers.get('content-length'),
	)
	if (contentLength === 0) return null

	switch (forceContentType ?? contentType) {
	case 'text/plain':
	return await response.text()
	case 'application/json':
	return await response.json()
	default:
	return await response.bytes()
	}
	})()

	const { ok, status } = response

	if (ok) {
	return { response, status, data, timestamp: Date.now() }
	} else {
	throw new StatusCodeError(response.status, data, { url, options }, response)
	}
	}

	const authHeaders = (accessToken) => {
	if (accessToken) {
	return { Authorization: `Bearer ${accessToken}` }
	} else {
	return {}
	}
	}
	diff --git a/src/api/websocket.js b/src/api/websocket.js
	index 3b0e34bd46..fdf0d067a2 100644
	--- a/src/api/websocket.js
	+++ b/src/api/websocket.js
	@@ -1,195 +1,196 @@
	+import { streamingUrl } from './api_base.js'
	import { paramsString } from './helpers.js'

	import {
	parseChat,
	parseNotification,
	parseStatus,
	} from 'src/services/entity_normalizer/entity_normalizer.service.js'

	const MASTODON_STREAMING = ({ accessToken, stream }) =>
	- `/api/v1/streaming${paramsString({ accessToken, stream })}`
	+ streamingUrl(`/api/v1/streaming${paramsString({ accessToken, stream })}`)

	export const getMastodonSocketURI = ({ credentials, stream }) => {
	return MASTODON_STREAMING({ accessToken: credentials, stream })
	}

	const MASTODON_STREAMING_EVENTS = new Set([
	'update',
	'notification',
	'delete',
	'filters_changed',
	'status.update',
	])

	const PLEROMA_STREAMING_EVENTS = new Set([
	'pleroma:chat_update',
	'pleroma:respond',
	])

	export const WSConnectionStatus = Object.freeze({
	JOINED: 1,
	CLOSED: 2,
	ERROR: 3,
	DISABLED: 4,
	STARTING: 5,
	STARTING_INITIAL: 6,
	})

	export class WSEvent extends Event {
	data

	constructor(name, data, original) {
	super(name)
	this.data = data
	}
	}

	// A thin wrapper around WebSocket API that allows adding a pre-processor to it
	// Uses EventTarget and a WSEvent to proxy events
	export const ProcessedWS = ({
	url,
	preprocessor = handleMastoWS,
	id = 'Unknown',
	credentials,
	}) => {
	const eventTarget = new EventTarget()
	const socket = new WebSocket(url)
	if (!socket) throw new Error(`Failed to create socket ${id}`)
	const proxy = (original, eventName, processor = (a) => a) => {
	original.addEventListener(eventName, (eventData) => {
	eventTarget.dispatchEvent(new WSEvent(eventName, processor(eventData)))
	})
	}
	socket.addEventListener('open', (wsEvent) => {
	console.debug(`[WS][${id}] Socket connected`, wsEvent)
	if (credentials) {
	socket.send(
	JSON.stringify({
	type: 'pleroma:authenticate',
	token: credentials,
	}),
	)
	}
	})
	socket.addEventListener('error', (wsEvent) => {
	console.debug(`[WS][${id}] Socket errored`, wsEvent)
	})
	socket.addEventListener('close', (wsEvent) => {
	console.debug(
	`[WS][${id}] Socket disconnected with code ${wsEvent.code}`,
	wsEvent,
	)
	})
	// Commented code reason: very spammy, uncomment to enable message debug logging
	/*
	socket.addEventListener('message', (wsEvent) => {
	console.debug(
	`[WS][${id}] Message received`,
	wsEvent
	)
	})
	/**/

	const onAuthenticated = () => {
	eventTarget.dispatchEvent(new WSEvent('pleroma:authenticated'))
	}

	proxy(socket, 'open')
	proxy(socket, 'close')
	proxy(socket, 'message', (event) => preprocessor(event, { onAuthenticated }))
	proxy(socket, 'error')

	// 1000 = Normal Closure
	eventTarget.close = () => {
	socket.close(1000, 'Shutting down socket')
	}
	eventTarget.getState = () => socket.readyState
	eventTarget.subscribe = (stream, args = {}) => {
	console.debug(`[WS][${id}] Subscribing to stream ${stream} with args`, args)
	socket.send(
	JSON.stringify({
	type: 'subscribe',
	stream,
	...args,
	}),
	)
	}
	eventTarget.unsubscribe = (stream, args = {}) => {
	console.debug(
	`[WS][${id}] Unsubscribing from stream ${stream} with args`,
	args,
	)
	socket.send(
	JSON.stringify({
	type: 'unsubscribe',
	stream,
	...args,
	}),
	)
	}

	return eventTarget
	}

	const prepareEvent = ({ event, stream, payload, socket }) => {
	const data = (() => {
	// MastoBE and PleromaBE both send payload for delete as a plain string
	if (event === 'delete') {
	return payload
	} else if (payload) {
	return JSON.parse(payload)
	} else {
	return null
	}
	})()

	const result = { event, stream, socket }
	if (event === 'delete') {
	return { ...result, id: data }
	} else if (event === 'update' \|\| event === 'statusUpdate') {
	return { ...result, status: parseStatus(data) }
	} else if (event === 'notification') {
	return { ...result, notification: parseNotification(data) }
	} else if (event === 'pleroma:chat_update') {
	return { ...result, chatUpdate: parseChat(data) }
	} else {
	return { ...result, data }
	}
	}

	const handleEvent = ({ event, data, socket }, onAuthenticated) => {
	if (event === 'pleroma:respond' && data.type === 'pleroma:authenticate') {
	if (data.result === 'success' \|\| data.error === 'already_authenticated') {
	console.debug('[WS] Successfully authenticated')
	onAuthenticated()
	} else {
	console.error('[WS] Unable to authenticate:', data.error)
	socket.close()
	}
	}
	}

	export const handleMastoWS = (
	wsEvent,
	{
	onAuthenticated = () => {
	/* no-op */
	},
	} = {},
	) => {
	const { data, target: socket } = wsEvent
	if (!data) return
	const parsedEvent = JSON.parse(data)
	const { event, stream, payload } = parsedEvent

	if (
	!MASTODON_STREAMING_EVENTS.has(event) &&
	!PLEROMA_STREAMING_EVENTS.has(event)
	) {
	console.warn('Unknown event', wsEvent)
	return null
	}
	const result = prepareEvent({ event, stream, payload, socket })
	handleEvent(result, onAuthenticated)
	return result
	}
	diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
	index 4f15d4926a..bf6881f671 100644
	--- a/src/components/user_avatar/user_avatar.js
	+++ b/src/components/user_avatar/user_avatar.js
	@@ -1,56 +1,62 @@
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useUsersStore } from 'src/stores/users.js'

	+import { serverUrl } from 'src/api/api_base.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faPeopleGroup, faRobot } from '@fortawesome/free-solid-svg-icons'

	library.add(faRobot, faPeopleGroup)

	const UserAvatar = {
	props: {
	// UserID of a user to show avatar of
	userId: {
	required: true,
	type: String,
	},
	// Use less space and use alternative roundness
	compact: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Override avatar image URL, useful for profile editing
	url: {
	required: false,
	type: String,
	default: null,
	},
	},
	data() {
	return {
	showPlaceholder: false,
	- defaultAvatar: `${useInstanceStore().server + useInstanceStore().instanceIdentity.defaultAvatar}`,
	+ // the instance's file (hosted: a full URL on it already)
	+ defaultAvatar: serverUrl(
	+ useInstanceStore().server,
	+ useInstanceStore().instanceIdentity.defaultAvatar,
	+ ),
	betterShadow: useInterfaceStore().browserSupport.cssFilter,
	}
	},
	computed: {
	user() {
	return useUsersStore().findUser(this.userId)
	},
	showActorTypeIndicator() {
	return !useMergedConfigStore().mergedConfig.hideBotIndication
	},
	},
	methods: {
	imgSrc(src) {
	return !src \|\| this.showPlaceholder ? this.defaultAvatar : src
	},
	imageLoadError() {
	this.showPlaceholder = true
	},
	},
	}

	export default UserAvatar
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index 09140da654..0662deaa4f 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,622 +1,624 @@
	import {
	isEqual,
	escape as ldEscape,
	unescape as ldUnescape,
	merge,
	} from 'lodash-es'
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
	import { suggest } from 'src/components/emoji_input/suggestor.js'
	import FollowButton from 'src/components/follow_button/follow_button.vue'
	import ProgressButton from 'src/components/progress_button/progress_button.vue'
	import Select from 'src/components/select/select.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserLink from 'src/components/user_link/user_link.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'
	import { useMediaViewerStore } from 'src/stores/media_viewer'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { usePostStatusStore } from 'src/stores/post_status'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'
	import { useUsersStore } from 'src/stores/users.js'

	+import { serverUrl } from 'src/api/api_base.js'
	import { updateProfile } from 'src/api/user.js'
	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,
	)

	const KNOWN_TAGS = new Set([
	'mrf_tag:media-force-nsfw',
	'mrf_tag:media-strip',
	'mrf_tag:force-unlisted',
	'mrf_tag:sandbox',
	'mrf_tag:disable-remote-subscription',
	'mrf_tag:disable-any-subscription',
	])

	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,
	},
	// Hide action buttons
	hideButtons: {
	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,
	},
	// Disable forced 3:1 aspect ratio
	compact: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	components: {
	DialogModal: defineAsyncComponent(
	() => import('src/components/dialog_modal/dialog_modal.vue'),
	),
	UserAvatar,
	Checkbox,
	RemoteFollow: defineAsyncComponent(
	() => import('src/components/remote_follow/remote_follow.vue'),
	),
	ModerationTools: defineAsyncComponent(
	() => import('src/components/moderation_tools/moderation_tools.vue'),
	),
	AccountActions: defineAsyncComponent(
	() => import('src/components/account_actions/account_actions.vue'),
	),
	ProgressButton,
	FollowButton,
	Select,
	UserLink,
	UserNote: defineAsyncComponent(
	() => import('src/components/user_note/user_note.vue'),
	),
	UserTimedFilterModal: defineAsyncComponent(
	() =>
	import(
	'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
	),
	),
	ColorInput,
	EmojiInput,
	ImageCropper: defineAsyncComponent(
	() => import('src/components/image_cropper/image_cropper.vue'),
	),
	},
	data() {
	const user = useUsersStore().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() {
	useUsersStore().fetchUserRelationship(this.user.id)
	},
	computed: {
	escapedNewBio() {
	return ldEscape(this.newBio).replaceAll('\n', '<br>')
	},
	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 useUsersStore().findUser(this.userId)
	},
	role() {
	return this.user.role
	},
	relationship() {
	return useUsersStore().relationship(this.userId)
	},
	isOtherUser() {
	return this.user.id !== useUsersStore().currentUser?.id
	},
	subscribeUrl() {
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn() {
	return useUsersStore().currentUser
	},
	dailyAvg() {
	const days = Math.ceil(
	(Date.now() - 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() {
	return useUserHighlightStore().get(this.user.screen_name).type
	},
	set(type) {
	if (type !== 'disabled') {
	useUserHighlightStore().setAndSave({
	user: this.user.screen_name,
	value: { type },
	})
	} else {
	useUserHighlightStore().unsetAndSave({ user: this.user.screen_name })
	}
	},
	},
	userHighlightColor: {
	get() {
	return useUserHighlightStore().get(this.user.screen_name).color
	},
	set(color) {
	useUserHighlightStore().setAndSave({
	user: this.user.screen_name,
	value: { color },
	})
	},
	},
	visibleRole() {
	if (!this.user.show_role && !this.user.adminData) {
	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.has('users_manage_activation_state') \|\|
	privileges.has('users_delete') \|\|
	privileges.has('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' },
	)
	)
	},
	formattedJoinDate() {
	const browserLocale = localeService.internalToBrowserLocale(
	this.$i18n.locale,
	)
	return (
	this.user.created_at &&
	new Date(Date.parse(this.user.created_at)).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
	},
	+ // the instance's files (hosted: a full URL on it already)
	defaultAvatar() {
	- return (
	- useInstanceStore().server +
	- useInstanceStore().instanceIdentity.defaultAvatar
	+ return serverUrl(
	+ useInstanceStore().server,
	+ useInstanceStore().instanceIdentity.defaultAvatar,
	)
	},
	defaultBanner() {
	- return (
	- useInstanceStore().server +
	- useInstanceStore().instanceIdentity.defaultBanner
	+ return serverUrl(
	+ useInstanceStore().server,
	+ useInstanceStore().instanceIdentity.defaultBanner,
	)
	},
	isDefaultAvatar() {
	const baseAvatar = useInstanceStore().instanceIdenitity.defaultAvatar
	return (
	!useUsersStore().currentUser.profile_image_url \|\|
	useUsersStore().currentUser.profile_image_url.includes(baseAvatar)
	)
	},
	isDefaultBanner() {
	const baseBanner = useInstanceStore().instanceIdentity.defaultBanner
	return (
	!useUsersStore().currentUser.cover_photo \|\|
	useUsersStore().currentUser.cover_photo.includes(baseBanner)
	)
	},
	fieldsLimits() {
	return useInstanceStore().limits.fieldsLimits
	},
	maxFields() {
	return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
	},
	emojiUserSuggestor() {
	return suggest({
	emoji: [
	...useEmojiStore().standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	})
	},
	emojiSuggestor() {
	return suggest({
	emoji: [
	...useEmojiStore().standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	})
	},
	allowNonSquareEmoji() {
	return this.mergedConfig.nonSquareEmoji
	},
	pauseMfm() {
	return this.mergedConfig.pauseMfm
	},
	scaleMfm() {
	return this.mergedConfig.scaleMfm
	},
	hideUserStats() {
	return this.mergedConfig.hideUserStats
	},
	hideRemarks() {
	return this.mergedConfig.userCardHidePersonalMarks
	},
	...mapState(useMergedConfigStore, ['mergedConfig']),
	},
	methods: {
	isKnownTag(tag) {
	return KNOWN_TAGS.has(tag)
	},
	muteUser() {
	this.$refs.timedMuteDialog.optionallyPrompt()
	},
	unmuteUser() {
	return useUsersStore().unmuteUser(this.user.id)
	},
	subscribeUser() {
	return useUsersStore().subscribeUser(this.user.id)
	},
	unsubscribeUser() {
	return useUsersStore().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,
	type: 'image',
	}
	useMediaViewerStore().setMedia([attachment])
	useMediaViewerStore().setCurrentMedia(attachment)
	},
	mentionUser() {
	usePostStatusStore().openPostStatusModal({
	profileMention: 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 = useUsersStore().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
	}

	updateProfile({ params })
	.then(({ data: user, ...rest }) => {
	this.newFields.splice(this.newFields.length)
	merge(this.newFields, user.fields)
	useUsersStore().addNewUsers({ data: user, ...rest })
	this.resetState()
	})
	.catch((error) => {
	this.displayUploadError(error)
	})
	},
	displayUploadError(error) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'upload.error.message',
	messageArgs: [error.message],
	level: 'error',
	})
	},
	},
	}
	diff --git a/src/stores/emoji.js b/src/stores/emoji.js
	index b893198d78..bdcd145041 100644
	--- a/src/stores/emoji.js
	+++ b/src/stores/emoji.js
	@@ -1,318 +1,319 @@
	import { merge } from 'lodash-es'
	import { defineStore } from 'pinia'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useUsersStore } from 'src/stores/users.js'

	+import { apiUrl } from 'src/api/api_base.js'
	import { listEmojiPacks } from 'src/api/public.js'
	import { ensureFinalFallback } from 'src/i18n/languages.js'

	import { annotationsLoader } from 'virtual:pleroma-fe/emoji-annotations'

	const defaultState = {
	// Custom emoji from server
	customEmoji: [],
	customEmojiFetched: false,
	adminPacksLocal: null,
	adminPacksLocalLoading: true,

	// Unicode emoji from bundle
	emoji: {},
	emojiFetched: false,
	unicodeEmojiAnnotations: {},

	// Stickers
	stickers: null,
	}

	const SORTED_EMOJI_GROUP_IDS = [
	'smileys-and-emotion',
	'people-and-body',
	'animals-and-nature',
	'food-and-drink',
	'travel-and-places',
	'activities',
	'objects',
	'symbols',
	'flags',
	]

	const REGIONAL_INDICATORS = (() => {
	const start = 0x1f1e6
	const end = 0x1f1ff
	const A = 'A'.codePointAt(0)
	const res = new Array(end - start + 1)
	for (let i = start; i <= end; ++i) {
	const letter = String.fromCodePoint(A + i - start)
	res[i - start] = {
	replacement: String.fromCodePoint(i),
	imageUrl: false,
	displayText: 'regional_indicator_' + letter,
	displayTextI18n: {
	key: 'emoji.regional_indicator',
	args: { letter },
	},
	}
	}
	return res
	})()

	const loadAnnotations = (lang) => {
	return annotationsLoader[lang]().then((k) => k.default)
	}

	const injectAnnotations = (emoji, annotations) => {
	const availableLangs = Object.keys(annotations)

	return {
	...emoji,
	annotations: availableLangs.reduce((acc, cur) => {
	acc[cur] = annotations[cur][emoji.replacement]
	return acc
	}, {}),
	}
	}

	const injectRegionalIndicators = (groups) => {
	groups.symbols.push(...REGIONAL_INDICATORS)
	return groups
	}

	export const useEmojiStore = defineStore('emoji', {
	state: () => ({ ...defaultState }),
	getters: {
	groupedCustomEmojis(state) {
	const packsOf = (emoji) => {
	const packs = emoji.tags
	.filter((k) => k.startsWith('pack:'))
	.map((k) => {
	const packName = k.slice(5) // remove 'pack:' prefix
	return {
	id: `custom-${packName}`,
	text: packName,
	}
	})

	if (!packs.length) {
	return [
	{
	id: 'unpacked',
	},
	]
	} else {
	return packs
	}
	}

	return this.customEmoji.reduce((res, emoji) => {
	packsOf(emoji).forEach(({ id: packId, text: packName }) => {
	if (!res[packId]) {
	res[packId] = {
	id: packId,
	text: packName,
	image: emoji.imageUrl,
	emojis: [],
	}
	}
	res[packId].emojis.push(emoji)
	})
	return res
	}, {})
	},
	standardEmojiList(state) {
	return SORTED_EMOJI_GROUP_IDS.map((groupId) =>
	(this.emoji[groupId] \|\| []).map((k) =>
	injectAnnotations(k, this.unicodeEmojiAnnotations),
	),
	).flat()
	},
	standardEmojiGroupList(state) {
	return SORTED_EMOJI_GROUP_IDS.map((groupId) => ({
	id: groupId,
	emojis: (this.emoji[groupId] \|\| []).map((k) =>
	injectAnnotations(k, this.unicodeEmojiAnnotations),
	),
	}))
	},
	},
	actions: {
	setStickers(stickers) {
	this.stickers = stickers
	},
	async getStaticEmoji() {
	try {
	// See build/emojis_plugin for more details
	const values = (await import('src/assets/emoji.json')).default

	const emoji = Object.keys(values).reduce((res, groupId) => {
	res[groupId] = values[groupId].map((e) => ({
	displayText: e.slug,
	imageUrl: false,
	replacement: e.emoji,
	}))
	return res
	}, {})
	this.emoji = injectRegionalIndicators(emoji)
	} catch (e) {
	console.warn("Can't load static emoji\n", e)
	}
	},

	loadUnicodeEmojiData(language) {
	const langList = ensureFinalFallback(language)

	return Promise.all(
	langList.map(async (lang) => {
	if (!this.unicodeEmojiAnnotations[lang]) {
	try {
	const annotations = await loadAnnotations(lang)
	this.unicodeEmojiAnnotations[lang] = annotations
	} catch (e) {
	console.warn(
	`Error loading unicode emoji annotations for ${lang}: `,
	e,
	)
	// ignore
	}
	}
	}),
	)
	},

	async getAdminPacksLocal(refresh) {
	if (!refresh && this.adminPacksLocal) return this.adminPacksLocal
	this.adminPacksLocalLoading = true
	this.adminPacksLocal = await this.getAdminPacks(
	useInstanceStore().server,
	(params) =>
	listEmojiPacks({
	...params,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data),
	)
	this.adminPacksLocalLoading = false
	},

	async getAdminPacks(instance, listFunction) {
	const currentUser = useUsersStore().currentUser

	if (!currentUser.rights.admin) return

	const pageSize = 25

	return await listFunction({
	instance,
	page: 1,
	pageSize: 0,
	})
	.then((data) => {
	const promises = []

	for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
	promises.push(
	listFunction({
	instance,
	page: i,
	pageSize,
	}).then((pageData) => {
	return pageData.packs
	}),
	)
	}

	return Promise.all(promises).then((results) => {
	return merge({}, ...results)
	})
	})
	.then((allPacks) => {
	// Sort by key
	return Object.keys(allPacks)
	.sort((a, b) => a.localeCompare(b))
	.reduce((acc, key) => {
	if (key.length === 0) return acc
	acc[key] = allPacks[key]
	return acc
	}, {})
	})
	.catch((data) => {
	console.error(data)
	})
	},

	async getCustomEmoji() {
	try {
	- let res = await window.fetch('/api/v1/pleroma/emoji')
	+ let res = await window.fetch(apiUrl('/api/v1/pleroma/emoji'))
	if (!res.ok) {
	- res = await window.fetch('/api/pleroma/emoji.json')
	+ res = await window.fetch(apiUrl('/api/pleroma/emoji.json'))
	}
	if (res.ok) {
	const result = await res.json()
	const values = Array.isArray(result)
	? Object.assign({}, ...result)
	: result
	const caseInsensitiveStrCmp = (a, b) => {
	const la = a.toLowerCase()
	const lb = b.toLowerCase()
	return la > lb ? 1 : la < lb ? -1 : 0
	}
	const noPackLast = (a, b) => {
	const aNull = a === ''
	const bNull = b === ''
	if (aNull === bNull) {
	return 0
	} else if (aNull && !bNull) {
	return 1
	} else {
	return -1
	}
	}
	const byPackThenByName = (a, b) => {
	const packOf = (emoji) =>
	(emoji.tags.filter((k) => k.startsWith('pack:'))[0] \|\| '').slice(
	5,
	)
	const packOfA = packOf(a)
	const packOfB = packOf(b)
	return (
	noPackLast(packOfA, packOfB) \|\|
	caseInsensitiveStrCmp(packOfA, packOfB) \|\|
	caseInsensitiveStrCmp(a.displayText, b.displayText)
	)
	}

	const emoji = Object.entries(values)
	.map(([key, value]) => {
	const imageUrl = value.image_url
	return {
	displayText: key,
	imageUrl: imageUrl
	? useInstanceStore().server + imageUrl
	: value,
	tags: imageUrl
	? value.tags.sort((a, b) => (a > b ? 1 : 0))
	: ['utf'],
	replacement: `:${key}: `,
	}
	// Technically could use tags but those are kinda useless right now,
	// should have been "pack" field, that would be more useful
	})
	.sort(byPackThenByName)
	this.customEmoji = emoji
	} else {
	throw res
	}
	} catch (e) {
	console.warn("Can't load custom emojis\n", e)
	}
	},
	fetchEmoji() {
	if (!this.customEmojiFetched) {
	this.getCustomEmoji().then(() => (this.customEmojiFetched = true))
	}
	if (!this.emojiFetched) {
	this.getStaticEmoji().then(() => (this.emojiFetched = true))
	}
	},
	},
	})
	diff --git a/test/unit/specs/api/api_base.spec.js b/test/unit/specs/api/api_base.spec.js
	new file mode 100644
	index 0000000000..3e5a6ffcd1
	--- /dev/null
	+++ b/test/unit/specs/api/api_base.spec.js
	@@ -0,0 +1,72 @@
	+import {
	+ apiUrl,
	+ serverUrl,
	+ setApiBase,
	+ streamingUrl,
	+} from 'src/api/api_base.js'
	+import { promisedRequest } from 'src/api/helpers.js'
	+
	+describe('API base', () => {
	+ afterEach(() => {
	+ setApiBase(null)
	+ vi.unstubAllGlobals()
	+ })
	+
	+ it('leaves paths alone when the page is the instance', () => {
	+ expect(apiUrl('/api/v1/instance')).to.equal('/api/v1/instance')
	+ })
	+
	+ it('puts the chosen instance in front of paths', () => {
	+ setApiBase('https://pleroma.example/')
	+ expect(apiUrl('/api/v1/instance')).to.equal(
	+ 'https://pleroma.example/api/v1/instance',
	+ )
	+ })
	+
	+ it('leaves full URLs alone', () => {
	+ setApiBase('https://pleroma.example')
	+ expect(apiUrl('https://media.example/a.png')).to.equal(
	+ 'https://media.example/a.png',
	+ )
	+ })
	+
	+ it('builds the streaming URL on the instance', () => {
	+ // absolute also on the instance itself: WebSocket takes relative URLs
	+ // only in recent browsers (Chrome 125, Firefox 124, Safari 17.3)
	+ const ws = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
	+ expect(streamingUrl('/api/v1/streaming?x=1')).to.equal(
	+ `${ws}//${window.location.host}/api/v1/streaming?x=1`,
	+ )
	+ setApiBase('https://pleroma.example')
	+ expect(streamingUrl('/api/v1/streaming?x=1')).to.equal(
	+ 'wss://pleroma.example/api/v1/streaming?x=1',
	+ )
	+ setApiBase('http://localhost:4000')
	+ expect(streamingUrl('/socket')).to.equal('ws://localhost:4000/socket')
	+ })
	+
	+ it('sends every API request to the instance', async () => {
	+ const fetch = vi
	+ .fn()
	+ .mockResolvedValue(
	+ new Response('{}', { headers: { 'Content-Type': 'application/json' } }),
	+ )
	+ vi.stubGlobal('fetch', fetch)
	+ setApiBase('https://pleroma.example')
	+ await promisedRequest({ url: '/api/v1/timelines/home' })
	+ expect(fetch.mock.calls[0][0]).to.equal(
	+ 'https://pleroma.example/api/v1/timelines/home',
	+ )
	+ })
	+})
	+
	+describe('instance asset URLs', () => {
	+ it('puts the server in front of a path, leaves full URLs alone', () => {
	+ expect(serverUrl('https://pleroma.example', '/images/avi.png')).to.equal(
	+ 'https://pleroma.example/images/avi.png',
	+ )
	+ expect(
	+ serverUrl('https://pleroma.example', 'https://cdn.example/a.png'),
	+ ).to.equal('https://cdn.example/a.png')
	+ })
	+})

File Metadata

Mime Type: text/x-diff
Expires: Mon, Oct 12, 2:37 PM (1 d, 14 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1786325
Default Alt Text: (41 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions