diff --git a/package.json b/package.json index 28c16d70e0..a2d89ad252 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,6 @@ }, "resolutions": { "**/pretty-format/react-is": "19.2.0", - "@playwright/test": "1.56.1", "@types/react": "19.2.6", "@types/react-dom": "19.2.3", "oidc-client-ts": "3.4.1", @@ -185,7 +184,7 @@ "@element-hq/element-call-embedded": "0.16.1", "@element-hq/element-web-playwright-common": "^2.0.0", "@peculiar/webcrypto": "^1.4.3", - "@playwright/test": "^1.50.1", + "@playwright/test": "1.57.0", "@principalstudio/html-webpack-inject-preload": "^1.2.7", "@sentry/webpack-plugin": "^4.0.0", "@storybook/react-vite": "^10.0.7", diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json index 8b35b17eef..6094cf0441 100644 --- a/packages/shared-components/package.json +++ b/packages/shared-components/package.json @@ -45,6 +45,9 @@ "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"", "test:storybook:update": "playwright-screenshots --entrypoint yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot" }, + "resolutions": { + "playwright": "1.57.0" + }, "dependencies": { "@vector-im/compound-design-tokens": "^6.3.0", "classnames": "^2.5.1", @@ -57,7 +60,7 @@ }, "devDependencies": { "@element-hq/element-web-playwright-common": "^2.0.0", - "@playwright/test": "^1.50.1", + "@playwright/test": "1.57.0", "@storybook/addon-a11y": "^10.0.7", "@storybook/addon-designs": "^11.0.1", "@storybook/addon-docs": "^10.0.7", diff --git a/packages/shared-components/playwright/snapshots/room-banner--without-close-linux.png b/packages/shared-components/playwright/snapshots/room-banner--without-close-linux.png new file mode 100644 index 0000000000..9645bd1d8a Binary files /dev/null and b/packages/shared-components/playwright/snapshots/room-banner--without-close-linux.png differ diff --git a/packages/shared-components/src/composer/Banner/Banner.stories.tsx b/packages/shared-components/src/composer/Banner/Banner.stories.tsx index b813eeb398..53d3941621 100644 --- a/packages/shared-components/src/composer/Banner/Banner.stories.tsx +++ b/packages/shared-components/src/composer/Banner/Banner.stories.tsx @@ -65,3 +65,9 @@ export const WithAvatarImage: Story = { avatar: Example, }, }; + +export const WithoutClose: Story = { + args: { + onClose: undefined, + }, +}; diff --git a/packages/shared-components/src/composer/Banner/Banner.tsx b/packages/shared-components/src/composer/Banner/Banner.tsx index a1622dd1dc..392b2a2610 100644 --- a/packages/shared-components/src/composer/Banner/Banner.tsx +++ b/packages/shared-components/src/composer/Banner/Banner.tsx @@ -41,7 +41,7 @@ interface BannerProps { /** * Called when the user presses the "dismiss" button. */ - onClose: MouseEventHandler; + onClose?: MouseEventHandler; } /** @@ -82,9 +82,11 @@ export function Banner({ {children}
{actions} - + {onClose && ( + + )}
); diff --git a/packages/shared-components/yarn.lock b/packages/shared-components/yarn.lock index 45381afdb2..f781affa06 100644 --- a/packages/shared-components/yarn.lock +++ b/packages/shared-components/yarn.lock @@ -1046,12 +1046,12 @@ resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.2.9.tgz#d229a7b7f9dac167a156992ef23c7f023653f53b" integrity sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA== -"@playwright/test@^1.50.1": - version "1.56.1" - resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.56.1.tgz#6e3bf3d0c90c5cf94bf64bdb56fd15a805c8bd3f" - integrity sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg== +"@playwright/test@1.57.0": + version "1.57.0" + resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.57.0.tgz#a14720ffa9ed7ef7edbc1f60784fc6134acbb003" + integrity sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA== dependencies: - playwright "1.56.1" + playwright "1.57.0" "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2": version "1.1.2" @@ -5771,31 +5771,17 @@ pkg-types@^2.3.0: exsolve "^1.0.7" pathe "^2.0.3" -playwright-core@1.56.0, playwright-core@>=1.2.0: - version "1.56.0" - resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.56.0.tgz#14b40ea436551b0bcefe19c5bfb8d1804c83739c" - integrity sha512-1SXl7pMfemAMSDn5rkPeZljxOCYAmQnYLBTExuh6E8USHXGSX3dx6lYZN/xPpTz1vimXmPA9CDnILvmJaB8aSQ== +playwright-core@1.57.0, playwright-core@>=1.2.0: + version "1.57.0" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.57.0.tgz#3dcc9a865af256fa9f0af0d67fc8dd54eecaebf5" + integrity sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ== -playwright-core@1.56.1: - version "1.56.1" - resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.56.1.tgz#24a66481e5cd33a045632230aa2c4f0cb6b1db3d" - integrity sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ== - -playwright@1.56.1: - version "1.56.1" - resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.56.1.tgz#62e3b99ddebed0d475e5936a152c88e68be55fbf" - integrity sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw== +playwright@1.57.0, playwright@^1.14.0: + version "1.57.0" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.57.0.tgz#74d1dacff5048dc40bf4676940b1901e18ad0f46" + integrity sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw== dependencies: - playwright-core "1.56.1" - optionalDependencies: - fsevents "2.3.2" - -playwright@^1.14.0: - version "1.56.0" - resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.56.0.tgz#71c533c61da33e95812f8c6fa53960e073548d9a" - integrity sha512-X5Q1b8lOdWIE4KAoHpW3SE8HvUB+ZZsUoN64ZhjnN8dOb1UpujxBtENGiZFE+9F/yhzJwYa+ca3u43FeLbboHA== - dependencies: - playwright-core "1.56.0" + playwright-core "1.57.0" optionalDependencies: fsevents "2.3.2" diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png index b837798b3d..8f025b53ef 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png index 30a8f94cbd..2dffefd423 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png index 8540165f4c..a2147e80d5 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png index 681d54cd26..de6fe0cdbb 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png index c34d8925d7..b9bbd316fb 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png index 4d452abd29..d5e96b98f9 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png differ diff --git a/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png b/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png index 9f2d1e23e4..691e7cdb0a 100644 Binary files a/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png and b/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png differ diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png index 36ba4b247d..42fd8cfca2 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png index 2b53b40113..498415e78b 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png differ diff --git a/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png b/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png index 2f799712b6..2730cea568 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png and b/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png differ diff --git a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png index 8280d305f9..91b345d971 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png and b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png differ diff --git a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png index 8ffe05ad88..a7aaf36dc4 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png and b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png differ diff --git a/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png b/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png index 1fc7e805fd..d21b9dc95f 100644 Binary files a/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png and b/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png differ diff --git a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png index 54deb9e4a6..469881620c 100644 Binary files a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png and b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png differ diff --git a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-We’ve-refreshed-your-sounds-linux.png b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-We’ve-refreshed-your-sounds-linux.png index 0f4c80ac9e..8f65d3659b 100644 Binary files a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-We’ve-refreshed-your-sounds-linux.png and b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-We’ve-refreshed-your-sounds-linux.png differ diff --git a/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png b/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png index 6c95b0d774..34a415dc21 100644 Binary files a/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png and b/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png index b377cf296f..a63ad3cc6b 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png differ diff --git a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png index c326c3f8e4..cc0a85a9fe 100644 Binary files a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png index 7d03f4b6ef..9d9a192bc8 100644 Binary files a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png and b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png differ diff --git a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png index ff18bcf702..4b8ab687e1 100644 Binary files a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png and b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png differ diff --git a/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png b/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png index 81807e1a0d..83fd549c0d 100644 Binary files a/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png and b/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png index 3d727db365..3e6449028f 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png index 246d67de9a..42cfab917a 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png index 92e8bb2d9d..e8fc6c378b 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png index 92a2f51296..48f4301950 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png index ee90846a5b..9eddaf7cb3 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png index 1ec709e872..2aca2ed614 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png index 07c1f19b63..d1e1a23b01 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png index 226d0a4bbd..78499de3d0 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png index 7540e34ebd..c66b893a78 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png index 601985cafd..9a14e597a5 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png index 3ca41861b2..66dd771367 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png index 0234856cb3..c16a1292cb 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png index 831a045a25..94db3efe0b 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png index 7da36fecc2..5080d3708d 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png index c1b7ed9f12..2aada80e2e 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png index faa22eb94a..971fe45982 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png index 05f189c924..3308816188 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png index 2f828535bf..56e46968db 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png index 3ca41861b2..66dd771367 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png index 79f9eb810e..9e30806635 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png index 228381ebee..38d314efc3 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png index 3528a86c9f..66112251e8 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png index ce0a7c5b64..34504c0d14 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png index 842476a93b..4847414c49 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png differ diff --git a/res/css/structures/_QuickSettingsButton.pcss b/res/css/structures/_QuickSettingsButton.pcss index 7fe7c5f35c..83d997f3a2 100644 --- a/res/css/structures/_QuickSettingsButton.pcss +++ b/res/css/structures/_QuickSettingsButton.pcss @@ -36,6 +36,8 @@ Please see LICENSE files in the repository root for full details. /* align with settings icon */ margin-left: 21px; + margin-right: 8px; + width: 100%; /** * modify internal css of the compound component @@ -50,7 +52,8 @@ Please see LICENSE files in the repository root for full details. /* align with settings label */ margin-right: 14px; /* required to set the icon width when into a flex container */ - min-width: 24px; + width: 24px; + flex-shrink: 0; } & .mx_QuickSettingsButton_label { diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index 1aea3ae23b..d64a40bf28 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -457,7 +457,7 @@ Please see LICENSE files in the repository root for full details. } .mx_SpacePanel_iconPreferences::before { - mask-image: url("$(res)/img/element-icons/settings/preference.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/preferences.svg"); } .mx_SpacePanel_noIcon { diff --git a/res/css/structures/_ThreadsActivityCentre.pcss b/res/css/structures/_ThreadsActivityCentre.pcss index f26139da64..434ddb0ea4 100644 --- a/res/css/structures/_ThreadsActivityCentre.pcss +++ b/res/css/structures/_ThreadsActivityCentre.pcss @@ -23,6 +23,8 @@ /* align with settings icon */ margin-left: 21px; + margin-right: 8px; + width: 100%; /** * modify internal css of the compound component @@ -31,13 +33,20 @@ & > div { display: flex; align-items: center; + + &::before { + inline-size: 8px; + block-size: 8px; + left: 17px; + } } & .mx_ThreadsActivityCentreButton_Icon { /* align with settings label */ margin-right: 14px; /* required to set the icon width when into a flex container */ - min-width: 24px; + width: 24px; + flex-shrink: 0; } & .mx_ThreadsActivityCentreButton_Text { diff --git a/res/css/structures/_UploadBar.pcss b/res/css/structures/_UploadBar.pcss index 8bc341c057..689713954f 100644 --- a/res/css/structures/_UploadBar.pcss +++ b/res/css/structures/_UploadBar.pcss @@ -40,7 +40,7 @@ Please see LICENSE files in the repository root for full details. mask-repeat: no-repeat; mask-position: center; background-color: $muted-fg-color; - mask-image: url("$(res)/img/element-icons/upload.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/share.svg"); } } diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss index 853d97c935..b49f3658d2 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.pcss +++ b/res/css/views/context_menus/_IconizedContextMenu.pcss @@ -156,7 +156,7 @@ Please see LICENSE files in the repository root for full details. } .mx_IconizedContextMenu_developerTools::before { - mask-image: url("$(res)/img/element-icons/settings/flask.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/labs.svg"); } .mx_IconizedContextMenu_checked::before { diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss index 9fc454f328..c8eaf72e4b 100644 --- a/res/css/views/context_menus/_MessageContextMenu.pcss +++ b/res/css/views/context_menus/_MessageContextMenu.pcss @@ -41,7 +41,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageContextMenu_iconUnhidePreview::before { - mask-image: url("$(res)/img/element-icons/settings/appearance.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg"); } .mx_MessageContextMenu_iconOpenInMapSite::before { @@ -88,7 +88,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageContextMenu_iconEdit::before { - mask-image: url("$(res)/img/element-icons/room/message-bar/edit.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/edit.svg"); } .mx_MessageContextMenu_iconReply::before { @@ -100,7 +100,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageContextMenu_iconReact::before { - mask-image: url("$(res)/img/element-icons/room/message-bar/emoji.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/reaction-add.svg"); } .mx_MessageContextMenu_iconViewInRoom::before { diff --git a/res/css/views/dialogs/_RoomSettingsDialog.pcss b/res/css/views/dialogs/_RoomSettingsDialog.pcss index 7a37462955..ece76a126d 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.pcss +++ b/res/css/views/dialogs/_RoomSettingsDialog.pcss @@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details. } .mx_RoomSettingsDialog_pollsIcon::before { - mask-image: url("$(res)/img/element-icons/room/composer/poll.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/polls.svg"); } .mx_RoomSettingsDialog_warningIcon::before { diff --git a/res/css/views/dialogs/_SpacePreferencesDialog.pcss b/res/css/views/dialogs/_SpacePreferencesDialog.pcss index 709c926760..9c4f1aa8b4 100644 --- a/res/css/views/dialogs/_SpacePreferencesDialog.pcss +++ b/res/css/views/dialogs/_SpacePreferencesDialog.pcss @@ -28,5 +28,5 @@ Please see LICENSE files in the repository root for full details. } .mx_SpacePreferencesDialog_appearanceIcon::before { - mask-image: url("$(res)/img/element-icons/settings/appearance.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg"); } diff --git a/res/css/views/messages/_MFileBody.pcss b/res/css/views/messages/_MFileBody.pcss index c8361f1d29..51ba681140 100644 --- a/res/css/views/messages/_MFileBody.pcss +++ b/res/css/views/messages/_MFileBody.pcss @@ -45,10 +45,10 @@ Please see LICENSE files in the repository root for full details. mask-repeat: no-repeat; mask-position: center; mask-size: cover; - mask-image: url("$(res)/img/element-icons/room/composer/attach.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/attachment.svg"); background-color: $secondary-content; - width: 15px; - height: 15px; + width: 16px; + height: 16px; position: absolute; top: 8px; diff --git a/res/css/views/messages/_MPollBody.pcss b/res/css/views/messages/_MPollBody.pcss index 09160c083a..1a7b8731fa 100644 --- a/res/css/views/messages/_MPollBody.pcss +++ b/res/css/views/messages/_MPollBody.pcss @@ -41,7 +41,7 @@ Please see LICENSE files in the repository root for full details. mask-repeat: no-repeat; mask-size: contain; mask-position: center; - mask-image: url("$(res)/img/element-icons/room/composer/poll.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/polls.svg"); } .mx_MPollBody_totalVotes { diff --git a/res/css/views/messages/_ReactionsRow.pcss b/res/css/views/messages/_ReactionsRow.pcss index e787e50517..833dee9a35 100644 --- a/res/css/views/messages/_ReactionsRow.pcss +++ b/res/css/views/messages/_ReactionsRow.pcss @@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details. mask-repeat: no-repeat; mask-position: center; background-color: $tertiary-content; - mask-image: url("$(res)/img/element-icons/room/message-bar/emoji.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/reaction-add.svg"); } &.mx_ReactionsRow_addReactionButton_active { diff --git a/res/css/views/rooms/_EmojiButton.pcss b/res/css/views/rooms/_EmojiButton.pcss index 1628104646..3793d535e8 100644 --- a/res/css/views/rooms/_EmojiButton.pcss +++ b/res/css/views/rooms/_EmojiButton.pcss @@ -15,7 +15,7 @@ Please see LICENSE files in the repository root for full details. } .mx_EmojiButton_icon::before { - mask-image: url("$(res)/img/element-icons/room/composer/emoji.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/reaction.svg"); } .mx_MessageComposer_wysiwyg { diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index 8b92b682ec..0b11025b1e 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/res/css/views/rooms/_MessageComposer.pcss @@ -245,11 +245,11 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageComposer_upload::before { - mask-image: url("$(res)/img/element-icons/room/composer/attach.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/attachment.svg"); } .mx_MessageComposer_poll::before { - mask-image: url("$(res)/img/element-icons/room/composer/poll.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/polls.svg"); } .mx_MessageComposer_voiceMessage::before { @@ -257,7 +257,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageComposer_plain_text::before { - mask-image: url("$(res)/img/element-icons/room/composer/plain_text.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/text-formatting.svg"); } .mx_MessageComposer_rich_text::before { @@ -274,7 +274,6 @@ Please see LICENSE files in the repository root for full details. .mx_MessageComposer_buttonMenu::before { mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); - mask-size: 24px; } .mx_MessageComposer_sendMessage { diff --git a/res/img/element-icons/room/composer/attach.svg b/res/img/element-icons/room/composer/attach.svg deleted file mode 100644 index 0cac44d29f..0000000000 --- a/res/img/element-icons/room/composer/attach.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/room/composer/emoji.svg b/res/img/element-icons/room/composer/emoji.svg deleted file mode 100644 index b02cb69364..0000000000 --- a/res/img/element-icons/room/composer/emoji.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/res/img/element-icons/room/composer/plain_text.svg b/res/img/element-icons/room/composer/plain_text.svg deleted file mode 100644 index 053d41649a..0000000000 --- a/res/img/element-icons/room/composer/plain_text.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - diff --git a/res/img/element-icons/room/composer/poll.svg b/res/img/element-icons/room/composer/poll.svg deleted file mode 100644 index 75e74fd60a..0000000000 --- a/res/img/element-icons/room/composer/poll.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/element-icons/room/message-bar/edit.svg b/res/img/element-icons/room/message-bar/edit.svg deleted file mode 100644 index 3d823b165e..0000000000 --- a/res/img/element-icons/room/message-bar/edit.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/element-icons/room/message-bar/emoji.svg b/res/img/element-icons/room/message-bar/emoji.svg deleted file mode 100644 index d34a88ed50..0000000000 --- a/res/img/element-icons/room/message-bar/emoji.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/room/message-bar/star.svg b/res/img/element-icons/room/message-bar/star.svg deleted file mode 100644 index 73898d9a45..0000000000 --- a/res/img/element-icons/room/message-bar/star.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/res/img/element-icons/settings/appearance.svg b/res/img/element-icons/settings/appearance.svg deleted file mode 100644 index 6f91759354..0000000000 --- a/res/img/element-icons/settings/appearance.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/settings/flask.svg b/res/img/element-icons/settings/flask.svg deleted file mode 100644 index 7b8f2fda62..0000000000 --- a/res/img/element-icons/settings/flask.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/settings/preference.svg b/res/img/element-icons/settings/preference.svg deleted file mode 100644 index d466662117..0000000000 --- a/res/img/element-icons/settings/preference.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/upload.svg b/res/img/element-icons/upload.svg deleted file mode 100644 index 71ad7ba1cf..0000000000 --- a/res/img/element-icons/upload.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/ContentMessages.ts b/src/ContentMessages.ts index ebfc23d43a..ec68f854fe 100644 --- a/src/ContentMessages.ts +++ b/src/ContentMessages.ts @@ -140,7 +140,7 @@ const IMAGE_THUMBNAIL_MIN_REDUCTION_PERCENT = 0.1; // 10% // and videos tend to be much larger. // Image mime types for which to always include a thumbnail for even if it is larger than the input for wider support. -const ALWAYS_INCLUDE_THUMBNAIL = ["image/avif", "image/webp"]; +const ALWAYS_INCLUDE_THUMBNAIL = ["image/avif", "image/webp", "image/svg+xml"]; /** * Read the metadata for an image file and create and upload a thumbnail of the image. diff --git a/src/components/views/dialogs/UploadConfirmDialog.tsx b/src/components/views/dialogs/UploadConfirmDialog.tsx index 36a05733a3..820b047c38 100644 --- a/src/components/views/dialogs/UploadConfirmDialog.tsx +++ b/src/components/views/dialogs/UploadConfirmDialog.tsx @@ -11,7 +11,6 @@ import React, { type JSX } from "react"; import { FilesIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; -import { getBlobSafeMimeType } from "../../../utils/blobs"; import BaseDialog from "./BaseDialog"; import DialogButtons from "../elements/DialogButtons"; import { fileSize } from "../../../utils/FileUtils"; @@ -23,10 +22,11 @@ interface IProps { onFinished: (uploadConfirmed: boolean, uploadAll?: boolean) => void; } -export default class UploadConfirmDialog extends React.Component { - private readonly objectUrl: string; - private readonly mimeType: string; +interface IState { + objectUrl?: string; +} +export default class UploadConfirmDialog extends React.Component { public static defaultProps: Partial = { totalFiles: 1, currentIndex: 0, @@ -35,15 +35,22 @@ export default class UploadConfirmDialog extends React.Component { public constructor(props: IProps) { super(props); - // Create a fresh `Blob` for previewing (even though `File` already is - // one) so we can adjust the MIME type if needed. - this.mimeType = getBlobSafeMimeType(props.file.type); - const blob = new Blob([props.file], { type: this.mimeType }); - this.objectUrl = URL.createObjectURL(blob); + this.state = {}; + } + + public componentDidMount(): void { + if (this.props.file.type.startsWith("image/") || this.props.file.type.startsWith("video/")) { + this.setState({ + // We do not filter the mimetype using getBlobSafeMimeType here as if the user is uploading the file + // themselves they should be trusting it enough to open/load it, and it will be rendered into a hidden + // canvas for thumbnail generation anyway + objectUrl: URL.createObjectURL(this.props.file), + }); + } } public componentWillUnmount(): void { - if (this.objectUrl) URL.revokeObjectURL(this.objectUrl); + if (this.state.objectUrl) URL.revokeObjectURL(this.state.objectUrl); } private onCancelClick = (): void => { @@ -70,17 +77,23 @@ export default class UploadConfirmDialog extends React.Component { } const fileId = `mx-uploadconfirmdialog-${this.props.file.name}`; + const mimeType = this.props.file.type; + let preview: JSX.Element | undefined; let placeholder: JSX.Element | undefined; - if (this.mimeType.startsWith("image/")) { + if (mimeType.startsWith("image/")) { preview = ( - + ); - } else if (this.mimeType.startsWith("video/")) { + } else if (mimeType.startsWith("video/")) { preview = (