[MM-57964] General UX improvements

standalone/package.json

@@ -46,7 +46,7 @@
     "@babel/preset-typescript": "7.16.0",
     "@formatjs/cli": "6.0.4",
     "@mattermost/client": "file:../webapp/mattermost-webapp/webapp/platform/client",
-    "@mattermost/desktop-api": "5.7.0-3",
+    "@mattermost/desktop-api": "https://gitpkg.now.sh/mattermost/desktop/api-types?MM-57964",
     "@mattermost/eslint-plugin": "1.1.0-0",
     "@mattermost/types": "file:../webapp/mattermost-webapp/webapp/platform/types",
     "@types/jest": "27.0.2",

webapp/package.json

@@ -51,7 +51,7 @@
     "@babel/preset-typescript": "7.16.0",
     "@formatjs/cli": "5.0.7",
     "@mattermost/client": "file:mattermost-webapp/webapp/platform/client",
-    "@mattermost/desktop-api": "5.7.0-3",
+    "@mattermost/desktop-api": "https://gitpkg.now.sh/mattermost/desktop/api-types?MM-57964",
     "@mattermost/eslint-plugin": "1.1.0-0",
     "@mattermost/types": "file:mattermost-webapp/webapp/platform/types",
     "@types/jest": "27.0.2",

webapp/src/actions.ts

@@ -660,3 +660,12 @@ export const hostMuteOthers = async (callID?: string) => {
 export const getCallsStats = async () => {
     return RestClient.fetch<CallsStats>(`${getPluginPath()}/stats`, {method: 'get'});
 };
+
+export const selectRHSPost = (postID: string): ActionFuncAsync => {
+    return async (dispatch: DispatchFunc) => {
+        if (window.ProductApi) {
+            dispatch(window.ProductApi.selectRhsPost(postID));
+        }
+        return {};
+    };
+};

webapp/src/components/call_widget/component.tsx

@@ -20,6 +20,7 @@ import {ParticipantsList} from 'src/components/call_widget/participants_list';
 import {RemoveConfirmation} from 'src/components/call_widget/remove_confirmation';
 import DotMenu, {DotMenuButton} from 'src/components/dot_menu/dot_menu';
 import {HostNotices} from 'src/components/host_notices';
+import ChatThreadIcon from 'src/components/icons/chat_thread';
 import CompassIcon from 'src/components/icons/compassIcon';
 import ExpandIcon from 'src/components/icons/expand';
 import HorizontalDotsIcon from 'src/components/icons/horizontal_dots';
@@ -29,6 +30,7 @@ import ParticipantsIcon from 'src/components/icons/participants';
 import PopOutIcon from 'src/components/icons/popout';
 import RaisedHandIcon from 'src/components/icons/raised_hand';
 import RecordCircleIcon from 'src/components/icons/record_circle';
+import RecordSquareIcon from 'src/components/icons/record_square';
 import SettingsWheelIcon from 'src/components/icons/settings_wheel';
 import ShareScreenIcon from 'src/components/icons/share_screen';
 import ShowMoreIcon from 'src/components/icons/show_more';
@@ -119,6 +121,8 @@ interface Props {
     callsIncoming: IncomingCallNotification[],
     transcriptionsEnabled: boolean,
     clientConnecting: boolean,
+    callThreadID?: string,
+    selectRHSPost: (id: string) => void,
 }
 
 interface DraggingState {
@@ -696,6 +700,24 @@ export default class CallWidget extends React.PureComponent<Props, State> {
         this.state.expandedViewWindow?.callActions?.setRecordingPromptDismissedAt(this.props.channel.id, Date.now());
     };
 
+    onRecordToggle = async () => {
+        logDebug('record!');
+    };
+
+    onChatThreadButtonClick = () => {
+        if (!this.props.callThreadID) {
+            logErr('missing thread ID');
+            return;
+        }
+
+        if (this.props.global && window.desktopAPI?.openThread) {
+            logDebug('desktopAPI.openThread');
+            window.desktopAPI.openThread(this.props.callThreadID);
+        } else {
+            this.props.selectRHSPost(this.props.callThreadID);
+        }
+    };
+
     onShareScreenToggle = async (fromShortcut?: boolean) => {
         if (!this.props.allowScreenSharing) {
             return;
@@ -1236,7 +1258,94 @@ export default class CallWidget extends React.PureComponent<Props, State> {
                         }
                     </button>
                 </li>
-                {deviceType === 'output' && <li className='MenuGroup menu-divider'/>}
+            </React.Fragment>
+        );
+    };
+
+    renderChatThreadMenuItem = () => {
+        const {formatMessage} = this.props.intl;
+
+        // If we are on global widget we should show this
+        // only if we have the matching functionality available.
+        if (this.props.global && !window.desktopAPI?.openThread) {
+            return null;
+        }
+
+        return (
+            <React.Fragment>
+                <li
+                    className='MenuItem'
+                >
+                    <button
+                        id='calls-widget-menu-chat'
+                        className='style--none'
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }}
+                        onClick={() => this.onChatThreadButtonClick()}
+                    >
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                width: '100%',
+                                padding: '2px 0',
+                                gap: '8px',
+                            }}
+                        >
+                            <ChatThreadIcon
+                                style={{width: '16px', height: '16px'}}
+                                fill={'rgba(var(--center-channel-color-rgb), 0.64)'}
+                            />
+                            <span>{formatMessage({defaultMessage: 'Show chat thread'})}</span>
+                        </div>
+
+                    </button>
+                </li>
+            </React.Fragment>
+        );
+    };
+
+    renderRecordingMenuItem = () => {
+        const {formatMessage} = this.props.intl;
+
+        const recording = this.props.callRecording;
+        const isRecording = (recording?.start_at ?? 0) > (recording?.end_at ?? 0);
+        const RecordIcon = isRecording ? RecordSquareIcon : RecordCircleIcon;
+
+        return (
+            <React.Fragment>
+                <li
+                    className='MenuItem'
+                >
+                    <button
+                        id='calls-widget-menu-record'
+                        className='style--none'
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }}
+                        onClick={() => this.onRecordToggle()}
+                    >
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                width: '100%',
+                                padding: '2px 0',
+                                gap: '8px',
+                            }}
+                        >
+                            <RecordIcon
+                                style={{width: '16px', height: '16px'}}
+                                fill={isRecording ? 'rgb(var(--dnd-indicator-rgb))' : 'rgba(var(--center-channel-color-rgb), 0.64)'}
+                            />
+                            <span>{isRecording ? formatMessage({defaultMessage: 'Stop recording'}) : formatMessage({defaultMessage: 'Record call'})}</span>
+                        </div>
+
+                    </button>
+                </li>
             </React.Fragment>
         );
     };
@@ -1305,7 +1414,6 @@ export default class CallWidget extends React.PureComponent<Props, State> {
 
                     </button>
                 </li>
-                <li className='MenuGroup menu-divider'/>
             </React.Fragment>
         );
     };
@@ -1315,15 +1423,21 @@ export default class CallWidget extends React.PureComponent<Props, State> {
             return null;
         }
 
+        const isHost = this.props.callHostID === this.props.currentUserID;
+
         return (
             <div className='Menu'>
                 <ul
                     className='Menu__content dropdown-menu'
                     style={this.style.settingsMenu}
                 >
-                    {this.props.allowScreenSharing && !this.props.wider && this.renderScreenSharingMenuItem()}
                     {this.renderAudioDevices('output')}
                     {this.renderAudioDevices('input')}
+                    <li className='MenuGroup menu-divider'/>
+                    {this.props.allowScreenSharing && !this.props.wider && this.renderScreenSharingMenuItem()}
+                    <li className='MenuGroup menu-divider'/>
+                    {isHost && this.renderRecordingMenuItem()}
+                    {this.renderChatThreadMenuItem()}
                 </ul>
             </div>
         );

webapp/src/components/call_widget/index.ts

@@ -5,7 +5,7 @@ import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import {injectIntl} from 'react-intl';
 import {connect} from 'react-redux';
 import {bindActionCreators, Dispatch} from 'redux';
-import {recordingPromptDismissedAt, showExpandedView, showScreenSourceModal, trackEvent} from 'src/actions';
+import {recordingPromptDismissedAt, selectRHSPost, showExpandedView, showScreenSourceModal, trackEvent} from 'src/actions';
 import {
     allowScreenSharing,
     callStartAtForCurrentCall,
@@ -23,6 +23,7 @@ import {
     sessionsInCurrentCall,
     sessionsInCurrentCallMap,
     sortedIncomingCalls,
+    threadIDForCallInChannel,
     transcriptionsEnabled,
 } from 'src/selectors';
 import {alphaSortSessions, stateSortSessions} from 'src/utils';
@@ -46,6 +47,8 @@ const mapStateToProps = (state: GlobalState) => {
 
     const {channelURL, channelDisplayName} = getChannelUrlAndDisplayName(state, channel);
 
+    const callThreadID = threadIDForCallInChannel(state, channel?.id || '');
+
     return {
         currentUserID,
         channel,
@@ -69,6 +72,7 @@ const mapStateToProps = (state: GlobalState) => {
         callsIncoming: sortedIncomingCalls(state),
         transcriptionsEnabled: transcriptionsEnabled(state),
         clientConnecting: clientConnecting(state),
+        callThreadID,
     };
 };
 
@@ -77,6 +81,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({
     showScreenSourceModal,
     trackEvent,
     recordingPromptDismissedAt,
+    selectRHSPost,
 }, dispatch);
 
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(CallWidget));

webapp/src/index.tsx

@@ -10,6 +10,7 @@ import {getConfig, getServerVersion} from 'mattermost-redux/selectors/entities/g
 import {getCurrentUserLocale} from 'mattermost-redux/selectors/entities/i18n';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 import {getCurrentUserId, isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/users';
+import {ActionFuncAsync} from 'mattermost-redux/types/actions';
 import React, {useEffect} from 'react';
 import ReactDOM from 'react-dom';
 import {injectIntl, IntlProvider} from 'react-intl';
@@ -24,6 +25,7 @@ import {
     getCallsStats,
     incomingCallOnChannel,
     loadProfilesByIdsIfMissing,
+    selectRHSPost,
     setClientConnecting,
     showScreenSourceModal,
     showSwitchCallModal,
@@ -469,6 +471,14 @@ export default class Plugin {
             }));
         }
 
+        if (window.desktopAPI?.onOpenThread) {
+            logDebug('registering desktopAPI.onOpenThread');
+            this.unsubscribers.push(window.desktopAPI.onOpenThread((threadID: string) => {
+                logDebug('desktopAPI.onOpenThread');
+                store.dispatch(selectRHSPost(threadID));
+            }));
+        }
+
         const connectCall = async (channelID: string, title?: string, rootId?: string) => {
             // Desktop handler
             const payload = {
@@ -931,6 +941,7 @@ declare global {
         ProductApi: {
             useWebSocketClient: () => WebSocketClient,
             WebSocketProvider: React.Context<WebSocketClient>,
+            selectRhsPost: (postId: string) => ActionFuncAsync,
         };
     }