KMCNG-907

src/applications/content-entries-app/entry/entry-flavours/flavor-replace-video/replace-file/replace-file.component.html

@@ -23,7 +23,7 @@ <h1>{{_title}}</h1>
                     <span>{{'applications.content.entryDetails.flavours.replaceVideo.storageProfile.note' | translate}}</span>
                 </kInputHelper>
 
-                <button *ngIf="_files?.length === 0 || (_kmcPermissions.FEATURE_MULTI_FLAVOR_INGESTION | kNgIfPermitted)"
+                <button *ngIf="files?.length === 0 || (_kmcPermissions.FEATURE_MULTI_FLAVOR_INGESTION | kNgIfPermitted)"
                         type="button"
                         class="kButtonDefault kAddFileButton"
                         pButton icon="kIconplus"
@@ -61,8 +61,8 @@ <h1>{{_title}}</h1>
                 </div>
             </div>
 
-            <div class="kTable" [class.empty]="_files.length === 0">
-                <p-dataTable [value]="_files"
+            <div class="kTable" [class.empty]="files.length === 0">
+                <p-dataTable [value]="files"
                              [immutable]="false"
                              [emptyMessage]="'applications.content.entryDetails.flavours.replaceVideo.emptyMessage.title' | translate"
                              scrollable="true">
@@ -147,7 +147,7 @@ <h1>{{_title}}</h1>
                     </p-column>
                     <p-column [style]="{'width': '28px'}"></p-column>
                 </p-dataTable>
-                <div *ngIf="_files.length === 0" class="kEmptyMessage">
+                <div *ngIf="files.length === 0" class="kEmptyMessage">
                     <h1>
                         {{ 'applications.content.entryDetails.flavours.replaceVideo.emptyMessage.title' | translate }}
                     </h1>
@@ -164,13 +164,9 @@ <h1>
         <div class="kFooter">
             <button class="kButtonDefault kUploadButton"
                     pButton
-                    [disabled]="_files.length === 0 || _isLoading || !!_blockerMessage"
+                    [disabled]="files.length === 0 || _isLoading || !!_blockerMessage"
                     [label]="_uploadBtnLabel"
                     (click)="_upload()"></button>
         </div>
     </div>
 </k-area-blocker>
-<kFileDialog #fileDialog
-             [filter]="_allowedExtensions"
-             [allowMultiple]="_kmcPermissions.FEATURE_MULTI_FLAVOR_INGESTION | kNgIfPermitted"
-             (onFileSelected)="_handleSelectedFiles($event)"></kFileDialog>

src/applications/content-entries-app/entry/entry-flavours/flavor-replace-video/replace-file/replace-file.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
 import { SelectItem } from 'primeng/primeng';
 import { UploadManagement } from '@kaltura-ng/kaltura-common';
@@ -62,8 +62,10 @@ export class ReplaceFileComponent implements OnInit, AfterViewInit, OnDestroy {
     @Input() entry: KalturaMediaEntry;
     @Input() flavors: Flavor[] = [];
     @Input() replaceType: UploadMenuType;
+    @Input() fileDialog: FileDialogComponent;
+    @Input() files: UploadReplacementFile[] = [];
 
-    @ViewChild('fileDialog') _fileDialog: FileDialogComponent;
+    @Output() clearFilesOnDestroy = new EventEmitter<void>();
 
     private _transcodingProfiles: KalturaTranscodingProfileWithAsset[] = [];
     private _storageProfiles: KalturaStorageProfile[] = [];
@@ -99,7 +101,6 @@ export class ReplaceFileComponent implements OnInit, AfterViewInit, OnDestroy {
     public _transcodingProfileField: AbstractControl;
     public _blockerMessage: AreaBlockerMessage;
     public _isLoading = false;
-    public _files: UploadReplacementFile[] = [];
     public _kmcPermissions = KMCPermissions;
     public _title: string;
     public _flavorOptions: SelectItem[] = [];
@@ -113,11 +114,6 @@ export class ReplaceFileComponent implements OnInit, AfterViewInit, OnDestroy {
         directory: this._appLocalization.get('applications.content.entryDetails.flavours.replaceVideo.na')
     };
 
-    public _allowedVideoExtensions = `.flv,.asf,.qt,.mov,.mpg,.avi,.wmv,.mp4,.3gp,.f4v,.m4v`;
-    public _allowedAudioExtensions = `.flv,.asf,.qt,.mov,.mpg,.avi,.wmv,.mp3,.wav`;
-
-    public _allowedExtensions: string;
-
     constructor(private _newReplaceVideoUpload: NewReplaceVideoUploadService,
                 private _formBuilder: FormBuilder,
                 private _kalturaClient: KalturaClient,
@@ -135,12 +131,13 @@ export class ReplaceFileComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     ngOnDestroy() {
-
+        this.clearFilesOnDestroy.emit();
     }
 
     ngAfterViewInit(): void {
-        this._addFile();
-        this._tableScrollableWrapper = document.querySelector('.kUploadSettings .ui-datatable-scrollable-body');
+        setTimeout(() => {
+            this._tableScrollableWrapper = document.querySelector('.kUploadSettings .ui-datatable-scrollable-body');
+        }, 0);
     }
 
     private _buildForm(): void {
@@ -151,12 +148,10 @@ export class ReplaceFileComponent implements OnInit, AfterViewInit, OnDestroy {
     private _prepare(): void {
         this._logger.info(`prepare replace file view`, { type: this.replaceType, entryId: this.entry.id, mediaType: this.entry.mediaType });
         if (this.entry.mediaType === KalturaMediaType.video) {
-            this._allowedExtensions = this._allowedVideoExtensions;
             this._title = this.entry.status === KalturaEntryStatus.noContent
                 ? this._appLocalization.get('applications.content.entryDetails.flavours.replaceVideo.addVideo')
                 : this._appLocalization.get('applications.content.entryDetails.flavours.replaceVideo.updateVideo');
         } else if (this.entry.mediaType === KalturaMediaType.audio) {
-            this._allowedExtensions = this._allowedAudioExtensions;
             this._title = this.entry.status === KalturaEntryStatus.noContent
                 ? this._appLocalization.get('applications.content.entryDetails.flavours.replaceVideo.addAudio')
                 : this._appLocalization.get('applications.content.entryDetails.flavours.replaceVideo.updateAudio');
@@ -182,17 +177,6 @@ export class ReplaceFileComponent implements OnInit, AfterViewInit, OnDestroy {
         this._loadReplaceData();
     }
 
-    public _handleSelectedFiles(files: FileList): void {
-        const newItems = Array.from(files).map(file => {
-            const { name, size } = file;
-            return { file, name, size };
-        });
-
-        this._logger.info(`handle file selected action by user`, { fileNames: newItems.map(({ name }) => name) });
-
-        this._files = [...this._files, ...newItems];
-    }
-
     private _loadConversionProfiles(): Observable<KalturaConversionProfileAssetParams[]> {
         const filter = new KalturaConversionProfileFilter({
             orderBy: KalturaConversionProfileOrderBy.createdAtDesc.toString(),
@@ -311,16 +295,16 @@ export class ReplaceFileComponent implements OnInit, AfterViewInit, OnDestroy {
             value: 0
         }];
         this._flavorsFieldDisabled = true;
-        this._files.forEach(file => file.flavor = 0);
+        this.files.forEach(file => file.flavor = 0);
     }
 
     public _removeFile(file: UploadReplacementFile): void {
         this._logger.info(`handle remove file from the list action by user`, { fileName: file.name || file.url });
-        const fileIndex = this._files.indexOf(file);
+        const fileIndex = this.files.indexOf(file);
         if (fileIndex !== -1) {
-            const newList = Array.from(this._files);
+            const newList = Array.from(this.files);
             newList.splice(fileIndex, 1);
-            this._files = newList;
+            this.files = newList;
         }
     }
 
@@ -413,7 +397,7 @@ export class ReplaceFileComponent implements OnInit, AfterViewInit, OnDestroy {
             }
         };
 
-        const { isValid, code } = this._validateFiles(this._files);
+        const { isValid, code } = this._validateFiles(this.files);
         if (isValid) {
             this._logger.info(`files are valid, proceed action`);
             proceedReplacement();
@@ -457,7 +441,7 @@ export class ReplaceFileComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     private _linkFiles(transcodingProfileId: string): void {
-        const linkFileDataList = this._files.map(file => ({
+        const linkFileDataList = this.files.map(file => ({
             url: file.url,
             assetParamsId: file.flavor
         }));
@@ -474,7 +458,7 @@ export class ReplaceFileComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     private _importFiles(transcodingProfileId: string): void {
-        const importFileDataList = this._files.map(file => ({
+        const importFileDataList = this.files.map(file => ({
             url: file.url,
             assetParamsId: file.flavor
         }));
@@ -491,7 +475,7 @@ export class ReplaceFileComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     private _uploadFiles(transcodingProfileId: string): void {
-        const uploadFileDataList = this._files.map(fileData => ({
+        const uploadFileDataList = this.files.map(fileData => ({
             file: fileData.file,
             assetParamsId: fileData.flavor
         }));
@@ -580,11 +564,11 @@ export class ReplaceFileComponent implements OnInit, AfterViewInit, OnDestroy {
         this._logger.info(`handle add file action by user`);
         if (this.replaceType === 'upload') {
             this._logger.info(`open file selection dialog`);
-            this._fileDialog.open();
+            this.fileDialog.open();
         } else {
             setTimeout(() => {
                 this._logger.info(`add empty file row for non-upload replacement`);
-                this._files = [...this._files, { url: '' }];
+                this.files = [...this.files, { url: '' }];
             }, 0);
         }
     }

src/applications/content-entries-app/entry/entry-flavours/flavor-replace-video/replace-media-button/replace-media-button.component.html

@@ -3,7 +3,7 @@
 <button *ngIf="_uploadEnabled"
         pButton class="kFlavorReplaceButton kButtonDefault"
         [label]="'applications.content.entryDetails.flavours.replaceVideo.uploadFromDesktop' | translate"
-        (click)="_openReplacementMenu('upload')"></button>
+        (click)="fileDialog.open()"></button>
 
 <button *ngIf="_importEnabled"
         pButton class="kFlavorReplaceButton kButtonDefault"
@@ -24,9 +24,12 @@
               [closeBtn]="true" [modal]="true" [preventPageScroll]="true">
     <ng-template>
         <kFlavorReplaceFile [entry]="entry"
+                            [fileDialog]="fileDialog"
+                            [files]="_files"
                             [flavors]="flavors"
                             [parentPopupWidget]="uploadMenu"
-                            [replaceType]="_replaceType"></kFlavorReplaceFile>
+                            [replaceType]="_replaceType"
+                            (clearFilesOnDestroy)="_files = []"></kFlavorReplaceFile>
     </ng-template>
 </kPopupWidget>
 
@@ -37,3 +40,8 @@
                                  [parentPopupWidget]="matchDropFolder"></kReplaceMatchDropFolder>
     </ng-template>
 </kPopupWidget>
+
+<kFileDialog #fileDialog
+             [filter]="_allowedExtensions"
+             [allowMultiple]="_kmcPermissions.FEATURE_MULTI_FLAVOR_INGESTION | kNgIfPermitted"
+             (onFileSelected)="_handleSelectedFiles($event)"></kFileDialog>

src/applications/content-entries-app/entry/entry-flavours/flavor-replace-video/replace-media-button/replace-media-button.component.ts

@@ -1,10 +1,12 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import { KalturaMediaEntry } from 'kaltura-ngx-client';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { KalturaMediaEntry, KalturaMediaType } from 'kaltura-ngx-client';
 import { KMCPermissions, KMCPermissionsService } from 'app-shared/kmc-shared/kmc-permissions';
 import { PopupWidgetComponent } from '@kaltura-ng/kaltura-ui';
 import { Flavor } from '../../flavor';
 import { KalturaLogger } from '@kaltura-ng/kaltura-logger';
 import { AppLocalization } from '@kaltura-ng/mc-shared';
+import { UploadReplacementFile } from '../replace-file/replace-file.component';
+import { FileDialogComponent } from '@kaltura-ng/kaltura-ui';
 
 export type UploadMenuType = 'upload' | 'import' | 'link' | 'match';
 
@@ -14,18 +16,26 @@ export type UploadMenuType = 'upload' | 'import' | 'link' | 'match';
     styleUrls: ['./replace-media-button.component.scss'],
     providers: [KalturaLogger.createLogger('ReplaceMediaButtonComponent')]
 })
-export class ReplaceMediaButtonComponent {
+export class ReplaceMediaButtonComponent implements OnInit {
     @Input() entry: KalturaMediaEntry;
     @Input() flavors: Flavor[] = [];
     @Input() replaceButtonsLabel: string;
 
     @ViewChild('uploadMenu') _uploadMenu: PopupWidgetComponent;
+    @ViewChild('fileDialog') _fileDialog: FileDialogComponent;
 
     public _replaceType: UploadMenuType;
     public _uploadEnabled = false;
     public _importEnabled = false;
     public _linkEnabled = false;
     public _matchEnabled = false;
+    public _files: UploadReplacementFile[] = [];
+    public _kmcPermissions = KMCPermissions;
+
+    public _allowedVideoExtensions = `.flv,.asf,.qt,.mov,.mpg,.avi,.wmv,.mp4,.3gp,.f4v,.m4v`;
+    public _allowedAudioExtensions = `.flv,.asf,.qt,.mov,.mpg,.avi,.wmv,.mp3,.wav`;
+
+    public _allowedExtensions: string;
 
     constructor(private _appLocalization: AppLocalization,
                 private _logger: KalturaLogger,
@@ -42,10 +52,37 @@ export class ReplaceMediaButtonComponent {
             && this._permissionsService.hasPermission(KMCPermissions.DROPFOLDER_CONTENT_INGEST_DROP_FOLDER_DELETE);
     }
 
+    ngOnInit() {
+        if (!this.entry) {
+            this._logger.info(`No entry provided, abort initialization`);
+            return;
+        }
+
+        if (this.entry.mediaType === KalturaMediaType.video) {
+            this._allowedExtensions = this._allowedVideoExtensions;
+        } else if (this.entry.mediaType === KalturaMediaType.audio) {
+            this._allowedExtensions = this._allowedAudioExtensions;
+        }
+    }
+
     public _openReplacementMenu(type: UploadMenuType): void {
         this._logger.info(`handle open replacement menu action by user`, { type });
         this._replaceType = type;
         this._uploadMenu.open();
     }
+
+    public _handleSelectedFiles(files: FileList): void {
+        const newItems = Array.from(files).map(file => {
+            const { name, size } = file;
+            return { file, name, size };
+        });
+
+        this._logger.info(`handle file selected action by user`, { fileNames: newItems.map(({ name }) => name) });
+
+        this._files = [...this._files, ...newItems];
+
+        this._replaceType = 'upload';
+        this._uploadMenu.open();
+    }
 }
 

src/applications/kmc-upload-app/upload-button/upload-button.component.html

@@ -1,4 +1,4 @@
-<button pButton [disabled]="disabled"
+<button pButton [disabled]="_disabled"
         label="{{'app.titles.create' | translate | uppercase}}"
         class="kButtonDefault kUploadBtn"
         (click)="uploadmenu.open()"></button>
@@ -12,7 +12,10 @@
 
 <kPopupWidget #uploadsettings [popupWidth]="791" [popupHeight]="607" [closeBtn]="true" [modal]="true" [preventPageScroll]="true">
   <ng-template>
-    <kKMCUploadSettings [parentPopupWidget]="uploadsettings"></kKMCUploadSettings>
+    <kKMCUploadSettings [files]="_files"
+                        [fileDialog]="fileDialog"
+                        [parentPopupWidget]="uploadsettings"
+                        (clearSelectedFiles)="_files = []"></kKMCUploadSettings>
   </ng-template>
 </kPopupWidget>
 
@@ -29,3 +32,8 @@
     <kCreateLive [parentPopupWidget]="createLive"></kCreateLive>
   </ng-template>
 </kPopupWidget>
+
+<kFileDialog #fileDialog
+             [filter]="_allowedExtensions"
+             [allowMultiple]="true"
+             (onFileSelected)="_handleSelectedFiles($event)"></kFileDialog>