amelioration du style de la partie user

src/app/app.module.ts

@@ -27,7 +27,7 @@ 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 './user/utils/components/popup-create-playlist/popup-create-playlist.component';
+import { PopupCreatePlaylistComponent } from './user/myPlaylists/popup-create-playlist/popup-create-playlist.component';
 import { PageHistoryUserComponent } from './user/history/page-history-user/page-history-user.component';
 import {MatTableModule} from '@angular/material/table';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

src/app/user/history/page-history-user/page-history-user.component.html

@@ -7,7 +7,7 @@
         <!-- ---------------------------------------------------------------------------------- -->
 
         <div style="text-align: center">
-            <input (keyup)="applyFilter($event)" placeholder="Filtre">
+            <input (keyup)="applyFilter($event)" placeholder="filtre...">
         </div>
         <br>
 

src/app/user/history/page-history-user/page-history-user.component.ts

@@ -3,7 +3,6 @@ import {ThemeService} from "../../../utils/services/theme/theme.service";
 import {MessageService} from "../../../utils/services/message/message.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 {MatPaginator} from "@angular/material/paginator";
 import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
@@ -28,7 +27,6 @@ export class PageHistoryUserComponent implements AfterViewInit
     constructor( public themeService: ThemeService,
                  private messageService: MessageService,
                  private fictitiousVideosService: FictitiousVideosService,
-                 public videoUrlService: VideoUrlService,
                  private userHistoryService: UserHistoryService,
                  private router: Router ) { }
 

src/app/user/myPlaylists/playlist-list/playlist-list.component.scss

@@ -5,6 +5,8 @@
   margin: 1vh 0vh 3vh 0vh;
   padding: 0px;
   border: solid 2px black;
+  border-radius: 10px;
+  box-shadow: 10px 5px 5px black;
 }
 
 // SearchBar -----------------------------------------------------------
@@ -16,16 +18,16 @@
   background-color: #dcdcdc;
   font-size: large;
   border-bottom: solid 1px black;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
 }
 
 .inputSearchBar {
   width: 70%;
-}
-.btnRechercher {
-  border: solid black 1px;
   border-radius: 5px;
 }
 
+
 // Liste des playlists -------------------------------------------------
 
 .playlistListContainer {
@@ -62,6 +64,8 @@
   background-color: #dcdcdc;
   font-size: large;
   border-top: solid 1px black;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
 }
 
 .btnCreerPlaylist {

src/app/user/myPlaylists/playlist-list/playlist-list.component.ts

@@ -4,7 +4,7 @@ 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 "../popup-create-playlist/popup-create-playlist.component";
 import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
 
 
@@ -49,7 +49,7 @@ export class PlaylistListComponent implements OnInit
 
     onCreatePlaylist(): void
     {
-        const config = { width: '30%', data: this.tabPlaylist };
+        const config = { data: this.tabPlaylist };
         this.dialog
             .open(PopupCreatePlaylistComponent, config )
             .afterClosed()
@@ -57,7 +57,7 @@ export class PlaylistListComponent implements OnInit
 
                 const config = { duration: 1000, panelClass: "custom-class" };
                 if((playlist === null) || (playlist === undefined)) {
-                    this.snackBar.open("Opération annulée  ❌", "", config);
+                    this.snackBar.open("Opération annulée", "", config);
                 }
                 else {
                     this.allPlaylists.push(playlist);

src/app/user/myPlaylists/popup-create-playlist/popup-create-playlist.component.ts

@@ -1,7 +1,7 @@
 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 {MessageService} from "../../../utils/services/message/message.service";
-import {PlaylistDB} from "../../../../utils/interfaces/playlist";
+import {PlaylistDB} from "../../../utils/interfaces/playlist";
 
 
 

src/app/user/myPlaylists/video-list/video-list.component.scss

@@ -5,6 +5,8 @@
   margin: 1vh 0vh 3vh 0vh;
   padding: 0px;
   border: solid 2px black;
+  border-radius: 10px;
+  box-shadow: 10px 5px 5px black;
 }
 
 // TopBorder --------------------------------------------------------
@@ -15,6 +17,8 @@
   text-align: left;
   padding: 5px 0px 5px 5px;
   border-bottom: solid 1px black;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
 }
 
 .spanPlayListTitle {
@@ -67,4 +71,6 @@
   border-top: solid 1px black;
   border-bottom: solid 1px black;
   font-size: large;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
 }

src/app/user/search/page-search/page-search.component.html

@@ -10,34 +10,39 @@
         <!-- --------------------------------------------------------------------- -->
 
 
-        <!-- [Search bar] + [Site de streaming] -->
+        <!-- [Search bar] + [Sites de streaming] -->
-        <div class="row">
+        <div style="width: 100%; margin: 0 auto;">
-            <div class="col-2"></div>
-            <div class="col-8" style="margin-bottom: 10px">
 
-                <!-- Search bar -->
+            <!-- Search bar -->
-                <div class="row" style="margin-bottom: 10px">
+            <div class="input-group" style="width: 100%; margin: 0 auto;">
-                    <div>
+                <div class="form-outline" style="width: 100%; margin: 0 auto;">
-                        <input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search"> &nbsp;
+                    <input type="search" placeholder="recherche..." class="inputSearchBar"/>
-                        <button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
+                    <button mat-icon-button (click)="onSearch()">
-                    </div>
+                        <mat-icon>search</mat-icon>
+                    </button>
                 </div>
-
-                <!-- Site de streaming -->
-                <div class="row" style="margin-bottom: 10px">
-                    <div>
-                        <span *ngFor="let plateforme of tabPlateform">
-                            &nbsp;
-                            <input type="checkbox" [id]="plateforme.name" [name]="plateforme.name" style="margin-left: 5px" [(ngModel)]="plateforme.isSelected">
-                            <img [src]="'/assets/logo_plateforms/'+plateforme.name+'.png'" alt="image" width="25px" height="25px" style="margin-left: 5px">
-                            <label [for]="plateforme.name" style="margin-left: 5px"> {{plateforme.name}}</label>
-                            &nbsp;
-                        </span>
-                    </div>
-                </div>
-
             </div>
-            <div class="col-2"></div>
+
+            <!-- Sites de streaming -->
+            <div style="margin-bottom: 20px">
+                <!-- youtube -->
+                <span>
+                    &nbsp;
+                    <mat-checkbox id="youtube" name="youtube" style="margin-left: 5px" [(ngModel)]="tabPlateform[0].isSelected"></mat-checkbox>
+                    <img src="/assets/logo_plateforms/youtube.png" alt="logo" width="30px" height="25px" style="margin-left: 5px">
+                    <label for="youtube" style="margin-left: 5px">youtube</label>
+                    &nbsp;
+                </span>
+                <!-- dailymotion -->
+                <span>
+                    &nbsp;
+                    <mat-checkbox id="dailymotion" name="dailymotion" style="margin-left: 5px" [(ngModel)]="tabPlateform[1].isSelected"></mat-checkbox>
+                    <img src="/assets/logo_plateforms/dailymotion.png" alt="logo" width="25px" height="25px" style="margin-left: 5px">
+                    <label for="dailymotion" style="margin-left: 5px">dailymotion</label>
+                    &nbsp;
+                </span>
+            </div>
+
         </div>
 
 

src/app/user/search/page-search/page-search.component.scss

@@ -17,13 +17,10 @@
 //--------------------------------------------------------------------------------------------
 
 .inputSearchBar {
-  width: 50%;
+  width: 40%;
   font-size: large;
-}
+  border-bottom: 10px;
-.btnRechercher {
-  border: solid black 1px;
   border-radius: 5px;
-  font-size: large;
 }
 
 //--------------------------------------------------------------------------------------------
@@ -70,3 +67,24 @@
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }
+
+
+
+// -------------------------------------------------------------------------
+
+
+// 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: solid 1px black !important;
+  background-color: white !important;
+}

src/app/user/utils/services/addVideoToPlaylists/add-video-to-playlists.service.ts

@@ -77,7 +77,7 @@ export class AddVideoToPlaylistsService
             case "annulation":
             case null:
             case undefined:
-                message = "Annulation de l'opération" ;
+                message = "Opération annulée" ;
                 break;
         }
         const config = { duration: 1000, panelClass: "custom-class" };

src/app/user/utils/services/videoUrl/video-url.service.spec.ts

@@ -1,16 +0,0 @@
-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();
-  });
-});

src/app/user/utils/services/videoUrl/video-url.service.ts

@@ -1,56 +0,0 @@
-import { Injectable } from '@angular/core';
-import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class VideoUrlService
-{
-
-    constructor(private _sanitizer: DomSanitizer) { }
-
-
-    safeUrl(videoId: string, source: string): SafeResourceUrl
-    {
-        let videoUrl = "" ;
-        if(source === 'youtube') videoUrl = "https://www.youtube.com/embed/" + videoId;
-        else if(source === 'dailymotion') videoUrl = "https://www.dailymotion.com/embed/video/" + videoId;
-        return this._sanitizer.bypassSecurityTrustResourceUrl(videoUrl);
-    }
-
-    /*
-    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);
-    }
-    */
-
-}

src/app/user/watching/page-watching-video/page-watching-video.component.html

@@ -11,34 +11,39 @@
 
         <!-- --------------------------------------------------------------------- -->
 
-        <!-- [Search bar] + [Site de streaming] -->
+        <!-- [Search bar] + [Sites de streaming] -->
-        <div class="row">
+        <div style="width: 100%; margin: 0 auto;">
-            <div class="col-2"></div>
-            <div class="col-8" style="margin-bottom: 10px">
 
-                <!-- Search bar -->
+            <!-- Search bar -->
-                <div class="row" style="margin-bottom: 10px">
+            <div class="input-group" style="width: 100%; margin: 0 auto;">
-                    <div>
+                <div class="form-outline" style="width: 100%; margin: 0 auto;">
-                        <input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search"> &nbsp;
+                    <input type="search" placeholder="recherche..." class="inputSearchBar"/>
-                        <button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
+                    <button mat-icon-button (click)="onSearch()">
-                    </div>
+                        <mat-icon>search</mat-icon>
+                    </button>
                 </div>
-
-                <!-- Site de streaming -->
-                <div class="row" style="margin-bottom: 10px">
-                    <div>
-                        <span *ngFor="let plateforme of tabPlateform">
-                            &nbsp;
-                            <input type="checkbox" [id]="plateforme.name" [name]="plateforme.name" style="margin-left: 5px" [(ngModel)]="plateforme.isSelected">
-                            <img [src]="'/assets/logo_plateforms/'+plateforme.name+'.png'" alt="image" width="25px" height="25px" style="margin-left: 5px">
-                            <label [for]="plateforme.name" style="margin-left: 5px"> {{plateforme.name}}</label>
-                            &nbsp;
-                        </span>
-                    </div>
-                </div>
-
             </div>
-            <div class="col-2"></div>
+
+            <!-- Sites de streaming -->
+            <div style="margin-bottom: 20px">
+                <!-- youtube -->
+                <span>
+                    &nbsp;
+                    <mat-checkbox id="youtube" name="youtube" style="margin-left: 5px" [(ngModel)]="tabPlateform[0].isSelected"></mat-checkbox>
+                    <img src="/assets/logo_plateforms/youtube.png" alt="logo" width="30px" height="25px" style="margin-left: 5px">
+                    <label for="youtube" style="margin-left: 5px">youtube</label>
+                    &nbsp;
+                </span>
+                <!-- dailymotion -->
+                <span>
+                    &nbsp;
+                    <mat-checkbox id="dailymotion" name="dailymotion" style="margin-left: 5px" [(ngModel)]="tabPlateform[1].isSelected"></mat-checkbox>
+                    <img src="/assets/logo_plateforms/dailymotion.png" alt="logo" width="25px" height="25px" style="margin-left: 5px">
+                    <label for="dailymotion" style="margin-left: 5px">dailymotion</label>
+                    &nbsp;
+                </span>
+            </div>
+
         </div>
 
         <!-- --------------------------------------------------------------------- -->
@@ -147,7 +152,7 @@
 
         <!-- video -->
         <div style="width: 100%">
-            <iframe [src]="videoUrlService.safeUrl(video.videoId,video.source)"
+            <iframe [src]="safeUrl(video.videoId,video.source)"
                     [style]="iframeStyle"
                     allowfullscreen></iframe>
         </div>

src/app/user/watching/page-watching-video/page-watching-video.component.scss

@@ -17,13 +17,10 @@
 //--------------------------------------------------------------------------------------------
 
 .inputSearchBar {
-  width: 50%;
+  width: 40%;
   font-size: large;
-}
+  border-bottom: 10px;
-.btnRechercher {
-  border: solid black 1px;
   border-radius: 5px;
-  font-size: large;
 }
 
 //--------------------------------------------------------------------------------------------
@@ -96,3 +93,23 @@
   border-bottom: solid 1px black;
   font-size: large;
 }
+
+
+// -------------------------------------------------------------------------
+
+
+// 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: solid 1px black !important;
+  background-color: white !important;
+}

src/app/user/watching/page-watching-video/page-watching-video.component.ts

@@ -6,9 +6,9 @@ import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/f
 import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service";
 import {ThemeService} from "../../../utils/services/theme/theme.service";
 import {ActivatedRoute, Router} from "@angular/router";
-import {VideoUrlService} from "../../utils/services/videoUrl/video-url.service";
 import {AddVideoToPlaylistsService} from "../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
 import {PlaylistDB} from "../../../utils/interfaces/playlist";
+import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
 
 
 
@@ -47,7 +47,7 @@ export class PageWatchingVideoComponent implements OnInit
                  public themeService: ThemeService,
                  private activatedRoute: ActivatedRoute,
                  private router: Router,
-                 public videoUrlService: VideoUrlService,
+                 private _sanitizer: DomSanitizer,
                  private addVideoToPlaylistsService: AddVideoToPlaylistsService ) { }
 
 
@@ -109,4 +109,12 @@ export class PageWatchingVideoComponent implements OnInit
         else if(this.from === 'history') this.router.navigateByUrl("/user/history");
     }
 
+
+    safeUrl(videoId: string, source: string): SafeResourceUrl
+    {
+        let videoUrl = "" ;
+        if(source === 'youtube') videoUrl = "https://www.youtube.com/embed/" + videoId;
+        else if(source === 'dailymotion') videoUrl = "https://www.dailymotion.com/embed/video/" + videoId;
+        return this._sanitizer.bypassSecurityTrustResourceUrl(videoUrl);
+    }
 }