@yuuvis/media-viewer
v2.0.11
Published
  
Readme
@yuuvis/media-viewer
Table of Contents
Installation
Install the package using npm:
npm install @yuuvis/media-viewer --saveUsage
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');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})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 );
}Styling
If You want to customise some aspects of the viewer you can so by importing the media-viewer styles.
@use '@yuuvis/media-viewer/scss';Style Tokens
--ymv-text-color-subtle: light-dark(#5b5e65, #a8abb2);
--ymv-surface: light-dark(#f8f9ff, #101419);
--ymv-outline-variant: light-dark(#e0e2ea, #2d3136);
--ymv-surface-frame:light-dark(#ebeef5, #1c2025)
--ymv-primary: light-dark(#13629d, #9ccaff);
--ymv-current-background: light-dark(#ebeef5, #1c2025);
--ymv-hover-background: light-dark(#f1f3fb, #181c21);
--ymv-text-color: light-dark(#181c21, #e0e2ea);
--ymv-success: light-dark(#006b54, #9ee3b5);
--ymv-progress-color: light-dark(hsl(290, 88%, 67%), #ad2c98);
--ymv-progress-blend-color: light-dark(hsl(290, 88%, 67%), #ad2c98);
--ymv-spacing-xs: 0.5rem;
--ymv-sizing-s: 1.25rem;
--ymv-sizing-l: 1.75rem;
--ymv-border-radius: 50%;
--ymv-font-subhead: 700 0.875rem / 1.4 sans-serif;
--ymv-icon-color: light-dark(#181c21, #e0e2ea);
--ymv-icon-color-disabled: light-dark(#7e868f, #a8adb4);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.
export const environment = {
production: false,
mediaviewer: { office: { path: 'https://path.to.office-365.org' } }
};provideMediaViewer(environment.mediaviewer);License
MIT