Kappapps SDK

Appearance

Class: KImage ​

Overlay image player: creates an HTML container positioned on screen, displays the image in it, and manages its showing / hiding according to the timeline.

Remarks ​

You rarely instantiate KImage directly: go through k.medias.playImage(source, position) or through KMedia for a library media of type images. All methods are chainable.

Example ​

ts
// Display a fullscreen image for 3 seconds
await k.medias.playImage('https://example.tld/banner.png', {});

See ​

KMedia for the generic media, KVideo and KAudio.

Implements ​

Properties ​

container ​

ts
container: HTMLDivElement = null;

<div> container injected into the DOM that hosts the image, or null before loading.

image ​

ts
image: HTMLImageElement = null;

Displayed <img> element, or null before loading.

loaded ​

ts
loaded: boolean = false;

true once the image has been loaded and is ready to be displayed.

position ​

ts
position: MediaPosition;

Current position and size in logical iframe pixels (fullscreen by default).

source ​

ts
source: string;

timeline ​

ts
timeline: MediaTimeline = {};

Methods ​

play() ​

ts
play(): Promise<KImage>;

Preloads if needed, then displays the image. If timeline.endAt is set, the image is automatically hidden after that delay (in milliseconds).

Returns ​

Promise<KImage>

A promise resolved with this KImage once the image is displayed.

Throws ​

Rejects (and emits the error event) if loading fails.

See ​

playSync to wait for the display to end, stop to hide manually.

Implementation of ​

KMedia.play

playSync() ​

ts
playSync(): Promise<KImage>;

Displays the image and waits for the display to end (end event) before resolving.

Returns ​

Promise<KImage>

A promise resolved with this KImage once the display has ended.

Throws ​

Rejects if a loading error occurs.

Remarks ​

Without timeline.endAt, the end is only triggered by a call to stop (or remove): otherwise the promise stays pending.

See ​

play to not wait for the end.

Implementation of ​

KMedia.playSync

preload() ​

ts
preload(): Promise<KImage>;

Loads the image (creates the container and the <img> element, and waits for onload) without displaying it yet.

Returns ​

Promise<KImage>

A promise resolved with this KImage (chainable).

See ​

play to preload then display.

Implementation of ​

KMedia.preload

remove() ​

ts
remove(): KImage;

Hides the image, then permanently removes it and its container from the DOM.

Returns ​

KImage

This KImage (chainable).

Implementation of ​

KMedia.remove

setPosition() ​

ts
setPosition(position): KImage;

Repositions and resizes the image on screen.

Parameters ​

position ​

MediaPositionCreate

New position / size — see MediaPositionCreate (omitted fields keep their current value).

Returns ​

KImage

This KImage (chainable).

Implementation of ​

KMedia.setPosition

stop() ​

ts
stop(): KImage;

Hides the image (without removing it from the DOM) and emits the end event.

Returns ​

KImage

This KImage (chainable).

See ​

remove to hide and remove from the DOM.

Implementation of ​

KMedia.stop