Skip to main content
Version: 3.0.0

Context

createReplayLayerProperty​

Implementation.

import { createReplayLayerProperty } from '@picsart/web-replay-sdk/context';
function createReplayLayerProperty<T>(value: T, locked?: boolean, meta?: JsonObject): IReplayLayerProperty<T>
ParametersTypeRequiredDescription
valueTyesThe actual value of the property. It has generic type(depends on the actual property)
lockedbooleannoDefines the layer's access. If set to true it is not possible to change the property. To make changes, one needs to turn this off(make the value false). Defaults to false
metaJsonObjectnoProperty related meta information. Defaults to {}

Returns IReplayLayerProperty.

IReplayBaseLayerCreate​

PropertyTypeRequiredDescription
namestringyesThe name of the layer
uuidUUIDStringnoA unique id for replay layer. It will be autogenerate if not provided
lockedbooleannoSpecifies if the layer is locked. Defaults to false
rendererIRenderernorenderer of the layer
fallbackLayerIReplayLayernofallback layer when failed to load or execute renderer
annotationstringyesThis 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
metaJsonObjectnoLayer related meta information. Defaults to {}
props--The props information will be based on layer. This interface includes the common props only
props.xnumbernoThe layer x coordinate. The value is in relative format. Defaults to 0.
props.ynumbernoThe layer y coordinate. The value is in relative format. Defaults to 0.
props.scaleXnumbernoThe layer scale by x coordinate. The value is in relative format. Defaults to 1.
props.scaleYnumbernoThe layer scale by y coordinate. The value is in relative format. Defaults to 1.
props.hiddenbooleannoThe layer visibility. Defaults to false.
props.opacitybooleannoChanges the layer appearance alpha channel. The value range is from 0-100, in percents. Defaults to 100
props.rotationnumbernorotation of the layer. The value is in degrees. Value range 0 - 360. Defaults to 0
props.durationnumbernoduration 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
props.startTimenumbernostartTime of the layer when it must become visible. The value is in relative format. Defaults to 0
props.blendModeIReplayLayerBlendModenoDefines the blend mode of the layer. Defaults to source-over
props.animations(Pick<IReplayAnimation<Props>, 'keyframes'> & Partial<Omit<IReplayAnimation<Props>, 'keyframes'>>)[]noAn array of animations for the given layer. Props here is a generic type, which corresponds to the layer property keys, which are animated.

createReplayGroupLayer​

Implementation.

import { createReplayGroupLayer } from '@picsart/web-replay-sdk/context';
function createReplayGroupLayer(params: IReplayGroupLayerCreate): IReplayGroupLayer
ParametersTypeRequiredDescription
paramsIReplayGroupLayerCreateyesThe required information for the layer to be created

Returns IReplayGroupLayer.

IReplayGroupLayerCreate​

type IReplayGroupLayerCreate = IReplayBaseLayerCreate<IReplayGroupLayerPropsCreate>;

IReplayGroupLayerPropsCreate​

PropertyTypeRequiredDescription
widthnumberyesSpecifies the group layer width. The value is in relative format.
heightnumberyesSpecifies the group layer height. The value is in relative format.
childrenUUIDString[]noSpecifies the group child layers. Defaults to [].

createReplayShapeLayer​

Implementation.

import { createReplayShapeLayer } from '@picsart/web-replay-sdk/context';
function createReplayShapeLayer(params: IReplayShapeLayerCreate): IReplayShapeLayer
ParametersTypeRequiredDescription
paramsIReplayShapeLayerCreateyesThe required information for the layer to be created

Returns IReplayShapeLayer.

IReplayShapeLayerCreate​

type IReplayShapeLayerCreate = IReplayBaseLayerCreate<IReplayShapeLayerPropsCreate>;

IReplayShapeLayerPropsCreate​

PropertyTypeRequiredDescription
widthnumberyesThe width of the layer. The value is in relative format. Defaults to 1
heightIReplayStrokeyesThe height of the layer. The value is in relative format. Defaults to 1
strokeIReplayStrokenoThe stroke for the whole shape. The stroke is not considered inside shape's width and height. Defaults to null
shadowIReplayShadownoThe shadow for the shape. Defaults to null
shapeIReplaySvgResourceyesThe 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 []

createReplayImageLayer​

Implementation.

import { createReplayImageLayer } from '@picsart/web-replay-sdk/context';
function createReplayImageLayer(params: IReplayImageLayerCreate): IReplayImageLayer
ParametersTypeRequiredDescription
paramsIReplayImageLayerCreateyesThe required information for the layer to be created

Returns IReplayImageLayer.

IReplayImageLayerCreate​

type IReplayImageLayerCreate = IReplayBaseLayerCreate<IReplayImageLayerPropsCreate>;

IReplayImageLayerPropsCreate​

PropertyTypeRequiredDescription
strokeIReplayStrokenoThe stroke for the image. The stroke is not considered inside image width and height. Defaults to null
shadownumberyesThe shadow for the image. Defaults to null
imageIReplayPhotoResourceyesThe image media resource

createReplayVideoLayer​

Implementation.

import { createReplayVideoLayer } from '@picsart/web-replay-sdk/context';
function createReplayVideoLayer(params: IReplayVideoLayerCreate): IReplayVideoLayer
ParametersTypeRequiredDescription
paramsIReplayVideoLayerCreateyesThe required information for the layer to be created

Returns IReplayVideoLayer.

IReplayVideoLayerCreate​

type IReplayVideoLayerCreate = IReplayBaseLayerCreate<IReplayVideoLayerPropsCreate>;

IReplayVideoLayerPropsCreate​

PropertyTypeRequiredDescription
volumenumberyesVideo volume is in percentage. Value range is from 0 to 100.
trimStartnumberyesThe millisecond within the video resource duration range from where to start the video
trimEndnumberyesThe millisecond within the video resource duration range from where to end the video
repeatbooleannoflag (true or false) that determines whether the content in the layer should loop to match the layer's total duration. Defaults to false
speednumbernoThe playback speed of video content Defaults to 1.0.
videoIReplayVideoResourceyesThe resource for the video

createReplayAudioLayer​

Creates an audio layer. Audio layer is missing the following properties from the base properties: x, y, scaleX, scaleY, hidden, opacity, rotation, blendMode.

Implementation.

import { createReplayAudioLayer } from '@picsart/web-replay-sdk/context';
function createReplayAudioLayer(params: IReplayAudioLayerCreate): IReplayAudioLayer
ParametersTypeRequiredDescription
paramsIReplayAudioLayerCreateyesThe required information for the layer to be created

Returns IReplayAudioLayer.

IReplayAudioLayerCreate​

type PropsToExclude =
  | 'x'
  | 'y'
  | 'scaleX'
  | 'scaleY'
  | 'hidden'
  | 'opacity'
  | 'rotation'
  | 'blendMode';

type IReplayBaseLayerCreatePropsExcluded<T> = Omit<
  IReplayBaseLayerCreate<T>['props'],
  PropsToExclude
>;

type IReplayBaseLayerCreateWithoutProps<T> = Omit<IReplayBaseLayerCreate<T>, 'props'>;

type IReplayAudioLayerCreate = IReplayBaseLayerCreateWithoutProps<IReplayAudioLayerPropsCreate> & {
  props: IReplayBaseLayerCreatePropsExcluded<IReplayAudioLayerPropsCreate>;
};

IReplayAudioLayerPropsCreate​

PropertyTypeRequiredDescription
volumenumberyesAudio volume is in percentage. Value range is from 0 to 100.
trimStartnumberyesThe millisecond within the audio resource duration range from where to start the audio
trimEndnumberyesThe millisecond within the audio resource duration range from where to end the audio
repeatbooleannoflag (true or false) that determines whether the content in the layer should loop to match the layer's total duration. Defaults to false
speednumbernoThe playback speed of video content Defaults to 1.0.
audioIReplayAudioResourceyesThe resource for the audio

createReplayTextLayer​

Implementation.

import { createReplayTextLayer } from '@picsart/web-replay-sdk/context';
function createReplayTextLayer(params: IReplayTextLayerCreate): IReplayTextLayer
ParametersTypeRequiredDescription
paramsIReplayTextLayerCreateyesThe required information for the layer to be created

Returns IReplayTextLayer.

IReplayTextLayerCreate​

type IReplayTextLayerCreate = IReplayBaseLayerCreate<IReplayTextLayerPropsCreate>;

IReplayTextLayerPropsCreate​

PropertyTypeRequiredDescription
bendnumbernoSpecifies 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. Defaults to 0
widthnumberyesSpecifies the text layer width. The value is in relative format.
pathstringnoSpecifies the path on which text will be drawn. View box is considered absolute width/height of the text.
lineHeightnumbernoThe line height of the text layer. Defaults to 1
letterSpacingnumbernoThe letter spacing of the text layer. Defaults to 0
strokeIReplayStrokenoThe stroke of the text. Defaults to null
shadowIReplayShadownoThe shadow of the text. Defaults to null
fontIReplayFontResourceyesThe font resource to be used for rendering the text layer
perspectivePointsIReplayTextPerspectivePointsnoThe layer's perspective transformation box. Defaults to null
rangesIReplayTextLayerRange[]noAn array of text ranges. This value is holding the text content. Defaults to []
alignmentIReplayTextLayerAlignment[]noThe text content alignment. Defaults to center

createReplayVisualLayer​

Creates Visual layer. createReplayVisualLayer layer requires renderer property.

Implementation

import { createReplayVisualLayer } from '@picsart/web-replay-sdk/context';
ParametersTypeRequiredDescription
paramsIReplayVisualLayerCreateyesThe required information for the layer to be created

IReplayVisualLayerCreate​

type IReplayVisualLayerCreate = IReplayBaseLayerCreate<IReplayVisualLayerPropsCreate> & {
  renderer: IRenderer;
};

IReplayVisualLayerPropsCreate​

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

findReplayLayerChildren​

Finds the group layer's all child layers

Implementation.

import { findReplayLayerChildren } from '@picsart/web-replay-sdk/context';
function findReplayLayerChildren(replay: IReplay, layerId: IReplayLayer['uuid']): IReplayLayer[]
ParametersTypeRequiredDescription
replayIReplayyesA replay object structure
layerIdIReplayLayer['uuid']yesA replay layer id. NOTE this must be a group layer id, the method will fail otherwise

Returns IReplayLayer[].

findReplayLayerParent​

Finds the parent layer of the given layer id

Implementation.

import { findReplayLayerParent } from '@picsart/web-replay-sdk/context';
function findReplayLayerParent(replay: IReplay, layerId: IReplayLayer['uuid']): IReplayGroupLayer
ParametersTypeRequiredDescription
replayIReplayyesA replay object structure
layerIdIReplayLayer['uuid']yesA replay layer id

Returns IReplayGroupLayer[].

findReplayTexts​

Finds all the text layers

Implementation.

import { findReplayTexts } from '@picsart/web-replay-sdk/context';
function findReplayTexts(replay: IReplay): IReplayTextLayer[]
ParametersTypeRequiredDescription
replayIReplayyesA replay object structure

Returns IReplayTextLayer[].

findReplayImages​

Finds all the image layers

Implementation.

import { findReplayImages } from '@picsart/web-replay-sdk/context';
function findReplayImages(replay: IReplay): IReplayImageLayer[]
ParametersTypeRequiredDescription
replayIReplayyesA replay object structure

Returns IReplayImageLayer[].

findReplayShapes​

Finds all the image layers

Implementation.

import { findReplayShapes } from '@picsart/web-replay-sdk/context';
function findReplayShapes(replay: IReplay): IReplayShapeLayer[]
ParametersTypeRequiredDescription
replayIReplayyesA replay object structure

Returns IReplayShapeLayer[].

findReplayAudios​

Finds all the audio layers

Implementation.

import { findReplayAudios } from '@picsart/web-replay-sdk/context';
function findReplayAudios(replay: IReplay): IReplayAudioLayer[]
ParametersTypeRequiredDescription
replayIReplayyesA replay object structure

Returns IReplayAudioLayer[].

findReplayVideos​

Finds all the video layers

Implementation.

import { findReplayVideos } from '@picsart/web-replay-sdk/context';
function findReplayVideos(replay: IReplay): IReplayVideoLayer[]
ParametersTypeRequiredDescription
replayIReplayyesA replay object structure

Returns IReplayVideoLayer[].

findReplayGroups​

Finds for the given layerIds

Implementation.

import { findReplayGroups } from '@picsart/web-replay-sdk/context';
function findReplayGroups(replay: IReplay): IReplayGroupLayer[]
ParametersTypeRequiredDescription
replayIReplayyesA replay object structure

Returns IReplayGroupLayer[].

findReplayLayers​

Finds for the given layerIds

Implementation.

import { findReplayLayers } from '@picsart/web-replay-sdk/context';
function findReplayLayers(replay: IReplay, layerIds: IReplayLayer['uuid'][]): IReplayLayer[]
ParametersTypeRequiredDescription
replayIReplayyesA replay object structure
layerIdslayerIds: IReplayLayer['uuid'][]yesAn array of layers ids

Returns IReplayLayer[].

isReplayTextLayer​

Checks if the layer is a text layer

Implementation.

import { isReplayTextLayer } from '@picsart/web-replay-sdk/context';
function isReplayTextLayer(layer: IReplayLayer): layer is IReplayTextLayer
ParametersTypeRequiredDescription
layerIReplayLayeryesA replay layer

Returns a boolean.

isReplayVideoLayer​

Checks if the layer is a video layer

Implementation.

import { isReplayVideoLayer } from '@picsart/web-replay-sdk/context';
function isReplayVideoLayer(layer: IReplayLayer): layer is IReplayVideoLayer
ParametersTypeRequiredDescription
layerIReplayLayeryesA replay layer

Returns a boolean.

isReplayAudioLayer​

Checks if the layer is a audio layer

Implementation.

import { isReplayAudioLayer } from '@picsart/web-replay-sdk/context';
function isReplayAudioLayer(layer: IReplayLayer): layer is IReplayAudioLayer
ParametersTypeRequiredDescription
layerIReplayLayeryesA replay layer

Returns a boolean.

isReplayShapeLayer​

Checks if the layer is a shape layer

Implementation.

import { isReplayShapeLayer } from '@picsart/web-replay-sdk/context';
function isReplayShapeLayer(layer: IReplayLayer): layer is IReplayShapeLayer
ParametersTypeRequiredDescription
layerIReplayLayeryesA replay layer

Returns a boolean.

isReplayGroupLayer​

Checks if the layer is a group layer

Implementation.

import { isReplayGroupLayer } from '@picsart/web-replay-sdk/context';
function isReplayGroupLayer(layer: IReplayLayer): layer is IReplayGroupLayer
ParametersTypeRequiredDescription
layerIReplayLayeryesA replay layer

Returns a boolean.

isReplayImageLayer​

Checks if the layer is a image layer

Implementation.

import { isReplayImageLayer } from '@picsart/web-replay-sdk/context';
function isReplayImageLayer(layer: IReplayLayer): layer is IReplayImageLayer
ParametersTypeRequiredDescription
layerIReplayLayeryesA replay layer

Returns a boolean.