@wizishop/img-manager 15.2.62 → 15.2.63-beta

package/fesm2020/wizishop-img-manager.mjs

@@ -18,6 +18,7 @@ import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i3$2 from '@angular/router';
 import * as i8 from 'ngx-scrollbar/reached-event';
 import { NgScrollbarReachedModule } from 'ngx-scrollbar/reached-event';
+import * as i1$1 from '@angular/platform-browser';
 import * as i4$1 from 'ngx-image-cropper';
 import { ImageCropperModule } from 'ngx-image-cropper';
 import { v4 } from 'uuid';
@@ -169,15 +170,22 @@ class ImgEventService {
     constructor() {
         this.imgRemoved$ = new BehaviorSubject(undefined);
         this.imgToEditEvent = new Subject();
+        this.imgToVideoEvent = new Subject();
         this.imgAdded = new Subject();
         this.listDisplayedChange = new Subject();
     }
     emitImgToEdit(imgToEdit) {
         this.imgToEditEvent.next(imgToEdit);
     }
+    emitImgToVideo(imgToEdit) {
+        this.imgToVideoEvent.next(imgToEdit);
+    }
     getImgToEditEventListener() {
         return this.imgToEditEvent.asObservable();
     }
+    getImgToVideoEventListener() {
+        return this.imgToVideoEvent.asObservable();
+    }
     emitImgAdded(id_file) {
         this.imgAdded.next(id_file);
     }
@@ -611,6 +619,9 @@ class RenamePictureService {
     setPicturesList(picturesList) {
         this.picturesList = picturesList;
     }
+    changeVideoLink(videoLink, idFile) {
+        return this.apiService.changeVideoLink(videoLink, idFile).pipe(tap(() => this.imgManagerService.refreshImageList$.next()));
+    }
     renamePicture(pictureNameUpdate) {
         const picture = this.getPictureById(pictureNameUpdate.id);
         if (!picture) {
@@ -735,6 +746,9 @@ class ImagesActionHandler {
     onEdit(picture) {
         this.imgEventCardService.emitImgToEdit(picture);
     }
+    redirectToVideo(picture) {
+        this.imgEventCardService.emitImgToVideo(picture);
+    }
     copyLink(file_name) {
         const url = this.imgCDNService.getUrlImg('raw') + file_name;
         this.imgManager.copyToClipboard(url).then(success => {
@@ -912,14 +926,14 @@ class ImgCardComponent extends ImagesActionHandler {
     }
 }
 ImgCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCardComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component });
-ImgCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgCardComponent, selector: "img-card", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", picture: "picture", index: "index" }, outputs: { toggleImgSelected: "toggleImgSelected", switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\r\n  <div class=\"img-card\">\r\n      <div class=\"img-card__container\"\r\n      [ngClass]=\"{\r\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\r\n          'imgSelected': picture.selected,\r\n          'deletion': picture.deleted}\">\r\n          <img\r\n            class=\"img-card__container__img\"\r\n            [src]=\"picture.file_name | imgSrc : '400'\"\r\n            [alt]=\"picture.display_name\"\r\n            (click)=\"onToggleImgSelected()\"\r\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n          />\r\n          <div\r\n            class=\"img-card__container__config\"\r\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\r\n            >\r\n              <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\r\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\r\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\r\n              <button type=\"button\" class=\"copy\" (click)=\"copyLink(picture.file_name)\"><i class=\"fal fa-copy\"></i><span>{{ 'ImgManager.ImgCard.copyLink' | translate }}</span></button>\r\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\r\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\r\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\r\n                  <i *ngIf=\"picture.selected\" class=\"fa-solid fa-check-square checked\"></i>\r\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\r\n              </button>\r\n          </div>\r\n          <div\r\n            class=\"img-card__container__config img-card__container__config--small\"\r\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\r\n          >\r\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fa-solid fa-edit\"></i></button>\r\n          </div>\r\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\r\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\r\n            <div>\r\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\r\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\r\n            </div>\r\n          </div>\r\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\r\n            <i class=\"far fa-check\"></i>\r\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\r\n          </div>\r\n          <div\r\n            *ngIf=\"picture.imgNotLoaded\"\r\n            class=\"img-card__container__overlay\"\r\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\r\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\r\n          </div>\r\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\r\n\r\n      </div>\r\n      <div\r\n        class=\"img-card__nameContainer\"\r\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"wzImgMngInput img-card__nameContainer__name\"\r\n          [(ngModel)]=\"picture.display_name\"\r\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\r\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\r\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\r\n          (blur)=\"focusInput = false;\"\r\n        >\r\n        <span>{{picture.display_name}}</span>\r\n      </div>\r\n\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
+ImgCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgCardComponent, selector: "img-card", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", picture: "picture", index: "index" }, outputs: { toggleImgSelected: "toggleImgSelected", switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\r\n  <div class=\"img-card\">\r\n      <div class=\"img-card__container\"\r\n      [ngClass]=\"{\r\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\r\n          'imgSelected': picture.selected,\r\n          'deletion': picture.deleted}\">\r\n          <img\r\n            class=\"img-card__container__img\"\r\n            [src]=\"picture.file_name | imgSrc : '400'\"\r\n            [alt]=\"picture.display_name\"\r\n            (click)=\"onToggleImgSelected()\"\r\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n          />\r\n        <div class=\"hover-img-size\">\r\n          <span>{{picture.raw_height}}x{{picture.raw_width}}</span>\r\n        </div>\r\n          <div\r\n            class=\"img-card__container__config\"\r\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\r\n            >\r\n            <ng-container *ngIf=\"!picture.video_link\">\r\n              <button type=\"button\" class=\"size\" (click)=\"redirectToVideo(picture)\"><i class=\"fa-solid fa-play\"></i><span>{{ 'ImgManager.ImgEditor.AddVideo' | translate }}</span></button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"picture.video_link\">\r\n              <button type=\"button\" class=\"size\" (click)=\"redirectToVideo(picture)\"><i class=\"fa-solid fa-play\"></i><span>{{ 'ImgManager.ImgEditor.EditVideo' | translate }}</span></button>\r\n            </ng-container>\r\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\r\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\r\n              <button type=\"button\" class=\"copy\" (click)=\"copyLink(picture.file_name)\"><i class=\"fal fa-copy\"></i><span>{{ 'ImgManager.ImgCard.copyLink' | translate }}</span></button>\r\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\r\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\r\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\r\n                  <i *ngIf=\"picture.selected\" class=\"fa-solid fa-check-square checked\"></i>\r\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\r\n              </button>\r\n          </div>\r\n          <div\r\n            class=\"img-card__container__config img-card__container__config--small\"\r\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\r\n          >\r\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fa-solid fa-edit\"></i></button>\r\n          </div>\r\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\r\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\r\n            <div>\r\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\r\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\r\n            </div>\r\n          </div>\r\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\r\n            <i class=\"far fa-check\"></i>\r\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\r\n          </div>\r\n          <div\r\n            *ngIf=\"picture.imgNotLoaded\"\r\n            class=\"img-card__container__overlay\"\r\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\r\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\r\n          </div>\r\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\r\n          <div *ngIf=\"picture.video_link\" class=\"img-card__container__video\">\r\n            <i class=\"fa-solid fa-play\"></i>\r\n            <span>{{ 'ImgManager.ImgEditor.Video' | translate }}</span>\r\n          </div>\r\n      </div>\r\n      <div\r\n        class=\"img-card__nameContainer\"\r\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"wzImgMngInput img-card__nameContainer__name\"\r\n          [(ngModel)]=\"picture.display_name\"\r\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\r\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\r\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\r\n          (blur)=\"focusInput = false;\"\r\n        >\r\n        <span>{{picture.display_name}}</span>\r\n      </div>\r\n\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
         easeInOut
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'img-card', animations: [
                         easeInOut
-                    ], template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\r\n  <div class=\"img-card\">\r\n      <div class=\"img-card__container\"\r\n      [ngClass]=\"{\r\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\r\n          'imgSelected': picture.selected,\r\n          'deletion': picture.deleted}\">\r\n          <img\r\n            class=\"img-card__container__img\"\r\n            [src]=\"picture.file_name | imgSrc : '400'\"\r\n            [alt]=\"picture.display_name\"\r\n            (click)=\"onToggleImgSelected()\"\r\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n          />\r\n          <div\r\n            class=\"img-card__container__config\"\r\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\r\n            >\r\n              <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\r\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\r\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\r\n              <button type=\"button\" class=\"copy\" (click)=\"copyLink(picture.file_name)\"><i class=\"fal fa-copy\"></i><span>{{ 'ImgManager.ImgCard.copyLink' | translate }}</span></button>\r\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\r\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\r\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\r\n                  <i *ngIf=\"picture.selected\" class=\"fa-solid fa-check-square checked\"></i>\r\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\r\n              </button>\r\n          </div>\r\n          <div\r\n            class=\"img-card__container__config img-card__container__config--small\"\r\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\r\n          >\r\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fa-solid fa-edit\"></i></button>\r\n          </div>\r\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\r\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\r\n            <div>\r\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\r\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\r\n            </div>\r\n          </div>\r\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\r\n            <i class=\"far fa-check\"></i>\r\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\r\n          </div>\r\n          <div\r\n            *ngIf=\"picture.imgNotLoaded\"\r\n            class=\"img-card__container__overlay\"\r\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\r\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\r\n          </div>\r\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\r\n\r\n      </div>\r\n      <div\r\n        class=\"img-card__nameContainer\"\r\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"wzImgMngInput img-card__nameContainer__name\"\r\n          [(ngModel)]=\"picture.display_name\"\r\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\r\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\r\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\r\n          (blur)=\"focusInput = false;\"\r\n        >\r\n        <span>{{picture.display_name}}</span>\r\n      </div>\r\n\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\r\n  <div class=\"img-card\">\r\n      <div class=\"img-card__container\"\r\n      [ngClass]=\"{\r\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\r\n          'imgSelected': picture.selected,\r\n          'deletion': picture.deleted}\">\r\n          <img\r\n            class=\"img-card__container__img\"\r\n            [src]=\"picture.file_name | imgSrc : '400'\"\r\n            [alt]=\"picture.display_name\"\r\n            (click)=\"onToggleImgSelected()\"\r\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n          />\r\n        <div class=\"hover-img-size\">\r\n          <span>{{picture.raw_height}}x{{picture.raw_width}}</span>\r\n        </div>\r\n          <div\r\n            class=\"img-card__container__config\"\r\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\r\n            >\r\n            <ng-container *ngIf=\"!picture.video_link\">\r\n              <button type=\"button\" class=\"size\" (click)=\"redirectToVideo(picture)\"><i class=\"fa-solid fa-play\"></i><span>{{ 'ImgManager.ImgEditor.AddVideo' | translate }}</span></button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"picture.video_link\">\r\n              <button type=\"button\" class=\"size\" (click)=\"redirectToVideo(picture)\"><i class=\"fa-solid fa-play\"></i><span>{{ 'ImgManager.ImgEditor.EditVideo' | translate }}</span></button>\r\n            </ng-container>\r\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\r\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\r\n              <button type=\"button\" class=\"copy\" (click)=\"copyLink(picture.file_name)\"><i class=\"fal fa-copy\"></i><span>{{ 'ImgManager.ImgCard.copyLink' | translate }}</span></button>\r\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\r\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\r\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\r\n                  <i *ngIf=\"picture.selected\" class=\"fa-solid fa-check-square checked\"></i>\r\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\r\n              </button>\r\n          </div>\r\n          <div\r\n            class=\"img-card__container__config img-card__container__config--small\"\r\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\r\n          >\r\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fa-solid fa-edit\"></i></button>\r\n          </div>\r\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\r\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\r\n            <div>\r\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\r\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\r\n            </div>\r\n          </div>\r\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\r\n            <i class=\"far fa-check\"></i>\r\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\r\n          </div>\r\n          <div\r\n            *ngIf=\"picture.imgNotLoaded\"\r\n            class=\"img-card__container__overlay\"\r\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\r\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\r\n          </div>\r\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\r\n          <div *ngIf=\"picture.video_link\" class=\"img-card__container__video\">\r\n            <i class=\"fa-solid fa-play\"></i>\r\n            <span>{{ 'ImgManager.ImgEditor.Video' | translate }}</span>\r\n          </div>\r\n      </div>\r\n      <div\r\n        class=\"img-card__nameContainer\"\r\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"wzImgMngInput img-card__nameContainer__name\"\r\n          [(ngModel)]=\"picture.display_name\"\r\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\r\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\r\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\r\n          (blur)=\"focusInput = false;\"\r\n        >\r\n        <span>{{picture.display_name}}</span>\r\n      </div>\r\n\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }]; }, propDecorators: { tabDisplayed: [{
                 type: Input
             }], fullSize: [{
@@ -1637,6 +1651,191 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }] } });
 
+class VideoInfoService {
+    constructor(http) {
+        this.http = http;
+        this.YT_API_KEY = '';
+        this.YT_API_URL = 'https://www.googleapis.com/youtube/v3/videos';
+    }
+    getVideoInfo(videoUrl) {
+        if (!videoUrl)
+            return null;
+        if (this.isYouTube(videoUrl)) {
+            const id = this.extractYoutubeId(videoUrl);
+            return this.getYouTubeInfo(id);
+        }
+        if (this.isVimeo(videoUrl)) {
+            const id = this.extractVimeoId(videoUrl);
+            return this.getVimeoInfo(id);
+        }
+        return null;
+    }
+    isYouTube(url) {
+        return url.includes('youtube.com') || url.includes('youtu.be');
+    }
+    isVimeo(url) {
+        return url.includes('vimeo.com');
+    }
+    extractYoutubeId(url) {
+        const regExp = /^.*(youtu.be\/|v=|embed\/)([^#\&\?]*).*/;
+        const match = url.match(regExp);
+        return match && match[2] ? match[2] : null;
+    }
+    extractVimeoId(url) {
+        const regExp = /vimeo\.com\/(?:video\/)?(\d+)/;
+        const match = url.match(regExp);
+        return match ? match[1] : null;
+    }
+    getYouTubeInfo(id) {
+        return this.http.get(`${this.YT_API_URL}?id=${id}&part=contentDetails,snippet&key=${this.YT_API_KEY}`)
+            .pipe(map(res => {
+            const item = res.items?.[0];
+            if (!item)
+                return null;
+            return {
+                duration: this.formatYoutubeDuration(item.contentDetails.duration),
+                publishDate: this.formatDate(item.snippet.publishedAt)
+            };
+        }));
+    }
+    formatYoutubeDuration(duration) {
+        const match = duration.match(/PT(\d+M)?(\d+S)?/);
+        const minutes = match?.[1] ? parseInt(match[1]) : 0;
+        const seconds = match?.[2] ? parseInt(match[2]) : 0;
+        return `${minutes} min ${seconds} sec`;
+    }
+    getVimeoInfo(id) {
+        return this.http.get(`https://vimeo.com/api/v2/video/${id}.json`)
+            .pipe(map(res => {
+            const item = res?.[0];
+            if (!item)
+                return null;
+            return {
+                duration: this.formatVimeoDuration(item.duration),
+                publishDate: this.formatDate(item.upload_date)
+            };
+        }));
+    }
+    formatVimeoDuration(seconds) {
+        const min = Math.floor(seconds / 60);
+        const sec = seconds % 60;
+        return `${min} min ${sec} sec`;
+    }
+    formatDate(dateStr) {
+        const d = new Date(dateStr);
+        return d.toLocaleDateString('fr-FR');
+    }
+}
+VideoInfoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VideoInfoService, deps: [{ token: i3$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+VideoInfoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VideoInfoService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VideoInfoService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i3$1.HttpClient }]; } });
+
+class EditorInfoVideoComponent {
+    constructor(videoInfoService) {
+        this.videoInfoService = videoInfoService;
+        this.videoLink = '';
+        this.videoLinkChange = new EventEmitter();
+        this.isVideoModified = false;
+        this.isVideoModifiedChange = new EventEmitter();
+        this.deleteVideo = new EventEmitter();
+        this.videoDuration = '';
+        this.videoPublishDate = '';
+    }
+    ngOnInit() {
+        this.loadVideoInfos();
+    }
+    onVideoLinkChange(value) {
+        this.videoLink = value;
+        this.videoLinkChange.emit(value);
+        this.isVideoModifiedChange.emit(true);
+        this.loadVideoInfos();
+    }
+    loadVideoInfos() {
+        const obs = this.videoInfoService.getVideoInfo(this.videoLink);
+        if (!obs) {
+            this.videoDuration = '';
+            this.videoPublishDate = '';
+            return;
+        }
+        obs.subscribe(data => {
+            if (!data)
+                return;
+            this.videoDuration = data.duration;
+            this.videoPublishDate = data.publishDate;
+        });
+    }
+    onDelete() {
+        this.deleteVideo.emit();
+    }
+}
+EditorInfoVideoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorInfoVideoComponent, deps: [{ token: VideoInfoService }], target: i0.ɵɵFactoryTarget.Component });
+EditorInfoVideoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditorInfoVideoComponent, selector: "info-video", inputs: { videoLink: "videoLink", isVideoModified: "isVideoModified" }, outputs: { videoLinkChange: "videoLinkChange", isVideoModifiedChange: "isVideoModifiedChange", deleteVideo: "deleteVideo" }, ngImport: i0, template: "<div class=\"info-video\">\r\n  <div class=\"info-video__wrapper\">\r\n\r\n    <div class=\"info-video__wrapper__top\">\r\n      <label for=\"input-video\">\r\n        {{ 'ImgManager.ImgEditor.UrlVideo' | translate }}\r\n        <i class=\"fa-solid fa-circle-info\"></i>\r\n      </label>\r\n\r\n      <input\r\n        type=\"text\"\r\n        id=\"input-video\"\r\n        [ngModel]=\"videoLink\"\r\n        (ngModelChange)=\"onVideoLinkChange($event)\"\r\n      />\r\n\r\n      <span>{{ 'ImgManager.ImgEditor.tooltipsIframe' | translate }}</span>\r\n    </div>\r\n\r\n    <a *ngIf=\"videoLink\" (click)=\"onDelete()\">{{ 'ImgManager.ImgEditor.deleteVideo' | translate }}</a>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorInfoVideoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'info-video', template: "<div class=\"info-video\">\r\n  <div class=\"info-video__wrapper\">\r\n\r\n    <div class=\"info-video__wrapper__top\">\r\n      <label for=\"input-video\">\r\n        {{ 'ImgManager.ImgEditor.UrlVideo' | translate }}\r\n        <i class=\"fa-solid fa-circle-info\"></i>\r\n      </label>\r\n\r\n      <input\r\n        type=\"text\"\r\n        id=\"input-video\"\r\n        [ngModel]=\"videoLink\"\r\n        (ngModelChange)=\"onVideoLinkChange($event)\"\r\n      />\r\n\r\n      <span>{{ 'ImgManager.ImgEditor.tooltipsIframe' | translate }}</span>\r\n    </div>\r\n\r\n    <a *ngIf=\"videoLink\" (click)=\"onDelete()\">{{ 'ImgManager.ImgEditor.deleteVideo' | translate }}</a>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: VideoInfoService }]; }, propDecorators: { videoLink: [{
+                type: Input
+            }], videoLinkChange: [{
+                type: Output
+            }], isVideoModified: [{
+                type: Input
+            }], isVideoModifiedChange: [{
+                type: Output
+            }], deleteVideo: [{
+                type: Output
+            }] } });
+
+class EditorShowIframeComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.videoLink = '';
+        this.safeUrl = null;
+    }
+    ngOnChanges() {
+        this.safeUrl = this.buildSafeIframeUrl(this.videoLink);
+    }
+    buildSafeIframeUrl(url) {
+        if (!url)
+            return null;
+        if (url.includes('youtube.com') || url.includes('youtu.be')) {
+            const videoId = this.extractYoutubeId(url);
+            if (!videoId)
+                return null;
+            const embed = `https://www.youtube.com/embed/${videoId}`;
+            return this.sanitizer.bypassSecurityTrustResourceUrl(embed);
+        }
+        if (url.includes('vimeo.com')) {
+            const videoId = this.extractVimeoId(url);
+            if (!videoId)
+                return null;
+            const embed = `https://player.vimeo.com/video/${videoId}`;
+            return this.sanitizer.bypassSecurityTrustResourceUrl(embed);
+        }
+        return null;
+    }
+    extractYoutubeId(url) {
+        const regExp = /^.*(youtu.be\/|v=|embed\/)([^#\&\?]*).*/;
+        const match = url.match(regExp);
+        return match && match[2].length > 0 ? match[2] : null;
+    }
+    extractVimeoId(url) {
+        const regExp = /vimeo\.com\/(?:video\/)?(\d+)/;
+        const match = url.match(regExp);
+        return match ? match[1] : null;
+    }
+}
+EditorShowIframeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorShowIframeComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+EditorShowIframeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditorShowIframeComponent, selector: "show-iframe", inputs: { videoLink: "videoLink" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"show-iframe\" *ngIf=\"safeUrl\">\r\n  <iframe\r\n    width=\"100%\"\r\n    [src]=\"safeUrl\"\r\n    frameborder=\"0\"\r\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n    allowfullscreen>\r\n  </iframe>\r\n</div>\r\n\r\n<div class=\"show-iframe__none\" *ngIf=\"!safeUrl\">\r\n  <p>{{ 'ImgManager.ImgEditor.NoVideo' | translate }}</p>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorShowIframeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'show-iframe', template: "<div class=\"show-iframe\" *ngIf=\"safeUrl\">\r\n  <iframe\r\n    width=\"100%\"\r\n    [src]=\"safeUrl\"\r\n    frameborder=\"0\"\r\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n    allowfullscreen>\r\n  </iframe>\r\n</div>\r\n\r\n<div class=\"show-iframe__none\" *ngIf=\"!safeUrl\">\r\n  <p>{{ 'ImgManager.ImgEditor.NoVideo' | translate }}</p>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { videoLink: [{
+                type: Input
+            }] } });
+
 const insertRemove = // the fade-in/fade-out animation.
  trigger('insertRemoveAnnim', [
     transition(':enter', [
@@ -1963,33 +2162,62 @@ class ImgEditorComponent {
     constructor(imgManagerService, renamePictureService) {
         this.imgManagerService = imgManagerService;
         this.renamePictureService = renamePictureService;
+        this._isVideoEdit = false;
         this.editClosed = new EventEmitter();
         this.isLoading = false;
         this.isImgModified = false;
         this.isNameModified = false;
         this.currentCroppedImage = ''; // Img modified return in base64 by the cropper
+        this.isEditorLinkActive = false;
+        this.isVideoModified = false;
         this.msgFailSave = 'ImgManager.ImgEditor.msgFailSave';
         this.msgFailLoad = 'ImgManager.ImgEditor.msgFailLoad';
         this.msgSuccessEdit = "Les modifications de l'image ont bien été enregistrées.";
     }
+    set isVideoEdit(value) {
+        this._isVideoEdit = value;
+        if (value === true) {
+            this.isEditorLinkActive = true;
+        }
+    }
+    get isVideoEdit() {
+        return this._isVideoEdit;
+    }
     ngOnInit() {
         this.previousName = this.imgToEdit.display_name;
+        this.previousVideoLink = this.imgToEdit.video_link;
     }
     onSave() {
         if (this.isLoading) {
             return;
         }
         this.isLoading = true;
-        if (!this.isImgModified && !this.isNameModified) {
+        if (!this.isImgModified && !this.isNameModified && !this.isVideoModified) {
             this.isLoading = false;
             this.onEditClosed();
         }
         const obsReplaceImg = this.imgManagerService.replaceImg(this.currentCroppedImage, this.imgToEdit.id_file);
         const obsChangeImgName = this.renamePictureService.changeImageName(this.imgToEdit.display_name, this.imgToEdit.id_file);
+        const obsChangeVideoLink = this.renamePictureService.changeVideoLink(this.imgToEdit.video_link, this.imgToEdit.id_file);
         if (this.isImgModified && this.isNameModified) {
             this.renameAndReplaceImg(obsChangeImgName, obsReplaceImg);
             return;
         }
+        if (this.isVideoModified && !this.isImgModified && !this.isNameModified) {
+            obsChangeVideoLink.subscribe({
+                next: () => {
+                    this.isLoading = false;
+                    this.previousVideoLink = this.imgToEdit.video_link;
+                    this.onEditClosed(this.msgSuccessEdit);
+                },
+                error: () => {
+                    this.isLoading = false;
+                    this.imgToEdit.video_link = this.previousVideoLink;
+                    this.onEditClosed(this.msgFailSave);
+                }
+            });
+            return;
+        }
         if (this.isImgModified) {
             obsReplaceImg.subscribe({
                 next: data => {
@@ -2034,6 +2262,10 @@ class ImgEditorComponent {
     onImgCropped(imgBase64) {
         this.currentCroppedImage = imgBase64;
     }
+    onDeleteVideo() {
+        this.imgToEdit.video_link = null;
+        this.isVideoModified = true;
+    }
     renameAndReplaceImg(obsChangeImgName, obsReplaceImg) {
         // Avoid to use forkjoin, because it can create conflict and loose the img
         obsChangeImgName.subscribe({
@@ -2054,18 +2286,20 @@ class ImgEditorComponent {
     }
 }
 ImgEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEditorComponent, deps: [{ token: ImgManagerService }, { token: RenamePictureService }], target: i0.ɵɵFactoryTarget.Component });
-ImgEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgEditorComponent, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit" }, outputs: { editClosed: "editClosed" }, ngImport: i0, template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\r\n\r\n    <!-- Button Action Section -->\r\n\r\n    <div class=\"img-editor__infoSection__actions\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"button img-editor__infoSection__actions__cancel\"\r\n          (click)=\"onCancel()\"\r\n          [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\r\n        >\r\n          {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n        </button>\r\n        <div\r\n          class=\"button danger button img-editor__infoSection__actions__save\"\r\n          [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\r\n          (click)=\"onSave()\"\r\n        >\r\n          {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\r\n          <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <ng-scrollbar\r\n        class=\"img-editor__scroll\"\r\n        [ngClass]=\"{\r\n            'img-editor__scroll--full': stateDisplayed === 'full',\r\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\r\n            'img-editor__scroll--window': stateDisplayed === 'window'\r\n        }\"\r\n    >\r\n    <div class=\"columns\">\r\n        <!-- Left section -->\r\n        <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n            <info-section\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isNameModified)]=\"isNameModified\"\r\n              >\r\n            </info-section>\r\n        </div>\r\n\r\n\r\n        <!-- Right section -->\r\n        <div class=\"column img-editor__container\">\r\n            <cropper\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isImgModified)]=\"isImgModified\"\r\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\r\n              (editClosed)=\"onEditClosed($event)\">\r\n            </cropper>\r\n        </div>\r\n    </div>\r\n    </ng-scrollbar>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: EditorInfoSectionComponent, selector: "info-section", inputs: ["imgToEdit", "isNameModified"], outputs: ["isNameModifiedChange"] }, { kind: "component", type: CropperComponent, selector: "cropper", inputs: ["imgToEdit", "isImgModified"], outputs: ["isImgModifiedChange", "editClosed", "currentCroppedImageChange"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
+ImgEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgEditorComponent, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit", isVideoEdit: "isVideoEdit" }, outputs: { editClosed: "editClosed" }, ngImport: i0, template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\r\n\r\n    <!-- Button Action Section -->\r\n\r\n    <div class=\"img-editor__infoSection__actions\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"button img-editor__infoSection__actions__cancel\"\r\n          (click)=\"onCancel()\"\r\n          [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\r\n        >\r\n          {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n        </button>\r\n        <div\r\n          class=\"button danger button img-editor__infoSection__actions__save\"\r\n          [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\r\n          (click)=\"onSave()\"\r\n        >\r\n          {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\r\n          <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <ng-scrollbar\r\n        class=\"img-editor__scroll\"\r\n        style=\"min-height: 500px\"\r\n        [ngClass]=\"{\r\n            'img-editor__scroll--full': stateDisplayed === 'full',\r\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\r\n            'img-editor__scroll--window': stateDisplayed === 'window'\r\n        }\"\r\n    >\r\n\r\n    <div class=\"columns\">\r\n        <!-- Left section -->\r\n        <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n          <ul class=\"img-editorVideo__tabs\">\r\n            <li [ngClass]=\"{'active': !isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = !isEditorLinkActive\">Informations</span></li>\r\n            <li [ngClass]=\"{'active': isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = !isEditorLinkActive\">Associer une vid\u00E9o</span></li>\r\n          </ul>\r\n\r\n            <info-section\r\n              *ngIf=\"!isEditorLinkActive\"\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isNameModified)]=\"isNameModified\"\r\n              >\r\n            </info-section>\r\n           <info-video\r\n             *ngIf=\"isEditorLinkActive\"\r\n             [(videoLink)]=\"imgToEdit.video_link\"\r\n             [(isVideoModified)]=\"isVideoModified\"\r\n             (deleteVideo)=\"onDeleteVideo()\">\r\n           </info-video>\r\n        </div>\r\n\r\n\r\n        <!-- Right section -->\r\n        <div class=\"column img-editor__container\">\r\n            <cropper\r\n              *ngIf=\"!isEditorLinkActive\"\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isImgModified)]=\"isImgModified\"\r\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\r\n              (editClosed)=\"onEditClosed($event)\">\r\n            </cropper>\r\n          <show-iframe\r\n            style=\"display: block;width: 100%\"\r\n            [videoLink]=\"imgToEdit.video_link\"\r\n            *ngIf=\"isEditorLinkActive\">\r\n\r\n          </show-iframe>\r\n        </div>\r\n    </div>\r\n    </ng-scrollbar>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: EditorInfoSectionComponent, selector: "info-section", inputs: ["imgToEdit", "isNameModified"], outputs: ["isNameModifiedChange"] }, { kind: "component", type: EditorInfoVideoComponent, selector: "info-video", inputs: ["videoLink", "isVideoModified"], outputs: ["videoLinkChange", "isVideoModifiedChange", "deleteVideo"] }, { kind: "component", type: EditorShowIframeComponent, selector: "show-iframe", inputs: ["videoLink"] }, { kind: "component", type: CropperComponent, selector: "cropper", inputs: ["imgToEdit", "isImgModified"], outputs: ["isImgModifiedChange", "editClosed", "currentCroppedImageChange"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
         easeInOut
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'img-editor', animations: [
                         easeInOut
-                    ], template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\r\n\r\n    <!-- Button Action Section -->\r\n\r\n    <div class=\"img-editor__infoSection__actions\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"button img-editor__infoSection__actions__cancel\"\r\n          (click)=\"onCancel()\"\r\n          [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\r\n        >\r\n          {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n        </button>\r\n        <div\r\n          class=\"button danger button img-editor__infoSection__actions__save\"\r\n          [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\r\n          (click)=\"onSave()\"\r\n        >\r\n          {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\r\n          <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <ng-scrollbar\r\n        class=\"img-editor__scroll\"\r\n        [ngClass]=\"{\r\n            'img-editor__scroll--full': stateDisplayed === 'full',\r\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\r\n            'img-editor__scroll--window': stateDisplayed === 'window'\r\n        }\"\r\n    >\r\n    <div class=\"columns\">\r\n        <!-- Left section -->\r\n        <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n            <info-section\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isNameModified)]=\"isNameModified\"\r\n              >\r\n            </info-section>\r\n        </div>\r\n\r\n\r\n        <!-- Right section -->\r\n        <div class=\"column img-editor__container\">\r\n            <cropper\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isImgModified)]=\"isImgModified\"\r\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\r\n              (editClosed)=\"onEditClosed($event)\">\r\n            </cropper>\r\n        </div>\r\n    </div>\r\n    </ng-scrollbar>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\r\n\r\n    <!-- Button Action Section -->\r\n\r\n    <div class=\"img-editor__infoSection__actions\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"button img-editor__infoSection__actions__cancel\"\r\n          (click)=\"onCancel()\"\r\n          [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\r\n        >\r\n          {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n        </button>\r\n        <div\r\n          class=\"button danger button img-editor__infoSection__actions__save\"\r\n          [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\r\n          (click)=\"onSave()\"\r\n        >\r\n          {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\r\n          <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <ng-scrollbar\r\n        class=\"img-editor__scroll\"\r\n        style=\"min-height: 500px\"\r\n        [ngClass]=\"{\r\n            'img-editor__scroll--full': stateDisplayed === 'full',\r\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\r\n            'img-editor__scroll--window': stateDisplayed === 'window'\r\n        }\"\r\n    >\r\n\r\n    <div class=\"columns\">\r\n        <!-- Left section -->\r\n        <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n          <ul class=\"img-editorVideo__tabs\">\r\n            <li [ngClass]=\"{'active': !isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = !isEditorLinkActive\">Informations</span></li>\r\n            <li [ngClass]=\"{'active': isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = !isEditorLinkActive\">Associer une vid\u00E9o</span></li>\r\n          </ul>\r\n\r\n            <info-section\r\n              *ngIf=\"!isEditorLinkActive\"\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isNameModified)]=\"isNameModified\"\r\n              >\r\n            </info-section>\r\n           <info-video\r\n             *ngIf=\"isEditorLinkActive\"\r\n             [(videoLink)]=\"imgToEdit.video_link\"\r\n             [(isVideoModified)]=\"isVideoModified\"\r\n             (deleteVideo)=\"onDeleteVideo()\">\r\n           </info-video>\r\n        </div>\r\n\r\n\r\n        <!-- Right section -->\r\n        <div class=\"column img-editor__container\">\r\n            <cropper\r\n              *ngIf=\"!isEditorLinkActive\"\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isImgModified)]=\"isImgModified\"\r\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\r\n              (editClosed)=\"onEditClosed($event)\">\r\n            </cropper>\r\n          <show-iframe\r\n            style=\"display: block;width: 100%\"\r\n            [videoLink]=\"imgToEdit.video_link\"\r\n            *ngIf=\"isEditorLinkActive\">\r\n\r\n          </show-iframe>\r\n        </div>\r\n    </div>\r\n    </ng-scrollbar>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: RenamePictureService }]; }, propDecorators: { stateDisplayed: [{
                 type: Input
             }], imgToEdit: [{
                 type: Input
+            }], isVideoEdit: [{
+                type: Input
             }], editClosed: [{
                 type: Output
             }] } });
@@ -3044,14 +3278,14 @@ class TableViewComponent extends ImagesActionHandler {
     }
 }
 TableViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component });
-TableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableViewComponent, selector: "table-view", usesInheritance: true, ngImport: i0, template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\r\n  <wz-table\r\n    [checkbox]=\"true\"\r\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\r\n    [(tableFilters)]=\"tableFilters\"\r\n    (tableFiltersChange)=\"onFiltersChange()\"\r\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n    [disablePagniation]=\"displayPexelsResults\"\r\n    [isLoading]=\"isLoading\"\r\n  >\r\n    <!-- Header Section -->\r\n    <div\r\n      headerCell\r\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\r\n      columnSize=\"2\"\r\n      sortName=\"name\"\r\n    ></div>\r\n    <div\r\n      headerCell\r\n      centerCell=\"center\"\r\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\r\n    ></div>\r\n    <div headerCell columnSize=\"0\"></div>\r\n\r\n    <!-- Body Section -->\r\n    <div\r\n      tableRow\r\n      checkBoxRow\r\n      [checkBoxValue]=\"picture.delSelected\"\r\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\r\n      *ngFor=\"let picture of picturesList; let index = index\"\r\n    >\r\n\r\n      <div tableColumn columnSize=\"2\">\r\n        <div class=\"table-view__row__container\">\r\n          <div\r\n            class=\"table-view__row__container__imgContainer\"\r\n            [ngClass]=\"{'imgSelected': picture.selected}\"\r\n            (click)=\"onToggleSelectImg(index)\">\r\n              <img\r\n                class=\"table-view__row__container__imgContainer__img\"\r\n                [src]=\"picture.file_name | imgSrc : '100'\"\r\n                alt=\"picture.display_name\"\r\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\r\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n              />\r\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\r\n              <div\r\n                *ngIf=\"picture.imgNotLoaded\"\r\n                class=\"table-view__row__container__imgContainer__overlay\"\r\n                >\r\n                    <i class=\"fad fa-folder-times\"></i>\r\n              </div>\r\n          </div>\r\n          <input\r\n              type=\"text\"\r\n              class=\"wzImgMngInput table-view__row__container__name\"\r\n              [(ngModel)]=\"picture.display_name\"\r\n              (focus)=\"previousName=picture.display_name\"\r\n              (blur)=\"onNameChange(picture.id_file)\"\r\n              (click)=\"onToggleDelSelection(index)\"\r\n              [ngClass]=\"{'desabled': picture.deleted}\"\r\n              [disabled]=\"picture.deleted\"\r\n          >\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        tableColumn\r\n        centerCell=\"center\"\r\n        (click)=\"onToggleDelSelection(index)\"\r\n        >\r\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\r\n      </div>\r\n\r\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\r\n        <!-- Dropdown -->\r\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\r\n          <ng-container label>\r\n              <div class=\"table-view__dropdown-options__label rotate\">\r\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n              <div\r\n                class=\"dropdown-item\"\r\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\r\n              >\r\n                  <i class=\"far fa-download download\"></i>&nbsp;\r\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onEdit(picture)\"\r\n            >\r\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"copyImageLink(picture.file_name)\"\r\n            >\r\n                <i class=\"far fa-copy copy\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onRemoveImg(picture)\"\r\n            >\r\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n        </dropdown>\r\n      </div>\r\n    </div>\r\n  </wz-table>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "component", type: TableComponent, selector: "wz-table", inputs: ["tableFilters", "tableRoutingName", "placeholder", "checkbox", "disableSearch", "disablePagniation", "isLoading"], outputs: ["tableFiltersChange", "toggleAllCheckBox"] }, { kind: "directive", type: TableColumn, selector: "[tableColumn]", inputs: ["columnSize", "centerCell"] }, { kind: "directive", type: CheckBoxRow, selector: "[checkBoxRow]", inputs: ["checkBoxId", "checkBoxName", "checkBoxValue"], outputs: ["checkBoxValueChange"] }, { kind: "directive", type: TableColumnHeader, selector: "[headerCell]", inputs: ["headerName", "columnSize", "filterRouting", "tableName", "sortName", "centerCell", "tableFilters"], outputs: ["onSortChange", "tableFiltersChange"] }, { kind: "directive", type: TableRow, selector: "[tableRow]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
+TableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableViewComponent, selector: "table-view", usesInheritance: true, ngImport: i0, template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\r\n  <wz-table\r\n    [checkbox]=\"true\"\r\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\r\n    [(tableFilters)]=\"tableFilters\"\r\n    (tableFiltersChange)=\"onFiltersChange()\"\r\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n    [disablePagniation]=\"displayPexelsResults\"\r\n    [isLoading]=\"isLoading\"\r\n  >\r\n    <!-- Header Section -->\r\n    <div\r\n      headerCell\r\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\r\n      columnSize=\"2\"\r\n      sortName=\"name\"\r\n    ></div>\r\n    <div\r\n      headerCell\r\n      centerCell=\"center\"\r\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\r\n    ></div>\r\n    <div headerCell columnSize=\"0\"></div>\r\n\r\n    <!-- Body Section -->\r\n    <div\r\n      tableRow\r\n      checkBoxRow\r\n      [checkBoxValue]=\"picture.delSelected\"\r\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\r\n      *ngFor=\"let picture of picturesList; let index = index\"\r\n    >\r\n\r\n      <div tableColumn columnSize=\"2\">\r\n        <div class=\"table-view__row__container\">\r\n          <div\r\n            class=\"table-view__row__container__imgContainer\"\r\n            [ngClass]=\"{'imgSelected': picture.selected}\"\r\n            (click)=\"onToggleSelectImg(index)\">\r\n              <img\r\n                class=\"table-view__row__container__imgContainer__img\"\r\n                [src]=\"picture.file_name | imgSrc : '100'\"\r\n                alt=\"picture.display_name\"\r\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\r\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n              />\r\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\r\n              <div\r\n                *ngIf=\"picture.imgNotLoaded\"\r\n                class=\"table-view__row__container__imgContainer__overlay\"\r\n                >\r\n                    <i class=\"fad fa-folder-times\"></i>\r\n              </div>\r\n          </div>\r\n          <input\r\n              type=\"text\"\r\n              class=\"wzImgMngInput table-view__row__container__name\"\r\n              [(ngModel)]=\"picture.display_name\"\r\n              (focus)=\"previousName=picture.display_name\"\r\n              (blur)=\"onNameChange(picture.id_file)\"\r\n              (click)=\"onToggleDelSelection(index)\"\r\n              [ngClass]=\"{'desabled': picture.deleted}\"\r\n              [disabled]=\"picture.deleted\"\r\n          >\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        tableColumn\r\n        centerCell=\"center\"\r\n        (click)=\"onToggleDelSelection(index)\"\r\n        >\r\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\r\n      </div>\r\n\r\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\r\n        <!-- Dropdown -->\r\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\r\n          <ng-container label>\r\n              <div class=\"table-view__dropdown-options__label rotate\">\r\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n              <div\r\n                class=\"dropdown-item\"\r\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\r\n              >\r\n                  <i class=\"far fa-download download\"></i>&nbsp;\r\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"redirectToVideo(picture)\"\r\n            >\r\n              <i class=\"fa-solid fa-play\"></i>&nbsp;\r\n              <p>{{ 'ImgManager.ImgEditor.AddVideo' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onEdit(picture)\"\r\n            >\r\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"copyImageLink(picture.file_name)\"\r\n            >\r\n                <i class=\"far fa-copy copy\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onRemoveImg(picture)\"\r\n            >\r\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n        </dropdown>\r\n      </div>\r\n    </div>\r\n  </wz-table>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "component", type: TableComponent, selector: "wz-table", inputs: ["tableFilters", "tableRoutingName", "placeholder", "checkbox", "disableSearch", "disablePagniation", "isLoading"], outputs: ["tableFiltersChange", "toggleAllCheckBox"] }, { kind: "directive", type: TableColumn, selector: "[tableColumn]", inputs: ["columnSize", "centerCell"] }, { kind: "directive", type: CheckBoxRow, selector: "[checkBoxRow]", inputs: ["checkBoxId", "checkBoxName", "checkBoxValue"], outputs: ["checkBoxValueChange"] }, { kind: "directive", type: TableColumnHeader, selector: "[headerCell]", inputs: ["headerName", "columnSize", "filterRouting", "tableName", "sortName", "centerCell", "tableFilters"], outputs: ["onSortChange", "tableFiltersChange"] }, { kind: "directive", type: TableRow, selector: "[tableRow]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
         listAnnimation
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-view', animations: [
                         listAnnimation
-                    ], template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\r\n  <wz-table\r\n    [checkbox]=\"true\"\r\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\r\n    [(tableFilters)]=\"tableFilters\"\r\n    (tableFiltersChange)=\"onFiltersChange()\"\r\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n    [disablePagniation]=\"displayPexelsResults\"\r\n    [isLoading]=\"isLoading\"\r\n  >\r\n    <!-- Header Section -->\r\n    <div\r\n      headerCell\r\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\r\n      columnSize=\"2\"\r\n      sortName=\"name\"\r\n    ></div>\r\n    <div\r\n      headerCell\r\n      centerCell=\"center\"\r\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\r\n    ></div>\r\n    <div headerCell columnSize=\"0\"></div>\r\n\r\n    <!-- Body Section -->\r\n    <div\r\n      tableRow\r\n      checkBoxRow\r\n      [checkBoxValue]=\"picture.delSelected\"\r\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\r\n      *ngFor=\"let picture of picturesList; let index = index\"\r\n    >\r\n\r\n      <div tableColumn columnSize=\"2\">\r\n        <div class=\"table-view__row__container\">\r\n          <div\r\n            class=\"table-view__row__container__imgContainer\"\r\n            [ngClass]=\"{'imgSelected': picture.selected}\"\r\n            (click)=\"onToggleSelectImg(index)\">\r\n              <img\r\n                class=\"table-view__row__container__imgContainer__img\"\r\n                [src]=\"picture.file_name | imgSrc : '100'\"\r\n                alt=\"picture.display_name\"\r\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\r\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n              />\r\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\r\n              <div\r\n                *ngIf=\"picture.imgNotLoaded\"\r\n                class=\"table-view__row__container__imgContainer__overlay\"\r\n                >\r\n                    <i class=\"fad fa-folder-times\"></i>\r\n              </div>\r\n          </div>\r\n          <input\r\n              type=\"text\"\r\n              class=\"wzImgMngInput table-view__row__container__name\"\r\n              [(ngModel)]=\"picture.display_name\"\r\n              (focus)=\"previousName=picture.display_name\"\r\n              (blur)=\"onNameChange(picture.id_file)\"\r\n              (click)=\"onToggleDelSelection(index)\"\r\n              [ngClass]=\"{'desabled': picture.deleted}\"\r\n              [disabled]=\"picture.deleted\"\r\n          >\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        tableColumn\r\n        centerCell=\"center\"\r\n        (click)=\"onToggleDelSelection(index)\"\r\n        >\r\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\r\n      </div>\r\n\r\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\r\n        <!-- Dropdown -->\r\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\r\n          <ng-container label>\r\n              <div class=\"table-view__dropdown-options__label rotate\">\r\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n              <div\r\n                class=\"dropdown-item\"\r\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\r\n              >\r\n                  <i class=\"far fa-download download\"></i>&nbsp;\r\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onEdit(picture)\"\r\n            >\r\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"copyImageLink(picture.file_name)\"\r\n            >\r\n                <i class=\"far fa-copy copy\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onRemoveImg(picture)\"\r\n            >\r\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n        </dropdown>\r\n      </div>\r\n    </div>\r\n  </wz-table>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\r\n  <wz-table\r\n    [checkbox]=\"true\"\r\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\r\n    [(tableFilters)]=\"tableFilters\"\r\n    (tableFiltersChange)=\"onFiltersChange()\"\r\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n    [disablePagniation]=\"displayPexelsResults\"\r\n    [isLoading]=\"isLoading\"\r\n  >\r\n    <!-- Header Section -->\r\n    <div\r\n      headerCell\r\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\r\n      columnSize=\"2\"\r\n      sortName=\"name\"\r\n    ></div>\r\n    <div\r\n      headerCell\r\n      centerCell=\"center\"\r\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\r\n    ></div>\r\n    <div headerCell columnSize=\"0\"></div>\r\n\r\n    <!-- Body Section -->\r\n    <div\r\n      tableRow\r\n      checkBoxRow\r\n      [checkBoxValue]=\"picture.delSelected\"\r\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\r\n      *ngFor=\"let picture of picturesList; let index = index\"\r\n    >\r\n\r\n      <div tableColumn columnSize=\"2\">\r\n        <div class=\"table-view__row__container\">\r\n          <div\r\n            class=\"table-view__row__container__imgContainer\"\r\n            [ngClass]=\"{'imgSelected': picture.selected}\"\r\n            (click)=\"onToggleSelectImg(index)\">\r\n              <img\r\n                class=\"table-view__row__container__imgContainer__img\"\r\n                [src]=\"picture.file_name | imgSrc : '100'\"\r\n                alt=\"picture.display_name\"\r\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\r\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n              />\r\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\r\n              <div\r\n                *ngIf=\"picture.imgNotLoaded\"\r\n                class=\"table-view__row__container__imgContainer__overlay\"\r\n                >\r\n                    <i class=\"fad fa-folder-times\"></i>\r\n              </div>\r\n          </div>\r\n          <input\r\n              type=\"text\"\r\n              class=\"wzImgMngInput table-view__row__container__name\"\r\n              [(ngModel)]=\"picture.display_name\"\r\n              (focus)=\"previousName=picture.display_name\"\r\n              (blur)=\"onNameChange(picture.id_file)\"\r\n              (click)=\"onToggleDelSelection(index)\"\r\n              [ngClass]=\"{'desabled': picture.deleted}\"\r\n              [disabled]=\"picture.deleted\"\r\n          >\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        tableColumn\r\n        centerCell=\"center\"\r\n        (click)=\"onToggleDelSelection(index)\"\r\n        >\r\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\r\n      </div>\r\n\r\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\r\n        <!-- Dropdown -->\r\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\r\n          <ng-container label>\r\n              <div class=\"table-view__dropdown-options__label rotate\">\r\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n              <div\r\n                class=\"dropdown-item\"\r\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\r\n              >\r\n                  <i class=\"far fa-download download\"></i>&nbsp;\r\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"redirectToVideo(picture)\"\r\n            >\r\n              <i class=\"fa-solid fa-play\"></i>&nbsp;\r\n              <p>{{ 'ImgManager.ImgEditor.AddVideo' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onEdit(picture)\"\r\n            >\r\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"copyImageLink(picture.file_name)\"\r\n            >\r\n                <i class=\"far fa-copy copy\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onRemoveImg(picture)\"\r\n            >\r\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n        </dropdown>\r\n      </div>\r\n    </div>\r\n  </wz-table>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }]; } });
 
 class ImagesViewComponent {
@@ -3593,6 +3827,7 @@ class ImgTabsComponent {
         tabs: string[] = ['img-upload', 'images-view', 'pexels-lib', 'img-edition']; */
         this.editTab = false;
         this.imgUpload = false;
+        this.isVideoEdit = false;
         this.snackBarNewVersionConfig = {
             message: '',
             duration: 3000
@@ -3603,6 +3838,14 @@ class ImgTabsComponent {
             this.tabActive = this.tabs[3];
             this.imgToEdit = imgToEdit;
             this.editTab = true;
+            this.isVideoEdit = false;
+            this.currentTab.emit(this.tabs[3]);
+        });
+        this.imgEventEditService.getImgToVideoEventListener().subscribe(imgToEdit => {
+            this.tabActive = this.tabs[3];
+            this.imgToEdit = imgToEdit;
+            this.editTab = true;
+            this.isVideoEdit = true;
             this.currentTab.emit(this.tabs[3]);
         });
     }
@@ -3636,10 +3879,10 @@ class ImgTabsComponent {
     }
 }
 ImgTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgTabsComponent, deps: [{ token: ImgEventService }, { token: AlertService }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-ImgTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgTabsComponent, selector: "img-tabs", inputs: { multipleImgMode: "multipleImgMode", stateDisplayed: "stateDisplayed", listDisplayed: "listDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed", currentTab: "currentTab", switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgUploadedComponent", first: true, predicate: ["imgUploadedImg"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\r\n  <div class=\"wrapper-tabs\">\r\n    <div\r\n      class=\"tabs\"\r\n      [ngClass]=\"\r\n        {\r\n          'tabs--notWindow': stateDisplayed !== 'window',\r\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\r\n        }\">\r\n\r\n      <ul>\r\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\r\n      </ul>\r\n      <div\r\n        class=\"img-tabs__canva\"\r\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\r\n        <canva-btn\r\n          (showImgUploaded)=\"onShowImgUploaded()\"\r\n          [stateDisplayed]=\"stateDisplayed\">\r\n        </canva-btn>\r\n      </div>\r\n    </div>\r\n    <div class=\"select-mobile-page\">\r\n      <wac-select\r\n        [(ngModel)]=\"tabActive\"\r\n        name=\"tabs\"\r\n        [items]=\"tabs\"\r\n      ></wac-select>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Upload section -->\r\n  <div\r\n    class=\"columns img-tabs__tabsFirst\"\r\n    [ngClass]=\"{\r\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\r\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\r\n    }\"\r\n    *ngIf=\"tabActive.value === tabs[0].value\">\r\n    <div class=\"column img-tabs__tabsFirst__upload\">\r\n      <img-upload\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        (imgUploaded)=\"onImgUploaded($event)\"\r\n      ></img-upload>\r\n    </div>\r\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\r\n      'img-tabs__tabsFirst__list--upload': imgUpload\r\n    }\">\r\n      <images-view\r\n        *ngIf=\"!imgUpload\"\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [listDisplayed]=\"false\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [tabDisplayed]=\"tabActive.value\"\r\n        [nbRowToShow]=\"2\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n        [fullSize]=\"false\">\r\n      </images-view>\r\n\r\n\r\n      <div [hidden]=\"!imgUpload\">\r\n        <upload-list\r\n          #imgUploadedImg\r\n          [stateDisplayed]=\"stateDisplayed\"\r\n          [tabDisplayed]=\"tabActive.value\"\r\n          [multipleImgMode]=\"multipleImgMode\"\r\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n          >\r\n        </upload-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Images section -->\r\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\r\n    <div class=\"column\">\r\n\r\n      <images-view\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [listDisplayed]=\"listDisplayed\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [tabDisplayed]=\"tabActive.value\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n        [fullSize]=\"true\">\r\n      </images-view>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Pexels img section -->\r\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\r\n    <div class=\"column\">\r\n      <pexels-lib\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        (showImgUploaded)=\"onShowImgUploaded()\">\r\n      </pexels-lib>\r\n    </div>\r\n  </div>\r\n\r\n  <!--Edition section -->\r\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\r\n    <div class=\"column\">\r\n      <img-editor\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [imgToEdit]=\"imgToEdit\"\r\n        (editClosed)=\"onEditClosed($event)\">\r\n      </img-editor>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImgUploadComponent, selector: "img-upload", inputs: ["stateDisplayed"], outputs: ["imgUploaded"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"] }, { kind: "component", type: UploadListComponent, selector: "upload-list", inputs: ["stateDisplayed", "tabDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: ImgEditorComponent, selector: "img-editor", inputs: ["stateDisplayed", "imgToEdit"], outputs: ["editClosed"] }, { kind: "component", type: CanvaBtnComponent, selector: "canva-btn", inputs: ["stateDisplayed"], outputs: ["showImgUploaded"] }, { kind: "component", type: ImagesViewComponent, selector: "images-view", inputs: ["stateDisplayed", "tabDisplayed", "fullSize", "nbRowToShow", "listDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: SelectComponent, selector: "wac-select", inputs: ["items", "placeholder", "label", "maxWidthItems", "search", "type", "callToAction", "maxWidth", "disabled"], outputs: ["selectValue", "clickOnCallToAction"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+ImgTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgTabsComponent, selector: "img-tabs", inputs: { multipleImgMode: "multipleImgMode", stateDisplayed: "stateDisplayed", listDisplayed: "listDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed", currentTab: "currentTab", switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgUploadedComponent", first: true, predicate: ["imgUploadedImg"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\r\n  <div class=\"wrapper-tabs\">\r\n    <div\r\n      class=\"tabs\"\r\n      [ngClass]=\"\r\n        {\r\n          'tabs--notWindow': stateDisplayed !== 'window',\r\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\r\n        }\">\r\n\r\n      <ul>\r\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\r\n      </ul>\r\n      <div\r\n        class=\"img-tabs__canva\"\r\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\r\n        <canva-btn\r\n          (showImgUploaded)=\"onShowImgUploaded()\"\r\n          [stateDisplayed]=\"stateDisplayed\">\r\n        </canva-btn>\r\n      </div>\r\n    </div>\r\n    <div class=\"select-mobile-page\">\r\n      <wac-select\r\n        [(ngModel)]=\"tabActive\"\r\n        name=\"tabs\"\r\n        [items]=\"tabs\"\r\n      ></wac-select>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Upload section -->\r\n  <div\r\n    class=\"columns img-tabs__tabsFirst\"\r\n    [ngClass]=\"{\r\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\r\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\r\n    }\"\r\n    *ngIf=\"tabActive.value === tabs[0].value\">\r\n    <div class=\"column img-tabs__tabsFirst__upload\">\r\n      <img-upload\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        (imgUploaded)=\"onImgUploaded($event)\"\r\n      ></img-upload>\r\n    </div>\r\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\r\n      'img-tabs__tabsFirst__list--upload': imgUpload\r\n    }\">\r\n      <images-view\r\n        *ngIf=\"!imgUpload\"\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [listDisplayed]=\"false\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [tabDisplayed]=\"tabActive.value\"\r\n        [nbRowToShow]=\"2\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n        [fullSize]=\"false\">\r\n      </images-view>\r\n\r\n\r\n      <div [hidden]=\"!imgUpload\">\r\n        <upload-list\r\n          #imgUploadedImg\r\n          [stateDisplayed]=\"stateDisplayed\"\r\n          [tabDisplayed]=\"tabActive.value\"\r\n          [multipleImgMode]=\"multipleImgMode\"\r\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n          >\r\n        </upload-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Images section -->\r\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\r\n    <div class=\"column\">\r\n\r\n      <images-view\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [listDisplayed]=\"listDisplayed\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [tabDisplayed]=\"tabActive.value\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n        [fullSize]=\"true\">\r\n      </images-view>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Pexels img section -->\r\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\r\n    <div class=\"column\">\r\n      <pexels-lib\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        (showImgUploaded)=\"onShowImgUploaded()\">\r\n      </pexels-lib>\r\n    </div>\r\n  </div>\r\n\r\n  <!--Edition section -->\r\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\r\n    <div class=\"column\">\r\n      <img-editor\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [imgToEdit]=\"imgToEdit\"\r\n        [isVideoEdit]=\"isVideoEdit\"\r\n        (editClosed)=\"onEditClosed($event)\">\r\n      </img-editor>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImgUploadComponent, selector: "img-upload", inputs: ["stateDisplayed"], outputs: ["imgUploaded"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"] }, { kind: "component", type: UploadListComponent, selector: "upload-list", inputs: ["stateDisplayed", "tabDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: ImgEditorComponent, selector: "img-editor", inputs: ["stateDisplayed", "imgToEdit", "isVideoEdit"], outputs: ["editClosed"] }, { kind: "component", type: CanvaBtnComponent, selector: "canva-btn", inputs: ["stateDisplayed"], outputs: ["showImgUploaded"] }, { kind: "component", type: ImagesViewComponent, selector: "images-view", inputs: ["stateDisplayed", "tabDisplayed", "fullSize", "nbRowToShow", "listDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: SelectComponent, selector: "wac-select", inputs: ["items", "placeholder", "label", "maxWidthItems", "search", "type", "callToAction", "maxWidth", "disabled"], outputs: ["selectValue", "clickOnCallToAction"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'img-tabs', template: "<div\r\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\r\n  <div class=\"wrapper-tabs\">\r\n    <div\r\n      class=\"tabs\"\r\n      [ngClass]=\"\r\n        {\r\n          'tabs--notWindow': stateDisplayed !== 'window',\r\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\r\n        }\">\r\n\r\n      <ul>\r\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\r\n      </ul>\r\n      <div\r\n        class=\"img-tabs__canva\"\r\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\r\n        <canva-btn\r\n          (showImgUploaded)=\"onShowImgUploaded()\"\r\n          [stateDisplayed]=\"stateDisplayed\">\r\n        </canva-btn>\r\n      </div>\r\n    </div>\r\n    <div class=\"select-mobile-page\">\r\n      <wac-select\r\n        [(ngModel)]=\"tabActive\"\r\n        name=\"tabs\"\r\n        [items]=\"tabs\"\r\n      ></wac-select>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Upload section -->\r\n  <div\r\n    class=\"columns img-tabs__tabsFirst\"\r\n    [ngClass]=\"{\r\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\r\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\r\n    }\"\r\n    *ngIf=\"tabActive.value === tabs[0].value\">\r\n    <div class=\"column img-tabs__tabsFirst__upload\">\r\n      <img-upload\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        (imgUploaded)=\"onImgUploaded($event)\"\r\n      ></img-upload>\r\n    </div>\r\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\r\n      'img-tabs__tabsFirst__list--upload': imgUpload\r\n    }\">\r\n      <images-view\r\n        *ngIf=\"!imgUpload\"\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [listDisplayed]=\"false\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [tabDisplayed]=\"tabActive.value\"\r\n        [nbRowToShow]=\"2\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n        [fullSize]=\"false\">\r\n      </images-view>\r\n\r\n\r\n      <div [hidden]=\"!imgUpload\">\r\n        <upload-list\r\n          #imgUploadedImg\r\n          [stateDisplayed]=\"stateDisplayed\"\r\n          [tabDisplayed]=\"tabActive.value\"\r\n          [multipleImgMode]=\"multipleImgMode\"\r\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n          >\r\n        </upload-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Images section -->\r\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\r\n    <div class=\"column\">\r\n\r\n      <images-view\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [listDisplayed]=\"listDisplayed\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [tabDisplayed]=\"tabActive.value\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n        [fullSize]=\"true\">\r\n      </images-view>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Pexels img section -->\r\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\r\n    <div class=\"column\">\r\n      <pexels-lib\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        (showImgUploaded)=\"onShowImgUploaded()\">\r\n      </pexels-lib>\r\n    </div>\r\n  </div>\r\n\r\n  <!--Edition section -->\r\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\r\n    <div class=\"column\">\r\n      <img-editor\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [imgToEdit]=\"imgToEdit\"\r\n        (editClosed)=\"onEditClosed($event)\">\r\n      </img-editor>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n" }]
+            args: [{ selector: 'img-tabs', template: "<div\r\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\r\n  <div class=\"wrapper-tabs\">\r\n    <div\r\n      class=\"tabs\"\r\n      [ngClass]=\"\r\n        {\r\n          'tabs--notWindow': stateDisplayed !== 'window',\r\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\r\n        }\">\r\n\r\n      <ul>\r\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\r\n      </ul>\r\n      <div\r\n        class=\"img-tabs__canva\"\r\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\r\n        <canva-btn\r\n          (showImgUploaded)=\"onShowImgUploaded()\"\r\n          [stateDisplayed]=\"stateDisplayed\">\r\n        </canva-btn>\r\n      </div>\r\n    </div>\r\n    <div class=\"select-mobile-page\">\r\n      <wac-select\r\n        [(ngModel)]=\"tabActive\"\r\n        name=\"tabs\"\r\n        [items]=\"tabs\"\r\n      ></wac-select>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Upload section -->\r\n  <div\r\n    class=\"columns img-tabs__tabsFirst\"\r\n    [ngClass]=\"{\r\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\r\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\r\n    }\"\r\n    *ngIf=\"tabActive.value === tabs[0].value\">\r\n    <div class=\"column img-tabs__tabsFirst__upload\">\r\n      <img-upload\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        (imgUploaded)=\"onImgUploaded($event)\"\r\n      ></img-upload>\r\n    </div>\r\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\r\n      'img-tabs__tabsFirst__list--upload': imgUpload\r\n    }\">\r\n      <images-view\r\n        *ngIf=\"!imgUpload\"\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [listDisplayed]=\"false\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [tabDisplayed]=\"tabActive.value\"\r\n        [nbRowToShow]=\"2\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n        [fullSize]=\"false\">\r\n      </images-view>\r\n\r\n\r\n      <div [hidden]=\"!imgUpload\">\r\n        <upload-list\r\n          #imgUploadedImg\r\n          [stateDisplayed]=\"stateDisplayed\"\r\n          [tabDisplayed]=\"tabActive.value\"\r\n          [multipleImgMode]=\"multipleImgMode\"\r\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n          >\r\n        </upload-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Images section -->\r\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\r\n    <div class=\"column\">\r\n\r\n      <images-view\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [listDisplayed]=\"listDisplayed\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [tabDisplayed]=\"tabActive.value\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n        [fullSize]=\"true\">\r\n      </images-view>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Pexels img section -->\r\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\r\n    <div class=\"column\">\r\n      <pexels-lib\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        (showImgUploaded)=\"onShowImgUploaded()\">\r\n      </pexels-lib>\r\n    </div>\r\n  </div>\r\n\r\n  <!--Edition section -->\r\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\r\n    <div class=\"column\">\r\n      <img-editor\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [imgToEdit]=\"imgToEdit\"\r\n        [isVideoEdit]=\"isVideoEdit\"\r\n        (editClosed)=\"onEditClosed($event)\">\r\n      </img-editor>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: ImgEventService }, { type: AlertService }, { type: i3$2.Router }]; }, propDecorators: { multipleImgMode: [{
                 type: Input
             }], stateDisplayed: [{
@@ -3939,6 +4182,8 @@ const components = [
     UploadListComponent,
     ImgEditorComponent,
     EditorInfoSectionComponent,
+    EditorInfoVideoComponent,
+    EditorShowIframeComponent,
     CanvaBtnComponent,
     ImgSelectionComponent,
     LoaderComponent,
@@ -4010,6 +4255,8 @@ WzImgManagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         UploadListComponent,
         ImgEditorComponent,
         EditorInfoSectionComponent,
+        EditorInfoVideoComponent,
+        EditorShowIframeComponent,
         CanvaBtnComponent,
         ImgSelectionComponent,
         LoaderComponent,
@@ -4113,3 +4360,4 @@ class ImgManagerConfigDto {
 
 export { ApiService, CanvaButtonApi, CanvaService, ImageNotFoundService, ImgApiDto, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule };
 //# sourceMappingURL=wizishop-img-manager.mjs.map
+//# sourceMappingURL=wizishop-img-manager.mjs.map