use real statuses

This commit is contained in:
Nolan Lawson 2018-01-17 18:35:27 -08:00
parent bfe310fcca
commit b58033203d
5 changed files with 61 additions and 4849 deletions

View File

@ -46,13 +46,13 @@
</svg>
</button>
</div>
<div class="status-media" style="grid-template-columns: repeat(auto-fit, minmax({{minMediaWidth}}px, 1fr));">
<!--<div class="status-media" style="grid-template-columns: repeat(auto-fit, minmax({{minMediaWidth}}px, 1fr));">
{{#each originalMedia as media}}
<div class="status-media-container">
<img src="{{media.preview_url}}" alt="{{media.description || ''}}"/>
</div>
{{/each}}
</div>
</div>-->
</article>
<style>

View File

@ -1,6 +1,6 @@
<div class="timeline">
<VirtualList component="{{StatusListItem}}"
items="{{statuses}}"
items="{{keyedStatuses}}"
on:scrollToBottom="onScrollToBottom()" />
</div>
<style>
@ -11,25 +11,33 @@
<script>
import { store } from '../_utils/store'
import { getHomeTimeline } from '../_utils/mastodon/oauth'
import fixture from '../_utils/fixture.json'
import StatusListItem from './StatusListItem.html'
import VirtualList from './VirtualList.html'
import { splice, push } from 'svelte-extras'
import { mark, stop } from '../_utils/marks'
let i = -1
const createData = () => fixture.slice(0, 20).map(_ => ({
key: `${++i}`,
props: _
}))
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',
statuses: createData(),
StatusListItem: StatusListItem
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
@ -37,13 +45,21 @@
methods: {
splice: splice,
push: push,
onScrollToBottom() {
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) {
let itemsToAdd = createData()
this.addItems(itemsToAdd)
this.addItems(newStatuses)
}
this.set({ runningUpdate: false })
stop('onScrollToBottom')
},
addItems(items) {

View File

@ -36,10 +36,14 @@
export default {
oncreate() {
let key = this.get('key')
// TODO: implement AsyncLayout
// TODO: implement batchUpdate
// TODO: fix resize on media
onIntersectionCallbacks[key] = entry => {
console.log('onIntersection', key, entry.boundingClientRect.height)
let rect = entry.boundingClientRect
updateItemHeights[key] = rect.height
promise.then(() => {
promise = promise.then(() => {
// update all item heights in one microtask batch for better perf
let updatedKeys = Object.keys(updateItemHeights)
if (!updatedKeys.length) {
@ -57,12 +61,22 @@
updateItemHeights = {}
stop('batch update VirtualListItem')
})
this.set({ unobserved: true })
intersectionObserver.unobserve(this.refs.node)
}
intersectionObserver.observe(this.refs.node)
},
ondestroy() {
let key = this.get('key')
if (!this.get('unobserved')) {
intersectionObserver.unobserve(this.refs.node)
}
delete onIntersectionCallbacks[key]
delete updateItemHeights[key]
},
data: () => ({
unobserved: false
}),
store: () => virtualListStore,
computed: {
'shown': ($itemHeights, key) => $itemHeights[key] > 0

File diff suppressed because it is too large Load Diff

View File

@ -34,8 +34,20 @@ export function getAccessTokenFromAuthCode(instanceName, clientId, clientSecret,
})
}
export function getHomeTimeline(instanceName, accessToken) {
export function getHomeTimeline(instanceName, accessToken, since, limit) {
let url = `https://${instanceName}/api/v1/timelines/home`
let params = {}
if (since) {
params[since] = since
}
if (limit) {
params[limit] = limit
}
url += '?' + paramsString(params)
return get(url, {
'Authorization': `Bearer ${accessToken}`
})