realisation de la page mesPlaylists

src/app/app-routing.module.ts

@@ -3,14 +3,18 @@ import { RouterModule, Routes } from '@angular/router';
 import {PageConnexionComponent} from './pourLes3Roles/page-connexion/page-connexion.component';
 import {PageRegisterComponent} from './pourLes3Roles/register/page-register/page-register.component';
 import {PageSearchComponent} from "./user/search/page-search/page-search.component";
+import {PageMyPlaylistsComponent} from "./user/myPlaylists/page-my-playlists/page-my-playlists.component";
+
 
 const routes: Routes = [
     { path: '', component: PageConnexionComponent },
     { path: 'connexion', component: PageConnexionComponent },
     { path: 'register', component: PageRegisterComponent },
-    { path: 'search', component: PageSearchComponent }
+    { path: 'search', component: PageSearchComponent },
+    { path: 'myPlaylists', component: PageMyPlaylistsComponent }
 ];
 
+
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]

src/app/app.module.ts

@@ -26,22 +26,31 @@ import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatSnackBarModule} from "@angular/material/snack-bar";
 import { IframeTrackerDirective } from './utils/directives/iframe-tracker/iframe-tracker.directive';
 import {MatGridListModule} from "@angular/material/grid-list";
+import { PageMyPlaylistsComponent } from './user/myPlaylists/page-my-playlists/page-my-playlists.component';
+import { PlaylistListComponent } from './user/myPlaylists/playlist-list/playlist-list.component';
+import {VideoListComponent} from "./user/myPlaylists/video-list/video-list.component";
+import { PopupCreatePlaylistComponent } from './utils/components/popup-create-playlist/popup-create-playlist.component';
 
 
 @NgModule({
-  declarations: [
+    declarations: [
-    AppComponent,
+        AppComponent,
-    PageConnexionComponent,
+        PageConnexionComponent,
-    PageRegisterComponent,
+        PageRegisterComponent,
-    NavBarComponent,
+        NavBarComponent,
-    PageSearchComponent,
+        PageSearchComponent,
-    PopupConfirmationComponent,
+        PopupConfirmationComponent,
-    AdvertComponent,
+        AdvertComponent,
-    VideoCellComponent,
+        VideoCellComponent,
-    VideoGridComponent,
+        VideoGridComponent,
-    PopupAddVideoToPlaylistsComponent,
+        PopupAddVideoToPlaylistsComponent,
-    IframeTrackerDirective,
+        IframeTrackerDirective,
-  ],
+        PageMyPlaylistsComponent,
+        VideoListComponent,
+        PlaylistListComponent,
+        VideoListComponent,
+        PopupCreatePlaylistComponent,
+    ],
     imports: [
         BrowserModule,
         AppRoutingModule,

src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.html

@@ -0,0 +1,38 @@
+<div [class]="themeService.getClassTheme()">
+    <div class="myContainer">
+
+        <!-- Navbar -->
+        <div style="margin-bottom: 50px">
+            <app-nav-bar pour="user"></app-nav-bar>
+        </div>
+
+        <!-- --------------------------------------------------------------------- -->
+
+        <!-- [liste des videos] + [liste des playlist] + [pub] -->
+        <mat-grid-list cols="10" rowHeight="85vh">
+
+            <!-- liste des videos -->
+            <mat-grid-tile colspan="4" rowspan="1" class="celluleListeVideo">
+                <div class="videoListContainer">
+                    <app-video-list [playlist]="playlist"></app-video-list>
+                </div>
+            </mat-grid-tile>
+
+            <!-- liste des playlist -->
+            <mat-grid-tile colspan="4" rowspan="1" class="celluleListePlaylist">
+                <div class="playlistListContainer">
+                    <app-playlist-list [allPlaylists]="allPlaylists" (eventEmitter)="transmitToVideoList($event)"></app-playlist-list>
+                </div>
+            </mat-grid-tile>
+
+            <!-- pub -->
+            <mat-grid-tile colspan="2" rowspan="1" class="cellulePub">
+                <div class="conteneurPub">
+                    <app-advert [ad]="ad"></app-advert>
+                </div>
+            </mat-grid-tile>
+
+        </mat-grid-list>
+
+    </div>
+</div>

src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.scss

@@ -0,0 +1,51 @@
+.lightTheme {
+  border-color: black;
+}
+.darkTheme {
+  border-color: white;
+}
+.myContainer {
+  text-align: center;
+  max-width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+// Liste des vidéos -------------------------------------------------
+
+.celluleListeVideo {
+  margin: 0px;
+}
+
+// Liste des playlists ---------------------------------------------
+
+.celluleListePlaylist {
+  margin: 0px;
+}
+
+.playlistListContainer {
+}
+
+// Pub -------------------------------------------------------------
+
+.cellulePub {
+  padding: 0px 10px 0px 10px;
+  width: 100%;
+  text-align: center;
+  justify-content: center;
+}
+
+.conteneurPub {
+  height: 85vh;
+  text-align: center;
+  justify-content: center;
+  vertical-align: middle;
+  display: block;
+  width: 75%;
+  margin-left: auto;
+  margin-right: auto;
+  position: absolute;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}

src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.spec.ts

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

src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import {ThemeService} from "../../../utils/services/theme/theme.service";
+import {Advert} from "../../../utils/interfaces/advert";
+import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
+import {MessageService} from "../../../utils/services/message/message.service";
+import {Playlist} from "../../../utils/interfaces/playlist";
+
+
+@Component({
+    selector: 'app-page-my-playlists',
+    templateUrl: './page-my-playlists.component.html',
+    styleUrls: ['./page-my-playlists.component.scss']
+})
+export class PageMyPlaylistsComponent implements OnInit
+{
+    allPlaylists: Playlist[];   // toutes les playlists
+    ad: Advert;                 // pub
+    playlist: Playlist;         // la playlist sélectionnée
+
+
+    constructor( public themeService: ThemeService,
+                 private messageService: MessageService,
+                 private fictitioousData: FictitiousDatasService ) { }
+
+
+    ngOnInit(): void
+    {
+        // --- FAUX CODE ---
+        this.allPlaylists = this.fictitioousData.getTabPlaylist(10, 10);
+        this.ad = this.fictitioousData.getAdvert();
+
+        // --- VRAI CODE ---
+        /*
+        this.messageService
+            .sendMessage("user/get/playlists", null)
+            .subscribe( retour => {
+
+                if(retour.status === "error") console.log(retour.data);
+                else {
+                    this.tabPlaylists = retour.data.playlists;
+                    this.ad = retour.data.ad;
+                }
+            })
+        */
+    }
+
+    transmitToVideoList(playlist: Playlist): void
+    {
+        this.playlist = playlist;
+    }
+
+}

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

@@ -0,0 +1,36 @@
+<div [class]="themeService.getClassTheme()">
+    <div class="myContainer">
+
+        <!-- Search bar -->
+        <div class="row" style="margin: 0px">
+            <div class="searchBarContainer">
+                <input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search" (ngModelChange)="whileSearch()"> &nbsp;
+                <!--
+                <button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
+                -->
+            </div>
+        </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)">
+                        <span class="playlistName"> {{playlist.name}} </span><br>
+                        <span class="playListCount"> {{playlist.videos.length}} vidéos </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+
+        <!-- Bouton creer playlist-->
+        <div class="row" style="margin: 0px">
+            <div class="btnCreerPlaylistContainer">
+                <button class="btnCreerPlaylist" (click)="onCreatePlaylist()"> Creer playlist </button>
+            </div>
+        </div>
+
+    </div>
+</div>

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

@@ -0,0 +1,75 @@
+.myContainer {
+  background-color: white ;
+  text-align: center;
+  width: 35vw;
+  height: 79vh;
+  margin: 3vh 0vh 3vh 0vh;
+  padding: 0px;
+  border: solid 2px black;
+}
+
+// SearchBar -----------------------------------------------------------
+
+.searchBarContainer {
+  background-color: #dcdcdc;
+  border-bottom: solid 2px black;
+  height: 5vh;
+  padding: 15px;
+}
+
+.inputSearchBar {
+  width: 50%;
+}
+.btnRechercher {
+  border: solid black 1px;
+  border-radius: 5px;
+}
+
+// Liste des playlists -------------------------------------------------
+
+.playlistListContainer {
+  max-width: 100%;
+  height: 70vh;
+  overflow-y: scroll;
+  padding: 0px;
+}
+
+.playlistContainer {
+  max-width: 100%;
+  padding: 0px;
+}
+
+.btnPlaylist {
+  background-color: white;
+  padding: 20px;
+  border-bottom: solid 2px black;
+  width: 100%;
+}
+.btnPlaylist:hover {
+  background-color: #f0f0f0;
+}
+
+.playListCount {
+  color: gray;
+  font-style: italic;
+}
+
+// Bouton creer playlist -------------------------------------------------
+
+.btnCreerPlaylistContainer {
+  height: 4vh;
+  margin: 0px;
+  padding: 0px;
+}
+
+.btnCreerPlaylist {
+  background-color: #dcdcdc;
+  border-top: solid 2px black;
+  border-bottom: solid 2px black;
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+}
+.btnCreerPlaylist:hover {
+  background-color: #969696;
+}

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

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

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

@@ -0,0 +1,67 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {ThemeService} from "../../../utils/services/theme/theme.service";
+import {Playlist} from "../../../utils/interfaces/playlist";
+import {MessageService} from "../../../utils/services/message/message.service";
+import {MatDialog} from "@angular/material/dialog";
+import {PopupAddVideoToPlaylistsComponent} from "../../../utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {PopupCreatePlaylistComponent} from "../../../utils/components/popup-create-playlist/popup-create-playlist.component";
+
+
+
+@Component({
+  selector: 'app-playlist-list',
+  templateUrl: './playlist-list.component.html',
+  styleUrls: ['./playlist-list.component.scss']
+})
+export class PlaylistListComponent implements OnInit
+{
+    @Input() allPlaylists: Playlist[] = [];                  // toutes les playlists
+    @Output() eventEmitter = new EventEmitter<Playlist>();   // pour envoyer au parent la playlist selectionner
+    search: string = "" ;                                    // contenu de la barre de recherche
+    tabPlaylist: Playlist[] = [];                            // playlist affichées
+
+
+    constructor( public themeService: ThemeService,
+                 public dialog: MatDialog,
+                 public snackBar: MatSnackBar ) { }
+
+
+    ngOnInit(): void
+    {
+        this.tabPlaylist = [].concat(this.allPlaylists);
+    }
+
+
+    whileSearch()
+    {
+        console.log("whileSearch");
+        this.tabPlaylist = [];
+        for(let playlist of this.allPlaylists)
+        {
+            if(playlist.name.includes(this.search)) this.tabPlaylist.push(playlist);
+        }
+    }
+
+
+    onCreatePlaylist(): void
+    {
+        const config = { width: '15%', data: this.tabPlaylist };
+        this.dialog
+            .open(PopupCreatePlaylistComponent, config )
+            .afterClosed()
+            .subscribe(playlist => {
+
+                const config = { duration: 1000, 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);
+                }
+            });
+    }
+
+}

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

@@ -0,0 +1,74 @@
+<div [class]="themeService.getClassTheme()">
+    <div class="myContainer">
+
+        <!-- Bordure haute -->
+        <div class="row" style="margin: 0px; padding: 0px">
+            <div class="topBorder">
+
+                <!-- Playlist existe ? -->
+                <div *ngIf="(playlist !== null) && (playlist !== undefined); then ok1 else nope1"></div>
+
+                <!-- oui -->
+                <ng-template #ok1>
+                    <span class="spanPlayListTitle"> {{playlist.name}} </span>
+                </ng-template>
+
+                <!-- non -->
+                <ng-template #nope1>
+                    <span class="spanPlayListTitle"> Aucune playlist selectionnée </span>
+                </ng-template>
+
+            </div>
+        </div>
+
+
+        <!-- --------------------------------------------------------------------------------------------------------------------- -->
+
+
+        <!-- Liste des videos -->
+        <div class="row" style="margin: 0px; padding: 0px">
+            <div class="listVideoContainer">
+
+                <!-- Playlist existe ? -->
+                <div *ngIf="(playlist !== null) && (playlist !== undefined); then ok2 else nope2"></div>
+
+                <!-- oui -->
+                <ng-template #ok2>
+                    <div *ngFor="let video of playlist.videos ; let i = index" class="videoContainer">
+                        <!-- bouton add -->
+                        <button mat-icon-button (click)="onAdd(video)">
+                            <mat-icon > add_circle </mat-icon>
+                        </button>
+                        <!-- video -->
+                        <iframe appIframeTracker
+                                [src]=videoUrlService.safeUrl(this.video.url)
+                                allowfullscreen
+                                (iframeClick)="onIframeClick(this.video.url)"></iframe>
+                        <!-- bouton delete -->
+                        <button mat-icon-button (click)="onDelete(video, i)">
+                            <mat-icon>delete</mat-icon>
+                        </button><br/>
+                        <!-- titre video -->
+                        <span>{{video.title}}</span>
+                    </div>
+                </ng-template>
+
+                <!-- non -->
+                <ng-template #nope2>
+                    <div></div>
+                </ng-template>
+
+            </div>
+        </div>
+
+
+        <!-- --------------------------------------------------------------------------------------------------------------------- -->
+
+
+        <!-- Bordure basse -->
+        <div class="row" style="margin: 0px; padding: 0px">
+            <div class="bottomBorder"></div>
+        </div>
+
+    </div>
+</div>

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

@@ -0,0 +1,52 @@
+.myContainer {
+  background-color: white ;
+  text-align: center;
+  width: 35vw;
+  height: 79vh;
+  margin: 3vh 0vh 3vh 0vh;
+  padding: 0px;
+  border: solid 1px black;
+}
+
+// TopBorder --------------------------------------------------------
+
+.topBorder {
+  height: 4vh;
+  background-color: #dcdcdc;
+  text-align: left;
+  padding: 7px;
+  display: inline-block;
+  border-bottom: solid 1px black;
+}
+
+.spanPlayListTitle {
+  height: 100%;
+  padding: 0px;
+  font-size: x-large;
+  font-weight: bold;
+}
+
+
+
+// Liste des videos ------------------------------------------------
+
+.listVideoContainer {
+  height: 73vh;
+  background-color: white;
+  padding: 0px;
+  overflow-y: scroll;
+}
+
+.videoContainer {
+  border-bottom: solid 2px black;
+  padding: 25px;
+}
+
+// BottomBorder --------------------------------------------------------
+
+.bottomBorder {
+  height: 2vh;
+  background-color: #dcdcdc;
+  border-top: solid 1px black;
+  border-bottom: solid 1px black;
+}

src/app/user/myPlaylists/video-list/video-list.component.spec.ts

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

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

@@ -0,0 +1,69 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ThemeService} from "../../../utils/services/theme/theme.service";
+import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
+import {Video} from "../../../utils/interfaces/video";
+import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
+import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
+import {MessageService} from "../../../utils/services/message/message.service";
+import {Playlist} from "../../../utils/interfaces/playlist";
+import {MatSnackBar} from "@angular/material/snack-bar";
+
+
+
+@Component({
+    selector: 'app-video-list',
+    templateUrl: './video-list.component.html',
+    styleUrls: ['./video-list.component.scss']
+})
+export class VideoListComponent
+{
+    @Input() playlist: Playlist;
+
+
+    constructor( private messageService: MessageService,
+                 public themeService: ThemeService,
+                 private fictitiousDatasService: FictitiousDatasService,
+                 public videoUrlService: VideoUrlService,
+                 private addVideoToPlaylistService: AddVideoToPlaylistsService,
+                 private snackBar: MatSnackBar ) { }
+
+
+    onAdd(video: Video): void
+    {
+        this.addVideoToPlaylistService.run(video);
+    }
+
+
+    onDelete(video0: Video, indexVideo: number): void
+    {
+        // --- FAUX CODE ---
+        let message = "La video a bien été supprimé de la playlist" ;
+        this.playlist.videos.splice(indexVideo, 1);
+        const config = { duration: 1000, panelClass: "custom-class" };
+        this.snackBar.open( message, "", config);
+
+        // --- VRAI CODE ---
+        /*
+        this.messageService
+            .sendMessage("user/delete/video", {video: video0, playlist: this.playlist})
+            .subscribe( retour => {
+
+                let message = "" ;
+                if(retour.status === "error") message = "Echec de l'opération" ;
+                else {
+                    message = "La video a bien été supprimé de la playlist" ;
+                    this.playlist.videos.splice(index, 1);
+                }
+                const config = { duration: 1000, panelClass: "custom-class" };
+                this.snackBar.open( message, "", config);
+            })
+        */
+    }
+
+
+    onIframeClick(videoUrl: string): void
+    {
+        console.log(videoUrl)
+    }
+
+}

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

@@ -1,5 +1,5 @@
 <div [class]="themeService.getClassTheme()">
-    <div class="conteneur">
+    <div class="myContainer">
 
         <!-- Navbar -->
         <div style="margin-bottom: 50px">

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

@@ -6,8 +6,7 @@
   color: white;
   border-color: white;
 }
-
+.myContainer {
-.conteneur {
   text-align: center;
   max-width: 100vw;
   height: 100vh;

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

@@ -22,7 +22,7 @@
                 <a routerLink="/search"> Rechercher </a>
             </li>
             <li class="cliquable">
-                <a routerLink="/search"> Mes playlists </a>
+                <a routerLink="/myPlaylists"> Mes playlists </a>
             </li>
             <li class="cliquable">
                 <a routerLink="/search"> Historique </a>

src/app/utils/components/popup-create-playlist/popup-create-playlist.component.html

@@ -0,0 +1,16 @@
+<div style="text-align: center; margin: 0px; padding: 0px">
+
+    <div style="margin: 0px; padding: 0px">
+        <mat-form-field appearance="fill" style="margin: 0px; padding: 0px">
+            <mat-label> Nom de la playlist </mat-label>
+            <input matInput [(ngModel)]="name" style="width: 100%">
+        </mat-form-field>
+        <span *ngIf="hasError" class="mat-error"> {{errorMessage}} </span>
+    </div>
+
+    <div style="text-align: right ; margin: 0px; padding: 0px">
+        <button mat-button (click)="onAnnuler()">Annuler</button>
+        <button mat-button (click)="onValider()">Creer</button>
+    </div>
+
+</div>

src/app/utils/components/popup-create-playlist/popup-create-playlist.component.spec.ts

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

src/app/utils/components/popup-create-playlist/popup-create-playlist.component.ts

@@ -0,0 +1,92 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {MessageService} from "../../services/message/message.service";
+import {Playlist} from "../../interfaces/playlist";
+
+
+
+@Component({
+    selector: 'app-popup-create-playlist',
+    templateUrl: './popup-create-playlist.component.html',
+    styleUrls: ['./popup-create-playlist.component.scss']
+})
+export class PopupCreatePlaylistComponent implements OnInit
+{
+    name: string = "" ;
+    hasError: boolean = false;
+    tabNomPlaylist: string[] = [];
+    errorMessage: string = "" ;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupCreatePlaylistComponent>,
+               @Inject(MAT_DIALOG_DATA) public data,
+               private messageService: MessageService) { }
+
+
+    ngOnInit(): void
+    {
+        this.tabNomPlaylist = this.data.map( playlist0 => playlist0.name );
+    }
+
+
+    onValider(): void
+    {
+        // --- FAUX CODE ---
+        //
+        this.checkError();
+        if(!this.hasError)
+        {
+            const playlist: Playlist = {
+                _id: "monId",
+                user: null,
+                name: this.name,
+                videos: [],
+            };
+            this.dialogRef.close(playlist);
+        }
+
+        // --- VRAI CODE ---
+        /*
+        this.checkError();
+        if(!this.hasError)
+        {
+            this.messageService
+                .sendMessage("user/create/playlist", {name: this.data.name})
+                .subscribe(retour => {
+
+                    if (retour.status === "error") {
+                        console.log(retour);
+                        this.dialogRef.close(null);
+                    } else {
+                        this.dialogRef.close(retour.data.playlist);
+                    }
+                });
+        }
+        */
+    }
+
+
+    checkError(): void
+    {
+        if(this.name === "") {
+            this.errorMessage = "Le nom ne peut pas être vide" ;
+            this.hasError = true;
+        }
+        else if(this.tabNomPlaylist.includes(this.name)){
+            this.errorMessage = "Ce nom est déjà utilisé" ;
+            this.hasError = true;
+        }
+        else {
+            this.hasError = false;
+            this.errorMessage = "" ;
+        }
+        console.log("em:" + this.errorMessage);
+    }
+
+
+    onAnnuler(): void
+    {
+        this.dialogRef.close(null);
+    }
+
+}

src/app/utils/interfaces/playlist.ts

@@ -5,6 +5,5 @@ export interface Playlist
     _id: string,
     user: any,
     name: string,
-    count: number
     videos: Video[]
 }

src/app/utils/services/addVideoToPlaylists/add-video-to-playlists.service.ts

@@ -26,7 +26,7 @@ export class AddVideoToPlaylistsService
         this._video = video0;
         const retour = {
             status: "success",
-            data: this.fictitiousDatasService.getTabPlaylist(4),
+            data: this.fictitiousDatasService.getTabPlaylist(4, 5),
         }
         this.afterReceivingPlaylists(retour)
     }

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

@@ -3,6 +3,89 @@ import {Video} from "../../interfaces/video";
 import {Playlist} from "../../interfaces/playlist";
 import {Advert} from "../../interfaces/advert";
 
+
+
+const TAB_VIDEO = [
+    {
+        _id: "Mowgli",
+        url: "https://www.youtube.com/watch?v=medPORJ8KO0",
+        title: "PNL - Mowgli",
+        description: "dans l'album Que la famille",
+        views: 11,
+    },
+    {
+        _id: "Mexico",
+        url: "https://www.youtube.com/watch?v=LZx6oeNeoWM",
+        title: "PNL - Mexico",
+        description: "dans l'album Monde chico",
+        views: 22,
+    },
+    {
+        _id: "Luz de luna",
+        url: "https://www.youtube.com/watch?v=fGoPhSV2Jic",
+        title: "PNL - Luz de luna",
+        description: "dans l'album Dans la legende",
+        views: 33,
+    },
+    {
+        _id: "Blanka",
+        url: "https://www.youtube.com/watch?v=u8bHjdljyLw",
+        title: "PNL - Blanka",
+        description: "dans l'album Deux frères",
+        views: 44,
+    },
+    {
+        _id: "Mowgli 2",
+        url: "https://www.dailymotion.com/video/x7ahxdn",
+        title: "PNL - Mowgli",
+        description: "exclu",
+        views: 55,
+    },
+    {
+        _id: "Etre humain",
+        url: "https://www.youtube.com/watch?v=gfVo39B92Ow",
+        title: "Nekfeu - Etre humain",
+        description: "dans l'album feu",
+        views: 66,
+    },
+    {
+        _id: "Humanoide",
+        url: "https://www.youtube.com/watch?v=MiyIg__WNOw",
+        title: "Nekfeu - Humanoide",
+        description: "dans l'album Cyborg",
+        views: 77,
+    },
+    {
+        _id: "Dernier soupir",
+        url: "https://youtu.be/0GqjIF-4QQM?list=PLqeKQSn3LuAmpF-uIu39RIQRQkUzVol5l",
+        title: "Nekfeu - Dernier soupir",
+        description: "dans l'album Les etoiles vagabondes",
+        views: 88,
+    },
+    {
+        _id: "Dernier soupir",
+        url: "https://youtu.be/0GqjIF-4QQM?list=PLqeKQSn3LuAmpF-uIu39RIQRQkUzVol5l",
+        title: "Nekfeu - Dernier soupir",
+        description: "dans l'album Les etoiles vagabondes",
+        views: 99,
+    },
+    {
+        _id: "Les prélis",
+        url: "https://www.dailymotion.com/video/x4trtkd",
+        title: "Columbine - Les prélis",
+        description: "dans l'album Enfant terrible",
+        views: 100,
+    },
+    {
+        _id: "Pierre feuille ciseau",
+        url: "https://www.dailymotion.com/video/x6agl6i",
+        title: "Columbine - Pierre feuille ciseau",
+        description: "exclu",
+        views: 111,
+    },
+]
+
+
 @Injectable({
     providedIn: 'root'
 })
@@ -14,39 +97,29 @@ export class FictitiousDatasService
     getTabVideo(n: number): Video[]
     {
         let tabVideo = [];
+        const l = TAB_VIDEO.length;
 
-        let url0 = "" ;
         for(let i=0 ; i<n ; i++)
         {
-            if(i%3 === 0) url0 = "https://www.youtube.com/watch?v=medPORJ8KO0";
+            const idx = Math.floor(Math.random() * l);
-            else if(i%3 === 1) url0 = "https://youtu.be/medPORJ8KO0";
+            tabVideo.push(TAB_VIDEO[idx]);
-            else url0 = "https://www.dailymotion.com/video/x7ahxdn";
-            const video: Video = {
-                _id: i.toString(),
-                url: url0,
-                title: "video_" + i,
-                description: "blablabla",
-                views: 59,
-            }
-            tabVideo.push(video)
         }
 
         return tabVideo;
     }
 
 
-    getTabPlaylist(n: number)
+    getTabPlaylist(nbPlaylist: number, nbVideoMax: number)
     {
         let tabTabPlaylist: Playlist[] = [];
 
-        for (let i = 0; i < n; i++)
+        for (let i = 0; i < nbPlaylist; i++)
         {
             let playlist: Playlist = {
                 _id: i.toString(),
                 user: null,
                 name: "playlist_"+i.toString(),
-                count: 3,
+                videos: this.getTabVideo(Math.floor(Math.random() * nbVideoMax))
-                videos: []
             }
             tabTabPlaylist.push(playlist);
         }