Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #3875 from h3poteto/fix/unread-scrolling 

Revert modifying scroll position
This commit is contained in:
AkiraFukushima 2022-12-11 22:03:58 +09:00 committed by GitHub
parent cb18e6c02c 1917cfba6d
commit 3b9caadbcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 48 additions and 686 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spec/renderer/integration/store/TimelineSpace/Contents/DirectMessages.spec.ts
View File

@ -135,7 +135,6 @@ let state = (): DirectMessagesState => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: []
}
}
@ -204,7 +203,6 @@ describe('Home', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1]
}
}

2
spec/renderer/integration/store/TimelineSpace/Contents/Hashtag/Tag.spec.ts
View File

@ -120,7 +120,6 @@ let state = (): TagState => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: []
}
}
@ -195,7 +194,6 @@ describe('Home', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1]
}
}

6
spec/renderer/integration/store/TimelineSpace/Contents/Home.spec.ts
View File

@ -121,8 +121,7 @@ let state = (): HomeState => {
heading: true,
timeline: [],
showReblogs: true,
showReplies: true,
scrolling: false
showReplies: true
}
}
@ -198,8 +197,7 @@ describe('Home', () => {
timeline: [status1],
unreadTimeline: [],
showReblogs: true,
showReplies: true,
scrolling: false
showReplies: true
}
}
})

2
spec/renderer/integration/store/TimelineSpace/Contents/Lists/Show.spec.ts
View File

@ -122,7 +122,6 @@ let state = (): ShowState => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: []
}
}
@ -195,7 +194,6 @@ describe('Lists/Show', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1]
}
}

2
spec/renderer/integration/store/TimelineSpace/Contents/Local.spec.ts
View File

@ -119,7 +119,6 @@ let state = (): LocalState => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: []
}
}
@ -187,7 +186,6 @@ describe('Home', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1]
}
}

3
spec/renderer/integration/store/TimelineSpace/Contents/Mentions.spec.ts
View File

@ -190,7 +190,6 @@ describe('Mentions', () => {
return {
lazyLoading: true,
heading: true,
scrolling: false,
mentions: []
}
}
@ -207,7 +206,6 @@ describe('Mentions', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: [mention, reblog]
}
}
@ -238,7 +236,6 @@ describe('Mentions', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: [mention, favourite, reblog, follow]
}
}

2
spec/renderer/integration/store/TimelineSpace/Contents/Notifications.spec.ts
View File

@ -195,7 +195,6 @@ let state = (): NotificationsState => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
notifications: []
}
}
@ -270,7 +269,6 @@ describe('Notifications', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
notifications: [notification1]
}
}

6
spec/renderer/integration/store/TimelineSpace/Contents/Public.spec.ts
View File

@ -119,8 +119,7 @@ let state = (): PublicState => {
return {
lazyLoading: false,
heading: true,
timeline: [],
scrolling: false
timeline: []
}
}
@ -187,8 +186,7 @@ describe('Home', () => {
return {
lazyLoading: false,
heading: true,
timeline: [status1],
scrolling: false
timeline: [status1]
}
}
})

6
spec/renderer/unit/store/TimelineSpace/Contents/DirectMessages.spec.ts
View File

@ -139,7 +139,6 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -154,7 +153,6 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, rebloggedStatus]
}
})
@ -172,7 +170,6 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -187,7 +184,6 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})
@ -204,7 +200,6 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status2, status1]
}
})
@ -219,7 +214,6 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})

6
spec/renderer/unit/store/TimelineSpace/Contents/Hashtag/Tag.spec.ts
View File

@ -139,7 +139,6 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -154,7 +153,6 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, rebloggedStatus]
}
})
@ -172,7 +170,6 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -187,7 +184,6 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})
@ -204,7 +200,6 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status2, status1]
}
})
@ -219,7 +214,6 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})

10
spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts
View File

@ -100,7 +100,6 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [],
showReblogs: true,
showReplies: true
@ -128,7 +127,6 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1],
showReblogs: true,
showReplies: true
@ -145,7 +143,6 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1],
showReblogs: true,
showReplies: true
@ -164,7 +161,6 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status1],
showReblogs: true,
showReplies: true
@ -180,7 +176,6 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status2, status1],
showReblogs: true,
showReplies: true
@ -199,7 +194,6 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1],
showReblogs: true,
showReplies: true
@ -217,7 +211,6 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1, status2],
showReblogs: true,
showReplies: true
@ -274,7 +267,6 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2],
showReblogs: true,
showReplies: true
@ -294,7 +286,6 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1, status2],
showReblogs: true,
showReplies: true
@ -346,7 +337,6 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2],
showReblogs: true,
showReplies: true

6
spec/renderer/unit/store/TimelineSpace/Contents/Lists/Show.spec.ts
View File

@ -139,7 +139,6 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -154,7 +153,6 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, rebloggedStatus]
}
})
@ -172,7 +170,6 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -187,7 +184,6 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})
@ -204,7 +200,6 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status2, status1]
}
})
@ -219,7 +214,6 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})

6
spec/renderer/unit/store/TimelineSpace/Contents/Local.spec.ts
View File

@ -139,7 +139,6 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -154,7 +153,6 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, rebloggedStatus]
}
})
@ -171,7 +169,6 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -186,7 +183,6 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})
@ -203,7 +199,6 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status2, status1]
}
})
@ -218,7 +213,6 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})

9
spec/renderer/unit/store/TimelineSpace/Contents/Mentions.spec.ts
View File

@ -176,7 +176,6 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: []
}
})
@ -188,7 +187,6 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: [notification1]
}
})
@ -203,7 +201,6 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: [notification2, notification1]
}
})
@ -220,7 +217,6 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
mentions: [notification1]
}
})
@ -235,7 +231,6 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
mentions: [notification2, notification1]
}
})
@ -252,7 +247,6 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
mentions: [notification2]
}
})
@ -267,7 +261,6 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
mentions: [notification2, notification1]
}
})
@ -287,7 +280,6 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: [notification2, notification1]
}
})
@ -301,7 +293,6 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: [notification2, notification1]
}
})

5
spec/renderer/unit/store/TimelineSpace/Contents/Notifications.spec.ts
View File

@ -178,7 +178,6 @@ describe('TimelineSpace/Contents/Notifications', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
notifications: [notification2, notification1]
}
})
@ -203,7 +202,6 @@ describe('TimelineSpace/Contents/Notifications', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
notifications: [notification1]
}
})
@ -218,7 +216,6 @@ describe('TimelineSpace/Contents/Notifications', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
notifications: [notification2, notification1]
}
})
@ -235,7 +232,6 @@ describe('TimelineSpace/Contents/Notifications', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
notifications: [notification1]
}
})
@ -249,7 +245,6 @@ describe('TimelineSpace/Contents/Notifications', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
notifications: [notification2, notification1]
}
})

8
spec/renderer/unit/store/TimelineSpace/Contents/Public.spec.ts
View File

@ -139,8 +139,7 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
timeline: [status2, status1],
scrolling: false
timeline: [status2, status1]
}
})
it('should be deleted', () => {
@ -154,7 +153,6 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: true,
timeline: [status2, rebloggedStatus]
}
})
@ -172,7 +170,6 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: true,
timeline: [status2, status1]
}
})
@ -187,7 +184,6 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: true,
timeline: [rebloggedStatus, status2, status1]
}
})
@ -204,7 +200,6 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: true,
timeline: [status2, status1]
}
})
@ -219,7 +214,6 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: true,
timeline: [rebloggedStatus, status2, status1]
}
})

70
src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
View File

@ -13,7 +13,6 @@
v-on:delete="deleteToot"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
>
</toot>
</DynamicScrollerItem>
@ -39,7 +38,6 @@ import { Entity } from 'megalodon'
import useReloadable from '@/components/utils/reloadable'
import Toot from '@/components/organisms/Toot.vue'
import { EventEmitter } from '@/components/event'
import { ScrollPosition } from '@/components/utils/scroll'
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/DirectMessages'
import { MUTATION_TYPES as SIDE_MENU_MUTATION } from '@/store/TimelineSpace/SideMenu'
import { MUTATION_TYPES as TIMELINE_MUTATION, ACTION_TYPES as TIMELINE_ACTION } from '@/store/TimelineSpace'
@ -58,16 +56,11 @@ export default defineComponent({
const { j, k, Ctrl_r } = useMagicKeys()
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
const observer = ref<ResizeObserver | null>(null)
const resizeTime = ref<moment.Moment | null>(null)
const scrollTime = ref<moment.Moment | null>(null)
const scroller = ref<any>()
const timeline = computed(() => store.state.TimelineSpace.Contents.DirectMessages.timeline)
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.DirectMessages.lazyLoading)
const heading = computed(() => store.state.TimelineSpace.Contents.DirectMessages.heading)
const scrolling = computed(() => store.state.TimelineSpace.Contents.DirectMessages.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const unreadNotification = computed(() => store.state.TimelineSpace.timelineSetting.unreadNotification)
@ -84,27 +77,11 @@ export default defineComponent({
store.commit(`TimelineSpace/Contents/${CONTENTS_ACTION.CHANGE_LOADING}`, false)
})
}
const el = document.getElementById('scroller')
if (el) {
scrollPosition.value = new ScrollPosition(el)
scrollPosition.value.prepare()
observer.value = new ResizeObserver(() => {
if (scrollPosition.value && !heading.value && !lazyLoading.value && !scrolling.value) {
resizeTime.value = moment()
scrollPosition.value?.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
observer.value.observe(scrollWrapper)
}
})
onBeforeUpdate(() => {
if (store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && heading.value) {
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_DIRECT_MESSAGES_TIMELINE}`, false)
}
if (scrollPosition.value) {
scrollPosition.value.prepare()
}
})
onBeforeUnmount(() => {
if (!unreadNotification.value.direct) {
@ -158,38 +135,18 @@ export default defineComponent({
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.START_DIRECT_MESSAGES_STREAMING}`)
}
const onScroll = (event: Event) => {
if (moment().diff(resizeTime.value) < 500) {
return
}
scrollTime.value = moment()
if (!scrolling.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
}
// for lazyLoading
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
document.getElementById('scroller')!.scrollHeight - 10 &&
!lazyLoading.value
) {
store
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, timeline.value[timeline.value.length - 1])
.then(statuses => {
if (statuses === null) {
return
}
if (statuses.length > 0) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
})
.catch(() => {
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
type: 'error'
})
store.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, timeline.value[timeline.value.length - 1]).catch(() => {
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
type: 'error'
})
})
}
if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
@ -197,14 +154,6 @@ export default defineComponent({
} else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
setTimeout(() => {
const now = moment()
if (now.diff(scrollTime.value) >= 150) {
scrollTime.value = null
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}
}, 150)
}
const updateToot = (message: Entity.Status) => {
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
@ -244,12 +193,6 @@ export default defineComponent({
const focusSidebar = () => {
EventEmitter.emit('focus-sidebar')
}
const sizeChanged = () => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
return {
timeline,
@ -262,8 +205,7 @@ export default defineComponent({
focusToot,
openSideBar,
heading,
upper,
sizeChanged
upper
}
}
})

63
src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
View File

@ -12,7 +12,6 @@
v-on:delete="deleteToot"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
>
</toot>
</DynamicScrollerItem>
@ -37,7 +36,6 @@ import { useRoute } from 'vue-router'
import { useStore } from '@/store'
import Toot from '@/components/organisms/Toot.vue'
import { EventEmitter } from '@/components/event'
import { ScrollPosition } from '@/components/utils/scroll'
import useReloadable from '@/components/utils/reloadable'
import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
@ -58,16 +56,11 @@ export default defineComponent({
const { tag } = toRefs(props)
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
const observer = ref<ResizeObserver | null>(null)
const scrollTime = ref<moment.Moment | null>(null)
const resizeTime = ref<moment.Moment | null>(null)
const scroller = ref<any>(null)
const timeline = computed(() => store.state.TimelineSpace.Contents.Hashtag.Tag.timeline)
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Hashtag.Tag.lazyLoading)
const heading = computed(() => store.state.TimelineSpace.Contents.Hashtag.Tag.heading)
const scrolling = computed(() => store.state.TimelineSpace.Contents.Hashtag.Tag.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
@ -80,27 +73,6 @@ export default defineComponent({
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
})
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
const el = document.getElementById('scroller')
if (el) {
scrollPosition.value = new ScrollPosition(el)
scrollPosition.value.prepare()
observer.value = new ResizeObserver(() => {
if (scrollPosition.value && !heading.value && !lazyLoading.value && !scrolling.value) {
resizeTime.value = moment()
scrollPosition.value.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
observer.value.observe(scrollWrapper)
}
})
onBeforeUpdate(() => {
if (scrollPosition.value) {
scrollPosition.value?.prepare()
}
})
watch(tag, (newTag, _oldTag) => {
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
@ -141,7 +113,6 @@ export default defineComponent({
store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
reset()
EventEmitter.off('focus-timeline')
observer.value?.disconnect()
})
const load = async (tag: string) => {
@ -170,14 +141,6 @@ export default defineComponent({
}
}
const onScroll = (event: Event) => {
if (moment().diff(resizeTime.value) < 500) {
return
}
scrollTime.value = moment()
if (!scrolling.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
}
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
document.getElementById('scroller')!.scrollHeight - 10 &&
@ -188,17 +151,6 @@ export default defineComponent({
tag: tag.value,
status: timeline.value[timeline.value.length - 1]
})
.then(statuses => {
if (statuses === null) {
return
}
if (statuses.length > 0) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
})
.catch(() => {
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
@ -212,14 +164,6 @@ export default defineComponent({
} else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
setTimeout(() => {
const now = moment()
if (now.diff(scrollTime.value) >= 150) {
scrollTime.value = null
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}
}, 150)
}
const updateToot = (toot: Entity.Status) => {
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, toot)
@ -272,12 +216,6 @@ export default defineComponent({
const focusSidebar = () => {
EventEmitter.emit('focus-sidebar')
}
const sizeChanged = () => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
return {
timeline,
@ -288,7 +226,6 @@ export default defineComponent({
deleteToot,
focusSidebar,
focusToot,
sizeChanged,
openSideBar,
heading,
upper

72
src/renderer/components/TimelineSpace/Contents/Home.vue
View File

@ -19,7 +19,6 @@
v-on:delete="deleteToot"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
>
</toot>
</DynamicScrollerItem>
@ -47,7 +46,6 @@ import { useStore } from '@/store'
import Toot from '@/components/organisms/Toot.vue'
import StatusLoading from '@/components/organisms/StatusLoading.vue'
import { EventEmitter } from '@/components/event'
import { ScrollPosition } from '@/components/utils/scroll'
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Home'
import { MUTATION_TYPES as SIDE_MENU_MUTATION } from '@/store/TimelineSpace/SideMenu'
import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
@ -66,10 +64,6 @@ export default defineComponent({
const { j, k, Ctrl_r } = useMagicKeys()
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
const observer = ref<ResizeObserver | null>(null)
const scrollTime = ref<moment.Moment | null>(null)
const resizeTime = ref<moment.Moment | null>(null)
const loadingMore = ref(false)
const scroller = ref<any>()
@ -78,7 +72,6 @@ export default defineComponent({
const heading = computed(() => store.state.TimelineSpace.Contents.Home.heading)
const showReblogs = computed(() => store.state.TimelineSpace.Contents.Home.showReblogs)
const showReplies = computed(() => store.state.TimelineSpace.Contents.Home.showReplies)
const scrolling = computed(() => store.state.TimelineSpace.Contents.Home.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
@ -108,30 +101,11 @@ export default defineComponent({
if (heading.value && timeline.value.length > 0) {
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
}
const el = document.getElementById('scroller')
if (el) {
scrollPosition.value = new ScrollPosition(el)
scrollPosition.value.prepare()
observer.value = new ResizeObserver(() => {
if (loadingMore.value || (scrollPosition.value && !heading.value && !lazyLoading.value && !scrolling.value)) {
resizeTime.value = moment()
scrollPosition.value?.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
observer.value.observe(scrollWrapper)
}
})
onBeforeUpdate(() => {
if (store.state.TimelineSpace.SideMenu.unreadHomeTimeline && heading.value) {
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_HOME_TIMELINE}`, false)
}
if (scrollPosition.value) {
scrollPosition.value.prepare()
}
})
onBeforeUnmount(() => {
observer.value?.disconnect()
})
onUnmounted(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
@ -180,39 +154,18 @@ export default defineComponent({
})
const onScroll = (event: Event) => {
if (moment().diff(resizeTime.value) < 500) {
return
}
scrollTime.value = moment()
if (!scrolling.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
}
// for lazyLoading
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
document.getElementById('scroller')!.scrollHeight - 10 &&
!lazyLoading.value
) {
store
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, timeline.value[timeline.value.length - 1])
.then(statuses => {
if (statuses === null) {
return
}
if (statuses.length > 0) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
})
.catch(() => {
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
type: 'error'
})
store.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, timeline.value[timeline.value.length - 1]).catch(() => {
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
type: 'error'
})
})
}
if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
@ -220,14 +173,6 @@ export default defineComponent({
} else if ((event.target as HTMLElement)!.scrollTop <= 5 && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
setTimeout(() => {
const now = moment()
if (now.diff(scrollTime.value) >= 150) {
scrollTime.value = null
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}
}, 150)
}
const updateToot = (message: Entity.Status) => {
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
@ -275,12 +220,6 @@ export default defineComponent({
const focusSidebar = () => {
EventEmitter.emit('focus-sidebar')
}
const sizeChanged = () => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
return {
filteredTimeline,
@ -296,7 +235,6 @@ export default defineComponent({
focusPrev,
focusSidebar,
focusToot,
sizeChanged,
openSideBar,
heading,
upper

63
src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
View File

@ -13,7 +13,6 @@
v-on:delete="deleteToot"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
>
</toot>
</DynamicScrollerItem>
@ -37,7 +36,6 @@ import { Entity } from 'megalodon'
import { useStore } from '@/store'
import Toot from '@/components/organisms/Toot.vue'
import { EventEmitter } from '@/components/event'
import { ScrollPosition } from '@/components/utils/scroll'
import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Show'
@ -55,16 +53,11 @@ export default defineComponent({
const { list_id } = toRefs(props)
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
const observer = ref<ResizeObserver | null>(null)
const scrollTime = ref<moment.Moment | null>(null)
const resizeTime = ref<moment.Moment | null>(null)
const scroller = ref<any>(null)
const timeline = computed(() => store.state.TimelineSpace.Contents.Lists.Show.timeline)
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Lists.Show.lazyLoading)
const heading = computed(() => store.state.TimelineSpace.Contents.Lists.Show.heading)
const scrolling = computed(() => store.state.TimelineSpace.Contents.Lists.Show.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
@ -77,27 +70,6 @@ export default defineComponent({
load().finally(() => {
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
})
const el = document.getElementById('scroller')
if (el) {
scrollPosition.value = new ScrollPosition(el)
scrollPosition.value.prepare()
observer.value = new ResizeObserver(() => {
if (scrollPosition.value && !heading.value && !lazyLoading.value && !scrolling.value) {
resizeTime.value = moment()
scrollPosition.value?.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
observer.value?.observe(scrollWrapper)
}
})
onBeforeUpdate(() => {
if (scrollPosition.value) {
scrollPosition.value.prepare()
}
})
watch(list_id, () => {
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
@ -135,7 +107,6 @@ export default defineComponent({
onBeforeUnmount(() => {
store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
observer.value?.disconnect()
})
onUnmounted(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
@ -167,14 +138,6 @@ export default defineComponent({
return 'started'
}
const onScroll = (event: Event) => {
if (moment().diff(resizeTime.value) < 500) {
return
}
scrollTime.value = moment()
if (!scrolling.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
}
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
document.getElementById('scroller')!.scrollHeight - 10 &&
@ -185,17 +148,6 @@ export default defineComponent({
list_id: list_id.value,
status: timeline.value[timeline.value.length - 1]
})
.then(statuses => {
if (statuses === null) {
return
}
if (statuses.length > 0) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
})
.catch(() => {
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
@ -209,14 +161,6 @@ export default defineComponent({
} else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
setTimeout(() => {
const now = moment()
if (now.diff(scrollTime.value) >= 150) {
scrollTime.value = null
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}
}, 150)
}
const reload = async () => {
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
@ -268,12 +212,6 @@ export default defineComponent({
const focusSidebar = () => {
EventEmitter.emit('focus-sidebar')
}
const sizeChanged = () => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
return {
scroller,
@ -284,7 +222,6 @@ export default defineComponent({
deleteToot,
focusSidebar,
focusToot,
sizeChanged,
openSideBar,
heading,
upper

73
src/renderer/components/TimelineSpace/Contents/Local.vue
View File

@ -13,7 +13,6 @@
v-on:delete="deleteToot"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
>
</toot>
</DynamicScrollerItem>
@ -38,7 +37,6 @@ import { useRoute } from 'vue-router'
import { useStore } from '@/store'
import Toot from '@/components/organisms/Toot.vue'
import { EventEmitter } from '@/components/event'
import { ScrollPosition } from '@/components/utils/scroll'
import useReloadable from '@/components/utils/reloadable'
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Local'
import { MUTATION_TYPES as SIDE_MENU_MUTATION } from '@/store/TimelineSpace/SideMenu'
@ -58,16 +56,11 @@ export default defineComponent({
const { j, k, Ctrl_r } = useMagicKeys()
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
const observer = ref<ResizeObserver | null>(null)
const scrollTime = ref<moment.Moment | null>(null)
const resizeTime = ref<moment.Moment | null>(null)
const scroller = ref<any>(null)
const timeline = computed(() => store.state.TimelineSpace.Contents.Local.timeline)
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Local.lazyLoading)
const heading = computed(() => store.state.TimelineSpace.Contents.Local.heading)
const scrolling = computed(() => store.state.TimelineSpace.Contents.Local.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const unreadNotification = computed(() => store.state.TimelineSpace.timelineSetting.unreadNotification)
@ -84,30 +77,11 @@ export default defineComponent({
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
})
}
const el = document.getElementById('scroller')
if (el) {
scrollPosition.value = new ScrollPosition(el)
scrollPosition.value.prepare()
observer.value = new ResizeObserver(() => {
if (scrollPosition.value && !heading.value && !lazyLoading.value && !scrolling.value) {
resizeTime.value = moment()
scrollPosition.value?.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
observer.value.observe(scrollWrapper)
}
})
onBeforeUpdate(() => {
if (store.state.TimelineSpace.SideMenu.unreadLocalTimeline && heading.value) {
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_LOCAL_TIMELINE}`, false)
}
if (scrollPosition.value) {
scrollPosition.value.prepare()
}
})
onBeforeUnmount(() => {
if (!unreadNotification.value.local) {
@ -115,7 +89,6 @@ export default defineComponent({
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.UNBIND_LOCAL_STREAMING}`)
}
EventEmitter.off('focus-timeline')
observer.value?.disconnect()
})
onUnmounted(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
@ -169,52 +142,23 @@ export default defineComponent({
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.START_LOCAL_STREAMING}`)
}
const onScroll = (event: Event) => {
if (moment().diff(resizeTime.value) < 500) {
return
}
scrollTime.value = moment()
if (!scrolling.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
}
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
document.getElementById('scroller')!.scrollHeight - 10 &&
!lazyLoading.value
) {
store
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, timeline.value[timeline.value.length - 1])
.then(statuses => {
if (statuses === null) {
return
}
if (statuses.length > 0) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
})
.catch(() => {
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
type: 'error'
})
store.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, timeline.value[timeline.value.length - 1]).catch(() => {
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
type: 'error'
})
})
}
if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
} else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
setTimeout(() => {
const now = moment()
if (now.diff(scrollTime.value) >= 150) {
scrollTime.value = null
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}
}, 150)
}
const reload = async () => {
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
@ -254,12 +198,6 @@ export default defineComponent({
const focusSidebar = () => {
EventEmitter.emit('focus-sidebar')
}
const sizeChanged = () => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
return {
scroller,
@ -270,7 +208,6 @@ export default defineComponent({
deleteToot,
focusSidebar,
focusToot,
sizeChanged,
openSideBar,
heading,
upper

72
src/renderer/components/TimelineSpace/Contents/Mentions.vue
View File

@ -18,7 +18,6 @@
v-on:update="updateToot"
@focusRight="focusSidebar"
@selectNotification="focusNotification(item)"
@sizeChanged="sizeChanged"
>
</notification>
</DynamicScrollerItem>
@ -45,7 +44,6 @@ import { useStore } from '@/store'
import Notification from '@/components/organisms/Notification.vue'
import StatusLoading from '@/components/organisms/StatusLoading.vue'
import { EventEmitter } from '@/components/event'
import { ScrollPosition } from '@/components/utils/scroll'
import useReloadable from '@/components/utils/reloadable'
import { LoadingCard } from '@/types/loading-card'
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Mentions'
@ -65,17 +63,12 @@ export default defineComponent({
const { j, k, Ctrl_r } = useMagicKeys()
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
const observer = ref<ResizeObserver | null>(null)
const scrollTime = ref<moment.Moment | null>(null)
const resizeTime = ref<moment.Moment | null>(null)
const loadingMore = ref(false)
const scroller = ref<any>()
const mentions = computed<Array<Entity.Notification | LoadingCard>>(() => store.getters[`${space}/mentions`])
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Mentions.lazyLoading)
const heading = computed(() => store.state.TimelineSpace.Contents.Mentions.heading)
const scrolling = computed(() => store.state.TimelineSpace.Contents.Mentions.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
@ -89,30 +82,11 @@ export default defineComponent({
if (heading.value && mentions.value.length > 0) {
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
}
const el = document.getElementById('scroller')
if (el) {
scrollPosition.value = new ScrollPosition(el)
scrollPosition.value.prepare()
observer.value = new ResizeObserver(() => {
if (loadingMore.value || (scrollPosition.value && !heading.value && !lazyLoading.value && !scrolling.value)) {
resizeTime.value = moment()
scrollPosition.value?.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
observer.value.observe(scrollWrapper)
}
})
onBeforeUpdate(() => {
if (store.state.TimelineSpace.SideMenu.unreadMentions && heading.value) {
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_MENTIONS}`, false)
}
if (scrollPosition.value) {
scrollPosition.value.prepare()
}
})
onBeforeUnmount(() => {
observer.value?.disconnect()
})
onUnmounted(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
@ -161,39 +135,18 @@ export default defineComponent({
})
const onScroll = (event: Event) => {
if (moment().diff(resizeTime.value) < 500) {
return
}
scrollTime.value = moment()
if (!scrolling.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
}
// for lazyLoading
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
document.getElementById('scroller')!.scrollHeight - 10 &&
!lazyLoading.value
) {
store
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_MENTIONS}`, mentions.value[mentions.value.length - 1])
.then(statuses => {
if (statuses === null) {
return
}
if (statuses.length > 0) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
})
.catch(() => {
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
type: 'error'
})
store.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_MENTIONS}`, mentions.value[mentions.value.length - 1]).catch(() => {
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
type: 'error'
})
})
}
if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
@ -202,14 +155,6 @@ export default defineComponent({
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
}
setTimeout(() => {
const now = moment()
if (now.diff(scrollTime.value) >= 150) {
scrollTime.value = null
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}
}, 150)
}
const updateToot = (message: Entity.Status) => {
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
@ -254,12 +199,6 @@ export default defineComponent({
const focusSidebar = () => {
EventEmitter.emit('focus-sidebar')
}
const sizeChanged = () => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
return {
mentions,
@ -271,7 +210,6 @@ export default defineComponent({
updateToot,
focusSidebar,
focusNotification,
sizeChanged,
openSideBar,
heading,
upper

54
src/renderer/components/TimelineSpace/Contents/Notifications.vue
View File

@ -41,7 +41,6 @@ import { Entity } from 'megalodon'
import Notification from '@/components/organisms/Notification.vue'
import StatusLoading from '@/components/organisms/StatusLoading.vue'
import { EventEmitter } from '@/components/event'
import { ScrollPosition } from '@/components/utils/scroll'
import { useStore } from '@/store'
import { useRoute } from 'vue-router'
import { useI18next } from 'vue3-i18next'
@ -64,17 +63,12 @@ export default defineComponent({
const { j, k, Ctrl_r } = useMagicKeys()
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
const observer = ref<ResizeObserver | null>(null)
const scrollTime = ref<moment.Moment | null>(null)
const resizeTime = ref<moment.Moment | null>(null)
const loadingMore = ref(false)
const scroller = ref<any>()
const notifications = computed(() => store.state.TimelineSpace.Contents.Notifications.notifications)
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Notifications.lazyLoading)
const heading = computed(() => store.state.TimelineSpace.Contents.Notifications.heading)
const scrolling = computed(() => store.state.TimelineSpace.Contents.Notifications.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
@ -91,32 +85,11 @@ export default defineComponent({
if (heading.value && handledNotifications.value.length > 0) {
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
}
const el = document.getElementById('scroller')
if (el) {
scrollPosition.value = new ScrollPosition(el)
scrollPosition.value.prepare()
observer.value = new ResizeObserver(() => {
if (loadingMore.value || (scrollPosition.value && !heading.value && !lazyLoading.value && !scrolling.value)) {
resizeTime.value = moment()
scrollPosition.value?.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
observer.value.observe(scrollWrapper)
}
})
onBeforeUpdate(() => {
if (store.state.TimelineSpace.SideMenu.unreadNotifications && heading.value) {
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_NOTIFICATIONS}`, false)
}
if (scrollPosition.value) {
scrollPosition.value.prepare()
}
})
onBeforeUnmount(() => {
observer.value?.disconnect()
})
onUnmounted(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
@ -166,14 +139,6 @@ export default defineComponent({
})
const onScroll = (event: Event) => {
if (moment().diff(resizeTime.value) < 500) {
return
}
scrollTime.value = moment()
if (!scrolling.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
}
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
document.getElementById('scroller')!.scrollHeight - 10 &&
@ -181,17 +146,6 @@ export default defineComponent({
) {
store
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_NOTIFICATIONS}`, handledNotifications.value[handledNotifications.value.length - 1])
.then(statuses => {
if (statuses === null) {
return
}
if (statuses.length > 0) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
})
.catch(() => {
ElMessage({
message: i18n.t('message.notification_fetch_error'),
@ -207,14 +161,6 @@ export default defineComponent({
store.dispatch(`${space}/${ACTION_TYPES.RESET_BADGE}`)
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
}
setTimeout(() => {
const now = moment()
if (now.diff(scrollTime.value) >= 150) {
scrollTime.value = null
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}
}, 150)
}
const updateToot = (message: Entity.Status) => {
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)

82
src/renderer/components/TimelineSpace/Contents/Public.vue
View File

@ -13,7 +13,6 @@
v-on:delete="deleteToot"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
>
</toot>
</DynamicScrollerItem>
@ -38,7 +37,6 @@ import { useRoute } from 'vue-router'
import { useStore } from '@/store'
import Toot from '@/components/organisms/Toot.vue'
import { EventEmitter } from '@/components/event'
import { ScrollPosition } from '@/components/utils/scroll'
import useReloadable from '@/components/utils/reloadable'
import { MUTATION_TYPES as SIDE_MENU_MUTATION } from '@/store/TimelineSpace/SideMenu'
import { MUTATION_TYPES as TIMELINE_MUTATION, ACTION_TYPES as TIMELINE_ACTION } from '@/store/TimelineSpace'
@ -58,16 +56,11 @@ export default defineComponent({
const { j, k, Ctrl_r } = useMagicKeys()
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
const observer = ref<ResizeObserver | null>(null)
const scrollTime = ref<moment.Moment | null>(null)
const resizeTime = ref<moment.Moment | null>(null)
const scroller = ref<any>(null)
const timeline = computed(() => store.state.TimelineSpace.Contents.Public.timeline)
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Public.lazyLoading)
const heading = computed(() => store.state.TimelineSpace.Contents.Public.heading)
const scrolling = computed(() => store.state.TimelineSpace.Contents.Public.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const unreadNotification = computed(() => store.state.TimelineSpace.timelineSetting.unreadNotification)
@ -85,30 +78,11 @@ export default defineComponent({
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
})
}
const el = document.getElementById('scroller')
if (el) {
scrollPosition.value = new ScrollPosition(el)
scrollPosition.value.prepare()
observer.value = new ResizeObserver(() => {
if (scrollPosition.value && !heading.value && !lazyLoading.value && !scrolling.value) {
resizeTime.value = moment()
scrollPosition.value.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
observer.value?.observe(scrollWrapper)
}
})
onBeforeUpdate(() => {
if (store.state.TimelineSpace.SideMenu.unreadPublicTimeline && heading.value) {
store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
}
if (scrollPosition.value) {
scrollPosition.value.prepare()
}
})
onBeforeUnmount(() => {
if (!unreadNotification.value.public) {
@ -116,7 +90,6 @@ export default defineComponent({
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.UNBIND_PUBLIC_STREAMING}`)
}
EventEmitter.off('focus-timeline')
observer.value?.disconnect()
})
onUnmounted(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
@ -170,39 +143,17 @@ export default defineComponent({
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.START_PUBLIC_STREAMING}`)
}
const onScroll = (event: Event) => {
if (moment().diff(resizeTime.value) < 500) {
return
}
scrollTime.value = moment()
if (!scrolling.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
}
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
document.getElementById('scroller')!.scrollHeight - 10 &&
!lazyLoading.value
) {
store
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, timeline.value[timeline.value.length - 1])
.then(statuses => {
if (statuses === null) {
return
}
if (statuses.length > 0) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
})
.catch(() => {
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
type: 'error'
})
store.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, timeline.value[timeline.value.length - 1]).catch(() => {
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
type: 'error'
})
})
}
if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
@ -210,14 +161,6 @@ export default defineComponent({
} else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
setTimeout(() => {
const now = moment()
if (now.diff(scrollTime.value) >= 150) {
scrollTime.value = null
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}
}, 150)
}
const reload = async () => {
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
@ -257,12 +200,6 @@ export default defineComponent({
const focusSidebar = () => {
EventEmitter.emit('focus-sidebar')
}
const sizeChanged = () => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
return {
timeline,
@ -274,7 +211,6 @@ export default defineComponent({
deleteToot,
focusSidebar,
focusToot,
sizeChanged,
openSideBar,
heading,
upper
@ -293,14 +229,6 @@ export default defineComponent({
height: 100%;
}
.loading-card {
height: 60px;
}
.loading-card:empty {
height: 0;
}
.upper {
position: fixed;
bottom: 20px;

22
src/renderer/components/utils/scroll.ts
View File

@ -35,25 +35,3 @@ export default function scrollTop(element: HTMLElement, point: number = 0) {
const easeOut = function (p: number) {
return p * (2 - p)
}
export class ScrollPosition {
private node: HTMLElement | null = null
private previousScrollHeightMinusTop: number = 0
constructor(node: HTMLElement) {
this.node = node
this.previousScrollHeightMinusTop = 0
}
prepare() {
if (this.node) {
this.previousScrollHeightMinusTop = this.node.scrollHeight - this.node.scrollTop
}
}
restore() {
if (this.node) {
this.node.scrollTop = this.node.scrollHeight - this.previousScrollHeightMinusTop
}
}
}

8
src/renderer/store/TimelineSpace/Contents/DirectMessages.ts
View File

@ -5,14 +5,12 @@ import { RootState } from '@/store'
export type DirectMessagesState = {
lazyLoading: boolean
heading: boolean
scrolling: boolean
timeline: Array<Entity.Status>
}
const state = (): DirectMessagesState => ({
lazyLoading: false,
heading: true,
scrolling: false,
timeline: []
})
@ -25,8 +23,7 @@ export const MUTATION_TYPES = {
ARCHIVE_TIMELINE: 'archiveTimeline',
CLEAR_TIMELINE: 'clearTimeline',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot',
CHANGE_SCROLLING: 'changeScrolling'
DELETE_TOOT: 'deleteToot'
}
const mutations: MutationTree<DirectMessagesState> = {
@ -79,9 +76,6 @@ const mutations: MutationTree<DirectMessagesState> = {
return toot.id !== id
}
})
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}

12
src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts
View File

@ -4,20 +4,18 @@ import { RootState } from '@/store'
import { LoadPositionWithTag } from '@/types/loadPosition'
import { MyWindow } from '~/src/types/global'
const win = window as any as MyWindow
const win = (window as any) as MyWindow
export type TagState = {
timeline: Array<Entity.Status>
lazyLoading: boolean
heading: boolean
scrolling: boolean
}
const state = (): TagState => ({
timeline: [],
lazyLoading: false,
heading: true,
scrolling: false
heading: true
})
export const MUTATION_TYPES = {
@ -29,8 +27,7 @@ export const MUTATION_TYPES = {
CLEAR_TIMELINE: 'clearTimeline',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot',
CHANGE_LAZY_LOADING: 'changeLazyLoading',
CHANGE_SCROLLING: 'changeScrolling'
CHANGE_LAZY_LOADING: 'changeLazyLoading'
}
const mutations: MutationTree<TagState> = {
@ -82,9 +79,6 @@ const mutations: MutationTree<TagState> = {
},
[MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
state.lazyLoading = value
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}

10
src/renderer/store/TimelineSpace/Contents/Home.ts
View File

@ -5,7 +5,7 @@ import { LocalMarker } from '~/src/types/localMarker'
import { MyWindow } from '~/src/types/global'
import { LoadingCard } from '@/types/loading-card'
const win = window as any as MyWindow
const win = (window as any) as MyWindow
export type HomeState = {
lazyLoading: boolean
@ -13,7 +13,6 @@ export type HomeState = {
showReblogs: boolean
showReplies: boolean
timeline: Array<Entity.Status | LoadingCard>
scrolling: boolean
}
const state = (): HomeState => ({
@ -21,8 +20,7 @@ const state = (): HomeState => ({
heading: true,
timeline: [],
showReblogs: true,
showReplies: true,
scrolling: false
showReplies: true
})
export const MUTATION_TYPES = {
@ -37,7 +35,6 @@ export const MUTATION_TYPES = {
DELETE_TOOT: 'deleteToot',
SHOW_REBLOGS: 'showReblogs',
SHOW_REPLIES: 'showReplies',
CHANGE_SCROLLING: 'changeScrolling',
APPEND_TIMELINE_AFTER_LOADING_CARD: 'appendTimelineAfterLoadingCard'
}
@ -106,9 +103,6 @@ const mutations: MutationTree<HomeState> = {
[MUTATION_TYPES.SHOW_REPLIES]: (state, visible: boolean) => {
state.showReplies = visible
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
},
[MUTATION_TYPES.APPEND_TIMELINE_AFTER_LOADING_CARD]: (state, timeline: Array<Entity.Status | LoadingCard>) => {
const tl = state.timeline.flatMap(status => {
if (status.id !== 'loading-card') {

12
src/renderer/store/TimelineSpace/Contents/Lists/Show.ts
View File

@ -4,20 +4,18 @@ import { RootState } from '@/store'
import { LoadPositionWithList } from '@/types/loadPosition'
import { MyWindow } from '~/src/types/global'
const win = window as any as MyWindow
const win = (window as any) as MyWindow
export type ShowState = {
timeline: Array<Entity.Status>
lazyLoading: boolean
heading: boolean
scrolling: boolean
}
const state = (): ShowState => ({
timeline: [],
lazyLoading: false,
heading: true,
scrolling: false
heading: true
})
export const MUTATION_TYPES = {
@ -29,8 +27,7 @@ export const MUTATION_TYPES = {
CLEAR_TIMELINE: 'clearTimeline',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot',
CHANGE_LAZY_LOADING: 'changeLazyLoading',
CHANGE_SCROLLING: 'changeScrolling'
CHANGE_LAZY_LOADING: 'changeLazyLoading'
}
const mutations: MutationTree<ShowState> = {
@ -82,9 +79,6 @@ const mutations: MutationTree<ShowState> = {
},
[MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
state.lazyLoading = value
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}

10
src/renderer/store/TimelineSpace/Contents/Local.ts
View File

@ -6,14 +6,12 @@ export type LocalState = {
timeline: Array<Entity.Status>
lazyLoading: boolean
heading: boolean
scrolling: boolean
}
const state = (): LocalState => ({
timeline: [],
lazyLoading: false,
heading: true,
scrolling: false
heading: true
})
export const MUTATION_TYPES = {
@ -25,8 +23,7 @@ export const MUTATION_TYPES = {
CLEAR_TIMELINE: 'clearTimeline',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot',
CHANGE_LAZY_LOADING: 'changeLazyLoading',
CHANGE_SCROLLING: 'changeScrolling'
CHANGE_LAZY_LOADING: 'changeLazyLoading'
}
const mutations: MutationTree<LocalState> = {
@ -78,9 +75,6 @@ const mutations: MutationTree<LocalState> = {
},
[MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
state.lazyLoading = value
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}

10
src/renderer/store/TimelineSpace/Contents/Mentions.ts
View File

@ -5,7 +5,7 @@ import { MyWindow } from '~/src/types/global'
import { LoadingCard } from '@/types/loading-card'
import { LocalMarker } from '~/src/types/localMarker'
const win = window as any as MyWindow
const win = (window as any) as MyWindow
const excludes: Array<string> = [
NotificationType.Follow,
@ -20,14 +20,12 @@ export type MentionsState = {
lazyLoading: boolean
heading: boolean
mentions: Array<Entity.Notification | LoadingCard>
scrolling: boolean
}
const state = (): MentionsState => ({
lazyLoading: false,
heading: true,
mentions: [],
scrolling: false
mentions: []
})
export const MUTATION_TYPES = {
@ -40,7 +38,6 @@ export const MUTATION_TYPES = {
CLEAR_MENTIONS: 'clearMentions',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot',
CHANGE_SCROLLING: 'changeScrolling',
APPEND_MENTIONS_AFTER_LOADING_CARD: 'appendMentionsAfterLoadingCard'
}
@ -98,9 +95,6 @@ const mutations: MutationTree<MentionsState> = {
}
})
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
},
[MUTATION_TYPES.APPEND_MENTIONS_AFTER_LOADING_CARD]: (state, mentions: Array<Entity.Notification | LoadingCard>) => {
const m = state.mentions.flatMap(mention => {
if (mention.id !== 'loading-card') {

10
src/renderer/store/TimelineSpace/Contents/Notifications.ts
View File

@ -5,20 +5,18 @@ import { LocalMarker } from '~/src/types/localMarker'
import { MyWindow } from '~/src/types/global'
import { LoadingCard } from '@/types/loading-card'
const win = window as any as MyWindow
const win = (window as any) as MyWindow
export type NotificationsState = {
lazyLoading: boolean
heading: boolean
notifications: Array<Entity.Notification | LoadingCard>
scrolling: boolean
}
const state = (): NotificationsState => ({
lazyLoading: false,
heading: true,
notifications: [],
scrolling: false
notifications: []
})
export const MUTATION_TYPES = {
@ -31,7 +29,6 @@ export const MUTATION_TYPES = {
DELETE_TOOT: 'deleteToot',
CLEAR_NOTIFICATIONS: 'clearNotifications',
ARCHIVE_NOTIFICATIONS: 'archiveNotifications',
CHANGE_SCROLLING: 'changeScrolling',
APPEND_NOTIFICATIONS_AFTER_LOADING_CARD: 'appendNotificationsAfterLoadingCard'
}
@ -91,9 +88,6 @@ const mutations: MutationTree<NotificationsState> = {
[MUTATION_TYPES.ARCHIVE_NOTIFICATIONS]: state => {
state.notifications = state.notifications.slice(0, 30)
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
},
[MUTATION_TYPES.APPEND_NOTIFICATIONS_AFTER_LOADING_CARD]: (state, notifications: Array<Entity.Notification | LoadingCard>) => {
const n = state.notifications.flatMap(notify => {
if (notify.id !== 'loading-card') {

10
src/renderer/store/TimelineSpace/Contents/Public.ts
View File

@ -6,14 +6,12 @@ export type PublicState = {
timeline: Array<Entity.Status>
lazyLoading: boolean
heading: boolean
scrolling: boolean
}
const state = (): PublicState => ({
timeline: [],
lazyLoading: false,
heading: true,
scrolling: false
heading: true
})
export const MUTATION_TYPES = {
@ -25,8 +23,7 @@ export const MUTATION_TYPES = {
CLEAR_TIMELINE: 'clearTimeline',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot',
CHANGE_LAZY_LOADING: 'changeLazyLoading',
CHANGE_SCROLLING: 'changeScrolling'
CHANGE_LAZY_LOADING: 'changeLazyLoading'
}
const mutations: MutationTree<PublicState> = {
@ -78,9 +75,6 @@ const mutations: MutationTree<PublicState> = {
},
[MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
state.lazyLoading = value
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}