|
1 | 1 | export type TransformationPosition = "path" | "query"; |
2 | 2 |
|
3 | | -type StreamingResolution = "240" | "360" | "480" | "720" | "1080" | "1440" | "2160"; |
| 3 | +export type StreamingResolution = "240" | "360" | "480" | "720" | "1080" | "1440" | "2160"; |
4 | 4 |
|
5 | 5 | /** |
6 | 6 | * 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 { |
421 | 421 | * @deprecated Use `gradient` instead. |
422 | 422 | */ |
423 | 423 | 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; |
424 | 481 | } |
425 | 482 |
|
426 | 483 |
|
| 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