[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/i18n/en.json

@@ -376,7 +376,8 @@
       "CLOSE": "Close",
       "PLACEHOLDER": "Password",
       "ERROR": "Password is wrong"
-    }
+    },
+    "SUBTITLES": "Subtitles"
   },
   "ERROR_CONTENT": {
     "UNKNOWN": {

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"

lib/core/viewer/models/viewer.model.ts

@@ -0,0 +1,23 @@
+/*!
+ * @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.
+ */
+
+export interface Track {
+    src: string;
+    label?: string;
+    kind?: string;
+    srclang?: string;
+}

lib/core/viewer/public-api.ts

@@ -36,3 +36,5 @@ export * from './components/viewer.component';
 export * from './directives/viewer-extension.directive';
 
 export * from './viewer.module';
+
+export * from './models/viewer.model';

lib/core/viewer/services/view-util.service.ts

@@ -20,6 +20,8 @@ import { RenditionEntry, RenditionPaging } from '@alfresco/js-api';
 import { AlfrescoApiService } from '../../services/alfresco-api.service';
 import { LogService } from '../../services/log.service';
 import { Subject } from 'rxjs';
+import { Track } from '../models/viewer.model';
+import { TranslationService } from '../../services/translation.service';
 
 @Injectable({
     providedIn: 'root'
@@ -31,7 +33,7 @@ export class ViewUtilService {
      * Content groups based on categorization of files that can be viewed in the web browser. This
      * implementation or grouping is tied to the definition the ng component: ViewerComponent
      */
-        // tslint:disable-next-line:variable-name
+    // tslint:disable-next-line:variable-name
     static ContentGroup = {
         IMAGE: 'image',
         MEDIA: 'media',
@@ -39,6 +41,12 @@ export class ViewUtilService {
         TEXT: 'text'
     };
 
+    /**
+     * The name of the rendition with the media subtitles in the supported format
+     */
+    /* tslint:disable-next-line */
+    static SUBTITLES_RENDITION_NAME = 'webvtt';
+
     /**
      * Based on ViewerComponent Implementation, this value is used to determine how many times we try
      * to get the rendition of a file for preview, or printing.
@@ -67,7 +75,8 @@ export class ViewUtilService {
     urlFileContentChange: Subject<string> = new Subject<string>();
 
     constructor(private apiService: AlfrescoApiService,
-                private logService: LogService) {
+                private logService: LogService,
+                private translateService: TranslationService) {
     }
 
     /**
@@ -294,4 +303,30 @@ export class ViewUtilService {
         this.urlFileContentChange.next(urlFileContent);
     }
 
+    async generateMediaTracks(nodeId: string): Promise<Track[]> {
+        return this.isRenditionAvailable(nodeId, ViewUtilService.SUBTITLES_RENDITION_NAME)
+            .then((value) => {
+                const tracks = [];
+                if (value) {
+                    tracks.push({
+                        kind: 'subtitles',
+                        src: this.apiService.contentApi.getRenditionUrl(nodeId, ViewUtilService.SUBTITLES_RENDITION_NAME),
+                        label: this.translateService.instant('ADF_VIEWER.SUBTITLES')
+                    });
+                }
+                return tracks;
+            })
+            .catch((err) => {
+                this.logService.error('Error while retrieving ' + ViewUtilService.SUBTITLES_RENDITION_NAME + ' rendition');
+                this.logService.error(err);
+                return [];
+            });
+    }
+
+    private async isRenditionAvailable(nodeId: string, renditionId: string): Promise<boolean> {
+        const renditionPaging: RenditionPaging = await this.apiService.renditionsApi.getRenditions(nodeId);
+        const rendition: RenditionEntry = renditionPaging.list.entries.find((renditionEntry: RenditionEntry) => renditionEntry.entry.id.toLowerCase() === renditionId);
+
+        return rendition?.entry?.status?.toString() === 'CREATED' || false;
+    }
 }