[ATS-854] Add media tracks to player from webvtt rendition (#6626)

* ATS-854 Add media tracks to player from webvtt rendition

* ATS-854 Fix condition

* ATS-854 Fix lint

* ATS-854 Move logic to media player

* ATS-854 Fix angular.json

* ATS-854 Fix error

lib/core/viewer/components/media-player.component.html

@@ -1,3 +1,4 @@
 <video controls>
     <source [src]="urlFile" [type]="mimeType" (error)="onMediaPlayerError()"/>
+    <track *ngFor="let track of tracks" [kind]="track.kind" [label]="track.label" [srclang]="track.srclang" [src]="track.src"/>
 </video>

lib/core/viewer/components/media-player.component.spec.ts

@@ -0,0 +1,108 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SimpleChange, SimpleChanges } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { MediaPlayerComponent } from './media-player.component';
+import { setupTestBed } from '../../testing/setup-test-bed';
+import { CoreTestingModule } from '../../testing/core.testing.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { AlfrescoApiServiceMock } from '../../mock/alfresco-api.service.mock';
+import { AlfrescoApiService } from '../../services';
+import { NodeEntry } from '@alfresco/js-api';
+
+describe('Test Media player component ', () => {
+
+    let component: MediaPlayerComponent;
+    let fixture: ComponentFixture<MediaPlayerComponent>;
+    let alfrescoApiService: AlfrescoApiService;
+    let change: SimpleChanges;
+
+    setupTestBed({
+        imports: [
+            TranslateModule.forRoot(),
+            CoreTestingModule
+        ],
+        providers: [
+            { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock }
+        ]
+    });
+
+    describe('Media tracks', () => {
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(MediaPlayerComponent);
+            alfrescoApiService = TestBed.inject(AlfrescoApiService);
+            change = { nodeId: new SimpleChange(null, 'nodeId', true) };
+
+            component = fixture.componentInstance;
+            component.urlFile = 'http://fake.url';
+            fixture.detectChanges();
+        });
+
+        it('should generate tracks for media file when webvtt rendition exists', fakeAsync(() => {
+            const fakeRenditionUrl = 'http://fake.rendition.url';
+            spyOn(alfrescoApiService.nodesApi, 'getNode').and.returnValues(
+                Promise.resolve(new NodeEntry({ entry: { name: 'file1', content: {} } }))
+            );
+            spyOn(alfrescoApiService.renditionsApi, 'getRenditions').and.returnValues(
+                { list: { entries: [{ entry: { id: 'webvtt', status: 'CREATED' } }] } }
+            );
+            spyOn(alfrescoApiService.contentApi, 'getContentUrl').and.returnValues('http://iam-fake.url');
+            spyOn(alfrescoApiService.contentApi, 'getRenditionUrl').and.returnValue(fakeRenditionUrl);
+
+            component.ngOnChanges(change);
+            tick();
+            fixture.detectChanges();
+            expect(component.tracks).toEqual([{ src: fakeRenditionUrl, kind: 'subtitles', label: 'ADF_VIEWER.SUBTITLES' }]);
+        }));
+
+        it('should not generate tracks for media file when webvtt rendition is not created', fakeAsync(() => {
+            spyOn(alfrescoApiService.nodesApi, 'getNode').and.returnValues(
+                Promise.resolve(new NodeEntry({ entry: { name: 'file1', content: {} } }))
+            );
+
+            spyOn(alfrescoApiService.renditionsApi, 'getRenditions').and.returnValues(
+                { list: { entries: [{ entry: { id: 'webvtt', status: 'NOT_CREATED' } }] } }
+            );
+
+            spyOn(alfrescoApiService.contentApi, 'getContentUrl').and.returnValues('http://iam-fake.url');
+
+            component.ngOnChanges(change);
+            tick();
+            fixture.detectChanges();
+            expect(component.tracks.length).toBe(0);
+        }));
+
+        it('should not generate tracks for media file when webvtt rendition does not exist', fakeAsync(() => {
+            spyOn(alfrescoApiService.nodesApi, 'getNode').and.returnValues(
+                Promise.resolve(new NodeEntry({ entry: { name: 'file1', content: {} } }))
+            );
+
+            spyOn(alfrescoApiService.renditionsApi, 'getRenditions').and.returnValues(
+                { list: { entries: [] } }
+            );
+
+            spyOn(alfrescoApiService.contentApi, 'getContentUrl').and.returnValues('http://iam-fake.url');
+
+            component.ngOnChanges(change);
+            tick();
+            fixture.detectChanges();
+            expect(component.tracks.length).toBe(0);
+        }));
+    });
+});

lib/core/viewer/components/media-player.component.ts

@@ -17,6 +17,8 @@
 
 import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
 import { ContentService } from '../../services/content.service';
+import { Track } from '../models/viewer.model';
+import { ViewUtilService } from '../services/view-util.service';
 
 @Component({
     selector: 'adf-media-player',
@@ -39,18 +41,31 @@ export class MediaPlayerComponent implements OnChanges {
     @Input()
     nameFile: string;
 
+    @Input()
+    nodeId: string;
+
+    @Input()
+    tracks: Track[] = [];
+
     @Output()
     error = new EventEmitter<any>();
 
-    constructor(private contentService: ContentService ) {}
+    constructor(private contentService: ContentService, private viewUtils: ViewUtilService) {
+    }
 
     ngOnChanges(changes: SimpleChanges) {
         const blobFile = changes['blobFile'];
+        const nodeId = changes['nodeId'];
+
         if (blobFile && blobFile.currentValue) {
             this.urlFile = this.contentService.createTrustedUrl(this.blobFile);
             return;
         }
 
+        if (nodeId && nodeId.currentValue) {
+            this.viewUtils.generateMediaTracks(this.nodeId).then((tracks) => this.tracks = tracks);
+        }
+
         if (!this.urlFile && !this.blobFile) {
             throw new Error('Attribute urlFile or blobFile is required');
         }

lib/core/viewer/components/viewer.component.html

@@ -225,6 +225,7 @@
                         <ng-container *ngSwitchCase="'media'">
                             <adf-media-player id="adf-mdedia-player"
                                               [urlFile]="urlFileContent"
+                                              [nodeId]="nodeEntry?.entry?.id"
                                               [mimeType]="mimeType"
                                               [blobFile]="blobFile"
                                               [nameFile]="displayName"