Merge pull request #28 from saaltech/implement-chat-toast

Implement chat toast

css/_chat-preview.scss

@@ -0,0 +1,103 @@
+.chat-preview {
+    position: absolute;
+    left: 47px;
+    top: auto;
+    bottom: 30px;
+    z-index: $zindex3;
+    height: 60vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        // background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 71%);
+
+        height: 50px;
+    }
+
+    #chatconversation {
+        display: flex;
+        flex-direction: column-reverse;
+        overflow: hidden;
+    }
+}
+
+.chat-preview-group {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    margin-bottom: 30px;
+    transition: opacity 0.3s ease-in, transform .5s ease-in;
+    align-items: flex-end;
+
+    &.expired {
+        opacity: 0;
+        transform: translateY(-200%);
+    }
+
+    .chatmessage {
+        background-color: #FFF;
+        border-radius: 6px 6px 6px 0px;
+        display: inline-block;
+        margin-top: 3px;
+        color: #393939;
+    }
+
+    .chatmessage-wrapper:not(:last-child) .chatmessage {
+        margin-bottom: 10px;
+    }
+
+
+    .display-name {
+        display: none;
+    }
+
+    &.error {
+        .chatmessage {
+            background-color: $defaultWarningColor;
+            border-radius: 0px;
+            font-weight: 100;
+        }
+
+        .display-name {
+            display: none;
+        }
+    }
+
+    .chatmessage-wrapper {
+        max-width: 100%;
+
+        .replywrapper {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .messageactions {
+                align-self: stretch;
+                border-left: 1px solid $chatActionsSeparatorColor;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                padding: 5px;
+
+                .toolbox-icon {
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+    .avatar {
+        min-width: 45px;
+        min-height: 45px;
+        width: 45px !important;
+        height: 45px !important;
+        margin-right: 10px;
+        border: 2px solid #EAEAEA;
+    }
+}

css/_welcome_page.scss

@@ -1,6 +1,9 @@
 body.welcome-page {
     background: inherit;
     overflow: auto;
+    .leftwatermark {
+        display: block;
+    }
 }
 
 @media only screen and (max-width: 800px) {

css/main.scss

@@ -99,5 +99,5 @@ $flagsImagePath: "../images/";
 @import 'modals/invite/invite_more';
 @import 'modals/security/security';
 @import 'premeeting-screens';
-
+@import 'chat-preview'
 /* Modules END */

package.json

@@ -92,6 +92,7 @@
     "redux-thunk": "2.2.0",
     "rnnoise-wasm": "github:jitsi/rnnoise-wasm.git#db96d11f175a22ef56c7db1ba9550835b716e615",
     "styled-components": "3.4.9",
+    "toastr": "^2.1.4",
     "util": "0.12.1",
     "uuid": "^3.1.0",
     "windows-iana": "^3.1.0",

react/features/chat/components/AbstractChatPreview.js

@@ -0,0 +1,108 @@
+// @flow
+
+import { Component } from 'react';
+import type { Dispatch } from 'redux';
+
+import { getLocalParticipant } from '../../base/participants';
+import { sendMessage, toggleChat, setPrivateMessageRecipient, markAsRead, markPublicAsRead } from '../actions';
+
+/**
+ * The type of the React {@code Component} props of {@code AbstractChatPreview}.
+ */
+export type Props = {
+
+    /**
+     * True if the chat window should be rendered.
+     */
+    _isOpen: boolean,
+
+    /**
+     * All the chat messages in the conference.
+     */
+    _messages: Array<Object>,
+
+    /**
+     * The local participant.
+     */
+    _localParticipant: Object,
+};
+
+/**
+ * Implements an abstract chat panel.
+ */
+export default class AbstractChatPreview<P: Props, S> extends Component<P, S> {}
+
+/**
+ * Maps redux actions to the props of the component.
+ *
+ * @param {Function} dispatch - The redux action {@code dispatch} function.
+ * @returns {{
+ *     _onSendMessage: Function,
+ *     _onToggleChat: Function
+ * }}
+ * @private
+ */
+export function _mapDispatchToProps(dispatch: Dispatch<any>) {
+    return {
+        /**
+         * Toggles the chat window.
+         *
+         * @returns {Function}
+         */
+        _onToggleChat() {
+            dispatch(toggleChat());
+        },
+
+        /**
+         * Sends a text message.
+         *
+         * @private
+         * @param {string} text - The text message to be sent.
+         * @returns {void}
+         * @type {Function}
+         */
+        _onSendMessage(text: string) {
+            dispatch(sendMessage(text));
+        },
+
+        _setPrivateMessageRecipient(participant: Object) {
+            dispatch(setPrivateMessageRecipient(participant));
+        },
+
+        _markAsRead(localParticipant: Object, participant: Object) {
+            dispatch(markAsRead(localParticipant, participant));
+        },
+
+        _markPublicAsRead() {
+            dispatch(markPublicAsRead());
+        }
+    };
+}
+
+/**
+ * Maps (parts of) the redux state to {@link Chat} React {@code Component}
+ * props.
+ *
+ * @param {Object} state - The redux store/state.
+ * @private
+ * @returns {{
+ *     _isOpen: boolean,
+ *     _messages: Array<Object>,
+ *     _showNamePrompt: boolean
+ * }}
+ */
+export function _mapStateToProps(state: Object) {
+    const {
+        isOpen,
+        messages
+    } = state['features/chat'];
+
+    const _localParticipant = getLocalParticipant(state);
+
+
+    return {
+        _isOpen: isOpen,
+        _messages: messages,
+        _localParticipant
+    };
+}

react/features/chat/components/AbstractMessageContainer.js

@@ -7,7 +7,8 @@ export type Props = {
     /**
      * The messages array to render.
      */
-    messages: Array<Object>
+    messages: Array<Object>,
+    localParticipant: ?Object
 }
 
 /**