Merge pull request 'add bubble timeline' (#53) from bubble-keikaku into develop

Reviewed-on: AkkomaGang/pleroma-fe#53

src/boot/routes.js

@@ -2,6 +2,7 @@ import PublicTimeline from 'components/public_timeline/public_timeline.vue'
 import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
 import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
 import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
+import BubbleTimeline from 'components/bubble_timeline/bubble_timeline.vue'
 import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue'
 import ConversationPage from 'components/conversation-page/conversation-page.vue'
 import Interactions from 'components/interactions/interactions.vue'
@@ -42,6 +43,7 @@ export default (store) => {
     },
     { name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
     { name: 'public-timeline', path: '/main/public', component: PublicTimeline },
+    { name: 'bubble-timeline', path: '/main/bubble', component: BubbleTimeline },
     { name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute },
     { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
     { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },

src/components/bubble_timeline/bubble_timeline.js

@@ -0,0 +1,18 @@
+import Timeline from '../timeline/timeline.vue'
+const PublicTimeline = {
+  components: {
+    Timeline
+  },
+  computed: {
+    timeline () { return this.$store.state.statuses.timelines.bubble }
+  },
+  created () {
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'bubble' })
+  },
+  unmounted () {
+    this.$store.dispatch('stopFetchingTimeline', 'bubble')
+  }
+
+}
+
+export default PublicTimeline

src/components/bubble_timeline/bubble_timeline.vue

@@ -0,0 +1,9 @@
+<template>
+  <Timeline
+    :title="$t('nav.bubble_timeline')"
+    :timeline="timeline"
+    :timeline-name="'bubble'"
+  />
+</template>
+
+<script src="./bubble_timeline.js"></script>

src/components/timeline_menu/timeline_menu.js

@@ -15,7 +15,8 @@ export const timelineNames = () => {
     'bookmarks': 'nav.bookmarks',
     'dms': 'nav.dms',
     'public-timeline': 'nav.public_tl',
-    'public-external-timeline': 'nav.twkn'
+    'public-external-timeline': 'nav.twkn',
+    'bubble-timeline': 'nav.bubble_timeline'
   }
 }
 

src/components/timeline_menu/timeline_menu.vue

@@ -135,6 +135,7 @@
   a {
     display: block;
     padding: 0.6em 0.65em;
+    padding-bottom: 0;
 
     &:hover {
       background-color: $fallback--lightBg;

src/components/timeline_menu/timeline_menu_content.js

@@ -5,7 +5,8 @@ import {
   faGlobe,
   faBookmark,
   faEnvelope,
-  faHome
+  faHome,
+  faCircle
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -13,7 +14,8 @@ library.add(
   faGlobe,
   faBookmark,
   faEnvelope,
-  faHome
+  faHome,
+  faCircle
 )
 
 const TimelineMenuContent = {

src/components/timeline_menu/timeline_menu_content.vue

@@ -11,6 +11,20 @@
           icon="home"
         />{{ $t("nav.home_timeline") }}
       </router-link>
+      <span class="timeline-desc">{{ $t("nav.home_timeline_description") }}</span>
+    </li>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'bubble-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="circle"
+        />{{ $t("nav.bubble_timeline") }}
+      </router-link>
+      <span class="timeline-desc">{{ $t("nav.bubble_timeline_description") }}</span>
     </li>
     <li v-if="currentUser || !privateMode">
       <router-link
@@ -23,6 +37,7 @@
           icon="users"
         />{{ $t("nav.public_tl") }}
       </router-link>
+      <span class="timeline-desc">{{ $t("nav.public_timeline_description") }}</span>
     </li>
     <li v-if="federating && (currentUser || !privateMode)">
       <router-link
@@ -35,6 +50,7 @@
           icon="globe"
         />{{ $t("nav.twkn") }}
       </router-link>
+      <span class="timeline-desc">{{ $t("nav.twkn_timeline_description") }}</span>
     </li>
     <li v-if="currentUser">
       <router-link
@@ -64,3 +80,15 @@
 </template>
 
 <script src="./timeline_menu_content.js" ></script>
+
+<style lang="scss">
+@import "../../_variables.scss";
+.timeline-desc {
+  text-decoration: none;
+  color: var(--text, $fallback--text);
+  padding-left: 1em;
+  display: block;
+  background-color: scale(var(--bg, $fallback--bg), 0.1);
+  padding-bottom: 0.4em;
+}
+</style>

src/i18n/en.json

@@ -158,9 +158,14 @@
     "interactions": "Interactions",
     "dms": "Direct messages",
     "public_tl": "Public timeline",
+    "public_timeline_description": "Public posts from this instance",
     "timeline": "Timeline",
     "home_timeline": "Home timeline",
+    "home_timeline_description": "Posts from people you follow",
+    "bubble_timeline": "Bubble timeline",
+    "bubble_timeline_description": "Posts from instances close to yours, as recommended by the admin(s)",
     "twkn": "Known Network",
+    "twkn_timeline_description": "Posts from the entire network",
     "bookmarks": "Bookmarks",
     "user_search": "User Search",
     "search": "Search",

src/i18n/ja_pedantic.json

@@ -90,9 +90,13 @@
     "interactions": "インタラクション",
     "dms": "ダイレクトメッセージ",
     "public_tl": "公開タイムライン",
+    "public_timeline_description": "このインスタンスからの公開投稿",
     "timeline": "タイムライン",
     "lists": "リスト",
     "twkn": "すべてのネットワーク",
+    "twkn_timeline_description": "全連合からの投稿",
+    "bubble_timeline": "バブルタイムライン",
+    "bubble_timeline_description": "管理者がおすすめしているインスタンスからの投稿",
     "user_search": "ユーザーを探す",
     "search": "検索",
     "who_to_follow": "おすすめユーザー",
@@ -102,6 +106,7 @@
     "timelines": "タイムライン",
     "chats": "チャット",
     "home_timeline": "ホームタイムライン",
+    "home_timeline_description": "フォローしているユーザーからの投稿",
     "announcements": "お知らせ"
   },
   "notifications": {

src/modules/statuses.js

@@ -63,7 +63,8 @@ export const defaultState = () => ({
     tag: emptyTl(),
     dms: emptyTl(),
     bookmarks: emptyTl(),
-    list: emptyTl()
+    list: emptyTl(),
+    bubble: emptyTl()
   }
 })
 

src/services/api/api.service.js

@@ -47,6 +47,7 @@ const MASTODON_DENY_USER_URL = id => `/api/v1/follow_requests/${id}/reject`
 const MASTODON_DIRECT_MESSAGES_TIMELINE_URL = '/api/v1/timelines/direct'
 const MASTODON_PUBLIC_TIMELINE = '/api/v1/timelines/public'
 const MASTODON_USER_HOME_TIMELINE_URL = '/api/v1/timelines/home'
+const AKKOMA_BUBBLE_TIMELINE_URL = '/api/v1/timelines/bubble'
 const MASTODON_STATUS_URL = id => `/api/v1/statuses/${id}`
 const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
 const MASTODON_USER_URL = id => `/api/v1/accounts/${id}?with_relationships=true`
@@ -608,6 +609,7 @@ const fetchTimeline = ({
 }) => {
   const timelineUrls = {
     public: MASTODON_PUBLIC_TIMELINE,
+    bubble: AKKOMA_BUBBLE_TIMELINE_URL,
     friends: MASTODON_USER_HOME_TIMELINE_URL,
     dms: MASTODON_DIRECT_MESSAGES_TIMELINE_URL,
     notifications: MASTODON_USER_NOTIFICATIONS_URL,
@@ -1395,7 +1397,15 @@ export const ProcessedWS = ({
   }
   socket.addEventListener('open', (wsEvent) => {
     console.debug(`[WS][${id}] Socket connected`, wsEvent)
+    setInterval(() => {
+      try {
+        socket.send('ping')
+      } catch (e) {
+        clearInterval(this)
+      }
+    }, 30000)
   })
+
   socket.addEventListener('error', (wsEvent) => {
     console.debug(`[WS][${id}] Socket errored`, wsEvent)
   })