From 3a82f02ad130f48794db8cb33db1aac8362e3c97 Mon Sep 17 00:00:00 2001 From: Piter Date: Fri, 23 Aug 2019 10:24:41 +0200 Subject: [PATCH] feat(transforms): Add animate transformation (#274) * feat(transforms): Add animate transformation * fix(transforms): fix animate params --- src/lib/filelink.spec.ts | 17 ++++++++++++- src/lib/filelink.ts | 43 +++++++++++++++++++++----------- src/schema/definitions.schema.ts | 4 ++- src/schema/transforms.schema.ts | 42 ++++++++++++++++++++++++++++++- 4 files changed, 89 insertions(+), 17 deletions(-) diff --git a/src/lib/filelink.spec.ts b/src/lib/filelink.spec.ts index 950d0918..7eb394e4 100644 --- a/src/lib/filelink.spec.ts +++ b/src/lib/filelink.spec.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Filelink, ShapeType, VideoAccessMode } from './filelink'; +import { Filelink, ShapeType, VideoAccessMode, AnimationParams, FitOptions, Align } from './filelink'; import { TransformSchema } from './../schema/transforms.schema'; import * as validator from '../schema'; @@ -257,6 +257,21 @@ describe('filelink', () => { expect(filelink.toString()).toBe('https://customDomain.com/DEFAULT_API_KEY/cache=expiry:666/5aYkEQJSQCmYShsoCnZN'); }); + it('should be able add animation transform', () => { + const params: AnimationParams = { + loop: 1, + delay: 10, + width: 10, + height: 10, + fit: FitOptions.scale, + background: 'transparent', + align: [Align.top, Align.center], + }; + + filelink.animate(params); + expect(filelink.toString()).toBe('https://customDomain.com/DEFAULT_API_KEY/animate=loop:1,delay:10,width:10,height:10,fit:scale,background:transparent,align:[top,center]/5aYkEQJSQCmYShsoCnZN'); + }); + it('should be able to resize', () => { const resizeParams = { width: 200, diff --git a/src/lib/filelink.ts b/src/lib/filelink.ts index e6532bab..fe434b32 100644 --- a/src/lib/filelink.ts +++ b/src/lib/filelink.ts @@ -23,28 +23,21 @@ import { FilestackError, FilestackErrorType } from './../filestack_error'; import Debug from 'debug'; const debug = Debug('fs:filelink'); -/** - * Align enum - */ -export enum AlignOptions { + +export enum Align { left = 'left', right = 'right', center = 'center', bottom = 'bottom', top = 'top', + faces = 'faces', + middle = 'middle', } /** - * Align enum with faces option + * Align */ -export enum AlignFacesOptions { - left = 'left', - right = 'right', - center = 'center', - bottom = 'bottom', - top = 'top', - faces = 'faces', -} +export type AlignOptions = Align | [Align.top | Align.middle | Align.bottom, Align.left | Align.center | Align.right]; /** * Fit enum @@ -184,11 +177,21 @@ export type StoreParams = StoreBaseParams & { base64decode?: boolean; }; +export interface AnimationParams { + delay?: number; + loop?: number; + width?: number; + height?: number; + fit?: FitOptions; + align?: AlignOptions; + background?: string; +} + export interface ResizeParams { width?: number; height?: number; fit?: FitOptions; - align?: AlignFacesOptions; + align?: AlignOptions; } export interface CropParams { @@ -824,6 +827,18 @@ export class Filelink { return this.addTask('sfw', true); } + /** + * Add animate transformation + * + * @see https://www.filestack.com/docs/api/processing/#animate-images-to-gif + * @param params + * @returns this + * @memberof Filelink + */ + animate(params: AnimationParams) { + return this.addTask('animate', params); + } + /** * Adds store transformation * diff --git a/src/schema/definitions.schema.ts b/src/schema/definitions.schema.ts index 15c7dda8..150c1431 100644 --- a/src/schema/definitions.schema.ts +++ b/src/schema/definitions.schema.ts @@ -76,7 +76,7 @@ export const DefinitionsSchema = { pattern: '^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$', // without # at the begining }, { type: 'string', - enum: ['aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fractal', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray0', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9', 'gray10', 'gray11', 'gray12', 'gray13', 'gray14', 'gray15', 'gray16', 'gray17', 'gray18', 'gray19', 'gray20', 'gray21', 'gray22', 'gray23', 'gray24', 'gray25', 'gray26', 'gray27', 'gray28', 'gray29', 'gray30', 'gray31', 'gray32', 'gray33', 'gray34', 'gray35', 'gray36', 'gray37', 'gray38', 'gray39', 'gray40', 'gray41', 'gray42', 'gray43', 'gray44', 'gray45', 'gray46', 'gray47', 'gray48', 'gray49', 'gray50', 'gray51', 'gray52', 'gray53', 'gray54', 'gray55', 'gray56', 'gray57', 'gray58', 'gray59', 'gray60', 'gray61', 'gray62', 'gray63', 'gray64', 'gray65', 'gray66', 'gray67', 'gray68', 'gray69', 'gray70', 'gray71', 'gray72', 'gray73', 'gray74', 'gray75', 'gray76', 'gray77', 'gray78', 'gray79', 'gray80', 'gray81', 'gray82', 'gray83', 'gray84', 'gray85', 'gray86', 'gray87', 'gray88', 'gray89', 'gray90', 'gray91', 'gray92', 'gray93', 'gray94', 'gray95', 'gray96', 'gray97', 'gray98', 'gray99', 'gray100', 'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'none', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen',], + enum: ['aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fractal', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray0', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9', 'gray10', 'gray11', 'gray12', 'gray13', 'gray14', 'gray15', 'gray16', 'gray17', 'gray18', 'gray19', 'gray20', 'gray21', 'gray22', 'gray23', 'gray24', 'gray25', 'gray26', 'gray27', 'gray28', 'gray29', 'gray30', 'gray31', 'gray32', 'gray33', 'gray34', 'gray35', 'gray36', 'gray37', 'gray38', 'gray39', 'gray40', 'gray41', 'gray42', 'gray43', 'gray44', 'gray45', 'gray46', 'gray47', 'gray48', 'gray49', 'gray50', 'gray51', 'gray52', 'gray53', 'gray54', 'gray55', 'gray56', 'gray57', 'gray58', 'gray59', 'gray60', 'gray61', 'gray62', 'gray63', 'gray64', 'gray65', 'gray66', 'gray67', 'gray68', 'gray69', 'gray70', 'gray71', 'gray72', 'gray73', 'gray74', 'gray75', 'gray76', 'gray77', 'gray78', 'gray79', 'gray80', 'gray81', 'gray82', 'gray83', 'gray84', 'gray85', 'gray86', 'gray87', 'gray88', 'gray89', 'gray90', 'gray91', 'gray92', 'gray93', 'gray94', 'gray95', 'gray96', 'gray97', 'gray98', 'gray99', 'gray100', 'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'none', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen', 'transparent'], }], }, pageFormatDef: { @@ -159,6 +159,7 @@ export const DefinitionsSchema = { 'left', 'center', 'right', + 'faces', ], }, { @@ -166,6 +167,7 @@ export const DefinitionsSchema = { uniqueItems: true, additionalItems: false, minItems: 2, + maxItems: 2, default: ['middle', 'center'], items: [ { diff --git a/src/schema/transforms.schema.ts b/src/schema/transforms.schema.ts index 8149d204..5a3b513b 100644 --- a/src/schema/transforms.schema.ts +++ b/src/schema/transforms.schema.ts @@ -86,13 +86,53 @@ export const TransformSchema = { type: 'boolean', additionalProperties: false, }, + animate: { + type: 'object', + properties: { + delay: { + type: 'integer', + minimum: 0, + maximum: 10000, + default: 100, + }, + loop: { + type: 'integer', + minimum: 0, + maximum: 1000, + default: 0, + }, + width: { + type: 'integer', + minimum: 1, + maximum: 1800, + }, + height: { + type: 'integer', + minimum: 1, + maximum: 1800, + }, + fit: { + type: 'string', + default: 'clip', + enum: ['clip', 'scale', 'crop'], + }, + background: { + '$ref': 'colorDef', + default: 'transparent', + }, + align: { + '$ref': 'positionDef', + default: 'center', + }, + }, + }, metadata: { type: 'object', params: { type: 'array', items: { type: 'string', - 'enum': [ + enum: [ 'filename', 'mimetype', 'size',