[MM-61555] Fix rendering issue with screen sharing player (#899)

* Fix rendering issue with screen sharing player

* Add comment

e2e/package.json

@@ -9,7 +9,7 @@
     "@babel/core": "7.20.12",
     "@babel/eslint-parser": "7.19.1",
     "@mattermost/types": "6.7.0-0",
-    "@playwright/test": "^1.40.1",
+    "@playwright/test": "^1.48.2",
     "@types/node": "^20.10.4",
     "@typescript-eslint/eslint-plugin": "5.49.0",
     "eslint": "8.33.0",

e2e/playwright.config.ts

@@ -30,6 +30,12 @@ const config: PlaywrightTestConfig = {
                 '--auto-select-desktop-capture-source="Entire screen"',
                 '--use-file-for-fake-audio-capture=./assets/sample.wav',
             ],
+            firefoxUserPrefs: {
+                'media.navigator.streams.fake': true,
+                'permissions.default.microphone': 1,
+                'permissions.default.camera': 1,
+                'media.navigator.permission.disabled': true,
+            },
         },
 
         // Unfortunately waitForFunction is flaky and randomly returns CSP failures.
@@ -46,6 +52,14 @@ const config: PlaywrightTestConfig = {
         {
             name: 'webkit',
         },
+
+        // NOTE: https://mattermost.atlassian.net/browse/MM-61558
+        // {
+        //     name: 'firefox',
+        //     use: {
+        //         browserName: 'firefox',
+        //     },
+        // },
     ] : [
         {
             name: 'chromium',

e2e/tests/popout.spec.ts

@@ -420,3 +420,43 @@ test.describe('popout window - reactions', () => {
         await expect(popOut.locator('#calls-popout-emoji-picker')).toBeHidden();
     });
 });
+
+test.describe('popout window - screen sharing', () => {
+    test.use({storageState: userStorages[0]});
+
+    test('player renders correctly', async ({page, context}) => {
+        const devPage = new PlaywrightDevPage(page);
+        await devPage.goto();
+        await devPage.startCall();
+
+        const [popOut] = await Promise.all([
+            context.waitForEvent('page'),
+            page.click('#calls-widget-expand-button'),
+        ]);
+
+        await expect(popOut.locator('#calls-expanded-view')).toBeVisible();
+
+        // Verify screen player is hidden
+        await expect(popOut.locator('#screen-player')).toBeHidden();
+
+        // Start screen sharing
+        await popOut.locator('#calls-popout-screenshare-button').click();
+
+        // Verify screen player is visible
+        await expect(popOut.locator('#screen-player')).toBeVisible();
+
+        // Verify the player is actually showing something
+        const box = await popOut.locator('#screen-player').boundingBox();
+        expect(box?.width).toBeGreaterThan(1000);
+        expect(box?.height).toBeGreaterThan(500);
+
+        // Stop screen sharing
+        await popOut.locator('#calls-popout-screenshare-button').click();
+
+        // Verify screen player is now hidden
+        await expect(popOut.locator('#screen-player')).toBeHidden();
+
+        // Leave call
+        await devPage.leaveCall();
+    });
+});

webapp/src/components/expanded_view/component.tsx

@@ -138,9 +138,10 @@ interface State {
 }
 
 const StyledMediaController = styled(MediaController)`
-    height: 100%;
     max-height: calc(100% - 32px);
     background-color: transparent;
+    margin-top: auto;
+    margin-bottom: auto;
 `;
 
 const StyledMediaControlBar = styled(MediaControlBar)`