Skip to main content
Version: 3.1.0

Context

IReplayLayout​

Implementation.

import type { IReplayLayout } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
widthnumberyesThe width of the export size in pixels
heightnumberyesThe height of the export size in pixels

IReplayLayerType​

Implementation.

import type { IReplayLayer } from '@picsart/web-replay-sdk';
type IReplayLayerType = 'image' | 'text' | 'shape' | 'group' | 'video' | 'audio';

IReplayAnimationDirection​

Implementation

import type { IReplayAnimationDirection } from '@picsart/web-replay-sdk';
type IReplayAnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
ValuesDescription
normalThe animation plays forwards each cycle. In other words, each time the animation cycles, the animation will reset to the beginning state and start over again.
reverseThe animation plays backwards each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again
alternateThe animation reverses direction each cycle, with the first iteration being played forwards. The count to determine if a cycle is even or odd starts at one.
alternate-reverseThe animation reverses direction each cycle, with the first iteration being played backwards. The count to determine if a cycle is even or odd starts at one.

For more information please check this link

IReplayAnimationTimingFunction​

Implementation

import type { IReplayAnimationTimingFunction } from '@picsart/web-replay-sdk';
type IReplayAnimationTimingFunction =
  | 's'
  | 'l'
  | 'i'
  | 'o'
  | 'ioqrt'
  | 'iocbc'
  | 'ioqnt'
  | 'iexp'
  | 'oexp'
  | 'ioexp'
  | 'obnc'
  | 'ibnc'
  | 'iobnc'
  | 'iel'
  | 'oel'
  | 'ioel'
  | 'b';

The below is the mapping of the original namings of the function in CSS and what we have in Replay format

Step => 's'
Linear => 'l'
EaseIn => 'i'
Easeout => 'o'
EaseInOutQuart => 'ioqrt'
EaseInOutCubic => 'iocbc'
EaseInOutQuint => 'ioqnt'
EaseInExpo => 'iexp'
EaseOutExpo => 'oexp'
EaseInOutExpo => 'ioexp'
EaseOutBounce => 'obnc'
EaseInBounce => 'ibnc'
EaseInOutBounce => 'iobnc'
EaseInElastic => 'iel'
EaseOutElastic => 'oel'
EaseInOutElastic => 'ioel'
BezierCurve=> 'b'

For more information please check this link

IReplayLayerTransform​

Implementation

import type { IReplayLayerTransform } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
xIReplayLayerProperty<number>yesx coordinate value of the layer. The value is in relative format. Defaults to 0
yIReplayLayerProperty<number>yesy coordinate value of the layer. The value is in relative format. Defaults to 0
scaleXIReplayLayerProperty<number>yesscaleX of the layer. The value is in relative format. Defaults to 1
scaleYIReplayLayerProperty<number>yesscaleY of the layer. The value is in relative format. Defaults to 1
rotationIReplayLayerProperty<number>yesrotation of the layer. The value is in degrees. Value range 0 - 360. Defaults to 0

IReplayLayerAppearance​

Implementation.

import type { IReplayLayerAppearance } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
durationIReplayLayerProperty<number>yesduration of how much the layer will be visible during the animation counted from startTime. For editing which does not include animation one can use -1, which will mean it does not disappear. Defaults to -1
startTimeIReplayLayerProperty<number>yesstartTime of the layer when it must become visible. The value is in relative format. Defaults to 0

IReplayLayerAnimation​

Implementation.

import type { IReplayLayerAnimation } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
animationsIReplayLayerProperty<IReplayAnimation<Props>>yesAn array of animations for the given layer. Props here is a generic type, which corresponds to the layer property keys, which are animated.

IReplayAnimationKeyFrame​

Implementation.

import type { IReplayAnimationKeyFrame } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
percentnumberyesA percentage of the time through the animation sequence at which the specified keyframe should occur
valuesPartial<Props>yesThe values for the given keyframe percentage to be achieved

The behavior of the keyframes is much similar to CSS keyframes. NOTE in CSS the keyframe is working per property, but here you're able to provide a map of properties and their values to be animated. If the property value is not changed during that keyframe, it can be skipped.

IReplayAnimation​

Implementation.

import type { IReplayAnimation } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
uuidUUIDStringyesThe unique identifier of the animation item
rendererIRendereryesrenderer of the animation
paramsJsonObjectyesThe property is for storing animation related information.
delaynumberyesThe amount of time to wait from applying the animation to an element before beginning to perform the animation. Note that delay is being calculated from the point when the layer has been created. It is also important that this values is supporting also negative values, which means, that the animation will be visible on the screen at some intermediate state. Defaults to 0
iterationCountnumberyesThe property sets the number of times an animation sequence should be played before stopping
directionIReplayAnimationDirectionyesThe property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward
timingFunctionIReplayAnimationTimingFunctionyesproperty sets how an animation progresses through the duration of each cycle
keyframesIReplayAnimationKeyFrame<Props>[]yesThe property defines layer's properties' behavior and steps for them to be animated

The behavior of the keyframes is much similar to CSS keyframes

IReplayBaseLayerProps​

Implementation.

import type { IReplayBaseLayerProps } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
hiddenIReplayLayerProperty<boolean>yesThe value specified if the layer is visible on the screen or not
opacityIReplayLayerProperty<number>yesChanges the layer appearance alpha channel. The value range is from 0-1. Defaults to 1
blendModeIReplayLayerProperty<IReplayLayerBlendMode>yesDefines the blend mode of the layer. Defaults to source-over

IReplayBaseLayer​

This is an abstract interface defining the general shape of all layers.

Implementation.

import type { IReplayBaseLayer } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
namestringyesThe name fo the given layer
lockedbooleanyesSpecifies whether the layer is locked. If set to true the layer cannot be edited. The make the layer editable, one need to turn the lock off(make it false). Defaults to false
metaJsonObjectyesThe property is for storing layer related information, which is not related to the actual rendering. There are certain limitations to due to platform specifics. So not each key that is changed in the layer.meta will be replicated in the platform. Here is a list of properties which are "reserved": type, resource, isPremium, source, usedTools, url, miniappPackageId, resourceId, groupId, templateId, templateOriginalId, license, pageTitle, resultUrl, inPreviewMode, locked, hidden, duration, loop, presetName, animationSettings
typeIReplayLayerTypeyesThe type of the layer
rendererIRendereryesrenderer of the layer
fallbackLayerIReplayLayernofallback layer when failed to load or execute renderer
mediaTypestringyesThis is a string pointing the current layer media type, in order to be understandable for different tools. It is a free string, in case it matches for different tools, that means they can work with that layer.Here is the Picsart editors' current in used Layer media types
propsT & IReplayLayerTransform & IReplayLayerAppearance & IReplayBaseLayerProps & IReplayLayerAnimation<{ [P in keyof (T & IReplayLayerTransform & IReplayLayerAppearance & IReplayBaseLayerProps)]: (T & IReplayLayerTransform & IReplayLayerAppearance & IReplayBaseLayerProps)[P] extends IReplayLayerProperty<infer U> ? U : never; }>yesThe properties of the layer, where T is generic interface representing the layer specific props(like audio property for audio type layer). Explanation of complex type - The props here are presented always extended from animation properties, base properties and transformation properties. Besides that for animation we need to form all the possible layers, that's why the infer union is used

IReplayVisualLayer​

Implementation

import type { IReplayVisualLayer } from '@picsart/web-replay-sdk';

📐 Geometry: Learn more about VisualLayer geometry in Format Coordinate System & Geometry → VisualLayer

IReplayVisualLayerProps​

PropertyTypeRequiredDescription
widthnumberyesdetermines the resource size which is requested from the renderer
heightnumberyesdetermines the resource size which is requested from the renderer
rendererDataJsonObjectnoThis data must be used to provide the renderer the required information for content drawing

IReplayTextLayer​

Implementation.

import type { IReplayTextLayer } from '@picsart/web-replay-sdk';
type IReplayTextLayer = IReplayBaseLayer<IReplayTextLayerProps>;

📐 Geometry: Learn more about TextLayer geometry in Format Coordinate System & Geometry → TextLayer

IReplayTextLayerAlignment​

Implementation.

import type { IReplayTextLayerAlignment } from '@picsart/web-replay-sdk';
type IReplayTextLayerAlignment = 'left' | 'center' | 'right';
ValuesDescription
leftAlign the text context in the layer's width to left
centerAlign the text context in the layer's width to center
rightAlign the text context in the layer's width to right

IReplayTextLayerFormat​

import type { IReplayTextLayerFormat } from '@picsart/web-replay-sdk';
type IReplayTextLayerFormat = 'bold' | 'italic' | 'underline' | 'strike';
ValuesDescription
boldSpecifies if the text is bold
italicSpecifies if the text is italic
underlineSpecifies if the text is underlined
strikethroughSpecifies if the text is strikethrough

IReplayTextPerspectivePoints​

Implementation.

import type { IReplayTextPerspectivePoints } from '@picsart/web-replay-sdk';
type IReplayTextPerspectivePoints = null | [Point, Point, Point, Point];
ValuesDescription
nullThe text has no perspective transformation
[Point, Point, Point, Point]The text has been transformed with perspective. The perspective is described with 4 points. All the points are being calculated from the layer's coordinate space. The text layer is being rendered in the resulting box

IReplayTextLayerRange​

Implementation.

import type { IReplayTextLayerRange } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
fillnull | IReplayLayerPatternyesSpecifies how the text content is being filled. If the values is equal to null than the layer corresponding property value will be used.
fontSizenull | numberyesSpecifies the font size of the text layer as a positive number in pixels. If the values is equal to null than the layer corresponding property value will be used.
textstringyesSequence of characters that to which the given range rules apply
formatnull | IReplayTextLayerFormatyesAn array of text formats for this range. If the values is equal to null than the layer corresponding property value will be used.

IReplayTextLayerProps​

Implementation.

import type { IReplayTextLayerProps } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
bendIReplayLayerProperty<number>yesSpecifies how much the text has been bended. The value range is from -50 to 50. The bend is being calculated from the center of the text content. The negative values are moving the bending circle center away from the bottom side of the text. Correspondingly the positive values are moving the bending circle center away from the top side of the text. Note text content width is being changed if bending is applied
pathstringyesSpecifies the path on which text will be drawn. View box is considered absolute width/height of the text
widthIReplayLayerProperty<number>yesSpecifies the text layer width. The value is in relative format. Defaults to 1
lineHeightIReplayLayerProperty<number>yesThe line height of the text layer
letterSpacingIReplayLayerProperty<number>yesThe letter spacing of the text layer
strokeIReplayLayerProperty<IReplayStroke>yesThe stroke of the text. Defaults to null
shadowIReplayLayerProperty<IReplayShadow>yesThe shadow of the text. Defaults to null
fontIReplayLayerProperty<IReplayFontResource>yesThe font resource to be used for rendering the text layer
perspectivePointsIReplayLayerProperty<IReplayTextPerspectivePoints>yesThe layer's perspective transformation box. Defaults to null
rangesIReplayLayerProperty<IReplayTextLayerRange[]>yesAn array of text ranges. This value is holding the text content
alignmentIReplayLayerProperty<IReplayTextLayerAlignment[]>yesThe text content alignment

line-height

IReplayAudioLayer​

Implementation.

import type { IReplayAudioLayer } from '@picsart/web-replay-sdk';
type IReplayAudioLayer = IReplayBaseLayer<IReplayAudioLayerProps>;

IReplayAudioLayerProps​

Implementation.

import type { IReplayAudioLayerProps } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
volumeIReplayLayerProperty<number>yesAudio volume is in percentage. Value range is from 0 to 100.
trimStartIReplayLayerProperty<number>yesThe millisecond within the audio resource duration range from where to start the audio
trimEndIReplayLayerProperty<number>yesThe millisecond within the audio resource duration range from where to end the audio
repeatIReplayLayerProperty<boolean>noflag (true or false) that determines whether the content in the layer should loop to match the layer's total duration. Defaults to false
speedIReplayLayerProperty<number>noThe playback speed of audio content Defaults to 1.0
mutedIReplayLayerProperty<boolean>noflag (true or false) that determines whether the audio content should be muted (no sound output). Defaults to false
audioIReplayLayerProperty<IReplayAudioResource>yesThe resource for the audio

⚠️ Note:​

ScenarioLayer Duration (seconds)Audio Duration (seconds)SpeedRepeatBehavior/Outcome
Audio shorter than layer duration, normal speed, no repeat1051.0NoIt plays once at normal speed, and after the 5s of audio, silence remains for the remaining 5 seconds.
Audio shorter than layer duration, normal speed, with repeat1051.0YesIt plays at normal speed and repeats continuously until the full 10-second layer duration is reached.
Audio shorter than layer duration, half speed, with repeat1550.5YesIt plays at half speed and repeats continuously throughout the entire 15-second layer duration.
Speed-adjusted audio shorter than layer duration, no repeat30152.0NoThe audio plays at double speed. Since the speed-adjusted audio duration is shorter than the layer duration, silence is played for the remaining time after the audio ends.
Audio shorter than layer duration, normal speed, with repeat25101.0YesIt plays at normal speed and repeats continuously for the entire 25-second layer duration.
Audio equal to layer duration, normal speed, no repeat10101.0NoIt plays at normal speed without repeating, and no additional silence is added after the audio ends.
Audio longer than layer duration, normal speed, no repeat5101.0NoIt plays the first 5 seconds of the audio at normal speed, and the rest is cut off.
Audio longer than layer duration, half speed, no repeat5100.5NoIt plays the first 2.5 seconds at half speed, and the rest is cut off.
Audio longer than layer duration, normal speed, with repeat5101.0YesThe audio duration is longer than the layer duration, but it repeats the first 5 seconds continuously for the entire layer duration.
Audio shorter than layer duration, double speed, with repeat20102.0YesThe audio duration is shorter than the layer duration. It plays at double speed and repeats continuously until the layer duration ends.
Speed-adjusted audio shorter than layer duration, half speed, no repeat30100.5NoThe audio plays at half speed, extending its playtime to 20 seconds, with silence filling the remaining layer duration.
Audio shorter than layer duration, 1.5x speed, no repeat20121.5NoThe audio plays faster at 1.5x speed, reducing its duration, and silence is played for the remainder of the layer duration.
Audio longer than layer duration, 2x speed, no repeat5102.0NoThe audio duration is longer than the layer duration, but it plays 2 times faster and the adjusted duration is equal to the layer duration.

IReplayGroupLayer​

Implementation.

import type { IReplayGroupLayer } from '@picsart/web-replay-sdk';
type IReplayGroupLayer = IReplayBaseLayer<IReplayGroupLayerProps>;

📐 Geometry: Learn more about GroupLayer geometry in Format Coordinate System & Geometry → GroupLayer

IReplayGroupLayerProps​

Implementation.

import type { IReplayGroupLayerProps } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
widthIReplayLayerProperty<number>yesThe width of the group layer. The value is in relative format. Defaults to 1
heightIReplayLayerProperty<number>yesThe height of the group layer. The value is in relative format. Defaults to 1
childrenIReplayLayerProperty<UUIDString[]>yesThe layer ids that are inside this group. Defaults to []

IReplayImageLayer​

Implementation.

import type { IReplayImageLayer } from '@picsart/web-replay-sdk';
type IReplayImageLayer = IReplayBaseLayer<IReplayImageLayerProps>;

📐 Geometry: Learn more about ImageLayer geometry in Format Coordinate System & Geometry → ImageLayer

IReplayImageLayerProps​

Implementation.

PropertyTypeRequiredDescription
strokeIReplayLayerProperty<IReplayStroke>noThe stroke for the image. The stroke is not considered inside image width and height. Defaults to null
shadowIReplayLayerProperty<IReplayShadow>noThe shadow for the image. Defaults to null
imageIReplayLayerProperty<IReplayPhotoResource>yesThe image media resource

IReplayShapeLayer​

Implementation.

import type { IReplayShapeLayer } from '@picsart/web-replay-sdk';
type IReplayShapeLayer = IReplayBaseLayer<IReplayShapeLayerProps>;

📐 Geometry: Learn more about ShapeLayer geometry in Format Coordinate System & Geometry → ShapeLayer

SVGPathString​

Implementation.

import type { SVGPathString } from '@picsart/web-replay-sdk';
type SVGPathString = string;

This attribute defines the shape of the path. The SVGPathString is the SVG's <path /> tag's d attribute value. For more please check this link

IReplayShapePath​

Implementation.

import type { IReplayShapePath } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
idUUIDStringyesThe unique identifier for path adjust object
dSVGPathStringyesThe path representation to render
strokeIReplayStrokeyesThe path's stroke
fillIReplayLayerPatternyesThe path's fill

IReplayShapeLayerProps​

Implementation.

import type { IReplayShapeLayerProps } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
widthIReplayLayerProperty<number>yesThe width of the layer. The value is in relative format. Defaults to 1
heightIReplayLayerProperty<number>yesThe height of the layer. The value is in relative format. Defaults to 1
strokeIReplayLayerProperty<IReplayStroke>noThe stroke for the whole shape. The stroke is not considered inside shape's width and height. Defaults to null
shadowIReplayLayerProperty<IReplayShadow>noThe shadow for the shape. Defaults to null
shapeIReplayLayerProperty<IReplaySvgResource>yesThe shape media resource. This property is holding the original resource of the shape(used when first time was rendered)
pathsIReplayLayerProperty<IReplayShapePath>[]noThis property is used for editing the shape path. Defaults to []

IReplayVideoLayer​

Implementation.

import type { IReplayVideoLayer } from '@picsart/web-replay-sdk';
type IReplayVideoLayer = IReplayBaseLayer<IReplayVideoLayerProps>;

📐 Geometry: Learn more about VideoLayer geometry in Format Coordinate System & Geometry → VideoLayer

IReplayVideoLayerProps​

Implementation.

import type { IReplayVideoLayerProps } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
volumeIReplayLayerProperty<number>yesVideo volume is in percentage. Value range is from 0 to 100.
trimStartIReplayLayerProperty<number>yesThe millisecond within the video resource duration range from where to start the video
trimEndIReplayLayerProperty<number>yesThe millisecond within the video resource duration range from where to end the video
repeatIReplayLayerProperty<boolean>noflag (true or false) that determines whether the content in the layer should loop to match the layer's total duration. Defaults to false
speedIReplayLayerProperty<number>noThe playback speed of video content Defaults to 1.0.
mutedIReplayLayerProperty<boolean>noflag (true or false) that determines whether the video content should be muted (no sound output). Defaults to false
videoIReplayLayerProperty<IReplayVideoResource>yesThe resource for the video

⚠️ Note:​

ScenarioLayer Duration (seconds)Video Duration (seconds)SpeedRepeatBehavior/Outcome
Video shorter than layer duration, normal speed, no repeat1051.0NoIt plays once at normal speed, and after the 5s of video, the last frame remains visible for the remaining 5 seconds.
Video shorter than layer duration, normal speed, with repeat1051.0Yes. It plays at normal speed and repeats continuously until the full 10-second layer duration is reached.
Video shorter than layer duration, half speed, with repeat1550.5YesIt plays at half speed and repeats continuously throughout the entire 15-second layer duration.
Speed-adjusted video shorter than layer duration, no repeat30152.0NoThe video plays at double speed. Since the speed-adjusted video duration is shorter than the layer duration, the last frame is displayed for the remaining time after the video ends.
Video shorter than layer duration, normal speed, with repeat25101.0YesIt plays at normal speed and repeats continuously for the entire 25-second layer duration.
Video equal to layer duration, normal speed, no repeat10101.0NoIt plays at normal speed without repeating, and no additional frames are displayed after the video ends.
Video longer than layer duration, normal speed, no repeat5101.0NoIt plays the first 5 seconds of the video at normal speed, and the rest is cut off.
Video longer than layer duration, half speed, no repeat5100.5NoIt plays the first 2.5 seconds at half speed, and the rest is cut off.
Video longer than layer duration, normal speed, with repeat5101.0YesThe video duration is longer than the layer duration, but it repeats the first 5 seconds continuously for the entire layer duration.
Video shorter than layer duration, double speed, with repeat20102.0YesThe video duration is shorter than the layer duration. It plays at double speed and repeats continuously until the layer duration ends.
Speed-adjusted video shorter than layer duration, half speed, no repeat30100.5NoThe video plays at half speed, extending its playtime to 20 seconds, with the last frame displayed for the remaining layer duration.
Video shorter than layer duration, 1.5x speed, no repeat20121.5NoThe video plays faster at 1.5x speed, reducing its duration, and the last frame is shown for the remainder of the layer duration.
Video longer than layer duration, 2x speed, no repeat5102.0NoThe video duration is longer than the layer duration, but it plays 2 time faster and adjusted duration is equal to layer duration

IReplayLayer​

Implementation.

import type { IReplayLayer } from '@picsart/web-replay-sdk';
type IReplayLayer =
  | IReplayTextLayer
  | IReplayAudioLayer
  | IReplayGroupLayer
  | IReplayShapeLayer
  | IReplayImageLayer
  | IReplayVideoLayer;

IReplayContext​

Implementation.

import type { IReplayContext } from '@picsart/web-replay-sdk';
PropertyTypeRequiredDescription
layoutIReplayLayoutyesThe export size(editing scene)
projectGroupIdUUIDStringyesThe root node from where the rendering of layers must be started
layersRecord<UUIDString, IReplayLayer>yesA map where the key of the map is the layer id and the value is the corresponding layer.