Skip to content

Commit e4adc14

Browse files
manu4543manu4543
committed
refactor(transformation-utils): replace safeBtoa implementation with toBase64 utility; update overlay tests for consistency
1 parent ef30e9c commit e4adc14

2 files changed

Lines changed: 142 additions & 145 deletions

File tree

‎src/lib/transformation-utils.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// This file is in src/lib/ to avoid conflicts with generated code
33

44
import type { SrcOptions, TransformationPosition } from '../resources/shared';
5+
import { toBase64 } from '../internal/utils/base64';
56

67
const QUERY_TRANSFORMATION_POSITION: TransformationPosition = 'query';
78
const PATH_TRANSFORMATION_POSITION: TransformationPosition = 'path';
@@ -113,11 +114,6 @@ export default {
113114
};
114115

115116
export const safeBtoa = function (str: string): string {
116-
// Check if running in browser environment
117-
if (typeof globalThis !== 'undefined' && 'btoa' in globalThis) {
118-
return (globalThis as any).btoa(str);
119-
} else {
120-
// Node.js fallback
121-
return Buffer.from(str, 'utf8').toString('base64');
122-
}
117+
// Use the SDK's built-in base64 utility that properly handles different runtimes
118+
return toBase64(str);
123119
};

‎tests/url-generation/overlay.test.ts‎

Lines changed: 139 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -204,147 +204,144 @@ describe('Overlay Transformation Test Cases', function () {
204204
urlEndpoint: 'https://ik.imagekit.io/test_url_endpoint',
205205
src: '/base-image.jpg',
206206
transformation: [
207-
{
208-
// Text overlay
209-
overlay: {
210-
type: 'text',
211-
text: 'Every thing',
212-
position: {
213-
x: '10',
214-
y: '20',
215-
focus: 'center',
216-
},
217-
timing: {
218-
start: 5,
219-
duration: '10',
220-
end: 15,
221-
},
222-
transformation: [
223-
{
224-
width: 'bw_mul_0.5',
225-
fontSize: 20,
226-
fontFamily: 'Arial',
227-
fontColor: '0000ff',
228-
innerAlignment: 'left',
229-
padding: 5,
230-
alpha: 7,
231-
typography: 'b',
232-
background: 'red',
233-
radius: 10,
234-
rotation: 'N45',
235-
flip: 'h',
236-
lineHeight: 20,
237-
},
238-
],
239-
},
240-
},
241-
{
242-
// Image overlay
243-
overlay: {
244-
type: 'image',
245-
input: 'logo.png',
246-
position: {
247-
x: '10',
248-
y: '20',
249-
focus: 'center',
250-
},
251-
timing: {
252-
start: 5,
253-
duration: '10',
254-
end: 15,
255-
},
256-
transformation: [
257-
{
258-
width: 'bw_mul_0.5',
259-
height: 'bh_mul_0.5',
260-
rotation: 'N45',
261-
flip: 'h',
262-
overlay: {
263-
type: 'text',
264-
text: 'Nested text overlay',
207+
{
208+
// Text overlay
209+
overlay: {
210+
type: "text",
211+
text: "Every thing",
212+
position: {
213+
x: "10",
214+
y: "20",
215+
focus: "center"
216+
},
217+
timing: {
218+
start: 5,
219+
duration: "10",
220+
end: 15
221+
},
222+
transformation: [{
223+
width: "bw_mul_0.5",
224+
fontSize: 20,
225+
fontFamily: "Arial",
226+
fontColor: "0000ff",
227+
innerAlignment: "left",
228+
padding: 5,
229+
alpha: 7,
230+
typography: "b",
231+
background: "red",
232+
radius: 10,
233+
rotation: "N45",
234+
flip: "h",
235+
lineHeight: 20
236+
}]
237+
}
265238
},
266-
},
267-
],
268-
},
269-
},
270-
{
271-
// Video overlay. Just for URL generation testing, you can't actually overlay a video on an image.
272-
overlay: {
273-
type: 'video',
274-
input: 'play-pause-loop.mp4',
275-
position: {
276-
x: '10',
277-
y: '20',
278-
focus: 'center',
279-
},
280-
timing: {
281-
start: 5,
282-
duration: '10',
283-
end: 15,
284-
},
285-
transformation: [
286-
{
287-
width: 'bw_mul_0.5',
288-
height: 'bh_mul_0.5',
289-
rotation: 'N45',
290-
flip: 'h',
291-
},
292-
],
293-
},
294-
},
295-
{
296-
// Subtitle overlay. Just for URL generation testing, you can't actually overlay a subtitle on an image.
297-
overlay: {
298-
type: 'subtitle',
299-
input: 'subtitle.srt',
300-
position: {
301-
x: '10',
302-
y: '20',
303-
focus: 'center',
304-
},
305-
timing: {
306-
start: 5,
307-
duration: '10',
308-
end: 15,
309-
},
310-
transformation: [
311-
{
312-
fontSize: 12,
313-
fontColor: 'white',
314-
} as any, // Using any to allow general transformations in subtitle overlay for testing
315-
],
316-
},
317-
},
318-
{
319-
// Solid color overlay
320-
overlay: {
321-
type: 'solidColor',
322-
color: 'FF0000',
323-
position: {
324-
x: '10',
325-
y: '20',
326-
focus: 'center',
327-
},
328-
timing: {
329-
start: 5,
330-
duration: '10',
331-
end: 15,
332-
},
333-
transformation: [
334-
{
335-
width: 100,
336-
height: 50,
337-
// Using type assertion to allow general transformation params for testing
338-
} as any,
339-
],
340-
},
341-
},
239+
{
240+
// Image overlay
241+
overlay: {
242+
type: "image",
243+
input: "logo.png",
244+
position: {
245+
x: "10",
246+
y: "20",
247+
focus: "center"
248+
},
249+
timing: {
250+
start: 5,
251+
duration: "10",
252+
end: 15
253+
},
254+
transformation: [
255+
{
256+
width: "bw_mul_0.5",
257+
height: "bh_mul_0.5",
258+
rotation: "N45",
259+
flip: "h",
260+
overlay: {
261+
type: "text",
262+
text: "Nested text overlay",
263+
}
264+
}
265+
]
266+
}
267+
},
268+
{
269+
// Video overlay. Just for URL generation testing, you can't actually overlay a video on an image.
270+
overlay: {
271+
type: "video",
272+
input: "play-pause-loop.mp4",
273+
position: {
274+
x: "10",
275+
y: "20",
276+
focus: "center"
277+
},
278+
timing: {
279+
start: 5,
280+
duration: "10",
281+
end: 15
282+
},
283+
transformation: [{
284+
width: "bw_mul_0.5",
285+
height: "bh_mul_0.5",
286+
rotation: "N45",
287+
flip: "h",
288+
}]
289+
}
290+
},
291+
{
292+
// Subtitle overlay. Just for URL generation testing, you can't actually overlay a subtitle on an image.
293+
overlay: {
294+
type: "subtitle",
295+
input: "subtitle.srt",
296+
position: {
297+
x: "10",
298+
y: "20",
299+
focus: "center"
300+
},
301+
timing: {
302+
start: 5,
303+
duration: "10",
304+
end: 15
305+
},
306+
transformation: [{
307+
background: "red",
308+
color: "0000ff",
309+
fontFamily: "Arial",
310+
fontOutline: "2_A1CCDD50",
311+
fontShadow: "A1CCDD_3"
312+
}]
313+
}
314+
},
315+
{
316+
// Solid color overlay
317+
overlay: {
318+
type: "solidColor",
319+
color: "FF0000",
320+
position: {
321+
x: "10",
322+
y: "20",
323+
focus: "center"
324+
},
325+
timing: {
326+
start: 5,
327+
duration: "10",
328+
end: 15
329+
},
330+
transformation: [{
331+
width: "bw_mul_0.5",
332+
height: "bh_mul_0.5",
333+
alpha: 0.5,
334+
background: "red",
335+
gradient: true,
336+
radius: "max"
337+
}]
338+
}
339+
}
342340
],
343341
});
344342

345-
expect(url).toBe(
346-
`https://ik.imagekit.io/test_url_endpoint/tr:l-text,i-${encodeURIComponent('Every thing')},lx-10,ly-20,lfo-center,lso-5,leo-15,ldu-10,w-bw_mul_0.5,fs-20,ff-Arial,co-0000ff,ia-left,pa-5,al-7,tg-b,bg-red,r-10,rt-N45,fl-h,lh-20,l-end:l-image,i-logo.png,lx-10,ly-20,lfo-center,lso-5,leo-15,ldu-10,w-bw_mul_0.5,h-bh_mul_0.5,rt-N45,fl-h,l-text,i-${encodeURIComponent('Nested text overlay')},l-end,l-end:l-video,i-play-pause-loop.mp4,lx-10,ly-20,lfo-center,lso-5,leo-15,ldu-10,l-end:l-subtitle,i-subtitle.srt,lx-10,ly-20,lfo-center,lso-5,leo-15,ldu-10,l-end:l-image,i-ik_canvas,bg-FF0000,lx-10,ly-20,lfo-center,lso-5,leo-15,ldu-10,w-bw_mul_0.5,h-bh_mul_0.5,rt-N45,fl-h,l-end/base-image.jpg`,
347-
);
343+
expect(url).toBe(`https://ik.imagekit.io/test_url_endpoint/tr:l-text,i-Every%20thing,lx-10,ly-20,lfo-center,lso-5,leo-15,ldu-10,w-bw_mul_0.5,fs-20,ff-Arial,co-0000ff,ia-left,pa-5,al-7,tg-b,bg-red,r-10,rt-N45,fl-h,lh-20,l-end:l-image,i-logo.png,lx-10,ly-20,lfo-center,lso-5,leo-15,ldu-10,w-bw_mul_0.5,h-bh_mul_0.5,rt-N45,fl-h,l-text,i-Nested%20text%20overlay,l-end,l-end:l-video,i-play-pause-loop.mp4,lx-10,ly-20,lfo-center,lso-5,leo-15,ldu-10,w-bw_mul_0.5,h-bh_mul_0.5,rt-N45,fl-h,l-end:l-subtitle,i-subtitle.srt,lx-10,ly-20,lfo-center,lso-5,leo-15,ldu-10,bg-red,color-0000ff,ff-Arial,fol-2_A1CCDD50,fsh-A1CCDD_3,l-end:l-image,i-ik_canvas,bg-FF0000,lx-10,ly-20,lfo-center,lso-5,leo-15,ldu-10,w-bw_mul_0.5,h-bh_mul_0.5,al-0.5,bg-red,e-gradient,r-max,l-end/base-image.jpg`);
344+
348345
});
349346
});
350347

@@ -383,8 +380,12 @@ describe('Overlay encoding test cases', function () {
383380
},
384381
],
385382
});
383+
384+
// Buffer.from(decodeURIComponent("Y3VzdG9tZXJfbG9nby%2FDkXlrYWEucG5n"),"base64").toString() = customer_logo/Ñykaa.png
385+
// Exactly what we want
386+
386387
expect(url).toBe(
387-
`https://ik.imagekit.io/demo/tr:l-image,ie-Y3VzdG9tZXJfbG9nby9OzIN5a2FhLnBuZw%3D%3D,l-end/medium_cafe_B1iTdD0C.jpg`,
388+
`https://ik.imagekit.io/demo/tr:l-image,ie-Y3VzdG9tZXJfbG9nby%2FDkXlrYWEucG5n,l-end/medium_cafe_B1iTdD0C.jpg`,
388389
);
389390
});
390391

0 commit comments

Comments
 (0)