1
0
mirror of https://git.pleroma.social/sjw/pleroma-fe.git synced 2024-12-23 02:45:26 +01:00

Timeline virtual scrolling

This commit is contained in:
Shpuld Shpludson 2020-09-29 10:18:37 +00:00
parent 38189ee838
commit f174f289a9
21 changed files with 204 additions and 39 deletions

View File

@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased] ## [Unreleased]
### Added
- New option to optimize timeline rendering to make the site more responsive (enabled by default)
## [Unreleased patch] ## [Unreleased patch]
### Changed ### Changed

View File

@ -80,6 +80,8 @@
class="video" class="video"
:attachment="attachment" :attachment="attachment"
:controls="allowPlay" :controls="allowPlay"
@play="$emit('play')"
@pause="$emit('pause')"
/> />
<i <i
v-if="!allowPlay" v-if="!allowPlay"
@ -93,6 +95,8 @@
:alt="attachment.description" :alt="attachment.description"
:title="attachment.description" :title="attachment.description"
controls controls
@play="$emit('play')"
@pause="$emit('pause')"
/> />
<div <div

View File

@ -44,7 +44,8 @@ const conversation = {
'isPage', 'isPage',
'pinnedStatusIdsObject', 'pinnedStatusIdsObject',
'inProfile', 'inProfile',
'profileUserId' 'profileUserId',
'virtualHidden'
], ],
created () { created () {
if (this.isPage) { if (this.isPage) {
@ -52,6 +53,13 @@ const conversation = {
} }
}, },
computed: { computed: {
hideStatus () {
if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
return this.virtualHidden && this.$refs.statusComponent[0].suspendable
} else {
return this.virtualHidden
}
},
status () { status () {
return this.$store.state.statuses.allStatusesObject[this.statusId] return this.$store.state.statuses.allStatusesObject[this.statusId]
}, },
@ -102,6 +110,10 @@ const conversation = {
}, },
isExpanded () { isExpanded () {
return this.expanded || this.isPage return this.expanded || this.isPage
},
hiddenStyle () {
const height = (this.status && this.status.virtualHeight) || '120px'
return this.virtualHidden ? { height } : {}
} }
}, },
components: { components: {
@ -121,6 +133,12 @@ const conversation = {
if (value) { if (value) {
this.fetchConversation() this.fetchConversation()
} }
},
virtualHidden (value) {
this.$store.dispatch(
'setVirtualHeight',
{ statusId: this.statusId, height: `${this.$el.clientHeight}px` }
)
} }
}, },
methods: { methods: {

View File

@ -1,5 +1,7 @@
<template> <template>
<div <div
v-if="!hideStatus"
:style="hiddenStyle"
class="Conversation" class="Conversation"
:class="{ '-expanded' : isExpanded, 'panel' : isExpanded }" :class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
> >
@ -18,6 +20,7 @@
<status <status
v-for="status in conversation" v-for="status in conversation"
:key="status.id" :key="status.id"
ref="statusComponent"
:inline-expanded="collapsable && isExpanded" :inline-expanded="collapsable && isExpanded"
:statusoid="status" :statusoid="status"
:expandable="!isExpanded" :expandable="!isExpanded"
@ -33,6 +36,10 @@
@toggleExpanded="toggleExpanded" @toggleExpanded="toggleExpanded"
/> />
</div> </div>
<div
v-else
:style="hiddenStyle"
/>
</template> </template>
<script src="./conversation.js"></script> <script src="./conversation.js"></script>
@ -53,8 +60,8 @@
.conversation-status { .conversation-status {
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
border-left: 4px solid $fallback--cRed; border-left-color: $fallback--cRed;
border-left: 4px solid var(--cRed, $fallback--cRed); border-left-color: var(--cRed, $fallback--cRed);
} }
.conversation-status:last-child { .conversation-status:last-child {

View File

@ -1,5 +1,4 @@
import Popover from '../popover/popover.vue' import Popover from '../popover/popover.vue'
import { mapGetters } from 'vuex'
const ReactButton = { const ReactButton = {
props: ['status'], props: ['status'],
@ -35,7 +34,9 @@ const ReactButton = {
} }
return this.$store.state.instance.emoji || [] return this.$store.state.instance.emoji || []
}, },
...mapGetters(['mergedConfig']) mergedConfig () {
return this.$store.getters.mergedConfig
}
} }
} }

View File

@ -1,4 +1,3 @@
import { mapGetters } from 'vuex'
const RetweetButton = { const RetweetButton = {
props: ['status', 'loggedIn', 'visibility'], props: ['status', 'loggedIn', 'visibility'],
@ -28,7 +27,9 @@ const RetweetButton = {
'animate-spin': this.animated 'animate-spin': this.animated
} }
}, },
...mapGetters(['mergedConfig']) mergedConfig () {
return this.$store.getters.mergedConfig
}
} }
} }

View File

@ -58,6 +58,11 @@
{{ $t('settings.emoji_reactions_on_timeline') }} {{ $t('settings.emoji_reactions_on_timeline') }}
</Checkbox> </Checkbox>
</li> </li>
<li>
<Checkbox v-model="virtualScrolling">
{{ $t('settings.virtual_scrolling') }}
</Checkbox>
</li>
</ul> </ul>
</div> </div>

View File

@ -15,7 +15,6 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import { muteWordHits } from '../../services/status_parser/status_parser.js' import { muteWordHits } from '../../services/status_parser/status_parser.js'
import { unescape, uniqBy } from 'lodash' import { unescape, uniqBy } from 'lodash'
import { mapGetters, mapState } from 'vuex'
const Status = { const Status = {
name: 'Status', name: 'Status',
@ -54,6 +53,8 @@ const Status = {
replying: false, replying: false,
unmuted: false, unmuted: false,
userExpanded: false, userExpanded: false,
mediaPlaying: [],
suspendable: true,
error: null error: null
} }
}, },
@ -157,7 +158,7 @@ const Status = {
return this.mergedConfig.hideFilteredStatuses return this.mergedConfig.hideFilteredStatuses
}, },
hideStatus () { hideStatus () {
return this.deleted || (this.muted && this.hideFilteredStatuses) return this.deleted || (this.muted && this.hideFilteredStatuses) || this.virtualHidden
}, },
isFocused () { isFocused () {
// retweet or root of an expanded conversation // retweet or root of an expanded conversation
@ -207,11 +208,18 @@ const Status = {
hidePostStats () { hidePostStats () {
return this.mergedConfig.hidePostStats return this.mergedConfig.hidePostStats
}, },
...mapGetters(['mergedConfig']), currentUser () {
...mapState({ return this.$store.state.users.currentUser
betterShadow: state => state.interface.browserSupport.cssFilter, },
currentUser: state => 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
}
}, },
methods: { methods: {
visibilityIcon (visibility) { visibilityIcon (visibility) {
@ -251,6 +259,12 @@ const Status = {
}, },
generateUserProfileLink (id, name) { generateUserProfileLink (id, name) {
return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames) 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)
} }
}, },
watch: { watch: {
@ -280,6 +294,9 @@ const Status = {
if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) { if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
this.$store.dispatch('fetchFavs', this.status.id) this.$store.dispatch('fetchFavs', this.status.id)
} }
},
'isSuspendable': function (val) {
this.suspendable = val
} }
}, },
filters: { filters: {

View File

@ -25,6 +25,11 @@ $status-margin: 0.75em;
--icon: var(--selectedPostIcon, $fallback--icon); --icon: var(--selectedPostIcon, $fallback--icon);
} }
&.-conversation {
border-left-width: 4px;
border-left-style: solid;
}
.status-container { .status-container {
display: flex; display: flex;
padding: $status-margin; padding: $status-margin;

View File

@ -16,7 +16,7 @@
/> />
</div> </div>
<template v-if="muted && !isPreview"> <template v-if="muted && !isPreview">
<div class="status-csontainer muted"> <div class="status-container muted">
<small class="status-username"> <small class="status-username">
<i <i
v-if="muted && retweet" v-if="muted && retweet"
@ -227,6 +227,7 @@
</span> </span>
</a> </a>
</StatusPopover> </StatusPopover>
<span <span
v-else v-else
class="reply-to-no-popover" class="reply-to-no-popover"
@ -272,6 +273,8 @@
:no-heading="noHeading" :no-heading="noHeading"
:highlight="highlight" :highlight="highlight"
:focused="isFocused" :focused="isFocused"
@mediaplay="addMediaPlaying($event)"
@mediapause="removeMediaPlaying($event)"
/> />
<transition name="fade"> <transition name="fade">
@ -354,6 +357,7 @@
@onSuccess="clearError" @onSuccess="clearError"
/> />
</div> </div>
</div> </div>
</div> </div>
<div <div
@ -376,4 +380,5 @@
</template> </template>
<script src="./status.js" ></script> <script src="./status.js" ></script>
<style src="./status.scss" lang="scss"></style> <style src="./status.scss" lang="scss"></style>

View File

@ -107,6 +107,8 @@
:attachment="attachment" :attachment="attachment"
:allow-play="true" :allow-play="true"
:set-media="setMedia()" :set-media="setMedia()"
@play="$emit('mediaplay', attachment.id)"
@pause="$emit('mediapause', attachment.id)"
/> />
<gallery <gallery
v-if="galleryAttachments.length > 0" v-if="galleryAttachments.length > 0"

View File

@ -19,14 +19,16 @@ const StillImage = {
}, },
methods: { methods: {
onLoad () { onLoad () {
this.imageLoadHandler && this.imageLoadHandler(this.$refs.src) const image = this.$refs.src
if (!image) return
this.imageLoadHandler && this.imageLoadHandler(image)
const canvas = this.$refs.canvas const canvas = this.$refs.canvas
if (!canvas) return if (!canvas) return
const width = this.$refs.src.naturalWidth const width = image.naturalWidth
const height = this.$refs.src.naturalHeight const height = image.naturalHeight
canvas.width = width canvas.width = width
canvas.height = height canvas.height = height
canvas.getContext('2d').drawImage(this.$refs.src, 0, 0, width, height) canvas.getContext('2d').drawImage(image, 0, 0, width, height)
}, },
onError () { onError () {
this.imageLoadError && this.imageLoadError() this.imageLoadError && this.imageLoadError()

View File

@ -33,7 +33,8 @@ const Timeline = {
return { return {
paused: false, paused: false,
unfocused: false, unfocused: false,
bottomedOut: false bottomedOut: false,
virtualScrollIndex: 0
} }
}, },
components: { components: {
@ -78,6 +79,16 @@ const Timeline = {
}, },
pinnedStatusIdsObject () { pinnedStatusIdsObject () {
return keyBy(this.pinnedStatusIds) return keyBy(this.pinnedStatusIds)
},
statusesToDisplay () {
const amount = this.timeline.visibleStatuses.length
const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id)
},
virtualScrollingEnabled () {
return this.$store.getters.mergedConfig.virtualScrolling
} }
}, },
created () { created () {
@ -85,7 +96,7 @@ const Timeline = {
const credentials = store.state.users.currentUser.credentials const credentials = store.state.users.currentUser.credentials
const showImmediately = this.timeline.visibleStatuses.length === 0 const showImmediately = this.timeline.visibleStatuses.length === 0
window.addEventListener('scroll', this.scrollLoad) window.addEventListener('scroll', this.handleScroll)
if (store.state.api.fetchers[this.timelineName]) { return false } if (store.state.api.fetchers[this.timelineName]) { return false }
@ -104,9 +115,10 @@ const Timeline = {
this.unfocused = document.hidden this.unfocused = document.hidden
} }
window.addEventListener('keydown', this.handleShortKey) window.addEventListener('keydown', this.handleShortKey)
setTimeout(this.determineVisibleStatuses, 250)
}, },
destroyed () { destroyed () {
window.removeEventListener('scroll', this.scrollLoad) window.removeEventListener('scroll', this.handleScroll)
window.removeEventListener('keydown', this.handleShortKey) window.removeEventListener('keydown', this.handleShortKey)
if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false) if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
this.$store.commit('setLoading', { timeline: this.timelineName, value: false }) this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
@ -146,6 +158,48 @@ const Timeline = {
} }
}) })
}, 1000, this), }, 1000, this),
determineVisibleStatuses () {
if (!this.$refs.timeline) return
if (!this.virtualScrollingEnabled) return
const statuses = this.$refs.timeline.children
const cappedScrollIndex = Math.max(0, Math.min(this.virtualScrollIndex, statuses.length - 1))
if (statuses.length === 0) return
const height = Math.max(document.body.offsetHeight, window.pageYOffset)
const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5)
// Start from approximating the index of some visible status by using the
// the center of the screen on the timeline.
let approxIndex = Math.floor(statuses.length * (centerOfScreen / height))
let err = statuses[approxIndex].getBoundingClientRect().y
// if we have a previous scroll index that can be used, test if it's
// closer than the previous approximation, use it if so
const virtualScrollIndexY = statuses[cappedScrollIndex].getBoundingClientRect().y
if (Math.abs(err) > virtualScrollIndexY) {
approxIndex = cappedScrollIndex
err = virtualScrollIndexY
}
// if the status is too far from viewport, check the next/previous ones if
// they happen to be better
while (err < -20 && approxIndex < statuses.length - 1) {
err += statuses[approxIndex].offsetHeight
approxIndex++
}
while (err > window.innerHeight + 100 && approxIndex > 0) {
approxIndex--
err -= statuses[approxIndex].offsetHeight
}
// this status is now the center point for virtual scrolling and visible
// statuses will be nearby statuses before and after it
this.virtualScrollIndex = approxIndex
},
scrollLoad (e) { scrollLoad (e) {
const bodyBRect = document.body.getBoundingClientRect() const bodyBRect = document.body.getBoundingClientRect()
const height = Math.max(bodyBRect.height, -(bodyBRect.y)) const height = Math.max(bodyBRect.height, -(bodyBRect.y))
@ -155,6 +209,10 @@ const Timeline = {
this.fetchOlderStatuses() this.fetchOlderStatuses()
} }
}, },
handleScroll: throttle(function (e) {
this.determineVisibleStatuses()
this.scrollLoad(e)
}, 200),
handleVisibilityChange () { handleVisibilityChange () {
this.unfocused = document.hidden this.unfocused = document.hidden
} }

View File

@ -32,7 +32,10 @@
</div> </div>
</div> </div>
<div :class="classes.body"> <div :class="classes.body">
<div class="timeline"> <div
ref="timeline"
class="timeline"
>
<template v-for="statusId in pinnedStatusIds"> <template v-for="statusId in pinnedStatusIds">
<conversation <conversation
v-if="timeline.statusesObject[statusId]" v-if="timeline.statusesObject[statusId]"
@ -54,6 +57,7 @@
:collapsable="true" :collapsable="true"
:in-profile="inProfile" :in-profile="inProfile"
:profile-user-id="userId" :profile-user-id="userId"
:virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
/> />
</template> </template>
</div> </div>

View File

@ -3,27 +3,48 @@ const VideoAttachment = {
props: ['attachment', 'controls'], props: ['attachment', 'controls'],
data () { data () {
return { return {
loopVideo: this.$store.getters.mergedConfig.loopVideo blocksSuspend: false,
// Start from true because removing "loop" property seems buggy in Vue
hasAudio: true
}
},
computed: {
loopVideo () {
if (this.$store.getters.mergedConfig.loopVideoSilentOnly) {
return !this.hasAudio
}
return this.$store.getters.mergedConfig.loopVideo
} }
}, },
methods: { methods: {
onVideoDataLoad (e) { onPlaying (e) {
this.setHasAudio(e)
if (this.loopVideo) {
this.$emit('play', { looping: true })
return
}
this.$emit('play')
},
onPaused (e) {
this.$emit('pause')
},
setHasAudio (e) {
const target = e.srcElement || e.target const target = e.srcElement || e.target
// If hasAudio is false, we've already marked this video to not have audio,
// a video can't gain audio out of nowhere so don't bother checking again.
if (!this.hasAudio) return
if (typeof target.webkitAudioDecodedByteCount !== 'undefined') { if (typeof target.webkitAudioDecodedByteCount !== 'undefined') {
// non-zero if video has audio track // non-zero if video has audio track
if (target.webkitAudioDecodedByteCount > 0) { if (target.webkitAudioDecodedByteCount > 0) return
this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
}
} else if (typeof target.mozHasAudio !== 'undefined') {
// true if video has audio track
if (target.mozHasAudio) {
this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
}
} else if (typeof target.audioTracks !== 'undefined') {
if (target.audioTracks.length > 0) {
this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
}
} }
if (typeof target.mozHasAudio !== 'undefined') {
// true if video has audio track
if (target.mozHasAudio) return
}
if (typeof target.audioTracks !== 'undefined') {
if (target.audioTracks.length > 0) return
}
this.hasAudio = false
} }
} }
} }

View File

@ -7,7 +7,8 @@
:alt="attachment.description" :alt="attachment.description"
:title="attachment.description" :title="attachment.description"
playsinline playsinline
@loadeddata="onVideoDataLoad" @playing="onPlaying"
@pause="onPaused"
/> />
</template> </template>

View File

@ -430,6 +430,7 @@
"false": "no", "false": "no",
"true": "yes" "true": "yes"
}, },
"virtual_scrolling": "Optimize timeline rendering",
"fun": "Fun", "fun": "Fun",
"greentext": "Meme arrows", "greentext": "Meme arrows",
"notifications": "Notifications", "notifications": "Notifications",

View File

@ -65,7 +65,8 @@ export const defaultState = {
useContainFit: false, useContainFit: false,
greentext: undefined, // instance default greentext: undefined, // instance default
hidePostStats: undefined, // instance default hidePostStats: undefined, // instance default
hideUserStats: undefined // instance default hideUserStats: undefined, // instance default
virtualScrolling: undefined // instance default
} }
// caching the instance default properties // caching the instance default properties

View File

@ -41,6 +41,7 @@ const defaultState = {
sidebarRight: false, sidebarRight: false,
subjectLineBehavior: 'email', subjectLineBehavior: 'email',
theme: 'pleroma-dark', theme: 'pleroma-dark',
virtualScrolling: true,
// Nasty stuff // Nasty stuff
customEmoji: [], customEmoji: [],

View File

@ -568,6 +568,9 @@ export const mutations = {
updateStatusWithPoll (state, { id, poll }) { updateStatusWithPoll (state, { id, poll }) {
const status = state.allStatusesObject[id] const status = state.allStatusesObject[id]
status.poll = poll status.poll = poll
},
setVirtualHeight (state, { statusId, height }) {
state.allStatusesObject[statusId].virtualHeight = height
} }
} }
@ -753,6 +756,9 @@ const statuses = {
store.commit('addNewStatuses', { statuses: data.statuses }) store.commit('addNewStatuses', { statuses: data.statuses })
return data return data
}) })
},
setVirtualHeight ({ commit }, { statusId, height }) {
commit('setVirtualHeight', { statusId, height })
} }
}, },
mutations mutations

View File

@ -539,8 +539,10 @@ const fetchTimeline = ({
const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&') const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
url += `?${queryString}` url += `?${queryString}`
let status = '' let status = ''
let statusText = '' let statusText = ''
let pagination = {} let pagination = {}
return fetch(url, { headers: authHeaders(credentials) }) return fetch(url, { headers: authHeaders(credentials) })
.then((data) => { .then((data) => {