fix

packages/client/package.json

@@ -46,6 +46,7 @@
 		"ms": "2.1.3",
 		"nested-property": "4.0.0",
 		"photoswipe": "5.2.8",
+		"plyr": "3.7.2",
 		"prismjs": "1.28.0",
 		"private-ip": "2.3.3",
 		"promise-limit": "2.7.0",

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

@@ -7,7 +7,7 @@
 	</div>
 	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
 		<audio ref="audioEl"
-			class="audio"
+			class="audio plyr"
 			:src="media.url"
 			:title="media.name"
 			controls
@@ -29,12 +29,17 @@
 import { onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import { ColdDeviceStorage } from '@/store';
+const Plyr = require('plyr');
 
 const props = withDefaults(defineProps<{
 	media: misskey.entities.DriveFile;
 }>(), {
 });
 
+new Plyr('.plyr', {
+	settings: ['speed', 'loop'],
+});
+
 const audioEl = $ref<HTMLAudioElement | null>();
 let hide = $ref(true);
 
@@ -54,6 +59,13 @@ onMounted(() => {
 	margin-top: 4px;
 	overflow: hidden;
 
+	> .plyr {
+		--plyr-color-main: var(--accent);
+		--plyr-video-background: var(--bg);
+		--plyr-badge-text-color: var(--fg);
+		--plyr-badge-background: var(--accentedBg);
+	}
+
 	> .download,
 	> .sensitive {
 		display: flex;

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

@@ -10,12 +10,14 @@
 		:poster="video.thumbnailUrl"
 		:title="video.comment"
 		:alt="video.comment"
+		class="plyr"
 		preload="none"
 		controls
+		playsinline
 		@contextmenu.stop
 	>
-		<source 
-			:src="video.url" 
+		<source
+			:src="video.url"
 			:type="video.type"
 		>
 	</video>
@@ -27,11 +29,18 @@
 import { ref } from 'vue';
 import * as misskey from 'misskey-js';
 import { defaultStore } from '@/store';
+const Plyr = require('plyr');
+
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
+new Plyr('.plyr', {
+	settings: ['speed', 'loop'],
+	title: props.video.comment,
+});
+
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
 </script>
 
@@ -39,6 +48,13 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
 .kkjnbbplepmiyuadieoenjgutgcmtsvu {
 	position: relative;
 
+	> .plyr {
+		--plyr-color-main: var(--accent);
+		--plyr-video-background: var(--bg);
+		--plyr-badge-text-color: var(--fg);
+		--plyr-badge-background: var(--accentedBg);
+	}
+
 	> i {
 		display: block;
 		position: absolute;
@@ -72,8 +88,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

@@ -1221,6 +1221,11 @@ content-disposition@0.5.4:
   dependencies:
     safe-buffer "5.2.1"
 
+core-js@^3.22.0:
+  version "3.23.4"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.23.4.tgz#92d640faa7f48b90bbd5da239986602cfc402aa6"
+  integrity sha512-vjsKqRc1RyAJC3Ye2kYqgfdThb3zYnx9CrqoCcjMOENMtQPC7ZViBvlDxwYU/2z2NI/IPuiXw5mT4hWhddqjzQ==
+
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -1260,6 +1265,11 @@ csstype@^2.6.8:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
   integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
 
+custom-event-polyfill@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
+  integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
+
 cypress@10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.3.0.tgz#fae8d32f0822fcfb938e79c7c31ef344794336ae"
@@ -2777,6 +2787,11 @@ listr2@^3.8.3:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
+loadjs@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6"
+  integrity sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -3301,6 +3316,17 @@ plimit-lit@^1.2.6:
   dependencies:
     queue-lit "^1.2.7"
 
+plyr@3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/plyr/-/plyr-3.7.2.tgz#183d2397e7401a577700c8319fe133692b4aff54"
+  integrity sha512-I0ZC/OI4oJ0iWG9s2rrnO0YFO6aLyrPiQBq9kum0FqITYljwTPBbYL3TZZu8UJQJUq7tUWN18Q7ACwNCkGKABQ==
+  dependencies:
+    core-js "^3.22.0"
+    custom-event-polyfill "^1.0.7"
+    loadjs "^4.2.0"
+    rangetouch "^2.0.1"
+    url-polyfill "^1.1.12"
+
 pngjs@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
@@ -3546,6 +3572,11 @@ rangestr@0.0.1:
   resolved "https://registry.yarnpkg.com/rangestr/-/rangestr-0.0.1.tgz#f72ff9246f10f2a7d7c16e14616f617be2c2635a"
   integrity sha1-9y/5JG8Q8qfXwW4UYW9he+LCY1o=
 
+rangetouch@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/rangetouch/-/rangetouch-2.0.1.tgz#c01105110fd3afca2adcb1a580692837d883cb70"
+  integrity sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==
+
 readdirp@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
@@ -4176,6 +4207,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-polyfill@^1.1.12:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.12.tgz#6cdaa17f6b022841b3aec0bf8dbd87ac0cd33331"
+  integrity sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==
+
 utf-8-validate@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.2.tgz#63cfbccd85dc1f2b66cf7a1d0eebc08ed056bfb3"