feat(frontend): スワイプやボタンでタイムラインを再読込する機能

CHANGELOG.md

@@ -22,6 +22,9 @@
 - Feat: プラグイン・テーマを外部サイトから直接インストールできるようになりました
 	- 外部サイトでの実装が必要です。詳細は Misskey Hub をご覧ください
 	  https://misskey-hub.net/docs/advanced/publish-on-your-website.html
+- Feat: スワイプしてタイムラインを再読込できるように
+	- PCの場合は右上のボタンからでも再読込できます
+- Feat: タイムラインの自動更新を無効にできるように
 - Fix: 投稿フォームでのユーザー変更がプレビューに反映されない問題を修正
 
 ### Server

locales/en-US.yml

@@ -1139,6 +1139,10 @@ impressumDescription: "In some countries, like germany, the inclusion of operato
 privacyPolicy: "Privacy Policy"
 privacyPolicyUrl: "Privacy Policy URL"
 tosAndPrivacyPolicy: "Terms of Service and Privacy Policy"
+releaseToRefresh: "Release to reload"
+refreshing: "Reloading"
+pullDownToRefresh: "Pull down to reload"
+disableWebSocket: "Disable realtime update on timeline"
 _announcement:
   forExistingUsers: "Existing users only"
   forExistingUsersDescription: "This announcement will only be shown to users existing at the point of publishment if enabled. If disabled, those newly signing up after it has been posted will also see it."

locales/index.d.ts

@@ -1152,6 +1152,10 @@ export interface Locale {
     "angle": string;
     "flip": string;
     "showAvatarDecorations": string;
+    "releaseToRefresh": string;
+    "refreshing": string;
+    "pullDownToRefresh": string;
+    "disableWebSocket": string;
     "_announcement": {
         "forExistingUsers": string;
         "forExistingUsersDescription": string;

locales/ja-JP.yml

@@ -1149,6 +1149,10 @@ detach: "外す"
 angle: "角度"
 flip: "反転"
 showAvatarDecorations: "アイコンのデコレーションを表示"
+releaseToRefresh: "離してリロード"
+refreshing: "リロード中"
+pullDownToRefresh: "引っ張ってリロード"
+disableWebSocket: "タイムラインのリアルタイム更新を無効にする"
 
 _announcement:
   forExistingUsers: "既存ユーザーのみ"

packages/frontend/src/boot/main-boot.ts

@@ -8,7 +8,7 @@ import { common } from './common.js';
 import { version, ui, lang, updateLocale } from '@/config.js';
 import { i18n, updateI18n } from '@/i18n.js';
 import { confirm, alert, post, popup, toast } from '@/os.js';
-import { useStream } from '@/stream.js';
+import { useStream, isReloading } from '@/stream.js';
 import * as sound from '@/scripts/sound.js';
 import { $i, refreshAccount, login, updateAccount, signout } from '@/account.js';
 import { defaultStore, ColdDeviceStorage } from '@/store.js';
@@ -39,6 +39,7 @@ export async function mainBoot() {
 
 	let reloadDialogShowing = false;
 	stream.on('_disconnected_', async () => {
+		if (isReloading) return;
 		if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
 			location.reload();
 		} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') {

packages/frontend/src/components/MkPageWindow.vue

@@ -166,6 +166,8 @@ defineExpose({
 
 <style lang="scss" module>
 .root {
+	overscroll-behavior: none;
+
 	min-height: 100%;
 	background: var(--bg);
 

packages/frontend/src/components/MkPagination.vue

@@ -101,6 +101,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
 	(ev: 'queue', count: number): void;
+	(ev: 'status', error: boolean): void;
 }>();
 
 let rootEl = $shallowRef<HTMLElement>();
@@ -192,6 +193,11 @@ watch(queue, (a, b) => {
 	emit('queue', queue.value.size);
 }, { deep: true });
 
+watch(error, (n, o) => {
+	if (n === o) return;
+	emit('status', n);
+});
+
 async function init(): Promise<void> {
 	items.value = new Map();
 	queue.value = new Map();

packages/frontend/src/components/MkPullToRefresh.vue

@@ -0,0 +1,246 @@
+<template>
+	<div ref="rootEl">
+		<div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${currentHeight}px;`">
+			<div :class="$style.contents">
+				<i v-if="!isRefreshing" :class="['ti', 'ti-arrow-bar-to-down', { [$style.refresh]: isPullEnd }]"></i>
+				<MkLoading v-else :em="true"/>
+				<p v-if="isPullEnd">{{ i18n.ts.releaseToRefresh }}</p>
+				<p v-else-if="isRefreshing">{{ i18n.ts.refreshing }}</p>
+				<p v-else>{{ i18n.ts.pullDownToRefresh }}</p>
+			</div>
+		</div>
+		<div :class="{ [$style.slotClip]: isPullStart }">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
+import { deviceKind } from '@/scripts/device-kind.js';
+import { i18n } from '@/i18n.js';
+
+let isPullStart = $ref(false);
+let isPullEnd = $ref(false);
+let isRefreshing = $ref(false);
+
+const scrollStop = 10;
+const maxFrameSize = 75;
+const refreshFrameSize = 65;
+const fixTimeMs = 200;
+let currentHeight = $ref(0);
+
+let supportPointerDesktop = false;
+let startScreenY: number | null = null;
+
+const rootEl = $shallowRef<HTMLDivElement>();
+let scrollEl: HTMLElement | null = null;
+
+let disabled = false;
+
+const emits = defineEmits<{
+	(e: 'refresh'): void;
+}>();
+
+const getScrollableParentElement = (node) => {
+	if (node == null) {
+		return null;
+	}
+
+	if (node.scrollHeight > node.clientHeight) {
+		return node;
+	}
+	else {
+		return getScrollableParentElement(node.parentNode);
+	}
+};
+
+const getScreenY = (event) => {
+	if (supportPointerDesktop) {
+		return event.screenY;
+	}
+	return event.touches[0].screenY;
+};
+
+const moveStart = (e) => {
+	if (!isPullStart && !isRefreshing && !disabled) {
+		isPullStart = true;
+		startScreenY = getScreenY(e);
+		currentHeight = 0;
+	}
+};
+
+const moveBySystem = (to: number): Promise<void> => new Promise(r => {
+	const startHeight = currentHeight;
+	const overHeight = currentHeight - to;
+	if (overHeight < 1) {
+		r();
+		return;
+	}
+	const startTime = Date.now();
+	let intervalId = setInterval(() => {
+		const time = Date.now() - startTime;
+		if (time > fixTimeMs) {
+			currentHeight = to;
+			clearInterval(intervalId);
+			r();
+			return;
+		}
+		const nextHeight = startHeight - (overHeight / fixTimeMs) * time;
+		if (currentHeight < nextHeight) return;
+		currentHeight = nextHeight;
+	}, 1);
+});
+
+const fixOverContent = async () => {
+	if (currentHeight > refreshFrameSize) {
+		await moveBySystem(refreshFrameSize);
+	}
+};
+
+const closeContent = async () => {
+	if (currentHeight > 0) {
+		await moveBySystem(0);
+	}
+};
+
+const moveEnd = () => {
+	if (isPullStart && !isRefreshing) {
+		startScreenY = null;
+		if (isPullEnd) {
+			isPullEnd = false;
+			isRefreshing = true;
+			fixOverContent().then(() => emits('refresh'));
+		}
+		else {
+			closeContent().then(() => isPullStart = false);
+		}
+	}
+};
+
+const moving = (e) => {
+	if (!isPullStart || isRefreshing || disabled) return;
+
+	if (!scrollEl) {
+		scrollEl = getScrollableParentElement(rootEl);
+	}
+	if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? scrollStop : scrollStop + currentHeight)) {
+		currentHeight = 0;
+		isPullEnd = false;
+		moveEnd();
+		return;
+	}
+
+	if (startScreenY === null) {
+		startScreenY = getScreenY(e);
+	}
+	const moveScreenY = getScreenY(e);
+
+	const moveHeight = moveScreenY - startScreenY!;
+	if (moveHeight < 0) {
+		currentHeight = 0;
+	}
+	else if (moveHeight >= maxFrameSize) {
+		currentHeight = maxFrameSize;
+	}
+	else {
+		currentHeight = moveHeight;
+	}
+
+	isPullEnd = currentHeight >= refreshFrameSize;
+};
+
+onMounted(() => {
+	supportPointerDesktop = !!window.PointerEvent && deviceKind === 'desktop';
+
+	if (supportPointerDesktop) {
+		rootEl.addEventListener('pointerdown', moveStart);
+		// ポインターの場合、ポップアップ系の動作をするとdownだけ発火されてupが発火されないため
+		window.addEventListener('pointerup', moveEnd);
+		rootEl.addEventListener('pointermove', moving, {passive: true});
+	}
+	else {
+		rootEl.addEventListener('touchstart', moveStart);
+		rootEl.addEventListener('touchend', moveEnd);
+		rootEl.addEventListener('touchmove', moving, {passive: true});
+	}
+});
+
+onUnmounted(() => {
+	if (supportPointerDesktop) window.removeEventListener('pointerup', moveEnd);
+});
+
+/**
+ * emit(refresh)が完了したことを知らせる関数
+ * 
+ * タイムアウトがないのでこれを最終的に実行しないと出たままになる
+ */
+const refreshFinished = () => {
+	closeContent().then(() => {
+		isPullStart = false;
+		isRefreshing = false;
+	});
+};
+
+const setDisabled = (value) => {
+	disabled = value;
+};
+
+defineExpose({
+	refreshFinished,
+	setDisabled,
+});
+
+</script>
+
+<style lang="scss" module>
+	.frame {
+		position: relative;
+		overflow: clip;
+
+		width: 100%;
+		min-height: var(--frame-min-height, 0px);
+
+		box-shadow: inset 0px -7px 10px -10px rgba(0,0,0,.1);
+		mask-image: linear-gradient(90deg, #000 0%, #000 80%, transparent);
+		-webkit-mask-image: -webkit-linear-gradient(90deg, #000 0%, #000 80%, transparent);
+
+		pointer-events: none;
+
+		> .contents {
+			position: absolute;
+
+			bottom: 0;
+			width: 100%;
+
+			margin: 5px 0;
+
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			margin: 5px 0;
+
+			font-size: 14px;
+
+			> i, > div {
+				margin: 6px 0;
+			}
+			> i {
+				transition: transform .25s;
+
+				&.refresh {
+					transform: rotate(180deg);
+				}
+			}
+
+			> p {
+				margin: 5px 0;
+			}
+		}
+	}
+
+	.slotClip {
+		overflow-y: clip;
+	}
+</style>