image video à la place de iframe

src/app/user/utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component.html

@@ -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>

src/app/user/utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component.scss

@@ -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;
+}

src/app/user/utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component.spec.ts

@@ -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();
+  });
+});

src/app/user/utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component.ts

@@ -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")
+    }
+
+}