2018-01-19 05:25:34 +01:00
|
|
|
<:Window bind:online />
|
2018-01-21 23:31:59 +01:00
|
|
|
<div class="timeline" role="feed" aria-label="{{label}}" on:initialized>
|
2018-01-17 06:43:31 +01:00
|
|
|
<VirtualList component="{{StatusListItem}}"
|
2018-01-24 03:15:14 +01:00
|
|
|
:makeProps
|
2018-01-24 03:19:03 +01:00
|
|
|
items="{{statusIds}}"
|
2018-01-21 23:31:59 +01:00
|
|
|
on:scrollToBottom="onScrollToBottom()"
|
|
|
|
shown="{{initialized}}"
|
2018-01-22 01:07:11 +01:00
|
|
|
footerComponent="{{LoadingFooter}}"
|
|
|
|
showFooter="{{initialized && runningUpdate}}"
|
2018-01-24 18:47:31 +01:00
|
|
|
storeKey="{{timeline}}"
|
2018-01-21 23:31:59 +01:00
|
|
|
/>
|
2018-01-15 19:54:02 +01:00
|
|
|
</div>
|
2018-01-17 05:34:09 +01:00
|
|
|
<style>
|
|
|
|
.timeline {
|
2018-01-19 09:51:51 +01:00
|
|
|
min-height: 60vh;
|
2018-01-17 05:34:09 +01:00
|
|
|
}
|
|
|
|
</style>
|
2018-01-09 03:14:21 +01:00
|
|
|
<script>
|
|
|
|
import { store } from '../_utils/store'
|
2018-01-19 08:37:43 +01:00
|
|
|
import { getTimeline } from '../_utils/mastodon/timelines'
|
2018-01-15 19:54:02 +01:00
|
|
|
import StatusListItem from './StatusListItem.html'
|
2018-01-22 01:07:11 +01:00
|
|
|
import LoadingFooter from './LoadingFooter.html'
|
2018-01-15 19:54:02 +01:00
|
|
|
import VirtualList from './VirtualList.html'
|
2018-01-17 09:06:24 +01:00
|
|
|
import { splice, push } from 'svelte-extras'
|
2018-01-19 05:25:34 +01:00
|
|
|
import { mergeStatuses } from '../_utils/statuses'
|
2018-01-17 09:59:15 +01:00
|
|
|
import { mark, stop } from '../_utils/marks'
|
2018-01-19 08:37:43 +01:00
|
|
|
import { timelines } from '../_static/timelines'
|
2018-01-20 03:04:31 +01:00
|
|
|
import { toast } from '../_utils/toast'
|
2018-01-22 02:18:56 +01:00
|
|
|
import { database } from '../_utils/database/database'
|
2018-01-19 10:32:23 +01:00
|
|
|
|
2018-01-24 18:47:31 +01:00
|
|
|
const cachedTimelines = {}
|
|
|
|
|
|
|
|
if (process.browser && process.env.NODE_ENV !== 'production') {
|
|
|
|
window.cachedTimelines = cachedTimelines
|
|
|
|
}
|
|
|
|
|
2018-01-19 05:25:34 +01:00
|
|
|
const FETCH_LIMIT = 20
|
|
|
|
|
2018-01-09 03:14:21 +01:00
|
|
|
export default {
|
2018-01-18 03:35:27 +01:00
|
|
|
async oncreate() {
|
2018-01-24 18:47:31 +01:00
|
|
|
let timeline = this.get('timeline')
|
|
|
|
let cachedStatusIds = cachedTimelines[timeline]
|
|
|
|
if (cachedStatusIds) {
|
|
|
|
this.set({statusIds: cachedStatusIds})
|
|
|
|
} else {
|
|
|
|
this.addStatuses(await this.fetchStatusesAndPossiblyFallBack())
|
|
|
|
}
|
2018-01-21 23:39:11 +01:00
|
|
|
requestAnimationFrame(() => {
|
2018-01-24 18:47:31 +01:00
|
|
|
requestAnimationFrame(() => {
|
2018-01-21 23:39:11 +01:00
|
|
|
this.set({initialized: true})
|
|
|
|
this.fire('initialized')
|
2018-01-24 18:47:31 +01:00
|
|
|
})
|
2018-01-21 23:39:11 +01:00
|
|
|
})
|
2018-01-18 03:35:27 +01:00
|
|
|
},
|
2018-01-24 18:47:31 +01:00
|
|
|
ondestroy() {
|
|
|
|
cachedTimelines[this.get('timeline')] = this.get('statusIds')
|
|
|
|
},
|
2018-01-09 03:14:21 +01:00
|
|
|
data: () => ({
|
2018-01-18 03:35:27 +01:00
|
|
|
StatusListItem: StatusListItem,
|
2018-01-22 01:07:11 +01:00
|
|
|
LoadingFooter: LoadingFooter,
|
2018-01-24 03:15:14 +01:00
|
|
|
statusIds: [],
|
2018-01-19 09:29:45 +01:00
|
|
|
runningUpdate: false,
|
|
|
|
initialized: false
|
2018-01-09 03:14:21 +01:00
|
|
|
}),
|
2018-01-18 03:35:27 +01:00
|
|
|
computed: {
|
2018-01-24 03:15:14 +01:00
|
|
|
makeProps: ($currentInstance) => (statusId) => database.getStatus($currentInstance, statusId),
|
|
|
|
lastStatusId: (statusIds) => statusIds.length && statusIds[statusIds.length - 1],
|
2018-01-22 05:02:32 +01:00
|
|
|
label: (timeline, $currentInstance) => {
|
|
|
|
if (timelines[timeline]) {
|
|
|
|
`${timelines[timeline].label} timeline for ${$currentInstance}`
|
|
|
|
} else if (timeline.startsWith('tag/')) {
|
|
|
|
let tag = timeline.split('/').slice(-1)[0]
|
|
|
|
return `#${tag} timeline for ${$currentInstance}`
|
2018-01-23 06:16:27 +01:00
|
|
|
} else if (timeline.startsWith('account/')) {
|
|
|
|
let account = timeline.split('/').slice(-1)[0]
|
|
|
|
return `Account #${account} on ${$currentInstance}`
|
2018-01-22 05:02:32 +01:00
|
|
|
}
|
|
|
|
}
|
2018-01-18 03:35:27 +01:00
|
|
|
},
|
2018-01-11 05:45:02 +01:00
|
|
|
store: () => store,
|
|
|
|
components: {
|
2018-01-15 19:54:02 +01:00
|
|
|
VirtualList
|
2018-01-15 21:23:28 +01:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
splice: splice,
|
2018-01-17 09:06:24 +01:00
|
|
|
push: push,
|
2018-01-18 03:35:27 +01:00
|
|
|
async onScrollToBottom() {
|
2018-01-19 09:29:45 +01:00
|
|
|
if (!this.get('initialized')) {
|
|
|
|
return
|
|
|
|
}
|
2018-01-18 03:35:27 +01:00
|
|
|
if (this.get('runningUpdate')) {
|
|
|
|
return
|
|
|
|
}
|
2018-01-19 09:29:45 +01:00
|
|
|
mark('onScrollToBottom')
|
2018-01-18 03:35:27 +01:00
|
|
|
this.set({ runningUpdate: true })
|
2018-01-20 03:04:31 +01:00
|
|
|
let newStatuses = await this.fetchStatusesAndPossiblyFallBack()
|
2018-01-18 03:35:27 +01:00
|
|
|
this.set({ runningUpdate: false })
|
2018-01-22 01:07:11 +01:00
|
|
|
this.addStatuses(newStatuses)
|
2018-01-17 17:20:41 +01:00
|
|
|
stop('onScrollToBottom')
|
|
|
|
},
|
2018-01-19 05:25:34 +01:00
|
|
|
addStatuses(newStatuses) {
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
console.log('addStatuses()')
|
|
|
|
}
|
2018-01-24 03:15:14 +01:00
|
|
|
let instanceName = this.store.get('instanceName')
|
|
|
|
let timeline = this.get('timeline')
|
|
|
|
/* no await */ database.insertStatuses(instanceName, timeline, newStatuses)
|
|
|
|
let statusIds = this.get('statusIds')
|
|
|
|
if (!statusIds) {
|
2018-01-19 05:25:34 +01:00
|
|
|
return
|
|
|
|
}
|
2018-01-24 03:15:14 +01:00
|
|
|
let newStatusIds = newStatuses.map(status => status.id)
|
|
|
|
let merged = mergeStatuses(statusIds, newStatusIds)
|
|
|
|
this.set({ statusIds: merged })
|
2018-01-20 03:04:31 +01:00
|
|
|
},
|
|
|
|
async fetchStatusesAndPossiblyFallBack() {
|
|
|
|
let online = this.get('online')
|
|
|
|
let instanceName = this.store.get('currentInstance')
|
|
|
|
let instanceData = this.store.get('currentInstanceData')
|
|
|
|
let timeline = this.get('timeline')
|
|
|
|
let lastStatusId = this.get('lastStatusId')
|
|
|
|
let statuses
|
2018-01-20 22:01:33 +01:00
|
|
|
if (!online) {
|
2018-01-20 03:04:31 +01:00
|
|
|
statuses = await database.getTimeline(instanceName, timeline, lastStatusId, FETCH_LIMIT)
|
|
|
|
} else {
|
|
|
|
try {
|
|
|
|
statuses = await getTimeline(instanceName, instanceData.access_token, timeline, lastStatusId, FETCH_LIMIT)
|
|
|
|
/* no await */ database.insertStatuses(instanceName, timeline, statuses)
|
|
|
|
} catch (e) {
|
|
|
|
console.error(e)
|
|
|
|
toast.say('Internet request failed. Showing offline content.')
|
|
|
|
statuses = await database.getTimeline(instanceName, timeline, lastStatusId, FETCH_LIMIT)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return statuses
|
2018-01-15 21:23:28 +01:00
|
|
|
}
|
2018-01-11 05:45:02 +01:00
|
|
|
}
|
2018-01-09 03:14:21 +01:00
|
|
|
}
|
|
|
|
</script>
|