refs #3301 Rewrite TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media with composition API
This commit is contained in:
parent
cd6c8f4023
commit
07ad9dcfed
|
@ -10,42 +10,56 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { mapGetters } from 'vuex'
|
import { defineComponent, PropType, ref, computed, onMounted } from 'vue'
|
||||||
import Posts from './Timeline/Posts'
|
import { Entity } from 'megalodon'
|
||||||
import PostsAndReplies from './Timeline/PostsAndReplies'
|
import { useStore } from '@/store'
|
||||||
import Media from './Timeline/Media'
|
import Posts from './Timeline/Posts.vue'
|
||||||
|
import PostsAndReplies from './Timeline/PostsAndReplies.vue'
|
||||||
|
import Media from './Timeline/Media.vue'
|
||||||
|
|
||||||
export default {
|
export default defineComponent({
|
||||||
name: 'timeline',
|
name: 'timeline',
|
||||||
props: ['account'],
|
props: {
|
||||||
|
account: {
|
||||||
|
type: Object as PropType<Entity.Account>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
Posts,
|
Posts,
|
||||||
PostsAndReplies,
|
PostsAndReplies,
|
||||||
Media
|
Media
|
||||||
},
|
},
|
||||||
data() {
|
setup() {
|
||||||
return {
|
const space = 'TimelineSpace/Contents/SideBar/AccountProfile/Timeline'
|
||||||
activeName: 'posts',
|
const store = useStore()
|
||||||
defaultBuffer: 200,
|
|
||||||
buffer: 200
|
const activeName = ref<string>('posts')
|
||||||
}
|
const defaultBuffer = ref<number>(200)
|
||||||
},
|
const buffer = ref<number>(200)
|
||||||
computed: {
|
|
||||||
...mapGetters('TimelineSpace/Contents/SideBar/AccountProfile/Timeline', ['filters'])
|
const filters = computed(() => store.getters[`${space}/filters`])
|
||||||
},
|
|
||||||
mounted() {
|
onMounted(() => {
|
||||||
const timeline = document.getElementById('sidebar_tabs')
|
const timeline = document.getElementById('sidebar_tabs')
|
||||||
if (timeline !== undefined && timeline !== null) {
|
if (timeline !== undefined && timeline !== null) {
|
||||||
this.buffer = this.defaultBuffer + timeline.getBoundingClientRect().top
|
buffer.value = defaultBuffer.value + timeline.getBoundingClientRect().top
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
methods: {
|
|
||||||
handleClick(tab, event) {
|
const handleClick = (tab, event) => {
|
||||||
console.log(tab, event)
|
console.log(tab, event)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
activeName,
|
||||||
|
handleClick,
|
||||||
|
buffer,
|
||||||
|
filters
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -24,116 +24,136 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { mapState, mapGetters } from 'vuex'
|
import { defineComponent, PropType, ref, computed, onMounted, onBeforeUnmount, onUnmounted, watch, toRefs } from 'vue'
|
||||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
import { ElMessage } from 'element-plus'
|
||||||
import { EventEmitter } from '~/src/renderer/components/event'
|
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 { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media'
|
||||||
|
|
||||||
export default {
|
export default defineComponent({
|
||||||
name: 'media',
|
name: 'media',
|
||||||
props: ['account', 'buffer', 'filters'],
|
|
||||||
components: { Toot },
|
components: { Toot },
|
||||||
data() {
|
props: {
|
||||||
return {
|
account: {
|
||||||
focusedId: null
|
type: Object as PropType<Entity.Account>,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
buffer: {
|
||||||
|
type: Number,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
type: Object as PropType<Array<Entity.Filter>>,
|
||||||
|
required: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
setup(props) {
|
||||||
...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media', {
|
const space = 'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media'
|
||||||
timeline: state => state.timeline,
|
const store = useStore()
|
||||||
lazyLoading: state => state.lazyLoading
|
const i18n = useI18next()
|
||||||
}),
|
const { account } = toRefs(props)
|
||||||
...mapState('App', {
|
|
||||||
backgroundColor: state => state.theme.background_color
|
const focusedId = ref<string | null>(null)
|
||||||
}),
|
const timeline = computed(() => store.state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.Media.timeline)
|
||||||
...mapGetters('TimelineSpace/Modals', ['modalOpened'])
|
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.Media.lazyLoading)
|
||||||
},
|
const backgroundColor = computed(() => store.state.App.theme.background_color)
|
||||||
created() {
|
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||||
this.load()
|
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
|
||||||
},
|
|
||||||
mounted() {
|
onMounted(() => {
|
||||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/clearTimeline')
|
load()
|
||||||
document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
|
store.dispatch(`${space}/${ACTION_TYPES.CLEAR_TIMELINE}`)
|
||||||
EventEmitter.on('focus-sidebar', () => {
|
document.getElementById('sidebar_scrollable')?.addEventListener('scroll', onScroll)
|
||||||
this.focusedId = 0
|
|
||||||
this.$nextTick(function () {
|
|
||||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
},
|
onBeforeUnmount(() => {
|
||||||
beforeUnmount() {
|
EventEmitter.emit('focus-timeline')
|
||||||
EventEmitter.emit('focus-timeline')
|
EventEmitter.off('focus-sidebar')
|
||||||
EventEmitter.off('focus-sidebar')
|
})
|
||||||
},
|
onUnmounted(() => {
|
||||||
unmounted() {
|
const el = document.getElementById('sidebar_scrollable')
|
||||||
if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
|
if (el !== undefined && el !== null) {
|
||||||
document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
|
el.removeEventListener('scroll', onScroll)
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
watch: {
|
watch(account, () => {
|
||||||
account: function (_newAccount, _oldAccount) {
|
store.dispatch(`${space}/${ACTION_TYPES.CLEAR_TIMELINE}`)
|
||||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/clearTimeline')
|
load()
|
||||||
this.load()
|
})
|
||||||
}
|
|
||||||
},
|
const load = () => {
|
||||||
methods: {
|
store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`, account.value).catch(() => {
|
||||||
load() {
|
ElMessage({
|
||||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/fetchTimeline', this.account).catch(() => {
|
message: i18n.t('message.timeline_fetch_error'),
|
||||||
this.$message({
|
|
||||||
message: this.$t('message.timeline_fetch_error'),
|
|
||||||
type: 'error'
|
type: 'error'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
}
|
||||||
updateToot(message) {
|
const onScroll = (event: Event) => {
|
||||||
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/updateToot', message)
|
|
||||||
},
|
|
||||||
deleteToot(message) {
|
|
||||||
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/deleteToot', message)
|
|
||||||
},
|
|
||||||
onScroll(event) {
|
|
||||||
// for lazyLoading
|
// for lazyLoading
|
||||||
if (
|
if (
|
||||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
|
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
|
||||||
!this.lazyloading
|
document.getElementById('account_profile')!.clientHeight - 10 &&
|
||||||
|
!lazyLoading
|
||||||
) {
|
) {
|
||||||
this.$store
|
store
|
||||||
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/lazyFetchTimeline', {
|
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, {
|
||||||
account: this.account,
|
account: account.value,
|
||||||
status: this.timeline[this.timeline.length - 1]
|
status: timeline[timeline.value.length - 1]
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
this.$message({
|
ElMessage({
|
||||||
message: this.$t('message.timeline_fetch_error'),
|
message: i18n.t('message.timeline_fetch_error'),
|
||||||
type: 'error'
|
type: 'error'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
focusNext() {
|
const updateToot = (message: Entity.Status) => {
|
||||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||||
if (currentIndex === -1) {
|
}
|
||||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
const deleteToot = (message: Entity.Status) => {
|
||||||
} else if (currentIndex < this.timeline.length - 1) {
|
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message)
|
||||||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
}
|
||||||
|
const focusNext = () => {
|
||||||
|
if (currentFocusedIndex.value === -1) {
|
||||||
|
focusedId.value = timeline.value[0].uri + timeline.value[0].id
|
||||||
|
} else if (currentFocusedIndex.value < timeline.value.length - 1) {
|
||||||
|
focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
focusPrev() {
|
const focusPrev = () => {
|
||||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
if (currentFocusedIndex.value > 0) {
|
||||||
if (currentIndex > 0) {
|
focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
|
||||||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
focusToot(message) {
|
const focusToot = (message: Entity.Status) => {
|
||||||
this.focusedId = message.uri + message.id
|
focusedId.value = message.uri + message.id
|
||||||
},
|
}
|
||||||
focusTimeline() {
|
const focusTimeline = () => {
|
||||||
this.focusedId = 0
|
focusedId.value = null
|
||||||
EventEmitter.emit('focus-timeline')
|
EventEmitter.emit('focus-timeline')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
timeline,
|
||||||
|
focusedId,
|
||||||
|
modalOpened,
|
||||||
|
updateToot,
|
||||||
|
deleteToot,
|
||||||
|
focusNext,
|
||||||
|
focusPrev,
|
||||||
|
focusTimeline,
|
||||||
|
focusToot,
|
||||||
|
lazyLoading,
|
||||||
|
backgroundColor
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -59,8 +59,14 @@ const mutations: MutationTree<MediaState> = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const ACTION_TYPES = {
|
||||||
|
FETCH_TIMELINE: 'fetchTimeline',
|
||||||
|
LAZY_FETCH_TIMELINE: 'lazyFetchTimeline',
|
||||||
|
CLEAR_TIMELINE: 'clearTimeline'
|
||||||
|
}
|
||||||
|
|
||||||
const actions: ActionTree<MediaState, RootState> = {
|
const actions: ActionTree<MediaState, RootState> = {
|
||||||
fetchTimeline: async ({ commit, rootState }, account: Entity.Account) => {
|
[ACTION_TYPES.FETCH_TIMELINE]: async ({ commit, rootState }, account: Entity.Account) => {
|
||||||
commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true, { root: true })
|
commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true, { root: true })
|
||||||
const client = generator(
|
const client = generator(
|
||||||
rootState.TimelineSpace.sns,
|
rootState.TimelineSpace.sns,
|
||||||
|
@ -73,7 +79,7 @@ const actions: ActionTree<MediaState, RootState> = {
|
||||||
commit(MUTATION_TYPES.UPDATE_TIMELINE, res.data)
|
commit(MUTATION_TYPES.UPDATE_TIMELINE, res.data)
|
||||||
return res.data
|
return res.data
|
||||||
},
|
},
|
||||||
lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithAccount): Promise<null> => {
|
[ACTION_TYPES.LAZY_FETCH_TIMELINE]: async ({ state, commit, rootState }, loadPosition: LoadPositionWithAccount): Promise<null> => {
|
||||||
if (state.lazyLoading) {
|
if (state.lazyLoading) {
|
||||||
return Promise.resolve(null)
|
return Promise.resolve(null)
|
||||||
}
|
}
|
||||||
|
@ -97,7 +103,7 @@ const actions: ActionTree<MediaState, RootState> = {
|
||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
},
|
},
|
||||||
clearTimeline: ({ commit }) => {
|
[ACTION_TYPES.CLEAR_TIMELINE]: ({ commit }) => {
|
||||||
commit(MUTATION_TYPES.UPDATE_TIMELINE, [])
|
commit(MUTATION_TYPES.UPDATE_TIMELINE, [])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue