feat(client): デバイスの種類を手動指定できるように

CHANGELOG.md

@@ -24,6 +24,7 @@ You should also include the user name that made the change.
 	- apRequestチャートを追加
 	- networkチャート廃止
 - クライアント: 自インスタンス情報ページでチャートを見れるように @syuilo
+- クライアント: デバイスの種類を手動指定できるように @syuilo
 
 ### Bugfixes
 

locales/ja-JP.yml

@@ -824,6 +824,10 @@ leaveGroupConfirm: "「{name}」から抜けますか？"
 useDrawerReactionPickerForMobile: "モバイルデバイスのときドロワーで表示"
 welcomeBackWithName: "おかえりなさい、{name}さん"
 clickToFinishEmailVerification: "[{ok}]を押して、メールアドレスの確認を完了してください。"
+overridedDeviceKind: "デバイスタイプ"
+smartphone: "スマートフォン"
+tablet: "タブレット"
+auto: "自動"
 
 _emailUnavailable:
   used: "既に使用されています"

packages/client/src/components/emoji-picker.vue

@@ -81,7 +81,7 @@ import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import Ripple from '@/components/ripple.vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
-import { isMobile } from '@/scripts/is-mobile';
+import { deviceKind } from '@/scripts/device-kind';
 import { emojiCategories, instance } from '@/instance';
 import XSection from './emoji-picker.section.vue';
 import { i18n } from '@/i18n';
@@ -263,7 +263,7 @@ watch(q, () => {
 });
 
 function focus() {
-	if (!isMobile && !isTouchUsing) {
+	if (!['smartphone', 'tablet'].includes(deviceKind) && !isTouchUsing) {
 		search.value?.focus({
 			preventScroll: true
 		});

packages/client/src/components/ui/modal.vue

@@ -14,6 +14,7 @@ import { nextTick, onMounted, computed, ref, watch, provide } from 'vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
 import { defaultStore } from '@/store';
+import { deviceKind } from '@/scripts/device-kind';
 
 function getFixedContainer(el: Element | null): Element | null {
 	if (el == null || el.tagName === 'BODY') return null;
@@ -62,7 +63,7 @@ const content = ref<HTMLElement>();
 const zIndex = os.claimZIndex(props.zPriority);
 const type = computed(() => {
 	if (props.preferType === 'auto') {
-		if (!defaultStore.state.disableDrawer && isTouchUsing && window.innerWidth < 500 && window.innerHeight < 1000) {
+		if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
 			return 'drawer';
 		} else {
 			return props.src != null ? 'popup' : 'dialog';

packages/client/src/init.ts

@@ -32,7 +32,7 @@ import { defaultStore, ColdDeviceStorage } from '@/store';
 import { fetchInstance, instance } from '@/instance';
 import { makeHotkey } from '@/scripts/hotkey';
 import { search } from '@/scripts/search';
-import { isMobile } from '@/scripts/is-mobile';
+import { deviceKind } from '@/scripts/device-kind';
 import { initializeSw } from '@/scripts/initialize-sw';
 import { reloadChannel } from '@/scripts/unison-reload';
 import { reactionPicker } from '@/scripts/reaction-picker';
@@ -92,7 +92,7 @@ window.addEventListener('resize', () => {
 //#endregion
 
 // If mobile, insert the viewport meta tag
-if (isMobile || window.innerWidth <= 1024) {
+if (['smartphone', 'tablet'].includes(deviceKind)) {
 	const viewport = document.getElementsByName('viewport').item(0);
 	viewport.setAttribute('content',
 		`${viewport.getAttribute('content')},minimum-scale=1,maximum-scale=1,user-scalable=no`);

packages/client/src/pages/settings/general.vue

@@ -12,6 +12,14 @@
 		</template>
 	</FormSelect>
 
+	<FormRadios v-model="overridedDeviceKind" class="_formBlock">
+		<template #label>{{ $ts.overridedDeviceKind }}</template>
+		<option :value="null">{{ $ts.auto }}</option>
+		<option value="smartphone"><i class="fas fa-mobile-alt"/> {{ $ts.smartphone }}</option>
+		<option value="tablet"><i class="fas fa-tablet-alt"/> {{ $ts.tablet }}</option>
+		<option value="desktop"><i class="fas fa-desktop"/> {{ $ts.desktop }}</option>
+	</FormRadios>
+
 	<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{ $ts.showFixedPostForm }}</FormSwitch>
 
 	<FormSection>
@@ -127,6 +135,7 @@ export default defineComponent({
 	},
 
 	computed: {
+		overridedDeviceKind: defaultStore.makeGetterSetter('overridedDeviceKind'),
 		serverDisconnectedBehavior: defaultStore.makeGetterSetter('serverDisconnectedBehavior'),
 		reduceAnimation: defaultStore.makeGetterSetter('animation', v => !v, v => !v),
 		useBlurEffectForModal: defaultStore.makeGetterSetter('useBlurEffectForModal'),
@@ -193,6 +202,10 @@ export default defineComponent({
 		instanceTicker() {
 			this.reloadAsk();
 		},
+
+		overridedDeviceKind() {
+			this.reloadAsk();
+		},
 	},
 
 	methods: {

packages/client/src/scripts/device-kind.ts

@@ -0,0 +1,10 @@
+import { defaultStore } from '@/store';
+
+const ua = navigator.userAgent.toLowerCase();
+const isTablet = /ipad/.test(ua) || (/mobile|iphone|android/.test(ua) && window.innerWidth > 700);
+const isSmartphone = !isTablet && /mobile|iphone|android/.test(ua);
+
+export const deviceKind = defaultStore.state.overridedDeviceKind ? defaultStore.state.overridedDeviceKind
+	: isSmartphone ? 'smartphone'
+	: isTablet ? 'tablet'
+	: 'desktop';

packages/client/src/scripts/is-mobile.ts

@@ -1,2 +0,0 @@
-const ua = navigator.userAgent.toLowerCase();
-export const isMobile = /mobile|iphone|ipad|android/.test(ua);

packages/client/src/store.ts

@@ -106,6 +106,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		}
 	},
 
+	overridedDeviceKind: {
+		where: 'device',
+		default: null as null | 'smartphone' | 'tablet' | 'desktop',
+	},
 	serverDisconnectedBehavior: {
 		where: 'device',
 		default: 'quiet' as 'quiet' | 'reload' | 'dialog'