@yuuvis/media-viewer

Table of Contents

• Installation
• Usage
  • General use
  • AUDIO
    • Supported Types
    • How to use
  • EMAIL
    • Supported Types
    • How to use Email Viewer
  • IMAGE
    • Supported Types
    • How to use Image Viewer
  • OFFICE
    • Supported Types
    • How to use Office Viewer
  • PDF
    • Supported Types
    • How to use PDF Viewer
  • TEXT
    • Supported Types
    • How to use Text Viewer
  • VIDEO
    • Supported Types
    • How to use Video Viewer
• Extend / Customize Viewer
  • Types
  • Override Default Viewer
  • Reset to Default Viewer
  • Override Supported Types
  • Extend Supported Types
• Schematics
• Development
  • Extend config via provider
• License

Installation

Install the package using npm:

npm install @yuuvis/media-viewer --save

Usage

This library provides multiple viewers for displaying various media types based on their MIME types.

General Use

This is a convenience wrapper for all types that selects the appropriate viewer based on the provided type.

{
  type: string | unknown; // Required
  id: string; // Required
  metadata: T;
  src: string | null;
}

import { YuvMediaViewerComponent } from '@yuuvis/media-viewer';

@Component({
  ...
  imports: [YuvMediaViewerComponent],
  template: `<yuv-media-viewer [id]="id()" [src]="src()" [type]="type()" [metadata]="metadata()"></yuv-media-viewer>`
})
...
id = signal(UUID);
src = signal('https://path.to.the.document.com');
type = signal('application/vnd.openxmlformats-officedocument.wordprocessingml.document');
metadata = signal({});

AUDIO

Audio playback is handled using the native HTMLAudioElement, enhanced with a visualizer.

Supported Types

{
  "mimeType": ["audio/mp3", "audio/webm", "audio/ogg", "audio/mpeg"],
  "type": "AUDIO"
}

How to Use Audio Viewer

ImageMetadata {
  mode?: 'oscilloscope' | 'frequency';
} // Default: 'frequency'

{
  type: string;
  id: string; // Required
  metadata: AudioMetadata;
  src: string; // Required
}

import { AudioComponent } from '@yuuvis/media-viewer';

@Component({
  ...
  imports: [AudioComponent],
  template: `<yuv-audio [id]="id()" [src]="src()" [type]="type()"></yuv-audio>`
})
...
id = signal(UUID);
src = signal('source');
type = signal('audio/mp3');

EMAIL

The UI renders the parsed email and allows users to select and view attachments (beta).

Supported Types

{
  "mimeType": ["message/rfc822", "application/vnd.ms-outlook"],
  "type": "EMAIL"
}

How to use Email Viewer

EmailMetadata {
  type: 'EMAIL';
  header: Email;
  attachments: string[];
  theme: string;
}

{
  type: string;
  id: string; // Required
  metadata: EmailMetadata;
  src: string; // Required
}

import { MailComponent } from '@yuuvis/media-viewer';

@Component({
  ...
  imports: [MailComponent],
  template: `<yuv-mail [id]="id()" [src]="src()" [type]="type()" [metadata]="metadata()"></yuv-mail>`
})
...
id = signal(UUID);
src = signal('source');
type = signal('message/rfc822');
metadata = signal(this.emailMetadata);

IMAGE

The image leverages the native HTMLImageElement and extends it with zoom and rotate capabilities, while also incorporating accessibility features.

Supported Types

{
  "mimeType": ["image/tiff", "image/jpeg", "image/png", "image/apng", "image/gif", "image/svg+xml", "image/webp"],
  "type": "IMAGE"
}

How to use Image Viewer

{
  type: string;
  id: string; // Required
  metadata: T;
  src: string; // Required
}

import { ImageComponent } from '@yuuvis/media-viewer';

@Component({
  ...
  imports: [ImageComponent],
  template: `<yuv-image [id]="id()" [src]="src()" [type]="type()" [metadata]="metadata()"></yuv-image>`
})
...
id = signal(UUID);
src = signal('source');
type = signal('image/jpeg');
metadata = signal({ disableMenu: false })

OFFICE

To properly use the Office viewer, a backend integrated with an MS Office 365 solution is required.

Supported Types

{
  "mimeType": [
    "application/msword",
    "application/vnd.ms-excel",
    "application/vnd.ms-powerpoint",
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    "application/vnd.openxmlformats-officedocument.wordprocessingml.template",
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    "application/vnd.openxmlformats-officedocument.spreadsheetml.template",
    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
    "application/vnd.openxmlformats-officedocument.presentationml.template",
    "application/vnd.openxmlformats-officedocument.presentationml.slideshow",
    "application/vnd.ms-word.document.macroEnabled.12",
    "application/vnd.ms-word.template.macroEnabled.12",
    "application/vnd.ms-excel.sheet.macroEnabled.12",
    "application/vnd.ms-excel.template.macroEnabled.12",
    "application/vnd.ms-excel.addin.macroEnabled.12",
    "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
    "application/vnd.ms-powerpoint.addin.macroEnabled.12",
    "application/vnd.ms-powerpoint.presentation.macroEnabled.12",
    "application/vnd.ms-powerpoint.template.macroEnabled.12",
    "application/vnd.ms-powerpoint.slideshow.macroEnabled.12"
  ],
  "type": "OFFICE"
}

How to use Office Viewer

OfficeMetadata {
  type: 'office';
  id: string;
  dmsObject: Record<string, unknown>;
  editable?: boolean;
  user: MetadatUser;
}

{
  type: string;
  id: string(required);
  metadata: OfficeMetadata;
  src: string(required);
}

import { OfficeComponent } from '@yuuvis/media-viewer';

@Component({
  ...
  imports: [OfficeComponent],
  template: `<yuv-office [id]="id()" [src]="src()" [type]="type()" [metadata]="metadata()"></yuv-office>`
})
...
id = signal(UUID)
src = signal('source')
type = signal('application/vnd.openxmlformats-officedocument.wordprocessingml.document')
metadata = signal({id:UUID,dmsObject:dmsObject, user:currentUser})

PDF

The PDF viewer is powered by ngx-extended-pdf-viewer.

Supported Types

{
  "mimeType": ["application/pdf"],
  "type": "PDF"
}

How to use PDF Viewer

{
  type: string;
  id: string(required);
  metadata: PdfMetadata;
  src: string(required);
}

import { PdfComponent } from '@yuuvis/media-viewer';

@Component({
  ...
  imports: [PdfComponent],
  template: `<yuv-pdf [id]="id()" [src]="src()" [type]="type()" [metadata]="metadata()"></yuv-pdf>`,
})
...
id = signal(UUID)
src = signal('source')
type = signal('application/pdf')
metadata = signal({theme:'dark'})

// You might need to add
{
  "glob": "**/*",
  "input": "node_modules/ngx-extended-pdf-viewer/bleeding-edge/",
  "output": "/bleeding-edge/"
}

TEXT

The Text viewer is powered by ngx-monaco-editor-v2

Supported Types

{
  "mimeType": [
    "application/json",
    "text/plain",
    "text/xml",
    "text/java",
    "text/javascript",
    "application/javascript",
    "text/html",
    "text/markdown",
    "text/x-web-markdown",
    "text/x-markdown"
  ],
  "type": "TEXT"
}

How to use Text Viewer

{
  type: string;
  id: string(required);
  metadata: {
    theme: 'light';
  }
  src: string(required);
}

import { TextComponent } from '@yuuvis/media-viewer';

@Component({
  ...
  imports: [TextComponent],
  template: `<yuv-text [id]="id()" [src]="src()" [type]="type()" [metadata]="metadata()"></yuv-text>`,
})
...
id = signal(UUID)
src = signal('source')
type = signal('text/xml')
metadata = signal({theme:'dark'})

VIDEO

Video utilizes the native HTMLVideoElement.

Supported Types

{
  "mimeType": ["video/mp4", "video/webm", "video/ogg", "application/ogg"],
  "type": "VIDEO"
}

How to use Video Viewer

{
  id: string(required);
  src: string(required);
  type: string;
}

import { VideoComponent } from '@yuuvis/media-viewer';

@Component({
  ...
  imports: [VideoComponent],
  template: `<yuv-video [id]="id()" [src]="src()" [type]="type()"></yuv-video>`,
})
...
id = signal(UUID)
src = signal('source')
type = signal('video/mp4')

Extend / Customize Viewer

Types

Array<{ mimeType: Array<sting>; text: string }>;

Override default viewer

If you prefer to use your own viewer for a specific type, you can override the default configuration as shown below:

import { MediaViewerService } from '@yuuvis/media-viewer';
...
readonly #mediaViewerService = inject(MediaViewerService);

constructor() {
  this.#mediaViewerService.setCustomViewer([{'AUDIO': MyCustomImageViewerComponent}]);
}

Reset to Default Viewer

import { MediaViewerService } from '@yuuvis/media-viewer';
...
readonly #mediaViewerService = inject(MediaViewerService);

constructor() {
  this.#mediaViewerService.resetViewers();
}

Override Supported Types

To customize the supported MIME types for a specific type, you can override the default configuration.

import { MediaViewerService } from '@yuuvis/media-viewer';
...
readonly #mediaViewerService = inject(MediaViewerService);

constructor() {
  this.#mediaViewerService.setViewers({
    mimeType: ['image/jpeg', 'image/png'],
    type: 'IMAGE'
  });
}

Extend Supported Types

If you have a custom media type, you can easily add it to the configuration.

import { MediaViewerService } from '@yuuvis/media-viewer';
...
readonly #mediaViewerService = inject(MediaViewerService);

constructor() {
  this.#mediaViewerService.setViewers({
    mimeType: ['fancy/stuff'],
    type: 'FANCY'
  });
  this.#mediaViewerService.setCustomViewer([{'FANCY': MyFancyViewerComponent}]);
}

or

import { MediaViewerService } from '@yuuvis/media-viewer';
...
readonly #mediaViewerService = inject(MediaViewerService);

constructor() {
  this.#mediaViewerService.extendViewer<MyFancyViewerComponent>({ mimeType: ['fancy/stuff'], type: 'FANCY' }, MyFancyViewerComponent );
}

Development

Extend config via Provider

For development, you can set the configuration globally. For the Office viewer, you must specify the path to the Office 365 instance.

provideMediaViewer(environment, { office: { defaultHost: 'https://path.to.office-365.org' } });

License

MIT