Merge pull request #1504 from eciis/webchat-chat-component

Webchat chat component

webchat/app.js

@@ -17,8 +17,7 @@
         });
 
     app.constant('WEBSOCKET', {
-      hostname: window.location.hostname,
-      port: 8090,
+      url: "ws://webchat-server-dot-development-cis.appspot.com/",
       maxRetries: 5,
     });
 

webchat/components/chat/body/chat-body.component.js

@@ -0,0 +1,56 @@
+(function () {
+    'use strict';
+
+    angular.module("webchat").component("chatBody", {
+        templateUrl: "app/components/chat/body/chat-body.html",
+        controller: chatBodyController,
+        controllerAs: "chatBodyCtrl",
+        bindings: {
+            messages: '<',
+            videoActive: '<',
+            audioActive: '<',
+            selfieStream: '<',
+            remoteStream: '<',
+        },
+    });
+
+    function chatBodyController() {
+        const chatBodyCtrl = this;
+
+        chatBodyCtrl.$onChanges = (changesObj) => {
+            updateSelfieVideo(changesObj);
+            updateRemoteVideo(changesObj);
+            updateRemoteAudio(changesObj);
+        };
+
+        const updateSelfieVideo = (changesObj) => {
+            const canUpdate = _.get(changesObj, 'selfieStream.currentValue.active', false);
+
+            if (canUpdate) {
+                const selfieVideo = document.getElementById('video-selfie');
+                selfieVideo.srcObject = changesObj.selfieStream.currentValue;
+                selfieVideo.play();
+            }
+        };
+
+        const updateRemoteVideo = (changesObj) => {
+            const canUpdate = _.get(changesObj, 'remoteStream.currentValue.active', false);
+
+            if (canUpdate) {
+                const remoteVideo = document.getElementById('video-remote');
+                remoteVideo.srcObject = changesObj.remoteStream.currentValue;
+                remoteVideo.play();
+            }
+        };
+
+        const updateRemoteAudio = (changesObj) => {
+            const canUpdate = _.has(changesObj, 'audioActive');
+
+            if (canUpdate) {
+                const remoteVideo = document.getElementById('video-remote');
+                remoteVideo.muted = changesObj.audioActive.currentValue;
+            }
+        };
+    }
+
+})();

webchat/components/chat/body/chat-body.css

@@ -0,0 +1,64 @@
+.chat-body {
+    height: 100%;
+    width: 100%;
+}
+
+.chat-body__messages-wrapper {
+    overflow-y: auto;
+    max-height: 100%;
+    max-width: 100%;
+}
+
+.chat-body__messages-container {
+    height: 100%;
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+.chat-body__video-container {
+    display: grid;
+    background-color: darkgray;
+    max-width: 100%;
+    max-height: 100%;
+    height: 100%;
+    width: 100%;
+}
+
+.chat-body__info-message {
+    text-align: center;
+    background-color: #009688;
+    color: white;
+    width: fit-content;
+    padding: 10px 20px;
+    border-radius: 10px;
+    align-self: center;
+    margin: 10px 10px;
+}
+
+.chat-body__no-video-message {
+    background-color: #009688;
+    color: white;
+    border-radius: 10px;
+    padding: 10px 20px;
+    height: fit-content;
+    width: fit-content;
+    margin: 10px;
+    text-align: center;
+    align-self: center;
+    justify-self: center;
+}
+
+#video-remote {
+    height: 100%;
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+#video-selfie {
+    display: none;
+    max-width: 100%;
+    max-height: 100%;
+}

webchat/components/chat/body/chat-body.html

@@ -0,0 +1,17 @@
+<div class="chat-body__messages-wrapper custom-scrollbar" scroll-glue="glued">
+    <div class="chat-body__messages-container " ng-show="!chatBodyCtrl.videoActive">
+        <span class="chat-body__info-message">Esta é uma conversa segura e não esta sendo gravada</span>
+        <chat-message
+                class="chat-body__message"
+                ng-repeat="message in chatBodyCtrl.messages"
+                message-obj="message">
+        </chat-message>
+    </div>
+</div>
+<div class="chat-body__video-container" ng-show="chatBodyCtrl.videoActive">
+    <div ng-show="chatBodyCtrl.remoteStream">
+        <video id="video-remote" autoplay></video>
+        <video id="video-selfie" autoplay muted></video>
+    </div>
+    <span class="chat-body__no-video-message" ng-show="!chatBodyCtrl.remoteStream">Nenhum vídeo está sendo recebido</span>
+</div>

webchat/components/chat/buttons/chat-buttons.component.js

@@ -0,0 +1,22 @@
+(function () {
+    'use strict';
+
+    angular.module("webchat").component("chatButtons", {
+        templateUrl: "app/components/chat/buttons/chat-buttons.html",
+        controller: chatButtonsController,
+        controllerAs: "chatButtonsCtrl",
+        bindings: {
+            callFunc: "<",
+            enableVideoFunc: "<",
+            disableVideoFunc: "<",
+            enableAudioFunc: "<",
+            disableAudioFunc: "<",
+        },
+    });
+
+    function chatButtonsController() {
+        const chatButtonsCtrl = this;
+
+    }
+
+})();

webchat/components/chat/buttons/chat-buttons.html

@@ -0,0 +1,11 @@
+<toggle-button
+        icon-on="videocam"
+        icon-off="videocam_off"
+        action-on="chatButtonsCtrl.enableVideoFunc"
+        action-off="chatButtonsCtrl.disableVideoFunc"></toggle-button>
+<toggle-button
+        icon-on="volume_up"
+        icon-off="volume_off"
+        action-on="chatButtonsCtrl.enableAudioFunc"
+        action-off="chatButtonsCtrl.disableAudioFunc"></toggle-button>
+<icon-button icon="phone" action="chatButtonsCtrl.callFunc"></icon-button>

webchat/components/chat/ecis-chat.component.js

@@ -0,0 +1,47 @@
+(function () {
+    'use strict';
+
+    angular.module("webchat").component("ecisChat", {
+        templateUrl: "app/components/chat/ecis-chat.html",
+        controller: ecisChatController,
+        controllerAs: "ecisChatCtrl",
+        bindings: {
+            chat: '<',
+            user: '<',
+            callFunc: '<',
+            state: '<',
+            selfieStream: '<',
+            remoteStream: '<',
+        },
+    });
+
+    function ecisChatController() {
+        const ecisChatCtrl = this;
+
+        ecisChatCtrl.sendMessage = (msg) => {
+            ecisChatCtrl.chat.sendMessage(msg);
+        };
+
+        ecisChatCtrl.call = () => {
+            ecisChatCtrl.callFunc(ecisChatCtrl.user);
+        };
+
+        ecisChatCtrl.disableVideo = () => {
+            ecisChatCtrl.videoActive = false;
+        };
+
+        ecisChatCtrl.enableVideo = () => {
+            ecisChatCtrl.videoActive = true;
+        };
+
+        ecisChatCtrl.disableAudio = () => {
+            ecisChatCtrl.audioActive = false;
+        };
+
+        ecisChatCtrl.enableAudio = () => {
+            ecisChatCtrl.audioActive = true;
+        };
+
+    }
+
+})();

webchat/components/chat/ecis-chat.css

@@ -0,0 +1,25 @@
+.chat__container {
+    height: 100%;
+    background: #EEEEEE;
+    display: grid;
+    grid-template-rows: 64px calc(100% - 64px - 50px) 50px;
+    grid-template-areas:
+        'header'
+        'body'
+        'input';
+}
+
+.chat__header {
+    grid-area: header;
+    background: #009688;
+}
+
+.chat__body {
+    grid-area: body;
+    background: #E5DDD3;
+}
+
+.chat__input {
+    grid-area: input;
+    background: #009688;
+}

webchat/components/chat/ecis-chat.html

@@ -0,0 +1,24 @@
+<div class="chat__container"clear>
+    <chat-header
+            class="chat__header"
+            user="ecisChatCtrl.user"
+            call-func="ecisChatCtrl.call"
+            enable-video-func="ecisChatCtrl.enableVideo"
+            disable-video-func="ecisChatCtrl.disableVideo"
+            enable-audio-func="ecisChatCtrl.enableAudio"
+            disable-audio-func="ecisChatCtrl.disableAudio">
+    </chat-header>
+    <chat-body
+            class="chat__body"
+            messages="ecisChatCtrl.chat.currentMessages"
+            video-active="ecisChatCtrl.videoActive"
+            audio-active="ecisChatCtrl.audioActive"
+            selfie-stream="ecisChatCtrl.selfieStream"
+            remote-stream="ecisChatCtrl.remoteStream">
+    </chat-body>
+    <chat-input
+            class="chat__input"
+            send-message-func="ecisChatCtrl.sendMessage"
+            state="ecisChatCtrl.state">
+    </chat-input>
+</div>

webchat/components/chat/header/chat-header.component.js

@@ -0,0 +1,24 @@
+(function () {
+    'use strict';
+
+    angular.module("webchat").component("chatHeader", {
+        templateUrl: "app/components/chat/header/chat-header.html",
+        controller: chatHeaderController,
+        controllerAs: "chatHeaderCtrl",
+        bindings: {
+            user: "<",
+            chat: "<",
+            callFunc: "<",
+            enableVideoFunc: '<',
+            disableVideoFunc: '<',
+            enableAudioFunc: '<',
+            disableAudioFunc: '<',
+        },
+    });
+
+    function chatHeaderController() {
+        const chatHeaderCtrl = this;
+
+    }
+
+})();

webchat/components/chat/header/chat-header.css

@@ -0,0 +1,17 @@
+.chat-header__container {
+    display: grid;
+    grid-template-columns: auto max-content;
+    grid-template-areas:
+        'current-user video-buttons';
+    align-items: center;
+}
+
+.chat-header__current-user {
+    grid-area: current-user;
+    margin: 0 10px;
+    color: #EEEEEE;
+}
+
+.chat-header__buttons {
+    grid-area: video-buttons;
+}

webchat/components/chat/header/chat-header.html

@@ -0,0 +1,13 @@
+<div class="chat-header__container">
+    <user-description
+            class="chat-header__current-user"
+            avatar="{{ chatHeaderCtrl.user.photo_url }}"
+            name="{{ chatHeaderCtrl.user.name }}"
+            text="{{ chatHeaderCtrl.user.email[0] }}"></user-description>
+    <chat-buttons class="chat-header__buttons"
+                  call-func="chatHeaderCtrl.callFunc"
+                  enable-video-func="chatHeaderCtrl.enableVideoFunc"
+                  disable-video-func="chatHeaderCtrl.disableVideoFunc"
+                  enable-audio-func="chatHeaderCtrl.enableAudioFunc"
+                  disable-audio-func="chatHeaderCtrl.disableAudioFunc"></chat-buttons>
+</div>

webchat/components/chat/input/chat-input.component.js

@@ -0,0 +1,44 @@
+(function () {
+    'use strict';
+
+    angular.module("webchat").component("chatInput", {
+        templateUrl: "app/components/chat/input/chat-input.html",
+        controller: chatInputController,
+        controllerAs: "chatInputCtrl",
+        bindings: {
+            sendMessageFunc: "<",
+            state: "<"
+        },
+    });
+
+    function chatInputController() {
+        const chatInputCtrl = this;
+
+        chatInputCtrl.getState = () => chatInputCtrl.state;
+
+        chatInputCtrl.getStateStyle = () => {
+            const state = chatInputCtrl.getState();
+            if (_.includes(['connected', 'completed'], state)) {
+                return 'lawngreen';
+            } else if (_.includes(['failed', 'disconnected', 'closed'], state)) {
+                return 'red';
+            } else if (_.includes(['new', 'checking'], state)) {
+                return 'goldenrod';
+            }
+            return 'lightgray';
+        };
+
+        chatInputCtrl.sendMessage = () => {
+            if (chatInputCtrl.msg) {
+                chatInputCtrl.sendMessageFunc(chatInputCtrl.msg);
+                chatInputCtrl.msg = '';
+            }
+        };
+
+        chatInputCtrl.inputDisabled = () => {
+            return !_.includes(['connected', 'completed'], chatInputCtrl.state);
+        };
+
+    }
+
+})();