Created ring screen

assets/css/components/calls/ringScreen.css

@@ -0,0 +1,33 @@
+/**
+ * Ring screen stylesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+.ring-call-container {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	background-color: #011932e6;
+	z-index: 1030;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.call-message-box {
+	background-color: #fff6;
+	color: white;
+	padding: 10px;
+	border-radius: 5px;
+	min-width: 200px;
+	text-align: center;
+	font-size: 150%;
+}
+
+.ring-call-container .response-buttons {
+	display: flex;
+	justify-content: space-around;
+}

assets/js/common/functionsSchema.js

@@ -1188,6 +1188,13 @@ var ComunicWeb = {
 			userMedia: {
 				//TODO : implement
 			},
+
+			/**
+			 * Ring screen
+			 */
+			ringScreen: {
+				//TODO : implement
+			}
 		},
 
 		/**

assets/js/components/calls/ringScreen.js

@@ -0,0 +1,86 @@
+/**
+ * Calls ring screen
+ * 
+ * Display a popup to ask the user whether he wants
+ * to respond to a call or not
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.components.calls.ringScreen = {
+
+	/**
+	 * Notify user about an incoming call and offer him to respond it
+	 * 
+	 * @param {String} title The title of the conversation
+	 * @param {number} timeout Timeout after which the call is automatically
+	 * considered as rejected
+	 * @param {(accept : boolean) => any} callback Callback function
+	 */
+	show: function(title, timeout, callback){
+
+		var callContainer = createElem2({
+			appendTo: document.body,
+			type: "div",
+			class: "ring-call-container"
+		});
+
+		var callMessageBox = createElem2({
+			appendTo: callContainer,
+			type: "div",
+			class: "call-message-box"
+		});
+
+		add_p(callMessageBox, "<i>" + title + "</i> is calling you");
+
+
+		//Add buttons to respond to call
+		var respondButtons = createElem2({
+			appendTo: callMessageBox,
+			type: "div",
+			class: "response-buttons"
+		});
+		
+		var rejectButton = createElem2({
+			appendTo: respondButtons,
+			type: "button",
+			class: "btn btn-danger",
+			innerHTML: "Reject"
+		});
+
+		var acceptButton = createElem2({
+			appendTo: respondButtons,
+			type: "button",
+			class: "btn btn-success",
+			innerHTML: "Accept"
+		});
+
+		var hasResponded = false;
+		var respond = function(accept){
+			
+			if(hasResponded)
+				return;
+			hasResponded = true;
+
+			callback(accept);
+
+			//Remove elem
+			emptyElem(callContainer);
+			callContainer.remove();
+		}
+
+		rejectButton.addEventListener("click", function() {
+			respond(false);
+		});
+
+		acceptButton.addEventListener("click", function(){
+			respond(true);
+		});
+
+		//Automatically reject the call after a certain amount of time
+		setTimeout(function(){
+			respond(false);
+		}, timeout*1000);
+	}
+
+}

system/config/dev.config.php

@@ -220,6 +220,7 @@ class Dev {
 
 			//Calls component
 			"css/components/calls/callWindow.css",
+			"css/components/calls/ringScreen.css",
 
 			//Pacman (easter egg) stylesheet
 			"css/components/pacman.css",
@@ -446,6 +447,7 @@ class Dev {
 			"js/components/calls/callWindow.js",
 			"js/components/calls/currentList.js",
 			"js/components/calls/userMedia.js",
+			"js/components/calls/ringScreen.js",
 
 			//Pacman component (easter egg)
 			"js/components/pacman.js",