Skip to content

Fix VideoTile menu button to show on hover when isSpeaking is true #2721

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.

Sign up for GitHub

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

Merged
mgamis-msft merged 6 commits into from
Feb 14, 2023
Merged

Fix VideoTile menu button to show on hover when isSpeaking is true #2721

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
24841a5
Fix VideoTile menu button to show on hover when isSpeaking is true
mgamis-msft Feb 8, 2023
8c95e51
Change files
mgamis-msft Feb 8, 2023
0b59078
Duplicate change files for beta release
mgamis-msft Feb 8, 2023
25e4fde
change before element of VideoTIle to after element with pointer-even…
mgamis-msft Feb 9, 2023
dc4d402
Merge branch 'main' into mgamis/fix-video-tile-menu-button
dmceachernmsft Feb 9, 2023
e6edc02
Merge branch 'main' into mgamis/fix-video-tile-menu-button
mgamis-msft Feb 14, 2023
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
7 changes: 7 additions & 0 deletions change-beta/@azure-communication-react-0c4622e6-e6ed-4a6d-8601-ed98c8687903.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Fix VideoTile to show menu button on hover when isSpeaking prop is true",
"packageName": "@azure/communication-react",
"email": "79475487+mgamis-msft@users.noreply.github.com",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@azure-communication-react-0c4622e6-e6ed-4a6d-8601-ed98c8687903.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Fix VideoTile to show menu button on hover when isSpeaking prop is true",
"packageName": "@azure/communication-react",
"email": "79475487+mgamis-msft@users.noreply.github.com",
"dependentChangeType": "patch"
}
4 changes: 2 additions & 2 deletions packages/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,8 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):

return (
<Stack styles={rootLayoutStyle}>
{wrappedLocalVideoComponent}
<LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />
<Stack horizontal={false} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>
{screenShareComponent ? (
screenShareComponent
Expand All @@ -153,8 +155,6 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
)}
{horizontalGallery}
</Stack>
{wrappedLocalVideoComponent}
<LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />
</Stack>
);
};
10 changes: 4 additions & 6 deletions packages/react-components/src/components/VideoTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,19 +333,17 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => {
rootStyles,
{
background: theme.palette.neutralLighter,
borderRadius: theme.effects.roundedCorner4,
// To ensure that the video tile is focusable when there is a floating video tile
zIndex: 1
borderRadius: theme.effects.roundedCorner4
},
isSpeaking && {
'&::before': {
'&::after': {
content: `''`,
position: 'absolute',
zIndex: 1,
border: `0.25rem solid ${theme.palette.themePrimary}`,
borderRadius: theme.effects.roundedCorner4,
width: '100%',
height: '100%'
height: '100%',
pointerEvents: 'none'
Comment thread
mgamis-msft marked this conversation as resolved.
}
},
styles?.root
Expand Down
⚡