Merge branch 'fix/photoswipe-animation' into 'develop'

[PR]: Fix image zoom animation on Photoswipe opening

See merge request firefish/firefish!10521

packages/client/src/components/MkDriveFileThumbnail.vue

@@ -91,6 +91,8 @@ const isThumbnailAvailable = computed(() => {
 	border: 0;
 	padding: 0;
 	cursor: pointer;
+	align-items: center;
+	justify-content: center;
 
 	> .icon-sub {
 		position: absolute;

packages/client/src/components/MkGalleryPostPreview.vue

@@ -53,8 +53,11 @@ const props = defineProps<{
 	}
 
 	> .thumbnail {
+		display: flex;
 		width: 100%;
 		height: 100%;
+		justify-content: center;
+		align-items: center;
 		position: absolute;
 		transition: all 0.5s ease;
 

packages/client/src/components/MkImgWithBlurhash.vue

@@ -12,7 +12,11 @@
 		:title="title"
 		:type="type"
 		:alt="alt"
-		:class="{ cover }"
+		:class="{
+      		cover,
+      		wide: largestDimension === 'width',
+      		tall: largestDimension === 'height'
+    	}"
 		:style="{ 'object-fit': cover ? 'cover' : null }"
 		loading="lazy"
 		@load="onLoad"
@@ -32,6 +36,7 @@ const props = withDefaults(
 		title?: string | null;
 		size?: number;
 		cover?: boolean;
+    	largestDimension?: "width" | "height";
 	}>(),
 	{
 		src: null,
@@ -68,17 +73,27 @@ onMounted(() => {
 canvas,
 img {
 	display: block;
-	width: 100%;
+	max-width: 100%;
-	height: 100%;
+	max-height: 100%;
 }
 
 canvas {
 	position: absolute;
 	inset: 0;
 	object-fit: cover;
+	width: 100%;
+	height: 100%;
 }
 
 img {
 	object-fit: contain;
+
+  &.wide {
+    width: 100%;
+  }
+
+  &.tall {
+    height: 100%;
+  }
 }
 </style>

packages/client/src/components/MkMedia.vue

@@ -26,6 +26,7 @@
 					:alt="media.comment"
 					:type="media.type"
 					:cover="false"
+          :largest-dimension="largestDimension"
 				/>
 				<div v-if="media.type === 'image/gif'" class="gif">GIF</div>
 			</a>
@@ -120,6 +121,11 @@ const mediaType = computed(() => {
 		: props.media.type;
 });
 
+let largestDimension: 'width'|'height';
+
+if (props.media.type.startsWith('image') && props.media.properties?.width && props.media.properties?.height) {
+  largestDimension = props.media.properties.width > props.media.properties.height ? 'width' : 'height'
+}
 function captionPopup() {
 	os.alert({
 		type: "info",
@@ -202,7 +208,7 @@ watch(
 	}
 
 	> a {
-		display: block;
+		display: flex;
 		cursor: zoom-in;
 		overflow: hidden;
 		width: 100%;
@@ -211,6 +217,9 @@ watch(
 		background-size: contain;
 		background-repeat: no-repeat;
 		box-sizing: border-box;
+		justify-content: center;
+		align-items: center;
+
 		&:focus-visible {
 			border: 2px solid var(--accent);
 		}

packages/client/src/components/MkMediaList.vue

@@ -75,7 +75,7 @@ onMounted(() => {
 			}),
 		gallery: gallery.value,
 		children: ".image",
-		thumbSelector: ".image",
+		thumbSelector: ".image img",
 		loop: false,
 		padding:
 			window.innerWidth > 500

packages/client/src/components/page/page.image.vue

@@ -30,8 +30,7 @@ const image = props.hpml.page.attachedFiles.find(
 
 <style lang="scss" scoped>
 .lzyxtsnt {
-	> img {
+	display: flex;
-		max-width: 100%;
+	justify-content: center;
-	}
 }
 </style>

packages/client/src/pages/gallery/post.vue

@@ -149,7 +149,6 @@ import { computed, defineComponent, inject, watch } from "vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
-import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 import MkPagination from "@/components/MkPagination.vue";
 import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
 import MkFollowButton from "@/components/MkFollowButton.vue";

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

@@ -98,6 +98,9 @@ onMounted(() => {
 		grid-gap: 6px;
 
 		> .img {
+			display: flex;
+			justify-content: center;
+			align-items: center;
 			position: relative;
 			height: 128px;
 			border-radius: 6px;