add fadeIn fadeOut from/to Json (#511)

Author: strausr

__TESTS_BUNDLE_SIZE__/bundleSizeTestCases.ts

@@ -74,7 +74,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Import all of the SDK',
-    sizeLimitInKB: 125,
+    sizeLimitInKB: 126,
     importsArray: [
       importFromPackage('* as CloudinaryURLGEN')
     ]
@@ -88,7 +88,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Import All Actions',
-    sizeLimitInKB: 52,
+    sizeLimitInKB: 53,
     importsArray: [
       importFromPackage('Actions')
     ]

__TESTS__/unit/fromJson/effect.fromJson.test.ts

@@ -30,7 +30,9 @@ describe('effect.fromJson', () => {
       { actionType: 'simulateColorblind', condition: 'rod_monochromacy' },
       { actionType: 'deshake', pixels: 16 },
       { actionType: 'pixelate', squareSize: 15, region: { RegionType: 'faces' }},
-      { actionType: 'blur', strength: 5 }
+      { actionType: 'blur', strength: 5 },
+      { actionType: 'fadeIn', length: 13 },
+      { actionType: 'fadeOut', length: 13 }
     ]});
 
     expect(transformation.toString()).toStrictEqual([
@@ -61,7 +63,9 @@ describe('effect.fromJson', () => {
       'e_simulate_colorblind:rod_monochromacy',
       'e_deshake:16',
       'e_pixelate_faces:15',
-      'e_blur:5'
+      'e_blur:5',
+      'e_fade:13',
+      'e_fade:-13'
     ].join('/'));
   });
 });

__TESTS__/unit/toJson/effect.toJson.test.ts

@@ -346,4 +346,30 @@ describe('Effect toJson()', () => {
       ]
     });
   });
+
+  it('effect.FadeIn', () => {
+    const transformation = new Transformation()
+      .addAction(Effect.fadeIn(50));
+    expect(transformation.toJson()).toStrictEqual({
+      actions: [
+        {
+          actionType: 'fadeIn',
+          length: 50,
+        }
+      ]
+    });
+  });
+
+  it('effect.FadeOut', () => {
+    const transformation = new Transformation()
+      .addAction(Effect.fadeOut(50));
+    expect(transformation.toJson()).toStrictEqual({
+      actions: [
+        {
+          actionType: 'fadeOut',
+          length: 50,
+        }
+      ]
+    });
+  });
 });

src/actions/effect.ts

@@ -10,7 +10,7 @@ import {SimulateColorBlindEffectAction} from "./effect/SimulateColorBlind.js";
 import {EffectActionWithLevel}from "./effect/EffectActions/EffectActionWithLevel.js";
 import {AssistColorBlindEffectAction} from "./effect/AssistColorBlind.js";
 import {GradientFadeEffectAction} from "./effect/GradientFade.js";
-import {FadeoutEffectAction} from "./effect/leveled/FadeOut.js";
+import {FadeOutEffectAction} from "./effect/leveled/FadeOut.js";
 import {ColorizeEffectAction} from "./effect/Colorize.js";
 import {ShadowEffectAction} from "./effect/Shadow.js";
 import {StyleTransfer} from "./effect/StyleTransfer.js";
@@ -240,7 +240,7 @@ function accelerate(speedIncreasePercent?: number): AccelerationEffectAction {
  * @return {Actions.Effect.FadeInEffectAction}
  */
 function fadeIn(fadeLength?: number):FadeInEffectAction {
-  return new FadeInEffectAction('fade', fadeLength);
+  return new FadeInEffectAction(fadeLength);
 }
 
 
@@ -253,8 +253,8 @@ function fadeIn(fadeLength?: number):FadeInEffectAction {
  * @param {number} fadeLength The time in ms for the fade to occur. (Server default: 2000)
  * @return {Actions.Effect.FadeoutEffectAction}
  */
-function fadeOut(fadeLength?: number):FadeoutEffectAction {
-  return new FadeoutEffectAction('fade', -fadeLength);
+function fadeOut(fadeLength?: number):FadeOutEffectAction {
+  return new FadeOutEffectAction(fadeLength);
 }
 
 
@@ -552,6 +552,8 @@ export declare type EffectActions =
   | BlurAction
   | Pixelate
   | RemoveBackgroundAction
+  | FadeInEffectAction
+  | FadeOutEffectAction
 
 
 export {

src/actions/effect/leveled/FadeIn.ts

@@ -1,16 +1,42 @@
-import {LeveledEffectAction} from "../EffectActions/LeveledEffectAction.js";
+import {Action} from "../../../internal/Action.js";
+import {Qualifier} from "../../../internal/qualifier/Qualifier.js";
+import {QualifierValue} from "../../../internal/qualifier/QualifierValue.js";
+import {IFadeInEffectActionModel} from "../../../internal/models/IEffectActionModel.js";
+import {IActionModel} from "../../../internal/models/IActionModel.js";
 
 
 /**
  * @description Fade out at the end of the video, use the length() method to set the time in ms for the fade to occur. (Server default: 2000)
- * @extends LeveledEffectAction
+ * @extends Action
  * @memberOf Actions.Effect
  * @see Visit {@link Actions.Effect|Effect} for an example
  */
-class FadeInEffectAction extends LeveledEffectAction {
-  // We can't use EffectActionWithLength because this `length` is reversing the sign
-  duration(value: number | string): this {
-    return this.setLevel(value);
+class FadeInEffectAction extends Action{
+  protected _actionModel : IFadeInEffectActionModel = {actionType: 'fadeIn'};
+  constructor(duration?: number) {
+    super();
+    this.addQualifier(new Qualifier('e', new QualifierValue(['fade', `${duration}`]).setDelimiter(':')));
+    duration && (this._actionModel.length = duration);
+  }
+
+  /**
+   *
+   * @description Sets the duration level for the action
+   * @param {string | number} duration - The duration of the effect
+   */
+  duration(duration: number | string): this {
+    this._actionModel.length = duration as number;
+    return this.addQualifier(new Qualifier('e', new QualifierValue(['fade', `${duration}`]).setDelimiter(':')));
+  }
+
+  static fromJson(actionModel: IActionModel): FadeInEffectAction {
+    const {length} = (actionModel as IFadeInEffectActionModel);
+
+    // We are using this() to allow inheriting classes to use super.fromJson.apply(this, [actionModel])
+    // This allows the inheriting classes to determine the class to be created
+    const result = new this(length);
+
+    return result;
   }
 }
 

src/actions/effect/leveled/FadeOut.ts

@@ -1,4 +1,9 @@
 import {LeveledEffectAction} from "../EffectActions/LeveledEffectAction.js";
+import {Action} from "../../../internal/Action.js";
+import {Qualifier} from "../../../internal/qualifier/Qualifier.js";
+import {QualifierValue} from "../../../internal/qualifier/QualifierValue.js";
+import {IFadeOutEffectActionModel} from "../../../internal/models/IEffectActionModel.js";
+import {IActionModel} from "../../../internal/models/IActionModel.js";
 
 
 /**
@@ -7,12 +12,33 @@ import {LeveledEffectAction} from "../EffectActions/LeveledEffectAction.js";
  * @memberOf Actions.Effect
  * @see Visit {@link Actions.Effect|Effect} for an example
  */
-class FadeoutEffectAction extends LeveledEffectAction {
-  // We can't use EffectActionWithLength because this `length` is reversing the sign
-  duration(value: number | string): this {
-    return this.setLevel(-value);
+class FadeOutEffectAction extends Action {
+  protected _actionModel : IFadeOutEffectActionModel = {actionType: 'fadeOut'};
+  constructor(duration: number) {
+    super();
+    this.addQualifier(new Qualifier('e', new QualifierValue(['fade', `-${duration}`]).setDelimiter(':')));
+    duration && (this._actionModel.length = duration);
+  }
+  /**
+   *
+   * @description Sets the duration level for the action
+   * @param {string | number} duration - The duration of the effect
+   */
+  duration(duration: number | string): this {
+    this._actionModel.length = duration as number;
+    return this.addQualifier(new Qualifier('e', new QualifierValue(['fade', `-${duration}`]).setDelimiter(':')));
+  }
+
+  static fromJson(actionModel: IActionModel): FadeOutEffectAction {
+    const {length} = (actionModel as IFadeOutEffectActionModel);
+
+    // We are using this() to allow inheriting classes to use super.fromJson.apply(this, [actionModel])
+    // This allows the inheriting classes to determine the class to be created
+    const result = new this(length);
+
+    return result;
   }
 }
 
 
-export {FadeoutEffectAction};
+export {FadeOutEffectAction};

src/internal/fromJson.ts

@@ -53,6 +53,8 @@ import AudioCodecAction from "../actions/transcode/AudioCodecAction.js";
 import AudioFrequencyAction from "../actions/transcode/AudioFrequencyAction.js";
 import StreamingProfileAction from "../actions/transcode/StreamingProfile.js";
 import ToAnimatedAction from "../actions/transcode/ToAnimatedAction.js";
+import {FadeInEffectAction} from "../actions/effect/leveled/FadeIn.js";
+import {FadeOutEffectAction} from "../actions/effect/leveled/FadeOut.js";
 
 const ActionModelMap: Record<string, IHasFromJson> = {
   scale: ResizeScaleAction,
@@ -116,7 +118,9 @@ const ActionModelMap: Record<string, IHasFromJson> = {
   audioCodec: AudioCodecAction,
   audioFrequency: AudioFrequencyAction,
   streamingProfile: StreamingProfileAction,
-  toAnimated: ToAnimatedAction
+  toAnimated: ToAnimatedAction,
+  fadeIn: FadeInEffectAction,
+  fadeOut: FadeOutEffectAction
 };
 
 /**

src/internal/models/IEffectActionModel.ts

@@ -78,6 +78,14 @@ interface IBlurModel extends IActionModel{
   region?: {RegionType?: string};
 }
 
+interface IFadeInEffectActionModel extends IActionModel{
+  length?: number;
+}
+
+interface IFadeOutEffectActionModel extends IActionModel{
+  length?: number;
+}
+
 export {
   IEffectActionWithLevelModel,
   ISimpleEffectActionModel,
@@ -93,5 +101,7 @@ export {
   ISimulateColorBlindEffectModel,
   IDeshakeEffectModel,
   IPixelateModel,
-  IBlurModel
+  IBlurModel,
+  IFadeInEffectActionModel,
+  IFadeOutEffectActionModel
 };