Fix again

demos/browser/app/meetingV2/meetingV2.ts

@@ -1907,7 +1907,8 @@ export class DemoMeetingApp
     this.videoTileCollection = new VideoTileCollection(this.audioVideo,
         this.meetingLogger,
         new RemoteVideoManager(this.meetingLogger, this.usePriorityBasedDownlinkPolicy  ? this.priorityBasedDownlinkPolicy : this.allHighestDownlinkPolicy),
-        paginationPageSize)
+        paginationPageSize,
+        this.meetingSession.configuration.credentials.attendeeId)
     this.audioVideo.addObserver(this.videoTileCollection);
 
     this.contentShare = new ContentShareManager(this.meetingLogger, this.audioVideo, this.usingStereoMusicAudioProfile);

demos/browser/app/meetingV2/video/PaginationManager.ts

@@ -5,7 +5,7 @@ export default class PaginationManager<Type> {
   private currentPageStart: number = 0;
 
   private all = new Array<Type>();
-  
+
   constructor(private pageSize: number) {}
 
   currentPage(): Array<Type> {
@@ -21,7 +21,7 @@ export default class PaginationManager<Type> {
 
   remove(toRemove: Type) {
     if (this.all.includes(toRemove)) {
-        this.all.splice(this.all.indexOf(toRemove));
+      this.all.splice(this.all.indexOf(toRemove), 1);
     }
   }
 
@@ -30,15 +30,15 @@ export default class PaginationManager<Type> {
     if (index === -1) {
       return;
     }
-    this.all.splice(index,1);
+    this.all.splice(index, 1);
   }
 
   hasNextPage(): boolean {
     return this.currentPageStart + this.pageSize < this.all.length;
   }
 
   nextPage(): void {
-    if (!this.hasNextPage) {
+    if (!this.hasNextPage()) {
       return;
     }
     this.currentPageStart += this.pageSize;
@@ -49,6 +49,8 @@ export default class PaginationManager<Type> {
   }
 
   previousPage(): void {
-    this.currentPageStart -= this.pageSize;
+    if (this.hasPreviousPage()) {
+      this.currentPageStart -= this.pageSize;
+    }
   }
-}
+}

demos/browser/app/meetingV2/video/VideoTileCollection.ts

@@ -130,7 +130,8 @@ export default class VideoTileCollection implements AudioVideoObserver {
   constructor(private videoTileController: VideoTileControllerFacade,
     private logger: Logger,
     private remoteVideoManager: RemoteVideoManager,
-    private pageSize: number) {
+    private pageSize: number,
+    private localAttendeeId: string) {
     this.setupVideoTiles();
 
     if (!this.remoteVideoManager.supportsRemoteVideoPreferences()) {
@@ -162,7 +163,7 @@ export default class VideoTileCollection implements AudioVideoObserver {
   }
 
   videoTileDidUpdate(tileState: VideoTileState): void {
-    console.log(`video tile updated: ${JSON.stringify(tileState, null, '  ')}`);
+    this.logger.info(`video tile updated: ${JSON.stringify(tileState, null, '  ')}`);
     if (!tileState.boundAttendeeId) {
       return;
     }
@@ -209,22 +210,20 @@ export default class VideoTileCollection implements AudioVideoObserver {
     }
     demoVideoTile.attendeeId = tileState.boundAttendeeId;
 
+    // We need to add local video or content to pagination from tile updates
+    const shouldUpdatePagination = tileState.localTile || (tileState.isContent && tileState.boundAttendeeId.startsWith(this.localAttendeeId));
     if (tileState.boundVideoStream) {
-        demoVideoTile.show(tileState.isContent);
-
-        if (tileState.localTile) {
+        if (shouldUpdatePagination) {
             this.pagination.add(tileState.boundAttendeeId);
-            this.updatePaginatedVisibleTiles();
         }
     } else {
         // Hide non-active tiles that aren't just paused
         demoVideoTile.hide();
-
-        if (tileState.localTile) {
+        if (shouldUpdatePagination) {
             this.pagination.remove(tileState.boundAttendeeId);
-            this.updatePaginatedVisibleTiles();
         }
     }
+    this.updatePaginatedVisibleTiles();
     this.updateLayout();
     this.layoutFeaturedTile();
   }
@@ -374,6 +373,9 @@ export default class VideoTileCollection implements AudioVideoObserver {
     for (const tile of this.videoTileController.getAllVideoTiles()) {
       const state = tile.state();
       if (state.isContent) {
+        if (state.boundAttendeeId.startsWith(this.localAttendeeId) && !this.pagination.currentPage().includes(state.boundAttendeeId)) {
+            return null;
+         }
         return state.tileId;
       }
     }
@@ -452,10 +454,10 @@ export default class VideoTileCollection implements AudioVideoObserver {
     // We need to manually control visibility of paused tiles anyways so we just do
     // everything here, even though the preference manager adding/removing will
     // result in tile callbacks as well.
-    for (let [index, videoTile] of this.tileIndexToDemoVideoTile.entries()) {
+    for (let videoTile of this.tileIndexToDemoVideoTile.values()) {
         if (attendeesToShow.includes(videoTile.attendeeId)) {
             videoTile.show(false);
-        } else if (this.tileIndexToTileId[index] !== this.findContentTileId()) { // Always show content
+        } else {
             videoTile.hide();
         }
     }