Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

refs #1804 Add posts and replies column under account timeline

This commit is contained in:
AkiraFukushima 2020-10-25 19:53:45 +09:00
parent 167095bc7e
commit 68686d7564
8 changed files with 275 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -181,7 +181,7 @@
"emojilib": "^2.4.0",
"i18next": "^19.6.3",
"lodash": "^4.17.20",
"megalodon": "3.3.0",
"megalodon": "3.3.1",
"moment": "^2.28.0",
"mousetrap": "^1.6.5",
"nedb": "^1.8.0",

6
src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue
View File

@ -2,7 +2,7 @@
<div class="tabs">
<el-tabs v-model="activeName" @tab-click="handleClick" stretch>
<el-tab-pane label="Posts" name="posts"><Posts :account="account" /></el-tab-pane>
<el-tab-pane label="Posts and replies" name="posts_and_replies">Posts and replies</el-tab-pane>
<el-tab-pane label="Posts and replies" name="posts_and_replies"><PostsAndReplies :account="account" /></el-tab-pane>
<el-tab-pane label="Media" name="media">Media</el-tab-pane>
</el-tabs>
</div>
@ -10,12 +10,14 @@
<script>
import Posts from './Timeline/Posts'
import PostsAndReplies from './Timeline/PostsAndReplies'
export default {
name: 'timeline',
props: ['account'],
components: {
Posts
Posts,
PostsAndReplies
},
data() {
return {

148
src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<div id="timeline">
<DynamicScroller :items="timeline" :min-item-size="60" class="scroller" page-mode>
<template v-slot="{ item, index, active }">
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index">
<toot
:message="item"
:key="item.id"
:focused="item.uri + item.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusLeft="focusTimeline"
@selectToot="focusToot(item)"
>
</toot>
</DynamicScrollerItem>
</template>
</DynamicScroller>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import Toot from '~/src/renderer/components/organisms/Toot'
import { Event } from '~/src/renderer/components/event'
export default {
name: 'posts-and-replies',
props: ['account'],
components: { Toot },
data() {
return {
focusedId: null
}
},
computed: {
...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies', {
timeline: state => state.timeline,
lazyLoading: state => state.lazyLoading
}),
...mapState('App', {
backgroundColor: state => state.theme.background_color
}),
...mapGetters('TimelineSpace/Modals', ['modalOpened'])
},
created() {
this.load()
},
mounted() {
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/clearTimeline')
document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
Event.$on('focus-sidebar', () => {
this.focusedId = 0
this.$nextTick(function () {
this.focusedId = this.timeline[0].uri + this.timeline[0].id
})
})
},
beforeDestroy() {
Event.$emit('focus-timeline')
Event.$off('focus-sidebar')
},
destroyed() {
if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
}
},
watch: {
account: function (_newAccount, _oldAccount) {
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/clearTimeline')
this.load()
}
},
methods: {
load() {
this.$store
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/fetchTimeline', this.account)
.catch(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
},
updateToot(message) {
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/updateToot', message)
},
deleteToot(message) {
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/deleteToot', message)
},
onScroll(event) {
// for lazyLoading
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
!this.lazyloading
) {
this.$store
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/lazyFetchTimeline', {
account: this.account,
status: this.timeline[this.timeline.length - 1]
})
.catch(err => {
console.error(err)
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
}
},
focusNext() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === -1) {
this.focusedId = this.timeline[0].uri + this.timeline[0].id
} else if (currentIndex < this.timeline.length - 1) {
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
}
},
focusPrev() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex > 0) {
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
}
},
focusToot(message) {
this.focusedId = message.uri + message.id
},
focusTimeline() {
this.focusedId = 0
Event.$emit('focus-timeline')
}
}
}
</script>
<style lang="scss" scoped>
.loading-card {
height: 60px;
}
.loading-card:empty {
height: 0;
}
</style>

3
src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
View File

@ -127,7 +127,8 @@ const actions: ActionTree<AccountProfileState, RootState> = {
commit(MUTATION_TYPES.CHANGE_LOADING, true)
Promise.all([
dispatch('fetchRelationship', state.account),
dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/fetchTimeline', state.account, { root: true }),
dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/fetchTimeline', state.account, { root: true }),
dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/fetchTimeline', state.account, { root: true }),
dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchFollowers', state.account, { root: true }),
dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchFollows', state.account, { root: true })
]).finally(() => {

5
src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.ts
View File

@ -2,11 +2,13 @@ import { Module } from 'vuex'
import { RootState } from '@/store'
import Posts, { PostsState } from './Timeline/Posts'
import PostsAndReplies, { PostsAndRepliesState } from './Timeline/PostsAndReplies'
export type TimelineState = {}
type TimelineModule = {
Posts: PostsState
PostsAndReplies: PostsAndRepliesState
}
export type TimelineModuleState = TimelineModule & TimelineState
@ -16,7 +18,8 @@ const state = (): TimelineState => ({})
const Timeline: Module<TimelineState, RootState> = {
namespaced: true,
modules: {
Posts
Posts,
PostsAndReplies
},
state: state
}

2
src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.ts
View File

@ -91,7 +91,7 @@ const actions: ActionTree<PostsState, RootState> = {
rootState.TimelineSpace.account.accessToken,
rootState.App.userAgent
)
const pinned = await client.getAccountStatuses(account.id, { pinned: true, limit: 10 })
const pinned = await client.getAccountStatuses(account.id, { pinned: true, limit: 10, exclude_replies: true })
commit(MUTATION_TYPES.UPDATE_PINNED_TOOTS, pinned.data)
const res = await client.getAccountStatuses(account.id, { limit: 40, pinned: false })
commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false, { root: true })

111
src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.ts Normal file
View File

@ -0,0 +1,111 @@
import generator, { Entity } from 'megalodon'
import { Module, MutationTree, ActionTree } from 'vuex'
import { RootState } from '@/store'
import { LoadPositionWithAccount } from '@/types/loadPosition'
export type PostsAndRepliesState = {
timeline: Array<Entity.Status>
lazyLoading: boolean
}
const state = (): PostsAndRepliesState => ({
timeline: [],
lazyLoading: false
})
export const MUTATION_TYPES = {
UPDATE_TIMELINE: 'updateTimeline',
INSERT_TIMELINE: 'insertTimeline',
CHANGE_LAZY_LOADING: 'changeLazyLoading',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot'
}
const mutations: MutationTree<PostsAndRepliesState> = {
[MUTATION_TYPES.UPDATE_TIMELINE]: (state, timeline: Array<Entity.Status>) => {
state.timeline = timeline
},
[MUTATION_TYPES.INSERT_TIMELINE]: (state, message: Array<Entity.Status>) => {
state.timeline = state.timeline.concat(message)
},
[MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
state.lazyLoading = value
},
[MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
// Replace target message in timeline
state.timeline = state.timeline.map(toot => {
if (toot.id === message.id) {
return message
} else if (toot.reblog !== null && toot.reblog.id === message.id) {
// When user reblog/favourite a reblogged toot, target message is a original toot.
// So, a message which is received now is original toot.
const reblog = {
reblog: message
}
return Object.assign(toot, reblog)
} else {
return toot
}
})
},
[MUTATION_TYPES.DELETE_TOOT]: (state, message: Entity.Status) => {
state.timeline = state.timeline.filter(toot => {
if (toot.reblog !== null && toot.reblog.id === message.id) {
return false
} else {
return toot.id !== message.id
}
})
}
}
const actions: ActionTree<PostsAndRepliesState, RootState> = {
fetchTimeline: async ({ commit, rootState }, account: Account) => {
commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true, { root: true })
const client = generator(
rootState.TimelineSpace.sns,
rootState.TimelineSpace.account.baseURL,
rootState.TimelineSpace.account.accessToken,
rootState.App.userAgent
)
const res = await client.getAccountStatuses(account.id, { limit: 40, pinned: false })
commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false, { root: true })
commit(MUTATION_TYPES.UPDATE_TIMELINE, res.data)
return res.data
},
lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithAccount): Promise<null> => {
if (state.lazyLoading) {
return Promise.resolve(null)
}
commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, true)
const client = generator(
rootState.TimelineSpace.sns,
rootState.TimelineSpace.account.baseURL,
rootState.TimelineSpace.account.accessToken,
rootState.App.userAgent
)
try {
const res = await client.getAccountStatuses(loadPosition.account.id, {
max_id: loadPosition.status.id,
limit: 40,
pinned: false
})
commit(MUTATION_TYPES.INSERT_TIMELINE, res.data)
} finally {
commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, false)
}
return null
},
clearTimeline: ({ commit }) => {
commit(MUTATION_TYPES.UPDATE_TIMELINE, [])
}
}
const PostsAndReplies: Module<PostsAndRepliesState, RootState> = {
namespaced: true,
state: state,
mutations: mutations,
actions: actions
}
export default PostsAndReplies

8
yarn.lock
View File

@ -8530,10 +8530,10 @@ media-typer@0.3.0:
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
megalodon@3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/megalodon/-/megalodon-3.3.0.tgz#d8b6aef2858c26196fec9bc8d8e8ee976d5e944a"
integrity sha512-YDspzWuJ6lqsxaCoEaE4bILNrK8nuk+7rDd+ythNoBcVksJ/2SFqSIeRdkIGPchc7VfKpCn1vpe8URx9FrPnuw==
megalodon@3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/megalodon/-/megalodon-3.3.1.tgz#0e62c006049790269b0d6ab6ea8f6ca919b4a447"
integrity sha512-vdCW6xCc0yp47eZ8SLrTzQKACoIzd3LnYEk62NSyHUzTzpMP6N5s0BuTfBAWnSn8m6Zx1q6865rNp/tBrKTpww==
dependencies:
"@types/oauth" "^0.9.0"
"@types/ws" "^7.2.0"