Skip to content

Commit 751bf46

Browse files
committed
add type defination for overlay
1 parent 75c0a11 commit 751bf46

File tree

1 file changed

+128
-1
lines changed

1 file changed

+128
-1
lines changed

src/interfaces/Transformation.ts

Lines changed: 128 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export type TransformationPosition = "path" | "query";
22

3-
type StreamingResolution = "240" | "360" | "480" | "720" | "1080" | "1440" | "2160";
3+
export type StreamingResolution = "240" | "360" | "480" | "720" | "1080" | "1440" | "2160";
44

55
/**
66
* The SDK provides easy to use names for transformations. These names are converted to the corresponding transformation string before being added to the URL.
@@ -421,6 +421,133 @@ export interface Transformation {
421421
* @deprecated Use `gradient` instead.
422422
*/
423423
effectGradient?: string;
424+
425+
/**
426+
* Overlay to be applied on the parent image or video. ImageKit allows you to overlay images, text, videos, subtitles, and solid colors on the parent image or video.
427+
*
428+
* {@link https://imagekit.io/docs/transformations#overlay-using-layers}
429+
*/
430+
overlay?: Overlay;
431+
}
432+
433+
export interface OverlayPosition {
434+
/**
435+
* `x` of the top-left corner in the base asset where the layer's top-left corner would be placed. It can also accept arithmetic expressions such as `bw_mul_0.4`, or `bw_sub_cw`.
436+
*
437+
* It maps to `lx` in the URL.
438+
*
439+
* Learn about [Arthmetic expressions](https://imagekit.io/docs/arithmetic-expressions-in-transformations)
440+
*/
441+
x?: number | string;
442+
443+
/**
444+
* `y` of the top-left corner in the base asset where the layer's top-left corner would be placed. It can also accept arithmetic expressions such as `bh_mul_0.4`, or `bh_sub_ch`.
445+
*
446+
* It maps to `ly` in the URL.
447+
*
448+
* Learn about [Arthmetic expressions](https://imagekit.io/docs/arithmetic-expressions-in-transformations)
449+
*/
450+
y?: number | string;
451+
452+
/**
453+
* Position of the overlay in relation to the parent image or video. The overlay can be positioned at the center, top, left, bottom, right, top_left, top_right, bottom_left, or bottom_right of the parent image or video.
454+
*
455+
* This maps to `lfo` in the URL.
456+
*/
457+
focus?: `center` | `top` | `left` | `bottom` | `right` | `top_left` | `top_right` | `bottom_left` | `bottom_right`;
458+
}
459+
460+
export interface OverlayTiming {
461+
/**
462+
* Start time of the base video in seconds when the layer should appear. It accepts a positive number upto two decimal e.g. 20 or 20.50. Only applicable if parent layer or base is video. It can also accept arithmetic expressions such as `bdu_mul_0.4`, or `bdu_sub_idu`. Learn more about arithmetic expressions [here](/arithmetic-expressions-in-transformations).
463+
*
464+
* It maps to `lso` in the URL.
465+
*/
466+
start?: number | string;
467+
468+
/**
469+
* Duration in seconds during which layer should appear on the base video. It accepts a positive number upto two decimal e.g. 20 or 20.50. Only applicable if parent layer or base is video. It can also accept arithmetic expressions such as `bdu_mul_0.4`, or `bdu_sub_idu`. Learn more about arithmetic expressions [here](/arithmetic-expressions-in-transformations).
470+
*
471+
* It maps to `ldu` in the URL.
472+
*/
473+
duration?: number | string;
474+
475+
/**
476+
* End time of the base video when this layer should disappear. In case both `end` and `duration` are present, `duration` is ignored. It accepts a positive number upto two decimal e.g. 20 or 20.50. Only applicable if parent layer or base is video. It can also accept arithmetic expressions such as `bdu_mul_0.4`, or `bdu_sub_idu`. Learn more about arithmetic expressions [here](/arithmetic-expressions-in-transformations).
477+
*
478+
* It maps to `leo` in the URL.
479+
*/
480+
end?: number | string;
424481
}
425482

426483

484+
interface BaseOverlay {
485+
/**
486+
* Positioning relative to parent. Accepts a JSON object with `x` and `y` (or `focus`) properties.
487+
*
488+
* {@link https://imagekit.io/docs/transformations#position-of-layer}
489+
*/
490+
position?: OverlayPosition;
491+
492+
/**
493+
* Timing (only valid if parent/base is a video). Accepts a JSON object with `start` (lso), `end` (leo), and `duration` (ldu) properties.
494+
*
495+
* {@link https://imagekit.io/docs/transformations#position-of-layer}
496+
*/
497+
timing?: OverlayTiming;
498+
499+
/**
500+
* Array of transformations to be applied to this overlay. Support of supported transformations also depends on the type of base and overlay asset. Refer to the docs below for more information.
501+
*/
502+
transformations?: Transformation[];
503+
}
504+
505+
506+
export interface TextOverlay extends BaseOverlay {
507+
type: "text";
508+
509+
/**
510+
* Text to be displayed in the overlay. The SDK will automatically handle special characters and URL encoding for you.
511+
*/
512+
text: string;
513+
}
514+
515+
export interface ImageOverlay extends BaseOverlay {
516+
type: "image";
517+
518+
/**
519+
* Relative path to the image to be used as an overlay.
520+
*/
521+
input: string;
522+
}
523+
524+
export interface VideoOverlay extends BaseOverlay {
525+
type: "video";
526+
/**
527+
* Relative path to the video to be used as an overlay.
528+
*/
529+
input: string;
530+
}
531+
532+
export interface SubtitleOverlay extends BaseOverlay {
533+
type: "subtitle";
534+
/**
535+
* Relative path to the subtitle file to be used as an overlay.
536+
*/
537+
input: string;
538+
}
539+
540+
export interface SolidColorOverlay extends BaseOverlay {
541+
type: "solidColor";
542+
/**
543+
* It is used to specify the color of the block in RGB Hex Code (e.g. `FF0000`), or an RGBA Code (e.g. `FFAABB50`), or a color name (e.g. `red`). If you specify an 8-character background, the last two characters must be a number between `00` and `99`, which indicates the opacity level of the background. `00` represents an opacity level of `0.00`, `01` represents an opacity level of `0.01`, and so on.
544+
*/
545+
color: string;
546+
}
547+
548+
export type Overlay =
549+
| TextOverlay
550+
| ImageOverlay
551+
| VideoOverlay
552+
| SubtitleOverlay
553+
| SolidColorOverlay;

0 commit comments

Comments
 (0)