From a9c4e41244e34eb2bf29d8646438cf22cbbf8bef Mon Sep 17 00:00:00 2001 From: Claudio Costa Date: Mon, 11 Nov 2024 15:37:45 -0600 Subject: [PATCH] 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) --- e2e/package-lock.json | 56 ++++++++++--------- e2e/package.json | 2 +- e2e/playwright.config.ts | 14 +++++ e2e/tests/desktop.spec.ts | 10 +++- e2e/tests/popout.spec.ts | 40 +++++++++++++ .../components/expanded_view/component.tsx | 3 +- .../call_incoming_condensed.tsx | 2 +- .../screen_source_modal/component.tsx | 15 ++++- 8 files changed, 110 insertions(+), 32 deletions(-) diff --git a/e2e/package-lock.json b/e2e/package-lock.json index 7674c6386..f1075bdc7 100644 --- a/e2e/package-lock.json +++ b/e2e/package-lock.json @@ -8,7 +8,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", @@ -753,18 +753,19 @@ } }, "node_modules/@playwright/test": { - "version": "1.40.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.1.tgz", - "integrity": "sha512-EaaawMTOeEItCRvfmkI9v6rBkF1svM8wjl/YPRrg2N2Wmp+4qJYkWtJsbew1szfKKDm6fPLy4YAanBhIlf9dWw==", + "version": "1.48.2", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.48.2.tgz", + "integrity": "sha512-54w1xCWfXuax7dz4W2M9uw0gDyh+ti/0K/MxcCUxChFh37kkdxPdfZDw5QBbuPUJHr1CiHJ1hXgSs+GgeQc5Zw==", "dev": true, + "license": "Apache-2.0", "dependencies": { - "playwright": "1.40.1" + "playwright": "1.48.2" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/@types/eslint": { @@ -2764,6 +2765,7 @@ "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", "dev": true, "hasInstallScript": true, + "license": "MIT", "optional": true, "os": [ "darwin" @@ -3961,33 +3963,35 @@ } }, "node_modules/playwright": { - "version": "1.40.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.1.tgz", - "integrity": "sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw==", + "version": "1.48.2", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.48.2.tgz", + "integrity": "sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==", "dev": true, + "license": "Apache-2.0", "dependencies": { - "playwright-core": "1.40.1" + "playwright-core": "1.48.2" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" }, "optionalDependencies": { "fsevents": "2.3.2" } }, "node_modules/playwright-core": { - "version": "1.40.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.1.tgz", - "integrity": "sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==", + "version": "1.48.2", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.48.2.tgz", + "integrity": "sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==", "dev": true, + "license": "Apache-2.0", "bin": { "playwright-core": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/possible-typed-array-names": { @@ -5397,12 +5401,12 @@ } }, "@playwright/test": { - "version": "1.40.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.1.tgz", - "integrity": "sha512-EaaawMTOeEItCRvfmkI9v6rBkF1svM8wjl/YPRrg2N2Wmp+4qJYkWtJsbew1szfKKDm6fPLy4YAanBhIlf9dWw==", + "version": "1.48.2", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.48.2.tgz", + "integrity": "sha512-54w1xCWfXuax7dz4W2M9uw0gDyh+ti/0K/MxcCUxChFh37kkdxPdfZDw5QBbuPUJHr1CiHJ1hXgSs+GgeQc5Zw==", "dev": true, "requires": { - "playwright": "1.40.1" + "playwright": "1.48.2" } }, "@types/eslint": { @@ -7649,19 +7653,19 @@ "dev": true }, "playwright": { - "version": "1.40.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.1.tgz", - "integrity": "sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw==", + "version": "1.48.2", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.48.2.tgz", + "integrity": "sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==", "dev": true, "requires": { "fsevents": "2.3.2", - "playwright-core": "1.40.1" + "playwright-core": "1.48.2" } }, "playwright-core": { - "version": "1.40.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.1.tgz", - "integrity": "sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==", + "version": "1.48.2", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.48.2.tgz", + "integrity": "sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==", "dev": true }, "possible-typed-array-names": { diff --git a/e2e/package.json b/e2e/package.json index a0e1a1793..961220d7a 100644 --- 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 index b99c63c29..d7bf85188 100644 --- 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 index d4eff1825..8c1078261 100644 --- 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 index 2141d7601..59c01cd8e 100644 --- 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 index 519eae15b..303ddf060 100644 --- 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 index 1762a4236..065d6d34a 100644 --- 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} /> {tooltip} diff --git a/webapp/src/components/screen_source_modal/component.tsx b/webapp/src/components/screen_source_modal/component.tsx index b247965fb..19ae59b73 100644 --- 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 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 src={source.thumbnailURL} /> - {source.name} + + + {source.name} + + } + > + {source.name} + ); });