Merge pull request #3379 from h3poteto/iss-3301/timeline
refs #3301 Rewrite TimelineSpace/Contents with composition API
This commit is contained in:
AkiraFukushima
GitHub
commit
e7f810be72
|
|
@ -27,170 +27,147 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '@/components/organisms/Toot'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { EventEmitter } from '~/src/renderer/components/event'
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
|
||||
import { useStore } from '@/store'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Entity } from 'megalodon'
|
||||
import useReloadable from '@/components/utils/reloadable'
|
||||
import Toot from '@/components/organisms/Toot.vue'
|
||||
import { EventEmitter } from '@/components/event'
|
||||
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Bookmarks'
|
||||
import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
|
||||
import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
heading: true,
|
||||
focusedId: null
|
||||
}
|
||||
},
|
||||
export default defineComponent({
|
||||
name: 'bookmarks',
|
||||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
computed: {
|
||||
...mapState('TimelineSpace', {
|
||||
account: state => state.account
|
||||
}),
|
||||
...mapState('App', {
|
||||
backgroundColor: state => state.theme.background_color
|
||||
}),
|
||||
...mapState('TimelineSpace/HeaderMenu', {
|
||||
startReload: state => state.reload
|
||||
}),
|
||||
...mapState('TimelineSpace/Contents/SideBar', {
|
||||
openSideBar: state => state.openSideBar
|
||||
}),
|
||||
...mapState('TimelineSpace/Contents/Bookmarks', {
|
||||
bookmarks: state => state.bookmarks,
|
||||
lazyLoading: state => state.lazyLoading
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function () {
|
||||
return !this.focusedId && !this.modalOpened
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/Bookmarks/fetchBookmarks', this.account)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.bookmark_fetch_error'),
|
||||
type: 'error'
|
||||
setup() {
|
||||
const space = 'TimelineSpace/Contents/Bookmarks'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const i18n = useI18next()
|
||||
const { reloadable } = useReloadable(store, route, i18n)
|
||||
|
||||
const focusedId = ref<string | null>(null)
|
||||
const heading = ref<boolean>(true)
|
||||
const scroller = ref<any>()
|
||||
|
||||
const bookmarks = computed(() => store.state.TimelineSpace.Contents.Bookmarks.bookmarks)
|
||||
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Bookmarks.lazyLoading)
|
||||
const account = computed(() => store.state.TimelineSpace.account)
|
||||
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
|
||||
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
|
||||
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const currentFocusedIndex = computed(() => bookmarks.value.findIndex(toot => focusedId.value === toot.uri))
|
||||
|
||||
onMounted(() => {
|
||||
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
|
||||
store.commit(`TimelineSpace/Contents/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.FETCH_BOOKMARKS}`, account.value)
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.bookmark_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
store.commit(`TimelineSpace/Contents/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
document.getElementById('scroller').addEventListener('scroll', this.onScroll)
|
||||
EventEmitter.on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeUnmount() {
|
||||
EventEmitter.off('focus-timeline')
|
||||
},
|
||||
unmounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/Bookmarks/updateBookmarks', [])
|
||||
if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
|
||||
document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
|
||||
document.getElementById('scroller').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
watch(startReload, (newVal, oldVal) => {
|
||||
if (!oldVal && newVal) {
|
||||
reload().finally(() => {
|
||||
store.commit(`TimelineSpace/HeaderMenu/${HEADER_MUTATION.CHANGE_RELOAD}`, false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.heading = false
|
||||
} else if (newState === null && !this.heading) {
|
||||
this.heading = true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Bookmarks/updateToot', message)
|
||||
},
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Bookmarks/deleteToot', message)
|
||||
},
|
||||
onScroll(event) {
|
||||
})
|
||||
|
||||
const onScroll = (event: Event) => {
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
|
||||
!this.lazyloading
|
||||
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
|
||||
document.getElementById('scroller')!.scrollHeight - 10 &&
|
||||
!lazyLoading.value
|
||||
) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Bookmarks/lazyFetchBookmarks', this.bookmarks[this.bookmarks.length - 1]).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.bookmark_fetch_error'),
|
||||
store.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_BOOKMARKS}`, bookmarks.value[bookmarks.value.length - 1]).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.bookmark_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
// for upper
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.heading = false
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.heading = true
|
||||
if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
|
||||
heading.value = false
|
||||
} else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
|
||||
heading.value = true
|
||||
}
|
||||
},
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
}
|
||||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
const account = await this.reloadable()
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Bookmarks/fetchBookmarks', account).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.bookmark_fetch_error'),
|
||||
await reloadable()
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_BOOKMARKS}`, account.value).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.bookmark_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
}
|
||||
},
|
||||
upper() {
|
||||
this.$refs.scroller.scrollToItem(0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.bookmarks.findIndex(toot => this.focusedId === toot.uri)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.bookmarks[0].uri
|
||||
} else if (currentIndex < this.bookmarks.length) {
|
||||
this.focusedId = this.bookmarks[currentIndex + 1].uri
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.bookmarks.findIndex(toot => this.focusedId === toot.uri)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
} else if (currentIndex > 0) {
|
||||
this.focusedId = this.bookmarks[currentIndex - 1].uri
|
||||
}
|
||||
},
|
||||
focusToot(message) {
|
||||
this.focusedId = message.id
|
||||
},
|
||||
focusSidebar() {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
},
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.bookmarks[0].uri
|
||||
break
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
}
|
||||
const updateToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||
}
|
||||
const deleteToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message)
|
||||
}
|
||||
const upper = () => {
|
||||
scroller.value.scrollToItem(0)
|
||||
focusedId.value = null
|
||||
}
|
||||
const focusNext = () => {
|
||||
if (currentFocusedIndex.value === -1) {
|
||||
focusedId.value = bookmarks.value[0].uri
|
||||
} else if (currentFocusedIndex.value < bookmarks.value.length) {
|
||||
focusedId.value = bookmarks.value[currentFocusedIndex.value + 1].uri
|
||||
}
|
||||
}
|
||||
const focusPrev = () => {
|
||||
if (currentFocusedIndex.value === 0) {
|
||||
focusedId.value = null
|
||||
} else if (currentFocusedIndex.value > 0) {
|
||||
focusedId.value = bookmarks.value[currentFocusedIndex.value - 1].uri
|
||||
}
|
||||
}
|
||||
const focusToot = (message: Entity.Status) => {
|
||||
focusedId.value = message.id
|
||||
}
|
||||
const focusSidebar = () => {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
}
|
||||
|
||||
return {
|
||||
scroller,
|
||||
bookmarks,
|
||||
focusedId,
|
||||
modalOpened,
|
||||
updateToot,
|
||||
deleteToot,
|
||||
focusNext,
|
||||
focusPrev,
|
||||
focusSidebar,
|
||||
focusToot,
|
||||
openSideBar,
|
||||
heading,
|
||||
upper
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -29,243 +29,225 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onBeforeUnmount, onUnmounted, watch } from 'vue'
|
||||
import moment from 'moment'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { EventEmitter } from '~/src/renderer/components/event'
|
||||
import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
|
||||
import { useStore } from '@/store'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
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'
|
||||
import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
|
||||
import { ACTION_TYPES as CONTENTS_ACTION } from '@/store/TimelineSpace/Contents'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null,
|
||||
scrollPosition: null,
|
||||
observer: null,
|
||||
scrollTime: null,
|
||||
resizeTime: null
|
||||
}
|
||||
},
|
||||
export default defineComponent({
|
||||
name: 'directmessages',
|
||||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Contents/DirectMessages', {
|
||||
timeline: state => state.timeline,
|
||||
lazyLoading: state => state.lazyLoading,
|
||||
heading: state => state.heading,
|
||||
scrolling: state => state.scrolling
|
||||
}),
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
unreadNotification: state => state.TimelineSpace.timelineSetting.unreadNotification
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function () {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
}
|
||||
if (!this.focusedId) {
|
||||
return true
|
||||
}
|
||||
// Sometimes toots are deleted, so perhaps focused toot don't exist.
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
return currentIndex === -1
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
|
||||
document.getElementById('scroller').addEventListener('scroll', this.onScroll)
|
||||
if (!this.unreadNotification.direct) {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
await this.initialize().finally(_ => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
}
|
||||
setup() {
|
||||
const space = 'TimelineSpace/Contents/DirectMessages'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const i18n = useI18next()
|
||||
const { reloadable } = useReloadable(store, route, i18n)
|
||||
|
||||
EventEmitter.on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
const el = document.getElementById('scroller')
|
||||
this.scrollPosition = new ScrollPosition(el)
|
||||
this.scrollPosition.prepare()
|
||||
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>()
|
||||
|
||||
this.observer = new ResizeObserver(() => {
|
||||
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
|
||||
this.resizeTime = moment()
|
||||
this.scrollPosition.restore()
|
||||
}
|
||||
})
|
||||
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)
|
||||
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
|
||||
|
||||
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||
this.observer.observe(scrollWrapper)
|
||||
},
|
||||
beforeUpdate() {
|
||||
if (this.$store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && this.heading) {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
|
||||
}
|
||||
if (this.scrollPosition) {
|
||||
this.scrollPosition.prepare()
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (!this.unreadNotification.direct) {
|
||||
this.$store.dispatch('TimelineSpace/stopDirectMessagesStreaming')
|
||||
this.$store.dispatch('TimelineSpace/unbindDirectMessagesStreaming')
|
||||
}
|
||||
EventEmitter.off('focus-timeline')
|
||||
this.observer.disconnect()
|
||||
},
|
||||
unmounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/archiveTimeline')
|
||||
if (!this.unreadNotification.direct) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/clearTimeline')
|
||||
}
|
||||
if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
|
||||
document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
|
||||
document.getElementById('scroller').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
onMounted(async () => {
|
||||
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_HOME_TIMELINE}`, false)
|
||||
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
|
||||
if (!unreadNotification.value.direct) {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_ACTION.CHANGE_LOADING}`, true)
|
||||
await initialize().finally(() => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_ACTION.CHANGE_LOADING}`, false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
|
||||
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)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async initialize() {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/DirectMessages/fetchTimeline').catch(_ => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
})
|
||||
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) {
|
||||
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.STOP_DIRECT_MESSAGES_STREAMING}`)
|
||||
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.UNBIND_DIRECT_MESSAGES_STREAMING}`)
|
||||
}
|
||||
})
|
||||
onUnmounted(() => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.ARCHIVE_TIMELINE}`)
|
||||
if (!unreadNotification.value.direct) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CLEAR_TIMELINE}`)
|
||||
}
|
||||
})
|
||||
watch(startReload, (newVal, oldVal) => {
|
||||
if (!oldVal && newVal) {
|
||||
reload().finally(() => {
|
||||
store.commit(`TimelineSpace/HeaderMenu/${HEADER_MUTATION.CHANGE_RELOAD}`, false)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const initialize = async () => {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`).catch(_ => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
await this.$store.dispatch('TimelineSpace/bindDirectMessagesStreaming')
|
||||
this.$store.dispatch('TimelineSpace/startDirectMessagesStreaming')
|
||||
},
|
||||
onScroll(event) {
|
||||
if (moment().diff(this.resizeTime) < 500) {
|
||||
await store.dispatch(`TimelineSpace/${TIMELINE_ACTION.BIND_DIRECT_MESSAGES_STREAMING}`)
|
||||
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.START_DIRECT_MESSAGES_STREAMING}`)
|
||||
}
|
||||
const onScroll = (event: Event) => {
|
||||
if (moment().diff(resizeTime.value) < 500) {
|
||||
return
|
||||
}
|
||||
this.scrollTime = moment()
|
||||
if (!this.scrolling) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeScrolling', true)
|
||||
scrollTime.value = moment()
|
||||
if (!scrolling.value) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
}
|
||||
|
||||
// for lazyLoading
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
|
||||
!this.lazyloading
|
||||
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
|
||||
document.getElementById('scroller')!.scrollHeight - 10 &&
|
||||
!lazyLoading.value
|
||||
) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/DirectMessages/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, timeline.value[timeline.value.length - 1])
|
||||
.then(statuses => {
|
||||
if (statuses === null) {
|
||||
return
|
||||
}
|
||||
if (statuses.length > 0) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeScrolling', true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', false)
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
|
||||
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(this.scrollTime) >= 150) {
|
||||
this.scrollTime = null
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeScrolling', false)
|
||||
if (now.diff(scrollTime.value) >= 150) {
|
||||
scrollTime.value = null
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}
|
||||
}, 150)
|
||||
},
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/updateToot', message)
|
||||
},
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/deleteToot', message.id)
|
||||
},
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
}
|
||||
const updateToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||
}
|
||||
const deleteToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message.id)
|
||||
}
|
||||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
await reloadable()
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
},
|
||||
upper() {
|
||||
this.$refs.scroller.scrollToItem(0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
} else if (currentIndex < this.timeline.length) {
|
||||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
const upper = () => {
|
||||
scroller.value.scrollToItem(0)
|
||||
focusedId.value = null
|
||||
}
|
||||
const focusNext = () => {
|
||||
if (currentFocusedIndex.value === -1) {
|
||||
focusedId.value = timeline.value[0].uri + timeline.value[0].id
|
||||
} else if (currentFocusedIndex.value < timeline.value.length) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
} else if (currentIndex > 0) {
|
||||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
const focusPrev = () => {
|
||||
if (currentFocusedIndex.value === 0) {
|
||||
focusedId.value = null
|
||||
} else if (currentFocusedIndex.value > 0) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
|
||||
}
|
||||
},
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusSidebar() {
|
||||
}
|
||||
const focusToot = (message: Entity.Status) => {
|
||||
focusedId.value = message.uri + message.id
|
||||
}
|
||||
const focusSidebar = () => {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
},
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
break
|
||||
}
|
||||
},
|
||||
sizeChanged() {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeScrolling', true)
|
||||
}
|
||||
const sizeChanged = () => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
return {
|
||||
timeline,
|
||||
scroller,
|
||||
focusedId,
|
||||
modalOpened,
|
||||
updateToot,
|
||||
deleteToot,
|
||||
focusNext,
|
||||
focusPrev,
|
||||
focusSidebar,
|
||||
focusToot,
|
||||
openSideBar,
|
||||
heading,
|
||||
upper,
|
||||
sizeChanged
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -28,164 +28,153 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { EventEmitter } from '~/src/renderer/components/event'
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { useStore } from '@/store'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { Entity } from 'megalodon'
|
||||
import Toot from '@/components/organisms/Toot.vue'
|
||||
import { EventEmitter } from '@/components/event'
|
||||
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Favourites'
|
||||
import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
|
||||
import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
|
||||
import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
heading: true,
|
||||
focusedId: null
|
||||
}
|
||||
},
|
||||
export default defineComponent({
|
||||
name: 'favourites',
|
||||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
account: state => state.TimelineSpace.account,
|
||||
favourites: state => state.TimelineSpace.Contents.Favourites.favourites,
|
||||
lazyLoading: state => state.TimelineSpace.Contents.Favourites.lazyLoading
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function () {
|
||||
return !this.focusedId && !this.modalOpened
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', this.account)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.favourite_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
document.getElementById('scroller').addEventListener('scroll', this.onScroll)
|
||||
EventEmitter.on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeUnmount() {
|
||||
EventEmitter.off('focus-timeline')
|
||||
},
|
||||
unmounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/Favourites/updateFavourites', [])
|
||||
if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
|
||||
document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
|
||||
document.getElementById('scroller').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.heading = false
|
||||
} else if (newState === null && !this.heading) {
|
||||
this.heading = true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Favourites/updateToot', message)
|
||||
},
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Favourites/deleteToot', message)
|
||||
},
|
||||
onScroll(event) {
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
|
||||
!this.lazyloading
|
||||
) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/Favourites/lazyFetchFavourites', this.favourites[this.favourites.length - 1])
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.favourite_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
setup() {
|
||||
const space = 'TimelineSpace/Contents/Favourites'
|
||||
const store = useStore()
|
||||
const i18n = useI18next()
|
||||
|
||||
const heading = ref<boolean>(false)
|
||||
const focusedId = ref<string | null>(null)
|
||||
const scroller = ref<any>()
|
||||
|
||||
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
|
||||
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
|
||||
const account = computed(() => store.state.TimelineSpace.account)
|
||||
const favourites = computed(() => store.state.TimelineSpace.Contents.Favourites.favourites)
|
||||
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Favourites.lazyLoading)
|
||||
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const currentFocusedIndex = computed(() => favourites.value.findIndex(status => focusedId.value === status.uri))
|
||||
|
||||
onMounted(() => {
|
||||
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
|
||||
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.FETCH_FAVOURITES}`, account.value)
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.favourite_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_FAVOURITES}`, [])
|
||||
const el = document.getElementById('scroller')
|
||||
if (el !== undefined && el !== null) {
|
||||
el.removeEventListener('scroll', onScroll)
|
||||
el.scrollTop = 0
|
||||
}
|
||||
})
|
||||
watch(startReload, (newVal, oldVal) => {
|
||||
if (!oldVal && newVal) {
|
||||
reload().finally(() => {
|
||||
store.commit(`TimelineSpace/HeaderMenu/${HEADER_MUTATION.CHANGE_RELOAD}`, false)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const onScroll = (event: Event) => {
|
||||
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_FAVOURITES}`, favourites.value[favourites.value.length - 1]).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.favourite_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
// for upper
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.heading = false
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.heading = true
|
||||
if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
|
||||
heading.value = false
|
||||
} else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
|
||||
heading.value = true
|
||||
}
|
||||
},
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
}
|
||||
const updateToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||
}
|
||||
const deleteToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message)
|
||||
}
|
||||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
const account = await this.reloadable()
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', account).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.favourite_fetch_error'),
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_FAVOURITES}`, account.value).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.favourite_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
}
|
||||
},
|
||||
upper() {
|
||||
this.$refs.scroller.scrollToItem(0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.favourites.findIndex(toot => this.focusedId === toot.uri)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.favourites[0].uri
|
||||
} else if (currentIndex < this.favourites.length) {
|
||||
this.focusedId = this.favourites[currentIndex + 1].uri
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.favourites.findIndex(toot => this.focusedId === toot.uri)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
} else if (currentIndex > 0) {
|
||||
this.focusedId = this.favourites[currentIndex - 1].uri
|
||||
}
|
||||
},
|
||||
focusToot(message) {
|
||||
this.focusedId = message.id
|
||||
},
|
||||
focusSidebar() {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
},
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.favourites[0].uri
|
||||
break
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
}
|
||||
const upper = () => {
|
||||
scroller.value.scrollToItem(0)
|
||||
focusedId.value = null
|
||||
}
|
||||
const focusNext = () => {
|
||||
if (currentFocusedIndex.value === -1) {
|
||||
focusedId.value = favourites.value[0].uri
|
||||
} else if (currentFocusedIndex.value < favourites.value.length) {
|
||||
focusedId.value = favourites.value[currentFocusedIndex.value + 1].uri
|
||||
}
|
||||
}
|
||||
const focusPrev = () => {
|
||||
if (currentFocusedIndex.value === 0) {
|
||||
focusedId.value = null
|
||||
} else if (currentFocusedIndex.value > 0) {
|
||||
focusedId.value = favourites.value[currentFocusedIndex.value - 1].uri
|
||||
}
|
||||
}
|
||||
const focusToot = (message: Entity.Status) => {
|
||||
focusedId.value = message.id
|
||||
}
|
||||
const focusSidebar = () => {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
}
|
||||
|
||||
return {
|
||||
favourites,
|
||||
scroller,
|
||||
focusedId,
|
||||
modalOpened,
|
||||
updateToot,
|
||||
deleteToot,
|
||||
focusNext,
|
||||
focusPrev,
|
||||
focusSidebar,
|
||||
focusToot,
|
||||
openSideBar,
|
||||
heading,
|
||||
upper
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
<template>
|
||||
<div id="follow-requests">
|
||||
<template v-for="account in requests">
|
||||
<user
|
||||
:user="account"
|
||||
:request="true"
|
||||
@acceptRequest="accept"
|
||||
@rejectRequest="reject"
|
||||
></user>
|
||||
<user :user="account" :request="true" @acceptRequest="accept" @rejectRequest="reject"></user>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -20,49 +15,37 @@ export default {
|
|||
components: { User },
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Contents/FollowRequests', {
|
||||
requests: (state) => state.requests,
|
||||
}),
|
||||
requests: state => state.requests
|
||||
})
|
||||
},
|
||||
async mounted() {
|
||||
await this.initialize()
|
||||
},
|
||||
methods: {
|
||||
async initialize() {
|
||||
await this.$store
|
||||
.dispatch('TimelineSpace/Contents/FollowRequests/fetchRequests')
|
||||
.catch((_) => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error',
|
||||
})
|
||||
await this.$store.dispatch('TimelineSpace/Contents/FollowRequests/fetchRequests').catch(_ => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
accept(account) {
|
||||
this.$store
|
||||
.dispatch(
|
||||
'TimelineSpace/Contents/FollowRequests/acceptRequest',
|
||||
account
|
||||
)
|
||||
.catch((_) => {
|
||||
this.$message({
|
||||
message: this.$t('message.follow_request_accept_error'),
|
||||
type: 'error',
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/FollowRequests/acceptRequest', account).catch(_ => {
|
||||
this.$message({
|
||||
message: this.$t('message.follow_request_accept_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
reject(account) {
|
||||
this.$store
|
||||
.dispatch(
|
||||
'TimelineSpace/Contents/FollowRequests/rejectRequest',
|
||||
account
|
||||
)
|
||||
.catch((_) => {
|
||||
this.$message({
|
||||
message: this.$t('message.follow_request_reject_error'),
|
||||
type: 'error',
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/FollowRequests/rejectRequest', account).catch(_ => {
|
||||
this.$message({
|
||||
message: this.$t('message.follow_request_reject_error'),
|
||||
type: 'error'
|
||||
})
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="search-header" v-loading="false">
|
||||
<el-form>
|
||||
<div class="form-wrapper">
|
||||
<div class="form-item" v-show="tagPage()">
|
||||
<div class="form-item" v-show="tagPage">
|
||||
<el-button type="text" @click="back">
|
||||
<font-awesome-icon icon="chevron-left" />
|
||||
</el-button>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<div class="form-item input">
|
||||
<input v-model="tag" :placeholder="$t('hashtag.tag_name')" class="search-keyword" v-on:keyup.enter="search" autofocus />
|
||||
</div>
|
||||
<div class="form-item" v-show="tagPage()">
|
||||
<div class="form-item" v-show="tagPage">
|
||||
<el-button type="text" @click="save" :title="$t('hashtag.save_tag')">
|
||||
<font-awesome-icon icon="thumbtack" />
|
||||
</el-button>
|
||||
|
|
@ -23,44 +23,55 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useStore } from '@/store'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'hashtag',
|
||||
data() {
|
||||
return {
|
||||
tag: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.$route.name === 'tag') {
|
||||
this.tag = this.$route.params.tag
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: function (route) {
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
|
||||
const tag = ref<string>('')
|
||||
const id = computed(() => route.params.id)
|
||||
const tagPage = computed(() => route.name === 'tag')
|
||||
|
||||
onMounted(() => {
|
||||
if (route.name === 'tag') {
|
||||
this.tag = route.params.tag
|
||||
tag.value = route.params.tag as string
|
||||
}
|
||||
})
|
||||
watch(
|
||||
() => route.params.tag,
|
||||
() => {
|
||||
if (route.name === 'tag') {
|
||||
tag.value = route.params.tag as string
|
||||
}
|
||||
}
|
||||
)
|
||||
const search = () => {
|
||||
router.push({ path: `/${id.value}/hashtag/${tag.value}` })
|
||||
}
|
||||
const back = () => {
|
||||
router.push({ path: `/${id.value}/hashtag` })
|
||||
}
|
||||
const save = () => {
|
||||
store.dispatch('TimelineSpace/Contents/Hashtag/saveTag', tag.value)
|
||||
}
|
||||
|
||||
return {
|
||||
tagPage,
|
||||
tag,
|
||||
back,
|
||||
search,
|
||||
save
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
id() {
|
||||
return this.$route.params.id
|
||||
},
|
||||
search() {
|
||||
this.$router.push({ path: `/${this.id()}/hashtag/${this.tag}` })
|
||||
},
|
||||
tagPage() {
|
||||
return this.$route.name === 'tag'
|
||||
},
|
||||
back() {
|
||||
this.$router.push({ path: `/${this.id()}/hashtag` })
|
||||
},
|
||||
save() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/saveTag', this.tag)
|
||||
}
|
||||
}
|
||||
}
|
||||
methods: {}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -17,30 +17,41 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useStore } from '@/store'
|
||||
import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/Hashtag/List'
|
||||
import { LocalTag } from '~/src/types/localTag'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'list',
|
||||
computed: {
|
||||
...mapState({
|
||||
tags: state => state.TimelineSpace.Contents.Hashtag.List.tags
|
||||
setup() {
|
||||
const space = 'TimelineSpace/Contents/Hashtag/List'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const tags = computed(() => store.state.TimelineSpace.Contents.Hashtag.List.tags)
|
||||
|
||||
onMounted(() => {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.LIST_TAGS}`)
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/List/listTags')
|
||||
},
|
||||
methods: {
|
||||
openTimeline(tagName) {
|
||||
this.$router.push({
|
||||
path: `/${this.$route.params.id}/hashtag/${tagName}`
|
||||
const openTimeline = (tagName: string) => {
|
||||
router.push({
|
||||
path: `/${route.params.id}/hashtag/${tagName}`
|
||||
})
|
||||
},
|
||||
deleteTag(tag) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/List/removeTag', tag)
|
||||
}
|
||||
const deleteTag = (tag: LocalTag) => {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.REMOVE_TAG}`, tag)
|
||||
}
|
||||
|
||||
return {
|
||||
tags,
|
||||
openTimeline,
|
||||
deleteTag
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -29,259 +29,253 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, ref, toRefs, watch } from 'vue'
|
||||
import moment from 'moment'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { EventEmitter } from '~/src/renderer/components/event'
|
||||
import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Entity } from 'megalodon'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
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'
|
||||
import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
|
||||
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Hashtag/Tag'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null,
|
||||
scrollPosition: null,
|
||||
observer: null,
|
||||
scrollTime: null,
|
||||
resizeTime: null
|
||||
}
|
||||
},
|
||||
export default defineComponent({
|
||||
name: 'tag',
|
||||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
props: ['tag'],
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
timeline: state => state.TimelineSpace.Contents.Hashtag.Tag.timeline,
|
||||
lazyLoading: state => state.TimelineSpace.Contents.Hashtag.Tag.lazyLoading,
|
||||
heading: state => state.TimelineSpace.Contents.Hashtag.Tag.heading,
|
||||
scrolling: state => state.TimelineSpace.Contents.Hashtag.Tag.scrolling
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function () {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
}
|
||||
if (!this.focusedId) {
|
||||
return true
|
||||
}
|
||||
// Sometimes toots are deleted, so perhaps focused toot don't exist.
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
return currentIndex === -1
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
this.load(this.tag).finally(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
document.getElementById('scroller').addEventListener('scroll', this.onScroll)
|
||||
setup(props) {
|
||||
const space = 'TimelineSpace/Contents/Hashtag/Tag'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const i18n = useI18next()
|
||||
const { reloadable } = useReloadable(store, route, i18n)
|
||||
|
||||
EventEmitter.on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.focusedId = previousFocusedId
|
||||
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(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
|
||||
|
||||
onMounted(() => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
load(tag.value).finally(() => {
|
||||
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)
|
||||
reset()
|
||||
load(newTag).finally(() => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
|
||||
})
|
||||
})
|
||||
const el = document.getElementById('scroller')
|
||||
this.scrollPosition = new ScrollPosition(el)
|
||||
this.scrollPosition.prepare()
|
||||
|
||||
this.observer = new ResizeObserver(() => {
|
||||
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
|
||||
this.resizeTime = moment()
|
||||
this.scrollPosition.restore()
|
||||
}
|
||||
})
|
||||
|
||||
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||
this.observer.observe(scrollWrapper)
|
||||
},
|
||||
beforeUpdate() {
|
||||
if (this.scrollPosition) {
|
||||
this.scrollPosition.prepare()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tag: function (newTag, _oldTag) {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
this.reset()
|
||||
this.load(newTag).finally(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
},
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
watch(startReload, (newVal, oldVal) => {
|
||||
if (!oldVal && newVal) {
|
||||
reload().finally(() => {
|
||||
store.commit(`TimelineSpace/HeaderMenu/${HEADER_MUTATION.CHANGE_RELOAD}`, false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
|
||||
this.reset()
|
||||
EventEmitter.off('focus-timeline')
|
||||
this.observer.disconnect()
|
||||
},
|
||||
methods: {
|
||||
async load(tag) {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
|
||||
reset()
|
||||
EventEmitter.off('focus-timeline')
|
||||
observer.value?.disconnect()
|
||||
})
|
||||
|
||||
const load = async (tag: string) => {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH}`, tag).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.start_streaming_error'),
|
||||
store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, tag).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
return true
|
||||
},
|
||||
reset() {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/archiveTimeline')
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/clearTimeline')
|
||||
if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
|
||||
document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
|
||||
document.getElementById('scroller').scrollTop = 0
|
||||
}
|
||||
const reset = () => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.ARCHIVE_TIMELINE}`)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CLEAR_TIMELINE}`)
|
||||
const el = document.getElementById('scroller')
|
||||
if (el !== undefined && el !== null) {
|
||||
el.removeEventListener('scroll', onScroll)
|
||||
el.scrollTop = 0
|
||||
}
|
||||
},
|
||||
updateToot(toot) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/updateToot', toot)
|
||||
},
|
||||
deleteToot(toot) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/deleteToot', toot.id)
|
||||
},
|
||||
onScroll(event) {
|
||||
if (moment().diff(this.resizeTime) < 500) {
|
||||
}
|
||||
const onScroll = (event: Event) => {
|
||||
if (moment().diff(resizeTime.value) < 500) {
|
||||
return
|
||||
}
|
||||
this.scrollTime = moment()
|
||||
if (!this.scrolling) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', true)
|
||||
scrollTime.value = moment()
|
||||
if (!scrolling.value) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
}
|
||||
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
|
||||
!this.lazyloading
|
||||
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
|
||||
document.getElementById('scroller')!.scrollHeight - 10 &&
|
||||
!lazyLoading.value
|
||||
) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/Hashtag/Tag/lazyFetchTimeline', {
|
||||
tag: this.tag,
|
||||
status: this.timeline[this.timeline.length - 1]
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, {
|
||||
tag: tag.value,
|
||||
status: timeline.value[timeline.value.length - 1]
|
||||
})
|
||||
.then(statuses => {
|
||||
if (statuses === null) {
|
||||
return
|
||||
}
|
||||
if (statuses.length > 0) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', false)
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
|
||||
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(this.scrollTime) >= 150) {
|
||||
this.scrollTime = null
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', false)
|
||||
if (now.diff(scrollTime.value) >= 150) {
|
||||
scrollTime.value = null
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}
|
||||
}, 150)
|
||||
},
|
||||
async reload() {
|
||||
const tag = this.tag
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
}
|
||||
const updateToot = (toot: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, toot)
|
||||
}
|
||||
const deleteToot = (toot: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, toot.id)
|
||||
}
|
||||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
await reloadable()
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH}`, tag.value).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.start_streaming_error'),
|
||||
store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, tag.value).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
},
|
||||
upper() {
|
||||
this.$refs.scroller.scrollToItem(0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
} else if (currentIndex < this.timeline.length) {
|
||||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
const upper = () => {
|
||||
scroller.value.scrollToItem(0)
|
||||
focusedId.value = null
|
||||
}
|
||||
const focusNext = () => {
|
||||
if (currentFocusedIndex.value === -1) {
|
||||
focusedId.value = timeline.value[0].uri + timeline.value[0].id
|
||||
} else if (currentFocusedIndex.value < timeline.value.length) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
} else if (currentIndex > 0) {
|
||||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
const focusPrev = () => {
|
||||
if (currentFocusedIndex.value === 0) {
|
||||
focusedId.value = null
|
||||
} else if (currentFocusedIndex.value > 0) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
|
||||
}
|
||||
},
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusSidebar() {
|
||||
}
|
||||
const focusToot = (message: Entity.Status) => {
|
||||
focusedId.value = message.uri + message.id
|
||||
}
|
||||
const focusSidebar = () => {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
},
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
break
|
||||
}
|
||||
},
|
||||
sizeChanged() {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', true)
|
||||
}
|
||||
const sizeChanged = () => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
return {
|
||||
timeline,
|
||||
scroller,
|
||||
focusedId,
|
||||
modalOpened,
|
||||
updateToot,
|
||||
deleteToot,
|
||||
focusNext,
|
||||
focusPrev,
|
||||
focusSidebar,
|
||||
focusToot,
|
||||
sizeChanged,
|
||||
openSideBar,
|
||||
heading,
|
||||
upper
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -37,254 +37,261 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onBeforeUnmount, watch, onUnmounted } from 'vue'
|
||||
import moment from 'moment'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import StatusLoading from '~/src/renderer/components/organisms/StatusLoading'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { EventEmitter } from '~/src/renderer/components/event'
|
||||
import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Entity } from 'megalodon'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { useRoute } from 'vue-router'
|
||||
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'
|
||||
import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
|
||||
import useReloadable from '@/components/utils/reloadable'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null,
|
||||
scrollPosition: null,
|
||||
observer: null,
|
||||
scrollTime: null,
|
||||
resizeTime: null,
|
||||
loadingMore: false
|
||||
}
|
||||
},
|
||||
export default defineComponent({
|
||||
name: 'home',
|
||||
components: { Toot, StatusLoading },
|
||||
mixins: [reloadable],
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Contents/Home', {
|
||||
timeline: state => state.timeline,
|
||||
lazyLoading: state => state.lazyLoading,
|
||||
heading: state => state.heading,
|
||||
showReblogs: state => state.showReblogs,
|
||||
showReplies: state => state.showReplies,
|
||||
scrolling: state => state.scrolling
|
||||
}),
|
||||
...mapState({
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
...mapGetters('TimelineSpace/Contents/Home', ['filters']),
|
||||
shortcutEnabled: function () {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
}
|
||||
if (!this.focusedId) {
|
||||
return true
|
||||
}
|
||||
// Sometimes toots are deleted, so perhaps focused toot don't exist.
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
return currentIndex === -1
|
||||
},
|
||||
filteredTimeline() {
|
||||
return this.timeline.filter(toot => {
|
||||
if (toot.in_reply_to_id) {
|
||||
return this.showReplies
|
||||
} else if (toot.reblog) {
|
||||
return this.showReblogs
|
||||
setup() {
|
||||
const space = 'TimelineSpace/Contents/Home'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const i18n = useI18next()
|
||||
const { reloadable } = useReloadable(store, route, i18n)
|
||||
|
||||
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 timeline = computed(() => store.state.TimelineSpace.Contents.Home.timeline)
|
||||
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Home.lazyLoading)
|
||||
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(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const filters = computed(() => store.getters[`${space}/filters`])
|
||||
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
|
||||
// const shortcutEnabled = computed(() => {
|
||||
// if (modalOpened.value) {
|
||||
// return false
|
||||
// }
|
||||
// if (!focusedId.value) {
|
||||
// return true
|
||||
// }
|
||||
// // Sometimes toots are deleted, so perhaps focused toot don't exist.
|
||||
// return currentFocusedIndex.value === -1
|
||||
// })
|
||||
const filteredTimeline = computed(() => {
|
||||
return timeline.value.filter(toot => {
|
||||
if ('url' in toot) {
|
||||
if (toot.in_reply_to_id) {
|
||||
return showReplies.value
|
||||
} else if (toot.reblog) {
|
||||
return showReblogs.value
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
|
||||
document.getElementById('scroller').addEventListener('scroll', this.onScroll)
|
||||
EventEmitter.on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
|
||||
if (this.heading && this.timeline.length > 0) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Home/saveMarker')
|
||||
}
|
||||
const el = document.getElementById('scroller')
|
||||
this.scrollPosition = new ScrollPosition(el)
|
||||
this.scrollPosition.prepare()
|
||||
onMounted(() => {
|
||||
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_HOME_TIMELINE}`, false)
|
||||
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
|
||||
|
||||
this.observer = new ResizeObserver(() => {
|
||||
if (this.loadingMore || (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling)) {
|
||||
this.resizeTime = moment()
|
||||
this.scrollPosition.restore()
|
||||
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)
|
||||
}
|
||||
})
|
||||
|
||||
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||
this.observer.observe(scrollWrapper)
|
||||
},
|
||||
beforeUpdate() {
|
||||
if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline && this.heading) {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
|
||||
}
|
||||
if (this.scrollPosition) {
|
||||
this.scrollPosition.prepare()
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
EventEmitter.off('focus-timeline')
|
||||
this.observer.disconnect()
|
||||
},
|
||||
unmounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Home/archiveTimeline')
|
||||
if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
|
||||
document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
|
||||
document.getElementById('scroller').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
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)
|
||||
store.commit(`${space}/${MUTATION_TYPES.ARCHIVE_TIMELINE}`)
|
||||
const el = document.getElementById('scroller')
|
||||
if (el !== undefined && el !== null) {
|
||||
el.removeEventListener('scroll', onScroll)
|
||||
el.scrollTop = 0
|
||||
}
|
||||
})
|
||||
watch(startReload, (newVal, oldVal) => {
|
||||
if (!oldVal && newVal) {
|
||||
reload().finally(() => {
|
||||
store.commit(`TimelineSpace/HeaderMenu/${HEADER_MUTATION.CHANGE_RELOAD}`, false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
|
||||
}
|
||||
},
|
||||
timeline: {
|
||||
handler(newState, _oldState) {
|
||||
if (this.heading && newState.length > 0) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Home/saveMarker')
|
||||
})
|
||||
watch(
|
||||
timeline,
|
||||
(newState, _oldState) => {
|
||||
if (heading.value && newState.length > 0) {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onScroll(event) {
|
||||
if (moment().diff(this.resizeTime) < 500) {
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
const onScroll = (event: Event) => {
|
||||
if (moment().diff(resizeTime.value) < 500) {
|
||||
return
|
||||
}
|
||||
this.scrollTime = moment()
|
||||
if (!this.scrolling) {
|
||||
this.$store.commit('TimelineSpace/Contents/Home/changeScrolling', true)
|
||||
scrollTime.value = moment()
|
||||
if (!scrolling.value) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
}
|
||||
|
||||
// for lazyLoading
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
|
||||
!this.lazyloading
|
||||
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
|
||||
document.getElementById('scroller')!.scrollHeight - 10 &&
|
||||
!lazyLoading.value
|
||||
) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/Home/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, timeline.value[timeline.value.length - 1])
|
||||
.then(statuses => {
|
||||
if (statuses === null) {
|
||||
return
|
||||
}
|
||||
if (statuses.length > 0) {
|
||||
this.$store.commit('TimelineSpace/Contents/Home/changeScrolling', true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Home/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
|
||||
} else if (event.target.scrollTop <= 5 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
|
||||
if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
|
||||
} 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(this.scrollTime) >= 150) {
|
||||
this.scrollTime = null
|
||||
this.$store.commit('TimelineSpace/Contents/Home/changeScrolling', false)
|
||||
if (now.diff(scrollTime.value) >= 150) {
|
||||
scrollTime.value = null
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}
|
||||
}, 150)
|
||||
},
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Home/updateToot', message)
|
||||
},
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Home/deleteToot', message.id)
|
||||
},
|
||||
fetchTimelineSince(since_id) {
|
||||
this.loadingMore = true
|
||||
this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimelineSince', since_id).finally(() => {
|
||||
}
|
||||
const updateToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||
}
|
||||
const deleteToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message.id)
|
||||
}
|
||||
const fetchTimelineSince = (since_id: string) => {
|
||||
loadingMore.value = true
|
||||
store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE_SINCE}`, since_id).finally(() => {
|
||||
setTimeout(() => {
|
||||
this.loadingMore = false
|
||||
loadingMore.value = false
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
}
|
||||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
await reloadable()
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
},
|
||||
upper() {
|
||||
this.$refs.scroller.scrollToItem(0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
} else if (currentIndex < this.timeline.length) {
|
||||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
const upper = () => {
|
||||
scroller.value.scrollToItem(0)
|
||||
focusedId.value = null
|
||||
}
|
||||
const focusNext = () => {
|
||||
if (currentFocusedIndex.value === -1) {
|
||||
focusedId.value = timeline.value[0].uri + timeline.value[0].id
|
||||
} else if (currentFocusedIndex.value < timeline.value.length) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
} else if (currentIndex > 0) {
|
||||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
const focusPrev = () => {
|
||||
if (currentFocusedIndex.value === 0) {
|
||||
focusedId.value = null
|
||||
} else if (currentFocusedIndex.value > 0) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
|
||||
}
|
||||
},
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusSidebar() {
|
||||
}
|
||||
const focusToot = (message: Entity.Status) => {
|
||||
focusedId.value = message.uri + message.id
|
||||
}
|
||||
const focusSidebar = () => {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
},
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
break
|
||||
}
|
||||
},
|
||||
sizeChanged() {
|
||||
this.$store.commit('TimelineSpace/Contents/Home/changeScrolling', true)
|
||||
}
|
||||
const sizeChanged = () => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Home/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
return {
|
||||
filteredTimeline,
|
||||
scroller,
|
||||
loadingMore,
|
||||
fetchTimelineSince,
|
||||
focusedId,
|
||||
modalOpened,
|
||||
filters,
|
||||
updateToot,
|
||||
deleteToot,
|
||||
focusNext,
|
||||
focusPrev,
|
||||
focusSidebar,
|
||||
focusToot,
|
||||
sizeChanged,
|
||||
openSideBar,
|
||||
heading,
|
||||
upper
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -6,83 +6,82 @@
|
|||
</el-button>
|
||||
</div>
|
||||
<template v-for="account in members">
|
||||
<user
|
||||
:user="account"
|
||||
:remove="true"
|
||||
@removeAccount="removeAccount"
|
||||
></user>
|
||||
<user :user="account" :remove="true" @removeAccount="removeAccount"></user>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import User from '~/src/renderer/components/molecules/User'
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, toRefs } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { Entity } from 'megalodon'
|
||||
import { useStore } from '@/store'
|
||||
import User from '@/components/molecules/User.vue'
|
||||
import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
|
||||
import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Edit'
|
||||
import {
|
||||
MUTATION_TYPES as ADD_LIST_MEMBER_MUTATION,
|
||||
ACTION_TYPES as ADD_LIST_MEMBER_ACTION
|
||||
} from '@/store/TimelineSpace/Modals/AddListMember'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'edit-list',
|
||||
props: ['list_id'],
|
||||
components: { User },
|
||||
computed: {
|
||||
...mapState({
|
||||
members: (state) => state.TimelineSpace.Contents.Lists.Edit.members,
|
||||
}),
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
setup(props) {
|
||||
const { list_id } = toRefs(props)
|
||||
const space = 'TimelineSpace/Contents/Lists/Edit'
|
||||
const store = useStore()
|
||||
const i18n = useI18next()
|
||||
|
||||
const members = computed(() => store.state.TimelineSpace.Contents.Lists.Edit.members)
|
||||
|
||||
onMounted(async () => {
|
||||
await init()
|
||||
})
|
||||
const init = async () => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
await this.$store.dispatch(
|
||||
'TimelineSpace/Contents/Lists/Edit/fetchMembers',
|
||||
this.list_id
|
||||
)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_MEMBERS}`, list_id.value)
|
||||
} catch (err) {
|
||||
this.$message({
|
||||
message: this.$t('message.members_fetch_error'),
|
||||
type: 'error',
|
||||
ElMessage({
|
||||
message: i18n.t('message.members_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
},
|
||||
async removeAccount(account) {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
}
|
||||
const removeAccount = async (account: Entity.Account) => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
await this.$store.dispatch(
|
||||
'TimelineSpace/Contents/Lists/Edit/removeAccount',
|
||||
{
|
||||
account: account,
|
||||
listId: this.list_id,
|
||||
}
|
||||
)
|
||||
await this.$store.dispatch(
|
||||
'TimelineSpace/Contents/Lists/Edit/fetchMembers',
|
||||
this.list_id
|
||||
)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.REMOVE_ACCOUNT}`, {
|
||||
account: account,
|
||||
listId: list_id.value
|
||||
})
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_MEMBERS}`, list_id.value)
|
||||
} catch (err) {
|
||||
this.$message({
|
||||
message: this.$t('message.remove_user_error'),
|
||||
type: 'error',
|
||||
ElMessage({
|
||||
message: i18n.t('message.remove_user_error'),
|
||||
type: 'error'
|
||||
})
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
},
|
||||
addAccount() {
|
||||
this.$store.commit(
|
||||
'TimelineSpace/Modals/AddListMember/setListId',
|
||||
this.list_id
|
||||
)
|
||||
this.$store.dispatch(
|
||||
'TimelineSpace/Modals/AddListMember/changeModal',
|
||||
true
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
const addAccount = () => {
|
||||
store.commit(`TimelineSpace/Modals/AddListMember/${ADD_LIST_MEMBER_MUTATION.SET_LIST_ID}`, list_id.value)
|
||||
store.dispatch(`TimelineSpace/Modals/AddListMember/${ADD_LIST_MEMBER_ACTION.CHANGE_MODAL}`, true)
|
||||
}
|
||||
|
||||
return {
|
||||
addAccount,
|
||||
members,
|
||||
removeAccount
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</el-form>
|
||||
</div>
|
||||
<div class="list" v-for="list in lists" :key="list.id">
|
||||
<router-link tag="div" class="title" :to="`/${id()}/lists/${list.id}`">
|
||||
<router-link tag="div" class="title" :to="`/${id}/lists/${list.id}`">
|
||||
{{ list.title }}
|
||||
</router-link>
|
||||
<div class="tools">
|
||||
|
|
@ -24,72 +24,90 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Entity } from 'megalodon'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useStore } from '@/store'
|
||||
import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
|
||||
import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Index'
|
||||
import { ACTION_TYPES as SIDE_MENU_ACTION } from '@/store/TimelineSpace/SideMenu'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'lists',
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
creating: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
lists: state => state.TimelineSpace.Contents.Lists.Index.lists,
|
||||
loadingBackground: state => state.App.theme.wrapper_mask_color
|
||||
setup() {
|
||||
const space = 'TimelineSpace/Contents/Lists/Index'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const i18n = useI18next()
|
||||
|
||||
const title = ref<string>('')
|
||||
const creating = ref<boolean>(false)
|
||||
|
||||
const lists = computed(() => store.state.TimelineSpace.Contents.Lists.Index.lists)
|
||||
const loadingBackground = computed(() => store.state.App.theme.wrapper_mask_color)
|
||||
const id = computed(() => route.params.id)
|
||||
|
||||
onMounted(() => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
fetch().finally(() => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
})
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
this.fetch().finally(() => {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
id() {
|
||||
return this.$route.params.id
|
||||
},
|
||||
fetch() {
|
||||
return this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists').catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.lists_fetch_error'),
|
||||
|
||||
const fetch = async () => {
|
||||
return store.dispatch(`${space}/${ACTION_TYPES.FETCH_LISTS}`).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.lists_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
async createList() {
|
||||
this.creating = true
|
||||
}
|
||||
const createList = async () => {
|
||||
creating.value = true
|
||||
try {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/createList', this.title)
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists')
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.CREATE_LIST}`, title.value)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LISTS}`)
|
||||
} catch (err) {
|
||||
this.$message({
|
||||
message: this.$t('message.list_create_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.list_create_error'),
|
||||
type: 'error'
|
||||
})
|
||||
} finally {
|
||||
this.creating = false
|
||||
creating.value = false
|
||||
}
|
||||
await this.$store.dispatch('TimelineSpace/SideMenu/fetchLists')
|
||||
},
|
||||
edit(list) {
|
||||
return this.$router.push(`/${this.id()}/lists/${list.id}/edit`)
|
||||
},
|
||||
del(list) {
|
||||
this.$confirm(this.$t('lists.index.delete.confirm.message'), this.$t('lists.index.delete.confirm.title'), {
|
||||
confirmButtonText: this.$t('lists.index.delete.confirm.ok'),
|
||||
cancelButtonText: this.$t('lists.index.delete.confirm.cancel'),
|
||||
await store.dispatch(`TimelineSpace/SideMenu/${SIDE_MENU_ACTION.FETCH_LISTS}`)
|
||||
}
|
||||
const edit = (list: Entity.List) => {
|
||||
return router.push(`/${id.value}/lists/${list.id}/edit`)
|
||||
}
|
||||
const del = (list: Entity.List) => {
|
||||
ElMessageBox.confirm(i18n.t('lists.index.delete.confirm.message'), i18n.t('lists.index.delete.confirm.title'), {
|
||||
confirmButtonText: i18n.t('lists.index.delete.confirm.ok'),
|
||||
cancelButtonText: i18n.t('lists.index.delete.confirm.cancel'),
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Lists/Index/deleteList', list)
|
||||
store.dispatch(`${space}/${ACTION_TYPES.DELETE_LIST}`, list)
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
return {
|
||||
id,
|
||||
creating,
|
||||
title,
|
||||
lists,
|
||||
loadingBackground,
|
||||
createList,
|
||||
edit,
|
||||
del
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -29,259 +29,248 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, ref, computed, onMounted, onBeforeUpdate, watch, onBeforeUnmount, onUnmounted } from 'vue'
|
||||
import moment from 'moment'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { EventEmitter } from '~/src/renderer/components/event'
|
||||
import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
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'
|
||||
import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null,
|
||||
scrollPosition: null,
|
||||
observer: null,
|
||||
scrollTime: null,
|
||||
resizeTime: null
|
||||
}
|
||||
},
|
||||
export default defineComponent({
|
||||
name: 'list',
|
||||
props: ['list_id'],
|
||||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
timeline: state => state.TimelineSpace.Contents.Lists.Show.timeline,
|
||||
lazyLoading: state => state.TimelineSpace.Contents.Lists.Show.lazyLoading,
|
||||
heading: state => state.TimelineSpace.Contents.Lists.Show.heading,
|
||||
scrolling: state => state.TimelineSpace.Contents.Lists.Show.scrolling
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function () {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
setup(props) {
|
||||
const space = 'TimelineSpace/Contents/Lists/Show'
|
||||
const store = useStore()
|
||||
const i18n = useI18next()
|
||||
|
||||
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(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
|
||||
|
||||
onMounted(() => {
|
||||
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
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)
|
||||
}
|
||||
if (!this.focusedId) {
|
||||
return true
|
||||
}
|
||||
// Sometimes toots are deleted, so perhaps focused toot don't exist.
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
return currentIndex === -1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
this.load().finally(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
document.getElementById('scroller').addEventListener('scroll', this.onScroll)
|
||||
EventEmitter.on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.focusedId = previousFocusedId
|
||||
onBeforeUpdate(() => {
|
||||
if (scrollPosition.value) {
|
||||
scrollPosition.value.prepare()
|
||||
}
|
||||
})
|
||||
watch(list_id, () => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
load().finally(() => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
|
||||
})
|
||||
})
|
||||
const el = document.getElementById('scroller')
|
||||
this.scrollPosition = new ScrollPosition(el)
|
||||
this.scrollPosition.prepare()
|
||||
|
||||
this.observer = new ResizeObserver(() => {
|
||||
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
|
||||
this.resizeTime = moment()
|
||||
this.scrollPosition.restore()
|
||||
}
|
||||
})
|
||||
|
||||
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||
this.observer.observe(scrollWrapper)
|
||||
},
|
||||
beforeUpdate() {
|
||||
if (this.scrollPosition) {
|
||||
this.scrollPosition.prepare()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
list_id: function () {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
this.load().finally(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
},
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
watch(startReload, (newVal, oldVal) => {
|
||||
if (!oldVal && newVal) {
|
||||
reload().finally(() => {
|
||||
store.commit(`TimelineSpace/HeaderMenu/${HEADER_MUTATION.CHANGE_RELOAD}`, false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
|
||||
observer.value?.disconnect()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.ARCHIVE_TIMELINE}`)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CLEAR_TIMELINE}`)
|
||||
const el = document.getElementById('scroller')
|
||||
if (el !== undefined && el !== null) {
|
||||
el.removeEventListener('scroll', onScroll)
|
||||
el.scrollTop = 0
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
|
||||
this.observer.disconnect()
|
||||
},
|
||||
unmounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/archiveTimeline')
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/clearTimeline')
|
||||
if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
|
||||
document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
|
||||
document.getElementById('scroller').scrollTop = 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async load() {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
|
||||
})
|
||||
|
||||
const load = async () => {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
|
||||
try {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/fetchTimeline', this.list_id)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`, list_id.value)
|
||||
} catch (err) {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.start_streaming_error'),
|
||||
store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, list_id.value).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
return 'started'
|
||||
},
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/updateToot', message)
|
||||
},
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/deleteToot', message.id)
|
||||
},
|
||||
onScroll(event) {
|
||||
if (moment().diff(this.resizeTime) < 500) {
|
||||
}
|
||||
const onScroll = (event: Event) => {
|
||||
if (moment().diff(resizeTime.value) < 500) {
|
||||
return
|
||||
}
|
||||
this.scrollTime = moment()
|
||||
if (!this.scrolling) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeScrolling', true)
|
||||
scrollTime.value = moment()
|
||||
if (!scrolling.value) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
}
|
||||
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
|
||||
!this.lazyloading
|
||||
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
|
||||
document.getElementById('scroller')!.scrollHeight - 10 &&
|
||||
!lazyLoading
|
||||
) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/Lists/Show/lazyFetchTimeline', {
|
||||
list_id: this.list_id,
|
||||
status: this.timeline[this.timeline.length - 1]
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, {
|
||||
list_id: list_id.value,
|
||||
status: timeline.value[timeline.value.length - 1]
|
||||
})
|
||||
.then(statuses => {
|
||||
if (statuses === null) {
|
||||
return
|
||||
}
|
||||
if (statuses.length > 0) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeScrolling', true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', false)
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
|
||||
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(this.scrollTime) >= 150) {
|
||||
this.scrollTime = null
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeScrolling', false)
|
||||
if (now.diff(scrollTime.value) >= 150) {
|
||||
scrollTime.value = null
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}
|
||||
}, 150)
|
||||
},
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
}
|
||||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/fetchTimeline', this.list_id).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`, list_id.value).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.start_streaming_error'),
|
||||
store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, list_id.value).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
},
|
||||
upper() {
|
||||
this.$refs.scroller.scrollToItem(0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
} else if (currentIndex < this.timeline.length) {
|
||||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
const updateToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||
}
|
||||
const deleteToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message.id)
|
||||
}
|
||||
const upper = () => {
|
||||
scroller.value.scrollToItem(0)
|
||||
focusedId.value = null
|
||||
}
|
||||
const focusNext = () => {
|
||||
if (currentFocusedIndex.value === -1) {
|
||||
focusedId.value = timeline.value[0].uri + timeline.value[0].id
|
||||
} else if (currentFocusedIndex.value < timeline.value.length) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
} else if (currentIndex > 0) {
|
||||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
const focusPrev = () => {
|
||||
if (currentFocusedIndex.value === 0) {
|
||||
focusedId.value = null
|
||||
} else if (currentFocusedIndex.value > 0) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
|
||||
}
|
||||
},
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusSidebar() {
|
||||
}
|
||||
const focusToot = (message: Entity.Status) => {
|
||||
focusedId.value = message.uri + message.id
|
||||
}
|
||||
const focusSidebar = () => {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
},
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
break
|
||||
}
|
||||
},
|
||||
sizeChanged() {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeScrolling', true)
|
||||
}
|
||||
const sizeChanged = () => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
return {
|
||||
scroller,
|
||||
timeline,
|
||||
focusedId,
|
||||
modalOpened,
|
||||
updateToot,
|
||||
deleteToot,
|
||||
focusNext,
|
||||
focusPrev,
|
||||
focusSidebar,
|
||||
focusToot,
|
||||
sizeChanged,
|
||||
openSideBar,
|
||||
heading,
|
||||
upper
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -29,242 +29,234 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import moment from 'moment'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { EventEmitter } from '~/src/renderer/components/event'
|
||||
import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Entity } from 'megalodon'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
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'
|
||||
import { MUTATION_TYPES as TIMELINE_MUTATION, ACTION_TYPES as TIMELINE_ACTION } from '@/store/TimelineSpace'
|
||||
import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
|
||||
import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null,
|
||||
scrollPosition: null,
|
||||
observer: null,
|
||||
scrollTime: null,
|
||||
resizeTime: null
|
||||
}
|
||||
},
|
||||
export default defineComponent({
|
||||
name: 'local',
|
||||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Contents/Local', {
|
||||
timeline: state => state.timeline,
|
||||
lazyLoading: state => state.lazyLoading,
|
||||
heading: state => state.heading,
|
||||
scrolling: state => state.scrolling
|
||||
}),
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
unreadNotification: state => state.TimelineSpace.timelineSetting.unreadNotification
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function () {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
}
|
||||
if (!this.focusedId) {
|
||||
return true
|
||||
}
|
||||
// Sometimes toots are deleted, so perhaps focused toot don't exist.
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
return currentIndex === -1
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
console.log(this.unreadNotification)
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
|
||||
document.getElementById('scroller').addEventListener('scroll', this.onScroll)
|
||||
if (!this.unreadNotification.local) {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
await this.initialize().finally(_ => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
}
|
||||
setup() {
|
||||
const space = 'TimelineSpace/Contents/Local'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const i18n = useI18next()
|
||||
const { reloadable } = useReloadable(store, route, i18n)
|
||||
|
||||
EventEmitter.on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
const el = document.getElementById('scroller')
|
||||
this.scrollPosition = new ScrollPosition(el)
|
||||
this.scrollPosition.prepare()
|
||||
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)
|
||||
|
||||
this.observer = new ResizeObserver(() => {
|
||||
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
|
||||
this.resizeTime = moment()
|
||||
this.scrollPosition.restore()
|
||||
}
|
||||
})
|
||||
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)
|
||||
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
|
||||
|
||||
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||
this.observer.observe(scrollWrapper)
|
||||
},
|
||||
beforeUpdate() {
|
||||
if (this.$store.state.TimelineSpace.SideMenu.unreadLocalTimeline && this.heading) {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
|
||||
}
|
||||
if (this.scrollPosition) {
|
||||
this.scrollPosition.prepare()
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (!this.unreadNotification.local) {
|
||||
this.$store.dispatch('TimelineSpace/stopLocalStreaming')
|
||||
this.$store.dispatch('TimelineSpace/unbindLocalStreaming')
|
||||
}
|
||||
EventEmitter.off('focus-timeline')
|
||||
this.observer.disconnect()
|
||||
},
|
||||
unmounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Local/archiveTimeline')
|
||||
if (!this.unreadNotification.local) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/clearTimeline')
|
||||
}
|
||||
if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
|
||||
document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
|
||||
document.getElementById('scroller').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
onMounted(async () => {
|
||||
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_LOCAL_TIMELINE}`, false)
|
||||
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
|
||||
if (!unreadNotification.value.local) {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
await initialize().finally(() => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async initialize() {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline').catch(_ => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
})
|
||||
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) {
|
||||
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.STOP_LOCAL_STREAMING}`)
|
||||
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.UNBIND_LOCAL_STREAMING}`)
|
||||
}
|
||||
EventEmitter.off('focus-timeline')
|
||||
observer.value?.disconnect()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.ARCHIVE_TIMELINE}`)
|
||||
if (!unreadNotification.value.local) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CLEAR_TIMELINE}`)
|
||||
}
|
||||
const el = document.getElementById('scroller')
|
||||
if (el) {
|
||||
el.removeEventListener('scroll', onScroll)
|
||||
el.scrollTop = 0
|
||||
}
|
||||
})
|
||||
watch(startReload, (newVal, oldVal) => {
|
||||
if (!oldVal && newVal) {
|
||||
reload().finally(() => {
|
||||
store.commit(`TimelineSpace/HeaderMenu/${HEADER_MUTATION.CHANGE_RELOAD}`, false)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const initialize = async () => {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LOCAL_TIMELINE}`).catch(_ => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
await this.$store.dispatch('TimelineSpace/bindLocalStreaming')
|
||||
this.$store.dispatch('TimelineSpace/startLocalStreaming')
|
||||
},
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/updateToot', message)
|
||||
},
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/deleteToot', message.id)
|
||||
},
|
||||
onScroll(event) {
|
||||
if (moment().diff(this.resizeTime) < 500) {
|
||||
await store.dispatch(`TimelineSpace/${TIMELINE_ACTION.BIND_LOCAL_STREAMING}`)
|
||||
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.START_LOCAL_STREAMING}`)
|
||||
}
|
||||
const onScroll = (event: Event) => {
|
||||
if (moment().diff(resizeTime.value) < 500) {
|
||||
return
|
||||
}
|
||||
this.scrollTime = moment()
|
||||
if (!this.scrolling) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeScrolling', true)
|
||||
scrollTime.value = moment()
|
||||
if (!scrolling.value) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
}
|
||||
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
|
||||
!this.lazyloading
|
||||
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
|
||||
document.getElementById('scroller')!.scrollHeight - 10 &&
|
||||
!lazyLoading.value
|
||||
) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, timeline.value[timeline.value.length - 1])
|
||||
.then(statuses => {
|
||||
if (statuses === null) {
|
||||
return
|
||||
}
|
||||
if (statuses.length > 0) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeScrolling', true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false)
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
|
||||
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(this.scrollTime) >= 150) {
|
||||
this.scrollTime = null
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeScrolling', false)
|
||||
if (now.diff(scrollTime.value) >= 150) {
|
||||
scrollTime.value = null
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}
|
||||
}, 150)
|
||||
},
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
}
|
||||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
await reloadable()
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
},
|
||||
upper() {
|
||||
this.$refs.scroller.scrollToItem(0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
} else if (currentIndex < this.timeline.length) {
|
||||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
const updateToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||
}
|
||||
const deleteToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message.id)
|
||||
}
|
||||
const upper = () => {
|
||||
scroller.value.scrollToItem(0)
|
||||
focusedId.value = null
|
||||
}
|
||||
const focusNext = () => {
|
||||
if (currentFocusedIndex.value === -1) {
|
||||
focusedId.value = timeline.value[0].uri + timeline.value[0].id
|
||||
} else if (currentFocusedIndex.value < timeline.value.length) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
} else if (currentIndex > 0) {
|
||||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
const focusPrev = () => {
|
||||
if (currentFocusedIndex.value === 0) {
|
||||
focusedId.value = null
|
||||
} else if (currentFocusedIndex.value > 0) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
|
||||
}
|
||||
},
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusSidebar() {
|
||||
}
|
||||
const focusToot = (message: Entity.Status) => {
|
||||
focusedId.value = message.uri + message.id
|
||||
}
|
||||
const focusSidebar = () => {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
},
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
break
|
||||
}
|
||||
},
|
||||
sizeChanged() {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeScrolling', true)
|
||||
}
|
||||
const sizeChanged = () => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
return {
|
||||
scroller,
|
||||
timeline,
|
||||
focusedId,
|
||||
modalOpened,
|
||||
updateToot,
|
||||
deleteToot,
|
||||
focusNext,
|
||||
focusPrev,
|
||||
focusSidebar,
|
||||
focusToot,
|
||||
sizeChanged,
|
||||
openSideBar,
|
||||
heading,
|
||||
upper
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -35,242 +35,240 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import moment from 'moment'
|
||||
import Notification from '~/src/renderer/components/organisms/Notification'
|
||||
import StatusLoading from '~/src/renderer/components/organisms/StatusLoading'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { EventEmitter } from '~/src/renderer/components/event'
|
||||
import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Entity } from 'megalodon'
|
||||
import { ElMessage } from 'element-plus'
|
||||
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'
|
||||
import { MUTATION_TYPES as SIDE_MENU_MUTATION } from '@/store/TimelineSpace/SideMenu'
|
||||
import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
|
||||
import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null,
|
||||
scrollPosition: null,
|
||||
observer: null,
|
||||
scrollTime: null,
|
||||
resizeTime: null,
|
||||
loadingMore: false
|
||||
}
|
||||
},
|
||||
export default defineComponent({
|
||||
name: 'mentions',
|
||||
components: { Notification, StatusLoading },
|
||||
mixins: [reloadable],
|
||||
computed: {
|
||||
...mapState('App', {
|
||||
backgroundColor: state => state.theme.background_color
|
||||
}),
|
||||
...mapState('TimelineSpace/HeaderMenu', {
|
||||
startReload: state => state.reload
|
||||
}),
|
||||
...mapState('TimelineSpace/Contents/SideBar', {
|
||||
openSideBar: state => state.openSideBar
|
||||
}),
|
||||
...mapState('TimelineSpace/Contents/Mentions', {
|
||||
lazyLoading: state => state.lazyLoading,
|
||||
heading: state => state.heading,
|
||||
scrolling: state => state.scrolling
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
...mapGetters('TimelineSpace/Contents/Mentions', ['mentions']),
|
||||
shortcutEnabled: function () {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
}
|
||||
if (!this.focusedId) {
|
||||
return true
|
||||
}
|
||||
// Sometimes toots are deleted, so perhaps focused toot don't exist.
|
||||
const currentIndex = this.mentions.findIndex(toot => this.focusedId === toot.id)
|
||||
return currentIndex === -1
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
|
||||
document.getElementById('scroller').addEventListener('scroll', this.onScroll)
|
||||
EventEmitter.on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
setup() {
|
||||
const space = 'TimelineSpace/Contents/Mentions'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const i18n = useI18next()
|
||||
const { reloadable } = useReloadable(store, route, i18n)
|
||||
|
||||
if (this.heading && this.mentions.length > 0) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Mentions/saveMarker')
|
||||
}
|
||||
const el = document.getElementById('scroller')
|
||||
this.scrollPosition = new ScrollPosition(el)
|
||||
this.scrollPosition.prepare()
|
||||
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>()
|
||||
|
||||
this.observer = new ResizeObserver(() => {
|
||||
if (this.loadingMore || (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling)) {
|
||||
this.resizeTime = moment()
|
||||
this.scrollPosition.restore()
|
||||
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(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const currentFocusedIndex = computed(() => mentions.value.findIndex(notification => focusedId.value === notification.id))
|
||||
// const shortcutEnabled = computed(() => {
|
||||
// if (modalOpened.value) {
|
||||
// return false
|
||||
// }
|
||||
// if (!focusedId.value) {
|
||||
// return true
|
||||
// }
|
||||
// // Sometimes toots are deleted, so perhaps focused toot don't exist.
|
||||
// return currentFocusedIndex.value === -1
|
||||
// })
|
||||
|
||||
onMounted(() => {
|
||||
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_HOME_TIMELINE}`, false)
|
||||
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
|
||||
|
||||
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)
|
||||
}
|
||||
})
|
||||
|
||||
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||
this.observer.observe(scrollWrapper)
|
||||
},
|
||||
beforeUpdate() {
|
||||
if (this.$store.state.TimelineSpace.SideMenu.unreadMentions && this.heading) {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
|
||||
}
|
||||
if (this.scrollPosition) {
|
||||
this.scrollPosition.prepare()
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
EventEmitter.off('focus-timeline')
|
||||
this.observer.disconnect()
|
||||
},
|
||||
unounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/archiveMentions')
|
||||
if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
|
||||
document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
|
||||
document.getElementById('scroller').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
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)
|
||||
store.commit(`${space}/${MUTATION_TYPES.ARCHIVE_MENTIONS}`)
|
||||
const el = document.getElementById('scroller')
|
||||
if (el !== undefined && el !== null) {
|
||||
el.removeEventListener('scroll', onScroll)
|
||||
el.scrollTop = 0
|
||||
}
|
||||
})
|
||||
watch(startReload, (newVal, oldVal) => {
|
||||
if (!oldVal && newVal) {
|
||||
reload().finally(() => {
|
||||
store.commit(`TimelineSpace/HeaderMenu/${HEADER_MUTATION.CHANGE_RELOAD}`, false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
|
||||
}
|
||||
},
|
||||
mentions: {
|
||||
handler(newState, _oldState) {
|
||||
if (this.heading && newState.length > 0) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Mentions/saveMarker')
|
||||
})
|
||||
watch(
|
||||
mentions,
|
||||
(newVal, _oldVal) => {
|
||||
if (heading.value && newVal.length > 0) {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onScroll(event) {
|
||||
if (moment().diff(this.resizeTime) < 500) {
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
const onScroll = (event: Event) => {
|
||||
if (moment().diff(resizeTime.value) < 500) {
|
||||
return
|
||||
}
|
||||
this.scrollTime = moment()
|
||||
if (!this.scrolling) {
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/changeScrolling', true)
|
||||
scrollTime.value = moment()
|
||||
if (!scrolling.value) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
}
|
||||
|
||||
// for lazyLoading
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
|
||||
!this.lazyloading
|
||||
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
|
||||
document.getElementById('scroller')!.scrollHeight - 10 &&
|
||||
!lazyLoading.value
|
||||
) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/Mentions/lazyFetchMentions', this.mentions[this.mentions.length - 1])
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_MENTIONS}`, mentions.value[mentions.value.length - 1])
|
||||
.then(statuses => {
|
||||
if (statuses === null) {
|
||||
return
|
||||
}
|
||||
if (statuses.length > 0) {
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/changeScrolling', true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', false)
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
|
||||
this.$store.dispatch('TimelineSpace/Contents/Mentions/saveMarker')
|
||||
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)
|
||||
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const now = moment()
|
||||
if (now.diff(this.scrollTime) >= 150) {
|
||||
this.scrollTime = null
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/changeScrolling', false)
|
||||
if (now.diff(scrollTime.value) >= 150) {
|
||||
scrollTime.value = null
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}
|
||||
}, 150)
|
||||
},
|
||||
fetchMentionsSince(since_id) {
|
||||
this.loadingMore = true
|
||||
this.$store.dispatch('TimelineSpace/Contents/Mentions/fetchMentionsSince', since_id).finally(() => {
|
||||
}
|
||||
const updateToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||
}
|
||||
const fetchMentionsSince = (since_id: string) => {
|
||||
loadingMore.value = true
|
||||
store.dispatch(`${space}/${ACTION_TYPES.FETCH_MENTIONS_SINCE}`, since_id).finally(() => {
|
||||
setTimeout(() => {
|
||||
this.loadingMore = false
|
||||
loadingMore.value = false
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
}
|
||||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
await reloadable()
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
},
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/updateToot', message)
|
||||
},
|
||||
upper() {
|
||||
this.$refs.scroller.scrollToItem(0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.mentions.findIndex(toot => this.focusedId === toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.mentions[0].id
|
||||
} else if (currentIndex < this.mentions.length) {
|
||||
this.focusedId = this.mentions[currentIndex + 1].id
|
||||
}
|
||||
const upper = () => {
|
||||
scroller.value.scrollToItem(0)
|
||||
focusedId.value = null
|
||||
}
|
||||
const focusNext = () => {
|
||||
if (currentFocusedIndex.value === -1) {
|
||||
focusedId.value = mentions.value[0].id
|
||||
} else if (currentFocusedIndex.value < mentions.value.length) {
|
||||
focusedId.value = mentions.value[currentFocusedIndex.value + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.mentions.findIndex(toot => this.focusedId === toot.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
} else if (currentIndex > 0) {
|
||||
this.focusedId = this.mentions[currentIndex - 1].id
|
||||
}
|
||||
const focusPrev = () => {
|
||||
if (currentFocusedIndex.value === 0) {
|
||||
focusedId.value = null
|
||||
} else if (currentFocusedIndex.value > 0) {
|
||||
focusedId.value = mentions.value[currentFocusedIndex.value - 1].id
|
||||
}
|
||||
},
|
||||
focusNotification(message) {
|
||||
this.focusedId = message.id
|
||||
},
|
||||
focusSidebar() {
|
||||
}
|
||||
const focusNotification = (message: Entity.Notification) => {
|
||||
focusedId.value = message.id
|
||||
}
|
||||
const focusSidebar = () => {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
},
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.mentions[0].id
|
||||
break
|
||||
}
|
||||
},
|
||||
sizeChanged() {
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/changeScrolling', true)
|
||||
}
|
||||
const sizeChanged = () => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Mentions/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
return {
|
||||
mentions,
|
||||
scroller,
|
||||
loadingMore,
|
||||
fetchMentionsSince,
|
||||
focusedId,
|
||||
modalOpened,
|
||||
updateToot,
|
||||
focusNext,
|
||||
focusPrev,
|
||||
focusSidebar,
|
||||
focusNotification,
|
||||
sizeChanged,
|
||||
openSideBar,
|
||||
heading,
|
||||
upper
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -34,240 +34,238 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onBeforeUnmount, onUnmounted, watch } from 'vue'
|
||||
import moment from 'moment'
|
||||
import Notification from '~/src/renderer/components/organisms/Notification'
|
||||
import StatusLoading from '~/src/renderer/components/organisms/StatusLoading'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { EventEmitter } from '~/src/renderer/components/event'
|
||||
import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
|
||||
import { ElMessage } from 'element-plus'
|
||||
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'
|
||||
import useReloadable from '@/components/utils/reloadable'
|
||||
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Notifications'
|
||||
import { MUTATION_TYPES as SIDE_MENU_MUTATION } from '@/store/TimelineSpace/SideMenu'
|
||||
import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
|
||||
import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null,
|
||||
scrollPosition: null,
|
||||
observer: null,
|
||||
scrollTime: null,
|
||||
resizeTime: null,
|
||||
loadingMore: false
|
||||
}
|
||||
},
|
||||
export default defineComponent({
|
||||
name: 'notifications',
|
||||
components: { Notification, StatusLoading },
|
||||
mixins: [reloadable],
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
backgroundColor: state => state.App.theme.background_color
|
||||
}),
|
||||
...mapState('TimelineSpace/Contents/Notifications', {
|
||||
notifications: state => state.notifications,
|
||||
lazyLoading: state => state.lazyLoading,
|
||||
heading: state => state.heading,
|
||||
scrolling: state => state.scrolling
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Contents/Notifications', ['handledNotifications', 'filters']),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function () {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
|
||||
setup() {
|
||||
const space = 'TimelineSpace/Contents/Notifications'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const i18n = useI18next()
|
||||
const { reloadable } = useReloadable(store, route, i18n)
|
||||
|
||||
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(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const filters = computed(() => store.getters[`${space}/filters}`])
|
||||
const handledNotifications = computed(() => store.getters[`${space}/handledNotifications`])
|
||||
const currentFocusedIndex = computed(() => notifications.value.findIndex(notification => focusedId.value === notification.id))
|
||||
// const shortcutEnabled = computed(() => {
|
||||
// if (modalOpened.value) {
|
||||
// return false
|
||||
// }
|
||||
// if (!focusedId.value) {
|
||||
// return true
|
||||
// }
|
||||
// // Sometimes toots are deleted, so perhaps focused toot don't exist.
|
||||
// return currentFocusedIndex.value === -1
|
||||
// })
|
||||
onMounted(() => {
|
||||
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_NOTIFICATIONS}`, false)
|
||||
store.dispatch(`${space}/${ACTION_TYPES.RESET_BADGE}`)
|
||||
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
|
||||
|
||||
if (heading.value && handledNotifications.value.length > 0) {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
|
||||
}
|
||||
if (!this.focusedId) {
|
||||
return true
|
||||
}
|
||||
// Sometimes notifications are deleted, so perhaps focused notification don't exist.
|
||||
const currentIndex = this.handledNotifications.findIndex(notification => this.focusedId === notification.id)
|
||||
return currentIndex === -1
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
|
||||
this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge')
|
||||
document.getElementById('scroller').addEventListener('scroll', this.onScroll)
|
||||
const el = document.getElementById('scroller')
|
||||
if (el) {
|
||||
scrollPosition.value = new ScrollPosition(el)
|
||||
scrollPosition.value.prepare()
|
||||
|
||||
EventEmitter.on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
observer.value = new ResizeObserver(() => {
|
||||
if (loadingMore.value || (scrollPosition.value && !heading.value && !lazyLoading.value && !scrolling.value)) {
|
||||
resizeTime.value = moment()
|
||||
scrollPosition.value?.restore()
|
||||
}
|
||||
})
|
||||
|
||||
if (this.heading && this.handledNotifications.length > 0) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Notifications/saveMarker')
|
||||
}
|
||||
const el = document.getElementById('scroller')
|
||||
this.scrollPosition = new ScrollPosition(el)
|
||||
this.scrollPosition.prepare()
|
||||
|
||||
this.observer = new ResizeObserver(() => {
|
||||
if (this.loadingMore || (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling)) {
|
||||
this.resizeTime = moment()
|
||||
this.scrollPosition.restore()
|
||||
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||
observer.value.observe(scrollWrapper)
|
||||
}
|
||||
})
|
||||
|
||||
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||
this.observer.observe(scrollWrapper)
|
||||
},
|
||||
beforeUpdate() {
|
||||
if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications && this.heading) {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
|
||||
}
|
||||
if (this.scrollPosition) {
|
||||
this.scrollPosition.prepare()
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
EventEmitter.off('focus-timeline')
|
||||
this.observer.disconnect()
|
||||
},
|
||||
unmounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Notifications/archiveNotifications')
|
||||
if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
|
||||
document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
|
||||
document.getElementById('scroller').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
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)
|
||||
store.commit(`${space}/${MUTATION_TYPES.ARCHIVE_NOTIFICATIONS}`)
|
||||
const el = document.getElementById('scroller')
|
||||
if (el !== undefined && el !== null) {
|
||||
el.removeEventListener('scroll', onScroll)
|
||||
el.scrollTop = 0
|
||||
}
|
||||
})
|
||||
watch(startReload, (newVal, oldVal) => {
|
||||
if (!oldVal && newVal) {
|
||||
reload().finally(() => {
|
||||
store.commit(`TimelineSpace/HeaderMenu/${HEADER_MUTATION.CHANGE_RELOAD}`, false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
if (newState >= 0 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
|
||||
this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge')
|
||||
}
|
||||
},
|
||||
notifications: {
|
||||
handler(newState, _oldState) {
|
||||
if (this.heading && newState.length > 0) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Notifications/saveMarker')
|
||||
})
|
||||
watch(
|
||||
notifications,
|
||||
(newState, _oldState) => {
|
||||
if (heading.value && newState.length > 0) {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onScroll(event) {
|
||||
if (moment().diff(this.resizeTime) < 500) {
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
const onScroll = (event: Event) => {
|
||||
if (moment().diff(resizeTime.value) < 500) {
|
||||
return
|
||||
}
|
||||
this.scrollTime = moment()
|
||||
if (!this.scrolling) {
|
||||
this.$store.commit('TimelineSpace/Contents/Notifications/changeScrolling', true)
|
||||
scrollTime.value = moment()
|
||||
if (!scrolling.value) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
}
|
||||
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
|
||||
!this.lazyloading
|
||||
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
|
||||
document.getElementById('scroller')!.scrollHeight - 10 &&
|
||||
!lazyLoading.value
|
||||
) {
|
||||
this.$store
|
||||
.dispatch(
|
||||
'TimelineSpace/Contents/Notifications/lazyFetchNotifications',
|
||||
this.handledNotifications[this.handledNotifications.length - 1]
|
||||
)
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_NOTIFICATIONS}`, handledNotifications.value[handledNotifications.value.length - 1])
|
||||
.then(statuses => {
|
||||
if (statuses === null) {
|
||||
return
|
||||
}
|
||||
if (statuses.length > 0) {
|
||||
this.$store.commit('TimelineSpace/Contents/Notifications/changeScrolling', true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Notifications/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.notification_fetch_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.notification_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false)
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
|
||||
this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge')
|
||||
this.$store.dispatch('TimelineSpace/Contents/Notifications/saveMarker')
|
||||
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)
|
||||
store.dispatch(`${space}/${ACTION_TYPES.RESET_BADGE}`)
|
||||
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const now = moment()
|
||||
if (now.diff(this.scrollTime) >= 150) {
|
||||
this.scrollTime = null
|
||||
this.$store.commit('TimelineSpace/Contents/Notifications/changeScrolling', false)
|
||||
if (now.diff(scrollTime.value) >= 150) {
|
||||
scrollTime.value = null
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}
|
||||
}, 150)
|
||||
},
|
||||
fetchNotificationsSince(since_id) {
|
||||
this.loadingMore = true
|
||||
this.$store.dispatch('TimelineSpace/Contents/Notifications/fetchNotificationsSince', since_id).finally(() => {
|
||||
}
|
||||
const updateToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||
}
|
||||
const fetchNotificationsSince = (since_id: string) => {
|
||||
loadingMore.value = true
|
||||
store.dispatch(`${space}/${ACTION_TYPES.FETCH_NOTIFICATIONS_SINCE}`, since_id).finally(() => {
|
||||
setTimeout(() => {
|
||||
this.loadingMore = false
|
||||
loadingMore.value = false
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
}
|
||||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge')
|
||||
await reloadable()
|
||||
store.dispatch(`${space}/${ACTION_TYPES.RESET_BADGE}`)
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
}
|
||||
},
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Notifications/updateToot', message)
|
||||
},
|
||||
upper() {
|
||||
this.$refs.scroller.scrollToItem(0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.handledNotifications.findIndex(notification => this.focusedId === notification.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.handledNotifications[0].id
|
||||
} else if (currentIndex < this.handledNotifications.length) {
|
||||
this.focusedId = this.handledNotifications[currentIndex + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.handledNotifications.findIndex(notification => this.focusedId === notification.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
} else if (currentIndex > 0) {
|
||||
this.focusedId = this.handledNotifications[currentIndex - 1].id
|
||||
}
|
||||
},
|
||||
focusNotification(notification) {
|
||||
this.focusedId = notification.id
|
||||
},
|
||||
focusSidebar() {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
},
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.handledNotifications[0].id
|
||||
break
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
}
|
||||
const upper = () => {
|
||||
scroller.value.scrollToItem(0)
|
||||
focusedId.value = null
|
||||
}
|
||||
const focusNext = () => {
|
||||
if (currentFocusedIndex.value === -1) {
|
||||
focusedId.value = handledNotifications.value[0].id
|
||||
} else if (currentFocusedIndex.value < handledNotifications.value.length) {
|
||||
focusedId.value = handledNotifications.value[currentFocusedIndex.value + 1].id
|
||||
}
|
||||
}
|
||||
const focusPrev = () => {
|
||||
if (currentFocusedIndex.value === 0) {
|
||||
focusedId.value = null
|
||||
} else if (currentFocusedIndex.value > 0) {
|
||||
focusedId.value = handledNotifications.value[currentFocusedIndex.value - 1].id
|
||||
}
|
||||
}
|
||||
const focusNotification = (notification: Entity.Notification) => {
|
||||
focusedId.value = notification.id
|
||||
}
|
||||
const focusSidebar = () => {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
}
|
||||
|
||||
return {
|
||||
handledNotifications,
|
||||
loadingMore,
|
||||
fetchNotificationsSince,
|
||||
focusedId,
|
||||
modalOpened,
|
||||
filters,
|
||||
updateToot,
|
||||
focusNext,
|
||||
focusPrev,
|
||||
focusSidebar,
|
||||
focusNotification,
|
||||
openSideBar,
|
||||
heading,
|
||||
upper
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -29,244 +29,238 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import moment from 'moment'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { EventEmitter } from '~/src/renderer/components/event'
|
||||
import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Entity } from 'megalodon'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
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'
|
||||
import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
|
||||
import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
|
||||
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Public'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null,
|
||||
scrollPosition: null,
|
||||
observer: null,
|
||||
scrollTime: null,
|
||||
resizeTime: null
|
||||
}
|
||||
},
|
||||
export default defineComponent({
|
||||
name: 'public',
|
||||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Contents/Public', {
|
||||
timeline: state => state.timeline,
|
||||
lazyLoading: state => state.lazyLoading,
|
||||
heading: state => state.heading,
|
||||
scrolling: state => state.scrolling
|
||||
}),
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
unreadNotification: state => state.TimelineSpace.timelineSetting.unreadNotification
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Contents/Public', ['filters']),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function () {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
}
|
||||
if (!this.focusedId) {
|
||||
return true
|
||||
}
|
||||
// Sometimes toots are deleted, so perhaps focused toot don't exist.
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
return currentIndex === -1
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
|
||||
document.getElementById('scroller').addEventListener('scroll', this.onScroll)
|
||||
if (!this.unreadNotification.public) {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
await this.initialize().finally(_ => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
}
|
||||
setup() {
|
||||
const space = 'TimelineSpace/Contents/Public'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const i18n = useI18next()
|
||||
const { reloadable } = useReloadable(store, route, i18n)
|
||||
|
||||
EventEmitter.on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
const el = document.getElementById('scroller')
|
||||
this.scrollPosition = new ScrollPosition(el)
|
||||
this.scrollPosition.prepare()
|
||||
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)
|
||||
|
||||
this.observer = new ResizeObserver(() => {
|
||||
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
|
||||
this.resizeTime = moment()
|
||||
this.scrollPosition.restore()
|
||||
}
|
||||
})
|
||||
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)
|
||||
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const filters = computed(() => store.getters[`${space}/filters`])
|
||||
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
|
||||
|
||||
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||
this.observer.observe(scrollWrapper)
|
||||
},
|
||||
beforeUpdate() {
|
||||
if (this.$store.state.TimelineSpace.SideMenu.unreadPublicTimeline && this.heading) {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
|
||||
}
|
||||
if (this.scrollPosition) {
|
||||
this.scrollPosition.prepare()
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (!this.unreadNotification.public) {
|
||||
this.$store.dispatch('TimelineSpace/stopPublicStreaming')
|
||||
this.$store.dispatch('TimelineSpace/unbindPublicStreaming')
|
||||
}
|
||||
EventEmitter.off('focus-timeline')
|
||||
this.observer.disconnect()
|
||||
},
|
||||
unmounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Public/archiveTimeline')
|
||||
if (!this.unreadNotification.public) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/clearTimeline')
|
||||
}
|
||||
if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
|
||||
document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
|
||||
document.getElementById('scroller').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
onMounted(async () => {
|
||||
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_PUBLIC_TIMELINE}`, false)
|
||||
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
|
||||
if (!unreadNotification.value.public) {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
await initialize().finally(() => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async initialize() {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline').catch(_ => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
})
|
||||
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) {
|
||||
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.STOP_PUBLIC_STREAMING}`)
|
||||
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.UNBIND_PUBLIC_STREAMING}`)
|
||||
}
|
||||
EventEmitter.off('focus-timeline')
|
||||
observer.value?.disconnect()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.ARCHIVE_TIMELINE}`)
|
||||
if (!unreadNotification.value.public) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CLEAR_TIMELINE}`)
|
||||
}
|
||||
const el = document.getElementById('scroller')
|
||||
if (el !== undefined && el !== null) {
|
||||
el.removeEventListener('scroll', onScroll)
|
||||
el.scrollTop = 0
|
||||
}
|
||||
})
|
||||
watch(startReload, (newVal, oldVal) => {
|
||||
if (!oldVal && newVal) {
|
||||
reload().finally(() => {
|
||||
store.commit(`TimelineSpace/HeaderMenu/${HEADER_MUTATION.CHANGE_RELOAD}`, false)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const initialize = async () => {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_PUBLIC_TIMELINE}`).catch(_ => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
await this.$store.dispatch('TimelineSpace/bindPublicStreaming')
|
||||
this.$store.dispatch('TimelineSpace/startPublicStreaming')
|
||||
},
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/updateToot', message)
|
||||
},
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/deleteToot', message.id)
|
||||
},
|
||||
onScroll(event) {
|
||||
if (moment().diff(this.resizeTime) < 500) {
|
||||
await store.dispatch(`TimelineSpace/${TIMELINE_ACTION.BIND_PUBLIC_STREAMING}`)
|
||||
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.START_PUBLIC_STREAMING}`)
|
||||
}
|
||||
const onScroll = (event: Event) => {
|
||||
if (moment().diff(resizeTime.value) < 500) {
|
||||
return
|
||||
}
|
||||
|
||||
this.scrollTime = moment()
|
||||
if (!this.scrolling) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeScrolling', true)
|
||||
scrollTime.value = moment()
|
||||
if (!scrolling.value) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
}
|
||||
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
|
||||
!this.lazyloading
|
||||
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
|
||||
document.getElementById('scroller')!.scrollHeight - 10 &&
|
||||
!lazyLoading.value
|
||||
) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, timeline.value[timeline.value.length - 1])
|
||||
.then(statuses => {
|
||||
if (statuses === null) {
|
||||
return
|
||||
}
|
||||
if (statuses.length > 0) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeScrolling', true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', false)
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
|
||||
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(this.scrollTime) >= 150) {
|
||||
this.scrollTime = null
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeScrolling', false)
|
||||
if (now.diff(scrollTime.value) >= 150) {
|
||||
scrollTime.value = null
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}
|
||||
}, 150)
|
||||
},
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
}
|
||||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
await reloadable()
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
},
|
||||
upper() {
|
||||
this.$refs.scroller.scrollToItem(0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
} else if (currentIndex < this.timeline.length) {
|
||||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
const updateToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||
}
|
||||
const deleteToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message.id)
|
||||
}
|
||||
const upper = () => {
|
||||
scroller.value.scrollToItem(0)
|
||||
focusedId.value = null
|
||||
}
|
||||
const focusNext = () => {
|
||||
if (currentFocusedIndex.value === -1) {
|
||||
focusedId.value = timeline.value[0].uri + timeline.value[0].id
|
||||
} else if (currentFocusedIndex.value < timeline.value.length) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
} else if (currentIndex > 0) {
|
||||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
const focusPrev = () => {
|
||||
if (currentFocusedIndex.value === 0) {
|
||||
focusedId.value = null
|
||||
} else if (currentFocusedIndex.value > 0) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
|
||||
}
|
||||
},
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusSidebar() {
|
||||
}
|
||||
const focusToot = (message: Entity.Status) => {
|
||||
focusedId.value = message.uri + message.id
|
||||
}
|
||||
const focusSidebar = () => {
|
||||
EventEmitter.emit('focus-sidebar')
|
||||
},
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
break
|
||||
}
|
||||
},
|
||||
sizeChanged() {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeScrolling', true)
|
||||
}
|
||||
const sizeChanged = () => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeScrolling', false)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
return {
|
||||
timeline,
|
||||
scroller,
|
||||
focusedId,
|
||||
modalOpened,
|
||||
filters,
|
||||
updateToot,
|
||||
deleteToot,
|
||||
focusNext,
|
||||
focusPrev,
|
||||
focusSidebar,
|
||||
focusToot,
|
||||
sizeChanged,
|
||||
openSideBar,
|
||||
heading,
|
||||
upper
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -17,58 +17,65 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import SearchAccount from './Search/Account'
|
||||
import SearchTag from './Search/Tag'
|
||||
import SearchToots from './Search/Toots'
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { useStore } from '@/store'
|
||||
import SearchAccount from './Search/Account.vue'
|
||||
import SearchTag from './Search/Tag.vue'
|
||||
import SearchToots from './Search/Toots.vue'
|
||||
import { ACTION_TYPES as TAG_ACTION } from '@/store/TimelineSpace/Contents/Search/Tag'
|
||||
import { ACTION_TYPES as ACCOUNT_ACTION } from '@/store/TimelineSpace/Contents/Search/Account'
|
||||
import { ACTION_TYPES as TOOTS_ACTION } from '@/store/TimelineSpace/Contents/Search/Toots'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'search',
|
||||
components: { SearchAccount, SearchTag, SearchToots },
|
||||
data() {
|
||||
return {
|
||||
target: ref('account'),
|
||||
query: '',
|
||||
searchTargets: [
|
||||
{
|
||||
target: 'account',
|
||||
label: this.$t('search.account')
|
||||
},
|
||||
{
|
||||
target: 'tag',
|
||||
label: this.$t('search.tag')
|
||||
},
|
||||
{
|
||||
target: 'toot',
|
||||
label: this.$t('search.toot')
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
switch (this.target) {
|
||||
setup() {
|
||||
const space = 'TimelineSpace/Contents/Search'
|
||||
const store = useStore()
|
||||
const i18n = useI18next()
|
||||
|
||||
const target = ref<string>('account')
|
||||
const query = ref<string>('')
|
||||
const searchTargets = [
|
||||
{
|
||||
target: 'account',
|
||||
label: i18n.t('search.account')
|
||||
},
|
||||
{
|
||||
target: 'tag',
|
||||
label: i18n.t('search.tag')
|
||||
},
|
||||
{
|
||||
target: 'toot',
|
||||
label: i18n.t('search.toot')
|
||||
}
|
||||
]
|
||||
|
||||
const search = () => {
|
||||
switch (target.value) {
|
||||
case 'account':
|
||||
this.$store.dispatch('TimelineSpace/Contents/Search/Account/search', this.query).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.search_error'),
|
||||
store.dispatch(`${space}/Tag/${ACCOUNT_ACTION.SEARCH}`, query.value).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.search_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
break
|
||||
case 'tag':
|
||||
this.$store.dispatch('TimelineSpace/Contents/Search/Tag/search', `#${this.query}`).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.search_error'),
|
||||
store.dispatch(`${space}/Tag/${TAG_ACTION.SEARCH}`, `#${query.value}`).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.search_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
break
|
||||
case 'toot':
|
||||
this.$store.dispatch('TimelineSpace/Contents/Search/Toots/search', this.query).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.search_error'),
|
||||
store.dispatch(`${space}/Toots/${TOOTS_ACTION.SEARCH}`, query.value).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.search_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
|
|
@ -77,8 +84,15 @@ export default {
|
|||
break
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
target,
|
||||
searchTargets,
|
||||
query,
|
||||
search
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -10,20 +10,27 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import User from '~/src/renderer/components/molecules/User'
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onUnmounted } from 'vue'
|
||||
import { useStore } from '@/store'
|
||||
import { MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Search/Account'
|
||||
import User from '@/components/molecules/User.vue'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'search-account',
|
||||
components: { User },
|
||||
computed: {
|
||||
...mapState({
|
||||
results: state => state.TimelineSpace.Contents.Search.Account.results
|
||||
setup() {
|
||||
const store = useStore()
|
||||
const results = computed(() => store.state.TimelineSpace.Contents.Search.Account.results)
|
||||
|
||||
onUnmounted(() => {
|
||||
store.commit(`TimelineSpace/Contents/Search/Account/${MUTATION_TYPES.UPDATE_RESULTS}`, [])
|
||||
})
|
||||
|
||||
return {
|
||||
results
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/Search/Account/updateResults', [])
|
||||
}
|
||||
}
|
||||
unmounted() {}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,20 +10,26 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Tag from '~/src/renderer/components/molecules/Tag'
|
||||
<script lang="ts">
|
||||
import { defineComponent, onUnmounted, computed } from 'vue'
|
||||
import { useStore } from '@/store'
|
||||
import Tag from '@/components/molecules/Tag.vue'
|
||||
import { MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Search/Tag'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'search-tag',
|
||||
components: { Tag },
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Contents/Search/Tag', {
|
||||
results: state => state.results
|
||||
setup() {
|
||||
const store = useStore()
|
||||
const results = computed(() => store.state.TimelineSpace.Contents.Search.Tag.results)
|
||||
|
||||
onUnmounted(() => {
|
||||
store.commit(`TimelineSpace/Contents/Search/Tag/${MUTATION_TYPES.UPDATE_RESULTS}`, [])
|
||||
})
|
||||
},
|
||||
unmounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/Search/Tag/updateResults', [])
|
||||
|
||||
return {
|
||||
results
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,20 +10,26 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onUnmounted } from 'vue'
|
||||
import { useStore } from '@/store'
|
||||
import Toot from '@/components/organisms/Toot.vue'
|
||||
import { MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Search/Toots'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'search-account',
|
||||
components: { Toot },
|
||||
computed: {
|
||||
...mapState({
|
||||
results: state => state.TimelineSpace.Contents.Search.Toots.results
|
||||
setup() {
|
||||
const store = useStore()
|
||||
const results = computed(() => store.state.TimelineSpace.Contents.Search.Toots.results)
|
||||
|
||||
onUnmounted(() => {
|
||||
this.$store.commit(`TimelineSpace/Contents/Search/Toots/${MUTATION_TYPES.UPDATE_RESULTS}`, [])
|
||||
})
|
||||
},
|
||||
unmounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/Search/Toots/updateResults', [])
|
||||
|
||||
return {
|
||||
results
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'reloadable',
|
||||
methods: {
|
||||
async reloadable() {
|
||||
const account = await this.$store
|
||||
.dispatch('TimelineSpace/localAccount', this.$route.params.id)
|
||||
.catch((err) => {
|
||||
this.$message({
|
||||
message: this.$t('message.account_load_error'),
|
||||
type: 'error',
|
||||
})
|
||||
throw err
|
||||
})
|
||||
await this.$store.dispatch('GlobalHeader/stopUserStreamings')
|
||||
await this.$store.dispatch('TimelineSpace/stopStreamings')
|
||||
await this.$store.dispatch('TimelineSpace/fetchContentsTimelines')
|
||||
await this.$store.dispatch('TimelineSpace/startStreamings')
|
||||
this.$store.dispatch('GlobalHeader/startUserStreamings')
|
||||
return account
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -326,7 +326,7 @@ export default defineComponent({
|
|||
const bookmarkSupported = computed(() => store.state.TimelineSpace.SideMenu.enabledTimelines.bookmark)
|
||||
const shortcutEnabled = computed(() => focused.value && !overlaid.value)
|
||||
const originalMessage = computed(() => {
|
||||
if (message.value.reblog && message.value.quote) {
|
||||
if (message.value.reblog && !message.value.quote) {
|
||||
return message.value.reblog
|
||||
} else {
|
||||
return message.value
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
import { Store } from 'vuex'
|
||||
import { RootState } from '@/store'
|
||||
import { RouteLocationNormalizedLoaded } from 'vue-router'
|
||||
import { i18n } from 'i18next'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ACTION_TYPES } from '@/store/TimelineSpace'
|
||||
import { ACTION_TYPES as GLOBAL_ACTION } from '@/store/GlobalHeader'
|
||||
|
||||
export default function useReloadable(store: Store<RootState>, route: RouteLocationNormalizedLoaded, i18next: i18n) {
|
||||
async function reloadable() {
|
||||
const account = await store.dispatch(`TimelineSpace/${ACTION_TYPES.LOCAL_ACCOUNT}`, route.params.id).catch(err => {
|
||||
ElMessage({
|
||||
message: i18next.t('message.account_load_error'),
|
||||
type: 'error'
|
||||
})
|
||||
throw err
|
||||
})
|
||||
await store.dispatch(`GlobalHeader/${GLOBAL_ACTION.STOP_USER_STREAMINGS}`)
|
||||
await store.dispatch(`TimelineSpace/${ACTION_TYPES.STOP_STREAMINGS}`)
|
||||
await store.dispatch(`TimelineSpace/${ACTION_TYPES.FETCH_CONTENTS_TIMELINES}`)
|
||||
await store.dispatch(`TimelineSpace/${ACTION_TYPES.START_STREAMINGS}`)
|
||||
store.dispatch(`GlobalHeader/${GLOBAL_ACTION.START_USER_STREAMINGS}`)
|
||||
return account
|
||||
}
|
||||
|
||||
return {
|
||||
reloadable
|
||||
}
|
||||
}
|
||||
|
|
@ -92,8 +92,46 @@ const mutations: MutationTree<TimelineSpaceState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
INIT_LOAD: 'initLoad',
|
||||
PREPARE_SPACE: 'prepareSpace',
|
||||
LOCAL_ACCOUNT: 'localAccount',
|
||||
FETCH_ACCOUNT: 'fetchAccount',
|
||||
CLEAR_ACCOUNT: 'clearAccount',
|
||||
DETECT_SNS: 'detectSNS',
|
||||
WATCH_SHORTCUT_EVENTS: 'watchShortcutEvents',
|
||||
REMOVE_SHORTCUT_EVENTS: 'removeShortcutEvents',
|
||||
CLEAR_UNREAD: 'clearUnread',
|
||||
FETCH_EMOJIS: 'fetchEmojis',
|
||||
FETCH_FILTERS: 'fetchFilters',
|
||||
FETCH_INSTANCE: 'fetchInstance',
|
||||
LOAD_TIMELINE_SETTING: 'loadTimelineSetting',
|
||||
FETCH_CONTENTS_TIMELINES: 'fetchContentsTimelines',
|
||||
CLEAR_CONTENTS_TIMELINES: 'clearContentsTimelines',
|
||||
BIND_STREAMINGS: 'bindStreamings',
|
||||
START_STREAMINGS: 'startStreamings',
|
||||
STOP_STREAMINGS: 'stopStreamings',
|
||||
UNBIND_STREAMINGS: 'unbindStreamings',
|
||||
BIND_USER_STREAMING: 'bindUserStreaming',
|
||||
BIND_LOCAL_STREAMING: 'bindLocalStreaming',
|
||||
START_LOCAL_STREAMING: 'startLocalStreaming',
|
||||
BIND_PUBLIC_STREAMING: 'bindPublicStreaming',
|
||||
START_PUBLIC_STREAMING: 'startPublicStreaming',
|
||||
BIND_DIRECT_MESSAGES_STREAMING: 'bindDirectMessagesStreaming',
|
||||
START_DIRECT_MESSAGES_STREAMING: 'startDirectMessagesStreaming',
|
||||
UNBIND_USER_STREAMING: 'unbindUserStreaming',
|
||||
UNBIND_LOCAL_STREAMING: 'unbindLocalStreaming',
|
||||
STOP_LOCAL_STREAMING: 'stopLocalStreaming',
|
||||
UNBIND_PUBLIC_STREAMING: 'unbindPublicStreaming',
|
||||
STOP_PUBLIC_STREAMING: 'stopPublicStreaming',
|
||||
UNBIND_DIRECT_MESSAGES_STREAMING: 'unbindDirectMessagesStreaming',
|
||||
STOP_DIRECT_MESSAGES_STREAMING: 'stopDirectMessagesStreaming',
|
||||
UPDATE_TOOT_FOR_ALL_TIMELINES: 'updateTootForAllTimelines',
|
||||
WAIT_TO_UNBIND_USER_STREAMING: 'waitToUnbindUserStreaming'
|
||||
}
|
||||
|
||||
const actions: ActionTree<TimelineSpaceState, RootState> = {
|
||||
initLoad: async ({ dispatch, commit }, accountId: string): Promise<LocalAccount> => {
|
||||
[ACTION_TYPES.INIT_LOAD]: async ({ dispatch, commit }, accountId: string): Promise<LocalAccount> => {
|
||||
commit(MUTATION_TYPES.CHANGE_LOADING, true)
|
||||
dispatch('watchShortcutEvents')
|
||||
const account: LocalAccount = await dispatch('localAccount', accountId).catch(_ => {
|
||||
|
|
@ -113,7 +151,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
})
|
||||
return account
|
||||
},
|
||||
prepareSpace: async ({ state, dispatch }) => {
|
||||
[ACTION_TYPES.PREPARE_SPACE]: async ({ state, dispatch }) => {
|
||||
await dispatch('bindStreamings')
|
||||
dispatch('startStreamings')
|
||||
await dispatch('fetchEmojis', state.account)
|
||||
|
|
@ -124,7 +162,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
// -------------------------------------------------
|
||||
// Accounts
|
||||
// -------------------------------------------------
|
||||
localAccount: async ({ dispatch, commit }, id: string): Promise<LocalAccount> => {
|
||||
[ACTION_TYPES.LOCAL_ACCOUNT]: async ({ dispatch, commit }, id: string): Promise<LocalAccount> => {
|
||||
const account: LocalAccount = await win.ipcRenderer.invoke('get-local-account', id)
|
||||
if (account.username === undefined || account.username === null || account.username === '') {
|
||||
const acct: LocalAccount = await dispatch('fetchAccount', account)
|
||||
|
|
@ -135,22 +173,22 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
return account
|
||||
}
|
||||
},
|
||||
fetchAccount: async (_, account: LocalAccount): Promise<LocalAccount> => {
|
||||
[ACTION_TYPES.FETCH_ACCOUNT]: async (_, account: LocalAccount): Promise<LocalAccount> => {
|
||||
const acct: LocalAccount = await win.ipcRenderer.invoke('update-account', account)
|
||||
return acct
|
||||
},
|
||||
clearAccount: async ({ commit }) => {
|
||||
[ACTION_TYPES.CLEAR_ACCOUNT]: async ({ commit }) => {
|
||||
commit(MUTATION_TYPES.UPDATE_ACCOUNT, blankAccount)
|
||||
return true
|
||||
},
|
||||
detectSNS: async ({ commit, state }) => {
|
||||
[ACTION_TYPES.DETECT_SNS]: async ({ commit, state }) => {
|
||||
const sns = await detector(state.account.baseURL)
|
||||
commit(MUTATION_TYPES.CHANGE_SNS, sns)
|
||||
},
|
||||
// -----------------------------------------------
|
||||
// Shortcuts
|
||||
// -----------------------------------------------
|
||||
watchShortcutEvents: ({ commit, dispatch }) => {
|
||||
[ACTION_TYPES.WATCH_SHORTCUT_EVENTS]: ({ commit, dispatch }) => {
|
||||
win.ipcRenderer.on('CmdOrCtrl+N', () => {
|
||||
dispatch('TimelineSpace/Modals/NewToot/openModal', {}, { root: true })
|
||||
})
|
||||
|
|
@ -161,7 +199,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
commit('TimelineSpace/Modals/Shortcut/changeModal', true, { root: true })
|
||||
})
|
||||
},
|
||||
removeShortcutEvents: async () => {
|
||||
[ACTION_TYPES.REMOVE_SHORTCUT_EVENTS]: async () => {
|
||||
win.ipcRenderer.removeAllListeners('CmdOrCtrl+N')
|
||||
win.ipcRenderer.removeAllListeners('CmdOrCtrl+K')
|
||||
return true
|
||||
|
|
@ -169,13 +207,13 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
/**
|
||||
* clearUnread
|
||||
*/
|
||||
clearUnread: async ({ dispatch }) => {
|
||||
[ACTION_TYPES.CLEAR_UNREAD]: async ({ dispatch }) => {
|
||||
dispatch('TimelineSpace/SideMenu/clearUnread', {}, { root: true })
|
||||
},
|
||||
/**
|
||||
* fetchEmojis
|
||||
*/
|
||||
fetchEmojis: async ({ commit, state }, account: LocalAccount): Promise<Array<Entity.Emoji>> => {
|
||||
[ACTION_TYPES.FETCH_EMOJIS]: async ({ commit, state }, account: LocalAccount): Promise<Array<Entity.Emoji>> => {
|
||||
const client = generator(state.sns, account.baseURL, null, 'Whalebird')
|
||||
const res = await client.getInstanceCustomEmojis()
|
||||
commit(MUTATION_TYPES.UPDATE_EMOJIS, res.data)
|
||||
|
|
@ -184,7 +222,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
/**
|
||||
* fetchFilters
|
||||
*/
|
||||
fetchFilters: async ({ commit, state, rootState }): Promise<Array<Entity.Filter>> => {
|
||||
[ACTION_TYPES.FETCH_FILTERS]: async ({ commit, state, rootState }): Promise<Array<Entity.Filter>> => {
|
||||
try {
|
||||
const client = generator(state.sns, state.account.baseURL, state.account.accessToken, rootState.App.userAgent)
|
||||
const res = await client.getFilters()
|
||||
|
|
@ -197,17 +235,17 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
/**
|
||||
* fetchInstance
|
||||
*/
|
||||
fetchInstance: async ({ commit, state }, account: LocalAccount) => {
|
||||
[ACTION_TYPES.FETCH_INSTANCE]: async ({ commit, state }, account: LocalAccount) => {
|
||||
const client = generator(state.sns, account.baseURL, null, 'Whalebird')
|
||||
const res = await client.getInstance()
|
||||
commit(MUTATION_TYPES.UPDATE_TOOT_MAX, res.data.max_toot_chars)
|
||||
return true
|
||||
},
|
||||
loadTimelineSetting: async ({ commit }, accountID: string) => {
|
||||
[ACTION_TYPES.LOAD_TIMELINE_SETTING]: async ({ commit }, accountID: string) => {
|
||||
const setting: Setting = await win.ipcRenderer.invoke('get-account-setting', accountID)
|
||||
commit(MUTATION_TYPES.UPDATE_TIMELINE_SETTING, setting.timeline)
|
||||
},
|
||||
fetchContentsTimelines: async ({ dispatch, state }) => {
|
||||
[ACTION_TYPES.FETCH_CONTENTS_TIMELINES]: async ({ dispatch, state }) => {
|
||||
dispatch('TimelineSpace/Contents/changeLoading', true, { root: true })
|
||||
await dispatch('TimelineSpace/Contents/Home/fetchTimeline', {}, { root: true }).finally(() => {
|
||||
dispatch('TimelineSpace/Contents/changeLoading', false, { root: true })
|
||||
|
|
@ -225,7 +263,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
await dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline', {}, { root: true })
|
||||
}
|
||||
},
|
||||
clearContentsTimelines: ({ commit }) => {
|
||||
[ACTION_TYPES.CLEAR_CONTENTS_TIMELINES]: ({ commit }) => {
|
||||
commit('TimelineSpace/Contents/Home/clearTimeline', {}, { root: true })
|
||||
commit('TimelineSpace/Contents/Local/clearTimeline', {}, { root: true })
|
||||
commit('TimelineSpace/Contents/DirectMessages/clearTimeline', {}, { root: true })
|
||||
|
|
@ -233,7 +271,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
commit('TimelineSpace/Contents/Public/clearTimeline', {}, { root: true })
|
||||
commit('TimelineSpace/Contents/Mentions/clearMentions', {}, { root: true })
|
||||
},
|
||||
bindStreamings: ({ dispatch, state }) => {
|
||||
[ACTION_TYPES.BIND_STREAMINGS]: ({ dispatch, state }) => {
|
||||
dispatch('bindUserStreaming')
|
||||
if (state.timelineSetting.unreadNotification.direct) {
|
||||
dispatch('bindDirectMessagesStreaming')
|
||||
|
|
@ -245,7 +283,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
dispatch('bindPublicStreaming')
|
||||
}
|
||||
},
|
||||
startStreamings: ({ dispatch, state }) => {
|
||||
[ACTION_TYPES.START_STREAMINGS]: ({ dispatch, state }) => {
|
||||
if (state.timelineSetting.unreadNotification.direct) {
|
||||
dispatch('startDirectMessagesStreaming')
|
||||
}
|
||||
|
|
@ -256,12 +294,12 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
dispatch('startPublicStreaming')
|
||||
}
|
||||
},
|
||||
stopStreamings: ({ dispatch }) => {
|
||||
[ACTION_TYPES.STOP_STREAMINGS]: ({ dispatch }) => {
|
||||
dispatch('stopDirectMessagesStreaming')
|
||||
dispatch('stopLocalStreaming')
|
||||
dispatch('stopPublicStreaming')
|
||||
},
|
||||
unbindStreamings: ({ dispatch }) => {
|
||||
[ACTION_TYPES.UNBIND_STREAMINGS]: ({ dispatch }) => {
|
||||
dispatch('unbindUserStreaming')
|
||||
dispatch('unbindDirectMessagesStreaming')
|
||||
dispatch('unbindLocalStreaming')
|
||||
|
|
@ -270,7 +308,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
// ------------------------------------------------
|
||||
// Each streaming methods
|
||||
// ------------------------------------------------
|
||||
bindUserStreaming: async ({ commit, state, rootState, dispatch }) => {
|
||||
[ACTION_TYPES.BIND_USER_STREAMING]: async ({ commit, state, rootState, dispatch }) => {
|
||||
if (!state.account._id) {
|
||||
throw new Error('Account is not set')
|
||||
}
|
||||
|
|
@ -306,7 +344,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
commit('TimelineSpace/Contents/Mentions/deleteToot', id, { root: true })
|
||||
})
|
||||
},
|
||||
bindLocalStreaming: ({ commit, rootState }) => {
|
||||
[ACTION_TYPES.BIND_LOCAL_STREAMING]: ({ commit, rootState }) => {
|
||||
win.ipcRenderer.on('update-start-local-streaming', (_, update: Entity.Status) => {
|
||||
commit('TimelineSpace/Contents/Local/appendTimeline', update, { root: true })
|
||||
if (rootState.TimelineSpace.Contents.Local.heading && Math.random() > 0.8) {
|
||||
|
|
@ -318,7 +356,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
commit('TimelineSpace/Contents/Local/deleteToot', id, { root: true })
|
||||
})
|
||||
},
|
||||
startLocalStreaming: ({ state }) => {
|
||||
[ACTION_TYPES.START_LOCAL_STREAMING]: ({ state }) => {
|
||||
// @ts-ignore
|
||||
return new Promise((resolve, reject) => {
|
||||
// eslint-disable-line no-unused-vars
|
||||
|
|
@ -328,7 +366,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
})
|
||||
})
|
||||
},
|
||||
bindPublicStreaming: ({ commit, rootState }) => {
|
||||
[ACTION_TYPES.BIND_PUBLIC_STREAMING]: ({ commit, rootState }) => {
|
||||
win.ipcRenderer.on('update-start-public-streaming', (_, update: Entity.Status) => {
|
||||
commit('TimelineSpace/Contents/Public/appendTimeline', update, { root: true })
|
||||
if (rootState.TimelineSpace.Contents.Public.heading && Math.random() > 0.8) {
|
||||
|
|
@ -340,7 +378,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
commit('TimelineSpace/Contents/Public/deleteToot', id, { root: true })
|
||||
})
|
||||
},
|
||||
startPublicStreaming: ({ state }) => {
|
||||
[ACTION_TYPES.START_PUBLIC_STREAMING]: ({ state }) => {
|
||||
// @ts-ignore
|
||||
return new Promise((resolve, reject) => {
|
||||
// eslint-disable-line no-unused-vars
|
||||
|
|
@ -350,7 +388,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
})
|
||||
})
|
||||
},
|
||||
bindDirectMessagesStreaming: ({ commit, rootState }) => {
|
||||
[ACTION_TYPES.BIND_DIRECT_MESSAGES_STREAMING]: ({ commit, rootState }) => {
|
||||
win.ipcRenderer.on('update-start-directmessages-streaming', (_, update: Entity.Status) => {
|
||||
commit('TimelineSpace/Contents/DirectMessages/appendTimeline', update, { root: true })
|
||||
if (rootState.TimelineSpace.Contents.DirectMessages.heading && Math.random() > 0.8) {
|
||||
|
|
@ -362,7 +400,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
commit('TimelineSpace/Contents/DirectMessages/deleteToot', id, { root: true })
|
||||
})
|
||||
},
|
||||
startDirectMessagesStreaming: ({ state }) => {
|
||||
[ACTION_TYPES.START_DIRECT_MESSAGES_STREAMING]: ({ state }) => {
|
||||
// @ts-ignore
|
||||
return new Promise((resolve, reject) => {
|
||||
// eslint-disable-line no-unused-vars
|
||||
|
|
@ -372,7 +410,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
})
|
||||
})
|
||||
},
|
||||
unbindUserStreaming: ({ state, commit }) => {
|
||||
[ACTION_TYPES.UNBIND_USER_STREAMING]: ({ state, commit }) => {
|
||||
// When unbind is called, sometimes account is already cleared and account does not have _id.
|
||||
// So we have to get previous account to unbind streamings.
|
||||
if (state.bindingAccount) {
|
||||
|
|
@ -386,31 +424,31 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
console.info('binding account does not exist')
|
||||
}
|
||||
},
|
||||
unbindLocalStreaming: () => {
|
||||
[ACTION_TYPES.UNBIND_LOCAL_STREAMING]: () => {
|
||||
win.ipcRenderer.removeAllListeners('error-start-local-streaming')
|
||||
win.ipcRenderer.removeAllListeners('update-start-local-streaming')
|
||||
win.ipcRenderer.removeAllListeners('delete-start-local-streaming')
|
||||
},
|
||||
stopLocalStreaming: () => {
|
||||
[ACTION_TYPES.STOP_LOCAL_STREAMING]: () => {
|
||||
win.ipcRenderer.send('stop-local-streaming')
|
||||
},
|
||||
unbindPublicStreaming: () => {
|
||||
[ACTION_TYPES.UNBIND_PUBLIC_STREAMING]: () => {
|
||||
win.ipcRenderer.removeAllListeners('error-start-public-streaming')
|
||||
win.ipcRenderer.removeAllListeners('update-start-public-streaming')
|
||||
win.ipcRenderer.removeAllListeners('delete-start-public-streaming')
|
||||
},
|
||||
stopPublicStreaming: () => {
|
||||
[ACTION_TYPES.STOP_PUBLIC_STREAMING]: () => {
|
||||
win.ipcRenderer.send('stop-public-streaming')
|
||||
},
|
||||
unbindDirectMessagesStreaming: () => {
|
||||
[ACTION_TYPES.UNBIND_DIRECT_MESSAGES_STREAMING]: () => {
|
||||
win.ipcRenderer.removeAllListeners('error-start-directmessages-streaming')
|
||||
win.ipcRenderer.removeAllListeners('update-start-directmessages-streaming')
|
||||
win.ipcRenderer.removeAllListeners('delete-start-directmessages-streaming')
|
||||
},
|
||||
stopDirectMessagesStreaming: () => {
|
||||
[ACTION_TYPES.STOP_DIRECT_MESSAGES_STREAMING]: () => {
|
||||
win.ipcRenderer.send('stop-directmessages-streaming')
|
||||
},
|
||||
updateTootForAllTimelines: ({ commit, state }, status: Entity.Status): boolean => {
|
||||
[ACTION_TYPES.UPDATE_TOOT_FOR_ALL_TIMELINES]: ({ commit, state }, status: Entity.Status): boolean => {
|
||||
commit('TimelineSpace/Contents/Home/updateToot', status, { root: true })
|
||||
commit('TimelineSpace/Contents/Notifications/updateToot', status, { root: true })
|
||||
commit('TimelineSpace/Contents/Mentions/updateToot', status, { root: true })
|
||||
|
|
@ -425,7 +463,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
}
|
||||
return true
|
||||
},
|
||||
waitToUnbindUserStreaming: async ({ state, dispatch }): Promise<boolean> => {
|
||||
[ACTION_TYPES.WAIT_TO_UNBIND_USER_STREAMING]: async ({ state, dispatch }): Promise<boolean> => {
|
||||
if (!state.bindingAccount) {
|
||||
return true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,8 +50,12 @@ const mutations: MutationTree<ContentsState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
CHANGE_LOADING: 'changeLoading'
|
||||
}
|
||||
|
||||
const actions: ActionTree<ContentsState, RootState> = {
|
||||
changeLoading: ({ commit }, loading) => {
|
||||
[ACTION_TYPES.CHANGE_LOADING]: ({ commit }, loading) => {
|
||||
commit(MUTATION_TYPES.CHANGE_LOADING, loading)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,8 +65,13 @@ const mutations: MutationTree<BookmarksState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_BOOKMARKS: 'fetchBookmarks',
|
||||
LAZY_FETCH_BOOKMARKS: 'lazyFetchBookmarks'
|
||||
}
|
||||
|
||||
const actions: ActionTree<BookmarksState, RootState> = {
|
||||
fetchBookmarks: async ({ commit, rootState }, account: LocalAccount): Promise<Array<Entity.Status>> => {
|
||||
[ACTION_TYPES.FETCH_BOOKMARKS]: async ({ commit, rootState }, account: LocalAccount): Promise<Array<Entity.Status>> => {
|
||||
const client = generator(rootState.TimelineSpace.sns, account.baseURL, account.accessToken, rootState.App.userAgent)
|
||||
const res = await client.getBookmarks({ limit: 40 })
|
||||
commit(MUTATION_TYPES.UPDATE_BOOKMARKS, res.data)
|
||||
|
|
@ -84,7 +89,7 @@ const actions: ActionTree<BookmarksState, RootState> = {
|
|||
}
|
||||
return res.data
|
||||
},
|
||||
laxyFetchBookmarks: async ({ state, commit, rootState }): Promise<Array<Entity.Status> | null> => {
|
||||
[ACTION_TYPES.LAZY_FETCH_BOOKMARKS]: async ({ state, commit, rootState }): Promise<Array<Entity.Status> | null> => {
|
||||
if (state.lazyLoading) {
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,15 +5,15 @@ import { RootState } from '@/store'
|
|||
export type DirectMessagesState = {
|
||||
lazyLoading: boolean
|
||||
heading: boolean
|
||||
timeline: Array<Entity.Status>
|
||||
scrolling: boolean
|
||||
timeline: Array<Entity.Status>
|
||||
}
|
||||
|
||||
const state = (): DirectMessagesState => ({
|
||||
lazyLoading: false,
|
||||
heading: true,
|
||||
timeline: [],
|
||||
scrolling: false
|
||||
scrolling: false,
|
||||
timeline: []
|
||||
})
|
||||
|
||||
export const MUTATION_TYPES = {
|
||||
|
|
@ -85,8 +85,13 @@ const mutations: MutationTree<DirectMessagesState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_TIMELINE: 'fetchTimeline',
|
||||
LAZY_FETCH_TIMELINE: 'lazyFetchTimeline'
|
||||
}
|
||||
|
||||
const actions: ActionTree<DirectMessagesState, RootState> = {
|
||||
fetchTimeline: async ({ dispatch, commit, rootState }): Promise<Array<Entity.Status>> => {
|
||||
[ACTION_TYPES.FETCH_TIMELINE]: async ({ dispatch, commit, rootState }): Promise<Array<Entity.Status>> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -104,7 +109,10 @@ const actions: ActionTree<DirectMessagesState, RootState> = {
|
|||
return []
|
||||
}
|
||||
},
|
||||
lazyFetchTimeline: ({ state, commit, rootState }, lastStatus: Entity.Status): Promise<Array<Entity.Status> | null> => {
|
||||
[ACTION_TYPES.LAZY_FETCH_TIMELINE]: async (
|
||||
{ state, commit, rootState },
|
||||
lastStatus: Entity.Status
|
||||
): Promise<Array<Entity.Status> | null> => {
|
||||
if (state.lazyLoading) {
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,6 +65,11 @@ const mutations: MutationTree<FavouritesState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_FAVOURITES: 'fetchFavourites',
|
||||
LAZY_FETCH_FAVOURITES: 'lazyFetchFavourites'
|
||||
}
|
||||
|
||||
const actions: ActionTree<FavouritesState, RootState> = {
|
||||
fetchFavourites: async ({ commit, rootState }, account: LocalAccount): Promise<Array<Entity.Status>> => {
|
||||
const client = generator(rootState.TimelineSpace.sns, account.baseURL, account.accessToken, rootState.App.userAgent)
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Module, MutationTree, ActionTree } from 'vuex'
|
|||
import { RootState } from '@/store'
|
||||
import { MyWindow } from '~/src/types/global'
|
||||
|
||||
const win = (window as any) as MyWindow
|
||||
const win = window as any as MyWindow
|
||||
|
||||
export type ListState = {
|
||||
tags: Array<LocalTag>
|
||||
|
|
@ -23,13 +23,18 @@ const mutations: MutationTree<ListState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
LIST_TAGS: 'listTags',
|
||||
REMOVE_TAG: 'removeTag'
|
||||
}
|
||||
|
||||
const actions: ActionTree<ListState, RootState> = {
|
||||
listTags: async ({ commit }) => {
|
||||
[ACTION_TYPES.LIST_TAGS]: async ({ commit }) => {
|
||||
const tags: Array<LocalTag> = await win.ipcRenderer.invoke('list-hashtags')
|
||||
commit(MUTATION_TYPES.UPDATE_TAGS, tags)
|
||||
return tags
|
||||
},
|
||||
removeTag: async ({ dispatch }, tag: LocalTag) => {
|
||||
[ACTION_TYPES.REMOVE_TAG]: async ({ dispatch }, tag: LocalTag) => {
|
||||
await win.ipcRenderer.invoke('remove-hashtag', tag)
|
||||
dispatch('listTags')
|
||||
dispatch('TimelineSpace/SideMenu/listTags', {}, { root: true })
|
||||
|
|
|
|||
|
|
@ -88,8 +88,15 @@ const mutations: MutationTree<TagState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH: 'fetch',
|
||||
START_STREAMING: 'startStreaming',
|
||||
STOP_STREAMING: 'stopStreaming',
|
||||
LAZY_FETCH_TIMELINE: 'lazyFetchTimeline'
|
||||
}
|
||||
|
||||
const actions: ActionTree<TagState, RootState> = {
|
||||
fetch: async ({ commit, rootState }, tag: string): Promise<Array<Entity.Status>> => {
|
||||
[ACTION_TYPES.FETCH]: async ({ commit, rootState }, tag: string): Promise<Array<Entity.Status>> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -100,7 +107,7 @@ const actions: ActionTree<TagState, RootState> = {
|
|||
commit(MUTATION_TYPES.UPDATE_TIMELINE, res.data)
|
||||
return res.data
|
||||
},
|
||||
startStreaming: ({ state, commit, rootState }, tag: string) => {
|
||||
[ACTION_TYPES.START_STREAMING]: ({ state, commit, rootState }, tag: string) => {
|
||||
win.ipcRenderer.on('update-start-tag-streaming', (_, update: Entity.Status) => {
|
||||
commit(MUTATION_TYPES.APPEND_TIMELINE, update)
|
||||
if (state.heading && Math.random() > 0.8) {
|
||||
|
|
@ -122,7 +129,7 @@ const actions: ActionTree<TagState, RootState> = {
|
|||
})
|
||||
})
|
||||
},
|
||||
stopStreaming: () => {
|
||||
[ACTION_TYPES.STOP_STREAMING]: () => {
|
||||
return new Promise(resolve => {
|
||||
win.ipcRenderer.removeAllListeners('error-start-tag-streaming')
|
||||
win.ipcRenderer.removeAllListeners('update-start-tag-streaming')
|
||||
|
|
@ -131,7 +138,10 @@ const actions: ActionTree<TagState, RootState> = {
|
|||
resolve(null)
|
||||
})
|
||||
},
|
||||
lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithTag): Promise<Array<Entity.Status> | null> => {
|
||||
[ACTION_TYPES.LAZY_FETCH_TIMELINE]: async (
|
||||
{ state, commit, rootState },
|
||||
loadPosition: LoadPositionWithTag
|
||||
): Promise<Array<Entity.Status> | null> => {
|
||||
if (state.lazyLoading) {
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -122,8 +122,16 @@ const mutations: MutationTree<HomeState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_TIMELINE: 'fetchTimeline',
|
||||
LAZY_FETCH_TIMELINE: 'lazyFetchTimeline',
|
||||
FETCH_TIMELINE_SINCE: 'fetchTimelineSince',
|
||||
GET_MARKER: 'getMarker',
|
||||
SAVE_MARKER: 'saveMarker'
|
||||
}
|
||||
|
||||
const actions: ActionTree<HomeState, RootState> = {
|
||||
fetchTimeline: async ({ dispatch, commit, rootState }) => {
|
||||
[ACTION_TYPES.FETCH_TIMELINE]: async ({ dispatch, commit, rootState }) => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -149,7 +157,8 @@ const actions: ActionTree<HomeState, RootState> = {
|
|||
// If the number of unread statuses is less than 40, max_id is necessary, but it is enough to reject duplicated statuses.
|
||||
// So we do it in mutation.
|
||||
max_id: null,
|
||||
id: 'loading-card'
|
||||
id: 'loading-card',
|
||||
uri: 'loading-card'
|
||||
}
|
||||
|
||||
const res = await client.getHomeTimeline({ limit: 40, max_id: lastReadStatus.id })
|
||||
|
|
@ -168,7 +177,10 @@ const actions: ActionTree<HomeState, RootState> = {
|
|||
return res.data
|
||||
}
|
||||
},
|
||||
lazyFetchTimeline: async ({ state, commit, rootState }, lastStatus: Entity.Status): Promise<Array<Entity.Status> | null> => {
|
||||
[ACTION_TYPES.LAZY_FETCH_TIMELINE]: async (
|
||||
{ state, commit, rootState },
|
||||
lastStatus: Entity.Status
|
||||
): Promise<Array<Entity.Status> | null> => {
|
||||
if (state.lazyLoading) {
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
|
|
@ -189,7 +201,7 @@ const actions: ActionTree<HomeState, RootState> = {
|
|||
commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, false)
|
||||
})
|
||||
},
|
||||
fetchTimelineSince: async ({ state, rootState, commit }, since_id: string): Promise<Array<Entity.Status> | null> => {
|
||||
[ACTION_TYPES.FETCH_TIMELINE_SINCE]: async ({ state, rootState, commit }, since_id: string): Promise<Array<Entity.Status> | null> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -229,7 +241,8 @@ const actions: ActionTree<HomeState, RootState> = {
|
|||
type: 'middle-load',
|
||||
since_id: res.data[0].id,
|
||||
max_id: maxID,
|
||||
id: 'loading-card'
|
||||
id: 'loading-card',
|
||||
uri: 'loading-card'
|
||||
}
|
||||
let timeline: Array<Entity.Status | LoadingCard> = [card]
|
||||
timeline = timeline.concat(res.data)
|
||||
|
|
@ -239,7 +252,7 @@ const actions: ActionTree<HomeState, RootState> = {
|
|||
}
|
||||
return res.data
|
||||
},
|
||||
getMarker: async ({ rootState }): Promise<LocalMarker | null> => {
|
||||
[ACTION_TYPES.GET_MARKER]: async ({ rootState }): Promise<LocalMarker | null> => {
|
||||
if (!rootState.TimelineSpace.timelineSetting.useMarker.home) {
|
||||
return null
|
||||
}
|
||||
|
|
@ -265,7 +278,7 @@ const actions: ActionTree<HomeState, RootState> = {
|
|||
const localMarker: LocalMarker | null = await win.ipcRenderer.invoke('get-home-marker', rootState.TimelineSpace.account._id)
|
||||
return localMarker
|
||||
},
|
||||
saveMarker: async ({ state, rootState }) => {
|
||||
[ACTION_TYPES.SAVE_MARKER]: async ({ state, rootState }) => {
|
||||
const timeline = state.timeline
|
||||
if (timeline.length === 0 || timeline[0].id === 'loading-card') {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -20,8 +20,14 @@ const mutations: MutationTree<IndexState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_LISTS: 'fetchLists',
|
||||
CREATE_LIST: 'createList',
|
||||
DELETE_LIST: 'deleteList'
|
||||
}
|
||||
|
||||
const actions: ActionTree<IndexState, RootState> = {
|
||||
fetchLists: async ({ commit, rootState }): Promise<Array<Entity.List>> => {
|
||||
[ACTION_TYPES.FETCH_LISTS]: async ({ commit, rootState }): Promise<Array<Entity.List>> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -32,7 +38,7 @@ const actions: ActionTree<IndexState, RootState> = {
|
|||
commit(MUTATION_TYPES.CHANGE_LISTS, res.data)
|
||||
return res.data
|
||||
},
|
||||
createList: async ({ rootState }, title: string): Promise<Entity.List> => {
|
||||
[ACTION_TYPES.CREATE_LIST]: async ({ rootState }, title: string): Promise<Entity.List> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -42,7 +48,7 @@ const actions: ActionTree<IndexState, RootState> = {
|
|||
const res = await client.createList(title)
|
||||
return res.data
|
||||
},
|
||||
deleteList: async ({ dispatch, rootState }, list: Entity.List) => {
|
||||
[ACTION_TYPES.DELETE_LIST]: async ({ dispatch, rootState }, list: Entity.List) => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -50,7 +56,7 @@ const actions: ActionTree<IndexState, RootState> = {
|
|||
rootState.App.userAgent
|
||||
)
|
||||
const res = await client.deleteList(list.id)
|
||||
dispatch('fetchLists')
|
||||
dispatch(ACTION_TYPES.FETCH_LISTS)
|
||||
return res.data
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,8 +88,15 @@ const mutations: MutationTree<ShowState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_TIMELINE: 'fetchTimeline',
|
||||
START_STREAMING: 'startStreaming',
|
||||
STOP_STREAMING: 'stopStreaming',
|
||||
LAZY_FETCH_TIMELINE: 'lazyFetchTimeline'
|
||||
}
|
||||
|
||||
const actions: ActionTree<ShowState, RootState> = {
|
||||
fetchTimeline: async ({ commit, rootState }, listID: string): Promise<Array<Entity.Status>> => {
|
||||
[ACTION_TYPES.FETCH_TIMELINE]: async ({ commit, rootState }, listID: string): Promise<Array<Entity.Status>> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -100,7 +107,7 @@ const actions: ActionTree<ShowState, RootState> = {
|
|||
commit(MUTATION_TYPES.UPDATE_TIMELINE, res.data)
|
||||
return res.data
|
||||
},
|
||||
startStreaming: ({ state, commit, rootState }, listID: string) => {
|
||||
[ACTION_TYPES.START_STREAMING]: ({ state, commit, rootState }, listID: string) => {
|
||||
win.ipcRenderer.on('update-start-list-streaming', (_, update: Entity.Status) => {
|
||||
commit(MUTATION_TYPES.APPEND_TIMELINE, update)
|
||||
if (state.heading && Math.random() > 0.8) {
|
||||
|
|
@ -122,7 +129,7 @@ const actions: ActionTree<ShowState, RootState> = {
|
|||
})
|
||||
})
|
||||
},
|
||||
stopStreaming: () => {
|
||||
[ACTION_TYPES.STOP_STREAMING]: () => {
|
||||
return new Promise(resolve => {
|
||||
win.ipcRenderer.removeAllListeners('error-start-list-streaming')
|
||||
win.ipcRenderer.removeAllListeners('update-start-list-streaming')
|
||||
|
|
@ -131,7 +138,10 @@ const actions: ActionTree<ShowState, RootState> = {
|
|||
resolve(null)
|
||||
})
|
||||
},
|
||||
lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithList): Promise<Array<Entity.Status> | null> => {
|
||||
[ACTION_TYPES.LAZY_FETCH_TIMELINE]: async (
|
||||
{ state, commit, rootState },
|
||||
loadPosition: LoadPositionWithList
|
||||
): Promise<Array<Entity.Status> | null> => {
|
||||
if (state.lazyLoading) {
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,8 +84,13 @@ const mutations: MutationTree<LocalState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_LOCAL_TIMELINE: 'fetchLocalTimeline',
|
||||
LAZY_FETCH_TIMELINE: 'lazyFetchTimeline'
|
||||
}
|
||||
|
||||
const actions: ActionTree<LocalState, RootState> = {
|
||||
fetchLocalTimeline: async ({ dispatch, commit, rootState }): Promise<Array<Entity.Status>> => {
|
||||
[ACTION_TYPES.FETCH_LOCAL_TIMELINE]: async ({ dispatch, commit, rootState }): Promise<Array<Entity.Status>> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -103,7 +108,10 @@ const actions: ActionTree<LocalState, RootState> = {
|
|||
return []
|
||||
}
|
||||
},
|
||||
lazyFetchTimeline: async ({ state, commit, rootState }, lastStatus: Entity.Status): Promise<Array<Entity.Status> | null> => {
|
||||
[ACTION_TYPES.LAZY_FETCH_TIMELINE]: async (
|
||||
{ state, commit, rootState },
|
||||
lastStatus: Entity.Status
|
||||
): Promise<Array<Entity.Status> | null> => {
|
||||
if (state.lazyLoading) {
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -114,8 +114,16 @@ const mutations: MutationTree<MentionsState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_MENTIONS: 'fetchMentions',
|
||||
LAZY_FETCH_MENTIONS: 'lazyFetchMentions',
|
||||
FETCH_MENTIONS_SINCE: 'fetchMentionsSince',
|
||||
GET_MARKER: 'getMarker',
|
||||
SAVE_MARKER: 'saveMarker'
|
||||
}
|
||||
|
||||
const actions: ActionTree<MentionsState, RootState> = {
|
||||
fetchMentions: async ({ dispatch, commit, rootState }): Promise<Array<Entity.Notification>> => {
|
||||
[ACTION_TYPES.FETCH_MENTIONS]: async ({ dispatch, commit, rootState }): Promise<Array<Entity.Notification>> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -138,7 +146,8 @@ const actions: ActionTree<MentionsState, RootState> = {
|
|||
type: 'middle-load',
|
||||
since_id: localMarker.last_read_id,
|
||||
max_id: null,
|
||||
id: 'loading-card'
|
||||
id: 'loading-card',
|
||||
uri: 'loading-card'
|
||||
}
|
||||
let mentions: Array<Entity.Notification | LoadingCard> = [card]
|
||||
const res = await client.getNotifications({ limit: 30, max_id: nextResponse.data[0].id, exclude_types: excludes })
|
||||
|
|
@ -156,7 +165,10 @@ const actions: ActionTree<MentionsState, RootState> = {
|
|||
commit(MUTATION_TYPES.UPDATE_MENTIONS, res.data)
|
||||
return res.data
|
||||
},
|
||||
lazyFetchMentions: async ({ state, commit, rootState }, lastMention: Entity.Notification): Promise<Array<Entity.Notification> | null> => {
|
||||
[ACTION_TYPES.LAZY_FETCH_MENTIONS]: async (
|
||||
{ state, commit, rootState },
|
||||
lastMention: Entity.Notification
|
||||
): Promise<Array<Entity.Notification> | null> => {
|
||||
if (state.lazyLoading) {
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
|
|
@ -181,7 +193,10 @@ const actions: ActionTree<MentionsState, RootState> = {
|
|||
commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, false)
|
||||
})
|
||||
},
|
||||
fetchMentionsSince: async ({ state, rootState, commit }, since_id: string): Promise<Array<Entity.Notification> | null> => {
|
||||
[ACTION_TYPES.FETCH_MENTIONS_SINCE]: async (
|
||||
{ state, rootState, commit },
|
||||
since_id: string
|
||||
): Promise<Array<Entity.Notification> | null> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -211,7 +226,8 @@ const actions: ActionTree<MentionsState, RootState> = {
|
|||
type: 'middle-load',
|
||||
since_id: res.data[0].id,
|
||||
max_id: maxID,
|
||||
id: 'loading-card'
|
||||
id: 'loading-card',
|
||||
uri: 'loading-card'
|
||||
}
|
||||
let mentions: Array<Entity.Notification | LoadingCard> = [card]
|
||||
mentions = mentions.concat(res.data)
|
||||
|
|
@ -221,14 +237,14 @@ const actions: ActionTree<MentionsState, RootState> = {
|
|||
}
|
||||
return res.data
|
||||
},
|
||||
getMarker: async ({ rootState }): Promise<LocalMarker | null> => {
|
||||
[ACTION_TYPES.GET_MARKER]: async ({ rootState }): Promise<LocalMarker | null> => {
|
||||
if (!rootState.TimelineSpace.timelineSetting.useMarker.mentions) {
|
||||
return null
|
||||
}
|
||||
const localMarker: LocalMarker | null = await win.ipcRenderer.invoke('get-mentions-marker', rootState.TimelineSpace.account._id)
|
||||
return localMarker
|
||||
},
|
||||
saveMarker: async ({ state, rootState }) => {
|
||||
[ACTION_TYPES.SAVE_MARKER]: async ({ state, rootState }) => {
|
||||
const mentions = state.mentions
|
||||
if (mentions.length === 0 || mentions[0].id === 'loading-card') {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -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 NotificationsState = {
|
||||
lazyLoading: boolean
|
||||
|
|
@ -107,8 +107,17 @@ const mutations: MutationTree<NotificationsState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_NOTIFICATIONS: 'fetchNotifications',
|
||||
LAZY_FETCH_NOTIFICATIONS: 'lazyFetchNotifications',
|
||||
FETCH_NOTIFICATIONS_SINCE: 'fetchNotificationsSince',
|
||||
RESET_BADGE: 'resetBadge',
|
||||
GET_MARKER: 'getMarker',
|
||||
SAVE_MARKER: 'saveMarker'
|
||||
}
|
||||
|
||||
const actions: ActionTree<NotificationsState, RootState> = {
|
||||
fetchNotifications: async ({ dispatch, commit, rootState }): Promise<Array<Entity.Notification>> => {
|
||||
[ACTION_TYPES.FETCH_NOTIFICATIONS]: async ({ dispatch, commit, rootState }): Promise<Array<Entity.Notification>> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -135,7 +144,8 @@ const actions: ActionTree<NotificationsState, RootState> = {
|
|||
// If the number of unread statuses is less than 30, max_id is necessary, but it is enough to reject duplicated statuses.
|
||||
// So we do it in mutation.
|
||||
max_id: null,
|
||||
id: 'loading-card'
|
||||
id: 'loading-card',
|
||||
uri: 'loading-card'
|
||||
}
|
||||
let notifications: Array<Entity.Notification | LoadingCard> = [card]
|
||||
const res = await client.getNotifications({ limit: 30, max_id: nextResponse.data[0].id })
|
||||
|
|
@ -149,7 +159,7 @@ const actions: ActionTree<NotificationsState, RootState> = {
|
|||
commit(MUTATION_TYPES.UPDATE_NOTIFICATIONS, res.data)
|
||||
return res.data
|
||||
},
|
||||
lazyFetchNotifications: async (
|
||||
[ACTION_TYPES.LAZY_FETCH_NOTIFICATIONS]: async (
|
||||
{ state, commit, rootState },
|
||||
lastNotification: Entity.Notification
|
||||
): Promise<Array<Entity.Notification> | null> => {
|
||||
|
|
@ -173,7 +183,10 @@ const actions: ActionTree<NotificationsState, RootState> = {
|
|||
commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, false)
|
||||
})
|
||||
},
|
||||
fetchNotificationsSince: async ({ state, rootState, commit }, since_id: string): Promise<Array<Entity.Notification> | null> => {
|
||||
[ACTION_TYPES.FETCH_NOTIFICATIONS_SINCE]: async (
|
||||
{ state, rootState, commit },
|
||||
since_id: string
|
||||
): Promise<Array<Entity.Notification> | null> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -203,7 +216,8 @@ const actions: ActionTree<NotificationsState, RootState> = {
|
|||
type: 'middle-load',
|
||||
since_id: res.data[0].id,
|
||||
max_id: maxID,
|
||||
id: 'loading-card'
|
||||
id: 'loading-card',
|
||||
uri: 'loading-card'
|
||||
}
|
||||
let notifications: Array<Entity.Notification | LoadingCard> = [card]
|
||||
notifications = notifications.concat(res.data)
|
||||
|
|
@ -213,10 +227,10 @@ const actions: ActionTree<NotificationsState, RootState> = {
|
|||
}
|
||||
return res.data
|
||||
},
|
||||
resetBadge: () => {
|
||||
[ACTION_TYPES.RESET_BADGE]: () => {
|
||||
win.ipcRenderer.send('reset-badge')
|
||||
},
|
||||
getMarker: async ({ rootState }): Promise<LocalMarker | null> => {
|
||||
[ACTION_TYPES.GET_MARKER]: async ({ rootState }): Promise<LocalMarker | null> => {
|
||||
if (!rootState.TimelineSpace.timelineSetting.useMarker.notifications) {
|
||||
return null
|
||||
}
|
||||
|
|
@ -242,7 +256,7 @@ const actions: ActionTree<NotificationsState, RootState> = {
|
|||
const localMarker: LocalMarker | null = await win.ipcRenderer.invoke('get-notifications-marker', rootState.TimelineSpace.account._id)
|
||||
return localMarker
|
||||
},
|
||||
saveMarker: async ({ state, rootState }) => {
|
||||
[ACTION_TYPES.SAVE_MARKER]: async ({ state, rootState }) => {
|
||||
const notifications = state.notifications
|
||||
if (notifications.length === 0 || notifications[0].id === 'loading-card') {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -84,8 +84,13 @@ const mutations: MutationTree<PublicState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_PUBLIC_TIMELINE: 'fetchPublicTimeline',
|
||||
LAZY_FETCH_TIMELINE: 'lazyFetchTimeline'
|
||||
}
|
||||
|
||||
const actions: ActionTree<PublicState, RootState> = {
|
||||
fetchPublicTimeline: async ({ dispatch, commit, rootState }): Promise<Array<Entity.Status>> => {
|
||||
[ACTION_TYPES.FETCH_PUBLIC_TIMELINE]: async ({ dispatch, commit, rootState }): Promise<Array<Entity.Status>> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -102,7 +107,10 @@ const actions: ActionTree<PublicState, RootState> = {
|
|||
return []
|
||||
}
|
||||
},
|
||||
lazyFetchTimeline: ({ state, commit, rootState }, lastStatus: Entity.Status): Promise<Array<Entity.Status> | null> => {
|
||||
[ACTION_TYPES.LAZY_FETCH_TIMELINE]: async (
|
||||
{ state, commit, rootState },
|
||||
lastStatus: Entity.Status
|
||||
): Promise<Array<Entity.Status> | null> => {
|
||||
if (state.lazyLoading) {
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,12 @@ const mutations: MutationTree<AccountState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
SEARCH: 'search'
|
||||
}
|
||||
|
||||
const actions: ActionTree<AccountState, RootState> = {
|
||||
search: async ({ commit, rootState }, query: string): Promise<Array<Entity.Account>> => {
|
||||
[ACTION_TYPES.SEARCH]: async ({ commit, rootState }, query: string): Promise<Array<Entity.Account>> => {
|
||||
commit('TimelineSpace/Contents/changeLoading', true, { root: true })
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
|
|
|
|||
|
|
@ -20,8 +20,12 @@ const mutations: MutationTree<TagState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
SEARCH: 'search'
|
||||
}
|
||||
|
||||
const actions: ActionTree<TagState, RootState> = {
|
||||
search: ({ commit, rootState }, query: string): Promise<Array<Entity.Tag>> => {
|
||||
[ACTION_TYPES.SEARCH]: async ({ commit, rootState }, query: string): Promise<Array<Entity.Tag>> => {
|
||||
commit('TimelineSpace/Contents/changeLoading', true, { root: true })
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
|
|
|
|||
|
|
@ -20,8 +20,12 @@ const mutations: MutationTree<TootsState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
SEARCH: 'search'
|
||||
}
|
||||
|
||||
const actions: ActionTree<TootsState, RootState> = {
|
||||
search: ({ commit, rootState }, query: string): Promise<Array<Entity.Status>> => {
|
||||
[ACTION_TYPES.SEARCH]: async ({ commit, rootState }, query: string): Promise<Array<Entity.Status>> => {
|
||||
commit('TimelineSpace/Contents/changeLoading', true, { root: true })
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
|
|
|
|||
|
|
@ -3,4 +3,5 @@ export type LoadingCard = {
|
|||
max_id: string | null
|
||||
since_id: string | null
|
||||
id: 'loading-card'
|
||||
uri: 'loading-card'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
"noFallthroughCasesInSwitch": true,
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@*": ["src/renderer*"],
|
||||
|
|
|
|||
Loading…
Reference in New Issue