continuation de la page 'search', mise en place des pubs

src/app/app.component.ts

@@ -7,4 +7,6 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'frontend';
+
+  themeIsLight = true;
 }

src/app/app.module.ts

@@ -14,7 +14,7 @@ import {HttpClientModule} from "@angular/common/http";
 import { PopupConfirmationComponent } from './pourLes3Roles/register/popup-confirmation/popup-confirmation.component';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatButtonModule} from "@angular/material/button";
-import { PubComponent } from './utils/components/pub/pub.component';
+import { AdvertComponent } from './utils/components/advert/advert.component';
 import { VideoCellComponent } from './user/search/video-cell/video-cell.component';
 import { VideoGridComponent } from './user/search/video-grid/video-grid.component';
 import {MatIconModule} from "@angular/material/icon";
@@ -24,7 +24,8 @@ import {MatDividerModule} from "@angular/material/divider";
 import {MatCheckboxModule} from "@angular/material/checkbox";
 import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatSnackBarModule} from "@angular/material/snack-bar";
-import { IframeTrackerDirective } from './utils/directive/iframe-tracker/iframe-tracker.directive';
+import { IframeTrackerDirective } from './utils/directives/iframe-tracker/iframe-tracker.directive';
+import {MatGridListModule} from "@angular/material/grid-list";
 
 
 @NgModule({
@@ -35,7 +36,7 @@ import { IframeTrackerDirective } from './utils/directive/iframe-tracker/iframe-
     NavBarComponent,
     PageSearchComponent,
     PopupConfirmationComponent,
-    PubComponent,
+    AdvertComponent,
     VideoCellComponent,
     VideoGridComponent,
     PopupAddVideoToPlaylistsComponent,
@@ -55,7 +56,8 @@ import { IframeTrackerDirective } from './utils/directive/iframe-tracker/iframe-
         MatDividerModule,
         MatCheckboxModule,
         MatFormFieldModule,
-        MatSnackBarModule
+        MatSnackBarModule,
+        MatGridListModule
     ],
   providers: [],
   bootstrap: [AppComponent]

src/app/pourLes3Roles/page-connexion/page-connexion.component.html

@@ -1,39 +1,41 @@
-<div class="conteneur">
+<div [class]="themeService.getClassTheme()">
+    <div class="myContainer">
 
-    <app-nav-bar pour="3roles"></app-nav-bar>
+        <app-nav-bar pour="3roles"></app-nav-bar>
 
-    <div class="boite">
+        <div class="boite">
-        <h1> Connexion </h1>
+            <h1> Connexion </h1>
 
-        <!-- Email -->
+            <!-- Email -->
-        <div class="row">
+            <div class="row">
-            <div class="col-4 label"> Email: &nbsp; </div>
+                <div class="col-4 label"> Email: &nbsp; </div>
-            <div class="col-8 champ">
+                <div class="col-8 champ">
-                <input type="text" [(ngModel)]="email">
+                    <input type="text" [(ngModel)]="email">
+                </div>
             </div>
-        </div>
 
-        <!-- Mot de passe -->
+            <!-- Mot de passe -->
-        <div class="row">
+            <div class="row">
-            <div class="col-4 label"> Mot de passe: &nbsp; </div>
+                <div class="col-4 label"> Mot de passe: &nbsp; </div>
-            <div class="col-8 champ">
+                <div class="col-8 champ">
-                <input type="text" [(ngModel)]="password">
+                    <input type="text" [(ngModel)]="password">
+                </div>
             </div>
-        </div>
 
-        <!-- Boutons -->
+            <!-- Boutons -->
-        <div class="row">
+            <div class="row">
-            <div class="col-6">
+                <div class="col-6">
-                <button (click)="onSeConnecter()"> Se connecter </button>
+                    <button (click)="onSeConnecter()"> Se connecter </button>
+                </div>
+                <div class="col-6" style="text-align: right">
+                    <button routerLink="/register"> S'inscrire </button>
+                </div>
             </div>
-            <div class="col-6" style="text-align: right">
-                <button routerLink="/register"> S'inscrire </button>
-            </div>
-        </div>
 
-        <!-- Mot de passe oublié -->
+            <!-- Mot de passe oublié -->
-        <div style="text-align: right">
+            <div style="text-align: right">
-            <a class="lien" href="https://pixar.fandom.com/wiki/Sadness"> Mot de passe oublié ? </a>
+                <a class="lien" href="https://pixar.fandom.com/wiki/Sadness"> Mot de passe oublié ? </a>
+            </div>
         </div>
     </div>
 </div>

src/app/pourLes3Roles/page-connexion/page-connexion.component.scss

@@ -1,3 +1,10 @@
+.myContainer {
+  max-width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  font-size: x-large;
+}
+
 h1 {
   text-align: center;
   margin-bottom: 30px;
@@ -6,17 +13,25 @@ h1 {
 .boite {
   margin-left: auto;
   margin-right: auto;
-  width: 450px;
+  width: 30%;
   margin-top: 50vh;
   transform: translateY(-100%);
-  border: solid 3px black;
+  border: solid 3px;
   border-radius: 10px;
   padding: 20px 40px 20px 20px;
   background-color: #dcdcdc;
 }
+.lightTheme .boite {
+  border-color: black;
+}
+.darkTheme .boite {
+  border-color: white;
+}
+
+
 
 .row {
-  margin: 15px 0px 15px 0px
+  margin: 25px 0px 25px 0px
 }
 
 .label {
@@ -27,7 +42,7 @@ h1 {
 
 .champ {
   margin: 0px;
-  padding: 0px
+  padding: 0px;
 }
 
 input {

src/app/pourLes3Roles/page-connexion/page-connexion.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {MessageService} from "../../utils/services/message/message.service";
 import {Router} from "@angular/router";
+import {ThemeService} from "../../utils/services/theme/theme.service";
 
 
 @Component({
@@ -14,7 +15,8 @@ export class PageConnexionComponent implements OnInit
     password: string = ""
 
     constructor( private messageService: MessageService,
-                 private router: Router) { }
+                 private router: Router,
+                 public themeService: ThemeService ) { }
 
 
     ngOnInit(): void {}

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

@@ -1,50 +1,53 @@
-<div class="conteneur">
+<div [class]="themeService.getClassTheme()">
+    <div class="myContainer">
 
-    <app-nav-bar pour="3roles"></app-nav-bar>
+        <app-nav-bar pour="3roles"></app-nav-bar>
 
-    <div class="boite">
+        <div class="boite">
-        <h1> Inscription </h1>
+            <h1> Inscription </h1>
 
-        <!-- Pseudo -->
+            <!-- Pseudo -->
-        <div class="row">
+            <div class="row">
-            <div class="col-6 label"> Pseudo: &nbsp; </div>
+                <div class="col-6 label"> Pseudo: &nbsp; </div>
-            <div class="col-6 champ">
+                <div class="col-6 champ">
-                <input type="text" [(ngModel)]="pseudo">
+                    <input type="text" [(ngModel)]="pseudo">
+                </div>
+            </div>
+
+            <!-- Email -->
+            <div class="row">
+                <div class="col-6 label"> Email: &nbsp; </div>
+                <div class="col-6 champ">
+                    <input type="email" [(ngModel)]="email">
+                </div>
+            </div>
+
+            <!-- Mot de passe -->
+            <div class="row">
+                <div class="col-6 label"> Mot de passe: &nbsp; </div>
+                <div class="col-6 champ">
+                    <input type="password" [(ngModel)]="password">
+                </div>
+            </div>
+
+            <!-- Confirmation mot de passe -->
+            <div class="row">
+                <div class="col-6 label"> Confirmer le mot de passe: &nbsp; </div>
+                <div class="col-6 champ">
+                    <input type="password" [(ngModel)]="confirmPassword">
+                </div>
+            </div>
+
+            <!-- Bouton valider -->
+            <div style="width: 100%; margin-top: 30px">
+                <button (click)="onValider()"> Valider </button>
+            </div>
+
+            <!-- Message d'erreur -->
+            <div *ngIf="hasError" style="text-align: center">
+                <span class="mat-error"> {{errorMessage}} </span>
             </div>
         </div>
 
-        <!-- Email -->
-        <div class="row">
-            <div class="col-6 label"> Email: &nbsp; </div>
-            <div class="col-6 champ">
-                <input type="email" [(ngModel)]="email">
-            </div>
-        </div>
-
-        <!-- Mot de passe -->
-        <div class="row">
-            <div class="col-6 label"> Mot de passe: &nbsp; </div>
-            <div class="col-6 champ">
-                <input type="password" [(ngModel)]="password">
-            </div>
-        </div>
-
-        <!-- Confirmation mot de passe -->
-        <div class="row">
-            <div class="col-6 label"> Confirmer le mot de passe: &nbsp; </div>
-            <div class="col-6 champ">
-                <input type="password" [(ngModel)]="confirmPassword">
-            </div>
-        </div>
-
-        <!-- Bouton valider -->
-        <div style="width: 100%; margin-top: 30px">
-            <button (click)="onValider()"> Valider </button>
-        </div>
-
-        <!-- Message d'erreur -->
-        <div *ngIf="hasError" style="text-align: center">
-            <span class="mat-error"> {{errorMessage}} </span>
-        </div>
     </div>
 </div>

src/app/pourLes3Roles/register/page-register/page-register.component.scss

@@ -1,19 +1,35 @@
+.myContainer {
+  max-width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  font-size: x-large;
+}
+
+
 h1 {
   text-align: center;
   margin-bottom: 30px;
 }
 
+
 .boite {
   margin-left: auto;
   margin-right: auto;
-  width: 550px;
+  width: 35%;
   margin-top: 50vh;
   transform: translateY(-100%);
-  border: solid 3px black;
+  border: solid 3px;
   border-radius: 10px;
   padding: 20px 40px 20px 40px;
   background-color: #dcdcdc;
 }
+.lightTheme .boite {
+  border-color: black;
+}
+.darkTheme .boite {
+  border-color: white;
+}
+
 
 input {
   width: 100%;

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

@@ -3,6 +3,7 @@ import {MessageService} from "../../../utils/services/message/message.service";
 import {Router} from "@angular/router";
 import {MatDialog} from "@angular/material/dialog";
 import {PopupConfirmationComponent} from "../popup-confirmation/popup-confirmation.component";
+import {ThemeService} from "../../../utils/services/theme/theme.service";
 
 @Component({
   selector: 'app-page-register',
@@ -21,7 +22,8 @@ export class PageRegisterComponent implements OnInit
 
     constructor( private messageService: MessageService,
                  private router: Router,
-                 public dialog: MatDialog ) { }
+                 public dialog: MatDialog,
+                 public themeService: ThemeService ) { }
 
 
     ngOnInit(): void {}

src/app/user/search/page-search/page-search.component.html

@@ -1,77 +1,75 @@
-<div class="conteneur">
+<div [class]="themeService.getClassTheme()">
+    <div class="conteneur">
 
-    <!-- Navbar -->
+        <!-- Navbar -->
-    <div style="margin-bottom: 50px">
+        <div style="margin-bottom: 50px">
-        <app-nav-bar pour="user"></app-nav-bar>
+            <app-nav-bar pour="user"></app-nav-bar>
-    </div>
-
-    <!-- ---------------------------------------------------------------------------------------------------------- -->
-
-    <!-- bloc du milieu: niveau 1 -->
-    <div class="row blocMilieu1">
-
-        <!-- pub de gauche -->
-        <div class="col-2">
-            <div class="conteneurPubGauche">
-                <app-pub></app-pub>
-            </div>
         </div>
 
-        <!-- ------------------------- -->
 
-        <!-- bloc du milieu: niveau 2 -->
+        <!-- --------------------------------------------------------------------- -->
-        <div class="col-8">
 
-            <!-- Search bar -->
+
-            <div class="row" style="margin-bottom: 10px">
+        <!-- [Search bar] + [Site de streaming] -->
-                <div>
+        <div class="row">
-                    <input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search"> &nbsp;
+            <div class="col-2"></div>
-                    <button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
+            <div class="col-8" style="margin-bottom: 20px">
+
+                <!-- Search bar -->
+                <div class="row" style="margin-bottom: 10px">
+                    <div>
+                        <input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search"> &nbsp;
+                        <button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
+                    </div>
                 </div>
-            </div>
 
-            <!-- Site de streaming -->
+                <!-- Site de streaming -->
-            <div class="row" style="margin-bottom: 10px">
+                <div class="row" style="margin-bottom: 10px">
-                <div>
+                    <div>
-                    <span *ngFor="let plateforme of tabPlateform">
+                        <span *ngFor="let plateforme of tabPlateform">
-                        &nbsp;
+                            &nbsp;
-                        <input type="checkbox" [id]="plateforme.name" [name]="plateforme.name" style="margin-left: 5px" [(ngModel)]="plateforme.isSelected">
+                            <input type="checkbox" [id]="plateforme.name" [name]="plateforme.name" style="margin-left: 5px" [(ngModel)]="plateforme.isSelected">
-                        <img [src]="'/assets/logo_plateforms/'+plateforme.name+'.png'" alt="image" width="25px" height="25px" style="margin-left: 5px">
+                            <img [src]="'/assets/logo_plateforms/'+plateforme.name+'.png'" alt="image" width="25px" height="25px" style="margin-left: 5px">
-                        <label [for]="plateforme.name" style="margin-left: 5px"> {{plateforme.name}}</label>
+                            <label [for]="plateforme.name" style="margin-left: 5px"> {{plateforme.name}}</label>
-                        &nbsp;
+                            &nbsp;
-                    </span>
+                        </span>
+                    </div>
                 </div>
-            </div>
 
-            <!-- Grille des videos -->
-            <div class="row">
-                <app-video-grid [tabVideo]="tabVideo"></app-video-grid>
             </div>
-
+            <div class="col-2"></div>
         </div>
 
-        <!-- ------------------------- -->
 
-        <!-- pub de droite -->
+        <!-- --------------------------------------------------------------------- -->
-        <div class="col-2">
+
-            <div class="conteneurPubDroite">
+
-                <app-pub></app-pub>
+
-            </div>
+        <!-- [pub gauche] + [Grilles des videos] + [pub droite] -->
-        </div>
+        <mat-grid-list cols="11" rowHeight="75vh">
+
+            <!-- pub gauche -->
+            <mat-grid-tile colspan="2" rowspan="1" class="cellulePub">
+                <div class="conteneurPub">
+                    <app-advert [ad]="ad1"></app-advert>
+                </div>
+            </mat-grid-tile>
+
+            <!-- Grilles des videos -->
+            <mat-grid-tile colspan="7" rowspan="1" class="celluleGrilleVideo">
+                <div class="conteneurVideosGrid">
+                    <app-video-grid [tabVideo]="tabVideo"></app-video-grid>
+                </div>
+            </mat-grid-tile>
+
+            <!-- pub droite -->
+            <mat-grid-tile colspan="2" rowspan="1" class="cellulePub">
+                <div class="conteneurPub">
+                    <app-advert [ad]="ad1"></app-advert>
+                </div>
+            </mat-grid-tile>
+
+        </mat-grid-list>
 
     </div>
-
-    <!-- ---------------------------------------------------------------------------------------------------------- -->
-
-    <!-- pub du bas-->
-    <div class="row">
-        <div class="col-2"></div>
-        <div class="col-8">
-            <div class="conteneurPubBas">
-                <app-pub></app-pub>
-            </div>
-        </div>
-        <div class="col-2"></div>
-    </div>
-
 </div>

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

@@ -1,41 +1,69 @@
-.conteneur {
+.lightTheme {
-  text-align: center;
+  color: black;
-  max-width: 100%;
+  border-color: black;
-  max-height: 100vh;
+}
-  overflow-x: hidden;
+.darkTheme {
-  overflow-y: hidden;
+  color: white;
+  border-color: white;
 }
 
-.blocMilieu1 {
+.conteneur {
-  height: 70vh;
+  text-align: center;
-  margin-bottom: 70px
+  max-width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
 }
 
+
 .inputSearchBar {
   width: 50%;
+  font-size: x-large;
 }
-
 .btnRechercher {
   border: solid black 1px;
   border-radius: 5px;
+  font-size: x-large;
 }
 
-.conteneurPubGauche {
+
-  border: solid black 2px;
+.celluleGrilleVideo {
+  border: solid 4px;
+  border-radius: 5px;
+  width: 100%;
+}
+.lightTheme .celluleGrilleVideo{
+  border-color: black;
+  background-color: #f0f0f0;
+}
+.darkTheme .celluleGrilleVideo{
+  border-color: white;
+  background-color: #646464;
+}
+
+
+.conteneurVideosGrid {
   height: 75vh;
-  margin-left: 20px;
+  width: 100%;
 }
 
-.conteneurPubDroite {
+.cellulePub {
-  border: solid black 2px;
+  padding: 0px 10px 0px 10px;
+  width: 100%;
+  text-align: center;
+  justify-content: center;
+}
+
+.conteneurPub {
   height: 75vh;
-  margin-right: 20px;
+  text-align: center;
-}
+  justify-content: center;
-
+  vertical-align: middle;
-.conteneurPubBas {
+  display: block;
-  //width: 80%;
+  width: 75%;
-  //margin-left: auto;
+  margin-left: auto;
-  //margin-right: auto;
+  margin-right: auto;
-  height: 100%;
+  position: absolute;
-  border: solid black 2px;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
 }

src/app/user/search/page-search/page-search.component.ts

@@ -3,6 +3,8 @@ import {MessageService} from "../../../utils/services/message/message.service";
 import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
 import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
 import {Video} from "../../../utils/interfaces/video";
+import {Advert} from "../../../utils/interfaces/advert";
+import {ThemeService} from "../../../utils/services/theme/theme.service";
 
 
 
@@ -23,17 +25,21 @@ export class PageSearchComponent implements OnInit
     tabPlateform = TAB_PLATEFORM;
     tabVideo: Video[] = [];
     search: string = "";
+    ad1: Advert;
+    ad2: Advert;
 
 
     constructor( private messageService: MessageService,
-                 private fictitiousDatasService: FictitiousDatasService) { }
+                 private fictitiousDatasService: FictitiousDatasService,
+                 public themeService: ThemeService ) { }
 
 
     ngOnInit(): void
     {
         // --- FAUX CODE ---
-        this.tabVideo = this.fictitiousDatasService.getTabVideo(7);
+        this.tabVideo = this.fictitiousDatasService.getTabVideo(11);
-
+        this.ad1 = this.fictitiousDatasService.getAdvert();
+        this.ad2 = this.fictitiousDatasService.getAdvert();
 
         // --- VRAI CODE ---
         /*
@@ -42,9 +48,13 @@ export class PageSearchComponent implements OnInit
         let data = { search: "", plaateforms: tabPlateformName };
         this.messageService
             .sendMessage("user/searchVideo", data)
-            .subscribe(retour => {
+            .subscribe( retour => {
                 if(retour.status === "error") console.log(retour.data);
-                else this.tabVideo = retour.data;
+                else {
+                    this.tabVideo = retour.data.videos;
+                    this.ad1 = retour.data.ad1;
+                    this.ad2 = retour.data.ad2;
+                }
             });
         */
     }
@@ -53,9 +63,7 @@ export class PageSearchComponent implements OnInit
     onSearch()
     {
         // --- FAUX CODE ---
-        this.tabVideo = [];
+        this.tabVideo = this.fictitiousDatasService.getTabVideo(4);
-            //this.fictitiousDatasService.getTabVideo(4);
-
 
         // --- VRAI CODE ---
         /*
@@ -69,9 +77,20 @@ export class PageSearchComponent implements OnInit
             .sendMessage("user/searchVideo", data)
             .subscribe(retour => {
                 if(retour.status === "error") console.log(retour.data);
-                else this.tabVideo = retour.data;
+                else {
+                    this.tabVideo = retour.data.videos;
+                    this.ad1 = retour.data.ad1;
+                    this.ad2 = retour.data.ad2;
+                }
             });
         */
     }
 
+
+    tiles = [
+        {text: 'One', cols: 2, rows: 1, color: 'lightblue'},
+        {text: 'Two', cols: 7, rows: 1, color: 'lightgreen'},
+        {text: 'Three', cols: 2, rows: 1, color: 'lightpink'},
+    ];
+
 }

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

@@ -1,8 +1,11 @@
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-<div class="conteneur">
+
-    <iframe appIframeTracker [src]=safeUrl allowfullscreen (iframeClick)="onIframeClick(this.video.url)"></iframe><br/>
+<div [class]="themeService.getClassTheme()">
-    <span>{{video.title}}</span>
+    <div class="conteneur">
-    <button mat-icon-button (click)="onAdd()">
+        <iframe appIframeTracker [src]=safeUrl allowfullscreen (iframeClick)="onIframeClick(this.video.url)"></iframe><br/>
-        <mat-icon > add_circle </mat-icon>
+        <span>{{video.title}}</span>
-    </button>
+        <button mat-icon-button (click)="onAdd()">
+            <mat-icon > add_circle </mat-icon>
+        </button>
+    </div>
 </div>

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

@@ -1,7 +1,18 @@
 .conteneur {
   text-align: center;
-  border: solid black 2px;
+  border: solid 2px;
   border-radius: 5px;
   padding-top: 15px;
-  background-color: #f0f0f0;
+}
+
+.lightTheme .conteneur {
+  background-color: #ffffff;
+  border-color: black;
+  font-color: black;
+}
+
+.darkTheme .conteneur {
+  background-color: #c8c8c8;
+  border-color: #ffffff;
+  font-color: white;
 }

src/app/user/search/video-cell/video-cell.component.ts

@@ -6,6 +6,7 @@ import {
 import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
 import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
 import {Video} from "../../../utils/interfaces/video";
+import {ThemeService} from "../../../utils/services/theme/theme.service";
 
 @Component({
   selector: 'app-video-cell',
@@ -18,7 +19,8 @@ export class VideoCellComponent implements OnInit
     safeUrl;
 
     constructor( private videoUrlService: VideoUrlService,
-                 private addVideoToPlaylistsService: AddVideoToPlaylistsService ) {}
+                 private addVideoToPlaylistsService: AddVideoToPlaylistsService,
+                 public themeService: ThemeService) {}
 
     ngOnInit(): void
     {

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

@@ -1,11 +1,12 @@
 .conteneur {
-  border: solid black 2px;
+  height: 100%;
 }
 
 nav ul {
   overflow: hidden;
   overflow-y: scroll;
-  height: 66vh;
+  height: 75vh;
+  padding: 30px;
 }
 
 .ligne {

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

@@ -0,0 +1,6 @@
+<div [class]="themeService.getClassTheme()">
+    <div class="myContainer">
+        <span class="helper"></span>
+        <img [src]="'assets/pub/'+ad.images[idxImage].url" [alt]="ad.images[idxImage].url">
+    </div>
+</div>

src/app/utils/components/advert/advert.component.scss

@@ -0,0 +1,28 @@
+.myContainer {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+  border: solid 3px;
+  vertical-align: middle;
+}
+.lightTheme img {
+  border-color: black;
+}
+.darkTheme img {
+  border-color: white;
+}
+
+
+.helper {
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}

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

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PubComponent } from './pub.component';
+import { AdvertComponent } from './advert.component';
 
 describe('PubComponent', () => {
-  let component: PubComponent;
+  let component: AdvertComponent;
-  let fixture: ComponentFixture<PubComponent>;
+  let fixture: ComponentFixture<AdvertComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PubComponent ]
+      declarations: [ AdvertComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PubComponent);
+    fixture = TestBed.createComponent(AdvertComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -0,0 +1,27 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Advert} from "../../interfaces/advert";
+import {ThemeService} from "../../services/theme/theme.service";
+
+
+
+@Component({
+    selector: 'app-advert',
+    templateUrl: './advert.component.html',
+    styleUrls: ['./advert.component.scss']
+})
+export class AdvertComponent implements OnInit
+{
+    @Input() ad: Advert;
+    idxImage: number = 0;
+
+
+    constructor(public themeService: ThemeService) { }
+
+
+    ngOnInit(): void
+    {
+        const nbImages = this.ad.images.length;
+        this.idxImage = Math.floor(Math.random() * nbImages);
+    }
+
+}

src/app/utils/components/nav-bar/nav-bar.component.html

@@ -1,38 +1,41 @@
-<!-- pour les 3 roles -->
+<div [class]="themeService.getClassTheme()">
-<div *ngIf="pour === '3roles'">
-    <ul>
-        <li>
-            <a routerLink="/connexion" class="StreamNotFound"> StreamNotFound </a>
-        </li>
-        <li style="float:right; margin-right: 20px;">
-            <mat-slide-toggle></mat-slide-toggle>
-        </li>
-    </ul>
-</div>
 
+    <!-- pour les 3 roles -->
+    <div *ngIf="pour === '3roles'">
+        <ul>
+            <li>
+                <a routerLink="/connexion" class="StreamNotFound"> StreamNotFound </a>
+            </li>
+            <li style="float:right; margin-right: 20px;">
+                <mat-slide-toggle (click)="onClick()"></mat-slide-toggle>
+            </li>
+        </ul>
+    </div>
+
+    <!-- pour User -->
+    <div *ngIf="pour === 'user'">
+        <ul>
+            <li>
+                <a routerLink="/search" class="StreamNotFound"> StreamNotFound </a>
+            </li>
+            <li class="cliquable">
+                <a routerLink="/search"> Rechercher </a>
+            </li>
+            <li class="cliquable">
+                <a routerLink="/search"> Mes playlists </a>
+            </li>
+            <li class="cliquable">
+                <a routerLink="/search"> Historique </a>
+            </li>
+            <li style="float:right; margin-right: 20px;">
+                <a routerLink="/search">
+                    <mat-icon>settings</mat-icon>
+                </a>
+            </li>
+            <li style="float:right; margin-right: 20px;">
+                <mat-slide-toggle (click)="onClick()"></mat-slide-toggle>
+            </li>
+        </ul>
+    </div>
 
-<!-- pour User -->
-<div *ngIf="pour === 'user'">
-    <ul>
-        <li>
-            <a routerLink="/search" class="StreamNotFound"> StreamNotFound </a>
-        </li>
-        <li class="cliquable">
-            <a routerLink="/search"> Rechercher </a>
-        </li>
-        <li class="cliquable">
-            <a routerLink="/search"> Mes playlists </a>
-        </li>
-        <li class="cliquable">
-            <a routerLink="/search"> Historique </a>
-        </li>
-        <li style="float:right; margin-right: 20px;">
-            <a routerLink="/search">
-                <mat-icon>settings</mat-icon>
-            </a>
-        </li>
-        <li style="float:right; margin-right: 20px;">
-            <mat-slide-toggle></mat-slide-toggle>
-        </li>
-    </ul>
 </div>

src/app/utils/components/nav-bar/nav-bar.component.scss

@@ -24,6 +24,7 @@ ul {
   background-color: black;
   height: 70px;
   color: white;
+  border-bottom: solid 2px white;
 }
 
 
@@ -52,11 +53,11 @@ li a {
 
 
 ::ng-deep .mat-slide-toggle-thumb {
-  background-color: #ffffff;
+  background-color: #c8c8c8;
 }
 
 ::ng-deep .mat-slide-toggle-bar {
-  background-color: #c8c8c8;
+  background-color: #ffffff;
 }
 
 ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {

src/app/utils/components/nav-bar/nav-bar.component.ts

@@ -1,17 +1,19 @@
 import {Component, Input, OnInit} from '@angular/core';
+import {ThemeService} from "../../services/theme/theme.service";
 
 @Component({
   selector: 'app-nav-bar',
   templateUrl: './nav-bar.component.html',
   styleUrls: ['./nav-bar.component.scss']
 })
-export class NavBarComponent implements OnInit
+export class NavBarComponent
 {
   @Input() pour = "3roles";
 
-  constructor() { }
+  constructor(public themeService: ThemeService) { }
 
-  ngOnInit(): void {
+  onClick(): void {
+      this.themeService.isLightTheme = !this.themeService.isLightTheme
   }
 
 }

src/app/utils/components/pub/pub.component.html

@@ -1,6 +0,0 @@
-<div class="conteneur">
-    <span>debut</span>
-    <img src="assets/logo_plateforms/Youtube.png" width="40px" height="40px" alt="image Youtube logo">
-    <img src="assets/pub/Youtube.png" width="40px" height="40px" alt="image Youtube">
-    <span>fin</span>
-</div>

src/app/utils/components/pub/pub.component.ts

@@ -1,19 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-
-
-@Component({
-    selector: 'app-pub',
-    templateUrl: './pub.component.html',
-    styleUrls: ['./pub.component.scss']
-})
-export class PubComponent implements OnInit
-{
-
-    constructor() { }
-
-
-    ngOnInit(): void {
-    }
-
-}

src/app/utils/interfaces/advert.ts

@@ -0,0 +1,13 @@
+export interface Advert
+{
+    _id: string,
+    advertiser: string,
+    images: {
+        url: string,
+        description: string,
+    }[]
+    text: string,
+    subjectTarget: any[]
+    seen: number,
+    date: Date,
+}

src/app/utils/services/fictitiousDatas/fictitious-datas.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import {Video} from "../../interfaces/video";
 import {Playlist} from "../../interfaces/playlist";
+import {Advert} from "../../interfaces/advert";
 
 @Injectable({
     providedIn: 'root'
@@ -53,4 +54,22 @@ export class FictitiousDatasService
         return tabTabPlaylist
     }
 
+
+    getAdvert(): Advert
+    {
+        return {
+            _id: "monId",
+            advertiser: "nutella",
+            images: [
+                { url: "nutella_v_1.jpeg", description: "image nutella 1" },
+                { url: "nutella_v_2.png", description: "image nutella 2" },
+                { url: "nutella_v_3.jpg", description: "image nutella 3" }
+            ],
+            text: "Voici du bon nutella",
+            subjectTarget: [],
+            seen: 4,
+            date: new Date(),
+        }
+    }
+
 }

src/app/utils/services/theme/theme.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+  let service: ThemeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ThemeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/utils/services/theme/theme.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService
+{
+    isLightTheme = true;
+
+    getClassTheme(): string
+    {
+        if(this.isLightTheme) return "lightTheme" ;
+        else return "darkTheme"
+    }
+}

src/assets/svg.txt

@@ -0,0 +1,79 @@
+<div class="conteneur">
+
+    <!-- Navbar -->
+    <div style="margin-bottom: 50px">
+        <app-nav-bar pour="user"></app-nav-bar>
+    </div>
+
+    <!-- ---------------------------------------------------------------------------------------------------------- -->
+
+    <!-- bloc du milieu: niveau 1 -->
+    <div class="row blocMilieu1">
+
+        <!-- pub de gauche -->
+        <div class="col-2">
+            <div class="conteneurPubGauche">
+                <app-pub></app-pub>
+            </div>
+        </div>
+
+        <!-- ------------------------- -->
+
+        <!-- bloc du milieu: niveau 2 -->
+        <div class="col-8">
+
+            <!-- Search bar -->
+            <div class="row" style="margin-bottom: 10px">
+                <div>
+                    <input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search"> &nbsp;
+                    <button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
+                </div>
+            </div>
+
+            <!-- Site de streaming -->
+            <div class="row" style="margin-bottom: 10px">
+                <div>
+                    <span *ngFor="let plateforme of tabPlateform">
+                        &nbsp;
+                        <input type="checkbox" [id]="plateforme.name" [name]="plateforme.name" style="margin-left: 5px" [(ngModel)]="plateforme.isSelected">
+                        <img [src]="'/assets/logo_plateforms/'+plateforme.name+'.png'" alt="image" width="25px" height="25px" style="margin-left: 5px">
+                        <label [for]="plateforme.name" style="margin-left: 5px"> {{plateforme.name}}</label>
+                        &nbsp;
+                    </span>
+                </div>
+            </div>
+
+            <!-- Grille des videos -->
+            <div class="row">
+                <app-video-grid [tabVideo]="tabVideo"></app-video-grid>
+            </div>
+
+        </div>
+
+        <!-- ------------------------- -->
+
+        <!-- pub de droite -->
+        <div class="col-2">
+            <div class="conteneurPubDroite">
+                <app-pub></app-pub>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- ---------------------------------------------------------------------------------------------------------- -->
+
+    <!-- pub du bas
+    <div class="row">
+        <div class="col-2"></div>
+        <div class="col-8">
+            <div class="conteneurPubBas">
+                <app-pub></app-pub>
+            </div>
+        </div>
+        <div class="col-2"></div>
+    </div>
+    -->
+
+</div>
+

src/styles.scss

@@ -1,8 +1,19 @@
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 
 --root {
-  --main-color: #939;
+  --dark-color: #f0f0f0;
 }
-
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+.lightTheme {
+  background-color: white;
+  font-color: black;
+  border-color: black;
+}
+
+.darkTheme {
+  background-color: #323232;
+  font-color: white;
+  border-color: white;
+}