Added footer buttons

assets/css/components/calls/callWindow.css

@@ -14,6 +14,7 @@
 	border: 1px black solid;
 	display: flex;
 	flex-direction: column;
+	background-color: #000000b3;
 }
 
 .call.window.body {
@@ -47,7 +48,7 @@
  */
 .loading-message-container {
 	position: absolute;
-	min-height: 110px;
+	min-height: 112px;
 	width: 100%;
 	display: flex;
 	background: 1px #0009;
@@ -70,4 +71,41 @@
 
 .call-window .streams-target video {
 	width: 149px;
+}
+
+
+/**
+ * Footer
+ */
+.call-window .call-footer {
+	height: 40px;
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+}
+
+.call-window .call-footer .call-option-button {
+	color: #fff6;
+	flex: 1;
+	text-align: center;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;	
+}
+
+.call-window .call-footer .call-option-button.selected {
+	color: white;
+}
+
+.call-window .call-footer .call-option-button:hover {
+	background-color: #ffffff4d;
+}
+
+.call-window .call-footer .call-option-button:active {
+	background-color: #fff3;
+}
+
+.call-window .call-footer .call-option-button.hang-up-button {
+	color: #dd4b39;
 }

assets/js/components/calls/callWindow.js

@@ -32,6 +32,11 @@ ComunicWeb.components.calls.callWindow = {
 			window: {},
 			streams: {},
 
+			/**
+			 * @type {MediaStream}
+			 */
+			localStream: undefined,
+
 			/**
 			 * @type {SignalExchangerClient}
 			 */
@@ -44,6 +49,7 @@ ComunicWeb.components.calls.callWindow = {
 		 * Initialize utilities
 		 */
 
+		
 		/**
 		 * Get member information based on call ID
 		 * 
@@ -62,6 +68,56 @@ ComunicWeb.components.calls.callWindow = {
 			return memberInfo;
 		}
 
+		/**
+		 * Check out whether local stream audio is enabled or not
+		 * 
+		 * @return {Boolean} TRUE if local stream is enabled / FALSE else
+		 */
+		call.isLocalAudioEnabled = function(){
+			
+			//Default behaviour : local stream not enabled
+			if(!call.localStream)
+				return true;
+			
+			return call.localStream.getAudioTracks()[0].enabled;
+
+		}
+
+		/**
+		 * Set audio mute status of local stream
+		 * 
+		 * @param {Boolean} enabled New enabled status
+		 */
+		call.setLocalAudioEnabled = function(enabled){
+			if(call.localStream)
+				call.localStream.getAudioTracks()[0].enabled = enabled;
+		}
+
+
+		/**
+		 * Check if the local video is enabled or not
+		 * 
+		 * @return {Boolean} TRUE to mute video / FALSE else
+		 */
+		call.isLocalVideoEnabled = function(){
+			
+			//Default behaviour : video not enabled
+			if(!call.localStream)
+				return true;
+			
+			return call.localStream.getVideoTracks()[0].enabled;
+		}
+
+		/**
+		 * Update mute status of local video stream
+		 * 
+		 * @param {Boolean} enabled New mute status
+		 */
+		call.setLocalVideoEnabled = function(enabled){
+			if(call.localStream)
+				call.localStream.getVideoTracks()[0].enabled = enabled;
+		}
+
 
 
 		/**
@@ -147,6 +203,10 @@ ComunicWeb.components.calls.callWindow = {
 		});
 
 
+
+
+
+
 		/**
 		 * Create loading message area
 		 */
@@ -187,6 +247,88 @@ ComunicWeb.components.calls.callWindow = {
 
 
 
+		//Call footer
+		call.window.footer = createElem2({
+			appendTo: callContainer,
+			type: "div",
+			class: "call-footer"
+		});
+
+		/**
+		 * This function is used to toggle selection state
+		 * of one of the call toolbar button
+		 * 
+		 * @param {HTMLElement} btn Target button
+		 * @param {Boolean} selected Selection state of the button
+		 */
+		var togglButtonSelectedStatus = function(btn, selected){
+
+			if(!selected){
+				while(btn.className.includes(" selected"))
+					btn.className = btn.className.replace(" selected", "");
+			}
+
+			else if(selected && !btn.className.includes(" selected"))
+				btn.className += " selected";
+		}
+
+		var buttonsList = [
+
+			//Mute button
+			{
+				icon: "fa-microphone",
+				selected: true,
+				onclick: function(btn){
+					call.setLocalAudioEnabled(!call.isLocalAudioEnabled());
+					togglButtonSelectedStatus(btn, call.isLocalAudioEnabled());
+				}
+			},
+
+			//Hang up button
+			{
+				icon: "fa-phone",
+				class: "hang-up-button",
+				selected: false,
+				onclick: function(){
+					call.close();
+				}
+			},
+
+			//Stop video button
+			{
+				icon: "fa-video-camera",
+				selected: true,
+				onclick: function(btn){
+					call.setLocalVideoEnabled(!call.isLocalVideoEnabled());
+					togglButtonSelectedStatus(btn, call.isLocalVideoEnabled());
+					console.log(call);
+				}
+			}
+		];
+
+		//Add buttons
+		buttonsList.forEach(function(button){
+
+			var buttonEl = createElem2({
+				appendTo: call.window.footer,
+				type: "div",
+				class: "call-option-button",
+				innerHTML: "<i class='fa " + button.icon + "'></i>"
+			});
+
+			//Add button optionnal class
+			if(button.class)
+				buttonEl.className += " " + button.class;
+
+			buttonEl.addEventListener("click", function(){
+				button.onclick(buttonEl);
+			});
+
+			togglButtonSelectedStatus(buttonEl, button.selected);
+
+		});
+
+
 		//Load user media
 		call.setLoadingMessage("Waiting for your microphone and camera...");