fix(filmstrip) Excludes partially visible tiles from visible participants calculation

Author: jallamsetty1

react/features/filmstrip/components/native/Filmstrip.tsx

@@ -190,7 +190,7 @@ class Filmstrip extends PureComponent<IProps> {
      * @returns {void}
      */
     _onViewableItemsChanged({ viewableItems = [] }: { viewableItems: ViewToken[]; }) {
-        const { _disableSelfView } = this.props;
+        const { _aspectRatio, _clientWidth, _clientHeight, _disableSelfView } = this.props;
 
         if (!this._separateLocalThumbnail && !_disableSelfView && viewableItems[0]?.index === 0) {
             // Skip the local thumbnail.
@@ -205,6 +205,25 @@ class Filmstrip extends PureComponent<IProps> {
         let startIndex = Number(viewableItems[0].index);
         let endIndex = Number(viewableItems[viewableItems.length - 1].index);
 
+        // Exclude partially visible tiles
+        const isNarrowAspectRatio = _aspectRatio === ASPECT_RATIO_NARROW;
+        const { height: thumbnailHeight, width: thumbnailWidth, margin } = styles.thumbnail;
+        const { height, width } = this._getDimensions();
+
+        // Calculate item size and container size based on layout orientation
+        const itemSize = isNarrowAspectRatio
+            ? thumbnailWidth + (2 * margin)  // Horizontal layout
+            : thumbnailHeight + (2 * margin); // Vertical layout
+        const containerSize = isNarrowAspectRatio ? width : height;
+
+        // Ensure at least 1 if there are any visible items
+        const fullyVisibleCount = Math.max(1, Math.floor(containerSize / itemSize));
+        const currentVisibleCount = endIndex - startIndex + 1;
+
+        if (currentVisibleCount > fullyVisibleCount) {
+            endIndex = startIndex + fullyVisibleCount - 1;
+        }
+
         if (!this._separateLocalThumbnail && !_disableSelfView) {
             // We are off by one in the remote participants array.
             startIndex -= 1;

react/features/filmstrip/components/web/Filmstrip.tsx

@@ -878,6 +878,43 @@ class Filmstrip extends PureComponent <IProps, IState> {
         };
     }
 
+    /**
+     * Adjusts indices to exclude partially visible tiles from the list.
+     *
+     * @param {number} startIndex - The start index from react-window.
+     * @param {number} stopIndex - The stop index from react-window.
+     * @param {number} containerSize - The width or height of the filmstrip container.
+     * @param {number} itemSize - The width or height of each item including margin.
+     * @returns {Object}
+     */
+    _excludePartiallyVisibleTiles(
+            startIndex: number,
+            stopIndex: number,
+            containerSize: number,
+            itemSize: number
+    ) {
+        // Calculate how many items can fit fully in the container
+        // Ensure at least 1 if there are any visible items
+        const fullyVisibleCount = Math.max(1, Math.floor(containerSize / itemSize));
+
+        // Calculate how many items are currently in the visible range (inclusive)
+        const currentVisibleCount = stopIndex - startIndex + 1;
+
+        // If we have more items visible than can fit fully, we have a partially visible tile at the end
+        if (currentVisibleCount > fullyVisibleCount) {
+            // Reduce stopIndex to exclude the partially visible tile
+            return {
+                startIndex,
+                stopIndex: startIndex + fullyVisibleCount - 1
+            };
+        }
+
+        return {
+            startIndex,
+            stopIndex
+        };
+    }
+
     /**
      * Toggle the toolbar visibility when tabbing into it.
      *
@@ -944,8 +981,31 @@ class Filmstrip extends PureComponent <IProps, IState> {
      */
     _onListItemsRendered({ visibleStartIndex, visibleStopIndex }: {
         visibleStartIndex: number; visibleStopIndex: number; }) {
-        const { dispatch } = this.props;
-        const { startIndex, stopIndex } = this._calculateIndices(visibleStartIndex, visibleStopIndex);
+        const {
+            dispatch,
+            _currentLayout,
+            _filmstripWidth,
+            _filmstripHeight,
+            _thumbnailWidth,
+            _thumbnailHeight,
+            _isVerticalFilmstrip
+        } = this.props;
+
+        // Exclude partially visible tiles
+        const isHorizontal = _currentLayout === LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW;
+        const itemSize = isHorizontal
+            ? _thumbnailWidth + TILE_HORIZONTAL_MARGIN
+            : _thumbnailHeight + TILE_VERTICAL_MARGIN;
+        const containerSize = isHorizontal ? _filmstripWidth : _filmstripHeight;
+
+        const { startIndex: adjustedStartIndex, stopIndex: adjustedStopIndex } = this._excludePartiallyVisibleTiles(
+            visibleStartIndex,
+            visibleStopIndex,
+            containerSize,
+            itemSize
+        );
+
+        const { startIndex, stopIndex } = this._calculateIndices(adjustedStartIndex, adjustedStopIndex);
 
         dispatch(setVisibleRemoteParticipants(startIndex, stopIndex));
     }