From 67ecb6e027037082dcf96f8e64098e049e03420d Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 2 Oct 2024 05:32:59 +0900
Subject: [PATCH] fix & tweak 01351529
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix

enhance: 모바일 기기에서의 배치 개선

test
---
 .../pages/user/index.timeline.files.files.vue | 142 ++++++++++++++++
 .../src/pages/user/index.timeline.files.vue   | 156 ++++--------------
 .../src/pages/user/index.timeline.vue         |   7 +-
 3 files changed, 176 insertions(+), 129 deletions(-)
 create mode 100644 packages/frontend/src/pages/user/index.timeline.files.files.vue

diff --git a/packages/frontend/src/pages/user/index.timeline.files.files.vue b/packages/frontend/src/pages/user/index.timeline.files.files.vue
new file mode 100644
index 0000000000..e915b4dce8
--- /dev/null
+++ b/packages/frontend/src/pages/user/index.timeline.files.files.vue
@@ -0,0 +1,142 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="files.files.length > 0">
+	<div>
+		<template v-for="file in files.files" :key="files.id + file.id">
+			<div v-if="file.isSensitive && !showingFiles.includes(file.id)" :class="$style.img" @click="showingFiles.push(file.id)">
+				<!-- TODO: 画像以外のファイルに対応 -->
+				<ImgWithBlurhash :class="$style.sensitiveImg" :hash="file.blurhash" :src="thumbnail(file)" :title="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(files)">
+				<!-- TODO: 画像以外のファイルに対応 -->
+				<ImgWithBlurhash
+					:hash="file.blurhash"
+					:src="thumbnail(file)"
+					:title="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>
+</div>
+</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 ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import MkA from '@/components/global/MkA.vue';
+import { defaultStore } from '@/store.js';
+import { i18n } from '@/i18n.js';
+
+const props = defineProps<{
+	user: Misskey.entities.UserDetailed;
+	files: 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);
+	}
+});
+
+onUnmounted(() => {
+	if (defaultStore.state.showingAnimatedImages === 'inactive') {
+		window.removeEventListener('mousemove', resetTimer);
+		window.removeEventListener('touchstart', resetTimer);
+		window.removeEventListener('touchend', resetTimer);
+	}
+});
+</script>
+
+<style lang="scss" module>
+.img {
+	display: flex;
+	position: relative;
+	height: 256px;
+	border-radius: 3px;
+	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;
+}
+
+@container (max-width: 785px) {
+	.img {
+		height: 192px;
+	}
+}
+
+@container (max-width: 660px) {
+	.img {
+		height: 160px;
+	}
+}
+
+
+@container (max-width: 530px) {
+	.img {
+		height: 145px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/user/index.timeline.files.vue b/packages/frontend/src/pages/user/index.timeline.files.vue
index 49001a2e8b..b6d95263e2 100644
--- a/packages/frontend/src/pages/user/index.timeline.files.vue
+++ b/packages/frontend/src/pages/user/index.timeline.files.vue
@@ -5,156 +5,62 @@ 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>
+	<template #empty>
+		<div class="_fullinfo">
+			<img :src="infoImageUrl" class="_ghost"/>
+			<div>{{ i18n.ts.noNotes }}</div>
 		</div>
-		<p v-if="!fetching && files.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p>
-	</div>
+	</template>
+
+	<template #default="{ items: user }">
+		<div :class="$style.stream">
+			<XFiles v-for="item in user" :key="item.user.id" :user="item.user" :files="item"/>
+		</div>
+	</template>
 </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 { shallowRef } from 'vue';
+import XFiles from '@/pages/user/index.timeline.files.files.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
+import { i18n } from '@/i18n.js';
+import { infoImageUrl } from '@/instance.js';
 
 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);
-	}
+const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
 
-	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);
-	}
+defineExpose({
+	pagingComponent,
 });
 </script>
 
 <style lang="scss" module>
-.root {
-	padding: 8px;
-}
-
 .stream {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
 	grid-gap: 6px;
 }
 
-.img {
-	position: relative;
-	height: 256px;
-	border-radius: 6px;
-	overflow: clip;
+@container (max-width: 785px) {
+	.stream {
+		grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
+	}
 }
 
-.empty {
-	margin: 0;
-	padding: 16px;
-	text-align: center;
+@container (max-width: 660px) {
+	.stream {
+		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+	}
 }
 
-.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;
+@container (max-width: 530px) {
+	.stream {
+		grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
+	}
 }
 </style>
diff --git a/packages/frontend/src/pages/user/index.timeline.vue b/packages/frontend/src/pages/user/index.timeline.vue
index 4c12dce846..3d6f11e36f 100644
--- a/packages/frontend/src/pages/user/index.timeline.vue
+++ b/packages/frontend/src/pages/user/index.timeline.vue
@@ -21,23 +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"/>
+	<XFiles v-if="tab === 'files' && defaultStore.state.filesGridLayoutInUserPage" :pagination="pagination"/>
 	<MkNotes v-else :noGap="true" :pagination="pagination" :class="$style.tl"/>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, defineAsyncComponent } from 'vue';
+import { ref, computed } 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 XFiles from '@/pages/user/index.timeline.files.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;
 }>();