@times-components/article-main-video 1.3.3 → 1.5.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 +30 -0
- package/article-main-video.showcase.js +55 -26
- package/dist/article-main-video.js +8 -2
- package/dist/styles/responsive.js +1 -1
- package/package.json +17 -17
- package/rnw.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,36 @@
|
|
|
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.5.0](https://github.com/newsuk/times-components/compare/@times-components/article-main-video@1.4.0...@times-components/article-main-video@1.5.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
|
+
|
|
17
|
+
# [1.4.0](https://github.com/newsuk/times-components/compare/@times-components/article-main-video@1.3.4...@times-components/article-main-video@1.4.0) (2025-04-11)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* **TMRA-123:** update video article story ([#4121](https://github.com/newsuk/times-components/issues/4121)) ([1110065](https://github.com/newsuk/times-components/commit/1110065265a05950bde0b2819fbadc7ea044e92a))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## [1.3.4](https://github.com/newsuk/times-components/compare/@times-components/article-main-video@1.3.3...@times-components/article-main-video@1.3.4) (2025-04-11)
|
|
29
|
+
|
|
30
|
+
**Note:** Version bump only for package @times-components/article-main-video
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
6
36
|
## [1.3.3](https://github.com/newsuk/times-components/compare/@times-components/article-main-video@1.3.2...@times-components/article-main-video@1.3.3) (2025-04-10)
|
|
7
37
|
|
|
8
38
|
**Note:** Version bump only for package @times-components/article-main-video
|
|
@@ -4,6 +4,7 @@ import articleAdConfig from "@times-components/ad/fixtures/article-ad-config.jso
|
|
|
4
4
|
import { fixtures } from "@times-components/provider-test-tools";
|
|
5
5
|
import { NewTab } from "@times-components/storybook";
|
|
6
6
|
import storybookReporter from "@times-components/tealium-utils";
|
|
7
|
+
import { addUserStateKnobs } from "@times-components/user-state";
|
|
7
8
|
import Article from "./src/article-main-video";
|
|
8
9
|
|
|
9
10
|
const preventDefaultedAction = decorateAction =>
|
|
@@ -17,43 +18,71 @@ const preventDefaultedAction = decorateAction =>
|
|
|
17
18
|
const renderArticle = ({
|
|
18
19
|
adConfig = articleAdConfig,
|
|
19
20
|
analyticsStream,
|
|
20
|
-
decorateAction
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
21
|
+
decorateAction,
|
|
22
|
+
articleData,
|
|
23
|
+
articleUpNextData,
|
|
24
|
+
select
|
|
25
|
+
}) => {
|
|
26
|
+
const userStatesOptions = [
|
|
27
|
+
"sport",
|
|
28
|
+
"edition",
|
|
29
|
+
"culture",
|
|
30
|
+
"business-money",
|
|
31
|
+
"life-style"
|
|
32
|
+
];
|
|
33
|
+
|
|
34
|
+
const category = select("Article category", userStatesOptions, "life-style");
|
|
35
|
+
const upNextArticles = select("Number of upNext articles", [1, 2, 3, 4], 4);
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<Article
|
|
39
|
+
adConfig={adConfig}
|
|
40
|
+
analyticsStream={analyticsStream}
|
|
41
|
+
article={{
|
|
42
|
+
...articleData,
|
|
43
|
+
categoryPath: `/${category}/${articleData.categoryPath}`,
|
|
44
|
+
upNext: articleUpNextData.slice(4 - upNextArticles)
|
|
45
|
+
}}
|
|
46
|
+
isLoading={false}
|
|
47
|
+
onAuthorPress={preventDefaultedAction(decorateAction)("onAuthorPress")}
|
|
48
|
+
onCommentGuidelinesPress={preventDefaultedAction(decorateAction)(
|
|
49
|
+
"onCommentGuidelinesPress"
|
|
50
|
+
)}
|
|
51
|
+
onCommentsPress={preventDefaultedAction(decorateAction)(
|
|
52
|
+
"onCommentsPress"
|
|
53
|
+
)}
|
|
54
|
+
onLinkPress={preventDefaultedAction(decorateAction)("onLinkPress")}
|
|
55
|
+
onRelatedArticlePress={preventDefaultedAction(decorateAction)(
|
|
56
|
+
"onRelatedArticlePress"
|
|
57
|
+
)}
|
|
58
|
+
onTopicPress={preventDefaultedAction(decorateAction)("onTopicPress")}
|
|
59
|
+
onTwitterLinkPress={preventDefaultedAction(decorateAction)(
|
|
60
|
+
"onTwitterLinkPress"
|
|
61
|
+
)}
|
|
62
|
+
onVideoPress={preventDefaultedAction(decorateAction)("onVideoPress")}
|
|
63
|
+
/>
|
|
64
|
+
);
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
const upNextArr = fixtures.articleVideoData.upNext;
|
|
43
68
|
|
|
44
69
|
export default {
|
|
45
70
|
children: [
|
|
46
71
|
{
|
|
47
|
-
component: ({ boolean, color, select }, { decorateAction }) =>
|
|
48
|
-
|
|
72
|
+
component: ({ boolean, color, select }, { decorateAction }) => {
|
|
73
|
+
addUserStateKnobs();
|
|
74
|
+
return renderArticle({
|
|
49
75
|
boolean,
|
|
50
76
|
color,
|
|
51
77
|
analyticsStream: storybookReporter,
|
|
52
78
|
decorateAction,
|
|
79
|
+
articleData: fixtures.articleVideoData,
|
|
80
|
+
articleUpNextData: upNextArr,
|
|
53
81
|
hasScaling: false,
|
|
54
82
|
link: <NewTab />,
|
|
55
83
|
select
|
|
56
|
-
})
|
|
84
|
+
});
|
|
85
|
+
},
|
|
57
86
|
name: "Video Article",
|
|
58
87
|
platform: "web",
|
|
59
88
|
type: "story"
|
|
@@ -46,6 +46,7 @@ class ArticlePage extends _react.Component {
|
|
|
46
46
|
const article = this.props.article;
|
|
47
47
|
const headline = article.headline,
|
|
48
48
|
categoryPath = article.categoryPath,
|
|
49
|
+
categoryConnection = article.categoryConnection,
|
|
49
50
|
publicationName = article.publicationName,
|
|
50
51
|
publishedTime = article.publishedTime,
|
|
51
52
|
shortHeadline = article.shortHeadline,
|
|
@@ -65,6 +66,11 @@ class ArticlePage extends _react.Component {
|
|
|
65
66
|
};
|
|
66
67
|
const categoryColor = categoryColors[articleCategory];
|
|
67
68
|
|
|
69
|
+
const getCategoryLabel = slug => {
|
|
70
|
+
const category = categoryConnection.nodes.find(cat => cat.slug === slug);
|
|
71
|
+
return category ? category.title : "";
|
|
72
|
+
};
|
|
73
|
+
|
|
68
74
|
const formatVideoDuration = videoDurationMs => {
|
|
69
75
|
const videoDuration = (videoDurationMs / 60000).toFixed(2);
|
|
70
76
|
const formattedVideoDuration = videoDuration.replace(".", ":");
|
|
@@ -75,7 +81,7 @@ class ArticlePage extends _react.Component {
|
|
|
75
81
|
id: upNextArticle.id,
|
|
76
82
|
title: upNextArticle.headline,
|
|
77
83
|
url: upNextArticle.url,
|
|
78
|
-
posterImage: upNextArticle.leadAsset.posterImage.crop169,
|
|
84
|
+
posterImage: upNextArticle.leadAsset.posterImage.crop169.url,
|
|
79
85
|
duration: formatVideoDuration(upNextArticle.leadAsset.duration)
|
|
80
86
|
}));
|
|
81
87
|
const leadAssetUrl = leadAsset.posterImage && leadAsset.posterImage.crop169;
|
|
@@ -88,7 +94,7 @@ class ArticlePage extends _react.Component {
|
|
|
88
94
|
})), /*#__PURE__*/_react.default.createElement(_responsive.ArticleBody, null, /*#__PURE__*/_react.default.createElement(_responsive.ArticleLabelContainer, null, /*#__PURE__*/_react.default.createElement(_responsive.ArticleLabelText, null, categoryColor && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_responsive.ArticleLabelText, {
|
|
89
95
|
as: "span",
|
|
90
96
|
$color: categoryColor
|
|
91
|
-
}, articleCategory), " | "), formatVideoDuration(leadAsset.duration))), /*#__PURE__*/_react.default.createElement(_responsive.ArticleContentContainer, null, /*#__PURE__*/_react.default.createElement(_responsive.ArticleHeadline, null, (0, _utils.getHeadline)(headline, shortHeadline)), /*#__PURE__*/_react.default.createElement(_responsive.ArticleMeta, null, /*#__PURE__*/_react.default.createElement(_datePublication.default, {
|
|
97
|
+
}, getCategoryLabel(articleCategory)), " | "), formatVideoDuration(leadAsset.duration))), /*#__PURE__*/_react.default.createElement(_responsive.ArticleContentContainer, null, /*#__PURE__*/_react.default.createElement(_responsive.ArticleHeadline, null, (0, _utils.getHeadline)(headline, shortHeadline)), /*#__PURE__*/_react.default.createElement(_responsive.ArticleMeta, null, /*#__PURE__*/_react.default.createElement(_datePublication.default, {
|
|
92
98
|
date: publishedTime,
|
|
93
99
|
publication: publicationName
|
|
94
100
|
})), /*#__PURE__*/_react.default.createElement(_responsive.ArticleContent, null, content)), /*#__PURE__*/_react.default.createElement(_responsive.SaveAndShareContainer, null, SaveAndShare), !!relatedArticles && /*#__PURE__*/_react.default.createElement(_responsive.ArticleContentContainer, null, /*#__PURE__*/_react.default.createElement(_responsive.ArticleLabelText, {
|
|
@@ -84,7 +84,7 @@ exports.ArticleContent = ArticleContent;
|
|
|
84
84
|
const ArticleHeadline = _styledComponents.default.h1.withConfig({
|
|
85
85
|
displayName: "responsive__ArticleHeadline",
|
|
86
86
|
componentId: "f6lsbb-10"
|
|
87
|
-
})(["font-family:\"TimesModern-Bold\";font-size:3.6rem;line-height:1.125;letter-spacing:0.03em;color:#fff;margin:0;"]);
|
|
87
|
+
})(["font-family:\"TimesModern-Bold\";font-size:3.6rem;font-weight:400;line-height:1.125;letter-spacing:0.03em;color:#fff;margin:0;"]);
|
|
88
88
|
|
|
89
89
|
exports.ArticleHeadline = ArticleHeadline;
|
|
90
90
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/article-main-video",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "Main Video Article Template",
|
|
5
5
|
"main": "dist/article-main-video",
|
|
6
6
|
"dev": "src/article-main-video",
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@babel/core": "7.4.4",
|
|
36
36
|
"@times-components/jest-configurator-web": "0.8.2",
|
|
37
|
-
"@times-components/jest-serializer": "3.
|
|
38
|
-
"@times-components/provider-test-tools": "1.
|
|
39
|
-
"@times-components/storybook": "4.13.
|
|
37
|
+
"@times-components/jest-serializer": "3.15.0",
|
|
38
|
+
"@times-components/provider-test-tools": "1.32.0",
|
|
39
|
+
"@times-components/storybook": "4.13.2",
|
|
40
40
|
"@times-components/tealium-utils": "0.9.1",
|
|
41
41
|
"@times-components/test-utils": "2.4.2",
|
|
42
42
|
"@times-components/webpack-configurator": "2.1.1",
|
|
@@ -51,18 +51,18 @@
|
|
|
51
51
|
"webpack": "4.30.0"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@times-components/ad": "2.22.
|
|
55
|
-
"@times-components/article-lead-asset": "1.
|
|
56
|
-
"@times-components/article-skeleton": "1.
|
|
57
|
-
"@times-components/article-topics": "4.11.
|
|
58
|
-
"@times-components/context": "1.25.
|
|
59
|
-
"@times-components/date-publication": "0.30.
|
|
60
|
-
"@times-components/image": "6.
|
|
61
|
-
"@times-components/link": "3.17.
|
|
62
|
-
"@times-components/ts-components": "1.
|
|
63
|
-
"@times-components/ts-styleguide": "1.52.
|
|
64
|
-
"@times-components/user-state": "0.
|
|
65
|
-
"@times-components/utils": "6.31.
|
|
54
|
+
"@times-components/ad": "2.22.37",
|
|
55
|
+
"@times-components/article-lead-asset": "1.21.0",
|
|
56
|
+
"@times-components/article-skeleton": "1.162.0",
|
|
57
|
+
"@times-components/article-topics": "4.11.69",
|
|
58
|
+
"@times-components/context": "1.25.7",
|
|
59
|
+
"@times-components/date-publication": "0.30.47",
|
|
60
|
+
"@times-components/image": "6.19.0",
|
|
61
|
+
"@times-components/link": "3.17.47",
|
|
62
|
+
"@times-components/ts-components": "1.128.2",
|
|
63
|
+
"@times-components/ts-styleguide": "1.52.2",
|
|
64
|
+
"@times-components/user-state": "0.7.1",
|
|
65
|
+
"@times-components/utils": "6.31.5",
|
|
66
66
|
"prop-types": "15.7.2",
|
|
67
67
|
"styled-components": "4.3.2"
|
|
68
68
|
},
|
|
@@ -77,5 +77,5 @@
|
|
|
77
77
|
"publishConfig": {
|
|
78
78
|
"access": "public"
|
|
79
79
|
},
|
|
80
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "07b292c2f7d20953935b846634c55df093705568"
|
|
81
81
|
}
|
package/rnw.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports=function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=13)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("@times-components/link/rnw")},function(e,t){e.exports=require("@times-components/user-state/rnw")},function(e,t){e.exports=require("@times-components/article-skeleton/rnw")},function(e,t){e.exports=require("@times-components/date-publication/rnw")},function(e,t){e.exports=require("@times-components/article-lead-asset/rnw")},function(e,t){e.exports=require("@times-components/ts-components/rnw")},function(e,t){e.exports=require("@times-components/article-topics/rnw")},function(e,t){e.exports=require("@times-components/image/rnw")},function(e,t,n){"use strict";n.r(t);var i=n(0),r=n.n(i),a=n(7),o=n.n(a),l=n(4),s=n(8),p=n.n(s),c=n(9),d=n.n(c),m=n(10),u=n(5),f=n.n(u),g=n(2),b=n.n(g),h=n(11),w=n.n(h),x=n(6),y=n.n(x);var v={topicsMetaContainer:{justifyContent:"flex-start"}},A=n(1),C=n.n(A),E=n(3);const j=C.a.div.withConfig({displayName:"responsive__ArticleMainVideoContainer",componentId:"f6lsbb-0"})(["background-color:#121212;"]),N=C.a.div.withConfig({displayName:"responsive__VideoArticleContainer",componentId:"f6lsbb-1"})(["width:100%;max-width:1144px;margin:0 auto;@media (min-width:","px){display:flex;flex-wrap:wrap;justify-content:space-between;padding:24px;}"],E.breakpoints.wide),I=C.a.div.withConfig({displayName:"responsive__ArticleLeadAssetContainer",componentId:"f6lsbb-2"})(['position:relative;width:100%;& *{max-width:100%;}&&& .vjs-poster::before{content:"";display:block;background-color:rgba(0,0,0,0.2);width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;}&&& .vjs-big-play-button .vjs-icon-placeholder::before,.vjs-big-play-button .vjs-icon-placeholder::after{bottom:24px;left:24px;width:48px !important;background-size:48px;background-position-y:32px;z-index:2;@media (min-width:',"px){background-position-y:18px;background-size:62px;width:62px !important;}background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASOSURBVHgB7Z2/ctNKFMY/M+mveYHL5tYXSGiBQaYEZjBvEOigCemgCq6gIqSBjjgFlBgKKLFmoIbwBN7wApgnWM7R7hpZ/iPJGGs32t/MiWJsJvaX7+zZ7D81UCFKqSZdIgpBcd5chXlaZF4+pJCp6zFFTHHUaDSGqIgGVkhKsCsUbUyKtCgSWsx3fK1S0L8CCRdR9Ch+qNVwQNGGz7DbKHZXKNo0BhRbFAK+oNwQLsuAYheuo/Rve6DcZUCxBdegNyUo+sofuD0WcAF6I9vKrXQtCr/nLVSF0m3dnvKfPfwBC/UDlbZ/j2IDJ4MjilvUf5QoSWkBjXh9LK8T7AqSolVWxFICnmDxLBIlRSwsYA3Es0iUELGQgDUSzyJRUMSiAn7FySkYReHC0sobmDiFHEyZr5t4DH/m3D//5jpQ6Y7mAerNDrnw2awnZwpo2j1O3SbqDafw5qz2cF4Kc+rWXTyGNZiZhVMFNKnr94DkconUjL+bp6YwvXiA+nRZiiKhU3msKk84UOmBR4FAFkFxP/uPYw6sYYe5LOy+9bQLsw6MEMSbBxeUMRdmHRjavnyG5MDT9sHIgUpPAwoE8uCB5Mg+SKfwTQSKsm2/SVJY6RUDPxAoyqiYWAdGqJA4/oTh8Cc8wi5RGaVwpel7ePgaFzYv0vUVPCLiL044kJHyO25v3cWd23eT7z0gMd0p0/4JOEK3+wpXW9d8cCMvJmiyA50bLLVuvNq67robIxYwgqNwcflv/X90Oo/hKIIFFHCczqPHiZAOuvE8C3gGHsDisYg7Ow9c6vIkDvRq1Hn/2XOXujx+pHAWl7o83jkwjQNdHpE7L+w6VXd5vBewarwXsNlsYm/vCT7230OIf7Fq1qBnmwQ8pN2+gZcHL0jEf1ARwzV4iBBnEuGi6BIqRnIKS3jE9vY9fPn62QXxmMSBx/CAjY1zeEptnSPCWRIHHsFhuEjs7j50yXVpjm0RcZIoupy0dVVU14LE7MAYjlF116QER2s8s0QjqxKOdGUc6JoURaZn5d6hYrhr8rH/AW96r30Qj4n5i50X5lUJPVREHH+mKnvWF+EsvLPpbXpindfFhBWpxTk9SmGzXCtGoChdu8QtPZiwj0BRRjUju7yN18eENJ4PV991+yA7nBVcmE8n/SDrwFBM5iOR2UM35kDTMAYXzuYwu+FmYpuDcSHvUBIIpBlr+ywTQ/rGhR0EskzVZN5eOd7uECHAvCVj3Zr2RNhsmM9imw3NfwiprLe7yllPzp3WNPtk61yV90mD7rwX5G75N1WZ28Pabfkn8TbzXpQ7sW6qMjegEvVBQn/mXMKxJ5NILPvYE0s4eGeScPTTbyQWOPqp9OIi8wNacHw+uST2jBiJkiy0Oot/kKlQJ6GLw59hIfGWgtLHfvp6AON9uIDSR4D2lD/0lYsn+6pwCO1yoDf5SLklJKcrvyd/BkaUTuuqHemfcNOgD9Cm6KrVwKJxexxhBSx0CO2iqN83I+ClJHxDAoHlIGFuRIAV34xgpQJmMYLyKE8EvWdPQA/g2msambpyfDPXSu/e8AvQJ5cIyAKg2gAAAABJRU5ErkJggg==);}&&& .vjs-big-play-button:hover .vjs-icon-placeholder::before,.vjs-big-play-button:hover .vjs-icon-placeholder::after{opacity:0.4;}"],E.breakpoints.medium),O=C.a.div.withConfig({displayName:"responsive__ArticleBodyContainer",componentId:"f6lsbb-3"})(["margin:0 auto;display:flex;flex-wrap:wrap;@media (min-width:","px){margin:0;width:calc(100% - 240px);}"],E.breakpoints.wide),S=C.a.div.withConfig({displayName:"responsive__ArticleBody",componentId:"f6lsbb-4"})(["display:flex;flex-direction:column;flex-wrap:wrap;justify-content:space-between;padding:20px;& > div{margin:0;padding:0;}@media (min-width:","px){padding:24px;}@media (min-width:","px){padding:24px 0;}@media (min-width:1440px){flex-direction:row;}"],E.breakpoints.medium,E.breakpoints.wide),_=C.a.div.withConfig({displayName:"responsive__ContentFooterContainer",componentId:"f6lsbb-5"})(["padding:20px;margin:0 auto;width:100%;max-width:1144px;@media (min-width:","px){padding:24px;}"],E.breakpoints.medium),k=C.a.div.withConfig({displayName:"responsive__SaveAndShareContainer",componentId:"f6lsbb-6"})(["&&&{margin:8px 0 28px;& > div{padding:0;align-items:flex-start;}& button{color:#e4e4e4;background-color:transparent;border-color:#e4e4e4;}}"]),R=C.a.nav.withConfig({displayName:"responsive__TopicsContainer",componentId:"f6lsbb-7"})(["&&&{border-bottom:1px solid #e4e4e4;border-top:1px solid #e4e4e4;margin-top:20px;&&& div{border-color:#E4E4E !important;color:#e4e4e4 !important;}}"]),U=C.a.div.withConfig({displayName:"responsive__ArticleContentContainer",componentId:"f6lsbb-8"})(["max-width:853px;width:100%;"]),F=C.a.div.withConfig({displayName:"responsive__ArticleContent",componentId:"f6lsbb-9"})(['& *{font-family:"Times Digital W04 Regular";font-size:1.6rem;line-height:1.5;letter-spacing:0em;color:#aaa;width:100%;padding:0;margin-block:16px;}']),P=C.a.h1.withConfig({displayName:"responsive__ArticleHeadline",componentId:"f6lsbb-10"})(['font-family:"TimesModern-Bold";font-size:3.6rem;line-height:1.125;letter-spacing:0.03em;color:#fff;margin:0;']),B=C.a.span.withConfig({displayName:"responsive__ArticleTitle",componentId:"f6lsbb-11"})(['font-family:"TimesModern-Bold";font-size:2rem;line-height:1.125;letter-spacing:0em;color:#fff;']),q=C.a.div.withConfig({displayName:"responsive__ArticleMeta",componentId:"f6lsbb-12"})(['font-family:"Roboto";font-size:1.2rem;line-height:1.5;letter-spacing:0em;color:#aaa;margin-top:10px;@media (min-width:',"px){margin-top:8px;}"],E.breakpoints.wide),D=C.a.div.withConfig({displayName:"responsive__ArticleLabelContainer",componentId:"f6lsbb-13"})(["&&&{width:100%;@media (min-width:","px){margin-bottom:10px;}}"],E.breakpoints.wide),L=C.a.p.withConfig({displayName:"responsive__ArticleLabelText",componentId:"f6lsbb-14"})(['font-family:"Roboto";font-size:1.2rem;line-height:1.5;font-weight:700;letter-spacing:0.03em;margin:0;margin-bottom:10px;position:relative;text-transform:uppercase;color:',";z-index:2;"],e=>e.$color||"#FFF"),M=C.a.div.withConfig({displayName:"responsive__BreadcrumbContainer",componentId:"f6lsbb-15"})(["& *{color:#fff !important;justify-content:center;}"]),T=e=>{let t=e.topics;return t&&t.length>0?r.a.createElement(y.a,{state:y.a.showTopicTags},r.a.createElement(R,null,r.a.createElement(w.a,{style:v.topicsMetaContainer,topics:t}))):null};T.defaultProps={topics:null};var H=T;const K=b.a.shape({text:b.a.string}),Y={attributes:b.a.object.isRequired,name:b.a.string.isRequired},z={children:b.a.arrayOf(b.a.oneOfType([b.a.shape(Y),K])).isRequired};b.a.arrayOf(b.a.shape(z)),b.a.func,b.a.string,b.a.string;function V(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function Q(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}b.a.shape({}).isRequired,b.a.func.isRequired,b.a.shape(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?V(Object(n),!0).forEach((function(t){Q(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):V(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},void 0)),b.a.func,b.a.shape({}).isRequired,b.a.bool;var X=n(12),G=n.n(X);const J=C.a.div.withConfig({displayName:"article-up-next__ArticleUpNextContainer",componentId:"sc-1eumaps-0"})(["width:100%;background-color:#1d1d1b;@media (min-width:","px){background-color:unset;width:220px;order:0;}"],E.breakpoints.wide),W=C.a.div.withConfig({displayName:"article-up-next__UpNextContainer",componentId:"sc-1eumaps-1"})(["position:relative;padding:20px;@media (min-width:","px){padding:24px;}@media (min-width:","px){padding:0;}"],E.breakpoints.medium,E.breakpoints.wide),Z=C.a.div.withConfig({displayName:"article-up-next__UpNextScroll",componentId:"sc-1eumaps-2"})(["overflow-x:auto;position:relative;&::-webkit-scrollbar{display:none;}-ms-overflow-style:none;scrollbar-width:none;"]),$=C.a.div.withConfig({displayName:"article-up-next__UpNextTiles",componentId:"sc-1eumaps-3"})(["display:grid;grid-template-columns:repeat(4,minmax(156px,1fr));grid-column-gap:24px;@media (min-width:","px){grid-column-gap:0;grid-row-gap:24px;grid-template-columns:1fr;}"],E.breakpoints.wide),ee=C.a.div.withConfig({displayName:"article-up-next__UpNextTile",componentId:"sc-1eumaps-4"})(['display:flex;flex-direction:column;gap:8px;position:relative;& *{max-width:100%;}&:not(:last-child)::after{content:"";position:absolute;background-color:#333;z-index:1;height:100%;width:1px;right:-12px;}@media (min-width:',"px){&:not(:last-child)::after{height:1px;width:100%;left:0;bottom:-12px;}}&&& .vjs-big-play-button .vjs-icon-placeholder::before,.vjs-big-play-button .vjs-icon-placeholder::after{display:none !important;}"],E.breakpoints.wide),te=C.a.div.withConfig({displayName:"article-up-next__ImageContainer",componentId:"sc-1eumaps-5"})(["position:relative;margin-bottom:8px;"]),ne=C()(L).withConfig({displayName:"article-up-next__VideoDurationLabel",componentId:"sc-1eumaps-6"})(["bottom:0;left:10px;position:absolute;"]),ie=C.a.div.withConfig({displayName:"article-up-next__UpNextTileOverlay",componentId:"sc-1eumaps-7"})(["@media (max-width:1023px){position:absolute;top:0;right:0;height:100%;width:75px;z-index:1;}"]),re=C()(ie).withConfig({displayName:"article-up-next__UpNextTileOverlayRight",componentId:"sc-1eumaps-8"})(["background-image:linear-gradient(to left,#1d1d1b,transparent);display:",";"],e=>e.$displayStatus?"flex":"none"),ae=C()(ie).withConfig({displayName:"article-up-next__UpNextTileOverlayLeft",componentId:"sc-1eumaps-9"})(["display:",";background-image:linear-gradient(to right,#1d1d1b,transparent);left:0;"],e=>e.$displayStatus?"flex":"none");function oe(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var i,r,a=[],o=!0,l=!1;try{for(n=n.call(e);!(o=(i=n.next()).done)&&(a.push(i.value),!t||a.length!==t);o=!0);}catch(e){l=!0,r=e}finally{try{o||null==n.return||n.return()}finally{if(l)throw r}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return le(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return le(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 le(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}const se=e=>{let t=e.upNextArticles;const n=Object(i.useRef)(null),a=oe(Object(i.useState)({left:!1,right:!0}),2),o=a[0],s=a[1],p=e=>{const t=n.current.scrollLeft;s({left:t>5,right:!e||0===t})};return Object(i.useEffect)(()=>{n.current&&(n.current.addEventListener("scroll",()=>{Object(l.debounce)(p(),1e3)}),n.current.addEventListener("scrollend",()=>{Object(l.debounce)(p(!0),500)}))},[]),r.a.createElement(J,null,r.a.createElement(W,null,r.a.createElement(L,null,"Up Next"),t.length>2&&r.a.createElement(ae,{$displayStatus:o.left}),r.a.createElement(Z,{ref:n},r.a.createElement($,null,t.map(e=>r.a.createElement(ee,{key:e.id},r.a.createElement(f.a,{url:e.url},r.a.createElement(te,null,r.a.createElement(ne,null,e.duration),r.a.createElement(G.a,{aspectRatio:16/9,uri:e.posterImage})),r.a.createElement(B,null,e.title)))))),t.length>1&&r.a.createElement(re,{$displayStatus:o.right})))};class pe extends i.Component{constructor(e){super(e),this.renderContent=this.renderContent.bind(this),this.renderContentFooter=this.renderContentFooter.bind(this)}renderContent(e){let t=e.content,n=e.SaveAndShare;const i=this.props.article,a=i.headline,o=i.categoryPath,s=i.publicationName,c=i.publishedTime,m=i.shortHeadline,u=i.leadAsset,g=i.relatedArticles,b=i.upNext,h=o&&o.split("/")[1],w={comment:"#9b1f45","business-money":"#21709c",sport:"#007a3f","life-style":"#149fb5",culture:"#942364",travel:"#145683",world:"#005e61",uk:"#39556a"}[h],x=e=>(e/6e4).toFixed(2).replace(".",":"),y=b&&b.map(e=>({id:e.id,title:e.headline,url:e.url,posterImage:e.leadAsset.posterImage.crop169,duration:x(e.leadAsset.duration)})),v=u.posterImage&&u.posterImage.crop169;return r.a.createElement(N,null,r.a.createElement(O,null,r.a.createElement(I,null,r.a.createElement(d.a,{aspectRatio:"16:9",displayImage:v,getImageCrop:()=>v,leadAsset:i.leadAsset,isVideo:!0})),r.a.createElement(S,null,r.a.createElement(D,null,r.a.createElement(L,null,w&&r.a.createElement(r.a.Fragment,null,r.a.createElement(L,{as:"span",$color:w},h)," | "),x(u.duration))),r.a.createElement(U,null,r.a.createElement(P,null,Object(l.getHeadline)(a,m)),r.a.createElement(q,null,r.a.createElement(p.a,{date:c,publication:s})),r.a.createElement(F,null,t)),r.a.createElement(k,null,n),!!g&&r.a.createElement(U,null,r.a.createElement(L,{$color:"#AAA"},"Related Article"),r.a.createElement(f.a,{url:g[0].url},r.a.createElement(B,null,g[0].headline))))),!!y&&r.a.createElement(se,{upNextArticles:y}))}renderContentFooter(){const e=this.props.article,t=e.breadcrumbs,n=e.topics;return r.a.createElement(_,null,t&&t.length>0&&r.a.createElement(M,null,r.a.createElement(m.Breadcrumb,{data:t})),r.a.createElement(H,{topics:n}))}render(){const e=this.props,t=e.article,n=e.analyticsStream,i=e.error,a=e.isLoading,l=e.logoUrl,s=e.navigationMode,p=e.receiveChildList,c=e.commentingConfig,d=e.articleDataFromRender,m=e.paidContentClassName,u=e.isPreview,f=e.swgProductId,g=e.getFallbackThumbnailUrl169,b=e.zephrDivs;return i||a?null:r.a.createElement(j,null,r.a.createElement(o.a,{analyticsStream:n,data:t,Content:this.renderContent,ContentFooter:this.renderContentFooter,logoUrl:l,getFallbackThumbnailUrl169:g,receiveChildList:p,navigationMode:s,commentingConfig:c,articleDataFromRender:d,paidContentClassName:m,isPreview:u,swgProductId:f,zephrDivs:b}))}}pe.defaultProps={data:null,receiveChildList:()=>{}};t.default=pe}]);
|
|
1
|
+
module.exports=function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=13)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("@times-components/link/rnw")},function(e,t){e.exports=require("@times-components/user-state/rnw")},function(e,t){e.exports=require("@times-components/article-skeleton/rnw")},function(e,t){e.exports=require("@times-components/date-publication/rnw")},function(e,t){e.exports=require("@times-components/article-lead-asset/rnw")},function(e,t){e.exports=require("@times-components/ts-components/rnw")},function(e,t){e.exports=require("@times-components/article-topics/rnw")},function(e,t){e.exports=require("@times-components/image/rnw")},function(e,t,n){"use strict";n.r(t);var i=n(0),r=n.n(i),a=n(7),o=n.n(a),l=n(4),s=n(8),p=n.n(s),c=n(9),d=n.n(c),m=n(10),u=n(5),f=n.n(u),g=n(2),b=n.n(g),h=n(11),w=n.n(h),x=n(6),y=n.n(x);var v={topicsMetaContainer:{justifyContent:"flex-start"}},A=n(1),C=n.n(A),E=n(3);const j=C.a.div.withConfig({displayName:"responsive__ArticleMainVideoContainer",componentId:"f6lsbb-0"})(["background-color:#121212;"]),N=C.a.div.withConfig({displayName:"responsive__VideoArticleContainer",componentId:"f6lsbb-1"})(["width:100%;max-width:1144px;margin:0 auto;@media (min-width:","px){display:flex;flex-wrap:wrap;justify-content:space-between;padding:24px;}"],E.breakpoints.wide),I=C.a.div.withConfig({displayName:"responsive__ArticleLeadAssetContainer",componentId:"f6lsbb-2"})(['position:relative;width:100%;& *{max-width:100%;}&&& .vjs-poster::before{content:"";display:block;background-color:rgba(0,0,0,0.2);width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;}&&& .vjs-big-play-button .vjs-icon-placeholder::before,.vjs-big-play-button .vjs-icon-placeholder::after{bottom:24px;left:24px;width:48px !important;background-size:48px;background-position-y:32px;z-index:2;@media (min-width:',"px){background-position-y:18px;background-size:62px;width:62px !important;}background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASOSURBVHgB7Z2/ctNKFMY/M+mveYHL5tYXSGiBQaYEZjBvEOigCemgCq6gIqSBjjgFlBgKKLFmoIbwBN7wApgnWM7R7hpZ/iPJGGs32t/MiWJsJvaX7+zZ7D81UCFKqSZdIgpBcd5chXlaZF4+pJCp6zFFTHHUaDSGqIgGVkhKsCsUbUyKtCgSWsx3fK1S0L8CCRdR9Ch+qNVwQNGGz7DbKHZXKNo0BhRbFAK+oNwQLsuAYheuo/Rve6DcZUCxBdegNyUo+sofuD0WcAF6I9vKrXQtCr/nLVSF0m3dnvKfPfwBC/UDlbZ/j2IDJ4MjilvUf5QoSWkBjXh9LK8T7AqSolVWxFICnmDxLBIlRSwsYA3Es0iUELGQgDUSzyJRUMSiAn7FySkYReHC0sobmDiFHEyZr5t4DH/m3D//5jpQ6Y7mAerNDrnw2awnZwpo2j1O3SbqDafw5qz2cF4Kc+rWXTyGNZiZhVMFNKnr94DkconUjL+bp6YwvXiA+nRZiiKhU3msKk84UOmBR4FAFkFxP/uPYw6sYYe5LOy+9bQLsw6MEMSbBxeUMRdmHRjavnyG5MDT9sHIgUpPAwoE8uCB5Mg+SKfwTQSKsm2/SVJY6RUDPxAoyqiYWAdGqJA4/oTh8Cc8wi5RGaVwpel7ePgaFzYv0vUVPCLiL044kJHyO25v3cWd23eT7z0gMd0p0/4JOEK3+wpXW9d8cCMvJmiyA50bLLVuvNq67robIxYwgqNwcflv/X90Oo/hKIIFFHCczqPHiZAOuvE8C3gGHsDisYg7Ow9c6vIkDvRq1Hn/2XOXujx+pHAWl7o83jkwjQNdHpE7L+w6VXd5vBewarwXsNlsYm/vCT7230OIf7Fq1qBnmwQ8pN2+gZcHL0jEf1ARwzV4iBBnEuGi6BIqRnIKS3jE9vY9fPn62QXxmMSBx/CAjY1zeEptnSPCWRIHHsFhuEjs7j50yXVpjm0RcZIoupy0dVVU14LE7MAYjlF116QER2s8s0QjqxKOdGUc6JoURaZn5d6hYrhr8rH/AW96r30Qj4n5i50X5lUJPVREHH+mKnvWF+EsvLPpbXpindfFhBWpxTk9SmGzXCtGoChdu8QtPZiwj0BRRjUju7yN18eENJ4PV991+yA7nBVcmE8n/SDrwFBM5iOR2UM35kDTMAYXzuYwu+FmYpuDcSHvUBIIpBlr+ywTQ/rGhR0EskzVZN5eOd7uECHAvCVj3Zr2RNhsmM9imw3NfwiprLe7yllPzp3WNPtk61yV90mD7rwX5G75N1WZ28Pabfkn8TbzXpQ7sW6qMjegEvVBQn/mXMKxJ5NILPvYE0s4eGeScPTTbyQWOPqp9OIi8wNacHw+uST2jBiJkiy0Oot/kKlQJ6GLw59hIfGWgtLHfvp6AON9uIDSR4D2lD/0lYsn+6pwCO1yoDf5SLklJKcrvyd/BkaUTuuqHemfcNOgD9Cm6KrVwKJxexxhBSx0CO2iqN83I+ClJHxDAoHlIGFuRIAV34xgpQJmMYLyKE8EvWdPQA/g2msambpyfDPXSu/e8AvQJ5cIyAKg2gAAAABJRU5ErkJggg==);}&&& .vjs-big-play-button:hover .vjs-icon-placeholder::before,.vjs-big-play-button:hover .vjs-icon-placeholder::after{opacity:0.4;}"],E.breakpoints.medium),O=C.a.div.withConfig({displayName:"responsive__ArticleBodyContainer",componentId:"f6lsbb-3"})(["margin:0 auto;display:flex;flex-wrap:wrap;@media (min-width:","px){margin:0;width:calc(100% - 240px);}"],E.breakpoints.wide),S=C.a.div.withConfig({displayName:"responsive__ArticleBody",componentId:"f6lsbb-4"})(["display:flex;flex-direction:column;flex-wrap:wrap;justify-content:space-between;padding:20px;& > div{margin:0;padding:0;}@media (min-width:","px){padding:24px;}@media (min-width:","px){padding:24px 0;}@media (min-width:1440px){flex-direction:row;}"],E.breakpoints.medium,E.breakpoints.wide),_=C.a.div.withConfig({displayName:"responsive__ContentFooterContainer",componentId:"f6lsbb-5"})(["padding:20px;margin:0 auto;width:100%;max-width:1144px;@media (min-width:","px){padding:24px;}"],E.breakpoints.medium),k=C.a.div.withConfig({displayName:"responsive__SaveAndShareContainer",componentId:"f6lsbb-6"})(["&&&{margin:8px 0 28px;& > div{padding:0;align-items:flex-start;}& button{color:#e4e4e4;background-color:transparent;border-color:#e4e4e4;}}"]),R=C.a.nav.withConfig({displayName:"responsive__TopicsContainer",componentId:"f6lsbb-7"})(["&&&{border-bottom:1px solid #e4e4e4;border-top:1px solid #e4e4e4;margin-top:20px;&&& div{border-color:#E4E4E !important;color:#e4e4e4 !important;}}"]),U=C.a.div.withConfig({displayName:"responsive__ArticleContentContainer",componentId:"f6lsbb-8"})(["max-width:853px;width:100%;"]),F=C.a.div.withConfig({displayName:"responsive__ArticleContent",componentId:"f6lsbb-9"})(['& *{font-family:"Times Digital W04 Regular";font-size:1.6rem;line-height:1.5;letter-spacing:0em;color:#aaa;width:100%;padding:0;margin-block:16px;}']),P=C.a.h1.withConfig({displayName:"responsive__ArticleHeadline",componentId:"f6lsbb-10"})(['font-family:"TimesModern-Bold";font-size:3.6rem;font-weight:400;line-height:1.125;letter-spacing:0.03em;color:#fff;margin:0;']),B=C.a.span.withConfig({displayName:"responsive__ArticleTitle",componentId:"f6lsbb-11"})(['font-family:"TimesModern-Bold";font-size:2rem;line-height:1.125;letter-spacing:0em;color:#fff;']),q=C.a.div.withConfig({displayName:"responsive__ArticleMeta",componentId:"f6lsbb-12"})(['font-family:"Roboto";font-size:1.2rem;line-height:1.5;letter-spacing:0em;color:#aaa;margin-top:10px;@media (min-width:',"px){margin-top:8px;}"],E.breakpoints.wide),D=C.a.div.withConfig({displayName:"responsive__ArticleLabelContainer",componentId:"f6lsbb-13"})(["&&&{width:100%;@media (min-width:","px){margin-bottom:10px;}}"],E.breakpoints.wide),L=C.a.p.withConfig({displayName:"responsive__ArticleLabelText",componentId:"f6lsbb-14"})(['font-family:"Roboto";font-size:1.2rem;line-height:1.5;font-weight:700;letter-spacing:0.03em;margin:0;margin-bottom:10px;position:relative;text-transform:uppercase;color:',";z-index:2;"],e=>e.$color||"#FFF"),M=C.a.div.withConfig({displayName:"responsive__BreadcrumbContainer",componentId:"f6lsbb-15"})(["& *{color:#fff !important;justify-content:center;}"]),T=e=>{let t=e.topics;return t&&t.length>0?r.a.createElement(y.a,{state:y.a.showTopicTags},r.a.createElement(R,null,r.a.createElement(w.a,{style:v.topicsMetaContainer,topics:t}))):null};T.defaultProps={topics:null};var H=T;const K=b.a.shape({text:b.a.string}),Y={attributes:b.a.object.isRequired,name:b.a.string.isRequired},z={children:b.a.arrayOf(b.a.oneOfType([b.a.shape(Y),K])).isRequired};b.a.arrayOf(b.a.shape(z)),b.a.func,b.a.string,b.a.string;function V(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function Q(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}b.a.shape({}).isRequired,b.a.func.isRequired,b.a.shape(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?V(Object(n),!0).forEach((function(t){Q(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):V(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},void 0)),b.a.func,b.a.shape({}).isRequired,b.a.bool;var X=n(12),G=n.n(X);const J=C.a.div.withConfig({displayName:"article-up-next__ArticleUpNextContainer",componentId:"sc-1eumaps-0"})(["width:100%;background-color:#1d1d1b;@media (min-width:","px){background-color:unset;width:220px;order:0;}"],E.breakpoints.wide),W=C.a.div.withConfig({displayName:"article-up-next__UpNextContainer",componentId:"sc-1eumaps-1"})(["position:relative;padding:20px;@media (min-width:","px){padding:24px;}@media (min-width:","px){padding:0;}"],E.breakpoints.medium,E.breakpoints.wide),Z=C.a.div.withConfig({displayName:"article-up-next__UpNextScroll",componentId:"sc-1eumaps-2"})(["overflow-x:auto;position:relative;&::-webkit-scrollbar{display:none;}-ms-overflow-style:none;scrollbar-width:none;"]),$=C.a.div.withConfig({displayName:"article-up-next__UpNextTiles",componentId:"sc-1eumaps-3"})(["display:grid;grid-template-columns:repeat(4,minmax(156px,1fr));grid-column-gap:24px;@media (min-width:","px){grid-column-gap:0;grid-row-gap:24px;grid-template-columns:1fr;}"],E.breakpoints.wide),ee=C.a.div.withConfig({displayName:"article-up-next__UpNextTile",componentId:"sc-1eumaps-4"})(['display:flex;flex-direction:column;gap:8px;position:relative;& *{max-width:100%;}&:not(:last-child)::after{content:"";position:absolute;background-color:#333;z-index:1;height:100%;width:1px;right:-12px;}@media (min-width:',"px){&:not(:last-child)::after{height:1px;width:100%;left:0;bottom:-12px;}}&&& .vjs-big-play-button .vjs-icon-placeholder::before,.vjs-big-play-button .vjs-icon-placeholder::after{display:none !important;}"],E.breakpoints.wide),te=C.a.div.withConfig({displayName:"article-up-next__ImageContainer",componentId:"sc-1eumaps-5"})(["position:relative;margin-bottom:8px;"]),ne=C()(L).withConfig({displayName:"article-up-next__VideoDurationLabel",componentId:"sc-1eumaps-6"})(["bottom:0;left:10px;position:absolute;"]),ie=C.a.div.withConfig({displayName:"article-up-next__UpNextTileOverlay",componentId:"sc-1eumaps-7"})(["@media (max-width:1023px){position:absolute;top:0;right:0;height:100%;width:75px;z-index:1;}"]),re=C()(ie).withConfig({displayName:"article-up-next__UpNextTileOverlayRight",componentId:"sc-1eumaps-8"})(["background-image:linear-gradient(to left,#1d1d1b,transparent);display:",";"],e=>e.$displayStatus?"flex":"none"),ae=C()(ie).withConfig({displayName:"article-up-next__UpNextTileOverlayLeft",componentId:"sc-1eumaps-9"})(["display:",";background-image:linear-gradient(to right,#1d1d1b,transparent);left:0;"],e=>e.$displayStatus?"flex":"none");function oe(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var i,r,a=[],o=!0,l=!1;try{for(n=n.call(e);!(o=(i=n.next()).done)&&(a.push(i.value),!t||a.length!==t);o=!0);}catch(e){l=!0,r=e}finally{try{o||null==n.return||n.return()}finally{if(l)throw r}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return le(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return le(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 le(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}const se=e=>{let t=e.upNextArticles;const n=Object(i.useRef)(null),a=oe(Object(i.useState)({left:!1,right:!0}),2),o=a[0],s=a[1],p=e=>{const t=n.current.scrollLeft;s({left:t>5,right:!e||0===t})};return Object(i.useEffect)(()=>{n.current&&(n.current.addEventListener("scroll",()=>{Object(l.debounce)(p(),1e3)}),n.current.addEventListener("scrollend",()=>{Object(l.debounce)(p(!0),500)}))},[]),r.a.createElement(J,null,r.a.createElement(W,null,r.a.createElement(L,null,"Up Next"),t.length>2&&r.a.createElement(ae,{$displayStatus:o.left}),r.a.createElement(Z,{ref:n},r.a.createElement($,null,t.map(e=>r.a.createElement(ee,{key:e.id},r.a.createElement(f.a,{url:e.url},r.a.createElement(te,null,r.a.createElement(ne,null,e.duration),r.a.createElement(G.a,{aspectRatio:16/9,uri:e.posterImage})),r.a.createElement(B,null,e.title)))))),t.length>1&&r.a.createElement(re,{$displayStatus:o.right})))};class pe extends i.Component{constructor(e){super(e),this.renderContent=this.renderContent.bind(this),this.renderContentFooter=this.renderContentFooter.bind(this)}renderContent(e){let t=e.content,n=e.SaveAndShare;const i=this.props.article,a=i.headline,o=i.categoryPath,s=i.categoryConnection,c=i.publicationName,m=i.publishedTime,u=i.shortHeadline,g=i.leadAsset,b=i.relatedArticles,h=i.upNext,w=o&&o.split("/")[1],x={comment:"#9b1f45","business-money":"#21709c",sport:"#007a3f","life-style":"#149fb5",culture:"#942364",travel:"#145683",world:"#005e61",uk:"#39556a"}[w],y=e=>(e/6e4).toFixed(2).replace(".",":"),v=h&&h.map(e=>({id:e.id,title:e.headline,url:e.url,posterImage:e.leadAsset.posterImage.crop169.url,duration:y(e.leadAsset.duration)})),A=g.posterImage&&g.posterImage.crop169;return r.a.createElement(N,null,r.a.createElement(O,null,r.a.createElement(I,null,r.a.createElement(d.a,{aspectRatio:"16:9",displayImage:A,getImageCrop:()=>A,leadAsset:i.leadAsset,isVideo:!0})),r.a.createElement(S,null,r.a.createElement(D,null,r.a.createElement(L,null,x&&r.a.createElement(r.a.Fragment,null,r.a.createElement(L,{as:"span",$color:x},(e=>{const t=s.nodes.find(t=>t.slug===e);return t?t.title:""})(w))," | "),y(g.duration))),r.a.createElement(U,null,r.a.createElement(P,null,Object(l.getHeadline)(a,u)),r.a.createElement(q,null,r.a.createElement(p.a,{date:m,publication:c})),r.a.createElement(F,null,t)),r.a.createElement(k,null,n),!!b&&r.a.createElement(U,null,r.a.createElement(L,{$color:"#AAA"},"Related Article"),r.a.createElement(f.a,{url:b[0].url},r.a.createElement(B,null,b[0].headline))))),!!v&&r.a.createElement(se,{upNextArticles:v}))}renderContentFooter(){const e=this.props.article,t=e.breadcrumbs,n=e.topics;return r.a.createElement(_,null,t&&t.length>0&&r.a.createElement(M,null,r.a.createElement(m.Breadcrumb,{data:t})),r.a.createElement(H,{topics:n}))}render(){const e=this.props,t=e.article,n=e.analyticsStream,i=e.error,a=e.isLoading,l=e.logoUrl,s=e.navigationMode,p=e.receiveChildList,c=e.commentingConfig,d=e.articleDataFromRender,m=e.paidContentClassName,u=e.isPreview,f=e.swgProductId,g=e.getFallbackThumbnailUrl169,b=e.zephrDivs;return i||a?null:r.a.createElement(j,null,r.a.createElement(o.a,{analyticsStream:n,data:t,Content:this.renderContent,ContentFooter:this.renderContentFooter,logoUrl:l,getFallbackThumbnailUrl169:g,receiveChildList:p,navigationMode:s,commentingConfig:c,articleDataFromRender:d,paidContentClassName:m,isPreview:u,swgProductId:f,zephrDivs:b}))}}pe.defaultProps={data:null,receiveChildList:()=>{}};t.default=pe}]);
|