Merge pull request #21 from fga-eps-mds/15-tela_suaunbtv

US15 - Eu, como usuário, quero ter telas personalizadas a partir da tela de "Sua UnBTV", para visualizar conteúdos relacionados a mim.

src/app/app-routing.module.ts

@@ -27,6 +27,11 @@ import { CategoryTableComponent } from './pages/category-table/category-table.co
 import { VideoViewsComponent } from './pages/video-views/video-views.component';
 import { RecordComponent } from './pages/record/record.component';
 import { DashboardCategoryComponent } from './pages/dashboard-category/dashboard-category.component';
+import { ControleSuperAdminComponent } from './pages/controle-super-admin/controle-super-admin.component';
+import { RecommendationVideosComponent } from './pages/recommendation-videos/recommendation-videos.component';
+import { YourUnBTVComponent } from './pages/your-unbtv/your-unbtv.component';
+import { FavoriteVideosComponent } from './pages/favorite-videos/favorite-videos.component';
+import { WatchLaterVideosComponent } from './pages/watchlater-videos/watchlater-videos.component';
 import { NotificationsComponent } from './pages/notifications/notifications.component';
 
 import { WithTokenGuard } from './guard/with-token.guard';
@@ -128,6 +133,26 @@ const routes: Routes = [
     component: NotificationsComponent, 
     canActivate: [AuthGuard]
   },
+  {
+    path: 'recommendation',
+    component: RecommendationVideosComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'sua-unbtv',
+    component: YourUnBTVComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'favorites',
+    component: FavoriteVideosComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'watch-later',
+    component: WatchLaterVideosComponent,
+    canActivate: [AuthGuard],
+  }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -52,6 +52,11 @@ import { CategoryTableComponent } from './pages/category-table/category-table.co
 import { VideoViewsComponent } from './pages/video-views/video-views.component';
 import { DashboardCategoryComponent } from './pages/dashboard-category/dashboard-category.component';
 import { RecordComponent } from './pages/record/record.component';
+import { RecommendationVideosComponent } from './pages/recommendation-videos/recommendation-videos.component';
+import { YourUnBTVComponent } from './pages/your-unbtv/your-unbtv.component';
+import { FavoriteVideosComponent } from './pages/favorite-videos/favorite-videos.component';
+import { WatchLaterVideosComponent } from './pages/watchlater-videos/watchlater-videos.component';
+
 import { NotificationsComponent } from './pages/notifications/notifications.component';
 
 @NgModule({
@@ -83,7 +88,6 @@ import { NotificationsComponent } from './pages/notifications/notifications.comp
     NgChartsModule,
     CommonModule,
   ],
-
   declarations: [
     AppComponent,
     LoginComponent,
@@ -111,6 +115,10 @@ import { NotificationsComponent } from './pages/notifications/notifications.comp
     VideoViewsComponent,
     DashboardCategoryComponent,
     RecordComponent,
+    RecommendationVideosComponent,
+    YourUnBTVComponent,
+    FavoriteVideosComponent,
+    WatchLaterVideosComponent,
     NotificationsComponent,
   ],
 

src/app/components/background/background.component.html

@@ -27,23 +27,23 @@
           <div class="mx-2 text-blue-brand">|</div>
           <div *ngIf="getActualRoute() === '/catalog'">
             <li class="font-bold text-[#00A550]">
-              <a [routerLink]="['/catalog']">Catálogo</a>
+              <a [routerLink]="['/catalog']">Programas</a>
             </li>
           </div>
           <div *ngIf="getActualRoute() !== '/catalog'">
             <li class="text-blue-brand">
-              <a [routerLink]="['/catalog']">Catálogo</a>
+              <a [routerLink]="['/catalog']">Programas</a>
             </li>
           </div>
           <div class="mx-2 text-blue-brand">|</div>
-          <div *ngIf="getActualRoute() === '/grid-days'">
+          <div *ngIf="getActualRoute() === '/sua-unbtv'">
             <li class="font-bold text-[#00A550]">
-              <a [routerLink]="['/grid-days']">Programação</a>
+              <a [routerLink]="['/sua-unbtv']">Sua UnBTV</a>
             </li>
           </div>
-          <div *ngIf="getActualRoute() !== '/grid-days'">
+          <div *ngIf="getActualRoute() !== '/sua-unbtv'">
             <li class="text-blue-brand">
-              <a [routerLink]="['/grid-days']">Programação</a>
+              <a [routerLink]="['/sua-unbtv']">Sua UnBTV</a>
             </li>
           </div>
           <div class="mx-2 text-blue-brand">|</div>
@@ -143,4 +143,4 @@
       </a>
     </div>
   </footer>
-</div>
+</div>

src/app/components/background/background.component.ts

@@ -28,10 +28,6 @@ export class BackgroundComponent implements OnInit, OnDestroy {
         label: 'Perfil',
         routerLink: '/profile',
       },
-      {
-        label: 'Histórico de Vídeos',
-        routerLink: '/record',
-      },
       {
         label: `Notificações`,
         routerLink: '/notifications',

src/app/pages/catalog/catalog.component.html

@@ -1,19 +1,5 @@
 <div class="center flex flex-col justify-center content-start flex-wrap gap-y-8 w-full max-w-3xl">
   <div>
-    <input [(ngModel)]="filterTitle" (ngModelChange)="filterVideos()" placeholder="Pesquise um vídeo" class="CampoFiltro"/>
-    <div class="checkbox-container">
-      <label *ngIf="isAuthenticated"class="first-container">
-        <input type="checkbox" [(ngModel)]="filterWatchLater" (change)="onFilterWatchLaterChange()" class="custom-checkbox"/>
-        Assistir mais tarde
-      </label>
-
-      <label *ngIf="isAuthenticated">
-        <input type="checkbox" [(ngModel)]="filterFavorite" (change)="onFilterFavoriteVideosChange()" class="custom-checkbox"/> 
-        Listar Favoritos
-      </label>
-    </div>
-  </div>
-  <div *ngIf="filterTitle.length===0 && !filterFavorite && !filterWatchLater">
     <div class="flex flex-col gap-2">
       <h4 class="text-start font-bold text-[13px] text-blue-brand">Jornalismo</h4>
       <div class="w-full flex flex-wrap justify-between gap-y-6 md:gap-x-2">
@@ -207,7 +193,7 @@ <h4 class="text-start font-bold text-[13px] text-blue-brand">Variedades</h4>
       </div>
     </div>
   </div>
-  <div class="center flex justify-center content-start flex-wrap gap-2 w-full h-full max-w-3xl" *ngIf="filterTitle || filterFavorite || filterWatchLater">
+  <div class="center flex justify-center content-start flex-wrap gap-2 w-full h-full max-w-3xl" *ngIf="filterTitle">
     <div *ngFor="let video of filteredVideos" class="flex">
       <div>
         <div *ngFor="let image of video.images" [routerLink]="['/video', video.id]" class="cursor-pointer">

src/app/pages/catalog/catalog.component.spec.ts

@@ -110,139 +110,4 @@ describe('CatalogComponent', () => {
     expect(videoServiceMock.setVideosCatalog).toHaveBeenCalledWith(videos);
     expect(routerMock.navigate).toHaveBeenCalledWith(['/videos']);
   });
-
-  it('should populate favoriteVideos on getFavoriteVideos success', () => {
-    const favoriteVideos = [
-      { id: 1, video_id: 1, title: 'Favorite 1', channels: [{ id: 1, name: 'unbtv' }] },
-      { id: 2, video_id: 2, title: 'Favorite 2', channels: [{ id: 1, name: 'unbtv' }] }
-    ];
-
-    component.unbTvVideos = [
-      { id: 1, title: 'Favorite 1', channels: [{ id: 1, name: 'unbtv' }] },
-      { id: 2, title: 'Favorite 2', channels: [{ id: 1, name: 'unbtv' }] }
-    ];
-
-    videoServiceMock.getFavoriteVideos.and.returnValue(of({ videoList: favoriteVideos }));
-
-    component.getFavoriteVideos();
-
-    expect(component.favoriteVideos.length).toBe(2);
-    expect(component.favoriteVideos[0].id).toBe(1);
-    expect(component.favoriteVideos[1].id).toBe(2);
-  });
-
-  it('should log warning on getFavoriteVideos with unexpected structure', () => {
-    spyOn(console, 'warn');
-    videoServiceMock.getFavoriteVideos.and.returnValue(of({ incorrectKey: [] }));
-
-    component.getFavoriteVideos();
-
-    expect(console.warn).toHaveBeenCalledWith('A estrutura da resposta da API não está conforme o esperado:', { incorrectKey: [] });
-  });
-
-  it('should filter videos to favorite when checkbox is checked', () => {
-    const favoriteVideos = [
-      { id: 1, video_id: 1, title: 'Favorite 1', channels: [{ id: 1, name: 'unbtv' }] }
-    ];
-
-    component.unbTvVideos = [
-      { id: 1, title: 'Favorite 1', channels: [{ id: 1, name: 'unbtv' }] },
-      { id: 2, title: 'Not Favorite', channels: [{ id: 1, name: 'unbtv' }] }
-    ];
-
-    videoServiceMock.getFavoriteVideos.and.returnValue(of({ videoList: favoriteVideos }));
-
-    component.filterFavorite = true;
-    component.onFilterFavoriteVideosChange();
-
-    expect(component.filteredVideos.length).toBe(1);
-    expect(component.filteredVideos[0].title).toBe('Favorite 1');
-  });
-
-  it('should not filter videos to favorite when checkbox is unchecked', () => {
-    const favoriteVideos = [
-      { id: 1, video_id: 1, title: 'Favorite 1', channels: [{ id: 1, name: 'unbtv' }] }
-    ];
-
-    component.unbTvVideos = [
-      { id: 1, title: 'Favorite 1', channels: [{ id: 1, name: 'unbtv' }] },
-      { id: 2, title: 'Not Favorite', channels: [{ id: 1, name: 'unbtv' }] }
-    ];
-
-    videoServiceMock.getFavoriteVideos.and.returnValue(of({ videoList: favoriteVideos }));
-
-    component.filterFavorite = false;
-    component.onFilterFavoriteVideosChange();
-
-    expect(component.filteredVideos.length).toBe(2);
-  });
-
-  it('should populate watchLaterVideos on getWatchLaterVideos success', () => {
-    const watchLaterVideos = [
-      { id: 1, video_id: 1, title: 'Watch Later 1', channels: [{ id: 1, name: 'unbtv' }] },
-      { id: 2, video_id: 2, title: 'Watch Later 2', channels: [{ id: 1, name: 'unbtv' }] }
-    ];
-
-    component.unbTvVideos = [
-      { id: 1, title: 'Watch Later 1', channels: [{ id: 1, name: 'unbtv' }] },
-      { id: 2, title: 'Watch Later 2', channels: [{ id: 1, name: 'unbtv' }] }
-    ];
-
-    videoServiceMock.getWatchLaterVideos.and.returnValue(of({ videoList: watchLaterVideos }));
-
-    component.getWatchLaterVideos();
-
-    expect(component.watchLaterVideos.length).toBe(2);
-    expect(component.watchLaterVideos[0].id).toBe(1);
-    expect(component.watchLaterVideos[1].id).toBe(2);
-  });
-
-
-  it('should log warning on getWatchLaterVideos with unexpected structure', () => {
-    spyOn(console, 'warn');
-    videoServiceMock.getWatchLaterVideos.and.returnValue(of({ incorrectKey: [] }));
-
-    component.getWatchLaterVideos();
-
-    expect(console.warn).toHaveBeenCalledWith('A estrutura da resposta da API não está conforme o esperado:', { incorrectKey: [] });
-  });
-
-
-  it('should filter videos to watch later when checkbox is checked', () => {
-    const watchLaterVideos = [
-      { id: 1, video_id: 1, title: 'Watch Later 1', channels: [{ id: 1, name: 'unbtv' }] }
-    ];
-
-    component.unbTvVideos = [
-      { id: 1, title: 'Watch Later 1', channels: [{ id: 1, name: 'unbtv' }] },
-      { id: 2, title: 'Not Watch Later', channels: [{ id: 1, name: 'unbtv' }] }
-    ];
-
-    videoServiceMock.getWatchLaterVideos.and.returnValue(of({ videoList: watchLaterVideos }));
-
-    component.filterWatchLater = true;
-    component.onFilterWatchLaterChange();
-
-    expect(component.filteredVideos.length).toBe(1);
-    expect(component.filteredVideos[0].title).toBe('Watch Later 1');
-  });
-
-
-  it('should not filter videos to watch later when checkbox is unchecked', () => {
-    const watchLaterVideos = [
-      { id: 1, video_id: 1, title: 'Watch Later 1', channels: [{ id: 1, name: 'unbtv' }] }
-    ];
-
-    component.unbTvVideos = [
-      { id: 1, title: 'Watch Later 1', channels: [{ id: 1, name: 'unbtv' }] },
-      { id: 2, title: 'Not Watch Later', channels: [{ id: 1, name: 'unbtv' }] }
-    ];
-
-    videoServiceMock.getWatchLaterVideos.and.returnValue(of({ videoList: watchLaterVideos }));
-
-    component.filterWatchLater = false;
-    component.onFilterWatchLaterChange();
-
-    expect(component.filteredVideos.length).toBe(2);
-  });
 });

src/app/pages/catalog/catalog.component.ts

@@ -53,8 +53,6 @@ export class CatalogComponent implements OnInit {
     this.userService.getUser(this.userId).subscribe({
       next: (user) => {
         this.user = user;
-        this.getFavoriteVideos();
-        this.getWatchLaterVideos(); // Carregue os vídeos de "assistir mais tarde" após obter os detalhes do usuário
       },
       error: (err) => {
         console.error('Error fetching user details', err);
@@ -76,68 +74,6 @@ export class CatalogComponent implements OnInit {
     });
   }
 
-  getFavoriteVideos(): void {
-    if (this.isAuthenticated) {
-      this.videoService.getFavoriteVideos(this.userId).subscribe({
-        next: (data) => {
-
-          // Verifique se `videoList` existe e é um array
-          if (data && Array.isArray(data.videoList)) {
-            const favorite_videos_ids = data.videoList.map((item: any) => String(item.video_id)); // Converta IDs para string
-
-            this.favoriteVideos = this.unbTvVideos.filter(video => favorite_videos_ids.includes(String(video.id))); // Converta IDs para string
-          } else {
-            console.warn('A estrutura da resposta da API não está conforme o esperado:', data);
-          }
-
-          this.filterVideos(); // Atualize a filtragem após carregar os vídeos de "favoritos"
-        },
-        error: (error) => {
-          console.log('Erro ao buscar vídeos marcados como "favoritos"', error);
-        }
-      });
-    }
-  }
-
-  onFilterFavoriteVideosChange() {
-    if (this.filterFavorite) {
-      this.getFavoriteVideos();
-    } else {
-      this.filterVideos();
-    }
-  }
-
-  getWatchLaterVideos(): void {
-    if (this.isAuthenticated) {
-      this.videoService.getWatchLaterVideos(this.userId).subscribe({
-        next: (data) => {
-
-          // Verifique se `videoList` existe e é um array
-          if (data && Array.isArray(data.videoList)) {
-            const watchLaterVideoIds = data.videoList.map((item: any) => String(item.video_id)); // Converta IDs para string
-
-            this.watchLaterVideos = this.unbTvVideos.filter(video => watchLaterVideoIds.includes(String(video.id))); // Converta IDs para string
-          } else {
-            console.warn('A estrutura da resposta da API não está conforme o esperado:', data);
-          }
-
-          this.filterVideos(); // Atualize a filtragem após carregar os vídeos de "assistir mais tarde"
-        },
-        error: (error) => {
-          console.log('Erro ao buscar vídeos marcados como "assistir mais tarde"', error);
-        }
-      });
-    }
-  }
-
-  onFilterWatchLaterChange() {
-    if (this.filterWatchLater) {
-      this.getWatchLaterVideos();
-    } else {
-      this.filterVideos();
-    }
-  }
-
 
   filterVideosByChannel(videos: IVideo[]): void {
     videos.forEach((video) => {
@@ -150,14 +86,12 @@ export class CatalogComponent implements OnInit {
 
   filterVideos() {
     this.filteredVideos = this.unbTvVideos.filter(video => {
-      const isWatchLater = this.filterWatchLater ? this.watchLaterVideos.some(wlVideo => wlVideo.id == video.id) : true;
-      const isFavorite = this.filterFavorite? this.favoriteVideos.some(wlVideo => wlVideo.id == video.id) : true;
       const matchesTitle = this.filterTitle ? video.title?.toLowerCase().includes(this.filterTitle.toLowerCase()) : true;
       const matchesDescription = this.filterTitle ? video.description?.toLowerCase().includes(this.filterTitle.toLowerCase()) : true;
       const matchesKeywords = this.filterTitle ? video.keywords?.toLowerCase().includes(this.filterTitle.toLowerCase()) : true;
       const matchesCatalog = this.filterTitle ? video.catalog?.toLowerCase().includes(this.filterTitle.toLowerCase()) : true;
 
-      return isWatchLater && isFavorite && (matchesTitle || matchesDescription || matchesKeywords || matchesCatalog);
+      return (matchesTitle || matchesDescription || matchesKeywords || matchesCatalog);
     });
   }