Merge pull request #12754 from pedrobmarin/f-s-cli

feat(screenshare): change loading icon
bigbluebutton · Jul 12, 2021 · 3cd144e · 3cd144e
2 parents 37c6175 + 5d0ae8f
commit 3cd144e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 11 deletions.
diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx
@@ -32,6 +32,9 @@ const intlMessages = defineMessages({
   presenterLoadingLabel: {
     id: 'app.screenshare.presenterLoadingLabel',
   },
+  viewerLoadingLabel: {
+    id: 'app.screenshare.viewerLoadingLabel',
+  },
   presenterSharingLabel: {
     id: 'app.screenshare.presenterSharingLabel',
   },
@@ -212,13 +215,16 @@ class ScreenshareComponent extends React.Component {
   }
 
   renderVideo(switched) {
+    const { isGloballyBroadcasting } = this.props;
+
     return (
       <video
         id={SCREENSHARE_MEDIA_ELEMENT_NAME}
         key={SCREENSHARE_MEDIA_ELEMENT_NAME}
         style={switched
           ? { maxHeight: '100%', width: '100%', height: '100%' }
           : { maxHeight: '25%', width: '25%', height: '25%' }}
+        className={!isGloballyBroadcasting ? styles.unhealthyStream : null}
         playsInline
         onLoadedData={this.onLoadedData}
         ref={(ref) => {
@@ -265,7 +271,10 @@ class ScreenshareComponent extends React.Component {
   }
 
   renderScreenshareDefault() {
-    const { isFullscreen } = this.props;
+    const {
+      intl,
+      isFullscreen,
+    } = this.props;
     const { loaded } = this.state;
 
     return (
@@ -279,6 +288,15 @@ class ScreenshareComponent extends React.Component {
         {isFullscreen && <PollingContainer />}
         {loaded && this.renderFullscreenButton()}
         {this.renderVideo(true)}
+
+        <div className={styles.screenshareContainerDefault}>
+          {!loaded
+            ? this.renderScreenshareContainerInside(
+              intl.formatMessage(intlMessages.viewerLoadingLabel),
+            )
+            : null
+          }
+        </div>
       </div>
     );
   }
@@ -287,7 +305,7 @@ class ScreenshareComponent extends React.Component {
     const { loaded, autoplayBlocked, isStreamHealthy } = this.state;
     const { isPresenter, isGloballyBroadcasting, top, left, width, height, layoutLoaded } = this.props;
 
-    // Conditions to render the (re)connecting spinner and the unhealthy stream
+    // Conditions to render the (re)connecting dots and the unhealthy stream
     // grayscale:
     // 1 - The local media tag has not received any stream data yet
     // 2 - The user is a presenter and the stream wasn't globally broadcasted yet
@@ -318,9 +336,15 @@ class ScreenshareComponent extends React.Component {
           && (
             <div
               key={_.uniqueId('screenshareArea-')}
-              className={styles.connecting}
+              className={styles.spinnerWrapper}
               data-test="screenshareConnecting"
-            />
+            >
+              <div className={styles.spinner}>
+                <div className={styles.bounce1} />
+                <div className={styles.bounce2} />
+                <div />
+              </div>
+            </div>
           )}
         {autoplayBlocked ? this.renderAutoplayOverlay() : null}
         {isPresenter ? this.renderScreensharePresenter() : this.renderScreenshareDefault()}

diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss b/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss
@@ -1,16 +1,11 @@
 @import "/imports/ui/components/media/styles";
-
-.connecting {
-  @extend .connectingSpinner;
-  background-color: transparent;
-  color: var(--color-white);
-  font-size: 2.5rem * 3;
-}
+@import '/imports/ui/components/loading-screen/styles';
 
 .screenshareContainer {
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: var(--color-content-background);
   width: 100%;
   height: 100%;
 }
@@ -38,6 +33,23 @@
   font-size: 2rem;
 }
 
+.screenshareContainerDefault {
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  padding-top: 4rem;
+}
+
 .unhealthyStream {
   filter: grayscale(50%) opacity(50%);
 }
+
+.spinnerWrapper {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+}
diff --git a/bigbluebutton-html5/public/locales/en.json b/bigbluebutton-html5/public/locales/en.json
@@ -133,6 +133,7 @@
     "app.media.screenshare.autoplayBlockedDesc": "We need your permission to show you the presenter's screen.",
     "app.media.screenshare.autoplayAllowLabel": "View shared screen",
     "app.screenshare.presenterLoadingLabel": "Your screenshare is loading",
+    "app.screenshare.viewerLoadingLabel": "The presenter's screen is loading",
     "app.screenshare.presenterSharingLabel": "You are now sharing your screen",
     "app.screenshare.screenshareFinalError": "Code {0}. Could not share the screen.",
     "app.screenshare.screenshareRetryError": "Code {0}. Try sharing the screen again.",