@twreporter/react-article-components 2.2.0-rc.0 → 2.2.0-rc.1
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 +8 -0
- package/lib/components/article-page.js +39 -108
- package/lib/components/aside/desktop-aside.js +25 -65
- package/lib/components/aside/desktop-tools.js +11 -57
- package/lib/components/aside/metadata.js +22 -89
- package/lib/components/aside/mobile-tool-bar.js +79 -175
- package/lib/components/aside/utils/theme.js +5 -11
- package/lib/components/body/annotation.js +15 -73
- package/lib/components/body/audio/audio-contexts.js +4 -16
- package/lib/components/body/audio/audio-provider.js +13 -48
- package/lib/components/body/audio/control-button.js +4 -28
- package/lib/components/body/audio/index.js +10 -56
- package/lib/components/body/audio/seek-bar.js +6 -23
- package/lib/components/body/audio/time.js +0 -6
- package/lib/components/body/blockquote.js +11 -52
- package/lib/components/body/brief.js +10 -55
- package/lib/components/body/centered-quote.js +10 -52
- package/lib/components/body/embedded-code.js +22 -101
- package/lib/components/body/headings.js +6 -23
- package/lib/components/body/image-diff.js +13 -66
- package/lib/components/body/image.js +11 -46
- package/lib/components/body/index.js +21 -118
- package/lib/components/body/infobox.js +13 -58
- package/lib/components/body/list.js +8 -29
- package/lib/components/body/multimedia.js +10 -29
- package/lib/components/body/paragraph.js +5 -23
- package/lib/components/body/slider/index.js +28 -96
- package/lib/components/body/slideshow/index.js +36 -107
- package/lib/components/body/tracking-section.js +7 -46
- package/lib/components/body/youtube.js +8 -41
- package/lib/components/donation-box.js +10 -44
- package/lib/components/img-with-placeholder/index.js +34 -106
- package/lib/components/leading/extend.js +6 -25
- package/lib/components/leading/fullscreen.js +17 -63
- package/lib/components/leading/index.js +2 -10
- package/lib/components/leading/normal.js +19 -64
- package/lib/components/leading/pink.js +20 -59
- package/lib/components/leading/small.js +6 -25
- package/lib/components/license.js +9 -40
- package/lib/components/link.js +8 -37
- package/lib/components/related/card.js +20 -73
- package/lib/components/related/index.js +25 -71
- package/lib/components/related/list.js +16 -70
- package/lib/components/related/mockup.js +10 -12
- package/lib/components/separation-curve.js +0 -15
- package/lib/components/table-of-contents/index.js +17 -46
- package/lib/components/table-of-contents/styled.js +10 -38
- package/lib/constants/anchor.js +4 -8
- package/lib/constants/css.js +2 -15
- package/lib/constants/element-alignment.js +2 -3
- package/lib/constants/prop-types/article-page.js +2 -7
- package/lib/constants/prop-types/aside.js +2 -8
- package/lib/constants/prop-types/body.js +4 -9
- package/lib/constants/prop-types/img-with-placeholder.js +2 -7
- package/lib/constants/prop-types/leading.js +8 -13
- package/lib/constants/prop-types/related.js +2 -7
- package/lib/constants/theme.js +2 -3
- package/lib/constants/typography.js +2 -5
- package/lib/contexts/dynamic-components-context.js +2 -8
- package/lib/managers/layout-manager.js +13 -28
- package/lib/managers/theme-manager.js +13 -32
- package/lib/managers/ui-manager.js +14 -26
- package/lib/utils/image.js +5 -14
- package/package.json +6 -6
|
@@ -1,75 +1,48 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
7
|
var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
|
|
11
|
-
|
|
12
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
-
|
|
16
10
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
17
|
-
|
|
18
11
|
var _css = _interopRequireDefault(require("../../constants/css"));
|
|
19
|
-
|
|
20
12
|
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
21
|
-
|
|
22
13
|
var _typography = _interopRequireDefault(require("../../constants/typography"));
|
|
23
|
-
|
|
24
14
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
25
|
-
|
|
26
15
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
27
|
-
|
|
28
|
-
function
|
|
29
|
-
|
|
30
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
31
|
-
|
|
16
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
17
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
32
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
33
|
-
|
|
19
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
34
20
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
35
|
-
|
|
36
21
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
37
|
-
|
|
38
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
39
|
-
|
|
22
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
40
23
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
41
|
-
|
|
42
24
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
43
|
-
|
|
44
25
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
45
|
-
|
|
46
26
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
47
|
-
|
|
48
27
|
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
49
|
-
|
|
50
28
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
51
|
-
|
|
52
29
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
53
|
-
|
|
54
30
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
55
|
-
|
|
56
|
-
function
|
|
57
|
-
|
|
31
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
32
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
33
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // lodash
|
|
58
34
|
var _ = {
|
|
59
35
|
get: _get["default"]
|
|
60
36
|
};
|
|
61
37
|
var slideDownAndFadeIn = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{opacity:0;transform:translateY(-1.2em);}to{opacity:1;transform:translateY(0);}"]);
|
|
62
|
-
|
|
63
38
|
var AnnotationContainer = /*#__PURE__*/_styledComponents["default"].abbr.withConfig({
|
|
64
39
|
displayName: "annotation__AnnotationContainer",
|
|
65
40
|
componentId: "sc-5e8oaw-0"
|
|
66
41
|
})(["&[title]{margin:0;text-decoration:none;border-bottom:0;}"]);
|
|
67
|
-
|
|
68
42
|
var AnnotatedText = /*#__PURE__*/_styledComponents["default"].span.withConfig({
|
|
69
43
|
displayName: "annotation__AnnotatedText",
|
|
70
44
|
componentId: "sc-5e8oaw-1"
|
|
71
45
|
})(["cursor:pointer;"]);
|
|
72
|
-
|
|
73
46
|
var Indicator = /*#__PURE__*/_styledComponents["default"].span.withConfig({
|
|
74
47
|
displayName: "annotation__Indicator",
|
|
75
48
|
componentId: "sc-5e8oaw-2"
|
|
@@ -78,7 +51,6 @@ var Indicator = /*#__PURE__*/_styledComponents["default"].span.withConfig({
|
|
|
78
51
|
}, function (props) {
|
|
79
52
|
return props.$isExpanded ? '-45deg' : '45deg';
|
|
80
53
|
});
|
|
81
|
-
|
|
82
54
|
var AnnotationContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
83
55
|
displayName: "annotation__AnnotationContent",
|
|
84
56
|
componentId: "sc-5e8oaw-3"
|
|
@@ -87,38 +59,29 @@ var AnnotationContent = /*#__PURE__*/_styledComponents["default"].div.withConfig
|
|
|
87
59
|
}, _color.colorGrayscale.white, function (props) {
|
|
88
60
|
return props.theme.fontSizeOffset + 16;
|
|
89
61
|
}, _color.colorGrayscale.gray700, _typography["default"].font.weight.normal, slideDownAndFadeIn);
|
|
90
|
-
|
|
91
62
|
var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
92
63
|
displayName: "annotation__Container",
|
|
93
64
|
componentId: "sc-5e8oaw-4"
|
|
94
65
|
})(["", " ", " ", " &:first-child{margin-top:0;}&:last-child{margin-bottom:0;}"], function (props) {
|
|
95
66
|
return getContainerStyles(props.theme.name);
|
|
96
67
|
}, _css["default"].paragraphText, _css["default"].linkChildren);
|
|
97
|
-
|
|
98
68
|
function getContainerStyles(themeName) {
|
|
99
69
|
switch (themeName) {
|
|
100
70
|
case _theme["default"].article.v2.pink:
|
|
101
71
|
return (0, _styledComponents.css)(["", "{color:", ";}", "{border-color:", ";&::before,&::after{background-color:", ";}}", "{border-color:", ";}"], AnnotatedText, _color.COLOR_PINK_ARTICLE.blue, Indicator, _color.COLOR_PINK_ARTICLE.blue, _color.COLOR_PINK_ARTICLE.blue, AnnotationContent, _color.COLOR_PINK_ARTICLE.pink);
|
|
102
|
-
|
|
103
72
|
case _theme["default"].article.v2.photo:
|
|
104
73
|
return (0, _styledComponents.css)(["", "{color:", ";}", "{border-color:", ";&::before,&::after{background-color:", ";}}", "{border-color:", ";}"], AnnotatedText, _color.colorSupportive.main, Indicator, _color.colorSupportive.main, _color.colorSupportive.main, AnnotationContent, _color.colorSupportive.main);
|
|
105
|
-
|
|
106
74
|
case _theme["default"].article.v2["default"]:
|
|
107
75
|
default:
|
|
108
76
|
return (0, _styledComponents.css)(["", "{color:", ";}", "{border-color:", ";&::before,&::after{background-color:", ";}}", "{border-color:", ";}"], AnnotatedText, _color.colorSupportive.heavy, Indicator, _color.colorSupportive.main, _color.colorSupportive.main, AnnotationContent, _color.colorSupportive.main);
|
|
109
77
|
}
|
|
110
78
|
}
|
|
111
|
-
|
|
112
79
|
var Annotation = /*#__PURE__*/function (_PureComponent) {
|
|
113
80
|
_inherits(Annotation, _PureComponent);
|
|
114
|
-
|
|
115
81
|
var _super = _createSuper(Annotation);
|
|
116
|
-
|
|
117
82
|
function Annotation(props) {
|
|
118
83
|
var _this;
|
|
119
|
-
|
|
120
84
|
_classCallCheck(this, Annotation);
|
|
121
|
-
|
|
122
85
|
_this = _super.call(this, props);
|
|
123
86
|
_this.state = {
|
|
124
87
|
isExpanded: false
|
|
@@ -126,7 +89,6 @@ var Annotation = /*#__PURE__*/function (_PureComponent) {
|
|
|
126
89
|
_this.toggleExpend = _this._toggleExpend.bind(_assertThisInitialized(_this));
|
|
127
90
|
return _this;
|
|
128
91
|
}
|
|
129
|
-
|
|
130
92
|
_createClass(Annotation, [{
|
|
131
93
|
key: "_toggleExpend",
|
|
132
94
|
value: function _toggleExpend(e) {
|
|
@@ -139,9 +101,9 @@ var Annotation = /*#__PURE__*/function (_PureComponent) {
|
|
|
139
101
|
key: "render",
|
|
140
102
|
value: function render() {
|
|
141
103
|
var _this$props = this.props,
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
104
|
+
annotation = _this$props.annotation,
|
|
105
|
+
pureAnnotationText = _this$props.pureAnnotationText,
|
|
106
|
+
text = _this$props.text;
|
|
145
107
|
var isExpanded = this.state.isExpanded;
|
|
146
108
|
return /*#__PURE__*/_react["default"].createElement(AnnotationContainer, {
|
|
147
109
|
title: pureAnnotationText
|
|
@@ -157,56 +119,43 @@ var Annotation = /*#__PURE__*/function (_PureComponent) {
|
|
|
157
119
|
}));
|
|
158
120
|
}
|
|
159
121
|
}]);
|
|
160
|
-
|
|
161
122
|
return Annotation;
|
|
162
123
|
}(_react.PureComponent);
|
|
163
|
-
|
|
164
124
|
_defineProperty(Annotation, "propTypes", {
|
|
165
125
|
annotation: _propTypes["default"].string,
|
|
166
126
|
pureAnnotationText: _propTypes["default"].string,
|
|
167
127
|
text: _propTypes["default"].string
|
|
168
128
|
});
|
|
169
|
-
|
|
170
129
|
_defineProperty(Annotation, "defaultProps", {
|
|
171
130
|
annotation: '',
|
|
172
131
|
pureAnnotationText: '',
|
|
173
132
|
text: ''
|
|
174
133
|
});
|
|
175
|
-
|
|
176
134
|
var AnnotationParagraph = /*#__PURE__*/function (_PureComponent2) {
|
|
177
135
|
_inherits(AnnotationParagraph, _PureComponent2);
|
|
178
|
-
|
|
179
136
|
var _super2 = _createSuper(AnnotationParagraph);
|
|
180
|
-
|
|
181
137
|
function AnnotationParagraph() {
|
|
182
138
|
_classCallCheck(this, AnnotationParagraph);
|
|
183
|
-
|
|
184
139
|
return _super2.apply(this, arguments);
|
|
185
140
|
}
|
|
186
|
-
|
|
187
141
|
_createClass(AnnotationParagraph, [{
|
|
188
142
|
key: "render",
|
|
189
143
|
value: function render() {
|
|
190
144
|
var _this$props2 = this.props,
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
145
|
+
className = _this$props2.className,
|
|
146
|
+
data = _this$props2.data;
|
|
194
147
|
var html = _.get(data, ['content', 0]);
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
148
|
+
if (!html) return null;
|
|
149
|
+
// annotation data will be in the comment with prefix __ANNOTATION__=
|
|
198
150
|
var re = /<!--__ANNOTATION__=(.+?)-->/;
|
|
199
151
|
var sections = [];
|
|
200
152
|
var result;
|
|
201
|
-
|
|
202
153
|
do {
|
|
203
154
|
result = re.exec(html);
|
|
204
|
-
|
|
205
155
|
if (result) {
|
|
206
156
|
var fullStringMatched = result[0];
|
|
207
157
|
var annotationJsonString = result[1];
|
|
208
158
|
var textBeforeAnnotation = html.substring(0, result.index);
|
|
209
|
-
|
|
210
159
|
try {
|
|
211
160
|
var annotationObj = JSON.parse(annotationJsonString);
|
|
212
161
|
var currentIndex = sections.length;
|
|
@@ -224,7 +173,6 @@ var AnnotationParagraph = /*#__PURE__*/function (_PureComponent2) {
|
|
|
224
173
|
}
|
|
225
174
|
}
|
|
226
175
|
} while (result);
|
|
227
|
-
|
|
228
176
|
if (html) {
|
|
229
177
|
sections.push( /*#__PURE__*/_react["default"].createElement("span", {
|
|
230
178
|
key: sections.length,
|
|
@@ -233,24 +181,18 @@ var AnnotationParagraph = /*#__PURE__*/function (_PureComponent2) {
|
|
|
233
181
|
}
|
|
234
182
|
}));
|
|
235
183
|
}
|
|
236
|
-
|
|
237
184
|
return /*#__PURE__*/_react["default"].createElement(Container, {
|
|
238
185
|
className: className
|
|
239
186
|
}, sections);
|
|
240
187
|
}
|
|
241
188
|
}]);
|
|
242
|
-
|
|
243
189
|
return AnnotationParagraph;
|
|
244
190
|
}(_react.PureComponent);
|
|
245
|
-
|
|
246
191
|
_defineProperty(AnnotationParagraph, "propTypes", {
|
|
247
192
|
className: _propTypes["default"].string,
|
|
248
193
|
data: _body["default"].elementData
|
|
249
194
|
});
|
|
250
|
-
|
|
251
195
|
_defineProperty(AnnotationParagraph, "defaultProps", {
|
|
252
196
|
className: ''
|
|
253
197
|
});
|
|
254
|
-
|
|
255
|
-
var _default = AnnotationParagraph;
|
|
256
|
-
exports["default"] = _default;
|
|
198
|
+
var _default = exports["default"] = AnnotationParagraph;
|
|
@@ -4,38 +4,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.TimeContext = exports.StatusContext = exports.ControlsContext = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
-
|
|
12
9
|
var createEmptyFunction = function createEmptyFunction(funcName) {
|
|
13
10
|
return function () {
|
|
14
11
|
console.warn('An empty method that should be overwritten in `ControlContext.Provider` is invoked. The mehtod name is', funcName);
|
|
15
12
|
};
|
|
16
13
|
};
|
|
17
|
-
|
|
18
|
-
var TimeContext = /*#__PURE__*/_react["default"].createContext({
|
|
14
|
+
var TimeContext = exports.TimeContext = /*#__PURE__*/_react["default"].createContext({
|
|
19
15
|
current: 0,
|
|
20
16
|
duration: 10 // any number > 0 is okay
|
|
21
|
-
|
|
22
17
|
});
|
|
23
18
|
|
|
24
|
-
exports.
|
|
25
|
-
|
|
26
|
-
var ControlsContext = /*#__PURE__*/_react["default"].createContext({
|
|
19
|
+
var ControlsContext = exports.ControlsContext = /*#__PURE__*/_react["default"].createContext({
|
|
27
20
|
play: createEmptyFunction('play'),
|
|
28
21
|
stop: createEmptyFunction('stop'),
|
|
29
22
|
pause: createEmptyFunction('pause'),
|
|
30
23
|
toggleMute: createEmptyFunction('toggleMute'),
|
|
31
24
|
setCurrent: createEmptyFunction('setCurrent')
|
|
32
25
|
});
|
|
33
|
-
|
|
34
|
-
exports.ControlsContext = ControlsContext;
|
|
35
|
-
|
|
36
|
-
var StatusContext = /*#__PURE__*/_react["default"].createContext({
|
|
26
|
+
var StatusContext = exports.StatusContext = /*#__PURE__*/_react["default"].createContext({
|
|
37
27
|
isPlaying: false,
|
|
38
28
|
isMute: false
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
exports.StatusContext = StatusContext;
|
|
29
|
+
});
|
|
@@ -1,62 +1,38 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
7
|
var _audioContexts = require("./audio-contexts");
|
|
11
|
-
|
|
12
8
|
var _howler = require("howler");
|
|
13
|
-
|
|
14
9
|
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
|
|
15
|
-
|
|
16
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
|
-
|
|
18
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
|
-
function
|
|
21
|
-
|
|
22
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
|
-
|
|
12
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
24
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
25
|
-
|
|
15
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
26
16
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
27
|
-
|
|
28
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
29
|
-
|
|
17
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
30
18
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
31
|
-
|
|
32
19
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
33
|
-
|
|
34
20
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
35
|
-
|
|
36
21
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
37
|
-
|
|
38
22
|
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
39
|
-
|
|
40
23
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
41
|
-
|
|
42
24
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
43
|
-
|
|
44
25
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
45
|
-
|
|
46
|
-
function
|
|
47
|
-
|
|
26
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
27
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
28
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
48
29
|
var updateInterval = 200; // ms
|
|
49
|
-
|
|
50
|
-
var AudioProvider = /*#__PURE__*/function (_PureComponent) {
|
|
30
|
+
var AudioProvider = exports["default"] = /*#__PURE__*/function (_PureComponent) {
|
|
51
31
|
_inherits(AudioProvider, _PureComponent);
|
|
52
|
-
|
|
53
32
|
var _super = _createSuper(AudioProvider);
|
|
54
|
-
|
|
55
33
|
function AudioProvider(props) {
|
|
56
34
|
var _this;
|
|
57
|
-
|
|
58
35
|
_classCallCheck(this, AudioProvider);
|
|
59
|
-
|
|
60
36
|
_this = _super.call(this, props);
|
|
61
37
|
_this.state = {
|
|
62
38
|
// The `current`, `duration`, `isPlaying`, and `isMute` in state are just the snapshot of status in `this._sound`.
|
|
@@ -78,7 +54,6 @@ var AudioProvider = /*#__PURE__*/function (_PureComponent) {
|
|
|
78
54
|
If all parameters are equal to its previous cached ones, it will return the same result.
|
|
79
55
|
`memoize-one` only remembers the latest arguments and result.
|
|
80
56
|
*/
|
|
81
|
-
|
|
82
57
|
_this._createStatusProps = (0, _memoizeOne["default"])(function (isMute, isPlaying) {
|
|
83
58
|
return {
|
|
84
59
|
isMute: isMute,
|
|
@@ -99,19 +74,17 @@ var AudioProvider = /*#__PURE__*/function (_PureComponent) {
|
|
|
99
74
|
_this._sound = null;
|
|
100
75
|
return _this;
|
|
101
76
|
}
|
|
102
|
-
|
|
103
77
|
_createClass(AudioProvider, [{
|
|
104
78
|
key: "_setCurrent",
|
|
105
79
|
value: function _setCurrent(to) {
|
|
106
80
|
var sound = this._sound;
|
|
107
|
-
|
|
108
81
|
if (sound && typeof sound.seek === 'function') {
|
|
109
82
|
if (to >= 0 && to !== Infinity) {
|
|
110
83
|
// If param `to` is given and valid, set current seek to it and update state with it.
|
|
111
84
|
this.setState({
|
|
112
85
|
current: to // Not using `current = sound.seek(to).seek()` because `sound.seek(sound.duration()) < sound.duration()` may be true
|
|
113
|
-
|
|
114
86
|
});
|
|
87
|
+
|
|
115
88
|
sound.seek(to);
|
|
116
89
|
} else {
|
|
117
90
|
// If `to` is undefined, just get the position of playback and update state with it.
|
|
@@ -164,14 +137,12 @@ var AudioProvider = /*#__PURE__*/function (_PureComponent) {
|
|
|
164
137
|
this.setState({
|
|
165
138
|
isMute: nextMute
|
|
166
139
|
});
|
|
167
|
-
|
|
168
140
|
this._mute(nextMute);
|
|
169
141
|
}
|
|
170
142
|
}, {
|
|
171
143
|
key: "componentDidMount",
|
|
172
144
|
value: function componentDidMount() {
|
|
173
145
|
var _this2 = this;
|
|
174
|
-
|
|
175
146
|
this._sound = new _howler.Howl({
|
|
176
147
|
src: this.props.src,
|
|
177
148
|
autoplay: false,
|
|
@@ -188,7 +159,6 @@ var AudioProvider = /*#__PURE__*/function (_PureComponent) {
|
|
|
188
159
|
current: _this2._sound.duration(),
|
|
189
160
|
isPlaying: false
|
|
190
161
|
});
|
|
191
|
-
|
|
192
162
|
clearInterval(_this2._update);
|
|
193
163
|
},
|
|
194
164
|
onplay: function onplay() {
|
|
@@ -206,7 +176,6 @@ var AudioProvider = /*#__PURE__*/function (_PureComponent) {
|
|
|
206
176
|
_this2.setState({
|
|
207
177
|
isPlaying: false
|
|
208
178
|
});
|
|
209
|
-
|
|
210
179
|
clearInterval(_this2._update);
|
|
211
180
|
},
|
|
212
181
|
onplayerror: function onplayerror(soundId, errMessage) {
|
|
@@ -227,10 +196,10 @@ var AudioProvider = /*#__PURE__*/function (_PureComponent) {
|
|
|
227
196
|
key: "render",
|
|
228
197
|
value: function render() {
|
|
229
198
|
var _this$state = this.state,
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
199
|
+
current = _this$state.current,
|
|
200
|
+
duration = _this$state.duration,
|
|
201
|
+
isMute = _this$state.isMute,
|
|
202
|
+
isPlaying = _this$state.isPlaying;
|
|
234
203
|
return /*#__PURE__*/_react["default"].createElement(_audioContexts.StatusContext.Provider, {
|
|
235
204
|
value: this._createStatusProps(isMute, isPlaying)
|
|
236
205
|
}, /*#__PURE__*/_react["default"].createElement(_audioContexts.TimeContext.Provider, {
|
|
@@ -243,12 +212,8 @@ var AudioProvider = /*#__PURE__*/function (_PureComponent) {
|
|
|
243
212
|
}, this.props.children)));
|
|
244
213
|
}
|
|
245
214
|
}]);
|
|
246
|
-
|
|
247
215
|
return AudioProvider;
|
|
248
216
|
}(_react.PureComponent);
|
|
249
|
-
|
|
250
|
-
exports["default"] = AudioProvider;
|
|
251
|
-
|
|
252
217
|
_defineProperty(AudioProvider, "propTypes", {
|
|
253
218
|
src: _propTypes["default"].string.isRequired,
|
|
254
219
|
children: _propTypes["default"].node
|
|
@@ -1,34 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(
|
|
4
|
-
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = ControlButton;
|
|
9
|
-
|
|
10
8
|
var _audioContexts = require("./audio-contexts");
|
|
11
|
-
|
|
12
9
|
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
13
|
-
|
|
14
10
|
var _react = _interopRequireDefault(require("react"));
|
|
15
|
-
|
|
16
11
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
17
|
-
|
|
18
12
|
var _theme = _interopRequireDefault(require("../../../constants/theme"));
|
|
19
|
-
|
|
20
13
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
21
|
-
|
|
22
14
|
var _templateObject, _templateObject2;
|
|
23
|
-
|
|
24
|
-
function
|
|
25
|
-
|
|
26
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
|
-
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
28
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
29
|
-
|
|
30
18
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
31
|
-
|
|
32
19
|
var PauseIcon = function PauseIcon(props) {
|
|
33
20
|
return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("g", {
|
|
34
21
|
fill: "none",
|
|
@@ -38,7 +25,6 @@ var PauseIcon = function PauseIcon(props) {
|
|
|
38
25
|
d: "M27 23.917v19.166M40 23.917v19.166"
|
|
39
26
|
})));
|
|
40
27
|
};
|
|
41
|
-
|
|
42
28
|
PauseIcon.defaultProps = {
|
|
43
29
|
xmlns: "http://www.w3.org/2000/svg",
|
|
44
30
|
viewBox: "0 0 67 67",
|
|
@@ -46,14 +32,12 @@ PauseIcon.defaultProps = {
|
|
|
46
32
|
clipRule: "evenodd",
|
|
47
33
|
strokeLinejoin: "round"
|
|
48
34
|
};
|
|
49
|
-
|
|
50
35
|
var PlayIcon = function PlayIcon(props) {
|
|
51
36
|
return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
|
|
52
37
|
d: "M44.267 34.331L28.766 44.71a1 1 0 0 1-1.556-.831V23.121a1 1 0 0 1 1.556-.831l15.501 10.379a1 1 0 0 1 0 1.662z",
|
|
53
38
|
fill: "#fb9cec"
|
|
54
39
|
}));
|
|
55
40
|
};
|
|
56
|
-
|
|
57
41
|
PlayIcon.defaultProps = {
|
|
58
42
|
xmlns: "http://www.w3.org/2000/svg",
|
|
59
43
|
viewBox: "0 0 67 67",
|
|
@@ -62,35 +46,28 @@ PlayIcon.defaultProps = {
|
|
|
62
46
|
strokeLinejoin: "round",
|
|
63
47
|
strokeMiterlimit: "1.414"
|
|
64
48
|
};
|
|
65
|
-
|
|
66
49
|
function getIconColor(themeName) {
|
|
67
50
|
switch (themeName) {
|
|
68
51
|
case _theme["default"].article.v2.photo:
|
|
69
52
|
return _color.colorSupportive.main;
|
|
70
|
-
|
|
71
53
|
case _theme["default"].article.v2.pink:
|
|
72
54
|
return _color.COLOR_PINK_ARTICLE.darkPink;
|
|
73
|
-
|
|
74
55
|
case _theme["default"].article.v2["default"]:
|
|
75
56
|
default:
|
|
76
57
|
return _color.colorSupportive.heavy;
|
|
77
58
|
}
|
|
78
59
|
}
|
|
79
|
-
|
|
80
60
|
function getIconWrapperStyles(themeName) {
|
|
81
61
|
switch (themeName) {
|
|
82
62
|
case _theme["default"].article.v2.photo:
|
|
83
63
|
return (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], _color.COLOR_PINK_ARTICLE.darkBlue, _color.colorGrayscale.gray400);
|
|
84
|
-
|
|
85
64
|
case _theme["default"].article.v2.pink:
|
|
86
65
|
return (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], _color.colorGrayscale.gray100, _color.colorGrayscale.gray300);
|
|
87
|
-
|
|
88
66
|
case _theme["default"].article.v2["default"]:
|
|
89
67
|
default:
|
|
90
68
|
return (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], _color.colorGrayscale.gray100, _color.colorGrayscale.gray300);
|
|
91
69
|
}
|
|
92
70
|
}
|
|
93
|
-
|
|
94
71
|
var IconWrapper = /*#__PURE__*/_styledComponents["default"].button.withConfig({
|
|
95
72
|
displayName: "control-button__IconWrapper",
|
|
96
73
|
componentId: "rz1tur-0"
|
|
@@ -101,11 +78,10 @@ var IconWrapper = /*#__PURE__*/_styledComponents["default"].button.withConfig({
|
|
|
101
78
|
}, function (props) {
|
|
102
79
|
return props.$isPlaying ? 'none' : getIconColor(props.theme.name);
|
|
103
80
|
});
|
|
104
|
-
|
|
105
81
|
function ControlButton() {
|
|
106
82
|
return /*#__PURE__*/_react["default"].createElement(_audioContexts.ControlsContext.Consumer, null, function (_ref) {
|
|
107
83
|
var play = _ref.play,
|
|
108
|
-
|
|
84
|
+
pause = _ref.pause;
|
|
109
85
|
return /*#__PURE__*/_react["default"].createElement(_audioContexts.StatusContext.Consumer, null, function (_ref2) {
|
|
110
86
|
var isPlaying = _ref2.isPlaying;
|
|
111
87
|
return /*#__PURE__*/_react["default"].createElement(IconWrapper, {
|