realisation de la page mesPlaylists
This commit is contained in:
MiharyR
parent
8784c290ca
commit
d0ca04aefc
24 changed files with 842 additions and 36 deletions
|
|
@ -3,14 +3,18 @@ import { RouterModule, Routes } from '@angular/router';
|
|||
import {PageConnexionComponent} from './pourLes3Roles/page-connexion/page-connexion.component';
|
||||
import {PageRegisterComponent} from './pourLes3Roles/register/page-register/page-register.component';
|
||||
import {PageSearchComponent} from "./user/search/page-search/page-search.component";
|
||||
import {PageMyPlaylistsComponent} from "./user/myPlaylists/page-my-playlists/page-my-playlists.component";
|
||||
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: PageConnexionComponent },
|
||||
{ path: 'connexion', component: PageConnexionComponent },
|
||||
{ path: 'register', component: PageRegisterComponent },
|
||||
{ path: 'search', component: PageSearchComponent }
|
||||
{ path: 'search', component: PageSearchComponent },
|
||||
{ path: 'myPlaylists', component: PageMyPlaylistsComponent }
|
||||
];
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
|
|
|
|||
|
|
@ -26,6 +26,10 @@ import {MatFormFieldModule} from "@angular/material/form-field";
|
|||
import {MatSnackBarModule} from "@angular/material/snack-bar";
|
||||
import { IframeTrackerDirective } from './utils/directives/iframe-tracker/iframe-tracker.directive';
|
||||
import {MatGridListModule} from "@angular/material/grid-list";
|
||||
import { PageMyPlaylistsComponent } from './user/myPlaylists/page-my-playlists/page-my-playlists.component';
|
||||
import { PlaylistListComponent } from './user/myPlaylists/playlist-list/playlist-list.component';
|
||||
import {VideoListComponent} from "./user/myPlaylists/video-list/video-list.component";
|
||||
import { PopupCreatePlaylistComponent } from './utils/components/popup-create-playlist/popup-create-playlist.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -41,6 +45,11 @@ import {MatGridListModule} from "@angular/material/grid-list";
|
|||
VideoGridComponent,
|
||||
PopupAddVideoToPlaylistsComponent,
|
||||
IframeTrackerDirective,
|
||||
PageMyPlaylistsComponent,
|
||||
VideoListComponent,
|
||||
PlaylistListComponent,
|
||||
VideoListComponent,
|
||||
PopupCreatePlaylistComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
|
||||
<!-- Navbar -->
|
||||
<div style="margin-bottom: 50px">
|
||||
<app-nav-bar pour="user"></app-nav-bar>
|
||||
</div>
|
||||
|
||||
<!-- --------------------------------------------------------------------- -->
|
||||
|
||||
<!-- [liste des videos] + [liste des playlist] + [pub] -->
|
||||
<mat-grid-list cols="10" rowHeight="85vh">
|
||||
|
||||
<!-- liste des videos -->
|
||||
<mat-grid-tile colspan="4" rowspan="1" class="celluleListeVideo">
|
||||
<div class="videoListContainer">
|
||||
<app-video-list [playlist]="playlist"></app-video-list>
|
||||
</div>
|
||||
</mat-grid-tile>
|
||||
|
||||
<!-- liste des playlist -->
|
||||
<mat-grid-tile colspan="4" rowspan="1" class="celluleListePlaylist">
|
||||
<div class="playlistListContainer">
|
||||
<app-playlist-list [allPlaylists]="allPlaylists" (eventEmitter)="transmitToVideoList($event)"></app-playlist-list>
|
||||
</div>
|
||||
</mat-grid-tile>
|
||||
|
||||
<!-- pub -->
|
||||
<mat-grid-tile colspan="2" rowspan="1" class="cellulePub">
|
||||
<div class="conteneurPub">
|
||||
<app-advert [ad]="ad"></app-advert>
|
||||
</div>
|
||||
</mat-grid-tile>
|
||||
|
||||
</mat-grid-list>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.lightTheme {
|
||||
border-color: black;
|
||||
}
|
||||
.darkTheme {
|
||||
border-color: white;
|
||||
}
|
||||
.myContainer {
|
||||
text-align: center;
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Liste des vidéos -------------------------------------------------
|
||||
|
||||
.celluleListeVideo {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
// Liste des playlists ---------------------------------------------
|
||||
|
||||
.celluleListePlaylist {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.playlistListContainer {
|
||||
}
|
||||
|
||||
// Pub -------------------------------------------------------------
|
||||
|
||||
.cellulePub {
|
||||
padding: 0px 10px 0px 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.conteneurPub {
|
||||
height: 85vh;
|
||||
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%);
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PageMyPlaylistsComponent } from './page-my-playlists.component';
|
||||
|
||||
describe('PageMesPlaylistsComponent', () => {
|
||||
let component: PageMyPlaylistsComponent;
|
||||
let fixture: ComponentFixture<PageMyPlaylistsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PageMyPlaylistsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PageMyPlaylistsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
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";
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-my-playlists',
|
||||
templateUrl: './page-my-playlists.component.html',
|
||||
styleUrls: ['./page-my-playlists.component.scss']
|
||||
})
|
||||
export class PageMyPlaylistsComponent implements OnInit
|
||||
{
|
||||
allPlaylists: Playlist[]; // toutes les playlists
|
||||
ad: Advert; // pub
|
||||
playlist: Playlist; // la playlist sélectionnée
|
||||
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
private messageService: MessageService,
|
||||
private fictitioousData: FictitiousDatasService ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
this.allPlaylists = this.fictitioousData.getTabPlaylist(10, 10);
|
||||
this.ad = this.fictitioousData.getAdvert();
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage("user/get/playlists", null)
|
||||
.subscribe( retour => {
|
||||
|
||||
if(retour.status === "error") console.log(retour.data);
|
||||
else {
|
||||
this.tabPlaylists = retour.data.playlists;
|
||||
this.ad = retour.data.ad;
|
||||
}
|
||||
})
|
||||
*/
|
||||
}
|
||||
|
||||
transmitToVideoList(playlist: Playlist): void
|
||||
{
|
||||
this.playlist = playlist;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
|
||||
<!-- Search bar -->
|
||||
<div class="row" style="margin: 0px">
|
||||
<div class="searchBarContainer">
|
||||
<input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search" (ngModelChange)="whileSearch()">
|
||||
<!--
|
||||
<button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Liste des playlist -->
|
||||
<div class="row" style="margin: 0px">
|
||||
<div class="playlistListContainer">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Bouton creer playlist-->
|
||||
<div class="row" style="margin: 0px">
|
||||
<div class="btnCreerPlaylistContainer">
|
||||
<button class="btnCreerPlaylist" (click)="onCreatePlaylist()"> Creer playlist </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
.myContainer {
|
||||
background-color: white ;
|
||||
text-align: center;
|
||||
width: 35vw;
|
||||
height: 79vh;
|
||||
margin: 3vh 0vh 3vh 0vh;
|
||||
padding: 0px;
|
||||
border: solid 2px black;
|
||||
}
|
||||
|
||||
// SearchBar -----------------------------------------------------------
|
||||
|
||||
.searchBarContainer {
|
||||
background-color: #dcdcdc;
|
||||
border-bottom: solid 2px black;
|
||||
height: 5vh;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.inputSearchBar {
|
||||
width: 50%;
|
||||
}
|
||||
.btnRechercher {
|
||||
border: solid black 1px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
// Liste des playlists -------------------------------------------------
|
||||
|
||||
.playlistListContainer {
|
||||
max-width: 100%;
|
||||
height: 70vh;
|
||||
overflow-y: scroll;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.playlistContainer {
|
||||
max-width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.btnPlaylist {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-bottom: solid 2px black;
|
||||
width: 100%;
|
||||
}
|
||||
.btnPlaylist:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.playListCount {
|
||||
color: gray;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Bouton creer playlist -------------------------------------------------
|
||||
|
||||
.btnCreerPlaylistContainer {
|
||||
height: 4vh;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.btnCreerPlaylist {
|
||||
background-color: #dcdcdc;
|
||||
border-top: solid 2px black;
|
||||
border-bottom: solid 2px black;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
.btnCreerPlaylist:hover {
|
||||
background-color: #969696;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PlaylistListComponent } from './playlist-list.component';
|
||||
|
||||
describe('PlaylistListComponent', () => {
|
||||
let component: PlaylistListComponent;
|
||||
let fixture: ComponentFixture<PlaylistListComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PlaylistListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PlaylistListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {Playlist} from "../../../utils/interfaces/playlist";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {PopupAddVideoToPlaylistsComponent} from "../../../utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {PopupCreatePlaylistComponent} from "../../../utils/components/popup-create-playlist/popup-create-playlist.component";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-playlist-list',
|
||||
templateUrl: './playlist-list.component.html',
|
||||
styleUrls: ['./playlist-list.component.scss']
|
||||
})
|
||||
export class PlaylistListComponent implements OnInit
|
||||
{
|
||||
@Input() allPlaylists: Playlist[] = []; // toutes les playlists
|
||||
@Output() eventEmitter = new EventEmitter<Playlist>(); // pour envoyer au parent la playlist selectionner
|
||||
search: string = "" ; // contenu de la barre de recherche
|
||||
tabPlaylist: Playlist[] = []; // playlist affichées
|
||||
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
public dialog: MatDialog,
|
||||
public snackBar: MatSnackBar ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.tabPlaylist = [].concat(this.allPlaylists);
|
||||
}
|
||||
|
||||
|
||||
whileSearch()
|
||||
{
|
||||
console.log("whileSearch");
|
||||
this.tabPlaylist = [];
|
||||
for(let playlist of this.allPlaylists)
|
||||
{
|
||||
if(playlist.name.includes(this.search)) this.tabPlaylist.push(playlist);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onCreatePlaylist(): void
|
||||
{
|
||||
const config = { width: '15%', data: this.tabPlaylist };
|
||||
this.dialog
|
||||
.open(PopupCreatePlaylistComponent, config )
|
||||
.afterClosed()
|
||||
.subscribe(playlist => {
|
||||
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
if((playlist === null) || (playlist === undefined)) {
|
||||
this.snackBar.open("Opération annulée ❌", "", config);
|
||||
}
|
||||
else {
|
||||
this.allPlaylists.push(playlist);
|
||||
this.tabPlaylist.push(playlist);
|
||||
this.snackBar.open("La playlist a bien été créée ✔", "", config);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
|
||||
<!-- Bordure haute -->
|
||||
<div class="row" style="margin: 0px; padding: 0px">
|
||||
<div class="topBorder">
|
||||
|
||||
<!-- Playlist existe ? -->
|
||||
<div *ngIf="(playlist !== null) && (playlist !== undefined); then ok1 else nope1"></div>
|
||||
|
||||
<!-- oui -->
|
||||
<ng-template #ok1>
|
||||
<span class="spanPlayListTitle"> {{playlist.name}} </span>
|
||||
</ng-template>
|
||||
|
||||
<!-- non -->
|
||||
<ng-template #nope1>
|
||||
<span class="spanPlayListTitle"> Aucune playlist selectionnée </span>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Liste des videos -->
|
||||
<div class="row" style="margin: 0px; padding: 0px">
|
||||
<div class="listVideoContainer">
|
||||
|
||||
<!-- Playlist existe ? -->
|
||||
<div *ngIf="(playlist !== null) && (playlist !== undefined); then ok2 else nope2"></div>
|
||||
|
||||
<!-- oui -->
|
||||
<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.url)"></iframe>
|
||||
<!-- bouton delete -->
|
||||
<button mat-icon-button (click)="onDelete(video, i)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button><br/>
|
||||
<!-- titre video -->
|
||||
<span>{{video.title}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<!-- non -->
|
||||
<ng-template #nope2>
|
||||
<div></div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Bordure basse -->
|
||||
<div class="row" style="margin: 0px; padding: 0px">
|
||||
<div class="bottomBorder"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
.myContainer {
|
||||
background-color: white ;
|
||||
text-align: center;
|
||||
width: 35vw;
|
||||
height: 79vh;
|
||||
margin: 3vh 0vh 3vh 0vh;
|
||||
padding: 0px;
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
// TopBorder --------------------------------------------------------
|
||||
|
||||
.topBorder {
|
||||
height: 4vh;
|
||||
background-color: #dcdcdc;
|
||||
text-align: left;
|
||||
padding: 7px;
|
||||
display: inline-block;
|
||||
border-bottom: solid 1px black;
|
||||
}
|
||||
|
||||
.spanPlayListTitle {
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
font-size: x-large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Liste des videos ------------------------------------------------
|
||||
|
||||
.listVideoContainer {
|
||||
height: 73vh;
|
||||
background-color: white;
|
||||
padding: 0px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.videoContainer {
|
||||
border-bottom: solid 2px black;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
// BottomBorder --------------------------------------------------------
|
||||
|
||||
.bottomBorder {
|
||||
height: 2vh;
|
||||
background-color: #dcdcdc;
|
||||
border-top: solid 1px black;
|
||||
border-bottom: solid 1px black;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { VideoListComponent } from './video-list.component';
|
||||
|
||||
describe('VideoListComponent', () => {
|
||||
let component: VideoListComponent;
|
||||
let fixture: ComponentFixture<VideoListComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ VideoListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(VideoListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
69
src/app/user/myPlaylists/video-list/video-list.component.ts
Normal file
69
src/app/user/myPlaylists/video-list/video-list.component.ts
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import {Component, Input, OnInit} 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 {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {Playlist} from "../../../utils/interfaces/playlist";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-video-list',
|
||||
templateUrl: './video-list.component.html',
|
||||
styleUrls: ['./video-list.component.scss']
|
||||
})
|
||||
export class VideoListComponent
|
||||
{
|
||||
@Input() playlist: Playlist;
|
||||
|
||||
|
||||
constructor( private messageService: MessageService,
|
||||
public themeService: ThemeService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
public videoUrlService: VideoUrlService,
|
||||
private addVideoToPlaylistService: AddVideoToPlaylistsService,
|
||||
private snackBar: MatSnackBar ) { }
|
||||
|
||||
|
||||
onAdd(video: Video): void
|
||||
{
|
||||
this.addVideoToPlaylistService.run(video);
|
||||
}
|
||||
|
||||
|
||||
onDelete(video0: Video, indexVideo: number): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
let message = "La video a bien été supprimé de la playlist" ;
|
||||
this.playlist.videos.splice(indexVideo, 1);
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
this.snackBar.open( message, "", config);
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage("user/delete/video", {video: video0, playlist: this.playlist})
|
||||
.subscribe( retour => {
|
||||
|
||||
let message = "" ;
|
||||
if(retour.status === "error") message = "Echec de l'opération" ;
|
||||
else {
|
||||
message = "La video a bien été supprimé de la playlist" ;
|
||||
this.playlist.videos.splice(index, 1);
|
||||
}
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
this.snackBar.open( message, "", config);
|
||||
})
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
onIframeClick(videoUrl: string): void
|
||||
{
|
||||
console.log(videoUrl)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="conteneur">
|
||||
<div class="myContainer">
|
||||
|
||||
<!-- Navbar -->
|
||||
<div style="margin-bottom: 50px">
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.conteneur {
|
||||
.myContainer {
|
||||
text-align: center;
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<a routerLink="/search"> Rechercher </a>
|
||||
</li>
|
||||
<li class="cliquable">
|
||||
<a routerLink="/search"> Mes playlists </a>
|
||||
<a routerLink="/myPlaylists"> Mes playlists </a>
|
||||
</li>
|
||||
<li class="cliquable">
|
||||
<a routerLink="/search"> Historique </a>
|
||||
|
|
|
|||
|
|
@ -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,92 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
import {MessageService} from "../../services/message/message.service";
|
||||
import {Playlist} from "../../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: Playlist = {
|
||||
_id: "monId",
|
||||
user: null,
|
||||
name: this.name,
|
||||
videos: [],
|
||||
};
|
||||
this.dialogRef.close(playlist);
|
||||
}
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.checkError();
|
||||
if(!this.hasError)
|
||||
{
|
||||
this.messageService
|
||||
.sendMessage("user/create/playlist", {name: this.data.name})
|
||||
.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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -5,6 +5,5 @@ export interface Playlist
|
|||
_id: string,
|
||||
user: any,
|
||||
name: string,
|
||||
count: number
|
||||
videos: Video[]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export class AddVideoToPlaylistsService
|
|||
this._video = video0;
|
||||
const retour = {
|
||||
status: "success",
|
||||
data: this.fictitiousDatasService.getTabPlaylist(4),
|
||||
data: this.fictitiousDatasService.getTabPlaylist(4, 5),
|
||||
}
|
||||
this.afterReceivingPlaylists(retour)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,89 @@ import {Video} from "../../interfaces/video";
|
|||
import {Playlist} from "../../interfaces/playlist";
|
||||
import {Advert} from "../../interfaces/advert";
|
||||
|
||||
|
||||
|
||||
const TAB_VIDEO = [
|
||||
{
|
||||
_id: "Mowgli",
|
||||
url: "https://www.youtube.com/watch?v=medPORJ8KO0",
|
||||
title: "PNL - Mowgli",
|
||||
description: "dans l'album Que la famille",
|
||||
views: 11,
|
||||
},
|
||||
{
|
||||
_id: "Mexico",
|
||||
url: "https://www.youtube.com/watch?v=LZx6oeNeoWM",
|
||||
title: "PNL - Mexico",
|
||||
description: "dans l'album Monde chico",
|
||||
views: 22,
|
||||
},
|
||||
{
|
||||
_id: "Luz de luna",
|
||||
url: "https://www.youtube.com/watch?v=fGoPhSV2Jic",
|
||||
title: "PNL - Luz de luna",
|
||||
description: "dans l'album Dans la legende",
|
||||
views: 33,
|
||||
},
|
||||
{
|
||||
_id: "Blanka",
|
||||
url: "https://www.youtube.com/watch?v=u8bHjdljyLw",
|
||||
title: "PNL - Blanka",
|
||||
description: "dans l'album Deux frères",
|
||||
views: 44,
|
||||
},
|
||||
{
|
||||
_id: "Mowgli 2",
|
||||
url: "https://www.dailymotion.com/video/x7ahxdn",
|
||||
title: "PNL - Mowgli",
|
||||
description: "exclu",
|
||||
views: 55,
|
||||
},
|
||||
{
|
||||
_id: "Etre humain",
|
||||
url: "https://www.youtube.com/watch?v=gfVo39B92Ow",
|
||||
title: "Nekfeu - Etre humain",
|
||||
description: "dans l'album feu",
|
||||
views: 66,
|
||||
},
|
||||
{
|
||||
_id: "Humanoide",
|
||||
url: "https://www.youtube.com/watch?v=MiyIg__WNOw",
|
||||
title: "Nekfeu - Humanoide",
|
||||
description: "dans l'album Cyborg",
|
||||
views: 77,
|
||||
},
|
||||
{
|
||||
_id: "Dernier soupir",
|
||||
url: "https://youtu.be/0GqjIF-4QQM?list=PLqeKQSn3LuAmpF-uIu39RIQRQkUzVol5l",
|
||||
title: "Nekfeu - Dernier soupir",
|
||||
description: "dans l'album Les etoiles vagabondes",
|
||||
views: 88,
|
||||
},
|
||||
{
|
||||
_id: "Dernier soupir",
|
||||
url: "https://youtu.be/0GqjIF-4QQM?list=PLqeKQSn3LuAmpF-uIu39RIQRQkUzVol5l",
|
||||
title: "Nekfeu - Dernier soupir",
|
||||
description: "dans l'album Les etoiles vagabondes",
|
||||
views: 99,
|
||||
},
|
||||
{
|
||||
_id: "Les prélis",
|
||||
url: "https://www.dailymotion.com/video/x4trtkd",
|
||||
title: "Columbine - Les prélis",
|
||||
description: "dans l'album Enfant terrible",
|
||||
views: 100,
|
||||
},
|
||||
{
|
||||
_id: "Pierre feuille ciseau",
|
||||
url: "https://www.dailymotion.com/video/x6agl6i",
|
||||
title: "Columbine - Pierre feuille ciseau",
|
||||
description: "exclu",
|
||||
views: 111,
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
|
|
@ -14,39 +97,29 @@ export class FictitiousDatasService
|
|||
getTabVideo(n: number): Video[]
|
||||
{
|
||||
let tabVideo = [];
|
||||
const l = TAB_VIDEO.length;
|
||||
|
||||
let url0 = "" ;
|
||||
for(let i=0 ; i<n ; i++)
|
||||
{
|
||||
if(i%3 === 0) url0 = "https://www.youtube.com/watch?v=medPORJ8KO0";
|
||||
else if(i%3 === 1) url0 = "https://youtu.be/medPORJ8KO0";
|
||||
else url0 = "https://www.dailymotion.com/video/x7ahxdn";
|
||||
const video: Video = {
|
||||
_id: i.toString(),
|
||||
url: url0,
|
||||
title: "video_" + i,
|
||||
description: "blablabla",
|
||||
views: 59,
|
||||
}
|
||||
tabVideo.push(video)
|
||||
const idx = Math.floor(Math.random() * l);
|
||||
tabVideo.push(TAB_VIDEO[idx]);
|
||||
}
|
||||
|
||||
return tabVideo;
|
||||
}
|
||||
|
||||
|
||||
getTabPlaylist(n: number)
|
||||
getTabPlaylist(nbPlaylist: number, nbVideoMax: number)
|
||||
{
|
||||
let tabTabPlaylist: Playlist[] = [];
|
||||
|
||||
for (let i = 0; i < n; i++)
|
||||
for (let i = 0; i < nbPlaylist; i++)
|
||||
{
|
||||
let playlist: Playlist = {
|
||||
_id: i.toString(),
|
||||
user: null,
|
||||
name: "playlist_"+i.toString(),
|
||||
count: 3,
|
||||
videos: []
|
||||
videos: this.getTabVideo(Math.floor(Math.random() * nbVideoMax))
|
||||
}
|
||||
tabTabPlaylist.push(playlist);
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue