Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cnwankwo/together mode stream impl #5391

Draft
wants to merge 67 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
67 commits
Select commit Hold shift + click to select a range
43a8827
Change files
cn0151 Oct 25, 2024
0280dd8
Included a common util method that set call features renderer info
cn0151 Oct 25, 2024
92f7122
Merge branch 'main' into cnwankwo/CallFeatureStream
cn0151 Oct 25, 2024
984e927
Merge branch 'main' into cnwankwo/CallFeatureStream
cn0151 Oct 29, 2024
37710d7
Merge branch 'main' into cnwankwo/CallFeatureStream
cn0151 Oct 31, 2024
4abe027
Addressed comments
cn0151 Oct 31, 2024
592cff1
Together Mode APIs
cn0151 Nov 1, 2024
aa77cda
Update @azure-communication-react-c495d5e5-3d35-4714-a329-a839d316e76…
cn0151 Nov 1, 2024
2a3a676
TogetherModeTypes interface update
cn0151 Nov 3, 2024
a647145
Merge branch 'cnwankwo/together_mode_api' of https://github.com/Azure…
cn0151 Nov 3, 2024
e3220c7
Together Mode Stream Implementation
cn0151 Nov 4, 2024
1fece80
Merge branch 'main' of https://github.com/Azure/communication-ui-libr…
cn0151 Nov 9, 2024
8f2a758
Base changes for together Mode stream and reactions
cn0151 Nov 11, 2024
8fd022a
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Nov 11, 2024
1abe026
API cleanup
cn0151 Nov 12, 2024
1478855
Merge branch 'cnwankwo/TogetherModeStream_Impl' of https://github.com…
cn0151 Nov 12, 2024
52843b5
Updated together mode reactions
cn0151 Nov 12, 2024
32769bc
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Nov 12, 2024
a4a2ddc
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Nov 13, 2024
99faf6b
Merge branch 'main' of https://github.com/Azure/communication-ui-libr…
cn0151 Nov 13, 2024
848574b
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Nov 16, 2024
514f5e0
make together mode button disabled for ACS user if its not started by…
cn0151 Nov 16, 2024
a9e71f3
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Nov 18, 2024
fb69100
Together mode with raiseHand, spotlight and mute particpant Implement…
cn0151 Nov 27, 2024
e44d697
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Nov 27, 2024
0abd7d3
clean up imports
cn0151 Dec 2, 2024
3f1c601
Updated API and cleaned up reactions overlay
cn0151 Dec 4, 2024
d4c3c07
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Dec 4, 2024
2f643e7
Implementation of together mode notification when started or ended
cn0151 Dec 6, 2024
6a3f326
Logic to switch back to default view if together mode is no longer ac…
cn0151 Dec 6, 2024
db77af3
Logic to switch back to default view if together mode is no longer ac…
cn0151 Dec 6, 2024
4dab149
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Dec 6, 2024
8c1cdc7
Merge branch 'cnwankwo/TogetherModeStream_Impl' of https://github.com…
cn0151 Dec 6, 2024
08cc53f
fixed merge conflicts
cn0151 Dec 6, 2024
03e5eac
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Dec 6, 2024
ccded9c
Updated API
cn0151 Dec 7, 2024
c10ef0b
Hover effect on together mode
cn0151 Dec 8, 2024
a3a8e28
reaction animation
cn0151 Dec 8, 2024
aaa380b
Display name auto expand
cn0151 Dec 9, 2024
d75e27b
Merge branch 'main' of https://github.com/Azure/communication-ui-libr…
cn0151 Dec 10, 2024
ea3bfd3
cn0151 Dec 18, 2024
c809c0f
12/19 - demo commit
cn0151 Dec 18, 2024
9cfea5c
Merge https://github.com/Azure/communication-ui-library into cnwankwo…
cn0151 Dec 18, 2024
6b58f71
cleanup together mode styles
cn0151 Dec 20, 2024
136e061
Addressed comments
cn0151 Dec 21, 2024
4bd0aa2
Included mobile menu
cn0151 Dec 26, 2024
4423d4f
fix together mode stream swap
cn0151 Dec 30, 2024
9912da4
Merge branch 'main' of https://github.com/Azure/communication-ui-libr…
cn0151 Dec 31, 2024
bb11bc5
updated api
cn0151 Dec 31, 2024
2aaa7e2
Together mode clean up
cn0151 Jan 5, 2025
7b55ec1
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Jan 7, 2025
f704eca
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Jan 9, 2025
cd2d6fb
Updated notification strings
cn0151 Jan 9, 2025
7cf834e
Included conditioal compile statements
cn0151 Jan 9, 2025
701be98
Fix signaling status
cn0151 Jan 9, 2025
ed8495a
Merge branch 'main' of https://github.com/Azure/communication-ui-libr…
cn0151 Jan 9, 2025
e6af06b
Reverted change
cn0151 Jan 9, 2025
a9bca93
Updated api file
cn0151 Jan 10, 2025
c5a5b73
Merge branch 'main' of https://github.com/Azure/communication-ui-libr…
cn0151 Jan 14, 2025
478c8ae
Cleanup
cn0151 Jan 14, 2025
2db6ad6
accessibility fix
cn0151 Jan 14, 2025
4e72d3c
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Jan 16, 2025
01a0fc9
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Jan 17, 2025
fa77e7e
Addressed comments
cn0151 Jan 17, 2025
91c4b3d
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Jan 17, 2025
37346a7
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Jan 20, 2025
6983984
Merge branch 'main' into cnwankwo/TogetherModeStream_Impl
cn0151 Jan 23, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
cleanup together mode styles
cn0151 committed Dec 20, 2024

Verified

This commit was signed with the committer’s verified signature. The key has expired.
aitbw Angel Perez
commit 6b58f711a686ba8dba6bc10a79f3796e873efb8c
13 changes: 13 additions & 0 deletions packages/acs-ui-common/src/cssUtils.ts
Original file line number Diff line number Diff line change
@@ -7,3 +7,16 @@
* For example, an input of `16` will return `1rem`.
*/
export const _pxToRem = (px: number): string => `${px / 16}rem`;

/**
* @internal
* Converts rem value to px value.
* For example, an input of `1rem` will return `16`.
*/
export function _remToPx(rem: string | number, baseFontSize: number = 16): number {
// If the input is a string, strip the 'rem' suffix and convert to number
if (typeof rem === 'string') {
return parseFloat(rem) * baseFontSize;
}
return rem * baseFontSize;
}
2 changes: 1 addition & 1 deletion packages/acs-ui-common/src/index.ts
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@ export { _MAX_EVENT_LISTENERS } from './constants';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
export { _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY } from './constants';

export { _pxToRem } from './cssUtils';
export { _pxToRem, _remToPx } from './cssUtils';

export { _logEvent } from './logEvent';
export type { TelemetryEvent } from './logEvent';
1 change: 0 additions & 1 deletion packages/calling-stateful-client/src/index-public.ts
Original file line number Diff line number Diff line change
@@ -33,7 +33,6 @@ export type { CreateViewResult } from './StreamUtils';
export type { RaiseHandCallFeatureState as RaiseHandCallFeature } from './CallClientState';
/* @conditional-compile-remove(together-mode) */
export type {
TogetherModeCallFeatureState,
CallFeatureStreamState,
TogetherModeSeatingPositionState,
CallFeatureStreamName,
Original file line number Diff line number Diff line change
@@ -46,7 +46,7 @@ export interface MeetingReactionOverlayProps {
remoteParticipants?: VideoGalleryRemoteParticipant[];

/* @conditional-compile-remove(together-mode) */
seatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;
togetherModeSeatPositions?: VideoGalleryTogetherModeParticipantPosition;
}

/**
@@ -75,7 +75,8 @@ const REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;
* @internal
*/
export const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.Element => {
const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants, seatingCoordinates } = props;
const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants, togetherModeSeatPositions } =
props;
const [emojiSizePx, setEmojiSizePx] = useState(0);
const [divHeight, setDivHeight] = useState(0);
const [divWidth, setDivWidth] = useState(0);
@@ -136,7 +137,6 @@ export const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.
/* @conditional-compile-remove(together-mode) */
return (
<div
ref={videoTileRef}
style={{
width: '100%',
height: '100%',
@@ -150,7 +150,7 @@ export const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.
reactionResources={reactionResources}
localParticipant={localParticipant ?? ({} as VideoGalleryLocalParticipant)}
remoteParticipants={remoteParticipants ?? ([] as VideoGalleryRemoteParticipant[])}
participantsSeatingArrangement={seatingCoordinates ?? {}}
togetherModeSeatPositions={togetherModeSeatPositions ?? {}}
/>
</div>
);
126 changes: 48 additions & 78 deletions packages/react-components/src/components/TogetherModeOverlay.tsx
Original file line number Diff line number Diff line change
@@ -31,16 +31,17 @@ import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
import {
calculateScaledSize,
getTogetherModeParticipantOverlayStyle,
getTogetherModeSeatPositionStyle,
ITogetherModeSeatPositionStyle
setTogetherModeSeatPositionStyle,
togetherModeIconStyle,
togetherModeParticipantDisplayName,
togetherModeParticipantStatusContainer,
TogetherModeSeatStyle
} from './styles/TogetherMode.styles';
import { CallingTheme, useTheme } from '../theming';
// import { iconContainerStyle, raiseHandContainerStyles } from './styles/VideoTile.styles';
import { RaisedHandIcon } from './assets/RaisedHandIcon';
/* @conditional-compile-remove(together-mode) */
// import { iconContainerStyle } from './styles/VideoTile.styles';
// import { useTheme } from '../theming';

import { _pxToRem, _remToPx } from '@internal/acs-ui-common';
/* @conditional-compile-remove(together-mode) */
/**
* Signaling action overlay component props
@@ -49,15 +50,16 @@ import { RaisedHandIcon } from './assets/RaisedHandIcon';
*
* @internal
*/
type VisibleTogetherModeSignalingAction = {
type TogetherModeParticipantStatus = {
reaction?: Reaction;
scaledSize?: number;
isHandRaised?: boolean;
isSpotlighted?: boolean;
isMuted?: boolean;
id: string;
seatPositionStyle: ITogetherModeSeatPositionStyle;
displayName?: string;
showDisplayName?: boolean;
seatPositionStyle: TogetherModeSeatStyle;
displayName: string;
showDisplayName: boolean;
};

/* @conditional-compile-remove(together-mode) */
@@ -72,20 +74,19 @@ export const TogetherModeOverlay = React.memo(
reactionResources: ReactionResources;
localParticipant: VideoGalleryLocalParticipant;
remoteParticipants: VideoGalleryRemoteParticipant[];
participantsSeatingArrangement: VideoGalleryTogetherModeParticipantPosition;
togetherModeSeatPositions: VideoGalleryTogetherModeParticipantPosition;
}) => {
const locale = useLocale();
const theme = useTheme();
const callingPalette = (theme as unknown as CallingTheme).callingPalette;

const { emojiSize, reactionResources, remoteParticipants, localParticipant, participantsSeatingArrangement } =
props;
const [visibleSignals, setVisibleSignals] = useState<{ [key: string]: VisibleTogetherModeSignalingAction }>({});
const { emojiSize, reactionResources, remoteParticipants, localParticipant, togetherModeSeatPositions } = props;
const [visibleSignals, setVisibleSignals] = useState<{ [key: string]: TogetherModeParticipantStatus }>({});
const [hoveredParticipantID, setHoveredParticipantID] = useState('');

const hideSignalForParticipantsNotInTogetherMode = useCallback(() => {
const removedVisibleParticipants = Object.keys(visibleSignals).filter(
(participantId) => !participantsSeatingArrangement[participantId]
(participantId) => !togetherModeSeatPositions[participantId]
);
// Update visible signals state instead of directly mutating it
setVisibleSignals((prevSignals) => {
@@ -101,18 +102,18 @@ export const TogetherModeOverlay = React.memo(
}
return prevSignals;
});
}, [visibleSignals, participantsSeatingArrangement]);
}, [visibleSignals, togetherModeSeatPositions]);

const Testing = useCallback(() => {
const allParticipants = [...remoteParticipants, localParticipant];

const participantsWithVideoAvailable = allParticipants.filter(
(p) => p.videoStream?.isAvailable && participantsSeatingArrangement[p.userId]
(p) => p.videoStream?.isAvailable && togetherModeSeatPositions[p.userId]
);
const updatedSignals = participantsWithVideoAvailable.reduce(
(acc: { [key: string]: VisibleTogetherModeSignalingAction }, p: VideoGalleryLocalParticipant) => {
(acc: { [key: string]: TogetherModeParticipantStatus }, p: VideoGalleryLocalParticipant) => {
const { userId, reaction, raisedHand, spotlight, isMuted, displayName } = p;
const seatingPosition = participantsSeatingArrangement[userId];
const seatingPosition = togetherModeSeatPositions[userId];
if (seatingPosition) {
acc[userId] = {
id: userId,
@@ -122,7 +123,8 @@ export const TogetherModeOverlay = React.memo(
isMuted,
displayName: displayName || locale.strings.videoGallery.displayNamePlaceholder,
showDisplayName: !!(spotlight || raisedHand || reaction || hoveredParticipantID === userId),
seatPositionStyle: getTogetherModeSeatPositionStyle(seatingPosition)
scaledSize: calculateScaledSize(seatingPosition.width, seatingPosition.height),
seatPositionStyle: setTogetherModeSeatPositionStyle(seatingPosition)
};
}
return acc;
@@ -148,7 +150,7 @@ export const TogetherModeOverlay = React.memo(
remoteParticipants,
localParticipant,
visibleSignals,
participantsSeatingArrangement,
togetherModeSeatPositions,
locale.strings.videoGallery.displayNamePlaceholder,
hoveredParticipantID
]);
@@ -160,58 +162,48 @@ export const TogetherModeOverlay = React.memo(
}, [
remoteParticipants,
localParticipant,
participantsSeatingArrangement,
hoveredParticipantID,
Testing,
hideSignalForParticipantsNotInTogetherMode
]);

return (
<div
style={{
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
left: 0,
color: 'white'
}}
>
<div style={{ position: 'absolute', width: '100%', height: '100%' }}>
{Object.values(visibleSignals).map((participantSignal) => (
<div
key={participantSignal.id}
style={{
...getTogetherModeParticipantOverlayStyle(participantSignal.seatPositionStyle),
position: 'absolute',
left: `${participantSignal.seatPositionStyle.seatCoordinates.left}px`,
top: `${participantSignal.seatPositionStyle.seatCoordinates.top}px`,
border: '1px solid red'
}}
onMouseEnter={() => setHoveredParticipantID(participantSignal.id)}
onMouseLeave={() => setHoveredParticipantID('')}
>
<div className="togetherMode-item">
<div>
{participantSignal.reaction?.reactionType && (
<div
style={moveAnimationStyles(
(participantSignal.seatPositionStyle.seatCoordinates.height ?? 1) * 0.5,
(participantSignal.seatPositionStyle.seatCoordinates.height ?? 1) * 0.35
_remToPx(participantSignal.seatPositionStyle.seatPosition.height) * 0.5,
_remToPx(participantSignal.seatPositionStyle.seatPosition.height) * 0.35
)}
>
<div
style={{
width: `${emojiSize}px`,
width: `${emojiSize}`,
position: 'absolute',
left: `${(100 - (emojiSize / (participantSignal.seatPositionStyle.seatCoordinates.width ?? 1)) * 100) / 2}%`
left: `${
(100 -
((participantSignal.scaledSize || 1) /
_remToPx(participantSignal.seatPositionStyle.seatPosition.width)) *
100) /
2
}%`
}}
>
<div
style={spriteAnimationStyles(
REACTION_NUMBER_OF_ANIMATION_FRAMES,
calculateScaledSize(
participantSignal.seatPositionStyle.seatCoordinates.width ?? 1,
participantSignal.seatPositionStyle.seatCoordinates.height ?? 1
),
participantSignal.scaledSize || 1,
(participantSignal.reaction &&
getEmojiResource(participantSignal?.reaction.reactionType, reactionResources)) ??
''
@@ -225,33 +217,23 @@ export const TogetherModeOverlay = React.memo(
<div
style={{
position: 'absolute',
bottom: '0.5%',
bottom: `${_pxToRem(2)}`,
width: '100%',
color: 'white',
textAlign: 'center'
}}
>
<div
style={{
backgroundColor: callingPalette.videoTileLabelBackgroundLight,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: '2px',
margin: '0 auto', // Centers the container
// maxWidth: 'max-content', // Allows container to grow with content
transition: 'width 0.3s ease, max-width 0.3s ease', // Smooth transition for container expansion
padding: '0 5px',
borderRadius: theme.effects.roundedCorner4,
borderColor: 'white',
width: 'fit-content'
...togetherModeParticipantStatusContainer(
callingPalette.videoTileLabelBackgroundLight,
theme.effects.roundedCorner4
)
}}
>
{participantSignal.isHandRaised && (
<span
style={{
width: '20px',
flexShrink: 0
...togetherModeIconStyle()
}}
>
<RaisedHandIcon />
@@ -260,19 +242,11 @@ export const TogetherModeOverlay = React.memo(
{participantSignal.showDisplayName && (
<Text
style={{
textOverflow: 'ellipsis',
flexGrow: 1, // Allow text to grow within available space
overflow: hoveredParticipantID === participantSignal.id ? 'visible' : 'hidden',
whiteSpace: 'nowrap',
textAlign: 'center',
// width: hoveredParticipantID === `${participantSignal.id}` ? 'calc(100% - 100px)' : 'auto', // Expand width from center
transition: 'width 0.3s ease', // Smooth transition for width changes
color: participantSignal.displayName ? theme.palette.neutralSecondary : 'inherit',
display:
hoveredParticipantID === participantSignal.id ||
(participantSignal.seatPositionStyle.seatCoordinates.width ?? 0) > 100
? 'inline-block'
: 'none' // Completely remove the element when hidden
...togetherModeParticipantDisplayName(
hoveredParticipantID === participantSignal.id,
_remToPx(participantSignal.seatPositionStyle.seatPosition.width),
participantSignal.displayName ? theme.palette.neutralSecondary : 'inherit'
)
}}
>
{participantSignal.displayName}
@@ -281,21 +255,17 @@ export const TogetherModeOverlay = React.memo(
{participantSignal.isMuted && (
<Icon
iconName="VideoTileMicOff"
// className={mergeStyles(iconContainerStyle)}
style={{
width: '20px',
flexShrink: 0,
...togetherModeIconStyle(),
color: participantSignal.displayName ? theme.palette.neutralSecondary : 'inherit'
}}
/>
)}
{participantSignal.isSpotlighted && (
<Icon
iconName="VideoTileSpotlighted"
// className={mergeStyles(iconContainerStyle)}
style={{
width: '20px',
flexShrink: 0,
...togetherModeIconStyle(),
color: participantSignal.displayName ? theme.palette.neutralSecondary : 'inherit'
}}
/>
Loading