@mindbowser_inc/ng-ineers-file-viewer
Advanced tools
Comparing version 1.0.6 to 1.0.7
{ | ||
"name": "@mindbowser_inc/ng-ineers-file-viewer", | ||
"version": "1.0.6", | ||
"version": "1.0.7", | ||
"peerDependencies": { | ||
@@ -10,21 +10,5 @@ "@angular/common": "^17.3.0", | ||
"@mindbowser_inc/ng-ineers-file-viewer": "file:", | ||
"docviewhelper": "^0.0.2", | ||
"mammoth": "^1.8.0", | ||
"screenfull": "^6.0.2", | ||
"ng-ineers-file-viewer": "file:", | ||
"tslib": "^2.3.0" | ||
}, | ||
"repository": { | ||
"url": "https://bitbucket.org/Mindbowser/ng-ineers-file-viewer" | ||
}, | ||
"keywords": [ | ||
"amgular", | ||
"image-viewer", | ||
"audio-viewer-viewer", | ||
"image-loader", | ||
"image-fullscreen", | ||
"loader", | ||
"image", | ||
"angular-image", | ||
"doc-viewer" | ||
], | ||
"sideEffects": false, | ||
@@ -31,0 +15,0 @@ "module": "fesm2022/ng-ineers-file-viewer.mjs", |
153
README.md
@@ -1,151 +0,24 @@ | ||
# Angular Document, Image, and Audio/Video Viewer Library | ||
# NgIneersFileViewer | ||
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. | ||
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0. | ||
## Features | ||
## Code scaffolding | ||
- **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. | ||
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. | ||
## Installation | ||
## Build | ||
Install the library via npm: | ||
Run `ng build ng-ineers-file-viewer` to build the project. The build artifacts will be stored in the `dist/` directory. | ||
```bash | ||
npm install @mindbowser_inc/ng-ineers-file-viewer --save | ||
``` | ||
## Publishing | ||
Getting Started | ||
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`. | ||
1. Import Modules | ||
Add the necessary modules to your app module: | ||
## Running unit tests | ||
```bash | ||
import { DocViewerModule, ImageViewerModule, AudioVideoViewer } from '@mindbowser_inc/ng-ineers-file-viewer'; | ||
Run `ng test ng-ineers-file-viewer` to execute the unit tests via [Karma](https://karma-runner.github.io). | ||
@NgModule({ | ||
imports: [ | ||
DocViewerModule, | ||
ImageViewerModule, | ||
AudioVideoViewer | ||
], | ||
}) | ||
export class AppModule {} | ||
``` | ||
## Further help | ||
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. | ||
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. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
5
248232
1791
25
+ Addedng-ineers-file-viewer@file:
- Removeddocviewhelper@^0.0.2
- Removedmammoth@^1.8.0
- Removedscreenfull@^6.0.2
- Removed@xmldom/xmldom@0.8.10(transitive)
- Removedargparse@1.0.10(transitive)
- Removedbase64-js@1.5.1(transitive)
- Removedbluebird@3.4.7(transitive)
- Removedcore-util-is@1.0.3(transitive)
- Removeddingbat-to-unicode@1.0.1(transitive)
- Removeddocviewhelper@0.0.2(transitive)
- Removedduck@0.1.12(transitive)
- Removedimmediate@3.0.6(transitive)
- Removedinherits@2.0.4(transitive)
- Removedisarray@1.0.0(transitive)
- Removedjszip@3.10.1(transitive)
- Removedlie@3.3.0(transitive)
- Removedlop@0.4.2(transitive)
- Removedmammoth@1.8.0(transitive)
- Removedoption@0.2.4(transitive)
- Removedpako@1.0.11(transitive)
- Removedpath-is-absolute@1.0.1(transitive)
- Removedprocess-nextick-args@2.0.1(transitive)
- Removedreadable-stream@2.3.8(transitive)
- Removedsafe-buffer@5.1.2(transitive)
- Removedscreenfull@6.0.2(transitive)
- Removedsetimmediate@1.0.5(transitive)
- Removedsprintf-js@1.0.3(transitive)
- Removedstring_decoder@1.1.1(transitive)
- Removedunderscore@1.13.7(transitive)
- Removedutil-deprecate@1.0.2(transitive)
- Removedxmlbuilder@10.1.1(transitive)