feat: separate effects for vide / image; storybook adjustments

Author: jerzy-mankowski

packages/react/src/CloudinaryImage.stories.tsx

@@ -15,18 +15,22 @@ export default meta;
 type Story = StoryObj<typeof CloudinaryImage>;
 
 export const VersionV3: Story = {
-  args: {
-    src: 'https://res.cloudinary.com/demo/image/upload/front_face',
-    alt: 'front face',
-    removeBackground: true,
-    effects: [{ type: 'sepia' }],
-    resize: { height: 333 },
-    format: 'auto',
-    quality: 'auto',
-    opacity: 100,
-    background: { type: 'color', color: 'white' },
-    roundCorners: 0,
-    rotate: 0
+  render: () => {
+    return (
+      <CloudinaryImage
+        src='https://res.cloudinary.com/demo/image/upload/front_face'
+        alt='front face'
+        removeBackground
+        effects={[{ type: 'sepia' }]}
+        resize={{ height: 333 }}
+        format='auto'
+        quality='auto'
+        opacity={100}
+        background={{ type: 'color', color: 'white' }}
+        roundCorners={0}
+        rotate={0}
+      />
+    );
   }
 };
 

packages/react/src/CloudinaryImage.tsx

@@ -24,7 +24,7 @@ import { parseOpacity } from './transformationParsers/parseOpacity';
 import { Quality } from './transformationTypes/quality';
 import { ImageFormat } from './transformationTypes/format';
 import { RemoveBackground } from './transformationTypes/removeBackground';
-import { Effect } from './transformationTypes/effect';
+import { ImageEffect } from './transformationTypes/effect';
 import { Background } from './transformationTypes/background';
 import { Rotate } from './transformationTypes/rotate';
 import { RoundCorners } from './transformationTypes/roundCorners';
@@ -36,7 +36,7 @@ type ImageTransformationProps = {
   quality?: Quality;
   format?: ImageFormat;
   removeBackground?: RemoveBackground;
-  effects?: Effect[];
+  effects?: ImageEffect[];
   background?: Background;
   rotate?: Rotate;
   roundCorners?: RoundCorners;

packages/react/src/CloudinaryVideo.stories.tsx

@@ -20,18 +20,22 @@ export default meta;
 type Story = StoryObj<typeof CloudinaryVideo>;
 
 export const Version_v3: Story = {
-  args: {
-    src: 'https://res.cloudinary.com/demo/video/upload/dog.mp4',
-    resize: { height: 333 },
-    roundCorners: 20,
-    duration: '1%',
-    startOffset: 0,
-    videoCodec: 'h264',
-    videoProps: {
-      loop: true,
-      autoPlay: true,
-      muted: true
-    }
+  render: () => {
+    return (
+      <CloudinaryVideo
+        src='https://res.cloudinary.com/demo/video/upload/dog.mp4'
+        videoProps={{
+          loop: true,
+          autoPlay: true,
+          muted: true
+        }}
+        resize={{ height: 333 }}
+        roundCorners={20}
+        duration='1%'
+        startOffset={0}
+        videoCodec='h264'
+      />
+    )
   }
 };
 

packages/react/src/CloudinaryVideo.tsx

@@ -32,15 +32,15 @@ import { parseIgnoreAspectRatio } from './transformationParsers/parseIgnoreAspec
 import { parseZoom } from './transformationParsers/parseZoom';
 import { RemoveBackground } from './transformationTypes/removeBackground';
 import { parseEffects } from './transformationParsers/parseEffects';
-import { Effect } from './transformationTypes/effect';
+import { VideoEffect } from './transformationTypes/effect';
 import { parseRemoveBackground } from './transformationParsers/parseRemoveBackground';
 import { Resize } from './transformationTypes/resize';
 
 export type VideoTransformationProps = {
   quality?: Quality;
   format?: VideoFormat;
   removeBackground?: RemoveBackground;
-  effects?: Effect[];
+  effects?: VideoEffect[];
   background?: Background;
   rotate?: Rotate;
   roundCorners?: RoundCorners;

packages/react/src/transformationParsers/parseEffects.ts

@@ -1,7 +1,7 @@
-import { Effect } from '../transformationTypes/effect';
+import { AnyEffect } from '../transformationTypes/effect';
 import { parseRemoveBackground as ParseRemoveBackground } from './parseRemoveBackground';
 
-export const parseEffects = (parseRemoveBackground: typeof ParseRemoveBackground) => (effects: Effect[]): string => {
+export const parseEffects = (parseRemoveBackground: typeof ParseRemoveBackground) => (effects: AnyEffect[]): string => {
   return effects
     .map((effect):`e_${string}` => {
       switch (effect.type) {
@@ -12,7 +12,7 @@ export const parseEffects = (parseRemoveBackground: typeof ParseRemoveBackground
         case 'fade':
           return `e_fade:${effect.duration}`;
         case 'gamma':
-          return `e_gamma:${effect.duration}`;
+          return `e_gamma:${effect.level}`;
         case 'grayscale':
           return 'e_grayscale';
         case 'light':

packages/react/src/transformationTypes/effect.ts

@@ -19,7 +19,7 @@ type Gamma = {
   /**
    * @description -50 to 150
    */
-  duration: number;
+  level: number;
 }
 // FIXME image only
 type Grayscale = {
@@ -72,20 +72,21 @@ type Auto = {
   blendPercentage?: number;
 }
 
-type AutoColor = {
-  type: 'autoColor';
-
-}
-
-export type Effect =
+export type ImageEffect =
   | Sepia
   | BackgroundRemoval
-  | Fade
   | Gamma
   | Grayscale
   | Light
   | Negate
-  | Noise
   | Pixelate
   | Blur
   | Auto;
+
+export type VideoEffect =
+  | Fade
+  | Gamma
+  | Noise
+  | Blur;
+
+export type AnyEffect = ImageEffect | VideoEffect;