new media list layout

packages/client/src/components/MkImgWithBlurhash.vue

@@ -1,21 +1,22 @@
 <template>
-	<div class="xubzgfgb" :class="{ cover }" :title="title">
+	<canvas
-		<canvas
+		v-if="!loaded"
-			v-if="!loaded"
+		ref="canvas"
-			ref="canvas"
+		:width="size"
-			:width="size"
+		:height="size"
-			:height="size"
+		:title="title"
-			:title="title"
+	/>
-		/>
+	<img
-		<img
+		v-if="src"
-			v-if="src"
+		:src="src"
-			:src="src"
+		:title="title"
-			:title="title"
+		:type="type"
-			:type="type"
+		:alt="alt"
-			:alt="alt"
+		:class="{ cover }"
-			@load="onLoad"
+		:style="{ 'object-fit': cover ? 'cover' : null }"
-		/>
+		loading="lazy"
-	</div>
+		@load="onLoad"
+	/>
 </template>
 
 <script lang="ts" setup>
@@ -64,31 +65,20 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.xubzgfgb {
+canvas,
-	position: relative;
+img {
+	display: block;
 	width: 100%;
 	height: 100%;
+}
 
-	> canvas,
+canvas {
-	> img {
+	position: absolute;
-		display: block;
+	inset: 0;
-		width: 100%;
+	object-fit: cover;
-		height: 100%;
+}
-	}
 
-	> canvas {
+img {
-		position: absolute;
+	object-fit: contain;
-		object-fit: cover;
-	}
-
-	> img {
-		object-fit: contain;
-	}
-
-	&.cover {
-		> img {
-			object-fit: cover;
-		}
-	}
 }
 </style>

packages/client/src/components/MkMediaImage.vue

@@ -1,7 +1,6 @@
 <template>
 	<button v-if="hide" class="qjewsnkg" @click="hide = false">
 		<ImgWithBlurhash
-			class="bg"
 			:hash="image.blurhash"
 			:title="image.comment"
 			:alt="image.comment"
@@ -82,20 +81,17 @@ watch(
 	all: unset;
 	position: relative;
 
-	> .bg {
-		filter: brightness(0.5);
-	}
-
 	> .text {
-		position: absolute;
+		position: relative;
-		left: 0;
-		top: 0;
 		width: 100%;
 		height: 100%;
 		z-index: 1;
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		padding: 30px;
+		box-sizing: border-box;
+		background: rgba(0,0,0,0.5);
 
 		> .wrapper {
 			display: table-cell;
@@ -112,7 +108,6 @@ watch(
 
 .gqnyydlz {
 	position: relative;
-	//box-shadow: 0 0 0 1px var(--divider) inset;
 	background: var(--bg);
 
 	> .hide {

packages/client/src/components/MkMediaList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="hoawjimk">
+	<div class="hoawjimk files">
 		<XBanner
 			v-for="media in mediaList.filter((media) => !previewable(media))"
 			:key="media.id"
@@ -7,14 +7,16 @@
 		/>
 		<div
 			v-if="mediaList.filter((media) => previewable(media)).length > 0"
-			class="gird-container"
+			class="grid-container"
+			:data-count="
+				mediaList.filter((media) => previewable(media)).length < 5
+				? mediaList.filter((media) => previewable(media)).length
+				: null
+			"
 			:class="{ dmWidth: inDm }"
 		>
 			<div
 				ref="gallery"
-				:data-count="
-					mediaList.filter((media) => previewable(media)).length
-				"
 				@click.stop
 			>
 				<template
@@ -200,7 +202,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		max-width: 40rem;
 	}
 
-	> .gird-container {
+	> .grid-container {
 		position: relative;
 		width: 100%;
 		margin-top: 4px;
@@ -208,71 +210,74 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		overflow: hidden;
 		pointer-events: none;
 
-		&:before {
+		&[data-count] {
-			content: "";
-			display: block;
 			padding-top: 56.25%; // 16:9;
+			> div {
+				position: absolute;
+				inset: 0;
+			}
+		}
+
+		&[data-count="1"] > div {
+			grid-template-rows: 1fr;
+		}
+
+		&[data-count="2"] > div {
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: 1fr;
+		}
+
+		&[data-count="3"] > div {
+			grid-template-columns: 1fr 0.5fr;
+			grid-template-rows: 1fr 1fr;
+
+			> *:nth-child(1) {
+				grid-row: 1 / 3;
+			}
+
+			> *:nth-child(3) {
+				grid-column: 2 / 3;
+				grid-row: 2 / 3;
+			}
+		}
+
+		&[data-count="4"] > div {
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: 1fr 1fr;
+		}
+
+		&:not([data-count]) > div > div {
+			max-height: 300px;
 		}
 
 		> div {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
 			display: grid;
 			grid-gap: 8px;
 
-			> * {
+			> div, > button {
 				overflow: hidden;
 				border-radius: 6px;
 				pointer-events: all;
+				min-height: 50px;
 			}
 
-			&[data-count="1"] {
-				grid-template-rows: 1fr;
-			}
 
-			&[data-count="2"] {
+			> :nth-child(1) {
-				grid-template-columns: 1fr 1fr;
-				grid-template-rows: 1fr;
-			}
-
-			&[data-count="3"] {
-				grid-template-columns: 1fr 0.5fr;
-				grid-template-rows: 1fr 1fr;
-
-				> *:nth-child(1) {
-					grid-row: 1 / 3;
-				}
-
-				> *:nth-child(3) {
-					grid-column: 2 / 3;
-					grid-row: 2 / 3;
-				}
-			}
-
-			&[data-count="4"] {
-				grid-template-columns: 1fr 1fr;
-				grid-template-rows: 1fr 1fr;
-			}
-
-			> *:nth-child(1) {
 				grid-column: 1 / 2;
 				grid-row: 1 / 2;
 			}
 
-			> *:nth-child(2) {
+			> :nth-child(2) {
 				grid-column: 2 / 3;
 				grid-row: 1 / 2;
 			}
 
-			> *:nth-child(3) {
+			> :nth-child(3) {
 				grid-column: 1 / 2;
 				grid-row: 2 / 3;
 			}
 
-			> *:nth-child(4) {
+			> :nth-child(4) {
 				grid-column: 2 / 3;
 				grid-row: 2 / 3;
 			}

packages/client/src/components/MkSubNoteContent.vue

@@ -34,6 +34,7 @@
 			:class="{
 				collapsed,
 				isLong,
+				manyImages: note.files.length > 4,
 				showContent: note.cw && !showContent,
 				disableAnim: disableMfm,
 			}"
@@ -96,9 +97,7 @@
 					:to="`/notes/${note.renoteId}`"
 					>{{ i18n.ts.quoteAttached }}: ...</MkA
 				>
-				<div v-if="note.files.length > 0" class="files">
+				<XMediaList v-if="note.files.length > 0" :media-list="note.files" />
-					<XMediaList :media-list="note.files" />
-				</div>
 				<XPoll v-if="note.poll" :note="note" class="poll" />
 				<template v-if="detailed">
 					<MkUrlPreview
@@ -188,11 +187,14 @@ const emit = defineEmits<{
 
 const cwButton = ref<HTMLElement>();
 const showMoreButton = ref<HTMLElement>();
-const isLong =
+const isLong = !props.detailedView
-	!props.detailedView &&
+	&& ( props.note.cw == null
-	props.note.cw == null &&
+		&& (props.note.text != null
-	props.note.text != null &&
+			&& (props.note.text.split("\n").length > 9 || props.note.text.length > 500)
-	(props.note.text.split("\n").length > 9 || props.note.text.length > 500);
+		)
+		|| props.note.files.length > 4
+	);
+
 const collapsed = $ref(props.note.cw == null && isLong);
 
 const urls = props.note.text
@@ -285,7 +287,7 @@ function focusFooter(ev) {
 					background: var(--buttonHoverBg);
 				}
 			}
-			> .files {
+			> :deep(.files) {
 				margin-top: 0.4em;
 				margin-bottom: 0.4em;
 			}
@@ -332,27 +334,32 @@ function focusFooter(ev) {
 				-webkit-user-select: none;
 				-moz-user-select: none;
 			}
-			&.collapsed > .body {
+		}
+		&.collapsed {
+			&.manyImages {
+				max-height: calc(9em + 200px);
+			}
+			> .body {
 				box-sizing: border-box;
 			}
-			&.showContent {
+		}
-				> .body {
+		&.showContent {
-					min-height: 2em;
+			> .body {
-					max-height: 5em;
+				min-height: 2em;
-					filter: blur(4px);
+				max-height: 5em;
-					:deep(span) {
+				filter: blur(4px);
-						animation: none !important;
+				:deep(span) {
-						transform: none !important;
+					animation: none !important;
-					}
+					transform: none !important;
-					:deep(img) {
-						filter: blur(12px);
-					}
 				}
-				:deep(.fade) {
+				:deep(img) {
-					inset: 0;
+					filter: blur(12px);
-					top: 40px;
 				}
 			}
+			:deep(.fade) {
+				inset: 0;
+				top: 40px;
+			}
 		}
 
 		&.disableAnim :deep(span) {