use real statuses
This commit is contained in:
parent
bfe310fcca
commit
b58033203d
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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() {
|
||||
intersectionObserver.unobserve(this.refs.node)
|
||||
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
|
@ -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}`
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue