inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Pablo Martinez Garcia
2021-02-08 10:49:09 +01:00
committed by GitHub
parent e0462b126a
commit 5d8d5f56f3
8 changed files with 190 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
lib/core/i18n/en.json
View File

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

1
lib/core/viewer/components/media-player.component.html
View File

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

108
lib/core/viewer/components/media-player.component.spec.ts Normal file
View File

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

17
lib/core/viewer/components/media-player.component.ts
View File

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

1
lib/core/viewer/components/viewer.component.html
View File

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

23
lib/core/viewer/models/viewer.model.ts Normal file
View File

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

2
lib/core/viewer/public-api.ts
View File

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

39
lib/core/viewer/services/view-util.service.ts
View File

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