Prepare v0.29.4 (#905)

* Add tooltip to screen source names (#893) * [MM-61555] Fix rendering issue with screen sharing player (#899) * Fix rendering issue with screen sharing player * Add comment * Fix incoming call banner tooltip placement in global widget (#901)
mattermost · Nov 11, 2024 · a9c4e41 · a9c4e41
1 parent fefebc6
commit a9c4e41
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 32 deletions.
diff --git a/e2e/package-lock.json b/e2e/package-lock.json
diff --git a/e2e/package.json b/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",

diff --git a/e2e/playwright.config.ts b/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',

diff --git a/e2e/tests/desktop.spec.ts b/e2e/tests/desktop.spec.ts
@@ -100,7 +100,7 @@ test.describe('desktop', () => {
                     message: [
                         {id: '1', name: 'source_1', thumbnailURL},
                         {id: '2', name: 'source_2', thumbnailURL},
-                        {id: '3', name: 'source_3', thumbnailURL},
+                        {id: '3', name: 'very very very very very long source name', thumbnailURL},
                     ],
                 },
                 window.location.origin);
@@ -113,9 +113,17 @@ test.describe('desktop', () => {
         await page.locator('#calls-widget-menu-screenshare').click();
         await expect(page.locator('#calls-screen-source-modal')).toBeVisible();
         expect(await page.locator('#calls-screen-source-modal').screenshot()).toMatchSnapshot('calls-screen-source-modal.png');
+
+        // Verify tooltip shows correctly
+        await page.getByText('very very').hover();
+        await expect(page.locator('#tooltip-screen-source-name')).toBeVisible();
+        await expect(page.locator('#tooltip-screen-source-name')).toContainText('very very very very very long source name');
+
         await page.locator('#calls-screen-source-modal button:has-text("source_2")').click();
+
         await page.locator('#calls-screen-source-modal button:has-text("Share")').click();
         await expect(page.locator('#calls-screen-source-modal')).toBeHidden();
+
         await devPage.leaveCall();
     });
 

diff --git a/e2e/tests/popout.spec.ts b/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();
+    });
+});
diff --git a/webapp/src/components/expanded_view/component.tsx b/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)`

diff --git a/webapp/src/components/incoming_calls/call_incoming_condensed.tsx b/webapp/src/components/incoming_calls/call_incoming_condensed.tsx
@@ -69,7 +69,7 @@ export const CallIncomingCondensed = ({call, onWidget = false, joinButtonBorder
                     border={false}
                 />
                 <OverlayTrigger
-                    placement='top'
+                    placement={onWidget && window.desktop ? 'bottom' : 'top'}
                     overlay={
                         <Tooltip id='tooltip-invite-message'>
                             {tooltip}

diff --git a/webapp/src/components/screen_source_modal/component.tsx b/webapp/src/components/screen_source_modal/component.tsx
@@ -2,6 +2,7 @@ import './component.scss';
 
 import {DesktopCaptureSource} from '@mattermost/desktop-api';
 import React, {CSSProperties} from 'react';
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {IntlShape} from 'react-intl';
 import CompassIcon from 'src/components/icons/compassIcon';
 import {logDebug, logErr} from 'src/log';
@@ -30,7 +31,7 @@ export default class ScreenSourceModal extends React.PureComponent<Props, State>
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            zIndex: 10000,
+            zIndex: 1000,
             background: 'rgba(0, 0, 0, 0.64)',
         },
         modal: {
@@ -133,7 +134,17 @@ export default class ScreenSourceModal extends React.PureComponent<Props, State>
                             src={source.thumbnailURL}
                         />
                     </div>
-                    <span style={this.style.sourceLabel as CSSProperties}>{source.name}</span>
+
+                    <OverlayTrigger
+                        placement='bottom'
+                        overlay={
+                            <Tooltip id='tooltip-screen-source-name'>
+                                {source.name}
+                            </Tooltip>
+                        }
+                    >
+                        <span style={this.style.sourceLabel as CSSProperties}>{source.name}</span>
+                    </OverlayTrigger>
                 </button>
             );
         });