npm package: @mindbowser_inc/ng-ineers-file-viewer
Description: A versatile Angular library for viewing documents, images, and audio/video files directly within your Angular application. This library supports a variety of file types and offers customizable configurations.
Latest version: 1.1.2

# Angular Document, Image, and Audio/Video Viewer Library

A versatile Angular library for viewing documents, images, and audio/video files directly within your Angular application. This library supports a variety of file types and offers customizable configurations.

## Features

- **Document Viewer:** Supports public and private documents using Google, Office, PDF, and Mammoth viewers.
- **Image Viewer:** Displays images with customizable buttons, zoom functionality, and keyboard navigation.
- **Audio/Video Viewer:** Simple and efficient way to embed and play audio or video files.

## Installation

Install the library via npm:

```bash
npm install @mindbowser_inc/ng-ineers-file-viewer --save
```

Getting Started

1. Import Modules
   Add the necessary modules to your app module:

```bash
import { DocViewerModule, ImageViewerModule, AudioVideoViewer } from '@mindbowser_inc/ng-ineers-file-viewer';

@NgModule({
  imports: [
    DocViewerModule,
    ImageViewerModule,
    AudioVideoViewer
  ],
})
export class AppModule {}
```

2. Usage
   Document Viewer
   To display a document:

```bash
<doc-viewer
  [url]="docUrl"
  viewer="google"
  style="width:100%;height:50vh;">
</doc-viewer>
```

Inputs:

url: The document URL.
viewer: Choose from 'google' (default), 'office', 'mammoth', 'pdf', or 'url'.
Image Viewer
To display images:

```bash
<image-viewer [src]="imageUrls" [(index)]="currentIndex"></image-viewer>
```

Optional Configuration:

```bash
const config = {
  btnClass: 'default',
  zoomFactor: 0.1,
  allowFullscreen: true,
  allowKeyboardNavigation: true,
  btnIcons: {
    zoomIn: 'fa fa-plus',
    zoomOut: 'fa fa-minus',
    next: 'fa fa-arrow-right',
    prev: 'fa fa-arrow-left',
    fullscreen: 'fa fa-arrows-alt',
  }
};
```

Audio/Video Viewer
To display audio:

```bash
<audio-video-viewer [url]="audioUrl" viewer="audio"></audio-video-viewer>
```

To display video:

```bash
<audio-video-viewer [url]="videoUrl" viewer="video"></audio-video-viewer>
```

## File Type Support

#### Public Document Viewer
#### Google Viewer: 
Supports .doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf.

#### Office Viewer: 
Supports .doc, .docx, .xls, .xlsx, .ppt, .pptx.

#### Image Viewer
Supports all standard image formats including .jpg, .jpeg, .png, .gif.
Audio/Video Viewer

#### Audio Video Viewer

Supports standard audio formats like .mp3, .wav and video formats like .mp4, .avi.

### Blob Support with Mammoth
For viewing .docx files from blob using Mammoth, you can directly use the convertToHtml function integrated into the package.

For .docx files, install Mammoth:

```bash
npm install mammoth --save
```

Include mammoth.browser.min.js in angular.json:

```bash
"scripts": [
  "node_modules/mammoth/mammoth.browser.min.js"
]
```
#### Example Usage:
```bash
<doc-viewer
  viewer="mammoth"
  [url]="blobUrl"
  style="width:100%;height:50vh;">
</doc-viewer>
```


Custom Viewer Example
For external document viewers:

```bash
<doc-viewer
  [viewerUrl]="'https://docs.google.com/gview?url=%URL%&embedded=true'"
  [url]="'https://example.com/sample.doc'"
  viewer="url"
  style="width:100%;height:50vh;">
</doc-viewer>

```

Contributions are welcome! Please open an issue or submit a pull request with your improvements or suggestions.