yvachot/PolyNotFound
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
MiharyR 2021-10-29 04:59:43 +02:00
parent 45f9057490
commit 8784c290ca
37 changed files with 559 additions and 258 deletions
Download patch file Download diff file Expand all files Collapse all files

120
src/app/user/search/page-search/page-search.component.html
View file

@ -1,77 +1,75 @@
<div class="conteneur">
<div [class]="themeService.getClassTheme()">
<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>
<!-- Navbar -->
<div style="margin-bottom: 50px">
<app-nav-bar pour="user"></app-nav-bar>
</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>
<!-- [Search bar] + [Site de streaming] -->
<div class="row">
<div class="col-2"></div>
<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 -->
<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>
<!-- 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>
</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>
</div>
<!-- --------------------------------------------------------------------- -->
<!-- [pub gauche] + [Grilles des videos] + [pub droite] -->
<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>

76
src/app/user/search/page-search/page-search.component.scss
View file

@ -1,41 +1,69 @@
.conteneur {
text-align: center;
max-width: 100%;
max-height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
.lightTheme {
color: black;
border-color: black;
}
.darkTheme {
color: white;
border-color: white;
}
.blocMilieu1 {
height: 70vh;
margin-bottom: 70px
.conteneur {
text-align: center;
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 {
border: solid black 2px;
.cellulePub {
padding: 0px 10px 0px 10px;
width: 100%;
text-align: center;
justify-content: center;
}
.conteneurPub {
height: 75vh;
margin-right: 20px;
}
.conteneurPubBas {
//width: 80%;
//margin-left: auto;
//margin-right: auto;
height: 100%;
border: solid black 2px;
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%);
}

37
src/app/user/search/page-search/page-search.component.ts
View file

@ -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.fictitiousDatasService.getTabVideo(4);
this.tabVideo = 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'},
];
}

15
src/app/user/search/video-cell/video-cell.component.html
View file

@ -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/>
<span>{{video.title}}</span>
<button mat-icon-button (click)="onAdd()">
<mat-icon > add_circle </mat-icon>
</button>
<div [class]="themeService.getClassTheme()">
<div class="conteneur">
<iframe appIframeTracker [src]=safeUrl allowfullscreen (iframeClick)="onIframeClick(this.video.url)"></iframe><br/>
<span>{{video.title}}</span>
<button mat-icon-button (click)="onAdd()">
<mat-icon > add_circle </mat-icon>
</button>
</div>
</div>

15
src/app/user/search/video-cell/video-cell.component.scss
View file

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

4
src/app/user/search/video-cell/video-cell.component.ts
View file

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

5
src/app/user/search/video-grid/video-grid.component.scss
View file

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