From 8a55d8a468cdbf39e9d741411d42a205e20e0f70 Mon Sep 17 00:00:00 2001
From: ShittyKopper <shittykopper@w.on-t.work>
Date: Wed, 24 Jan 2024 19:26:28 +0300
Subject: [PATCH] upd: add a download button to videos and audio

this only works for media from the same origin due to annoying browser
restrictions, but then the same applies to every other download button
in misskey (e.g. the one in drive) and there's basically nothing i can
to do solve it.
---
 packages/frontend/src/components/MkMediaAudio.vue | 3 +++
 packages/frontend/src/components/MkMediaVideo.vue | 3 +++
 packages/frontend/src/style.scss                  | 4 ++++
 3 files changed, 10 insertions(+)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index a52f2a0e0..dc76d2bcd 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -32,6 +32,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</button>
 		</div>
 		<div :class="[$style.controlsChild, $style.controlsRight]">
+			<a class="_button" :class="$style.controlButton" :href="audio.url" :download="audio.name" target="_blank">
+				<i class="ph-download ph-bold ph-lg"></i>
+			</a>
 			<button class="_button" :class="$style.controlButton" @click="showMenu">
 				<i class="ph-gear ph-bold ph-lg"></i>
 			</button>
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 3b8d43c85..b4ad92cf0 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -51,6 +51,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</button>
 			</div>
 			<div :class="[$style.controlsChild, $style.controlsRight]">
+				<a class="_button" :class="$style.controlButton" :href="video.url" :download="video.name" target="_blank">
+					<i class="ph-download ph-bold ph-lg"></i>
+				</a>
 				<button class="_button" :class="$style.controlButton" @click="showMenu">
 					<i class="ph-settings ph-bold ph-lg"></i>
 				</button>
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 46f88825b..bc43d8537 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -253,6 +253,10 @@ rt {
 	line-height: inherit;
 	max-width: 100%;
 
+	&:hover {
+		text-decoration: none;
+	}
+
 	&:focus-visible {
 		outline: none;
 	}