enhance(frontend): 진동 개선

CHANGELOG_CHERRYPICK.md

@@ -49,6 +49,9 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Enhance: 리모트 서버와 동일한 이모지가 존재하지 않는 경우 '이모지 복사'를 비활성화함
 - Enhance: 아이콘 장식을 바로 업로드 하거나 드라이브에서 불러올 수 있음 ([Secineralyr/misskey.dream@e358212d](https://github.com/Secineralyr/misskey.dream/commit/e358212da93256749e31d9e0ca9dd2ed37fd548e), [Secineralyr/misskey.dream@52592fea](https://github.com/Secineralyr/misskey.dream/commit/52592fea52684497ba7e07f173aac2b1083afcb1))
 - Enhance: 클라이언트 언어와 노트 본문의 언어가 같으면 번역 버튼을 표시하지 않음
+- Enhance: 진동 개선
+  - 진동을 사용할 수 없는 환경에서 스위치를 조작할 수 없도록 비활성화
+  - 진동을 사용할 수 없는 이유를 보다 명확하게 표시하도록 개선
 - Fix: '모달 배경색 제거' 옵션이 이모지 피커에 반영되지 않음
 - Fix: 열람 주의로 설정된 노트의 반응이 더 보기를 눌러야 표시됨
 

locales/en-US.yml

@@ -1,5 +1,6 @@
 ---
 _lang_: "English"
+cannotBeUsedFunc: "This feature is currently unavailable."
 maxinumLayerError: "You cannot stack more than 6 layers. Please delete other layers."
 layer: "Layer"
 Xcoordinate: "X-Coordinate"

locales/index.d.ts

@@ -3,6 +3,7 @@
 // Do not edit this file directly.
 export interface Locale {
     "_lang_": string;
+    "cannotBeUsedFunc": string;
     "maxinumLayerError": string;
     "layer": string;
     "Xcoordinate": string;

locales/ja-JP.yml

@@ -1,5 +1,6 @@
 _lang_: "日本語"
 
+cannotBeUsedFunc: "この機能は現在使用できません。"
 maxinumLayerError: "6枚以上重ねることはできません。他のレイヤーを削除してください。"
 layer: "レイヤー"
 Xcoordinate: "X座標"

locales/ko-KR.yml

@@ -1,5 +1,6 @@
 ---
 _lang_: "한국어"
+cannotBeUsedFunc: "이 기능은 현재 사용할 수 없어요."
 maxinumLayerError: "레이어는 6장 이상 겹칠 수 없어요. 다른 레이어를 삭제해 주세요."
 layer: "레이어"
 Xcoordinate: "X 좌표"
@@ -630,7 +631,7 @@ sound: "소리"
 vibrations: "진동"
 soundsAndVibrations: "소리 및 진동"
 playVibrations: "진동 재생"
-playVibrationsDescription: "이 기능은 iOS/iPadOS에서는 지원되지 않아요."
+playVibrationsDescription: "이 기능을 지원하지 않는 브라우저이거나 디바이스가 iOS/iPadOS인 경우에는 지원되지 않아요."
 listen: "듣기"
 none: "없음"
 showInPage: "페이지로 보기"

packages/frontend/src/pages/settings/sounds-and-vibrations.vue

@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<FormSection>
 		<template #label>{{ i18n.ts.vibrations }} <span class="_beta">CherryPick</span></template>
 		<div class="_gaps_s">
-			<MkSwitch v-model="vibrate" @click="demoVibrate()">{{ i18n.ts.playVibrations }}<template #caption>{{ i18n.ts.playVibrationsDescription }}</template></MkSwitch>
+			<MkSwitch v-model="vibrate" :disabled="ua" @click="demoVibrate()">{{ i18n.ts.playVibrations }}<template v-if="ua" #caption>{{ i18n.ts.cannotBeUsedFunc }} <a href="#" class="_link" @click="learnMorePlayVibrations">{{ i18n.ts.learnMore }}</a></template></MkSwitch>
 			<MkSwitch v-if="vibrate" v-model="vibrateNote">{{ i18n.ts._vibrations.note }}</MkSwitch>
 			<MkSwitch v-if="vibrate" v-model="vibrateNotification">{{ i18n.ts._vibrations.notification }}</MkSwitch>
 			<MkSwitch v-if="vibrate" v-model="vibrateChat">{{ i18n.ts._vibrations.chat }}</MkSwitch>
@@ -62,6 +62,8 @@ import { operationTypes } from '@/scripts/sound.js';
 import { defaultStore } from '@/store.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
 
+const ua = /ipad|iphone/.test(navigator.userAgent.toLowerCase()) || !window.navigator.vibrate;
+
 const notUseSound = computed(defaultStore.makeGetterSetter('sound_notUseSound'));
 const useSoundOnlyWhenActive = computed(defaultStore.makeGetterSetter('sound_useSoundOnlyWhenActive'));
 const masterVolume = computed(defaultStore.makeGetterSetter('sound_masterVolume'));
@@ -132,6 +134,13 @@ function demoVibrate() {
 	window.navigator.vibrate(100);
 }
 
+function learnMorePlayVibrations() {
+	os.alert({
+		type: 'info',
+		text: i18n.ts.playVibrationsDescription,
+	});
+}
+
 watch([
 	vibrateSystem,
 ], async () => {

packages/frontend/src/store.ts

@@ -574,7 +574,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	// - Settings/Sounds & Vibrations
 	vibrate: {
 		where: 'device',
-		default: true,
+		default: !/ipad|iphone/.test(navigator.userAgent.toLowerCase()) && window.navigator.vibrate,
 	},
 	vibrateNote: {
 		where: 'device',