Better timeline rendering

Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
syuilo 2018-04-21 15:37:02 +09:00
parent d721a143a8
commit b14d7b45ae
7 changed files with 165 additions and 51 deletions

View file

@ -208,6 +208,7 @@
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-template-compiler": "2.5.16", "vue-template-compiler": "2.5.16",
"vuedraggable": "2.16.0", "vuedraggable": "2.16.0",
"vuex": "^3.0.1",
"web-push": "3.3.0", "web-push": "3.3.0",
"webfinger.js": "2.6.6", "webfinger.js": "2.6.6",
"webpack": "4.6.0", "webpack": "4.6.0",

View file

@ -1,5 +1,6 @@
<template> <template>
<div class="mk-home-timeline"> <div class="mk-home-timeline">
<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
<mk-friends-maker v-if="src == 'home' && alone"/> <mk-friends-maker v-if="src == 'home' && alone"/>
<div class="fetching" v-if="fetching"> <div class="fetching" v-if="fetching">
<mk-ellipsis-icon/> <mk-ellipsis-icon/>
@ -20,6 +21,9 @@
import Vue from 'vue'; import Vue from 'vue';
import { url } from '../../../config'; import { url } from '../../../config';
const fetchLimit = 10;
const displayLimit = 30;
export default Vue.extend({ export default Vue.extend({
props: { props: {
src: { src: {
@ -34,6 +38,7 @@ export default Vue.extend({
moreFetching: false, moreFetching: false,
existMore: false, existMore: false,
notes: [], notes: [],
queue: [],
connection: null, connection: null,
connectionId: null, connectionId: null,
date: null date: null
@ -59,6 +64,10 @@ export default Vue.extend({
: this.src == 'local' : this.src == 'local'
? 'notes/local-timeline' ? 'notes/local-timeline'
: 'notes/global-timeline'; : 'notes/global-timeline';
},
canFetchMore(): boolean {
return !this.moreFetching && !this.fetching && this.notes.length > 0 && this.existMore;
} }
}, },
@ -72,6 +81,9 @@ export default Vue.extend({
this.connection.on('unfollow', this.onChangeFollowing); this.connection.on('unfollow', this.onChangeFollowing);
} }
document.addEventListener('keydown', this.onKeydown);
window.addEventListener('scroll', this.onScroll);
this.fetch(); this.fetch();
}, },
@ -82,19 +94,27 @@ export default Vue.extend({
this.connection.off('unfollow', this.onChangeFollowing); this.connection.off('unfollow', this.onChangeFollowing);
} }
this.stream.dispose(this.connectionId); this.stream.dispose(this.connectionId);
document.removeEventListener('keydown', this.onKeydown);
window.removeEventListener('scroll', this.onScroll);
}, },
methods: { methods: {
isScrollTop() {
return window.scrollY <= 8;
},
fetch(cb?) { fetch(cb?) {
this.queue = [];
this.fetching = true; this.fetching = true;
(this as any).api(this.endpoint, { (this as any).api(this.endpoint, {
limit: 11, limit: fetchLimit + 1,
untilDate: this.date ? this.date.getTime() : undefined, untilDate: this.date ? this.date.getTime() : undefined,
includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes, includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
}).then(notes => { }).then(notes => {
if (notes.length == 11) { if (notes.length == fetchLimit + 1) {
notes.pop(); notes.pop();
this.existMore = true; this.existMore = true;
} }
@ -106,15 +126,17 @@ export default Vue.extend({
}, },
more() { more() {
if (this.moreFetching || this.fetching || this.notes.length == 0 || !this.existMore) return; if (!this.canFetchMore) return;
this.moreFetching = true; this.moreFetching = true;
(this as any).api(this.endpoint, { (this as any).api(this.endpoint, {
limit: 11, limit: fetchLimit + 1,
untilId: this.notes[this.notes.length - 1].id, untilId: this.notes[this.notes.length - 1].id,
includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes, includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
}).then(notes => { }).then(notes => {
if (notes.length == 11) { if (notes.length == fetchLimit + 1) {
notes.pop(); notes.pop();
} else { } else {
this.existMore = false; this.existMore = false;
@ -124,7 +146,30 @@ export default Vue.extend({
}); });
}, },
prependNote(note, silent = false) {
//
if ((this as any).os.isEnableSounds && !silent) {
const sound = new Audio(`${url}/assets/post.mp3`);
sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
sound.play();
}
// Prepent a note
this.notes.unshift(note);
// 稿
if (this.notes.length >= displayLimit) {
this.notes = this.notes.slice(0, displayLimit);
}
},
releaseQueue() {
this.queue.forEach(n => this.prependNote(n, true));
this.queue = [];
},
onNote(note) { onNote(note) {
//#region
const isMyNote = note.userId == (this as any).os.i.id; const isMyNote = note.userId == (this as any).os.i.id;
const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null; const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
@ -139,18 +184,13 @@ export default Vue.extend({
return; return;
} }
} }
//#endregion
// if (this.isScrollTop()) {
if ((this as any).os.isEnableSounds) { this.prependNote(note);
const sound = new Audio(`${url}/assets/post.mp3`); } else {
sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5; this.queue.unshift(note);
sound.play();
} }
this.notes.unshift(note);
const isTop = window.scrollY > 8;
if (isTop) this.notes.pop();
}, },
onChangeFollowing() { onChangeFollowing() {
@ -164,13 +204,41 @@ export default Vue.extend({
warp(date) { warp(date) {
this.date = date; this.date = date;
this.fetch(); this.fetch();
},
onScroll() {
if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) this.more();
} }
if (this.isScrollTop()) {
this.releaseQueue();
}
},
onKeydown(e) {
if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
if (e.which == 84) { // t
this.focus();
}
}
},
} }
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-home-timeline .mk-home-timeline
> .newer-indicator
position -webkit-sticky
position sticky
z-index 100
height 3px
background $theme-color
> .mk-friends-maker > .mk-friends-maker
border-bottom solid 1px #eee border-bottom solid 1px #eee

View file

@ -27,35 +27,12 @@ export default Vue.extend({
}, },
mounted() { mounted() {
document.addEventListener('keydown', this.onKeydown);
window.addEventListener('scroll', this.onScroll);
(this.$refs.tl as any).$once('loaded', () => { (this.$refs.tl as any).$once('loaded', () => {
this.$emit('loaded'); this.$emit('loaded');
}); });
}, },
beforeDestroy() {
document.removeEventListener('keydown', this.onKeydown);
window.removeEventListener('scroll', this.onScroll);
},
methods: { methods: {
onScroll() {
if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) (this.$refs.tl as any).more();
}
},
onKeydown(e) {
if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
if (e.which == 84) { // t
(this.$refs.tl as any).focus();
}
}
},
warp(date) { warp(date) {
(this.$refs.tl as any).warp(date); (this.$refs.tl as any).warp(date);
} }

View file

@ -43,6 +43,8 @@ export default Vue.extend({
XClock, XClock,
}, },
mounted() { mounted() {
this.$store.commit('setUiHeaderHeight', 48);
if ((this as any).os.isSignedIn) { if ((this as any).os.isSignedIn) {
const ago = (new Date().getTime() - new Date((this as any).os.i.lastUsedAt).getTime()) / 1000 const ago = (new Date().getTime() - new Date((this as any).os.i.lastUsedAt).getTime()) / 1000
const isHisasiburi = ago >= 3600; const isHisasiburi = ago >= 3600;

View file

@ -3,6 +3,7 @@
*/ */
import Vue from 'vue'; import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import VModal from 'vue-js-modal'; import VModal from 'vue-js-modal';
import * as TreeView from 'vue-json-tree-view'; import * as TreeView from 'vue-json-tree-view';
@ -23,6 +24,7 @@ switch (lang) {
default: elementLocale = ElementLocaleEn; break; default: elementLocale = ElementLocaleEn; break;
} }
Vue.use(Vuex);
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.use(VModal); Vue.use(VModal);
Vue.use(TreeView); Vue.use(TreeView);
@ -39,6 +41,17 @@ require('./common/views/widgets');
// Register global filters // Register global filters
require('./common/views/filters'); require('./common/views/filters');
const store = new Vuex.Store({
state: {
uiHeaderHeight: 0
},
mutations: {
setUiHeaderHeight(state, height) {
state.uiHeaderHeight = height;
}
}
});
Vue.mixin({ Vue.mixin({
destroyed(this: any) { destroyed(this: any) {
if (this.$el.parentNode) { if (this.$el.parentNode) {
@ -145,6 +158,7 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
}); });
const app = new Vue({ const app = new Vue({
store,
router, router,
created() { created() {
this.$watch('os.i', i => { this.$watch('os.i', i => {

View file

@ -1,5 +1,6 @@
<template> <template>
<div class="mk-timeline"> <div class="mk-timeline">
<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
<mk-friends-maker v-if="alone"/> <mk-friends-maker v-if="alone"/>
<mk-notes :notes="notes"> <mk-notes :notes="notes">
<div class="init" v-if="fetching"> <div class="init" v-if="fetching">
@ -9,7 +10,7 @@
%fa:R comments% %fa:R comments%
%i18n:@empty% %i18n:@empty%
</div> </div>
<button v-if="!fetching && existMore" @click="more" :disabled="moreFetching" slot="tail"> <button v-if="canFetchMore" @click="more" :disabled="moreFetching" slot="tail">
<span v-if="!moreFetching">%i18n:@load-more%</span> <span v-if="!moreFetching">%i18n:@load-more%</span>
<span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span> <span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
</button> </button>
@ -20,7 +21,8 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
const limit = 10; const fetchLimit = 10;
const displayLimit = 30;
export default Vue.extend({ export default Vue.extend({
props: { props: {
@ -36,6 +38,7 @@ export default Vue.extend({
fetching: true, fetching: true,
moreFetching: false, moreFetching: false,
notes: [], notes: [],
queue: [],
existMore: false, existMore: false,
connection: null, connection: null,
connectionId: null connectionId: null
@ -45,6 +48,10 @@ export default Vue.extend({
computed: { computed: {
alone(): boolean { alone(): boolean {
return (this as any).os.i.followingCount == 0; return (this as any).os.i.followingCount == 0;
},
canFetchMore(): boolean {
return !this.moreFetching && !this.fetching && this.notes.length > 0 && this.existMore;
} }
}, },
@ -56,6 +63,8 @@ export default Vue.extend({
this.connection.on('follow', this.onChangeFollowing); this.connection.on('follow', this.onChangeFollowing);
this.connection.on('unfollow', this.onChangeFollowing); this.connection.on('unfollow', this.onChangeFollowing);
window.addEventListener('scroll', this.onScroll);
this.fetch(); this.fetch();
}, },
@ -64,18 +73,25 @@ export default Vue.extend({
this.connection.off('follow', this.onChangeFollowing); this.connection.off('follow', this.onChangeFollowing);
this.connection.off('unfollow', this.onChangeFollowing); this.connection.off('unfollow', this.onChangeFollowing);
(this as any).os.stream.dispose(this.connectionId); (this as any).os.stream.dispose(this.connectionId);
window.removeEventListener('scroll', this.onScroll);
}, },
methods: { methods: {
isScrollTop() {
return window.scrollY <= 8;
},
fetch(cb?) { fetch(cb?) {
this.queue = [];
this.fetching = true; this.fetching = true;
(this as any).api('notes/timeline', { (this as any).api('notes/timeline', {
limit: limit + 1, limit: fetchLimit + 1,
untilDate: this.date ? (this.date as any).getTime() : undefined, untilDate: this.date ? (this.date as any).getTime() : undefined,
includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes, includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
}).then(notes => { }).then(notes => {
if (notes.length == limit + 1) { if (notes.length == fetchLimit + 1) {
notes.pop(); notes.pop();
this.existMore = true; this.existMore = true;
} }
@ -89,12 +105,12 @@ export default Vue.extend({
more() { more() {
this.moreFetching = true; this.moreFetching = true;
(this as any).api('notes/timeline', { (this as any).api('notes/timeline', {
limit: limit + 1, limit: fetchLimit + 1,
untilId: this.notes[this.notes.length - 1].id, untilId: this.notes[this.notes.length - 1].id,
includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes, includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
}).then(notes => { }).then(notes => {
if (notes.length == limit + 1) { if (notes.length == fetchLimit + 1) {
notes.pop(); notes.pop();
this.existMore = true; this.existMore = true;
} else { } else {
@ -105,7 +121,23 @@ export default Vue.extend({
}); });
}, },
prependNote(note) {
// Prepent a note
this.notes.unshift(note);
// 稿
if (this.notes.length >= displayLimit) {
this.notes = this.notes.slice(0, displayLimit);
}
},
releaseQueue() {
this.queue.forEach(n => this.prependNote(n));
this.queue = [];
},
onNote(note) { onNote(note) {
//#region
const isMyNote = note.userId == (this as any).os.i.id; const isMyNote = note.userId == (this as any).os.i.id;
const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null; const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
@ -120,21 +152,39 @@ export default Vue.extend({
return; return;
} }
} }
//#endregion
this.notes.unshift(note); if (this.isScrollTop()) {
this.prependNote(note);
const isTop = window.scrollY > 8; } else {
if (isTop) this.notes.pop(); this.queue.unshift(note);
}
}, },
onChangeFollowing() { onChangeFollowing() {
this.fetch(); this.fetch();
},
onScroll() {
if (this.isScrollTop()) {
this.releaseQueue();
}
} }
} }
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-friends-maker @import '~const.styl'
.mk-timeline
> .newer-indicator
position -webkit-sticky
position sticky
z-index 100
height 3px
background $theme-color
> .mk-friends-maker
margin-bottom 8px margin-bottom 8px
</style> </style>

View file

@ -32,6 +32,8 @@ export default Vue.extend({
}; };
}, },
mounted() { mounted() {
this.$store.commit('setUiHeaderHeight', 48);
if ((this as any).os.isSignedIn) { if ((this as any).os.isSignedIn) {
this.connection = (this as any).os.stream.getConnection(); this.connection = (this as any).os.stream.getConnection();
this.connectionId = (this as any).os.stream.use(); this.connectionId = (this as any).os.stream.use();