Add: WIP: Timeline (rend/main)

package-lock.json

@@ -5431,8 +5431,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5453,14 +5452,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5475,20 +5472,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5605,8 +5599,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5618,7 +5611,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5633,7 +5625,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5641,14 +5632,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5667,7 +5656,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5748,8 +5736,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5761,7 +5748,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5847,8 +5833,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5884,7 +5869,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5904,7 +5888,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5948,14 +5931,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },

src/components/AddColumn/PublicTimeline.vue

@@ -14,7 +14,6 @@
     <div id="timelines">
       <div v-for="(value, key, index) in pubTL" :key="index" class="tl">
         {{value.name}}
-        <!--とりあえずここに書かせて-->
         <TimelineToot
           v-for="[id,status] in value.statuses"
           :key="id"

src/components/AddColumn/UserTimeline.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <div>
     <form @submit.prevent="addTL">
       <label
         v-for="(types,name) in userTimelineTypes"
@@ -15,31 +16,131 @@
         style="--font-size:.8em;margin-top:1em;"
       >Add Column</BaseButton>
     </form>
+    </div>
+    <div id="timelines">
+      <div v-for="(value, key, index) in pubTL" :key="index" class="tl">
+        {{value.name}}/{{value.type}}
+        <TimelineToot
+          v-for="[id,status] in value.statuses"
+          :key="id"
+          :status="status"
+          :pref-static="pref.static"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
+import { ipcRenderer } from "electron"
+import { Status } from "megalodon"
 import { Component, Prop, Vue } from "vue-property-decorator"
+import TimelineToot from "@/components/Timeline/Toot.vue"
+type Timeline = {
+  name: string
+  type: string
+  statuses: Map<number, Status>
+  error?: Error
+}
+type Timelines = Timeline[]
+type DeleteListener = (e: Event, id: number) => void
+type UpdateListener = (e: Event, status: Status) => void
 
-@Component
+@Component({
+  components: {
+    TimelineToot
+  }
+})
 export default class UserTimeline extends Vue {
   @Prop() public username!: string
-
+  public deleteListeners: [string, DeleteListener][] = []
-  public timelineType: string = 'home'
+  public updateListeners: [string, UpdateListener][] = []
+  public timelineType: string = "home"
   public userTimelineTypes: {
     [key: string]: string
   } = {
-      home: 'Home Timeline',
+    home: "Home Timeline",
-      notify: 'Notifications',
+    notify: "Notifications",
-      dm: 'Direct Messages',
+    dm: "Direct Messages",
-      local: 'Local Timeline',
+    local: "Local Timeline",
-      fediverse: 'Fediverse Timeline',
+    fediverse: "Fediverse Timeline",
-      integrated: 'Integrated Timeline (Home + Local)',
+    integrated: "Integrated Timeline (Home + Local)",
-      localPlus: 'Integrated Timeline (Local + Boost + Reply)',
+    localPlus: "Integrated Timeline (Local + Boost + Reply)"
-    }
+  }
-
+  public TL: Timelines = []
+  beforeDestroy() {
+    this.updateListeners.forEach(([name, listener]) => {
+      ipcRenderer.removeListener(name, listener)
+    })
+    this.deleteListeners.forEach(([name, listener]) => {
+      ipcRenderer.removeListener(name, listener)
+    })
+  }
+  public sortedStatus(statuses: Map<number, Status>): Map<number, Status> {
+    return statuses.sortByValue(
+      (s1, s2): number => {
+        return s1.created_at > s2.created_at ? -1 : 1
+      }
+    )
+  }
   public addTL() {
-    console.log(this.timelineType)
+    let timeline: Timeline = {
+      name: "",
+      type: this.timelineType,
+      statuses: new Map()
+    }
+    this.TL.push(timeline)
+    // 最新のTLを取得
+    ipcRenderer.once(
+      `timeline-${timeline.name}-${timeline.type}`,
+      (e: Event, statuses: Status[], error?: Error) => {
+        timeline.error = error
+        if (error === undefined) {
+          this.loadTL(timeline, statuses)
+        }
+        this.$forceUpdate()
+      }
+    )
+    ipcRenderer.send("timeline", timeline.type, timeline.name)
+  }
+  public loadTL(timeline: Timeline, statuses: Status[]) {
+    timeline.statuses = new Map(
+      statuses.map((status): [number, Status] => [status.id, status])
+    )
+
+    // streamingを開始
+    this.subscribeStreaming(timeline)
+  }
+
+  public async subscribeStreaming(timeline: Timeline) {
+    // updateイベントを購読
+    let updateListener = (_: Event, status: Status) => {
+      timeline.statuses.set(status.id, status)
+      timeline.statuses = this.sortedStatus(timeline.statuses)
+      this.$forceUpdate()
+    }
+    ipcRenderer.on(`update-${timeline.name}-${timeline.type}`, updateListener)
+    this.updateListeners.push([
+      `update-${timeline.name}-${timeline.type}`,
+      updateListener
+    ])
+
+    // deleteイベントを購読
+    let deleteListener = (_: Event, id: number) => {
+      timeline.statuses.delete(id)
+      this.$forceUpdate()
+    }
+    ipcRenderer.on(`delete-${timeline.name}-${timeline.type}`, deleteListener)
+    this.deleteListeners.push([
+      `delete-${timeline.name}-${timeline.type}`,
+      deleteListener
+    ])
+
+    ipcRenderer.send("open-streaming", timeline.name, timeline.type)
+  }
+
+  public showAccount(id: number) {
+    console.log("Account dialog:" + id)
   }
 }
 </script>
@@ -62,4 +163,12 @@ label {
     display: none;
   }
 }
+#timelines {
+  display: flex;
+  width: 100%;
+}
+.tl {
+  height: 100%;
+  flex-grow: 4;
+}
 </style>

src/main/Application.ts

@@ -30,7 +30,6 @@ export default class Application {
 
     private constructor() {
         this.isDarkMode = systemPreferences.isDarkMode()
-
         app.on('window-all-closed', () => this.onWindowAllClosed())
         app.on('ready', () => this.onReady())
         app.on('activate', () => this.onActivated())

src/main/Auth.ts

@@ -9,6 +9,7 @@ interface AccountDoc {
   _id?: string
   domain: string
   acct: string
+  full: string
   avatar: string
   avatarStatic: string
   accessToken: string
@@ -101,6 +102,7 @@ export default class Auth {
     let docs: AccountDoc = {
       domain: instance,
       acct: you.acct,
+      full: you.acct+"@"+instance,
       avatar: you.avatar,
       avatarStatic: you.avatar_static,
       accessToken: tokenData.accessToken,

src/main/Client.ts

@@ -1,6 +1,7 @@
-
+import { app } from "electron"
 import Mastodon from 'megalodon'
-
+import Datastore from "nedb"
+import { join } from "path"
 type Protocol = 'http' | 'websocket'
 
 export default class Clients {
@@ -17,7 +18,17 @@ export default class Clients {
 
         if (!clients.has(username)) {
             // usernameからドメインをとトークンをデータベースから取得してクライアントを作る
-            //this.setAuthClient(protocol, username, this.createAuthClient(protocol, domain, accessToken))
+            let db = new Datastore({
+                filename: join(app.getPath("userData"), "account.db"),
+                autoload: true
+              })
+            db.find({ full: username }, function(err: any, docs: { domain: string; accessToken: string; }){
+                if (err) {
+                    console.log(err)
+                  } else {
+                    Clients.setAuthClient(protocol, username, Clients.createAuthClient(protocol, docs.domain, docs.accessToken))
+                  }
+            });
         }
 
         return clients.get(username)!

src/main/Timeline.ts

@@ -17,5 +17,28 @@ export default class Timeline {
                 event.sender.send(`timeline-${name}-no-auth`, [], error)
             }
         })
+        ipcMain.on('timeline', async (event: Event, name: string, type: string) => {
+            const client = Client.getAuthClient(name)
+            try {
+                let url: string = ""
+                //home/notify/dm/local/fediverse/integrated/localPlus
+                //integratedはまだ。dmはAPI構造が違う。notifyはmax_idとかのためにヘッダー取らないといけない。
+                if(type=="home"){
+                    url="/timelines/home"
+                }else if(type=="notify"){
+                    url="/timelines/notifications"
+                }else if(type=="dm"){
+                    url="/conversations"
+                }else if(type=="local"){
+                    url="/timelines/public?local=true"
+                }else if(type=="fediverse"){
+                    url="/timelines/public"
+                }
+                let res: Response<[Status]> = await client.get<[Status]>(url)
+                event.sender.send(`timeline-${name}-no-auth`, res.data)
+            } catch (error) {
+                event.sender.send(`timeline-${name}-no-auth`, [], error)
+            }
+        })
     }
 }