Added New Post notification to Timeline

This commit is contained in:
Daniel Supernault 2020-05-24 16:54:47 -06:00
parent 981f5d7ea6
commit a0e7c4d573
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7

View file

@ -1,6 +1,11 @@
<template>
<div class="container" style="">
<div v-if="layout === 'feed'" class="row">
<div v-if="morePostsAvailable == true" class="col-12 mt-5 pt-3 mb-3 fixed-top">
<p class="text-center">
<button class="btn btn-dark px-4 rounded-pill font-weight-bold shadow" @click="syncNewPosts">Load New Posts</button>
</p>
</div>
<div :class="[modes.distractionFree ? 'col-md-8 col-lg-8 offset-md-2 px-0 mb-sm-3 timeline order-2 order-md-1':'col-md-8 col-lg-8 px-0 mb-sm-3 timeline order-2 order-md-1']">
<div v-if="config.features.stories">
<story-component v-if="config.features.stories"></story-component>
@ -74,7 +79,7 @@
</div>
<div class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border">
<div v-if="!modes.distractionFree" class="card-header d-inline-flex align-items-center bg-white">
<div v-if="!modes.distractionFree && status" class="card-header d-inline-flex align-items-center bg-white">
<img v-bind:src="status.account.avatar" width="38px" height="38px" class="cursor-pointer" style="border-radius: 38px;" @click="profileUrl(status)" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
<!-- <div v-if="hasStory" class="has-story has-story-sm cursor-pointer shadow-sm" @click="profileUrl(status)">
<img class="rounded-circle box-shadow" :src="status.account.avatar" width="32px" height="32px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
@ -628,6 +633,12 @@
ctxEmbedShowCaption: true,
ctxEmbedShowLikes: false,
ctxEmbedCompactMode: false,
morePostsAvailable: false,
mpCount: 0,
mpData: false,
mpInterval: 15000,
mpEnabled: false,
mpPoller: null
}
},
watch: {
@ -761,6 +772,7 @@
this.fetchHashtagPosts();
}
// this.fetchStories();
this.rtw();
}).catch(err => {
swal(
'Oops, something went wrong',
@ -1488,7 +1500,66 @@
.then(res => {
this.userStory = res.data;
})
},
// real time watcher
rtw() {
this.mpPoller = setInterval(() => {
let apiUrl = false;
this.mpCount++;
if(this.mpCount > 10) {
this.mpInterval = 30000;
}
if(this.mpCount > 50) {
this.mpInterval = (5 * 60 * 1000);
}
switch(this.scope) {
case 'home':
apiUrl = '/api/pixelfed/v1/timelines/home';
break;
case 'local':
apiUrl = '/api/pixelfed/v1/timelines/public';
break;
case 'network':
apiUrl = '/api/pixelfed/v1/timelines/network';
break;
}
axios.get(apiUrl, {
params: {
max_id: 0,
limit: 20
}
}).then(res => {
let self = this;
let data = res.data.filter(d => {
return d.id > self.min_id
});
let ids = data.map(status => status.id);
let max = Math.max(...ids).toString();
let newer = max > this.min_id;
if(newer) {
this.morePostsAvailable = true;
this.mpData = data;
}
});
}, this.mpInterval);
},
syncNewPosts() {
let self = this;
let data = this.mpData;
let ids = data.map(s => s.id);
this.min_id = Math.max(...ids).toString();
this.max_id = Math.min(...ids).toString();
this.feed.unshift(...data);
this.morePostsAvailable = false;
this.mpData = null;
}
}
},
beforeDestroy () {
clearInterval(this.mpInterval);
},
}
</script>