fix: renamed resize:thumb-> thumbnail

Author: jerzy-mankowski

packages/react/src/demo.tsx

@@ -6,7 +6,7 @@ import { videoCodec } from '@cloudinary/url-gen/actions/transcode';
 import { h264 } from '@cloudinary/url-gen/qualifiers/videoCodec';
 import { baseline } from '@cloudinary/url-gen/qualifiers/videoCodecProfile';
 import { vcl31 } from '@cloudinary/url-gen/qualifiers/videoCodecLevel'
-import { sepia, backgroundRemoval } from '@cloudinary/url-gen/actions/effect';
+import { sepia, backgroundRemoval, blackwhite } from '@cloudinary/url-gen/actions/effect';
 import { format, quality } from '@cloudinary/url-gen/actions/delivery';
 import { CloudinaryImage, CloudinaryVideo } from './index';
 
@@ -25,7 +25,7 @@ const LegacyComponentUsage = () => {
     .delivery(quality('auto'));
 
   const cloudinaryVideoObject = cloudinary.video('dog.mp4')
-    .effect(sepia())
+    .effect(blackwhite())
     .transcode(
       videoCodec(
         h264()
@@ -42,7 +42,7 @@ const LegacyComponentUsage = () => {
       }}
       >
         <CloudinaryImage cldImg={cloudinaryImageObject} />
-        <CloudinaryVideo cldVid={cloudinaryVideoObject} autoPlay muted />
+        <CloudinaryVideo cldVid={cloudinaryVideoObject} autoPlay muted loop />
       </div>
     </>
   );
@@ -72,10 +72,15 @@ const NewComponentUsage = () => (
         removeBackground
         videoProps={{
           autoPlay: true,
-          muted: true
+          muted: true,
+          loop: true
         }}
+        duration={1}
         resize={{
-          height: 200
+          mode: 'thumbnail',
+          height: 200,
+          width: 200,
+          gravity: 'auto'
         }}
         videoCodec={{
           use: 'h264',
@@ -84,8 +89,12 @@ const NewComponentUsage = () => (
         }}
         effects={[
           { type: 'sepia' },
+          { type: 'noise', level: 100 },
           { type: 'blur' }
         ]}
+        roundCorners={100}
+        rotate={50}
+        startOffset={1}
       />
     </div>
   </>

packages/react/src/transformationParsers/parseResize.ts

@@ -109,7 +109,7 @@ export const createParseResize =
               parseWhenDefined(resize.width, parseWidth)}${
               parseWhenDefined(resize.height, parseHeight)
             }`;
-        case 'thumb':
+        case 'thumbnail':
           return `c_thumb${
               parseWhenDefined(resize.gravity, parseGravity)}${
               parseWhenDefined(resize.aspectRatio, parseAspectRatio)}${

packages/react/src/transformationTypes/effect.ts

@@ -1,8 +1,9 @@
+// FIXME image only
 type Sepia = {
   type: 'sepia';
   level?: number;
 };
-
+// FIXME image only
 type BackgroundRemoval = {
   type: 'backgroundRemoval';
   mode?: 'fineEdges';
@@ -20,7 +21,7 @@ type Gamma = {
    */
   duration: number;
 }
-
+// FIXME image only
 type Grayscale = {
   type: 'grayscale'
 }

packages/react/src/transformationTypes/resize.ts

@@ -63,7 +63,7 @@ type CropResize = {
 } & RequireAtLeastTwoProperties<SizeOptions & { aspectRatio: AspectRatio }>;
 
 type ThumbResize = {
-  mode: 'thumb';
+  mode: 'thumbnail';
   gravity: Gravity;
   zoom?: number;
 } & RequireAtLeastTwoProperties<SizeOptions & { aspectRatio: AspectRatio }>;
@@ -77,6 +77,7 @@ type ImaggaScaleResize = {
   mode: 'imaggaScale';
 } & RequireAtLeastTwoProperties<SizeOptions & { aspectRatio: AspectRatio }>;
 
+// FIXME improve error reporting (misinferring in tsc)
 export type Resize =
   | (RequireAtLeastOneProperty<SizeOptions> & { mode?: never })
   | ImaggaScaleResize