enhance(frontend): MkLightbox: ピクセルアート拡大モードを追加 (#17845)

* enhance(frontend): MkLightbox: ピクセルアート拡大モードを追加

* Update Changelog

* fix lint

* fix typo

* fix

CHANGELOG.md

@@ -4,6 +4,7 @@
 -
 
 ### Client
+- Enhance: 画像ビューワーで、ピクセルアートの拡大表示に適したモードを追加（画像ビューワー起動時に画面上の詳細メニューから有効化できます）
 - Fix: 画像の表示時にBlurhashが描画されない場合があるのを修正
 
 ### Server

locales/ja-JP.yml

@@ -1421,6 +1421,7 @@ append: "末尾に追加"
 prepend: "先頭に追加"
 urlPreviewSensitiveList: "サムネイルの表示を制限するURL"
 urlPreviewSensitiveListDescription: "スペースで区切るとAND指定になり、改行で区切るとOR指定になります。スラッシュで囲むと正規表現になります。一致した場合、サムネイルが表示されなくなります。"
+pixelatedZoom: "ピクセルアート拡大モード"
 
 _imageEditing:
   _vars:

packages/frontend/src/components/MkLightbox.item.vue

@@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template v-if="activated">
 						<img
 							v-if="content.type === 'image'"
-							:class="$style.content"
+							:class="[$style.content, { [$style.pixelatedZoom]: pixelatedZoom }]"
 							:src="content.url"
 							:alt="content.file?.comment ?? undefined"
 							draggable="false"
@@ -208,6 +208,10 @@ const emit = defineEmits<{
 	(ev: 'cancelHorizontalSwipe'): void;
 }>();
 
+// 一回のビューワー操作内では状態を維持するためにmodelで親に伝えて親で状態を保持する
+// TODO: drivefileのproperties側にピクセルアートかどうかのフラグを立ててそちらを元にデフォルトの挙動を決めるようにする
+const pixelatedZoom = defineModel<boolean>('pixelatedZoom', { required: true });
+
 const rootEl = useTemplateRef('rootEl');
 const mainEl = useTemplateRef('mainEl');
 const videoEl = useTemplateRef('videoEl');
@@ -880,6 +884,11 @@ function openMenu(ev: PointerEvent) {
 	});
 
 	menu.push({
+		type: 'switch',
+		text: i18n.ts.pixelatedZoom,
+		icon: 'ti ti-grain',
+		ref: pixelatedZoom,
+	}, {
 		text: i18n.ts.hide,
 		icon: 'ti ti-eye-off',
 		action: () => {
@@ -956,6 +965,10 @@ defineExpose({
 	object-fit: contain;
 }
 
+.pixelatedZoom {
+	image-rendering: pixelated;
+}
+
 .video {
 	display: block;
 	user-select: none;

packages/frontend/src/components/MkLightbox.vue

@@ -28,6 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div v-for="(content, i) in contents" :key="content.url" ref="itemEl" :class="$style.item">
 					<XItem
 						:ref="(comp) => { items.set(i, comp as InstanceType<typeof XItem>); }"
+						v-model:pixelatedZoom="pixelatedZoom"
 						:content="content"
 						:initiallyOpened="i === (props.defaultIndex ?? 0)"
 						:activated="activatedIndexes.has(i)"
@@ -72,6 +73,8 @@ const activatedIndexes = ref(new Set<number>());
 const items = new Map<number, InstanceType<typeof XItem> | null>();
 const currentIndex = ref(props.defaultIndex ?? 0);
 
+const pixelatedZoom = ref(false);
+
 watch(currentIndex, (newIndex, oldIndex) => {
 	activatedIndexes.value.add(newIndex);
 

packages/i18n/src/autogen/locale.ts

@@ -5699,6 +5699,10 @@ export interface Locale extends ILocale {
      * スペースで区切るとAND指定になり、改行で区切るとOR指定になります。スラッシュで囲むと正規表現になります。一致した場合、サムネイルが表示されなくなります。
      */
     "urlPreviewSensitiveListDescription": string;
+    /**
+     * ピクセルアート拡大モード
+     */
+    "pixelatedZoom": string;
     "_imageEditing": {
         "_vars": {
             /**