next-cloudinary 1.12.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,7 @@
1
1
  var react = require('react');
2
2
  var Image = require('next/image');
3
- var urlGen = require('@cloudinary/url-gen');
3
+ var util = require('@cloudinary-util/util');
4
+ var urlLoader = require('@cloudinary-util/url-loader');
4
5
  var nextPkg = require('next/package.json');
5
6
  var jsxRuntime = require('react/jsx-runtime');
6
7
  var Head = require('next/head');
@@ -40,846 +41,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
40
41
  return target;
41
42
  }
42
43
 
43
- var cropsGravityAuto = ['crop', 'fill', 'lfill', 'fill_pad', 'thumb'];
44
- var cropsWithZoom = ['crop', 'thumb'];
45
- var props$7 = ['crop', 'gravity', 'zoom'];
46
- function plugin$7(_temp) {
47
- var _ref = _temp === void 0 ? {} : _temp,
48
- cldImage = _ref.cldImage,
49
- options = _ref.options;
50
- var overrides = {};
51
- var width = options.width,
52
- height = options.height,
53
- widthResize = options.widthResize,
54
- _options$crop = options.crop,
55
- crop = _options$crop === void 0 ? 'limit' : _options$crop;
56
- var transformationString = "c_" + crop + ",w_" + width;
57
- if (!options.gravity && cropsGravityAuto.includes(crop)) {
58
- options.gravity = 'auto';
59
- }
60
- if (!['limit'].includes(crop)) {
61
- transformationString = transformationString + ",h_" + height;
62
- }
63
- if (options.gravity) {
64
- if (options.gravity === 'auto' && !cropsGravityAuto.includes(crop)) {
65
- console.warn("Auto gravity can only be used with crop modes: " + cropsGravityAuto.join(', ') + ". Not applying gravity.");
66
- } else {
67
- transformationString = transformationString + ",g_" + options.gravity;
68
- }
69
- }
70
- if (options.zoom) {
71
- if (options.zoom === 'auto' && !cropsWithZoom.includes(crop)) {
72
- console.warn("Zoom can only be used with crop modes: " + cropsWithZoom.join(', ') + ". Not applying zoom.");
73
- } else {
74
- transformationString = transformationString + ",z_" + options.zoom;
75
- }
76
- }
77
- cldImage.effect(transformationString);
78
-
79
- // If we have a resize width that's smaller than the user-defined width, we want to give the
80
- // ability to perform a final resize on the image without impacting any of the effects like text
81
- // overlays that may depend on the size to work properly
82
-
83
- if (typeof widthResize === 'number' && widthResize < width) {
84
- overrides.width = widthResize;
85
- }
86
- return {
87
- options: overrides
88
- };
89
- }
90
-
91
- var croppingPlugin = {
92
- __proto__: null,
93
- props: props$7,
94
- plugin: plugin$7
95
- };
96
-
97
- // aspectRatio
98
-
99
- var primary = {
100
- aspectRatio: {
101
- qualifier: 'ar'
102
- },
103
- crop: {
104
- qualifier: 'c'
105
- },
106
- gravity: {
107
- qualifier: 'g'
108
- },
109
- height: {
110
- qualifier: 'h'
111
- },
112
- width: {
113
- qualifier: 'w'
114
- }
115
- };
116
- var position = {
117
- angle: {
118
- qualifier: 'a'
119
- },
120
- gravity: {
121
- qualifier: 'g'
122
- },
123
- x: {
124
- qualifier: 'x'
125
- },
126
- y: {
127
- qualifier: 'y'
128
- }
129
- };
130
- var text = {
131
- alignment: {
132
- qualifier: 'alignment'
133
- },
134
- border: {
135
- qualifier: 'bo',
136
- location: 'primary'
137
- },
138
- color: {
139
- qualifier: 'co',
140
- location: 'primary'
141
- },
142
- fontFamily: {
143
- qualifier: false
144
- },
145
- fontSize: {
146
- qualifier: false
147
- },
148
- fontWeight: {
149
- qualifier: false
150
- },
151
- letterSpacing: {
152
- qualifier: 'letter_spacing'
153
- },
154
- lineSpacing: {
155
- qualifier: 'line_spacing'
156
- },
157
- stroke: {
158
- qualifier: 'self'
159
- },
160
- textDecoration: {
161
- qualifier: false
162
- }
163
- };
164
- var effects = {
165
- art: {
166
- prefix: 'e',
167
- qualifier: 'art'
168
- },
169
- autoBrightness: {
170
- prefix: 'e',
171
- qualifier: 'auto_brightness'
172
- },
173
- autoColor: {
174
- prefix: 'e',
175
- qualifier: 'auto_color'
176
- },
177
- autoContrast: {
178
- prefix: 'e',
179
- qualifier: 'auto_contrast'
180
- },
181
- assistColorblind: {
182
- prefix: 'e',
183
- qualifier: 'assist_colorblind'
184
- },
185
- background: {
186
- qualifier: 'b'
187
- },
188
- blackwhite: {
189
- prefix: 'e',
190
- qualifier: 'blackwhite'
191
- },
192
- blur: {
193
- prefix: 'e',
194
- qualifier: 'blur'
195
- },
196
- blurFaces: {
197
- prefix: 'e',
198
- qualifier: 'blur_faces'
199
- },
200
- blurRegion: {
201
- prefix: 'e',
202
- qualifier: 'blur_region'
203
- },
204
- border: {
205
- qualifier: 'bo'
206
- },
207
- brightness: {
208
- prefix: 'e',
209
- qualifier: 'brightness'
210
- },
211
- brightnessHSB: {
212
- prefix: 'e',
213
- qualifier: 'brightness_hsb'
214
- },
215
- cartoonify: {
216
- prefix: 'e',
217
- qualifier: 'cartoonify'
218
- },
219
- color: {
220
- qualifier: 'co'
221
- },
222
- colorize: {
223
- prefix: 'e',
224
- qualifier: 'colorize'
225
- },
226
- contrast: {
227
- prefix: 'e',
228
- qualifier: 'contrast'
229
- },
230
- distort: {
231
- prefix: 'e',
232
- qualifier: 'distort'
233
- },
234
- fillLight: {
235
- prefix: 'e',
236
- qualifier: 'fill_light'
237
- },
238
- gamma: {
239
- prefix: 'e',
240
- qualifier: 'gamma'
241
- },
242
- gradientFade: {
243
- prefix: 'e',
244
- qualifier: 'gradient_fade'
245
- },
246
- grayscale: {
247
- prefix: 'e',
248
- qualifier: 'grayscale'
249
- },
250
- improve: {
251
- prefix: 'e',
252
- qualifier: 'improve'
253
- },
254
- multiply: {
255
- prefix: 'e',
256
- qualifier: 'multiply'
257
- },
258
- negate: {
259
- prefix: 'e',
260
- qualifier: 'negate'
261
- },
262
- oilPaint: {
263
- prefix: 'e',
264
- qualifier: 'oil_paint'
265
- },
266
- opacity: {
267
- qualifier: 'o'
268
- },
269
- outline: {
270
- prefix: 'e',
271
- qualifier: 'outline'
272
- },
273
- overlay: {
274
- prefix: 'e',
275
- qualifier: 'overlay'
276
- },
277
- pixelate: {
278
- prefix: 'e',
279
- qualifier: 'pixelate'
280
- },
281
- pixelateFaces: {
282
- prefix: 'e',
283
- qualifier: 'pixelate_faces'
284
- },
285
- pixelateRegion: {
286
- prefix: 'e',
287
- qualifier: 'pixelate_region'
288
- },
289
- redeye: {
290
- prefix: 'e',
291
- qualifier: 'redeye'
292
- },
293
- replaceColor: {
294
- prefix: 'e',
295
- qualifier: 'replace_color'
296
- },
297
- saturation: {
298
- prefix: 'e',
299
- qualifier: 'saturation'
300
- },
301
- screen: {
302
- prefix: 'e',
303
- qualifier: 'screen'
304
- },
305
- sepia: {
306
- prefix: 'e',
307
- qualifier: 'sepia'
308
- },
309
- shadow: {
310
- prefix: 'e',
311
- qualifier: 'shadow'
312
- },
313
- sharpen: {
314
- prefix: 'e',
315
- qualifier: 'sharpen'
316
- },
317
- shear: {
318
- prefix: 'e',
319
- qualifier: 'shear'
320
- },
321
- simulateColorblind: {
322
- prefix: 'e',
323
- qualifier: 'simulate_colorblind'
324
- },
325
- tint: {
326
- prefix: 'e',
327
- qualifier: 'tint'
328
- },
329
- unsharpMask: {
330
- prefix: 'e',
331
- qualifier: 'unsharp_mask'
332
- },
333
- vectorize: {
334
- prefix: 'e',
335
- qualifier: 'vectorize'
336
- },
337
- vibrance: {
338
- prefix: 'e',
339
- qualifier: 'vibrance'
340
- },
341
- vignette: {
342
- prefix: 'e',
343
- qualifier: 'vignette'
344
- }
345
- };
346
- var flags = {
347
- relative: {
348
- prefix: 'fl',
349
- qualifier: 'relative',
350
- location: 'primary'
351
- }
352
- };
353
-
354
- /**
355
- * constructTransformation
356
- */
357
-
358
- function constructTransformation(_ref) {
359
- var prefix = _ref.prefix,
360
- qualifier = _ref.qualifier,
361
- value = _ref.value;
362
- var transformation = '';
363
- if (prefix) {
364
- transformation = prefix + "_";
365
- }
366
- if (value === true || value === 'true') {
367
- return "" + transformation + qualifier;
368
- }
369
- if (typeof value === 'string' || typeof value === 'number') {
370
- if (prefix) {
371
- return "" + transformation + qualifier + ":" + value;
372
- } else {
373
- return qualifier + "_" + value;
374
- }
375
- }
376
- }
377
-
378
- /**
379
- * Retrieves the transformations added to a cloudiary image url. If no transformation is recognized it returns an empty array.
380
- *
381
- * @param {string} src The cloudiary url.
382
- *
383
- * @return {array} The array of transformations
384
- */
385
-
386
- function getTransformations(src, preserveTransformations) {
387
- if (typeof src !== "string") {
388
- throw new Error("Invalid src of type " + typeof src);
389
- }
390
- if (src.includes("res.cloudinary.com") && preserveTransformations) {
391
- var regex = new RegExp("(https?)://(res.cloudinary.com)/([^/]+)/(image|video|raw)/(upload|authenticated)/(.*)/(v[0-9]+)/(.+)(?:.[a-z]{3})?", "gi");
392
- var groups = regex.exec(src);
393
- var transformationStr = groups.slice(1).find(function (i) {
394
- return i.includes("_");
395
- });
396
- if (transformationStr) {
397
- return transformationStr.split(",").join("/").split("/");
398
- } else {
399
- return [];
400
- }
401
- }
402
- return [];
403
- }
404
-
405
- var props$6 = [].concat(Object.keys(effects), ['effects']);
406
- function plugin$6(_temp) {
407
- var _ref = _temp === void 0 ? {} : _temp,
408
- cldImage = _ref.cldImage,
409
- options = _ref.options;
410
- // Handle any top-level effect props
411
-
412
- constructTransformationString({
413
- effects: effects,
414
- options: options
415
- }).filter(function (t) {
416
- return !!t;
417
- }).forEach(function (transformation) {
418
- return cldImage.effect(transformation);
419
- });
420
-
421
- // If we're passing in an effects prop explicitly, treat it as an array of
422
- // effects that we need to process
423
-
424
- if (Array.isArray(options.effects)) {
425
- options.effects.forEach(function (effectsSet) {
426
- var transformationString = constructTransformationString({
427
- effects: effects,
428
- options: effectsSet
429
- }).filter(function (t) {
430
- return !!t;
431
- }).join(',');
432
- cldImage.effect(transformationString);
433
- });
434
- }
435
- function constructTransformationString(_ref2) {
436
- var effects = _ref2.effects,
437
- options = _ref2.options;
438
- return Object.keys(effects).map(function (key) {
439
- var _effects$key = effects[key],
440
- prefix = _effects$key.prefix,
441
- qualifier = _effects$key.qualifier;
442
- return constructTransformation({
443
- qualifier: qualifier,
444
- prefix: prefix,
445
- value: options[key]
446
- });
447
- });
448
- }
449
- }
450
-
451
- var effectsPlugin = {
452
- __proto__: null,
453
- props: props$6,
454
- plugin: plugin$6
455
- };
456
-
457
- /**
458
- * encodeBase64
459
- */
460
-
461
- function encodeBase64(value) {
462
- if (typeof btoa === 'function') {
463
- return btoa(value);
464
- }
465
- if (typeof Buffer !== 'undefined') {
466
- return Buffer.from(value).toString('base64');
467
- }
468
- }
469
-
470
- var _excluded$3 = ["publicId", "url", "position", "text", "effects", "appliedEffects"];
471
- var props$5 = ['text', 'overlays'];
472
- var DEFAULT_TEXT_OPTIONS = {
473
- color: 'black',
474
- fontFamily: 'Arial',
475
- fontSize: 200,
476
- fontWeight: 'bold'
477
- };
478
- function plugin$5(_temp) {
479
- var _ref = _temp === void 0 ? {} : _temp,
480
- cldImage = _ref.cldImage,
481
- options = _ref.options;
482
- var text$1 = options.text,
483
- _options$overlays = options.overlays,
484
- overlays = _options$overlays === void 0 ? [] : _options$overlays;
485
- var type = 'overlay';
486
- var typeQualifier = 'l';
487
- if (Array.isArray(overlays)) {
488
- overlays.forEach(applyOverlay);
489
- }
490
- if (typeof text$1 === 'string') {
491
- applyOverlay({
492
- text: _extends({}, DEFAULT_TEXT_OPTIONS, {
493
- text: text$1
494
- })
495
- });
496
- } else if (typeof text$1 === 'object') {
497
- applyOverlay({
498
- text: _extends({}, DEFAULT_TEXT_OPTIONS, text$1)
499
- });
500
- }
501
-
502
- /**
503
- * applyOverlay
504
- */
505
-
506
- function applyOverlay(_ref2) {
507
- var publicId = _ref2.publicId,
508
- url = _ref2.url,
509
- position$1 = _ref2.position,
510
- text$1 = _ref2.text,
511
- _ref2$effects = _ref2.effects,
512
- layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
513
- _ref2$appliedEffects = _ref2.appliedEffects,
514
- appliedEffects = _ref2$appliedEffects === void 0 ? [] : _ref2$appliedEffects,
515
- options = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
516
- var hasPublicId = typeof publicId === 'string';
517
- var hasUrl = typeof url === 'string';
518
- var hasText = typeof text$1 === 'object' || typeof text$1 === 'string';
519
- var hasPosition = typeof position$1 === 'object';
520
- if (!hasPublicId && !hasUrl && !hasText) {
521
- console.warn("An " + type + " is missing Public ID, URL, or Text");
522
- return;
523
- }
524
-
525
- // Start to construct the transformation string using text or the public ID
526
- // if it's image-based
527
-
528
- var layerTransformation;
529
- if (hasText) {
530
- layerTransformation = typeQualifier + "_text";
531
- } else if (hasPublicId) {
532
- layerTransformation = typeQualifier + "_" + publicId.replace(/\//g, ':');
533
- } else if (hasUrl) {
534
- layerTransformation = typeQualifier + "_fetch:" + encodeBase64(url);
535
- }
536
-
537
- // Begin organizing transformations based on what it is and the location
538
- // it needs to be placed in the URL
539
-
540
- var primary$1 = [];
541
- var applied = [];
542
-
543
- // Gemeral options
544
-
545
- Object.keys(options).forEach(function (key) {
546
- if (!primary[key]) return;
547
- var qualifier = primary[key].qualifier;
548
- var transformation = constructTransformation({
549
- qualifier: qualifier,
550
- value: options[key]
551
- });
552
- primary$1.push(transformation);
553
- });
554
-
555
- // Layer effects
556
- // For layer effects we allow both the standard effects to be applied as well
557
- // as the primary ones like width and height as those can be used to modify
558
- // the layer after it's created
559
-
560
- layerEffects.forEach(function (effect) {
561
- Object.keys(effect).forEach(function (key) {
562
- var _ref3 = primary[key] || effects[key] || {},
563
- qualifier = _ref3.qualifier,
564
- prefix = _ref3.prefix;
565
- var transformation = constructTransformation({
566
- qualifier: qualifier,
567
- prefix: prefix,
568
- value: effect[key]
569
- });
570
- primary$1.push(transformation);
571
- });
572
- });
573
-
574
- // Applied Layer effects
575
- // Similar to layer effects but they get appended to an additional transformation
576
- // along with fl_layer_applied
577
-
578
- appliedEffects.forEach(function (effect) {
579
- Object.keys(effect).forEach(function (key) {
580
- var _ref4 = primary[key] || effects[key] || {},
581
- qualifier = _ref4.qualifier,
582
- prefix = _ref4.prefix;
583
- var transformation = constructTransformation({
584
- qualifier: qualifier,
585
- prefix: prefix,
586
- value: effect[key]
587
- });
588
- applied.push(transformation);
589
- });
590
- });
591
-
592
- // Text styling
593
-
594
- if (hasText) {
595
- if (typeof text$1 === 'string') {
596
- text$1 = _extends({}, DEFAULT_TEXT_OPTIONS, {
597
- text: text$1
598
- });
599
- }
600
- var textTransformations = [];
601
- Object.keys(text$1).forEach(function (key) {
602
- if (!text[key]) return;
603
- var _qualifiersText$key = text[key],
604
- qualifier = _qualifiersText$key.qualifier,
605
- location = _qualifiersText$key.location;
606
- if (location === 'primary') {
607
- primary$1.push(qualifier + "_" + text$1[key]);
608
- } else if (qualifier === 'self') {
609
- textTransformations.push(key);
610
- } else if (qualifier) {
611
- textTransformations.push(qualifier + "_" + text$1[key]);
612
- } else {
613
- textTransformations.push(text$1[key]);
614
- }
615
- });
616
- layerTransformation = layerTransformation + ":" + textTransformations.join('_') + ":" + text$1.text;
617
- }
618
-
619
- // Positioning
620
-
621
- if (hasPosition) {
622
- Object.keys(position$1).forEach(function (key) {
623
- if (!position[key]) return;
624
- var qualifier = position[key].qualifier;
625
- var transformation = constructTransformation({
626
- qualifier: qualifier,
627
- value: position$1[key]
628
- });
629
- applied.push(transformation);
630
- });
631
- }
632
-
633
- // Add all primary transformations
634
-
635
- if (primary$1.length > 0) {
636
- layerTransformation = layerTransformation + "," + primary$1.join(',');
637
- }
638
-
639
- // Add all applied transformations
640
-
641
- layerTransformation = layerTransformation + "/fl_layer_apply,fl_no_overflow";
642
- if (applied.length > 0) {
643
- layerTransformation = layerTransformation + "," + applied.join(',');
644
- }
645
-
646
- // Finally add it to the image
647
-
648
- cldImage.addTransformation(layerTransformation);
649
- }
650
- }
651
-
652
- var overlaysPlugin = {
653
- __proto__: null,
654
- props: props$5,
655
- DEFAULT_TEXT_OPTIONS: DEFAULT_TEXT_OPTIONS,
656
- plugin: plugin$5
657
- };
658
-
659
- var props$4 = ['transformations'];
660
- function plugin$4(_temp) {
661
- var _ref = _temp === void 0 ? {} : _temp,
662
- cldImage = _ref.cldImage,
663
- options = _ref.options;
664
- var _options$transformati = options.transformations,
665
- transformations = _options$transformati === void 0 ? [] : _options$transformati;
666
- if (!Array.isArray(transformations)) {
667
- transformations = [transformations];
668
- }
669
- transformations.forEach(function (transformation) {
670
- cldImage.addTransformation("t_" + transformation);
671
- });
672
- }
673
-
674
- var namedTransformationsPlugin = {
675
- __proto__: null,
676
- props: props$4,
677
- plugin: plugin$4
678
- };
679
-
680
- var props$3 = ['rawTransformations'];
681
- function plugin$3(_temp) {
682
- var _ref = _temp === void 0 ? {} : _temp,
683
- cldImage = _ref.cldImage,
684
- options = _ref.options;
685
- var _options$rawTransform = options.rawTransformations,
686
- rawTransformations = _options$rawTransform === void 0 ? [] : _options$rawTransform;
687
- rawTransformations.forEach(function (transformation) {
688
- cldImage.addTransformation(transformation);
689
- });
690
- }
691
-
692
- var rawTransformationsPlugin = {
693
- __proto__: null,
694
- props: props$3,
695
- plugin: plugin$3
696
- };
697
-
698
- var props$2 = ['removeBackground'];
699
- function plugin$2(_temp) {
700
- var _ref = _temp === void 0 ? {} : _temp,
701
- cldImage = _ref.cldImage,
702
- options = _ref.options;
703
- var _options$removeBackgr = options.removeBackground,
704
- removeBackground = _options$removeBackgr === void 0 ? false : _options$removeBackgr;
705
- if (removeBackground) {
706
- cldImage.effect('e_background_removal');
707
- }
708
- }
709
-
710
- var removeBackgroundPlugin = {
711
- __proto__: null,
712
- props: props$2,
713
- plugin: plugin$2
714
- };
715
-
716
- var _excluded$2 = ["publicId", "type", "position", "text", "effects", "flags"];
717
- var props$1 = ['underlay', 'underlays'];
718
- function plugin$1(_temp) {
719
- var _ref = _temp === void 0 ? {} : _temp,
720
- cldImage = _ref.cldImage,
721
- options = _ref.options;
722
- var underlay = options.underlay,
723
- _options$underlays = options.underlays,
724
- underlays = _options$underlays === void 0 ? [] : _options$underlays;
725
- var typeQualifier = 'u';
726
- if (Array.isArray(underlays)) {
727
- underlays.forEach(applyUnderlay);
728
- }
729
- if (typeof underlay === 'string') {
730
- var underlayOptions = {
731
- publicId: underlay,
732
- crop: 'fill',
733
- width: '1.0',
734
- height: '1.0',
735
- flags: ['relative']
736
- };
737
- applyUnderlay(underlayOptions);
738
- }
739
-
740
- /**
741
- * applyUnderlay
742
- */
743
-
744
- function applyUnderlay(_ref2) {
745
- var publicId = _ref2.publicId,
746
- type = _ref2.type,
747
- position$1 = _ref2.position,
748
- _ref2$effects = _ref2.effects,
749
- layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
750
- _ref2$flags = _ref2.flags,
751
- flags$1 = _ref2$flags === void 0 ? [] : _ref2$flags,
752
- options = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
753
- var hasPublicId = typeof publicId === 'string';
754
- var hasPosition = typeof position$1 === 'object';
755
- if (!hasPublicId) {
756
- console.warn("An " + type + " is missing a Public ID");
757
- return;
758
- }
759
-
760
- // Start to construct the transformation string using text or the public ID
761
- // if it's image-based
762
-
763
- var layerTransformation = typeQualifier + "_" + publicId.replace(/\//g, ':');
764
-
765
- // Begin organizing transformations based on what it is and the location
766
- // it needs to be placed in the URL
767
-
768
- var primary$1 = [];
769
- var applied = [];
770
-
771
- // Gemeral options
772
-
773
- Object.keys(options).forEach(function (key) {
774
- if (!primary[key]) return;
775
- var qualifier = primary[key].qualifier;
776
- primary$1.push(qualifier + "_" + options[key]);
777
- });
778
-
779
- // Layer effects
780
-
781
- layerEffects.forEach(function (effect) {
782
- Object.keys(effect).forEach(function (key) {
783
- if (!primary[key]) return;
784
- var qualifier = primary[key].qualifier;
785
- primary$1.push(qualifier + "_" + effect[key]);
786
- });
787
- });
788
-
789
- // Positioning
790
-
791
- if (hasPosition) {
792
- Object.keys(position$1).forEach(function (key) {
793
- if (!position[key]) return;
794
- var qualifier = position[key].qualifier;
795
- applied.push(qualifier + "_" + position$1[key]);
796
- });
797
- }
798
-
799
- // Positioning
800
-
801
- flags$1.forEach(function (key) {
802
- if (!flags[key]) return;
803
- var _qualifiersFlags$key = flags[key],
804
- qualifier = _qualifiersFlags$key.qualifier,
805
- prefix = _qualifiersFlags$key.prefix;
806
- primary$1.push(prefix + "_" + qualifier);
807
- });
808
-
809
- // Add all primary transformations
810
-
811
- layerTransformation = layerTransformation + "," + primary$1.join(',');
812
-
813
- // Add all applied transformations
814
-
815
- layerTransformation = layerTransformation + "/fl_layer_apply,fl_no_overflow";
816
- if (applied.length > 0) {
817
- layerTransformation = layerTransformation + "," + applied.join(',');
818
- }
819
-
820
- // Finally add it to the image
821
-
822
- cldImage.addTransformation(layerTransformation);
823
- }
824
- }
825
-
826
- var underlaysPlugin = {
827
- __proto__: null,
828
- props: props$1,
829
- plugin: plugin$1
830
- };
831
-
832
- var props = ['zoompan'];
833
- function plugin(_temp) {
834
- var _ref = _temp === void 0 ? {} : _temp,
835
- cldImage = _ref.cldImage,
836
- options = _ref.options;
837
- var _options$zoompan = options.zoompan,
838
- zoompan = _options$zoompan === void 0 ? false : _options$zoompan;
839
- var overrides = {};
840
- if (zoompan === true) {
841
- cldImage.effect('e_zoompan');
842
- } else if (typeof zoompan === 'string') {
843
- if (zoompan === 'loop') {
844
- cldImage.effect('e_zoompan');
845
- cldImage.effect('e_loop');
846
- } else {
847
- cldImage.effect("e_zoompan:" + zoompan);
848
- }
849
- } else if (typeof zoompan === 'object') {
850
- var zoompanEffect = 'e_zoompan';
851
- if (typeof zoompan.options === 'string') {
852
- zoompanEffect = "" + zoompanEffect + zoompan.options;
853
- }
854
- cldImage.effect(zoompanEffect);
855
- var loopEffect;
856
- if (zoompan.loop === true) {
857
- loopEffect = 'e_loop';
858
- } else if (typeof zoompan.loop === 'string') {
859
- loopEffect = "e_loop" + zoompan.loop;
860
- }
861
- if (loopEffect) {
862
- cldImage.effect(loopEffect);
863
- }
864
- }
865
- if (zoompan !== false) {
866
- overrides.format = 'gif';
867
- }
868
- return {
869
- options: overrides
870
- };
871
- }
872
-
873
- var zoompanPlugin = {
874
- __proto__: null,
875
- props: props,
876
- plugin: plugin
877
- };
878
-
879
- var NEXT_CLOUDINARY_ANALYTICS_ID = 'V';
880
-
881
44
  var name = "next-cloudinary";
882
- var version = "1.12.2";
45
+ var version = "2.0.0";
883
46
  var main = "dist/next-cloudinary.umd.js";
884
47
  var module$1 = "dist/next-cloudinary.module.js";
885
48
  var source = "src/index.ts";
@@ -891,6 +54,8 @@ var scripts = {
891
54
  test: "jest"
892
55
  };
893
56
  var dependencies = {
57
+ "@cloudinary-util/url-loader": "^1.2.4",
58
+ "@cloudinary-util/util": "^1.1.1",
894
59
  "@cloudinary/url-gen": "^1.8.6"
895
60
  };
896
61
  var devDependencies = {
@@ -922,6 +87,14 @@ var pkg = {
922
87
  peerDependencies: peerDependencies
923
88
  };
924
89
 
90
+ var NEXT_CLOUDINARY_ANALYTICS_ID = 'V';
91
+ var NEXT_CLOUDINARY_VERSION = pkg.version;
92
+ var NEXT_VERSION = nextPkg__default["default"].version;
93
+
94
+ /**
95
+ * createPlaceholderUrl
96
+ */
97
+
925
98
  /**
926
99
  * pollForProcessingImage
927
100
  */
@@ -974,95 +147,10 @@ var pollForProcessingImage = function pollForProcessingImage(options) {
974
147
  return Promise.reject(e);
975
148
  }
976
149
  };
977
- var transformationPlugins = [
978
- // Background Removal must always come first
979
- removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, namedTransformationsPlugin, underlaysPlugin, zoompanPlugin,
980
- // Raw transformations needs to be last simply to make sure
981
- // it's always expected to applied the same way
982
- rawTransformationsPlugin];
983
- var cld;
984
- /**
985
- * constructCloudinaryUrl
986
- */
987
- function constructCloudinaryUrl(_ref) {
988
- var options = _ref.options,
989
- config = _ref.config;
990
- if (!cld) {
991
- cld = new urlGen.Cloudinary(_extends({
992
- cloud: {
993
- cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
994
- }
995
- }, config));
996
- }
997
- var publicId = getPublicId(options == null ? void 0 : options.src);
998
- var cldImage = cld.image(publicId);
999
- transformationPlugins.forEach(function (_ref2) {
1000
- var plugin = _ref2.plugin;
1001
- // @ts-ignore
1002
- var _ref3 = plugin({
1003
- cldImage: cldImage,
1004
- options: options
1005
- }) || {},
1006
- pluginOptions = _ref3.options;
1007
- if (pluginOptions != null && pluginOptions.format && options) {
1008
- options.format = pluginOptions.format;
1009
- }
1010
- if (pluginOptions != null && pluginOptions.width && options) {
1011
- options.resize = {
1012
- width: pluginOptions == null ? void 0 : pluginOptions.width
1013
- };
1014
- }
1015
- });
1016
- if (options != null && options.resize) {
1017
- var _options$resize = options.resize,
1018
- width = _options$resize.width,
1019
- _options$resize$crop = _options$resize.crop,
1020
- crop = _options$resize$crop === void 0 ? 'scale' : _options$resize$crop;
1021
- cldImage.effect("c_" + crop + ",w_" + width);
1022
- }
1023
- return cldImage.setDeliveryType((options == null ? void 0 : options.deliveryType) || 'upload').format((options == null ? void 0 : options.format) || 'auto').delivery("q_" + ((options == null ? void 0 : options.quality) || 'auto')).toURL({
1024
- trackedAnalytics: {
1025
- sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
1026
- sdkSemver: pkg.version,
1027
- techVersion: nextPkg__default["default"].version
1028
- }
1029
- });
1030
- }
1031
- /**
1032
- * Retrieves the public id of a cloudiary image url. If no url is recognized it returns the parameter it self.
1033
- * If it's recognized that is a url and it's not possible to get the public id, it warns the user.
1034
- *
1035
- * @param {string} src The cloudiary url or public id.
1036
- *
1037
- * @return {string} The images public id
1038
- */
1039
- function getPublicId(src) {
1040
- if (typeof src !== 'string') {
1041
- throw new Error("Invalid src of type " + typeof src);
1042
- }
1043
- if (src.includes('res.cloudinary.com')) {
1044
- var regexWithTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(.*)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
1045
- var regexWithoutTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
1046
- var withTransformations = src.match(regexWithTransformations);
1047
- var withoutTransformations = src.match(regexWithoutTransformations);
1048
- if (withTransformations) {
1049
- return withTransformations[withTransformations.length - 1];
1050
- } else if (withoutTransformations) {
1051
- return withoutTransformations[withoutTransformations.length - 1];
1052
- } else {
1053
- console.warn("Not possible to retrieve the publicUrl from " + src + ", make sure it's a valid cloudinary image url.");
1054
- }
1055
- }
1056
- return src;
1057
- }
1058
- /**
1059
- * createPlaceholderUrl
1060
- */
1061
- function createPlaceholderUrl(_ref4) {
1062
- var src = _ref4.src,
1063
- _ref4$placeholder = _ref4.placeholder,
1064
- placeholder = _ref4$placeholder === void 0 ? true : _ref4$placeholder,
1065
- config = _ref4.config;
150
+ function createPlaceholderUrl(_ref) {
151
+ var src = _ref.src,
152
+ _ref$placeholder = _ref.placeholder,
153
+ placeholder = _ref$placeholder === void 0 ? true : _ref$placeholder;
1066
154
  var rawTransformations = [];
1067
155
  if (placeholder === 'grayscale') {
1068
156
  rawTransformations.push('e_grayscale');
@@ -1072,14 +160,24 @@ function createPlaceholderUrl(_ref4) {
1072
160
  rawTransformations.push('e_grayscale');
1073
161
  rawTransformations.push("e_colorize:60,co_" + color);
1074
162
  }
1075
- return constructCloudinaryUrl({
163
+ return urlLoader.constructCloudinaryUrl({
1076
164
  options: {
1077
165
  src: src,
1078
166
  width: 100,
1079
167
  quality: 1,
1080
168
  rawTransformations: rawTransformations
1081
169
  },
1082
- config: config
170
+ config: {
171
+ cloud: {
172
+ cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
173
+ }
174
+ },
175
+ analytics: {
176
+ sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
177
+ sdkSemver: NEXT_CLOUDINARY_VERSION,
178
+ techVersion: NEXT_VERSION,
179
+ feature: ''
180
+ }
1083
181
  });
1084
182
  }
1085
183
 
@@ -1103,9 +201,19 @@ function cloudinaryLoader(_ref) {
1103
201
  options.widthResize = loaderOptions.width;
1104
202
  options.heightResize = Math.round(options.height * multiplier);
1105
203
  }
1106
- return constructCloudinaryUrl({
204
+ return urlLoader.constructCloudinaryUrl({
1107
205
  options: options,
1108
- config: cldConfig
206
+ config: _extends({
207
+ cloud: {
208
+ cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
209
+ }
210
+ }, cldConfig),
211
+ analytics: {
212
+ sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
213
+ sdkSemver: NEXT_CLOUDINARY_VERSION,
214
+ techVersion: NEXT_VERSION,
215
+ feature: ''
216
+ }
1109
217
  });
1110
218
  }
1111
219
 
@@ -1127,7 +235,7 @@ var CldImage = function CldImage(props) {
1127
235
  }
1128
236
  };
1129
237
  var CLD_OPTIONS = ['deliveryType'];
1130
- transformationPlugins.forEach(function (_ref) {
238
+ urlLoader.transformationPlugins.forEach(function (_ref) {
1131
239
  var _ref$props = _ref.props,
1132
240
  props = _ref$props === void 0 ? [] : _ref$props;
1133
241
  props.forEach(function (prop) {
@@ -1169,7 +277,15 @@ var CldImage = function CldImage(props) {
1169
277
  //
1170
278
  // https://nextjs.org/docs/api-reference/next/image#blurdataurl
1171
279
  if (imageProps.placeholder) {
1172
- var publicId = getPublicId(props.src);
280
+ var publicId;
281
+ if (props.src.startsWith('https://')) {
282
+ try {
283
+ publicId = util.getPublicId(props.src);
284
+ } catch (e) {}
285
+ }
286
+ if (!publicId) {
287
+ publicId = props.src;
288
+ }
1173
289
  imageProps.blurDataURL = createPlaceholderUrl({
1174
290
  src: publicId,
1175
291
  placeholder: props.placeholder
@@ -1179,7 +295,7 @@ var CldImage = function CldImage(props) {
1179
295
  }
1180
296
  }
1181
297
  if (props.src && props.preserveTransformations) {
1182
- var transformations = getTransformations(props.src, props.preserveTransformations);
298
+ var transformations = util.getTransformations(props.src, props.preserveTransformations);
1183
299
  var rawTransformations = imageProps.rawTransformations ? [].concat(imageProps.rawTransformations) : [];
1184
300
  imageProps.rawTransformations = [].concat(rawTransformations, transformations);
1185
301
  }
@@ -1205,14 +321,26 @@ var CldOgImage = function CldOgImage(_ref) {
1205
321
  twitterTitle = _ref.twitterTitle,
1206
322
  props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
1207
323
  var options = _extends({}, props, {
1208
- width: props.width || IMAGE_WIDTH,
1209
- height: props.height || IMAGE_HEIGHT,
324
+ alt: props.alt,
1210
325
  crop: props.crop || 'fill',
1211
326
  gravity: props.gravity || 'center',
1212
- alt: props.alt
327
+ height: props.height || IMAGE_HEIGHT,
328
+ src: props.src,
329
+ width: props.width || IMAGE_WIDTH
1213
330
  });
1214
- var ogImageUrl = constructCloudinaryUrl({
1215
- options: options
331
+ var ogImageUrl = urlLoader.constructCloudinaryUrl({
332
+ options: options,
333
+ config: {
334
+ cloud: {
335
+ cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
336
+ }
337
+ },
338
+ analytics: {
339
+ sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
340
+ sdkSemver: NEXT_CLOUDINARY_VERSION,
341
+ techVersion: NEXT_VERSION,
342
+ feature: ''
343
+ }
1216
344
  });
1217
345
  // We need to include the tags within the Next.js Head component rather than
1218
346
  // direcly adding them inside of the Head otherwise we get unexpected results
@@ -1382,9 +510,4 @@ exports.CldOgImage = CldOgImage;
1382
510
  exports.CldUploadButton = CldUploadButton;
1383
511
  exports.CldUploadWidget = CldUploadWidget;
1384
512
  exports.cloudinaryLoader = cloudinaryLoader;
1385
- exports.constructCloudinaryUrl = constructCloudinaryUrl;
1386
- exports.effects = effects;
1387
- exports.position = position;
1388
- exports.primary = primary;
1389
- exports.text = text;
1390
513
  //# sourceMappingURL=next-cloudinary.js.map