yumechi-no-kuni/src/client/app/common/views/deck/deck.list-tl.vue
2019-04-08 14:17:44 +09:00

95 lines
1.8 KiB
Vue

<template>
<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
</template>
<script lang="ts">
import Vue from 'vue';
import XNotes from './deck.notes.vue';
const fetchLimit = 10;
export default Vue.extend({
components: {
XNotes
},
props: {
list: {
type: Object,
required: true
},
mediaOnly: {
type: Boolean,
required: false,
default: false
}
},
data() {
return {
connection: null,
makePromise: cursor => this.$root.api('notes/user-list-timeline', {
listId: this.list.id,
limit: fetchLimit + 1,
untilId: cursor ? cursor : undefined,
withFiles: this.mediaOnly,
includeMyRenotes: this.$store.state.settings.showMyRenotes,
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
return {
notes: notes,
more: true
};
} else {
return {
notes: notes,
more: false
};
}
})
};
},
watch: {
mediaOnly() {
this.$refs.timeline.reload();
}
},
mounted() {
if (this.connection) this.connection.dispose();
this.connection = this.$root.stream.connectToChannel('userList', {
listId: this.list.id
});
this.connection.on('note', this.onNote);
this.connection.on('userAdded', this.onUserAdded);
this.connection.on('userRemoved', this.onUserRemoved);
},
beforeDestroy() {
this.connection.dispose();
},
methods: {
onNote(note) {
if (this.mediaOnly && note.files.length == 0) return;
(this.$refs.timeline as any).prepend(note);
},
onUserAdded() {
this.$refs.timeline.reload();
},
onUserRemoved() {
this.$refs.timeline.reload();
},
focus() {
this.$refs.timeline.focus();
}
}
});
</script>