akkoma-fe/src/components/timeline/timeline.js

135 lines
3.7 KiB
JavaScript
Raw Normal View History

2016-10-28 13:19:42 +00:00
import Status from '../status/status.vue'
2016-11-06 16:44:05 +00:00
import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue'
2017-08-21 17:25:01 +00:00
import UserCard from '../user_card/user_card.vue'
2016-10-28 13:19:42 +00:00
2016-10-26 17:03:55 +00:00
const Timeline = {
props: [
2016-10-28 13:40:13 +00:00
'timeline',
'timelineName',
2017-06-12 14:34:41 +00:00
'title',
2017-09-17 11:26:35 +00:00
'userId',
'tag'
2016-10-28 13:19:42 +00:00
],
data () {
return {
paused: false
}
},
computed: {
2017-08-21 17:25:01 +00:00
timelineError () { return this.$store.state.statuses.error },
followers () {
return this.timeline.followers
},
friends () {
return this.timeline.friends
},
viewing () {
return this.timeline.viewing
},
newStatusCount () {
return this.timeline.newStatusCount
},
newStatusCountStr () {
if (this.timeline.flushMarker) {
return ''
} else {
return ` (${this.newStatusCount})`
}
2017-08-21 17:25:01 +00:00
}
},
2016-10-28 13:19:42 +00:00
components: {
Status,
2017-08-21 17:25:01 +00:00
StatusOrConversation,
UserCard
2016-10-28 13:40:13 +00:00
},
2016-11-06 19:11:00 +00:00
created () {
const store = this.$store
const credentials = store.state.users.currentUser.credentials
const showImmediately = this.timeline.visibleStatuses.length === 0
2016-11-06 19:11:00 +00:00
window.addEventListener('scroll', this.scrollLoad)
2016-11-06 19:11:00 +00:00
timelineFetcher.fetchAndUpdate({
store,
credentials,
timeline: this.timelineName,
2017-06-12 14:34:41 +00:00
showImmediately,
2017-09-17 11:26:35 +00:00
userId: this.userId,
tag: this.tag
2016-11-06 19:11:00 +00:00
})
2017-08-21 17:25:01 +00:00
// don't fetch followers for public, friend, twkn
if (this.timelineName === 'user') {
this.fetchFriends()
this.fetchFollowers()
}
2016-11-06 19:11:00 +00:00
},
destroyed () {
window.removeEventListener('scroll', this.scrollLoad)
this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
},
2016-10-28 13:40:13 +00:00
methods: {
showNewStatuses () {
if (this.timeline.flushMarker) {
this.$store.commit('clearTimeline', { timeline: this.timelineName })
this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
this.fetchOlderStatuses()
} else {
this.$store.commit('showNewStatuses', { timeline: this.timelineName })
this.paused = false
}
2016-11-06 16:44:05 +00:00
},
fetchOlderStatuses () {
const store = this.$store
const credentials = store.state.users.currentUser.credentials
2016-11-07 14:04:27 +00:00
store.commit('setLoading', { timeline: this.timelineName, value: true })
2016-11-06 16:44:05 +00:00
timelineFetcher.fetchAndUpdate({
store,
credentials,
timeline: this.timelineName,
older: true,
2017-06-12 14:34:41 +00:00
showImmediately: true,
2017-09-17 11:26:35 +00:00
userId: this.userId,
tag: this.tag
2016-11-06 16:44:05 +00:00
}).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
},
2017-08-23 16:21:15 +00:00
fetchFollowers () {
2017-08-21 17:25:01 +00:00
const id = this.userId
this.$store.state.api.backendInteractor.fetchFollowers({ id })
.then((followers) => this.$store.dispatch('addFollowers', { followers }))
},
2017-08-23 16:21:15 +00:00
fetchFriends () {
2017-08-21 17:25:01 +00:00
const id = this.userId
this.$store.state.api.backendInteractor.fetchFriends({ id })
.then((friends) => this.$store.dispatch('addFriends', { friends }))
},
scrollLoad (e) {
let height = Math.max(document.body.offsetHeight, document.body.scrollHeight)
if (this.timeline.loading === false &&
this.$store.state.config.autoLoad &&
this.$el.offsetHeight > 0 &&
(window.innerHeight + window.pageYOffset) >= (height - 750)) {
this.fetchOlderStatuses()
}
2016-10-28 13:40:13 +00:00
}
},
watch: {
newStatusCount (count) {
if (!this.$store.state.config.streaming) {
return
}
if (count > 0) {
// only 'stream' them when you're scrolled to the top
if (window.pageYOffset < 15 && !this.paused) {
this.showNewStatuses()
} else {
this.paused = true
}
}
}
2016-10-28 13:19:42 +00:00
}
2016-10-26 17:03:55 +00:00
}
2016-10-28 13:19:42 +00:00
export default Timeline