Merge pull request 'New media list layout + hide controls when player too small' (#10213) from Freeplay/calckey:notes into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10213

packages/client/src/components/MkCwButton.vue

@@ -102,9 +102,9 @@ defineExpose({
 	}
 	&.showLess {
 		width: 100%;
-		margin-top: 1em;
 		position: sticky;
-		bottom: var(--stickyBottom);
+		bottom: calc(var(--stickyBottom) - 1em);
+		padding: 20px;
 
 		> span {
 			display: inline-block;

packages/client/src/components/MkGalleryPostPreview.vue

@@ -59,6 +59,7 @@ const props = defineProps<{
 		transition: all 0.5s ease;
 
 		> .img {
+			position: relative;
 			width: 100%;
 			height: 100%;
 			object-fit: cover;

packages/client/src/components/MkImgWithBlurhash.vue

@@ -1,5 +1,4 @@
 <template>
-	<div class="xubzgfgb" :class="{ cover }" :title="title">
 	<canvas
 		v-if="!loaded"
 		ref="canvas"
@@ -13,9 +12,11 @@
 		:title="title"
 		:type="type"
 		:alt="alt"
+		:class="{ cover }"
+		:style="{ 'object-fit': cover ? 'cover' : null }"
+		loading="lazy"
 		@load="onLoad"
 	/>
-	</div>
 </template>
 
 <script lang="ts" setup>
@@ -64,31 +65,20 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.xubzgfgb {
+canvas,
-	position: relative;
+img {
-	width: 100%;
-	height: 100%;
-
-	> canvas,
-	> img {
 	display: block;
 	width: 100%;
 	height: 100%;
-	}
+}
 
-	> canvas {
+canvas {
 	position: absolute;
+	inset: 0;
 	object-fit: cover;
-	}
+}
 
-	> img {
+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,20 +1,18 @@
 <template>
-	<div class="hoawjimk">
+	<div class="hoawjimk files">
 		<XBanner
 			v-for="media in mediaList.filter((media) => !previewable(media))"
 			:key="media.id"
 			:media="media"
 		/>
 		<div
-			v-if="mediaList.filter((media) => previewable(media)).length > 0"
+			v-if="previewableCount > 0"
-			class="gird-container"
+			class="grid-container"
+			:data-count="previewableCount < 5 ? previewableCount : null"
 			:class="{ dmWidth: inDm }"
 		>
 			<div
 				ref="gallery"
-				:data-count="
-					mediaList.filter((media) => previewable(media)).length
-				"
 				@click.stop
 			>
 				<template
@@ -191,6 +189,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		FILE_TYPE_BROWSERSAFE.includes(file.type)
 	);
 };
+const previewableCount = props.mediaList.filter((media) => previewable(media)).length;
 </script>
 
 <style lang="scss" scoped>
@@ -200,7 +199,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		max-width: 40rem;
 	}
 
-	> .gird-container {
+	> .grid-container {
 		position: relative;
 		width: 100%;
 		margin-top: 4px;
@@ -208,37 +207,24 @@ 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;
-			top: 0;
+				inset: 0;
-			right: 0;
+			}
-			bottom: 0;
-			left: 0;
-			display: grid;
-			grid-gap: 8px;
-
-			> * {
-				overflow: hidden;
-				border-radius: 6px;
-				pointer-events: all;
 		}
 
-			&[data-count="1"] {
+		&[data-count="1"] > div {
 			grid-template-rows: 1fr;
 		}
 
-			&[data-count="2"] {
+		&[data-count="2"] > div {
 			grid-template-columns: 1fr 1fr;
 			grid-template-rows: 1fr;
 		}
 
-			&[data-count="3"] {
+		&[data-count="3"] > div {
 			grid-template-columns: 1fr 0.5fr;
 			grid-template-rows: 1fr 1fr;
 
@@ -252,27 +238,43 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 			}
 		}
 
-			&[data-count="4"] {
+		&[data-count="4"] > div {
 			grid-template-columns: 1fr 1fr;
 			grid-template-rows: 1fr 1fr;
 		}
 
-			> *:nth-child(1) {
+		&:not([data-count]) > div > div {
+			max-height: 300px;
+		}
+
+		> div {
+			display: grid;
+			grid-gap: 8px;
+
+			> div, > button {
+				overflow: hidden;
+				border-radius: 6px;
+				pointer-events: all;
+				min-height: 50px;
+			}
+
+
+			> :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/MkMediaVideo.vue

@@ -12,8 +12,9 @@
 			<span>{{ i18n.ts.clickToShow }}</span>
 		</div>
 	</div>
-	<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
+	<div v-else class="video" :class="{ mini }">
 		<VuePlyr
+			ref="plyr"
 			:options="{
 				controls: [
 					'play-large',
@@ -40,12 +41,18 @@
 				<source :src="video.url" :type="video.type" />
 			</video>
 		</VuePlyr>
-		<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
+		<button
+			v-tooltip="i18n.ts.hide"
+			class="_button hide"
+			@click="hide = true"
+		>
+			<i class="ph-eye-slash ph-bold ph-lg"></i>
+		</button>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import VuePlyr from "vue-plyr";
 import type * as misskey from "calckey-js";
 import { defaultStore } from "@/store";
@@ -56,31 +63,47 @@ const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
+const plyr = ref();
+const mini = ref(false);
+
 const hide = ref(
 	defaultStore.state.nsfw === "force"
 		? true
 		: props.video.isSensitive && defaultStore.state.nsfw !== "ignore"
 );
+
+onMounted(() => {
+	mini.value = plyr.value.player.media.scrollWidth < 300;
+	if (mini.value) {
+		plyr.value.player.on('play', () => {
+			plyr.value.player.fullscreen.enter();
+		});
+	}
+})
 </script>
 
 <style lang="scss" scoped>
-.kkjnbbplepmiyuadieoenjgutgcmtsvu {
+.video {
 	position: relative;
 	--plyr-color-main: var(--accent);
 
-	> i {
+	> .hide {
 		display: block;
 		position: absolute;
 		border-radius: 6px;
-		background-color: var(--fg);
+		background-color: var(--accentedBg);
-		color: var(--accentLighten);
+		-webkit-backdrop-filter: var(--blur, blur(15px));
-		font-size: 14px;
+		backdrop-filter: var(--blur, blur(15px));
-		opacity: 0.5;
+		color: var(--accent);
-		padding: 3px 6px;
+		font-size: 0.8em;
+		padding: 6px 8px;
 		text-align: center;
-		cursor: pointer;
 		top: 12px;
 		right: 12px;
+
+		> i {
+			display: block;
+		}
 	}
 
 	> video {
@@ -95,6 +118,18 @@ const hide = ref(
 		width: 100%;
 		height: 100%;
 	}
+
+	&.mini {
+		:deep(.plyr:not(:fullscreen)) {
+			min-width: unset !important;
+			.plyr__control--overlaid,
+			.plyr__progress__container,
+			.plyr__volume,
+			[data-plyr="fullscreen"] {
+				display: none;
+			}
+		}
+	}
 }
 
 .icozogqfvdetwohsdglrbswgrejoxbdj {

packages/client/src/components/MkNote.vue

@@ -700,6 +700,7 @@ defineExpose({
 	}
 
 	> .article {
+		position: relative;
 		overflow: clip;
 		padding: 4px 32px 10px;
 		cursor: pointer;

packages/client/src/components/MkNoteSub.vue

@@ -435,6 +435,7 @@ function noteClick(e) {
 		}
 
 		> .body {
+			position: relative;
 			flex: 1;
 			min-width: 0;
 			margin: 0 -200px;

packages/client/src/components/MkShowMoreButton.vue

@@ -41,6 +41,8 @@ defineExpose({
 	bottom: 0;
 	left: 0;
 	width: 100%;
+	padding: 20px;
+	margin-bottom: -10px;
 	z-index: 5;
 	> span {
 		display: inline-block;
@@ -58,9 +60,10 @@ defineExpose({
 }
 .showLess {
 	width: 100%;
-	margin-top: 1em;
 	position: sticky;
-	bottom: var(--stickyBottom);
+	bottom: calc(var(--stickyBottom) - 1em);
+	padding: 20px;
+	z-index: 5;
 
 	> span {
 		display: inline-block;

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
@@ -152,6 +151,7 @@
 				<i class="ph-stop ph-bold"></i> {{ i18n.ts._mfm.stop }}
 			</template>
 		</MkButton>
+		<div v-if="(isLong && !collapsed) || (props.note.cw && showContent)" class="fade"></div>
 	</div>
 </template>
 
@@ -188,11 +188,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 +288,7 @@ function focusFooter(ev) {
 					background: var(--buttonHoverBg);
 				}
 			}
-			> .files {
+			> :deep(.files) {
 				margin-top: 0.4em;
 				margin-bottom: 0.4em;
 			}
@@ -332,9 +335,15 @@ 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 {
 				min-height: 2em;
@@ -353,7 +362,6 @@ function focusFooter(ev) {
 				top: 40px;
 			}
 		}
-		}
 
 		&.disableAnim :deep(span) {
 			animation: none !important;
@@ -364,5 +372,26 @@ function focusFooter(ev) {
 		margin-left: 0;
 		margin-right: 0.4rem;
 	}
+	> .fade {
+		position: absolute;
+		inset: 0;
+		bottom: -400px;
+		display: flex;
+		align-items: flex-end;
+		z-index: 4;
+		pointer-events: none;
+		&::before {
+			content: "";
+			display: block;
+			height: 100px;
+			position: sticky;
+			bottom: 0;
+			width: 100%;
+			background: var(--panel);
+			mask: linear-gradient(to top, var(--gradient));
+			-webkit-mask: linear-gradient(to top, var(--gradient));
+			transition: background .2s;
+		}
+	}
 }
 </style>

packages/client/src/pages/admin/emoji-edit-dialog.vue

@@ -114,6 +114,7 @@ async function del() {
 <style lang="scss" scoped>
 .yigymqpb {
 	> .img {
+		position: relative;
 		display: block;
 		height: 64px;
 		margin: 0 auto;

packages/client/src/pages/user/index.photos.vue

@@ -98,6 +98,7 @@ onMounted(() => {
 		grid-gap: 6px;
 
 		> .img {
+			position: relative;
 			height: 128px;
 			border-radius: 6px;
 			overflow: clip;

packages/client/src/ui/_common_/upload.vue

@@ -102,6 +102,7 @@ const zIndex = os.claimZIndex("high");
 	border-top: none;
 }
 .mk-uploader > ol > li > .img {
+	position: relative;
 	display: block;
 	background-size: cover;
 	background-position: center center;

packages/client/src/widgets/photos.vue

@@ -114,6 +114,7 @@ defineExpose<WidgetComponentExpose>({
 	}
 
 	.img {
+		position: relative;
 		border: solid 4px transparent;
 		border-radius: 8px;
 	}
@@ -126,6 +127,7 @@ defineExpose<WidgetComponentExpose>({
 	padding: 8px;
 
 	.img {
+		position: relative;
 		flex: 1 1 33%;
 		width: 33%;
 		height: 80px;