next-cloudinary 0.3.0 → 0.4.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,907 +0,0 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('next/image'), require('@cloudinary/url-gen'), require('react/jsx-runtime'), require('next/head'), require('react'), require('next/script')) :
3
- typeof define === 'function' && define.amd ? define(['exports', 'next/image', '@cloudinary/url-gen', 'react/jsx-runtime', 'next/head', 'react', 'next/script'], factory) :
4
- (global = global || self, factory(global.nextCloudinary = {}, global.Image, global.urlGen, global.jsxRuntime, global.Head, global.react, global.Script));
5
- })(this, (function (exports, Image, urlGen, jsxRuntime, Head, react, Script) {
6
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
7
-
8
- var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
9
- var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
10
- var Script__default = /*#__PURE__*/_interopDefaultLegacy(Script);
11
-
12
- function _extends() {
13
- _extends = Object.assign ? Object.assign.bind() : function (target) {
14
- for (var i = 1; i < arguments.length; i++) {
15
- var source = arguments[i];
16
-
17
- for (var key in source) {
18
- if (Object.prototype.hasOwnProperty.call(source, key)) {
19
- target[key] = source[key];
20
- }
21
- }
22
- }
23
-
24
- return target;
25
- };
26
- return _extends.apply(this, arguments);
27
- }
28
-
29
- function _objectWithoutPropertiesLoose(source, excluded) {
30
- if (source == null) return {};
31
- var target = {};
32
- var sourceKeys = Object.keys(source);
33
- var key, i;
34
-
35
- for (i = 0; i < sourceKeys.length; i++) {
36
- key = sourceKeys[i];
37
- if (excluded.indexOf(key) >= 0) continue;
38
- target[key] = source[key];
39
- }
40
-
41
- return target;
42
- }
43
-
44
- var cropsGravityAuto = ['crop', 'fill', 'lfill', 'fill_pad', 'thumb'];
45
- var props$6 = ['crop', 'gravity'];
46
- function plugin$6(_temp) {
47
- var _ref = _temp === void 0 ? {} : _temp,
48
- cldImage = _ref.cldImage,
49
- options = _ref.options;
50
-
51
- var width = options.width,
52
- height = options.height,
53
- _options$crop = options.crop,
54
- crop = _options$crop === void 0 ? 'limit' : _options$crop;
55
- var transformationString = "c_" + crop + ",w_" + width;
56
-
57
- if (!options.gravity && cropsGravityAuto.includes(crop)) {
58
- options.gravity = 'auto';
59
- }
60
-
61
- if (!['limit'].includes(crop)) {
62
- transformationString = transformationString + ",h_" + height;
63
- }
64
-
65
- if (options.gravity) {
66
- if (options.gravity === 'auto' && !cropsGravityAuto.includes(crop)) {
67
- console.warn('Auto gravity can only be used with crop, fill, lfill, fill_pad or thumb. Not applying gravity.');
68
- } else {
69
- transformationString = transformationString + ",g_" + options.gravity;
70
- }
71
- }
72
-
73
- cldImage.resize(transformationString);
74
- }
75
-
76
- var croppingPlugin = {
77
- __proto__: null,
78
- props: props$6,
79
- plugin: plugin$6
80
- };
81
-
82
- var params = ['art', {
83
- prop: 'autoBrightness',
84
- effect: 'auto_brightness'
85
- }, {
86
- prop: 'autoColor',
87
- effect: 'auto_color'
88
- }, {
89
- prop: 'autoContrast',
90
- effect: 'auto_contrast'
91
- }, {
92
- prop: 'assistColorblind',
93
- effect: 'assist_colorblind'
94
- }, 'blackwhite', 'blur', {
95
- prop: 'blurFaces',
96
- effect: 'blur_faces'
97
- }, {
98
- prop: 'blurRegion',
99
- effect: 'blur_region'
100
- }, 'brightness', {
101
- prop: 'brightnessHSB',
102
- effect: 'brightness_hsb'
103
- }, 'cartoonify', 'colorize', 'contrast', 'distort', {
104
- prop: 'fillLight',
105
- effect: 'fill_light'
106
- }, 'gamma', {
107
- prop: 'gradientFade',
108
- effect: 'gradient_fade'
109
- }, 'grayscale', 'improve', 'negate', {
110
- prop: 'oilPaint',
111
- effect: 'oil_paint'
112
- }, 'outline', 'pixelate', {
113
- prop: 'pixelateFaces',
114
- effect: 'pixelate_faces'
115
- }, {
116
- prop: 'pixelateRegion',
117
- effect: 'pixelate_region'
118
- }, 'redeye', {
119
- prop: 'replaceColor',
120
- effect: 'replace_color'
121
- }, 'saturation', 'sepia', 'shadow', 'sharpen', 'shear', {
122
- prop: 'simulateColorblind',
123
- effect: 'simulate_colorblind'
124
- }, 'tint', {
125
- prop: 'unsharpMask',
126
- effect: 'unsharp_mask'
127
- }, 'vectorize', 'vibrance', 'vignette'];
128
- var props$5 = params.map(function (param) {
129
- return param.prop || param;
130
- });
131
- function plugin$5(_temp) {
132
- var _ref = _temp === void 0 ? {} : _temp,
133
- cldImage = _ref.cldImage,
134
- options = _ref.options;
135
-
136
- params.forEach(function (key) {
137
- var prop = key.prop || key;
138
- var effect = key.effect || key;
139
-
140
- if (options[prop] === true) {
141
- cldImage.effect("e_" + effect);
142
- } else if (typeof options[prop] === 'string') {
143
- cldImage.effect("e_" + effect + ":" + options[prop]);
144
- }
145
- });
146
- }
147
-
148
- var effectsPlugin = {
149
- __proto__: null,
150
- props: props$5,
151
- plugin: plugin$5
152
- };
153
-
154
- // aspectRatio
155
- var primary = {
156
- aspectRatio: {
157
- qualifier: 'ar'
158
- },
159
- crop: {
160
- qualifier: 'c'
161
- },
162
- gravity: {
163
- qualifier: 'g'
164
- },
165
- height: {
166
- qualifier: 'h'
167
- },
168
- width: {
169
- qualifier: 'w'
170
- }
171
- };
172
- var position = {
173
- angle: {
174
- qualifier: 'a'
175
- },
176
- gravity: {
177
- qualifier: 'g'
178
- },
179
- x: {
180
- qualifier: 'x'
181
- },
182
- y: {
183
- qualifier: 'y'
184
- }
185
- };
186
- var text = {
187
- color: {
188
- qualifier: 'co',
189
- location: 'primary'
190
- },
191
- fontFamily: {
192
- qualifier: false
193
- },
194
- fontSize: {
195
- qualifier: false
196
- },
197
- fontWeight: {
198
- qualifier: false
199
- },
200
- letterSpacing: {
201
- qualifier: 'letter_spacing'
202
- },
203
- textDecoration: {
204
- qualifier: false
205
- }
206
- };
207
-
208
- var _excluded$3 = ["publicId", "position", "text", "effects"];
209
- var props$4 = ['text', 'overlays'];
210
- var DEFAULT_TEXT_OPTIONS = {
211
- color: 'black',
212
- fontFamily: 'Arial',
213
- fontSize: 200,
214
- fontWeight: 'bold'
215
- };
216
- function plugin$4(_temp) {
217
- var _ref = _temp === void 0 ? {} : _temp,
218
- cldImage = _ref.cldImage,
219
- options = _ref.options;
220
-
221
- var text$1 = options.text,
222
- _options$overlays = options.overlays,
223
- overlays = _options$overlays === void 0 ? [] : _options$overlays;
224
- var type = 'overlay';
225
- var typeQualifier = 'l';
226
-
227
- if (Array.isArray(overlays)) {
228
- overlays.forEach(applyOverlay);
229
- }
230
-
231
- if (typeof text$1 === 'string') {
232
- applyOverlay({
233
- text: _extends({}, DEFAULT_TEXT_OPTIONS, {
234
- text: text$1
235
- })
236
- });
237
- } else if (typeof text$1 === 'object') {
238
- applyOverlay({
239
- text: _extends({}, DEFAULT_TEXT_OPTIONS, text$1)
240
- });
241
- }
242
- /**
243
- * applyOverlay
244
- */
245
-
246
-
247
- function applyOverlay(_ref2) {
248
- var publicId = _ref2.publicId,
249
- position$1 = _ref2.position,
250
- text$1 = _ref2.text,
251
- _ref2$effects = _ref2.effects,
252
- layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
253
- options = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
254
-
255
- var hasPublicId = typeof publicId === 'string';
256
- var hasText = typeof text$1 === 'object' || typeof text$1 === 'string';
257
- var hasPosition = typeof position$1 === 'object';
258
-
259
- if (!hasPublicId && !hasText) {
260
- console.warn("An " + type + " is missing Public ID or Text");
261
- return;
262
- } // Start to construct the transformation string using text or the public ID
263
- // if it's image-based
264
-
265
-
266
- var layerTransformation;
267
-
268
- if (hasText) {
269
- layerTransformation = typeQualifier + "_text";
270
- } else {
271
- layerTransformation = typeQualifier + "_" + publicId.replace(/\//g, ':');
272
- } // Begin organizing transformations based on what it is and the location
273
- // it needs to be placed in the URL
274
-
275
-
276
- var primary$1 = [];
277
- var applied = []; // Gemeral options
278
-
279
- Object.keys(options).forEach(function (key) {
280
- if (!primary[key]) return;
281
- var qualifier = primary[key].qualifier;
282
- primary$1.push(qualifier + "_" + options[key]);
283
- }); // Layer effects
284
-
285
- layerEffects.forEach(function (effect) {
286
- Object.keys(effect).forEach(function (key) {
287
- if (!primary[key]) return;
288
- var qualifier = primary[key].qualifier;
289
- primary$1.push(qualifier + "_" + effect[key]);
290
- });
291
- }); // Text styling
292
-
293
- if (hasText) {
294
- if (typeof text$1 === 'string') {
295
- text$1 = _extends({}, DEFAULT_TEXT_OPTIONS, {
296
- text: text$1
297
- });
298
- }
299
-
300
- var textTransformations = [];
301
- Object.keys(text$1).forEach(function (key) {
302
- if (!text[key]) return;
303
- var _qualifiersText$key = text[key],
304
- qualifier = _qualifiersText$key.qualifier,
305
- location = _qualifiersText$key.location;
306
-
307
- if (location === 'primary') {
308
- primary$1.push(qualifier + "_" + text$1[key]);
309
- } else {
310
- textTransformations.push(text$1[key]);
311
- }
312
- });
313
- layerTransformation = layerTransformation + ":" + textTransformations.join('_') + ":" + text$1.text;
314
- } // Positioning
315
-
316
-
317
- if (hasPosition) {
318
- Object.keys(position$1).forEach(function (key) {
319
- if (!position[key]) return;
320
- var qualifier = position[key].qualifier;
321
- applied.push(qualifier + "_" + position$1[key]);
322
- });
323
- } // Add all primary transformations
324
-
325
-
326
- layerTransformation = layerTransformation + "," + primary$1.join(','); // Add all applied transformations
327
-
328
- layerTransformation = layerTransformation + "/fl_layer_apply,fl_no_overflow";
329
-
330
- if (applied.length > 0) {
331
- layerTransformation = layerTransformation + "," + applied.join(',');
332
- } // Finally add it to the image
333
-
334
-
335
- cldImage.addTransformation(layerTransformation);
336
- }
337
- }
338
-
339
- var overlaysPlugin = {
340
- __proto__: null,
341
- props: props$4,
342
- DEFAULT_TEXT_OPTIONS: DEFAULT_TEXT_OPTIONS,
343
- plugin: plugin$4
344
- };
345
-
346
- var props$3 = ['rawTransformations'];
347
- function plugin$3(_temp) {
348
- var _ref = _temp === void 0 ? {} : _temp,
349
- cldImage = _ref.cldImage,
350
- options = _ref.options;
351
-
352
- var _options$rawTransform = options.rawTransformations,
353
- rawTransformations = _options$rawTransform === void 0 ? [] : _options$rawTransform;
354
- rawTransformations.forEach(function (transformation) {
355
- cldImage.addTransformation(transformation);
356
- });
357
- }
358
-
359
- var rawTransformationsPlugin = {
360
- __proto__: null,
361
- props: props$3,
362
- plugin: plugin$3
363
- };
364
-
365
- var props$2 = ['removeBackground'];
366
- function plugin$2(_temp) {
367
- var _ref = _temp === void 0 ? {} : _temp,
368
- cldImage = _ref.cldImage,
369
- options = _ref.options;
370
-
371
- var _options$removeBackgr = options.removeBackground,
372
- removeBackground = _options$removeBackgr === void 0 ? false : _options$removeBackgr;
373
-
374
- if (removeBackground) {
375
- cldImage.effect('e_background_removal');
376
- }
377
- }
378
-
379
- var removeBackgroundPlugin = {
380
- __proto__: null,
381
- props: props$2,
382
- plugin: plugin$2
383
- };
384
-
385
- var _excluded$2 = ["publicId", "type", "position", "text", "effects"];
386
- var props$1 = ['underlay', 'underlays'];
387
- function plugin$1(_temp) {
388
- var _ref = _temp === void 0 ? {} : _temp,
389
- cldImage = _ref.cldImage,
390
- options = _ref.options;
391
-
392
- var underlay = options.underlay,
393
- _options$underlays = options.underlays,
394
- underlays = _options$underlays === void 0 ? [] : _options$underlays;
395
- var typeQualifier = 'u';
396
-
397
- if (Array.isArray(underlays)) {
398
- underlays.forEach(applyUnderlay);
399
- }
400
-
401
- if (typeof underlay === 'string') {
402
- var underlayOptions = {
403
- publicId: underlay,
404
- crop: 'fill'
405
- };
406
-
407
- if (options.width) {
408
- underlayOptions.width = options.width;
409
- }
410
-
411
- if (options.height) {
412
- underlayOptions.height = options.height;
413
- }
414
-
415
- applyUnderlay(underlayOptions);
416
- }
417
- /**
418
- * applyUnderlay
419
- */
420
-
421
-
422
- function applyUnderlay(_ref2) {
423
- var publicId = _ref2.publicId,
424
- type = _ref2.type,
425
- position$1 = _ref2.position,
426
- _ref2$effects = _ref2.effects,
427
- layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
428
- options = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
429
-
430
- var hasPublicId = typeof publicId === 'string';
431
- var hasPosition = typeof position$1 === 'object';
432
-
433
- if (!hasPublicId) {
434
- console.warn("An " + type + " is missing a Public ID");
435
- return;
436
- } // Start to construct the transformation string using text or the public ID
437
- // if it's image-based
438
-
439
-
440
- var layerTransformation = typeQualifier + "_" + publicId.replace(/\//g, ':'); // Begin organizing transformations based on what it is and the location
441
- // it needs to be placed in the URL
442
-
443
- var primary$1 = [];
444
- var applied = []; // Gemeral options
445
-
446
- Object.keys(options).forEach(function (key) {
447
- if (!primary[key]) return;
448
- var qualifier = primary[key].qualifier;
449
- primary$1.push(qualifier + "_" + options[key]);
450
- }); // Layer effects
451
-
452
- layerEffects.forEach(function (effect) {
453
- Object.keys(effect).forEach(function (key) {
454
- if (!primary[key]) return;
455
- var qualifier = primary[key].qualifier;
456
- primary$1.push(qualifier + "_" + effect[key]);
457
- });
458
- }); // Positioning
459
-
460
- if (hasPosition) {
461
- Object.keys(position$1).forEach(function (key) {
462
- if (!position[key]) return;
463
- var qualifier = position[key].qualifier;
464
- applied.push(qualifier + "_" + position$1[key]);
465
- });
466
- } // Add all primary transformations
467
-
468
-
469
- layerTransformation = layerTransformation + "," + primary$1.join(','); // Add all applied transformations
470
-
471
- layerTransformation = layerTransformation + "/fl_layer_apply,fl_no_overflow";
472
-
473
- if (applied.length > 0) {
474
- layerTransformation = layerTransformation + "," + applied.join(',');
475
- } // Finally add it to the image
476
-
477
-
478
- cldImage.addTransformation(layerTransformation);
479
- }
480
- }
481
-
482
- var underlaysPlugin = {
483
- __proto__: null,
484
- props: props$1,
485
- plugin: plugin$1
486
- };
487
-
488
- var props = ['zoompan'];
489
- function plugin(_temp) {
490
- var _ref = _temp === void 0 ? {} : _temp,
491
- cldImage = _ref.cldImage,
492
- options = _ref.options;
493
-
494
- var _options$zoompan = options.zoompan,
495
- zoompan = _options$zoompan === void 0 ? false : _options$zoompan;
496
- var overrides = {};
497
-
498
- if (zoompan === true) {
499
- cldImage.effect('e_zoompan');
500
- } else if (typeof zoompan === 'string') {
501
- if (zoompan === 'loop') {
502
- cldImage.effect('e_zoompan');
503
- cldImage.effect('e_loop');
504
- } else {
505
- cldImage.effect("e_zoompan:" + zoompan);
506
- }
507
- } else if (typeof zoompan === 'object') {
508
- var zoompanEffect = 'e_zoompan';
509
-
510
- if (typeof zoompan.options === 'string') {
511
- zoompanEffect = "" + zoompanEffect + zoompan.options;
512
- }
513
-
514
- cldImage.effect(zoompanEffect);
515
- var loopEffect;
516
-
517
- if (zoompan.loop === true) {
518
- loopEffect = 'e_loop';
519
- } else if (typeof zoompan.loop === 'string') {
520
- loopEffect = "e_loop" + zoompan.loop;
521
- }
522
-
523
- if (loopEffect) {
524
- cldImage.effect(loopEffect);
525
- }
526
- }
527
-
528
- if (zoompan !== false) {
529
- overrides.format = 'gif';
530
- }
531
-
532
- return {
533
- options: overrides
534
- };
535
- }
536
-
537
- var zoompanPlugin = {
538
- __proto__: null,
539
- props: props,
540
- plugin: plugin
541
- };
542
-
543
- var transformationPlugins = [// Background Removal must always come first
544
- removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, underlaysPlugin, zoompanPlugin, // Raw transformations needs to be last simply to make sure
545
- // it's always expected to applied the same way
546
- rawTransformationsPlugin];
547
- var cld;
548
- /**
549
- * constructCloudinaryUrl
550
- */
551
-
552
- function constructCloudinaryUrl(_ref) {
553
- var options = _ref.options,
554
- config = _ref.config;
555
-
556
- if (!cld) {
557
- cld = new urlGen.Cloudinary(_extends({
558
- cloud: {
559
- cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
560
- },
561
- url: {
562
- // Used to avoid issues with SSR particularly for the blurred placeholder
563
- analytics: false
564
- }
565
- }, config));
566
- }
567
-
568
- var publicId = getPublicId(options.src);
569
- var cldImage = cld.image(publicId);
570
- transformationPlugins.forEach(function (_ref2) {
571
- var plugin = _ref2.plugin;
572
-
573
- var _ref3 = plugin({
574
- cldImage: cldImage,
575
- options: options
576
- }) || {},
577
- pluginOptions = _ref3.options;
578
-
579
- if (pluginOptions != null && pluginOptions.format) {
580
- options.format = pluginOptions.format;
581
- }
582
- });
583
- return cldImage.setDeliveryType(options.deliveryType || 'upload').format(options.format || 'auto').delivery("q_" + (options.quality || 'auto')).toURL();
584
- }
585
- /**
586
- * Retrieves the public id of a cloudiary image url. If no url is recognized it returns the parameter it self.
587
- * If it's recognized that is a url and it's not possible to get the public id, it warns the user.
588
- *
589
- * @param {string} src The cloudiary url or public id.
590
- *
591
- * @return {string} The images public id
592
- */
593
-
594
- function getPublicId(src) {
595
- if (typeof src !== 'string') {
596
- throw new Error("Invalid src of type " + typeof src);
597
- }
598
-
599
- if (src.includes('res.cloudinary.com')) {
600
- var regexWithTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(.*)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
601
- var regexWithoutTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
602
- var withTransformations = src.match(regexWithTransformations);
603
- var withoutTransformations = src.match(regexWithoutTransformations);
604
-
605
- if (withTransformations) {
606
- return withTransformations[withTransformations.length - 1];
607
- } else if (withoutTransformations) {
608
- return withoutTransformations[withoutTransformations.length - 1];
609
- } else {
610
- console.warn("Not possible to retrieve the publicUrl from " + src + ", make sure it's a valid cloudinary image url.");
611
- }
612
- }
613
-
614
- return src;
615
- }
616
- /**
617
- * createPlaceholderUrl
618
- */
619
-
620
- function createPlaceholderUrl(_ref4) {
621
- var src = _ref4.src,
622
- _ref4$placeholder = _ref4.placeholder,
623
- placeholder = _ref4$placeholder === void 0 ? true : _ref4$placeholder,
624
- config = _ref4.config;
625
- var rawTransformations = [];
626
-
627
- if (placeholder === 'grayscale') {
628
- rawTransformations.push('e_grayscale');
629
- }
630
-
631
- if (typeof placeholder === 'string' && placeholder.includes('color:')) {
632
- var color = placeholder.split(':').splice(1).join(':');
633
- rawTransformations.push('e_grayscale');
634
- rawTransformations.push("e_colorize:60,co_" + color);
635
- }
636
-
637
- return constructCloudinaryUrl({
638
- options: {
639
- src: src,
640
- width: 100,
641
- quality: 1,
642
- rawTransformations: rawTransformations
643
- },
644
- config: config
645
- });
646
- }
647
-
648
- function cloudinaryLoader(defaultOptions, cldOptions, cldConfig) {
649
- if (cldConfig === void 0) {
650
- cldConfig = {};
651
- }
652
-
653
- return constructCloudinaryUrl({
654
- options: _extends({}, defaultOptions, cldOptions),
655
- config: cldConfig
656
- });
657
- }
658
-
659
- var CldImage = function CldImage(props) {
660
- var CLD_OPTIONS = [];
661
- transformationPlugins.forEach(function (_ref) {
662
- var _ref$props = _ref.props,
663
- props = _ref$props === void 0 ? [] : _ref$props;
664
- props.forEach(function (prop) {
665
- if (CLD_OPTIONS.includes(prop)) {
666
- throw new Error("Option " + prop + " already exists!");
667
- }
668
-
669
- CLD_OPTIONS.push(prop);
670
- });
671
- }); // Construct the base Image component props by filtering out Cloudinary-specific props
672
-
673
- var imageProps = {};
674
- Object.keys(props).filter(function (key) {
675
- return !CLD_OPTIONS.includes(key);
676
- }).forEach(function (key) {
677
- return imageProps[key] = props[key];
678
- }); // Construct Cloudinary-specific props by looking for values for any of the supported prop keys
679
-
680
- var cldOptions = {};
681
- CLD_OPTIONS.forEach(function (key) {
682
- if (props[key]) {
683
- cldOptions[key] = props[key];
684
- }
685
- }); // If we see a placeholder option, configure a Cloudinary-based URL.
686
- // The resulting image will always be blurred per Next.js, so we're
687
- // limited on options for placeholders.
688
- //
689
- // We need to do this logic here as we potentially need to mutate
690
- // an Image component prop as opposed to simply the URL
691
- //
692
- // https://nextjs.org/docs/api-reference/next/image#blurdataurl
693
-
694
- if (imageProps.placeholder) {
695
- var publicId = getPublicId(props.src);
696
- imageProps.blurDataURL = createPlaceholderUrl({
697
- src: publicId,
698
- placeholder: props.placeholder
699
- });
700
-
701
- if (imageProps.placeholder !== 'blur') {
702
- imageProps.placeholder = 'blur';
703
- }
704
- }
705
-
706
- return /*#__PURE__*/jsxRuntime.jsx(Image__default["default"], _extends({}, imageProps, {
707
- loader: function loader(options) {
708
- return cloudinaryLoader(_extends({}, imageProps, {
709
- options: options
710
- }), cldOptions);
711
- }
712
- }));
713
- };
714
-
715
- var _excluded$1 = ["excludeTags", "twitterTitle"];
716
- var IMAGE_WIDTH = 2400;
717
- var IMAGE_HEIGHT = 1200;
718
- var TWITTER_CARD = 'summary_large_image';
719
-
720
- var CldOgImage = function CldOgImage(_ref) {
721
- var _ref$excludeTags = _ref.excludeTags,
722
- excludeTags = _ref$excludeTags === void 0 ? [] : _ref$excludeTags,
723
- twitterTitle = _ref.twitterTitle,
724
- props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
725
-
726
- var options = _extends({}, props, {
727
- width: props.width || IMAGE_WIDTH,
728
- height: props.height || IMAGE_HEIGHT,
729
- crop: props.crop || 'fill',
730
- gravity: props.gravity || 'center'
731
- });
732
-
733
- var ogImageUrl = constructCloudinaryUrl({
734
- options: options
735
- }); // We need to include the tags within the Next.js Head component rather than
736
- // direcly adding them inside of the Head otherwise we get unexpected results
737
-
738
- return /*#__PURE__*/jsxRuntime.jsxs(Head__default["default"], {
739
- children: [/*#__PURE__*/jsxRuntime.jsx("meta", {
740
- property: "og:image",
741
- content: ogImageUrl
742
- }), /*#__PURE__*/jsxRuntime.jsx("meta", {
743
- property: "og:image:secure_url",
744
- content: ogImageUrl
745
- }), /*#__PURE__*/jsxRuntime.jsx("meta", {
746
- property: "og:image:width",
747
- content: options.width
748
- }), /*#__PURE__*/jsxRuntime.jsx("meta", {
749
- property: "og:image:height",
750
- content: options.height
751
- }), options.alt && /*#__PURE__*/jsxRuntime.jsx("meta", {
752
- property: "og:image:alt",
753
- content: options.alt
754
- }), !excludeTags.includes('twitter:title') && /*#__PURE__*/jsxRuntime.jsx("meta", {
755
- property: "twitter:title",
756
- content: twitterTitle || ' '
757
- }), /*#__PURE__*/jsxRuntime.jsx("meta", {
758
- property: "twitter:card",
759
- content: TWITTER_CARD
760
- }), /*#__PURE__*/jsxRuntime.jsx("meta", {
761
- property: "twitter:image",
762
- content: ogImageUrl
763
- })]
764
- });
765
- };
766
-
767
- var CldUploadWidget = function CldUploadWidget(_ref) {
768
- var children = _ref.children,
769
- onUpload = _ref.onUpload,
770
- options = _ref.options,
771
- signed = _ref.signed,
772
- signatureEndpoint = _ref.signatureEndpoint;
773
- var cloudinary = react.useRef();
774
- var widget = react.useRef();
775
- /**
776
- * generateSignature
777
- * @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
778
- */
779
-
780
- function generateSignature(callback, paramsToSign) {
781
- fetch(signatureEndpoint, {
782
- method: "POST",
783
- body: JSON.stringify({
784
- paramsToSign: paramsToSign
785
- })
786
- }).then(function (r) {
787
- return r.json();
788
- }).then(function (_ref2) {
789
- var signature = _ref2.signature;
790
- callback(signature);
791
- });
792
- }
793
- /**
794
- * createWidget
795
- * @description Creates a new instance of the Cloudinary widget and stores in a ref
796
- */
797
-
798
-
799
- function createWidget() {
800
- var _cloudinary$current;
801
-
802
- // When creating a signed upload, you need to provide both your Cloudinary API Key
803
- // as well as a signature generator function that will sign any paramters
804
- // either on page load or during the upload process. Read more about signed uploads at:
805
- // https://cloudinary.com/documentation/upload_widget#signed_uploads
806
- var totalOptions = _extends({}, options, !!signed && {
807
- uploadSignature: generateSignature
808
- }); // no need for apiSecret because of api/sign-cloudinary-params
809
-
810
-
811
- if (signed && !totalOptions.apiKey) {
812
- return new Error("Signed Upload needs apiKey!");
813
- }
814
-
815
- return (_cloudinary$current = cloudinary.current) == null ? void 0 : _cloudinary$current.createUploadWidget(totalOptions, function (error, result) {
816
- // The callback is a bit more chatty than failed or success so
817
- // only trigger when one of those are the case. You can additionally
818
- // create a separate handler such as onEvent and trigger it on
819
- // ever occurance
820
- if (error || result.event === "success") {
821
- onUpload(error, result, widget == null ? void 0 : widget.current);
822
- }
823
- });
824
- }
825
- /**
826
- * open
827
- * @description When triggered, uses the current widget instance to open the upload modal
828
- */
829
-
830
-
831
- function open() {
832
- if (!(widget != null && widget.current)) {
833
- widget.current = createWidget();
834
- }
835
-
836
- (widget == null ? void 0 : widget.current) && widget.current.open();
837
- }
838
- /**
839
- * handleOnLoad
840
- * @description Stores the Cloudinary window instance to a ref when the widget script loads
841
- */
842
-
843
-
844
- function handleOnLoad() {
845
- cloudinary.current = window.cloudinary;
846
- }
847
-
848
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
849
- children: [children({
850
- cloudinary: cloudinary.current,
851
- widget: widget.current,
852
- open: open
853
- }), /*#__PURE__*/jsxRuntime.jsx(Script__default["default"], {
854
- id: "cloudinary-" + Math.floor(Math.random() * 100),
855
- src: "https://widget.cloudinary.com/v2.0/global/all.js",
856
- onLoad: handleOnLoad,
857
- onError: function onError(e) {
858
- console.error("Script failed to load", e);
859
- }
860
- })]
861
- });
862
- };
863
-
864
- var _excluded = ["onUpload", "options", "signed", "label", "children"];
865
-
866
- var CldUploadButton = function CldUploadButton(_ref) {
867
- var onUpload = _ref.onUpload,
868
- options = _ref.options,
869
- signed = _ref.signed,
870
- _children = _ref.children,
871
- props = _objectWithoutPropertiesLoose(_ref, _excluded);
872
-
873
- return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
874
- children: /*#__PURE__*/jsxRuntime.jsx(CldUploadWidget, {
875
- signed: signed,
876
- options: options,
877
- onUpload: onUpload,
878
- signatureEndpoint: signed != null ? signed : props.signatureEndpoint,
879
- children: function children(_ref2) {
880
- var open = _ref2.open;
881
-
882
- function handleOnClick(e) {
883
- e.preventDefault();
884
- open();
885
- }
886
-
887
- return /*#__PURE__*/jsxRuntime.jsx("button", _extends({
888
- onClick: handleOnClick
889
- }, props, {
890
- children: _children
891
- }));
892
- }
893
- })
894
- });
895
- };
896
-
897
- exports.CldImage = CldImage;
898
- exports.CldOgImage = CldOgImage;
899
- exports.CldUploadButton = CldUploadButton;
900
- exports.CldUploadWidget = CldUploadWidget;
901
- exports.cloudinaryLoader = cloudinaryLoader;
902
- exports.position = position;
903
- exports.primary = primary;
904
- exports.text = text;
905
-
906
- }));
907
- //# sourceMappingURL=next-cloudinary.umd.js.map