From 525c8391a6436f17c5608a646cbcebc3cecf2beb Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sat, 3 Sep 2022 23:56:41 +0200
Subject: [PATCH 1/2] rename prop: image -> file

---
 packages/client/src/components/drive.file.vue        |  2 +-
 packages/client/src/components/media-caption.vue     | 12 ++++++------
 .../client/src/components/post-form-attaches.vue     |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/drive.file.vue b/packages/client/src/components/drive.file.vue
index 268c79bcf..262ce176f 100644
--- a/packages/client/src/components/drive.file.vue
+++ b/packages/client/src/components/drive.file.vue
@@ -141,7 +141,7 @@ function describe(): void {
 			placeholder: i18n.ts.inputNewDescription,
 			default: props.file.comment ?? '',
 		},
-		image: props.file,
+		file: props.file,
 	}, {
 		done: result => {
 			if (!result || result.canceled) return;
diff --git a/packages/client/src/components/media-caption.vue b/packages/client/src/components/media-caption.vue
index 5b3628f64..8a973fbf3 100644
--- a/packages/client/src/components/media-caption.vue
+++ b/packages/client/src/components/media-caption.vue
@@ -15,12 +15,12 @@
 			</div>
 		</div>
 		<div class="hdrwpsaf fullwidth">
-			<header>{{ image.name }}</header>
-			<img :src="image.url" :alt="image.comment" :title="image.comment" @click="modal.close()"/>
+			<header>{{ file.name }}</header>
+			<img :src="file.url" @click="modal.close()"/>
 			<footer>
-				<span>{{ image.type }}</span>
-				<span>{{ bytes(image.size) }}</span>
-				<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
+				<span>{{ file.type }}</span>
+				<span>{{ bytes(file.size) }}</span>
+				<span v-if="file.properties?.width">{{ number(file.properties.width) }}px × {{ number(file.properties.height) }}px</span>
 			</footer>
 		</div>
 	</div>
@@ -43,7 +43,7 @@ type Input = {
 };
 
 const props = withDefaults(defineProps<{
-	image: misskey.entities.DriveFile;
+	file: misskey.entities.DriveFile;
 	title?: string;
 	input: Input;
 	showOkButton: boolean;
diff --git a/packages/client/src/components/post-form-attaches.vue b/packages/client/src/components/post-form-attaches.vue
index fdf6fdbe7..fdf5a50ec 100644
--- a/packages/client/src/components/post-form-attaches.vue
+++ b/packages/client/src/components/post-form-attaches.vue
@@ -84,7 +84,7 @@ async function describe(file: DriveFile): Promise<void> {
 			placeholder: i18n.ts.inputNewDescription,
 			default: file.comment ?? '',
 		},
-		image: file,
+		file,
 	}, {
 		done: result => {
 			if (!result || result.canceled) return;

From 00c8eff611185d07214895c533a66b9866179723 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 4 Sep 2022 00:07:18 +0200
Subject: [PATCH 2/2] Client: alt text dialog properly handles non-images

Changelog: Changed
---
 packages/client/src/components/media-caption.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/media-caption.vue b/packages/client/src/components/media-caption.vue
index 8a973fbf3..8f05775c0 100644
--- a/packages/client/src/components/media-caption.vue
+++ b/packages/client/src/components/media-caption.vue
@@ -16,7 +16,14 @@
 		</div>
 		<div class="hdrwpsaf fullwidth">
 			<header>{{ file.name }}</header>
-			<img :src="file.url" @click="modal.close()"/>
+			<img v-if="file.type.startsWidth('image/')" :src="file.url" @click="modal.close()"/>
+			<video v-else-if="file.type.startsWidth('video/')" controls>
+				<source :src="file.url" :type="file.type">
+			</video>
+			<audio v-else-if="file.type.startsWidth('audio/')" controls>
+				<source :src="file.url" :type="file.type">
+			</audio>
+			<a v-else :href="file.url">{{ file.url }}</a>
 			<footer>
 				<span>{{ file.type }}</span>
 				<span>{{ bytes(file.size) }}</span>