From 2e565cac2cf502d4a2c13c706825d641912e69b7 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 8 Feb 2023 17:05:36 +0900
Subject: [PATCH] enhance(client): use VuePlyr

Close #9797

Co-Authored-By: Rox Squires <rox@roxsquires.gay>
---
 .../frontend/src/components/MkMediaBanner.vue | 31 ++++++++++---------
 .../frontend/src/components/MkMediaVideo.vue  |  4 +--
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue
index 718ce80e0d..c4af1ee8d0 100644
--- a/packages/frontend/src/components/MkMediaBanner.vue
+++ b/packages/frontend/src/components/MkMediaBanner.vue
@@ -6,15 +6,14 @@
 		<span>{{ $ts.clickToShow }}</span>
 	</div>
 	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
-		<audio
-			ref="audioEl"
-			class="audio"
-			:src="media.url"
-			:title="media.name"
-			controls
-			preload="metadata"
-			@volumechange="volumechange"
-		/>
+		<VuePlyr :options="{ volume: 0.5 }">
+			<audio controls preload="metadata">
+				<source
+					:src="media.url"
+					:type="media.type"
+				/>
+			</audio>
+		</VuePlyr>
 	</div>
 	<a
 		v-else class="download"
@@ -31,7 +30,9 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 import * as misskey from 'misskey-js';
+import VuePlyr from 'vue-plyr';
 import { ColdDeviceStorage } from '@/store';
+import 'vue-plyr/dist/vue-plyr.css';
 
 const props = withDefaults(defineProps<{
 	media: misskey.entities.DriveFile;
@@ -55,7 +56,11 @@ onMounted(() => {
 	width: 100%;
 	border-radius: 4px;
 	margin-top: 4px;
-	overflow: hidden;
+	overflow: clip;
+
+	--plyr-color-main: var(--accent);
+	--plyr-audio-controls-background: var(--bg);
+	--plyr-audio-controls-color: var(--accentLighten);
 
 	> .download,
 	> .sensitive {
@@ -93,10 +98,8 @@ onMounted(() => {
 	}
 
 	> .audio {
-		.audio {
-			display: block;
-			width: 100%;
-		}
+		border-radius: 8px;
+		overflow: clip;
 	}
 }
 </style>
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 2c24c16f57..979c3eed28 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -6,7 +6,7 @@
 	</div>
 </div>
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
-	<vue-plyr>
+	<VuePlyr :options="{ volume: 0.5 }">
 		<video
 			controls
 			:data-poster="video.thumbnailUrl"
@@ -17,7 +17,7 @@
 				:type="video.type"
 			/>
 		</video>
-	</vue-plyr>
+	</VuePlyr>
 	<i class="ti ti-eye-off" @click="hide = true"></i>
 </div>
 </template>