UNPKG

react-native-videoeditorsdk

Version:

A React Native module for VideoEditor SDK. Integrate the video editor into your own HTML5, iOS or Android app - in minutes!

1,247 lines (1,215 loc) 65.9 kB
/** * An asset URI which will always be passed as a `string` to the native platform SDKs. * In React Native an `AssetURI` can be assigned with an asset reference which can be * obtained by, e.g., `require('./pathToStaticAssetResource.withExtension')` as `number`. * Every `AssetURI` as `number` contained in the `Configuration` will be resolved to a URI * as `string` when passed to the SDK. */ export type AssetURI = string | number /** * Configuration options and asset definitions for image and video editing tasks. */ export interface Configuration { /** * When set to `true`, the user is forced to crop the asset to one of the allowed crop ratios in * `transform.items` before being able to use other features of the editor. * The transform tool will only be presented if the image does not already fit one of the allowed * aspect ratios. It will be presented automatically, if the user changes the orientation of the asset * and the result does not match an allowed aspect ratio. * * This property has no effect unless `transform.allowFreeCrop` is set to `false` or `null`. * @example // Defaults to: * false */ forceCrop?: boolean; /** * Controls if the editor is used in single tool mode. * Prerequisite is that only one tool is in `tools`. * * @example // Defaults to: * true */ singleToolMode?: boolean; /** * Defines all allowed actions for the main screen that are displayed as overlay buttons on the canvas. * Only buttons for allowed actions are visible. * @note The `CanvasAction.REMOVE_BACKGROUND` action is only shown when editing photos where a person could be detected. This feature is only supported on devices running iOS 15+. * @note The `CanvasAction.SOUND_ON_OFF` and `CanvasAction.PLAY_PAUSE` action is only shown when editing videos. * @example // Defaults to: * [CanvasAction.SOUND_ON_OFF, CanvasAction.PLAY_PAUSE, CanvasAction.UNDO, CanvasAction.REDO] */ mainCanvasActions?: Array< CanvasAction.REMOVE_BACKGROUND | CanvasAction.SOUND_ON_OFF | CanvasAction.PLAY_PAUSE | CanvasAction.UNDO | CanvasAction.REDO >; /** * Controls if the user can zoom the preview image. * @example // Defaults to: * true */ enableZoom?: boolean; /** * Global snapping options for all sprites, e.g., stickers, texts, and text designs. */ snapping?: { /** * Snapping options for positioning sprites. */ position?: { /** * Whether sprites should snap to specific positions during pan interactions. * This switch enables or disables position snapping. * @example // Defaults to: * true */ enabled?: boolean; /** * This threshold defines the distance of a pan gesture where snapping at a snap point occurs. * It is measured in points. * @example // Defaults to: * 20 */ threshold?: number; /** * If enabled a sprite's center snaps to the horizontal line through the center of the edited image. * @example // Defaults to: * true */ snapToHorizontalCenter?: boolean; /** * If enabled a sprite's center snaps to the vertical line through the center of the edited image. * @example // Defaults to: * true */ snapToVerticalCenter?: boolean; /** * The left side of a sprite's bounding box snaps to a vertical line which is shifted * from the left side of the edited image towards its center by this value. The value is measured in normalized * coordinates relative to the smaller side of the edited image. * If this value is explicitly set to `null` this snapping line is disabled. * @example // Defaults to: * 0.1 */ snapToLeft?: number | null; /** * The right side of a sprite's bounding box snaps to a vertical line which is shifted * from the right side of the edited image towards its center by this value. The value is measured in normalized * coordinates relative to the smaller side of the edited image. * If this value is explicitly set to `null` this snapping line is disabled. * @example // Defaults to: * 0.1 */ snapToRight?: number | null; /** * The top side of a sprite's bounding box snaps to a horizontal line which is shifted * from the top side of the edited image towards its center by this value. The value is measured in normalized * coordinates relative to the smaller side of the edited image. * If this value is explicitly set to `null` this snapping line is disabled. * @example // Defaults to: * 0.1 */ snapToTop?: number | null; /** * The bottom side of a sprite's bounding box snaps to a horizontal line which is shifted * from the bottom side of the edited image towards its center by this value. The value is measured in normalized * coordinates relative to the smaller side of the edited image. * If this value is explicitly set to `null` this snapping line is disabled. * @example // Defaults to: * 0.1 */ snapToBottom?: number | null; } /** * Snapping options for rotating sprites. */ rotation?: { /** * Whether sprites should snap to specific orientations during rotation interactions. * This switch enables or disables rotation snapping. * @example // Defaults to: * true */ enabled?: boolean; /** * This threshold defines the arc length of a rotation gesture where snapping at a snap angle occurs. * It is measured in points. * @example // Defaults to: * 20 */ threshold?: number; /** * Enabled snapping angles in degrees for rotating a sprite. The rotation angle is defined clockwise. * @example // Defaults to: * [0, 45, 90, 135, 180, 225, 270, 315] */ snapToAngles?: number[]; } } /** * Global watermark options. */ watermark?: { /** * Input image for the watermark. No additional processing is performed on the image. * Transparency must be supported by the file itself. * If `null` no watermark will be applied. * @note If the watermark is the only editing operation to be performed, `export.force` option * must be enabled for the change to be applied. * @example // Defaults to: * null */ watermarkURI?: AssetURI; /** * The relative size of the watermark. * This value is measured in relation to the smaller side of the transformed image/video that the user is editing * and the longer side of the watermark image. * @note Values outside (0.0, 1.0) will be clamped. * @example // Defaults to: * 0.2 */ size?: number; /** * The relative spacing between the edges of the image/video and the watermark. * This value is measured in relation to the smaller side of the transformed image/video that the user is editing. * @note Values outside (0.0, 0.5) will be clamped. * @example // Defaults to: * 0.05. */ inset?: number; /** * It defines the layout of the watermark inside the canvas. * @example // Defaults to: * AlignmentMode.TOP_RIGHT */ alignment?: AlignmentMode } /** * The menu items (or tools) to display in the main menu. * @example // Defaults to: * [Tool.COMPOSITION, Tool.TRANSFORM, Tool.FILTER, Tool.ADJUSTMENT, Tool.FOCUS, Tool.STICKER, Tool.TEXT, Tool.TEXT_DESIGN, Tool.OVERLAY, Tool.FRAME, Tool.BRUSH] * // or if your license does not include `Tool.COMPOSITION`: * [Tool.TRIM, Tool.TRANSFORM, Tool.FILTER, Tool.ADJUSTMENT, Tool.FOCUS, Tool.STICKER, Tool.TEXT, Tool.TEXT_DESIGN, Tool.OVERLAY, Tool.FRAME, Tool.BRUSH] */ tools?: Tool[]; /** * Configuration options for `Tool.COMPOSITION`. */ composition?: { /** * Defines all available video clips in the video clip library. Each video clip must be assigned to a category. * @note If this array is `null` the defaults are used. If this array is empty the video clip library won't be shown when the user * taps the add button in the composition menu instead the device's media library will be shown directly when `personalVideoClips` is enabled. * If `personalVideoClips` is disabled in this case the add button in the composition menu won't be shown at all. * @example // Defaults to: * [] */ categories?: (VideoClipCategory)[]; /** * Defines all allowed actions for the composition tool that are displayed as overlay buttons on the canvas. * Only buttons for allowed actions are visible. * @example // Defaults to: * [CanvasAction.PLAY_PAUSE] */ canvasActions?: Array< CanvasAction.PLAY_PAUSE >; /** * If enabled the user can add personal video clips from the device's media library. A button is added as last item in the composition * menu or as first item in the video clip library menu in front of the video clip categories if any `categories` are defined. * @example // Defaults to: * true */ personalVideoClips?: boolean; /** * Configuration options for trimming individual video clips of the video composition. */ clipTrim?: { /** * Defines all allowed actions for the clip trim tool that are displayed as overlay buttons on the canvas. * Only buttons for allowed actions are visible. * @example // Defaults to: * [CanvasAction.DELETE, CanvasAction.PLAY_PAUSE] */ canvasActions?: Array< CanvasAction.DELETE | CanvasAction.PLAY_PAUSE >; } } /** * Configuration options for `Tool.TRIM`. */ trim?: { /** * Defines all allowed actions for the trim tool that are displayed as overlay buttons on the canvas. * Only buttons for allowed actions are visible. * @example // Defaults to: * [CanvasAction.DELETE, CanvasAction.PLAY_PAUSE] */ canvasActions?: Array< CanvasAction.PLAY_PAUSE >; /** * Enforces a minimum allowed duration in seconds for the edited video for the trim and composition tool. * The minimum allowed value is 0.5 seconds. See `forceMode` for additional options. * @example // Defaults to: * 0.5 */ minimumDuration?: number; /** * Enforces a maximum allowed duration in seconds for the edited video for the trim and composition tool * if set to a value different from `null`. See `forceMode` for additional options. * @example // Defaults to: * null */ maximumDuration?: number; /** * With the force trim option, you're able to enforce a `minimumDuration` and `maximumDuration` for a video composition * in the composition tool and/or a single video in the trim tool. Thus users will not be able to export videos, * which are not within the defined video duration limits. This feature is implemented as part of the user interface only. * To be able to use this feature your subscription must include the trim feature. * @example // Defaults to: * ForceTrimMode.SILENT */ forceMode?: ForceTrimMode; } /** * Configuration options for `Tool.AUDIO`. */ audio?: { /** * Defines all available audio clips in the audio clip library. Each audio clip must be assigned to a category. * @example // Defaults to: * [] */ categories?: (AudioClipCategory)[]; /** * Defines all allowed actions for the audio tool that are displayed as overlay buttons on the canvas. * Only buttons for allowed actions are visible. * @example // Defaults to: * [CanvasAction.DELETE] */ canvasActions?: Array< CanvasAction.DELETE | CanvasAction.PLAY_PAUSE >; } /** * Configuration options for `Tool.TRANSFORM`. */ transform?: { /** * Whether to show a reset button to reset the applied crop, rotation and tilt angle. * @example // Defaults to: * true */ showResetButton?: boolean; /** * Whether to allow free cropping. If this is enabled, free cropping is always the first available option. * @example // Defaults to: * true */ allowFreeCrop?: boolean; /** * Defines all allowed crop aspect ratios. The crop ratio buttons are shown in the given order. * @example // Defaults to: * [ * { width: 1, height: 1, name: "Square" }, * { width: 16, height: 9, toggleable: true }, * { width: 4, height: 3, toggleable: true }, * { width: 3, height: 2, toggleable: true }, * ] */ items?: CropRatio[]; } /** * Configuration options for `Tool.FILTER`. */ filter?: { /** * Defines all available filters. Each filter must be assigned to a category. * New items and categories can be mixed and matched with existing ones. * `NONE` is always added. * @example // Defaults to: * [ * { identifier: "imgly_filter_category_duotone", items: [ * { identifier: "imgly_duotone_desert" }, * { identifier: "imgly_duotone_peach" }, * { identifier: "imgly_duotone_clash" }, * { identifier: "imgly_duotone_plum" }, * { identifier: "imgly_duotone_breezy" }, * { identifier: "imgly_duotone_deepblue" }, * { identifier: "imgly_duotone_frog" }, * { identifier: "imgly_duotone_sunset" }, * ]}, * { identifier: "imgly_filter_category_bw", items: [ * { identifier: "imgly_lut_ad1920" }, * { identifier: "imgly_lut_bw" }, * { identifier: "imgly_lut_x400" }, * { identifier: "imgly_lut_litho" }, * { identifier: "imgly_lut_sepiahigh" }, * { identifier: "imgly_lut_plate" }, * { identifier: "imgly_lut_sin" }, * ]}, * { identifier: "imgly_filter_category_vintage", items: [ * { identifier: "imgly_lut_blues" }, * { identifier: "imgly_lut_front" }, * { identifier: "imgly_lut_texas" }, * { identifier: "imgly_lut_celsius" }, * { identifier: "imgly_lut_cool" }, * ]}, * { identifier: "imgly_filter_category_smooth", items: [ * { identifier: "imgly_lut_chest" }, * { identifier: "imgly_lut_winter" }, * { identifier: "imgly_lut_kdynamic" }, * { identifier: "imgly_lut_fall" }, * { identifier: "imgly_lut_lenin" }, * { identifier: "imgly_lut_pola669" }, * ]}, * { identifier: "imgly_filter_category_cold", items: [ * { identifier: "imgly_lut_elder" }, * { identifier: "imgly_lut_orchid" }, * { identifier: "imgly_lut_bleached" }, * { identifier: "imgly_lut_bleachedblue" }, * { identifier: "imgly_lut_breeze" }, * { identifier: "imgly_lut_blueshadows" }, * ]}, * { identifier: "imgly_filter_category_warm", items: [ * { identifier: "imgly_lut_sunset" }, * { identifier: "imgly_lut_eighties" }, * { identifier: "imgly_lut_evening" }, * { identifier: "imgly_lut_k2" }, * { identifier: "imgly_lut_nogreen" }, * ]}, * { identifier: "imgly_filter_category_legacy", items: [ * { identifier: "imgly_lut_ancient" }, * { identifier: "imgly_lut_cottoncandy" }, * { identifier: "imgly_lut_classic" }, * { identifier: "imgly_lut_colorful" }, * { identifier: "imgly_lut_creamy" }, * { identifier: "imgly_lut_fixie" }, * { identifier: "imgly_lut_food" }, * { identifier: "imgly_lut_fridge" }, * { identifier: "imgly_lut_glam" }, * { identifier: "imgly_lut_gobblin" }, * { identifier: "imgly_lut_highcontrast" }, * { identifier: "imgly_lut_highcarb" }, * { identifier: "imgly_lut_k1" }, * { identifier: "imgly_lut_k6" }, * { identifier: "imgly_lut_keen" }, * { identifier: "imgly_lut_lomo" }, * { identifier: "imgly_lut_lomo100" }, * { identifier: "imgly_lut_lucid" }, * { identifier: "imgly_lut_mellow" }, * { identifier: "imgly_lut_neat" }, * { identifier: "imgly_lut_pale" }, * { identifier: "imgly_lut_pitched" }, * { identifier: "imgly_lut_polasx" }, * { identifier: "imgly_lut_pro400" }, * { identifier: "imgly_lut_quozi" }, * { identifier: "imgly_lut_settled" }, * { identifier: "imgly_lut_seventies" }, * { identifier: "imgly_lut_soft" }, * { identifier: "imgly_lut_steel" }, * { identifier: "imgly_lut_summer" }, * { identifier: "imgly_lut_tender" }, * { identifier: "imgly_lut_twilight" }, * ]}, * ] */ categories?: (FilterCategory | ExistingFilterCategory)[]; /** * Whether categories should be flattened which effectively hides the categories. * If this is enabled all filters will be shown in the top-level of the filter selection tool * orderer according to their parent category. * @example // Defaults to: * false */ flattenCategories?: boolean; } /** * Configuration options for `Tool.ADJUSTMENT`. */ adjustment?: { /** * Whether to show a reset button to reset the applied adjustments. * @example // Defaults to: * true */ showResetButton?: boolean; /** * Defines all allowed adjustment tools. The adjustment tool buttons are always shown in the given order. * @example // Defaults to: * [AdjustmentTool.BRIGHTNESS, AdjustmentTool.CONTRAST, AdjustmentTool.SATURATION, AdjustmentTool.CLARITY, AdjustmentTool.SHADOWS, AdjustmentTool.HIGHLIGHTS, AdjustmentTool.EXPOSURE, AdjustmentTool.GAMMA, AdjustmentTool.BLACKS, AdjustmentTool.WHITES, AdjustmentTool.TEMPERATURE, AdjustmentTool.SHARPNESS] */ items?: AdjustmentTool[]; } /** * Configuration options for `Tool.FOCUS`. */ focus?: { /** * Defines all allowed focus tools. The focus tool buttons are shown in the given order. * `NONE` is always added. * @example // Defaults to: * [FocusTool.NONE, FocusTool.RADIAL, FocusTool.MIRRORED, FocusTool.LINEAR, FocusTool.GAUSSIAN] */ items?: FocusTool[]; } /** * Configuration options for `Tool.STICKER`. */ sticker?: { /** * Defines all available stickers. Each sticker must be assigned to a category. * New items and categories can be mixed and matched with existing ones. * @note If this array is `null` the defaults are used but the sticker category * with the identifier `imgly_sticker_category_animated` is only shown when editing videos. * @example // Defaults to: * [ * { identifier: "imgly_sticker_category_emoticons", items: [ * { identifier: "imgly_smart_sticker_weekday" }, * { identifier: "imgly_smart_sticker_date" }, * { identifier: "imgly_smart_sticker_time" }, * { identifier: "imgly_smart_sticker_time_clock" }, * { identifier: "imgly_sticker_emoticons_grin" }, * { identifier: "imgly_sticker_emoticons_laugh" }, * { identifier: "imgly_sticker_emoticons_smile" }, * { identifier: "imgly_sticker_emoticons_wink" }, * { identifier: "imgly_sticker_emoticons_tongue_out_wink" }, * { identifier: "imgly_sticker_emoticons_angel" }, * { identifier: "imgly_sticker_emoticons_kisses" }, * { identifier: "imgly_sticker_emoticons_loving" }, * { identifier: "imgly_sticker_emoticons_kiss" }, * { identifier: "imgly_sticker_emoticons_wave" }, * { identifier: "imgly_sticker_emoticons_nerd" }, * { identifier: "imgly_sticker_emoticons_cool" }, * { identifier: "imgly_sticker_emoticons_blush" }, * { identifier: "imgly_sticker_emoticons_duckface" }, * { identifier: "imgly_sticker_emoticons_furious" }, * { identifier: "imgly_sticker_emoticons_angry" }, * { identifier: "imgly_sticker_emoticons_steaming_furious" }, * { identifier: "imgly_sticker_emoticons_sad" }, * { identifier: "imgly_sticker_emoticons_anxious" }, * { identifier: "imgly_sticker_emoticons_cry" }, * { identifier: "imgly_sticker_emoticons_sobbing" }, * { identifier: "imgly_sticker_emoticons_loud_cry" }, * { identifier: "imgly_sticker_emoticons_wide_grin" }, * { identifier: "imgly_sticker_emoticons_impatient" }, * { identifier: "imgly_sticker_emoticons_tired" }, * { identifier: "imgly_sticker_emoticons_asleep" }, * { identifier: "imgly_sticker_emoticons_sleepy" }, * { identifier: "imgly_sticker_emoticons_deceased" }, * { identifier: "imgly_sticker_emoticons_attention" }, * { identifier: "imgly_sticker_emoticons_question" }, * { identifier: "imgly_sticker_emoticons_not_speaking_to_you" }, * { identifier: "imgly_sticker_emoticons_sick" }, * { identifier: "imgly_sticker_emoticons_pumpkin" }, * { identifier: "imgly_sticker_emoticons_boxer" }, * { identifier: "imgly_sticker_emoticons_idea" }, * { identifier: "imgly_sticker_emoticons_smoking" }, * { identifier: "imgly_sticker_emoticons_beer" }, * { identifier: "imgly_sticker_emoticons_skateboard" }, * { identifier: "imgly_sticker_emoticons_guitar" }, * { identifier: "imgly_sticker_emoticons_music" }, * { identifier: "imgly_sticker_emoticons_sunbathing" }, * { identifier: "imgly_sticker_emoticons_hippie" }, * { identifier: "imgly_sticker_emoticons_humourous" }, * { identifier: "imgly_sticker_emoticons_hitman" }, * { identifier: "imgly_sticker_emoticons_harry_potter" }, * { identifier: "imgly_sticker_emoticons_business" }, * { identifier: "imgly_sticker_emoticons_batman" }, * { identifier: "imgly_sticker_emoticons_skull" }, * { identifier: "imgly_sticker_emoticons_ninja" }, * { identifier: "imgly_sticker_emoticons_masked" }, * { identifier: "imgly_sticker_emoticons_alien" }, * { identifier: "imgly_sticker_emoticons_wrestler" }, * { identifier: "imgly_sticker_emoticons_devil" }, * { identifier: "imgly_sticker_emoticons_star" }, * { identifier: "imgly_sticker_emoticons_baby_chicken" }, * { identifier: "imgly_sticker_emoticons_rabbit" }, * { identifier: "imgly_sticker_emoticons_pig" }, * { identifier: "imgly_sticker_emoticons_chicken" }, * ]}, * { identifier: "imgly_sticker_category_shapes", items: [ * { identifier: "imgly_sticker_shapes_badge_01" }, * { identifier: "imgly_sticker_shapes_badge_04" }, * { identifier: "imgly_sticker_shapes_badge_12" }, * { identifier: "imgly_sticker_shapes_badge_06" }, * { identifier: "imgly_sticker_shapes_badge_13" }, * { identifier: "imgly_sticker_shapes_badge_36" }, * { identifier: "imgly_sticker_shapes_badge_08" }, * { identifier: "imgly_sticker_shapes_badge_11" }, * { identifier: "imgly_sticker_shapes_badge_35" }, * { identifier: "imgly_sticker_shapes_badge_28" }, * { identifier: "imgly_sticker_shapes_badge_32" }, * { identifier: "imgly_sticker_shapes_badge_15" }, * { identifier: "imgly_sticker_shapes_badge_20" }, * { identifier: "imgly_sticker_shapes_badge_18" }, * { identifier: "imgly_sticker_shapes_badge_19" }, * { identifier: "imgly_sticker_shapes_arrow_02" }, * { identifier: "imgly_sticker_shapes_arrow_03" }, * { identifier: "imgly_sticker_shapes_spray_01" }, * { identifier: "imgly_sticker_shapes_spray_04" }, * { identifier: "imgly_sticker_shapes_spray_03" }, * ]}, * { identifier: "imgly_sticker_category_animated", items: [ * { identifier: "imgly_sticker_animated_camera" }, * { identifier: "imgly_sticker_animated_clouds" }, * { identifier: "imgly_sticker_animated_coffee" }, * { identifier: "imgly_sticker_animated_fire" }, * { identifier: "imgly_sticker_animated_flower" }, * { identifier: "imgly_sticker_animated_gift" }, * { identifier: "imgly_sticker_animated_heart" }, * { identifier: "imgly_sticker_animated_movie_clap" }, * { identifier: "imgly_sticker_animated_rainbow" }, * { identifier: "imgly_sticker_animated_stars" }, * { identifier: "imgly_sticker_animated_sun" }, * { identifier: "imgly_sticker_animated_thumbs_up" }, * ]}, * ] */ categories?: (StickerCategory | ExistingStickerCategory | ExistingStickerProviderCategory)[]; /** * Defines all available colors that can be applied to stickers with a `tintMode` other than `TintMode.NONE`. * The color pipette is always added. * @example // Defaults to: * [ * { color: [0.00, 0.00, 0.00, 0], name: "Transparent" }, * { color: [1.00, 1.00, 1.00, 1], name: "White" }, * { color: [0.49, 0.49, 0.49, 1], name: "Gray" }, * { color: [0.00, 0.00, 0.00, 1], name: "Black" }, * { color: [0.40, 0.80, 1.00, 1], name: "Light blue" }, * { color: [0.40, 0.53, 1.00, 1], name: "Blue" }, * { color: [0.53, 0.40, 1.00, 1], name: "Purple" }, * { color: [0.87, 0.40, 1.00, 1], name: "Orchid" }, * { color: [1.00, 0.40, 0.80, 1], name: "Pink" }, * { color: [0.90, 0.31, 0.31, 1], name: "Red" }, * { color: [0.95, 0.53, 0.33, 1], name: "Orange" }, * { color: [1.00, 0.80, 0.40, 1], name: "Gold" }, * { color: [1.00, 0.97, 0.39, 1], name: "Yellow" }, * { color: [0.80, 1.00, 0.40, 1], name: "Olive" }, * { color: [0.33, 1.00, 0.53, 1], name: "Green" }, * { color: [0.33, 1.00, 0.92, 1], name: "Aquamarin" }, * ] */ colors?: ColorPalette; /** * Defines all allowed actions for the sticker tool menu. Only buttons for allowed actions are visible and shown in the given order. * @note The `StickerAction.REMOVE_BACKGROUND` action is only shown for personal and external (non-animated) stickers where a person could be detected. This feature is only supported on devices running iOS 15+. * @note The `StickerAction.DURATION` action is only shown when editing videos. * @example // Defaults to: * [StickerAction.DURATION, StickerAction.REPLACE, StickerAction.OPACITY, StickerAction.COLOR, StickerAction.REMOVE_BACKGROUND] */ actions?: StickerAction[]; /** * Defines all allowed actions for the sticker tool that are displayed as overlay buttons on the canvas. * Only buttons for allowed actions are visible. * @example // Defaults to: * [CanvasAction.ADD, CanvasAction.DELETE, CanvasAction.FLIP, CanvasAction.BRING_TO_FRONT, CanvasAction.UNDO, CanvasAction.REDO] */ canvasActions?: Array< CanvasAction.UNDO | CanvasAction.REDO | CanvasAction.DELETE | CanvasAction.BRING_TO_FRONT | CanvasAction.ADD | CanvasAction.FLIP >; /** * If enabled the user can create personal stickers from the device's photo library. A button is added as first item * in the menu in front of the sticker categories which modally presents an image selection dialog for personal sticker creation. * Personal stickers will be added to a personal sticker category with the identifier `"imgly_sticker_category_personal"` which * will be added between the button and the regular sticker categories if it does not exist. * @example // Defaults to: * false */ personalStickers?: boolean; /** * The default tint mode for personal stickers. * @example // Defaults to: * TintMode.NONE */ defaultPersonalStickerTintMode?: TintMode; } /** * Configuration options for `Tool.TEXT`. */ text?: { /** * Defines all available fonts. * New items can be mixed and matched with existing ones. * @example // Defaults to: * [ * { identifier: "imgly_font_open_sans_bold" }, * { identifier: "imgly_font_aleo_bold" }, * { identifier: "imgly_font_amaticsc" }, * { identifier: "imgly_font_archivo_black" }, * { identifier: "imgly_font_bungee_inline" }, * { identifier: "imgly_font_campton_bold" }, * { identifier: "imgly_font_carter_one" }, * { identifier: "imgly_font_codystar" }, * { identifier: "imgly_font_fira_sans_regular" }, * { identifier: "imgly_font_galano_grotesque_bold" }, * { identifier: "imgly_font_krona_one" }, * { identifier: "imgly_font_kumar_one_outline" }, * { identifier: "imgly_font_lobster" }, * { identifier: "imgly_font_molle" }, * { identifier: "imgly_font_monoton" }, * { identifier: "imgly_font_nixie_one" }, * { identifier: "imgly_font_notable" }, * { identifier: "imgly_font_ostrich_sans_black" }, * { identifier: "imgly_font_ostrich_sans_bold" }, * { identifier: "imgly_font_oswald_semi_bold" }, * { identifier: "imgly_font_palanquin_dark_semi_bold" }, * { identifier: "imgly_font_permanent_marker" }, * { identifier: "imgly_font_poppins" }, * { identifier: "imgly_font_roboto_black_italic" }, * { identifier: "imgly_font_roboto_light_italic" }, * { identifier: "imgly_font_sancreek" }, * { identifier: "imgly_font_stint_ultra_expanded" }, * { identifier: "imgly_font_trash_hand" }, * { identifier: "imgly_font_vt323" }, * { identifier: "imgly_font_yeseva_one" }, * ] */ fonts?: (Font | ExistingItem)[]; /** * Defines all allowed actions for the text tool menu. Only buttons for allowed actions are visible and shown in the given order. * @note The `TextAction.DURATION` action is only shown when editing videos. * @example // Defaults to: * [TextAction.DURATION, TextAction.FONT, TextAction.COLOR, TextAction.BACKGROUND_COLOR, TextAction.ALIGNMENT] */ actions?: TextAction[]; /** * Defines all allowed actions for the text tool that are displayed as overlay buttons on the canvas. * @example // Defaults to: * [CanvasAction.ADD, CanvasAction.DELETE, CanvasAction.BRING_TO_FRONT, CanvasAction.UNDO, CanvasAction.REDO] */ canvasActions?: Array< CanvasAction.UNDO | CanvasAction.REDO | CanvasAction.DELETE | CanvasAction.BRING_TO_FRONT | CanvasAction.ADD | CanvasAction.FLIP >; /** * Defines all available colors that can be applied to the text. * The color pipette is always added. * @example // Defaults to: * [ * { color: [1.00, 1.00, 1.00, 1], name: "White" }, * { color: [0.49, 0.49, 0.49, 1], name: "Gray" }, * { color: [0.00, 0.00, 0.00, 1], name: "Black" }, * { color: [0.40, 0.80, 1.00, 1], name: "Light blue" }, * { color: [0.40, 0.53, 1.00, 1], name: "Blue" }, * { color: [0.53, 0.40, 1.00, 1], name: "Purple" }, * { color: [0.87, 0.40, 1.00, 1], name: "Orchid" }, * { color: [1.00, 0.40, 0.80, 1], name: "Pink" }, * { color: [0.90, 0.31, 0.31, 1], name: "Red" }, * { color: [0.95, 0.53, 0.33, 1], name: "Orange" }, * { color: [1.00, 0.80, 0.40, 1], name: "Gold" }, * { color: [1.00, 0.97, 0.39, 1], name: "Yellow" }, * { color: [0.80, 1.00, 0.40, 1], name: "Olive" }, * { color: [0.33, 1.00, 0.53, 1], name: "Green" }, * { color: [0.33, 1.00, 0.92, 1], name: "Aquamarin" }, * ] */ textColors?: ColorPalette; /** * Defines all available colors that can be applied to the background. * The color pipette is always added. * @example // Defaults to: * [ * { color: [0.00, 0.00, 0.00, 0], name: "Transparent" }, * { color: [1.00, 1.00, 1.00, 1], name: "White" }, * { color: [0.49, 0.49, 0.49, 1], name: "Gray" }, * { color: [0.00, 0.00, 0.00, 1], name: "Black" }, * { color: [0.40, 0.80, 1.00, 1], name: "Light blue" }, * { color: [0.40, 0.53, 1.00, 1], name: "Blue" }, * { color: [0.53, 0.40, 1.00, 1], name: "Purple" }, * { color: [0.87, 0.40, 1.00, 1], name: "Orchid" }, * { color: [1.00, 0.40, 0.80, 1], name: "Pink" }, * { color: [0.90, 0.31, 0.31, 1], name: "Red" }, * { color: [0.95, 0.53, 0.33, 1], name: "Orange" }, * { color: [1.00, 0.80, 0.40, 1], name: "Gold" }, * { color: [1.00, 0.97, 0.39, 1], name: "Yellow" }, * { color: [0.80, 1.00, 0.40, 1], name: "Olive" }, * { color: [0.33, 1.00, 0.53, 1], name: "Green" }, * { color: [0.33, 1.00, 0.92, 1], name: "Aquamarin" }, * ] */ backgroundColors?: ColorPalette; /** * Defines the default text color for newly created text. * @example // Defaults to: * [1, 1, 1, 1] */ defaultTextColor?: Color; /** * Whether the user can use emojis as text input. * @note Emojis are not cross-platform compatible. If you use the serialization feature to share edits * across different platforms emojis will be renderd with the system's local set of emojis and will appear differently. * @example // Defaults to: * false */ allowEmojis?: boolean; } /** * Configuration options for `Tool.TEXT_DESIGN`. */ textdesign?: { /** * Defines all available text designs. * New items can be mixed and matched with existing ones. * @example // Defaults to: * [ * { identifier: "imgly_text_design_blocks" }, * { identifier: "imgly_text_design_rotated" }, * { identifier: "imgly_text_design_blocks_light" }, * { identifier: "imgly_text_design_equal_width" }, * { identifier: "imgly_text_design_masked" }, * { identifier: "imgly_text_design_celebrate" }, * { identifier: "imgly_text_design_sunshine" }, * { identifier: "imgly_text_design_masked_badge" }, * { identifier: "imgly_text_design_blocks_condensed" }, * { identifier: "imgly_text_design_celebrate_simple" }, * { identifier: "imgly_text_design_equal_width_fat" }, * { identifier: "imgly_text_design_watercolor" }, * { identifier: "imgly_text_design_particles" }, * { identifier: "imgly_text_design_masked_speech_bubble" }, * { identifier: "imgly_text_design_masked_speech_bubble_comic" }, * { identifier: "imgly_text_design_multiline" }, * ] */ items?: ExistingItem[]; /** * Defines all allowed actions for the text design tool that are displayed as overlay buttons on the canvas. * @example // Defaults to: * [CanvasAction.ADD, CanvasAction.DELETE, CanvasAction.INVERT, CanvasAction.BRING_TO_FRONT, CanvasAction.UNDO, CanvasAction.REDO] */ canvasActions?: Array< CanvasAction.UNDO | CanvasAction.REDO | CanvasAction.DELETE | CanvasAction.BRING_TO_FRONT | CanvasAction.ADD | CanvasAction.INVERT >; /** * Defines all available colors that can be applied to the text design. * @example // Defaults to: * [ * { color: [1.00, 1.00, 1.00, 1], name: "White" }, * { color: [0.49, 0.49, 0.49, 1], name: "Gray" }, * { color: [0.00, 0.00, 0.00, 1], name: "Black" }, * { color: [0.40, 0.80, 1.00, 1], name: "Light blue" }, * { color: [0.40, 0.53, 1.00, 1], name: "Blue" }, * { color: [0.53, 0.40, 1.00, 1], name: "Purple" }, * { color: [0.87, 0.40, 1.00, 1], name: "Orchid" }, * { color: [1.00, 0.40, 0.80, 1], name: "Pink" }, * { color: [0.90, 0.31, 0.31, 1], name: "Red" }, * { color: [0.95, 0.53, 0.33, 1], name: "Orange" }, * { color: [1.00, 0.80, 0.40, 1], name: "Gold" }, * { color: [1.00, 0.97, 0.39, 1], name: "Yellow" }, * { color: [0.80, 1.00, 0.40, 1], name: "Olive" }, * { color: [0.33, 1.00, 0.53, 1], name: "Green" }, * { color: [0.33, 1.00, 0.92, 1], name: "Aquamarin" }, * ] */ colors?: ColorPalette; } /** * Configuration options for `Tool.OVERLAY`. */ overlay?: { /** * Defines all available overlays. * New items can be mixed and matched with existing ones. * `NONE` is always added. * @example // Defaults to: * [ * { identifier: "imgly_overlay_golden" }, * { identifier: "imgly_overlay_lightleak1" }, * { identifier: "imgly_overlay_rain" }, * { identifier: "imgly_overlay_mosaic" }, * { identifier: "imgly_overlay_vintage" }, * { identifier: "imgly_overlay_paper" }, * ] */ items?: (Overlay | ExistingItem)[]; /** * Defines all allowed blend modes for the overlays. * @example // Defaults to: * [BlendMode.NORMAL, BlendMode.MULTIPLY, BlendMode.OVERLAY, BlendMode.SCREEN, BlendMode.LIGHTEN, BlendMode.SOFT_LIGHT, BlendMode.HARD_LIGHT, BlendMode.DARKEN, BlendMode.COLOR_BURN] */ blendModes?: BlendMode[]; } /** * Configuration options for `Tool.FRAME`. */ frame?: { /** * Defines all available frames. * New items can be mixed and matched with existing ones. * `NONE` is always added. * @example // Defaults to: * [ * { identifier: "imgly_frame_dia" }, * { identifier: "imgly_frame_art_decor" }, * { identifier: "imgly_frame_black_passepartout" }, * { identifier: "imgly_frame_wood_passepartout" }, * ] */ items?: (Frame | ExistingItem)[]; /** * Defines all allowed actions for the frame tool menu. Only buttons for allowed actions are visible and shown in the given order. * @example // Defaults to: * [FrameAction.REPLACE, FrameAction.WIDTH, FrameAction.OPACITY] */ actions?: FrameAction[]; } /** * Configuration options for `Tool.BRUSH`. */ brush?: { /** * Defines all allowed actions for the brush tool menu. Only buttons for allowed actions are visible and shown in the given order. * @example // Defaults to: * [BrushAction.COLOR, BrushAction.SIZE, BrushAction.HARDNESS] */ actions?: BrushAction[]; /** * Defines all allowed actions for the brush tool that are displayed as overlay buttons on the canvas. * Only buttons for allowed actions are visible. * @example // Defaults to: * [CanvasAction.DELETE, CanvasAction.BRING_TO_FRONT, CanvasAction.UNDO, CanvasAction.REDO] */ canvasActions?: Array< CanvasAction.UNDO | CanvasAction.REDO | CanvasAction.DELETE | CanvasAction.BRING_TO_FRONT >; /** * Defines all available colors that can be applied to the brush. * The color pipette is always added. * @example // Defaults to: * [ * { color: [1.00, 1.00, 1.00, 1], name: "White" }, * { color: [0.49, 0.49, 0.49, 1], name: "Gray" }, * { color: [0.00, 0.00, 0.00, 1], name: "Black" }, * { color: [0.40, 0.80, 1.00, 1], name: "Light blue" }, * { color: [0.40, 0.53, 1.00, 1], name: "Blue" }, * { color: [0.53, 0.40, 1.00, 1], name: "Purple" }, * { color: [0.87, 0.40, 1.00, 1], name: "Orchid" }, * { color: [1.00, 0.40, 0.80, 1], name: "Pink" }, * { color: [0.90, 0.31, 0.31, 1], name: "Red" }, * { color: [0.95, 0.53, 0.33, 1], name: "Orange" }, * { color: [1.00, 0.80, 0.40, 1], name: "Gold" }, * { color: [1.00, 0.97, 0.39, 1], name: "Yellow" }, * { color: [0.80, 1.00, 0.40, 1], name: "Olive" }, * { color: [0.33, 1.00, 0.53, 1], name: "Green" }, * { color: [0.33, 1.00, 0.92, 1], name: "Aquamarin" }, * ] */ colors?: ColorPalette; /** * Defines the default brush color. * @example // Defaults to: * [1, 1, 1, 1] */ defaultColor?: Color; /** * The minimum size that a brush can have. This value is measured in relation to the * smaller side of the image that the user is editing. If the value is `null` the * minimum brush size is set to the absolute size of a single pixel of the edited image. * @example // Defaults to: * null */ minimumSize?: number; /** * The maximum size that a brush can have. This value is measured in relation to the * smaller side of the image that the user is editing. * @example // Defaults to: * 0.125 */ maximumSize?: number; /** * The default size of the brush. This value is measured in relation to the * smaller side of the image that the user is editing. * @example // Defaults to: * 0.05 */ defaultSize?: number; /** * The minimum hardness factor a brush can have. * @example // Defaults to: * 0 */ minimumHardness?: number; /** * The maximum hardness factor a brush can have. * @example // Defaults to: * 1 */ maximumHardness?: number; /** * The default hardness factor of the brush. * @example // Defaults to: * 0.5 */ defaultHardness?: number; } /** * Export configuration options. */ export?: { /** * Image export configuration if the editor supports image editing. */ image?: { /** * The image export type. * @example // Defaults to: * ImageExportType.FILE_URL */ exportType?: ImageExportType; /** * The image file format of the generated high resolution image. * @example // Defaults to: * ImageFormat.JPEG */ format?: ImageFormat; /** * The compression quality to use when creating the output image with a lossy file format. * @example // Defaults to: * 0.9 */ quality?: number; } /** * Video export configuration if the editor supports video editing. */ video?: { /** * The video container format to export. * @example // Defaults to: * VideoFormat.MP4 */ format?: VideoFormat; /** * The video codec to use for the exported video. * @example // Defaults to: * VideoCodec.H264 */ codec?: VideoCodec; /** * The compression quality to use when exporting to VideoCodec.HEVC. * @example // Defaults to: * 0.9 */ quality?: number; /** * The bit rate in bits per second to use when exporting to VideoCodec.H264. * @example // Defaults to: * null */ bitRate?: number | null; /** * Whether the video editor should include the video segments of the composition * in the `VideoEditorResult`. * @note If enabled, you need to release the result via `VideoEditorResult.release()` * after processing the video segments in order to prevent memory leaks. * * @example // Defaults to: * false */ segments?: boolean; } /** * The filename for the exported data if the `exportType` is not `ImageExportType.DATA_URL`. * The correct filename extension will be automatically added * based on the selected export format. It can be an absolute path or file URL or a relative path. * If some relative path is chosen it will be created in a temporary system directory and overwritten * if the corresponding file already exists. If the value is `null` an new temporary file will be * created for every export. * @note Please make sure that the provided `filename` is valid for the different devices and that * your application has the corresponding access rights to write to the desired location. For Android, * you will want to make sure to set this inside one of the directories conforming to scoped storage: * - DCIM/ * - Pictures/ * * For Videos you can additionally use: * - Movies/ * @example // Defaults to: * null */ filename?: string | null; /** * If enabled, the photo/video will be rendered and exported in the defined output format * even if no changes have been applied. Otherwise, the input asset will be passed * through and might not match the defined output format. * @example // Defaults to: * false */ force?: boolean; /** * Export configuration of the serialized image and video editing operations that were applied to * the input media loaded into the editor. This also allows to recover these operations the next * time the editor is opened again. */ serialization?: { /** * Whether the serialization of the editing operations should be exported. * @example // Defaults to: * false */ enabled?: boolean; /** * The serialization export type. * @example // Defaults to: * SerializationExportType.FILE_URL */ exportType?: SerializationExportType; /** * The file URI for the exported serialization data if the `exportType` is `SerializationExportType.FILE_URL`. * The filename extension for JSON will be automatically added. * If the value is `null` an new temporary file will be created for every export based on the filename for * the exported image or video data. * @note Please make sure that the provided `filename` is a valid file URI for the different devices and that * your application has the corresponding access rights to write to the desired location. * @example // Defaults to: * null */ filename?: string | null; /** * Whether the serialization data should include the original input image data. * @example // Defaults to: * false */ embedSourceImage?: boolean; } } /** * Defines the theme that should be used to style the user interface. * @note This runtime theming configuration is currently not supported on Android. * Please use the compile-time theming configuration instead: * https://docs.photoeditorsdk.com/guides/android/v7_1/customization/themes#color-theming * @example // Defaults to: * ExistingTheme.DARK */ theme?: ExistingTheme | string; /** * Customization options. */ custom?: { /** * Theming options to change the user interface appearance. This allows to alter predefined existing * theme presets or to create new themes which can be enabled when their corresponding key (name) * is set as the `Configuration.theme`. * @note This runtime theming configuration is currently not supported on Android. * Please use the compile-time theming configuration instead: * https://docs.photoeditorsdk.com/guides/android/v7_1/customization/themes#color-theming */ themes?: { [key: string]: Theme; } } } /** An image and/or video editing tool. */ export enum Tool { /** A tool to compose a video from multiple video clips and to trim the timeline of the composition and the individual clips. */ COMPOSITION = "composition", /** A tool to trim the timeline of videos. */ TRIM = "trim", /** A tool to edit the audio track of videos. */ AUDIO = "audio", /** A tool to apply an transformation, such as cropping or rotation. */ TRANSFORM = "transform", /** A tool to apply an image filter effect. */ FILTER = "filter", /** A tool to apply image adjustments. */ ADJUSTMENT = "adjustment", /** A tool to add blur. */ FOCUS = "focus", /** A tool to add stickers. */ STICKER = "sticker", /** A tool to add texts. */ TEXT = "text", /** A tool to add text designs. */ TEXT_DESIGN = "textdesign", /** A tool to add an overlay. */ OVERLAY = "overlay", /** A tool to add a frame. */ FRAME = "frame", /** A tool to add drawings. */ BRUSH = "brush", } /** An image format. */ export enum ImageFormat { JPEG = "image/jpeg", PNG = "image/png", HEIF = "image/heif", TIFF = "image/tiff", } /** A video format. */ export enum VideoFormat { MP4 = "video/mp4", MOV = "video/quicktime", } /** A video codec. */ export enum VideoCodec { H264 = "h264", HEVC = "hevc", } /** An image export type. */ export enum ImageExportType { /** The exported image is saved to a file and the corresponding file URL is returned. */ FILE_URL = "file-url", /** The exported image is returned as a data URL which encodes the exported image. */ DATA_URL = "data-url", } /** A serialization export type. */ export enum SerializationExportType { /** The exported serialization is saved to a file and the corresponding file URL is returned. */ FILE_URL = "file-url", /** The exported serialization is returned as an object. */ OBJECT = "object", } /** An adjustment tool. */ export enum AdjustmentTool { BRIGHTNESS = "brightness", CONTRAST = "contrast", SATURATION = "saturation", CLARITY = "clarity", SHADOWS = "shadows", HIGHLIGHTS = "highlights", EXPOSURE = "exposure", GAMMA = "gamma", BLACKS = "blacks", WHITES = "whites", TEMPERATURE = "temperature", SHARPNESS = "sharpness", } /** A blur tool. */ export enum FocusTool { NONE = "none", RADIAL = "radial", MIRRORED = "mirrored", LINEAR = "linear", GAUSSIAN = "gaussian", } /** A force trim mode. */ export enum ForceTrimMode { /** * Will always automatically present the composition tool or the trim tool * after opening the editor and force your users to change the length of the video(s). * * The composition tool will only be used if it is included in your subscription and if it is included in `tools` * or if both the composition and trim tool are not included in `tools`. * Otherwise, the trim tool is used