From 5bed35c0b49fc31a36e74aa9de28df1b3b0358af Mon Sep 17 00:00:00 2001
From: rsarika <95286093+rsarika@users.noreply.github.com>
Date: Thu, 10 Oct 2024 18:16:49 +0530
Subject: [PATCH] fix: added WebexMeetingInfo to inmeeting component (#843)

---
 .../WebexInMeeting/WebexInMeeting.jsx         |   3 +-
 .../WebexInMeeting.stories.storyshot          | 219 +++++++++++++-----
 2 files changed, 161 insertions(+), 61 deletions(-)

diff --git a/src/components/WebexInMeeting/WebexInMeeting.jsx b/src/components/WebexInMeeting/WebexInMeeting.jsx
index 996d9c497..dfbaf608b 100644
--- a/src/components/WebexInMeeting/WebexInMeeting.jsx
+++ b/src/components/WebexInMeeting/WebexInMeeting.jsx
@@ -16,7 +16,7 @@ import {TABLET, DESKTOP, DESKTOP_LARGE} from '../breakpoints';
 import {Modal} from '../generic';
 import WebexMeetingGuestAuthentication from '../WebexMeetingGuestAuthentication/WebexMeetingGuestAuthentication';
 import WebexMeetingHostAuthentication from '../WebexMeetingHostAuthentication/WebexMeetingHostAuthentication';
-
+import WebexMeetingInfo from '../WebexMeetingInfo/WebexMeetingInfo';
 /**
  * Webex In-Meeting component displays the remote stream plus
  * the local stream at the bottom right corner.
@@ -85,6 +85,7 @@ export default function WebexInMeeting({
       </Modal>
       )}
       <div style={{maxWidth}} className={sc('media-container')}>
+        <WebexMeetingInfo className={sc('info')} meetingID={meetingID} />
         <WebexRemoteMedia className={sc('remote-media-in-meeting')} layout={layout} meetingID={meetingID} />
         <WebexLocalMedia className={sc('local-media-in-meeting')} meetingID={meetingID} mediaType={localMediaType} />
         {localShare?.stream && <Banner className={sc('share-banner')}>You&apos;re sharing your screen</Banner>}
diff --git a/src/components/WebexInMeeting/__snapshots__/WebexInMeeting.stories.storyshot b/src/components/WebexInMeeting/__snapshots__/WebexInMeeting.stories.storyshot
index d7d868c6e..795d8adcf 100644
--- a/src/components/WebexInMeeting/__snapshots__/WebexInMeeting.stories.storyshot
+++ b/src/components/WebexInMeeting/__snapshots__/WebexInMeeting.stories.storyshot
@@ -3,7 +3,7 @@
 exports[`Storyshots Meetings/Webex In-Meeting All Media 1`] = `
 Array [
   <div
-    className="wxc wxc-in-meeting wxc-in-meeting--remote-sharing"
+    className="wxc wxc-in-meeting"
     style={
       Object {
         "height": "100%",
@@ -20,27 +20,38 @@ Array [
       }
     >
       <div
-        className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting wxc-remote-media--remote-video-n-share"
+        className="wxc wxc-meeting-info wxc-in-meeting__info"
+      >
+        <div
+          className="wxc wxc-spinner"
+          style={
+            Object {
+              "height": 38,
+              "width": 38,
+            }
+          }
+        />
+      </div>
+      <div
+        className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting"
       >
-        <Draggable
-          bounds="parent"
+        <div
+          className="wxc wxc-badge wxc-remote-media__connecting-badge"
+          style={Object {}}
         >
-          <video
-            autoPlay={true}
-            className="wxc-remote-media__video wxc-remote-media__remote-video"
-            muted={true}
-            playsInline={true}
+          <div
+            className="wxc wxc-spinner wxc-remote-media__connecting-spinner"
+            style={
+              Object {
+                "height": 16,
+                "width": 16,
+              }
+            }
           />
-        </Draggable>
-        <video
-          autoPlay={true}
-          className="wxc-remote-media__video wxc-remote-media__remote-share"
-          muted={true}
-          playsInline={true}
-        />
-        <audio
-          autoPlay={true}
-        />
+          <span>
+            Connecting
+          </span>
+        </div>
       </div>
       <div
         className="wxc wxc-local-media wxc-in-meeting__local-media-in-meeting wxc-local-media--no-media"
@@ -116,12 +127,39 @@ Array [
       }
     >
       <div
-        className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting"
+        className="wxc wxc-meeting-info wxc-in-meeting__info"
       >
-        <audio
-          autoPlay={true}
+        <div
+          className="wxc wxc-spinner"
+          style={
+            Object {
+              "height": 38,
+              "width": 38,
+            }
+          }
         />
       </div>
+      <div
+        className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting"
+      >
+        <div
+          className="wxc wxc-badge wxc-remote-media__connecting-badge"
+          style={Object {}}
+        >
+          <div
+            className="wxc wxc-spinner wxc-remote-media__connecting-spinner"
+            style={
+              Object {
+                "height": 16,
+                "width": 16,
+              }
+            }
+          />
+          <span>
+            Connecting
+          </span>
+        </div>
+      </div>
       <div
         className="wxc wxc-local-media wxc-in-meeting__local-media-in-meeting wxc-local-media--no-media"
       >
@@ -195,6 +233,19 @@ Array [
         }
       }
     >
+      <div
+        className="wxc wxc-meeting-info wxc-in-meeting__info"
+      >
+        <div
+          className="wxc wxc-spinner"
+          style={
+            Object {
+              "height": 38,
+              "width": 38,
+            }
+          }
+        />
+      </div>
       <div
         className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting"
       >
@@ -289,22 +340,39 @@ Array [
         }
       }
     >
+      <div
+        className="wxc wxc-meeting-info wxc-in-meeting__info"
+      >
+        <div
+          className="wxc wxc-spinner"
+          style={
+            Object {
+              "height": 38,
+              "width": 38,
+            }
+          }
+        />
+      </div>
       <div
         className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting"
       >
-        <Draggable
-          bounds="parent"
+        <div
+          className="wxc wxc-badge wxc-remote-media__connecting-badge"
+          style={Object {}}
         >
-          <video
-            autoPlay={true}
-            className="wxc-remote-media__video wxc-remote-media__remote-video"
-            muted={true}
-            playsInline={true}
+          <div
+            className="wxc wxc-spinner wxc-remote-media__connecting-spinner"
+            style={
+              Object {
+                "height": 16,
+                "width": 16,
+              }
+            }
           />
-        </Draggable>
-        <audio
-          autoPlay={true}
-        />
+          <span>
+            Connecting
+          </span>
+        </div>
       </div>
       <div
         className="wxc wxc-local-media wxc-in-meeting__local-media-in-meeting wxc-local-media--no-media"
@@ -363,7 +431,7 @@ Array [
 exports[`Storyshots Meetings/Webex In-Meeting Remote Share 1`] = `
 Array [
   <div
-    className="wxc wxc-in-meeting wxc-in-meeting--remote-sharing"
+    className="wxc wxc-in-meeting"
     style={
       Object {
         "height": "100%",
@@ -380,27 +448,38 @@ Array [
       }
     >
       <div
-        className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting wxc-remote-media--remote-video-n-share"
+        className="wxc wxc-meeting-info wxc-in-meeting__info"
       >
-        <Draggable
-          bounds="parent"
+        <div
+          className="wxc wxc-spinner"
+          style={
+            Object {
+              "height": 38,
+              "width": 38,
+            }
+          }
+        />
+      </div>
+      <div
+        className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting"
+      >
+        <div
+          className="wxc wxc-badge wxc-remote-media__connecting-badge"
+          style={Object {}}
         >
-          <video
-            autoPlay={true}
-            className="wxc-remote-media__video wxc-remote-media__remote-video"
-            muted={true}
-            playsInline={true}
+          <div
+            className="wxc wxc-spinner wxc-remote-media__connecting-spinner"
+            style={
+              Object {
+                "height": 16,
+                "width": 16,
+              }
+            }
           />
-        </Draggable>
-        <video
-          autoPlay={true}
-          className="wxc-remote-media__video wxc-remote-media__remote-share"
-          muted={true}
-          playsInline={true}
-        />
-        <audio
-          autoPlay={true}
-        />
+          <span>
+            Connecting
+          </span>
+        </div>
       </div>
       <div
         className="wxc wxc-local-media wxc-in-meeting__local-media-in-meeting wxc-local-media--no-media"
@@ -475,19 +554,39 @@ Array [
         }
       }
     >
+      <div
+        className="wxc wxc-meeting-info wxc-in-meeting__info"
+      >
+        <div
+          className="wxc wxc-spinner"
+          style={
+            Object {
+              "height": 38,
+              "width": 38,
+            }
+          }
+        />
+      </div>
       <div
         className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting"
       >
-        <Draggable
-          bounds="parent"
+        <div
+          className="wxc wxc-badge wxc-remote-media__connecting-badge"
+          style={Object {}}
         >
-          <video
-            autoPlay={true}
-            className="wxc-remote-media__video wxc-remote-media__remote-video"
-            muted={true}
-            playsInline={true}
+          <div
+            className="wxc wxc-spinner wxc-remote-media__connecting-spinner"
+            style={
+              Object {
+                "height": 16,
+                "width": 16,
+              }
+            }
           />
-        </Draggable>
+          <span>
+            Connecting
+          </span>
+        </div>
       </div>
       <div
         className="wxc wxc-local-media wxc-in-meeting__local-media-in-meeting wxc-local-media--no-media"