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

2026-09-15 15:56:32 +05:00
commit 1d2bfcac0c
3159 changed files with 464524 additions and 0 deletions
--- a/react/features/filmstrip/components/web/VirtualScreenshareParticipant.tsx
+++ b/react/features/filmstrip/components/web/VirtualScreenshareParticipant.tsx
@@ -0,0 +1,183 @@
+import React, { TouchEventHandler } from 'react';
+import { useSelector } from 'react-redux';
+import { useStyles } from 'tss-react/mui';
+
+import VideoTrack from '../../../base/media/components/web/VideoTrack';
+import { ITrack } from '../../../base/tracks/types';
+import { LAYOUTS } from '../../../video-layout/constants';
+import { getCurrentLayout } from '../../../video-layout/functions.web';
+
+import ThumbnailBottomIndicators from './ThumbnailBottomIndicators';
+import ThumbnailTopIndicators from './ThumbnailTopIndicators';
+
+interface IProps {
+
+    /**
+     * An object containing the CSS classes.
+     */
+    classes?: Partial<Record<
+        'containerBackground' |
+        'indicatorsContainer' |
+        'indicatorsTopContainer' |
+        'tintBackground' |
+        'indicatorsBottomContainer' |
+        'indicatorsBackground',
+        string
+    >>;
+
+    /**
+     * The class name that will be used for the container.
+     */
+    containerClassName: string;
+
+    /**
+     * Indicates whether the thumbnail is hovered or not.
+     */
+    isHovered: boolean;
+
+    /**
+     * Indicates whether the thumbnail is for local screenshare or not.
+     */
+    isLocal: boolean;
+
+    /**
+     * Indicates whether we are currently running in a mobile browser.
+     */
+    isMobile: boolean;
+
+    /**
+     * Click handler.
+     */
+    onClick: (e?: React.MouseEvent) => void;
+
+    /**
+     * Mouse enter handler.
+     */
+    onMouseEnter: (e?: React.MouseEvent) => void;
+
+    /**
+     * Mouse leave handler.
+     */
+    onMouseLeave: (e?: React.MouseEvent) => void;
+
+    /**
+     * Mouse move handler.
+     */
+    onMouseMove: (e?: React.MouseEvent) => void;
+
+    /**
+     * Touch end handler.
+     */
+    onTouchEnd: TouchEventHandler;
+
+    /**
+     * Touch move handler.
+     */
+    onTouchMove: TouchEventHandler;
+
+    /**
+     * Touch start handler.
+     */
+    onTouchStart: TouchEventHandler;
+
+    /**
+     * The ID of the virtual screen share participant.
+     */
+    participantId: string;
+
+    /**
+     * Whether or not to display a tint background over tile.
+     */
+    shouldDisplayTintBackground: boolean;
+
+    /**
+     * An object with the styles for thumbnail.
+     */
+    styles: any;
+
+    /**
+     * The type of thumbnail.
+     */
+    thumbnailType: string;
+
+    /**
+     * JitsiTrack instance.
+     */
+    videoTrack: ITrack;
+}
+
+const VirtualScreenshareParticipant = ({
+    classes,
+    containerClassName,
+    isHovered,
+    isLocal,
+    isMobile,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onTouchEnd,
+    onTouchMove,
+    onTouchStart,
+    participantId,
+    shouldDisplayTintBackground,
+    styles,
+    videoTrack,
+    thumbnailType
+}: IProps) => {
+    const currentLayout = useSelector(getCurrentLayout);
+    const videoTrackId = videoTrack?.jitsiTrack?.getId();
+    const video = videoTrack && <VideoTrack
+        id = { isLocal ? 'localScreenshare_container' : `remoteVideo_${videoTrackId || ''}` }
+        muted = { true }
+        style = { styles.video }
+        videoTrack = { videoTrack } />;
+
+    const { cx } = useStyles();
+
+    return (
+        <span
+            className = { containerClassName }
+            id = { `participant_${participantId}` }
+            { ...(isMobile
+                ? {
+                    onTouchEnd,
+                    onTouchMove,
+                    onTouchStart
+                }
+                : {
+                    onClick,
+                    onMouseEnter,
+                    onMouseMove,
+                    onMouseLeave
+                }
+            ) }
+            style = { styles.thumbnail }>
+            {video}
+            <div className = { classes?.containerBackground } />
+            <div
+                className = { cx(classes?.indicatorsContainer,
+                        classes?.indicatorsTopContainer,
+                        currentLayout === LAYOUTS.TILE_VIEW && 'tile-view-mode'
+                ) }>
+                <ThumbnailTopIndicators
+                    isHovered = { isHovered }
+                    participantId = { participantId }
+                    thumbnailType = { thumbnailType } />
+            </div>
+            {shouldDisplayTintBackground && <div className = { classes?.tintBackground } />}
+            <div
+                className = { cx(classes?.indicatorsContainer,
+                        classes?.indicatorsBottomContainer,
+                        currentLayout === LAYOUTS.TILE_VIEW && 'tile-view-mode'
+                ) }>
+                <ThumbnailBottomIndicators
+                    className = { classes?.indicatorsBackground }
+                    local = { false }
+                    participantId = { participantId }
+                    showStatusIndicators = { true } />
+            </div>
+        </span>);
+};
+
+export default VirtualScreenshareParticipant;