diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 1a2c61ab1..3b8bd6b4a 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -1,4 +1,3 @@ -import { get } from 'lodash-es' import { storeToRefs } from 'pinia' import { computed, @@ -20,8 +19,6 @@ import ThreadTree from 'src/components/thread_tree/thread_tree.vue' import { useInterfaceStore } from 'src/stores/interface.js' import { useMergedConfigStore } from 'src/stores/merged_config.js' -import { useStatusesStore } from 'src/stores/statuses.js' -import { useStreamingStore } from 'src/stores/streaming.js' import { useConversation } from 'src/composables/useConversation.js' import { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js' @@ -29,8 +26,6 @@ import { useScrollPosition } from 'src/composables/useScrollPosition.js' import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js' import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js' -import { WSConnectionStatus } from 'src/api/websocket.js' - import { library } from '@fortawesome/fontawesome-svg-core' import { faAngleDoubleDown, @@ -72,18 +67,9 @@ export default { }, emits: ['heightChange', 'suspendableStateChange'], setup(props, { emit }) { - // # Helpers - const getStatusObject = (id) => useStatusesStore().allStatuses.get(id) - const getConversationId = (statusId) => { - const status = getStatusObject(statusId) - return get( - status, - 'retweeted_status.statusnet_conversation_id', - get(status, 'statusnet_conversation_id'), - ) - } - + const router = useRouter() const scroller = useScrollPosition() + const tryScrollTo = async (id) => { if (!id) { return @@ -96,19 +82,9 @@ export default { return await scroller.scrollIntoView(target, { block: 'nearest' }) } - const { statusId } = toRefs(props) - - const router = useRouter() - // # Main Configuration / global state const { mergedConfig } = storeToRefs(useMergedConfigStore()) - const { mastoUserSocketStatus } = storeToRefs(useStreamingStore()) const displayStyle = computed(() => mergedConfig.value.conversationDisplay) - const streamingEnabled = computed( - () => - mergedConfig.value.useStreamingApi && - mastoUserSocketStatus === WSConnectionStatus.JOINED, - ) const { layoutType } = storeToRefs(useInterfaceStore()) const mobileLayout = computed(() => layoutType.value === 'mobile') @@ -123,24 +99,11 @@ export default { provide('isPage', isPage) provide('expandable', true) - // # Focus - const focusedId = ref(statusId.value) - const focused = computed(() => (isExpanded.value ? focusedId.value : null)) - const setFocused = (id) => { - if (!id) return - focusedId.value = id - - if (!streamingEnabled.value) { - useStatusesStore().fetchStatus(id) - } - - useStatusesStore().fetchFavsAndRepeats(id) - useStatusesStore().fetchEmojiReactions(id) - } - provide('focused', focused) - // # Main things + const { statusId } = toRefs(props) const { + focusedId, + setFocused, currentStatus, mainStatus, conversation, @@ -148,40 +111,21 @@ export default { getReplies, fetchConversation, loadError, - } = useConversation(focusedId, isExpanded) + } = useConversation(statusId, isExpanded) + const conversationLite = computed(() => + conversation.value.map(({ id }) => ({ id })), + ) watch( expanded, async (value) => { if (value) { await fetchConversation() - } else { - resetDisplayState() } - if (isPage.value) return }, { flush: 'post' }, ) - const resetDisplayState = () => { - setFocused(statusId.value) - resetThreadDisplay() - } - watch(statusId, (newVal, oldVal) => { - const newConversationId = getConversationId(newVal) - const oldConversationId = getConversationId(oldVal) - if ( - newConversationId && - oldConversationId && - newConversationId === oldConversationId - ) { - setFocused(newVal) - } else { - resetDisplayState() - fetchConversation() - } - }) - // Component created if (isPage.value) { fetchConversation() @@ -192,10 +136,10 @@ export default { const lastStatus = computed( () => conversation.value[conversation.value.legnth - 1], ) - const getStatusClasses = (status, ancestor) => { + const getStatusClasses = (statusId, ancestor) => { const result = { - '-first': status.id === firstStatus.value?.id, - '-last': status.id === lastStatus.value?.id, + '-first': statusId === firstStatus.value?.id, + '-last': statusId === lastStatus.value?.id, } if (ancestor) { result['-ancestor'] = true @@ -204,8 +148,6 @@ export default { return result } - const { fontSize } = useInterfaceSizes() - // External virtual scrolling const unsuspendableIds = ref(new Set()) const suspendable = computed( @@ -228,6 +170,7 @@ export default { onUnmounted(() => resizeObserver.value.disconnect()) // Placeholder heights. + const { fontSize } = useInterfaceSizes() const mutedStatusHeight = computed(() => fontSize.value * 1.5) const normalStatusHeight = computed(() => fontSize.value * 10) const getPlaceholderHeight = (id) => @@ -238,20 +181,26 @@ export default { const anchorIds = computed( () => new Set([mainStatus.value?.id, currentStatus.value?.id]), ) + // # Linear style stuff const isLinearView = computed(() => displayStyle.value !== 'tree') const linearElement = useTemplateRef('linear') - const linearScrollCompensation = computed(() => isLinearView.value) + const linearScrollCompensation = computed( + () => isExpanded.value && isLinearView.value, + ) const { heightChart: heightChartLinear, changeSuspendState: changeSuspendStateLinear, updateVirtualHeight: updateVirtualHeightLinear, + reset: resetLinearScrollVirtualization, } = useVirtualScrolling({ - list: conversation, + context: statusId, + list: conversationLite, body: linearElement, scrollPositionInstance: scroller, scrollCompensation: linearScrollCompensation, anchorIds, + collapseMode: 'item', getPlaceholderHeight, }) const changeSuspendStateLinearLocal = (e) => { @@ -274,15 +223,29 @@ export default { resetThreadDisplay, } = useTreeConversationTopology(conversation, replies, focusedId) provide('threadDisplay', threadDisplay) + watch( + isExpanded, + (value) => { + if (!value) resetThreadDisplay() + }, + { flush: 'post' }, + ) + const currentAncestorsLite = computed(() => + currentAncestors.value.map(({ id }) => ({ id })), + ) const ancestorsElement = useTemplateRef('ancestors') - const treeScrollCompensation = computed(() => isTreeView.value) + const treeScrollCompensation = computed( + () => isExpanded.value && isTreeView.value, + ) const { heightChart: heightChartAncestors, changeSuspendState: changeSuspendStateAncestors, updateVirtualHeight: updateVirtualHeightAncestors, + reset: resetTreeScrollVirtualization, } = useVirtualScrolling({ - list: currentAncestors, + context: statusId, + list: currentAncestorsLite, body: ancestorsElement, scrollPositionInstance: scroller, scrollCompensation: treeScrollCompensation, @@ -308,6 +271,11 @@ export default { } } + watch(statusId, (neu, old) => { + resetLinearScrollVirtualization() + resetTreeScrollVirtualization() + }) + const treeViewIsSimple = computed( () => !mergedConfig.value.conversationTreeAdvanced, ) @@ -333,7 +301,7 @@ export default { toggleExpanded, // # Focus - focused, + focusedId, setFocused, // # Main things diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 4e10bdcd0..7344b8bb7 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -98,19 +98,19 @@ @@ -145,11 +145,11 @@ useStatusesStore().allStatuses.get(id) - const getConversationId = (statusId) => { - const status = getStatusObject(statusId) - return get( - status, - 'retweeted_status.statusnet_conversation_id', - get(status, 'statusnet_conversation_id'), - ) - } - const loadError = ref(null) - const currentStatus = computed(() => getStatusObject(statusId.value)) - const mainStatus = computed( - () => currentStatus.value?.retweeted_status ?? currentStatus.value, + const { status: currentStatus, mainStatus } = useMainStatus(statusId) + + // # Config + const { mergedConfig } = storeToRefs(useMergedConfigStore()) + const { mastoUserSocketStatus } = storeToRefs(useStreamingStore()) + const streamingEnabled = computed( + () => + mergedConfig.value.useStreamingApi && + mastoUserSocketStatus === WSConnectionStatus.JOINED, + ) + + // # Focus + const focusedId = ref(null) + const { mainStatus: focusedStatus } = useMainStatus(focusedId) + const setFocused = (id) => { + focusedId.value = id + } + provide('focusedId', focusedId) + + watch(mainStatus, (newStatus, oldStatus) => { + if (newStatus) setFocused(newStatus.id) + if (newStatus.id !== oldStatus.id) { + fetchConversation() + } + }) + + watch( + expanded, + (value) => { + setFocused(value ? statusId.value : null) + }, + { immediate: true }, + ) + + watch( + focusedStatus, + (newVal, oldVal) => { + if (!newVal) return + if (newVal?.id === oldVal?.id) return // prevents infinite loop + if (!streamingEnabled.value) { + useStatusesStore().fetchStatus(newVal.id) + } + + useStatusesStore().fetchFavsAndRepeats(newVal.id) + useStatusesStore().fetchEmojiReactions(newVal.id) + }, + { immediate: true }, ) const sortById = (a, b) => { @@ -43,7 +82,9 @@ export function useConversation(statusId, expanded) { return idA < idB ? -1 : 1 } } - const conversationId = computed(() => getConversationId(statusId.value)) + const conversationId = computed( + () => mainStatus.value.statusnet_conversation_id, + ) const conversation = computed(() => { if (!currentStatus.value) { return [] @@ -117,6 +158,8 @@ export function useConversation(statusId, expanded) { } return { + focusedId, + setFocused, currentStatus, mainStatus, conversation, diff --git a/src/composables/useMainStatus.js b/src/composables/useMainStatus.js new file mode 100644 index 000000000..be9e58225 --- /dev/null +++ b/src/composables/useMainStatus.js @@ -0,0 +1,24 @@ +import { computed, toValue } from 'vue' + +import { useStatusesStore } from 'src/stores/statuses.js' + +export function useMainStatus(statusId) { + const getStatusObject = (id) => useStatusesStore().allStatuses.get(id) + + const status = computed(() => getStatusObject(toValue(statusId))) + + const mainStatus = computed(() => { + if (!status.value) return + const retweetedStatusId = status.value.retweeted_status?.id + if (retweetedStatusId) { + return getStatusObject(retweetedStatusId) + } else { + return status.value + } + }) + + return { + status, + mainStatus, + } +} diff --git a/src/composables/useVirtualScrolling.js b/src/composables/useVirtualScrolling.js index d466fc059..af80b274e 100644 --- a/src/composables/useVirtualScrolling.js +++ b/src/composables/useVirtualScrolling.js @@ -1,4 +1,4 @@ -import { last } from 'lodash-es' +import { first, last } from 'lodash-es' import { computed, nextTick, ref, toValue, watch } from 'vue' import { useWindowSize } from 'src/composables/useWindowSize.js' @@ -19,6 +19,8 @@ export function useVirtualScrolling({ // How to handle collapse/expansion (going from 0 elements to full and back) // - false - don't do scroll compensation at all // - 'height' - compensate scroll according to list's height + // - 'item' - same as height but uses anchor element's top offset + // instead of whole height collapseMode, // Anchor. Set of IDs of element relative to which do scroll compensation anchorIds, @@ -53,7 +55,8 @@ export function useVirtualScrolling({ } })() const suspendable = !unsuspendibleIds.value.has(id) - return { id, height, suspendable, item } + const real = heights.value.has(id) + return { id, height, suspendable, real } }) // Walk over the list to set top offsets @@ -68,59 +71,7 @@ export function useVirtualScrolling({ heights.value.set(id, height) } - // ## Scroll compensation const { y: scrollY, scrollBy } = scrollPositionInstance - watch(heightChart, async (newVal, oldVal) => { - if (!toValue(scrollCompensation)) return - if (newVal.length === 0 && oldVal.length === 0) return - pauseWatchers() - - const expansion = oldVal.length === 0 && newVal.length !== 0 - const collapse = oldVal.length !== 0 && newVal.length === 0 - - const diff = (() => { - if (expansion || collapse) { - if (toValue(collapseMode) === 'height') { - const oldBottomElement = last(oldVal) - const newBottomElement = last(newVal) - - if (expansion) { - return newBottomElement.top + newBottomElement.height - } else if (collapse) { - return 0 - oldBottomElement.top - oldBottomElement.height - } - } - return 0 - } else if (toValue(anchorIds) != null) { - const anchorOld = oldVal.find(({ id }) => toValue(anchorIds).has(id)) - const anchorNew = newVal.find(({ id }) => toValue(anchorIds).has(id)) - if (anchorOld == null) { - throw new Error('Anchor not found!') - } - - const disappeared = anchorOld != null && anchorNew == null - if (disappeared) { - throw new Error('Anchor disappeared!') - } - - return anchorNew.top - anchorOld.top - } else { - return 0 - } - })() - - console.log(diff) - if (diff !== 0) { - // Scroll by amount offset changed to keep it in view - topScrollBoundary.value += diff - bottomScrollBoundary.value += diff - await nextTick() - await scrollBy(0, diff) - } - - resumeWatchers() - }) - const { height: windowHeight } = useWindowSize() // Real scroll boundary, relative to body's bounds @@ -170,37 +121,93 @@ export function useVirtualScrolling({ () => getPlaceholderHeight().value * (toValue(buffer) ?? 3), ) - const heightChartGrouped = computed(() => { - // Determine visibility state - const chart = heightChart.value.map((heightChartItem) => { - const itemTopBoundary = heightChartItem.top - const itemBottomBoundary = heightChartItem.top + heightChartItem.height + const checkVisible = ({ top, height }) => { + const itemTopBoundary = top + const itemBottomBoundary = top + height - // Include buffer zone - const finalTopScrollBoundary = topScrollBoundary.value - bufferZone.value - const finalBottomScrollBoundary = - bottomScrollBoundary.value + bufferZone.value + // Include buffer zone + const finalTopScrollBoundary = topScrollBoundary.value - bufferZone.value + const finalBottomScrollBoundary = + bottomScrollBoundary.value + bufferZone.value - // To be visible, item's bottom boundary shoud be below top scroll boundary) - const isBelowTopBoundary = itemBottomBoundary > finalTopScrollBoundary - // To be visible, item's top boundary shoud be above bottom scroll boundary) - const isAboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary - // This accounts for the case where item's boundaries exceed scroll boundary + // To be visible, item's bottom boundary shoud be below top scroll boundary) + const isBelowTopBoundary = itemBottomBoundary > finalTopScrollBoundary + // To be visible, item's top boundary shoud be above bottom scroll boundary) + const isAboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary + // This accounts for the case where item's boundaries exceed scroll boundary - return { - ...heightChartItem, - visible: isBelowTopBoundary && isAboveBottomBoundary, + return isBelowTopBoundary && isAboveBottomBoundary + } + + const heightChartVisibility = computed(() => + heightChart.value.map((heightChartItem) => ({ + ...heightChartItem, + visible: checkVisible(heightChartItem), + })), + ) + + // ## Scroll compensation + watch( + heightChart, + async (newVal, oldVal) => { + if (!toValue(scrollCompensation)) return + if (newVal.length === 0 && oldVal.length === 0) return + + const diff = (() => { + const expansion = oldVal.length === 0 && newVal.length !== 0 + const collapse = oldVal.length !== 0 && newVal.length === 0 + + if (expansion) { + if (toValue(collapseMode) === 'height') { + const newBottomElement = last(newVal) + + return newBottomElement.top + newBottomElement.height + } else if (toValue(collapseMode) === 'item') { + const element = newVal.find(({ id }) => toValue(anchorIds).has(id)) + + return element.top + } else { + return 0 + } + } else if (collapse) { + const oldBottomElement = last(oldVal) + + return 0 - oldBottomElement.top - oldBottomElement.height + } else { + const oldVisible = oldVal.filter((item) => checkVisible(item)) + const oldItem = first(oldVisible) + if (!oldItem) return 0 // probably out of bounds in timeline + const oldItemUpdated = newVal.find(({ id }) => id === oldItem.id) + if (!oldItemUpdated) return 0 // context change? + return ( + oldItemUpdated.top - + oldItem.top - + (oldItem.height - oldItemUpdated.height) + ) + } + })() + + if (diff !== 0) { + // Scroll by amount offset changed to keep it in view + topScrollBoundary.value += diff + bottomScrollBoundary.value += diff + await scrollBy(0, diff) + await nextTick() } - }) + resumeWatchers() + }, + { flush: 'post' }, + ) + + const heightChartGrouped = computed(() => // Group invisible items into spacers - return chart.reduce((acc, heightChartItem) => { - const { suspendable, visible, height, top, bottom, id, item } = - heightChartItem + heightChartVisibility.value.reduce((acc, heightChartItem) => { + const { suspendable, visible, height, top, bottom, id } = heightChartItem // Bottom value isn't really used otherwise for debugging const present = visible || !suspendable if (present) { - return [...acc, { type: 'item', height, top, bottom, id, item }] + return [...acc, { type: 'item', height, top, bottom, id }] } else { // Reusing previous item if possible const previousItem = acc[acc.length - 1] @@ -231,8 +238,13 @@ export function useVirtualScrolling({ return [...acc, spacer] } } - }, []) - }) + }, []), + ) + + const reset = async () => { + unsuspendibleIds.value = new Set() + heights.value = new Map() + } return { heightChart: heightChartGrouped, @@ -241,5 +253,6 @@ export function useVirtualScrolling({ pauseWatchers, resumeWatchers, updateBoundaries, + reset, } }