NSFWフラグの付いた画像と動画で年齢確認ダイアログを出す

CHANGELOG_yojo.md

@@ -30,6 +30,7 @@ Cherrypick 4.9.0
 (Cherry-picked from https://github.com/1673beta/cherrypick/pull/73)
 - Enhance: 絵文字のインポート時にリモートから取得した値で埋めた編集ダイアログを表示する
 - Fix: メディアタイムラインの可視性を変更できない問題を修正 [#54](https://github.com/yojo-art/cherrypick/issues/54)
+- Feat: NSFWフラグの付いた画像と動画で年齢確認ダイアログを出す [#245](https://github.com/yojo-art/cherrypick/pull/245)
 
 ### Server
 -

locales/index.d.ts

@@ -5489,6 +5489,16 @@ export interface Locale extends ILocale {
      * マスコット画像のリンク
      */
     "mascotImageUrl": string;
+    "_checkR18": {
+        /**
+         * 成人指定のメディアです
+         */
+        "title": string;
+        /**
+         * あなたは18歳以上ですか？
+         */
+        "description": string;
+    };
     "_nsfwOpenBehavior": {
         /**
          * タップして開く

locales/ja-JP.yml

@@ -1368,6 +1368,9 @@ _official_tag:
   navbar: "公式タグ"
   adminTopInfo: "優先度の値が小さいものが上に表示されます"
 mascotImageUrl: "マスコット画像のリンク"
+_checkR18:
+  title: "成人指定のメディアです"
+  description: "あなたは18歳以上ですか？"
 
 _nsfwOpenBehavior:
   click: "タップして開く"

packages/frontend/src/components/MkMediaImage.vue

@@ -65,6 +65,7 @@ import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { $i, iAmModerator } from '@/account.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import { confirmR18 } from '@/scripts/check-r18.js';
 
 const props = withDefaults(defineProps<{
 	image: Misskey.entities.DriveFile;
@@ -99,9 +100,10 @@ const clickToShowMessage = computed(() => defaultStore.state.nsfwOpenBehavior ==
 		: '',
 );
 
-function onClick(ev: MouseEvent) {
+async function onClick(ev: MouseEvent) {
 	if (!props.controls) return;
 	if (!hide.value) return;
+	if (!await confirmR18()) return;
 	if (defaultStore.state.nsfwOpenBehavior === 'doubleClick') os.popup(MkRippleEffect, { x: ev.clientX, y: ev.clientY }, {}, 'end');
 	if (defaultStore.state.nsfwOpenBehavior === 'click') hide.value = false;
 }

packages/frontend/src/components/MkMediaVideo.vue

@@ -122,6 +122,7 @@ import hasAudio from '@/scripts/media-has-audio.js';
 import MkMediaRange from '@/components/MkMediaRange.vue';
 import { $i, iAmModerator } from '@/account.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import { confirmR18 } from '@/scripts/check-r18.js';
 
 const props = defineProps<{
 	video: Misskey.entities.DriveFile;
@@ -172,9 +173,9 @@ const clickToShowMessage = computed(() => defaultStore.state.nsfwOpenBehavior ==
 		: '',
 );
 
-function onClick(ev: MouseEvent) {
+async function onClick(ev: MouseEvent) {
 	if (!hide.value) return;
-	else hide.value = false;
+	if (!await confirmR18()) return;
 	if (defaultStore.state.nsfwOpenBehavior === 'doubleClick') os.popup(MkRippleEffect, { x: ev.clientX, y: ev.clientY }, {}, 'end');
 	if (defaultStore.state.nsfwOpenBehavior === 'click') hide.value = false;
 }

packages/frontend/src/scripts/check-r18.ts

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project, yojo-art team
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+
+export async function confirmR18() {
+	if (localStorage.getItem('checkR18') === 'true') {
+		//確認処理を済ませてる場合
+		return true;
+	} else {
+		const { canceled } = await os.confirm({
+			type: 'warning',
+			title: i18n.ts._checkR18.title,
+			text: i18n.ts._checkR18.description,
+			okText: i18n.ts.yes,
+			cancelText: i18n.ts.no,
+		});
+		if (canceled) {
+			//いいえ18歳未満です
+			return false;
+		}
+		//はい18禁コンテンツの閲覧を望みます
+		localStorage.setItem('checkR18', 'true');
+		return true;
+	}
+}

packages/frontend/src/scripts/import-emoji.ts

@@ -1,3 +1,7 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project, yojo-art team
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 export async function importEmojiMeta(emoji, host:string) {
 	emoji.category = '取得失敗';
 	try {