From 4e43ad4b32cef25c57c62cbd4fcffa5d851973a0 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 19 Aug 2022 14:24:30 -0700
Subject: [PATCH] Video in messages

---
 CALCKEY.md                                         |  2 +-
 package.json                                       |  2 +-
 .../src/pages/messaging/messaging-room.message.vue | 14 ++++++++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/CALCKEY.md b/CALCKEY.md
index 21675f291..293c2baba 100644
--- a/CALCKEY.md
+++ b/CALCKEY.md
@@ -3,7 +3,6 @@
 ## Planned
 
 - MFM button
-- Better Messaging UI
 - Classic mode make instance icon bring up new context menu
 - Like/star button
 - Option to publicize instance blocks
@@ -20,6 +19,7 @@
 
 ## Work in progress
 
+- Better Messaging UI
 - OCR image captioning
 - Swipe through timelines on mobile
 - Admin custom CSS
diff --git a/package.json b/package.json
index 8942b2426..8bec08ba0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.118.1-calc.9.4",
+	"version": "12.118.1-calc.9.5",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 8f1d0bea6..8e0f24835 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -11,6 +11,18 @@
 				<div v-if="message.file" class="file">
 					<a :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
 						<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
+						<VuePlyr v-if="message.file.type.split('/')[0] == 'video'">
+							<video
+								:alt="message.file.name"
+								preload="none"
+								controls
+								@contextmenu.stop
+							>
+								<source
+									:src="message.file.url"
+								>
+							</video>
+						</VuePlyr>
 						<p v-else>{{ message.file.name }}</p>
 					</a>
 				</div>
@@ -39,6 +51,7 @@
 import { } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
+import VuePlyr from 'vue-plyr';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 import MkUrlPreview from '@/components/url-preview.vue';
 import * as os from '@/os';
@@ -62,6 +75,7 @@ function del(): void {
 <style lang="scss" scoped>
 .thvuemwp {
 	$me-balloon-color: var(--accent);
+	--plyr-color-main: var(--accent);
 
 	position: relative;
 	background-color: transparent;