From e75ae15b086dad768b72088b789f08e96fef7b07 Mon Sep 17 00:00:00 2001
From: caipira113 <caipira@libnare.net>
Date: Sat, 4 Nov 2023 22:24:52 +0900
Subject: [PATCH] doubleClickToShow

---
 locales/en-US.yml                                 | 1 +
 locales/index.d.ts                                | 1 +
 locales/ja-JP.yml                                 | 1 +
 locales/ko-KR.yml                                 | 1 +
 packages/frontend/src/components/MkMediaImage.vue | 8 +++++++-
 packages/frontend/src/components/MkMediaVideo.vue | 8 +++++++-
 6 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 668ef2c18f..b7fc45cb34 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -173,6 +173,7 @@ pinnedNote: "Pinned note"
 pinned: "Pin to profile"
 you: "You"
 clickToShow: "Click to show"
+doubleClickToShow: "Double click to show"
 sensitive: "Sensitive"
 add: "Add"
 reaction: "Reactions"
diff --git a/locales/index.d.ts b/locales/index.d.ts
index b6cda74ef5..4ca0c57ad8 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -176,6 +176,7 @@ export interface Locale {
     "pinned": string;
     "you": string;
     "clickToShow": string;
+    "doubleClickToShow": string;
     "sensitive": string;
     "add": string;
     "reaction": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a7ee81b8bd..c79007061d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -173,6 +173,7 @@ pinnedNote: "ピン留めされたノート"
 pinned: "ピン留め"
 you: "あなた"
 clickToShow: "クリックして表示"
+doubleClickToShow: "ダブルクリックして表示"
 sensitive: "センシティブ"
 add: "追加"
 reaction: "リアクション"
diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
index a9a7292751..24ac1f5cd9 100644
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -173,6 +173,7 @@ pinnedNote: "고정해놓은 노트"
 pinned: "프로필에 고정"
 you: "나"
 clickToShow: "클릭하여 보기"
+doubleClickToShow: "두 번 탭하여 보기"
 sensitive: "열람 주의"
 add: "추가"
 reaction: "리액션"
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 1dc15b2c8c..8c43fd2ca8 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div :class="$style.hiddenTextWrapper">
 				<b v-if="image.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.image}${image.size ? ' ' + bytes(image.size) : ''})` : '' }}</b>
 				<b v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.enableDataSaverMode && image.size ? bytes(image.size) : i18n.ts.image }}</b>
-				<span v-if="controls" style="display: block;">{{ i18n.ts.clickToShow }}</span>
+				<span v-if="controls" style="display: block;">{{ clickToShowMessage }}</span>
 			</div>
 		</div>
 	</template>
@@ -91,6 +91,12 @@ const url = $computed(() => (props.raw || defaultStore.state.loadRawImages)
 		: props.image.thumbnailUrl,
 );
 
+let clickToShowMessage = $computed(() =>
+    defaultStore.state.nsfwOpenBehavior === 'click' ? i18n.ts.clickToShow
+        : defaultStore.state.nsfwOpenBehavior === 'doubleClick' ? i18n.ts.doubleClickToShow
+            : ''
+);
+
 function onClick(ev: MouseEvent) {
 	if (!props.controls) {
 		return;
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index e3bf3d247d..7348da4862 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.sensitive">
 		<b v-if="video.isSensitive" style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b>
 		<b v-else style="display: block;"><i class="ti ti-movie"></i> {{ defaultStore.state.enableDataSaverMode && video.size ? bytes(video.size) : i18n.ts.video }}</b>
-		<span>{{ i18n.ts.clickToShow }}</span>
+		<span>{{ clickToShowMessage }}</span>
 	</div>
 </div>
 <div v-else :class="[$style.visible, (video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitiveContainer]" data-is-hidden="false">
@@ -46,6 +46,12 @@ const props = defineProps<{
 
 const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enableDataSaverMode) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore'));
 
+let clickToShowMessage = $computed(() =>
+    defaultStore.state.nsfwOpenBehavior === 'click' ? i18n.ts.clickToShow
+        : defaultStore.state.nsfwOpenBehavior === 'doubleClick' ? i18n.ts.doubleClickToShow
+            : ''
+);
+
 function onClick(ev: MouseEvent) {
 	if (!hide.value) return;
 	if (defaultStore.state.nsfwOpenBehavior === 'doubleClick') {