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

react/features/filmstrip/functions.native.ts

@@ -0,0 +1,289 @@
+import { IReduxState } from '../app/types';
+import { IStateful } from '../base/app/types';
+import { FILMSTRIP_ENABLED } from '../base/flags/constants';
+import { getFeatureFlag } from '../base/flags/functions';
+import {
+    getLocalParticipant,
+    getParticipantCountWithFake,
+    getPinnedParticipant
+} from '../base/participants/functions';
+import Platform from '../base/react/Platform.native';
+import { toState } from '../base/redux/functions';
+import { ASPECT_RATIO_NARROW } from '../base/responsive-ui/constants';
+import { getHideSelfView } from '../base/settings/functions.any';
+import conferenceStyles from '../conference/components/native/styles';
+import { shouldDisplayTileView } from '../video-layout/functions.native';
+
+import styles from './components/native/styles';
+
+export * from './functions.any';
+
+/**
+ * Returns true if the filmstrip on mobile is visible, false otherwise.
+ *
+ * NOTE: Filmstrip on mobile behaves differently to web, and is only visible
+ * when there are at least 2 participants.
+ *
+ * @param {Object | Function} stateful - The Object or Function that can be
+ * resolved to a Redux state object with the toState function.
+ * @returns {boolean}
+ */
+export function isFilmstripVisible(stateful: IStateful) {
+    const state = toState(stateful);
+
+    const enabled = getFeatureFlag(state, FILMSTRIP_ENABLED, true);
+
+    if (!enabled) {
+        return false;
+    }
+
+    return getParticipantCountWithFake(state) > 1;
+}
+
+/**
+ * Determines whether the remote video thumbnails should be displayed/visible in
+ * the filmstrip.
+ *
+ * @param {Object} state - The full redux state.
+ * @returns {boolean} - If remote video thumbnails should be displayed/visible
+ * in the filmstrip, then {@code true}; otherwise, {@code false}.
+ */
+export function shouldRemoteVideosBeVisible(state: IReduxState) {
+    if (state['features/invite'].calleeInfoVisible) {
+        return false;
+    }
+
+    // Include fake participants to derive how many thumbnails are displayed,
+    // as it is assumed all participants, including fake, will be displayed
+    // in the filmstrip.
+    const participantCount = getParticipantCountWithFake(state);
+    const pinnedParticipant = getPinnedParticipant(state);
+    const { disable1On1Mode } = state['features/base/config'];
+
+    return Boolean(
+        participantCount > 2
+
+            // Always show the filmstrip when there is another participant to
+            // show and the local video is pinned. Note we are not taking the
+            // toolbar visibility into account here (unlike web) because
+            // showing / hiding views in quick succession on mobile is taxing.
+            || (participantCount > 1 && pinnedParticipant?.local)
+
+            || disable1On1Mode);
+}
+
+/**
+ * Not implemented on mobile.
+ *
+ * @param {any} _state - Used on web.
+ * @returns {Array<string>}
+ */
+export function getActiveParticipantsIds(_state: any) {
+    return [];
+}
+
+/**
+ * Not implemented on mobile.
+ *
+ * @param {any} _state - Redux state.
+ * @returns {Array<Object>}
+ */
+export function getPinnedActiveParticipants(_state: any) {
+    return [];
+}
+
+/**
+ * Returns the number of participants displayed in tile view.
+ *
+ * @param {Object | Function} stateful - The Object or Function that can be
+ * resolved to a Redux state object with the toState function.
+ * @returns {number} - The number of participants displayed in tile view.
+ */
+export function getTileViewParticipantCount(stateful: IStateful) {
+    const state = toState(stateful);
+    const disableSelfView = getHideSelfView(state);
+    const localParticipant = getLocalParticipant(state);
+    const participantCount = getParticipantCountWithFake(state) - (disableSelfView && localParticipant ? 1 : 0);
+
+    return participantCount;
+}
+
+/**
+ * Returns how many columns should be displayed for tile view.
+ *
+ * @param {Object | Function} stateful - The Object or Function that can be
+ * resolved to a Redux state object with the toState function.
+ * @returns {number} - The number of columns to be rendered in tile view.
+ * @private
+ */
+export function getColumnCount(stateful: IStateful) {
+    const state = toState(stateful);
+    const participantCount = getTileViewParticipantCount(state);
+    const { aspectRatio } = state['features/base/responsive-ui'];
+
+    // For narrow view, tiles should stack on top of each other for a lonely
+    // call and a 1:1 call. Otherwise tiles should be grouped into rows of
+    // two.
+    if (aspectRatio === ASPECT_RATIO_NARROW) {
+        return participantCount >= 3 ? 2 : 1;
+    }
+
+    if (participantCount === 4) {
+        // In wide view, a four person call should display as a 2x2 grid.
+        return 2;
+    }
+
+    return Math.min(participantCount <= 6 ? 3 : 4, participantCount);
+}
+
+/**
+ * Returns true if the filmstrip has a scroll and false otherwise.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {boolean} - True if the scroll is displayed and false otherwise.
+ */
+export function isFilmstripScrollVisible(state: IReduxState) {
+    if (shouldDisplayTileView(state)) {
+        return state['features/filmstrip']?.tileViewDimensions?.hasScroll;
+    }
+
+    const { aspectRatio, clientWidth, clientHeight, safeAreaInsets = {} } = state['features/base/responsive-ui'];
+    const isNarrowAspectRatio = aspectRatio === ASPECT_RATIO_NARROW;
+    const disableSelfView = getHideSelfView(state);
+    const localParticipant = Boolean(getLocalParticipant(state));
+    const localParticipantVisible = localParticipant && !disableSelfView;
+    const participantCount
+        = getParticipantCountWithFake(state)
+            - (localParticipant && (shouldDisplayLocalThumbnailSeparately() || disableSelfView) ? 1 : 0);
+    const { height: thumbnailHeight, width: thumbnailWidth, margin } = styles.thumbnail;
+    const { height, width } = getFilmstripDimensions({
+        aspectRatio,
+        clientWidth,
+        clientHeight,
+        insets: safeAreaInsets,
+        localParticipantVisible
+    });
+
+    if (isNarrowAspectRatio) {
+        return width < (thumbnailWidth + (2 * margin)) * participantCount;
+    }
+
+    return height < (thumbnailHeight + (2 * margin)) * participantCount;
+}
+
+/**
+ * Whether the stage filmstrip is available or not.
+ *
+ * @param {any} _state - Used on web.
+ * @param {any} _count - Used on web.
+ * @returns {boolean}
+ */
+export function isStageFilmstripAvailable(_state: any, _count?: any) {
+    return false;
+}
+
+/**
+ * Whether the stage filmstrip is enabled.
+ *
+ * @param {any} _state - Used on web.
+ * @returns {boolean}
+ */
+export function isStageFilmstripEnabled(_state: any) {
+    return false;
+}
+
+/**
+ * Whether or not the top panel is enabled.
+ *
+ * @param {any} _state - Used on web.
+ * @returns {boolean}
+ */
+export function isTopPanelEnabled(_state: any) {
+    return false;
+
+}
+
+/**
+ * Calculates the width and height of the filmstrip based on the screen size and aspect ratio.
+ *
+ * @param {Object} options - The screen aspect ratio, width, height and safe are insets.
+ * @returns {Object} - The width and the height.
+ */
+export function getFilmstripDimensions({
+    aspectRatio,
+    clientWidth,
+    clientHeight,
+    insets = {},
+    localParticipantVisible = true
+}: {
+    aspectRatio: Symbol;
+    clientHeight: number;
+    clientWidth: number;
+    insets?: {
+        bottom?: number;
+        left?: number;
+        right?: number;
+        top?: number;
+    };
+    localParticipantVisible?: boolean;
+}) {
+    const { height, width, margin } = styles.thumbnail; // @ts-ignore
+    const conferenceBorder = conferenceStyles.conference.borderWidth || 0;
+    const { left = 0, right = 0, top = 0, bottom = 0 } = insets;
+
+    if (aspectRatio === ASPECT_RATIO_NARROW) {
+        return {
+            height,
+            width:
+                (shouldDisplayLocalThumbnailSeparately() && localParticipantVisible
+                    ? clientWidth - width - (margin * 2) : clientWidth)
+                    - left - right - (styles.filmstripNarrow.margin * 2) - (conferenceBorder * 2)
+
+        };
+    }
+
+    return {
+        height:
+            (shouldDisplayLocalThumbnailSeparately() && localParticipantVisible
+                ? clientHeight - height - (margin * 2) : clientHeight)
+                - top - bottom - (conferenceBorder * 2),
+        width
+    };
+}
+
+/**
+ * Returns true if the local thumbnail should be displayed separately and false otherwise.
+ *
+ * @returns {boolean} - True if the local thumbnail should be displayed separately and false otherwise.
+ */
+export function shouldDisplayLocalThumbnailSeparately() {
+    // XXX Our current design is to have the local participant separate from
+    // the remote participants. Unfortunately, Android's Video
+    // implementation cannot accommodate that because remote participants'
+    // videos appear on top of the local participant's video at times.
+    // That's because Android's Video utilizes EGL and EGL gives us only two
+    // practical layers in which we can place our participants' videos:
+    // layer #0 sits behind the window, creates a hole in the window, and
+    // there we render the LargeVideo; layer #1 is known as media overlay in
+    // EGL terms, renders on top of layer #0, and, consequently, is for the
+    // Filmstrip. With the separate LocalThumbnail, we should have left the
+    // remote participants' Thumbnails in layer #1 and utilized layer #2 for
+    // LocalThumbnail. Unfortunately, layer #2 is not practical (that's why
+    // I said we had two practical layers only) because it renders on top of
+    // everything which in our case means on top of participant-related
+    // indicators such as moderator, audio and video muted, etc. For now we
+    // do not have much of a choice but to continue rendering LocalThumbnail
+    // as any other remote Thumbnail on Android.
+    return Platform.OS !== 'android';
+}
+
+/**
+ * Not implemented on mobile.
+ *
+ * @param {any} _state - Used on web.
+ * @returns {undefined}
+ */
+export function getScreenshareFilmstripParticipantId(_state: any) {
+    return undefined;
+}
+