Revert "Merge remote-tracking branch 'thatonecalculator/vlite' into develop"

This reverts commit d1462806778434205f1576f32b1a833822ad39e1, reversing
changes made to 9fc5062018a98283ba232bdf5ab48c6ef36d010d.

packages/client/package.json

@@ -72,7 +72,6 @@
 		"v-debounce": "0.1.2",
 		"vanilla-tilt": "1.7.2",
 		"vite": "^3.0.2",
-		"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,9 +6,8 @@
 		<span>{{ $ts.clickToShow }}</span>
 	</div>
 	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
-		<audio
-			ref="audioEl"
-			class="audio vlite-js"
+		<audio ref="audioEl"
+			class="audio"
 			:src="media.url"
 			:title="media.name"
 			controls
@@ -29,8 +28,6 @@
 <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<{
@@ -46,10 +43,7 @@ function volumechange() {
 }
 
 onMounted(() => {
-	if (audioEl) {
-		audioEl.volume = ColdDeviceStorage.get('mediaVolume');
-		new Vlitejs(audioEl);
-	}
+	if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
 });
 </script>
 
@@ -60,11 +54,6 @@ onMounted(() => {
 	margin-top: 4px;
 	overflow: hidden;
 
-	> .vlite-js {
-		--vlite-colorPrimary: var(--accent);
-		--vlite-controlsColor: var(--fg);
-	}
-
 	> .download,
 	> .sensitive {
 		display: flex;
@@ -95,10 +84,10 @@ onMounted(() => {
 		background: var(--noteAttachedFile);
 	}
 
-	/* > .sensitive {
+	> .sensitive {
 		background: #111;
 		color: #fff;
-	} */
+	}
 
 	> .audio {
 		.audio {

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

@@ -7,38 +7,31 @@
 </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
-	></video>
+	>
+		<source 
+			:src="video.url" 
+			:type="video.type"
+		>
+	</video>
 	<i class="fas fa-eye-slash" @click="hide = true"></i>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+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;
 }>();
 
-const videoEl = $ref(null);
-
-onMounted(() => {
-	new Vlitejs(videoEl);
-});
-
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
 </script>
 
@@ -46,11 +39,6 @@ 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;
@@ -84,8 +72,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;