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,31 @@ 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();
+
+        if (isNarrowAspectRatio) {
+            // Horizontal layout
+            const itemWidth = thumbnailWidth + (2 * margin);
+            const fullyVisibleCount = Math.floor(width / itemWidth);
+            const currentVisibleCount = endIndex - startIndex + 1;
+
+            if (currentVisibleCount > fullyVisibleCount) {
+                endIndex = startIndex + fullyVisibleCount - 1;
+            }
+        } else {
+            // Vertical layout
+            const itemHeight = thumbnailHeight + (2 * margin);
+            const fullyVisibleCount = Math.floor(height / itemHeight);
+            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,42 @@ 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
+        const fullyVisibleCount = 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 +980,41 @@ 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;
+
+        let adjustedStartIndex = visibleStartIndex;
+        let adjustedStopIndex = visibleStopIndex;
+
+        // Exclude partially visible tiles
+        if (_currentLayout === LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW) {
+            const itemSize = _thumbnailWidth + TILE_HORIZONTAL_MARGIN;
+
+            ({ startIndex: adjustedStartIndex, stopIndex: adjustedStopIndex } = this._excludePartiallyVisibleTiles(
+                visibleStartIndex,
+                visibleStopIndex,
+                _filmstripWidth,
+                itemSize
+            ));
+        } else if (_isVerticalFilmstrip) {
+            const itemSize = _thumbnailHeight + TILE_VERTICAL_MARGIN;
+
+            ({ startIndex: adjustedStartIndex, stopIndex: adjustedStopIndex } = this._excludePartiallyVisibleTiles(
+                visibleStartIndex,
+                visibleStopIndex,
+                _filmstripHeight,
+                itemSize
+            ));
+        }
+
+        const { startIndex, stopIndex } = this._calculateIndices(adjustedStartIndex, adjustedStopIndex);
 
         dispatch(setVisibleRemoteParticipants(startIndex, stopIndex));
     }