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

image video à la place de iframe

Browse source
This commit is contained in:
MiharyR 2021-11-19 15:42:51 +01:00
parent 500b32626e
commit b045f507d2
92 changed files with 945 additions and 656 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,15 +1,16 @@
import { Component, OnInit } from '@angular/core';
import {MessageService} from "../../../utils/services/message/message.service";
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
import {Video} from "../../../utils/interfaces/video";
import {VideoAll} from "../../../utils/interfaces/video";
import {Advert} from "../../../utils/interfaces/advert";
import {ThemeService} from "../../../utils/services/theme/theme.service";
import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service";
let TAB_PLATEFORM = [
{ name: "Youtube", isSelected: false },
{ name: "Dailymotion", isSelected: false }
{ name: "youtube", isSelected: false },
{ name: "dailymotion", isSelected: false }
];
@ -22,23 +23,24 @@ let TAB_PLATEFORM = [
export class PageSearchComponent implements OnInit
{
tabPlateform = TAB_PLATEFORM;
tabVideo: Video[] = [];
tabVideo: VideoAll[] = [];
search: string = "";
ad1: Advert;
ad2: Advert;
constructor( private messageService: MessageService,
private fictitiousDatasService: FictitiousDatasService,
private fictitiousVideosService: FictitiousVideosService,
private fictitiousAdvertsService: FictitiousAdvertsService,
public themeService: ThemeService ) { }
ngOnInit(): void
{
// --- FAUX CODE ---
this.tabVideo = this.fictitiousDatasService.getTabVideo(11);
this.ad1 = this.fictitiousDatasService.getAdvert();
this.ad2 = this.fictitiousDatasService.getAdvert();
this.tabVideo = this.fictitiousVideosService.getTabVideoAll(90);
this.ad1 = this.fictitiousAdvertsService.getAdvert();
this.ad2 = this.fictitiousAdvertsService.getAdvert();
// --- VRAI CODE ---
/*
@ -62,7 +64,7 @@ export class PageSearchComponent implements OnInit
onSearch()
{
// --- FAUX CODE ---
this.tabVideo = this.fictitiousDatasService.getTabVideo(2);
this.tabVideo = this.fictitiousVideosService.getTabVideoAll(2);
// --- VRAI CODE ---
/*

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

@ -7,15 +7,43 @@
<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>
<!-- Image video -->
<div class="imgsContainer">
<img class="imgPlay" src="/assets/play7.png">
<img class="imgVideo" [src]="tabVideo[indexPage+k].imageUrl">
</div>
<!-- Info video -->
<mat-grid-list cols="12" style="margin: 0px 0px 0px 0px; font-size: small">
<!-- logo -->
<mat-grid-tile [colspan]="2" [rowspan]="2" class="mat-grid-tile-info-video">
<img *ngIf="tabVideo[indexPage+k].source==='youtube'" src="/assets/logo_plateforms/youtube.png" alt="ytb" width="20px" height="15px">
<img *ngIf="tabVideo[indexPage+k].source==='dailymotion'" src="/assets/logo_plateforms/dailymotion.png" alt="dlm" width="20px" height="20px">
</mat-grid-tile>
<!-- title + views + publishedAt -->
<mat-grid-tile [colspan]="8" [rowspan]="2" class="mat-grid-tile-info-video">
<div style="position: absolute; left: 1px; text-align: left">
{{tronquage(tabVideo[indexPage+k].title)}}
<br>
<span style="color: gray">
{{tabVideo[indexPage+k].views | number: '1.0-0'}} vues. Il y a 2h.
</span>
</div>
</mat-grid-tile>
<!-- addButton -->
<mat-grid-tile [colspan]="2" [rowspan]="2" class="mat-grid-tile-info-video">
<button mat-icon-button (click)="onAdd(tabVideo[indexPage+k])">
<mat-icon>add_circle</mat-icon>
</button>
</mat-grid-tile>
</mat-grid-list>
</div>
</mat-grid-tile>
@ -23,8 +51,25 @@
</div>
<!-- Paginator -->
<div class="btnContainer">
<!-- 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 *ngIf="page===((indexPage/9)+1)">
<span style="text-decoration: underline; cursor: pointer;font-weight: bold;">{{page}}</span>&nbsp;
</span>
<span *ngIf="page!==((indexPage/9)+1)">
<span style="text-decoration: underline; cursor: pointer;">{{page}}</span>&nbsp;
</span>
</span> &nbsp;
<!-- btn suivant -->
<button mat-button class="btnPaginator" [disabled]="indexPage+9>=tabVideo.length" (click)="indexPage=indexPage+9"> Suivant > </button>
</div>

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

@ -1,6 +1,7 @@
mat-grid-list {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: none;
}
mat-grid-tile {
@ -9,19 +10,47 @@ mat-grid-tile {
border: solid 1px black;
}
.myCell {
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
}
// ---------------------------------------------------------------------------------------------
.myCell {
margin: 0px 0px 0px 0px;
padding: 15px 0px 0px 0px;
.imgsContainer {
width: 20vw;
height: 15vh;
}
iframe {
.imgPlay {
position: absolute;
margin-left: 9vw;
width: 3vw;
margin-top: 5vh;
height: 6vh;
padding: 0px 0px 0px 0px;
width: 85%;
}
.imgVideo {
border: solid 1px black;
width: 20vw;
height: 15vh;
padding: 0px 0px 0px 0px;
}
// ---------------------------------------------------------------------------------------------
.mat-grid-tile-info-video {
border: none;
font-size: x-small;
}
mat-icon {
text-align: right;
}

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

@ -1,8 +1,8 @@
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";
import {VideoAll} 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({
@ -12,7 +12,7 @@ import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.servic
})
export class VideoGridComponent implements OnChanges
{
@Input() tabVideo: Video[] = [];
@Input() tabVideo: VideoAll[] = [];
indexPage: number = 0;
constructor( private historiqueService: UserHistoryService,
@ -25,21 +25,15 @@ export class VideoGridComponent implements OnChanges
//this.historiqueService.clearTabVideoUrlClicked();
}
onAdd(video: Video): void
onAdd(video: VideoAll): 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) + "..." ;
if(str.length < 40) return str;
else return str.substring(0, 37) + "..." ;
}
}