From c46285f1843eb9f7b7013e9f8396f4b9ceda17e0 Mon Sep 17 00:00:00 2001
From: Christopher Whilar <chwhilar@microsoft.com>
Date: Tue, 22 Apr 2025 22:20:08 -0400
Subject: [PATCH 1/2] Fix participant panel when rendering videos

---
 Project/package-lock.json                     |   8 +-
 Project/package.json                          |   2 +-
 Project/src/App.css                           |   2 +
 Project/src/MakeCall/CallCard.js              |  34 ++---
 Project/src/MakeCall/RemoteParticipantCard.js | 130 +++++++++---------
 5 files changed, 89 insertions(+), 87 deletions(-)

diff --git a/Project/package-lock.json b/Project/package-lock.json
index bb83cd2..b44804b 100644
--- a/Project/package-lock.json
+++ b/Project/package-lock.json
@@ -8,7 +8,7 @@
       "name": "ACSCallingSample",
       "version": "1.0.0",
       "dependencies": {
-        "@azure/communication-calling": "1.34.1-beta.2",
+        "@azure/communication-calling": "1.35.1-beta.1",
         "@azure/communication-calling-effects": "1.1.1-beta.1",
         "@azure/communication-common": "^2.3.0",
         "@azure/communication-identity": "^1.3.0",
@@ -69,9 +69,9 @@
       }
     },
     "node_modules/@azure/communication-calling": {
-      "version": "1.34.1-beta.2",
-      "resolved": "https://registry.npmjs.org/@azure/communication-calling/-/communication-calling-1.34.1-beta.2.tgz",
-      "integrity": "sha512-rh2JHu4UekXq/Gc/+hF3i2VCLpZYa6fAl7++ByIG0gp6jUoFkFQfi3wT8ziZbAcp1AbSh7BNy9TQKTQr5V1tzg==",
+      "version": "1.35.1-beta.1",
+      "resolved": "https://registry.npmjs.org/@azure/communication-calling/-/communication-calling-1.35.1-beta.1.tgz",
+      "integrity": "sha512-14+XcbkvaGTcYBCjutsGjyF8e5dMWoEJZOg8v9mnU/DX5Xz6ve+8Eqk9a+BqVmlgZHG02y/EHqzt+foyOPw4ow==",
       "dependencies": {
         "@azure/communication-common": "^2.3.0",
         "@azure/logger": "^1.0.3"
diff --git a/Project/package.json b/Project/package.json
index 643548d..70ab692 100644
--- a/Project/package.json
+++ b/Project/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@azure/communication-calling": "1.34.1-beta.2",
+    "@azure/communication-calling": "1.35.1-beta.1",
     "@azure/communication-calling-effects": "1.1.1-beta.1",
     "@azure/communication-common": "^2.3.0",
     "@azure/communication-identity": "^1.3.0",
diff --git a/Project/src/App.css b/Project/src/App.css
index f365e89..632de58 100644
--- a/Project/src/App.css
+++ b/Project/src/App.css
@@ -215,6 +215,8 @@ ul {
 }
 
 .participant-item {
+  display: flex;
+  flex-wrap: wrap;;
   padding-top: 2em;
   padding-bottom: 2em;
   padding-left: 1em;
diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js
index fb9dcdf..4222d2d 100644
--- a/Project/src/MakeCall/CallCard.js
+++ b/Project/src/MakeCall/CallCard.js
@@ -1506,22 +1506,24 @@ export default class CallCard extends React.Component {
                             
                         </div>
                     }
-                    <div>
-                        {
-                            this.state.remoteScreenShareStream &&
-                                <StreamRenderer
-                                    key={`${utils.getIdentifierText(this.state.remoteScreenShareStream.participant.identifier)}-${this.state.remoteScreenShareStream.stream.mediaStreamType}-${this.state.remoteScreenShareStream.stream.id}`}
-                                    ref={this.state.remoteScreenShareStream.streamRendererComponentRef}
-                                    stream={this.state.remoteScreenShareStream.stream}
-                                    remoteParticipant={this.state.remoteScreenShareStream.participant}
-                                    dominantSpeakerMode={this.state.dominantSpeakerMode}
-                                    dominantRemoteParticipant={this.state.dominantRemoteParticipant}
-                                    call={this.call}
-                                    showMediaStats={this.state.logMediaStats}
-                                    streamCount={streamCount}
-                                />
-                        }
-                    </div>
+                </div>
+                <div className="ms-Grid-row">
+                    {
+                        this.state.remoteScreenShareStream &&
+                            <StreamRenderer
+                                key={`${utils.getIdentifierText(this.state.remoteScreenShareStream.participant.identifier)}-${this.state.remoteScreenShareStream.stream.mediaStreamType}-${this.state.remoteScreenShareStream.stream.id}`}
+                                ref={this.state.remoteScreenShareStream.streamRendererComponentRef}
+                                stream={this.state.remoteScreenShareStream.stream}
+                                remoteParticipant={this.state.remoteScreenShareStream.participant}
+                                dominantSpeakerMode={this.state.dominantSpeakerMode}
+                                dominantRemoteParticipant={this.state.dominantRemoteParticipant}
+                                call={this.call}
+                                showMediaStats={this.state.logMediaStats}
+                                streamCount={streamCount}
+                            />
+                    }
+                </div>
+                <div className="ms-Grid-row">
                     <div className="video-grid-row">
                         {
                             (this.state.callState === 'Connected' ||
diff --git a/Project/src/MakeCall/RemoteParticipantCard.js b/Project/src/MakeCall/RemoteParticipantCard.js
index 24cfb31..0eeb261 100644
--- a/Project/src/MakeCall/RemoteParticipantCard.js
+++ b/Project/src/MakeCall/RemoteParticipantCard.js
@@ -206,75 +206,73 @@ export default class RemoteParticipantCard extends React.Component {
     render() {
         return (
             <li className={this.state.isSpotlighted ? 'participant-item spotlightEnabled':'participant-item'} key={utils.getIdentifierText(this.remoteParticipant.identifier)}>
-                <div className="ms-Grid-row">
-                    <div className="inline-flex align-items-center">
-                        {
-                            this.isCheckable &&
-                            <div className="mr-3 inline-flex">
-                                <input type="checkbox" onChange={e => this.handleCheckboxChange(e)} />
-                            </div>
-                        }
-                        <div className="inline-flex">
-                            <Persona className={this.state.isSpeaking ? `speaking-border-for-initials` : ``}
-                                size={PersonaSize.size40}
-                                text={ this.state.displayName ?
-                                    this.state.displayName :
-                                    this.state.participantIds.toString()
-                                }
-                                secondaryText={this.getSecondaryText()}
-                                styles={{ primaryText: {color: '#edebe9'}, secondaryText: {color: '#edebe9'} }}/>
+                <div className="inline-flex align-items-center">
+                    {
+                        this.isCheckable &&
+                        <div className="mr-3 inline-flex">
+                            <input type="checkbox" onChange={e => this.handleCheckboxChange(e)} />
                         </div>
+                    }
+                    <div className="inline-flex">
+                        <Persona className={this.state.isSpeaking ? `speaking-border-for-initials` : ``}
+                            size={PersonaSize.size40}
+                            text={ this.state.displayName ?
+                                this.state.displayName :
+                                this.state.participantIds.toString()
+                            }
+                            secondaryText={this.getSecondaryText()}
+                            styles={{ primaryText: {color: '#edebe9'}, secondaryText: {color: '#edebe9'} }}/>
                     </div>
-                    <div className="inline-flex align-items-center ml-5">
-                        {
-                            this.props.mediaAccess?.isVideoPermitted === false ? <div className="in-call-button inline-block"
-                                title={`${this.state.isMuted ? 'Participant camera disabled': ``}`}
-                                disabled={true}>
-                                    <Icon iconName={this.state.isMuted ? "VideoOff" : "Video"}/>
-                            </div> : undefined
-                        }
-                        {
-                            this.props.mediaAccess?.isAudioPermitted === false ? <div className="in-call-button inline-block"
-                                title={`${this.state.isMuted ? 'Participant mic disabled': ``}`}
-                                disabled={true}>
-                                    <Icon iconName={this.state.isMuted ? "MicOff" : "Microphone"}/>
-                            </div> :  <div className="in-call-button inline-block"
-                                title={`${this.state.isMuted ? 'Participant is muted': ``}`}
-                                onClick={e => this.handleMuteParticipant(e, this.remoteParticipant)}>
-                                    <Icon iconName={this.state.isMuted ? "MicOff2" : "Microphone"}/>
-                            </div>
-                        }
-                        {
-                            !(isPhoneNumberIdentifier(this.remoteParticipant.identifier) || isUnknownIdentifier(this.remoteParticipant.identifier)) &&
-                                <div className="in-call-button inline-block"
-                                    title={this.state.isHandRaised ? "Lower Participant Hand":``}
-                                    variant="secondary"
-                                    onClick={() => this.handleRemoteRaiseHand()}>
-                                        <Icon iconName="HandsFree" className={this.state.isHandRaised ? "callFeatureEnabled" : ``}/>
-                                </div>
-                        }
-                        <div className="inline-block">
-                            <ParticipantMenuOptions
-                                id={this.remoteParticipant.identifier}
-                                appendMenuitems={this.getMenuItems()}
-                                menuOptionsHandler={this.menuOptionsHandler}
-                                menuOptionsState={{isSpotlighted: this.state.isSpotlighted}} />
-                        </div>
-                        <div className="inline-block">
-                        {
-                            this.state.state === "InLobby" ?
-                                <div className="text-right lobby-action" id="lobbyAction" hidden={this.state.canManageLobby === false}>
-                                    <a href="#" onClick={e => this.admitParticipant(e)} className="float-right ml-3 green-link"> Admit</a>
-                                    <a href="#" onClick={e => this.rejectParticipant(e)} className="float-right ml-3 red-link"> Reject</a>
-                                </div> :
-                                <div className="in-call-button inline-block"
-                                    title={`Remove participant`}
-                                    variant="secondary"
-                                    onClick={(e) => this.handleRemoveParticipant(e, this.remoteParticipant.identifier)}>
-                                    <Icon iconName="UserRemove" />
-                                </div>
-                        }
+                </div>
+                <div className="inline-flex align-items-center ml-3">
+                    {
+                        this.props.mediaAccess?.isVideoPermitted === false ? <div className="in-call-button inline-block"
+                            title={`${this.state.isMuted ? 'Participant camera disabled': ``}`}
+                            disabled={true}>
+                                <Icon iconName={this.state.isMuted ? "VideoOff" : "Video"}/>
+                        </div> : undefined
+                    }
+                    {
+                        this.props.mediaAccess?.isAudioPermitted === false ? <div className="in-call-button inline-block"
+                            title={`${this.state.isMuted ? 'Participant mic disabled': ``}`}
+                            disabled={true}>
+                                <Icon iconName={this.state.isMuted ? "MicOff" : "Microphone"}/>
+                        </div> :  <div className="in-call-button inline-block"
+                            title={`${this.state.isMuted ? 'Participant is muted': ``}`}
+                            onClick={e => this.handleMuteParticipant(e, this.remoteParticipant)}>
+                                <Icon iconName={this.state.isMuted ? "MicOff2" : "Microphone"}/>
                         </div>
+                    }
+                    {
+                        !(isPhoneNumberIdentifier(this.remoteParticipant.identifier) || isUnknownIdentifier(this.remoteParticipant.identifier)) &&
+                            <div className="in-call-button inline-block"
+                                title={this.state.isHandRaised ? "Lower Participant Hand":``}
+                                variant="secondary"
+                                onClick={() => this.handleRemoteRaiseHand()}>
+                                    <Icon iconName="HandsFree" className={this.state.isHandRaised ? "callFeatureEnabled" : ``}/>
+                            </div>
+                    }
+                    <div className="inline-block">
+                        <ParticipantMenuOptions
+                            id={this.remoteParticipant.identifier}
+                            appendMenuitems={this.getMenuItems()}
+                            menuOptionsHandler={this.menuOptionsHandler}
+                            menuOptionsState={{isSpotlighted: this.state.isSpotlighted}} />
+                    </div>
+                    <div className="inline-block">
+                    {
+                        this.state.state === "InLobby" ?
+                            <div className="text-right lobby-action" id="lobbyAction" hidden={this.state.canManageLobby === false}>
+                                <a href="#" onClick={e => this.admitParticipant(e)} className="float-right ml-3 green-link"> Admit</a>
+                                <a href="#" onClick={e => this.rejectParticipant(e)} className="float-right ml-3 red-link"> Reject</a>
+                            </div> :
+                            <div className="in-call-button inline-block"
+                                title={`Remove participant`}
+                                variant="secondary"
+                                onClick={(e) => this.handleRemoveParticipant(e, this.remoteParticipant.identifier)}>
+                                <Icon iconName="UserRemove" />
+                            </div>
+                    }
                     </div>
                 </div>
             </li>

From c797bf2b29295f35c22ceeecd4964208d64afff7 Mon Sep 17 00:00:00 2001
From: Christopher Whilar <chwhilar@microsoft.com>
Date: Wed, 23 Apr 2025 12:11:56 -0400
Subject: [PATCH 2/2] double quote

---
 Project/src/App.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project/src/App.css b/Project/src/App.css
index 632de58..c610f22 100644
--- a/Project/src/App.css
+++ b/Project/src/App.css
@@ -216,7 +216,7 @@ ul {
 
 .participant-item {
   display: flex;
-  flex-wrap: wrap;;
+  flex-wrap: wrap;
   padding-top: 2em;
   padding-bottom: 2em;
   padding-left: 1em;