@times-components/article-lead-asset 1.20.1 → 1.21.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.
- package/CHANGELOG.md +11 -0
- package/dist/article-lead-asset-image.js +10 -3
- package/dist/article-lead-asset.js +4 -2
- package/package.json +6 -6
- package/rnw.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [1.21.0](https://github.com/newsuk/times-components/compare/@times-components/article-lead-asset@1.20.1...@times-components/article-lead-asset@1.21.0) (2025-04-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **TMRP-233:** implement webp images ([#4105](https://github.com/newsuk/times-components/issues/4105)) ([66f0ce5](https://github.com/newsuk/times-components/commit/66f0ce53c4cd8fe101d66fc18c69c758e786af46))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [1.20.1](https://github.com/newsuk/times-components/compare/@times-components/article-lead-asset@1.20.0...@times-components/article-lead-asset@1.20.1) (2025-04-11)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @times-components/article-lead-asset
|
|
@@ -26,25 +26,32 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
26
26
|
var LeadAssetImage = function LeadAssetImage(_ref) {
|
|
27
27
|
var aspectRatio = _ref.aspectRatio,
|
|
28
28
|
alt = _ref.alt,
|
|
29
|
-
uri = _ref.uri
|
|
29
|
+
uri = _ref.uri,
|
|
30
|
+
isWebPFormatActive = _ref.isWebPFormatActive;
|
|
30
31
|
var url = (0, _utils.addMissingProtocol)(uri);
|
|
31
32
|
var ratio = (0, _getRatio["default"])(aspectRatio);
|
|
32
33
|
var sizes = [360, 520, 680, 860, 1200, 1500];
|
|
33
34
|
var srcSet = sizes.map(function (size) {
|
|
34
35
|
return "".concat((0, _utils.appendToImageURL)(url, "resize", size), " ").concat(size, "w");
|
|
35
36
|
});
|
|
37
|
+
var webpSrcSet = sizes.map(function (size) {
|
|
38
|
+
return "".concat((0, _utils.appendToImageURL)((0, _utils.appendToImageURL)(url, "format", "webp"), "resize", size), " ").concat(size, "w");
|
|
39
|
+
}).join(",");
|
|
36
40
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
37
41
|
style: _objectSpread(_objectSpread({}, _index["default"].wrapper), {}, {
|
|
38
42
|
paddingBottom: "".concat(100 / ratio, "%")
|
|
39
43
|
}),
|
|
40
44
|
className: "lcpItem"
|
|
41
|
-
}, /*#__PURE__*/_react["default"].createElement("
|
|
45
|
+
}, /*#__PURE__*/_react["default"].createElement("picture", null, isWebPFormatActive && /*#__PURE__*/_react["default"].createElement("source", {
|
|
46
|
+
srcSet: webpSrcSet,
|
|
47
|
+
type: "image/webp"
|
|
48
|
+
}), /*#__PURE__*/_react["default"].createElement("img", {
|
|
42
49
|
alt: alt,
|
|
43
50
|
style: _index["default"].img,
|
|
44
51
|
src: (0, _utils.appendToImageURL)(url, "resize", sizes[0]),
|
|
45
52
|
srcSet: srcSet.join(","),
|
|
46
53
|
fetchpriority: "high"
|
|
47
|
-
}));
|
|
54
|
+
})));
|
|
48
55
|
};
|
|
49
56
|
|
|
50
57
|
LeadAssetImage.propTypes = _articleLeadAssetPropTypes.imageLeadAssetPropTypes;
|
|
@@ -24,7 +24,8 @@ var ArticleLeadAsset = function ArticleLeadAsset(_ref) {
|
|
|
24
24
|
displayImage = _ref.displayImage,
|
|
25
25
|
isVideo = _ref.isVideo,
|
|
26
26
|
leadAsset = _ref.leadAsset,
|
|
27
|
-
style = _ref.style
|
|
27
|
+
style = _ref.style,
|
|
28
|
+
isWebPFormatActive = _ref.isWebPFormatActive;
|
|
28
29
|
|
|
29
30
|
if (!leadAsset || !displayImage) {
|
|
30
31
|
return null;
|
|
@@ -51,7 +52,8 @@ var ArticleLeadAsset = function ArticleLeadAsset(_ref) {
|
|
|
51
52
|
}) : /*#__PURE__*/_react["default"].createElement(_articleLeadAssetImage["default"], {
|
|
52
53
|
aspectRatio: aspectRatio,
|
|
53
54
|
alt: leadAsset.title || caption.text,
|
|
54
|
-
uri: displayImage.url
|
|
55
|
+
uri: displayImage.url,
|
|
56
|
+
isWebPFormatActive: isWebPFormatActive
|
|
55
57
|
});
|
|
56
58
|
return /*#__PURE__*/_react["default"].createElement(_utils.TcView, {
|
|
57
59
|
className: className,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/article-lead-asset",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.21.0",
|
|
4
4
|
"description": "Generalised Lead Asset component for templates to consume & style ",
|
|
5
5
|
"main": "dist/article-lead-asset",
|
|
6
6
|
"dev": "src/article-lead-asset",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@babel/core": "7.4.4",
|
|
36
36
|
"@times-components/eslint-config-thetimes": "0.8.18",
|
|
37
37
|
"@times-components/jest-configurator-web": "0.8.2",
|
|
38
|
-
"@times-components/storybook": "4.13.
|
|
38
|
+
"@times-components/storybook": "4.13.2",
|
|
39
39
|
"@times-components/webpack-configurator": "2.1.1",
|
|
40
40
|
"babel-jest": "24.8.0",
|
|
41
41
|
"eslint": "5.9.0",
|
|
@@ -47,10 +47,10 @@
|
|
|
47
47
|
"webpack": "4.30.0"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@times-components/jest-serializer": "3.
|
|
50
|
+
"@times-components/jest-serializer": "3.15.0",
|
|
51
51
|
"@times-components/test-utils": "2.4.2",
|
|
52
|
-
"@times-components/utils": "6.31.
|
|
53
|
-
"@times-components/video": "4.19.
|
|
52
|
+
"@times-components/utils": "6.31.5",
|
|
53
|
+
"@times-components/video": "4.19.16",
|
|
54
54
|
"prop-types": "15.7.2"
|
|
55
55
|
},
|
|
56
56
|
"resolutions": {
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"publishConfig": {
|
|
65
65
|
"access": "public"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "07b292c2f7d20953935b846634c55df093705568"
|
|
68
68
|
}
|
package/rnw.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=4)}([function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("@times-components/video/rnw")},function(e,t,r){"use strict";r.r(t);var n=r(1),i=r.n(n),o=r(2),a=r(3),c=r.n(a);function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==r)return;var n,i,o=[],a=!0,c=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);a=!0);}catch(e){c=!0,i=e}finally{try{a||null==r.return||r.return()}finally{if(c)throw i}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return s(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return s(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var l=function(e){var t=u(e.split(":"),2),r=t[0],n=t[1];return Number(r)/Number(n)},p=r(0),d=r.n(p),f=d.a.shape({ratio:d.a.string.isRequired,url:d.a.string.isRequired}),
|
|
1
|
+
module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=4)}([function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("@times-components/video/rnw")},function(e,t,r){"use strict";r.r(t);var n=r(1),i=r.n(n),o=r(2),a=r(3),c=r.n(a);function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==r)return;var n,i,o=[],a=!0,c=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);a=!0);}catch(e){c=!0,i=e}finally{try{a||null==r.return||r.return()}finally{if(c)throw i}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return s(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return s(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var l=function(e){var t=u(e.split(":"),2),r=t[0],n=t[1];return Number(r)/Number(n)},p=r(0),d=r.n(p),f=d.a.shape({ratio:d.a.string.isRequired,url:d.a.string.isRequired}),b={brightcoveAccountId:d.a.string.isRequired,brightcovePolicyKey:d.a.string.isRequired,brightcoveVideoId:d.a.string.isRequired,posterImage:d.a.shape({crop32:f,crop169:f}).isRequired},y=(d.a.string.isRequired,d.a.string.isRequired,d.a.string.isRequired,d.a.number.isRequired,d.a.shape(b),d.a.func.isRequired,d.a.string.isRequired,{caption:d.a.string,credits:d.a.string,crop:f,crop11:f,crop23:f,crop32:f,crop45:f,crop169:f,crop1251:f}),m=(d.a.string,d.a.bool,d.a.oneOfType([d.a.shape(y),d.a.shape(b)]),d.a.func,d.a.any,d.a.number,{wrapper:{display:"table",height:0,overflow:"hidden",position:"relative",width:"100%"},img:{opacity:1,zIndex:2,width:"100%",position:"absolute",display:"block"}});function g(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?g(Object(r),!0).forEach((function(t){h(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):g(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function h(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var O=function(e){var t=e.aspectRatio,r=e.alt,n=e.uri,a=e.isWebPFormatActive,c=Object(o.addMissingProtocol)(n),u=l(t),s=[360,520,680,860,1200,1500],p=s.map((function(e){return"".concat(Object(o.appendToImageURL)(c,"resize",e)," ").concat(e,"w")})),d=s.map((function(e){return"".concat(Object(o.appendToImageURL)(Object(o.appendToImageURL)(c,"format","webp"),"resize",e)," ").concat(e,"w")})).join(",");return i.a.createElement("div",{style:v(v({},m.wrapper),{},{paddingBottom:"".concat(100/u,"%")}),className:"lcpItem"},i.a.createElement("picture",null,a&&i.a.createElement("source",{srcSet:d,type:"image/webp"}),i.a.createElement("img",{alt:r,style:m.img,src:Object(o.appendToImageURL)(c,"resize",s[0]),srcSet:p.join(","),fetchpriority:"high"})))},j=function(e){var t=e.aspectRatio,r=e.className,n=e.renderCaption,a=e.displayImage,u=e.isVideo,s=e.leadAsset,l=e.style,p=e.isWebPFormatActive;if(!s||!a)return null;var d=u?s.posterImage:s,f={credits:d.credits,text:d.caption},b=u?i.a.createElement(c.a,{accountId:s.brightcoveAccountId,height:"100%",id:s.id,is360:s.is360,playerId:s.brightcovePlayerId,policyKey:s.brightcovePolicyKey,position:"absolute",poster:{uri:a.url},videoId:s.brightcoveVideoId,width:"100%"}):i.a.createElement(O,{aspectRatio:t,alt:s.title||f.text,uri:a.url,isWebPFormatActive:p});return i.a.createElement(o.TcView,{className:r,style:l},i.a.createElement("figure",{style:{margin:0}},i.a.createElement(o.AspectRatioContainer,{aspectRatio:t},b),n&&i.a.createElement("figcaption",null,n({caption:f}))))};j.defaultProps={aspectRatio:"1:1",displayImage:null,isVideo:!1,leadAsset:null,renderCaption:function(){return null},width:null};t.default=j}]);
|