Start to anchor video calls

assets/css/common/global.css

@@ -37,6 +37,11 @@ a, .cursor-pointer {
     padding-bottom: 0px;
 }
 
+#pageTarget {
+    display: flex;
+    flex-direction: column;
+}
+
 /**
  * Adapt menu bar to small screens
  */

assets/css/components/calls/window.css

@@ -27,6 +27,15 @@
 	visibility: visible;
 }
 
+.call-window.embedded {
+	position: relative;
+	top: unset !important;
+	left: unset !important;
+	width: unset;
+	height: 150px;
+	margin: 20px;
+}
+
 .call-window .head {
 	color: white;
 	padding: 5px;

assets/css/pages/conversations/conversation.css

@@ -4,6 +4,30 @@
  * @author Pierre HUBERT
  */
 
+.big-box-conversation {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	max-width: 90%;
+	margin: auto;
+}
+
+.big-box-conversation .box-body {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.big-box-conversation .box-body .slimScrollDiv {
+	flex: 1;
+}
+
+.big-box-conversation .direct-chat-messages {
+	flex: 1 1 auto;
+	height: 0px;
+	overflow: auto;
+}
+
 .big-box-conversation .direct-chat-info span {
 	margin-right: 10px;
 }

assets/css/pages/conversations/main.css

@@ -7,7 +7,11 @@
 .conversations-page-container {
 	max-width: 1000px;
 	margin: auto;
-	margin-top: 10px;
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	width: 100%;
+	padding-bottom: 50px;
 }
 
 

assets/js/components/calls/controller.js

@@ -131,4 +131,9 @@ document.addEventListener("openPage", () => {
 		if(!OpenCalls.has(c))
 			CallsController.Open(await getSingleConversation(c))
 	})
+	
+	// Check if a conversation can be integrated inside the page
+	for(const call of OpenCalls.values()) {
+		call.CheckNewTargetForWindow()
+	}
 })

assets/js/components/calls/window.js

@@ -212,6 +212,9 @@ class CallWindow extends CustomEvents {
 
 
 
+			// Check for anchors
+			this.CheckNewTargetForWindow()
+
 
 			
 			// Join the call
@@ -244,6 +247,25 @@ class CallWindow extends CustomEvents {
 		}
 	}
 
+	/**
+	 * Check if current call window can be applied somewhere on the screen
+	 */
+	CheckNewTargetForWindow() {
+		const target = byId("target-for-video-call-"+this.callID)
+
+		this.rootEl.remove()
+
+		if(target) {
+			target.appendChild(this.rootEl)
+			this.rootEl.classList.add("embedded")
+		}
+
+		else {
+			byId("callsTarget").appendChild(this.rootEl)
+			this.rootEl.classList.remove("embedded")
+		}
+	}
+
 	/**
 	 * Check if this conversation window is open or not
 	 * 

assets/js/pages/conversations/conversation.js

@@ -334,7 +334,7 @@ const ConversationPageConvPart = {
 				//Enable / update slimscroll
 				var target = ComunicWeb.pages.conversations.conversation._conv_info.window.messagesTarget;
 				var scrollBottom = $(target).prop("scrollHeight")+"px";
-				ComunicWeb.pages.conversations.utils.enableSlimScroll(target, ComunicWeb.pages.conversations.utils.getAvailableHeight(), scrollBottom);
+				//ComunicWeb.pages.conversations.utils.enableSlimScroll(target, "100%", scrollBottom);
 
 			}, 100);
 		}
@@ -580,10 +580,10 @@ const ConversationPageConvPart = {
 				newScrollPos = oldestMessage.offsetTop - 30;
 				if(newScrollPos < 0)
 					newScrollPos = 0;
-				ComunicWeb.pages.conversations.utils.enableSlimScroll(
-					convInfo.window.messagesTarget, 
-					ComunicWeb.pages.conversations.utils.getAvailableHeight(), 
-					newScrollPos);
+				/*ComunicWeb.pages.conversations.utils.enableSlimScroll(
+					convInfo.window.messagesTarget,
+					"100%", 
+					newScrollPos);*/
 			});
 		});
 	},

assets/js/pages/conversations/main.js

@@ -23,6 +23,14 @@ ComunicWeb.pages.conversations.main = {
 
 		//Check if a conversation has to be opened
 		if(args.subfolder){
+
+			// Add a target for video calls
+			createElem2({
+				appendTo: container,
+				type: "div",
+				id: "target-for-video-call-"+this.getCurrentConversationID()
+			})
+
 			ComunicWeb.pages.conversations.conversation.open(this.getCurrentConversationID(), container);
 		}
 

assets/js/pages/conversations/utils.js

@@ -10,14 +10,14 @@ ComunicWeb.pages.conversations.utils = {
 	 * Enable slimscroll for the conversation element
 	 * 
 	 * @param {HMTLElement} target The target for slimscroll
-	 * @param {Number} height The available height for the element
+	 * @param {Number|String} height The available height for the element
 	 * @param {Number} pos Scroll position to go to
 	 */
 	enableSlimScroll: function(target, height, pos){
 
 		$(target).slimScroll({
 			scrollTo: pos + "px",
-			height: height + "px",
+			height: height + (typeof height == "number" ? "px" : ""),
 		});
 	},