@capillarytech/creatives-library 7.12.77 → 7.12.79

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.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/v2Containers/Line/Container/Image/index.js +5 -4
  3. package/v2Containers/Line/Container/ImageCarousel/index.js +6 -5
  4. package/v2Containers/Line/Container/ImageMap/index.js +2 -1
  5. package/v2Containers/Line/Container/Video/index.js +7 -1
  6. package/v2Containers/Line/Container/index.js +4 -5
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "7.12.77",
4
+ "version": "7.12.79",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
package/v2Containers/Line/Container/Image/index.js CHANGED
@@ -15,6 +15,7 @@ import Gallery from '../../../Assets/Gallery';
15
15
  import style from './style';
16
16
  import { CAP_G06, CAP_G09 } from '@capillarytech/cap-ui-library/styled/variables';
17
17
  import withStyles from '../../../../hoc/withStyles';
18
+ import { getCdnUrl } from '../../../../utils/cdnTransformation';
18
19
 
19
20
  import messages from './messages';
20
21
  import {
@@ -73,7 +74,7 @@ export const LineImage = ({
73
74
  if (imageSrc && (isFullMode ? messageTitle: true) && imagePreview) {
74
75
  updateMessageState({
75
76
  isError: !imageSrc || !(isFullMode ? messageTitle : true) || isImageError || errorMessageTitle,
76
- originalContentUrl: imageSrc,
77
+ originalContentUrl: getCdnUrl({url: imageSrc}),
77
78
  previewImageUrl: imagePreview,
78
79
  messageTitle,
79
80
  index,
@@ -112,7 +113,7 @@ export const LineImage = ({
112
113
 
113
114
  updateMessageState({
114
115
  isError: !imgSrc || !(isFullMode ? messageTitle : true) || errorMessageTitle,
115
- originalContentUrl: imgSrc,
116
+ originalContentUrl: getCdnUrl({url: imgSrc}),
116
117
  previewImageUrl: imgPreview,
117
118
  messageTitle,
118
119
  index,
@@ -155,7 +156,7 @@ export const LineImage = ({
155
156
  }
156
157
  updateMessageState({
157
158
  isError: !imageSrc || !(isFullMode ? value : true) || isImageError || !value,
158
- originalContentUrl: imageSrc,
159
+ originalContentUrl: getCdnUrl({url: imageSrc}),
159
160
  previewImageUrl: imagePreview,
160
161
  messageTitle: value,
161
162
  index,
@@ -412,7 +413,7 @@ export const LineImage = ({
412
413
  updateImagePreview(imagePreview);
413
414
  updateMessageState({
414
415
  isError: !image || !(isFullMode ? messageTitle : true) || isImageError || errorMessageTitle,
415
- originalContentUrl: image,
416
+ originalContentUrl: getCdnUrl({url: image}),
416
417
  previewImageUrl: imagePreview,
417
418
  messageTitle,
418
419
  index,
package/v2Containers/Line/Container/ImageCarousel/index.js CHANGED
@@ -15,6 +15,7 @@ import LineDrawer from '../Drawer';
15
15
  import style from './style';
16
16
  import { CAP_G06, FONT_COLOR_01, FONT_COLOR_02, CAP_SPACE_08, CAP_WHITE, CAP_SPACE_24, CAP_SPACE_04 } from '@capillarytech/cap-ui-library/styled/variables';
17
17
  import withStyles from '../../../../hoc/withStyles';
18
+ import { getCdnUrl } from '../../../../utils/cdnTransformation';
18
19
 
19
20
  import LineImageCarouselContent from './Content';
20
21
 
@@ -103,7 +104,7 @@ export const LineImageCarousel = (props) => {
103
104
  } = content || {};
104
105
  validCarouselImages.push({
105
106
  activeIndex: index,
106
- originalContentUrl: url,
107
+ originalContentUrl: getCdnUrl({url: url}),
107
108
  aspectRatio,
108
109
  selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
109
110
  actionContent: text || uri,
@@ -127,7 +128,7 @@ export const LineImageCarousel = (props) => {
127
128
 
128
129
  validCarouselImages.push({
129
130
  activeIndex: index,
130
- originalContentUrl: imageUrl,
131
+ originalContentUrl: getCdnUrl({url: imageUrl}),
131
132
  selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
132
133
  actionContent: text || uri,
133
134
  actionLabel: label,
@@ -160,7 +161,7 @@ export const LineImageCarousel = (props) => {
160
161
  ? isErrorIndex
161
162
  : ((!originalContentUrl || !selectedActionType || actionContentErrorMessage || actionLabelErrorMessage || !actionContent) && activeIndex);
162
163
  columns.push({
163
- imageUrl: originalContentUrl,
164
+ imageUrl: getCdnUrl({url: originalContentUrl}),
164
165
  aspectRatio,
165
166
  action: {
166
167
  type: selectedActionType ? (selectedActionType === TEXT_ACTION_TYPE ? MESSAGE_ACTION_TYPE : URL_ACTION_TYPE) : '',
@@ -455,7 +456,7 @@ export const LineImageCarousel = (props) => {
455
456
  } = content || {};
456
457
  validCarouselImages.push({
457
458
  activeIndex: index,
458
- originalContentUrl: url,
459
+ originalContentUrl: getCdnUrl({url: url}),
459
460
  aspectRatio,
460
461
  selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
461
462
  actionContent: text || uri,
@@ -480,7 +481,7 @@ export const LineImageCarousel = (props) => {
480
481
 
481
482
  validCarouselImages.push({
482
483
  activeIndex: index,
483
- originalContentUrl: imageUrl,
484
+ originalContentUrl: getCdnUrl({url: imageUrl}),
484
485
  selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
485
486
  actionContent: text || uri,
486
487
  actionLabel: label,
package/v2Containers/Line/Container/ImageMap/index.js CHANGED
@@ -39,6 +39,7 @@ import {
39
39
  } from '../constants';
40
40
 
41
41
  const { CapIconAvatar } = CapIcon;
42
+ import { getCdnUrl } from '../../../../utils/cdnTransformation';
42
43
 
43
44
  export const LineImageMap = ({
44
45
  className,
@@ -114,7 +115,7 @@ export const LineImageMap = ({
114
115
  if (imageSrc && (isFullMode ? messageTitle: true) && imageMapTemplate && actionLinks) {
115
116
  updateMessageState({
116
117
  isError: !imageSrc || !(isFullMode ? messageTitle : true) || !imageMapTemplate || (isImageError && errorMessageTitle) || errorTitle || !altText,
117
- baseUrl: imageSrc,
118
+ baseUrl: getCdnUrl({url: imageSrc}),
118
119
  messageTitle,
119
120
  index,
120
121
  type: IMAGE_MAP,
package/v2Containers/Line/Container/Video/index.js CHANGED
@@ -27,6 +27,8 @@ import {
27
27
  MAX_ACTION_LABEL_LENGTH,
28
28
  } from './constants';
29
29
 
30
+ import { getCdnUrl } from '../../../../utils/cdnTransformation';
31
+
30
32
  export const LineVideo = ({
31
33
  className,
32
34
  id,
@@ -58,7 +60,7 @@ export const LineVideo = ({
58
60
  const [isTemplateDrawerRequired, updateTemplateDrawerRequirement] = useState(false);
59
61
  const [selectedTemplate, updateSelectedTemplate] = useState();
60
62
 
61
- const [videoSrc, updateVideoSrc] = useState('');
63
+ const [videoSrc, setVideoSrc] = useState('');
62
64
  const [videoName, updateVideoName] = useState('');
63
65
  const [isVideo, updateVideoStatus] = useState(false);
64
66
  const [isVideoError, updateVideoErrorMessage] = useState(false);
@@ -75,6 +77,10 @@ export const LineVideo = ({
75
77
  const [videoWidth, updateVideoWidth] = useState();
76
78
  const [isPlaying, updateIsPlaying] = useState(false);
77
79
 
80
+ const updateVideoSrc = React.useCallback((url)=>{
81
+ const newUrl = getCdnUrl({url, transformationEnabled: false, reduceQuality: false});
82
+ setVideoSrc(newUrl)
83
+ },[]);
78
84
 
79
85
  useEffect(() => {
80
86
  const {
package/v2Containers/Line/Container/index.js CHANGED
@@ -34,7 +34,6 @@ import * as templateActionsConfig from '../../Templates/actions';
34
34
  import withCreatives from '../../../hoc/withCreatives';
35
35
  import { gtmPush } from '../../../utils/gtmTrackers';
36
36
  import { LINE } from '../../CreativesContainer/constants';
37
- import { getCdnUrl } from '../../../utils/cdnTransformation';
38
37
 
39
38
  const { stopTimer } = GA.timeTracker;
40
39
 
@@ -402,7 +401,7 @@ export const LineContainer = ({
402
401
  messageData.previewImageUrl = previewImageUrl;
403
402
  }
404
403
  if (originalContentUrl) {
405
- messageData.originalContentUrl = getCdnUrl({url: originalContentUrl});
404
+ messageData.originalContentUrl = originalContentUrl;
406
405
  }
407
406
  if (selectedSticker) {
408
407
  messageData.stickerUrl = selectedSticker.stickerUrl;
@@ -411,7 +410,7 @@ export const LineContainer = ({
411
410
  messageData.stickerId = `${selectedSticker.stickerId}`;
412
411
  }
413
412
  if (baseUrl) {
414
- messageData.baseUrl = getCdnUrl({url: baseUrl});
413
+ messageData.baseUrl = baseUrl;
415
414
  messageData.altText = altText;
416
415
  }
417
416
  if (baseSize) {
@@ -427,7 +426,7 @@ export const LineContainer = ({
427
426
  type: 'bubble',
428
427
  hero: {
429
428
  type: 'image',
430
- url: getCdnUrl({url: item.imageUrl}),
429
+ url: item.imageUrl,
431
430
  size: 'full',
432
431
  aspectRatio: item.aspectRatio,
433
432
  aspectMode: 'cover',
@@ -474,7 +473,7 @@ export const LineContainer = ({
474
473
  height: videoHeight,
475
474
  width: videoWidth,
476
475
  },
477
- originalContentUrl: getCdnUrl({url: videoSrc, transformationEnabled: false, reduceQuality: false}),
476
+ originalContentUrl: videoSrc,
478
477
  previewImageUrl,
479
478
  };
480
479
  if (actionLabel) {