From 5bd64758a1cef894830275e04ecc608f0a9222e9 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 13 Jul 2022 21:40:44 -0700
Subject: [PATCH 01/10] vlite

---
 packages/client/package.json                  |  4 +++-
 .../client/src/components/media-banner.vue    | 19 +++++++++++++----
 .../client/src/components/media-video.vue     | 21 +++++++++++++++----
 packages/client/yarn.lock                     | 12 +++++++++++
 4 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index 8d2efd0b92..0d28b6640e 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -75,6 +75,7 @@
 		"v-debounce": "0.1.2",
 		"vanilla-tilt": "1.7.2",
 		"vite": "3.0.0",
+		"vlitejs": "4.0.6",
 		"vue": "3.2.37",
 		"vue-prism-editor": "2.0.0-alpha.2",
 		"vuedraggable": "4.0.1",
@@ -108,5 +109,6 @@
 		"eslint-plugin-import": "2.26.0",
 		"eslint-plugin-vue": "9.2.0",
 		"start-server-and-test": "1.14.0"
-	}
+	},
+	"packageManager": "yarn@3.2.1"
 }
diff --git a/packages/client/src/components/media-banner.vue b/packages/client/src/components/media-banner.vue
index 5093f11e97..d4067fad76 100644
--- a/packages/client/src/components/media-banner.vue
+++ b/packages/client/src/components/media-banner.vue
@@ -6,8 +6,10 @@
 		<span>{{ $ts.clickToShow }}</span>
 	</div>
 	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
-		<audio ref="audioEl"
-			class="audio"
+		<audio
+			id="player"
+			ref="audioEl"
+			class="audio vlite-js"
 			:src="media.url"
 			:title="media.name"
 			controls
@@ -28,6 +30,8 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 import * as misskey from 'misskey-js';
+import 'vlitejs/dist/vlite.css';
+import Vlitejs from 'vlitejs';
 import { ColdDeviceStorage } from '@/store';
 
 const props = withDefaults(defineProps<{
@@ -35,6 +39,8 @@ const props = withDefaults(defineProps<{
 }>(), {
 });
 
+new Vlitejs('#player');
+
 const audioEl = $ref<HTMLAudioElement | null>();
 let hide = $ref(true);
 
@@ -54,6 +60,11 @@ onMounted(() => {
 	margin-top: 4px;
 	overflow: hidden;
 
+	> .vlite-js {
+		--vlite-colorPrimary: var(--accent);
+		--vlite-controlsColor: var(--fg);
+	}
+
 	> .download,
 	> .sensitive {
 		display: flex;
@@ -84,10 +95,10 @@ onMounted(() => {
 		background: var(--noteAttachedFile);
 	}
 
-	> .sensitive {
+	/* > .sensitive {
 		background: #111;
 		color: #fff;
-	}
+	} */
 
 	> .audio {
 		.audio {
diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index 5c38691e69..fe7a450d57 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -7,15 +7,17 @@
 </div>
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
 	<video
+		id="player"
 		:poster="video.thumbnailUrl"
 		:title="video.comment"
 		:alt="video.comment"
+		class="vlite-js"
 		preload="none"
 		controls
 		@contextmenu.stop
 	>
-		<source 
-			:src="video.url" 
+		<source
+			:src="video.url"
 			:type="video.type"
 		>
 	</video>
@@ -26,12 +28,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as misskey from 'misskey-js';
+import 'vlitejs/dist/vlite.css';
+import Vlitejs from 'vlitejs';
 import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
+new Vlitejs('#player', {
+	plugins: ['pip'],
+});
+
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
 </script>
 
@@ -39,6 +47,11 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
 .kkjnbbplepmiyuadieoenjgutgcmtsvu {
 	position: relative;
 
+	> .vlite-js {
+		--vlite-colorPrimary: var(--accent);
+		--vlite-controlsColor: var(--fg);
+	}
+
 	> i {
 		display: block;
 		position: absolute;
@@ -72,8 +85,8 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background: #111;
-	color: #fff;
+	/* background: #111;
+	color: #fff; */
 
 	> div {
 		display: table-cell;
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index 3cef5b87cc..4ee8af8462 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -4208,6 +4208,11 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz#9471efa3ef9128d2f7c6a7ca39c4dd6b5055b132"
   integrity sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==
 
+validate-target@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/validate-target/-/validate-target-2.0.0.tgz#b8fb4f8ccbed9503e8316d9f5d419daec82efab6"
+  integrity sha512-ELRDv4dNxEPrwavvk8OSNtyvUYZVqKIo9c3deHBxf8YhnNJMN9qtZJkW1sRCqI7gMElHWjy/AaIyJq/DdsKN2Q==
+
 vanilla-tilt@1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/vanilla-tilt/-/vanilla-tilt-1.7.2.tgz#59a5565d9f1f6d392a36969f223fb600dd101a81"
@@ -4234,6 +4239,13 @@ vite@3.0.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vlitejs@4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/vlitejs/-/vlitejs-4.0.6.tgz#0e5b7941cf14601bccb5c62a12bedcd770835b02"
+  integrity sha512-7wEBytjE90UqKbHb/gBrArZcy7trl5FAhzpNTE2xjRWT4bHgZaQ8RlLJbM7/aPaMNPExMCtELYhc8IIZff+E2A==
+  dependencies:
+    validate-target "^2.0.0"
+
 void-elements@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"

From 55e389ba615c429349dd6e0a5dedb97028daca5b Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 13 Jul 2022 21:50:59 -0700
Subject: [PATCH 02/10] fix

---
 packages/client/src/components/media-video.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index fe7a450d57..57a81cd0d0 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -30,12 +30,15 @@ import { ref } from 'vue';
 import * as misskey from 'misskey-js';
 import 'vlitejs/dist/vlite.css';
 import Vlitejs from 'vlitejs';
+import VlitejsPip from 'vlitejs/dist/plugins/pip';
 import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
+Vlitejs.registerPlugin('pip', VlitejsPip);
+
 new Vlitejs('#player', {
 	plugins: ['pip'],
 });

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 03/10] 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 d4067fad76..0c44c7aaea 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 57a81cd0d0..9f5c3cc83a 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'));

From 621e2cdb5b6fd2e8557a900d92c5a91c62383ca4 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 13 Jul 2022 22:54:33 -0700
Subject: [PATCH 04/10] fix

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

diff --git a/packages/client/src/components/media-banner.vue b/packages/client/src/components/media-banner.vue
index 0c44c7aaea..c9e0ae1cae 100644
--- a/packages/client/src/components/media-banner.vue
+++ b/packages/client/src/components/media-banner.vue
@@ -46,10 +46,12 @@ function volumechange() {
 	if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
 }
 
+const playerInstance = ref();
+
 onMounted(() => {
 	if (audioEl) {
 		audioEl.volume = ColdDeviceStorage.get('mediaVolume');
-		new Vlitejs('#player');
+		playerInstance.value = new Vlitejs('#player');
 	}
 });
 </script>
diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index 9f5c3cc83a..3e3af9b095 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -8,6 +8,7 @@
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
 	<video
 		id="player"
+		ref="videoEl"
 		:poster="video.thumbnailUrl"
 		:title="video.comment"
 		:alt="video.comment"
@@ -38,11 +39,13 @@ const props = defineProps<{
 }>();
 
 const videoEl = $ref<HTMLVideoElement | null>();
+Vlitejs.registerPlugin('pip', VlitejsPip);
+
+const playerInstance = ref();
 
 onMounted(() => {
 	if (videoEl) {
-		Vlitejs.registerPlugin('pip', VlitejsPip);
-		new Vlitejs('#player', {
+		playerInstance.value = new Vlitejs(videoEl, {
 			plugins: ['pip'],
 		});
 	}

From b17fb633ffcfded2910e8512c60974a25bbd485c Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 13 Jul 2022 22:58:09 -0700
Subject: [PATCH 05/10] fix

---
 packages/client/src/components/media-video.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index 3e3af9b095..c68b8aed32 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -39,7 +39,12 @@ const props = defineProps<{
 }>();
 
 const videoEl = $ref<HTMLVideoElement | null>();
-Vlitejs.registerPlugin('pip', VlitejsPip);
+try {
+	Vlitejs.registerPlugin('pip', VlitejsPip);
+}
+catch (err) {
+	console.error('Pip plugin is already registered');
+}
 
 const playerInstance = ref();
 

From 82dca831a4b93906f17bb27803dbcf545736ca1c Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 13 Jul 2022 23:03:06 -0700
Subject: [PATCH 06/10] remove pip

---
 packages/client/src/components/media-video.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index c68b8aed32..1526a2633a 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -31,7 +31,6 @@ import { ref, onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import 'vlitejs/dist/vlite.css';
 import Vlitejs from 'vlitejs';
-import VlitejsPip from 'vlitejs/dist/plugins/pip';
 import { defaultStore } from '@/store';
 
 const props = defineProps<{
@@ -39,20 +38,12 @@ const props = defineProps<{
 }>();
 
 const videoEl = $ref<HTMLVideoElement | null>();
-try {
-	Vlitejs.registerPlugin('pip', VlitejsPip);
-}
-catch (err) {
-	console.error('Pip plugin is already registered');
-}
 
 const playerInstance = ref();
 
 onMounted(() => {
 	if (videoEl) {
-		playerInstance.value = new Vlitejs(videoEl, {
-			plugins: ['pip'],
-		});
+		playerInstance.value = new Vlitejs('#player');
 	}
 });
 

From 7101ceefb111ad5c56c274ee8a7d1ee9e20a4809 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 13 Jul 2022 23:19:02 -0700
Subject: [PATCH 07/10] fix

---
 packages/client/src/components/media-video.vue | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index 1526a2633a..3234d950ec 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -15,13 +15,10 @@
 		class="vlite-js"
 		preload="none"
 		controls
+		:src="video.url"
+		:type="video.type"
 		@contextmenu.stop
-	>
-		<source
-			:src="video.url"
-			:type="video.type"
-		>
-	</video>
+	></video>
 	<i class="fas fa-eye-slash" @click="hide = true"></i>
 </div>
 </template>
@@ -39,11 +36,9 @@ const props = defineProps<{
 
 const videoEl = $ref<HTMLVideoElement | null>();
 
-const playerInstance = ref();
-
 onMounted(() => {
 	if (videoEl) {
-		playerInstance.value = new Vlitejs('#player');
+		new Vlitejs('#player');
 	}
 });
 

From 2292c42742e22833b337221e8b4702fbc2ebf034 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 13 Jul 2022 23:25:07 -0700
Subject: [PATCH 08/10] lint

---
 packages/client/src/components/media-banner.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/client/src/components/media-banner.vue b/packages/client/src/components/media-banner.vue
index c9e0ae1cae..0c44c7aaea 100644
--- a/packages/client/src/components/media-banner.vue
+++ b/packages/client/src/components/media-banner.vue
@@ -46,12 +46,10 @@ function volumechange() {
 	if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
 }
 
-const playerInstance = ref();
-
 onMounted(() => {
 	if (audioEl) {
 		audioEl.volume = ColdDeviceStorage.get('mediaVolume');
-		playerInstance.value = new Vlitejs('#player');
+		new Vlitejs('#player');
 	}
 });
 </script>

From a61da5e486cf52456ad94adb02b8eb0d361e7f09 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 13 Jul 2022 23:25:32 -0700
Subject: [PATCH 09/10] =?UTF-8?q?=F0=9F=A4=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/media-video.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index 3234d950ec..72b01a9a6b 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -34,12 +34,8 @@ const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
-const videoEl = $ref<HTMLVideoElement | null>();
-
 onMounted(() => {
-	if (videoEl) {
-		new Vlitejs('#player');
-	}
+	new Vlitejs('#player');
 });
 
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));

From 87b38c651f6c4f49495d1efb73f19f2d89e602be Mon Sep 17 00:00:00 2001
From: Kainoa Kanter <44733677+ThatOneCalculator@users.noreply.github.com>
Date: Fri, 15 Jul 2022 07:23:23 -0700
Subject: [PATCH 10/10] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
---
 packages/client/package.json                    | 3 +--
 packages/client/src/components/media-banner.vue | 3 +--
 packages/client/src/components/media-video.vue  | 5 +++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index 0d28b6640e..d1ba0ad45f 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -109,6 +109,5 @@
 		"eslint-plugin-import": "2.26.0",
 		"eslint-plugin-vue": "9.2.0",
 		"start-server-and-test": "1.14.0"
-	},
-	"packageManager": "yarn@3.2.1"
+	}
 }
diff --git a/packages/client/src/components/media-banner.vue b/packages/client/src/components/media-banner.vue
index 0c44c7aaea..0f878e9d97 100644
--- a/packages/client/src/components/media-banner.vue
+++ b/packages/client/src/components/media-banner.vue
@@ -7,7 +7,6 @@
 	</div>
 	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
 		<audio
-			id="player"
 			ref="audioEl"
 			class="audio vlite-js"
 			:src="media.url"
@@ -49,7 +48,7 @@ function volumechange() {
 onMounted(() => {
 	if (audioEl) {
 		audioEl.volume = ColdDeviceStorage.get('mediaVolume');
-		new Vlitejs('#player');
+		new Vlitejs(audioEl);
 	}
 });
 </script>
diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index 72b01a9a6b..bd459b3eb1 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -7,7 +7,6 @@
 </div>
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
 	<video
-		id="player"
 		ref="videoEl"
 		:poster="video.thumbnailUrl"
 		:title="video.comment"
@@ -34,8 +33,10 @@ const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
+const videoEl = $ref(null);
+
 onMounted(() => {
-	new Vlitejs('#player');
+	new Vlitejs(videoEl);
 });
 
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));