No OneTemporary
Actions

Size

32 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
	index 6e14b24d74..deffe22cd8 100644
	--- a/src/components/attachment/attachment.js
	+++ b/src/components/attachment/attachment.js
	@@ -1,211 +1,212 @@
	import StillImage from '../still-image/still-image.vue'
	import Flash from '../flash/flash.vue'
	import VideoAttachment from '../video_attachment/video_attachment.vue'
	import nsfwImage from '../../assets/nsfw.png'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import { mapGetters } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faFile,
	faMusic,
	faImage,
	faVideo,
	faPlayCircle,
	faTimes,
	faStop,
	faSearchPlus,
	faTrashAlt,
	faPencilAlt,
	faAlignRight
	} from '@fortawesome/free-solid-svg-icons'
	+import { useMediaViewerStore } from '../../stores/media_viewer'

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

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

	export default Attachment
	diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
	index e86a3eeaf3..ab1adcf2f1 100644
	--- a/src/components/gallery/gallery.js
	+++ b/src/components/gallery/gallery.js
	@@ -1,119 +1,120 @@
	+import { useMediaViewerStore } from '../../stores/media_viewer'
	import Attachment from '../attachment/attachment.vue'
	import { sumBy, set } from 'lodash'

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

	export default Gallery
	diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
	index 05ef9fbe16..1c19afcad1 100644
	--- a/src/components/media_modal/media_modal.js
	+++ b/src/components/media_modal/media_modal.js
	@@ -1,157 +1,158 @@
	import StillImage from '../still-image/still-image.vue'
	import VideoAttachment from '../video_attachment/video_attachment.vue'
	import Modal from '../modal/modal.vue'
	import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
	import SwipeClick from '../swipe_click/swipe_click.vue'
	import GestureService from '../../services/gesture_service/gesture_service'
	import Flash from 'src/components/flash/flash.vue'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faChevronLeft,
	faChevronRight,
	faCircleNotch,
	faTimes
	} from '@fortawesome/free-solid-svg-icons'
	+import { useMediaViewerStore } from '../../stores/media_viewer'

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

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

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

	export default MediaModal
	diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
	index 89f0aa517d..af62f9e147 100644
	--- a/src/components/status_content/status_content.js
	+++ b/src/components/status_content/status_content.js
	@@ -1,131 +1,132 @@
	import Attachment from '../attachment/attachment.vue'
	import Poll from '../poll/poll.vue'
	import Gallery from '../gallery/gallery.vue'
	import StatusBody from 'src/components/status_body/status_body.vue'
	import LinkPreview from '../link-preview/link-preview.vue'
	import { mapGetters, mapState } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCircleNotch,
	faFile,
	faMusic,
	faImage,
	faLink,
	faPollH
	} from '@fortawesome/free-solid-svg-icons'
	+import { useMediaViewerStore } from '../../stores/media_viewer'

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

	const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)

	const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
	const camelized = camelCase(name)
	const toggle = `controlledToggle${camelized}`
	const controlledName = `controlled${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	res[name] = function () {
	return ((this.$data[toggle] !== undefined \|\| this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
	}
	return res
	}, {})

	const controlledOrUncontrolledToggle = (obj, name) => {
	const camelized = camelCase(name)
	const toggle = `controlledToggle${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	if (obj[toggle]) {
	obj[toggle]()
	} else {
	obj[uncontrolledName] = !obj[uncontrolledName]
	}
	}

	const StatusContent = {
	name: 'StatusContent',
	props: [
	'status',
	'compact',
	'focused',
	'noHeading',
	'fullContent',
	'singleLine',
	'controlledShowingTall',
	'controlledExpandingSubject',
	'controlledToggleShowingTall',
	'controlledToggleExpandingSubject',
	'controlledShowingLongSubject',
	'controlledToggleShowingLongSubject'
	],
	data () {
	return {
	uncontrolledShowingTall: this.fullContent \|\| (this.inConversation && this.focused),
	uncontrolledShowingLongSubject: false,
	// not as computed because it sets the initial state which will be changed later
	uncontrolledExpandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
	}
	},
	computed: {
	...controlledOrUncontrolledGetters(['showingTall', 'expandingSubject', 'showingLongSubject']),
	hideAttachments () {
	return (this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation)
	},
	nsfwClickthrough () {
	if (!this.status.nsfw) {
	return false
	}
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	return true
	},
	attachmentSize () {
	if (this.compact) {
	return 'small'
	} else if ((this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation) \|\|
	(this.status.attachments.length > this.maxThumbnails)) {
	return 'hide'
	}
	return 'normal'
	},
	maxThumbnails () {
	return this.mergedConfig.maxThumbnails
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	currentUser: state => state.users.currentUser
	})
	},
	components: {
	Attachment,
	Poll,
	Gallery,
	LinkPreview,
	StatusBody
	},
	methods: {
	toggleShowingTall () {
	controlledOrUncontrolledToggle(this, 'showingTall')
	},
	toggleExpandingSubject () {
	controlledOrUncontrolledToggle(this, 'expandingSubject')
	},
	toggleShowingLongSubject () {
	controlledOrUncontrolledToggle(this, 'showingLongSubject')
	},
	setMedia () {
	const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
	- return () => this.$store.dispatch('setMedia', attachments)
	+ return () => useMediaViewerStore().setMedia(attachments)
	}
	}
	}

	export default StatusContent
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index ccbe9ce711..c2db910403 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,238 +1,239 @@
	import { unitToSeconds } from 'src/services/date_utils/date_utils.js'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import FollowButton from '../follow_button/follow_button.vue'
	import ModerationTools from '../moderation_tools/moderation_tools.vue'
	import AccountActions from '../account_actions/account_actions.vue'
	import UserNote from '../user_note/user_note.vue'
	import Select from '../select/select.vue'
	import UserLink from '../user_link/user_link.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { mapGetters } from 'vuex'
	import { usePostStatusStore } from '../../stores/postStatus'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faRss,
	faSearchPlus,
	faExternalLinkAlt,
	faEdit,
	faTimes,
	faExpandAlt
	} from '@fortawesome/free-solid-svg-icons'
	+import { useMediaViewerStore } from '../../stores/media_viewer'

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

	export default {
	props: [
	'userId',
	'switcher',
	'selected',
	'hideBio',
	'rounded',
	'bordered',
	'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
	'onClose',
	'hasNoteEditor'
	],
	data () {
	return {
	followRequestInProgress: false,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter,
	showingConfirmMute: false,
	muteExpiryAmount: 0,
	muteExpiryUnit: 'minutes'
	}
	},
	created () {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	user () {
	return this.$store.getters.findUser(this.userId)
	},
	relationship () {
	return this.$store.getters.relationship(this.userId)
	},
	classes () {
	return [{
	'-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
	'-rounded': this.rounded === true, // set border-radius for all sides
	'-bordered': this.bordered === true, // set border for all sides
	'-popover': !!this.onClose // set popover rounding
	}]
	},
	style () {
	return {
	backgroundImage: [
	'linear-gradient(to bottom, var(--profileTint), var(--profileTint))',
	`url(${this.user.cover_photo})`
	].join(', ')
	}
	},
	isOtherUser () {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl () {
	// eslint-disable-next-line no-undef
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn () {
	return this.$store.state.users.currentUser
	},
	dailyAvg () {
	const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
	return Math.round(this.user.statuses_count / days)
	},
	userHighlightType: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return (data && data.type) \|\| 'disabled'
	},
	set (type) {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	if (type !== 'disabled') {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) \|\| '#FFFFFF', type })
	} else {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
	}
	},
	...mapGetters(['mergedConfig'])
	},
	userHighlightColor: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return data && data.color
	},
	set (color) {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
	}
	},
	visibleRole () {
	const rights = this.user.rights
	if (!rights) { return }
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	},
	hideFollowsCount () {
	return this.isOtherUser && this.user.hide_follows_count
	},
	hideFollowersCount () {
	return this.isOtherUser && this.user.hide_followers_count
	},
	showModerationMenu () {
	const privileges = this.loggedIn.privileges
	return this.loggedIn.role === 'admin' \|\| privileges.includes('users_manage_activation_state') \|\| privileges.includes('users_delete') \|\| privileges.includes('users_manage_tags')
	},
	hasNote () {
	return this.relationship.note
	},
	supportsNote () {
	return 'note' in this.relationship
	},
	shouldConfirmMute () {
	return this.mergedConfig.modalOnMute
	},
	muteExpiryUnits () {
	return ['minutes', 'hours', 'days']
	},
	...mapGetters(['mergedConfig'])
	},
	components: {
	UserAvatar,
	RemoteFollow,
	ModerationTools,
	AccountActions,
	ProgressButton,
	FollowButton,
	Select,
	RichContent,
	UserLink,
	UserNote,
	ConfirmModal
	},
	methods: {
	showConfirmMute () {
	this.showingConfirmMute = true
	},
	hideConfirmMute () {
	this.showingConfirmMute = false
	},
	muteUser () {
	if (!this.shouldConfirmMute) {
	this.doMuteUser()
	} else {
	this.showConfirmMute()
	}
	},
	doMuteUser () {
	this.$store.dispatch('muteUser', {
	id: this.user.id,
	expiresIn: this.shouldConfirmMute ? unitToSeconds(this.muteExpiryUnit, this.muteExpiryAmount) : 0
	})
	this.hideConfirmMute()
	},
	unmuteUser () {
	this.$store.dispatch('unmuteUser', this.user.id)
	},
	subscribeUser () {
	return this.$store.dispatch('subscribeUser', this.user.id)
	},
	unsubscribeUser () {
	return this.$store.dispatch('unsubscribeUser', this.user.id)
	},
	setProfileView (v) {
	if (this.switcher) {
	const store = this.$store
	store.commit('setProfileView', { v })
	}
	},
	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,
	this.$store.state.instance.restrictedNicknames
	)
	},
	openProfileTab () {
	this.$store.dispatch('openSettingsModalTab', 'profile')
	},
	zoomAvatar () {
	const attachment = {
	url: this.user.profile_image_url_original,
	mimetype: 'image'
	}
	- this.$store.dispatch('setMedia', [attachment])
	- this.$store.dispatch('setCurrentMedia', attachment)
	+ useMediaViewerStore().setMedia([attachment])
	+ useMediaViewerStore().setCurrentMedia(attachment)
	},
	mentionUser () {
	usePostStatusStore().openPostStatusModal({ replyTo: true, repliedUser: this.user })
	},
	onAvatarClickHandler (e) {
	if (this.onAvatarClick) {
	e.preventDefault()
	this.onAvatarClick()
	}
	}
	}
	}
	diff --git a/src/main.js b/src/main.js
	index 622c9a71fe..503467c4a9 100644
	--- a/src/main.js
	+++ b/src/main.js
	@@ -1,106 +1,104 @@
	import { createStore } from 'vuex'
	import { createPinia } from 'pinia'

	import 'custom-event-polyfill'
	import './lib/event_target_polyfill.js'

	import interfaceModule from './modules/interface.js'
	import instanceModule from './modules/instance.js'
	import statusesModule from './modules/statuses.js'
	import listsModule from './modules/lists.js'
	import usersModule from './modules/users.js'
	import apiModule from './modules/api.js'
	import configModule from './modules/config.js'
	import serverSideConfigModule from './modules/serverSideConfig.js'
	import serverSideStorageModule from './modules/serverSideStorage.js'
	import oauthModule from './modules/oauth.js'
	import authFlowModule from './modules/auth_flow.js'
	-import mediaViewerModule from './modules/media_viewer.js'
	import oauthTokensModule from './modules/oauth_tokens.js'
	import reportsModule from './modules/reports.js'
	import pollsModule from './modules/polls.js'
	import statusHistoryModule from './modules/statusHistory.js'

	import chatsModule from './modules/chats.js'
	import announcementsModule from './modules/announcements.js'

	import { createI18n } from 'vue-i18n'

	import createPersistedState from './lib/persisted_state.js'
	import pushNotifications from './lib/push_notifications_plugin.js'

	import messages from './i18n/messages.js'

	import afterStoreSetup from './boot/after_store.js'

	const currentLocale = (window.navigator.language \|\| 'en').split('-')[0]

	const i18n = createI18n({
	// By default, use the browser locale, we will update it if neccessary
	locale: 'en',
	fallbackLocale: 'en',
	messages: messages.default
	})

	messages.setLanguage(i18n, currentLocale)

	const persistedStateOptions = {
	paths: [
	'serverSideStorage.cache',
	'config',
	'users.lastLoginName',
	'oauth'
	]
	};

	(async () => {
	let storageError = false
	const plugins = [pushNotifications]
	const pinia = createPinia()
	try {
	const persistedState = await createPersistedState(persistedStateOptions)
	plugins.push(persistedState)
	} catch (e) {
	console.error(e)
	storageError = true
	}
	const store = createStore({
	modules: {
	interface: interfaceModule,
	instance: instanceModule,
	// TODO refactor users/statuses modules, they depend on each other
	users: usersModule,
	statuses: statusesModule,
	lists: listsModule,
	api: apiModule,
	config: configModule,
	serverSideConfig: serverSideConfigModule,
	serverSideStorage: serverSideStorageModule,
	oauth: oauthModule,
	authFlow: authFlowModule,
	- mediaViewer: mediaViewerModule,
	oauthTokens: oauthTokensModule,
	reports: reportsModule,
	polls: pollsModule,
	statusHistory: statusHistoryModule,
	chats: chatsModule,
	announcements: announcementsModule
	},
	plugins,
	strict: false // Socket modifies itself, let's ignore this for now.
	// strict: process.env.NODE_ENV !== 'production'
	})

	if (storageError) {
	store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
	}

	// Temporarily passing both vuex and pinia stores until migration is fully complete.
	afterStoreSetup({ pinia, store, i18n })
	})()

	// These are inlined by webpack's DefinePlugin
	/* eslint-disable */
	window.___pleromafe_mode = process.env
	window.___pleromafe_commit_hash = COMMIT_HASH
	window.___pleromafe_dev_overrides = DEV_OVERRIDES
	diff --git a/src/modules/media_viewer.js b/src/modules/media_viewer.js
	deleted file mode 100644
	index ebcba01d4c..0000000000
	--- a/src/modules/media_viewer.js
	+++ /dev/null
	@@ -1,40 +0,0 @@
	-import fileTypeService from '../services/file_type/file_type.service.js'
	-const supportedTypes = new Set(['image', 'video', 'audio', 'flash'])
	-
	-const mediaViewer = {
	- state: {
	- media: [],
	- currentIndex: 0,
	- activated: false
	- },
	- mutations: {
	- setMedia (state, media) {
	- state.media = media
	- },
	- setCurrentMedia (state, index) {
	- state.activated = true
	- state.currentIndex = index
	- },
	- close (state) {
	- state.activated = false
	- }
	- },
	- actions: {
	- setMedia ({ commit }, attachments) {
	- const media = attachments.filter(attachment => {
	- const type = fileTypeService.fileType(attachment.mimetype)
	- return supportedTypes.has(type)
	- })
	- commit('setMedia', media)
	- },
	- setCurrentMedia ({ commit, state }, current) {
	- const index = state.media.indexOf(current)
	- commit('setCurrentMedia', index \|\| 0)
	- },
	- closeMediaViewer ({ commit }) {
	- commit('close')
	- }
	- }
	-}
	-
	-export default mediaViewer
	diff --git a/src/stores/media_viewer.js b/src/stores/media_viewer.js
	new file mode 100644
	index 0000000000..0e0e18289b
	--- /dev/null
	+++ b/src/stores/media_viewer.js
	@@ -0,0 +1,30 @@
	+import { defineStore } from 'pinia'
	+import fileTypeService from '../services/file_type/file_type.service.js'
	+
	+const supportedTypes = new Set(['image', 'video', 'audio', 'flash'])
	+
	+export const useMediaViewerStore = defineStore('mediaViewer', {
	+ state: () => ({
	+ media: [],
	+ currentIndex: 0,
	+ activated: false
	+ }),
	+ actions: {
	+ setMedia (attachments) {
	+ const media = attachments.filter(attachment => {
	+ const type = fileTypeService.fileType(attachment.mimetype)
	+ return supportedTypes.has(type)
	+ })
	+
	+ this.media = media
	+ },
	+ setCurrentMedia (current) {
	+ const index = this.media.indexOf(current)
	+ this.activated = true
	+ this.currentIndex = index
	+ },
	+ closeMediaViewer () {
	+ this.activated = false
	+ }
	+ }
	+})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Oct 10, 12:42 PM (1 d, 8 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1785195
Default Alt Text: (32 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions