fix(client): タッチ機能付きディスプレイを使っていてマウス操作をしている場合に一部機能が動作しない問題を修正

8 files changed, 33 insertions, 26 deletions

diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue
index 6695c236e7..180aff87ac 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/packages/client/src/components/emoji-picker.vue
@@ -79,7 +79,7 @@ import { emojilist } from '@/scripts/emojilist';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import Particle from '@/components/particle.vue';
 import * as os from '@/os';
-import { isDeviceTouch } from '@/scripts/is-device-touch';
+import { isTouchUsing } from '@/scripts/touch';
 import { isMobile } from '@/scripts/is-mobile';
 import { emojiCategories } from '@/instance';
 import XSection from './emoji-picker.section.vue';
@@ -108,7 +108,7 @@ export default defineComponent({
 			pinned: this.$store.reactiveState.reactions,
 			width: this.asReactionPicker ? this.$store.state.reactionPickerWidth : 3,
 			height: this.asReactionPicker ? this.$store.state.reactionPickerHeight : 2,
-			big: this.asReactionPicker ? isDeviceTouch : false,
+			big: this.asReactionPicker ? isTouchUsing : false,
 			customEmojiCategories: emojiCategories,
 			customEmojis: this.$instance.emojis,
 			q: null,
@@ -268,7 +268,7 @@ export default defineComponent({
 
 	methods: {
 		focus() {
-			if (!isMobile && !isDeviceTouch) {
+			if (!isMobile && !isTouchUsing) {
 				this.$refs.search.focus({
 					preventScroll: true
 				});
diff --git a/packages/client/src/components/global/url.vue b/packages/client/src/components/global/url.vue
index 4987c2b61c..097fcddef6 100644
--- a/packages/client/src/components/global/url.vue
+++ b/packages/client/src/components/global/url.vue
@@ -23,7 +23,7 @@
 import { defineComponent } from 'vue';
 import { toUnicode as decodePunycode } from 'punycode/';
 import { url as local } from '@/config';
-import { isDeviceTouch } from '@/scripts/is-device-touch';
+import { isTouchUsing } from '@/scripts/touch';
 import * as os from '@/os';
 
 export default defineComponent({
@@ -91,13 +91,13 @@ export default defineComponent({
 			}
 		},
 		onMouseover() {
-			if (isDeviceTouch) return;
+			if (isTouchUsing) return;
 			clearTimeout(this.showTimer);
 			clearTimeout(this.hideTimer);
 			this.showTimer = setTimeout(this.showPreview, 500);
 		},
 		onMouseleave() {
-			if (isDeviceTouch) return;
+			if (isTouchUsing) return;
 			clearTimeout(this.showTimer);
 			clearTimeout(this.hideTimer);
 			this.hideTimer = setTimeout(this.closePreview, 500);
diff --git a/packages/client/src/components/link.vue b/packages/client/src/components/link.vue
index 5a6754016e..8b8cde6510 100644
--- a/packages/client/src/components/link.vue
+++ b/packages/client/src/components/link.vue
@@ -12,7 +12,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { url as local } from '@/config';
-import { isDeviceTouch } from '@/scripts/is-device-touch';
+import { isTouchUsing } from '@/scripts/touch';
 import * as os from '@/os';
 
 export default defineComponent({
@@ -65,13 +65,13 @@ export default defineComponent({
 			}
 		},
 		onMouseover() {
-			if (isDeviceTouch) return;
+			if (isTouchUsing) return;
 			clearTimeout(this.showTimer);
 			clearTimeout(this.hideTimer);
 			this.showTimer = setTimeout(this.showPreview, 500);
 		},
 		onMouseleave() {
-			if (isDeviceTouch) return;
+			if (isTouchUsing) return;
 			clearTimeout(this.showTimer);
 			clearTimeout(this.hideTimer);
 			this.hideTimer = setTimeout(this.closePreview, 500);
diff --git a/packages/client/src/directives/tooltip.ts b/packages/client/src/directives/tooltip.ts
index 0e36322cd9..e14ee81dff 100644
--- a/packages/client/src/directives/tooltip.ts
+++ b/packages/client/src/directives/tooltip.ts
@@ -2,11 +2,11 @@
 // ただディレクティブ内でonUnmountedなどのcomposition api使えるのか不明
 
 import { Directive, ref } from 'vue';
-import { isDeviceTouch } from '@/scripts/is-device-touch';
+import { isTouchUsing } from '@/scripts/touch';
 import { popup, alert } from '@/os';
 
-const start = isDeviceTouch ? 'touchstart' : 'mouseover';
-const end = isDeviceTouch ? 'touchend' : 'mouseleave';
+const start = isTouchUsing ? 'touchstart' : 'mouseover';
+const end = isTouchUsing ? 'touchend' : 'mouseleave';
 const delay = 100;
 
 export default {
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 37b57557c3..1c3c6d3e59 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -12,16 +12,6 @@ import { resolve } from '@/router';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
 
-export let isScreenTouching = false;
-
-window.addEventListener('touchstart', () => {
-	isScreenTouching = true;
-}, { passive: true });
-
-window.addEventListener('touchend', () => {
-	isScreenTouching = false;
-}, { passive: true });
-
 export const stream = markRaw(new Misskey.Stream(url, $i));
 
 export const pendingApiRequestsCount = ref(0);
diff --git a/packages/client/src/scripts/is-device-touch.ts b/packages/client/src/scripts/is-device-touch.ts
deleted file mode 100644
index 3f0bfefed2..0000000000
--- a/packages/client/src/scripts/is-device-touch.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const isDeviceTouch = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
diff --git a/packages/client/src/scripts/touch.ts b/packages/client/src/scripts/touch.ts
new file mode 100644
index 0000000000..06b4f8b2ed
--- /dev/null
+++ b/packages/client/src/scripts/touch.ts
@@ -0,0 +1,19 @@
+const isTouchSupported = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
+
+export let isTouchUsing = false;
+
+export let isScreenTouching = false;
+
+if (isTouchSupported) {
+	window.addEventListener('touchstart', () => {
+		// maxTouchPointsなどでの判定だけだと、「タッチ機能付きディスプレイを使っているがマウスでしか操作しない」場合にも
+		// タッチで使っていると判定されてしまうため、実際に一度でもタッチされたらtrueにする
+		isTouchUsing = true;
+
+		isScreenTouching = true;
+	}, { passive: true });
+	
+	window.addEventListener('touchend', () => {
+		isScreenTouching = false;
+	}, { passive: true });
+}
diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts
index a9bf6d93db..b88075cdb0 100644
--- a/packages/client/src/scripts/use-tooltip.ts
+++ b/packages/client/src/scripts/use-tooltip.ts
@@ -1,6 +1,5 @@
-import { isScreenTouching } from '@/os';
 import { Ref, ref } from 'vue';
-import { isDeviceTouch } from './is-device-touch';
+import { isScreenTouching, isTouchUsing } from './touch';
 
 export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
 	let isHovering = false;
@@ -14,7 +13,7 @@ export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
 
 		// iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、その対策
 		// これが無いと、画面に触れてないのにツールチップが出たりしてしまう
-		if (isDeviceTouch && !isScreenTouching) return;
+		if (isTouchUsing && !isScreenTouching) return;
 
 		const showing = ref(true);
 		onShow(showing);