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

correction pages: register, myProfil-user, search, myPlaylists

Browse source
This commit is contained in:
MiharyR 2021-11-14 03:39:24 +01:00
parent 91171a3765
commit a8cbd4efb7
27 changed files with 278 additions and 352 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@
<div class="myContainer">
<!-- Navbar -->
<div style="margin-bottom: 50px">
<div style="margin-bottom: 30px">
<app-navbar-user></app-navbar-user>
</div>
@ -13,7 +13,7 @@
<!-- [Search bar] + [Site de streaming] -->
<div class="row">
<div class="col-2"></div>
<div class="col-8" style="margin-bottom: 20px">
<div class="col-8" style="margin-bottom: 10px">
<!-- Search bar -->
<div class="row" style="margin-bottom: 10px">
@ -44,7 +44,6 @@
<!-- --------------------------------------------------------------------- -->
<!-- [pub gauche] + [Grilles des videos] + [pub droite] -->
<mat-grid-list cols="11" rowHeight="75vh">
@ -70,6 +69,7 @@
</mat-grid-tile>
</mat-grid-list>
<br><br>
</div>
</div>

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

@ -11,22 +11,23 @@
max-width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
.inputSearchBar {
width: 50%;
font-size: x-large;
font-size: large;
}
.btnRechercher {
border: solid black 1px;
border-radius: 5px;
font-size: x-large;
font-size: large;
}
.celluleGrilleVideo {
border: solid 4px;
border: solid 2px;
border-radius: 5px;
width: 100%;
}

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

@ -1,7 +1,6 @@
import { Component, OnInit } from '@angular/core';
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";
@ -37,7 +36,7 @@ export class PageSearchComponent implements OnInit
ngOnInit(): void
{
// --- FAUX CODE ---
this.tabVideo = this.fictitiousDatasService.getTabVideo(5);
this.tabVideo = this.fictitiousDatasService.getTabVideo(11);
this.ad1 = this.fictitiousDatasService.getAdvert();
this.ad2 = this.fictitiousDatasService.getAdvert();

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

@ -1,11 +0,0 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div [class]="themeService.getClassTheme()">
<div class="conteneur">
<iframe appIframeTracker [src]=safeUrl allowfullscreen (iframeClick)="onIframeClick()"></iframe><br/>
<span>{{video.title}}</span>
<button mat-icon-button (click)="onAdd()">
<mat-icon > add_circle </mat-icon>
</button>
</div>
</div>

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

@ -1,18 +0,0 @@
.conteneur {
text-align: center;
border: solid 2px;
border-radius: 5px;
padding-top: 15px;
}
.lightTheme .conteneur {
background-color: #ffffff;
border-color: black;
font-color: black;
}
.darkTheme .conteneur {
background-color: #c8c8c8;
border-color: #ffffff;
font-color: white;
}

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

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

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

@ -1,44 +0,0 @@
import {Component, Input, OnInit } from '@angular/core';
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";
import {MessageService} from "../../../utils/services/message/message.service";
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
@Component({
selector: 'app-video-cell',
templateUrl: './video-cell.component.html',
styleUrls: ['./video-cell.component.scss']
})
export class VideoCellComponent implements OnInit
{
@Input() video: Video;
safeUrl;
tabVideoUrlClicked: string[] = [];
constructor( private videoUrlService: VideoUrlService,
private addVideoToPlaylistsService: AddVideoToPlaylistsService,
public themeService: ThemeService,
private messageService: MessageService,
private historiqueService: UserHistoryService ) {}
ngOnInit(): void
{
this.safeUrl = this.videoUrlService.safeUrl(this.video.url);
}
onAdd(): void
{
this.addVideoToPlaylistsService.run(this.video);
}
onIframeClick()
{
console.log("onIframeClick: " + this.video.title);
this.historiqueService.addVideoToHistoque(this.video);
}
}

39
src/app/user/search/video-grid/video-grid.component.html
View file

@ -1,11 +1,30 @@
<div class="conteneur">
<nav>
<ul>
<li class="row ligne" *ngFor="let triplet of tabTriplet">
<div class="col-4" *ngFor="let video of triplet">
<app-video-cell [video]="video"></app-video-cell>
</div>
</li>
</ul>
</nav>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Grille -->
<div style="height: 93%">
<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">
<iframe appIframeTracker
[src]=videoUrlService.safeUrl(tabVideo[indexPage+k].url)
allowfullscreen
(iframeClick)="onIframeClick(tabVideo[indexPage+k])"></iframe><br>
<span> {{tronquage(tabVideo[indexPage+k].title)}} </span>
<button mat-icon-button (click)="onAdd(tabVideo[indexPage+k])">
<mat-icon> add_circle </mat-icon>
</button>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
<!-- Paginator -->
<div class="btnContainer">
<button mat-button class="btnPaginator" [disabled]="indexPage<=0" (click)="indexPage=indexPage-9"> < Précédent </button> &nbsp;
<button mat-button class="btnPaginator" [disabled]="indexPage+9>=tabVideo.length" (click)="indexPage=indexPage+9"> Suivant > </button>
</div>

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

@ -1,14 +1,40 @@
.conteneur {
height: 100%;
mat-grid-list {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
nav ul {
overflow: hidden;
overflow-y: scroll;
height: 75vh;
padding: 30px;
mat-grid-tile {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: solid 1px black;
}
.ligne {
margin: 30px 0px 30px 0px;
// ---------------------------------------------------------------------------------------------
.myCell {
margin: 0px 0px 0px 0px;
padding: 15px 0px 0px 0px;
}
iframe {
padding: 0px 0px 0px 0px;
width: 85%;
height: 15vh;
}
// ---------------------------------------------------------------------------------------------
.btnContainer {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
}
.btnPaginator {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

44
src/app/user/search/video-grid/video-grid.component.ts
View file

@ -1,6 +1,8 @@
import {Component, Input, OnChanges} from '@angular/core';
import {Component, Input, OnChanges } from '@angular/core';
import {Video} from "../../../utils/interfaces/video";
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
@Component({
@ -11,31 +13,33 @@ import {UserHistoryService} from "../../../utils/services/userHistory/userHistor
export class VideoGridComponent implements OnChanges
{
@Input() tabVideo: Video[] = [];
tabTriplet = [];
indexPage: number = 0;
constructor(private historiqueService: UserHistoryService) {}
constructor( private historiqueService: UserHistoryService,
private addVideoToPlaylistsService: AddVideoToPlaylistsService,
private videoUrlService: VideoUrlService ) {}
ngOnChanges(): void
{
this.historiqueService.clearTabVideoUrlClicked();
//this.historiqueService.clearTabVideoUrlClicked();
}
this.tabTriplet = [];
let n = this.tabVideo.length;
let i = 0;
while(i < n)
{
let triplet = []
let compteur = 0;
while((compteur < 3) && (i < n))
{
triplet.push(this.tabVideo[i]);
i++ ;
compteur++ ;
}
this.tabTriplet.push(triplet)
}
onAdd(video: Video): void
{
this.addVideoToPlaylistsService.run(video);
}
onIframeClick(video: Video)
{
console.log("onIframeClick: " + video.title);
this.historiqueService.addVideoToHistoque(video);
}
tronquage(str: string)
{
if(str.length < 30) return str;
else return str.substring(0, 30) + "..." ;
}
}