enhance(client): use VuePlyr

Close #9797

Co-Authored-By: Rox Squires <rox@roxsquires.gay>

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"
+		<VuePlyr :options="{ volume: 0.5 }">
+			<audio controls preload="metadata">
+				<source
 					:src="media.url"
-			:title="media.name"
-			controls
-			preload="metadata"
-			@volumechange="volumechange"
+					: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>

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>