@mindbowser_inc/ng-ineers-file-viewer

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:

npm install @mindbowser_inc/ng-ineers-file-viewer --save

Getting Started

1. Import Modules Add the necessary modules to your app module:

import { DocViewerModule, ImageViewerModule, AudioVideoViewer } from '@mindbowser_inc/ng-ineers-file-viewer';

@NgModule({
  imports: [
    DocViewerModule,
    ImageViewerModule,
    AudioVideoViewer
  ],
})
export class AppModule {}

1. Usage Document Viewer To display a document:

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

<image-viewer [src]="imageUrls" [(index)]="currentIndex"></image-viewer>

Optional Configuration:

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:

<audio-video-viewer [url]="audioUrl" viewer="audio"></audio-video-viewer>

To display video:

<audio-video-viewer [url]="videoUrl" viewer="video"></audio-video-viewer>

File Type Support

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 Supports standard audio formats like .mp3, .wav and video formats like .mp4, .avi. Additional Configuration Mammoth Viewer For .docx files, install Mammoth:

npm install mammoth --save

Include mammoth.browser.min.js in angular.json:

"scripts": [
  "node_modules/mammoth/mammoth.browser.min.js"
]

Custom Viewer Example For external document viewers:

<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 Contributions are welcome! Please open an issue or submit a pull request with your improvements or suggestions.

License This project is licensed under the MIT License.

This README.md is well-structured for GitHub, providing clear instructions for installation, usage, and configuration, along with information on supported file types and how to contribute.