Merge pull request #48 from saaltech/ft/change-search-sharing-options

Implement
saal-core · Jul 13, 2020 · 708640e · 708640e
2 parents 420e9be + eb070ab
commit 708640e
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 9 deletions.
diff --git a/css/_chat.scss b/css/_chat.scss
@@ -481,7 +481,7 @@
 
     &__list  li {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         justify-content: space-between;
         border-top: 1px solid #EAEAEA;
         padding: 20px 0;

diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
@@ -735,3 +735,30 @@
     white-space: nowrap;
     width: 100%;
 }
+
+
+.conference {
+    &__screen-shared {
+        z-index: 999;
+        padding: 5px 11px;
+        background: rgba(49, 183, 106, 0.7);
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        border-radius: 4px;
+        position: absolute;
+        left: 47px;
+        top: auto;
+        bottom: 20px;
+    }
+
+    &__screen-shared svg {
+        fill: #FFF !important;
+        margin-right:10px;
+        width: 20px;
+    }
+
+    &__screen-shared path {
+        fill: #FFF !important;
+}
+}
diff --git a/react/features/chat/components/web/ChatUsers.js b/react/features/chat/components/web/ChatUsers.js
@@ -120,7 +120,13 @@ export default class ChatUsers extends Component<Props, State> {
      * @returns {ReactElement}
      */
     render() {
-        const participants = this._getEngagedUsers().filter(user => {
+        const { localParticipant } = this.props;
+        let _participants = this._getEngagedUsers();
+
+        if (this.state.search) {
+            _participants = (this.props.participants || []).filter(participant => participant.id !== localParticipant.id);
+        }
+        const participants = _participants.filter(user => {
             if (!this.state.search) {
                 return user;
             }
@@ -144,7 +150,7 @@ export default class ChatUsers extends Component<Props, State> {
                 <ul className = 'chat-users__list'>
                     {
                         (participants || []).map(participant => {
-                            const lastMessage = this._getLastMessage(participant);
+                            const lastMessage = this._getLastMessage(participant) || {};
 
                             return (<li
                                 key = { participant.id }
@@ -159,13 +165,13 @@ export default class ChatUsers extends Component<Props, State> {
                                         <span className = 'chat-users__username'>{participant.name}</span>
                                         {!lastMessage.hasRead && <span className = 'chat-users__status--new-message' />}
                                     </div>
-                                    <div className = 'chat-users__user-details-body'>
+                                    {lastMessage.message && <div className = 'chat-users__user-details-body'>
                                         {truncate(lastMessage.message, { length: 70 })}
-                                    </div>
+                                    </div>}
                                 </div>
-                                <div className = 'chat-users__chat-time'>
+                                {lastMessage.message && <div className = 'chat-users__chat-time'>
                                     {this._getTimeSinceMessage(lastMessage)}
-                                </div>
+                                </div>}
                             </li>);
                         })
                     }

diff --git a/react/features/conference/components/web/Conference.js b/react/features/conference/components/web/Conference.js
@@ -7,7 +7,9 @@ import VideoLayout from '../../../../../modules/UI/videolayout/VideoLayout';
 import { getConferenceNameForTitle } from '../../../base/conference';
 import { connect, disconnect } from '../../../base/connection';
 import { translate } from '../../../base/i18n';
+import { Icon, IconShareDesktop } from '../../../base/icons';
 import { connect as reactReduxConnect } from '../../../base/redux';
+import { getLocalVideoTrack } from '../../../base/tracks';
 import { Chat } from '../../../chat';
 import { Filmstrip, SpeakersList } from '../../../filmstrip';
 import { CalleeInfoContainer } from '../../../invite';
@@ -90,7 +92,8 @@ type Props = AbstractProps & {
     _showPrejoin: boolean,
 
     dispatch: Function,
-    t: Function
+    t: Function,
+    _screensharing: boolean
 }
 
 /**
@@ -213,6 +216,10 @@ class Conference extends AbstractConference<Props, *> {
 
                 <CalleeInfoContainer />
 
+                {this.props._screensharing && <div className = 'conference__screen-shared'>
+                    <Icon src = { IconShareDesktop } />Your screen is being shared
+                </div>}
+
                 <NotificationsToasts />
                 { !filmstripOnly && _showPrejoin /* || _interimPrejoin*/ && <Prejoin />}
             </div>
@@ -276,8 +283,11 @@ class Conference extends AbstractConference<Props, *> {
  * @returns {Props}
  */
 function _mapStateToProps(state) {
+    const localVideo = getLocalVideoTrack(state['features/base/tracks']);
+
     return {
         ...abstractMapStateToProps(state),
+        _screensharing: localVideo && localVideo.videoType === 'desktop',
         _iAmRecorder: state['features/base/config'].iAmRecorder,
         _layoutClassName: LAYOUT_CLASSNAMES[getCurrentLayout(state)],
         _roomName: getConferenceNameForTitle(state),

diff --git a/react/features/toolbox/components/web/Toolbox.js b/react/features/toolbox/components/web/Toolbox.js
@@ -921,10 +921,13 @@ class Toolbox extends Component<Props, State> {
             );
         }
 
-        const tooltip = t(
+        let tooltip = t(
             _desktopSharingEnabled
                 ? 'dialog.shareYourScreen' : _desktopSharingDisabledTooltipKey);
 
+
+        tooltip = _screensharing ? t('toolbar.stopScreenSharing') : tooltip;
+
         return (
             <ToolbarButton
                 accessibilityLabel