From 17d0bde50eba66d6990e9cd35dbff3a2a9e21383 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 28 Feb 2023 17:26:42 +0900
Subject: [PATCH] =?UTF-8?q?fix(client):=20photoswipe=EF=BC=88=E7=94=BB?=
 =?UTF-8?q?=E5=83=8F=E3=81=AE=E6=8B=A1=E5=A4=A7=E8=A1=A8=E7=A4=BA=EF=BC=89?=
 =?UTF-8?q?=E3=81=8C=E3=81=AA=E3=82=93=E3=81=8B=E5=A4=89=20(#10138)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(client): photoswipe（画像の拡大表示）がなんか変
Fix  #10037

* important

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 .../frontend/src/components/MkMediaList.vue   | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index fafa0bd232..c768a086cd 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, useCssModule } from 'vue';
 import * as misskey from 'misskey-js';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
@@ -29,8 +29,11 @@ const props = defineProps<{
 	raw?: boolean;
 }>();
 
+const $style = useCssModule();
+
 const gallery = ref(null);
 const pswpZIndex = os.claimZIndex('middle');
+document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
 const count = $computed(() => props.mediaList.filter(media => previewable(media)).length);
 
 onMounted(() => {
@@ -54,17 +57,18 @@ onMounted(() => {
 				return item;
 			}),
 		gallery: gallery.value,
+		mainClass: $style.pswp,
 		children: '.image',
 		thumbSelector: '.image',
 		loop: false,
 		padding: window.innerWidth > 500 ? {
 			top: 32,
-			bottom: 32,
+			bottom: 90,
 			left: 32,
 			right: 32,
 		} : {
 			top: 0,
-			bottom: 0,
+			bottom: 78,
 			left: 0,
 			right: 0,
 		},
@@ -82,6 +86,7 @@ onMounted(() => {
 
 		const id = element.dataset.id;
 		const file = props.mediaList.find(media => media.id === id);
+		if (!file) return;
 
 		itemData.src = file.url;
 		itemData.w = Number(file.properties.width);
@@ -198,16 +203,14 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 	overflow: hidden; // clipにするとバグる
 	border-radius: 8px;
 }
+
+.pswp {
+	--pswp-root-z-index: var(--mk-pswp-root-z-index, 2000700) !important;
+	--pswp-bg: var(--modalBg) !important;
+}
 </style>
 
 <style lang="scss">
-.pswp {
-	// なぜか機能しない
-  //z-index: v-bind(pswpZIndex);
-	z-index: 2000000;
-	--pswp-bg: var(--modalBg);
-}
-
 .pswp__bg {
 	background: var(--modalBg);
 	backdrop-filter: var(--modalBgFilter);
@@ -219,7 +222,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 	align-items: center;
 
 	position: absolute;
-	bottom: 30px;
+	bottom: 20px;
 	left: 50%;
 	transform: translateX(-50%);