@talrace/ngx-media

NgxMedia

Description

NgxMedia is a npm package that allows you to add media window that will open image, audio, video or pdf.

Installation

Add NgxMediaModule to your AppModule:

...
import { NgxMediaModule } from '@talrace/ngx-media';
...

@NgModule({
    ...
    imports: [
        ...
        NgxMediaModule,
        ...
    ],
    ...
})
export class AppModule {}

Usage

...
import { LightboxMediaDialogComponent, OverlayService } from '@talrace/ngx-media';
...

@Component({
    ...
})
export class AppComponent {

    constructor(private overlayService: OverlayService) {}

    showMedia(): void {
        this.overlayService.open(LightboxMediaDialogComponent, {
            data: {
                file: {
                    name: 'image',
                    source: 'assets/images/sample.png',
                    fileType: FileEntryType.Image
                }
            }
        });
    }
}

FileService Injection

You can provide service that will override default file service methods.

Example:

import { IMediaDataService } from '@talrace/ngx-media';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class CustomDataService implements IMediaDataService {
    isMobile = (/iPad|iPhone|iPod|Android/.test(navigator.userAgent) && !window['MSStream']) || window.innerWidth <= 1440;

    loadFile(url: string): Observable<any> {
        //implementation
    }
    downloadFile(url: string, fileName: string, mimeType: string): void {
        //implementation
    }
    downloadBlob(url: string): Observable<Blob> {
        //implementation
    }

}

Injection:

...
import { NgxMediaModule } from '@talrace/ngx-media';
...
import { CustomDataService } from '...';
...

@NgModule({
    ...
    imports: [
        ...
        NgxMediaModule.forRoot({
            dataService: CustomDataService
        }),
        ...
    ],
    ...
})
export class AppModule {}