akkoma-fe/src/components/conversation/conversation.js

498 lines
14 KiB
JavaScript
Raw Normal View History

import { reduce, filter, findIndex, clone, get } from 'lodash'
import Status from '../status/status.vue'
2021-08-07 00:18:27 +00:00
import ThreadTree from '../thread_tree/thread_tree.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faAngleDoubleDown,
2021-08-07 18:11:34 +00:00
faAngleDoubleLeft,
faChevronLeft
} from '@fortawesome/free-solid-svg-icons'
library.add(
faAngleDoubleDown,
2021-08-07 18:11:34 +00:00
faAngleDoubleLeft,
faChevronLeft
)
2021-08-07 14:28:45 +00:00
// const debug = console.log
const debug = () => {}
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
2019-03-28 14:02:33 +00:00
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
}
}
2019-03-25 20:09:40 +00:00
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')
2019-03-25 20:09:40 +00:00
}
2019-01-25 13:20:42 +00:00
return conversation.filter(_ => _).sort(sortById)
2016-11-28 17:01:23 +00:00
}
const conversation = {
2017-04-12 16:07:55 +00:00
data () {
return {
2019-03-11 20:24:37 +00:00
highlight: null,
2021-08-07 04:33:06 +00:00
expanded: false,
2021-08-07 14:28:45 +00:00
threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
statusContentPropertiesObject: {},
inlineDivePosition: null
}
},
props: [
2019-09-03 17:19:14 +00:00
'statusId',
2019-03-25 14:50:09 +00:00
'collapsable',
'isPage',
'pinnedStatusIdsObject',
'inProfile',
2020-09-29 10:18:37 +00:00
'profileUserId',
'virtualHidden'
],
created () {
if (this.isPage) {
this.fetchConversation()
}
},
computed: {
2021-08-07 04:33:06 +00:00
maxDepthToShowByDefault () {
2021-08-08 00:14:14 +00:00
// maxDepthInThread = max number of depths that is *visible*
// since our depth starts with 0 and "showing" means "showing children"
// there is a -2 here
const maxDepth = this.$store.getters.mergedConfig.maxDepthInThread - 2
return maxDepth >= 1 ? maxDepth : 1
2021-08-07 04:33:06 +00:00
},
2021-08-07 00:18:27 +00:00
displayStyle () {
2021-08-07 23:24:27 +00:00
return this.$store.getters.mergedConfig.conversationDisplay
2021-08-07 00:18:27 +00:00
},
isTreeView () {
2021-08-07 22:53:23 +00:00
return this.displayStyle === 'tree' || this.displayStyle === 'simple_tree'
},
treeViewIsSimple () {
return this.displayStyle === 'simple_tree'
2021-08-07 00:18:27 +00:00
},
isLinearView () {
return this.displayStyle === 'linear'
},
2020-09-29 10:18:37 +00:00
hideStatus () {
if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
return this.virtualHidden && this.$refs.statusComponent[0].suspendable
} else {
return this.virtualHidden
}
},
status () {
2019-09-03 17:19:14 +00:00
return this.$store.state.statuses.allStatusesObject[this.statusId]
},
2019-09-03 17:19:14 +00:00
originalStatusId () {
if (this.status.retweeted_status) {
return this.status.retweeted_status.id
} else {
2019-09-03 17:19:14 +00:00
return this.statusId
}
},
conversationId () {
2019-09-03 17:19:14 +00:00
return this.getConversationId(this.statusId)
},
conversation () {
if (!this.status) {
return []
}
2019-03-25 20:09:40 +00:00
if (!this.isExpanded) {
2019-03-11 20:24:37 +00:00
return [this.status]
}
2019-04-11 16:46:06 +00:00
const conversation = clone(this.$store.state.statuses.conversationsObject[this.conversationId])
2019-09-03 17:19:14 +00:00
const statusIndex = findIndex(conversation, { id: this.originalStatusId })
2019-03-11 20:24:37 +00:00
if (statusIndex !== -1) {
conversation[statusIndex] = this.status
}
2019-03-25 20:09:40 +00:00
return sortAndFilterConversation(conversation, this.status)
2017-07-29 16:53:49 +00:00
},
2021-08-07 18:11:34 +00:00
conversationDive () {
},
statusMap () {
return this.conversation.reduce((res, s) => {
res[s.id] = s
return res
}, {})
},
2021-08-07 00:18:27 +00:00
threadTree () {
const reverseLookupTable = this.conversation.reduce((table, status, index) => {
table[status.id] = index
return table
}, {})
const threads = this.conversation.reduce((a, cur) => {
const id = cur.id
a.forest[id] = this.getReplies(id)
.map(s => s.id)
return a
}, {
2021-08-07 22:59:48 +00:00
forest: {}
2021-08-07 00:18:27 +00:00
})
2021-08-07 04:33:06 +00:00
debug('threads = ', threads)
2021-08-07 00:18:27 +00:00
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
2021-08-07 04:33:06 +00:00
}, walk(forest, forest[id], depth + 1, processed)].reduce((a, b) => a.concat(b), [])
2021-08-07 00:18:27 +00:00
}).reduce((a, b) => a.concat(b), [])
2021-08-07 04:33:06 +00:00
const linearized = walk(threads.forest, this.topLevel.map(k => k.id))
2021-08-07 00:18:27 +00:00
return linearized
},
2021-08-07 04:33:06 +00:00
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
}, {})
},
2021-08-07 00:18:27 +00:00
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)
2021-08-07 22:59:48 +00:00
debug('toplevel =', topLevel)
2021-08-07 00:18:27 +00:00
return topLevel
},
showingTopLevel () {
2021-08-07 18:11:34 +00:00
if (this.canDive && this.diveRoot) {
return [this.statusMap[this.diveRoot]]
}
return this.topLevel
},
2021-08-07 18:11:34 +00:00
diveRoot () {
(() => {})(this.conversation)
const statusId = this.inlineDivePosition || this.statusId
const isTopLevel = !this.parentOf(statusId)
return isTopLevel ? null : statusId
2021-08-07 18:11:34 +00:00
},
diveDepth () {
2021-08-07 18:11:34 +00:00
return this.canDive && this.diveRoot ? this.depths[this.diveRoot] : 0
},
diveMode () {
2021-08-07 18:11:34 +00:00
return this.canDive && !!this.diveRoot
},
2017-07-29 16:53:49 +00:00
replies () {
2017-07-29 17:10:09 +00:00
let i = 1
2019-07-06 21:54:17 +00:00
// eslint-disable-next-line camelcase
2019-07-05 07:02:14 +00:00
return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => {
/* eslint-disable camelcase */
const irid = in_reply_to_status_id
/* eslint-enable camelcase */
2017-07-29 16:53:49 +00:00
if (irid) {
result[irid] = result[irid] || []
result[irid].push({
2017-07-29 17:10:09 +00:00
name: `#${i}`,
2017-07-29 16:53:49 +00:00
id: id
})
}
2017-07-29 17:10:09 +00:00
i++
2017-07-29 16:53:49 +00:00
return result
}, {})
2019-03-25 14:50:09 +00:00
},
isExpanded () {
2021-08-07 00:18:27 +00:00
return !!(this.expanded || this.isPage)
2020-09-29 10:18:37 +00:00
},
hiddenStyle () {
const height = (this.status && this.status.virtualHeight) || '120px'
return this.virtualHidden ? { height } : {}
2021-08-07 04:33:06 +00:00
},
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]
}
2021-08-07 18:11:34 +00:00
if ((depth - this.diveDepth) <= this.maxDepthToShowByDefault) {
2021-08-07 04:33:06 +00:00
return 'showing'
} else {
return 'hidden'
}
})()
a[id] = status
return a
}, {})
2021-08-07 14:28:45 +00:00
},
statusContentProperties () {
return this.conversation.reduce((a, k) => {
const id = k.id
const props = (() => {
if (this.statusContentPropertiesObject[id]) {
return this.statusContentPropertiesObject[id]
}
return {
showingTall: false,
expandingSubject: false,
2021-08-07 22:59:48 +00:00
showingLongSubject: false
2021-08-07 14:28:45 +00:00
}
})()
a[id] = props
return a
}, {})
2021-08-07 18:11:34 +00:00
},
canDive () {
return this.isTreeView && this.isExpanded
2021-08-07 22:53:23 +00:00
},
focused () {
return (id) => {
return (this.isExpanded) && id === this.highlight
}
},
maybeHighlight () {
return this.isExpanded ? this.highlight : null
}
},
components: {
2021-08-07 00:18:27 +00:00
Status,
ThreadTree
},
watch: {
2019-09-03 17:19:14 +00:00
statusId (newVal, oldVal) {
const newConversationId = this.getConversationId(newVal)
const oldConversationId = this.getConversationId(oldVal)
if (newConversationId && oldConversationId && newConversationId === oldConversationId) {
2019-09-03 17:19:14 +00:00
this.setHighlight(this.originalStatusId)
} else {
this.fetchConversation()
}
},
2019-03-11 20:24:37 +00:00
expanded (value) {
if (value) {
this.fetchConversation()
2021-08-07 22:53:23 +00:00
} else {
// if we collapse it, we should reset the dive
2021-08-07 23:04:29 +00:00
this.undive()
2019-03-11 20:24:37 +00:00
}
2020-09-29 10:18:37 +00:00
},
virtualHidden (value) {
this.$store.dispatch(
'setVirtualHeight',
{ statusId: this.statusId, height: `${this.$el.clientHeight}px` }
)
2019-03-11 20:24:37 +00:00
}
},
methods: {
2021-08-07 18:11:34 +00:00
conversationFetched () {
if (!this.isExpanded) {
return
}
},
fetchConversation () {
if (this.status) {
2019-09-03 17:19:14 +00:00
this.$store.state.api.backendInteractor.fetchConversation({ id: this.statusId })
2019-07-05 07:02:14 +00:00
.then(({ ancestors, descendants }) => {
this.$store.dispatch('addNewStatuses', { statuses: ancestors })
this.$store.dispatch('addNewStatuses', { statuses: descendants })
2019-09-03 17:19:14 +00:00
this.setHighlight(this.originalStatusId)
})
2021-08-07 18:11:34 +00:00
.then(this.conversationFetched)
} else {
2019-09-03 17:19:14 +00:00
this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
2019-08-30 16:11:59 +00:00
.then((status) => {
this.$store.dispatch('addNewStatuses', { statuses: [status] })
this.fetchConversation()
})
}
2017-03-05 15:31:01 +00:00
},
getReplies (id) {
2017-07-29 16:53:49 +00:00
return this.replies[id] || []
},
2021-08-07 22:53:23 +00:00
getHighlight () {
return this.isExpanded ? this.highlight : null
},
2017-04-12 16:07:55 +00:00
setHighlight (id) {
if (!id) return
this.highlight = id
this.$store.dispatch('fetchFavsAndRepeats', id)
this.$store.dispatch('fetchEmojiReactionsBy', id)
2019-03-11 14:52:28 +00:00
},
2019-03-11 20:24:37 +00:00
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'))
2021-08-07 04:33:06 +00:00
},
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')
2021-08-07 14:28:45 +00:00
},
setStatusContentProperty (id, name, value) {
this.statusContentPropertiesObject = {
...this.statusContentPropertiesObject,
[id]: {
...this.statusContentPropertiesObject[id],
[name]: value
}
}
},
toggleStatusContentProperty (id, name) {
this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
},
2021-08-08 00:14:14 +00:00
leastVisibleAncestor (id) {
2021-08-07 22:53:23 +00:00
let cur = id
let parent = this.parentOf(cur)
while (cur) {
// if the parent is showing it means cur is visible
if (this.threadDisplayStatus[parent] === 'showing') {
return cur
}
parent = this.parentOf(parent)
cur = this.parentOf(cur)
}
// nothing found, fall back to toplevel
2021-08-07 22:59:48 +00:00
return this.topLevel[0] ? this.topLevel[0].id : undefined
2021-08-07 22:53:23 +00:00
},
diveIntoStatus (id, preventScroll) {
this.tryScrollTo(id)
2021-08-07 18:11:34 +00:00
},
diveToTopLevel () {
this.tryScrollTo(this.topLevel[0].id)
},
// only used when we are not on a page
undive () {
this.inlineDivePosition = null
this.setHighlight(this.statusId)
2021-08-07 22:53:23 +00:00
},
tryScrollTo (id) {
2021-08-07 22:59:48 +00:00
if (!id) {
return
}
2021-08-07 22:53:23 +00:00
if (this.isPage) {
// set statusId
this.$router.push({ name: 'conversation', params: { id } })
} else {
this.inlineDivePosition = id
2021-08-07 22:53:23 +00:00
}
this.setHighlight(id)
},
goToCurrent () {
this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
2021-08-07 18:11:34 +00:00
},
statusById (id) {
return this.statusMap[id]
},
parentOf (id) {
2021-08-08 01:35:52 +00:00
const status = this.statusById(id)
if (!status) {
return undefined
}
const { in_reply_to_status_id: parentId } = status
if (!this.statusMap[parentId]) {
return undefined
}
2021-08-07 18:11:34 +00:00
return parentId
},
parentOrSelf (id) {
return this.parentOf(id) || id
},
// Ancestors of some status, from top to bottom
ancestorsOf (id) {
const ancestors = []
let cur = this.parentOf(id)
while (cur) {
ancestors.unshift(this.statusMap[cur])
cur = this.parentOf(cur)
}
// console.log('ancestors = ', ancestors, 'conversation = ', this.conversation.map(k => k.id), 'statusContentProperties=', this.statusContentProperties)
return ancestors
}
}
}
export default conversation