From cb4cf50f9525bf8d5ba54e26701b8b32c8e51f0a Mon Sep 17 00:00:00 2001
From: Fairy-Phy <phy.public@gmail.com>
Date: Sat, 21 Oct 2023 22:42:00 +0900
Subject: [PATCH] pc reloading

---
 packages/frontend/src/components/MkTimeline.vue | 16 ++++++++++++++--
 packages/frontend/src/pages/timeline.vue        |  7 +++++++
 packages/frontend/src/stream.ts                 | 16 ++++++++++++++--
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue
index cdd72febd1..d2524a9780 100644
--- a/packages/frontend/src/components/MkTimeline.vue
+++ b/packages/frontend/src/components/MkTimeline.vue
@@ -4,13 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
+	<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
 </template>
 
 <script lang="ts" setup>
 import { computed, provide, onUnmounted } from 'vue';
 import MkNotes from '@/components/MkNotes.vue';
-import { useStream } from '@/stream.js';
+import { useStream, reloadStream } from '@/stream.js';
 import * as sound from '@/scripts/sound.js';
 import { $i } from '@/account.js';
 import { instance } from '@/instance.js';
@@ -183,6 +183,18 @@ onUnmounted(() => {
 	if (connection2) connection2.dispose();
 });
 
+const reloadTimeline = () => {
+	tlNotesCount = 0;
+
+	tlComponent.pagingComponent?.reload().then(() => {
+		reloadStream();
+	});
+};
+
+defineExpose({
+	reloadTimeline
+});
+
 /* TODO
 const timetravel = (date?: Date) => {
 	this.date = date;
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 8cc540779b..491ad6ad24 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -140,6 +140,13 @@ function focus(): void {
 }
 
 const headerActions = $computed(() => [{
+	icon: 'ti ti-refresh',
+	text: i18n.ts.reload,
+	handler: (ev) => {
+		console.log('called');
+		tlComponent.reloadTimeline();
+	},
+}, {
 	icon: 'ti ti-dots',
 	text: i18n.ts.options,
 	handler: (ev) => {
diff --git a/packages/frontend/src/stream.ts b/packages/frontend/src/stream.ts
index 27fce4d4b8..912bbb28a4 100644
--- a/packages/frontend/src/stream.ts
+++ b/packages/frontend/src/stream.ts
@@ -9,6 +9,7 @@ import { $i } from '@/account.js';
 import { url } from '@/config.js';
 
 let stream: Misskey.Stream | null = null;
+let timeoutHeadBeat: number | null = null;
 
 export function useStream(): Misskey.Stream {
 	if (stream) return stream;
@@ -17,7 +18,18 @@ export function useStream(): Misskey.Stream {
 		token: $i.token,
 	} : null));
 
-	window.setTimeout(heartbeat, 1000 * 60);
+	timeoutHeadBeat = window.setTimeout(heartbeat, 1000 * 60);
+
+	return stream;
+}
+
+export function reloadStream() {
+	if (!stream) return useStream();
+	if (timeoutHeadBeat) window.clearTimeout(timeoutHeadBeat);
+
+	stream.close();
+	stream.stream.reconnect();
+	timeoutHeadBeat = window.setTimeout(heartbeat, 1000 * 60);
 
 	return stream;
 }
@@ -26,5 +38,5 @@ function heartbeat(): void {
 	if (stream != null && document.visibilityState === 'visible') {
 		stream.heartbeat();
 	}
-	window.setTimeout(heartbeat, 1000 * 60);
+	timeoutHeadBeat = window.setTimeout(heartbeat, 1000 * 60);
 }