ameloriation du style de la partie user

src/app/admin/utils/components/navbar-admin/navbar-admin.component.html

@@ -6,24 +6,29 @@
         <span class="navbar-toggler-icon"></span>
     </button>
 
-    <!-- [UserList] [Mes AdList] [Historique] -->
+
+    <!-- [userList] [adList] -->
     <div class="collapse navbar-collapse">
         <ul class="navbar-nav">
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/admin/userList"> Liste des utillisateurs </a>
+                <a *ngIf="(url !== routes[0]) && (url !== routes[1])" [routerLink]="routes[1]" class="nav-link">Liste des utillisateurs</a>
+                <a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Liste des utillisateurs</a>
             </li>
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/admin/adList"> Liste des pubs </a>
+                <a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Liste des pubs</a>
+                <a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Liste des pubs</a>
             </li>
         </ul>
     </div>
 
+
     <!-- Mon profil -->
     <img [src]=urlImage
          onerror="this.onerror=null; this.src='assets/profil.png'"
-         routerLink="/admin/myProfil"
+         [routerLink]="routes[3]"
          alt="">
 
+
     <!-- Deconnexion -->
     <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
         Deconnexion

src/app/admin/utils/components/navbar-admin/navbar-admin.component.scss

@@ -1,6 +1,6 @@
 .navbar {
   background-color: black;
-  height: 50px;
+  height: 60px;
   font-size: medium;
   color: white;
 }
@@ -23,16 +23,22 @@
 }
 
 
-// Recherche, Mes Playlists, Historique
+.monLi {
+  margin: 0px 10px 0px 10px;
+}
+
+
 .nav-link {
   color: white;
 }
 .nav-link:hover {
   color: grey;
 }
+.myActiveLink {
+  text-decoration: underline;
+}
 
 
-// Bonton deconnexion
 .btnDeconnexion {
   font-size: medium;
   margin: 0px 10px 0px 10px
@@ -42,11 +48,6 @@
 }
 
 
-.monLi {
-  margin: 0px 10px 0px 10px;
-}
-
-
 img {
   border: solid 2px white;
   border-radius: 50px;

src/app/admin/utils/components/navbar-admin/navbar-admin.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {Router} from "@angular/router";
 
 
 
@@ -9,9 +10,18 @@ import { Component } from '@angular/core';
 })
 export class NavbarAdminComponent
 {
+    routes: string[] = [
+        "/admin",               // 0
+        "/admin/userList",      // 1
+        "/admin/adList",        // 2
+        "/admin/myProfil",      // 3
+    ];
+
+    url = this.router.url;
+
     urlImage: string = "https://www.reference-gaming.com/assets/media/product/41195/figurine-pop-duck-tales-n-309-loulou.jpg?format=product-cover-large&k=1519639530" ;
 
-    constructor() { }
+    constructor(private router: Router) { }
 
     onDeconnexion(): void {}
 }

src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html

@@ -6,27 +6,33 @@
         <span class="navbar-toggler-icon"></span>
     </button>
 
-    <!-- [adList] [viewsAd]-->
+
+    <!-- [adList] [adsPopularity] [subjectsPopularity] -->
     <div class="collapse navbar-collapse">
         <ul class="navbar-nav">
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/advertiser/adList"> Gestion des annonces </a>
+                <a *ngIf="(url !== routes[0]) && (url !== routes[1])" [routerLink]="routes[1]" class="nav-link">Gestion des annonces</a>
+                <a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Gestion des annonces</a>
             </li>
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/advertiser/adsPopularity"> Popularité des annonces </a>
+                <a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Popularité des annonces</a>
+                <a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Popularité des annonces</a>
             </li>
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/advertiser/subjectsPopularity"> Popularité des domaines </a>
+                <a *ngIf="url !== routes[3]" [routerLink]="routes[3]" class="nav-link">Popularité des domaines</a>
+                <a *ngIf="url === routes[3]" [routerLink]="routes[3]" class="nav-link myActiveLink">Popularité des domaines</a>
             </li>
         </ul>
     </div>
 
+
     <!-- Mon profil -->
     <img [src]=urlImage
          onerror="this.onerror=null; this.src='assets/profil.png'"
-         routerLink="/advertiser/myProfil"
+         [routerLink]="routes[4]"
          alt="">
 
+
     <!-- Deconnexion -->
     <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
         Deconnexion

src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss

@@ -1,6 +1,6 @@
 .navbar {
   background-color: black;
-  height: 50px;
+  height: 60px;
   font-size: medium;
   color: white;
 }
@@ -28,13 +28,24 @@
 }
 
 
-// Recherche, Mes Playlists, Historique
 .nav-link {
   color: white;
 }
 .nav-link:hover {
   color: grey;
 }
+.myActiveLink {
+  text-decoration: underline;
+}
+
+
+.btnDeconnexion {
+  font-size: medium;
+  margin: 0px 10px 0px 10px
+}
+.btnDeconnexion:hover {
+  color: grey;
+}
 
 
 img {
@@ -49,16 +60,6 @@ img:hover {
 }
 
 
-// Bonton deconnexion
-.btnDeconnexion {
-  font-size: medium;
-  margin: 0px 10px 0px 10px
-}
-.btnDeconnexion:hover {
-  color: grey;
-}
-
-
 // --------------------------------------------------------------------
 
 

src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import {Router} from "@angular/router";
 
 
 
@@ -9,9 +10,19 @@ import { Component } from '@angular/core';
 })
 export class NavbarAdvertiserComponent
 {
+    routes: string[] = [
+        "/advertiser",                      // 0
+        "/advertiser/adList",               // 1
+        "/advertiser/adsPopularity",        // 2
+        "/advertiser/subjectsPopularity",   // 3
+        "/advertiser/myProfil"              // 4
+    ];
+
+    url = this.router.url;
+
     urlImage: string = "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg" ;
 
-    constructor() { }
+    constructor(private router: Router) { }
 
     onDeconnexion(): void {}
 }

src/app/app.module.ts

@@ -72,6 +72,7 @@ import { PageWatchingVideoComponent } from './user/watching/page-watching-video/
 import {MatDatepickerModule} from "@angular/material/datepicker";
 import { PagesPopularityComponent } from './advertiser/pages-popularity/pages-popularity.component';
 import { ChartsModule } from 'ng2-charts';
+import { PopupDeletePlaylistComponent } from './user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component';
 
 
 @NgModule({
@@ -122,6 +123,7 @@ import { ChartsModule } from 'ng2-charts';
         InputInterestsAdminComponent,
         PageWatchingVideoComponent,
         PagesPopularityComponent,
+        PopupDeletePlaylistComponent,
     ],
     imports: [
         BrowserModule,

src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss

@@ -1,6 +1,6 @@
 .navbar {
   background-color: black;
-  height: 50px;
+  height: 60px;
   font-size: medium;
   color: white;
 }

src/app/user/history/page-history-user/page-history-user.component.scss

@@ -26,6 +26,7 @@ input {
   position: relative;
   width: 20vw;
   height: 15vh;
+  cursor: pointer;
 }
 
 .imgPlay {

src/app/user/myPlaylists/playlist-list/playlist-list.component.html

@@ -9,23 +9,35 @@
         </div>
 
 
+
         <!-- Liste des playlist -->
         <div class="row" style="margin: 0px">
             <div class="playlistListContainer">
                 <div *ngFor="let playlist of tabPlaylist" class="playlistContainer">
-                    <button class="btnPlaylist" (click)="eventEmitter.emit(playlist)">
+
+                    <div [class]="getClassOfPlaylistContainer(playlist)" (click)="eventEmitter.emit(playlist); playlistFocusedOn = playlist">
+                        <div class="col-2"></div>
+                        <div class="col-8" style="text-align: center">
                             <span class="playlistName"> {{playlist.name}} </span><br>
                             <span class="playListCount" *ngIf="playlist.videoIds.length <= 1"> {{playlist.videoIds.length}} vidéo </span>
                             <span class="playListCount" *ngIf="playlist.videoIds.length > 1"> {{playlist.videoIds.length}} vidéos </span>
+                        </div>
+                        <div class="col-2" style="text-align: right">
+                            <button mat-icon-button (click)="onDeletePlaylist(playlist)">
+                                <mat-icon>delete</mat-icon>
                             </button>
                         </div>
                     </div>
+
                 </div>
+            </div>
+        </div>
+
 
 
         <!-- Bouton creer playlist-->
         <div class="row btnCreerPlaylistContainer" >
-            <button mat-button class="btnCreerPlaylist" (click)="onCreatePlaylist()"> Creer playlist </button>
+            <button mat-button class="btnCreerPlaylist" (click)="onCreatePlaylist()"> Créer une playlist </button>
         </div>
 
     </div>

src/app/user/myPlaylists/playlist-list/playlist-list.component.scss

@@ -35,23 +35,36 @@
   height: 60vh;
   overflow-y: scroll;
   padding: 0px;
+  overflow-x: hidden;
 }
 
 .playlistContainer {
   max-width: 100%;
   padding: 0px;
+  overflow-x: hidden;
 }
 
+
 .btnPlaylist {
   background-color: white;
   padding: 20px;
   border-bottom: solid 1px black;
-  width: 100%;
+  //width: 100%;
+  width: 35vw;
+  overflow-x: hidden;
 }
 .btnPlaylist:hover {
   background-color: #f0f0f0;
 }
 
+.btnPlaylistFocus {
+  background-color: #e6e6e6;
+}
+.btnPlaylistFocus:hover {
+  background-color: #e6e6e6;
+}
+
+
 .playListCount {
   color: gray;
   font-style: italic;

src/app/user/myPlaylists/playlist-list/playlist-list.component.ts

@@ -1,11 +1,11 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {ThemeService} from "../../../utils/services/theme/theme.service";
 import {PlaylistDB} from "../../../utils/interfaces/playlist";
-import {MessageService} from "../../../utils/services/message/message.service";
 import {MatDialog} from "@angular/material/dialog";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {PopupCreatePlaylistComponent} from "../popup-create-playlist/popup-create-playlist.component";
 import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
+import {PopupDeletePlaylistComponent} from "../popup-delete-playlist/popup-delete-playlist.component";
 
 
 
@@ -20,6 +20,7 @@ export class PlaylistListComponent implements OnInit
     @Output() eventEmitter = new EventEmitter<PlaylistDB>();   // pour envoyer au parent la playlist selectionner
     search: string = "" ;                                      // contenu de la barre de recherche
     tabPlaylist: PlaylistDB[] = [];                            // playlist affichées
+    playlistFocusedOn: PlaylistDB;
 
 
     constructor( public themeService: ThemeService,
@@ -30,15 +31,14 @@ export class PlaylistListComponent implements OnInit
 
     ngOnInit(): void
     {
-        //this.allPlaylists = this.fictitiousVideosService.getRandomTabPlaylistDB(10, 10);
         this.allPlaylists = this.fictitiousVideosService.getNoRandomTabPlaylistDB(10);
         this.tabPlaylist = [].concat(this.allPlaylists);
     }
 
 
+    // s'execute lorsqu'on écrit sur la barre de recherche
     whileSearch()
     {
-        console.log("whileSearch");
         this.tabPlaylist = [];
         for(let playlist of this.allPlaylists)
         {
@@ -47,6 +47,7 @@ export class PlaylistListComponent implements OnInit
     }
 
 
+    // click sur créer playlist
     onCreatePlaylist(): void
     {
         const config = { data: this.tabPlaylist };
@@ -55,16 +56,52 @@ export class PlaylistListComponent implements OnInit
             .afterClosed()
             .subscribe(playlist => {
 
-                const config = { duration: 1000, panelClass: "custom-class" };
+                const config = { duration: 1500, panelClass: "custom-class" };
                 if((playlist === null) || (playlist === undefined)) {
                     this.snackBar.open("Opération annulée", "", config);
                 }
                 else {
                     this.allPlaylists.push(playlist);
                     this.tabPlaylist.push(playlist);
-                    this.snackBar.open("La playlist a bien été créée  ✔", "", config);
+                    this.snackBar.open(`La playlist '${playlist.name}' a bien été créée  ✔`, "", config);
                 }
             });
     }
 
+
+    // click sur supprimer playlist
+    onDeletePlaylist(playlist: PlaylistDB): void
+    {
+        const config = {data: playlist};
+        this.dialog
+            .open(PopupDeletePlaylistComponent, config)
+            .afterClosed()
+            .subscribe(retour => {
+
+                const config = { duration: 1500, panelClass: "custom-class" };
+                if((retour === null) || (retour === undefined)) {
+                    this.snackBar.open("Opération annulée", "", config);
+                }
+                else {
+                    let index = this.allPlaylists.indexOf(playlist);
+                    if(index >= 0) this.allPlaylists.splice(index, 1);
+
+                    index = this.tabPlaylist.indexOf(playlist);
+                    if(index >= 0) this.tabPlaylist.splice(index, 1);
+
+                    this.eventEmitter.emit(null);
+                    this.playlistFocusedOn = null;
+                    this.snackBar.open(`La playlist '${playlist.name}' a bien été suprimée  ✔`, "", config);
+                }
+            });
+    }
+
+
+    // retourne la class CSS de conteneur de playlist
+    getClassOfPlaylistContainer(playlist: PlaylistDB): string
+    {
+        if(playlist === this.playlistFocusedOn) return "row btnPlaylist btnPlaylistFocus" ;
+        else return "row btnPlaylist" ;
+    }
+
 }

src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.html

@@ -0,0 +1,8 @@
+<mat-dialog-content class="mat-typography">
+    Êtes-vous sûr de vouloir supprimer <i>{{playlist.name}}</i> ?
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button (click)="dialogRef.close()">Annuler</button>
+    <button mat-button (click)="onValidate()" cdkFocusInitial>Valider</button>
+</mat-dialog-actions>

src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopupDeletePlaylistComponent } from './popup-delete-playlist.component';
+
+describe('PopupDeletePlaylistComponent', () => {
+  let component: PopupDeletePlaylistComponent;
+  let fixture: ComponentFixture<PopupDeletePlaylistComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PopupDeletePlaylistComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopupDeletePlaylistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.ts

@@ -0,0 +1,28 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {MessageService} from "../../../utils/services/message/message.service";
+
+@Component({
+  selector: 'app-popup-delete-playlist',
+  templateUrl: './popup-delete-playlist.component.html',
+  styleUrls: ['./popup-delete-playlist.component.scss']
+})
+export class PopupDeletePlaylistComponent implements OnInit
+{
+    playlist;
+
+    constructor( public dialogRef: MatDialogRef<PopupDeletePlaylistComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data,
+                 private messageService: MessageService ) { }
+
+    ngOnInit(): void
+    {
+        this.playlist = this.data;
+    }
+
+    onValidate(): void
+    {
+        this.dialogRef.close(true);
+    }
+
+}

src/app/user/myPlaylists/video-list/video-list.component.html

@@ -37,26 +37,24 @@
                         <mat-grid-list cols="12" rowHeight="15vh">
 
                             <!-- btnAdd -->
-                            <mat-grid-tile [colspan]="1" [rowspan]="1">
+                            <mat-grid-tile [colspan]="2" [rowspan]="1">
                                 <button mat-icon-button (click)="onAdd(video)">
                                     <mat-icon> add_circle </mat-icon>
                                 </button>
                             </mat-grid-tile>
 
                             <!-- imgVideo -->
-                            <mat-grid-tile [colspan]="10" [rowspan]="1">
+                            <mat-grid-tile [colspan]="8" [rowspan]="1">
-                                <div class="col-8">
                                     <div style="margin: auto; width: 20vw; height: 15vh;">
                                         <div class="imgsContainer" (click)="onVideo(video)">
                                             <img class="imgPlay" src="/assets/play.png">
                                             <img class="imgVideo" [src]="video.imageUrl">
                                         </div>
                                     </div>
-                                </div>
                             </mat-grid-tile>
 
                             <!-- btnDelete -->
-                            <mat-grid-tile [colspan]="1" [rowspan]="1">
+                            <mat-grid-tile [colspan]="2" [rowspan]="1">
                                 <button mat-icon-button (click)="onDelete(video, i)">
                                     <mat-icon>delete</mat-icon>
                                 </button>

src/app/user/myPlaylists/video-list/video-list.component.scss

@@ -45,6 +45,7 @@
   position: relative;
   width: 20vw;
   height: 15vh;
+  cursor: pointer;
 }
 
 .imgPlay {

src/app/user/search/video-grid/video-grid.component.html

@@ -2,7 +2,7 @@
 
 
 <!-- Grille -->
-<div style="height: 93%">
+<div style="height: 93%; background-color: white; padding-top: 7px;">
     <mat-grid-list cols="3" rowHeight="33%">
         <mat-grid-tile colspan="1" rowspan="1" *ngFor="let k of [0,1,2,3,4,5,6,7,8]">
             <div class="myCell" *ngIf="indexPage+k < tabVideo.length" [title]="tabVideo[indexPage+k].title">
@@ -19,13 +19,13 @@
                 <mat-grid-list cols="12" style="margin: 0px 0px 0px 0px; font-size: small">
 
                     <!-- logo -->
-                    <mat-grid-tile [colspan]="2" [rowspan]="2" class="mat-grid-tile-info-video">
+                    <mat-grid-tile [colspan]="2" [rowspan]="2" class="mat-grid-tile-info-video" (click)="onVideo(tabVideo[indexPage+k])">
                         <img *ngIf="tabVideo[indexPage+k].source==='youtube'" src="/assets/logo_plateforms/youtube.png" alt="ytb" width="20px" height="15px">
                         <img *ngIf="tabVideo[indexPage+k].source==='dailymotion'" src="/assets/logo_plateforms/dailymotion.png" alt="dlm" width="20px" height="20px">
                     </mat-grid-tile>
 
                     <!-- title + views + publishedAt -->
-                    <mat-grid-tile [colspan]="8" [rowspan]="2" class="mat-grid-tile-info-video">
+                    <mat-grid-tile [colspan]="8" [rowspan]="2" class="mat-grid-tile-info-video" (click)="onVideo(tabVideo[indexPage+k])">
                         <div style="position: absolute; left: 1px; text-align: left">
                             {{tronquage(tabVideo[indexPage+k].title)}}
                             <br>
@@ -54,7 +54,7 @@
 
 
 <!-- Paginator -->
-<div class="btnContainer">
+<div class="paginatorContainer">
 
     <!-- btn précédent -->
     <button mat-button class="btnPaginator" [disabled]="indexPage<=0" (click)="indexPage=indexPage-9"> < Précédent </button> &nbsp;

src/app/user/search/video-grid/video-grid.component.scss

@@ -7,12 +7,20 @@ mat-grid-list {
 mat-grid-tile {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
-  border: solid 1px black;
+  //border: solid 1px black;
 }
 
 .myCell {
-  margin: 0px 0px 0px 0px;
+  margin: 7px 0px 0px 0px;
-  padding: 7px 0px 0px 0px;
+  padding: 0px 0px 0px 0px;
+  background-color: #f0f0f0;
+  border: solid 1px black;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  cursor: pointer;
+}
+.myCell:hover {
+  background-color: #d2d2d2;
 }
 
 
@@ -20,22 +28,24 @@ mat-grid-tile {
 
 
 .imgsContainer {
-  width: 20vw;
+  //width: 20vw;
+  width: 18vw;
   height: 15vh;
 }
 
 .imgPlay {
   position: absolute;
-  margin-left: 9vw;
+  margin-left: 8vw;
-  width: 3vw;
+  width: 2.5vw;
   margin-top: 5vh;
-  height: 6vh;
+  height: 5vh;
   padding: 0px 0px 0px 0px;
 }
 
 .imgVideo {
-  border: solid 1px black;
+  //border: solid 1px black;
-  width: 20vw;
+  //width: 20vw;
+  width: 18vw;
   height: 15vh;
   padding: 0px 0px 0px 0px;
 }
@@ -57,10 +67,11 @@ mat-icon {
 // ---------------------------------------------------------------------------------------------
 
 
-.btnContainer {
+.paginatorContainer {
   margin: 0px 0px 0px 0px;
-  padding: 0px 0px 0px 0px;
+  padding: 5px 0px 0px 0px;
   text-align: center;
+  background-color: white;
 }
 
 .btnPaginator {

src/app/user/utils/components/navbar-user/navbar-user.component.html

@@ -6,27 +6,33 @@
         <span class="navbar-toggler-icon"></span>
     </button>
 
+
     <!-- [Recherche] [Mes Playlists] [Historique] -->
     <div class="collapse navbar-collapse">
         <ul class="navbar-nav">
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/user/search"> Rechercher </a>
+                <a *ngIf="(url !== routes[0]) && (url !== routes[1])" [routerLink]="routes[1]" class="nav-link">Rechercher</a>
+                <a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Rechercher</a>
             </li>
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/user/myPlaylists"> Mes playlists </a>
+                <a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Mes playlists</a>
+                <a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Mes playlists</a>
             </li>
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/user/history"> Historique </a>
+                <a *ngIf="url !== routes[3]" [routerLink]="routes[3]" class="nav-link">Historique</a>
+                <a *ngIf="url === routes[3]" [routerLink]="routes[3]" class="nav-link myActiveLink">Historique</a>
             </li>
         </ul>
     </div>
 
+
     <!-- Mon profil -->
     <img [src]=urlImage
          onerror="this.onerror=null; this.src='assets/profil.png'"
-         routerLink="/user/myProfil"
+         [routerLink]="routes[4]"
          alt="">
 
+
     <!-- Deconnexion -->
     <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
         Deconnexion

src/app/user/utils/components/navbar-user/navbar-user.component.scss

@@ -1,6 +1,6 @@
 .navbar {
   background-color: black;
-  height: 50px;
+  height: 60px;
   font-size: medium;
   color: white;
 }
@@ -23,16 +23,22 @@
 }
 
 
-// Recherche, Mes Playlists, Historique
+.monLi {
+  margin: 0px 10px 0px 10px;
+}
+
+
 .nav-link {
   color: white;
 }
 .nav-link:hover {
   color: grey;
 }
+.myActiveLink {
+  text-decoration: underline;
+}
 
 
-// Bonton deconnexion
 .btnDeconnexion {
   font-size: medium;
   margin: 0px 10px 0px 10px
@@ -42,11 +48,6 @@
 }
 
 
-.monLi {
-  margin: 0px 10px 0px 10px;
-}
-
-
 img {
   border: solid 2px white;
   border-radius: 50px;

src/app/user/utils/components/navbar-user/navbar-user.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {Router} from "@angular/router";
 
 
 
@@ -9,9 +10,19 @@ import {Component} from '@angular/core';
 })
 export class NavbarUserComponent
 {
+    routes: string[] = [
+        "/user",                // 0
+        "/user/search",         // 1
+        "/user/myPlaylists",    // 2
+        "/user/history",        // 3
+        "/user/myProfil"        // 4
+    ];
+
+    url = this.router.url;
+
     urlImage: string = "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg" ;
 
-    constructor() { }
+    constructor(private router: Router) { }
 
     onDeconnexion(): void {}
 }

src/app/user/watching/page-watching-video/page-watching-video.component.html

@@ -202,13 +202,20 @@
         <!-- Liste des videos -->
         <div class="listVideoContainer">
             <div *ngFor="let video0 of videosInPlaylist; let i = index;">
-                <div class="videoCell">
+                <div [class]="getClassOfVideoCell(video0)" (click)="this.video = video0">
-                    <div class="imgsContainer" (click)="this.video = video0">
+                    <div class="imgsContainer">
                         <img class="imgPlay" src="/assets/play.png">
                         <img class="imgVideo" [src]="video0.imageUrl">
                     </div>
-                    <div class="titleContainer">
+                    <div class="infoContainer">
-                        {{video0.title}}
+                        <div class="titleContainer">{{video0.title}}</div>
+                        <div class="viewsContainer">
+                            <!-- <span>{{video.views | number: '1.0-0'}}</span> <mat-icon>visibility</mat-icon> -->
+                            {{video.views | number: '1.0-0'}} vues
+                        </div>
+                        <span class="publishedAtContainer">
+                            Publiée le {{ video.publishedAt | date:'dd/LL/YYYY à HH:mm:ss' }}
+                        </span>
                     </div>
                 </div>
             </div>
@@ -216,9 +223,11 @@
 
 
         <!-- Bordure basse -->
+        <!--
         <div class="bottomBorder">
             <div style="visibility: hidden">a</div>
         </div>
+        -->
 
     </div>
 </ng-template>

src/app/user/watching/page-watching-video/page-watching-video.component.scss

@@ -29,6 +29,8 @@
 .playlistContainer {
   border: solid 1px black;
   width: 98%;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
 }
 
 .topBorder {
@@ -37,6 +39,8 @@
   text-align: left;
   padding: 5px 0px 5px 5px;
   border-bottom: solid 1px black;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
 }
 
 .listVideoContainer {
@@ -49,7 +53,19 @@
   margin: 0px 0px 0px 0px;
   padding: 10px 0px 10px 10px;
   border-bottom: solid 1px black;
+  cursor: pointer;
 }
+.videoCell:hover {
+  background-color: #f0f0f0;
+}
+
+.videoCellFocus {
+  background-color: #e6e6e6;
+}
+.videoCellFocus:hover {
+  background-color: #e6e6e6;
+}
+
 
 // ----
 
@@ -76,14 +92,40 @@
   padding: 0px 0px 0px 0px;
 }
 
-.titleContainer {
+// ----
+
+.infoContainer {
   display: table-cell;
   margin-left: 13vw;
   height: 10vh;
-  padding-left: 2px;
+  padding-left: 5px;
   vertical-align: middle;
 }
 
+.titleContainer {
+  font-weight: bold;
+  text-align: left;
+}
+
+.viewsContainer {
+  text-align: left;
+  display: flex;
+  align-items: center;
+  font-size: x-small;
+  color: grey;
+}
+mat-icon {
+  vertical-align: middle;
+  //font-size: x-small;
+}
+
+.publishedAtContainer {
+  text-align: left;
+  font-size: x-small;
+  color: grey;
+}
+
+
 // ----
 
 .bottomBorder {

src/app/user/watching/page-watching-video/page-watching-video.component.ts

@@ -117,4 +117,13 @@ export class PageWatchingVideoComponent implements OnInit
         else if(source === 'dailymotion') videoUrl = "https://www.dailymotion.com/embed/video/" + videoId;
         return this._sanitizer.bypassSecurityTrustResourceUrl(videoUrl);
     }
+
+
+    // retourne la classe CSS de videoCell
+    getClassOfVideoCell(video0: VideoAll): string
+    {
+        if(video0 === this.video) return "videoCell videoCellFocus" ;
+        else return "videoCell" ;
+    }
+
 }