fix: don't apply participant aspect ratios in screen share mode (#1531)

### Overview

Applying portrait mode aspect ratios (9/16, or any similar) breaks the
screen-sharing layout (some elements go off-screen).
Until we provide a proper solution, we restore to the default aspect
ratio once screen sharing is started.
In the long run, we should consider separating the screen share layout
configuration from the regular one.

Context:
https://getstream.slack.com/archives/C07KX5D7MFX/p1729017984964169?thread_ts=1727981915.684569&cid=C07KX5D7MFX

This PR also includes a few other low-hanging fruits.

Author: oliverlaz

.github/workflows/egress-composite-e2e.yml

@@ -41,7 +41,7 @@ jobs:
         run: yarn build:react:deps
 
       - name: Cache Playwright browsers
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: playwright-cache
         with:
           path: ~/.cache/ms-playwright

docker-compose.yml

@@ -7,12 +7,12 @@ services:
   generate-screenshots:
     build: ./
     command: >
-      yarn workspace @stream-io/egress-composite run test:e2e 
-      -u 
+      yarn workspace @stream-io/egress-composite run test:e2e
+      -u
       --timeout 5000
     volumes:
       - ./sample-apps/react/egress-composite/tests/:/e2e/sample-apps/react/egress-composite/tests/
     environment:
-      VITE_STREAM_API_KEY: <key>
+      VITE_STREAM_API_KEY: hd8szvscpxvd
       VITE_STREAM_USER_TOKEN: <token>
       CI: true

sample-apps/react/egress-composite/src/components/LogoAndTitleOverlay.tsx

@@ -7,6 +7,8 @@ export const LogoAndTitleOverlay = () => {
     options: { 'logo.image_url': imageURL, 'title.text': titleText },
   } = useConfigurationContext();
 
+  if (!titleText && !imageURL) return null;
+
   return (
     <div
       data-testid="logo-and-title-overlay"

sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeakerScreenShare.tsx

@@ -36,11 +36,6 @@ export const DominantSpeakerScreenShare = () => {
         muteAudio // audio is handled by <ParticipantsAudio />
         ParticipantViewUI={null}
       />
-      <span>
-        {`Presenter: ${
-          screensharingParticipant.name || screensharingParticipant.userId
-        }`}
-      </span>
       <div className="eca__dominant-speaker-screen-share__current-speaker">
         <ParticipantView
           participant={screensharingParticipant}

sample-apps/react/egress-composite/src/components/layouts/index.ts

@@ -7,9 +7,17 @@ import { Spotlight } from './Spotlight';
 export const DEFAULT_LAYOUT: Layout = 'spotlight';
 export const DEFAULT_SCREENSHARE_LAYOUT: ScreenshareLayout = 'spotlight';
 
-export type Layout = 'grid' | 'single-participant' | 'spotlight' | 'mobile';
+export type Layout =
+  | 'grid'
+  | 'single-participant'
+  | 'spotlight'
+  | 'mobile'
+  | 'dominant-speaker';
 // NOTE: should always be a subset of the Layout type
-export type ScreenshareLayout = 'single-participant' | 'spotlight';
+export type ScreenshareLayout =
+  | 'single-participant'
+  | 'spotlight'
+  | 'dominant-speaker';
 
 export const layoutMap: Record<
   Layout,
@@ -20,4 +28,5 @@ export const layoutMap: Record<
   grid: [PaginatedGrid],
   spotlight: [Spotlight, Spotlight],
   mobile: [DominantSpeaker, DominantSpeakerScreenShare],
+  'dominant-speaker': [DominantSpeaker, DominantSpeakerScreenShare],
 };

sample-apps/react/egress-composite/src/hooks/options/useParticipantStyles.ts

@@ -1,5 +1,6 @@
 import { css } from '@emotion/css';
 import clsx from 'clsx';
+import { useCallStateHooks } from '@stream-io/video-react-sdk';
 
 import { useConfigurationContext } from '../../ConfigurationContext';
 
@@ -15,14 +16,21 @@ export const useParticipantStyles = () => {
     },
   } = useConfigurationContext();
 
+  const { useHasOngoingScreenShare } = useCallStateHooks();
+  const hasScreenShare = useHasOngoingScreenShare();
   const styles = [
     participantBorderRadius &&
       css`
         & .str-video__participant-view {
           border-radius: ${participantBorderRadius};
         }
       `,
+    // we don't want to apply the aspect ratio when screen share is
+    // enabled, as it breaks our layouts.
+    // we should think about this later, and most likely introduce
+    // parallel configuration for screen sharing mode
     participantAspectRatio &&
+      !hasScreenShare &&
       css`
         & .str-video__participant-view {
           aspect-ratio: ${participantAspectRatio};