image video à la place de iframe
This commit is contained in:
MiharyR
parent
500b32626e
commit
b045f507d2
92 changed files with 945 additions and 656 deletions
|
|
@ -18,10 +18,13 @@
|
|||
<ng-container matColumnDef="aperçu">
|
||||
<th mat-header-cell *matHeaderCellDef> Aperçu </th>
|
||||
<td mat-cell *matCellDef="let video">
|
||||
<img [src]="video.imageUrl" width="200px" height="100px">
|
||||
<!--
|
||||
<iframe appIframeTracker
|
||||
[src]=videoUrlService.safeUrl(video.url)
|
||||
[src]=videoUrlService.safeUrl(video.videoId)
|
||||
(iframeClick)="onIframeClick(video)"
|
||||
allowfullscreen></iframe>
|
||||
-->
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
|
|
@ -35,9 +38,7 @@
|
|||
<ng-container matColumnDef="date">
|
||||
<th mat-header-cell *matHeaderCellDef> Date </th>
|
||||
<td mat-cell *matCellDef="let video">
|
||||
<li *ngFor="let date0 of video.watched">
|
||||
{{date0 | date:'dd/LL/YYYY à HH:mm:ss'}}
|
||||
</li>
|
||||
{{video.watchedDates[video.watchedDates.length-1] | date:'dd/LL/YYYY à HH:mm:ss'}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,27 +9,11 @@ table {
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*
|
||||
mat-paginator {
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
*/
|
||||
|
||||
th.mat-sort-header-sorted {
|
||||
color: black;
|
||||
}
|
||||
|
||||
/*
|
||||
.lightTheme td {
|
||||
padding: 10px 30px 5px 5px;
|
||||
}
|
||||
.darkTheme td {
|
||||
background-color: #646464;
|
||||
color: white;
|
||||
padding: 10px 30px 5px 5px;
|
||||
}
|
||||
*/
|
||||
|
||||
input {
|
||||
width: 35%;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import {AfterViewInit, Component, ViewChild} from '@angular/core';
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MatTableDataSource} from "@angular/material/table";
|
||||
import {MatSort} from "@angular/material/sort";
|
||||
import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
|
||||
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
|
||||
import {Video} from "../../../utils/interfaces/video";
|
||||
import {VideoUrlService} from "../../utils/services/videoUrl/video-url.service";
|
||||
import {UserHistoryService} from "../../utils/services/userHistory/userHistory.service";
|
||||
import {MatPaginator} from "@angular/material/paginator";
|
||||
import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
|
||||
import {VideoAll} from "../../../utils/interfaces/video";
|
||||
|
||||
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ export class PageHistoryUserComponent implements AfterViewInit
|
|||
|
||||
constructor( public themeService: ThemeService,
|
||||
private messageService: MessageService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
private fictitiousVideosService: FictitiousVideosService,
|
||||
public videoUrlService: VideoUrlService,
|
||||
private userHistoryService: UserHistoryService ) { }
|
||||
|
||||
|
|
@ -37,23 +37,8 @@ export class PageHistoryUserComponent implements AfterViewInit
|
|||
this.userHistoryService.clearTabVideoUrlClicked();
|
||||
|
||||
// --- FAUX CODE ---
|
||||
const tabVideo: Video[] = this.fictitiousDatasService.getTabVideo(8);
|
||||
|
||||
const tabVideoChanged = [];
|
||||
for(let video of tabVideo)
|
||||
{
|
||||
tabVideoChanged.push({
|
||||
_id: video._id,
|
||||
url: video.url,
|
||||
title: video.title,
|
||||
description: video.description,
|
||||
views: video.views,
|
||||
watched: video.watched,
|
||||
source: this.getSourceByUrl(video.url)
|
||||
});
|
||||
}
|
||||
|
||||
this.dataSource = new MatTableDataSource(tabVideoChanged);
|
||||
const tabVideo: VideoAll[] = this.fictitiousVideosService.getTabVideoAll(8);
|
||||
this.dataSource = new MatTableDataSource(tabVideo);
|
||||
this.dataSource.sort = this.sort;
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource = this.dataSource;
|
||||
|
|
@ -92,7 +77,7 @@ export class PageHistoryUserComponent implements AfterViewInit
|
|||
|
||||
|
||||
// Supprime la video
|
||||
onDelete(video: Video): void
|
||||
onDelete(video: VideoAll): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
const index = this.dataSource.data.indexOf(video);
|
||||
|
|
@ -118,11 +103,11 @@ export class PageHistoryUserComponent implements AfterViewInit
|
|||
}
|
||||
|
||||
|
||||
// Ajoute la date actuelle dans watched.video
|
||||
onIframeClick(video: Video): void
|
||||
// Ajoute la date actuelle dans watchedDates.video
|
||||
onIframeClick(video: VideoAll): void
|
||||
{
|
||||
console.log("onIframeClick: " + video.title);
|
||||
this.userHistoryService.addVideoToHistoque(video);
|
||||
//this.userHistoryService.addVideoToHistoque(video);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<!-- liste des playlist -->
|
||||
<mat-grid-tile colspan="4" rowspan="1" class="celluleListePlaylist">
|
||||
<app-playlist-list [allPlaylists]="allPlaylists" (eventEmitter)="transmitToVideoList($event)"></app-playlist-list>
|
||||
<app-playlist-list (eventEmitter)="transmitToVideoList($event)"></app-playlist-list>
|
||||
</mat-grid-tile>
|
||||
|
||||
<!-- pub -->
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {Advert} from "../../../utils/interfaces/advert";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {Playlist} from "../../../utils/interfaces/playlist";
|
||||
import {PlaylistDB} from "../../../utils/interfaces/playlist";
|
||||
import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -13,21 +14,19 @@ import {Playlist} from "../../../utils/interfaces/playlist";
|
|||
})
|
||||
export class PageMyPlaylistsComponent implements OnInit
|
||||
{
|
||||
allPlaylists: Playlist[]; // toutes les playlists
|
||||
ad: Advert; // pub
|
||||
playlist: Playlist; // la playlist sélectionnée
|
||||
playlist: PlaylistDB; // la playlist sélectionnée
|
||||
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
private messageService: MessageService,
|
||||
private fictitioousData: FictitiousDatasService ) { }
|
||||
private fictitiousAdvertsService: FictitiousAdvertsService ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
this.allPlaylists = this.fictitioousData.getTabPlaylist(10, 10);
|
||||
this.ad = this.fictitioousData.getAdvert();
|
||||
this.ad = this.fictitiousAdvertsService.getAdvert();
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
|
|
@ -44,7 +43,7 @@ export class PageMyPlaylistsComponent implements OnInit
|
|||
*/
|
||||
}
|
||||
|
||||
transmitToVideoList(playlist: Playlist): void
|
||||
transmitToVideoList(playlist: PlaylistDB): void
|
||||
{
|
||||
this.playlist = playlist;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@
|
|||
<div *ngFor="let playlist of tabPlaylist" class="playlistContainer">
|
||||
<button class="btnPlaylist" (click)="eventEmitter.emit(playlist)">
|
||||
<span class="playlistName"> {{playlist.name}} </span><br>
|
||||
<span class="playListCount"> {{playlist.videos.length}} vidéos </span>
|
||||
<span class="playListCount" *ngIf="playlist.videoIds.length <= 1"> {{playlist.videoIds.length}} vidéo </span>
|
||||
<span class="playListCount" *ngIf="playlist.videoIds.length > 1"> {{playlist.videoIds.length}} vidéos </span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {Playlist} from "../../../utils/interfaces/playlist";
|
||||
import {PlaylistDB} from "../../../utils/interfaces/playlist";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {PopupCreatePlaylistComponent} from "../../../utils/components/popup-create-playlist/popup-create-playlist.component";
|
||||
import {PopupCreatePlaylistComponent} from "../../utils/components/popup-create-playlist/popup-create-playlist.component";
|
||||
import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
|
||||
|
||||
|
||||
|
||||
|
|
@ -15,19 +16,21 @@ import {PopupCreatePlaylistComponent} from "../../../utils/components/popup-crea
|
|||
})
|
||||
export class PlaylistListComponent implements OnInit
|
||||
{
|
||||
@Input() allPlaylists: Playlist[] = []; // toutes les playlists
|
||||
@Output() eventEmitter = new EventEmitter<Playlist>(); // pour envoyer au parent la playlist selectionner
|
||||
allPlaylists: PlaylistDB[] = []; // toutes les playlists
|
||||
@Output() eventEmitter = new EventEmitter<PlaylistDB>(); // pour envoyer au parent la playlist selectionner
|
||||
search: string = "" ; // contenu de la barre de recherche
|
||||
tabPlaylist: Playlist[] = []; // playlist affichées
|
||||
tabPlaylist: PlaylistDB[] = []; // playlist affichées
|
||||
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
public dialog: MatDialog,
|
||||
public snackBar: MatSnackBar ) { }
|
||||
public snackBar: MatSnackBar,
|
||||
private fictitiousVideosService: FictitiousVideosService ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.allPlaylists = this.fictitiousVideosService.getTabPlaylistDB(10, 10);
|
||||
this.tabPlaylist = [].concat(this.allPlaylists);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<!-- Bordure haute -->
|
||||
<div class="row topBorder">
|
||||
|
||||
<!-- Playlist existe ? -->
|
||||
<!-- PlaylistDB existe ? -->
|
||||
<div *ngIf="(playlist !== null) && (playlist !== undefined); then ok1 else nope1"></div>
|
||||
|
||||
<!-- oui -->
|
||||
|
|
@ -27,31 +27,52 @@
|
|||
<div class="row" style="margin: 0px; padding: 0px">
|
||||
<div class="listVideoContainer">
|
||||
|
||||
<!-- Playlist existe ? -->
|
||||
<!-- 'playlist' existe ? -->
|
||||
<div *ngIf="(playlist !== null) && (playlist !== undefined); then ok2 else nope2"></div>
|
||||
|
||||
<!-- oui -->
|
||||
<!-- oui, 'playlist' existe -->
|
||||
<ng-template #ok2>
|
||||
<div *ngFor="let video of playlist.videos ; let i = index" class="videoContainer">
|
||||
<!-- bouton add -->
|
||||
<button mat-icon-button (click)="onAdd(video)">
|
||||
<mat-icon> add_circle </mat-icon>
|
||||
</button>
|
||||
<!-- video -->
|
||||
<iframe appIframeTracker
|
||||
[src]=videoUrlService.safeUrl(this.video.url)
|
||||
allowfullscreen
|
||||
(iframeClick)="onIframeClick(this.video)"></iframe>
|
||||
<!-- bouton delete -->
|
||||
<button mat-icon-button (click)="onDelete(video, i)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button><br/>
|
||||
<div *ngFor="let video of videosInPlaylist; let i = index;" class="videoContainer">
|
||||
|
||||
<mat-grid-list cols="12" rowHeight="15vh">
|
||||
|
||||
<!-- btnAdd -->
|
||||
<mat-grid-tile [colspan]="1" [rowspan]="1">
|
||||
<button mat-icon-button (click)="onAdd(video)">
|
||||
<mat-icon> add_circle </mat-icon>
|
||||
</button>
|
||||
</mat-grid-tile>
|
||||
|
||||
<!-- imgVideo -->
|
||||
<mat-grid-tile [colspan]="10" [rowspan]="1">
|
||||
<div class="col-8">
|
||||
<div style="margin: auto; width: 20vw; height: 15vh;">
|
||||
<div class="imgsContainer">
|
||||
<img class="imgPlay" src="/assets/play7.png">
|
||||
<img class="imgVideo" [src]="video.imageUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-grid-tile>
|
||||
|
||||
<!-- btnDelete -->
|
||||
<mat-grid-tile [colspan]="1" [rowspan]="1">
|
||||
<button mat-icon-button (click)="onDelete(video, i)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-grid-tile>
|
||||
|
||||
</mat-grid-list>
|
||||
|
||||
<!-- titre video -->
|
||||
<span>{{video.title}}</span>
|
||||
<span style="margin-top: 10px">
|
||||
{{video.title}}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<!-- non -->
|
||||
<!-- non, 'playlist' n'existe pas -->
|
||||
<ng-template #nope2>
|
||||
<div></div>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,30 @@
|
|||
|
||||
.videoContainer {
|
||||
border-bottom: solid 1px black;
|
||||
padding: 25px;
|
||||
padding: 15px 0px 15px 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.imgsContainer {
|
||||
position: relative;
|
||||
width: 20vw;
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
.imgPlay {
|
||||
position: absolute;
|
||||
margin-left: 9vw;
|
||||
width: 3vw;
|
||||
margin-top: 5vh;
|
||||
height: 6vh;
|
||||
padding: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.imgVideo {
|
||||
border: solid 1px black;
|
||||
width: 20vw;
|
||||
height: 15vh;
|
||||
padding: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
// BottomBorder --------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {Video} from "../../../utils/interfaces/video";
|
||||
import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
|
||||
import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
|
||||
import {VideoAll, VideoDB} from "../../../utils/interfaces/video";
|
||||
import {AddVideoToPlaylistsService} from "../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {Playlist} from "../../../utils/interfaces/playlist";
|
||||
import {PlaylistDB} from "../../../utils/interfaces/playlist";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
|
||||
import {UserHistoryService} from "../../utils/services/userHistory/userHistory.service";
|
||||
import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fictitiousUtils/fictitious-utils.service";
|
||||
import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
|
||||
|
||||
|
||||
|
||||
|
|
@ -16,31 +16,49 @@ import {UserHistoryService} from "../../../utils/services/userHistory/userHistor
|
|||
templateUrl: './video-list.component.html',
|
||||
styleUrls: ['./video-list.component.scss']
|
||||
})
|
||||
export class VideoListComponent
|
||||
export class VideoListComponent implements OnChanges
|
||||
{
|
||||
@Input() playlist: Playlist;
|
||||
@Input() playlist: PlaylistDB;
|
||||
videosInPlaylist: VideoAll[] = [];
|
||||
allUserVideos: VideoAll[] = this.fictitiousVideosService.getAllVideoAll();
|
||||
|
||||
|
||||
constructor( private messageService: MessageService,
|
||||
public themeService: ThemeService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
public videoUrlService: VideoUrlService,
|
||||
private fictitiousUtilsService: FictitiousUtilsService,
|
||||
private addVideoToPlaylistService: AddVideoToPlaylistsService,
|
||||
private snackBar: MatSnackBar,
|
||||
private historiqueService: UserHistoryService ) { }
|
||||
public fictitiousVideosService: FictitiousVideosService,
|
||||
private historiqueService: UserHistoryService ) { }
|
||||
|
||||
|
||||
onAdd(video: Video): void
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
if((this.playlist !== null) && (this.playlist !== undefined))
|
||||
{
|
||||
this.videosInPlaylist = [];
|
||||
for(let _idVideo of this.playlist.videoIds)
|
||||
{
|
||||
const video = this.allUserVideos.find(video => video._id === _idVideo);
|
||||
this.videosInPlaylist.push(video);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onAdd(video: VideoAll): void
|
||||
{
|
||||
this.addVideoToPlaylistService.run(video);
|
||||
}
|
||||
|
||||
|
||||
onDelete(video0: Video, indexVideo: number): void
|
||||
onDelete(video0: VideoAll, indexVideo: number): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
let message = "La video a bien été supprimé de la playlist" ;
|
||||
this.playlist.videos.splice(indexVideo, 1);
|
||||
this.playlist.videoIds.splice(indexVideo, 1);
|
||||
this.videosInPlaylist.splice(indexVideo, 1);
|
||||
|
||||
let message = "La video a bien été supprimé de la playlist";
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
this.snackBar.open( message, "", config);
|
||||
|
||||
|
|
@ -60,13 +78,9 @@ export class VideoListComponent
|
|||
this.snackBar.open( message, "", config);
|
||||
})
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
onIframeClick(video: Video): void
|
||||
{
|
||||
console.log("onIframeClick: " + video.title);
|
||||
this.historiqueService.addVideoToHistoque(video);
|
||||
//Pour relier les collections "Videos" et "Playlists", on a mis l'attribut "playlistIds" dans "Videos"
|
||||
// Mais en vrai, ça serai plus facile pour moi si on mettait plutot un attribut "videoIds" dans "Playlists"
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,12 @@ import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} f
|
|||
import {COMMA, ENTER} from "@angular/cdk/keycodes";
|
||||
import {FormControl} from "@angular/forms";
|
||||
import {Observable} from "rxjs";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {map, startWith} from "rxjs/operators";
|
||||
import {MatChipInputEvent} from "@angular/material/chips";
|
||||
import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
|
||||
import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fictitiousUtils/fictitious-utils.service";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -27,7 +28,7 @@ export class InputInterestsProfilComponent implements OnInit
|
|||
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
||||
|
||||
|
||||
constructor( private fictitiousDatasService: FictitiousDatasService,
|
||||
constructor( private fictitiousUtilsService: FictitiousUtilsService,
|
||||
private messageService: MessageService ) {}
|
||||
|
||||
|
||||
|
|
@ -38,7 +39,7 @@ export class InputInterestsProfilComponent implements OnInit
|
|||
map((fruit: string | null) => fruit ? this._filter(fruit) : this.allInterests.slice()));
|
||||
|
||||
// --- FAUX CODE ---
|
||||
this.allInterests = this.fictitiousDatasService.getTags();
|
||||
this.allInterests = this.fictitiousUtilsService.getTags();
|
||||
this.allInterests.sort();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<!-- Photo de profil -->
|
||||
<div style="text-align: center">
|
||||
<img [src]="user.profilePictureUrl" onerror="this.onerror=null; this.src='assets/profil.png'">
|
||||
<img [src]="user.profileImageUrl" onerror="this.onerror=null; this.src='assets/profil.png'">
|
||||
</div>
|
||||
|
||||
<!-- Col gauche & droite -->
|
||||
|
|
@ -41,10 +41,10 @@
|
|||
<div class="col-4 myValue"> {{user.login}} </div>
|
||||
</div>
|
||||
|
||||
<!-- mail -->
|
||||
<!-- email -->
|
||||
<div class="row myRow">
|
||||
<div class="col-8 myLabel">Mail:</div>
|
||||
<div class="col-4 myValue"> {{user.mail}} </div>
|
||||
<div class="col-4 myValue"> {{user.email}} </div>
|
||||
</div>
|
||||
|
||||
<!-- gender -->
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {User} from "../../../utils/interfaces/user";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {PopupUpdateUserComponent} from "../popup-update-user/popup-update-user.component";
|
||||
import {FictitiousUsersService} from "../../../utils/services/fictitiousDatas/fictitiousUsers/fictitious-users.service";
|
||||
|
||||
|
||||
|
||||
|
|
@ -19,14 +19,14 @@ export class PageProfilUserComponent implements OnInit
|
|||
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
private fictitiousUsersService: FictitiousUsersService,
|
||||
public dialog: MatDialog,
|
||||
private snackBar: MatSnackBar ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.user = this.fictitiousDatasService.getUser();
|
||||
this.user = this.fictitiousUsersService.getUser();
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
|
||||
<!-- Photo de profil -->
|
||||
<div style="text-align: center; font-size: small">
|
||||
<img [src]="userCopy.profilePictureUrl" onerror="this.onerror=null; this.src='assets/profil.png'"><br>
|
||||
<img [src]="userCopy.profileImageUrl" onerror="this.onerror=null; this.src='assets/profil.png'"><br>
|
||||
<input title="lien vers image"
|
||||
type="text"
|
||||
class="form-control inputUrlImage"
|
||||
style="font-size: small"
|
||||
[(ngModel)]="userCopy.profilePictureUrl">
|
||||
[(ngModel)]="userCopy.profileImageUrl">
|
||||
</div><br>
|
||||
|
||||
<!-- Col gauche & droite -->
|
||||
|
|
|
|||
|
|
@ -30,12 +30,12 @@ export class PopupUpdateUserComponent implements OnInit
|
|||
_id: user0._id,
|
||||
login: user0.login,
|
||||
hashPass: user0.hashPass,
|
||||
mail: user0.mail,
|
||||
email: user0.mail,
|
||||
role: {
|
||||
name: user0.role.name,
|
||||
permission: user0.role.permission,
|
||||
},
|
||||
profilePictureUrl: user0.profilePictureUrl,
|
||||
profileImageUrl: user0.profileImageUrl,
|
||||
dateOfBirth: user0.dateOfBirth,
|
||||
gender: user0.gender,
|
||||
interests: [],
|
||||
|
|
@ -70,11 +70,11 @@ export class PopupUpdateUserComponent implements OnInit
|
|||
this.errorMessage = "Veuillez remplir le champ 'login'." ;
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.userCopy.mail.length === 0) {
|
||||
else if(this.userCopy.email.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'email'." ;
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(!this.isValidEmail(this.userCopy.mail)) {
|
||||
else if(!this.isValidEmail(this.userCopy.email)) {
|
||||
this.errorMessage = "Email invalide." ;
|
||||
this.hasError = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 ---
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<!-- 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>
|
||||
</span>
|
||||
<span *ngIf="page!==((indexPage/9)+1)">
|
||||
<span style="text-decoration: underline; cursor: pointer;">{{page}}</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<!-- btn suivant -->
|
||||
<button mat-button class="btnPaginator" [disabled]="indexPage+9>=tabVideo.length" (click)="indexPage=indexPage+9"> Suivant > </button>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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) + "..." ;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
<span class="helper"></span>
|
||||
<img [src]="'assets/pub/'+ad.images[idxImage].url" [alt]="ad.images[idxImage].url">
|
||||
</div>
|
||||
</div>
|
||||
28
src/app/user/utils/components/advert/advert.component.scss
Normal file
28
src/app/user/utils/components/advert/advert.component.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.myContainer {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border: solid 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.lightTheme img {
|
||||
border-color: black;
|
||||
}
|
||||
.darkTheme img {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
|
||||
.helper {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AdvertComponent } from './advert.component';
|
||||
|
||||
describe('PubComponent', () => {
|
||||
let component: AdvertComponent;
|
||||
let fixture: ComponentFixture<AdvertComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ AdvertComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AdvertComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
27
src/app/user/utils/components/advert/advert.component.ts
Normal file
27
src/app/user/utils/components/advert/advert.component.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {Advert} from "../../../../utils/interfaces/advert";
|
||||
import {ThemeService} from "../../../../utils/services/theme/theme.service";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-advert',
|
||||
templateUrl: './advert.component.html',
|
||||
styleUrls: ['./advert.component.scss']
|
||||
})
|
||||
export class AdvertComponent implements OnInit
|
||||
{
|
||||
@Input() ad: Advert;
|
||||
idxImage: number = 0;
|
||||
|
||||
|
||||
constructor(public themeService: ThemeService) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
const nbImages = this.ad.images.length;
|
||||
this.idxImage = Math.floor(Math.random() * nbImages);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<h3> Ajouter dans </h3>
|
||||
|
||||
|
||||
<mat-divider></mat-divider><!------------------------------------------------------------------------------------------------------------->
|
||||
|
||||
|
||||
<div class="conteneurPlaylists">
|
||||
<div *ngFor="let playlist of tabPlaylistAndBool" style="margin-left: 10px">
|
||||
<mat-checkbox [(ngModel)]="playlist.isSelected"> {{playlist.name}} </mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<mat-divider></mat-divider><!------------------------------------------------------------------------------------------------------------->
|
||||
|
||||
|
||||
<div class="conteneurBtnCreerPlaylist" *ngIf="!goToCreatePlaylist">
|
||||
<button mat-button (click)="goToCreatePlaylist=true">
|
||||
<mat-label>Creer une playlist</mat-label>
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="conteneurInputNewPlaylist" *ngIf="goToCreatePlaylist">
|
||||
<mat-form-field>
|
||||
<mat-label> Nom playlist </mat-label>
|
||||
<input matInput type="text" [(ngModel)]="newPlaylistName">
|
||||
</mat-form-field>
|
||||
<button mat-icon-button (click)="goToCreatePlaylist=false">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<mat-divider></mat-divider><!------------------------------------------------------------------------------------------------------------->
|
||||
|
||||
|
||||
<mat-dialog-actions style="justify-content: flex-end;">
|
||||
<button mat-button mat-dialog-close (click)="onAnnuler()">Annuler</button>
|
||||
<button mat-button [mat-dialog-close]="true" cdkFocusInitial (click)="onValider()">Valider</button>
|
||||
</mat-dialog-actions>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
h3 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.conteneurPlaylists {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.conteneurBtnCreerPlaylist {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.conteneurInputNewPlaylist {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
|
||||
// aura
|
||||
::ng-deep .mat-checkbox-ripple .mat-ripple-element {
|
||||
background-color: grey !important;
|
||||
}
|
||||
|
||||
// contenu coche
|
||||
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
|
||||
background-color: black !important;
|
||||
}
|
||||
|
||||
// indeterminate
|
||||
::ng-deep .mat-checkbox .mat-checkbox-frame {
|
||||
border-color: black !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupAddVideoToPlaylistsComponent } from './popup-add-video-to-playlists.component';
|
||||
|
||||
describe('PopupAddVideoToPlaylistsComponent', () => {
|
||||
let component: PopupAddVideoToPlaylistsComponent;
|
||||
let fixture: ComponentFixture<PopupAddVideoToPlaylistsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupAddVideoToPlaylistsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupAddVideoToPlaylistsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
import {VideoDB} from "../../../../utils/interfaces/video";
|
||||
import {MessageService} from "../../../../utils/services/message/message.service";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-add-video-to-playlists',
|
||||
templateUrl: './popup-add-video-to-playlists.component.html',
|
||||
styleUrls: ['./popup-add-video-to-playlists.component.scss']
|
||||
})
|
||||
export class PopupAddVideoToPlaylistsComponent implements OnInit
|
||||
{
|
||||
video: VideoDB;
|
||||
tabPlaylistAndBool = [];
|
||||
goToCreatePlaylist = false;
|
||||
newPlaylistName = "";
|
||||
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupAddVideoToPlaylistsComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data,
|
||||
private messageService: MessageService) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.video = this.data.video;
|
||||
for(let playlist of this.data.playlists)
|
||||
{
|
||||
playlist["isSelected"] = false;
|
||||
this.tabPlaylistAndBool.push(playlist);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onValider(): void
|
||||
{
|
||||
const tabPlaylist = [];
|
||||
for(let playlist of this.tabPlaylistAndBool)
|
||||
{
|
||||
if(playlist.isSelected) {
|
||||
delete playlist["isSelected"];
|
||||
tabPlaylist.push(playlist);
|
||||
}
|
||||
}
|
||||
|
||||
// --- FAUX CODE ---
|
||||
this.dialogRef.close("success");
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
if(!this.goToCreatePlaylist) this.newPlaylistName = "";
|
||||
const data = { "video": this.video, "playlists": tabPlaylist, "newPlaylistName": this.newPlaylistName };
|
||||
this.messageService
|
||||
.sendMessage("user/add/vidéo", data)
|
||||
.subscribe( retour => { this.dialogRef.close(retour.status) });
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
onAnnuler(): void
|
||||
{
|
||||
this.dialogRef.close("annulation")
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<div style="text-align: center; margin: 0px; padding: 0px">
|
||||
|
||||
<div style="margin: 0px; padding: 0px">
|
||||
<mat-form-field appearance="fill" style="margin: 0px; padding: 0px">
|
||||
<mat-label> Nom de la playlist </mat-label>
|
||||
<input matInput [(ngModel)]="name" style="width: 100%">
|
||||
</mat-form-field>
|
||||
<span *ngIf="hasError" class="mat-error"> {{errorMessage}} </span>
|
||||
</div>
|
||||
|
||||
<div style="text-align: right ; margin: 0px; padding: 0px">
|
||||
<button mat-button (click)="onAnnuler()">Annuler</button>
|
||||
<button mat-button (click)="onValider()">Creer</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupCreatePlaylistComponent } from './popup-create-playlist.component';
|
||||
|
||||
describe('PopupCreatePlaylistComponent', () => {
|
||||
let component: PopupCreatePlaylistComponent;
|
||||
let fixture: ComponentFixture<PopupCreatePlaylistComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupCreatePlaylistComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupCreatePlaylistComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
import {MessageService} from "../../../../utils/services/message/message.service";
|
||||
import {PlaylistDB} from "../../../../utils/interfaces/playlist";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-create-playlist',
|
||||
templateUrl: './popup-create-playlist.component.html',
|
||||
styleUrls: ['./popup-create-playlist.component.scss']
|
||||
})
|
||||
export class PopupCreatePlaylistComponent implements OnInit
|
||||
{
|
||||
name: string = "" ;
|
||||
hasError: boolean = false;
|
||||
tabNomPlaylist: string[] = [];
|
||||
errorMessage: string = "" ;
|
||||
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupCreatePlaylistComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data,
|
||||
private messageService: MessageService) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.tabNomPlaylist = this.data.map( playlist0 => playlist0.name );
|
||||
}
|
||||
|
||||
|
||||
onValider(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
//
|
||||
this.checkError();
|
||||
if(!this.hasError)
|
||||
{
|
||||
const playlist: PlaylistDB = {
|
||||
_id: "",
|
||||
userId: "userId",
|
||||
name: this.name,
|
||||
videoIds: [],
|
||||
isActive: true,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
};
|
||||
this.dialogRef.close(playlist);
|
||||
}
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.checkError();
|
||||
if(!this.hasError)
|
||||
{
|
||||
this.messageService
|
||||
.sendMessage("user/create/playlist", {title: this.data.title})
|
||||
.subscribe(retour => {
|
||||
|
||||
if (retour.status === "error") {
|
||||
console.log(retour);
|
||||
this.dialogRef.close(null);
|
||||
} else {
|
||||
this.dialogRef.close(retour.data.playlist);
|
||||
}
|
||||
});
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
checkError(): void
|
||||
{
|
||||
if(this.name === "") {
|
||||
this.errorMessage = "Le nom ne peut pas être vide" ;
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.tabNomPlaylist.includes(this.name)){
|
||||
this.errorMessage = "Ce nom est déjà utilisé" ;
|
||||
this.hasError = true;
|
||||
}
|
||||
else {
|
||||
this.hasError = false;
|
||||
this.errorMessage = "" ;
|
||||
}
|
||||
console.log("em:" + this.errorMessage);
|
||||
}
|
||||
|
||||
|
||||
onAnnuler(): void
|
||||
{
|
||||
this.dialogRef.close(null);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AddVideoToPlaylistsService } from './add-video-to-playlists.service';
|
||||
|
||||
describe('PlaylistService', () => {
|
||||
let service: AddVideoToPlaylistsService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(AddVideoToPlaylistsService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import {MessageService} from "../../../../utils/services/message/message.service";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {PopupAddVideoToPlaylistsComponent} from "../../components/popup-add-video-to-playlists/popup-add-video-to-playlists.component";
|
||||
import {VideoDB} from "../../../../utils/interfaces/video";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {FictitiousVideosService} from "../../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
|
||||
|
||||
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AddVideoToPlaylistsService
|
||||
{
|
||||
private _video: VideoDB;
|
||||
|
||||
|
||||
constructor( private messageService: MessageService,
|
||||
public dialog: MatDialog,
|
||||
private fictitiousVideosService: FictitiousVideosService,
|
||||
private snackBar: MatSnackBar ) { }
|
||||
|
||||
|
||||
// --- FAUX CODE ---
|
||||
run(video0: VideoDB): void
|
||||
{
|
||||
this._video = video0;
|
||||
const retour = {
|
||||
status: "success",
|
||||
data: this.fictitiousVideosService.getTabPlaylistDB(4, 5),
|
||||
}
|
||||
this.afterReceivingPlaylists(retour)
|
||||
}
|
||||
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
run(video0: VideoDB): void
|
||||
{
|
||||
this._video = video0;
|
||||
this.messageService
|
||||
.sendMessage('user/get/playlists', null)
|
||||
.subscribe( retour => { this.afterReceivingPlaylists(retour) });
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
private afterReceivingPlaylists(retour): void
|
||||
{
|
||||
if(retour.status === "error") console.log(retour.data);
|
||||
else
|
||||
{
|
||||
const config = {
|
||||
width: '30%',
|
||||
data: { video: this._video, playlists: retour.data }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupAddVideoToPlaylistsComponent, config )
|
||||
.afterClosed()
|
||||
.subscribe(retour => { this.afterClosingDialog(retour); });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private afterClosingDialog(retour): void
|
||||
{
|
||||
let message = "" ;
|
||||
switch (retour)
|
||||
{
|
||||
case "error":
|
||||
message = "Echec de l'opération ❌" ;
|
||||
break;
|
||||
case "success":
|
||||
message = "La vidéo a bien été ajoutée ✔" ;
|
||||
break;
|
||||
case "annulation":
|
||||
case null:
|
||||
case undefined:
|
||||
message = "Annulation de l'opération" ;
|
||||
break;
|
||||
}
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
this.snackBar.open( message, "", config);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UserHistoryService } from './userHistory.service';
|
||||
|
||||
describe('HistoriqueService', () => {
|
||||
let service: UserHistoryService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(UserHistoryService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import {VideoDB} from "../../../../utils/interfaces/video";
|
||||
import {MessageService} from "../../../../utils/services/message/message.service";
|
||||
|
||||
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class UserHistoryService
|
||||
{
|
||||
private tabVideoUrlClicked: string[] = [];
|
||||
|
||||
|
||||
constructor(private messageService: MessageService) { }
|
||||
|
||||
|
||||
public addVideoToHistoque(video: VideoDB): void
|
||||
{
|
||||
if (!this.tabVideoUrlClicked.includes(video.videoId))
|
||||
{
|
||||
this.tabVideoUrlClicked.push(video.videoId);
|
||||
video.watchedDates.push(new Date());
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage("user/add/watchedVideo", {watchedVideo: watchedVideo0})
|
||||
.subscribe(retour => {});
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public clearTabVideoUrlClicked()
|
||||
{
|
||||
this.tabVideoUrlClicked = [];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { VideoUrlService } from './video-url.service';
|
||||
|
||||
describe('VideoUrlService', () => {
|
||||
let service: VideoUrlService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(VideoUrlService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
45
src/app/user/utils/services/videoUrl/video-url.service.ts
Normal file
45
src/app/user/utils/services/videoUrl/video-url.service.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class VideoUrlService
|
||||
{
|
||||
|
||||
constructor(private _sanitizer: DomSanitizer) { }
|
||||
|
||||
|
||||
safeUrl(videoUrl: string): SafeResourceUrl
|
||||
{
|
||||
if(videoUrl.includes("youtu")) videoUrl = this.youtubeSafeUrl(videoUrl);
|
||||
if(videoUrl.includes("dailymotion")) videoUrl = this.daylimotionSafeUrl(videoUrl);
|
||||
return this._sanitizer.bypassSecurityTrustResourceUrl(videoUrl);
|
||||
}
|
||||
|
||||
|
||||
youtubeSafeUrl(videoUrl: string): string
|
||||
{
|
||||
if(videoUrl.includes("youtu.be"))
|
||||
{
|
||||
//console.log("de la forme: https://youtu.be/blablabla");
|
||||
const tab = videoUrl.split("youtu.be/");
|
||||
videoUrl = tab[0] + "www.youtube.com/embed/" + tab[1];
|
||||
}
|
||||
else if(videoUrl.includes("youtube.com/watch?v="))
|
||||
{
|
||||
//console.log("de la forme: https://www.youtube.com/watch?v=blablabla");
|
||||
const tab = videoUrl.split("youtube.com/watch?v=");
|
||||
videoUrl = tab[0] + "youtube.com/embed/" + tab[1];
|
||||
}
|
||||
return videoUrl;
|
||||
}
|
||||
|
||||
|
||||
daylimotionSafeUrl(videoUrl: string): string
|
||||
{
|
||||
//console.log("de la forme: https://www.dailymotion.com/video/blablabla");
|
||||
const n = "https://www.dailymotion.com/".length;
|
||||
return videoUrl.slice(0, n) + "embed/" + videoUrl.slice(n);
|
||||
}
|
||||
}
|
||||
Reference in a new issue