together mode component #5517

cn0151 · 2024-12-20T06:58:38Z

What

This PR contains together mode component layout and styling

Why

Needed as part of together mode implementation

How Tested

locally

Process & policy checklist

I have updated the project documentation to reflect my changes if necessary.
I have read the CONTRIBUTING documentation.

Is this a breaking change?

This change causes current functionality to break.

github-actions · 2024-12-20T07:00:19Z

Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "update_snapshots" label to the PR for updating the snapshot.

github-actions · 2024-12-20T07:00:19Z

Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "update_snapshots" label to the PR for updating the snapshot.

github-actions · 2024-12-20T13:18:55Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-crsepazbre.chromatic.com/

github-actions · 2024-12-20T13:23:07Z

@azure/communication-react jest test coverage for stable.

	Lines	Statements	Functions	Branches
Base	27852 / 44245 62.94%	27852 / 44245 62.94%	780 / 1419 54.96%	2324 / 3685 63.06%
Current	27844 / 44293 62.86%	27844 / 44293 62.86%	780 / 1423 54.81%	2331 / 3691 63.15%
Diff	-8 / 48 -0.08%	-8 / 48 -0.08%	0 / 4 -0.15%	7 / 6 0.09%

github-actions · 2024-12-20T13:23:16Z

@azure/communication-react jest test coverage for beta.

	Lines	Statements	Functions	Branches
Base	56197 / 92193 60.95%	56197 / 92193 60.95%	1152 / 2656 43.37%	3461 / 5698 60.74%
Current	56596 / 93048 60.82%	56596 / 93048 60.82%	1152 / 2667 43.19%	3488 / 5716 61.02%
Diff	399 / 855 -0.13%	399 / 855 -0.13%	0 / 11 -0.18%	27 / 18 0.28%

github-actions · 2024-12-20T16:57:23Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-cnekgiwzhv.chromatic.com/

packages/acs-ui-common/src/cssUtils.ts

packages/react-components/src/components/TogetherModeOverlay.tsx

packages/react-components/src/components/VideoGallery/TogetherModeLayout.tsx

packages/react-components/src/components/VideoGallery/TogetherModeStream.tsx

packages/react-components/src/components/styles/TogetherMode.styles.ts

into cnwankwo/togethermode-component

github-actions · 2024-12-30T23:27:13Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-swjbpdkbrv.chromatic.com/

github-actions · 2024-12-31T01:50:34Z

CallWithChat bundle size is not changed.

Current size: 11767078
Base size: 11767078
Diff size: 0

github-actions · 2024-12-31T01:50:35Z

Calling bundle size is not changed.

Current size: 11767065
Base size: 11767065
Diff size: 0

github-actions · 2024-12-31T01:50:37Z

Chat bundle size is decreased✅.

Current size: 1767755
Base size: 1767756
Diff size: -1

github-actions · 2024-12-31T01:52:43Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-rqqrajzgjk.chromatic.com/

github-actions · 2024-12-31T02:10:16Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-niicbykrep.chromatic.com/

dmceachernmsft · 2025-01-06T19:48:01Z

packages/react-components/src/components/TogetherModeOverlay.tsx

+ *
+ * @returns {JSX.Element} An empty JSX element.
+ */
+export const TogetherModeOverlay = React.memo(


can we import memo from React here? or do we need to use the keyword? we want to avoid this if we can to make sure we are using the ESM module

dmceachernmsft · 2025-01-06T19:50:04Z

packages/react-components/src/components/TogetherModeOverlay.tsx

+                <div
+                  style={moveAnimationStyles(
+                    parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * 0.5,
+                    parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * 0.35


Can we get some constants to define these numbers? just so we can know what they do in the future if we need to update them

dmceachernmsft · 2025-01-06T19:50:49Z

packages/react-components/src/components/TogetherModeOverlay.tsx

+                      width: `${emojiSize}`,
+                      position: 'absolute',
+                      left: `${
+                        (100 -


Same here with these numbers

dmceachernmsft · 2025-01-06T19:55:33Z

packages/react-components/src/components/VideoGallery/TogetherModeLayout.tsx

+    parentWidth
+  ]);
+
+  return screenShareComponent ? (


To cut down on duplicated code maybe the thing to do here when screenshare is active is to have the VideoGallery use another layout. at lease until we are wanting to support a different view for together mode?

dmceachernmsft · 2025-01-06T19:56:55Z

packages/react-components/src/components/VideoGallery/TogetherModeStream.tsx

+    screenShareComponent?: JSX.Element;
+    containerWidth?: number;
+    containerHeight?: number;
+  }): React.ReactNode => {


is there a reason that this is a ReactNode and not a JSX element?

edwardlee-msft · 2025-01-06T20:23:04Z

packages/react-components/src/components/styles/TogetherMode.styles.ts

+/**
+ * @private
+ */
+export const togetherModeParticipantStatusContainer = (


Can we have a majority of these styles in a separate style.
And then just have a merge styles instead for specific background color, radius?

Same thing for the togetherModeParticipantDisplayName

Edit: On second thought, we can probably keep it like this if there is no reusuable code

edwardlee-msft · 2025-01-06T20:25:54Z

packages/react-components/src/components/styles/TogetherMode.styles.ts

+ * @returns The scaled size.
+ */
+export const calculateScaledSize = (width: number, height: number): number => {
+  const maxSize = 600;


What do these numbers mean? What is maxSize and what is minSize?
Should these just be constants at the top of the page?

together mode component

813729e

cn0151 added 2 commits December 20, 2024 13:11

Together mode styling update

acf91ce

Change files

f947587

cn0151 added the breaking-change label Dec 20, 2024

Merge branch 'main' into cnwankwo/togethermode-component

d319503

cn0151 marked this pull request as ready for review December 20, 2024 16:50

cn0151 requested review from a team as code owners December 20, 2024 16:50

cn0151 requested review from JamesBurnside, alkwa-msft, dmceachernmsft, carocao-msft, edwardlee-msft, mgamis-msft, prabhjot-msft, jimchou-dev, vhuseinova-msft, Leah-Xia-Microsoft, jpeng-ms, waynemo, emlynmac, JoshuaLai and palatter December 20, 2024 16:50

cn0151 assigned cn0151, dmceachernmsft and edwardlee-msft and unassigned cn0151 Dec 20, 2024

dmceachernmsft reviewed Dec 20, 2024

View reviewed changes

Merge branch 'main' of https://github.com/Azure/communication-ui-library

5e7548f

into cnwankwo/togethermode-component

Addressed comments

a542aaf

Updated Css

5e40301

dmceachernmsft reviewed Jan 6, 2025

View reviewed changes

edwardlee-msft reviewed Jan 6, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

together mode component #5517

together mode component #5517

cn0151 commented Dec 20, 2024 •

edited

Loading

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024 •

edited

Loading

github-actions bot commented Dec 20, 2024 •

edited

Loading

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 30, 2024

github-actions bot commented Dec 31, 2024

github-actions bot commented Dec 31, 2024

github-actions bot commented Dec 31, 2024

github-actions bot commented Dec 31, 2024

github-actions bot commented Dec 31, 2024

dmceachernmsft Jan 6, 2025

dmceachernmsft Jan 6, 2025

dmceachernmsft Jan 6, 2025

dmceachernmsft Jan 6, 2025

dmceachernmsft Jan 6, 2025

edwardlee-msft Jan 6, 2025 •

edited

Loading

edwardlee-msft Jan 6, 2025

together mode component #5517

Are you sure you want to change the base?

together mode component #5517

Conversation

cn0151 commented Dec 20, 2024 • edited Loading

What

Why

How Tested

Process & policy checklist

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024 • edited Loading

@azure/communication-react jest test coverage for stable.

github-actions bot commented Dec 20, 2024 • edited Loading

@azure/communication-react jest test coverage for beta.

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 30, 2024

github-actions bot commented Dec 31, 2024

CallWithChat bundle size is not changed.

github-actions bot commented Dec 31, 2024

Calling bundle size is not changed.

github-actions bot commented Dec 31, 2024

Chat bundle size is decreased✅.

github-actions bot commented Dec 31, 2024

github-actions bot commented Dec 31, 2024

dmceachernmsft Jan 6, 2025

Choose a reason for hiding this comment

dmceachernmsft Jan 6, 2025

Choose a reason for hiding this comment

dmceachernmsft Jan 6, 2025

Choose a reason for hiding this comment

dmceachernmsft Jan 6, 2025

Choose a reason for hiding this comment

dmceachernmsft Jan 6, 2025

Choose a reason for hiding this comment

edwardlee-msft Jan 6, 2025 • edited Loading

Choose a reason for hiding this comment

edwardlee-msft Jan 6, 2025

Choose a reason for hiding this comment

cn0151 commented Dec 20, 2024 •

edited

Loading

github-actions bot commented Dec 20, 2024 •

edited

Loading

github-actions bot commented Dec 20, 2024 •

edited

Loading

edwardlee-msft Jan 6, 2025 •

edited

Loading