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

This commit is contained in:
MiharyR 2021-12-16 17:42:33 +01:00
parent f2ced83246
commit ad0397e8ad
9 changed files with 219 additions and 66 deletions

View file

@ -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>

View file

@ -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)

View file

@ -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>

View file

@ -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;
}
}