diff --git a/change-beta/@azure-communication-react-6a26b83a-cf4b-44d0-ac74-87df7146f917.json b/change-beta/@azure-communication-react-6a26b83a-cf4b-44d0-ac74-87df7146f917.json new file mode 100644 index 00000000000..1d0761ddfcf --- /dev/null +++ b/change-beta/@azure-communication-react-6a26b83a-cf4b-44d0-ac74-87df7146f917.json @@ -0,0 +1,9 @@ +{ + "type": "patch", + "area": "improvement", + "workstream": "Automated tests", + "comment": "Automate dominant speaker, pinning, and spotlight tests", + "packageName": "@azure/communication-react", + "email": "miguelgamis@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@azure-communication-react-6a26b83a-cf4b-44d0-ac74-87df7146f917.json b/change/@azure-communication-react-6a26b83a-cf4b-44d0-ac74-87df7146f917.json new file mode 100644 index 00000000000..1d0761ddfcf --- /dev/null +++ b/change/@azure-communication-react-6a26b83a-cf4b-44d0-ac74-87df7146f917.json @@ -0,0 +1,9 @@ +{ + "type": "patch", + "area": "improvement", + "workstream": "Automated tests", + "comment": "Automate dominant speaker, pinning, and spotlight tests", + "packageName": "@azure/communication-react", + "email": "miguelgamis@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/src/components/Drawer/DrawerMenu.tsx b/packages/react-components/src/components/Drawer/DrawerMenu.tsx index bc831b39975..ba72c69870b 100644 --- a/packages/react-components/src/components/Drawer/DrawerMenu.tsx +++ b/packages/react-components/src/components/Drawer/DrawerMenu.tsx @@ -107,6 +107,7 @@ export const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => { styles={props.styles?.drawerSurfaceStyles} onLightDismiss={props.onLightDismiss} heading={props.heading} + data-ui-id="drawer-menu" > {menuItemsToRender?.slice(0, 1).map((item) => diff --git a/packages/react-components/tests/browser/VideoGallery.spec.tsx b/packages/react-components/tests/browser/VideoGallery.spec.tsx new file mode 100644 index 00000000000..a6657d604cc --- /dev/null +++ b/packages/react-components/tests/browser/VideoGallery.spec.tsx @@ -0,0 +1,150 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import React from 'react'; +import { test, expect } from '@playwright/experimental-ct-react'; +import { VideoGallery } from '../../src/components/VideoGallery'; +import { VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../src'; +import { Stack } from '@fluentui/react'; + +test.describe('VGL - VideoGallery tests', () => { + test.beforeEach(async ({ page }) => { + await page.evaluate(() => document.fonts.ready); + }); + + test('VideoGallery with only audio participants and dominant speakers', async ({ mount }) => { + const localParticipant: VideoGalleryLocalParticipant = { userId: 'test' }; + const remoteParticipants: VideoGalleryRemoteParticipant[] = Array.from({ length: 10 }, (_, i) => i + 1).map( + (i) => ({ + userId: `${i}`, + displayName: `${i}` + }) + ); + const component = await mount( + + + + ); + await expect(component).toHaveScreenshot('VGL-1-1-videogallery-with-audio-only-before-dominant-speakers.png'); + await component.update( + + + + ); + await expect(component).toHaveScreenshot('VGL-1-2-videogallery-with-audio-only-after-dominant-speakers.png'); + }); + + test('VideoGallery with video participants and dominant speakers', async ({ mount }) => { + const localParticipant: VideoGalleryLocalParticipant = { userId: 'test' }; + const remoteParticipants: VideoGalleryRemoteParticipant[] = Array.from({ length: 10 }, (_, i) => i + 1).map( + (i) => ({ + userId: `${i}`, + displayName: `${i}` + }) + ); + // Assign video stream to some participants + remoteParticipants[1].videoStream = { isAvailable: true }; + remoteParticipants[2].videoStream = { isAvailable: true }; + remoteParticipants[4].videoStream = { isAvailable: true }; + remoteParticipants[6].videoStream = { isAvailable: true }; + remoteParticipants[8].videoStream = { isAvailable: true }; + + const component = await mount( + + + + ); + await expect(component).toHaveScreenshot('VGL-2-1-videogallery-with-some-video-before-dominant-speakers.png'); + await component.update( + + + + ); + await expect(component).toHaveScreenshot('VGL-2-2-videogallery--with-some-video-after-dominant-speakers.png'); + }); + + test('VideoGallery with screen share on and dominant speakers', async ({ mount }) => { + const localParticipant: VideoGalleryLocalParticipant = { userId: 'test' }; + const remoteParticipants: VideoGalleryRemoteParticipant[] = Array.from({ length: 10 }, (_, i) => i + 1).map( + (i) => ({ + userId: `${i}`, + displayName: `${i}` + }) + ); + remoteParticipants[5].isScreenSharingOn = true; + remoteParticipants[5].screenShareStream = { isAvailable: true }; + const component = await mount( + + + + ); + await expect(component).toHaveScreenshot('VGL-3-1-videogallery-with-screen-share-before-dominant-speakers.png'); + await component.update( + + + + ); + await expect(component).toHaveScreenshot('VGL-3-2-videogallery-with-screen-share-after-dominant-speakers.png'); + }); + + test('VideoGallery spotlight participant test', async ({ mount }) => { + const localParticipant: VideoGalleryLocalParticipant = { userId: 'test' }; + const remoteParticipants: VideoGalleryRemoteParticipant[] = Array.from({ length: 10 }, (_, i) => i + 1).map( + (i) => ({ userId: `${i}`, displayName: `${i}` }) + ); + const screenSharingParticipant: VideoGalleryRemoteParticipant = { + userId: '11', + displayName: '11' + }; + remoteParticipants.push(screenSharingParticipant); + const component = await mount( + + + + ); + await expect(component).toHaveScreenshot('VGL-4-1-videogallery-before-spotlight.png'); + remoteParticipants[7].spotlight = { spotlightedOrderPosition: 1 }; + component.update( + + + + ); + await expect(component).toHaveScreenshot('VGL-4-2-videogallery-after-spotlight.png'); + }); +}); diff --git a/packages/react-components/tests/snapshots/beta/ChatMyMessageComponent.spec.tsx-snapshots/chat-my-message-component-rich-text-edit-box-empty-html-content-without-attachment-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/ChatMyMessageComponent.spec.tsx-snapshots/chat-my-message-component-rich-text-edit-box-empty-html-content-without-attachment-Mobile-Android-Landscape-linux.png index b73007e3199..c4e51fdda25 100644 Binary files a/packages/react-components/tests/snapshots/beta/ChatMyMessageComponent.spec.tsx-snapshots/chat-my-message-component-rich-text-edit-box-empty-html-content-without-attachment-Mobile-Android-Landscape-linux.png and b/packages/react-components/tests/snapshots/beta/ChatMyMessageComponent.spec.tsx-snapshots/chat-my-message-component-rich-text-edit-box-empty-html-content-without-attachment-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..3becae12a96 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..0533e96d75f Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..04142e72f3b Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..62cc0f334c2 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..8431a72d629 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..3658537f63f Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..533e86fb7ab Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..c1f28fdc0b2 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..b369cd1715d Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..cfa64d25192 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..7da6dc57066 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..c22e11992da Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..eec59494b0a Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..e362f249933 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..111369ff720 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..fb4a30fd7d5 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..198d20b87cc Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..9cafbb3204d Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..1c178ec6f58 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..a81ef516672 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..cf013dc4f31 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..cba325290e2 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..afd31013444 Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..aa14ac841fb Binary files /dev/null and b/packages/react-components/tests/snapshots/beta/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..3becae12a96 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..b08923dcbe2 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..04142e72f3b Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-1-videogallery-with-audio-only-before-dominant-speakers-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..62cc0f334c2 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..8431a72d629 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..3658537f63f Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-1-2-videogallery-with-audio-only-after-dominant-speakers-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..533e86fb7ab Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..c1f28fdc0b2 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..b369cd1715d Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-1-videogallery-with-some-video-before-dominant-speakers-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..cfa64d25192 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..7da6dc57066 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..c22e11992da Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-2-2-videogallery--with-some-video-after-dominant-speakers-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..eec59494b0a Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..e362f249933 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..111369ff720 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-1-videogallery-with-screen-share-before-dominant-speakers-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..fb4a30fd7d5 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..198d20b87cc Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..9cafbb3204d Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-3-2-videogallery-with-screen-share-after-dominant-speakers-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..1c178ec6f58 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..a81ef516672 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..cf013dc4f31 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-1-videogallery-before-spotlight-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Desktop-Chrome-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..cba325290e2 Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Desktop-Chrome-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Landscape-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..1e5a987f9df Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Portrait-linux.png b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..aa14ac841fb Binary files /dev/null and b/packages/react-components/tests/snapshots/stable/VideoGallery.spec.tsx-snapshots/VGL-4-2-videogallery-after-spotlight-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/call/hermetic/Pinning.test.ts b/packages/react-composites/tests/browser/call/hermetic/Pinning.test.ts new file mode 100644 index 00000000000..7ffcd50b634 --- /dev/null +++ b/packages/react-composites/tests/browser/call/hermetic/Pinning.test.ts @@ -0,0 +1,176 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import { + addVideoStream, + buildUrlWithMockAdapter, + defaultMockCallAdapterState, + defaultMockRemoteParticipant, + test +} from './fixture'; +import { expect } from '@playwright/test'; +import { dataUiId, waitForSelector, stableScreenshot, isTestProfileMobile, pageClick } from '../../common/utils'; +import { IDS } from '../../common/constants'; + +const displayNames = [ + 'Tony Hawk', + 'Marie Curie', + 'Gal Gadot', + 'Margaret Atwood', + 'Kobe Bryant', + "Conan O'Brien", + 'Paul Bridges', + 'Fiona Harper', + 'Reina Takizawa', + 'Vasily Podkolzin', + 'Antonie van Leeuwenhoek', + 'Luciana Rodriguez' +]; + +test.describe('PIN - Pinning tests', async () => { + test('Pin and unpin remote participants via video tile', async ({ page, serverUrl }, testInfo) => { + const participants = displayNames.map((name) => defaultMockRemoteParticipant(name)); + if (participants[1]) { + addVideoStream(participants[1], true); + } + const initialState = defaultMockCallAdapterState(participants); + + await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' })); + const videoGallery = await waitForSelector(page, dataUiId(IDS.videoGallery)); + + expect(await stableScreenshot(page)).toMatchSnapshot('PIN-1-1-pin-video-tile-before.png'); + + const isMobile = isTestProfileMobile(testInfo); + if (isMobile) { + const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=2`); + await videoTile.dispatchEvent('touchstart'); + await pageClick(page, 'div[role="menu"] >> text=Pin for me'); + } else { + const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=2`); + await videoTile.hover(); + const moreButton = await videoTile.waitForSelector(dataUiId(IDS.videoTileMoreOptionsButton)); + await moreButton.hover(); + await moreButton.click(); + await waitForSelector(page, dataUiId('video-tile-pin-participant-button')); + await pageClick(page, dataUiId('video-tile-pin-participant-button')); + } + + expect(await stableScreenshot(page)).toMatchSnapshot('PIN-1-2-pin-video-tile-after.png'); + + if (isMobile) { + const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=1`); + await videoTile.dispatchEvent('touchstart'); + await page.waitForSelector(dataUiId('drawer-menu')); + } else { + const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=1`); + await videoTile.hover(); + const moreButton = await videoTile?.waitForSelector(dataUiId(IDS.videoTileMoreOptionsButton)); + await moreButton?.hover(); + await moreButton?.click(); + } + + expect(await stableScreenshot(page)).toMatchSnapshot('PIN-1-3-unpin-video-tile-before.png'); + + if (isMobile) { + await pageClick(page, 'div[role="menu"] >> text=Unpin'); + } else { + await pageClick(page, dataUiId('video-tile-unpin-participant-button')); + } + + expect(await stableScreenshot(page)).toMatchSnapshot('PIN-1-4-unpin-video-tile-after.png'); + }); + + test('Pin and unpin remote participants via participant item', async ({ page, serverUrl }, testInfo) => { + const participants = displayNames.map((name) => defaultMockRemoteParticipant(name)); + if (participants[1]) { + addVideoStream(participants[1], true); + } + const initialState = defaultMockCallAdapterState(participants); + + await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' })); + + expect(await stableScreenshot(page)).toMatchSnapshot('PIN-2-1-pin-participant-item-before.png'); + + const isMobile = isTestProfileMobile(testInfo); + if (isMobile) { + await pageClick(page, dataUiId('common-call-composite-more-button')); + const drawerPeopleMenuDiv = await page.$('div[role="menu"] >> text=People'); + await drawerPeopleMenuDiv?.click(); + await pageClick(page, dataUiId('participant-item')); + await pageClick(page, 'div[role="menu"] >> text=Pin for me'); + await pageClick(page, 'button[aria-label="Back"]'); + } else { + await pageClick(page, dataUiId('common-call-composite-people-button')); + const participantItem = await page.waitForSelector(dataUiId('participant-item')); + await participantItem.hover(); + await pageClick(page, dataUiId(IDS.participantItemMenuButton)); + await pageClick(page, dataUiId('participant-item-pin-participant-button')); + } + + expect(await stableScreenshot(page)).toMatchSnapshot('PIN-2-2-pin-participant-item-after.png'); + + if (isMobile) { + await pageClick(page, dataUiId('common-call-composite-more-button')); + const drawerPeopleMenuDiv = await page.$('div[role="menu"] >> text=People'); + await drawerPeopleMenuDiv?.click(); + await pageClick(page, dataUiId('participant-item')); + } else { + const participantItem = await page.waitForSelector(dataUiId('participant-item')); + await participantItem.hover(); + await pageClick(page, dataUiId(IDS.participantItemMenuButton)); + } + + expect(await stableScreenshot(page)).toMatchSnapshot('PIN-2-3-unpin-participant-item-before.png'); + + if (isMobile) { + await pageClick(page, 'div[role="menu"] >> text=Unpin'); + await pageClick(page, 'button[aria-label="Back"]'); + } else { + await pageClick(page, dataUiId('participant-item-unpin-participant-button')); + } + + expect(await stableScreenshot(page)).toMatchSnapshot('PIN-2-4-unpin-participant-item-after.png'); + }); + + test('Pin max remote participants', async ({ page, serverUrl }, testInfo) => { + const participants = displayNames.map((name) => defaultMockRemoteParticipant(name)); + if (participants[1]) { + addVideoStream(participants[1], true); + } + const initialState = defaultMockCallAdapterState(participants); + + await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' })); + const videoGallery = await waitForSelector(page, dataUiId(IDS.videoGallery)); + + const isMobile = isTestProfileMobile(testInfo); + if (isMobile) { + for (let i = 0; i < 4; i++) { + const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=-1`); + await videoTile.dispatchEvent('touchstart'); + await pageClick(page, 'div[role="menu"] >> text=Pin for me'); + } + + const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=-1`); + await videoTile.dispatchEvent('touchstart'); + await page.waitForSelector(dataUiId('drawer-menu')); + } else { + for (let i = 0; i < 4; i++) { + const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=-1`); + await videoTile.hover(); + const moreButton = await videoTile.waitForSelector(dataUiId(IDS.videoTileMoreOptionsButton)); + await moreButton.hover(); + await moreButton.click(); + await waitForSelector(page, dataUiId('video-tile-pin-participant-button')); + await pageClick(page, dataUiId('video-tile-pin-participant-button')); + } + + const videoTile = await videoGallery.waitForSelector(dataUiId(IDS.videoTile) + ` >> nth=-1`); + await videoTile.hover(); + const moreButton = await videoTile?.waitForSelector(dataUiId(IDS.videoTileMoreOptionsButton)); + await moreButton?.hover(); + await moreButton?.click(); + } + + expect(await stableScreenshot(page)).toMatchSnapshot('PIN-3-1-pin-max-tiles.png'); + }); +}); diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..c009723856e Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..0c562f5d83c Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..e3f6217457f Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..c35ccd94dae Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..9c61da4dc05 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..5d2b393e9ad Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..4764dc22215 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..da26aef4ba7 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..b661b188a2e Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..714b17ebd76 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..0c562f5d83c Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..302820ac488 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..c8bc329f042 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..0c562f5d83c Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..e3f6217457f Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..2d8a8e22f5c Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..d92b91eafc0 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..da59f4935b6 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..ffa7378aca9 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..26dcc900779 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..7be03beffd1 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..9a97c3f23dd Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..0c562f5d83c Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..e3f6217457f Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..837b502ce88 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..ffccc522d47 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..05fe0a51aaa Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..c009723856e Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..0c562f5d83c Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..e3f6217457f Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-1-pin-video-tile-before-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..c35ccd94dae Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..9c61da4dc05 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..5d2b393e9ad Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-2-pin-video-tile-after-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..4764dc22215 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..f59197c1e1b Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..b661b188a2e Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-3-unpin-video-tile-before-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..714b17ebd76 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..0c562f5d83c Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..302820ac488 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-1-4-unpin-video-tile-after-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..c009723856e Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..0c562f5d83c Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..e3f6217457f Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-1-pin-participant-item-before-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..ec26310a70a Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..d92b91eafc0 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..da59f4935b6 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-2-pin-participant-item-after-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..e61172326f3 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..55d6e4b60ae Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..504ef04ba38 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-3-unpin-participant-item-before-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..2b0e04ac8c2 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..0c562f5d83c Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..e3f6217457f Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-2-4-unpin-participant-item-after-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Desktop-Chrome-linux.png new file mode 100644 index 00000000000..837b502ce88 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Landscape-linux.png new file mode 100644 index 00000000000..70cf6868085 Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Portrait-linux.png new file mode 100644 index 00000000000..05fe0a51aaa Binary files /dev/null and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/Pinning.test.ts-snapshots/PIN-3-1-pin-max-tiles-Mobile-Android-Portrait-linux.png differ