amelioration du style globale

src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html

@@ -86,10 +86,10 @@
             </ng-container>
 
             <!-- Advertiser Column -->
-            <ng-container matColumnDef="advertiser">
+            <ng-container matColumnDef="company">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Annonceur </th>
                 <td mat-cell *matCellDef="let advert">
-                    {{advert.advertiser}}
+                    {{advert.company}}
                 </td>
             </ng-container>
 

src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.scss

@@ -68,3 +68,7 @@ input {
   border: solid 1px black !important;
   background-color: white !important;
 }
+
+::ng-deep .mat-pseudo-checkbox-checked {
+  background-color: black !important;
+}

src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts

@@ -5,12 +5,36 @@ import {ThemeService} from "../../../utils/services/theme/theme.service";
 import {MatDialog} from "@angular/material/dialog";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {MatTableDataSource} from "@angular/material/table";
-import {Advert, AdvertWithCountViews} from "../../../utils/interfaces/advert";
+import {Advert} from "../../../utils/interfaces/advert";
 import {PopupDeleteAdAdminComponent} from "../popup-delete-ad-admin/popup-delete-ad-admin.component";
 import {PopupVisualizeImagesAdminComponent} from "../popup-visualize-images-admin/popup-visualize-images-admin.component";
 import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service";
 import {FormControl} from "@angular/forms";
 import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fictitiousUtils/fictitious-utils.service";
+import {User} from "../../../utils/interfaces/user";
+import {FictitiousUsersService} from "../../../utils/services/fictitiousDatas/fictitiousUsers/fictitious-users.service";
+
+
+
+export interface AdvertWithCountViewsAndCompany {
+    _id: string,
+    userId: string,
+    company: string,
+    title: string,
+    url: string,
+    images: {
+        url: string,
+        description: string,
+    }[],
+    interests: string[],
+    comment: string,
+    views: Date[],
+    countViews: number,
+    isVisible: boolean,
+    isActive: boolean,
+    createdAt: Date,
+    updatedAt: Date,
+}
 
 
 
@@ -21,8 +45,9 @@ import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fi
 })
 export class PageAdListAdminComponent implements AfterViewInit
 {
-    tabAdvertWithCountViews: AdvertWithCountViews[] = [];
+    tabAdvertWithCountViews: AdvertWithCountViewsAndCompany[] = [];
-    displayedColumns: string[] = [ 'title', 'advertiser', 'interests', 'createdAt', 'updatedAt', 'countViews', 'isVisible', 'actions' ];
+    tabAdvertiser: User[];
+    displayedColumns: string[] = [ 'title', 'company', 'interests', 'createdAt', 'updatedAt', 'countViews', 'isVisible', 'actions' ];
     dataSource ;
     @ViewChild(MatSort) sort: MatSort;
     @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -38,6 +63,7 @@ export class PageAdListAdminComponent implements AfterViewInit
     constructor( public themeService: ThemeService,
                  private fictitiousAdvertsService: FictitiousAdvertsService,
                  private fictitiousUtilsService: FictitiousUtilsService,
+                 private fictitiousUsersService: FictitiousUsersService,
                  public dialog: MatDialog,
                  private snackBar: MatSnackBar ) { }
 
@@ -47,8 +73,9 @@ export class PageAdListAdminComponent implements AfterViewInit
         // --- FAUX CODE ---
         const tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
         this.allInterests = this.fictitiousUtilsService.getTags();
+        this.tabAdvertiser = this.fictitiousUsersService.getTabAdvertiser(3);
 
-        for(let advert of tabAdvert) this.tabAdvertWithCountViews.push(this.advertToAdvertWithCountViews(advert));
+        for(let advert of tabAdvert) this.tabAdvertWithCountViews.push(this.advertToAdvertWithCountViewsAndCompany(advert));
         this.dataSource = new MatTableDataSource<Advert>();
         this.onFilter();
     }
@@ -61,7 +88,7 @@ export class PageAdListAdminComponent implements AfterViewInit
     }
 
 
-    onVisualizeImages(advert: AdvertWithCountViews)
+    onVisualizeImages(advert: AdvertWithCountViewsAndCompany)
     {
         const config = {
             width: '30%',
@@ -79,7 +106,7 @@ export class PageAdListAdminComponent implements AfterViewInit
     }
 
 
-    onDelete(advert: AdvertWithCountViews): void
+    onDelete(advert: AdvertWithCountViewsAndCompany): void
     {
         const config = {
             data: { advert: advert }
@@ -160,13 +187,23 @@ export class PageAdListAdminComponent implements AfterViewInit
     }
 
 
-    advertToAdvertWithCountViews(advert: Advert): AdvertWithCountViews
+    advertToAdvertWithCountViewsAndCompany(advert: Advert): AdvertWithCountViewsAndCompany
     {
+        let company0 = "company" ;
+        for(let advertiser of this.tabAdvertiser)
+        {
+            if(advert.userId === advertiser._id) {
+                company0 = advertiser.company;
+                break;
+            }
+        }
+
         return {
             _id: advert._id,
             userId: advert.userId,
             title: advert.title,
-            advertiser: advert.advertiser,
+            company: company0,
+            url: advert.url,
             images: advert.images,
             interests: advert.interests,
             comment: advert.comment,

src/app/admin/adList/popup-delete-ad-admin/popup-delete-ad-admin.component.ts

@@ -34,7 +34,7 @@ export class PopupDeleteAdAdminComponent implements OnInit
         // --- VRAI CODE ---
         /*
         this.messageService
-            .sendMessage("advertiser/delete/ad", {"advert": this.advert})
+            .sendMessage("url/delete/ad", {"advert": this.advert})
             .subscribe( retour => {
 
                 if(retour.status === "error") {

src/app/admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component.html

@@ -7,10 +7,10 @@
     <mat-divider></mat-divider>
     <mat-dialog-content>
 
-        <!-- Advertiser -->
+        <!-- URL -->
         <div class="row myRow">
             <div class="col-6 myLabel"> Annonceur: </div>
-            <div class="col-6 myValue"> {{advert.advertiser}} </div>
+            <div class="col-6 myValue"> {{advert.url}} </div>
         </div>
 
         <!-- Images -->

src/app/admin/myProfil/popup-update-admin/popup-update-admin.component.ts

@@ -39,6 +39,7 @@ export class PopupUpdateAdminComponent implements OnInit
             dateOfBirth: admin0.dateOfBirth,
             gender: admin0.gender,
             interests: [],
+            company: "",
             isActive: admin0.isActive,
             isAccepted: admin0.isisAccepted,
             createdAt: admin0.createdAt,

src/app/admin/userList/page-user-list/page-user-list.component.html

@@ -35,7 +35,7 @@
                                 <mat-radio-button value="user" (click)="this.roleName = 'user'; onFilter()">
                                     Utilisateur
                                 </mat-radio-button><br>
-                                <mat-radio-button value="advertiser" (click)="this.roleName = 'advertiser'; onFilter()">
+                                <mat-radio-button value="url" (click)="this.roleName = 'url'; onFilter()">
                                     Annonceur
                                 </mat-radio-button><br>
                                 <mat-radio-button value="admin" (click)="this.roleName = 'admin'; onFilter()">

src/app/admin/userList/popup-create-user/popup-create-user.component.html

@@ -133,6 +133,11 @@
                 <mat-label>Login</mat-label>
                 <input matInput type="text" [(ngModel)]="user.login">
             </mat-form-field><br>
+            <!-- company -->
+            <mat-form-field appearance="fill" *ngIf="user.role.name === 'advertiser'">
+                <mat-label>Entreprise</mat-label>
+                <input matInput type="text" [(ngModel)]="user.company">
+            </mat-form-field><br *ngIf="user.role.name === 'advertiser'">
         </div>
 
         <!-- mdp + confirmation -->

src/app/admin/userList/popup-create-user/popup-create-user.component.ts

@@ -38,6 +38,7 @@ export class PopupCreateUserComponent implements OnInit
             dateOfBirth: null,
             gender: "man",
             interests: [],
+            company: "",
             isActive: false,
             isAccepted: false,
             createdAt: new Date(),
@@ -72,12 +73,8 @@ export class PopupCreateUserComponent implements OnInit
             this.errorMessage = "Veuillez remplir le champ 'email'.";
             this.hasError = true;
         }
-        if((this.user.role.name === 'user') && ((this.user.dateOfBirth === undefined) || (this.user.dateOfBirth === null))) {
-            this.errorMessage = "Veuillez remplir le champ 'date de naissance'.";
-            this.hasError = true;
-        }
         else if(!this.isValidEmail(this.user.email)) {
-            this.errorMessage = "Email invalide";
+            this.errorMessage = "Email invalide.";
             this.hasError = true;
         }
         else if(this.password.length === 0) {
@@ -88,6 +85,14 @@ export class PopupCreateUserComponent implements OnInit
             this.errorMessage = "Le mot de passe est différent de sa confirmation.";
             this.hasError = true;
         }
+        else if((this.user.role.name === 'user') && ((this.user.dateOfBirth === undefined) || (this.user.dateOfBirth === null))) {
+            this.errorMessage = "Veuillez remplir le champ 'date de naissance'.";
+            this.hasError = true;
+        }
+        else if((this.user.role.name === 'advertiser') && (this.user.company.length === 0)) {
+            this.errorMessage = "Veuillez remplir le champ 'entreprise'.";
+            this.hasError = true;
+        }
         else {
             this.errorMessage = "" ;
             this.hasError = false;

src/app/admin/userList/popup-visualize-user/popup-visualize-user.component.html

@@ -62,7 +62,7 @@
         <div class="col-6 myLabel">Rôle:</div>
         <div class="col-6 myValue">
             <span *ngIf="user.role.name === 'user'">Utilisateur</span>
-            <span *ngIf="user.role.name === 'advertiser'">Annonceur</span>
+            <span *ngIf="user.role.name === 'url'">Annonceur</span>
             <span *ngIf="user.role.name === 'admin'">Admin</span>
         </div>
     </div>

src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.scss

@@ -82,19 +82,6 @@ input {
 
 // -------------------------------------------------------------------------
 
-
+::ng-deep .mat-pseudo-checkbox-checked {
-// aura
-::ng-deep .mat-checkbox-ripple .mat-ripple-element {
-  background-color: grey !important;
-}
-
-// contenu coche
-::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
   background-color: black !important;
 }
-
-// indeterminate
-::ng-deep .mat-checkbox .mat-checkbox-frame {
-  border: solid 1px black !important;
-  background-color: white !important;
-}

src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts

@@ -229,7 +229,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
             _id: advert._id,
             userId: advert.userId,
             title: advert.title,
-            advertiser: advert.advertiser,
+            url: advert.url,
             images: advert.images,
             interests: advert.interests,
             comment: advert.comment,

src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html

@@ -28,6 +28,12 @@
                 <textarea matInput [(ngModel)]="advert.comment"></textarea>
             </mat-form-field><br>
 
+            <!-- url -->
+            <mat-form-field class="commentContainer" appearance="fill">
+                <mat-label> URL </mat-label>
+                <textarea matInput [(ngModel)]="advert.url"></textarea>
+            </mat-form-field><br>
+
             <!-- IsVisible -->
             <mat-checkbox [(ngModel)]="advert.isVisible"> Visible </mat-checkbox><br><br>
 

src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts

@@ -9,7 +9,7 @@ const ADVERT_VIDE: Advert = {
     _id: "",
     userId: "",
     title: "",
-    advertiser: "",
+    url: "",
     images: [],
     interests: [],
     comment: "",
@@ -48,14 +48,14 @@ export class PopupAddOrUpdateAdComponent implements OnInit
         {
             this.advert = Object.assign({}, ADVERT_VIDE);
             this.advert.interests = [];
-            this.urlBackend = "advertiser/add/ad" ;
+            this.urlBackend = "url/add/ad" ;
             this.title = "Ajouter annonce" ;
         }
         else
         {
             this.advert = Object.assign({}, this.data.advert);
             this.advert.interests = this.data.advert.interests.slice();
-            this.urlBackend = "advertiser/update/ad" ;
+            this.urlBackend = "url/update/ad" ;
             this.title = "Modifier annonce" ;
         }
     }

src/app/advertiser/adList/popup-delete-ad-advertiser/popup-delete-ad-advertiser.component.ts

@@ -34,7 +34,7 @@ export class PopupDeleteAdAdvertiserComponent implements OnInit
         // --- VRAI CODE ---
         /*
         this.messageService
-            .sendMessage("advertiser/delete/ad", {"advert": this.advert})
+            .sendMessage("url/delete/ad", {"advert": this.advert})
             .subscribe( retour => {
 
                 if(retour.status === "error") {

src/app/advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component.html

@@ -13,9 +13,15 @@
                      onerror="this.onerror=null; this.src='assets/profil.png'">
             </div>
 
+            <!-- entreprise -->
+            <div class="row myRow">
+                <div class="col-6 myLabel">Entreprise:</div>
+                <div class="col-6 myValue"> {{advertiser.company}} </div>
+            </div>
+
             <!-- login -->
             <div class="row myRow">
-                <div class="col-6 myLabel">Login:</div>
+                <div class="col-6 myLabel">Pseudo:</div>
                 <div class="col-6 myValue"> {{advertiser.login}} </div>
             </div>
 

src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.html

@@ -10,6 +10,12 @@
         <!-- divider -->
         <br><mat-divider></mat-divider><br>
 
+        <!-- entreprise -->
+        <mat-form-field appearance="fill">
+            <mat-label>Entreprise</mat-label>
+            <input matInput type="text" [(ngModel)]="advertiserCopy.company">
+        </mat-form-field><br>
+
         <!-- login -->
         <mat-form-field appearance="fill">
             <mat-label>Pseudo</mat-label>

src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.ts

@@ -39,6 +39,7 @@ export class PopupUpdateAdvertiserComponent implements OnInit
             dateOfBirth: advertiser0.dateOfBirth,
             gender: advertiser0.gender,
             interests: [],
+            company: advertiser0.company,
             isActive: advertiser0.isActive,
             isAccepted: advertiser0.isAccepted,
             createdAt: advertiser0.createdAt,

src/app/advertiser/pages-popularity/pages-popularity.component.scss

@@ -42,19 +42,6 @@ input {
 
 // -------------------------------------------------------------------------
 
-
+::ng-deep .mat-pseudo-checkbox-checked {
-// aura
-::ng-deep .mat-checkbox-ripple .mat-ripple-element {
-  background-color: grey !important;
-}
-
-// contenu coche
-::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
   background-color: black !important;
 }
-
-// indeterminate
-::ng-deep .mat-checkbox .mat-checkbox-frame {
-  border: solid 1px black !important;
-  background-color: white !important;
-}

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

@@ -1,7 +1,7 @@
 <nav class="navbar navbar-expand-lg">
 
     <!-- PolyNotFound -->
-    <a class="navbar-brand" routerLink="/advertiser/adList"> StreamNotFound </a>
+    <a class="navbar-brand" routerLink="/url/adList"> StreamNotFound </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>

src/app/beforeConnexion/login/page-login/page-login.component.html

@@ -1,38 +1,36 @@
 <div [class]="themeService.getClassTheme()">
-    <div class="myContainer">
+    <div class="bg">
-        <div class="bg">
 
-            <app-navbar-before-connexion pour="login"></app-navbar-before-connexion>
+        <app-navbar-before-connexion pour="login"></app-navbar-before-connexion>
 
-            <div class="wrapper fadeInDown">
+        <div class="wrapper fadeInDown">
-                <div id="formContent">
+            <div id="formContent">
-
-                    <!-- Icon -->
-                    <div class="fadeIn first">
-                        <h1 style="font-family: cursive; font-size: 45px; margin-top: 20px; margin-bottom: 10px">StreamNotFound</h1>
-                        <img src="../../../../assets/logo.png" id="icon" alt="User Icon" style="margin-top: 10px"/>
-                    </div>
-
-                    <!-- Login Form -->
-                    <form>
-                        <input [(ngModel)]="pseudo" type="text" id="login" class="fadeIn second" name="login" placeholder="Login">
-                        <input [(ngModel)]="password" type="password" id="password" class="fadeIn third" name="login" placeholder="Mot de passe">
-                        <!-- Message d'erreur -->
-                        <div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
-                            <span class="mat-error"> {{errorMessage}} </span>
-                        </div>
-                        <input type="submit" class="fadeIn fourth" value="Se connecter" (click)="onSeConnecter()">
-                    </form>
-
-                    <!-- Oubli mot de passe -->
-                    <div id="formFooter">
-                        <a class="underlineHover" href="https://disney.fandom.com/fr/wiki/Tristesse">J'ai oublié mon mot de passe</a>
-                    </div>
 
+                <!-- Icon -->
+                <div class="fadeIn first">
+                    <h1 style="font-family: cursive; font-size: 45px; margin-top: 20px; margin-bottom: 10px">StreamNotFound</h1>
+                    <img src="../../../../assets/logo.png" id="icon" alt="User Icon" style="margin-top: 10px"/>
                 </div>
+
+                <!-- Login Form -->
+                <form>
+                    <input [(ngModel)]="pseudo" type="text" id="login" class="fadeIn second" name="login" placeholder="Login">
+                    <input [(ngModel)]="password" type="password" id="password" class="fadeIn third" name="login" placeholder="Mot de passe">
+                    <!-- Message d'erreur -->
+                    <div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
+                        <span class="mat-error"> {{errorMessage}} </span>
+                    </div>
+                    <input type="submit" class="fadeIn fourth" value="Se connecter" (click)="onSeConnecter()">
+                </form>
+
+                <!-- Oubli mot de passe -->
+                <div id="formFooter">
+                    <a class="underlineHover" href="https://disney.fandom.com/fr/wiki/Tristesse">J'ai oublié mon mot de passe</a>
+                </div>
+
             </div>
-
-
         </div>
+
+
     </div>
 </div>

src/app/beforeConnexion/login/page-login/page-login.component.scss

@@ -144,15 +144,10 @@ input[type=text]::placeholder, input[type=password]::placeholder {
   color: #cccccc;
 }
 
-.myContainer {
-  height: 100vh;
-  width: 100vw;
-}
-
 .bg{
   margin: 0;
   padding: 0;
-  height: 80vh;
+  height: 100vh;
   width: 100vw;
   overflow-y: hidden;
   overflow-x: hidden;

src/app/beforeConnexion/register/page-register/page-register.component.html

@@ -124,9 +124,16 @@
 <!-- Info personnelles advertiser -->
 <ng-template #advertiserBlock>
 
+    <!-- Entreprise -->
+    <mat-form-field appearance="fill">
+        <mat-label>Entreprise</mat-label>
+        <input matInput type="text" [(ngModel)]="user.company" required>
+    </mat-form-field>
+    <br>
+
     <!-- Login -->
     <mat-form-field appearance="fill">
-        <mat-label>Login</mat-label>
+        <mat-label>Pseudo</mat-label>
         <input matInput type="text" [(ngModel)]="user.login" required>
     </mat-form-field>
     <br>

src/app/beforeConnexion/register/page-register/page-register.component.ts

@@ -32,6 +32,7 @@ export class PageRegisterComponent
         dateOfBirth: null,
         gender: "man",
         interests: [],
+        company: "",
         isActive: false,
         isAccepted: false,
         createdAt: new Date(),
@@ -94,7 +95,11 @@ export class PageRegisterComponent
     // Check les champs saisies par l'utilisateur
     checkField(): void
     {
-        if(this.user.login.length === 0) {
+        if((this.user.role.name === 'advertiser') && (this.user.company.length === 0)) {
+            this.errorMessage = "Veuillez remplir le champ 'entreprise'.";
+            this.hasError = true;
+        }
+        else if(this.user.login.length === 0) {
             this.errorMessage = "Veuillez remplir le champ 'login'.";
             this.hasError = true;
         }

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

@@ -15,7 +15,9 @@
   text-align: center;
   margin: 0px 0px 0px 0px;
   padding: 10px 0px 10px 0px;
-  background-color: #dcdcdc;
+  //background-color: #dcdcdc;
+  background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
   font-size: large;
   border-bottom: solid 1px black;
   border-top-left-radius: 10px;
@@ -83,4 +85,10 @@
 
 .btnCreerPlaylist {
   margin: 0px 0px 0px 0px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
+  //background: linear-gradient(180deg, #e6e6e6 0%, rgba(0,0,0,0.25) 49%, rgba(38,38,38,0.6) 51%, rgba(0,0,0,0.25) 100%);
 }
+

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

@@ -1,5 +1,7 @@
 .myContainer {
-  background-color: white ;
+  //background-color: white ;
+  background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
   text-align: center;
   width: 35vw;
   margin: 1vh 0vh 3vh 0vh;
@@ -13,7 +15,9 @@
 
 .topBorder {
   margin: 0px 0px 0px 0px;
-  background-color: #dcdcdc;
+  //background-color: #dcdcdc;
+  background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
   text-align: left;
   padding: 5px 0px 5px 5px;
   border-bottom: solid 1px black;
@@ -68,7 +72,9 @@
 
 .bottomBorder {
   margin: 0px 0px 0px 0px;
-  background-color: #dcdcdc;
+  //background-color: #dcdcdc;
+  background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
   border-top: solid 1px black;
   border-bottom: solid 1px black;
   font-size: large;

src/app/user/myProfil/popup-update-user/popup-update-user.component.ts

@@ -39,6 +39,7 @@ export class PopupUpdateUserComponent implements OnInit
             dateOfBirth: user0.dateOfBirth,
             gender: user0.gender,
             interests: [],
+            company: "",
             isActive: user0.isActive,
             isAccepted: user0.isAccepted,
             createdAt: user0.createdAt,

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

@@ -16,7 +16,7 @@
 
 
                 <!-- Info video -->
-                <mat-grid-list cols="12" style="margin: 0px 0px 0px 0px; font-size: small">
+                <mat-grid-list cols="12" class="mat-grid-list-info-video">
 
                     <!-- logo -->
                     <mat-grid-tile [colspan]="2" [rowspan]="2" class="mat-grid-tile-info-video" (click)="onVideo(tabVideo[indexPage+k])">

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

@@ -7,13 +7,12 @@ mat-grid-list {
 mat-grid-tile {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
-  //border: solid 1px black;
 }
 
 .myCell {
   margin: 7px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
-  background-color: #f0f0f0;
+  background-color: white;
   border: solid 1px black;
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
@@ -43,8 +42,6 @@ mat-grid-tile {
 }
 
 .imgVideo {
-  //border: solid 1px black;
-  //width: 20vw;
   width: 18vw;
   height: 15vh;
   padding: 0px 0px 0px 0px;
@@ -54,9 +51,16 @@ mat-grid-tile {
 // ---------------------------------------------------------------------------------------------
 
 
+.mat-grid-list-info-video {
+  margin: 0px 0px 0px 0px;
+  font-size: small;
+}
+
 .mat-grid-tile-info-video {
   border: none;
   font-size: x-small;
+  //background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  //background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
 }
 
 mat-icon {

src/app/user/utils/components/advert/advert.component.html

@@ -2,6 +2,7 @@
     <span class="helper"></span>
     <img [src]="'assets/pub/'+ad.images[idxImage].url"
          [alt]="ad.images[idxImage].url"
+         (click)="onClick()"
          id="imgFromSearchOrMyPlaylists">
 </div>
 
@@ -10,6 +11,7 @@
 <img *ngIf="from === 'watchingLeft'"
      [src]="'assets/pub/'+ad.images[idxImage].url"
      [alt]="ad.images[idxImage].url"
+     (click)="onClick()"
      id="imgFromWatchingLeft">
 
 <!-- --------------------------------------------------------------------- -->
@@ -17,4 +19,5 @@
 <img *ngIf="from === 'watchingRight'"
      [src]="'assets/pub/'+ad.images[idxImage].url"
      [alt]="ad.images[idxImage].url"
+     (click)="onClick()"
      id="imgFromWatchingRight">

src/app/user/utils/components/advert/advert.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {Advert} from "../../../../utils/interfaces/advert";
-import {ThemeService} from "../../../../utils/services/theme/theme.service";
+import {Router} from "@angular/router";
 
 
 
@@ -15,16 +15,17 @@ export class AdvertComponent implements OnInit
     @Input() from: string = "search";
     idxImage: number = 0;
 
-
+    constructor(private router: Router) { }
-    constructor(public themeService: ThemeService) { }
-
 
     ngOnInit(): void
     {
         const nbImages = this.ad.images.length;
         this.idxImage = Math.floor(Math.random() * nbImages);
+    }
 
-
+    onClick(): void
+    {
+        document.location.href = this.ad.url;
     }
 
 }

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

@@ -35,7 +35,9 @@
 
 .topBorder {
   margin: 0px 0px 0px 0px;
-  background-color: #dcdcdc;
+  //background-color: #dcdcdc;
+  background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
   text-align: left;
   padding: 5px 0px 5px 5px;
   border-bottom: solid 1px black;

src/app/utils/interfaces/advert.ts

@@ -3,7 +3,7 @@ export interface Advert
     _id: string,
     userId: string,
     title: string,
-    advertiser: string,
+    url: string,
     images: {
         url: string,
         description: string,
@@ -23,7 +23,7 @@ export interface AdvertWithCountViews {
     _id: string,
     userId: string,
     title: string,
-    advertiser: string,
+    url: string,
     images: {
         url: string,
         description: string,

src/app/utils/interfaces/user.ts

@@ -12,6 +12,7 @@ export interface User
     dateOfBirth: Date,
     gender: string,
     interests: string[],
+    company: string,
     isActive: boolean,
     isAccepted: boolean,
     lastConnexion: Date,

src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts

@@ -9,7 +9,7 @@ const TAB_ADVERT: Advert[] = [
         _id: "idNutella",
         userId: "userId",
         title: "pot de nutella XXL",
-        advertiser: "nutella",
+        url: "https://www.nutella.com/fr/fr/",
         images: [
             { url: "nutella_v_1.jpeg", description: "image nutella 1" },
             { url: "nutella_v_2.png", description: "image nutella 2" },
@@ -38,7 +38,7 @@ const TAB_ADVERT: Advert[] = [
         _id: "idRolex",
         userId: "userId",
         title: "Rolex",
-        advertiser: "rolex",
+        url: "https://www.rolex.com",
         images: [
             { url: "rolex_v_1.jpg", description: "rolex 1" },
             { url: "rolex_v_2.png", description: "rolex 2" },
@@ -66,7 +66,7 @@ const TAB_ADVERT: Advert[] = [
         _id: "idAlbion",
         userId: "userId",
         title: "Albion new version",
-        advertiser: "albion",
+        url: "https://www.rolex.com",
         images: [
             { url: "rolex_v_1.jpg", description: "albion 1" },
             { url: "rolex_v_2.png", description: "albion 2" },

src/app/utils/services/fictitiousDatas/fictitiousUsers/fictitious-users.service.ts

@@ -17,6 +17,7 @@ const USER: User = {
     dateOfBirth: new Date(),
     gender: "man",
     interests: ["foot", "jeux-vidéo"],
+    company: "",
     isActive: true,
     isAccepted: true,
     lastConnexion: new Date(),
@@ -37,6 +38,7 @@ const ADVERTISER: User = {
     dateOfBirth: null,
     gender: "",
     interests: [],
+    company: "My company",
     isActive: true,
     isAccepted: true,
     lastConnexion: new Date(),
@@ -57,6 +59,7 @@ const ADMIN: User = {
     dateOfBirth: null,
     gender: "",
     interests: [],
+    company: "",
     isActive: true,
     isAccepted: true,
     lastConnexion: new Date(),