From 40f8b5e7f574ef24a9674297ae5912e3961dac2d Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Tue, 14 Jan 2025 21:05:34 +0900
Subject: enhance(frontend): ユーザーページに「ファイル」タブを新設 (#15130)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 投稿したファイルの一覧をプロフィールページ内のタブで見れるようにしてみた (Otaku-Social#14)

* ギャラリー（ノート）の取得方法を変更、ページネーションに対応

* ギャラリー（ノート）が動作しない問題を修正

* ギャラリー（ノート）の名称変更

* styles

* GalleryFromPosts -> Files

* fix

* enhance: 既存のファイルコンテナの「もっと見る」をクリックしたらファイルタブに飛べるように

* Update Changelog

* 共通化

* spdx

* その他のメディアがちゃんとプレビューされるように

* fix(frontend): リストがセンシティブ設定を考慮するように

* arrayをsetに変更

* remove unused imports

* :art:

* :art:

* 画像以外のファイルのプレビューに対応したのでコメントを削除

* サムネイルをMkDriveFileThumbnailに統一

* v-panelに置き換え

* lint

---------

Co-authored-by: tmorio <morikapusan@morikapu-denki.com>
Co-authored-by: tmorio <20278135+tmorio@users.noreply.github.com>
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
---
 .../src/components/MkDriveFileThumbnail.vue        | 28 ++++++++++++++++------
 1 file changed, 21 insertions(+), 7 deletions(-)

(limited to 'packages/frontend/src/components/MkDriveFileThumbnail.vue')

diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue
index 3410a915c3..874d9b04cf 100644
--- a/packages/frontend/src/components/MkDriveFileThumbnail.vue
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue
@@ -5,13 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div
-	ref="thumbnail"
-	:class="[
-		$style.root,
-		{ [$style.sensitiveHighlight]: highlightWhenSensitive && file.isSensitive },
-	]"
+	v-panel
+	:class="[$style.root, {
+		[$style.sensitiveHighlight]: highlightWhenSensitive && file.isSensitive,
+		[$style.large]: large,
+	}]"
 >
-	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
+	<ImgWithBlurhash
+		v-if="isThumbnailAvailable"
+		:hash="file.blurhash"
+		:src="file.thumbnailUrl"
+		:alt="file.name"
+		:title="file.name"
+		:cover="fit !== 'contain'"
+		:forceBlurHash="forceBlurhash"
+	/>
 	<i v-else-if="is === 'image'" class="ti ti-photo" :class="$style.icon"></i>
 	<i v-else-if="is === 'video'" class="ti ti-video" :class="$style.icon"></i>
 	<i v-else-if="is === 'audio' || is === 'midi'" class="ti ti-file-music" :class="$style.icon"></i>
@@ -34,6 +42,8 @@ const props = defineProps<{
 	file: Misskey.entities.DriveFile;
 	fit: 'cover' | 'contain';
 	highlightWhenSensitive?: boolean;
+	forceBlurhash?: boolean;
+	large?: boolean;
 }>();
 
 const is = computed(() => {
@@ -60,7 +70,7 @@ const is = computed(() => {
 
 const isThumbnailAvailable = computed(() => {
 	return props.file.thumbnailUrl
-		? (is.value === 'image' as const || is.value === 'video')
+		? (is.value === 'image' || is.value === 'video')
 		: false;
 });
 </script>
@@ -101,4 +111,8 @@ const isThumbnailAvailable = computed(() => {
 	font-size: 32px;
 	color: #777;
 }
+
+.large .icon {
+	font-size: 40px;
+}
 </style>
-- 
cgit v1.2.3-freya


From 850d1d00054db27eb171eb879eb7b25ccd7bf4e7 Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 1 Feb 2025 13:51:45 +0900
Subject: fix(frontend): MkDriveFileThumbnail / MkNoteMediaGridの修正 (#15365)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): MkDriveFileThumbnailのpropsのタイポ修正

* Update Changelog

* fix: MkNoteMediaGridをデータセーバーに対応させる
---
 CHANGELOG.md                                              |  1 +
 packages/frontend/src/components/MkDriveFileThumbnail.vue |  2 +-
 packages/frontend/src/components/MkNoteMediaGrid.vue      | 14 ++++++++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)

(limited to 'packages/frontend/src/components/MkDriveFileThumbnail.vue')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07f392782f..601bf743bc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 
 ### Client
 - Fix: 一部環境でセンシティブなファイルを含むノートの非表示が効かない問題 
+- Fix: データセーバー有効時にもユーザーページの「ファイル」タブで画像が読み込まれてしまう問題を修正
 
 ### Server
 - Fix: 個別お知らせページのmetaタグ出力の条件が間違っていたのを修正
diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue
index 874d9b04cf..6e0ae36880 100644
--- a/packages/frontend/src/components/MkDriveFileThumbnail.vue
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:alt="file.name"
 		:title="file.name"
 		:cover="fit !== 'contain'"
-		:forceBlurHash="forceBlurhash"
+		:forceBlurhash="forceBlurhash"
 	/>
 	<i v-else-if="is === 'image'" class="ti ti-photo" :class="$style.icon"></i>
 	<i v-else-if="is === 'video'" class="ti ti-video" :class="$style.icon"></i>
diff --git a/packages/frontend/src/components/MkNoteMediaGrid.vue b/packages/frontend/src/components/MkNoteMediaGrid.vue
index 520421bfb7..bf105c3c27 100644
--- a/packages/frontend/src/components/MkNoteMediaGrid.vue
+++ b/packages/frontend/src/components/MkNoteMediaGrid.vue
@@ -6,7 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 	<template v-for="file in note.files">
 		<div
-			v-if="(defaultStore.state.nsfw === 'force' || file.isSensitive) && defaultStore.state.nsfw !== 'ignore' && !showingFiles.has(file.id)"
+			v-if="(((
+					(defaultStore.state.nsfw === 'force' || file.isSensitive) &&
+					defaultStore.state.nsfw !== 'ignore'
+				) || (defaultStore.state.dataSaver.media && file.type.startsWith('image/'))) &&
+				!showingFiles.has(file.id)
+			)"
 			:class="[$style.filePreview, { [$style.square]: square }]"
 			@click="showingFiles.add(file.id)"
 		>
@@ -20,7 +25,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			/>
 			<div :class="$style.sensitive">
 				<div>
-					<div><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}</div>
+					<div v-if="file.isSensitive"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media && file.size ? ` (${bytes(file.size)})` : '' }}</div>
+					<div v-else><i class="ti ti-photo"></i> {{ defaultStore.state.dataSaver.media && file.size ? bytes(file.size) : i18n.ts.image }}</div>
 					<div>{{ i18n.ts.clickToShow }}</div>
 				</div>
 			</div>
@@ -43,6 +49,7 @@ import { notePage } from '@/filters/note.js';
 import { i18n } from '@/i18n.js';
 import * as Misskey from 'misskey-js';
 import { defaultStore } from '@/store.js';
+import bytes from '@/filters/bytes.js';
 
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 
@@ -91,6 +98,9 @@ const showingFiles = ref<Set<string>>(new Set());
 	display: grid;
   place-items: center;
 	font-size: 0.8em;
+	text-align: center;
+	padding: 8px;
+	box-sizing: border-box;
 	color: #fff;
 	background: rgba(0, 0, 0, 0.5);
 	backdrop-filter: blur(5px);
-- 
cgit v1.2.3-freya