fix: ⚡ Better import for plyr

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",

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 {

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;

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;
 	}