refs #843 Add Mention timeline

2019-03-15 01:02:10 +09:00 · 2019-03-15 01:02:10 +09:00 · b6d3aeaf84
parent 5744e0fac2
commit b6d3aeaf84
13 changed files with 364 additions and 5 deletions
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@ -47,6 +47,7 @@
    "expand": "Expand",
    "home": "Home",
    "notification": "Notification",
+    "mention": "Mention",
    "direct": "Direct messages",
    "favourite": "Favourite",
    "local": "Local timeline",
@ -58,6 +59,7 @@
  "header_menu": {
    "home": "Home",
    "notification": "Notification",
+    "mention": "Mention",
    "favourite": "Favourite",
    "local": "Local timeline",
    "public": "Public timeline",
--- a/src/main/index.js
+++ b/src/main/index.js
@ -413,6 +413,11 @@ ipcMain.on('start-user-streaming', (event, obj) => {
        },
        (notification) => {
          event.sender.send('notification-start-user-streaming', notification)
+          // Does not exist a endpoint for only mention. And mention is a part of notification.
+          // So we have to get mention from notification.
+          if (notification.type === 'mention') {
+            event.sender.send('mention-start-user-streaming', notification)
+          }
          if (process.platform === 'darwin') {
            app.dock.setBadge('•')
          }
--- a/src/renderer/components/TimelineSpace/Contents/Mentions.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Mentions.vue
@ -0,0 +1,198 @@
+<template>
+<div id="mentions" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
+  <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
+  <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
+  </div>
+  <transition-group name="timeline" tag="div">
+    <div class="mentions" v-for="message in mentions" :key="message.id">
+      <notification
+        :message="message"
+        :filter="filter"
+        :focused="message.id === focusedId"
+        :overlaid="modalOpened"
+        v-on:update="updateToot"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @focusRight="focusSidebar"
+        @selectNotification="focusNotification(message)"
+        >
+      </notification>
+    </div>
+  </transition-group>
+  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
+  </div>
+  <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
+    <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
+    </el-button>
+  </div>
+</div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import Notification from '~/src/renderer/components/molecules/Notification'
+import scrollTop from '../../utils/scroll'
+import reloadable from '~/src/renderer/components/mixins/reloadable'
+import { Event } from '~/src/renderer/components/event'
+
+export default {
+  name: 'mentions',
+  components: { Notification },
+  mixins: [reloadable],
+  data () {
+    return {
+      focusedId: null
+    }
+  },
+  computed: {
+    ...mapState('App', {
+      backgroundColor: state => state.theme.background_color
+    }),
+    ...mapState('TimelineSpace/HeaderMenu', {
+      startReload: state => state.reload
+    }),
+    ...mapState('TimelineSpace/Contents/SideBar', {
+      openSideBar: state => state.openSideBar
+    }),
+    ...mapState('TimelineSpace/Contents/Mentions', {
+      mentions: state => state.mentions,
+      lazyLoading: state => state.lazyLoading,
+      heading: state => state.heading,
+      unread: state => state.unreadMentions,
+      filter: state => state.filter
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ]),
+    shortcutEnabled: function () {
+      if (this.modalOpened) {
+        return false
+      }
+      if (!this.focusedId) {
+        return true
+      }
+      // Sometimes toots are deleted, so perhaps focused toot don't exist.
+      const currentIndex = this.mentions.findIndex(toot => this.focusedId === toot.id)
+      return currentIndex === -1
+    }
+  },
+  mounted () {
+    this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
+    document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
+    Event.$on('focus-timeline', () => {
+      // If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
+      const previousFocusedId = this.focusedId
+      this.focusedId = 0
+      this.$nextTick(function () {
+        this.focusedId = previousFocusedId
+      })
+    })
+  },
+  beforeUpdate () {
+    if (this.$store.state.TimelineSpace.SideMenu.unreadMentions && this.heading) {
+      this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
+    }
+  },
+  beforeDestroy () {
+    Event.$off('focus-timeline')
+  },
+  destroyed () {
+    this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
+    this.$store.commit('TimelineSpace/Contents/Mentions/mergeMentions')
+    this.$store.commit('TimelineSpace/Contents/Mentions/archiveMentions')
+    if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
+      document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
+      document.getElementById('scrollable').scrollTop = 0
+    }
+  },
+  watch: {
+    startReload: function (newState, oldState) {
+      if (!oldState && newState) {
+        this.reload()
+          .finally(() => {
+            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+          })
+      }
+    },
+    focusedId: function (newState, oldState) {
+      if (newState && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', false)
+      } else if (newState === null && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Mentions/mergeMentions')
+      }
+    }
+  },
+  methods: {
+    onScroll (event) {
+      // for lazyLoading
+      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('mentions').clientHeight - 10) && !this.lazyloading) {
+        this.$store.dispatch('TimelineSpace/Contents/Mentions/lazyFetchMentions', this.mentions[this.mentions.length - 1])
+          .catch(() => {
+            this.$message({
+              message: this.$t('message.timeline_fetch_error'),
+              type: 'error'
+            })
+          })
+      }
+      // for unread control
+      if ((event.target.scrollTop > 10) && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', false)
+      } else if ((event.target.scrollTop <= 10) && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Mentions/mergeMentions')
+      }
+    },
+    async reload () {
+      this.$store.commit('TimelineSpace/changeLoading', true)
+      try {
+        await this.reloadable()
+      } finally {
+        this.$store.commit('TimelineSpace/changeLoading', false)
+      }
+    },
+    updateToot (message) {
+      this.$store.commit('TimelineSpace/Contents/Mentions/updateToot', message)
+    },
+    upper () {
+      scrollTop(
+        document.getElementById('scrollable'),
+        0
+      )
+      this.focusedId = null
+    },
+    focusNext () {
+      const currentIndex = this.mentions.findIndex(toot => this.focusedId === toot.id)
+      if (currentIndex === -1) {
+        this.focusedId = this.mentions[0].id
+      } else if (currentIndex < this.mentions.length) {
+        this.focusedId = this.mentions[currentIndex + 1].id
+      }
+    },
+    focusPrev () {
+      const currentIndex = this.mentions.findIndex(toot => this.focusedId === toot.id)
+      if (currentIndex === 0) {
+        this.focusedId = null
+      } else if (currentIndex > 0) {
+        this.focusedId = this.mentions[currentIndex - 1].id
+      }
+    },
+    focusNotification (message) {
+      this.focusedId = message.id
+    },
+    focusSidebar () {
+      Event.$emit('focus-sidebar')
+    },
+    handleKey (event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.focusedId = this.mentions[0].id
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
@ -10,6 +10,7 @@
        :filter="filter"
        :focused="message.id === focusedId"
        :overlaid="modalOpened"
+        v-on:update="updateToot"
        @focusNext="focusNext"
        @focusPrev="focusPrev"
        @focusRight="focusSidebar"
@ -148,6 +149,9 @@ export default {
        this.$store.commit('TimelineSpace/changeLoading', false)
      }
    },
+    updateToot (message) {
+      this.$store.commit('TimelineSpace/Contents/Notifications/updateToot', message)
+    },
    upper () {
      scrollTop(
        document.getElementById('scrollable'),
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@ -103,6 +103,9 @@ export default {
        case 'favourites':
          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.favourite'))
          break
+        case 'mentions':
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.mention'))
+          break
        case 'local':
          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.local'))
          break
@ -148,6 +151,7 @@ export default {
      switch (this.$route.name) {
        case 'home':
        case 'notifications':
+        case 'mentions':
        case 'favourites':
        case 'local':
        case 'public':
@ -164,6 +168,7 @@ export default {
      switch (this.$route.name) {
        case 'home':
        case 'notifications':
+        case 'mentiont':
        case 'favourites':
        case 'local':
        case 'public':
@ -185,6 +190,9 @@ export default {
        case 'notifications':
          this.filter = this.$store.state.TimelineSpace.Contents.Notifications.filter
          break
+        case 'mentions':
+          this.filter = this.$store.state.TimelineSpace.Contents.Mentions.filter
+          break
        case 'favourites':
          this.filter = this.$store.state.TimelineSpace.Contents.Favourites.filter
          break
@ -217,6 +225,9 @@ export default {
        case 'notifications':
          this.$store.commit('TimelineSpace/Contents/Notifications/changeFilter', filter)
          break
+        case 'mentions':
+          this.$store.commit('TimelineSpace/Contents/Mentions/changeFilter', filter)
+          break
        case 'favourites':
          this.$store.commit('TimelineSpace/Contents/Favourites/changeFilter', filter)
          break
@ -244,6 +255,7 @@ export default {
      switch (this.$route.name) {
        case 'home':
        case 'notifications':
+        case 'mentions':
        case 'favourites':
        case 'local':
        case 'public':
--- a/src/renderer/components/TimelineSpace/SideMenu.vue
+++ b/src/renderer/components/TimelineSpace/SideMenu.vue
@ -52,9 +52,11 @@
        <el-badge is-dot :hidden="!unreadNotifications">
        </el-badge>
      </el-menu-item>
-      <el-menu-item :index="`/${id()}/favourites`" role="menuitem" :title="$t('side_menu.favourite')">
-        <icon name="star"></icon>
-        <span>{{ $t("side_menu.favourite") }}</span>
+      <el-menu-item :index="`/${id()}/mentions`" role="menuitem" :title="$t('side_menu.mention')">
+        <icon name="at"></icon>
+        <span>{{ $t("side_menu.mention") }}</span>
+        <el-badge is-dot :hidden="!unreadMentions">
+        </el-badge>
      </el-menu-item>
      <el-menu-item :index="`/${id()}/direct-messages`" role="menuitem">
        <icon name="envelope"></icon>
@ -62,6 +64,10 @@
        <el-badge is-dot :hidden="!unreadDirectMessagesTimeline">
        </el-badge>
      </el-menu-item>
+      <el-menu-item :index="`/${id()}/favourites`" role="menuitem" :title="$t('side_menu.favourite')">
+        <icon name="star"></icon>
+        <span>{{ $t("side_menu.favourite") }}</span>
+      </el-menu-item>
      <el-menu-item :index="`/${id()}/local`" role="menuitem" :title="$t('side_menu.local')">
        <icon name="users"></icon>
        <span>{{ $t("side_menu.local") }}</span>
@ -118,6 +124,7 @@ export default {
    ...mapState('TimelineSpace/SideMenu', {
      unreadHomeTimeline: state => state.unreadHomeTimeline,
      unreadNotifications: state => state.unreadNotifications,
+      unreadMentions: state => state.unreadMentions,
      unreadLocalTimeline: state => state.unreadLocalTimeline,
      unreadDirectMessagesTimeline: state => state.unreadDirectMessagesTimeline,
      unreadPublicTimeline: state => state.unreadPublicTimeline,
--- a/src/renderer/components/molecules/Notification.vue
+++ b/src/renderer/components/molecules/Notification.vue
@ -26,6 +26,8 @@
            :filter="filter"
            :focused="focused"
            :overlaid="overlaid"
+            v-on:update="updateToot"
+            v-on:delete="deleteToot"
            @focusNext="$emit('focusNext')"
            @focusPrev="$emit('focusPrev')"
            @focusRight="$emit('focusRight')"
@ -72,7 +74,15 @@ export default {
      default: false
    }
  },
-  components: { Favourite, Follow, Mention, Reblog }
+  components: { Favourite, Follow, Mention, Reblog },
+  methods: {
+    updateToot (message) {
+      return this.$emit('update', message)
+    },
+    deleteToot (message) {
+      return this.$emit('delete', message)
+    }
+  }
 }
 </script>

--- a/src/renderer/components/molecules/Notification/Mention.vue
+++ b/src/renderer/components/molecules/Notification/Mention.vue
@ -6,6 +6,7 @@
      :focused="focused"
      :overlaid="overlaid"
      v-on:update="updateToot"
+      v-on:delete="deleteToot"
      @focusNext="$emit('focusNext')"
      @focusPrev="$emit('focusPrev')"
      @focusRight="$emit('focusRight')"
@ -41,7 +42,10 @@ export default {
  components: { Toot },
  methods: {
    updateToot (message) {
-      this.$store.commit('TimelineSpace/Contents/Notifications/updateToot', message)
+      return this.$emit('update', message)
+    },
+    deleteToot (message) {
+      return this.$emit('delete', message)
    }
  }
 }
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@ -82,6 +82,11 @@ export default new Router({
              name: 'notifications',
              component: require('@/components/TimelineSpace/Contents/Notifications').default
            },
+            {
+              path: 'mentions',
+              name: 'mentions',
+              component: require('@/components/TimelineSpace/Contents/Mentions').default
+            },
            {
              path: 'favourites',
              name: 'favourites',
--- a/src/renderer/store/TimelineSpace.js
+++ b/src/renderer/store/TimelineSpace.js
@ -189,6 +189,7 @@ const TimelineSpace = {
    async fetchContentsTimelines ({ dispatch, state }, account) {
      await dispatch('TimelineSpace/Contents/Home/fetchTimeline', account, { root: true })
      await dispatch('TimelineSpace/Contents/Notifications/fetchNotifications', account, { root: true })
+      await dispatch('TimelineSpace/Contents/Mentions/fetchMentions', {}, { root: true })
      if (state.unreadNotification.direct) {
        await dispatch('TimelineSpace/Contents/DirectMessages/fetchTimeline', {}, { root: true })
      }
@ -205,6 +206,7 @@ const TimelineSpace = {
      commit('TimelineSpace/Contents/DirectMessages/clearTimeline', {}, { root: true })
      commit('TimelineSpace/Contents/Notifications/clearNotifications', {}, { root: true })
      commit('TimelineSpace/Contents/Public/clearTimeline', {}, { root: true })
+      commit('TimelineSpace/Contents/Mentions/clearMentions', {}, { root: true })
    },
    bindStreamings ({ dispatch, state }, account) {
      dispatch('bindUserStreaming', account)
@ -267,6 +269,13 @@ const TimelineSpace = {
        }
        commit('TimelineSpace/SideMenu/changeUnreadNotifications', true, { root: true })
      })
+      ipcRenderer.on('mention-start-user-streaming', (event, mention) => {
+        commit('TimelineSpace/Contents/Mentions/appendMentions', mention, { root: true })
+        if (rootState.TimelineSpace.Contents.Mentions.heading && Math.random() > 0.8) {
+          commit('TimelineSpace/Contents/Mentions/archiveMentions', null, { root: true })
+        }
+        commit('TimelineSpace/SideMenu/changeUnreadMentions', true, { root: true })
+      })
    },
    startUserStreaming ({ state }) {
      return new Promise((resolve, reject) => {
--- a/src/renderer/store/TimelineSpace/Contents.js
+++ b/src/renderer/store/TimelineSpace/Contents.js
@ -8,6 +8,7 @@ import Search from './Contents/Search'
 import Lists from './Contents/Lists'
 import Hashtag from './Contents/Hashtag'
 import DirectMessages from './Contents/DirectMessages'
+import Mentions from './Contents/Mentions'

 const Contents = {
  namespaced: true,
@ -18,6 +19,7 @@ const Contents = {
    Favourites,
    Local,
    DirectMessages,
+    Mentions,
    Public,
    Search,
    Lists,
--- a/src/renderer/store/TimelineSpace/Contents/Mentions.js
+++ b/src/renderer/store/TimelineSpace/Contents/Mentions.js
@ -0,0 +1,96 @@
+import Mastodon from 'megalodon'
+
+const Mentions = {
+  namespaced: true,
+  state: {
+    lazyLoading: false,
+    heading: true,
+    mentions: [],
+    unreadMentions: [],
+    filter: ''
+  },
+  mutations: {
+    changeLazyLoading (state, value) {
+      state.lazyLoading = value
+    },
+    changeHeading (state, value) {
+      state.heading = value
+    },
+    appendMentions (state, update) {
+      if (state.heading) {
+        state.mentions = [update].concat(state.mentions)
+      } else {
+        state.unreadMentions = [update].concat(state.unreadMentions)
+      }
+    },
+    updateMentions (state, messages) {
+      state.mentions = messages
+    },
+    mergeMentions (state) {
+      state.mentions = state.unreadMentions.slice(0, 80).concat(state.mentions)
+      state.unreadMentions = []
+    },
+    insertMentions (state, messages) {
+      state.mentions = state.mentions.concat(messages)
+    },
+    archiveMentions (state) {
+      state.mentions = state.mentions.slice(0, 40)
+    },
+    clearMentions (state) {
+      state.mentions = []
+      state.unreadMentions = []
+    },
+    updateToot (state, message) {
+      console.log(message)
+      state.mentions = state.mentions.map((mention) => {
+        if (mention.type === 'mention' && mention.status.id === message.id) {
+          const status = {
+            status: message
+          }
+          return Object.assign(mention, status)
+        } else {
+          return mention
+        }
+      })
+    },
+    changeFilter (state, filter) {
+      state.filter = filter
+    }
+  },
+  actions: {
+    fetchMentions ({ state, commit, rootState }) {
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.get('/notifications', { limit: 30, exclude_types: ['follow', 'favourite', 'reblog'] })
+        .then(res => {
+          commit('updateMentions', res.data)
+          return res.data
+        })
+    },
+    lazyFetchMentions ({ state, commit, rootState }, last) {
+      if (last === undefined || last === null) {
+        return Promise.resolve(null)
+      }
+      if (state.lazyLoading) {
+        return Promise.resolve(null)
+      }
+      commit('changeLazyLoading', true)
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.get('/notifications', { max_id: last.id, limit: 30, exclude_types: ['follow', 'favourite', 'reblog'] })
+        .then(res => {
+          commit('insertMentions', res.data)
+          return res.data
+        })
+        .finally(() => {
+          commit('changeLazyLoading', false)
+        })
+    }
+  }
+}
+
+export default Mentions
--- a/src/renderer/store/TimelineSpace/SideMenu.js
+++ b/src/renderer/store/TimelineSpace/SideMenu.js
@ -6,6 +6,7 @@ const SideMenu = {
  state: {
    unreadHomeTimeline: false,
    unreadNotifications: false,
+    unreadMentions: false,
    unreadLocalTimeline: false,
    unreadDirectMessagesTimeline: false,
    unreadPublicTimeline: false,
@ -20,6 +21,9 @@ const SideMenu = {
    changeUnreadNotifications (state, value) {
      state.unreadNotifications = value
    },
+    changeUnreadMentions (state, value) {
+      state.unreadMentions = value
+    },
    changeUnreadLocalTimeline (state, value) {
      state.unreadLocalTimeline = value
    },
@ -55,6 +59,7 @@ const SideMenu = {
    clearUnread ({ commit }) {
      commit('changeUnreadHomeTimeline', false)
      commit('changeUnreadNotifications', false)
+      commit('changeUnreadMentions', false)
      commit('changeUnreadLocalTimeline', false)
      commit('changeUnreadDirectMessagesTimeline', false)
      commit('changeUnreadPublicTimeline', false)