@k3imagine/media v0.0.46

Media Item Selector

This library was generated with Angular CLI version 11.0.5.

To implement the media module into an Angular project, you will need to:

Install:

To install the package,  run: npm i @k3imagine/media

Setup:

Include the library in your module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MediaModule } from '@k3imagine/media';  // <-- import it
import { AppComponent } from './app.component';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, MediaModule], // <-- and include it
bootstrap: [AppComponent],
})
export class MyAppModule {}

Usage:

 <lib-image-media-item-selector
          [useMockDataWheninDev]="false"
          [isMasterItemId]="true"
          [itemId]="null"
          [preloadImages]="currentState.mediaImages"
          (response)="imageMediaResponse($event)"
        >
</lib-image-media-item-selector>


[useMockDataWheninDev] only comes into effect when running in 
dev mode. If set to 'true', mock data will be used. If its set to 'false',
then you can use the gateway running locally to return the data.


[isMasterItemId] The image selector can use masterItemId or ItemId (matrix items)


[itemId] This can be usefull if you dont know the item id at the point of item creation.
The module will store the image selections and you can call the update routine directly, or supply
the itemId which will auto update via the module

Below we call the 'updateImageList' method once we have an itemId

constructor(
private mediaModule: MediaModule,

 private saveImagesFromState(itemId: number): void {
    if (this.itemCreationService.getCurrentState().mediaImages) {
    this.mediaModule.updateImageList(
        this.itemCreationService.getCurrentState().mediaImages,
        itemId,
        true
    );
    }
}


[preloadImages] is usefull again when we dont have any images setup yet. We can pass the module the images we want it to display. We
pass the images as a object array.

export class MediaImages {
    id?: number;
    itemId: number;
    masterItemId: number;
    sequence: number;
    url: string;
}


(response) event will fire everytime an item is updated in the module. We Again this is useful when creating an item and we need to keep track of
changes that have taken place before updating directly. This will return the object array:

export class MediaImages {
    id?: number;
    itemId: number;
    masterItemId: number;
    sequence: number;
    url: string;
}

Media Library

It is possible to just show the media library and use for a different scenario other than items.

Usage:

<lib-image-media-library
    *ngIf="showImageLibrary"
    (response)="popupImageLibraryResponse($event)"
    [hideSearch]="true"
    [hideImageFilter]="true"
    [hideDateFilter]="true"
></lib-image-media-library>


(response) event will fire when you click add via the image library. This will return the object array:
export class ImageMedia {
    id: number;
    userId: number;
    url: string;
    fileName: string;
    description: string;
    uploadedDate: Date;
    thirdParty: boolean;
}

Properties [hideSearch], [hideImageFilter], [hideDateFilter] are not currently implemented, so hide for now.