From 4b8b29b862f834ebea0f92f74478bfe26128c3b4 Mon Sep 17 00:00:00 2001
From: Roxy Squires <squires1993@gmail.com>
Date: Fri, 3 Feb 2023 08:15:25 +0000
Subject: enhance - Added vue-plyr as the standard video player (#9766)

* Added Video player

Added vue-plyr as the video play

* Create node.js.yml

* Delete node.js.yml

* Added vue-plyr into pnpm-lock.yaml

* tweak

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 packages/frontend/src/components/MkMediaVideo.vue | 29 +++++++++++++----------
 1 file changed, 17 insertions(+), 12 deletions(-)

(limited to 'packages/frontend/src')

diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index df0bf84116..5a2da050bb 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -6,19 +6,20 @@
 	</div>
 </div>
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
-	<video
-		:poster="video.thumbnailUrl"
-		:title="video.comment"
-		:alt="video.comment"
-		preload="none"
-		controls
-		@contextmenu.stop
-	>
-		<source 
-			:src="video.url" 
-			:type="video.type"
+	<vue-plyr>
+		<video
+			controls
+			crossorigin
+			playsinline
+			:data-poster="video.thumbnailUrl"
 		>
-	</video>
+			<source
+				size="720"
+				:src="video.url" 
+				:type="video.type"
+			/>
+		</video>
+	</vue-plyr>
 	<i class="ti ti-eye-off" @click="hide = true"></i>
 </div>
 </template>
@@ -26,7 +27,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;
@@ -39,6 +42,8 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
 .kkjnbbplepmiyuadieoenjgutgcmtsvu {
 	position: relative;
 
+	--plyr-color-main: var(--accent);
+
 	> i {
 		display: block;
 		position: absolute;
-- 
cgit v1.2.3-freya