diff --git a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.html b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.html index 563792a..6bde92b 100644 --- a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.html +++ b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.html @@ -6,24 +6,29 @@ - + +
+ + - + +
+ + + +
+
+
+ {{playlist.name}}
+ {{playlist.videoIds.length}} vidéo + {{playlist.videoIds.length}} vidéos +
+
+ +
+
+ +
- +
diff --git a/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss b/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss index 832cbfb..c1e4491 100644 --- a/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss +++ b/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss @@ -35,23 +35,36 @@ height: 60vh; overflow-y: scroll; padding: 0px; + overflow-x: hidden; } .playlistContainer { max-width: 100%; padding: 0px; + overflow-x: hidden; } + .btnPlaylist { background-color: white; padding: 20px; border-bottom: solid 1px black; - width: 100%; + //width: 100%; + width: 35vw; + overflow-x: hidden; } .btnPlaylist:hover { background-color: #f0f0f0; } +.btnPlaylistFocus { + background-color: #e6e6e6; +} +.btnPlaylistFocus:hover { + background-color: #e6e6e6; +} + + .playListCount { color: gray; font-style: italic; diff --git a/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts b/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts index 191e2e1..1a95744 100644 --- a/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts +++ b/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts @@ -1,11 +1,11 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {ThemeService} from "../../../utils/services/theme/theme.service"; 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 "../popup-create-playlist/popup-create-playlist.component"; import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service"; +import {PopupDeletePlaylistComponent} from "../popup-delete-playlist/popup-delete-playlist.component"; @@ -18,8 +18,9 @@ export class PlaylistListComponent implements OnInit { allPlaylists: PlaylistDB[] = []; // toutes les playlists @Output() eventEmitter = new EventEmitter(); // pour envoyer au parent la playlist selectionner - search: string = "" ; // contenu de la barre de recherche + search: string = "" ; // contenu de la barre de recherche tabPlaylist: PlaylistDB[] = []; // playlist affichées + playlistFocusedOn: PlaylistDB; constructor( public themeService: ThemeService, @@ -30,15 +31,14 @@ export class PlaylistListComponent implements OnInit ngOnInit(): void { - //this.allPlaylists = this.fictitiousVideosService.getRandomTabPlaylistDB(10, 10); this.allPlaylists = this.fictitiousVideosService.getNoRandomTabPlaylistDB(10); this.tabPlaylist = [].concat(this.allPlaylists); } + // s'execute lorsqu'on écrit sur la barre de recherche whileSearch() { - console.log("whileSearch"); this.tabPlaylist = []; for(let playlist of this.allPlaylists) { @@ -47,6 +47,7 @@ export class PlaylistListComponent implements OnInit } + // click sur créer playlist onCreatePlaylist(): void { const config = { data: this.tabPlaylist }; @@ -55,16 +56,52 @@ export class PlaylistListComponent implements OnInit .afterClosed() .subscribe(playlist => { - const config = { duration: 1000, panelClass: "custom-class" }; + const config = { duration: 1500, 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); + this.snackBar.open(`La playlist '${playlist.name}' a bien été créée ✔`, "", config); } }); } + + // click sur supprimer playlist + onDeletePlaylist(playlist: PlaylistDB): void + { + const config = {data: playlist}; + this.dialog + .open(PopupDeletePlaylistComponent, config) + .afterClosed() + .subscribe(retour => { + + const config = { duration: 1500, panelClass: "custom-class" }; + if((retour === null) || (retour === undefined)) { + this.snackBar.open("Opération annulée", "", config); + } + else { + let index = this.allPlaylists.indexOf(playlist); + if(index >= 0) this.allPlaylists.splice(index, 1); + + index = this.tabPlaylist.indexOf(playlist); + if(index >= 0) this.tabPlaylist.splice(index, 1); + + this.eventEmitter.emit(null); + this.playlistFocusedOn = null; + this.snackBar.open(`La playlist '${playlist.name}' a bien été suprimée ✔`, "", config); + } + }); + } + + + // retourne la class CSS de conteneur de playlist + getClassOfPlaylistContainer(playlist: PlaylistDB): string + { + if(playlist === this.playlistFocusedOn) return "row btnPlaylist btnPlaylistFocus" ; + else return "row btnPlaylist" ; + } + } diff --git a/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.html b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.html new file mode 100644 index 0000000..0335139 --- /dev/null +++ b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.html @@ -0,0 +1,8 @@ + + Êtes-vous sûr de vouloir supprimer {{playlist.name}} ? + + + + + + diff --git a/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.scss b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.spec.ts b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.spec.ts new file mode 100644 index 0000000..83d1cf7 --- /dev/null +++ b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PopupDeletePlaylistComponent } from './popup-delete-playlist.component'; + +describe('PopupDeletePlaylistComponent', () => { + let component: PopupDeletePlaylistComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PopupDeletePlaylistComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PopupDeletePlaylistComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.ts b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.ts new file mode 100644 index 0000000..0160eb6 --- /dev/null +++ b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.ts @@ -0,0 +1,28 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {MessageService} from "../../../utils/services/message/message.service"; + +@Component({ + selector: 'app-popup-delete-playlist', + templateUrl: './popup-delete-playlist.component.html', + styleUrls: ['./popup-delete-playlist.component.scss'] +}) +export class PopupDeletePlaylistComponent implements OnInit +{ + playlist; + + constructor( public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data, + private messageService: MessageService ) { } + + ngOnInit(): void + { + this.playlist = this.data; + } + + onValidate(): void + { + this.dialogRef.close(true); + } + +} diff --git a/src/app/user/myPlaylists/video-list/video-list.component.html b/src/app/user/myPlaylists/video-list/video-list.component.html index e6ee4f5..fa9faf4 100644 --- a/src/app/user/myPlaylists/video-list/video-list.component.html +++ b/src/app/user/myPlaylists/video-list/video-list.component.html @@ -37,26 +37,24 @@ - + - -
+
-
- + diff --git a/src/app/user/myPlaylists/video-list/video-list.component.scss b/src/app/user/myPlaylists/video-list/video-list.component.scss index f38b820..07aeb42 100644 --- a/src/app/user/myPlaylists/video-list/video-list.component.scss +++ b/src/app/user/myPlaylists/video-list/video-list.component.scss @@ -45,6 +45,7 @@ position: relative; width: 20vw; height: 15vh; + cursor: pointer; } .imgPlay { diff --git a/src/app/user/search/video-grid/video-grid.component.html b/src/app/user/search/video-grid/video-grid.component.html index 8dc071a..5b6d46b 100644 --- a/src/app/user/search/video-grid/video-grid.component.html +++ b/src/app/user/search/video-grid/video-grid.component.html @@ -2,7 +2,7 @@ -
+
@@ -19,13 +19,13 @@ - + ytb dlm - +
{{tronquage(tabVideo[indexPage+k].title)}}
@@ -54,7 +54,7 @@ -
+
  diff --git a/src/app/user/search/video-grid/video-grid.component.scss b/src/app/user/search/video-grid/video-grid.component.scss index ae339eb..7f3a7ea 100644 --- a/src/app/user/search/video-grid/video-grid.component.scss +++ b/src/app/user/search/video-grid/video-grid.component.scss @@ -7,12 +7,20 @@ mat-grid-list { mat-grid-tile { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; - border: solid 1px black; + //border: solid 1px black; } .myCell { - margin: 0px 0px 0px 0px; - padding: 7px 0px 0px 0px; + margin: 7px 0px 0px 0px; + padding: 0px 0px 0px 0px; + background-color: #f0f0f0; + border: solid 1px black; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + cursor: pointer; +} +.myCell:hover { + background-color: #d2d2d2; } @@ -20,22 +28,24 @@ mat-grid-tile { .imgsContainer { - width: 20vw; + //width: 20vw; + width: 18vw; height: 15vh; } .imgPlay { position: absolute; - margin-left: 9vw; - width: 3vw; + margin-left: 8vw; + width: 2.5vw; margin-top: 5vh; - height: 6vh; + height: 5vh; padding: 0px 0px 0px 0px; } .imgVideo { - border: solid 1px black; - width: 20vw; + //border: solid 1px black; + //width: 20vw; + width: 18vw; height: 15vh; padding: 0px 0px 0px 0px; } @@ -57,10 +67,11 @@ mat-icon { // --------------------------------------------------------------------------------------------- -.btnContainer { +.paginatorContainer { margin: 0px 0px 0px 0px; - padding: 0px 0px 0px 0px; + padding: 5px 0px 0px 0px; text-align: center; + background-color: white; } .btnPaginator { diff --git a/src/app/user/utils/components/navbar-user/navbar-user.component.html b/src/app/user/utils/components/navbar-user/navbar-user.component.html index 57153fb..eb7bf23 100644 --- a/src/app/user/utils/components/navbar-user/navbar-user.component.html +++ b/src/app/user/utils/components/navbar-user/navbar-user.component.html @@ -6,27 +6,33 @@ +
+ +