fix refresh page bug

frontend/src/app/components/home/browse/browse.component.html

@@ -18,6 +18,7 @@
     (playMovie)="playVideo($event)"
     (movieIsUploadedChange)="onMovieIsUploadedChange($event)"
     (moviesChange)="onMoviesChange($event)"
+    (refreshChange)="onRefreshPage($event)"
     (favoriteMovieChange)="onFavoriteMovieChange($event)"
   ></app-hero-banner>
   <!-- Spacer -->

frontend/src/app/components/home/browse/browse.component.ts

@@ -70,6 +70,13 @@ export class BrowseComponent implements OnInit {
     this.userService.updateLikedMovies(body);
   }
 
+  onRefreshPage(updatedMovies: any[]) {
+    this.currentMovie = [];
+    setTimeout(() => {
+      this.currentMovie = updatedMovies;
+    }, 1);
+  }
+
   onMoviesChange(updatedMovies: any[]) {
     if (this.checkScreenWidth()) {
       this.loadRandomMovie();

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html

@@ -75,7 +75,7 @@
       </div>
       <p *ngIf="!isAnyResolutionUploaded()">
         (The video is being converted)
-        <a (click)="backToCategory(currentMovie)">Refresh</a>
+        <a (click)="refreshPage(currentMovie)">Refresh</a>
       </p>
     </div>
   </div>

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts

@@ -29,6 +29,7 @@ export class HeroBannerComponent implements OnChanges {
   @Output() movieIsUploadedChange = new EventEmitter<{
     [resolution: string]: boolean;
   }>();
+  @Output() refreshChange = new EventEmitter<any[]>();
   @Output() moviesChange = new EventEmitter<any[]>();
   @Output() favoriteMovieChange = new EventEmitter<any[]>();
 
@@ -79,6 +80,10 @@ export class HeroBannerComponent implements OnChanges {
     );
   }
 
+  refreshPage(newMovies: any[]) {
+    this.refreshChange.emit(newMovies);
+  }
+
   backToCategory(newMovies: any[]) {
     this.moviesChange.emit(newMovies);
   }