From 32fac3768b4446640da724985329722c05aebed8 Mon Sep 17 00:00:00 2001
From: Lhcfl <Lhcfl@outlook.com>
Date: Tue, 9 Jan 2024 22:22:19 +0900
Subject: [PATCH] feat: enlarge profile picture by clicking it

Co-authored-by: naskya <m@naskya.net>
---
 README.md                                     |  1 +
 .../client/src/components/global/MkAvatar.vue | 98 ++++++++++++++++++-
 packages/client/src/pages/user/home.vue       |  1 +
 3 files changed, 99 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5c305cdaf..fa532e411 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,7 @@
 
 ## 細かい変更点
 
+- ユーザーページでプロフィール画像を選択すると画像を拡大する（Catodon から取り込み）
 - 署名アルゴリズムとして ECDSA や Ed25519 なども受け入れる（[github.com/mei23/misskey-v12](https://github.com/mei23/misskey-v12) から取り込み）
 - Pleroma のチャットに対応（Catodon から取り込み）
 - 翻訳機能にて、投稿言語が指定されていない場合にのみ言語の自動検出を用いるように変更
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index 7c3616db3..292658496 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -18,6 +18,26 @@
 			:user="user"
 		/>
 	</span>
+	<span
+		v-else-if="showLightBox"
+		v-user-preview="disablePreview ? undefined : user.id"
+		class="eiwwqkts _noSelect showLightBox"
+		:class="{
+			cat: user.isCat,
+			square: user.isCat ? false : defaultStore.state.squareAvatars,
+		}"
+		:style="{ color }"
+		:title="acct(user)"
+		ref="gallery"
+		@click.stop
+	>
+		<img class="inner avatar" :src="url" decoding="async" />
+		<MkUserOnlineIndicator
+			v-if="showIndicator && user.instance == null"
+			class="indicator"
+			:user="user"
+		/>
+	</span>
 	<MkA
 		v-else
 		v-user-preview="disablePreview ? undefined : user.id"
@@ -42,7 +62,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import type * as firefish from "firefish-js";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import { extractAvgColorFromBlurhash } from "@/scripts/extract-avg-color-from-blurhash";
@@ -50,18 +70,23 @@ import { acct, userPage } from "@/filters/user";
 import MkUserOnlineIndicator from "@/components/MkUserOnlineIndicator.vue";
 import { defaultStore } from "@/store";
 import { $i } from "@/reactiveAccount";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import PhotoSwipe from "photoswipe";
+import "photoswipe/style.css";
 
 const props = withDefaults(
 	defineProps<{
 		user: firefish.entities.User;
 		target?: string | null;
 		disableLink?: boolean;
+		showLightBox?: boolean;
 		disablePreview?: boolean;
 		showIndicator?: boolean;
 	}>(),
 	{
 		target: null,
 		disableLink: false,
+		showLightBox: false,
 		disablePreview: false,
 		showIndicator: false,
 	},
@@ -94,6 +119,73 @@ watch(
 		immediate: true,
 	},
 );
+
+const gallery = ref(null);
+
+onMounted(() => {
+	const lightbox = new PhotoSwipeLightbox({
+		dataSource: [
+			{
+				src: url,
+				w: 300,
+				h: 300,
+			},
+		],
+		gallery: gallery.value,
+		children: ".avatar",
+		thumbSelector: ".avatar",
+		loop: false,
+		padding:
+			window.innerWidth > 500
+				? {
+						top: 32,
+						bottom: 32,
+						left: 32,
+						right: 32,
+					}
+				: {
+						top: 0,
+						bottom: 0,
+						left: 0,
+						right: 0,
+					},
+		imageClickAction: "close",
+		tapAction: "toggle-controls",
+		preloadFirstSlide: false,
+		pswpModule: PhotoSwipe,
+	});
+
+	lightbox.on("itemData", (ev) => {
+		const { itemData } = ev;
+		itemData.src = url.value;
+		itemData.msrc = url.value;
+		const wh = Math.max(
+			300,
+			Math.min(window.innerWidth, window.innerHeight) * 0.7,
+		);
+		itemData.h = wh;
+		itemData.w = wh;
+	});
+
+	lightbox.on("afterInit", () => {
+		history.pushState(null, "", location.href);
+		addEventListener("popstate", close);
+		// This is a workaround. Not sure why, but when clicking to open, it doesn't move focus to the photoswipe. Preventing using esc to close. However when using keyboard to open it already focuses the lightbox fine.
+		lightbox.pswp.element.focus();
+	});
+	lightbox.on("close", () => {
+		removeEventListener("popstate", close);
+		history.back();
+	});
+
+	lightbox.init();
+
+	function close() {
+		removeEventListener("popstate", close);
+		history.forward();
+		lightbox.pswp.close();
+	}
+});
 </script>
 
 <style lang="scss" scoped>
@@ -141,6 +233,10 @@ watch(
 	border-radius: 100%;
 	line-height: 16px;
 
+	&.showLightBox {
+		cursor: zoom-in;
+	}
+
 	> .inner {
 		position: absolute;
 		bottom: 0;
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 63e2fec98..288e8e70c 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -121,6 +121,7 @@
 						</div>
 						<MkAvatar
 							class="avatar"
+							:showLightBox="true"
 							:user="user"
 							:disable-preview="true"
 							:show-indicator="true"