feat(frontend): マウスでもタイムラインを引っ張って更新できるように & MkPullToRefreshのパフォーマンス向上

CHANGELOG.md

@@ -4,7 +4,9 @@
 -
 
 ### Client
--
+- Feat: マウスでもタイムラインを引っ張って更新できるように
+  - アクセシビリティ設定からオフにすることもできます
+- Enhance: タイムラインのパフォーマンスを向上
 
 ### Server
 - Enhance: 凍結されたユーザのノートが各種タイムラインで表示されないように `#15775`

locales/index.d.ts

@@ -5709,6 +5709,10 @@ export interface Locale extends ILocale {
          * デバイス間でインストールしたテーマを同期
          */
         "enableSyncThemesBetweenDevices": string;
+        /**
+         * ひっぱって更新
+         */
+        "enablePullToRefresh": string;
         "_chat": {
             /**
              * 送信者の名前を表示

locales/ja-JP.yml

@@ -1427,6 +1427,7 @@ _settings:
   ifOn: "オンのとき"
   ifOff: "オフのとき"
   enableSyncThemesBetweenDevices: "デバイス間でインストールしたテーマを同期"
+  enablePullToRefresh: "ひっぱって更新"
 
   _chat:
     showSenderName: "送信者の名前を表示"

packages/frontend/src/components/MkNotifications.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkPullToRefresh :refresher="() => reload()">
+<component :is="prefer.s.enablePullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => reload()">
 	<MkPagination ref="pagingComponent" :pagination="pagination">
 		<template #empty>
 			<div class="_fullinfo">
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</component>
 		</template>
 	</MkPagination>
-</MkPullToRefresh>
+</component>
 </template>
 
 <script lang="ts" setup>

packages/frontend/src/components/MkPullToRefresh.vue

@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div ref="rootEl">
-	<div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${pullDistance / (PULL_BRAKE_BASE + (pullDistance / PULL_BRAKE_FACTOR))}px;`">
+	<div v-if="isPulling" :class="$style.frame" :style="`--frame-min-height: ${pullDistance / (PULL_BRAKE_BASE + (pullDistance / PULL_BRAKE_FACTOR))}px;`">
 		<div :class="$style.frameContent">
 			<MkLoading v-if="isRefreshing" :class="$style.loader" :em="true"/>
-			<i v-else class="ti ti-arrow-bar-to-down" :class="[$style.icon, { [$style.refresh]: isPullEnd }]"></i>
+			<i v-else class="ti ti-arrow-bar-to-down" :class="[$style.icon, { [$style.refresh]: isPulledEnough }]"></i>
 			<div :class="$style.text">
-				<template v-if="isPullEnd">{{ i18n.ts.releaseToRefresh }}</template>
+				<template v-if="isPulledEnough">{{ i18n.ts.releaseToRefresh }}</template>
 				<template v-else-if="isRefreshing">{{ i18n.ts.refreshing }}</template>
 				<template v-else>{{ i18n.ts.pullDownToRefresh }}</template>
 			</div>
@@ -34,19 +34,16 @@ const RELEASE_TRANSITION_DURATION = 200;
 const PULL_BRAKE_BASE = 1.5;
 const PULL_BRAKE_FACTOR = 170;
 
-const isPullStart = ref(false);
+const isPulling = ref(false);
-const isPullEnd = ref(false);
+const isPulledEnough = ref(false);
 const isRefreshing = ref(false);
 const pullDistance = ref(0);
 
-let supportPointerDesktop = false;
 let startScreenY: number | null = null;
 
 const rootEl = useTemplateRef('rootEl');
 let scrollEl: HTMLElement | null = null;
 
-let disabled = false;
-
 const props = withDefaults(defineProps<{
 	refresher: () => Promise<void>;
 }>(), {
@@ -57,18 +54,51 @@ const emit = defineEmits<{
 	(ev: 'refresh'): void;
 }>();
 
-function getScreenY(event) {
+function getScreenY(event: TouchEvent | MouseEvent | PointerEvent): number {
-	if (supportPointerDesktop) {
+	if (event.touches && event.touches[0] && event.touches[0].screenY != null) {
+		return event.touches[0].screenY;
+	} else {
 		return event.screenY;
 	}
-	return event.touches[0].screenY;
 }
 
-function moveStart(event) {
+// When at the top of the page, disable vertical overscroll so passive touch listeners can take over.
-	if (!isPullStart.value && !isRefreshing.value && !disabled) {
+function lockDownScroll() {
-		isPullStart.value = true;
+	scrollEl!.style.touchAction = 'pan-x pan-down pinch-zoom';
-		startScreenY = getScreenY(event);
+	scrollEl!.style.overscrollBehavior = 'none';
-		pullDistance.value = 0;
+}
+
+function unlockDownScroll() {
+	scrollEl!.style.touchAction = 'auto';
+	scrollEl!.style.overscrollBehavior = 'contain';
+}
+
+function moveStart(event: PointerEvent) {
+	const scrollPos = scrollEl!.scrollTop;
+	if (scrollPos === 0) {
+		lockDownScroll();
+		if (!isPulling.value && !isRefreshing.value) {
+			isPulling.value = true;
+			startScreenY = getScreenY(event);
+			pullDistance.value = 0;
+
+			// タッチデバイスでPointerEventを使うとなんか挙動がおかしいので、TouchEventとMouseEventを使い分ける
+			if (event.pointerType === 'mouse') {
+				window.addEventListener('mousemove', moving, { passive: true });
+				window.addEventListener('mouseup', () => {
+					window.removeEventListener('mousemove', moving);
+					onPullRelease();
+				}, { passive: true, once: true });
+			} else {
+				window.addEventListener('touchmove', moving, { passive: true });
+				window.addEventListener('touchend', () => {
+					window.removeEventListener('touchmove', moving);
+					onPullRelease();
+				}, { passive: true, once: true });
+			}
+		}
+	} else {
+		unlockDownScroll();
 	}
 }
 
@@ -108,31 +138,39 @@ async function closeContent() {
 	}
 }
 
-function moveEnd() {
+function onPullRelease() {
-	if (isPullStart.value && !isRefreshing.value) {
+	window.document.body.removeAttribute('inert');
-		startScreenY = null;
+	startScreenY = null;
-		if (isPullEnd.value) {
+	if (isPulledEnough.value) {
-			isPullEnd.value = false;
+		isPulledEnough.value = false;
-			isRefreshing.value = true;
+		isRefreshing.value = true;
-			fixOverContent().then(() => {
+		fixOverContent().then(() => {
-				emit('refresh');
+			emit('refresh');
-				props.refresher().then(() => {
+			props.refresher().then(() => {
-					refreshFinished();
+				refreshFinished();
-				});
 			});
-		} else {
+		});
-			closeContent().then(() => isPullStart.value = false);
+	} else {
-		}
+		closeContent().then(() => isPulling.value = false);
 	}
 }
 
-function moving(event: TouchEvent | PointerEvent) {
+function toggleScrollLockOnTouchEnd() {
-	if (!isPullStart.value || isRefreshing.value || disabled) return;
+	const scrollPos = scrollEl!.scrollTop;
+	if (scrollPos === 0) {
+		lockDownScroll();
+	} else {
+		unlockDownScroll();
+	}
+}
 
-	if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + pullDistance.value) || isHorizontalSwipeSwiping.value) {
+function moving(event: MouseEvent | TouchEvent) {
+	if (!isPulling.value || isRefreshing.value) return;
+
+	if ((scrollEl?.scrollTop ?? 0) > SCROLL_STOP + pullDistance.value || isHorizontalSwipeSwiping.value) {
 		pullDistance.value = 0;
-		isPullEnd.value = false;
+		isPulledEnough.value = false;
-		moveEnd();
+		onPullRelease();
 		return;
 	}
 
@@ -144,15 +182,12 @@ function moving(event: TouchEvent | PointerEvent) {
 	const moveHeight = moveScreenY - startScreenY!;
 	pullDistance.value = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
 
-	if (pullDistance.value > 0) {
+	// マウスでのpull時、画面上のテキスト選択が発生して画面がスクロールされたりするのを防ぐ
-		if (event.cancelable) event.preventDefault();
+	if (pullDistance.value > 3) { // ある程度遊びを持たせないと通常のクリックでも発火しクリックできなくなる
+		window.document.body.setAttribute('inert', 'true');
 	}
 
-	if (pullDistance.value > SCROLL_STOP) {
+	isPulledEnough.value = pullDistance.value >= FIRE_THRESHOLD;
-		event.stopPropagation();
-	}
-
-	isPullEnd.value = pullDistance.value >= FIRE_THRESHOLD;
 }
 
 /**
@@ -162,61 +197,23 @@ function moving(event: TouchEvent | PointerEvent) {
  */
 function refreshFinished() {
 	closeContent().then(() => {
-		isPullStart.value = false;
+		isPulling.value = false;
 		isRefreshing.value = false;
 	});
 }
 
-function setDisabled(value) {
-	disabled = value;
-}
-
-function onScrollContainerScroll() {
-	const scrollPos = scrollEl!.scrollTop;
-
-	// When at the top of the page, disable vertical overscroll so passive touch listeners can take over.
-	if (scrollPos === 0) {
-		scrollEl!.style.touchAction = 'pan-x pan-down pinch-zoom';
-		registerEventListenersForReadyToPull();
-	} else {
-		scrollEl!.style.touchAction = 'auto';
-		unregisterEventListenersForReadyToPull();
-	}
-}
-
-function registerEventListenersForReadyToPull() {
-	if (rootEl.value == null) return;
-	rootEl.value.addEventListener('touchstart', moveStart, { passive: true });
-	rootEl.value.addEventListener('touchmove', moving, { passive: false }); // passive: falseにしないとpreventDefaultが使えない
-}
-
-function unregisterEventListenersForReadyToPull() {
-	if (rootEl.value == null) return;
-	rootEl.value.removeEventListener('touchstart', moveStart);
-	rootEl.value.removeEventListener('touchmove', moving);
-}
-
 onMounted(() => {
 	if (rootEl.value == null) return;
 
 	scrollEl = getScrollContainer(rootEl.value);
-	if (scrollEl == null) return;
 
-	scrollEl.addEventListener('scroll', onScrollContainerScroll, { passive: true });
+	rootEl.value.addEventListener('pointerdown', moveStart, { passive: true });
-
+	rootEl.value.addEventListener('touchend', toggleScrollLockOnTouchEnd, { passive: true });
-	rootEl.value.addEventListener('touchend', moveEnd, { passive: true });
-
-	registerEventListenersForReadyToPull();
 });
 
 onUnmounted(() => {
-	if (scrollEl) scrollEl.removeEventListener('scroll', onScrollContainerScroll);
+	rootEl.value.removeEventListener('pointerdown', moveStart);
-
+	rootEl.value.removeEventListener('touchend', toggleScrollLockOnTouchEnd);
-	unregisterEventListenersForReadyToPull();
-});
-
-defineExpose({
-	setDisabled,
 });
 </script>
 

packages/frontend/src/components/MkTimeline.vue

@@ -4,8 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkPullToRefresh ref="prComponent" :refresher="() => reloadTimeline()">
+<component :is="prefer.s.enablePullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => reloadTimeline()">
-	<MkPagination v-if="paginationQuery" ref="pagingComponent" :pagination="paginationQuery" @queue="emit('queue', $event)" @status="prComponent?.setDisabled($event)">
+	<MkPagination v-if="paginationQuery" ref="pagingComponent" :pagination="paginationQuery" @queue="emit('queue', $event)">
 		<template #empty>
 			<div class="_fullinfo">
 				<img :src="infoImageUrl" draggable="false"/>
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</component>
 		</template>
 	</MkPagination>
-</MkPullToRefresh>
+</component>
 </template>
 
 <script lang="ts" setup>
@@ -93,7 +93,6 @@ type TimelineQueryType = {
 	roleId?: string
 };
 
-const prComponent = useTemplateRef('prComponent');
 const pagingComponent = useTemplateRef('pagingComponent');
 
 let tlNotesCount = 0;

packages/frontend/src/pages/settings/preferences.vue

@@ -471,6 +471,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 								</MkPreferenceContainer>
 							</SearchMarker>
 
+							<SearchMarker :keywords="['swipe', 'pull', 'refresh']">
+								<MkPreferenceContainer k="enablePullToRefresh">
+									<MkSwitch v-model="enablePullToRefresh">
+										<template #label><SearchLabel>{{ i18n.ts._settings.enablePullToRefresh }}</SearchLabel></template>
+									</MkSwitch>
+								</MkPreferenceContainer>
+							</SearchMarker>
+
 							<SearchMarker :keywords="['keep', 'screen', 'display', 'on']">
 								<MkPreferenceContainer k="keepScreenOn">
 									<MkSwitch v-model="keepScreenOn">
@@ -800,6 +808,7 @@ const animatedMfm = prefer.model('animatedMfm');
 const disableShowingAnimatedImages = prefer.model('disableShowingAnimatedImages');
 const keepScreenOn = prefer.model('keepScreenOn');
 const enableHorizontalSwipe = prefer.model('enableHorizontalSwipe');
+const enablePullToRefresh = prefer.model('enablePullToRefresh');
 const useNativeUiForVideoAudioPlayer = prefer.model('useNativeUiForVideoAudioPlayer');
 const contextMenu = prefer.model('contextMenu');
 const menuStyle = prefer.model('menuStyle');
@@ -857,6 +866,8 @@ watch([
 	fontSize,
 	useSystemFont,
 	makeEveryTextElementsSelectable,
+	enableHorizontalSwipe,
+	enablePullToRefresh,
 ], async () => {
 	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
 });

packages/frontend/src/preferences/def.ts

@@ -300,6 +300,9 @@ export const PREF_DEF = {
 	enableHorizontalSwipe: {
 		default: true,
 	},
+	enablePullToRefresh: {
+		default: true,
+	},
 	useNativeUiForVideoAudioPlayer: {
 		default: false,
 	},