From da46c55db7144ff7577de45ca8d17f38c7d5f7a8 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 16 Aug 2022 17:43:33 -0700
Subject: [PATCH] fix: :zap: Better import for plyr

---
 package.json                                  |  2 +-
 .../client/src/components/media-banner.vue    | 19 ++++++++++++-------
 .../client/src/components/media-video.vue     |  6 ++++--
 packages/client/src/init.ts                   |  4 ----
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 506e48689c..e3c6eb6b15 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.118.1-calc.4",
+	"version": "12.118.1-calc.4.1",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/media-banner.vue b/packages/client/src/components/media-banner.vue
index 5093f11e97..7382e953a1 100644
--- a/packages/client/src/components/media-banner.vue
+++ b/packages/client/src/components/media-banner.vue
@@ -6,13 +6,15 @@
 		<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>
+			<audio ref="audioEl"
+				class="audio"
+				:src="media.url"
+				:title="media.name"
+				controls
+				preload="metadata"
+				@volumechange="volumechange" />
+		</VuePlyr>
 	</div>
 	<a v-else class="download"
 		:href="media.url"
@@ -28,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;
@@ -53,6 +57,7 @@ onMounted(() => {
 	border-radius: 4px;
 	margin-top: 4px;
 	overflow: hidden;
+	--plyr-color-main: var(--accent);
 
 	> .download,
 	> .sensitive {
diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index 061e9f1c14..0dfd304aa2 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -6,7 +6,7 @@
 	</div>
 </div>
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
-	<vue-plyr>
+	<VuePlyr>
 		<video
 			:poster="video.thumbnailUrl"
 			:title="video.comment"
@@ -20,7 +20,7 @@
 				:type="video.type"
 			>
 		</video>
-	</vue-plyr>
+	</VuePlyr>
 	<i class="fas fa-eye-slash" @click="hide = true"></i>
 </div>
 </template>
@@ -28,7 +28,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as misskey from 'misskey-js';
+import VuePlyr from 'vue-plyr';
 import { defaultStore } from '@/store';
+import 'vue-plyr/dist/vue-plyr.css';
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 9cb921bfb2..e977b4de52 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -21,8 +21,6 @@ import widgets from '@/widgets';
 import directives from '@/directives';
 import components from '@/components';
 import { version, ui, lang, host } from '@/config';
-import VuePlyr from 'vue-plyr';
-import 'vue-plyr/dist/vue-plyr.css';
 import { applyTheme } from '@/scripts/theme';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
 import { i18n } from '@/i18n';
@@ -179,8 +177,6 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 		defineAsyncComponent(() => import('@/ui/universal.vue')),
 	);
 
-	app.use(VuePlyr, { plyr: {} });
-
 	if (_DEV_) {
 		app.config.performance = true;
 	}