No OneTemporary
Actions

Size

46 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
	index e663ba157e..0abb7abd23 100644
	--- a/src/components/conversation/conversation.js
	+++ b/src/components/conversation/conversation.js
	@@ -1,242 +1,333 @@
	import { reduce, filter, findIndex, clone, get } from 'lodash'
	import Status from '../status/status.vue'
	import ThreadTree from '../thread_tree/thread_tree.vue'

	const debug = console.log

	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
	+ expanded: false,
	+ threadDisplayStatusObject: {} // id => 'showing' \| 'hidden'
	}
	},
	props: [
	'statusId',
	'collapsable',
	'isPage',
	'pinnedStatusIdsObject',
	'inProfile',
	'profileUserId',
	'virtualHidden'
	],
	created () {
	if (this.isPage) {
	this.fetchConversation()
	}
	},
	computed: {
	+ maxDepthToShowByDefault () {
	+ return 4
	+ },
	displayStyle () {
	return this.$store.state.config.conversationDisplay
	},
	isTreeView () {
	return this.displayStyle === 'tree'
	},
	isLinearView () {
	return this.displayStyle === 'linear'
	},
	hideStatus () {
	if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
	return this.virtualHidden && this.$refs.statusComponent[0].suspendable
	} else {
	return this.virtualHidden
	}
	},
	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)
	},
	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)
	- .sort((a, b) => reverseLookupTable[a] - reverseLookupTable[b])

	- a.topLevel = a.topLevel.filter(k => a.forest[id].contains(k))
	return a
	}, {
	forest: {},
	- topLevel: this.conversation.map(s => s.id)
	})

	+ debug('threads = ', threads)
	+
	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[child], depth + 1, processed)].reduce((a, b) => a.concat(b), [])
	+ }, walk(forest, forest[id], depth + 1, processed)].reduce((a, b) => a.concat(b), [])
	}).reduce((a, b) => a.concat(b), [])

	- const linearized = walk(threads.forest, threads.topLevel)
	+ 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 () {
	+ debug('replyIds=', this.replyIds)
	+ 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)
	+ debug('totalReplyCount=', sizes)
	+ 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 () {
	+ debug('threadTree', this.threadTree)
	+ 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)
	debug("toplevel =", topLevel)
	- debug("toplevel =", topLevel)
	return topLevel
	},
	replies () {
	let i = 1
	// eslint-disable-next-line camelcase
	return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => {
	/* eslint-disable camelcase */
	const irid = in_reply_to_status_id
	/* eslint-enable camelcase */
	if (irid) {
	result[irid] = result[irid] \|\| []
	result[irid].push({
	name: `#${i}`,
	id: 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.maxDepthToShowByDefault) {
	+ return 'showing'
	+ } else {
	+ return 'hidden'
	+ }
	+ })()
	+
	+ a[id] = status
	+ return a
	+ }, {})
	}
	},
	components: {
	Status,
	ThreadTree
	},
	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()
	}
	},
	virtualHidden (value) {
	this.$store.dispatch(
	'setVirtualHeight',
	{ statusId: this.statusId, height: `${this.$el.clientHeight}px` }
	)
	}
	},
	methods: {
	fetchConversation () {
	if (this.status) {
	this.$store.state.api.backendInteractor.fetchConversation({ id: this.statusId })
	.then(({ ancestors, descendants }) => {
	this.$store.dispatch('addNewStatuses', { statuses: ancestors })
	this.$store.dispatch('addNewStatuses', { statuses: descendants })
	this.setHighlight(this.originalStatusId)
	})
	} else {
	this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
	.then((status) => {
	this.$store.dispatch('addNewStatuses', { statuses: [status] })
	this.fetchConversation()
	})
	}
	},
	getReplies (id) {
	return this.replies[id] \|\| []
	},
	focused (id) {
	return (this.isExpanded) && id === this.statusId
	},
	setHighlight (id) {
	if (!id) return
	this.highlight = id
	this.$store.dispatch('fetchFavsAndRepeats', id)
	this.$store.dispatch('fetchEmojiReactionsBy', id)
	},
	getHighlight () {
	return this.isExpanded ? this.highlight : null
	},
	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 depth = this.depths[id]
	+ debug('depth = ', depth)
	+ debug(
	+ 'threadDisplayStatus = ', this.threadDisplayStatus,
	+ 'threadDisplayStatusObject = ', this.threadDisplayStatusObject)
	+ const curStatus = this.threadDisplayStatus[id]
	+ const nextStatus = curStatus === 'showing' ? 'hidden' : 'showing'
	+ debug('toggling', id, 'to', nextStatus)
	+ 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')
	}
	}
	}

	export default conversation
	diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
	index cea5f88f08..783cc8941c 100644
	--- a/src/components/conversation/conversation.vue
	+++ b/src/components/conversation/conversation.vue
	@@ -1,90 +1,97 @@
	<template>
	<div
	v-if="!hideStatus"
	:style="hiddenStyle"
	class="Conversation"
	:class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
	>
	<div
	v-if="isExpanded"
	class="panel-heading conversation-heading"
	>
	<span class="title"> {{ $t('timeline.conversation') }} </span>
	<button
	v-if="collapsable"
	class="button-unstyled -link"
	@click.prevent="toggleExpanded"
	>
	{{ $t('timeline.collapse') }}
	</button>
	</div>
	<div v-if="isTreeView">
	<thread-tree
	v-for="status in topLevel"
	:key="status.id"
	ref="statusComponent"
	+ :depth="0"

	:status="status"
	:in-profile="inProfile"
	:conversation="conversation"
	:collapsable="collapsable"
	:is-expanded="isExpanded"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:profile-user-id="profileUserId"

	:focused="focused"
	:get-replies="getReplies"
	:get-highlight="getHighlight"
	:set-highlight="setHighlight"
	:toggle-expanded="toggleExpanded"
	+
	+ :toggle-thread-display="toggleThreadDisplay"
	+ :thread-display-status="threadDisplayStatus"
	+ :show-thread-recursively="showThreadRecursively"
	+ :total-reply-count="totalReplyCount"
	+ :total-reply-depth="totalReplyDepth"
	/>
	</div>
	<div v-if="isLinearView">
	<status
	v-for="status in conversation"
	:key="status.id"
	ref="statusComponent"
	:inline-expanded="collapsable && isExpanded"
	:statusoid="status"
	:expandable="!isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:focused="focused(status.id)"
	:in-conversation="isExpanded"
	:highlight="getHighlight()"
	:replies="getReplies(status.id)"
	:in-profile="inProfile"
	:profile-user-id="profileUserId"
	class="conversation-status status-fadein panel-body"
	@goto="setHighlight"
	@toggleExpanded="toggleExpanded"
	/>
	</div>
	</div>
	<div
	v-else
	:style="hiddenStyle"
	/>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';

	.Conversation {
	.conversation-status {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--border, $fallback--border);
	border-radius: 0;
	}

	&.-expanded {
	.conversation-status:last-child {
	border-bottom: none;
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	}
	}
	}
	</style>
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index d8f94926e5..9d423631a0 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,397 +1,413 @@
	import ReplyButton from '../reply_button/reply_button.vue'
	import FavoriteButton from '../favorite_button/favorite_button.vue'
	import ReactButton from '../react_button/react_button.vue'
	import RetweetButton from '../retweet_button/retweet_button.vue'
	import ExtraButtons from '../extra_buttons/extra_buttons.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import UserCard from '../user_card/user_card.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import AvatarList from '../avatar_list/avatar_list.vue'
	import Timeago from '../timeago/timeago.vue'
	import StatusContent from '../status_content/status_content.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import StatusPopover from '../status_popover/status_popover.vue'
	import UserListPopover from '../user_list_popover/user_list_popover.vue'
	import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
	import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	import MentionLink from 'src/components/mention_link/mention_link.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import { muteWordHits } from '../../services/status_parser/status_parser.js'
	import { unescape, uniqBy } from 'lodash'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faEnvelope,
	faLock,
	faLockOpen,
	faGlobe,
	faTimes,
	faRetweet,
	faReply,
	faPlusSquare,
	faSmileBeam,
	faEllipsisH,
	faStar,
	faEyeSlash,
	faEye,
	- faThumbtack
	+ faThumbtack,
	+ faAngleDoubleUp,
	+ faAngleDoubleDown
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faEnvelope,
	faGlobe,
	faLock,
	faLockOpen,
	faTimes,
	faRetweet,
	faReply,
	faPlusSquare,
	faStar,
	faSmileBeam,
	faEllipsisH,
	faEyeSlash,
	faEye,
	- faThumbtack
	+ faThumbtack,
	+ faAngleDoubleUp,
	+ faAngleDoubleDown
	)

	const Status = {
	name: 'Status',
	components: {
	ReplyButton,
	FavoriteButton,
	ReactButton,
	RetweetButton,
	ExtraButtons,
	PostStatusForm,
	UserCard,
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent,
	RichContent,
	MentionLink,
	MentionsLine
	},
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded',
	'showPinned',
	'inProfile',
	- 'profileUserId'
	+ 'profileUserId',
	+
	+ 'controlledThreadDisplayStatus',
	+ 'controlledToggleThreadDisplay'
	],
	data () {
	return {
	replying: false,
	unmuted: false,
	userExpanded: false,
	mediaPlaying: [],
	suspendable: true,
	error: null,
	headTailLinks: null
	}
	},
	computed: {
	muteWords () {
	return this.mergedConfig.muteWords
	},
	showReasonMutedThread () {
	return (
	this.status.thread_muted \|\|
	(this.status.reblog && this.status.reblog.thread_muted)
	) && !this.inConversation
	},
	repeaterClass () {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass () {
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	return highlightClass(user)
	},
	deleted () {
	return this.statusoid.deleted
	},
	repeaterStyle () {
	const user = this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userStyle () {
	if (this.noHeading) return
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
	},
	replyProfileLink () {
	if (this.isReply) {
	const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
	// FIXME Why user not found sometimes???
	return user ? user.statusnet_profile_url : 'NOT_FOUND'
	}
	},
	retweet () { return !!this.statusoid.retweeted_status },
	retweeterUser () { return this.statusoid.user },
	retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name_ui },
	retweeterHtml () { return this.statusoid.user.name },
	retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
	status () {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository () {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn () {
	return !!this.currentUser
	},
	muteWordHits () {
	return muteWordHits(this.status, this.muteWords)
	},
	mentionsLine () {
	if (!this.headTailLinks) return []
	const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))
	return this.status.attentions.filter(attn => {
	// no reply user
	return attn.id !== this.status.in_reply_to_user_id &&
	// no self-replies
	attn.statusnet_profile_url !== this.status.user.statusnet_profile_url &&
	// don't include if mentions is written
	!writtenSet.has(attn.statusnet_profile_url)
	}).map(attn => ({
	url: attn.statusnet_profile_url,
	content: attn.screen_name,
	userId: attn.id
	}))
	},
	hasMentionsLine () {
	return this.mentionsLine.length > 0
	},
	muted () {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const reasonsToMute = this.userIsMuted \|\|
	// Thread is muted
	status.thread_muted \|\|
	// Wordfiltered
	this.muteWordHits.length > 0
	return !this.unmuted && !this.shouldNotMute && reasonsToMute
	},
	userIsMuted () {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const { status } = this
	const { reblog } = status
	const relationship = this.$store.getters.relationship(status.user.id)
	const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)
	return status.muted \|\|
	// Reprööt of a muted post according to BE
	(reblog && reblog.muted) \|\|
	// Muted user
	relationship.muting \|\|
	// Muted user of a reprööt
	(relationshipReblog && relationshipReblog.muting)
	},
	shouldNotMute () {
	const { status } = this
	const { reblog } = status
	return (
	(
	this.inProfile && (
	// Don't mute user's posts on user timeline (except reblogs)
	(!reblog && status.user.id === this.profileUserId) \|\|
	// Same as above but also allow self-reblogs
	(reblog && reblog.user.id === this.profileUserId)
	)
	) \|\|
	// Don't mute statuses in muted conversation when said conversation is opened
	(this.inConversation && status.thread_muted)
	// No excuses if post has muted words
	) && !this.muteWordHits.length > 0
	},
	hideMutedUsers () {
	return this.mergedConfig.hideMutedPosts
	},
	hideMutedThreads () {
	return this.mergedConfig.hideMutedThreads
	},
	hideFilteredStatuses () {
	return this.mergedConfig.hideFilteredStatuses
	},
	hideWordFilteredPosts () {
	return this.mergedConfig.hideWordFilteredPosts
	},
	hideStatus () {
	return (this.virtualHidden \|\| !this.shouldNotMute) && (
	(this.muted && this.hideFilteredStatuses) \|\|
	(this.userIsMuted && this.hideMutedUsers) \|\|
	(this.status.thread_muted && this.hideMutedThreads) \|\|
	(this.muteWordHits.length > 0 && this.hideWordFilteredPosts)
	)
	},
	isFocused () {
	// retweet or root of an expanded conversation
	if (this.focused) {
	return true
	} else if (!this.inConversation) {
	return false
	}
	// use conversation highlight only when in conversation
	return this.status.id === this.highlight
	},
	isReply () {
	return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
	},
	replyToName () {
	if (this.status.in_reply_to_screen_name) {
	return this.status.in_reply_to_screen_name
	} else {
	const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
	return user && user.screen_name_ui
	}
	},
	replySubject () {
	if (!this.status.summary) return ''
	const decodedSummary = unescape(this.status.summary)
	const behavior = this.mergedConfig.subjectLineBehavior
	const startsWithRe = decodedSummary.match(/^re[: ]/i)
	if ((behavior !== 'noop' && startsWithRe) \|\| behavior === 'masto') {
	return decodedSummary
	} else if (behavior === 'email') {
	return 're: '.concat(decodedSummary)
	} else if (behavior === 'noop') {
	return ''
	}
	},
	combinedFavsAndRepeatsUsers () {
	// Use the status from the global status repository since favs and repeats are saved in it
	const combinedUsers = [].concat(
	this.statusFromGlobalRepository.favoritedBy,
	this.statusFromGlobalRepository.rebloggedBy
	)
	return uniqBy(combinedUsers, 'id')
	},
	tags () {
	return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
	},
	hidePostStats () {
	return this.mergedConfig.hidePostStats
	},
	currentUser () {
	return this.$store.state.users.currentUser
	},
	betterShadow () {
	return this.$store.state.interface.browserSupport.cssFilter
	},
	mergedConfig () {
	return this.$store.getters.mergedConfig
	},
	isSuspendable () {
	return !this.replying && this.mediaPlaying.length === 0
	+ },
	+ inThreadForest () {
	+ return !!this.controlledThreadDisplayStatus
	+ },
	+ threadShowing () {
	+ return this.controlledThreadDisplayStatus === 'showing'
	}
	},
	methods: {
	visibilityIcon (visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	default:
	return 'globe'
	}
	},
	showError (error) {
	this.error = error
	},
	clearError () {
	this.error = undefined
	},
	toggleReplying () {
	this.replying = !this.replying
	},
	gotoOriginal (id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded () {
	this.$emit('toggleExpanded')
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink (id, name) {
	return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
	},
	addMediaPlaying (id) {
	this.mediaPlaying.push(id)
	},
	removeMediaPlaying (id) {
	this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id)
	},
	setHeadTailLinks (headTailLinks) {
	this.headTailLinks = headTailLinks
	+ },
	+ toggleThreadDisplay () {
	+ this.controlledToggleThreadDisplay()
	}
	},
	watch: {
	'highlight': function (id) {
	if (this.status.id === id) {
	let rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= (window.innerHeight - 50)) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	},
	'status.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.rebloggedBy && this.statusFromGlobalRepository.rebloggedBy.length !== num) {
	this.$store.dispatch('fetchRepeats', this.status.id)
	}
	},
	'status.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
	this.$store.dispatch('fetchFavs', this.status.id)
	}
	},
	'isSuspendable': function (val) {
	this.suspendable = val
	}
	},
	filters: {
	capitalize: function (str) {
	return str.charAt(0).toUpperCase() + str.slice(1)
	}
	}
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 3bb29db665..2ebf56385f 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,444 +1,457 @@
	<template>
	<div
	v-if="!hideStatus"
	class="Status"
	:class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<span
	class="fa-scale-110 fa-old-padding"
	@click="clearError"
	>
	<FAIcon icon="times" />
	</span>
	</div>
	<template v-if="muted && !isPreview">
	<div class="status-container muted">
	<small class="status-username">
	<FAIcon
	v-if="muted && retweet"
	class="fa-scale-110 fa-old-padding repeat-icon"
	icon="retweet"
	/>
	<router-link :to="userProfileLink">
	{{ status.user.screen_name_ui }}
	</router-link>
	</small>
	<small
	v-if="showReasonMutedThread"
	class="mute-thread"
	>
	{{ $t('status.thread_muted') }}
	</small>
	<small
	v-if="showReasonMutedThread && muteWordHits.length > 0"
	class="mute-thread"
	>
	{{ $t('status.thread_muted_and_words') }}
	</small>
	<small
	class="mute-words"
	:title="muteWordHits.join(', ')"
	>
	{{ muteWordHits.join(', ') }}
	</small>
	<button
	class="unmute button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	icon="eye-slash"
	class="fa-scale-110 fa-old-padding"
	/>
	</button>
	</div>
	</template>
	<template v-else>
	<div
	v-if="showPinned"
	class="pin"
	>
	<FAIcon
	icon="thumbtack"
	class="faint"
	/>
	<span class="faint">{{ $t('status.pinned') }}</span>
	</div>
	<div
	v-if="retweet && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="status-container repeat-info"
	>
	<UserAvatar
	v-if="retweet"
	class="left-side repeater-avatar"
	:better-shadow="betterShadow"
	:user="statusoid.user"
	/>
	<div class="right-side faint">
	<span
	class="status-username repeater-name"
	:title="retweeter"
	>
	<router-link
	v-if="retweeterHtml"
	:to="retweeterProfileLink"
	>
	<RichContent
	:html="retweeterHtml"
	:emoji="retweeterUser.emoji"
	/>
	</router-link>
	<router-link
	v-else
	:to="retweeterProfileLink"
	>{{ retweeter }}</router-link>
	</span>
	<FAIcon
	icon="retweet"
	class="repeat-icon"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>

	<div
	v-if="!deleted"
	:class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
	:style="[ userStyle ]"
	class="status-container"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	class="left-side"
	>
	<router-link
	:to="userProfileLink"
	@click.stop.prevent.capture.native="toggleUserExpanded"
	>
	<UserAvatar
	:compact="compact"
	:better-shadow="betterShadow"
	:user="status.user"
	/>
	</router-link>
	</div>
	<div class="right-side">
	<UserCard
	v-if="userExpanded"
	:user-id="status.user.id"
	:rounded="true"
	:bordered="true"
	class="usercard"
	/>
	<div
	v-if="!noHeading"
	class="status-heading"
	>
	<div class="heading-name-row">
	<div class="heading-left">
	<h4
	v-if="status.user.name_html"
	class="status-username"
	:title="status.user.name"
	>
	<RichContent
	:html="status.user.name"
	:emoji="status.user.emoji"
	/>
	</h4>
	<h4
	v-else
	class="status-username"
	:title="status.user.name"
	>
	{{ status.user.name }}
	</h4>
	<router-link
	class="account-name"
	:title="status.user.screen_name_ui"
	:to="userProfileLink"
	>
	{{ status.user.screen_name_ui }}
	</router-link>
	<img
	v-if="!!(status.user && status.user.favicon)"
	class="status-favicon"
	:src="status.user.favicon"
	>
	</div>

	<span class="heading-right">
	<router-link
	class="timeago faint-link"
	:to="{ name: 'conversation', params: { id: status.id } }"
	>
	<Timeago
	:time="status.created_at"
	:auto-update="60"
	/>
	</router-link>
	<span
	v-if="status.visibility"
	class="visibility-icon"
	:title="status.visibility \| capitalize"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="visibilityIcon(status.visibility)"
	/>
	</span>
	<button
	v-if="expandable && !isPreview"
	class="button-unstyled"
	:title="$t('status.expand')"
	@click.prevent="toggleExpanded"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	icon="plus-square"
	/>
	</button>
	<button
	v-if="unmuted"
	class="button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	class="fa-scale-110"
	/>
	</button>
	+ <button
	+ v-if="inThreadForest && replies && replies.length"
	+ class="button-unstyled"
	+ :title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
	+ :aria-expanded="threadShowing ? 'true' : 'false'"
	+ @click.prevent="toggleThreadDisplay"
	+ >
	+ <FAIcon
	+ fixed-width
	+ class="fa-scale-110"
	+ :icon="threadShowing ? 'angle-double-up' : 'angle-double-down'"
	+ />
	+ </button>
	</span>
	</div>
	<div
	v-if="isReply \|\| hasMentionsLine"
	class="heading-reply-row"
	>
	<span
	v-if="isReply"
	class="glued-label reply-glued-label"
	>
	<StatusPopover
	v-if="!isPreview"
	:status-id="status.parent_visible && status.in_reply_to_status_id"
	class="reply-to-popover"
	style="min-width: 0"
	:class="{ '-strikethrough': !status.parent_visible }"
	>
	<button
	class="button-unstyled reply-to"
	:aria-label="$t('tool_tip.reply')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="reply"
	flip="horizontal"
	/>
	<span
	class="reply-to-text"
	>
	{{ $t('status.reply_to') }}
	</span>
	</button>
	</StatusPopover>

	<span
	v-else
	class="reply-to-no-popover"
	>
	<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
	</span>
	<MentionLink
	:content="replyToName"
	:url="replyProfileLink"
	:user-id="status.in_reply_to_user_id"
	:user-screen-name="status.in_reply_to_screen_name"
	:first-mention="false"
	/>
	</span>

	<!-- This little wrapper is made for sole purpose of "gluing" -->
	<!-- "Mentions" label to the first mention -->
	<span
	v-if="hasMentionsLine"
	class="glued-label"
	>
	<span
	class="mentions"
	:aria-label="$t('tool_tip.mentions')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<span
	class="mentions-text"
	>
	{{ $t('status.mentions') }}
	</span>
	</span>
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(0, 1)"
	class="mentions-line-first"
	/>
	</span>
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(1)"
	class="mentions-line"
	/>
	</div>
	</div>

	<StatusContent
	ref="content"
	:status="status"
	:no-heading="noHeading"
	:highlight="highlight"
	:focused="isFocused"
	@mediaplay="addMediaPlaying($event)"
	@mediapause="removeMediaPlaying($event)"
	@parseReady="setHeadTailLinks"
	/>

	<div
	v-if="inConversation && !isPreview && replies && replies.length"
	class="replies"
	>
	<span class="faint">{{ $t('status.replies_list') }}</span>
	<StatusPopover
	v-for="reply in replies"
	:key="reply.id"
	:status-id="reply.id"
	>
	<button
	class="button-unstyled -link reply-link"
	@click.prevent="gotoOriginal(reply.id)"
	>
	{{ reply.name }}
	</button>
	</StatusPopover>
	</div>

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

	<EmojiReactions
	v-if="(mergedConfig.emojiReactionsOnTimeline \|\| isFocused) && (!noHeading && !isPreview)"
	:status="status"
	/>

	<div
	v-if="!noHeading && !isPreview"
	class="status-actions"
	>
	<reply-button
	:replying="replying"
	:status="status"
	@toggle="toggleReplying"
	/>
	<retweet-button
	:visibility="status.visibility"
	:logged-in="loggedIn"
	:status="status"
	/>
	<favorite-button
	:logged-in="loggedIn"
	:status="status"
	/>
	<ReactButton
	v-if="loggedIn"
	:status="status"
	/>
	<extra-buttons
	:status="status"
	@onError="showError"
	@onSuccess="clearError"
	/>
	</div>
	</div>
	</div>
	<div
	v-else
	class="gravestone"
	>
	<div class="left-side">
	<UserAvatar :compact="compact" />
	</div>
	<div class="right-side">
	<div class="deleted-text">
	{{ $t('status.status_deleted') }}
	</div>
	<reply-button
	v-if="replying"
	:replying="replying"
	:status="status"
	@toggle="toggleReplying"
	/>
	</div>
	</div>
	<div
	v-if="replying"
	class="status-container reply-form"
	>
	<PostStatusForm
	class="reply-body"
	:reply-to="status.id"
	:attentions="status.attentions"
	:replied-user="status.user"
	:copy-message-scope="status.visibility"
	:subject="replySubject"
	@posted="toggleReplying"
	/>
	</div>
	</template>
	</div>
	</template>

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

	<style src="./status.scss" lang="scss"></style>
	diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
	index 4f95122a52..88b6010972 100644
	--- a/src/components/thread_tree/thread_tree.js
	+++ b/src/components/thread_tree/thread_tree.js
	@@ -1,52 +1,62 @@
	import Status from '../status/status.vue'

	const debug = console.log

	const ThreadTree = {
	components: {
	Status
	},
	name: 'ThreadTree',
	props: {
	depth: Number,
	status: Object,
	inProfile: Boolean,
	conversation: Array,
	collapsable: Boolean,
	isExpanded: Boolean,
	pinnedStatusIdsObject: Object,
	profileUserId: String,

	focused: Function,
	getHighlight: Function,
	getReplies: Function,
	setHighlight: Function,
	- toggleExpanded: Function
	+ toggleExpanded: Function,
	+
	+ // to control display of the whole thread forest
	+ toggleThreadDisplay: Function,
	+ threadDisplayStatus: Object,
	+ showThreadRecursively: Function,
	+ totalReplyCount: Object,
	+ totalReplyDepth: Object
	},
	computed: {
	reverseLookupTable () {
	return this.conversation.reduce((table, status, index) => {
	table[status.id] = index
	return table
	}, {})
	},
	currentReplies () {
	debug('status:', this.status)
	debug('getReplies:', this.getReplies(this.status.id))
	return this.getReplies(this.status.id).map(({ id }) => this.statusById(id))
	},
	+ threadShowing () {
	+ return this.threadDisplayStatus[this.status.id] === 'showing'
	+ }
	},
	methods: {
	statusById (id) {
	return this.conversation[this.reverseLookupTable[id]]
	},
	collapseThread () {
	},
	showThread () {
	},
	showAllSubthreads () {
	}
	}
	}

	export default ThreadTree
	diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
	index 8256eee6c3..9f59158511 100644
	--- a/src/components/thread_tree/thread_tree.vue
	+++ b/src/components/thread_tree/thread_tree.vue
	@@ -1,55 +1,84 @@
	<template>
	<div class="thread-tree panel-body">
	<status
	:key="status.id"
	ref="statusComponent"
	:inline-expanded="collapsable && isExpanded"
	:statusoid="status"
	:expandable="!isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:focused="focused(status.id)"
	:in-conversation="isExpanded"
	:highlight="getHighlight()"
	:replies="getReplies(status.id)"
	:in-profile="inProfile"
	:profile-user-id="profileUserId"
	- class="conversation-status status-fadein panel-body"
	+ class="conversation-status conversation-status-treeview status-fadein panel-body"
	+
	+ :controlled-thread-display-status="threadDisplayStatus[status.id]"
	+ :controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
	+
	@goto="setHighlight"
	@toggleExpanded="toggleExpanded"
	/>
	<div
	- v-if="currentReplies.length"
	+ v-if="currentReplies.length && threadShowing"
	class="thread-tree-replies"
	>
	<thread-tree
	v-for="replyStatus in currentReplies"
	:key="replyStatus.id"
	ref="childComponent"
	+ :depth="depth + 1"
	:status="replyStatus"

	:in-profile="inProfile"
	:conversation="conversation"
	:collapsable="collapsable"
	:is-expanded="isExpanded"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:profile-user-id="profileUserId"

	:focused="focused"
	:get-replies="getReplies"
	:get-highlight="getHighlight"
	:set-highlight="setHighlight"
	:toggle-expanded="toggleExpanded"

	- class="conversation-status status-fadein panel-body"
	+ :toggle-thread-display="toggleThreadDisplay"
	+ :thread-display-status="threadDisplayStatus"
	+ :show-thread-recursively="showThreadRecursively"
	+ :total-reply-count="totalReplyCount"
	+ :total-reply-depth="totalReplyDepth"
	/>
	</div>
	+ <div
	+ v-if="currentReplies.length && !threadShowing"
	+ class="thread-tree-replies thread-tree-replies-hidden"
	+ >
	+ <button
	+ class="button-unstyled -link thread-tree-show-replies-button"
	+ @click="showThreadRecursively(status.id)"
	+ >
	+ {{ $t('status.thread_show_full', { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
	+ </button>
	+ </div>
	</div>
	</template>

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

	<style lang="scss">
	+@import '../../_variables.scss';
	.thread-tree-replies {
	margin-left: 1em;
	}
	+.thread-tree-replies-hidden {
	+ padding: 1em;
	+ border-bottom: 1px solid var(--border, #222);
	+}
	+.conversation-status.conversation-status-treeview:last-child,
	+.Conversation.-expanded .conversation-status.conversation-status-treeview:last-child {
	+ border-bottom: 1px solid var(--border, #222);
	+}
	</style>

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 8, 12:51 PM (1 d, 14 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1723382
Default Alt Text: (46 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions