Skip to content

Commit

Permalink
VideoGallery UUID for its local video tile to dock to. (#1111)
Browse files Browse the repository at this point in the history 
* VideoGallery uuid for Modal docking

* Change files

* update snapshot

* removed id assignment

* Change files

* dependency "uuid" version ^8.1.0 -> ~8.3.2

* Revert "dependency "uuid" version ^8.1.0 -> ~8.3.2"

This reverts commit 0deee04.

* useRef for containerId

* Removed unused import

* move uuid to regular dependency

* updated storybook snapshot

* using containerRef id for Modal hostId
  • Loading branch information
@mgamis-msft @pull
mgamis-msft authored and pull[bot] committed Dec 31, 2024
1 parent 876731b commit c5e0e1b
Show file tree
Hide file tree
Showing 6 changed files with 225 additions and 11 deletions.
7 changes: 7 additions & 0 deletions change/@internal-react-components-d6a8dba5-a8a4-4f1e-816f-b94c7ef635a5.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "VideoGallery has unique identifier for local video tile to dock.",
"packageName": "@internal/react-components",
"email": "[email protected]",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@internal-storybook-369108de-2ed0-45dc-9a76-35f091c05f27.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "updated VideoGallery snapshot",
"packageName": "@internal/storybook",
"email": "[email protected]",
"dependentChangeType": "patch"
}
3 changes: 1 addition & 2 deletions packages/communication-react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,7 @@
"ts-jest": "^26.4.4",
"ts-node": "^9.1.1",
"ttypescript": "~1.5.12",
"typescript": "4.3.5",
"uuid": "^8.1.0"
"typescript": "4.3.5"
},
"beachball": {
"shouldPublish": false
Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
"@internal/acs-ui-common": "1.0.0-beta.8",
"react-aria-live": "^2.0.5",
"react-linkify": "^1.0.0-alpha",
"html-to-react": "~1.4.5"
"html-to-react": "~1.4.5",
"uuid": "^8.1.0"
},
"peerDependencies": {
"@types/react": ">=16.8.0 <18.0.0",
Expand Down Expand Up @@ -101,7 +102,6 @@
"ts-node": "^9.1.1",
"type-fest": "~1.2.1",
"typescript": "4.3.5",
"uuid": "^8.1.0",
"webpack": "5.38.1"
}
}
14 changes: 9 additions & 5 deletions packages/react-components/src/components/VideoGallery.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// Licensed under the MIT license.

import { concatStyleSets, ContextualMenu, IDragOptions, IStyle, mergeStyles, Modal, Stack } from '@fluentui/react';
import React, { useCallback, useMemo, useRef } from 'react';
import React, { useCallback, useMemo, useRef, useEffect } from 'react';
import { GridLayoutStyles } from '.';
import { smartDominantSpeakerParticipants } from '../gallery';
import { useIdentifiers } from '../identifiers/IdentifierProvider';
Expand Down Expand Up @@ -35,8 +35,7 @@ import { isNarrowWidth, useContainerWidth } from './utils/responsive';
import { LocalScreenShare } from './VideoGallery/LocalScreenShare';
import { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';
import { VideoTile } from './VideoTile';

const FLOATING_TILE_HOST_ID = 'UILibraryFloatingTileHost';
import { v4 as uuidv4 } from 'uuid';

// Currently the Calling JS SDK supports up to 4 remote video streams
const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
Expand Down Expand Up @@ -303,9 +302,14 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
/>
);

useEffect(() => {
if (containerRef.current) {
containerRef.current.id = `video-gallery-${uuidv4()}`;
}
}, [containerRef]);

return (
<div
id={FLOATING_TILE_HOST_ID}
data-ui-id={ids.videoGallery}
ref={containerRef}
className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}
Expand All @@ -316,7 +320,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
isModeless={true}
dragOptions={DRAG_OPTIONS}
styles={floatingLocalVideoModalStyle(theme, isNarrow)}
layerProps={{ hostId: FLOATING_TILE_HOST_ID }}
layerProps={{ hostId: containerRef.current?.id }}
>
{localParticipant && localVideoTile}
</Modal>
Expand Down
201 changes: 199 additions & 2 deletions packages/storybook/stories/VideoGallery/__snapshots__/VideoGallery.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,208 @@ exports[`storybook snapshot tests Storyshots UI Components/Video Gallery Video G
<div
className="css-84"
data-ui-id="video-gallery"
id="UILibraryFloatingTileHost"
>
<span
className="ms-layer"
/>
>
<div
className="ms-Fabric ms-Layer-content content-48"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onDoubleClick={[Function]}
onDrag={[Function]}
onDragEnd={[Function]}
onDragEnter={[Function]}
onDragExit={[Function]}
onDragLeave={[Function]}
onDragOver={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onMouseUp={[Function]}
onSubmit={[Function]}
onTouchCancel={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
>
<div
aria-modal={false}
onKeyDown={[Function]}
role="dialog"
style={
Object {
"outline": "none",
"overflowY": undefined,
}
}
>
<div
className="ms-Modal is-open root-1"
>
<div
className="ms-Dialog-main main-2"
id="ModalFocusTrapZone1"
onBlurCapture={[Function]}
onFocusCapture={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchStart={[Function]}
style={
Object {
"transform": "translate(0px, 0px)",
}
}
>
<div
aria-hidden={true}
data-is-visible={true}
style={
Object {
"pointerEvents": "none",
"position": "fixed",
}
}
tabIndex={0}
/>
<div
className="ms-Modal-scrollableContent scrollableContent-3"
data-is-scrollable={true}
>
<div
className="ms-Stack css-52"
data-ui-id="video-tile"
>
<div
className="css-15"
/>
<div
className="ms-Stack css-19"
>
<div
className="ms-Stack css-21"
>
<div
aria-label=""
className="ms-Persona ms-Persona--size48 root-22"
style={
Object {
"height": 100,
"minWidth": 100,
}
}
>
<div
className="ms-Persona-coin ms-Persona--size48 coin-29"
role="presentation"
>
<div
className="ms-Persona-imageArea imageArea-31"
role="presentation"
style={
Object {
"height": 100,
"width": 100,
}
}
>
<div
aria-hidden="true"
className="ms-Persona-initials initials-34"
style={
Object {
"height": 100,
"width": 100,
}
}
>
<span>
Y
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="ms-Stack css-81 css-37"
>
<div
className="ms-Stack css-82 css-38"
>
<span
className="css-39"
title="You"
>
You
</span>
<div
className="ms-Stack css-53"
>
<i
aria-hidden={true}
className="root-37"
data-icon-name="VideoTileMicOff"
>
<span
aria-hidden={true}
className="root-span"
>
<svg
className="svg"
fill="currentColor"
height={16}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.8 11.52l3.35 3.33a.5.5 0 00.7-.7l-13-13a.5.5 0 10-.7.7L5.5 6.21V8a2.5 2.5 0 003.88 2.09l.72.71A3.5 3.5 0 014.5 8a.5.5 0 10-1 0 4.5 4.5 0 004 4.47v1.03a.5.5 0 101 0v-1.03c.87-.1 1.66-.44 2.3-.95z"
/>
<path
d="M12.06 9.94l-.76-.76c.13-.37.2-.77.2-1.18a.5.5 0 011 0c0 .7-.16 1.35-.44 1.94z"
/>
<path
d="M10.48 8.35l-4.8-4.79a2.5 2.5 0 014.82.94V8c0 .12 0 .24-.02.35z"
/>
</svg>
</span>
</i>
</div>
</div>
</div>
</div>
</div>
<div
aria-hidden={true}
data-is-visible={true}
style={
Object {
"pointerEvents": "none",
"position": "fixed",
}
}
tabIndex={0}
/>
</div>
</div>
</div>
</div>
</span>
<div
className="ms-Stack css-9"
>
Expand Down

0 comments on commit c5e0e1b

Please sign in to comment.