cloudinary / js-url-gen

Cloudinary's base javascript library, including URL generation.
https://www.cloudinary.com
MIT License
47 stars 9 forks source link

Video transformation options as an Object instead of method chain #530

Closed ghost closed 1 year ago

ghost commented 2 years ago

Hi, I currently in process of migrating from cloudinary-core to @cloudinary/url-gen, and one of the biggest challenge I am facing is around video transformations.

In my current implementation, I store all the transformations as an array of objects in database and use cloudinary.url method to inject the json for transformation.

const transformation = [
  {
    overlay: { text: "some text", fontSize: 40},
    gravity: "south",
    x: 100,
    y: 600,
    startOffset: "15",
    endOffset: "20",
    color: "#ffffff"
  }
]

const url = cloudinary.url("videoPublicId", {
  resource_type: "video",
  transformation,
  sourceTypes: ["mp4"]
})

Is there a way to do something similar using @cloudinary/url-gen? Or, do I have to resort to the method chain?

Any help is much appreciated!

Thanks!

Prabs

tommyg-cld commented 2 years ago

Hi Prabs,

Thanks for reaching out. So you should be able to use createCloudinaryLegacyURL to migrate easily. Please have a look at https://cloudinary.com/documentation/javascript1_migration_guide#migrating_delivery_urls and let me know ho wyou get on.

Thanks Tom

ghost commented 2 years ago

Thanks Tom. It is definitely the right direction, but does not really solve my issue as the overlay still requires the function chain.

Ty

patrick-tolosa commented 2 years ago

Hey @prabhatmyadbox

I just wrote this test which creates an overlay with a JSON


  it ('Accepts a JSON with an overlay', () => {
    const transformation = [
      {
        overlay: { text: "some text", font_size: 40, font_family: 'arial'},
        gravity: "south",
        x: 100,
        y: 600,
        startOffset: "15",
        endOffset: "20",
        color: "#ffffff"
      }
    ];

    const url = createCloudinaryLegacyURL("videoPublicId", {
      cloud_name: 'demo',
      resource_type: "video",
      transformation,
      sourceTypes: ["mp4"]
    });

    console.log(url);
  });

this is the output

http://res.cloudinary.com/demo/video/upload/co_rgb:ffffff,g_south,l_text:arial_40:some%20text,x_100,y_600/videoPublicId
ghost commented 2 years ago

Thanks for the the example Patrick.

I was finally able to get the desired result. And, I've realised where the error had occurred.

All my transformation keys had been converted to snakeCase (font_size, start_offset). But, for this function to work, the keys of transformation objects required to be camelCase while only the keys of overlay object needed to be snakeCase.

Thanks again!

Cheers!