snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/multi-screen/components/SecondScreenView.web.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../../app/types';
+
+import SecondScreenGallery from './SecondScreenGallery';
+import SecondScreenSharedVideo from './SecondScreenSharedVideo';
+import SecondScreenSingle from './SecondScreenSingle';
+import SecondScreenStage from './SecondScreenStage';
+import SecondScreenWhiteboard from './SecondScreenWhiteboard';
+
+/**
+ * The type of the React {@code Component} props of {@link SecondScreenView}.
+ */
+interface IProps {
+
+    /**
+     * The id of the second-screen window this view renders into.
+     */
+    id: string;
+
+    /**
+     * The second-screen window, needed to render a track in its own realm.
+     */
+    win: Window;
+}
+
+/**
+ * Routes a single second-screen window to a layout from its redux source
+ * descriptor. A {@code whiteboard} source renders the {@link SecondScreenWhiteboard}
+ * iframe; a {@code sharedvideo} source renders the meeting's shared video via
+ * {@link SecondScreenSharedVideo}; a {@code screenshare} source renders that
+ * screenshare full-bleed; a {@code tile} source renders the
+ * {@link SecondScreenGallery} grid; a stage or participant source renders the
+ * {@link SecondScreenStage} layout (featured participant plus filmstrip); any
+ * other source renders the single track/avatar via {@link SecondScreenSingle}.
+ * Each layout resolves its own state, so the potentially expensive
+ * {@code resolveSource} selector only runs where it is needed. Portaled into
+ * the second window by {@link SecondScreenPortals}.
+ *
+ * @param {IProps} props - The component props.
+ * @returns {ReactElement}
+ */
+const SecondScreenView = ({ id, win }: IProps) => {
+    const source = useSelector((state: IReduxState) => state['features/multi-screen'].screens[id]?.source);
+
+    if (source?.role === 'whiteboard') {
+        return <SecondScreenWhiteboard />;
+    }
+
+    if (source?.role === 'sharedvideo') {
+        return (
+            <SecondScreenSharedVideo
+                id = { id } />
+        );
+    }
+
+    // Before the participant check below: a screenshare names its virtual
+    // screenshare participant to say which one to show, but it is still shown
+    // full-bleed on its own rather than in the stage layout.
+    if (source?.role === 'screenshare') {
+        return (
+            <SecondScreenSingle
+                id = { id }
+                win = { win } />
+        );
+    }
+
+    if (source?.role === 'tile') {
+        return (
+            <SecondScreenGallery
+                win = { win } />
+        );
+    }
+
+    if (source && (source.role === 'stage' || Boolean(source.participant))) {
+        return (
+            <SecondScreenStage
+                id = { id }
+                win = { win } />
+        );
+    }
+
+    return (
+        <SecondScreenSingle
+            id = { id }
+            win = { win } />
+    );
+};
+
+export default SecondScreenView;