feat: 사용자 페이지의 미디어 탭을 그리드 레이아웃으로 설정할 수 있음 (kokonect-link/cherrypick#494)

CHANGELOG_CHERRYPICK.md

@@ -41,6 +41,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 	- 서버 차단, 서버 사일런스, 서버 미디어 사일런스
 - Feat: 노트 동작 버튼을 개인화할 수 있음 (kokonect-link/cherrypick#501)
 - Feat: 답글 대상 노트의 반투명 옵션을 선택할 수 있음 (kokonect-link/cherrypick#495)
+- Feat: 사용자 페이지의 미디어 탭을 그리드 레이아웃으로 설정할 수 있음 (kokonect-link/cherrypick#494)
 
 ### Client
 - Enhance: CherryPick 업데이트 페이지를 제어판 목록에 추가함

locales/en-US.yml

@@ -1,5 +1,7 @@
 ---
 _lang_: "English"
+filesGridLayoutInUserPage: "Change the media tab to grid layout"
+filesGridLayoutInUserPageDescription: "When this function is turned on, the Media tab on your page is shown in album format.\nTurning it off will change to the original note timeline."
 showReplyTargetNoteInSemiTransparent: "Show reply target note in semi-transparent"
 noteFooterButton: "Show action buttons in notes"
 collapseReplies: "Collapse notes written in reply"

locales/index.d.ts

@@ -13,6 +13,15 @@ export interface Locale extends ILocale {
      * 日本語
      */
     "_lang_": string;
+    /**
+     * メディアタブをグリッドレイアウトに変更
+     */
+    "filesGridLayoutInUserPage": string;
+    /**
+     * この設定をオンにすると、ユーザーページのメディアタブがアルバム形式で表示されます。
+     * オフにすると、元のノートのタイムラインに変更されます。
+     */
+    "filesGridLayoutInUserPageDescription": string;
     /**
      * 返信対象ノートを半透明に表示
      */

locales/ja-JP.yml

@@ -1,5 +1,7 @@
 _lang_: "日本語"
 
+filesGridLayoutInUserPage: "メディアタブをグリッドレイアウトに変更"
+filesGridLayoutInUserPageDescription: "この設定をオンにすると、ユーザーページのメディアタブがアルバム形式で表示されます。\nオフにすると、元のノートのタイムラインに変更されます。"
 showReplyTargetNoteInSemiTransparent: "返信対象ノートを半透明に表示"
 noteFooterButton: "ノートにアクションボタンを表示"
 collapseReplies: "返信のリノートのスマート省略"

locales/ko-KR.yml

@@ -1,5 +1,7 @@
 ---
 _lang_: "한국어"
+filesGridLayoutInUserPage: "미디어 탭을 그리드 레이아웃으로 변경"
+filesGridLayoutInUserPageDescription: "이 설정을 켜면 사용자 페이지의 미디어 탭이 앨범 형식으로 보여져요.\n끄면 원래의 노트 타임라인으로 변경돼요."
 showReplyTargetNoteInSemiTransparent: "답글 대상 노트를 반투명하게 표시"
 noteFooterButton: "노트 동작 버튼"
 collapseReplies: "답글로 작성된 노트 간략화하기"

packages/frontend/src/pages/settings/general.vue

@@ -188,6 +188,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="enableSeasonalScreenEffect">{{ i18n.ts.seasonalScreenEffect }}</MkSwitch>
 				<MkSwitch v-model="useNativeUIForVideoAudioPlayer">{{ i18n.ts.useNativeUIForVideoAudioPlayer }}</MkSwitch>
 				<MkSwitch v-model="showUnreadNotificationsCount">{{ i18n.ts.showUnreadNotificationsCount }}</MkSwitch>
+				<MkSwitch v-model="filesGridLayoutInUserPage">
+					{{ i18n.ts.filesGridLayoutInUserPage }} <span class="_beta">CherryPick</span>
+					<template #caption>{{ i18n.ts.filesGridLayoutInUserPageDescription }}</template>
+				</MkSwitch>
 			</div>
 
 			<MkSelect v-model="menuStyle">
@@ -467,6 +471,7 @@ const alwaysConfirmFollow = computed(defaultStore.makeGetterSetter('alwaysConfir
 const confirmWhenRevealingSensitiveMedia = computed(defaultStore.makeGetterSetter('confirmWhenRevealingSensitiveMedia'));
 const contextMenu = computed(defaultStore.makeGetterSetter('contextMenu'));
 const showUnreadNotificationsCount = computed(defaultStore.makeGetterSetter('showUnreadNotificationsCount'));
+const filesGridLayoutInUserPage = computed(defaultStore.makeGetterSetter('filesGridLayoutInUserPage'));
 const newNoteReceivedNotificationBehavior = computed(defaultStore.makeGetterSetter('newNoteReceivedNotificationBehavior'));
 const fontSize = computed(defaultStore.makeGetterSetter('fontSize'));
 const collapseLongNoteContent = computed(defaultStore.makeGetterSetter('collapseLongNoteContent'));
@@ -540,6 +545,7 @@ watch([
 	keepScreenOn,
 	disableStreamingTimeline,
 	showUnreadNotificationsCount,
+	filesGridLayoutInUserPage,
 	showFixedPostFormInReplies,
 	showingAnimatedImages,
 	enableSeasonalScreenEffect,

packages/frontend/src/pages/settings/preferences-backups.vue

@@ -123,12 +123,13 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'vibrateChat',
 	'vibrateChatBg',
 	'vibrateSystem',
-	'hideAvatarsInNote',
-	'newNoteReceivedNotificationBehavior',
 	'collapseReplies',
 	'collapseDefault',
+	'filesGridLayoutInUserPage',
+	'newNoteReceivedNotificationBehavior',
 	'requireRefreshBehavior',
 	'bannerDisplay',
+	'hideAvatarsInNote',
 	'showTranslateButtonInNote',
 	'enableAbsoluteTime',
 	'enableMarkByDate',

packages/frontend/src/pages/user/index.timeline.files.vue

@@ -0,0 +1,160 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkPagination ref="pagingComponent" :pagination="pagination" :disableAutoLoad="disableAutoLoad">
+	<div :class="$style.root">
+		<MkLoading v-if="fetching"/>
+		<div v-if="!fetching && files.length > 0" :class="$style.stream">
+			<template v-for="file in files" :key="file.note.id + file.file.id">
+				<div v-if="file.file.isSensitive && !showingFiles.includes(file.file.id)" :class="$style.img" @click="showingFiles.push(file.file.id)">
+					<!-- TODO: 画像以外のファイルに対応 -->
+					<ImgWithBlurhash :class="$style.sensitiveImg" :hash="file.file.blurhash" :src="thumbnail(file.file)" :title="file.file.name" :forceBlurhash="true"/>
+					<div :class="$style.sensitive">
+						<div>
+							<div><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}</div>
+							<div>{{ i18n.ts.clickToShow }}</div>
+						</div>
+					</div>
+				</div>
+				<MkA v-else :class="$style.img" :to="notePage(file.note)">
+					<!-- TODO: 画像以外のファイルに対応 -->
+					<ImgWithBlurhash
+						:hash="file.file.blurhash"
+						:src="thumbnail(file.file)"
+						:title="file.file.name"
+						@mouseover="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = true : ''"
+						@mouseout="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = false : ''"
+						@touchstart="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = true : ''"
+						@touchend="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = false : ''"
+					/>
+				</MkA>
+			</template>
+		</div>
+		<p v-if="!fetching && files.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p>
+	</div>
+</MkPagination>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import * as Misskey from 'cherrypick-js';
+import { getStaticImageUrl } from '@/scripts/media-proxy.js';
+import { notePage } from '@/filters/note.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import MkA from '@/components/global/MkA.vue';
+import MkLoading from '@/components/global/MkLoading.vue';
+import { defaultStore } from '@/store.js';
+import { i18n } from '@/i18n.js';
+import MkPagination, { Paging } from '@/components/MkPagination.vue';
+
+const props = defineProps<{
+	pagination: Paging;
+	user: Misskey.entities.UserDetailed;
+	disableAutoLoad?: boolean;
+}>();
+
+const fetching = ref(true);
+const files = ref<{
+	note: Misskey.entities.Note;
+	file: Misskey.entities.DriveFile;
+}[]>([]);
+const showingFiles = ref<string[]>([]);
+
+const playAnimation = ref(true);
+if (defaultStore.state.showingAnimatedImages === 'interaction') playAnimation.value = false;
+let playAnimationTimer = setTimeout(() => playAnimation.value = false, 5000);
+
+function thumbnail(image: Misskey.entities.DriveFile): string | null {
+	return (defaultStore.state.disableShowingAnimatedImages || defaultStore.state.dataSaver.media) || (['interaction', 'inactive'].includes(<string>defaultStore.state.showingAnimatedImages) && !playAnimation.value)
+		? getStaticImageUrl(image.url)
+		: image.thumbnailUrl;
+}
+
+function resetTimer() {
+	playAnimation.value = true;
+	clearTimeout(playAnimationTimer);
+	playAnimationTimer = setTimeout(() => playAnimation.value = false, 5000);
+}
+
+onMounted(() => {
+	if (defaultStore.state.showingAnimatedImages === 'inactive') {
+		window.addEventListener('mousemove', resetTimer);
+		window.addEventListener('touchstart', resetTimer);
+		window.addEventListener('touchend', resetTimer);
+	}
+
+	misskeyApi('users/notes', {
+		userId: props.user.id,
+		withFiles: true,
+		limit: 30,
+	}).then(notes => {
+		for (const note of notes) {
+			for (const file of note.files) {
+				files.value.push({
+					note,
+					file,
+				});
+			}
+		}
+		fetching.value = false;
+	});
+});
+
+onUnmounted(() => {
+	if (defaultStore.state.showingAnimatedImages === 'inactive') {
+		window.removeEventListener('mousemove', resetTimer);
+		window.removeEventListener('touchstart', resetTimer);
+		window.removeEventListener('touchend', resetTimer);
+	}
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 8px;
+}
+
+.stream {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
+	grid-gap: 6px;
+}
+
+.img {
+	position: relative;
+	height: 256px;
+	border-radius: 6px;
+	overflow: clip;
+}
+
+.empty {
+	margin: 0;
+	padding: 16px;
+	text-align: center;
+}
+
+.sensitiveImg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	filter: brightness(0.7);
+}
+.sensitive {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: grid;
+  place-items: center;
+	font-size: 0.8em;
+	color: #fff;
+	cursor: pointer;
+}
+</style>

packages/frontend/src/pages/user/index.timeline.vue

@@ -21,18 +21,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkTab>
 	</template>
 	<XReactions v-if="tab === 'reactions'" :user="user"/>
+	<XFiles v-if="tab === 'files' && defaultStore.state.filesGridLayoutInUserPage" :key="user.id" :pagination="pagination" :user="user"/>
 	<MkNotes v-else :noGap="true" :pagination="pagination" :class="$style.tl"/>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, defineAsyncComponent } from 'vue';
 import * as Misskey from 'cherrypick-js';
 import MkNotes from '@/components/MkNotes.vue';
 import MkTab from '@/components/MkTab.vue';
 import XReactions from '@/pages/user/reactions.vue';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
+import { defaultStore } from '@/store.js';
+
+const XFiles = defineAsyncComponent(() => import('./index.timeline.files.vue'));
 
 const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
@@ -46,6 +50,13 @@ const pagination = computed(() => tab.value === 'featured' ? {
 	params: {
 		userId: props.user.id,
 	},
+} : tab.value === 'files' && defaultStore.state.filesGridLayoutInUserPage ? {
+	endpoint: 'users/notes' as const,
+	limit: 30,
+	params: {
+		userId: props.user.id,
+		withFiles: true,
+	},
 } : {
 	endpoint: 'users/notes' as const,
 	limit: 10,

packages/frontend/src/store.ts

@@ -534,6 +534,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: false,
 	},
+	filesGridLayoutInUserPage: {
+		where: 'device',
+		default: true,
+	},
 	newNoteReceivedNotificationBehavior: {
 		where: 'device',
 		default: 'count' as 'default' | 'count' | 'none',