@automattic/social-previews 2.0.0-beta.4 → 2.0.0-beta.5

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 (76) hide show
  1. package/dist/cjs/facebook-preview/post-preview.js +5 -3
  2. package/dist/cjs/facebook-preview/post-preview.js.map +1 -1
  3. package/dist/cjs/facebook-preview/previews.js +3 -3
  4. package/dist/cjs/facebook-preview/previews.js.map +1 -1
  5. package/dist/cjs/facebook-preview/style.scss +7 -4
  6. package/dist/cjs/linkedin-preview/link-preview.js +3 -1
  7. package/dist/cjs/linkedin-preview/link-preview.js.map +1 -1
  8. package/dist/cjs/linkedin-preview/post-preview.js +7 -4
  9. package/dist/cjs/linkedin-preview/post-preview.js.map +1 -1
  10. package/dist/cjs/linkedin-preview/style.scss +18 -1
  11. package/dist/cjs/twitter-preview/card.js +0 -3
  12. package/dist/cjs/twitter-preview/card.js.map +1 -1
  13. package/dist/cjs/twitter-preview/link-preview.js +3 -1
  14. package/dist/cjs/twitter-preview/link-preview.js.map +1 -1
  15. package/dist/cjs/twitter-preview/media.js +8 -12
  16. package/dist/cjs/twitter-preview/media.js.map +1 -1
  17. package/dist/cjs/twitter-preview/post-preview.js +2 -1
  18. package/dist/cjs/twitter-preview/post-preview.js.map +1 -1
  19. package/dist/cjs/twitter-preview/text.js +5 -3
  20. package/dist/cjs/twitter-preview/text.js.map +1 -1
  21. package/dist/esm/facebook-preview/post-preview.js +5 -3
  22. package/dist/esm/facebook-preview/post-preview.js.map +1 -1
  23. package/dist/esm/facebook-preview/previews.js +3 -3
  24. package/dist/esm/facebook-preview/previews.js.map +1 -1
  25. package/dist/esm/facebook-preview/style.scss +7 -4
  26. package/dist/esm/linkedin-preview/link-preview.js +3 -1
  27. package/dist/esm/linkedin-preview/link-preview.js.map +1 -1
  28. package/dist/esm/linkedin-preview/post-preview.js +7 -4
  29. package/dist/esm/linkedin-preview/post-preview.js.map +1 -1
  30. package/dist/esm/linkedin-preview/style.scss +18 -1
  31. package/dist/esm/twitter-preview/card.js +0 -3
  32. package/dist/esm/twitter-preview/card.js.map +1 -1
  33. package/dist/esm/twitter-preview/link-preview.js +3 -1
  34. package/dist/esm/twitter-preview/link-preview.js.map +1 -1
  35. package/dist/esm/twitter-preview/media.js +9 -13
  36. package/dist/esm/twitter-preview/media.js.map +1 -1
  37. package/dist/esm/twitter-preview/post-preview.js +2 -1
  38. package/dist/esm/twitter-preview/post-preview.js.map +1 -1
  39. package/dist/esm/twitter-preview/text.js +5 -3
  40. package/dist/esm/twitter-preview/text.js.map +1 -1
  41. package/dist/tsconfig-cjs.tsbuildinfo +1 -1
  42. package/dist/tsconfig.tsbuildinfo +1 -1
  43. package/dist/types/facebook-preview/post-preview.d.ts.map +1 -1
  44. package/dist/types/facebook-preview/previews.d.ts.map +1 -1
  45. package/dist/types/facebook-preview/types.d.ts +2 -1
  46. package/dist/types/facebook-preview/types.d.ts.map +1 -1
  47. package/dist/types/linkedin-preview/link-preview.d.ts.map +1 -1
  48. package/dist/types/linkedin-preview/post-preview.d.ts +1 -1
  49. package/dist/types/linkedin-preview/post-preview.d.ts.map +1 -1
  50. package/dist/types/linkedin-preview/types.d.ts +2 -1
  51. package/dist/types/linkedin-preview/types.d.ts.map +1 -1
  52. package/dist/types/twitter-preview/card.d.ts.map +1 -1
  53. package/dist/types/twitter-preview/link-preview.d.ts.map +1 -1
  54. package/dist/types/twitter-preview/media.d.ts.map +1 -1
  55. package/dist/types/twitter-preview/post-preview.d.ts.map +1 -1
  56. package/dist/types/twitter-preview/text.d.ts.map +1 -1
  57. package/dist/types/twitter-preview/types.d.ts +5 -9
  58. package/dist/types/twitter-preview/types.d.ts.map +1 -1
  59. package/dist/types/types.d.ts +14 -0
  60. package/dist/types/types.d.ts.map +1 -1
  61. package/package.json +1 -1
  62. package/src/facebook-preview/post-preview.tsx +22 -7
  63. package/src/facebook-preview/previews.tsx +3 -7
  64. package/src/facebook-preview/style.scss +7 -4
  65. package/src/facebook-preview/types.ts +2 -1
  66. package/src/linkedin-preview/link-preview.tsx +9 -1
  67. package/src/linkedin-preview/post-preview.tsx +43 -18
  68. package/src/linkedin-preview/style.scss +18 -1
  69. package/src/linkedin-preview/types.ts +2 -1
  70. package/src/twitter-preview/card.tsx +0 -3
  71. package/src/twitter-preview/link-preview.tsx +9 -1
  72. package/src/twitter-preview/media.tsx +18 -24
  73. package/src/twitter-preview/post-preview.tsx +14 -10
  74. package/src/twitter-preview/text.tsx +6 -3
  75. package/src/twitter-preview/types.ts +5 -13
  76. package/src/types.ts +17 -0
@@ -9,10 +9,12 @@ const use_image_hook_1 = tslib_1.__importDefault(require("./hooks/use-image-hook
9
9
  const actions_1 = tslib_1.__importDefault(require("./post/actions"));
10
10
  const header_1 = tslib_1.__importDefault(require("./post/header"));
11
11
  require("./style.scss");
12
- const FacebookPostPreview = ({ url, user, customText, customImage, imageMode, }) => {
13
- const [mode, isLoadingImage, imgProps] = (0, use_image_hook_1.default)({ mode: imageMode });
12
+ const FacebookPostPreview = ({ url, user, customText, media, imageMode, }) => {
13
+ const [mode] = (0, use_image_hook_1.default)({ mode: imageMode });
14
14
  const modeClass = `is-${mode === constants_1.PORTRAIT_MODE ? 'portrait' : 'landscape'}`;
15
- return ((0, jsx_runtime_1.jsxs)("div", { className: "facebook-preview__post", children: [(0, jsx_runtime_1.jsx)(header_1.default, { user: user }), (0, jsx_runtime_1.jsxs)("div", { className: "facebook-preview__content", children: [customText && (0, jsx_runtime_1.jsx)(custom_text_1.default, { text: customText, url: url, forceUrlDisplay: true }), (0, jsx_runtime_1.jsx)("div", { className: `facebook-preview__body ${isLoadingImage ? 'is-loading' : ''}`, children: (0, jsx_runtime_1.jsx)("div", { className: `facebook-preview__custom-image ${modeClass}`, children: (0, jsx_runtime_1.jsx)("img", { src: customImage, ...imgProps }) }) })] }), (0, jsx_runtime_1.jsx)(actions_1.default, {})] }));
15
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "facebook-preview__post", children: [(0, jsx_runtime_1.jsx)(header_1.default, { user: user }), (0, jsx_runtime_1.jsxs)("div", { className: "facebook-preview__content", children: [customText && (0, jsx_runtime_1.jsx)(custom_text_1.default, { text: customText, url: url, forceUrlDisplay: true }), (0, jsx_runtime_1.jsx)("div", { className: "facebook-preview__body", children: media ? ((0, jsx_runtime_1.jsx)("div", { className: `facebook-preview__media ${modeClass}`, children: media.map((mediaItem, index) => ((0, jsx_runtime_1.jsx)("div", { className: `facebook-preview__media-item ${modeClass}`, children: mediaItem.type.startsWith('video/') ? (
16
+ // eslint-disable-next-line jsx-a11y/media-has-caption
17
+ (0, jsx_runtime_1.jsx)("video", { controls: true, children: (0, jsx_runtime_1.jsx)("source", { src: mediaItem.url, type: mediaItem.type }) })) : ((0, jsx_runtime_1.jsx)("img", { alt: mediaItem.alt || '', src: mediaItem.url })) }, `facebook-preview__media-item-${index}`))) })) : null })] }), (0, jsx_runtime_1.jsx)(actions_1.default, {})] }));
16
18
  };
17
19
  exports.FacebookPostPreview = FacebookPostPreview;
18
20
  //# sourceMappingURL=post-preview.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/facebook-preview/post-preview.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA6C;AAC7C,wEAAuC;AACvC,oFAA8C;AAC9C,qEAAiD;AACjD,mEAA+C;AAG/C,wBAAsB;AAEf,MAAM,mBAAmB,GAAqC,CAAE,EACtE,GAAG,EACH,IAAI,EACJ,UAAU,EACV,WAAW,EACX,SAAS,GACT,EAAG,EAAE;IACL,MAAM,CAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,CAAE,GAAG,IAAA,wBAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAE,CAAC;IAC3E,MAAM,SAAS,GAAG,MAAO,IAAI,KAAK,yBAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAY,EAAE,CAAC;IAE9E,OAAO,CACN,iCAAK,SAAS,EAAC,wBAAwB,aACtC,uBAAC,gBAAkB,IAAC,IAAI,EAAG,IAAI,GAAK,EACpC,iCAAK,SAAS,EAAC,2BAA2B,aACvC,UAAU,IAAI,uBAAC,qBAAU,IAAC,IAAI,EAAG,UAAU,EAAG,GAAG,EAAG,GAAG,EAAG,eAAe,SAAG,EAC9E,gCAAK,SAAS,EAAG,0BAA2B,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAG,EAAE,YAChF,gCAAK,SAAS,EAAG,kCAAmC,SAAU,EAAE,YAE/D,gCAAK,GAAG,EAAG,WAAW,KAAQ,QAAQ,GAAK,GACtC,GACD,IACD,EACN,uBAAC,iBAAmB,KAAG,IAClB,CACN,CAAC;AACH,CAAC,CAAC;AAzBW,QAAA,mBAAmB,uBAyB9B"}
1
+ {"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/facebook-preview/post-preview.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA6C;AAC7C,wEAAuC;AACvC,oFAA8C;AAC9C,qEAAiD;AACjD,mEAA+C;AAG/C,wBAAsB;AAEf,MAAM,mBAAmB,GAAqC,CAAE,EACtE,GAAG,EACH,IAAI,EACJ,UAAU,EACV,KAAK,EACL,SAAS,GACT,EAAG,EAAE;IACL,MAAM,CAAE,IAAI,CAAE,GAAG,IAAA,wBAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAE,CAAC;IACjD,MAAM,SAAS,GAAG,MAAO,IAAI,KAAK,yBAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAY,EAAE,CAAC;IAE9E,OAAO,CACN,iCAAK,SAAS,EAAC,wBAAwB,aACtC,uBAAC,gBAAkB,IAAC,IAAI,EAAG,IAAI,GAAK,EACpC,iCAAK,SAAS,EAAC,2BAA2B,aACvC,UAAU,IAAI,uBAAC,qBAAU,IAAC,IAAI,EAAG,UAAU,EAAG,GAAG,EAAG,GAAG,EAAG,eAAe,SAAG,EAC9E,gCAAK,SAAS,EAAC,wBAAwB,YACpC,KAAK,CAAC,CAAC,CAAC,CACT,gCAAK,SAAS,EAAG,2BAA4B,SAAU,EAAE,YACtD,KAAK,CAAC,GAAG,CAAE,CAAE,SAAS,EAAE,KAAK,EAAG,EAAE,CAAC,CACpC,gCAEC,SAAS,EAAG,gCAAiC,SAAU,EAAE,YAEvD,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,CAAC,CAAC,CAAC;gCACzC,sDAAsD;gCACtD,kCAAO,QAAQ,kBACd,mCAAQ,GAAG,EAAG,SAAS,CAAC,GAAG,EAAG,IAAI,EAAG,SAAS,CAAC,IAAI,GAAK,GACjD,CACR,CAAC,CAAC,CAAC,CACH,gCAAK,GAAG,EAAG,SAAS,CAAC,GAAG,IAAI,EAAE,EAAG,GAAG,EAAG,SAAS,CAAC,GAAG,GAAK,CACzD,IAVK,gCAAiC,KAAM,EAAE,CAW1C,CACN,CAAE,GACE,CACN,CAAC,CAAC,CAAC,IAAI,GACH,IACD,EACN,uBAAC,iBAAmB,KAAG,IAClB,CACN,CAAC;AACH,CAAC,CAAC;AAxCW,QAAA,mBAAmB,uBAwC9B"}
@@ -10,11 +10,11 @@ const link_preview_1 = require("./link-preview");
10
10
  const link_preview_details_1 = require("./link-preview-details");
11
11
  const post_preview_1 = require("./post-preview");
12
12
  const FacebookPreviews = (props) => {
13
- const { customImage } = props;
14
- const hasCustomImage = !!customImage;
13
+ const hasMedia = !!props.media?.length;
14
+ const hasCustomImage = !!props.customImage;
15
15
  return ((0, jsx_runtime_1.jsxs)("div", { className: "social-preview facebook-preview", children: [(0, jsx_runtime_1.jsxs)("section", { className: "social-preview__section facebook-preview__section", children: [(0, jsx_runtime_1.jsx)(section_heading_1.default, { level: props.headingLevel, children:
16
16
  // translators: refers to a social post on Facebook
17
- (0, i18n_1.__)('Your post', 'social-previews') }), (0, jsx_runtime_1.jsx)("p", { className: "social-preview__section-desc", children: (0, i18n_1.__)('This is what your social post will look like on Facebook:', 'social-previews') }), hasCustomImage ? ((0, jsx_runtime_1.jsx)(post_preview_1.FacebookPostPreview, { ...props })) : ((0, jsx_runtime_1.jsx)(link_preview_1.FacebookLinkPreview, { ...props }))] }), (0, jsx_runtime_1.jsxs)("section", { className: "social-preview__section facebook-preview__section", children: [(0, jsx_runtime_1.jsx)(section_heading_1.default, { level: props.headingLevel, children:
17
+ (0, i18n_1.__)('Your post', 'social-previews') }), (0, jsx_runtime_1.jsx)("p", { className: "social-preview__section-desc", children: (0, i18n_1.__)('This is what your social post will look like on Facebook:', 'social-previews') }), hasMedia ? (0, jsx_runtime_1.jsx)(post_preview_1.FacebookPostPreview, { ...props }) : (0, jsx_runtime_1.jsx)(link_preview_1.FacebookLinkPreview, { ...props })] }), (0, jsx_runtime_1.jsxs)("section", { className: "social-preview__section facebook-preview__section", children: [(0, jsx_runtime_1.jsx)(section_heading_1.default, { level: props.headingLevel, children:
18
18
  // translators: refers to a link to a Facebook post
19
19
  (0, i18n_1.__)('Link preview', 'social-previews') }), (0, jsx_runtime_1.jsxs)("p", { className: "social-preview__section-desc", children: [(0, i18n_1.__)('This is what it will look like when someone shares the link to your WordPress post on Facebook.', 'social-previews'), "\u00A0", (0, jsx_runtime_1.jsx)(components_1.ExternalLink, { href: "https://jetpack.com/support/jetpack-social-image-generator", children: (0, i18n_1.__)('Learn more about links', 'social-previews') })] }), hasCustomImage ? ((0, jsx_runtime_1.jsx)(link_preview_details_1.LinkPreviewDetails, { ...props })) : ((0, jsx_runtime_1.jsx)(link_preview_1.FacebookLinkPreview, { ...props, compactDescription: true, customText: "", user: undefined }))] })] }));
20
20
  };
@@ -1 +1 @@
1
- {"version":3,"file":"previews.js","sourceRoot":"","sources":["../../../src/facebook-preview/previews.tsx"],"names":[],"mappings":";;;;;AAAA,sDAAqD;AACrD,0CAAqC;AACrC,wFAAuD;AAEvD,iDAAqD;AACrD,iEAA4D;AAC5D,iDAAqD;AAK9C,MAAM,gBAAgB,GAAsC,CAAE,KAAK,EAAG,EAAE;IAC9E,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC9B,MAAM,cAAc,GAAG,CAAC,CAAE,WAAW,CAAC;IAEtC,OAAO,CACN,iCAAK,SAAS,EAAC,iCAAiC,aAC/C,qCAAS,SAAS,EAAC,mDAAmD,aACrE,uBAAC,yBAAc,IAAC,KAAK,EAAG,KAAK,CAAC,YAAY;wBAExC,mDAAmD;wBACnD,IAAA,SAAE,EAAE,WAAW,EAAE,iBAAiB,CAAE,GAErB,EACjB,8BAAG,SAAS,EAAC,8BAA8B,YACxC,IAAA,SAAE,EAAE,2DAA2D,EAAE,iBAAiB,CAAE,GACnF,EACF,cAAc,CAAC,CAAC,CAAC,CAClB,uBAAC,kCAAmB,OAAM,KAAK,GAAK,CACpC,CAAC,CAAC,CAAC,CACH,uBAAC,kCAAmB,OAAM,KAAK,GAAK,CACpC,IACQ,EACV,qCAAS,SAAS,EAAC,mDAAmD,aACrE,uBAAC,yBAAc,IAAC,KAAK,EAAG,KAAK,CAAC,YAAY;wBAExC,mDAAmD;wBACnD,IAAA,SAAE,EAAE,cAAc,EAAE,iBAAiB,CAAE,GAExB,EACjB,+BAAG,SAAS,EAAC,8BAA8B,aACxC,IAAA,SAAE,EACH,iGAAiG,EACjG,iBAAiB,CACjB,YAED,uBAAC,yBAAY,IAAC,IAAI,EAAC,4DAA4D,YAC5E,IAAA,SAAE,EAAE,wBAAwB,EAAE,iBAAiB,CAAE,GACrC,IACZ,EACF,cAAc,CAAC,CAAC,CAAC,CAClB,uBAAC,yCAAkB,OAAM,KAAK,GAAK,CACnC,CAAC,CAAC,CAAC,CACH,uBAAC,kCAAmB,OAAM,KAAK,EAAG,kBAAkB,QAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAG,SAAS,GAAK,CACxF,IACQ,IACL,CACN,CAAC;AACH,CAAC,CAAC;AA/CW,QAAA,gBAAgB,oBA+C3B"}
1
+ {"version":3,"file":"previews.js","sourceRoot":"","sources":["../../../src/facebook-preview/previews.tsx"],"names":[],"mappings":";;;;;AAAA,sDAAqD;AACrD,0CAAqC;AACrC,wFAAuD;AAEvD,iDAAqD;AACrD,iEAA4D;AAC5D,iDAAqD;AAK9C,MAAM,gBAAgB,GAAsC,CAAE,KAAK,EAAG,EAAE;IAC9E,MAAM,QAAQ,GAAG,CAAC,CAAE,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC;IACxC,MAAM,cAAc,GAAG,CAAC,CAAE,KAAK,CAAC,WAAW,CAAC;IAE5C,OAAO,CACN,iCAAK,SAAS,EAAC,iCAAiC,aAC/C,qCAAS,SAAS,EAAC,mDAAmD,aACrE,uBAAC,yBAAc,IAAC,KAAK,EAAG,KAAK,CAAC,YAAY;wBAExC,mDAAmD;wBACnD,IAAA,SAAE,EAAE,WAAW,EAAE,iBAAiB,CAAE,GAErB,EACjB,8BAAG,SAAS,EAAC,8BAA8B,YACxC,IAAA,SAAE,EAAE,2DAA2D,EAAE,iBAAiB,CAAE,GACnF,EACF,QAAQ,CAAC,CAAC,CAAC,uBAAC,kCAAmB,OAAM,KAAK,GAAK,CAAC,CAAC,CAAC,uBAAC,kCAAmB,OAAM,KAAK,GAAK,IAC/E,EACV,qCAAS,SAAS,EAAC,mDAAmD,aACrE,uBAAC,yBAAc,IAAC,KAAK,EAAG,KAAK,CAAC,YAAY;wBAExC,mDAAmD;wBACnD,IAAA,SAAE,EAAE,cAAc,EAAE,iBAAiB,CAAE,GAExB,EACjB,+BAAG,SAAS,EAAC,8BAA8B,aACxC,IAAA,SAAE,EACH,iGAAiG,EACjG,iBAAiB,CACjB,YAED,uBAAC,yBAAY,IAAC,IAAI,EAAC,4DAA4D,YAC5E,IAAA,SAAE,EAAE,wBAAwB,EAAE,iBAAiB,CAAE,GACrC,IACZ,EACF,cAAc,CAAC,CAAC,CAAC,CAClB,uBAAC,yCAAkB,OAAM,KAAK,GAAK,CACnC,CAAC,CAAC,CAAC,CACH,uBAAC,kCAAmB,OAAM,KAAK,EAAG,kBAAkB,QAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAG,SAAS,GAAK,CACxF,IACQ,IACL,CACN,CAAC;AACH,CAAC,CAAC;AA3CW,QAAA,gBAAgB,oBA2C3B"}
@@ -114,11 +114,13 @@
114
114
  }
115
115
 
116
116
  .facebook-preview__image,
117
- .facebook-preview__custom-image {
118
- img {
117
+ .facebook-preview__custom-image,
118
+ .facebook-preview__media-item {
119
+ img,
120
+ video {
119
121
  display: block;
120
-
121
122
  object-fit: cover;
123
+ width: 100%;
122
124
  }
123
125
  }
124
126
 
@@ -148,7 +150,8 @@
148
150
  }
149
151
  }
150
152
 
151
- .facebook-preview__custom-image {
153
+ .facebook-preview__custom-image,
154
+ .facebook-preview__media-item {
152
155
  display: flex;
153
156
  justify-content: center;
154
157
 
@@ -5,7 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const constants_1 = require("./constants");
6
6
  const post_preview_1 = require("./post-preview");
7
7
  function LinkedInLinkPreview(props) {
8
- return (0, jsx_runtime_1.jsx)(post_preview_1.LinkedInPostPreview, { ...constants_1.DEFAULT_PROPS, ...props });
8
+ return ((0, jsx_runtime_1.jsx)(post_preview_1.LinkedInPostPreview, { ...constants_1.DEFAULT_PROPS, ...props,
9
+ // Override the props that are irrelevant to link preview
10
+ description: "", media: undefined }));
9
11
  }
10
12
  exports.LinkedInLinkPreview = LinkedInLinkPreview;
11
13
  //# sourceMappingURL=link-preview.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"link-preview.js","sourceRoot":"","sources":["../../../src/linkedin-preview/link-preview.tsx"],"names":[],"mappings":";;;;AAAA,2CAA4C;AAC5C,iDAAqD;AAQrD,SAAgB,mBAAmB,CAAE,KAA+B;IACnE,OAAO,uBAAC,kCAAmB,OAAM,yBAAa,KAAQ,KAAK,GAAK,CAAC;AAClE,CAAC;AAFD,kDAEC"}
1
+ {"version":3,"file":"link-preview.js","sourceRoot":"","sources":["../../../src/linkedin-preview/link-preview.tsx"],"names":[],"mappings":";;;;AAAA,2CAA4C;AAC5C,iDAAqD;AAQrD,SAAgB,mBAAmB,CAAE,KAA+B;IACnE,OAAO,CACN,uBAAC,kCAAmB,OACd,yBAAa,KACb,KAAK;QACV,yDAAyD;QACzD,WAAW,EAAC,EAAE,EACd,KAAK,EAAG,SAAS,GAChB,CACF,CAAC;AACH,CAAC;AAVD,kDAUC"}
@@ -6,8 +6,9 @@ const i18n_1 = require("@wordpress/i18n");
6
6
  const helpers_1 = require("../helpers");
7
7
  const constants_1 = require("./constants");
8
8
  require("./style.scss");
9
- function LinkedInPostPreview({ image, jobTitle, name, profileImage, description, title, url, }) {
10
- return ((0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__wrapper", children: (0, jsx_runtime_1.jsxs)("section", { className: "linkedin-preview__container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__header", children: [(0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__header--avatar", children: (0, jsx_runtime_1.jsx)("img", { src: profileImage, alt: "" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__header--profile", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__header--profile-info", children: [(0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__header--profile-name", children: name }), (0, jsx_runtime_1.jsx)("span", { children: "\u2022" }), (0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__header--profile-actor", children:
9
+ function LinkedInPostPreview({ image, jobTitle, name, profileImage, description, media, title, url, }) {
10
+ const hasMedia = !!media?.length;
11
+ return ((0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__wrapper", children: (0, jsx_runtime_1.jsxs)("section", { className: `linkedin-preview__container ${hasMedia ? 'has-media' : ''}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__header", children: [(0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__header--avatar", children: (0, jsx_runtime_1.jsx)("img", { src: profileImage, alt: "" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__header--profile", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__header--profile-info", children: [(0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__header--profile-name", children: name }), (0, jsx_runtime_1.jsx)("span", { children: "\u2022" }), (0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__header--profile-actor", children:
11
12
  // translators: refers to the actor level of the post being shared, e.g. "1st", "2nd", "3rd", etc.
12
13
  (0, i18n_1.__)('1st', 'social-previews') })] }), jobTitle ? ((0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__header--profile-title", children: jobTitle })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__header--profile-meta", children: [(0, jsx_runtime_1.jsx)("span", { children:
13
14
  // translators: refers to the time since the post was published, e.g. "1h"
@@ -20,9 +21,11 @@ function LinkedInPostPreview({ image, jobTitle, name, profileImage, description,
20
21
  maxChars: constants_1.FEED_TEXT_MAX_LENGTH,
21
22
  maxLines: constants_1.FEED_TEXT_MAX_LINES,
22
23
  }),
23
- } })) : null, (0, jsx_runtime_1.jsxs)("article", { children: [image ? (0, jsx_runtime_1.jsx)("img", { className: "linkedin-preview__image", src: image, alt: "" }) : null, url ? ((0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__description", children: [(0, jsx_runtime_1.jsx)("h2", { className: "linkedin-preview__description--title", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__description--meta", children: [(0, jsx_runtime_1.jsx)("span", { className: "linkedin-preview__description--url", children: (0, helpers_1.baseDomain)(url) }), (0, jsx_runtime_1.jsx)("span", { children: "\u2022" }), (0, jsx_runtime_1.jsx)("span", { children:
24
+ } })) : null, hasMedia ? ((0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__media", children: media.map((mediaItem, index) => ((0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__media-item", children: mediaItem.type.startsWith('video/') ? (
25
+ // eslint-disable-next-line jsx-a11y/media-has-caption
26
+ (0, jsx_runtime_1.jsx)("video", { controls: true, children: (0, jsx_runtime_1.jsx)("source", { src: mediaItem.url, type: mediaItem.type }) })) : ((0, jsx_runtime_1.jsx)("img", { alt: mediaItem.alt || '', src: mediaItem.url })) }, `linkedin-preview__media-item-${index}`))) })) : ((0, jsx_runtime_1.jsxs)("article", { children: [image ? (0, jsx_runtime_1.jsx)("img", { className: "linkedin-preview__image", src: image, alt: "" }) : null, url ? ((0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__description", children: [(0, jsx_runtime_1.jsx)("h2", { className: "linkedin-preview__description--title", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__description--meta", children: [(0, jsx_runtime_1.jsx)("span", { className: "linkedin-preview__description--url", children: (0, helpers_1.baseDomain)(url) }), (0, jsx_runtime_1.jsx)("span", { children: "\u2022" }), (0, jsx_runtime_1.jsx)("span", { children:
24
27
  // translators: x is the number of minutes it takes to read the article
25
- (0, i18n_1.__)('x min read', 'social-previews') })] })] })) : null] })] })] }) }));
28
+ (0, i18n_1.__)('x min read', 'social-previews') })] })] })) : null] }))] })] }) }));
26
29
  }
27
30
  exports.LinkedInPostPreview = LinkedInPostPreview;
28
31
  //# sourceMappingURL=post-preview.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/linkedin-preview/post-preview.tsx"],"names":[],"mappings":";;;;AAAA,0CAAqC;AACrC,wCAA4D;AAC5D,2CAAwE;AAGxE,wBAAsB;AAEtB,SAAgB,mBAAmB,CAAE,EACpC,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,GAAG,GACmB;IACtB,OAAO,CACN,gCAAK,SAAS,EAAC,2BAA2B,YACzC,qCAAS,SAAS,EAAC,6BAA6B,aAC/C,iCAAK,SAAS,EAAC,0BAA0B,aACxC,gCAAK,SAAS,EAAC,kCAAkC,YAChD,gCAAK,GAAG,EAAG,YAAY,EAAG,GAAG,EAAC,EAAE,GAAG,GAC9B,EACN,iCAAK,SAAS,EAAC,mCAAmC,aACjD,iCAAK,SAAS,EAAC,wCAAwC,aACtD,gCAAK,SAAS,EAAC,wCAAwC,YAAG,IAAI,GAAQ,EACtE,sDAAc,EACd,gCAAK,SAAS,EAAC,yCAAyC;4CAEtD,kGAAkG;4CAClG,IAAA,SAAE,EAAE,KAAK,EAAE,iBAAiB,CAAE,GAE1B,IACD,EACJ,QAAQ,CAAC,CAAC,CAAC,CACZ,gCAAK,SAAS,EAAC,yCAAyC,YAAG,QAAQ,GAAQ,CAC3E,CAAC,CAAC,CAAC,IAAI,EACR,iCAAK,SAAS,EAAC,wCAAwC,aACtD;4CAEE,0EAA0E;4CAC1E,IAAA,SAAE,EAAE,IAAI,EAAE,iBAAiB,CAAE,GAExB,EACP,sDAAc,EAEd,gCAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,YACpF,iCAAM,CAAC,EAAC,4XAA4X,GAAG,GAClY,IACD,IACD,IACD,EACN,iCAAK,SAAS,EAAC,2BAA2B,aACvC,WAAW,CAAC,CAAC,CAAC,CACf,gCACC,SAAS,EAAC,2BAA2B;4BACrC,sGAAsG;4BACtG,2CAA2C;4BAC3C,uBAAuB,EAAG;gCACzB,MAAM,EAAE,IAAA,4BAAkB,EAAE,WAAW,EAAE;oCACxC,QAAQ,EAAE,UAAU;oCACpB,QAAQ,EAAE,gCAAoB;oCAC9B,QAAQ,EAAE,+BAAmB;iCAC7B,CAAE;6BACH,GACA,CACF,CAAC,CAAC,CAAC,IAAI,EACR,gDACG,KAAK,CAAC,CAAC,CAAC,gCAAK,SAAS,EAAC,yBAAyB,EAAC,GAAG,EAAG,KAAK,EAAG,GAAG,EAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,EAC/E,GAAG,CAAC,CAAC,CAAC,CACP,iCAAK,SAAS,EAAC,+BAA+B,aAC7C,+BAAI,SAAS,EAAC,sCAAsC,YAAG,KAAK,GAAO,EACnE,iCAAK,SAAS,EAAC,qCAAqC,aACnD,iCAAM,SAAS,EAAC,oCAAoC,YAAG,IAAA,oBAAU,EAAE,GAAG,CAAE,GAAS,EACjF,sDAAc,EACd;oDAEE,uEAAuE;oDACvE,IAAA,SAAE,EAAE,YAAY,EAAE,iBAAiB,CAAE,GAEhC,IACF,IACD,CACN,CAAC,CAAC,CAAC,IAAI,IACC,IACL,IACG,GACL,CACN,CAAC;AACH,CAAC;AAlFD,kDAkFC"}
1
+ {"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/linkedin-preview/post-preview.tsx"],"names":[],"mappings":"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"}
@@ -27,6 +27,12 @@
27
27
  /* stylelint-disable-next-line scales/radii */
28
28
  border-radius: 8px;
29
29
  overflow: hidden;
30
+
31
+ &.has-media {
32
+ // When the preview has media, we want to hide the border radius on the bottom
33
+ border-end-end-radius: 0;
34
+ border-end-start-radius: 0;
35
+ }
30
36
  }
31
37
 
32
38
  &__header {
@@ -73,13 +79,24 @@
73
79
  font-weight: 400;
74
80
  }
75
81
 
76
- &__content article {
82
+ &__content article,
83
+ &__media {
77
84
  margin-top: 0.5rem;
78
85
  background-color: #eef3f8;
79
86
  display: flex;
80
87
  flex-direction: column;
81
88
  }
82
89
 
90
+ &__media-item {
91
+ display: flex;
92
+
93
+ img,
94
+ video {
95
+ width: 100%;
96
+ object-fit: cover;
97
+ }
98
+ }
99
+
83
100
  &__description {
84
101
  padding: 0.5rem 0.75rem;
85
102
 
@@ -8,9 +8,6 @@ const helpers_1 = require("../helpers");
8
8
  const DESCRIPTION_LENGTH = 200;
9
9
  const twitterDescription = (0, helpers_1.firstValid)((0, helpers_1.shortEnough)(DESCRIPTION_LENGTH), (0, helpers_1.hardTruncation)(DESCRIPTION_LENGTH));
10
10
  const Card = ({ description, image, title, cardType, url, }) => {
11
- if (!title && !description && !image && !url) {
12
- return null;
13
- }
14
11
  const cardClassNames = (0, classnames_1.default)(`twitter-preview__card-${cardType}`, {
15
12
  'twitter-preview__card-has-image': !!image,
16
13
  });
@@ -1 +1 @@
1
- {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/twitter-preview/card.tsx"],"names":[],"mappings":";;;;;AAAA,oEAAoC;AACpC,wCAAgG;AAGhG,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAE/B,MAAM,kBAAkB,GAAG,IAAA,oBAAU,EACpC,IAAA,qBAAW,EAAE,kBAAkB,CAAE,EACjC,IAAA,wBAAc,EAAE,kBAAkB,CAAE,CACpC,CAAC;AAEK,MAAM,IAAI,GAAiC,CAAE,EACnD,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,GACH,EAAG,EAAE;IACL,IAAK,CAAE,KAAK,IAAI,CAAE,WAAW,IAAI,CAAE,KAAK,IAAI,CAAE,GAAG,EAAG;QACnD,OAAO,IAAI,CAAC;KACZ;IACD,MAAM,cAAc,GAAG,IAAA,oBAAU,EAAE,yBAA0B,QAAS,EAAE,EAAE;QACzE,iCAAiC,EAAE,CAAC,CAAE,KAAK;KAC3C,CAAE,CAAC;IAEJ,OAAO,CACN,gCAAK,SAAS,EAAC,uBAAuB,YACrC,iCAAK,SAAS,EAAG,cAAc,aAC5B,KAAK,IAAI,gCAAK,SAAS,EAAC,6BAA6B,EAAC,GAAG,EAAG,KAAK,EAAG,GAAG,EAAC,EAAE,GAAG,EAC/E,iCAAK,SAAS,EAAC,4BAA4B,aAC1C,gCAAK,SAAS,EAAC,2BAA2B,YAAG,IAAA,oBAAU,EAAE,GAAG,IAAI,EAAE,CAAE,GAAQ,EAC5E,gCAAK,SAAS,EAAC,6BAA6B,YAAG,KAAK,GAAQ,EAC5D,gCAAK,SAAS,EAAC,mCAAmC,YAC/C,kBAAkB,CAAE,IAAA,uBAAa,EAAE,WAAW,CAAE,CAAE,GAC/C,IACD,IACD,GACD,CACN,CAAC;AACH,CAAC,CAAC;AA5BW,QAAA,IAAI,QA4Bf"}
1
+ {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/twitter-preview/card.tsx"],"names":[],"mappings":";;;;;AAAA,oEAAoC;AACpC,wCAAgG;AAGhG,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAE/B,MAAM,kBAAkB,GAAG,IAAA,oBAAU,EACpC,IAAA,qBAAW,EAAE,kBAAkB,CAAE,EACjC,IAAA,wBAAc,EAAE,kBAAkB,CAAE,CACpC,CAAC;AAEK,MAAM,IAAI,GAAiC,CAAE,EACnD,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,GACH,EAAG,EAAE;IACL,MAAM,cAAc,GAAG,IAAA,oBAAU,EAAE,yBAA0B,QAAS,EAAE,EAAE;QACzE,iCAAiC,EAAE,CAAC,CAAE,KAAK;KAC3C,CAAE,CAAC;IAEJ,OAAO,CACN,gCAAK,SAAS,EAAC,uBAAuB,YACrC,iCAAK,SAAS,EAAG,cAAc,aAC5B,KAAK,IAAI,gCAAK,SAAS,EAAC,6BAA6B,EAAC,GAAG,EAAG,KAAK,EAAG,GAAG,EAAC,EAAE,GAAG,EAC/E,iCAAK,SAAS,EAAC,4BAA4B,aAC1C,gCAAK,SAAS,EAAC,2BAA2B,YAAG,IAAA,oBAAU,EAAE,GAAG,IAAI,EAAE,CAAE,GAAQ,EAC5E,gCAAK,SAAS,EAAC,6BAA6B,YAAG,KAAK,GAAQ,EAC5D,gCAAK,SAAS,EAAC,mCAAmC,YAC/C,kBAAkB,CAAE,IAAA,uBAAa,EAAE,WAAW,CAAE,CAAE,GAC/C,IACD,IACD,GACD,CACN,CAAC;AACH,CAAC,CAAC;AAzBW,QAAA,IAAI,QAyBf"}
@@ -5,7 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const constants_1 = require("./constants");
6
6
  const post_preview_1 = require("./post-preview");
7
7
  const TwitterLinkPreview = (props) => {
8
- return (0, jsx_runtime_1.jsx)(post_preview_1.TwitterPostPreview, { ...constants_1.DEFAULT_PROPS, ...props, text: "" });
8
+ return ((0, jsx_runtime_1.jsx)(post_preview_1.TwitterPostPreview, { ...constants_1.DEFAULT_PROPS, ...props,
9
+ // Override the props that are irrelevant to link preview
10
+ text: "", media: undefined }));
9
11
  };
10
12
  exports.TwitterLinkPreview = TwitterLinkPreview;
11
13
  //# sourceMappingURL=link-preview.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"link-preview.js","sourceRoot":"","sources":["../../../src/twitter-preview/link-preview.tsx"],"names":[],"mappings":";;;;AAAA,2CAA4C;AAC5C,iDAAoD;AAQ7C,MAAM,kBAAkB,GAAwC,CAAE,KAAK,EAAG,EAAE;IAClF,OAAO,uBAAC,iCAAkB,OAAM,yBAAa,KAAQ,KAAK,EAAG,IAAI,EAAC,EAAE,GAAG,CAAC;AACzE,CAAC,CAAC;AAFW,QAAA,kBAAkB,sBAE7B"}
1
+ {"version":3,"file":"link-preview.js","sourceRoot":"","sources":["../../../src/twitter-preview/link-preview.tsx"],"names":[],"mappings":";;;;AAAA,2CAA4C;AAC5C,iDAAoD;AAQ7C,MAAM,kBAAkB,GAAwC,CAAE,KAAK,EAAG,EAAE;IAClF,OAAO,CACN,uBAAC,iCAAkB,OACb,yBAAa,KACb,KAAK;QACV,yDAAyD;QACzD,IAAI,EAAC,EAAE,EACP,KAAK,EAAG,SAAS,GAChB,CACF,CAAC;AACH,CAAC,CAAC;AAVW,QAAA,kBAAkB,sBAU7B"}
@@ -4,10 +4,8 @@ exports.Media = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
6
  const classnames_1 = tslib_1.__importDefault(require("classnames"));
7
+ const react_1 = require("react");
7
8
  const Media = ({ media }) => {
8
- if (!media) {
9
- return null;
10
- }
11
9
  // Ensure we're only trying to show valid media, and the correct quantity.
12
10
  const filteredMedia = media
13
11
  // Only image/ and video/ mime types are supported.
@@ -29,19 +27,17 @@ const Media = ({ media }) => {
29
27
  })
30
28
  // We only want the first four items of the array, at most.
31
29
  .slice(0, 4);
32
- const isVideo = filteredMedia.length > 0 && filteredMedia[0].type.startsWith('video/');
30
+ if (0 === filteredMedia.length) {
31
+ return null;
32
+ }
33
+ const isVideo = filteredMedia[0].type.startsWith('video/');
33
34
  const mediaClasses = (0, classnames_1.default)([
34
35
  'twitter-preview__media',
35
36
  'twitter-preview__media-children-' + filteredMedia.length,
36
37
  ]);
37
- if (0 === filteredMedia.length) {
38
- return null;
39
- }
40
- return ((0, jsx_runtime_1.jsxs)("div", { className: mediaClasses, children: [isVideo &&
41
- filteredMedia.map((mediaItem, index) => (
42
- // eslint-disable-next-line jsx-a11y/media-has-caption
43
- (0, jsx_runtime_1.jsxs)("video", { controls: true, children: [(0, jsx_runtime_1.jsx)("source", { src: mediaItem.url, type: mediaItem.type }), ' '] }, `twitter-preview__media-item-${index}`))), !isVideo &&
44
- filteredMedia.map((mediaItem, index) => ((0, jsx_runtime_1.jsx)("img", { alt: mediaItem.alt, src: mediaItem.url }, `twitter-preview__media-item-${index}`)))] }));
38
+ return ((0, jsx_runtime_1.jsx)("div", { className: mediaClasses, children: filteredMedia.map((mediaItem, index) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: isVideo ? (
39
+ // eslint-disable-next-line jsx-a11y/media-has-caption
40
+ (0, jsx_runtime_1.jsx)("video", { controls: true, children: (0, jsx_runtime_1.jsx)("source", { src: mediaItem.url, type: mediaItem.type }) })) : ((0, jsx_runtime_1.jsx)("img", { alt: mediaItem.alt || '', src: mediaItem.url })) }, `twitter-preview__media-item-${index}`))) }));
45
41
  };
46
42
  exports.Media = Media;
47
43
  //# sourceMappingURL=media.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"media.js","sourceRoot":"","sources":["../../../src/twitter-preview/media.tsx"],"names":[],"mappings":";;;;;AAAA,oEAAoC;AAG7B,MAAM,KAAK,GAA2B,CAAE,EAAE,KAAK,EAAE,EAAG,EAAE;IAC5D,IAAK,CAAE,KAAK,EAAG;QACd,OAAO,IAAI,CAAC;KACZ;IAED,0EAA0E;IAC1E,MAAM,aAAa,GAAG,KAAK;QAC1B,mDAAmD;SAClD,MAAM,CACN,CAAE,SAAS,EAAG,EAAE,CACf,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,IAAI,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,CAC/E;SACA,MAAM,CAAE,CAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAG,EAAE;QACpC,oCAAoC;QACpC,IAAK,CAAC,KAAK,GAAG,EAAG;YAChB,OAAO,IAAI,CAAC;SACZ;QAED,sEAAsE;QACtE,IAAK,KAAK,CAAE,CAAC,CAAE,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,IAAI,WAAW,KAAK,KAAK,CAAE,CAAC,CAAE,CAAC,IAAI,EAAG;YAChF,OAAO,KAAK,CAAC;SACb;QAED,mFAAmF;QACnF,IAAK,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,IAAI,WAAW,KAAK,SAAS,CAAC,IAAI,EAAG;YAC9E,OAAO,KAAK,CAAC;SACb;QAED,OAAO,IAAI,CAAC;IACb,CAAC,CAAE;QACH,2DAA2D;SAC1D,KAAK,CAAE,CAAC,EAAE,CAAC,CAAE,CAAC;IAEhB,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,aAAa,CAAE,CAAC,CAAE,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,CAAC;IAE3F,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAE;QAChC,wBAAwB;QACxB,kCAAkC,GAAG,aAAa,CAAC,MAAM;KACzD,CAAE,CAAC;IAEJ,IAAK,CAAC,KAAK,aAAa,CAAC,MAAM,EAAG;QACjC,OAAO,IAAI,CAAC;KACZ;IAED,OAAO,CACN,iCAAK,SAAS,EAAG,YAAY,aAC1B,OAAO;gBACR,aAAa,CAAC,GAAG,CAAE,CAAE,SAAS,EAAE,KAAK,EAAG,EAAE,CAAC;gBAC1C,sDAAsD;gBACtD,mCAAwD,QAAQ,mBAC/D,mCAAQ,GAAG,EAAG,SAAS,CAAC,GAAG,EAAG,IAAI,EAAG,SAAS,CAAC,IAAI,GAAK,EAAE,GAAG,KADjD,+BAAgC,KAAM,EAAE,CAE7C,CACR,CAAE,EACF,CAAE,OAAO;gBACV,aAAa,CAAC,GAAG,CAAE,CAAE,SAAS,EAAE,KAAK,EAAG,EAAE,CAAC,CAC1C,gCAEC,GAAG,EAAG,SAAS,CAAC,GAAG,EACnB,GAAG,EAAG,SAAS,CAAC,GAAG,IAFb,+BAAgC,KAAM,EAAE,CAG7C,CACF,CAAE,IACC,CACN,CAAC;AACH,CAAC,CAAC;AA/DW,QAAA,KAAK,SA+DhB"}
1
+ {"version":3,"file":"media.js","sourceRoot":"","sources":["../../../src/twitter-preview/media.tsx"],"names":[],"mappings":";;;;;AAAA,oEAAoC;AACpC,iCAAiC;AAG1B,MAAM,KAAK,GAA2B,CAAE,EAAE,KAAK,EAAE,EAAG,EAAE;IAC5D,0EAA0E;IAC1E,MAAM,aAAa,GAAG,KAAK;QAC1B,mDAAmD;SAClD,MAAM,CACN,CAAE,SAAS,EAAG,EAAE,CACf,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,IAAI,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,CAC/E;SACA,MAAM,CAAE,CAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAG,EAAE;QACpC,oCAAoC;QACpC,IAAK,CAAC,KAAK,GAAG,EAAG;YAChB,OAAO,IAAI,CAAC;SACZ;QAED,sEAAsE;QACtE,IAAK,KAAK,CAAE,CAAC,CAAE,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,IAAI,WAAW,KAAK,KAAK,CAAE,CAAC,CAAE,CAAC,IAAI,EAAG;YAChF,OAAO,KAAK,CAAC;SACb;QAED,mFAAmF;QACnF,IAAK,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,IAAI,WAAW,KAAK,SAAS,CAAC,IAAI,EAAG;YAC9E,OAAO,KAAK,CAAC;SACb;QAED,OAAO,IAAI,CAAC;IACb,CAAC,CAAE;QACH,2DAA2D;SAC1D,KAAK,CAAE,CAAC,EAAE,CAAC,CAAE,CAAC;IAEhB,IAAK,CAAC,KAAK,aAAa,CAAC,MAAM,EAAG;QACjC,OAAO,IAAI,CAAC;KACZ;IAED,MAAM,OAAO,GAAG,aAAa,CAAE,CAAC,CAAE,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,CAAC;IAE/D,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAE;QAChC,wBAAwB;QACxB,kCAAkC,GAAG,aAAa,CAAC,MAAM;KACzD,CAAE,CAAC;IAEJ,OAAO,CACN,gCAAK,SAAS,EAAG,YAAY,YAC1B,aAAa,CAAC,GAAG,CAAE,CAAE,SAAS,EAAE,KAAK,EAAG,EAAE,CAAC,CAC5C,uBAAC,gBAAQ,cACN,OAAO,CAAC,CAAC,CAAC;YACX,sDAAsD;YACtD,kCAAO,QAAQ,kBACd,mCAAQ,GAAG,EAAG,SAAS,CAAC,GAAG,EAAG,IAAI,EAAG,SAAS,CAAC,IAAI,GAAK,GACjD,CACR,CAAC,CAAC,CAAC,CACH,gCAAK,GAAG,EAAG,SAAS,CAAC,GAAG,IAAI,EAAE,EAAG,GAAG,EAAG,SAAS,CAAC,GAAG,GAAK,CACzD,IARc,+BAAgC,KAAM,EAAE,CAS7C,CACX,CAAE,GACE,CACN,CAAC;AACH,CAAC,CAAC;AAxDW,QAAA,KAAK,SAwDhB"}
@@ -11,7 +11,8 @@ const sidebar_1 = require("./sidebar");
11
11
  const text_1 = require("./text");
12
12
  require("./style.scss");
13
13
  const TwitterPostPreview = ({ date, description, image, media, name, profileImage, screenName, showThreadConnector, text, title, tweet, cardType, url, }) => {
14
- return ((0, jsx_runtime_1.jsx)("div", { className: "twitter-preview__wrapper", children: (0, jsx_runtime_1.jsxs)("div", { className: "twitter-preview__container", children: [(0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, { profileImage: profileImage, showThreadConnector: showThreadConnector }), (0, jsx_runtime_1.jsxs)("div", { className: "twitter-preview__main", children: [(0, jsx_runtime_1.jsx)(header_1.Header, { name: name, screenName: screenName, date: date }), (0, jsx_runtime_1.jsxs)("div", { className: "twitter-preview__content", children: [(0, jsx_runtime_1.jsx)(text_1.Text, { text: text, url: url || '' }), (0, jsx_runtime_1.jsx)(media_1.Media, { media: media }), (0, jsx_runtime_1.jsx)(quote_tweet_1.QuoteTweet, { tweet: tweet }), (0, jsx_runtime_1.jsx)(card_1.Card, { description: description, image: image, title: title, cardType: cardType, url: url })] }), (0, jsx_runtime_1.jsx)(footer_1.Footer, {})] })] }) }));
14
+ const hasMedia = !!media?.length;
15
+ return ((0, jsx_runtime_1.jsx)("div", { className: "twitter-preview__wrapper", children: (0, jsx_runtime_1.jsxs)("div", { className: "twitter-preview__container", children: [(0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, { profileImage: profileImage, showThreadConnector: showThreadConnector }), (0, jsx_runtime_1.jsxs)("div", { className: "twitter-preview__main", children: [(0, jsx_runtime_1.jsx)(header_1.Header, { name: name, screenName: screenName, date: date }), (0, jsx_runtime_1.jsxs)("div", { className: "twitter-preview__content", children: [text ? (0, jsx_runtime_1.jsx)(text_1.Text, { text: text, url: url || '', retainUrl: hasMedia }) : null, hasMedia ? (0, jsx_runtime_1.jsx)(media_1.Media, { media: media }) : null, tweet ? (0, jsx_runtime_1.jsx)(quote_tweet_1.QuoteTweet, { tweet: tweet }) : null, !hasMedia && title && description && image && url && ((0, jsx_runtime_1.jsx)(card_1.Card, { description: description, image: image, title: title, cardType: cardType || '', url: url }))] }), (0, jsx_runtime_1.jsx)(footer_1.Footer, {})] })] }) }));
15
16
  };
16
17
  exports.TwitterPostPreview = TwitterPostPreview;
17
18
  //# sourceMappingURL=post-preview.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/twitter-preview/post-preview.tsx"],"names":[],"mappings":";;;;AAAA,iCAA8B;AAC9B,qCAAkC;AAClC,qCAAkC;AAClC,mCAAgC;AAChC,+CAA2C;AAC3C,uCAAoC;AACpC,iCAA8B;AAG9B,wBAAsB;AAEf,MAAM,kBAAkB,GAAoC,CAAE,EACpE,IAAI,EACJ,WAAW,EACX,KAAK,EACL,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,mBAAmB,EACnB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,GACH,EAAG,EAAE;IACL,OAAO,CACN,gCAAK,SAAS,EAAC,0BAA0B,YACxC,iCAAK,SAAS,EAAC,4BAA4B,aAC1C,uBAAC,iBAAO,IAAC,YAAY,EAAG,YAAY,EAAG,mBAAmB,EAAG,mBAAmB,GAAK,EACrF,iCAAK,SAAS,EAAC,uBAAuB,aACrC,uBAAC,eAAM,IAAC,IAAI,EAAG,IAAI,EAAG,UAAU,EAAG,UAAU,EAAG,IAAI,EAAG,IAAI,GAAK,EAChE,iCAAK,SAAS,EAAC,0BAA0B,aACxC,uBAAC,WAAI,IAAC,IAAI,EAAG,IAAI,EAAG,GAAG,EAAG,GAAG,IAAI,EAAE,GAAK,EACxC,uBAAC,aAAK,IAAC,KAAK,EAAG,KAAK,GAAK,EACzB,uBAAC,wBAAU,IAAC,KAAK,EAAG,KAAK,GAAK,EAC9B,uBAAC,WAAI,IACJ,WAAW,EAAG,WAAW,EACzB,KAAK,EAAG,KAAK,EACb,KAAK,EAAG,KAAK,EACb,QAAQ,EAAG,QAAQ,EACnB,GAAG,EAAG,GAAG,GACR,IACG,EACN,uBAAC,eAAM,KAAG,IACL,IACD,GACD,CACN,CAAC;AACH,CAAC,CAAC;AAtCW,QAAA,kBAAkB,sBAsC7B"}
1
+ {"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/twitter-preview/post-preview.tsx"],"names":[],"mappings":";;;;AAAA,iCAA8B;AAC9B,qCAAkC;AAClC,qCAAkC;AAClC,mCAAgC;AAChC,+CAA2C;AAC3C,uCAAoC;AACpC,iCAA8B;AAG9B,wBAAsB;AAEf,MAAM,kBAAkB,GAAoC,CAAE,EACpE,IAAI,EACJ,WAAW,EACX,KAAK,EACL,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,mBAAmB,EACnB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,GACH,EAAG,EAAE;IACL,MAAM,QAAQ,GAAG,CAAC,CAAE,KAAK,EAAE,MAAM,CAAC;IAElC,OAAO,CACN,gCAAK,SAAS,EAAC,0BAA0B,YACxC,iCAAK,SAAS,EAAC,4BAA4B,aAC1C,uBAAC,iBAAO,IAAC,YAAY,EAAG,YAAY,EAAG,mBAAmB,EAAG,mBAAmB,GAAK,EACrF,iCAAK,SAAS,EAAC,uBAAuB,aACrC,uBAAC,eAAM,IAAC,IAAI,EAAG,IAAI,EAAG,UAAU,EAAG,UAAU,EAAG,IAAI,EAAG,IAAI,GAAK,EAChE,iCAAK,SAAS,EAAC,0BAA0B,aACtC,IAAI,CAAC,CAAC,CAAC,uBAAC,WAAI,IAAC,IAAI,EAAG,IAAI,EAAG,GAAG,EAAG,GAAG,IAAI,EAAE,EAAG,SAAS,EAAG,QAAQ,GAAK,CAAC,CAAC,CAAC,IAAI,EAC7E,QAAQ,CAAC,CAAC,CAAC,uBAAC,aAAK,IAAC,KAAK,EAAG,KAAK,GAAK,CAAC,CAAC,CAAC,IAAI,EAC3C,KAAK,CAAC,CAAC,CAAC,uBAAC,wBAAU,IAAC,KAAK,EAAG,KAAK,GAAK,CAAC,CAAC,CAAC,IAAI,EAC7C,CAAE,QAAQ,IAAI,KAAK,IAAI,WAAW,IAAI,KAAK,IAAI,GAAG,IAAI,CACvD,uBAAC,WAAI,IACJ,WAAW,EAAG,WAAW,EACzB,KAAK,EAAG,KAAK,EACb,KAAK,EAAG,KAAK,EACb,QAAQ,EAAG,QAAQ,IAAI,EAAE,EACzB,GAAG,EAAG,GAAG,GACR,CACF,IACI,EACN,uBAAC,eAAM,KAAG,IACL,IACD,GACD,CACN,CAAC;AACH,CAAC,CAAC;AA1CW,QAAA,kBAAkB,sBA0C7B"}
@@ -3,13 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Text = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const helpers_1 = require("../helpers");
6
- const Text = ({ text, url }) => {
6
+ const Text = ({ text, url, retainUrl }) => {
7
7
  if (!text) {
8
8
  return null;
9
9
  }
10
10
  // If the text ends with the card URL, remove it.
11
- const deCardedText = text.endsWith(url) ? text.substring(0, text.lastIndexOf(url)) : text;
12
- const __html = (0, helpers_1.preparePreviewText)(deCardedText, { platform: 'twitter' });
11
+ const tweetText = url && !retainUrl && text.endsWith(url)
12
+ ? text.substring(0, text.lastIndexOf(url))
13
+ : text;
14
+ const __html = (0, helpers_1.preparePreviewText)(tweetText, { platform: 'twitter' });
13
15
  return ((0, jsx_runtime_1.jsx)("div", { className: "twitter-preview__text",
14
16
  // We can enable dangerouslySetInnerHTML here, since the text we're using is stripped
15
17
  // of all HTML tags, then only has safe tags added in createTweetMarkup().
@@ -1 +1 @@
1
- {"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/twitter-preview/text.tsx"],"names":[],"mappings":";;;;AAAA,wCAAgD;AAGzC,MAAM,IAAI,GAA0B,CAAE,EAAE,IAAI,EAAE,GAAG,EAAE,EAAG,EAAE;IAC9D,IAAK,CAAE,IAAI,EAAG;QACb,OAAO,IAAI,CAAC;KACZ;IACD,iDAAiD;IACjD,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAE,GAAG,CAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAE,CAAC,EAAE,IAAI,CAAC,WAAW,CAAE,GAAG,CAAE,CAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAEhG,MAAM,MAAM,GAAG,IAAA,4BAAkB,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAE,CAAC;IAE3E,OAAO,CACN,gCACC,SAAS,EAAC,uBAAuB;QACjC,qFAAqF;QACrF,0EAA0E;QAC1E,2CAA2C;QAC3C,uBAAuB,EAAG,EAAE,MAAM,EAAE,GACnC,CACF,CAAC;AACH,CAAC,CAAC;AAlBW,QAAA,IAAI,QAkBf"}
1
+ {"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/twitter-preview/text.tsx"],"names":[],"mappings":";;;;AAAA,wCAAgD;AAGzC,MAAM,IAAI,GAA0B,CAAE,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,EAAG,EAAE;IACzE,IAAK,CAAE,IAAI,EAAG;QACb,OAAO,IAAI,CAAC;KACZ;IACD,iDAAiD;IACjD,MAAM,SAAS,GACd,GAAG,IAAI,CAAE,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAE,GAAG,CAAE;QACzC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAE,CAAC,EAAE,IAAI,CAAC,WAAW,CAAE,GAAG,CAAE,CAAE;QAC9C,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,MAAM,GAAG,IAAA,4BAAkB,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAE,CAAC;IAExE,OAAO,CACN,gCACC,SAAS,EAAC,uBAAuB;QACjC,qFAAqF;QACrF,0EAA0E;QAC1E,2CAA2C;QAC3C,uBAAuB,EAAG,EAAE,MAAM,EAAE,GACnC,CACF,CAAC;AACH,CAAC,CAAC;AArBW,QAAA,IAAI,QAqBf"}
@@ -5,9 +5,11 @@ import useImage from './hooks/use-image-hook';
5
5
  import FacebookPostActions from './post/actions';
6
6
  import FacebookPostHeader from './post/header';
7
7
  import './style.scss';
8
- export const FacebookPostPreview = ({ url, user, customText, customImage, imageMode, }) => {
9
- const [mode, isLoadingImage, imgProps] = useImage({ mode: imageMode });
8
+ export const FacebookPostPreview = ({ url, user, customText, media, imageMode, }) => {
9
+ const [mode] = useImage({ mode: imageMode });
10
10
  const modeClass = `is-${mode === PORTRAIT_MODE ? 'portrait' : 'landscape'}`;
11
- return (_jsxs("div", { className: "facebook-preview__post", children: [_jsx(FacebookPostHeader, { user: user }), _jsxs("div", { className: "facebook-preview__content", children: [customText && _jsx(CustomText, { text: customText, url: url, forceUrlDisplay: true }), _jsx("div", { className: `facebook-preview__body ${isLoadingImage ? 'is-loading' : ''}`, children: _jsx("div", { className: `facebook-preview__custom-image ${modeClass}`, children: _jsx("img", { src: customImage, ...imgProps }) }) })] }), _jsx(FacebookPostActions, {})] }));
11
+ return (_jsxs("div", { className: "facebook-preview__post", children: [_jsx(FacebookPostHeader, { user: user }), _jsxs("div", { className: "facebook-preview__content", children: [customText && _jsx(CustomText, { text: customText, url: url, forceUrlDisplay: true }), _jsx("div", { className: "facebook-preview__body", children: media ? (_jsx("div", { className: `facebook-preview__media ${modeClass}`, children: media.map((mediaItem, index) => (_jsx("div", { className: `facebook-preview__media-item ${modeClass}`, children: mediaItem.type.startsWith('video/') ? (
12
+ // eslint-disable-next-line jsx-a11y/media-has-caption
13
+ _jsx("video", { controls: true, children: _jsx("source", { src: mediaItem.url, type: mediaItem.type }) })) : (_jsx("img", { alt: mediaItem.alt || '', src: mediaItem.url })) }, `facebook-preview__media-item-${index}`))) })) : null })] }), _jsx(FacebookPostActions, {})] }));
12
14
  };
13
15
  //# sourceMappingURL=post-preview.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/facebook-preview/post-preview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,mBAAmB,MAAM,gBAAgB,CAAC;AACjD,OAAO,kBAAkB,MAAM,eAAe,CAAC;AAG/C,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,mBAAmB,GAAqC,CAAE,EACtE,GAAG,EACH,IAAI,EACJ,UAAU,EACV,WAAW,EACX,SAAS,GACT,EAAG,EAAE;IACL,MAAM,CAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,CAAE,GAAG,QAAQ,CAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAE,CAAC;IAC3E,MAAM,SAAS,GAAG,MAAO,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAY,EAAE,CAAC;IAE9E,OAAO,CACN,eAAK,SAAS,EAAC,wBAAwB,aACtC,KAAC,kBAAkB,IAAC,IAAI,EAAG,IAAI,GAAK,EACpC,eAAK,SAAS,EAAC,2BAA2B,aACvC,UAAU,IAAI,KAAC,UAAU,IAAC,IAAI,EAAG,UAAU,EAAG,GAAG,EAAG,GAAG,EAAG,eAAe,SAAG,EAC9E,cAAK,SAAS,EAAG,0BAA2B,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAG,EAAE,YAChF,cAAK,SAAS,EAAG,kCAAmC,SAAU,EAAE,YAE/D,cAAK,GAAG,EAAG,WAAW,KAAQ,QAAQ,GAAK,GACtC,GACD,IACD,EACN,KAAC,mBAAmB,KAAG,IAClB,CACN,CAAC;AACH,CAAC,CAAC"}
1
+ {"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/facebook-preview/post-preview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,mBAAmB,MAAM,gBAAgB,CAAC;AACjD,OAAO,kBAAkB,MAAM,eAAe,CAAC;AAG/C,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,mBAAmB,GAAqC,CAAE,EACtE,GAAG,EACH,IAAI,EACJ,UAAU,EACV,KAAK,EACL,SAAS,GACT,EAAG,EAAE;IACL,MAAM,CAAE,IAAI,CAAE,GAAG,QAAQ,CAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAE,CAAC;IACjD,MAAM,SAAS,GAAG,MAAO,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAY,EAAE,CAAC;IAE9E,OAAO,CACN,eAAK,SAAS,EAAC,wBAAwB,aACtC,KAAC,kBAAkB,IAAC,IAAI,EAAG,IAAI,GAAK,EACpC,eAAK,SAAS,EAAC,2BAA2B,aACvC,UAAU,IAAI,KAAC,UAAU,IAAC,IAAI,EAAG,UAAU,EAAG,GAAG,EAAG,GAAG,EAAG,eAAe,SAAG,EAC9E,cAAK,SAAS,EAAC,wBAAwB,YACpC,KAAK,CAAC,CAAC,CAAC,CACT,cAAK,SAAS,EAAG,2BAA4B,SAAU,EAAE,YACtD,KAAK,CAAC,GAAG,CAAE,CAAE,SAAS,EAAE,KAAK,EAAG,EAAE,CAAC,CACpC,cAEC,SAAS,EAAG,gCAAiC,SAAU,EAAE,YAEvD,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,CAAC,CAAC,CAAC;gCACzC,sDAAsD;gCACtD,gBAAO,QAAQ,kBACd,iBAAQ,GAAG,EAAG,SAAS,CAAC,GAAG,EAAG,IAAI,EAAG,SAAS,CAAC,IAAI,GAAK,GACjD,CACR,CAAC,CAAC,CAAC,CACH,cAAK,GAAG,EAAG,SAAS,CAAC,GAAG,IAAI,EAAE,EAAG,GAAG,EAAG,SAAS,CAAC,GAAG,GAAK,CACzD,IAVK,gCAAiC,KAAM,EAAE,CAW1C,CACN,CAAE,GACE,CACN,CAAC,CAAC,CAAC,IAAI,GACH,IACD,EACN,KAAC,mBAAmB,KAAG,IAClB,CACN,CAAC;AACH,CAAC,CAAC"}
@@ -6,11 +6,11 @@ import { FacebookLinkPreview } from './link-preview';
6
6
  import { LinkPreviewDetails } from './link-preview-details';
7
7
  import { FacebookPostPreview } from './post-preview';
8
8
  export const FacebookPreviews = (props) => {
9
- const { customImage } = props;
10
- const hasCustomImage = !!customImage;
9
+ const hasMedia = !!props.media?.length;
10
+ const hasCustomImage = !!props.customImage;
11
11
  return (_jsxs("div", { className: "social-preview facebook-preview", children: [_jsxs("section", { className: "social-preview__section facebook-preview__section", children: [_jsx(SectionHeading, { level: props.headingLevel, children:
12
12
  // translators: refers to a social post on Facebook
13
- __('Your post', 'social-previews') }), _jsx("p", { className: "social-preview__section-desc", children: __('This is what your social post will look like on Facebook:', 'social-previews') }), hasCustomImage ? (_jsx(FacebookPostPreview, { ...props })) : (_jsx(FacebookLinkPreview, { ...props }))] }), _jsxs("section", { className: "social-preview__section facebook-preview__section", children: [_jsx(SectionHeading, { level: props.headingLevel, children:
13
+ __('Your post', 'social-previews') }), _jsx("p", { className: "social-preview__section-desc", children: __('This is what your social post will look like on Facebook:', 'social-previews') }), hasMedia ? _jsx(FacebookPostPreview, { ...props }) : _jsx(FacebookLinkPreview, { ...props })] }), _jsxs("section", { className: "social-preview__section facebook-preview__section", children: [_jsx(SectionHeading, { level: props.headingLevel, children:
14
14
  // translators: refers to a link to a Facebook post
15
15
  __('Link preview', 'social-previews') }), _jsxs("p", { className: "social-preview__section-desc", children: [__('This is what it will look like when someone shares the link to your WordPress post on Facebook.', 'social-previews'), "\u00A0", _jsx(ExternalLink, { href: "https://jetpack.com/support/jetpack-social-image-generator", children: __('Learn more about links', 'social-previews') })] }), hasCustomImage ? (_jsx(LinkPreviewDetails, { ...props })) : (_jsx(FacebookLinkPreview, { ...props, compactDescription: true, customText: "", user: undefined }))] })] }));
16
16
  };
@@ -1 +1 @@
1
- {"version":3,"file":"previews.js","sourceRoot":"","sources":["../../../src/facebook-preview/previews.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,2BAA2B,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrD,MAAM,CAAC,MAAM,gBAAgB,GAAsC,CAAE,KAAK,EAAG,EAAE;IAC9E,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC9B,MAAM,cAAc,GAAG,CAAC,CAAE,WAAW,CAAC;IAEtC,OAAO,CACN,eAAK,SAAS,EAAC,iCAAiC,aAC/C,mBAAS,SAAS,EAAC,mDAAmD,aACrE,KAAC,cAAc,IAAC,KAAK,EAAG,KAAK,CAAC,YAAY;wBAExC,mDAAmD;wBACnD,EAAE,CAAE,WAAW,EAAE,iBAAiB,CAAE,GAErB,EACjB,YAAG,SAAS,EAAC,8BAA8B,YACxC,EAAE,CAAE,2DAA2D,EAAE,iBAAiB,CAAE,GACnF,EACF,cAAc,CAAC,CAAC,CAAC,CAClB,KAAC,mBAAmB,OAAM,KAAK,GAAK,CACpC,CAAC,CAAC,CAAC,CACH,KAAC,mBAAmB,OAAM,KAAK,GAAK,CACpC,IACQ,EACV,mBAAS,SAAS,EAAC,mDAAmD,aACrE,KAAC,cAAc,IAAC,KAAK,EAAG,KAAK,CAAC,YAAY;wBAExC,mDAAmD;wBACnD,EAAE,CAAE,cAAc,EAAE,iBAAiB,CAAE,GAExB,EACjB,aAAG,SAAS,EAAC,8BAA8B,aACxC,EAAE,CACH,iGAAiG,EACjG,iBAAiB,CACjB,YAED,KAAC,YAAY,IAAC,IAAI,EAAC,4DAA4D,YAC5E,EAAE,CAAE,wBAAwB,EAAE,iBAAiB,CAAE,GACrC,IACZ,EACF,cAAc,CAAC,CAAC,CAAC,CAClB,KAAC,kBAAkB,OAAM,KAAK,GAAK,CACnC,CAAC,CAAC,CAAC,CACH,KAAC,mBAAmB,OAAM,KAAK,EAAG,kBAAkB,QAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAG,SAAS,GAAK,CACxF,IACQ,IACL,CACN,CAAC;AACH,CAAC,CAAC"}
1
+ {"version":3,"file":"previews.js","sourceRoot":"","sources":["../../../src/facebook-preview/previews.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,2BAA2B,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrD,MAAM,CAAC,MAAM,gBAAgB,GAAsC,CAAE,KAAK,EAAG,EAAE;IAC9E,MAAM,QAAQ,GAAG,CAAC,CAAE,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC;IACxC,MAAM,cAAc,GAAG,CAAC,CAAE,KAAK,CAAC,WAAW,CAAC;IAE5C,OAAO,CACN,eAAK,SAAS,EAAC,iCAAiC,aAC/C,mBAAS,SAAS,EAAC,mDAAmD,aACrE,KAAC,cAAc,IAAC,KAAK,EAAG,KAAK,CAAC,YAAY;wBAExC,mDAAmD;wBACnD,EAAE,CAAE,WAAW,EAAE,iBAAiB,CAAE,GAErB,EACjB,YAAG,SAAS,EAAC,8BAA8B,YACxC,EAAE,CAAE,2DAA2D,EAAE,iBAAiB,CAAE,GACnF,EACF,QAAQ,CAAC,CAAC,CAAC,KAAC,mBAAmB,OAAM,KAAK,GAAK,CAAC,CAAC,CAAC,KAAC,mBAAmB,OAAM,KAAK,GAAK,IAC/E,EACV,mBAAS,SAAS,EAAC,mDAAmD,aACrE,KAAC,cAAc,IAAC,KAAK,EAAG,KAAK,CAAC,YAAY;wBAExC,mDAAmD;wBACnD,EAAE,CAAE,cAAc,EAAE,iBAAiB,CAAE,GAExB,EACjB,aAAG,SAAS,EAAC,8BAA8B,aACxC,EAAE,CACH,iGAAiG,EACjG,iBAAiB,CACjB,YAED,KAAC,YAAY,IAAC,IAAI,EAAC,4DAA4D,YAC5E,EAAE,CAAE,wBAAwB,EAAE,iBAAiB,CAAE,GACrC,IACZ,EACF,cAAc,CAAC,CAAC,CAAC,CAClB,KAAC,kBAAkB,OAAM,KAAK,GAAK,CACnC,CAAC,CAAC,CAAC,CACH,KAAC,mBAAmB,OAAM,KAAK,EAAG,kBAAkB,QAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAG,SAAS,GAAK,CACxF,IACQ,IACL,CACN,CAAC;AACH,CAAC,CAAC"}
@@ -114,11 +114,13 @@
114
114
  }
115
115
 
116
116
  .facebook-preview__image,
117
- .facebook-preview__custom-image {
118
- img {
117
+ .facebook-preview__custom-image,
118
+ .facebook-preview__media-item {
119
+ img,
120
+ video {
119
121
  display: block;
120
-
121
122
  object-fit: cover;
123
+ width: 100%;
122
124
  }
123
125
  }
124
126
 
@@ -148,7 +150,8 @@
148
150
  }
149
151
  }
150
152
 
151
- .facebook-preview__custom-image {
153
+ .facebook-preview__custom-image,
154
+ .facebook-preview__media-item {
152
155
  display: flex;
153
156
  justify-content: center;
154
157
 
@@ -2,6 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { DEFAULT_PROPS } from './constants';
3
3
  import { LinkedInPostPreview } from './post-preview';
4
4
  export function LinkedInLinkPreview(props) {
5
- return _jsx(LinkedInPostPreview, { ...DEFAULT_PROPS, ...props });
5
+ return (_jsx(LinkedInPostPreview, { ...DEFAULT_PROPS, ...props,
6
+ // Override the props that are irrelevant to link preview
7
+ description: "", media: undefined }));
6
8
  }
7
9
  //# sourceMappingURL=link-preview.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"link-preview.js","sourceRoot":"","sources":["../../../src/linkedin-preview/link-preview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAQrD,MAAM,UAAU,mBAAmB,CAAE,KAA+B;IACnE,OAAO,KAAC,mBAAmB,OAAM,aAAa,KAAQ,KAAK,GAAK,CAAC;AAClE,CAAC"}
1
+ {"version":3,"file":"link-preview.js","sourceRoot":"","sources":["../../../src/linkedin-preview/link-preview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAQrD,MAAM,UAAU,mBAAmB,CAAE,KAA+B;IACnE,OAAO,CACN,KAAC,mBAAmB,OACd,aAAa,KACb,KAAK;QACV,yDAAyD;QACzD,WAAW,EAAC,EAAE,EACd,KAAK,EAAG,SAAS,GAChB,CACF,CAAC;AACH,CAAC"}
@@ -3,8 +3,9 @@ import { __ } from '@wordpress/i18n';
3
3
  import { baseDomain, preparePreviewText } from '../helpers';
4
4
  import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
5
5
  import './style.scss';
6
- export function LinkedInPostPreview({ image, jobTitle, name, profileImage, description, title, url, }) {
7
- return (_jsx("div", { className: "linkedin-preview__wrapper", children: _jsxs("section", { className: "linkedin-preview__container", children: [_jsxs("div", { className: "linkedin-preview__header", children: [_jsx("div", { className: "linkedin-preview__header--avatar", children: _jsx("img", { src: profileImage, alt: "" }) }), _jsxs("div", { className: "linkedin-preview__header--profile", children: [_jsxs("div", { className: "linkedin-preview__header--profile-info", children: [_jsx("div", { className: "linkedin-preview__header--profile-name", children: name }), _jsx("span", { children: "\u2022" }), _jsx("div", { className: "linkedin-preview__header--profile-actor", children:
6
+ export function LinkedInPostPreview({ image, jobTitle, name, profileImage, description, media, title, url, }) {
7
+ const hasMedia = !!media?.length;
8
+ return (_jsx("div", { className: "linkedin-preview__wrapper", children: _jsxs("section", { className: `linkedin-preview__container ${hasMedia ? 'has-media' : ''}`, children: [_jsxs("div", { className: "linkedin-preview__header", children: [_jsx("div", { className: "linkedin-preview__header--avatar", children: _jsx("img", { src: profileImage, alt: "" }) }), _jsxs("div", { className: "linkedin-preview__header--profile", children: [_jsxs("div", { className: "linkedin-preview__header--profile-info", children: [_jsx("div", { className: "linkedin-preview__header--profile-name", children: name }), _jsx("span", { children: "\u2022" }), _jsx("div", { className: "linkedin-preview__header--profile-actor", children:
8
9
  // translators: refers to the actor level of the post being shared, e.g. "1st", "2nd", "3rd", etc.
9
10
  __('1st', 'social-previews') })] }), jobTitle ? (_jsx("div", { className: "linkedin-preview__header--profile-title", children: jobTitle })) : null, _jsxs("div", { className: "linkedin-preview__header--profile-meta", children: [_jsx("span", { children:
10
11
  // translators: refers to the time since the post was published, e.g. "1h"
@@ -17,8 +18,10 @@ export function LinkedInPostPreview({ image, jobTitle, name, profileImage, descr
17
18
  maxChars: FEED_TEXT_MAX_LENGTH,
18
19
  maxLines: FEED_TEXT_MAX_LINES,
19
20
  }),
20
- } })) : null, _jsxs("article", { children: [image ? _jsx("img", { className: "linkedin-preview__image", src: image, alt: "" }) : null, url ? (_jsxs("div", { className: "linkedin-preview__description", children: [_jsx("h2", { className: "linkedin-preview__description--title", children: title }), _jsxs("div", { className: "linkedin-preview__description--meta", children: [_jsx("span", { className: "linkedin-preview__description--url", children: baseDomain(url) }), _jsx("span", { children: "\u2022" }), _jsx("span", { children:
21
+ } })) : null, hasMedia ? (_jsx("div", { className: "linkedin-preview__media", children: media.map((mediaItem, index) => (_jsx("div", { className: "linkedin-preview__media-item", children: mediaItem.type.startsWith('video/') ? (
22
+ // eslint-disable-next-line jsx-a11y/media-has-caption
23
+ _jsx("video", { controls: true, children: _jsx("source", { src: mediaItem.url, type: mediaItem.type }) })) : (_jsx("img", { alt: mediaItem.alt || '', src: mediaItem.url })) }, `linkedin-preview__media-item-${index}`))) })) : (_jsxs("article", { children: [image ? _jsx("img", { className: "linkedin-preview__image", src: image, alt: "" }) : null, url ? (_jsxs("div", { className: "linkedin-preview__description", children: [_jsx("h2", { className: "linkedin-preview__description--title", children: title }), _jsxs("div", { className: "linkedin-preview__description--meta", children: [_jsx("span", { className: "linkedin-preview__description--url", children: baseDomain(url) }), _jsx("span", { children: "\u2022" }), _jsx("span", { children:
21
24
  // translators: x is the number of minutes it takes to read the article
22
- __('x min read', 'social-previews') })] })] })) : null] })] })] }) }));
25
+ __('x min read', 'social-previews') })] })] })) : null] }))] })] }) }));
23
26
  }
24
27
  //# sourceMappingURL=post-preview.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/linkedin-preview/post-preview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGxE,OAAO,cAAc,CAAC;AAEtB,MAAM,UAAU,mBAAmB,CAAE,EACpC,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,GAAG,GACmB;IACtB,OAAO,CACN,cAAK,SAAS,EAAC,2BAA2B,YACzC,mBAAS,SAAS,EAAC,6BAA6B,aAC/C,eAAK,SAAS,EAAC,0BAA0B,aACxC,cAAK,SAAS,EAAC,kCAAkC,YAChD,cAAK,GAAG,EAAG,YAAY,EAAG,GAAG,EAAC,EAAE,GAAG,GAC9B,EACN,eAAK,SAAS,EAAC,mCAAmC,aACjD,eAAK,SAAS,EAAC,wCAAwC,aACtD,cAAK,SAAS,EAAC,wCAAwC,YAAG,IAAI,GAAQ,EACtE,oCAAc,EACd,cAAK,SAAS,EAAC,yCAAyC;4CAEtD,kGAAkG;4CAClG,EAAE,CAAE,KAAK,EAAE,iBAAiB,CAAE,GAE1B,IACD,EACJ,QAAQ,CAAC,CAAC,CAAC,CACZ,cAAK,SAAS,EAAC,yCAAyC,YAAG,QAAQ,GAAQ,CAC3E,CAAC,CAAC,CAAC,IAAI,EACR,eAAK,SAAS,EAAC,wCAAwC,aACtD;4CAEE,0EAA0E;4CAC1E,EAAE,CAAE,IAAI,EAAE,iBAAiB,CAAE,GAExB,EACP,oCAAc,EAEd,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,YACpF,eAAM,CAAC,EAAC,4XAA4X,GAAG,GAClY,IACD,IACD,IACD,EACN,eAAK,SAAS,EAAC,2BAA2B,aACvC,WAAW,CAAC,CAAC,CAAC,CACf,cACC,SAAS,EAAC,2BAA2B;4BACrC,sGAAsG;4BACtG,2CAA2C;4BAC3C,uBAAuB,EAAG;gCACzB,MAAM,EAAE,kBAAkB,CAAE,WAAW,EAAE;oCACxC,QAAQ,EAAE,UAAU;oCACpB,QAAQ,EAAE,oBAAoB;oCAC9B,QAAQ,EAAE,mBAAmB;iCAC7B,CAAE;6BACH,GACA,CACF,CAAC,CAAC,CAAC,IAAI,EACR,8BACG,KAAK,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,yBAAyB,EAAC,GAAG,EAAG,KAAK,EAAG,GAAG,EAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,EAC/E,GAAG,CAAC,CAAC,CAAC,CACP,eAAK,SAAS,EAAC,+BAA+B,aAC7C,aAAI,SAAS,EAAC,sCAAsC,YAAG,KAAK,GAAO,EACnE,eAAK,SAAS,EAAC,qCAAqC,aACnD,eAAM,SAAS,EAAC,oCAAoC,YAAG,UAAU,CAAE,GAAG,CAAE,GAAS,EACjF,oCAAc,EACd;oDAEE,uEAAuE;oDACvE,EAAE,CAAE,YAAY,EAAE,iBAAiB,CAAE,GAEhC,IACF,IACD,CACN,CAAC,CAAC,CAAC,IAAI,IACC,IACL,IACG,GACL,CACN,CAAC;AACH,CAAC"}
1
+ {"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/linkedin-preview/post-preview.tsx"],"names":[],"mappings":"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"}
@@ -27,6 +27,12 @@
27
27
  /* stylelint-disable-next-line scales/radii */
28
28
  border-radius: 8px;
29
29
  overflow: hidden;
30
+
31
+ &.has-media {
32
+ // When the preview has media, we want to hide the border radius on the bottom
33
+ border-end-end-radius: 0;
34
+ border-end-start-radius: 0;
35
+ }
30
36
  }
31
37
 
32
38
  &__header {
@@ -73,13 +79,24 @@
73
79
  font-weight: 400;
74
80
  }
75
81
 
76
- &__content article {
82
+ &__content article,
83
+ &__media {
77
84
  margin-top: 0.5rem;
78
85
  background-color: #eef3f8;
79
86
  display: flex;
80
87
  flex-direction: column;
81
88
  }
82
89
 
90
+ &__media-item {
91
+ display: flex;
92
+
93
+ img,
94
+ video {
95
+ width: 100%;
96
+ object-fit: cover;
97
+ }
98
+ }
99
+
83
100
  &__description {
84
101
  padding: 0.5rem 0.75rem;
85
102
 
@@ -4,9 +4,6 @@ import { baseDomain, firstValid, hardTruncation, shortEnough, stripHtmlTags } fr
4
4
  const DESCRIPTION_LENGTH = 200;
5
5
  const twitterDescription = firstValid(shortEnough(DESCRIPTION_LENGTH), hardTruncation(DESCRIPTION_LENGTH));
6
6
  export const Card = ({ description, image, title, cardType, url, }) => {
7
- if (!title && !description && !image && !url) {
8
- return null;
9
- }
10
7
  const cardClassNames = classnames(`twitter-preview__card-${cardType}`, {
11
8
  'twitter-preview__card-has-image': !!image,
12
9
  });
@@ -1 +1 @@
1
- {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/twitter-preview/card.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhG,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAE/B,MAAM,kBAAkB,GAAG,UAAU,CACpC,WAAW,CAAE,kBAAkB,CAAE,EACjC,cAAc,CAAE,kBAAkB,CAAE,CACpC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAiC,CAAE,EACnD,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,GACH,EAAG,EAAE;IACL,IAAK,CAAE,KAAK,IAAI,CAAE,WAAW,IAAI,CAAE,KAAK,IAAI,CAAE,GAAG,EAAG;QACnD,OAAO,IAAI,CAAC;KACZ;IACD,MAAM,cAAc,GAAG,UAAU,CAAE,yBAA0B,QAAS,EAAE,EAAE;QACzE,iCAAiC,EAAE,CAAC,CAAE,KAAK;KAC3C,CAAE,CAAC;IAEJ,OAAO,CACN,cAAK,SAAS,EAAC,uBAAuB,YACrC,eAAK,SAAS,EAAG,cAAc,aAC5B,KAAK,IAAI,cAAK,SAAS,EAAC,6BAA6B,EAAC,GAAG,EAAG,KAAK,EAAG,GAAG,EAAC,EAAE,GAAG,EAC/E,eAAK,SAAS,EAAC,4BAA4B,aAC1C,cAAK,SAAS,EAAC,2BAA2B,YAAG,UAAU,CAAE,GAAG,IAAI,EAAE,CAAE,GAAQ,EAC5E,cAAK,SAAS,EAAC,6BAA6B,YAAG,KAAK,GAAQ,EAC5D,cAAK,SAAS,EAAC,mCAAmC,YAC/C,kBAAkB,CAAE,aAAa,CAAE,WAAW,CAAE,CAAE,GAC/C,IACD,IACD,GACD,CACN,CAAC;AACH,CAAC,CAAC"}
1
+ {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/twitter-preview/card.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhG,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAE/B,MAAM,kBAAkB,GAAG,UAAU,CACpC,WAAW,CAAE,kBAAkB,CAAE,EACjC,cAAc,CAAE,kBAAkB,CAAE,CACpC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAiC,CAAE,EACnD,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,GACH,EAAG,EAAE;IACL,MAAM,cAAc,GAAG,UAAU,CAAE,yBAA0B,QAAS,EAAE,EAAE;QACzE,iCAAiC,EAAE,CAAC,CAAE,KAAK;KAC3C,CAAE,CAAC;IAEJ,OAAO,CACN,cAAK,SAAS,EAAC,uBAAuB,YACrC,eAAK,SAAS,EAAG,cAAc,aAC5B,KAAK,IAAI,cAAK,SAAS,EAAC,6BAA6B,EAAC,GAAG,EAAG,KAAK,EAAG,GAAG,EAAC,EAAE,GAAG,EAC/E,eAAK,SAAS,EAAC,4BAA4B,aAC1C,cAAK,SAAS,EAAC,2BAA2B,YAAG,UAAU,CAAE,GAAG,IAAI,EAAE,CAAE,GAAQ,EAC5E,cAAK,SAAS,EAAC,6BAA6B,YAAG,KAAK,GAAQ,EAC5D,cAAK,SAAS,EAAC,mCAAmC,YAC/C,kBAAkB,CAAE,aAAa,CAAE,WAAW,CAAE,CAAE,GAC/C,IACD,IACD,GACD,CACN,CAAC;AACH,CAAC,CAAC"}
@@ -2,6 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { DEFAULT_PROPS } from './constants';
3
3
  import { TwitterPostPreview } from './post-preview';
4
4
  export const TwitterLinkPreview = (props) => {
5
- return _jsx(TwitterPostPreview, { ...DEFAULT_PROPS, ...props, text: "" });
5
+ return (_jsx(TwitterPostPreview, { ...DEFAULT_PROPS, ...props,
6
+ // Override the props that are irrelevant to link preview
7
+ text: "", media: undefined }));
6
8
  };
7
9
  //# sourceMappingURL=link-preview.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"link-preview.js","sourceRoot":"","sources":["../../../src/twitter-preview/link-preview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAQpD,MAAM,CAAC,MAAM,kBAAkB,GAAwC,CAAE,KAAK,EAAG,EAAE;IAClF,OAAO,KAAC,kBAAkB,OAAM,aAAa,KAAQ,KAAK,EAAG,IAAI,EAAC,EAAE,GAAG,CAAC;AACzE,CAAC,CAAC"}
1
+ {"version":3,"file":"link-preview.js","sourceRoot":"","sources":["../../../src/twitter-preview/link-preview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAQpD,MAAM,CAAC,MAAM,kBAAkB,GAAwC,CAAE,KAAK,EAAG,EAAE;IAClF,OAAO,CACN,KAAC,kBAAkB,OACb,aAAa,KACb,KAAK;QACV,yDAAyD;QACzD,IAAI,EAAC,EAAE,EACP,KAAK,EAAG,SAAS,GAChB,CACF,CAAC;AACH,CAAC,CAAC"}