feat: ⚗️ vue-plyr

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.118.1-calc.3",
+	"version": "12.118.1-calc.4",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/package.json

@@ -60,6 +60,7 @@
 		"vanilla-tilt": "1.7.2",
 		"vite": "3.0.7",
 		"vue": "3.2.37",
+		"vue-plyr": "^7.0.0",
 		"vue-prism-editor": "2.0.0-alpha.2",
 		"vuedraggable": "4.0.1"
 	},

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

@@ -6,19 +6,21 @@
 	</div>
 </div>
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
-	<video
+	<vue-plyr>
-		:poster="video.thumbnailUrl"
+		<video
-		:title="video.comment"
+			:poster="video.thumbnailUrl"
-		:alt="video.comment"
+			:title="video.comment"
-		preload="none"
+			:alt="video.comment"
-		controls
+			preload="none"
-		@contextmenu.stop
+			controls
-	>
+			@contextmenu.stop
-		<source 
-			:src="video.url" 
-			:type="video.type"
 		>
-	</video>
+			<source
+				:src="video.url"
+				:type="video.type"
+			>
+		</video>
+	</vue-plyr>
 	<i class="fas fa-eye-slash" @click="hide = true"></i>
 </div>
 </template>
@@ -26,7 +28,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as misskey from 'misskey-js';
+import VuePlyr from 'vue-plyr';
 import { defaultStore } from '@/store';
+import 'vue-plyr/dist/vue-plyr.css';
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
@@ -38,6 +42,7 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
 <style lang="scss" scoped>
 .kkjnbbplepmiyuadieoenjgutgcmtsvu {
 	position: relative;
+	--plyr-color-main: var(--accent);
 
 	> i {
 		display: block;

yarn.lock

@@ -33,7 +33,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.16.4, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6":
+"@babel/parser@npm:^7.16.4, @babel/parser@npm:^7.18.4, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6":
   version: 7.18.11
   resolution: "@babel/parser@npm:7.18.11"
   bin:
@@ -1974,6 +1974,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-sfc@npm:2.7.8":
+  version: 2.7.8
+  resolution: "@vue/compiler-sfc@npm:2.7.8"
+  dependencies:
+    "@babel/parser": ^7.18.4
+    postcss: ^8.4.14
+    source-map: ^0.6.1
+  checksum: da0b4b0866224fe2aee376a88c25914da4e73ba9e11e7aa2ed240b99897735b4a988e951dcae9c8f0843216c5a97050bf16e1bb04bf65541444a8bdfedc35b38
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-sfc@npm:3.2.37":
   version: 3.2.37
   resolution: "@vue/compiler-sfc@npm:3.2.37"
@@ -3914,6 +3925,7 @@ __metadata:
     vanilla-tilt: 1.7.2
     vite: 3.0.7
     vue: 3.2.37
+    vue-plyr: ^7.0.0
     vue-prism-editor: 2.0.0-alpha.2
     vuedraggable: 4.0.1
   languageName: unknown
@@ -4400,7 +4412,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:3":
+"core-js@npm:3, core-js@npm:^3.22.0":
   version: 3.24.1
   resolution: "core-js@npm:3.24.1"
   checksum: 6fb5bf0fd9e9f3e69d95616dd03332fea6758a715d2628c108b5faf17b48b0f580e90c4febb0a523c4665b0991a810de16289f86187fe79d70cc722dbd3edf0e
@@ -4599,6 +4611,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csstype@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "csstype@npm:3.1.0"
+  checksum: 644e986cefab86525f0b674a06889cfdbb1f117e5b7d1ce0fc55b0423ecc58807a1ea42ecc75c4f18999d14fc42d1d255f84662a45003a52bb5840e977eb2ffd
+  languageName: node
+  linkType: hard
+
+"custom-event-polyfill@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "custom-event-polyfill@npm:1.0.7"
+  checksum: f9ff2cf13e482a75b3cf83dce9e2c6e3063c5ac1b9c23ac440e4f27e875b0873445b11811237f3f30aeb1216e9ad20f9f9d30ccf5b1b658a4e50dd0b3e67b629
+  languageName: node
+  linkType: hard
+
 "cwise-compiler@npm:^1.0.0, cwise-compiler@npm:^1.1.2":
   version: 1.1.3
   resolution: "cwise-compiler@npm:1.1.3"
@@ -9410,6 +9436,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"loadjs@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "loadjs@npm:4.2.0"
+  checksum: 2144723f55c75260ce6781b36009c40d098d96fe06e3ec5c85ba250cf96c3a0aa37169b829e818c40bcba7c5141a8e52736fec193333bb6260ab95f9a493a2ef
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^5.0.0":
   version: 5.0.0
   resolution: "locate-path@npm:5.0.0"
@@ -11514,6 +11547,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"plyr@github:sampotts/plyr#develop":
+  version: 3.7.0
+  resolution: "plyr@https://github.com/sampotts/plyr.git#commit=d434c9af16e641400aaee93188594208d88f2658"
+  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
+  checksum: ee85815c1c992141af030d71f70e79532814b142b0057c1bedbf7c74000a79f647147bb1f03f3a9f725341afa43e848e7b54168361d95285dfed30d53be63607
+  languageName: node
+  linkType: hard
+
 "pngjs-nozlib@npm:1.0.0":
   version: 1.0.0
   resolution: "pngjs-nozlib@npm:1.0.0"
@@ -11849,7 +11895,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.1.10, postcss@npm:^8.3.11, postcss@npm:^8.4.16":
+"postcss@npm:^8.1.10, postcss@npm:^8.3.11, postcss@npm:^8.4.14, postcss@npm:^8.4.16":
   version: 8.4.16
   resolution: "postcss@npm:8.4.16"
   dependencies:
@@ -12390,6 +12436,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rangetouch@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "rangetouch@npm:2.0.1"
+  checksum: 2aa7c0901d28356ef0c02021656ed7d11fc6652f01ffe92806862fc4593e75f7a5d52d4455fa1b0ab2123d438e03dc091315949dbfad9562a680440ac0dfeb7d
+  languageName: node
+  linkType: hard
+
 "ratelimiter@npm:3.4.1":
   version: 3.4.1
   resolution: "ratelimiter@npm:3.4.1"
@@ -14986,6 +15039,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"url-polyfill@npm:^1.1.12":
+  version: 1.1.12
+  resolution: "url-polyfill@npm:1.1.12"
+  checksum: 3214cc82424c215e921dacadac56b4b099f995d24e14078369bea9ff8aa74d1a4c803ab03021e61e0a275bee7979d212d046092dba3aab73cf232ee6739ddee4
+  languageName: node
+  linkType: hard
+
 "url@npm:0.10.3":
   version: 0.10.3
   resolution: "url@npm:0.10.3"
@@ -15268,6 +15328,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-plyr@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "vue-plyr@npm:7.0.0"
+  dependencies:
+    plyr: "github:sampotts/plyr#develop"
+    vue: ^2.6.12
+  checksum: 004d830cfc9dbe0563cafafab6240379b7224362d3e60d8d441126f0eaafd2487c7416cb434482165b52e961b83f020dfbc2645536aa8ba991f101477d984206
+  languageName: node
+  linkType: hard
+
 "vue-prism-editor@npm:2.0.0-alpha.2":
   version: 2.0.0-alpha.2
   resolution: "vue-prism-editor@npm:2.0.0-alpha.2"
@@ -15290,6 +15360,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue@npm:^2.6.12":
+  version: 2.7.8
+  resolution: "vue@npm:2.7.8"
+  dependencies:
+    "@vue/compiler-sfc": 2.7.8
+    csstype: ^3.1.0
+  checksum: 45fc85a13fc027798ad859fe4a5509b54217ae2f129240fc349a799bd4dbc6848ef8fa9968ab7ef7afcb954735882dbfdeb746673aa3f051e4d7ae555c213a1b
+  languageName: node
+  linkType: hard
+
 "vuedraggable@npm:4.0.1":
   version: 4.0.1
   resolution: "vuedraggable@npm:4.0.1"