Skip to content

Commit 52ab2e8

Browse files
author
Nir Maoz
authored
Feature/add overlay json (#507)
1 parent 4ba749b commit 52ab2e8

29 files changed

+883
-75
lines changed

‎__TESTS_BUNDLE_SIZE__/bundleSizeTestCases.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const bundleSizeTestCases:ITestCase[] = [
4545
},
4646
{
4747
name: 'Tests CloudinaryImage image with Resize, adjust and delivery',
48-
sizeLimitInKB: 31,
48+
sizeLimitInKB: 32,
4949
importsArray: [
5050
importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
5151
importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -56,7 +56,7 @@ const bundleSizeTestCases:ITestCase[] = [
5656
},
5757
{
5858
name: 'Tests Overlay imports',
59-
sizeLimitInKB: 24,
59+
sizeLimitInKB: 29,
6060
importsArray: [
6161
importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
6262
importFromDist('actions/overlay', 'Overlay'),
@@ -74,7 +74,7 @@ const bundleSizeTestCases:ITestCase[] = [
7474
},
7575
{
7676
name: 'Import all of the SDK',
77-
sizeLimitInKB: 121,
77+
sizeLimitInKB: 125,
7878
importsArray: [
7979
importFromPackage('* as CloudinaryURLGEN')
8080
]
@@ -88,14 +88,14 @@ const bundleSizeTestCases:ITestCase[] = [
8888
},
8989
{
9090
name: 'Import All Actions',
91-
sizeLimitInKB: 47,
91+
sizeLimitInKB: 52,
9292
importsArray: [
9393
importFromPackage('Actions')
9494
]
9595
},
9696
{
9797
name: 'Import All Qualifiers',
98-
sizeLimitInKB: 35,
98+
sizeLimitInKB: 38,
9999
importsArray: [
100100
importFromPackage('Qualifiers')
101101
]

‎__TESTS__/unit/fromJson/overlayUnderlay.fromJson.test.ts‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import {IOverlayActionModel} from "../../../src/internal/models/IOverlayActionModel";
2+
import {fromJson} from "../../../src/internal/fromJson";
3+
import {IImageSourceModel} from "../../../src/internal/models/IImageSourceModel";
4+
import {IPositionModel} from "../../../src/internal/models/IPositionModel";
5+
import {ITimelinePositionModel} from "../../../src/internal/models/ITimelinePositionModel";
6+
import {ITextSourceModel} from "../../../src/internal/models/ITextSourceModel";
7+
import {IFetchSourceModel} from "../../../src/internal/models/IFetchSourceModel";
8+
import {IVideoSourceModel} from "../../../src/internal/models/IVideoSourceModel";
9+
10+
const position: IPositionModel = {
11+
offsetX: 1,
12+
offsetY: 2,
13+
tiled: true,
14+
allowOverflow: true,
15+
gravity: {gravityType: 'direction', compass: 'north_east'}
16+
};
17+
18+
describe('Overlay & Underlay fromJson', () => {
19+
it('Should generate Overlay for image source', () => {
20+
const source: IImageSourceModel = {
21+
sourceType: 'image',
22+
publicId: 'sample',
23+
transformation: {
24+
actions: [
25+
{actionType: 'scale', dimensions: {width: 100, aspectRatio: 7}}
26+
]
27+
}
28+
};
29+
30+
const overlayModel: IOverlayActionModel = {
31+
actionType: 'overlay',
32+
source,
33+
position,
34+
blendMode: 'multiply'
35+
};
36+
37+
const overlayTransformation = fromJson({actions: [overlayModel]});
38+
const underlayTransformation = fromJson({actions: [{...overlayModel, actionType: 'underlay'}]});
39+
40+
expect(overlayTransformation.toString()).toStrictEqual('l_sample/ar_7.0,c_scale,w_100/e_multiply,fl_layer_apply,fl_tiled,g_north_east,x_1,y_2');
41+
expect(underlayTransformation.toString()).toStrictEqual('u_sample/ar_7.0,c_scale,w_100/e_multiply,fl_layer_apply,fl_tiled,g_north_east,x_1,y_2');
42+
});
43+
44+
it('Should generate Overlay for video source', () => {
45+
const source: IVideoSourceModel = {
46+
sourceType: 'video',
47+
publicId: 'dog.mp4',
48+
transformation: {
49+
actions: [
50+
{actionType: 'scale', dimensions: {width: 100, aspectRatio: 7}}
51+
]
52+
}
53+
};
54+
55+
const timelinePosition: ITimelinePositionModel = {
56+
startOffset: 1,
57+
duration: 2
58+
};
59+
60+
const overlayModel: IOverlayActionModel = {
61+
actionType: 'overlay',
62+
source,
63+
position,
64+
timelinePosition,
65+
blendMode: 'multiply'
66+
};
67+
68+
const overlayTransformation = fromJson({actions: [overlayModel]});
69+
const underlayTransformation = fromJson({actions: [{...overlayModel, actionType: 'underlay'}]});
70+
71+
expect(overlayTransformation.toString()).toStrictEqual('l_video:dog.mp4/ar_7.0,c_scale,w_100/du_2,e_multiply,fl_layer_apply,fl_tiled,g_north_east,so_1,x_1,y_2');
72+
expect(underlayTransformation.toString()).toStrictEqual('u_video:dog.mp4/ar_7.0,c_scale,w_100/du_2,e_multiply,fl_layer_apply,fl_tiled,g_north_east,so_1,x_1,y_2');
73+
});
74+
75+
it('Should generate Overlay for fetch source', () => {
76+
const source: IFetchSourceModel = {
77+
sourceType: 'fetch',
78+
url: 'https://some/image.jpg',
79+
transformation: {
80+
actions: [
81+
{actionType: 'scale', dimensions: {width: 100, aspectRatio: 7}}
82+
]
83+
}
84+
};
85+
86+
87+
const overlayModel: IOverlayActionModel = {
88+
actionType: 'overlay',
89+
source,
90+
position,
91+
blendMode: 'multiply'
92+
};
93+
94+
const overlayTransformation = fromJson({actions: [overlayModel]});
95+
const underlayTransformation = fromJson({actions: [{...overlayModel, actionType: 'underlay'}]});
96+
97+
expect(overlayTransformation.toString()).toStrictEqual('l_fetch:aHR0cHM6Ly9zb21lL2ltYWdlLmpwZw==/ar_7.0,c_scale,w_100/e_multiply,fl_layer_apply,fl_tiled,g_north_east,x_1,y_2');
98+
expect(underlayTransformation.toString()).toStrictEqual('u_fetch:aHR0cHM6Ly9zb21lL2ltYWdlLmpwZw==/ar_7.0,c_scale,w_100/e_multiply,fl_layer_apply,fl_tiled,g_north_east,x_1,y_2');
99+
});
100+
101+
it('Should generate Overlay for text source', () => {
102+
const source: ITextSourceModel = {
103+
sourceType: 'text',
104+
text: 'example',
105+
textStyle: {
106+
fontFamily: 'arial',
107+
fontSize: 1,
108+
fontWeight: 'bold',
109+
fontStyle: 'italic',
110+
fontAntialias: 'fast',
111+
fontHinting: 'slight',
112+
textDecoration: 'strikethrough',
113+
textAlignment: 'center',
114+
stroke: {width: 2, color: 'white'},
115+
letterSpacing: 2.3,
116+
lineSpacing: 3.2
117+
},
118+
textColor: 'red',
119+
backgroundColor: 'blue',
120+
transformation: {
121+
actions: [
122+
{actionType: 'scale', dimensions: {width: 100, aspectRatio: 7}}
123+
]
124+
}
125+
};
126+
127+
const overlayModel: IOverlayActionModel = {
128+
actionType: 'overlay',
129+
source,
130+
};
131+
132+
const overlayTransformation = fromJson({actions: [overlayModel]});
133+
const underlayTransformation = fromJson({actions: [{...overlayModel, actionType: 'underlay'}]});
134+
expect(overlayTransformation.toString()).toStrictEqual('b_blue,co_red,l_text:arial_1_bold_italic_strikethrough_center_stroke_bo_2px_solid_white_letter_spacing_2.3_line_spacing_3.2_antialias_fast_hinting_slight:example/ar_7.0,c_scale,w_100/fl_layer_apply');
135+
expect(underlayTransformation.toString()).toStrictEqual('b_blue,co_red,u_text:arial_1_bold_italic_strikethrough_center_stroke_bo_2px_solid_white_letter_spacing_2.3_line_spacing_3.2_antialias_fast_hinting_slight:example/ar_7.0,c_scale,w_100/fl_layer_apply');
136+
});
137+
138+
it('Should generate Overlay for subtitles source', () => {
139+
const source: ITextSourceModel = {
140+
sourceType: 'text',
141+
text: 'example',
142+
textStyle: {
143+
fontFamily: 'arial',
144+
fontSize: 1,
145+
fontWeight: 'bold',
146+
fontStyle: 'italic',
147+
fontAntialias: 'fast',
148+
fontHinting: 'slight',
149+
textDecoration: 'strikethrough',
150+
textAlignment: 'center',
151+
stroke: {width: 2, color: 'white'},
152+
letterSpacing: 2.3,
153+
lineSpacing: 3.2
154+
},
155+
textColor: 'red',
156+
backgroundColor: 'blue',
157+
transformation: {
158+
actions: [
159+
{actionType: 'scale', dimensions: {width: 100, aspectRatio: 7}}
160+
]
161+
}
162+
};
163+
164+
const overlayModel: IOverlayActionModel = {
165+
actionType: 'overlay',
166+
source,
167+
};
168+
169+
const overlayTransformation = fromJson({actions: [overlayModel]});
170+
const underlayTransformation = fromJson({actions: [{...overlayModel, actionType: 'underlay'}]});
171+
expect(overlayTransformation.toString()).toStrictEqual('b_blue,co_red,l_text:arial_1_bold_italic_strikethrough_center_stroke_bo_2px_solid_white_letter_spacing_2.3_line_spacing_3.2_antialias_fast_hinting_slight:example/ar_7.0,c_scale,w_100/fl_layer_apply');
172+
expect(underlayTransformation.toString()).toStrictEqual('b_blue,co_red,u_text:arial_1_bold_italic_strikethrough_center_stroke_bo_2px_solid_white_letter_spacing_2.3_line_spacing_3.2_antialias_fast_hinting_slight:example/ar_7.0,c_scale,w_100/fl_layer_apply');
173+
});
174+
});

0 commit comments

Comments
 (0)