From a262e1353f3bd8a722916ccafd5f9ff44bb3d9d5 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 21 Sep 2022 13:10:47 -0700
Subject: [PATCH] Add download button to Plyr (co-authored by @nullobsi)

---
 package.json                                  |  2 +-
 .../client/src/components/MkMediaBanner.vue   | 29 +++++++++++++++----
 .../client/src/components/MkMediaVideo.vue    | 25 +++++++++++++---
 .../messaging/messaging-room.message.vue      |  8 ++---
 4 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index adc820617c..2b04854317 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.1-rc.8",
+	"version": "12.119.0-calc.1-rc.9",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index 7382e953a1..fc568d9be2 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -6,17 +6,36 @@
 		<span>{{ $ts.clickToShow }}</span>
 	</div>
 	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
-		<VuePlyr>
-			<audio ref="audioEl"
+		<VuePlyr
+			:options="{
+				controls: [
+					'play-large',
+					'restart',
+					'play',
+					'progress',
+					'current-time',
+					'duration',
+					'mute',
+					'volume',
+					'settings',
+					'download',
+				],
+				disableContextMenu: false,
+			}"
+		>
+			<audio
+				ref="audioEl"
 				class="audio"
 				:src="media.url"
 				:title="media.name"
 				controls
 				preload="metadata"
-				@volumechange="volumechange" />
+				@volumechange="volumechange"
+			/>
 		</VuePlyr>
 	</div>
-	<a v-else class="download"
+	<a
+		v-else class="download"
 		:href="media.url"
 		:title="media.name"
 		:download="media.name"
@@ -29,8 +48,8 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import * as misskey from 'misskey-js';
 import VuePlyr from 'vue-plyr';
+import type * as misskey from 'misskey-js';
 import { ColdDeviceStorage } from '@/store';
 import 'vue-plyr/dist/vue-plyr.css';
 
diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue
index 92e9e9d6f1..6936ec7c7a 100644
--- a/packages/client/src/components/MkMediaVideo.vue
+++ b/packages/client/src/components/MkMediaVideo.vue
@@ -6,12 +6,29 @@
 	</div>
 </div>
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
-	<VuePlyr>
+	<VuePlyr
+		:options="{
+			controls: [
+				'play-large',
+				'restart',
+				'play',
+				'progress',
+				'current-time',
+				'duration',
+				'mute',
+				'volume',
+				'settings',
+				'pip',
+				'download',
+				'fullscreen'
+			],
+			disableContextMenu: false,
+		}"
+	>
 		<video
 			:poster="video.thumbnailUrl"
 			:title="video.comment"
-			:alt="video.comment"
-			:download="video.url"
+			:aria-label="video.comment"
 			preload="none"
 			controls
 			@contextmenu.stop
@@ -28,8 +45,8 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import * as misskey from 'misskey-js';
 import VuePlyr from 'vue-plyr';
+import type * as misskey from 'misskey-js';
 import { defaultStore } from '@/store';
 import 'vue-plyr/dist/vue-plyr.css';
 
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 2495d0798d..de8d22f210 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -2,14 +2,14 @@
 <div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
 	<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
 	<div class="content">
-		<div class="balloon" :class="{ noText: message.text == null }" >
+		<div class="balloon" :class="{ noText: message.text == null }">
 			<button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del">
 				<img src="/client-assets/remove.png" alt="Delete"/>
 			</button>
 			<div v-if="!message.isDeleted" class="content">
 				<Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
 				<div v-if="message.file" class="file">
-					<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name" max-width="400"/>
+					<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
 					<VuePlyr v-else-if="message.file.type.split('/')[0] == 'video'">
 						<video
 							:alt="message.file.name"
@@ -51,9 +51,9 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as mfm from 'mfm-js';
-import * as Misskey from 'misskey-js';
-import XImage from '@/components/MkMediaImage.vue';
 import VuePlyr from 'vue-plyr';
+import type * as Misskey from 'misskey-js';
+import XImage from '@/components/MkMediaImage.vue';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import * as os from '@/os';