implementation du bouton 'retour' dans la page 'user/watching'

src/app/app-routing.module.ts

@@ -28,9 +28,7 @@ const routes: Routes = [
     { path: 'user/myPlaylists', component: PageMyPlaylistsComponent },
     { path: 'user/history', component: PageHistoryUserComponent },
     { path: 'user/myProfil', component:  PageProfilUserComponent },
-    { path: 'user/watching/fromSearch/:videoId/:source/:search', component: PageWatchingVideoComponent },
-    { path: 'user/watching/fromMyPlaylists/:videoId/:_idPlaylist', component: PageWatchingVideoComponent },
-    { path: 'user/watching/fromHistory/:videoId/:source', component: PageWatchingVideoComponent },
+    { path: 'user/watching', component:  PageWatchingVideoComponent },
 
     // Advertiser
     { path: 'advertiser', component: PageAdListAdvertiserComponent },

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

@@ -99,8 +99,12 @@ export class PageHistoryUserComponent implements AfterViewInit
             .put("video/update/"+video._id, {watchedDate: true})
             .subscribe(ret => this.onVideoCallback(ret), err => this.onVideoCallback(err));
 
-        const url = '/user/watching/fromHistory/'+video.videoId+'/'+video.source ;
-        this.router.navigateByUrl(url);
+        const params = {
+            videoId: video.videoId,
+            source: video.source,
+            from: "history",
+        };
+        this.router.navigate(['/user/watching'], { queryParams: params });
     }
 
 

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

@@ -70,8 +70,13 @@ export class VideoListComponent implements OnChanges
 
     onVideo(video: any): void
     {
-        const url = "user/watching/fromMyPlaylists/" + video.videoId + '/' + this.playlist._id;
-        this.router.navigateByUrl(url);
+        const params = {
+            videoId: video.videoId,
+            source: video.source,
+            _idPlaylist: this.playlist._id,
+            from: "myPlaylists",
+        };
+        this.router.navigate(['/user/watching'], { queryParams: params });
     }
 
 }

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

@@ -62,7 +62,7 @@
             <!-- Grilles des videos -->
             <mat-grid-tile colspan="7" rowspan="1" class="celluleGrilleVideo">
                 <div class="conteneurVideosGrid">
-                    <app-video-grid [tabVideo]="tabVideo" [search]="search"></app-video-grid>
+                    <app-video-grid [tabVideo]="tabVideo" [search]="search" [sources]="sources" [indexPage]="indexPage"></app-video-grid>
                 </div>
             </mat-grid-tile>
 

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

@@ -3,6 +3,7 @@ import {MessageService} from "../../../utils/services/message/message.service";
 import {VideoAll} from "../../../utils/interfaces/video";
 import {ThemeService} from "../../../utils/services/theme/theme.service";
 import {HttpParams} from "@angular/common/http";
+import {ActivatedRoute} from "@angular/router";
 
 
 
@@ -25,28 +26,55 @@ export class PageSearchComponent implements OnInit
     search: string = "";
     ad1: any;
     ad2: any;
+    sources: string = "" ;
+    indexPage: number = 0;
 
 
     constructor( private messageService: MessageService,
-                 public themeService: ThemeService ) { }
+                 public themeService: ThemeService,
+                 private activatedRoute: ActivatedRoute ) { }
 
 
     ngOnInit(): void
     {
+        // parametre de la route
+        this.activatedRoute
+            .queryParams
+            .subscribe(paramsFromOldPage => {
+                if(paramsFromOldPage.hasOwnProperty("search")) this.search = paramsFromOldPage.search;
+                if(paramsFromOldPage.hasOwnProperty("sources"))
+                {
+                    this.sources = paramsFromOldPage.sources;
+                    if(this.sources === "yt") {
+                        this.tabPlateform[0].isSelected = true;
+                        this.tabPlateform[1].isSelected = false;
+                    }
+                    else if(this.sources === "dm") {
+                        this.tabPlateform[0].isSelected = false;
+                        this.tabPlateform[1].isSelected = true;
+                    }
+                    else if(this.sources === "yt,dm") {
+                        this.tabPlateform[0].isSelected = true;
+                        this.tabPlateform[1].isSelected = true;
+                    }
+                }
+                if(paramsFromOldPage.hasOwnProperty("indexPage")) this.indexPage = parseInt(paramsFromOldPage.indexPage, 10);
+                this.onSearch();
+            });
+
+        // Ask for ads
         let params = new HttpParams();
         params = params.append("quantity", 2);
         this.messageService
             .get("user/ad", params)
             .subscribe(ret => this.adCallback(ret), err => this.adCallback(err));
-
-        this.onSearch();
     }
 
 
     adCallback(retour: any): void
     {
         if(retour.status !== "success") {
-            //console.log(retour);
+            console.log(retour);
         }
         else {
             this.ad1 = retour.data[0];
@@ -60,12 +88,11 @@ export class PageSearchComponent implements OnInit
         let params = new HttpParams();
         params = params.append('q', this.search);
 
-        let sources = "";
-        if(this.tabPlateform[0].isSelected && this.tabPlateform[1].isSelected) sources += "yt,dm" ;
-        else if((!this.tabPlateform[0].isSelected) && this.tabPlateform[1].isSelected) sources += "dm" ;
-        else if(this.tabPlateform[0].isSelected && (!this.tabPlateform[1].isSelected)) sources += "yt" ;
-        else sources += "" ;
-        params = params.append('sources', sources);
+        if(this.tabPlateform[0].isSelected && this.tabPlateform[1].isSelected) this.sources = "yt,dm" ;
+        else if((!this.tabPlateform[0].isSelected) && this.tabPlateform[1].isSelected) this.sources = "dm" ;
+        else if(this.tabPlateform[0].isSelected && (!this.tabPlateform[1].isSelected)) this.sources = "yt" ;
+        else this.sources = "" ;
+        params = params.append('sources', this.sources);
 
         this.messageService
             .get("video/search", params)

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

@@ -2,7 +2,7 @@
 
 
 <!-- Grille -->
-<div style="height: 93%; background-color: white; padding-top: 7px;">
+<div style="height: 93%; background-color: white; padding-top: 7px;" *ngIf="tabVideoExists()">
     <mat-grid-list cols="3" rowHeight="33%">
         <mat-grid-tile colspan="1" rowspan="1" *ngFor="let k of [0,1,2,3,4,5,6,7,8]">
             <div class="myCell" *ngIf="indexPage+k < tabVideo.length" [title]="tabVideo[indexPage+k].title">
@@ -55,13 +55,13 @@
 
 
 <!-- Paginator -->
-<div class="paginatorContainer">
+<div class="paginatorContainer" *ngIf="tabVideoExists()">
 
     <!-- btn précédent -->
     <button mat-button class="btnPaginator" [disabled]="indexPage<=0" (click)="indexPage=indexPage-9"> < Précédent </button> &nbsp;
 
     <!-- numeros de page -->
-    <span *ngFor="let page of [1,2,3,4,5,6,7,8,9,10]" (click)="indexPage=(page-1)*9">
+    <span *ngFor="let page of tabPage" (click)="indexPage=(page-1)*9">
         <span *ngIf="page===((indexPage/9)+1)">
             <span style="text-decoration: underline; cursor: pointer;font-weight: bold;">{{page}}</span>&nbsp;
         </span>

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

@@ -1,4 +1,4 @@
-import {Component, Input } from '@angular/core';
+import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
 import {VideoAll} from "../../../utils/interfaces/video";
 import {AddVideoToPlaylistsService} from "../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
 import {Router} from "@angular/router";
@@ -11,11 +11,13 @@ import {MessageService} from "../../../utils/services/message/message.service";
     templateUrl: './video-grid.component.html',
     styleUrls: ['./video-grid.component.scss']
 })
-export class VideoGridComponent
+export class VideoGridComponent implements OnChanges
 {
     @Input() tabVideo: VideoAll[] = [];
-    @Input() search: string = '';
-    indexPage: number = 0;
+    @Input() search: string = "";
+    @Input() sources: string = "";
+    @Input() indexPage: number = 0;
+    tabPage: number[] = [];
 
 
     constructor( private addVideoToPlaylistsService: AddVideoToPlaylistsService,
@@ -23,6 +25,19 @@ export class VideoGridComponent
                  private messageService: MessageService ) {}
 
 
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        if(this.tabVideoExists())
+        {
+            const nbVideo = this.tabVideo.length;
+            let nbPage = Math.floor(nbVideo/9);
+            if((nbVideo%9) !== 0) nbPage += 1;
+            this.tabPage = [];
+            for(let i=1 ; i<=nbPage ; i++) this.tabPage.push(i);
+        }
+    }
+
+
     onAddToPlaylist(video: VideoAll): void
     {
         this.addVideoToPlaylistsService.run(video.videoId, video.source, video.interest);
@@ -41,16 +56,26 @@ export class VideoGridComponent
         const data = { source: video.source, interest: video.interest };
         this.messageService
             .post("video/create/"+video.videoId, data)
-            .subscribe(ret => this.onVideoCallback(ret), err => this.onVideoCallback(err));
-
-        const url = '/user/watching/fromSearch/'+video.videoId+'/'+video.source+'/'+this.search;
-        this.router.navigateByUrl(url);
+            .subscribe(ret => this.onVideoCallback(ret,video), err => this.onVideoCallback(err,video));
     }
 
 
-    onVideoCallback(retour: any): void
+    onVideoCallback(retour: any, video: VideoAll): void
     {
-        if(retour.status !== "success") console.log(retour);
+        if(retour.status !== "success") {
+            console.log(retour);
+        }
+        else {
+            const params = {
+                videoId: video.videoId,
+                source: video.source,
+                from: "search",
+                search: this.search,
+                sources: this.sources,
+                indexPage: this.indexPage
+            };
+            this.router.navigate(['/user/watching'], { queryParams: params });
+        }
     }
 
 
@@ -93,4 +118,12 @@ export class VideoGridComponent
         else return ellapsedTimeInYears + " ans" ;
     }
 
+
+    tabVideoExists(): boolean
+    {
+        if((this.tabVideo === null) || (this.tabVideo === undefined)) return false;
+        else if(this.tabVideo.length === 0) return false;
+        else return true;
+    }
+
 }

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

@@ -17,7 +17,7 @@
             <!-- Search bar -->
             <div class="input-group" style="width: 100%; margin: 0 auto;">
                 <div class="form-outline" style="width: 100%; margin: 0 auto;">
-                    <input type="search" placeholder="Rechercher..." class="inputSearchBar" (keydown)="onEnterOnSearchBar($event)"/>
+                    <input type="search" placeholder="Rechercher..." class="inputSearchBar" [(ngModel)]="search" (keydown)="onEnterOnSearchBar($event)"/>
                     <button mat-icon-button (click)="onSearch()">
                         <mat-icon>search</mat-icon>
                     </button>
@@ -191,7 +191,7 @@
 <!-- NIVEAU 3: playlist -->
 
 <ng-template #playlistHTML>
-    <div class="playlistContainer">
+    <div class="playlistContainer" *ngIf="playlistExists()">
 
         <!-- Bordure haute -->
         <div class="topBorder">

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

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import {VideoAll} from "../../../utils/interfaces/video";
-import {Advert} from "../../../utils/interfaces/advert";
 import {MessageService} from "../../../utils/services/message/message.service";
 import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
 import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service";
@@ -28,6 +27,7 @@ let TAB_PLATEFORM = [
 export class PageWatchingVideoComponent implements OnInit
 {
     tabPlateform = TAB_PLATEFORM;
+    sources: string = "";
     video = {
         title: "",
         videoId: "",
@@ -38,13 +38,16 @@ export class PageWatchingVideoComponent implements OnInit
         interest: ""
     };
     search: string = "";
+
     ad1: any;
     ad2: any;
     from: string = "";
 
-    playlist: PlaylistDB;
+    playlist: any;
     videosInPlaylist: any[] = [];
 
+    paramsFromOldPage ;
+
     hiddenDescription: boolean = true;
     iframeStyle: string = "";
     containerStyle: string = "";
@@ -60,46 +63,81 @@ export class PageWatchingVideoComponent implements OnInit
                  private addVideoToPlaylistsService: AddVideoToPlaylistsService ) { }
 
 
+
     ngOnInit(): void
     {
         // Ask for videos
-        const videoId = this.activatedRoute.snapshot.paramMap.get('videoId');
-        let params1 = new HttpParams();
-        let source = "" ;
-        if(this.activatedRoute.snapshot.paramMap.get('source') === "Youtube") source = "yt" ;
-        else source = "dm"
-        params1 = params1.append("source", source);
-        this.messageService
-            .get("video/get/"+videoId, params1)
-            .subscribe(ret => this.findVideoCallback(ret), err => this.findVideoCallback(err));
+        this.activatedRoute
+            .queryParams
+            .subscribe(paramsFromOldPage => {
+
+                this.paramsFromOldPage = paramsFromOldPage;
+                const videoId = paramsFromOldPage.videoId;
+                let source = paramsFromOldPage.source;
+
+                let params = new HttpParams();
+                if(source === "Youtube") source = "yt";
+                else if(source === "Dailymotion") source = "dm" ;
+                params = params.append("source", source);
+                this.messageService
+                    .get("video/get/"+videoId, params)
+                    .subscribe(ret => this.findVideoCallback(ret), err => this.findVideoCallback(err));
+            });
+
 
         // Ask for adverts
-        let params2 = new HttpParams();
-        params2 = params2.append("quantity", 2);
+        let params = new HttpParams();
+        params = params.append("quantity", 2);
         this.messageService
-            .get("user/ad", params2)
+            .get("user/ad", params)
             .subscribe(ret => this.findAdCallback(ret), err => this.findAdCallback(err));
 
 
-        if(this.router.url.includes("fromSearch")) this.from = "search" ;
-        else if(this.router.url.includes("fromHistory")) this.from = "history";
-        else if(this.router.url.includes("fromMyPlaylists"))
+        // Si on vient de la page "search"
+        if(this.router.url.includes("search"))
+        {
+            this.from = "search" ;
+            this.activatedRoute
+                .queryParams
+                .subscribe(paramsFromOldPage => {
+                    if(paramsFromOldPage.hasOwnProperty("search")) this.search = paramsFromOldPage.search;
+                    if(paramsFromOldPage.hasOwnProperty("sources")) {
+                        this.sources = paramsFromOldPage.sources;
+                        if(this.sources === "yt") {
+                            this.tabPlateform[0].isSelected = true;
+                            this.tabPlateform[1].isSelected = false;
+                        }
+                        else if(this.sources === "dm") {
+                            this.tabPlateform[0].isSelected = false;
+                            this.tabPlateform[1].isSelected = true;
+                        }
+                        else if(this.sources === "yt,dm") {
+                            this.tabPlateform[0].isSelected = true;
+                            this.tabPlateform[1].isSelected = true;
+                        }
+                    }
+                });
+        }
+        // si on vient de la page "myPlaylists"
+        else if(this.router.url.includes("myPlaylists"))
         {
             this.from = "myPlaylists";
-            const _idPlaylist = this.activatedRoute.snapshot.paramMap.get('_idPlaylist');
-            this.playlist = this.fictitiousVideosService.getPlaylistBy_id(_idPlaylist);
-            const allVideo = this.fictitiousVideosService.get_TAB_VIDEO();
-            this.videosInPlaylist = [];
-            for(let _idVideo of this.playlist.videoIds)
-            {
-                const video = allVideo.find(video => video._id === _idVideo);
-                this.videosInPlaylist.push(video);
-            }
+            this.activatedRoute
+                .queryParams
+                .subscribe(paramsFromOldPage => {
+                    const _idPlaylist = paramsFromOldPage._idPlaylist;
+                    this.messageService
+                        .get("playlist/findOne/"+_idPlaylist)
+                        .subscribe(ret => this.afterReceivingPlaylistWithVideo(ret), err => this.afterReceivingPlaylistWithVideo(err));
+                });
+
         }
+        // si on vient de la page "history"
+        else if(this.router.url.includes("history")) this.from = "history";
+
 
         // style
-        if(this.from === 'search' || this.from === 'history')
-        {
+        if(this.from === 'search' || this.from === 'history') {
             this.containerStyle = "margin: 0 auto; width: 64vw;"
             this.iframeStyle = "width: 64vw; height: 60vh;" ;
         }
@@ -110,9 +148,11 @@ export class PageWatchingVideoComponent implements OnInit
     }
 
 
+
     findVideoCallback(retour: any): void
     {
         if(retour.status !== "success") {
+            console.log("findVideoCallback: ");
             console.log(retour);
         }
         else {
@@ -123,7 +163,8 @@ export class PageWatchingVideoComponent implements OnInit
 
     findAdCallback(retour: any): void
     {
-        if(retour !== "success") {
+        if(retour.status !== "success") {
+            console.log("findAdCallback: ");
             console.log(retour);
         }
         else {
@@ -133,9 +174,33 @@ export class PageWatchingVideoComponent implements OnInit
     }
 
 
+    afterReceivingPlaylistWithVideo(retour: any): void
+    {
+        if(retour.status !== "success") {
+            console.log("afterReceivingPlaylistWithVideo");
+            console.log(retour);
+        }
+        else {
+            this.playlist = retour.data;
+            this.videosInPlaylist = retour.data.videos;
+        }
+    }
+
+
     onSearch()
     {
-
+        if(this.tabPlateform[0].isSelected && this.tabPlateform[1].isSelected) this.sources = "yt,dm" ;
+        else if((!this.tabPlateform[0].isSelected) && this.tabPlateform[1].isSelected) this.sources = "dm" ;
+        else if(this.tabPlateform[0].isSelected && (!this.tabPlateform[1].isSelected)) this.sources = "yt" ;
+        else this.sources = "" ;
+        let options = {
+            queryParams: {
+                search: this.search,
+                sources: this.sources,
+                indexPage: 0,
+            }
+        };
+        this.router.navigate(['/user/search'], options);
     }
 
 
@@ -147,9 +212,24 @@ export class PageWatchingVideoComponent implements OnInit
 
     onRetour(): void
     {
-        if(this.from === 'search') this.router.navigateByUrl("/user/search");
-        else if(this.from === 'myPlaylists') this.router.navigateByUrl("/user/myPlaylists");
-        else if(this.from === 'history') this.router.navigateByUrl("/user/history");
+        let url: string[] = [];
+        let options = {};
+
+        if(this.from === 'search')
+        {
+            url = ['/user/search'];
+            options = {
+                queryParams: {
+                    search: this.paramsFromOldPage.search,
+                    sources: this.paramsFromOldPage.sources,
+                    indexPage: this.paramsFromOldPage.indexPage,
+                }
+            };
+        }
+        else if(this.from === 'myPlaylists') url = ["/user/myPlaylists"];
+        else if(this.from === 'history') url = ["/user/history"];
+
+        this.router.navigate(url, options);
     }
 
 
@@ -175,4 +255,10 @@ export class PageWatchingVideoComponent implements OnInit
         if(event.key === 'Enter') this.onSearch();
     }
 
+
+    playlistExists(): boolean
+    {
+        return ((this.playlist !== null) && (this.playlist !== undefined));
+    }
+
 }