70 lines
2.1 KiB
HTML
70 lines
2.1 KiB
HTML
<div class="timeline">
|
|
<VirtualList component="{{StatusListItem}}"
|
|
items="{{keyedStatuses}}"
|
|
on:scrollToBottom="onScrollToBottom()" />
|
|
</div>
|
|
<style>
|
|
.timeline {
|
|
min-height: 50vh;
|
|
}
|
|
</style>
|
|
<script>
|
|
import { store } from '../_utils/store'
|
|
import { getHomeTimeline } from '../_utils/mastodon/oauth'
|
|
import StatusListItem from './StatusListItem.html'
|
|
import VirtualList from './VirtualList.html'
|
|
import { splice, push } from 'svelte-extras'
|
|
import { mark, stop } from '../_utils/marks'
|
|
|
|
export default {
|
|
async oncreate() {
|
|
let instanceName = this.store.get('currentInstance')
|
|
let instanceData = this.store.get('currentInstanceData')
|
|
let statuses = await getHomeTimeline(instanceName, instanceData.access_token, null, 10)
|
|
this.set({
|
|
statuses: statuses,
|
|
})
|
|
},
|
|
data: () => ({
|
|
target: 'home',
|
|
StatusListItem: StatusListItem,
|
|
statuses: [],
|
|
runningUpdate: false
|
|
}),
|
|
computed: {
|
|
keyedStatuses: (statuses) => statuses.map(status => ({
|
|
props: status,
|
|
key: status.id
|
|
})),
|
|
lastStatusId: (statuses) => statuses.length && statuses[statuses.length - 1].id
|
|
},
|
|
store: () => store,
|
|
components: {
|
|
VirtualList
|
|
},
|
|
methods: {
|
|
splice: splice,
|
|
push: push,
|
|
async onScrollToBottom() {
|
|
mark('onScrollToBottom')
|
|
if (this.get('runningUpdate')) {
|
|
return
|
|
}
|
|
this.set({ runningUpdate: true })
|
|
let lastStatusId = this.get('lastStatusId')
|
|
let instanceName = this.store.get('currentInstance')
|
|
let instanceData = this.store.get('currentInstanceData')
|
|
let newStatuses = await getHomeTimeline(instanceName, instanceData.access_token, lastStatusId, 10)
|
|
let statuses = this.get('statuses')
|
|
if (statuses) {
|
|
this.addItems(newStatuses)
|
|
}
|
|
this.set({ runningUpdate: false })
|
|
stop('onScrollToBottom')
|
|
},
|
|
addItems(items) {
|
|
this.splice('statuses', this.get('statuses').length, 0, ...items)
|
|
}
|
|
}
|
|
}
|
|
</script> |