From a4f197f608fba7fdab8611af7d25415f04309f77 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 15 Feb 2020 19:33:12 +0900
Subject: [PATCH 1/6] fix files grid height

---
 src/client/components/media-list.vue       | 37 ++++++++++++++++++----
 src/client/components/sub-note-content.vue |  9 ++++--
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue
index 08722ff91a0a..3a34ad813ede 100644
--- a/src/client/components/media-list.vue
+++ b/src/client/components/media-list.vue
@@ -3,8 +3,8 @@
 	<template v-for="media in mediaList.filter(media => !previewable(media))">
 		<x-banner :media="media" :key="media.id"/>
 	</template>
-	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
-		<div :data-count="mediaList.filter(media => previewable(media)).length" ref="grid">
+	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" ref="gridOuter">
+		<div :data-count="mediaList.filter(media => previewable(media)).length" :style="gridHeight !== null ? { height: `${gridHeight}px` } : {}">
 			<template v-for="media in mediaList">
 				<x-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
 				<x-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
@@ -32,16 +32,39 @@ export default Vue.extend({
 		},
 		raw: {
 			default: false
+		},
+		width: {
+			type: Number
+		}
+	},
+	computed: {
+		gridHeight() {
+			if (this.$refs.gridOuter) {
+				if (this.$props.width) {
+					return this.$props.width * 9 / 16;
+				} else if (this.$refs.gridOuter.clientHeight) {
+					return this.$refs.gridOuter.clientHeight;
+				}
+				return 287;
+			}
+
+			return null;
 		}
 	},
-	mounted() {
+	/*mounted() {
+		console.log(this.$props.width)
 		//#region for Safari bug
-		if (this.$refs.grid) {
-			this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px`
-				: '287px';
+		if (this.$refs.gridOuter) {
+			if (this.$props.width) {
+				this.$refs.gridInner.style.height = `${this.$props.width * 9 / 16}px`
+			} else if (this.$refs.gridOuter.clientHeight) {
+				this.$refs.gridInner.style.height = `${this.$refs.gridOuter.clientHeight}px`
+			} else {
+				this.$refs.gridInner.style.height = '287px';
+			}
 		}
 		//#endregion
-	},
+	},*/
 	methods: {
 		previewable(file) {
 			return file.type.startsWith('video') || file.type.startsWith('image');
diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue
index e60c19744231..63f56c76810d 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="wrmlmaau">
+<div class="wrmlmaau" ref="i">
 	<div class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ $t('deleted') }})</span>
@@ -9,7 +9,7 @@
 	</div>
 	<details v-if="note.files.length > 0">
 		<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
-		<x-media-list :media-list="note.files"/>
+		<x-media-list :media-list="note.files" :width="width"/>
 	</details>
 	<details v-if="note.poll">
 		<summary>{{ $t('poll') }}</summary>
@@ -39,8 +39,13 @@ export default Vue.extend({
 	},
 	data() {
 		return {
+			width: 0,
+
 			faReply
 		};
+	},
+	mounted() {
+		this.width = this.$refs.i.getBoundingClientRect().width
 	}
 });
 </script>

From a0833ca691dce24fa96a47cbab541bfa28ae0dc9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 15 Feb 2020 19:34:30 +0900
Subject: [PATCH 2/6] missing colon

---
 src/client/components/sub-note-content.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue
index 63f56c76810d..32752cf67690 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -45,7 +45,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.width = this.$refs.i.getBoundingClientRect().width
+		this.width = this.$refs.i.getBoundingClientRect().width;
 	}
 });
 </script>

From 9cb3882efa389c7d5beeca74914ab7e31cd1a51d Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 15 Feb 2020 20:18:37 +0900
Subject: [PATCH 3/6] :v:

---
 src/client/components/media-list.vue       | 53 +++++++++++-----------
 src/client/components/sub-note-content.vue |  1 +
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue
index 3a34ad813ede..6479f9079af7 100644
--- a/src/client/components/media-list.vue
+++ b/src/client/components/media-list.vue
@@ -4,7 +4,7 @@
 		<x-banner :media="media" :key="media.id"/>
 	</template>
 	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" ref="gridOuter">
-		<div :data-count="mediaList.filter(media => previewable(media)).length" :style="gridHeight !== null ? { height: `${gridHeight}px` } : {}">
+		<div :data-count="mediaList.filter(media => previewable(media)).length" :style="gridInnerStyle">
 			<template v-for="media in mediaList">
 				<x-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
 				<x-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
@@ -37,38 +37,39 @@ export default Vue.extend({
 			type: Number
 		}
 	},
-	computed: {
-		gridHeight() {
-			if (this.$refs.gridOuter) {
-				if (this.$props.width) {
-					return this.$props.width * 9 / 16;
-				} else if (this.$refs.gridOuter.clientHeight) {
-					return this.$refs.gridOuter.clientHeight;
-				}
-				return 287;
-			}
-
-			return null;
+	data() {
+		return {
+			gridInnerStyle: {}
 		}
 	},
-	/*mounted() {
-		console.log(this.$props.width)
-		//#region for Safari bug
-		if (this.$refs.gridOuter) {
-			if (this.$props.width) {
-				this.$refs.gridInner.style.height = `${this.$props.width * 9 / 16}px`
-			} else if (this.$refs.gridOuter.clientHeight) {
-				this.$refs.gridInner.style.height = `${this.$refs.gridOuter.clientHeight}px`
-			} else {
-				this.$refs.gridInner.style.height = '287px';
-			}
+	mounted() {
+		// for Safari bug
+		if (this.$refs.gridOuter.clientHeight) {
+			this.gridInnerStyle = { height: `${this.$refs.gridOuter.clientHeight}px` }
 		}
-		//#endregion
-	},*/
+	}
 	methods: {
 		previewable(file) {
 			return file.type.startsWith('video') || file.type.startsWith('image');
 		}
+	},
+	watch: {
+		width(width) {
+			// for Safari bug
+			if (this.$refs.gridOuter) {
+				let height = 287
+
+				if (width) {
+					height = width * 9 / 16;
+				} else if (this.$refs.gridOuter.clientHeight) {
+					height = this.$refs.gridOuter.clientHeight;
+				}
+
+				this.gridInnerStyle = { height: `${height}px` }
+			} else {
+				this.gridInnerStyle = {}
+			}
+		}
 	}
 });
 </script>
diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue
index 32752cf67690..58c07aa15f24 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -45,6 +45,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
+		// for Safari bug
 		this.width = this.$refs.i.getBoundingClientRect().width;
 	}
 });

From 65704bbf01c8707f9340649dc2a7c6a8c836bf3f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 15 Feb 2020 21:20:01 +0900
Subject: [PATCH 4/6] :v:

---
 src/client/components/media-list.vue       | 36 ++++++++++++----------
 src/client/components/sub-note-content.vue |  4 +--
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue
index 6479f9079af7..27f10a307f62 100644
--- a/src/client/components/media-list.vue
+++ b/src/client/components/media-list.vue
@@ -33,8 +33,9 @@ export default Vue.extend({
 		raw: {
 			default: false
 		},
-		width: {
-			type: Number
+		// specify the parent element
+		parentElement: {
+			type: Object
 		}
 	},
 	data() {
@@ -43,31 +44,32 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		// for Safari bug
-		if (this.$refs.gridOuter.clientHeight) {
-			this.gridInnerStyle = { height: `${this.$refs.gridOuter.clientHeight}px` }
-		}
-	}
+		this.size();
+		window.addEventListener('resize', this.size);
+		this.$on('resize', this.size);
+	},
+	beforeDestroy() {
+		window.removeEventListener('resize', this.size);
+	},
 	methods: {
 		previewable(file) {
 			return file.type.startsWith('video') || file.type.startsWith('image');
-		}
-	},
-	watch: {
-		width(width) {
+		},
+		size() {
 			// for Safari bug
 			if (this.$refs.gridOuter) {
-				let height = 287
+				let height = 287;
+				const parent = this.$props.parentElement || this.$parent.$el;
 
-				if (width) {
-					height = width * 9 / 16;
-				} else if (this.$refs.gridOuter.clientHeight) {
+				if (this.$refs.gridOuter.clientHeight) {
 					height = this.$refs.gridOuter.clientHeight;
+				} else if (parent) {
+					height = parent.getBoundingClientRect().width * 9 / 16;
 				}
 
-				this.gridInnerStyle = { height: `${height}px` }
+				this.gridInnerStyle = { height: `${height}px` };
 			} else {
-				this.gridInnerStyle = {}
+				this.gridInnerStyle = {};
 			}
 		}
 	}
diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue
index 58c07aa15f24..fdb311c626ca 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -9,7 +9,7 @@
 	</div>
 	<details v-if="note.files.length > 0">
 		<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
-		<x-media-list :media-list="note.files" :width="width"/>
+		<x-media-list :media-list="note.files"/>
 	</details>
 	<details v-if="note.poll">
 		<summary>{{ $t('poll') }}</summary>
@@ -39,7 +39,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			width: 0,
+			i: this.$refs.i,
 
 			faReply
 		};

From f799375635664dad2dfb9c6c5d4682d18f82f305 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 15 Feb 2020 21:31:56 +0900
Subject: [PATCH 5/6] fix

---
 src/client/components/sub-note-content.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue
index fdb311c626ca..e60c19744231 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="wrmlmaau" ref="i">
+<div class="wrmlmaau">
 	<div class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ $t('deleted') }})</span>
@@ -39,14 +39,8 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			i: this.$refs.i,
-
 			faReply
 		};
-	},
-	mounted() {
-		// for Safari bug
-		this.width = this.$refs.i.getBoundingClientRect().width;
 	}
 });
 </script>

From cb3900921f397e821d02390c2148fa5ce57d4742 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 19 Feb 2020 07:49:53 +0900
Subject: [PATCH 6/6] remove unused event listener

---
 src/client/components/media-list.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue
index 27f10a307f62..6ce7df276f4a 100644
--- a/src/client/components/media-list.vue
+++ b/src/client/components/media-list.vue
@@ -46,7 +46,6 @@ export default Vue.extend({
 	mounted() {
 		this.size();
 		window.addEventListener('resize', this.size);
-		this.$on('resize', this.size);
 	},
 	beforeDestroy() {
 		window.removeEventListener('resize', this.size);