@mindbowser_inc/ng-ineers-file-viewer - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

package.json

 {
   "name": "@mindbowser_inc/ng-ineers-file-viewer",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "peerDependencies": {
@@ -5,0 +5,0 @@ "@angular/common": "^17.3.0",

README.md

@@ -1,24 +0,151 @@
-# NgIneersFileViewer
+# Angular Document, Image, and Audio/Video Viewer Library
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.
+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.
 
-## Code scaffolding
+## Features
 
-Run `ng generate component component-name --project ng-ineers-file-viewer` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-ineers-file-viewer`.
-> Note: Don't forget to add `--project ng-ineers-file-viewer` or else it will be added to the default project in your `angular.json` file. 
+- **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.
 
-## Build
+## Installation
 
-Run `ng build ng-ineers-file-viewer` to build the project. The build artifacts will be stored in the `dist/` directory.
+Install the library via npm:
 
-## Publishing
+```bash
+npm install @mindbowser_inc/ng-ineers-file-viewer --save
+```
 
-After building your library with `ng build ng-ineers-file-viewer`, go to the dist folder `cd dist/ng-ineers-file-viewer` and run `npm publish`.
+Getting Started
 
-## Running unit tests
+1. Import Modules
+   Add the necessary modules to your app module:
 
-Run `ng test ng-ineers-file-viewer` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```bash
+import { DocViewerModule, ImageViewerModule, AudioVideoViewer } from '@mindbowser_inc/ng-ineers-file-viewer';
 
-## Further help
+@NgModule({
+  imports: [
+    DocViewerModule,
+    ImageViewerModule,
+    AudioVideoViewer
+  ],
+})
+export class AppModule {}
+```
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+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 blobs 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
+Contributions are welcome! Please open an issue or submit a pull request with your improvements or suggestions.
+
+
+

No alert changes

Improved metrics

Total package byte prevSize

250546

increased by0.93%

Number of lines in readme file

152

increased by508%

No dependency changes