image video à la place de iframe

src/app/user/utils/components/advert/advert.component.html

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

src/app/user/utils/components/advert/advert.component.scss

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

src/app/user/utils/components/advert/advert.component.spec.ts

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

src/app/user/utils/components/advert/advert.component.ts

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

src/app/user/utils/components/navbar-user/navbar-user.component.html

@@ -0,0 +1,35 @@
+<nav class="navbar navbar-expand-lg">
+
+    <!-- PolyNotFound -->
+    <a class="navbar-brand" routerLink="/user/search"> StreamNotFound </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <!-- [Recherche] [Mes Playlists] [Historique] -->
+    <div class="collapse navbar-collapse">
+        <ul class="navbar-nav">
+            <li class="nav-item active monLi">
+                <a class="nav-link" routerLink="/user/search"> Rechercher </a>
+            </li>
+            <li class="nav-item active monLi">
+                <a class="nav-link" routerLink="/user/myPlaylists"> Mes playlists </a>
+            </li>
+            <li class="nav-item active monLi">
+                <a class="nav-link" routerLink="/user/history"> Historique </a>
+            </li>
+        </ul>
+    </div>
+
+    <!-- Mon profil -->
+    <img [src]=urlImage
+         onerror="this.onerror=null; this.src='assets/profil.png'"
+         routerLink="/user/myProfil"
+         alt="">
+
+    <!-- Deconnexion -->
+    <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
+        Deconnexion
+    </button>
+
+</nav>

src/app/user/utils/components/navbar-user/navbar-user.component.scss

@@ -0,0 +1,79 @@
+.navbar {
+  background-color: black;
+  height: 50px;
+  font-size: medium;
+  color: white;
+}
+
+
+.navbar-expand-lg {
+  border-bottom: solid;
+  border-color: white;
+  border-bottom-width: 2px;
+}
+
+
+// PolyNotFound
+.navbar-brand {
+  font-family: cursive;
+  font-weight: bold;
+  font-size: x-large;
+  margin-left: 15px;
+  color: white;
+}
+
+
+// Recherche, Mes Playlists, Historique
+.nav-link {
+  color: white;
+}
+.nav-link:hover {
+  color: grey;
+}
+
+
+// Bonton deconnexion
+.btnDeconnexion {
+  font-size: medium;
+  margin: 0px 10px 0px 10px
+}
+.btnDeconnexion:hover {
+  color: grey;
+}
+
+
+.monLi {
+  margin: 0px 10px 0px 10px;
+}
+
+
+img {
+  border: solid 2px white;
+  border-radius: 50px;
+  margin: 0px 10px 0px 15px;
+  width: 40px;
+  height: 40px;
+}
+img:hover {
+  cursor: pointer;
+}
+
+
+// --------------------------------------------------------------------
+
+
+::ng-deep .mat-slide-toggle-thumb {
+  background-color: #c8c8c8;
+}
+
+::ng-deep .mat-slide-toggle-bar {
+  background-color: #ffffff;
+}
+
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
+  background-color: #ffffff;
+}
+
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
+  background-color: #646464;
+}

src/app/user/utils/components/navbar-user/navbar-user.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarUserComponent } from './navbar-user.component';
+
+describe('NavbarUserComponent', () => {
+  let component: NavbarUserComponent;
+  let fixture: ComponentFixture<NavbarUserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavbarUserComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user/utils/components/navbar-user/navbar-user.component.ts

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+
+
+
+@Component({
+  selector: 'app-navbar-user',
+  templateUrl: './navbar-user.component.html',
+  styleUrls: ['./navbar-user.component.scss']
+})
+export class NavbarUserComponent
+{
+    urlImage: string = "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg" ;
+
+    constructor() { }
+
+    onDeconnexion(): void {}
+}

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

src/app/user/utils/components/popup-create-playlist/popup-create-playlist.component.html

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

src/app/user/utils/components/popup-create-playlist/popup-create-playlist.component.spec.ts

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

src/app/user/utils/components/popup-create-playlist/popup-create-playlist.component.ts

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