continuation de la page search

src/app/app.component.scss

@@ -0,0 +1,7 @@
+::ng-deep snack-bar-container.custom-class {
+  //background: yellow;
+}
+::ng-deep .custom-class .mat-simple-snackbar {
+  //color: green;
+  justify-content: center;
+}

src/app/app.module.ts

@@ -23,6 +23,7 @@ import {MatInputModule} from "@angular/material/input";
 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";
 
 
 @NgModule({
@@ -36,7 +37,7 @@ import {MatFormFieldModule} from "@angular/material/form-field";
     PubComponent,
     VideoCellComponent,
     VideoGridComponent,
-    PopupAddVideoToPlaylistsComponent
+    PopupAddVideoToPlaylistsComponent,
   ],
     imports: [
         BrowserModule,
@@ -51,7 +52,8 @@ import {MatFormFieldModule} from "@angular/material/form-field";
         MatInputModule,
         MatDividerModule,
         MatCheckboxModule,
-        MatFormFieldModule
+        MatFormFieldModule,
+        MatSnackBarModule
     ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {MessageService} from "../../../utils/services/message/message.service";
 import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
-import {PlaylistService} from "../../../utils/services/playlist/playlist.service";
+import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
 import {Video} from "../../../utils/interfaces/video";
 
 
@@ -31,8 +31,8 @@ export class PageSearchComponent implements OnInit
 
     ngOnInit(): void
     {
-        // --- DONNEES FICTIVES ---
+        // --- FAUX CODE ---
-        this.tabVideo = this.fictitiousDatasService.load_pageSeach(7);
+        this.tabVideo = this.fictitiousDatasService.getTabVideo(7);
 
 
         // --- VRAI CODE ---
@@ -52,11 +52,9 @@ export class PageSearchComponent implements OnInit
 
     onSearch()
     {
-        // --- DONNEES FICTIVES ---
+        // --- FAUX CODE ---
-        console.log(this.tabPlateform)
         this.tabVideo = [];
-        console.log(this.tabVideo)
+            //this.fictitiousDatasService.getTabVideo(4);
-            //this.fictitiousDatasService.load_pageSeach(4);
 
 
         // --- VRAI CODE ---
@@ -66,7 +64,7 @@ export class PageSearchComponent implements OnInit
         {
             if(plateform.isSelected) tabPlateformName.push(plateform.name);
         }
-        let data = { search: "", plaateforms: tabPlateformName };
+        let data = { "search": this.search, "plateforms": tabPlateformName };
         this.messageService
             .sendMessage("user/searchVideo", data)
             .subscribe(retour => {

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

@@ -1,5 +1,7 @@
 .conteneur {
   text-align: center;
-  //border: solid black 2px;
+  border: solid black 2px;
-  //border-radius: 5px;
+  border-radius: 5px;
+  padding-top: 15px;
+  background-color: #f0f0f0;
 }

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

@@ -1,6 +1,16 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    HostListener,
+    Input,
+    OnInit,
+    Output,
+    Renderer2,
+    ViewChild
+} from '@angular/core';
 import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
-import {PlaylistService} from "../../../utils/services/playlist/playlist.service";
+import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
 import {Video} from "../../../utils/interfaces/video";
 
 
@@ -16,7 +26,7 @@ export class VideoCellComponent implements OnInit
 
 
     constructor( private videoUrlService: VideoUrlService,
-                 private playlistService: PlaylistService ) {}
+                 private addVideoToPlaylistsService: AddVideoToPlaylistsService ) {}
 
 
     ngOnInit(): void
@@ -27,7 +37,7 @@ export class VideoCellComponent implements OnInit
 
     onAdd(): void
     {
-        this.playlistService.addVideoToPlaylists(this.video)
+        this.addVideoToPlaylistsService.run(this.video);
-        console.log("onAdd:" + this.video.title);
     }
+
 }

src/app/utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component.html

@@ -36,6 +36,6 @@
 
 
 <mat-dialog-actions style="justify-content: flex-end;">
-    <button mat-button mat-dialog-close>Cancel</button>
+    <button mat-button mat-dialog-close (click)="onAnnuler()">Annuler</button>
-    <button mat-button [mat-dialog-close]="true" cdkFocusInitial (click)="onValider">Valider</button>
+    <button mat-button [mat-dialog-close]="true" cdkFocusInitial (click)="onValider()">Valider</button>
 </mat-dialog-actions>

src/app/utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component.ts

@@ -1,6 +1,9 @@
 import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {Video} from "../../interfaces/video";
+import {MessageService} from "../../services/message/message.service";
+
+
 
 @Component({
     selector: 'app-popup-add-video-to-playlists',
@@ -14,23 +17,51 @@ export class PopupAddVideoToPlaylistsComponent implements OnInit
     goToCreatePlaylist = false;
     newPlaylistName = "";
 
+
     constructor( public dialogRef: MatDialogRef<PopupAddVideoToPlaylistsComponent>,
-                 @Inject(MAT_DIALOG_DATA) public data ) { }
+                 @Inject(MAT_DIALOG_DATA) public data,
+                 private messageService: MessageService) { }
 
 
     ngOnInit(): void
     {
         this.video = this.data.video;
-        const tabPlaylist = this.data.playlists;
+        for(let playlist of this.data.playlists)
-        for(let playlist of tabPlaylist)
         {
             playlist["isSelected"] = false;
             this.tabPlaylistAndBool.push(playlist);
         }
     }
 
+
     onValider(): void
     {
+        const tabPlaylist = [];
+        for(let playlist of this.tabPlaylistAndBool)
+        {
+            if(playlist.isSelected) {
+                delete playlist["isSelected"];
+                tabPlaylist.push(playlist);
+            }
+        }
+
+        // --- FAUX CODE ---
+        this.dialogRef.close("success");
+
+        // --- VRAI CODE ---
+        /*
+        if(!this.goToCreatePlaylist) this.newPlaylistName = "";
+        const data = { "video": this.video,  "playlists": tabPlaylist, "newPlaylistName": this.newPlaylistName };
+        this.messageService
+            .sendMessage("user/add/vidéo", data)
+            .subscribe( retour => { this.dialogRef.close(retour.status) });
+        */
+    }
+
+
+    onAnnuler(): void
+    {
+        this.dialogRef.close("annulation")
+    }
 
 }
-}

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

@@ -1,3 +1,6 @@
 <div class="conteneur">
-    <h1> Je suis une pub </h1>
+    <span>debut</span>
+    <img src="assets/logo_plateforms/Youtube.png" width="40px" height="40px">
+    <img src="assets/ads/Youtube.png" width="40px" height="40px">
+    <span>fin</span>
 </div>

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

@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { PlaylistService } from './playlist.service';
+import { AddVideoToPlaylistsService } from './add-video-to-playlists.service';
 
 describe('PlaylistService', () => {
-  let service: PlaylistService;
+  let service: AddVideoToPlaylistsService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(PlaylistService);
+    service = TestBed.inject(AddVideoToPlaylistsService);
   });
 
   it('should be created', () => {

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

@@ -0,0 +1,85 @@
+import { Injectable } from '@angular/core';
+import {MessageService} from "../message/message.service";
+import {MatDialog} from "@angular/material/dialog";
+import {PopupAddVideoToPlaylistsComponent} from "../../components/popup-add-video-to-playlists/popup-add-video-to-playlists.component";
+import {FictitiousDatasService} from "../fictitiousDatas/fictitious-datas.service";
+import {Video} from "../../interfaces/video";
+import {MatSnackBar} from "@angular/material/snack-bar";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AddVideoToPlaylistsService
+{
+    private _video: Video;
+
+
+    constructor( private messageService: MessageService,
+                 public dialog: MatDialog,
+                 private fictitiousDatasService: FictitiousDatasService,
+                 private snackBar: MatSnackBar ) { }
+
+
+    // --- FAUX CODE ---
+    run(video0: Video): void
+    {
+        this._video = video0;
+        const retour = {
+            status: "success",
+            data: this.fictitiousDatasService.getTabPlaylist(4),
+        }
+        this.afterReceivingPlaylists(retour)
+    }
+
+
+    // --- VRAI CODE ---
+    /*
+    run(video0: Video): void
+    {
+        this._video = video0;
+        this.messageService
+            .sendMessage('user/get/playlists', null)
+            .subscribe( retour => { this.afterReceivingPlaylists(retour) });
+    }
+    */
+
+
+    private afterReceivingPlaylists(retour): void
+    {
+        if(retour.status === "error") console.log(retour.data);
+        else
+        {
+            const config = {
+                width: '30%',
+                data: { video: this._video, playlists: retour.data }
+            };
+            this.dialog
+                .open(PopupAddVideoToPlaylistsComponent, config )
+                .afterClosed()
+                .subscribe(retour => { this.afterClosingDialog(retour); });
+        }
+    }
+
+
+    private afterClosingDialog(retour): void
+    {
+        let message = "" ;
+        switch (retour)
+        {
+            case "error":
+                message = "Echec de l'opération  ❌" ;
+                break;
+            case "success":
+                message = "La vidéo a bien été ajoutée  ✔" ;
+                break;
+            case "annulation":
+            case null:
+            case undefined:
+                message = "Annulation de l'opération" ;
+                break;
+        }
+        const config = { duration: 1000, panelClass: "custom-class" };
+        this.snackBar.open( message, "", config);
+    }
+
+}

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

@@ -10,7 +10,7 @@ export class FictitiousDatasService
     constructor() { }
 
 
-    load_pageSeach(n: number): Video[]
+    getTabVideo(n: number): Video[]
     {
         let tabVideo = [];
 
@@ -34,16 +34,16 @@ export class FictitiousDatasService
     }
 
 
-    getTabPlaylist()
+    getTabPlaylist(n: number)
     {
         let tabTabPlaylist: Playlist[] = [];
 
-        for (let i = 0; i < 4; i++)
+        for (let i = 0; i < n; i++)
         {
             let playlist: Playlist = {
                 _id: i.toString(),
                 user: null,
-                name: "name_"+i.toString(),
+                name: "playlist_"+i.toString(),
                 count: 3,
                 videos: []
             }

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

@@ -1,60 +0,0 @@
-import { Injectable } from '@angular/core';
-import {MessageService} from "../message/message.service";
-import {MatDialog} from "@angular/material/dialog";
-import {PopupAddVideoToPlaylistsComponent} from "../../components/popup-add-video-to-playlists/popup-add-video-to-playlists.component";
-import {FictitiousDatasService} from "../fictitiousDatas/fictitious-datas.service";
-import {Video} from "../../interfaces/video";
-
-@Injectable({
-    providedIn: 'root'
-})
-export class PlaylistService
-{
-
-    constructor( private messageService: MessageService,
-                 public dialog: MatDialog,
-                 private fictitiousDatasService: FictitiousDatasService ) { }
-
-
-    addVideoToPlaylists(video0: Video): void
-    {
-        // --- DONNEES FICTIVES ---
-        const config = {
-            width: '30%',
-            data: {
-                video: video0,
-                playlists: this.fictitiousDatasService.getTabPlaylist()
-            }
-        }
-        this.dialog
-            .open(PopupAddVideoToPlaylistsComponent, config)
-            .afterClosed()
-            .subscribe(result => {});
-
-
-        // --- VRAI CODE ---
-        /*
-        this.messageService
-            .sendMessage('user/get/playlists', null)
-            .subscribe( retour => {
-
-                if(retour.status === "error") console.log(retour.data);
-                else
-                {
-                    const config = {
-                        width: '30%',
-                        data: {
-                            video: video0,
-                            playlists: retour.data,
-                        }
-                    };
-                    this.dialog
-                        .open(PopupAddVideoToPlaylistsComponent, config )
-                        .afterClosed()
-                        .subscribe(result => {});
-                }
-            })
-        */
-    }
-
-}

src/app/utils/services/videoUrl/video-url.service.ts

@@ -22,13 +22,13 @@ export class VideoUrlService
     {
         if(videoUrl.includes("youtu.be"))
         {
-            console.log("de la forme: https://youtu.be/blablabla");
+            //console.log("de la forme: https://youtu.be/blablabla");
             const tab = videoUrl.split("youtu.be/");
             videoUrl = tab[0] + "www.youtube.com/embed/" + tab[1];
         }
         else if(videoUrl.includes("youtube.com/watch?v="))
         {
-            console.log("de la forme: https://www.youtube.com/watch?v=blablabla");
+            //console.log("de la forme: https://www.youtube.com/watch?v=blablabla");
             const tab = videoUrl.split("youtube.com/watch?v=");
             videoUrl = tab[0] + "youtube.com/embed/" + tab[1];
         }
@@ -38,7 +38,7 @@ export class VideoUrlService
 
     daylimotionSafeUrl(videoUrl: string):  string
     {
-        console.log("de la forme: https://www.dailymotion.com/video/blablabla");
+        //console.log("de la forme: https://www.dailymotion.com/video/blablabla");
         const n = "https://www.dailymotion.com/".length;
         return videoUrl.slice(0, n) + "embed/" + videoUrl.slice(n);
     }