diff --git a/assets/css/components/calls/ringScreen.css b/assets/css/components/calls/ringScreen.css new file mode 100644 index 00000000..45e3b394 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/js/common/functionsSchema.js b/assets/js/common/functionsSchema.js index 735382c8..7bf557f7 100644 --- a/assets/js/common/functionsSchema.js +++ b/assets/js/common/functionsSchema.js @@ -1188,6 +1188,13 @@ var ComunicWeb = { userMedia: { //TODO : implement }, + + /** + * Ring screen + */ + ringScreen: { + //TODO : implement + } }, /** diff --git a/assets/js/components/calls/ringScreen.js b/assets/js/components/calls/ringScreen.js new file mode 100644 index 00000000..59c05f21 --- /dev/null +++ b/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, "" + title + " 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); + } + +} \ No newline at end of file diff --git a/system/config/dev.config.php b/system/config/dev.config.php index f5e0ef3b..61616a38 100644 --- a/system/config/dev.config.php +++ b/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",