feat(ui) move room info from tv to remote

jitsi · Aug 29, 2023 · 1f8b4f5 · 1f8b4f5
1 parent cf77004
commit 1f8b4f5
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 54 deletions.
diff --git a/spot-client/src/common/app-state/spot-tv/selectors.js b/spot-client/src/common/app-state/spot-tv/selectors.js
@@ -1,3 +1,5 @@
+import { getDisplayName } from 'common/app-state';
+
 /**
 * A selector which returns the current view that is being displayed on Spot-TV.
 *
@@ -66,12 +68,23 @@ export function getRemoteJoinCode(state) {
  * to be displayed while in a meeting.
  *
  * @param {Object} state - The Redux state.
- * @returns {boolean}
+ * @returns {string|undefined}
  */
 export function getRemoteSpotTVRoomName(state) {
     return state.spotTv.roomName;
 }
 
+/**
+ * A selector which returns either the remotely or the locally configured name to use for the Spot-TV
+ * to be displayed while in a meeting.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {string|undefined}
+ */
+export function getSpotRoomName(state) {
+    return getRemoteSpotTVRoomName(state) || getDisplayName(state);
+}
+
 /**
  * Returns a tenant name advertised by Spot TV.
  *

diff --git a/spot-client/src/common/css/_home-view.scss b/spot-client/src/common/css/_home-view.scss
@@ -75,10 +75,6 @@
         }
     }
 
-    ~ .info-footer {
-        display: none;
-    }
-
     .spot-home-footer {
         text-align: center;
 

diff --git a/spot-client/src/common/css/_temp.scss b/spot-client/src/common/css/_temp.scss
@@ -35,25 +35,6 @@
   margin-bottom: 5px;
 }
 
-.info-footer {
-    background: rgba(0, 0, 0, 0.3);
-    bottom: 0;
-    display: flex;
-    font-size: 1rem;
-    justify-content: flex-end;
-    padding: 10px;
-    position: fixed;
-    white-space: pre;
-    width: 100%;
-    z-index: $z-index-foreground;
-
-    pointer-events: none;
-
-    .join-info {
-        pointer-events: all;
-    }
-}
-
 .meeting-frame {
   /**
    * The background color matching jitsi-meet is used to intentionally hide

diff --git a/spot-client/src/common/css/page-layouts/_in-call-view.scss b/spot-client/src/common/css/page-layouts/_in-call-view.scss
@@ -27,11 +27,17 @@
 
         .in-call-name,
         .in-call-invited-phone {
+            word-wrap: break-word;
             font-size: $font-size-medium-plus;
             margin-top: 100px;
             text-align: center;
         }
 
+        .in-call-meeting-url {
+            margin-top: 5px;
+            word-wrap: break-word;
+        }
+
         .in-call-name-with-phone {
             font-size: $font-size-medium;
             text-align: center;

diff --git a/spot-client/src/common/css/page-layouts/spot-tv/_setup-view.scss b/spot-client/src/common/css/page-layouts/spot-tv/_setup-view.scss
@@ -202,7 +202,3 @@
         text-shadow: 0px 4px rgba(0, 0, 0, 0.4);
     }
 }
-
-.setup ~ .info-footer {
-    display: none;
-}
diff --git a/spot-client/src/common/css/page-layouts/spot-tv/_unsupported-browser.scss b/spot-client/src/common/css/page-layouts/spot-tv/_unsupported-browser.scss
@@ -4,8 +4,4 @@
     font-size: $font-size-medium-plus;
     padding: 32px 16px;
     text-align: center;
-
-    ~ .info-footer {
-        display: none;
-    }
 }
diff --git a/spot-client/src/common/ui/components/room-name/room-name.js b/spot-client/src/common/ui/components/room-name/room-name.js
@@ -1,12 +1,8 @@
-import {
-    getDisplayName,
-    getRemoteSpotTVRoomName
-} from 'common/app-state';
+import { getSpotRoomName } from 'common/app-state';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 
-
 /**
  * Displays the currently configured Spot-Room name.
  */
@@ -40,7 +36,7 @@ export class RoomName extends React.Component {
  */
 function mapStateToProps(state) {
     return {
-        roomName: getRemoteSpotTVRoomName(state) || getDisplayName(state)
+        roomName: getSpotRoomName(state)
     };
 }
 

diff --git a/spot-client/src/spot-remote/ui/components/meeting-header/MeetingHeader.js b/spot-client/src/spot-remote/ui/components/meeting-header/MeetingHeader.js
@@ -11,7 +11,8 @@ export default class MeetingHeader extends React.Component {
     static propTypes = {
         invitedPhoneNumber: PropTypes.string,
         meetingDisplayName: PropTypes.string,
-        meetingUrl: PropTypes.string
+        meetingUrl: PropTypes.string,
+        spotRoomName: PropTypes.string
     };
 
     /**
@@ -24,7 +25,8 @@ export default class MeetingHeader extends React.Component {
         const {
             invitedPhoneNumber,
             meetingDisplayName,
-            meetingUrl
+            meetingUrl,
+            spotRoomName
         } = this.props;
         const { host, meetingName, path } = parseMeetingUrl(meetingUrl);
 
@@ -36,6 +38,7 @@ export default class MeetingHeader extends React.Component {
                     { meetingDisplayName || meetingName }
                 </div>
                 <div className = 'in-call-meeting-url' >
+                    { spotRoomName && `${spotRoomName} | ` }
                     { `${host}${path}/${meetingName}` }
                 </div>
             </div>

diff --git a/spot-client/src/spot-remote/ui/views/remote-views/in-call.js b/spot-client/src/spot-remote/ui/views/remote-views/in-call.js
@@ -3,6 +3,7 @@ import {
     getInMeetingStatus,
     getInvitedPhoneNumber,
     getMeetingCancelTimeout,
+    getSpotRoomName,
     hangUp,
     hideModal
 } from 'common/app-state';
@@ -43,6 +44,7 @@ export class InCall extends React.Component {
         onShowScreenshareModal: PropTypes.func,
         onSubmitPassword: PropTypes.func,
         showPasswordPrompt: PropTypes.bool,
+        spotRoomName: PropTypes.string,
         t: PropTypes.func
     };
 
@@ -115,7 +117,8 @@ export class InCall extends React.Component {
             invitedPhoneNumber,
             kicked,
             meetingDisplayName,
-            showPasswordPrompt
+            showPasswordPrompt,
+            spotRoomName
         } = this.props;
 
         if (kicked) {
@@ -153,7 +156,8 @@ export class InCall extends React.Component {
                 <MeetingHeader
                     invitedPhoneNumber = { invitedPhoneNumber }
                     meetingDisplayName = { meetingDisplayName }
-                    meetingUrl = { inMeeting } />
+                    meetingUrl = { inMeeting }
+                    spotRoomName = { spotRoomName } />
                 <MeetingToolbar meetingUrl = { inMeeting } />
             </div>
         );
@@ -181,7 +185,8 @@ function mapStateToProps(state) {
         kicked,
         meetingCancelTimeout: getMeetingCancelTimeout(state),
         meetingDisplayName,
-        showPasswordPrompt: needPassword
+        showPasswordPrompt: needPassword,
+        spotRoomName: getSpotRoomName(state)
     };
 }
 

diff --git a/spot-client/src/spot-remote/ui/views/share/stop-share.js b/spot-client/src/spot-remote/ui/views/share/stop-share.js
@@ -1,4 +1,4 @@
-import { getInMeetingStatus, getInvitedPhoneNumber } from 'common/app-state';
+import { getInMeetingStatus, getInvitedPhoneNumber, getSpotRoomName } from 'common/app-state';
 import { ScreenShare } from 'common/icons';
 import { Button, LoadingIcon } from 'common/ui';
 import PropTypes from 'prop-types';
@@ -19,6 +19,7 @@ export class StopShare extends React.Component {
         invitedPhoneNumber: PropTypes.string,
         meetingDisplayName: PropTypes.string,
         onStopScreenshare: PropTypes.func,
+        spotRoomName: PropTypes.string,
         t: PropTypes.func
     };
 
@@ -34,6 +35,7 @@ export class StopShare extends React.Component {
             inMeeting,
             invitedPhoneNumber,
             onStopScreenshare,
+            spotRoomName,
             t
         } = this.props;
 
@@ -48,7 +50,8 @@ export class StopShare extends React.Component {
                 <MeetingHeader
                     invitedPhoneNumber = { invitedPhoneNumber }
                     meetingDisplayName = { meetingDisplayName }
-                    meetingUrl = { inMeeting } />
+                    meetingUrl = { inMeeting }
+                    spotRoomName = { spotRoomName } />
                 <div className = 'stop-share-title'>
                     { t('screenshare.isSharingScreen') }
                 </div>
@@ -82,7 +85,8 @@ function mapStateToProps(state) {
     return {
         inMeeting,
         invitedPhoneNumber: formatPhoneNumber(getInvitedPhoneNumber(state)),
-        meetingDisplayName
+        meetingDisplayName,
+        spotRoomName: getSpotRoomName(state)
     };
 }
 

diff --git a/spot-client/src/spot-tv/ui/views/spot-view.js b/spot-client/src/spot-tv/ui/views/spot-view.js
@@ -4,9 +4,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 
-
-import { JoinInfo } from './../components';
-
 /**
  * A React Component representing a single screen in Spot-TV. Wraps {@code View}
  * to include notifying this component's parent of the current displayed view.
@@ -47,7 +44,7 @@ class SpotView extends React.Component {
      * @inheritdoc
      */
     render() {
-        const { children, remoteControlServer, spotRoomName } = this.props;
+        const { children, remoteControlServer } = this.props;
         const childComponents = React.Children.map(children, child =>
             React.cloneElement(
                 child,
@@ -57,10 +54,6 @@ class SpotView extends React.Component {
         return (
             <View { ...this.props }>
                 { childComponents }
-                <div className = 'info-footer'>
-                    { spotRoomName && `${spotRoomName} | ` }
-                    <JoinInfo showDomain = { true } />
-                </div>
             </View>
         );
     }