Skip to content

Commit ab3b77d

Browse files
mgamis-msftmgamis-msft
authored
VideoGallery UUID for its local video tile to dock to. (#1111)
* 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
1 parent 6421c79 commit ab3b77d

6 files changed

Lines changed: 225 additions & 11 deletions

File tree

‎change/@internal-react-components-d6a8dba5-a8a4-4f1e-816f-b94c7ef635a5.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "VideoGallery has unique identifier for local video tile to dock.",
4+
"packageName": "@internal/react-components",
5+
"email": "miguelgamis@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@internal-storybook-369108de-2ed0-45dc-9a76-35f091c05f27.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "updated VideoGallery snapshot",
4+
"packageName": "@internal/storybook",
5+
"email": "miguelgamis@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/communication-react/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,7 @@
122122
"ts-jest": "^26.4.4",
123123
"ts-node": "^9.1.1",
124124
"ttypescript": "~1.5.12",
125-
"typescript": "4.3.5",
126-
"uuid": "^8.1.0"
125+
"typescript": "4.3.5"
127126
},
128127
"beachball": {
129128
"shouldPublish": false

‎packages/react-components/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@
3434
"@internal/acs-ui-common": "1.0.0-beta.8",
3535
"react-aria-live": "^2.0.5",
3636
"react-linkify": "^1.0.0-alpha",
37-
"html-to-react": "~1.4.5"
37+
"html-to-react": "~1.4.5",
38+
"uuid": "^8.1.0"
3839
},
3940
"peerDependencies": {
4041
"@types/react": ">=16.8.0 <18.0.0",
@@ -101,7 +102,6 @@
101102
"ts-node": "^9.1.1",
102103
"type-fest": "~1.2.1",
103104
"typescript": "4.3.5",
104-
"uuid": "^8.1.0",
105105
"webpack": "5.38.1"
106106
}
107107
}

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// Licensed under the MIT license.
33

44
import { concatStyleSets, ContextualMenu, IDragOptions, IStyle, mergeStyles, Modal, Stack } from '@fluentui/react';
5-
import React, { useCallback, useMemo, useRef } from 'react';
5+
import React, { useCallback, useMemo, useRef, useEffect } from 'react';
66
import { GridLayoutStyles } from '.';
77
import { smartDominantSpeakerParticipants } from '../gallery';
88
import { useIdentifiers } from '../identifiers/IdentifierProvider';
@@ -35,8 +35,7 @@ import { isNarrowWidth, useContainerWidth } from './utils/responsive';
3535
import { LocalScreenShare } from './VideoGallery/LocalScreenShare';
3636
import { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';
3737
import { VideoTile } from './VideoTile';
38-
39-
const FLOATING_TILE_HOST_ID = 'UILibraryFloatingTileHost';
38+
import { v4 as uuidv4 } from 'uuid';
4039

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

305+
useEffect(() => {
306+
if (containerRef.current) {
307+
containerRef.current.id = `video-gallery-${uuidv4()}`;
308+
}
309+
}, [containerRef]);
310+
306311
return (
307312
<div
308-
id={FLOATING_TILE_HOST_ID}
309313
data-ui-id={ids.videoGallery}
310314
ref={containerRef}
311315
className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}
@@ -316,7 +320,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
316320
isModeless={true}
317321
dragOptions={DRAG_OPTIONS}
318322
styles={floatingLocalVideoModalStyle(theme, isNarrow)}
319-
layerProps={{ hostId: FLOATING_TILE_HOST_ID }}
323+
layerProps={{ hostId: containerRef.current?.id }}
320324
>
321325
{localParticipant && localVideoTile}
322326
</Modal>

‎packages/storybook/stories/VideoGallery/__snapshots__/VideoGallery.stories.storyshot‎

Lines changed: 199 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,208 @@ exports[`storybook snapshot tests Storyshots UI Components/Video Gallery Video G
2323
<div
2424
className="css-84"
2525
data-ui-id="video-gallery"
26-
id="UILibraryFloatingTileHost"
2726
>
2827
<span
2928
className="ms-layer"
30-
/>
29+
>
30+
<div
31+
className="ms-Fabric ms-Layer-content content-48"
32+
onBlur={[Function]}
33+
onChange={[Function]}
34+
onClick={[Function]}
35+
onContextMenu={[Function]}
36+
onDoubleClick={[Function]}
37+
onDrag={[Function]}
38+
onDragEnd={[Function]}
39+
onDragEnter={[Function]}
40+
onDragExit={[Function]}
41+
onDragLeave={[Function]}
42+
onDragOver={[Function]}
43+
onDragStart={[Function]}
44+
onDrop={[Function]}
45+
onFocus={[Function]}
46+
onInput={[Function]}
47+
onKeyDown={[Function]}
48+
onKeyPress={[Function]}
49+
onKeyUp={[Function]}
50+
onMouseDown={[Function]}
51+
onMouseEnter={[Function]}
52+
onMouseLeave={[Function]}
53+
onMouseMove={[Function]}
54+
onMouseOut={[Function]}
55+
onMouseOver={[Function]}
56+
onMouseUp={[Function]}
57+
onSubmit={[Function]}
58+
onTouchCancel={[Function]}
59+
onTouchEnd={[Function]}
60+
onTouchMove={[Function]}
61+
onTouchStart={[Function]}
62+
>
63+
<div
64+
aria-modal={false}
65+
onKeyDown={[Function]}
66+
role="dialog"
67+
style={
68+
Object {
69+
"outline": "none",
70+
"overflowY": undefined,
71+
}
72+
}
73+
>
74+
<div
75+
className="ms-Modal is-open root-1"
76+
>
77+
<div
78+
className="ms-Dialog-main main-2"
79+
id="ModalFocusTrapZone1"
80+
onBlurCapture={[Function]}
81+
onFocusCapture={[Function]}
82+
onMouseDown={[Function]}
83+
onMouseUp={[Function]}
84+
onTouchEnd={[Function]}
85+
onTouchStart={[Function]}
86+
style={
87+
Object {
88+
"transform": "translate(0px, 0px)",
89+
}
90+
}
91+
>
92+
<div
93+
aria-hidden={true}
94+
data-is-visible={true}
95+
style={
96+
Object {
97+
"pointerEvents": "none",
98+
"position": "fixed",
99+
}
100+
}
101+
tabIndex={0}
102+
/>
103+
<div
104+
className="ms-Modal-scrollableContent scrollableContent-3"
105+
data-is-scrollable={true}
106+
>
107+
<div
108+
className="ms-Stack css-52"
109+
data-ui-id="video-tile"
110+
>
111+
<div
112+
className="css-15"
113+
/>
114+
<div
115+
className="ms-Stack css-19"
116+
>
117+
<div
118+
className="ms-Stack css-21"
119+
>
120+
<div
121+
aria-label=""
122+
className="ms-Persona ms-Persona--size48 root-22"
123+
style={
124+
Object {
125+
"height": 100,
126+
"minWidth": 100,
127+
}
128+
}
129+
>
130+
<div
131+
className="ms-Persona-coin ms-Persona--size48 coin-29"
132+
role="presentation"
133+
>
134+
<div
135+
className="ms-Persona-imageArea imageArea-31"
136+
role="presentation"
137+
style={
138+
Object {
139+
"height": 100,
140+
"width": 100,
141+
}
142+
}
143+
>
144+
<div
145+
aria-hidden="true"
146+
className="ms-Persona-initials initials-34"
147+
style={
148+
Object {
149+
"height": 100,
150+
"width": 100,
151+
}
152+
}
153+
>
154+
<span>
155+
Y
156+
</span>
157+
</div>
158+
</div>
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
<div
164+
className="ms-Stack css-81 css-37"
165+
>
166+
<div
167+
className="ms-Stack css-82 css-38"
168+
>
169+
<span
170+
className="css-39"
171+
title="You"
172+
>
173+
You
174+
</span>
175+
<div
176+
className="ms-Stack css-53"
177+
>
178+
<i
179+
aria-hidden={true}
180+
className="root-37"
181+
data-icon-name="VideoTileMicOff"
182+
>
183+
<span
184+
aria-hidden={true}
185+
className="root-span"
186+
>
187+
<svg
188+
className="svg"
189+
fill="currentColor"
190+
height={16}
191+
viewBox="0 0 16 16"
192+
width={16}
193+
xmlns="http://www.w3.org/2000/svg"
194+
>
195+
<path
196+
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"
197+
/>
198+
<path
199+
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"
200+
/>
201+
<path
202+
d="M10.48 8.35l-4.8-4.79a2.5 2.5 0 014.82.94V8c0 .12 0 .24-.02.35z"
203+
/>
204+
</svg>
205+
</span>
206+
</i>
207+
</div>
208+
</div>
209+
</div>
210+
</div>
211+
</div>
212+
<div
213+
aria-hidden={true}
214+
data-is-visible={true}
215+
style={
216+
Object {
217+
"pointerEvents": "none",
218+
"position": "fixed",
219+
}
220+
}
221+
tabIndex={0}
222+
/>
223+
</div>
224+
</div>
225+
</div>
226+
</div>
227+
</span>
31228
<div
32229
className="ms-Stack css-9"
33230
>

0 commit comments

Comments
 (0)
⚡