Apply suggestions from code review

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

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

packages/client/src/components/media-banner.vue

@@ -6,8 +6,9 @@
 		<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
+			ref="audioEl"
+			class="audio vlite-js"
 			:src="media.url"
 			:title="media.name"
 			controls
@@ -28,6 +29,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<{
@@ -43,7 +46,10 @@ function volumechange() {
 }
 
 onMounted(() => {
-	if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
+	if (audioEl) {
+		audioEl.volume = ColdDeviceStorage.get('mediaVolume');
+		new Vlitejs(audioEl);
+	}
 });
 </script>
 
@@ -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 {

packages/client/src/components/media-video.vue

@@ -7,31 +7,38 @@
 </div>
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
 	<video
+		ref="videoEl"
 		:poster="video.thumbnailUrl"
 		:title="video.comment"
 		:alt="video.comment"
+		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>
 
 <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';
 import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
+const videoEl = $ref(null);
+
+onMounted(() => {
+	new Vlitejs(videoEl);
+});
+
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
 </script>
 
@@ -39,6 +46,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 +84,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;

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"