@twreporter/react-article-components 2.1.2-rc.1 → 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.
Files changed (64) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/lib/components/article-page.js +42 -107
  3. package/lib/components/aside/desktop-aside.js +25 -65
  4. package/lib/components/aside/desktop-tools.js +11 -57
  5. package/lib/components/aside/metadata.js +22 -89
  6. package/lib/components/aside/mobile-tool-bar.js +79 -175
  7. package/lib/components/aside/utils/theme.js +5 -11
  8. package/lib/components/body/annotation.js +15 -73
  9. package/lib/components/body/audio/audio-contexts.js +4 -16
  10. package/lib/components/body/audio/audio-provider.js +13 -48
  11. package/lib/components/body/audio/control-button.js +4 -28
  12. package/lib/components/body/audio/index.js +10 -56
  13. package/lib/components/body/audio/seek-bar.js +6 -23
  14. package/lib/components/body/audio/time.js +0 -6
  15. package/lib/components/body/blockquote.js +11 -52
  16. package/lib/components/body/brief.js +10 -55
  17. package/lib/components/body/centered-quote.js +10 -52
  18. package/lib/components/body/embedded-code.js +22 -101
  19. package/lib/components/body/headings.js +6 -23
  20. package/lib/components/body/image-diff.js +13 -66
  21. package/lib/components/body/image.js +11 -46
  22. package/lib/components/body/index.js +55 -108
  23. package/lib/components/body/infobox.js +32 -65
  24. package/lib/components/body/list.js +8 -29
  25. package/lib/components/body/multimedia.js +10 -29
  26. package/lib/components/body/paragraph.js +5 -23
  27. package/lib/components/body/slider/index.js +28 -96
  28. package/lib/components/body/slideshow/index.js +36 -107
  29. package/lib/components/body/tracking-section.js +141 -0
  30. package/lib/components/body/youtube.js +8 -41
  31. package/lib/components/donation-box.js +10 -44
  32. package/lib/components/img-with-placeholder/index.js +34 -106
  33. package/lib/components/leading/extend.js +6 -25
  34. package/lib/components/leading/fullscreen.js +17 -63
  35. package/lib/components/leading/index.js +2 -10
  36. package/lib/components/leading/normal.js +19 -64
  37. package/lib/components/leading/pink.js +20 -59
  38. package/lib/components/leading/small.js +6 -25
  39. package/lib/components/license.js +9 -40
  40. package/lib/components/link.js +8 -37
  41. package/lib/components/related/card.js +20 -73
  42. package/lib/components/related/index.js +25 -71
  43. package/lib/components/related/list.js +16 -70
  44. package/lib/components/related/mockup.js +10 -12
  45. package/lib/components/separation-curve.js +0 -15
  46. package/lib/components/table-of-contents/index.js +17 -46
  47. package/lib/components/table-of-contents/styled.js +10 -38
  48. package/lib/constants/anchor.js +4 -8
  49. package/lib/constants/css.js +2 -15
  50. package/lib/constants/element-alignment.js +2 -3
  51. package/lib/constants/prop-types/article-page.js +2 -7
  52. package/lib/constants/prop-types/aside.js +2 -8
  53. package/lib/constants/prop-types/body.js +4 -9
  54. package/lib/constants/prop-types/img-with-placeholder.js +2 -7
  55. package/lib/constants/prop-types/leading.js +8 -13
  56. package/lib/constants/prop-types/related.js +2 -7
  57. package/lib/constants/theme.js +2 -3
  58. package/lib/constants/typography.js +2 -5
  59. package/lib/contexts/dynamic-components-context.js +2 -8
  60. package/lib/managers/layout-manager.js +13 -28
  61. package/lib/managers/theme-manager.js +13 -32
  62. package/lib/managers/ui-manager.js +14 -26
  63. package/lib/utils/image.js +5 -14
  64. 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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
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
- annotation = _this$props.annotation,
143
- pureAnnotationText = _this$props.pureAnnotationText,
144
- text = _this$props.text;
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
- className = _this$props2.className,
192
- data = _this$props2.data;
193
-
145
+ className = _this$props2.className,
146
+ data = _this$props2.data;
194
147
  var html = _.get(data, ['content', 0]);
195
-
196
- if (!html) return null; // annotation data will be in the comment with prefix __ANNOTATION__=
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.TimeContext = TimeContext;
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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
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
- current = _this$state.current,
231
- duration = _this$state.duration,
232
- isMute = _this$state.isMute,
233
- isPlaying = _this$state.isPlaying;
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(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
-
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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
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
- pause = _ref.pause;
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, {