From 4f4f15a6a407067a5ad8a266f4d88002062f010a Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 24 Jul 2023 06:05:37 +0000
Subject: chore(frontend): MkImgWithBlurhashのデコードのエラーをconsole.logに
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkImgWithBlurhash.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index 4e36defb7c..6dcc890cd3 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -108,8 +108,7 @@ function waitForDecode() {
 			.then(() => {
 				loaded = true;
 			}, error => {
-				console.error('Error occurred during decoding image', img.value, error);
-				throw Error(error);
+				console.log('Error occurred during decoding image', img.value, error);
 			});
 	} else {
 		loaded = false;
-- 
cgit v1.2.3-freya


From fca6ae9403b51077a41d890cb78518d93b71bf89 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 24 Jul 2023 06:11:30 +0000
Subject: enhance(frontend):
 リストTLで、ユーザーが追加・削除されてもTLを更新しないように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkTimeline.vue | 10 ----------
 1 file changed, 10 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue
index 2595ebc45d..062d0bd87a 100644
--- a/packages/frontend/src/components/MkTimeline.vue
+++ b/packages/frontend/src/components/MkTimeline.vue
@@ -38,14 +38,6 @@ const prepend = note => {
 	}
 };
 
-const onUserAdded = () => {
-	tlComponent.pagingComponent?.reload();
-};
-
-const onUserRemoved = () => {
-	tlComponent.pagingComponent?.reload();
-};
-
 let endpoint;
 let query;
 let connection;
@@ -125,8 +117,6 @@ if (props.src === 'antenna') {
 		listId: props.list,
 	});
 	connection.on('note', prepend);
-	connection.on('userAdded', onUserAdded);
-	connection.on('userRemoved', onUserRemoved);
 } else if (props.src === 'channel') {
 	endpoint = 'channels/timeline';
 	query = {
-- 
cgit v1.2.3-freya


From 81ba841fb8d2adf2d9fa7a68753daa93a3194778 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 25 Jul 2023 19:44:52 +0900
Subject: perf(frontend): MkMediaListのアスペクト比制限を調整 (#11377)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkMediaList.vue | 63 +++++++++++++++++-------
 packages/frontend/src/pages/settings/general.vue |  1 +
 2 files changed, 45 insertions(+), 19 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index be0aed6524..65d3d529dd 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -1,5 +1,5 @@
 <template>
-<div>
+<div ref="root">
 	<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" :class="$style.container">
 		<div
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch, shallowRef } from 'vue';
+import { onMounted, shallowRef } from 'vue';
 import * as misskey from 'misskey-js';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
@@ -34,19 +34,26 @@ import XVideo from '@/components/MkMediaVideo.vue';
 import * as os from '@/os';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
 import { defaultStore } from '@/store';
+import { getScrollContainer, getBodyScrollHeight } from '@/scripts/scroll';
 
 const props = defineProps<{
 	mediaList: misskey.entities.DriveFile[];
 	raw?: boolean;
 }>();
 
+const root = shallowRef<HTMLDivElement>();
+const container = shallowRef<HTMLElement | null | undefined>(undefined);
 const gallery = shallowRef<HTMLDivElement>();
 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);
 
+/**
+ * アスペクト比をmediaListWithOneImageAppearanceに基づいていい感じに調整する
+ * aspect-ratioではなくheightを使う
+ */
 function calcAspectRatio() {
-	if (!gallery.value) return;
+	if (!gallery.value || !root.value) return;
 
 	let img = props.mediaList[0];
 
@@ -55,28 +62,46 @@ function calcAspectRatio() {
 		return;
 	}
 
-	// アスペクト比上限設定では、横長の場合は高さを縮小させる
-	const ratioMax = (ratio: number) => `${Math.max(ratio, img.properties.width / img.properties.height).toString()} / 1`;
+	const width = gallery.value.clientWidth;
+
+	const heightMin = (ratio: number) => {
+		const imgResizeRatio = width / img.properties.width;
+		const imgDrawHeight = img.properties.height * imgResizeRatio;
+		const maxHeight = width * ratio;
+		const height = Math.min(imgDrawHeight, maxHeight);
+		if (_DEV_) console.log('Image height calculated:', { width, properties: img.properties, imgResizeRatio, imgDrawHeight, maxHeight, height });
+		return `${height}px`;
+	};
 
 	switch (defaultStore.state.mediaListWithOneImageAppearance) {
 		case '16_9':
-			gallery.value.style.aspectRatio = ratioMax(16 / 9);
+			gallery.value.style.height = heightMin(9 / 16);
 			break;
 		case '1_1':
-			gallery.value.style.aspectRatio = ratioMax(1);
+			gallery.value.style.height = heightMin(1);
 			break;
 		case '2_3':
-			gallery.value.style.aspectRatio = ratioMax(2 / 3);
+			gallery.value.style.height = heightMin(3 / 2);
 			break;
-		default:
-			gallery.value.style.aspectRatio = '';
+		default: {
+			if (!container.value) container.value = getScrollContainer(root.value);
+			const maxHeight = Math.max(64, (container.value ? container.value.clientHeight : getBodyScrollHeight()) * 0.5 || 360);
+			if (width === 0 || !maxHeight) return;
+			const imgResizeRatio = width / img.properties.width;
+			const imgDrawHeight = img.properties.height * imgResizeRatio;
+			gallery.value.style.height = `${Math.max(64, Math.min(imgDrawHeight, maxHeight))}px`;
+			gallery.value.style.minHeight = 'initial';
+			gallery.value.style.maxHeight = 'initial';
 			break;
+		}
 	}
-}
 
-watch([defaultStore.reactiveState.mediaListWithOneImageAppearance, gallery], () => calcAspectRatio());
+	gallery.value.style.aspectRatio = 'initial';
+}
 
 onMounted(() => {
+	calcAspectRatio();
+
 	const lightbox = new PhotoSwipeLightbox({
 		dataSource: props.mediaList
 			.filter(media => {
@@ -203,7 +228,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 	&.n1 {
 		grid-template-rows: 1fr;
 
-		// default (expand)
+		// default but fallback (expand)
 		min-height: 64px;
 		max-height: clamp(
 			64px,
@@ -212,20 +237,20 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		);
 
 		&.n116_9 {
-			min-height: none;
-			max-height: none;
+			min-height: initial;
+			max-height: initial;
 			aspect-ratio: 16 / 9; // fallback
 		}
 
 		&.n11_1{
-			min-height: none;
-			max-height: none;
+			min-height: initial;
+			max-height: initial;
 			aspect-ratio: 1 / 1; // fallback
 		}
 
 		&.n12_3 {
-			min-height: none;
-			max-height: none;
+			min-height: initial;
+			max-height: initial;
 			aspect-ratio: 2 / 3; // fallback
 		}
 	}
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index cfe5cd31e7..31a288745e 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -258,6 +258,7 @@ watch([
 	showGapBetweenNotesInTimeline,
 	instanceTicker,
 	overridedDeviceKind,
+	mediaListWithOneImageAppearance,
 ], async () => {
 	await reloadAsk();
 });
-- 
cgit v1.2.3-freya


From fe13755be868be1896195ebb838c3a0326bd5eff Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 25 Jul 2023 19:46:52 +0900
Subject: refactor: Array.from(iterable).map(mapfn)をArray.from(iterable | {
 length: number }, mapfn)に (#11337)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: Array.from(iterable).map(mapfn)をArray.from(iterable, mapfn)に

* Update packages/frontend/src/components/MkTagCloud.vue

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

---------

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
---
 packages/frontend/src/components/MkPostForm.vue | 2 +-
 packages/frontend/src/components/MkTagCloud.vue | 4 ++--
 packages/frontend/src/scripts/emoji-base.ts     | 4 ++--
 packages/frontend/src/scripts/select-file.ts    | 3 ++-
 4 files changed, 7 insertions(+), 6 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index f516ccbad8..3c1aed63e8 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -540,7 +540,7 @@ function onCompositionEnd(ev: CompositionEvent) {
 }
 
 async function onPaste(ev: ClipboardEvent) {
-	for (const { item, i } of Array.from(ev.clipboardData.items).map((item, i) => ({ item, i }))) {
+	for (const { item, i } of Array.from(ev.clipboardData.items, (item, i) => ({ item, i }))) {
 		if (item.kind === 'file') {
 			const file = item.getAsFile();
 			const lio = file.name.lastIndexOf('.');
diff --git a/packages/frontend/src/components/MkTagCloud.vue b/packages/frontend/src/components/MkTagCloud.vue
index 6e4e054aad..21e76b766b 100644
--- a/packages/frontend/src/components/MkTagCloud.vue
+++ b/packages/frontend/src/components/MkTagCloud.vue
@@ -16,8 +16,8 @@ import tinycolor from 'tinycolor2';
 const loaded = !!window.TagCanvas;
 const SAFE_FOR_HTML_ID = 'abcdefghijklmnopqrstuvwxyz';
 const computedStyle = getComputedStyle(document.documentElement);
-const idForCanvas = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
-const idForTags = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
+const idForCanvas = Array.from({ length: 16 }, () => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
+const idForTags = Array.from({ length: 16 }, () => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
 let available = $ref(false);
 let rootEl = $shallowRef<HTMLElement | null>(null);
 let canvasEl = $shallowRef<HTMLCanvasElement | null>(null);
diff --git a/packages/frontend/src/scripts/emoji-base.ts b/packages/frontend/src/scripts/emoji-base.ts
index 3f05642d57..e91f2fa22d 100644
--- a/packages/frontend/src/scripts/emoji-base.ts
+++ b/packages/frontend/src/scripts/emoji-base.ts
@@ -2,7 +2,7 @@ const twemojiSvgBase = '/twemoji';
 const fluentEmojiPngBase = '/fluent-emoji';
 
 export function char2twemojiFilePath(char: string): string {
-	let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
+	let codes = Array.from(char, x => x.codePointAt(0)?.toString(16));
 	if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
 	codes = codes.filter(x => x && x.length);
 	const fileName = codes.join('-');
@@ -10,7 +10,7 @@ export function char2twemojiFilePath(char: string): string {
 }
 
 export function char2fluentEmojiFilePath(char: string): string {
-	let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
+	let codes = Array.from(char, x => x.codePointAt(0)?.toString(16));
 	// Fluent Emojiは国旗非対応 https://github.com/microsoft/fluentui-emoji/issues/25
 	if (codes[0]?.startsWith('1f1')) return char2twemojiFilePath(char);
 	if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
diff --git a/packages/frontend/src/scripts/select-file.ts b/packages/frontend/src/scripts/select-file.ts
index 44a58d6c7d..891da6eb78 100644
--- a/packages/frontend/src/scripts/select-file.ts
+++ b/packages/frontend/src/scripts/select-file.ts
@@ -12,7 +12,8 @@ export function chooseFileFromPc(multiple: boolean, keepOriginal = false): Promi
 		input.type = 'file';
 		input.multiple = multiple;
 		input.onchange = () => {
-			const promises = Array.from(input.files).map(file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal));
+			if (!input.files) return res([]);
+			const promises = Array.from(input.files, file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal));
 
 			Promise.all(promises).then(driveFiles => {
 				res(driveFiles);
-- 
cgit v1.2.3-freya


From 92337b0504561b0fd01d735d53a82ecb18910a67 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 26 Jul 2023 13:50:58 +0900
Subject: fix(frontend): 一部モーダルダイアログでスクロールできない問題を修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                 | 1 +
 packages/frontend/src/components/MkModal.vue | 1 +
 2 files changed, 2 insertions(+)

(limited to 'packages/frontend/src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4005124127..b4a561e8f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@
 ### Client
 - リストTLで、ユーザーが追加・削除されてもTLを初期化しないように
 - Fix: モバイル表示のときページ下部がナビゲーションバーに隠れる問題を修正
+- Fix: 一部モーダルダイアログでスクロールできない問題を修正
 - Fix: Selecting all emojis in Custom emoji is impossible
 
 ### Server
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index bb5c6c7aab..bc6e3e4171 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -431,6 +431,7 @@ defineExpose({
 			margin: auto;
 			padding: 32px;
 			display: flex;
+			overflow: auto;
 
 			@media (max-width: 500px) {
 				padding: 16px;
-- 
cgit v1.2.3-freya


From bc927b8f750f4cb7a6d74d68094d8bec7c08d38e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 26 Jul 2023 16:50:54 +0900
Subject: perf(frontend): Reduce getting clientWidth in MkMediaImage (#11386)

* perf(frontend): Reduce getting clientWidth

* fix

* :v:
---
 packages/frontend/src/components/MkMediaList.vue | 31 ++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index 65d3d529dd..57d24d82ee 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -22,6 +22,33 @@
 </div>
 </template>
 
+<script lang="ts">
+/**
+ * アスペクト比算出のためにHTMLElement.clientWidthを使うが、
+ * 大変重たいのでコンテナ要素とメディアリスト幅のペアをキャッシュする
+ * （タイムラインごとにスクロールコンテナが存在する前提だが……）
+ */
+const widthCache = new Map<Element, number>();
+
+/**
+ * コンテナ要素がリサイズされたらキャッシュを削除する
+ */
+const ro = new ResizeObserver(entries => {
+	for (const entry of entries) {
+		widthCache.delete(entry.target);
+	}
+});
+
+function getClientWidthWithCache(targetEl: HTMLElement, containerEl: HTMLElement) {
+	if (widthCache.has(containerEl)) return widthCache.get(containerEl)!;
+
+	const width = targetEl.clientWidth;
+	widthCache.set(containerEl, width);
+	ro.observe(containerEl);
+	return width;
+}
+</script>
+
 <script lang="ts" setup>
 import { onMounted, shallowRef } from 'vue';
 import * as misskey from 'misskey-js';
@@ -62,7 +89,8 @@ function calcAspectRatio() {
 		return;
 	}
 
-	const width = gallery.value.clientWidth;
+	if (!container.value) container.value = getScrollContainer(root.value);
+	const width = container.value ? getClientWidthWithCache(root.value, container.value) : root.value.clientWidth;
 
 	const heightMin = (ratio: number) => {
 		const imgResizeRatio = width / img.properties.width;
@@ -84,7 +112,6 @@ function calcAspectRatio() {
 			gallery.value.style.height = heightMin(3 / 2);
 			break;
 		default: {
-			if (!container.value) container.value = getScrollContainer(root.value);
 			const maxHeight = Math.max(64, (container.value ? container.value.clientHeight : getBodyScrollHeight()) * 0.5 || 360);
 			if (width === 0 || !maxHeight) return;
 			const imgResizeRatio = width / img.properties.width;
-- 
cgit v1.2.3-freya


From 037c2e9332d2a3aeba6f7014e72c77441a715e52 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 26 Jul 2023 17:17:26 +0900
Subject: Revert "fix(frontend): Fix cat ears are awkward on reply modal
 (#11309)"

This reverts commit 5280a5e5c68d94565774c71976fb343bb949554e.
---
 packages/frontend/src/components/MkPostForm.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 3c1aed63e8..0527811ab0 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -907,7 +907,6 @@ defineExpose({
 	display: flex;
 	flex-wrap: nowrap;
 	gap: 4px;
-	margin-bottom: -10px;
 }
 
 .headerLeft {
@@ -1025,7 +1024,7 @@ defineExpose({
 }
 
 .targetNote {
-	padding: 10px 20px 16px 20px;
+	padding: 0 20px 16px 20px;
 }
 
 .withQuote {
-- 
cgit v1.2.3-freya


From 926f208fcf93014da9a9e7aec0c9dce6bf7aefbf Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 26 Jul 2023 17:24:13 +0900
Subject: fix(frontend): Fix cat ears are awkward on reply modal

---
 packages/frontend/src/components/MkNote.vue         | 1 +
 packages/frontend/src/components/MkNoteDetailed.vue | 1 +
 packages/frontend/src/components/MkNoteSimple.vue   | 1 -
 3 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index deeae6e940..37315e2c2e 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -758,6 +758,7 @@ function showReactions(): void {
 	padding: 16px;
 	border: dashed 1px var(--renote);
 	border-radius: 8px;
+	overflow: clip;
 }
 
 .channel {
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 1f8a36b8de..7e9f7fc5a1 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -595,6 +595,7 @@ if (appearNote.replyId) {
 	padding: 16px;
 	border: dashed 1px var(--renote);
 	border-radius: 8px;
+	overflow: clip;
 }
 
 .channel {
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index 21be1454a7..98ea91d6be 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -37,7 +37,6 @@ const showContent = $ref(false);
 	display: flex;
 	margin: 0;
 	padding: 0;
-	overflow: clip;
 	font-size: 0.95em;
 }
 
-- 
cgit v1.2.3-freya


From 09f37fc9e5d9c4b8cef7d28b7d53dd819ebcb967 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 26 Jul 2023 08:31:23 +0000
Subject: fix(frontend): #11386
 でウィンドウの場合に正常に表示されない問題を修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkMediaList.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index 57d24d82ee..661c0a9877 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -39,10 +39,18 @@ const ro = new ResizeObserver(entries => {
 	}
 });
 
-function getClientWidthWithCache(targetEl: HTMLElement, containerEl: HTMLElement) {
+async function getClientWidthWithCache(targetEl: HTMLElement, containerEl: HTMLElement, count = 0) {
+	if (_DEV_) console.log('getClientWidthWithCache', { targetEl, containerEl, count, cache: widthCache.get(containerEl) });
 	if (widthCache.has(containerEl)) return widthCache.get(containerEl)!;
 
 	const width = targetEl.clientWidth;
+
+	if (count <= 10 && width < 64) {
+		// widthが64未満はおかしいのでリトライする
+		await new Promise(resolve => setTimeout(resolve, 50));
+		return getClientWidthWithCache(targetEl, containerEl, count + 1);
+	}
+
 	widthCache.set(containerEl, width);
 	ro.observe(containerEl);
 	return width;
@@ -79,7 +87,7 @@ const count = $computed(() => props.mediaList.filter(media => previewable(media)
  * アスペクト比をmediaListWithOneImageAppearanceに基づいていい感じに調整する
  * aspect-ratioではなくheightを使う
  */
-function calcAspectRatio() {
+ async function calcAspectRatio() {
 	if (!gallery.value || !root.value) return;
 
 	let img = props.mediaList[0];
@@ -90,7 +98,7 @@ function calcAspectRatio() {
 	}
 
 	if (!container.value) container.value = getScrollContainer(root.value);
-	const width = container.value ? getClientWidthWithCache(root.value, container.value) : root.value.clientWidth;
+	const width = container.value ? await getClientWidthWithCache(root.value, container.value) : root.value.clientWidth;
 
 	const heightMin = (ratio: number) => {
 		const imgResizeRatio = width / img.properties.width;
-- 
cgit v1.2.3-freya


From 090253c2d2cbed5818a6e071bca3970fcff7a72a Mon Sep 17 00:00:00 2001
From: "Acid Chicken (硫酸鶏)" <root@acid-chicken.com>
Date: Thu, 27 Jul 2023 00:58:37 +0900
Subject: fix(frontend): replies to channel posts could change the visibility

---
 packages/frontend/src/components/MkNote.vue         | 1 +
 packages/frontend/src/components/MkNoteDetailed.vue | 1 +
 2 files changed, 2 insertions(+)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 37315e2c2e..02431a4557 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -341,6 +341,7 @@ function reply(viaKeyboard = false): void {
 	pleaseLogin();
 	os.post({
 		reply: appearNote,
+		channel: appearNote.channel,
 		animation: !viaKeyboard,
 	}, () => {
 		focus();
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 7e9f7fc5a1..a40b9cd2bd 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -320,6 +320,7 @@ function reply(viaKeyboard = false): void {
 	showMovedDialog();
 	os.post({
 		reply: appearNote,
+		channel: appearNote.channel,
 		animation: !viaKeyboard,
 	}, () => {
 		focus();
-- 
cgit v1.2.3-freya


From 71b016b29306387a5640f212800cb2ba71f36d73 Mon Sep 17 00:00:00 2001
From: kabo2468 <28654659+kabo2468@users.noreply.github.com>
Date: Thu, 27 Jul 2023 06:44:16 +0900
Subject: fix: PhotoSwipeによるクライアントのメモリリークの解消 (#11395)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Destroy PhotoSwipe on unmounted

* Update CHANGELOG.md
---
 CHANGELOG.md                                     |  1 +
 packages/frontend/src/components/MkMediaList.vue | 26 ++++++++++++++++--------
 2 files changed, 18 insertions(+), 9 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a509f43987..780d867bd7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@
 - Fix: モバイル表示のときページ下部がナビゲーションバーに隠れる問題を修正
 - Fix: 一部モーダルダイアログでスクロールできない問題を修正
 - Fix: Selecting all emojis in Custom emoji is impossible
+- Fix: PhotoSwipeによるメモリリークの修正
 
 ### Server
 - Fix: APIのオフセットが壊れていたせいで「もっと見る」でもっと見れない問題を修正
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index 661c0a9877..0cdccfb169 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -58,7 +58,7 @@ async function getClientWidthWithCache(targetEl: HTMLElement, containerEl: HTMLE
 </script>
 
 <script lang="ts" setup>
-import { onMounted, shallowRef } from 'vue';
+import { onMounted, onUnmounted, shallowRef } from 'vue';
 import * as misskey from 'misskey-js';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
@@ -82,12 +82,19 @@ const gallery = shallowRef<HTMLDivElement>();
 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);
+let lightbox: PhotoSwipeLightbox | null;
+
+const popstateHandler = (): void => {
+	if (lightbox.pswp && lightbox.pswp.isOpen === true) {
+		lightbox.pswp.close();
+	}
+};
 
 /**
  * アスペクト比をmediaListWithOneImageAppearanceに基づいていい感じに調整する
  * aspect-ratioではなくheightを使う
  */
- async function calcAspectRatio() {
+async function calcAspectRatio() {
 	if (!gallery.value || !root.value) return;
 
 	let img = props.mediaList[0];
@@ -137,7 +144,7 @@ const count = $computed(() => props.mediaList.filter(media => previewable(media)
 onMounted(() => {
 	calcAspectRatio();
 
-	const lightbox = new PhotoSwipeLightbox({
+	lightbox = new PhotoSwipeLightbox({
 		dataSource: props.mediaList
 			.filter(media => {
 				if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
@@ -221,12 +228,7 @@ onMounted(() => {
 
 	lightbox.init();
 
-	window.addEventListener('popstate', () => {
-		if (lightbox.pswp && lightbox.pswp.isOpen === true) {
-			lightbox.pswp.close();
-			return;
-		}
-	});
+	window.addEventListener('popstate', popstateHandler);
 
 	lightbox.on('beforeOpen', () => {
 		history.pushState(null, '', '#pswp');
@@ -239,6 +241,12 @@ onMounted(() => {
 	});
 });
 
+onUnmounted(() => {
+	window.removeEventListener('popstate', popstateHandler);
+	lightbox?.destroy();
+	lightbox = null;
+});
+
 const previewable = (file: misskey.entities.DriveFile): boolean => {
 	if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
 	// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
-- 
cgit v1.2.3-freya