vlite

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

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 {

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;

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"