From 71c85d388980a79affe970caec76a2427407c60a Mon Sep 17 00:00:00 2001
From: armored-dragon <publicmail@armoreddragon.com>
Date: Sat, 21 Dec 2024 06:44:23 -0600
Subject: [PATCH] Basic video support.

---
 scripts/system/domainChat/formatting.js       |  7 +++-
 .../qml_widgets/TemplateChatMessage.qml       | 42 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/scripts/system/domainChat/formatting.js b/scripts/system/domainChat/formatting.js
index 05d3bf4cfa..5e1458db8d 100644
--- a/scripts/system/domainChat/formatting.js
+++ b/scripts/system/domainChat/formatting.js
@@ -74,10 +74,14 @@ const formatting = {
                 const res = await formatting.helpers.fetch(url, {method: 'GET'});      // TODO: Replace with 'HEAD' method. https://github.com/overte-org/overte/issues/1273
                 const contentType = res.getResponseHeader("content-type");
 
-                // TODO: Add support for other media types
                 if (contentType.startsWith('image/')) {
                     messageArray.push({type: 'imageEmbed', value: url});
+					continue;
                 }
+				if (contentType.startsWith('video/')){ 
+                    messageArray.push({type: 'videoEmbed', value: url});
+					continue;
+				}
             }
         }
 
@@ -144,7 +148,6 @@ const formatting = {
 	
 					if (req.readyState === req.DONE) {
 						if (req.status === 200) {
-							console.log("Content type:", req.getResponseHeader("content-type"));
 							resolve(req);
 				
 						} else {
diff --git a/scripts/system/domainChat/qml_widgets/TemplateChatMessage.qml b/scripts/system/domainChat/qml_widgets/TemplateChatMessage.qml
index 7829ee791d..9e33a0503e 100644
--- a/scripts/system/domainChat/qml_widgets/TemplateChatMessage.qml
+++ b/scripts/system/domainChat/qml_widgets/TemplateChatMessage.qml
@@ -1,6 +1,7 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.3
+import QtMultimedia 5.15
 
 Component {
 	id: template_chat_message
@@ -150,10 +151,49 @@ Component {
 						AnimatedImage {
 							source: model.type === 'imageEmbed' ? model.value : ''
 							height: Math.min(sourceSize.height, 200);
-							onStatusChanged: playing = (status == AnimatedImage.Ready)
 							fillMode: Image.PreserveAspectFit
 						}
 					}
+
+					Item {
+						visible: model.type === 'videoEmbed';
+						width: messageBoxFlow.width;
+						height: 200;
+
+						Video {
+							id: videoPlayer
+							source: model.type === 'videoEmbed' ? model.value : ''
+							height: 200;
+							width: 400;
+							fillMode: Image.PreserveAspectFit
+							autoLoad: false;
+
+							onStatusChanged: {
+								if (status === 7) {
+									// Weird hack to make the video restart when it's over
+									// Ideally you'd want to use the seek function to restart the video but it doesn't work?
+									// Will need to make a more refined solution for this later. in the form of a more advanced media player.
+									// For now, this is sufficient. -AD
+									let originalURL = videoPlayer.source;
+									videoPlayer.source = "";
+									videoPlayer.source = originalURL;
+								}
+							}
+
+							MouseArea {
+								anchors.fill: parent
+								onClicked: {
+									const videoIsOver = videoPlayer.position == videoPlayer.duration
+									if (videoPlayer.playbackState == MediaPlayer.PlayingState) {
+										videoPlayer.pause();
+									} 
+									else {
+										parent.play();
+									}
+								}
+							}
+						}
+					}
 				}
 			}
 		}