From 95005327a37ea1811bb061fde6db7c0bb03c7116 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 13 Jul 2022 22:10:58 -0700
Subject: [PATCH] Lifecycle hook

---
 packages/client/src/components/media-banner.vue |  7 ++++---
 packages/client/src/components/media-video.vue  | 13 +++++++++----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/media-banner.vue b/packages/client/src/components/media-banner.vue
index d4067fad7..0c44c7aae 100644
--- a/packages/client/src/components/media-banner.vue
+++ b/packages/client/src/components/media-banner.vue
@@ -39,8 +39,6 @@ const props = withDefaults(defineProps<{
 }>(), {
 });
 
-new Vlitejs('#player');
-
 const audioEl = $ref<HTMLAudioElement | null>();
 let hide = $ref(true);
 
@@ -49,7 +47,10 @@ function volumechange() {
 }
 
 onMounted(() => {
-	if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
+	if (audioEl) {
+		audioEl.volume = ColdDeviceStorage.get('mediaVolume');
+		new Vlitejs('#player');
+	}
 });
 </script>
 
diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index 57a81cd0d..9f5c3cc83 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import 'vlitejs/dist/vlite.css';
 import Vlitejs from 'vlitejs';
@@ -37,10 +37,15 @@ const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
-Vlitejs.registerPlugin('pip', VlitejsPip);
+const videoEl = $ref<HTMLVideoElement | null>();
 
-new Vlitejs('#player', {
-	plugins: ['pip'],
+onMounted(() => {
+	if (videoEl) {
+		Vlitejs.registerPlugin('pip', VlitejsPip);
+		new Vlitejs('#player', {
+			plugins: ['pip'],
+		});
+	}
 });
 
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));