@audius/harmony 0.2.0 → 0.3.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.
Files changed (109) hide show
  1. package/dist/_virtual/_tslib.js +1 -11
  2. package/dist/_virtual/_tslib.js.map +1 -1
  3. package/dist/assets/icons/Messages.svg.js +78 -0
  4. package/dist/assets/icons/Messages.svg.js.map +1 -0
  5. package/dist/components/artwork/Artwork.d.ts.map +1 -1
  6. package/dist/components/artwork/Artwork.js +9 -2
  7. package/dist/components/artwork/Artwork.js.map +1 -1
  8. package/dist/components/icon-text/IconText.d.ts.map +1 -0
  9. package/dist/components/{comments/IconText → icon-text}/IconText.js +5 -5
  10. package/dist/components/icon-text/IconText.js.map +1 -0
  11. package/dist/components/icon-text/IconText.stories.d.ts.map +1 -0
  12. package/dist/components/icon-text/index.d.ts.map +1 -0
  13. package/dist/components/{comments/IconText → icon-text}/types.d.ts +2 -2
  14. package/dist/components/icon-text/types.d.ts.map +1 -0
  15. package/dist/components/index.d.ts +2 -6
  16. package/dist/components/index.d.ts.map +1 -1
  17. package/dist/components/scrubber/Scrubber.d.ts +1 -1
  18. package/dist/components/scrubber/Scrubber.d.ts.map +1 -1
  19. package/dist/components/scrubber/Scrubber.js +2 -2
  20. package/dist/components/scrubber/Scrubber.js.map +1 -1
  21. package/dist/components/scrubber/Slider.d.ts +1 -1
  22. package/dist/components/scrubber/Slider.d.ts.map +1 -1
  23. package/dist/components/scrubber/Slider.js +30 -39
  24. package/dist/components/scrubber/Slider.js.map +1 -1
  25. package/dist/components/scrubber/hooks.d.ts +6 -4
  26. package/dist/components/scrubber/hooks.d.ts.map +1 -1
  27. package/dist/components/scrubber/hooks.js +52 -54
  28. package/dist/components/scrubber/hooks.js.map +1 -1
  29. package/dist/components/scrubber/types.d.ts +8 -0
  30. package/dist/components/scrubber/types.d.ts.map +1 -1
  31. package/dist/components/scrubber/types.js.map +1 -1
  32. package/dist/components/send-icon/SendIcon.d.ts.map +1 -0
  33. package/dist/components/{comments/SendIcon → send-icon}/SendIcon.js +9 -9
  34. package/dist/components/send-icon/SendIcon.js.map +1 -0
  35. package/dist/components/send-icon/SendIcon.stories.d.ts.map +1 -0
  36. package/dist/components/send-icon/index.d.ts.map +1 -0
  37. package/dist/components/send-icon/types.d.ts.map +1 -0
  38. package/dist/components/text/Text.js +2 -2
  39. package/dist/components/text/Text.js.map +1 -1
  40. package/dist/icons/utilityIcons.d.ts +1 -0
  41. package/dist/icons/utilityIcons.d.ts.map +1 -1
  42. package/dist/icons/utilityIcons.js +3 -1
  43. package/dist/icons/utilityIcons.js.map +1 -1
  44. package/dist/index.js +3 -9
  45. package/dist/index.js.map +1 -1
  46. package/package.json +1 -1
  47. package/dist/components/comments/ArtistPick/ArtistPick.d.ts +0 -3
  48. package/dist/components/comments/ArtistPick/ArtistPick.d.ts.map +0 -1
  49. package/dist/components/comments/ArtistPick/ArtistPick.js +0 -20
  50. package/dist/components/comments/ArtistPick/ArtistPick.js.map +0 -1
  51. package/dist/components/comments/ArtistPick/ArtistPick.stories.d.ts +0 -7
  52. package/dist/components/comments/ArtistPick/ArtistPick.stories.d.ts.map +0 -1
  53. package/dist/components/comments/ArtistPick/index.d.ts +0 -3
  54. package/dist/components/comments/ArtistPick/index.d.ts.map +0 -1
  55. package/dist/components/comments/ArtistPick/types.d.ts +0 -5
  56. package/dist/components/comments/ArtistPick/types.d.ts.map +0 -1
  57. package/dist/components/comments/CommentText/CommentText.d.ts +0 -3
  58. package/dist/components/comments/CommentText/CommentText.d.ts.map +0 -1
  59. package/dist/components/comments/CommentText/CommentText.js +0 -36
  60. package/dist/components/comments/CommentText/CommentText.js.map +0 -1
  61. package/dist/components/comments/CommentText/CommentText.stories.d.ts +0 -10
  62. package/dist/components/comments/CommentText/CommentText.stories.d.ts.map +0 -1
  63. package/dist/components/comments/CommentText/index.d.ts +0 -3
  64. package/dist/components/comments/CommentText/index.d.ts.map +0 -1
  65. package/dist/components/comments/CommentText/types.d.ts +0 -5
  66. package/dist/components/comments/CommentText/types.d.ts.map +0 -1
  67. package/dist/components/comments/IconText/IconText.d.ts.map +0 -1
  68. package/dist/components/comments/IconText/IconText.js.map +0 -1
  69. package/dist/components/comments/IconText/IconText.stories.d.ts.map +0 -1
  70. package/dist/components/comments/IconText/index.d.ts.map +0 -1
  71. package/dist/components/comments/IconText/types.d.ts.map +0 -1
  72. package/dist/components/comments/Identifier/Identifier.d.ts +0 -3
  73. package/dist/components/comments/Identifier/Identifier.d.ts.map +0 -1
  74. package/dist/components/comments/Identifier/Identifier.js +0 -30
  75. package/dist/components/comments/Identifier/Identifier.js.map +0 -1
  76. package/dist/components/comments/Identifier/Identifier.stories.d.ts +0 -7
  77. package/dist/components/comments/Identifier/Identifier.stories.d.ts.map +0 -1
  78. package/dist/components/comments/Identifier/index.d.ts +0 -3
  79. package/dist/components/comments/Identifier/index.d.ts.map +0 -1
  80. package/dist/components/comments/Identifier/types.d.ts +0 -5
  81. package/dist/components/comments/Identifier/types.d.ts.map +0 -1
  82. package/dist/components/comments/SendIcon/SendIcon.d.ts.map +0 -1
  83. package/dist/components/comments/SendIcon/SendIcon.js.map +0 -1
  84. package/dist/components/comments/SendIcon/SendIcon.stories.d.ts.map +0 -1
  85. package/dist/components/comments/SendIcon/index.d.ts.map +0 -1
  86. package/dist/components/comments/SendIcon/types.d.ts.map +0 -1
  87. package/dist/components/comments/Timestamp/Timestamp.d.ts +0 -3
  88. package/dist/components/comments/Timestamp/Timestamp.d.ts.map +0 -1
  89. package/dist/components/comments/Timestamp/Timestamp.js +0 -13
  90. package/dist/components/comments/Timestamp/Timestamp.js.map +0 -1
  91. package/dist/components/comments/Timestamp/Timestamp.stories.d.ts +0 -7
  92. package/dist/components/comments/Timestamp/Timestamp.stories.d.ts.map +0 -1
  93. package/dist/components/comments/Timestamp/index.d.ts +0 -4
  94. package/dist/components/comments/Timestamp/index.d.ts.map +0 -1
  95. package/dist/components/comments/Timestamp/types.d.ts +0 -11
  96. package/dist/components/comments/Timestamp/types.d.ts.map +0 -1
  97. package/dist/components/comments/Timestamp/types.js +0 -10
  98. package/dist/components/comments/Timestamp/types.js.map +0 -1
  99. package/dist/components/comments/Timestamp/util.d.ts +0 -2
  100. package/dist/components/comments/Timestamp/util.d.ts.map +0 -1
  101. package/dist/components/comments/Timestamp/util.js +0 -26
  102. package/dist/components/comments/Timestamp/util.js.map +0 -1
  103. /package/dist/components/{comments/IconText → icon-text}/IconText.d.ts +0 -0
  104. /package/dist/components/{comments/IconText → icon-text}/IconText.stories.d.ts +0 -0
  105. /package/dist/components/{comments/IconText → icon-text}/index.d.ts +0 -0
  106. /package/dist/components/{comments/SendIcon → send-icon}/SendIcon.d.ts +0 -0
  107. /package/dist/components/{comments/SendIcon → send-icon}/SendIcon.stories.d.ts +0 -0
  108. /package/dist/components/{comments/SendIcon → send-icon}/index.d.ts +0 -0
  109. /package/dist/components/{comments/SendIcon → send-icon}/types.d.ts +0 -0
@@ -76,16 +76,6 @@ function __generator(thisArg, body) {
76
76
  }
77
77
  }
78
78
 
79
- function __spreadArray(to, from, pack) {
80
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
81
- if (ar || !(i in from)) {
82
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
83
- ar[i] = from[i];
84
- }
85
- }
86
- return to.concat(ar || Array.prototype.slice.call(from));
87
- }
88
-
89
79
  function __makeTemplateObject(cooked, raw) {
90
80
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
91
81
  return cooked;
@@ -95,5 +85,5 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
95
85
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
96
86
  };
97
87
 
98
- export { __assign, __awaiter, __generator, __makeTemplateObject, __rest, __spreadArray };
88
+ export { __assign, __awaiter, __generator, __makeTemplateObject, __rest };
99
89
  //# sourceMappingURL=_tslib.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"_tslib.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"_tslib.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,78 @@
1
+ import * as React from 'react';
2
+ import { forwardRef } from 'react';
3
+ import { useTheme } from '@emotion/react';
4
+ import { css, cx } from '@emotion/css';
5
+
6
+ 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); }
7
+ var _excluded = ["title", "titleId", "desc", "descId"],
8
+ _excluded2 = ["color", "size", "sizeH", "sizeW", "height", "width", "shadow"];
9
+ 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); }
10
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
11
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
12
+ 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; }
13
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
14
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
15
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
16
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
17
+ var SvgMessages = /*#__PURE__*/forwardRef(function (_ref, ref) {
18
+ var _theme$iconSizes, _theme$iconSizes2, _ref2, _other$fill, _theme$color;
19
+ var title = _ref.title,
20
+ titleId = _ref.titleId,
21
+ desc = _ref.desc,
22
+ descId = _ref.descId,
23
+ props = _objectWithoutProperties(_ref, _excluded);
24
+ var theme = useTheme();
25
+ var _props = props,
26
+ color = _props.color,
27
+ size = _props.size,
28
+ sizeH = _props.sizeH,
29
+ sizeW = _props.sizeW,
30
+ heightProp = _props.height,
31
+ widthProp = _props.width,
32
+ shadow = _props.shadow,
33
+ other = _objectWithoutProperties(_props, _excluded2);
34
+ var height = heightProp !== null && heightProp !== void 0 ? heightProp : (_theme$iconSizes = theme.iconSizes) === null || _theme$iconSizes === void 0 ? void 0 : _theme$iconSizes[sizeH !== null && sizeH !== void 0 ? sizeH : size];
35
+ if (height) {
36
+ other.height = height;
37
+ }
38
+ var width = widthProp !== null && widthProp !== void 0 ? widthProp : (_theme$iconSizes2 = theme.iconSizes) === null || _theme$iconSizes2 === void 0 ? void 0 : _theme$iconSizes2[sizeW !== null && sizeW !== void 0 ? sizeW : size];
39
+ if (width) {
40
+ other.width = width;
41
+ }
42
+ var fillColor = (_ref2 = (_other$fill = other.fill) !== null && _other$fill !== void 0 ? _other$fill : (_theme$color = theme.color) === null || _theme$color === void 0 ? void 0 : _theme$color.icon[color]) !== null && _ref2 !== void 0 ? _ref2 : 'red';
43
+ var classNameProp = other.className;
44
+ var className = css({
45
+ filter: shadow ? theme.shadows.drop : undefined,
46
+ minHeight: height,
47
+ minWidth: width
48
+ });
49
+ other.className = cx(className, classNameProp);
50
+ other.role = title ? 'img' : undefined;
51
+ other['aria-hidden'] = title ? undefined : true;
52
+ props = _objectSpread(_objectSpread({}, other), {}, {
53
+ ref: ref,
54
+ fillColor: fillColor
55
+ });
56
+ return /*#__PURE__*/React.createElement("svg", _extends({
57
+ xmlns: "http://www.w3.org/2000/svg",
58
+ width: 24,
59
+ height: 24,
60
+ fill: "none",
61
+ viewBox: "0 0 24 24",
62
+ "aria-labelledby": titleId,
63
+ "aria-describedby": descId
64
+ }, props), desc ? /*#__PURE__*/React.createElement("desc", {
65
+ id: descId
66
+ }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
67
+ id: titleId
68
+ }, title) : null, /*#__PURE__*/React.createElement("path", {
69
+ fill: props.fillColor,
70
+ d: "M1 5.27C1 4.018 2.084 3 3.418 3h10.879c1.333 0 2.417 1.018 2.417 2.27v6.81c0 1.252-1.084 2.444-2.417 2.444h-5.64l-3.064 1.982a.645.645 0 0 1-.634.053.562.562 0 0 1-.333-.507v-1.528H3.418C2.084 14.524 1 13.332 1 12.08V5.27Z"
71
+ }), /*#__PURE__*/React.createElement("path", {
72
+ fill: props.fillColor,
73
+ d: "M7.286 16.27a.46.46 0 0 1 .46-.46H13.2c1.68 0 2.52 0 3.162-.328a3 3 0 0 0 1.311-1.31C18 13.53 18 12.69 18 11.008V8.19a1 1 0 0 1 1-1h1.582C21.916 7.19 23 8.208 23 9.46v6.81c0 1.252-1.084 2.27-2.418 2.27h-1.208v1.703a.562.562 0 0 1-.333.507.645.645 0 0 1-.634-.053l-3.064-2.157h-5.64c-1.333 0-2.417-1.018-2.417-2.27Z"
74
+ }));
75
+ });
76
+
77
+ export { SvgMessages as default };
78
+ //# sourceMappingURL=Messages.svg.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Messages.svg.js","sources":["../../../src/assets/icons/Messages.svg"],"sourcesContent":["<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 5.26997C1 4.01794 2.08414 3 3.41758 3H14.2967C15.6302 3 16.7143 4.01794 16.7143 5.26997V12.0799C16.7143 13.3319 15.6302 14.5238 14.2967 14.5238H8.65694L5.59341 16.5063C5.40831 16.634 5.16278 16.6553 4.95879 16.5595C4.75481 16.4638 4.62637 16.2687 4.62637 16.0523V14.5238H3.41758C2.08414 14.5238 1 13.3319 1 12.0799V5.26997Z\" fill=\"#FF0000\"/>\n<path d=\"M7.28571 16.2704C7.28571 16.0158 7.49203 15.8095 7.74655 15.8095H13.2C14.8802 15.8095 15.7202 15.8095 16.362 15.4825C16.9265 15.1949 17.3854 14.736 17.673 14.1715C18 13.5298 18 12.6897 18 11.0095V8.19047C18 7.63818 18.4477 7.19047 19 7.19047H20.5824C21.9159 7.19047 23 8.20841 23 9.46044V16.2704C23 17.5224 21.9159 18.5403 20.5824 18.5403H19.3736V20.2428C19.3736 20.4592 19.2452 20.6542 19.0412 20.75C18.8372 20.8458 18.5917 20.8245 18.4066 20.6968L15.3431 18.5403H9.70329C8.36984 18.5403 7.28571 17.5224 7.28571 16.2704Z\" fill=\"#FF0000\"/>\n</svg>\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Artwork.d.ts","sourceRoot":"","sources":["../../../src/components/artwork/Artwork.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAA;AAI3D,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAA;AAI7C,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GACpC,QAAQ,CAAA;AAEV;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,UAAW,YAAY,qDAwF1C,CAAA"}
1
+ {"version":3,"file":"Artwork.d.ts","sourceRoot":"","sources":["../../../src/components/artwork/Artwork.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAA;AAInE,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAA;AAI7C,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GACpC,QAAQ,CAAA;AAEV;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,UAAW,YAAY,qDAgG1C,CAAA"}
@@ -1,6 +1,6 @@
1
1
  import { __rest, __assign } from '../../_virtual/_tslib.js';
2
2
  import { jsx, jsxs } from '@emotion/react/jsx-runtime';
3
- import { useState, useEffect } from 'react';
3
+ import { useRef, useState, useEffect } from 'react';
4
4
  import { useTheme } from '@emotion/react';
5
5
  import { Box } from '../layout/Box/Box.js';
6
6
  import { Flex } from '../layout/Flex/Flex.js';
@@ -15,15 +15,22 @@ import { Skeleton } from '../skeleton/Skeleton.js';
15
15
  */
16
16
  var Artwork = function (props) {
17
17
  var isLoadingProp = props.isLoading, src = props.src, _a = props.borderRadius, borderRadius = _a === void 0 ? 's' : _a, borderWidth = props.borderWidth, shadow = props.shadow, children = props.children, testId = props["data-testid"], other = __rest(props, ["isLoading", "src", "borderRadius", "borderWidth", "shadow", "children", 'data-testid']);
18
+ var imgRef = useRef(null);
18
19
  var _b = useState(true), isLoadingState = _b[0], setIsLoadingState = _b[1];
19
20
  var isLoading = isLoadingProp !== null && isLoadingProp !== void 0 ? isLoadingProp : isLoadingState;
20
21
  var _c = useTheme(), color = _c.color, motion = _c.motion;
21
22
  useEffect(function () {
22
23
  setIsLoadingState(true);
23
24
  }, [src]);
25
+ useEffect(function () {
26
+ var _a;
27
+ if ((_a = imgRef.current) === null || _a === void 0 ? void 0 : _a.complete) {
28
+ setIsLoadingState(false);
29
+ }
30
+ }, [src]);
24
31
  return (jsx(Box, __assign({}, other, { children: jsxs(Box, __assign({ borderRadius: borderRadius, border: 'default', shadow: shadow, css: { borderWidth: borderWidth } }, { children: [isLoading ? (jsx(Skeleton, { borderRadius: borderRadius, h: '100%', w: '100%', css: { zIndex: 2, position: 'absolute' } })) : null, jsx(Box, { w: '100%', pt: '100%', borderRadius: borderRadius, css: {
25
32
  backgroundColor: !src && children ? color.neutral.n400 : color.background.surface2
26
- } }), src ? (jsx(Box, { as: 'img', borderRadius: borderRadius, h: '100%', w: '100%', onLoad: function () {
33
+ } }), src ? (jsx(Box, { as: 'img', ref: imgRef, borderRadius: borderRadius, h: '100%', w: '100%', onLoad: function () {
27
34
  setIsLoadingState(false);
28
35
  },
29
36
  // @ts-ignore
@@ -1 +1 @@
1
- {"version":3,"file":"Artwork.js","sources":["../../../src/components/artwork/Artwork.tsx"],"sourcesContent":["import { ComponentProps, useEffect, useState } from 'react'\n\nimport { useTheme } from '@emotion/react'\n\nimport { Box, BoxProps } from '../layout/Box'\nimport { Flex } from '../layout/Flex'\nimport { Skeleton } from '../skeleton'\n\nexport type ArtworkProps = {\n isLoading?: boolean\n borderWidth?: number\n 'data-testid'?: string\n noLoading?: boolean\n} & Pick<ComponentProps<'img'>, 'src'> &\n BoxProps\n\n/**\n * The artwork component displays the track cover art and appears in several\n * locations such as track tiles, track and playlist, pages,\n * and the sidebar. It can have interactive elements on hover.\n * This component enhances the listening experience and helps users quickly\n * identify their favorite tracks.\n */\nexport const Artwork = (props: ArtworkProps) => {\n const {\n isLoading: isLoadingProp,\n src,\n borderRadius = 's',\n borderWidth,\n shadow,\n children,\n 'data-testid': testId,\n ...other\n } = props\n const [isLoadingState, setIsLoadingState] = useState(true)\n const isLoading = isLoadingProp ?? isLoadingState\n const { color, motion } = useTheme()\n\n useEffect(() => {\n setIsLoadingState(true)\n }, [src])\n\n return (\n <Box {...other}>\n <Box\n borderRadius={borderRadius}\n border='default'\n shadow={shadow}\n css={{ borderWidth }}\n >\n {isLoading ? (\n <Skeleton\n borderRadius={borderRadius}\n h='100%'\n w='100%'\n css={{ zIndex: 2, position: 'absolute' }}\n />\n ) : null}\n <Box\n w='100%'\n pt='100%'\n borderRadius={borderRadius}\n css={{\n backgroundColor:\n !src && children ? color.neutral.n400 : color.background.surface2\n }}\n />\n {src ? (\n <Box\n as='img'\n borderRadius={borderRadius}\n h='100%'\n w='100%'\n onLoad={() => {\n setIsLoadingState(false)\n }}\n // @ts-ignore\n src={src}\n data-testid={testId}\n css={{\n position: 'absolute',\n top: 0,\n left: 0,\n objectFit: 'cover',\n opacity: isLoading ? 0 : 1,\n transition: `opacity ${motion.calm}`\n }}\n />\n ) : null}\n {children ? (\n <Flex\n alignItems='center'\n justifyContent='center'\n h='100%'\n w='100%'\n borderRadius={borderRadius}\n css={{\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: src ? color.static.black : undefined,\n opacity: src ? 0.4 : undefined,\n zIndex: 1\n }}\n >\n {children}\n </Flex>\n ) : null}\n </Box>\n </Box>\n )\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"Artwork.js","sources":["../../../src/components/artwork/Artwork.tsx"],"sourcesContent":["import { ComponentProps, useEffect, useRef, useState } from 'react'\n\nimport { useTheme } from '@emotion/react'\n\nimport { Box, BoxProps } from '../layout/Box'\nimport { Flex } from '../layout/Flex'\nimport { Skeleton } from '../skeleton'\n\nexport type ArtworkProps = {\n isLoading?: boolean\n borderWidth?: number\n 'data-testid'?: string\n noLoading?: boolean\n} & Pick<ComponentProps<'img'>, 'src'> &\n BoxProps\n\n/**\n * The artwork component displays the track cover art and appears in several\n * locations such as track tiles, track and playlist, pages,\n * and the sidebar. It can have interactive elements on hover.\n * This component enhances the listening experience and helps users quickly\n * identify their favorite tracks.\n */\nexport const Artwork = (props: ArtworkProps) => {\n const {\n isLoading: isLoadingProp,\n src,\n borderRadius = 's',\n borderWidth,\n shadow,\n children,\n 'data-testid': testId,\n ...other\n } = props\n const imgRef = useRef<HTMLImageElement | null>(null)\n const [isLoadingState, setIsLoadingState] = useState(true)\n const isLoading = isLoadingProp ?? isLoadingState\n const { color, motion } = useTheme()\n\n useEffect(() => {\n setIsLoadingState(true)\n }, [src])\n\n useEffect(() => {\n if (imgRef.current?.complete) {\n setIsLoadingState(false)\n }\n }, [src])\n\n return (\n <Box {...other}>\n <Box\n borderRadius={borderRadius}\n border='default'\n shadow={shadow}\n css={{ borderWidth }}\n >\n {isLoading ? (\n <Skeleton\n borderRadius={borderRadius}\n h='100%'\n w='100%'\n css={{ zIndex: 2, position: 'absolute' }}\n />\n ) : null}\n <Box\n w='100%'\n pt='100%'\n borderRadius={borderRadius}\n css={{\n backgroundColor:\n !src && children ? color.neutral.n400 : color.background.surface2\n }}\n />\n {src ? (\n <Box\n as='img'\n ref={imgRef}\n borderRadius={borderRadius}\n h='100%'\n w='100%'\n onLoad={() => {\n setIsLoadingState(false)\n }}\n // @ts-ignore\n src={src}\n data-testid={testId}\n css={{\n position: 'absolute',\n top: 0,\n left: 0,\n objectFit: 'cover',\n opacity: isLoading ? 0 : 1,\n transition: `opacity ${motion.calm}`\n }}\n />\n ) : null}\n {children ? (\n <Flex\n alignItems='center'\n justifyContent='center'\n h='100%'\n w='100%'\n borderRadius={borderRadius}\n css={{\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: src ? color.static.black : undefined,\n opacity: src ? 0.4 : undefined,\n zIndex: 1\n }}\n >\n {children}\n </Flex>\n ) : null}\n </Box>\n </Box>\n )\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;AAgBA;;;;;;AAMG;AACI,IAAM,OAAO,GAAG,UAAC,KAAmB,EAAA;IAEvC,IAAW,aAAa,GAQtB,KAAK,CAAA,SARiB,EACxB,GAAG,GAOD,KAAK,CAPJ,GAAA,EACH,KAME,KAAK,CAAA,YANW,EAAlB,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,GAAG,GAAA,EAAA,EAClB,WAAW,GAKT,KAAK,YALI,EACX,MAAM,GAIJ,KAAK,CAAA,MAJD,EACN,QAAQ,GAGN,KAAK,CAHC,QAAA,EACO,MAAM,GAEnB,KAAK,eAFc,EAClB,KAAK,UACN,KAAK,EATH,CASL,WAAA,EAAA,KAAA,EAAA,cAAA,EAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,aAAA,CAAA,CADS,CACD;AACT,IAAA,IAAM,MAAM,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAA;IAC9C,IAAA,EAAA,GAAsC,QAAQ,CAAC,IAAI,CAAC,EAAnD,cAAc,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAkB,CAAA;IAC1D,IAAM,SAAS,GAAG,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,KAAA,CAAA,GAAA,aAAa,GAAI,cAAc,CAAA;IAC3C,IAAA,EAAA,GAAoB,QAAQ,EAAE,EAA5B,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAe,CAAA;AAEpC,IAAA,SAAS,CAAC,YAAA;QACR,iBAAiB,CAAC,IAAI,CAAC,CAAA;AACzB,KAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;AAET,IAAA,SAAS,CAAC,YAAA;;AACR,QAAA,IAAI,MAAA,MAAM,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,QAAQ,EAAE;YAC5B,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACzB,SAAA;AACH,KAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;AAET,IAAA,QACEA,GAAC,CAAA,GAAG,EAAK,QAAA,CAAA,EAAA,EAAA,KAAK,cACZC,IAAC,CAAA,GAAG,EACF,QAAA,CAAA,EAAA,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAC,SAAS,EAChB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,EAAE,WAAW,EAAA,WAAA,EAAE,iBAEnB,SAAS,IACRD,GAAC,CAAA,QAAQ,IACP,YAAY,EAAE,YAAY,EAC1B,CAAC,EAAC,MAAM,EACR,CAAC,EAAC,MAAM,EACR,GAAG,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,GACxC,IACA,IAAI,EACRA,GAAA,CAAC,GAAG,EACF,EAAA,CAAC,EAAC,MAAM,EACR,EAAE,EAAC,MAAM,EACT,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE;wBACH,eAAe,EACb,CAAC,GAAG,IAAI,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,QAAQ;AACpE,qBAAA,EAAA,CACD,EACD,GAAG,IACFA,GAAC,CAAA,GAAG,EACF,EAAA,EAAE,EAAC,KAAK,EACR,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,YAAY,EAC1B,CAAC,EAAC,MAAM,EACR,CAAC,EAAC,MAAM,EACR,MAAM,EAAE,YAAA;wBACN,iBAAiB,CAAC,KAAK,CAAC,CAAA;qBACzB;;AAED,oBAAA,GAAG,EAAE,GAAG,EAAA,aAAA,EACK,MAAM,EACnB,GAAG,EAAE;AACH,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,CAAC;AACP,wBAAA,SAAS,EAAE,OAAO;wBAClB,OAAO,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC;AAC1B,wBAAA,UAAU,EAAE,UAAA,CAAA,MAAA,CAAW,MAAM,CAAC,IAAI,CAAE;AACrC,qBAAA,EAAA,CACD,IACA,IAAI,EACP,QAAQ,IACPA,GAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EACH,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,CAAC,EAAC,MAAM,EACR,CAAC,EAAC,MAAM,EACR,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE;AACH,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,CAAC;AACP,wBAAA,eAAe,EAAE,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,SAAS;wBACrD,OAAO,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS;AAC9B,wBAAA,MAAM,EAAE,CAAC;qBACV,EAEA,EAAA,EAAA,QAAA,EAAA,QAAQ,EACJ,CAAA,CAAA,IACL,IAAI,CAAA,EAAA,CAAA,CACJ,EACF,CAAA,CAAA,EACP;AACH;;;;"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconText.d.ts","sourceRoot":"","sources":["../../../src/components/icon-text/IconText.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC,eAAO,MAAM,QAAQ,+BAIlB,aAAa,qDAoBf,CAAA"}
@@ -1,10 +1,10 @@
1
- import { __assign } from '../../../_virtual/_tslib.js';
1
+ import { __assign } from '../../_virtual/_tslib.js';
2
2
  import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
3
- import '../../layout/Box/Box.js';
3
+ import '../layout/Box/Box.js';
4
4
  import '@emotion/react';
5
- import { Flex } from '../../layout/Flex/Flex.js';
6
- import '../../layout/Paper/Paper.js';
7
- import { Text } from '../../text/Text.js';
5
+ import { Flex } from '../layout/Flex/Flex.js';
6
+ import '../layout/Paper/Paper.js';
7
+ import { Text } from '../text/Text.js';
8
8
 
9
9
  var IconText = function (_a) {
10
10
  var children = _a.children, _b = _a.color, color = _b === void 0 ? 'default' : _b, _c = _a.icons, icons = _c === void 0 ? [] : _c;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconText.js","sources":["../../../src/components/icon-text/IconText.tsx"],"sourcesContent":["import { Flex } from 'components/layout'\nimport { Text } from 'components/text'\n\nimport { IconTextProps } from './types'\n\nexport const IconText = ({\n children,\n color = 'default',\n icons = []\n}: IconTextProps) => {\n const separator = (\n <Text variant='body' color='default' css={{ fontSize: 8 }}>\n •\n </Text>\n )\n\n return (\n <Flex h='l' gap='xs' alignItems='center'>\n {icons.map(({ icon: Icon, color: iconColor = 'default' }, index) => (\n <>\n {index > 0 ? separator : null}\n <Icon key={`icon${index}`} size='2xs' color={iconColor} />\n </>\n ))}\n <Text variant='body' size='xs' color={color}>\n {children}\n </Text>\n </Flex>\n )\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;AAKO,IAAM,QAAQ,GAAG,UAAC,EAIT,EAAA;AAHd,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAiB,GAAA,EAAA,CAAA,KAAA,EAAjB,KAAK,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,GAAA,EAAA,EACjB,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,CAAA;IAEV,IAAM,SAAS,IACbA,GAAA,CAAC,IAAI,EAAC,QAAA,CAAA,EAAA,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAElD,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,CAAA,CAAA,CACR,CAAA;IAED,QACEC,KAAC,IAAI,EAAA,QAAA,CAAA,EAAC,CAAC,EAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAA,EAAA,EAAA,QAAA,EAAA,CACrC,KAAK,CAAC,GAAG,CAAC,UAAC,EAA4C,EAAE,KAAK,EAAA;AAA3C,gBAAA,IAAA,IAAI,UAAA,EAAE,EAAA,GAAA,EAAA,CAAA,KAA4B,EAArB,SAAS,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAS,GAAA,EAAA,CAAA;AAAc,gBAAA,QAClEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,KAAK,GAAG,CAAC,GAAG,SAAS,GAAG,IAAI,EAC7BF,GAAA,CAAC,IAAI,EAAA,EAAsB,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,SAAS,EAAA,EAA3C,MAAO,CAAA,MAAA,CAAA,KAAK,CAAE,CAAiC,IACzD,EACJ;aAAA,CAAC,EACFA,GAAC,CAAA,IAAI,aAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,KAAK,gBACxC,QAAQ,EAAA,CAAA,CACJ,CACF,EAAA,CAAA,CAAA,EACR;AACH;;;;"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconText.stories.d.ts","sourceRoot":"","sources":["../../../src/components/icon-text/IconText.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAA"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon-text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA"}
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
- import { IconComponent } from "../../icon";
3
- import { IconColors, TextColors } from "../../../foundations";
2
+ import { IconComponent } from "../icon";
3
+ import { IconColors, TextColors } from "../../foundations";
4
4
  type IconInfo = {
5
5
  icon: IconComponent;
6
6
  color?: IconColors;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon-text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,gBAAuB;AAC/C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,0BAAmB;AAEpD,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,aAAa,CAAA;IACnB,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA"}
@@ -25,11 +25,7 @@ export { default as LoadingSpinner } from './loading-spinner/LoadingSpinner';
25
25
  export * from './pill';
26
26
  export * from './common/HiddenInput';
27
27
  export * from './select';
28
- export * from './comments/ArtistPick';
29
- export * from './comments/CommentText';
30
- export * from './comments/IconText';
31
- export * from './comments/Identifier';
32
- export * from './comments/SendIcon';
33
- export * from './comments/Timestamp';
28
+ export * from './icon-text';
29
+ export * from './send-icon';
34
30
  export * from './checkbox';
35
31
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAC5E,cAAc,QAAQ,CAAA;AACtB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAC5E,cAAc,QAAQ,CAAA;AACtB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA"}
@@ -4,7 +4,7 @@ import { ScrubberProps } from './types';
4
4
  * Wraps the `<Slider />` component and provides timestamp indicators.
5
5
  */
6
6
  export declare const Scrubber: {
7
- ({ mediaKey, isPlaying, isDisabled, isMobile, includeTimestamps, elapsedSeconds, totalSeconds, playbackRate, onScrub, onScrubRelease, includeExpandedTargets, style, className }: ScrubberProps): import("@emotion/react/jsx-runtime").JSX.Element;
7
+ ({ mediaKey, isPlaying, isDisabled, isMobile, includeTimestamps, elapsedSeconds, totalSeconds, playbackRate, getAudioPosition, getTotalTime, onScrub, onScrubRelease, includeExpandedTargets, style, className }: ScrubberProps): import("@emotion/react/jsx-runtime").JSX.Element;
8
8
  defaultProps: {
9
9
  isPlaying: boolean;
10
10
  isDisabled: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/Scrubber.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAwB,MAAM,SAAS,CAAA;AAK7D;;;GAGG;AACH,eAAO,MAAM,QAAQ;sLAclB,aAAa;;;;;;;;;CA8Df,CAAA"}
1
+ {"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/Scrubber.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAwB,MAAM,SAAS,CAAA;AAK7D;;;GAGG;AACH,eAAO,MAAM,QAAQ;sNAgBlB,aAAa;;;;;;;;;CAgEf,CAAA"}
@@ -16,7 +16,7 @@ var SCRUB_RELEASE_TIMEOUT_MS = 200;
16
16
  */
17
17
  var Scrubber = function (_a) {
18
18
  var _b;
19
- var mediaKey = _a.mediaKey, isPlaying = _a.isPlaying, isDisabled = _a.isDisabled, isMobile = _a.isMobile, includeTimestamps = _a.includeTimestamps, elapsedSeconds = _a.elapsedSeconds, totalSeconds = _a.totalSeconds, playbackRate = _a.playbackRate, onScrub = _a.onScrub, onScrubRelease = _a.onScrubRelease, includeExpandedTargets = _a.includeExpandedTargets, style = _a.style, className = _a.className;
19
+ var mediaKey = _a.mediaKey, isPlaying = _a.isPlaying, isDisabled = _a.isDisabled, isMobile = _a.isMobile, includeTimestamps = _a.includeTimestamps, elapsedSeconds = _a.elapsedSeconds, totalSeconds = _a.totalSeconds, playbackRate = _a.playbackRate, getAudioPosition = _a.getAudioPosition, getTotalTime = _a.getTotalTime, onScrub = _a.onScrub, onScrubRelease = _a.onScrubRelease, includeExpandedTargets = _a.includeExpandedTargets, style = _a.style, className = _a.className;
20
20
  var _c = useState(null), dragSeconds = _c[0], setDragSeconds = _c[1];
21
21
  var resetDragSeconds = function (isPlaying) {
22
22
  if (isPlaying) {
@@ -43,7 +43,7 @@ var Scrubber = function (_a) {
43
43
  _b[styles.isDisabled] = isDisabled,
44
44
  _b[styles.isMobile] = isMobile,
45
45
  _b.className = className,
46
- _b)) }, { children: [includeTimestamps && (jsx("div", __assign({ className: styles.timestampStart }, { children: formatTrackTimestamp(timestampStart) }))), jsx(Slider, { mediaKey: mediaKey, isPlaying: isPlaying, isDisabled: isDisabled, isMobile: isMobile, elapsedSeconds: elapsedSeconds, totalSeconds: totalSeconds, playbackRate: playbackRate, onScrub: onHandleScrub, onScrubRelease: onHandleScrubRelease, includeExpandedTargets: includeExpandedTargets, style: style }), includeTimestamps && (jsx("div", __assign({ className: styles.timestampEnd }, { children: formatTrackTimestamp(totalSeconds) })))] })));
46
+ _b)) }, { children: [includeTimestamps && (jsx("div", __assign({ className: styles.timestampStart }, { children: formatTrackTimestamp(timestampStart) }))), jsx(Slider, { mediaKey: mediaKey, isPlaying: isPlaying, isDisabled: isDisabled, isMobile: isMobile, elapsedSeconds: elapsedSeconds, totalSeconds: totalSeconds, playbackRate: playbackRate, onScrub: onHandleScrub, getAudioPosition: getAudioPosition, getTotalTime: getTotalTime, onScrubRelease: onHandleScrubRelease, includeExpandedTargets: includeExpandedTargets, style: style }), includeTimestamps && (jsx("div", __assign({ className: styles.timestampEnd }, { children: formatTrackTimestamp(totalSeconds) })))] })));
47
47
  };
48
48
  Scrubber.defaultProps = defaultScrubberProps;
49
49
 
@@ -1 +1 @@
1
- {"version":3,"file":"Scrubber.js","sources":["../../../src/components/scrubber/Scrubber.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\n\nimport cn from 'classnames'\n\nimport { formatTrackTimestamp } from 'utils'\n\nimport styles from './Scrubber.module.css'\nimport { Slider } from './Slider'\nimport { ScrubberProps, defaultScrubberProps } from './types'\n\n/** Timeout applied when releasing the drag-handle before timestamps reset. */\nconst SCRUB_RELEASE_TIMEOUT_MS = 200\n\n/**\n * @beta - This component was directly ported from stems and subject to change\n * Wraps the `<Slider />` component and provides timestamp indicators.\n */\nexport const Scrubber = ({\n mediaKey,\n isPlaying,\n isDisabled,\n isMobile,\n includeTimestamps,\n elapsedSeconds,\n totalSeconds,\n playbackRate,\n onScrub,\n onScrubRelease,\n includeExpandedTargets,\n style,\n className\n}: ScrubberProps) => {\n const [dragSeconds, setDragSeconds] = useState<number | null>(null)\n\n const resetDragSeconds = (isPlaying: boolean) => {\n if (isPlaying) {\n setTimeout(() => setDragSeconds(null), SCRUB_RELEASE_TIMEOUT_MS)\n }\n }\n\n const onHandleScrub = (seconds: number) => {\n setDragSeconds(seconds)\n if (onScrub) {\n onScrub(seconds)\n }\n }\n\n const onHandleScrubRelease = (seconds: number) => {\n if (onScrubRelease) {\n onScrubRelease(seconds)\n }\n resetDragSeconds(isPlaying)\n }\n\n useEffect(() => {\n resetDragSeconds(isPlaying)\n }, [isPlaying])\n\n const timestampStart = dragSeconds !== null ? dragSeconds : elapsedSeconds\n\n return (\n <div\n className={cn(styles.scrubber, {\n [styles.isDisabled]: isDisabled,\n [styles.isMobile]: isMobile,\n className\n })}\n >\n {includeTimestamps && (\n <div className={styles.timestampStart}>\n {formatTrackTimestamp(timestampStart)}\n </div>\n )}\n <Slider\n mediaKey={mediaKey}\n isPlaying={isPlaying}\n isDisabled={isDisabled}\n isMobile={isMobile}\n elapsedSeconds={elapsedSeconds}\n totalSeconds={totalSeconds}\n playbackRate={playbackRate}\n onScrub={onHandleScrub}\n onScrubRelease={onHandleScrubRelease}\n includeExpandedTargets={includeExpandedTargets}\n style={style}\n />\n {includeTimestamps && (\n <div className={styles.timestampEnd}>\n {formatTrackTimestamp(totalSeconds)}\n </div>\n )}\n </div>\n )\n}\n\nScrubber.defaultProps = defaultScrubberProps\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAUA;AACA,IAAM,wBAAwB,GAAG,GAAG,CAAA;AAEpC;;;AAGG;AACI,IAAM,QAAQ,GAAG,UAAC,EAcT,EAAA;;AAbd,IAAA,IAAA,QAAQ,cAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,cAAc,oBAAA,EACd,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,sBAAsB,4BAAA,EACtB,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,SAAS,GAAA,EAAA,CAAA,SAAA,CAAA;IAEH,IAAA,EAAA,GAAgC,QAAQ,CAAgB,IAAI,CAAC,EAA5D,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,cAAc,GAAA,EAAA,CAAA,CAAA,CAAiC,CAAA;IAEnE,IAAM,gBAAgB,GAAG,UAAC,SAAkB,EAAA;AAC1C,QAAA,IAAI,SAAS,EAAE;AACb,YAAA,UAAU,CAAC,YAAA,EAAM,OAAA,cAAc,CAAC,IAAI,CAAC,CAAA,EAAA,EAAE,wBAAwB,CAAC,CAAA;AACjE,SAAA;AACH,KAAC,CAAA;IAED,IAAM,aAAa,GAAG,UAAC,OAAe,EAAA;QACpC,cAAc,CAAC,OAAO,CAAC,CAAA;AACvB,QAAA,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,OAAO,CAAC,CAAA;AACjB,SAAA;AACH,KAAC,CAAA;IAED,IAAM,oBAAoB,GAAG,UAAC,OAAe,EAAA;AAC3C,QAAA,IAAI,cAAc,EAAE;YAClB,cAAc,CAAC,OAAO,CAAC,CAAA;AACxB,SAAA;QACD,gBAAgB,CAAC,SAAS,CAAC,CAAA;AAC7B,KAAC,CAAA;AAED,IAAA,SAAS,CAAC,YAAA;QACR,gBAAgB,CAAC,SAAS,CAAC,CAAA;AAC7B,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;AAEf,IAAA,IAAM,cAAc,GAAG,WAAW,KAAK,IAAI,GAAG,WAAW,GAAG,cAAc,CAAA;IAE1E,QACEA,uBACE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,GAAA,EAAA,GAAA,EAAA;AAC3B,YAAA,EAAA,CAAC,MAAM,CAAC,UAAU,CAAA,GAAG,UAAU;AAC/B,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAAA,SAAS,GAAA,SAAA;AACT,YAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAED,iBAAiB,KAChBC,GAAK,CAAA,KAAA,EAAA,QAAA,CAAA,EAAA,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,EAAA,EAAA,QAAA,EAClC,oBAAoB,CAAC,cAAc,CAAC,EACjC,CAAA,CAAA,CACP,EACDA,GAAC,CAAA,MAAM,EACL,EAAA,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,aAAa,EACtB,cAAc,EAAE,oBAAoB,EACpC,sBAAsB,EAAE,sBAAsB,EAC9C,KAAK,EAAE,KAAK,EACZ,CAAA,EACD,iBAAiB,KAChBA,sBAAK,SAAS,EAAE,MAAM,CAAC,YAAY,EAChC,EAAA,EAAA,QAAA,EAAA,oBAAoB,CAAC,YAAY,CAAC,IAC/B,CACP,CAAA,EAAA,CAAA,CACG,EACP;AACH,EAAC;AAED,QAAQ,CAAC,YAAY,GAAG,oBAAoB;;;;"}
1
+ {"version":3,"file":"Scrubber.js","sources":["../../../src/components/scrubber/Scrubber.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\n\nimport cn from 'classnames'\n\nimport { formatTrackTimestamp } from 'utils'\n\nimport styles from './Scrubber.module.css'\nimport { Slider } from './Slider'\nimport { ScrubberProps, defaultScrubberProps } from './types'\n\n/** Timeout applied when releasing the drag-handle before timestamps reset. */\nconst SCRUB_RELEASE_TIMEOUT_MS = 200\n\n/**\n * @beta - This component was directly ported from stems and subject to change\n * Wraps the `<Slider />` component and provides timestamp indicators.\n */\nexport const Scrubber = ({\n mediaKey,\n isPlaying,\n isDisabled,\n isMobile,\n includeTimestamps,\n elapsedSeconds,\n totalSeconds,\n playbackRate,\n getAudioPosition,\n getTotalTime,\n onScrub,\n onScrubRelease,\n includeExpandedTargets,\n style,\n className\n}: ScrubberProps) => {\n const [dragSeconds, setDragSeconds] = useState<number | null>(null)\n\n const resetDragSeconds = (isPlaying: boolean) => {\n if (isPlaying) {\n setTimeout(() => setDragSeconds(null), SCRUB_RELEASE_TIMEOUT_MS)\n }\n }\n\n const onHandleScrub = (seconds: number) => {\n setDragSeconds(seconds)\n if (onScrub) {\n onScrub(seconds)\n }\n }\n\n const onHandleScrubRelease = (seconds: number) => {\n if (onScrubRelease) {\n onScrubRelease(seconds)\n }\n resetDragSeconds(isPlaying)\n }\n\n useEffect(() => {\n resetDragSeconds(isPlaying)\n }, [isPlaying])\n\n const timestampStart = dragSeconds !== null ? dragSeconds : elapsedSeconds\n\n return (\n <div\n className={cn(styles.scrubber, {\n [styles.isDisabled]: isDisabled,\n [styles.isMobile]: isMobile,\n className\n })}\n >\n {includeTimestamps && (\n <div className={styles.timestampStart}>\n {formatTrackTimestamp(timestampStart)}\n </div>\n )}\n <Slider\n mediaKey={mediaKey}\n isPlaying={isPlaying}\n isDisabled={isDisabled}\n isMobile={isMobile}\n elapsedSeconds={elapsedSeconds}\n totalSeconds={totalSeconds}\n playbackRate={playbackRate}\n onScrub={onHandleScrub}\n getAudioPosition={getAudioPosition}\n getTotalTime={getTotalTime}\n onScrubRelease={onHandleScrubRelease}\n includeExpandedTargets={includeExpandedTargets}\n style={style}\n />\n {includeTimestamps && (\n <div className={styles.timestampEnd}>\n {formatTrackTimestamp(totalSeconds)}\n </div>\n )}\n </div>\n )\n}\n\nScrubber.defaultProps = defaultScrubberProps\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
@@ -3,5 +3,5 @@ import { ScrubberProps } from './types';
3
3
  * A smooth scrubbable slider that relies on CSS animations rather
4
4
  * than progress ticks to achieve fluidity.
5
5
  */
6
- export declare const Slider: ({ mediaKey, isPlaying, isMobile, isDisabled, elapsedSeconds, totalSeconds, playbackRate, onScrub, onScrubRelease, includeExpandedTargets, style }: ScrubberProps) => import("@emotion/react/jsx-runtime").JSX.Element;
6
+ export declare const Slider: ({ isPlaying, isMobile, isDisabled, totalSeconds, elapsedSeconds, onScrub, onScrubRelease, getAudioPosition, getTotalTime, includeExpandedTargets, style }: ScrubberProps) => import("@emotion/react/jsx-runtime").JSX.Element;
7
7
  //# sourceMappingURL=Slider.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/Slider.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAQvC;;;GAGG;AACH,eAAO,MAAM,MAAM,sJAYhB,aAAa,qDA2Rf,CAAA"}
1
+ {"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/Slider.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAQvC;;;GAGG;AACH,eAAO,MAAM,MAAM,8JAYhB,aAAa,qDAsRf,CAAA"}
@@ -1,9 +1,9 @@
1
1
  import { __assign } from '../../_virtual/_tslib.js';
2
2
  import { jsxs, jsx } from '@emotion/react/jsx-runtime';
3
- import { useState, useRef, useCallback, useEffect } from 'react';
3
+ import { useRef, useCallback, useEffect } from 'react';
4
4
  import cn from 'classnames';
5
5
  import styles from './Slider.module.css.js';
6
- import { useAnimations } from './hooks.js';
6
+ import { usePlaybackPositionTracking } from './hooks.js';
7
7
 
8
8
  /** Gets the X-position of a div. */
9
9
  var getXPosition = function (element) {
@@ -16,8 +16,7 @@ var getXPosition = function (element) {
16
16
  */
17
17
  var Slider = function (_a) {
18
18
  var _b;
19
- var mediaKey = _a.mediaKey, isPlaying = _a.isPlaying, isMobile = _a.isMobile, isDisabled = _a.isDisabled, elapsedSeconds = _a.elapsedSeconds, totalSeconds = _a.totalSeconds, playbackRate = _a.playbackRate, onScrub = _a.onScrub, onScrubRelease = _a.onScrubRelease, _c = _a.includeExpandedTargets, includeExpandedTargets = _c === void 0 ? true : _c, style = _a.style;
20
- var _d = useState(''), previousMediaKey = _d[0], setPreviousMediaKey = _d[1];
19
+ var isPlaying = _a.isPlaying, isMobile = _a.isMobile, isDisabled = _a.isDisabled, totalSeconds = _a.totalSeconds, elapsedSeconds = _a.elapsedSeconds, onScrub = _a.onScrub, onScrubRelease = _a.onScrubRelease, getAudioPosition = _a.getAudioPosition, getTotalTime = _a.getTotalTime, _c = _a.includeExpandedTargets, includeExpandedTargets = _c === void 0 ? true : _c, style = _a.style;
21
20
  // Percentage of the complete scrubber being dragged to.
22
21
  // e.g. 0.25 means the user has dragged the scrubber 1/4th of the way.
23
22
  var dragPercent = useRef(0);
@@ -30,7 +29,7 @@ var Slider = function (_a) {
30
29
  var railRef = useRef(null);
31
30
  var trackRef = useRef(null);
32
31
  var handleRef = useRef(null);
33
- var _e = useAnimations(trackRef, handleRef, elapsedSeconds, totalSeconds, playbackRate), play = _e.play, pause = _e.pause, setPercent = _e.setPercent;
32
+ var _d = usePlaybackPositionTracking(trackRef, handleRef, getAudioPosition, getTotalTime), play = _d.play, pause = _d.pause, refreshPosition = _d.refreshPosition, setPositionOverrideEnabled = _d.setPositionOverrideEnabled, setPosition = _d.setPosition;
34
33
  /**
35
34
  * Sets the percentage across the scrubber for a given pageX position.
36
35
  */
@@ -62,13 +61,13 @@ var Slider = function (_a) {
62
61
  e.preventDefault();
63
62
  setDragPercentMouse(e);
64
63
  if (dragPercent.current !== null) {
65
- setPercent(dragPercent.current);
64
+ setPosition(dragPercent.current);
66
65
  var seconds = dragPercent.current * totalSeconds;
67
66
  if (onScrub) {
68
67
  onScrub(seconds);
69
68
  }
70
69
  }
71
- }, [dragPercent, setDragPercentMouse, totalSeconds, setPercent, onScrub]);
70
+ }, [dragPercent, setDragPercentMouse, totalSeconds, onScrub, setPosition]);
72
71
  /**
73
72
  * Watches user touch movements while the scrubber handle is being dragged.
74
73
  */
@@ -77,13 +76,13 @@ var Slider = function (_a) {
77
76
  e.preventDefault();
78
77
  setDragPercentTouch(e);
79
78
  if (dragPercent.current !== null) {
80
- setPercent(dragPercent.current);
79
+ setPosition(dragPercent.current);
81
80
  var seconds = dragPercent.current * totalSeconds;
82
81
  if (onScrub) {
83
82
  onScrub(seconds);
84
83
  }
85
84
  }
86
- }, [dragPercent, setDragPercentTouch, totalSeconds, setPercent, onScrub]);
85
+ }, [dragPercent, setDragPercentTouch, totalSeconds, onScrub, setPosition]);
87
86
  /**
88
87
  * Watches for a mouse-up action (which may not occur on the scrubber itself),
89
88
  * calls the release callback, and resets dragging state.
@@ -95,6 +94,7 @@ var Slider = function (_a) {
95
94
  if (mouseUpRef.current) {
96
95
  document.removeEventListener('mouseup', mouseUpRef.current);
97
96
  }
97
+ setPositionOverrideEnabled(false);
98
98
  if (dragPercent.current !== null) {
99
99
  var seconds = dragPercent.current * totalSeconds;
100
100
  if (onScrubRelease) {
@@ -102,7 +102,14 @@ var Slider = function (_a) {
102
102
  }
103
103
  dragPercent.current = null;
104
104
  }
105
- }, [mouseMoveRef, mouseUpRef, dragPercent, totalSeconds, onScrubRelease]);
105
+ }, [
106
+ mouseMoveRef,
107
+ mouseUpRef,
108
+ dragPercent,
109
+ totalSeconds,
110
+ onScrubRelease,
111
+ setPositionOverrideEnabled
112
+ ]);
106
113
  /**
107
114
  * Watches for a touch-end action (which may not occur on the scrubber itself),
108
115
  * calls the release callback, and resets dragging state.
@@ -114,6 +121,7 @@ var Slider = function (_a) {
114
121
  if (touchEndRef.current) {
115
122
  document.removeEventListener('touchend', touchEndRef.current);
116
123
  }
124
+ setPositionOverrideEnabled(false);
117
125
  if (dragPercent.current !== null) {
118
126
  var seconds = dragPercent.current * totalSeconds;
119
127
  if (onScrubRelease) {
@@ -121,7 +129,14 @@ var Slider = function (_a) {
121
129
  }
122
130
  dragPercent.current = null;
123
131
  }
124
- }, [touchMoveRef, touchEndRef, dragPercent, totalSeconds, onScrubRelease]);
132
+ }, [
133
+ touchMoveRef,
134
+ touchEndRef,
135
+ dragPercent,
136
+ totalSeconds,
137
+ onScrubRelease,
138
+ setPositionOverrideEnabled
139
+ ]);
125
140
  /**
126
141
  * Attaches mouse-move and mouse-up event listeners and sets dragging state.
127
142
  */
@@ -133,10 +148,8 @@ var Slider = function (_a) {
133
148
  mouseUpRef.current = onMouseUp;
134
149
  document.addEventListener('mousemove', mouseMoveRef.current);
135
150
  document.addEventListener('mouseup', mouseUpRef.current);
151
+ setPositionOverrideEnabled(true);
136
152
  setDragPercentMouse(e);
137
- if (dragPercent.current !== null) {
138
- setPercent(dragPercent.current);
139
- }
140
153
  };
141
154
  /**
142
155
  * Attaches touch-move and touch-end event listeners and sets dragging state.
@@ -146,10 +159,8 @@ var Slider = function (_a) {
146
159
  touchEndRef.current = onTouchEnd;
147
160
  document.addEventListener('touchmove', touchMoveRef.current);
148
161
  document.addEventListener('touchend', touchEndRef.current);
162
+ setPositionOverrideEnabled(true);
149
163
  setDragPercentTouch(e);
150
- if (dragPercent.current !== null) {
151
- setPercent(dragPercent.current);
152
- }
153
164
  };
154
165
  // Watch interactions to the scrubber and call to animate
155
166
  useEffect(function () {
@@ -161,28 +172,8 @@ var Slider = function (_a) {
161
172
  }
162
173
  }, [isPlaying, dragPercent, play, pause]);
163
174
  useEffect(function () {
164
- setPercent(elapsedSeconds / totalSeconds);
165
- // eslint-disable-next-line react-hooks/exhaustive-deps
166
- }, [playbackRate, elapsedSeconds, totalSeconds]);
167
- // When the key changes, reset the animation
168
- useEffect(function () {
169
- if (mediaKey !== previousMediaKey) {
170
- if (!totalSeconds) {
171
- setPercent(0);
172
- }
173
- else {
174
- setPercent(elapsedSeconds / totalSeconds);
175
- }
176
- setPreviousMediaKey(mediaKey);
177
- }
178
- }, [
179
- mediaKey,
180
- previousMediaKey,
181
- setPreviousMediaKey,
182
- setPercent,
183
- elapsedSeconds,
184
- totalSeconds
185
- ]);
175
+ refreshPosition();
176
+ }, [elapsedSeconds, totalSeconds, refreshPosition]);
186
177
  var getShowHandle = function () {
187
178
  return !style || style.showHandle === undefined ? true : style.showHandle;
188
179
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","sources":["../../../src/components/scrubber/Slider.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useRef, CSSProperties } from 'react'\nimport * as React from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Slider.module.css'\nimport { useAnimations } from './hooks'\nimport { ScrubberProps } from './types'\n\n/** Gets the X-position of a div. */\nconst getXPosition = (element: HTMLDivElement) => {\n const coords = element.getBoundingClientRect()\n return window.pageXOffset + coords.left\n}\n\n/**\n * A smooth scrubbable slider that relies on CSS animations rather\n * than progress ticks to achieve fluidity.\n */\nexport const Slider = ({\n mediaKey,\n isPlaying,\n isMobile,\n isDisabled,\n elapsedSeconds,\n totalSeconds,\n playbackRate,\n onScrub,\n onScrubRelease,\n includeExpandedTargets = true,\n style\n}: ScrubberProps) => {\n const [previousMediaKey, setPreviousMediaKey] = useState('')\n\n // Percentage of the complete scrubber being dragged to.\n // e.g. 0.25 means the user has dragged the scrubber 1/4th of the way.\n const dragPercent = useRef<number | null>(0)\n\n // Refs to handle event listeners\n const mouseMoveRef = useRef<((this: Document, ev: MouseEvent) => any) | null>(\n null\n )\n const mouseUpRef = useRef<((this: Document, ev: MouseEvent) => any) | null>(\n null\n )\n const touchMoveRef = useRef<((e: TouchEvent) => any) | null>(null)\n const touchEndRef = useRef<((e: TouchEvent) => any) | null>(null)\n\n // Div refs\n const railRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const handleRef = useRef<HTMLDivElement>(null)\n\n const { play, pause, setPercent } = useAnimations(\n trackRef,\n handleRef,\n elapsedSeconds,\n totalSeconds,\n playbackRate\n )\n\n /**\n * Sets the percentage across the scrubber for a given pageX position.\n */\n const setDragPercent = useCallback(\n (pageX: number) => {\n if (railRef.current) {\n const clickPosition = pageX - getXPosition(railRef.current)\n const railWidth = railRef.current.offsetWidth\n const percent =\n Math.min(Math.max(0, clickPosition), railWidth) / railWidth\n dragPercent.current = percent\n }\n },\n [dragPercent]\n )\n\n /**\n * Sets the percentage across the scrubber for a given mouse event.\n */\n const setDragPercentMouse = useCallback(\n (e: React.MouseEvent | MouseEvent) => {\n setDragPercent(e.pageX)\n },\n [setDragPercent]\n )\n\n /**\n * Sets the percentage across the scurbber for a given touch event.\n */\n const setDragPercentTouch = useCallback(\n (e: React.TouchEvent | TouchEvent) => {\n setDragPercent(e.touches[0].pageX)\n },\n [setDragPercent]\n )\n\n /**\n * Watches user mouse movements while the scrubber handle is being dragged.\n */\n const onMouseMove = useCallback(\n (e: MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n\n setDragPercentMouse(e)\n if (dragPercent.current !== null) {\n setPercent(dragPercent.current)\n const seconds = dragPercent.current * totalSeconds\n if (onScrub) {\n onScrub(seconds)\n }\n }\n },\n [dragPercent, setDragPercentMouse, totalSeconds, setPercent, onScrub]\n )\n\n /**\n * Watches user touch movements while the scrubber handle is being dragged.\n */\n const onTouchMove = useCallback(\n (e: TouchEvent) => {\n e.stopPropagation()\n e.preventDefault()\n\n setDragPercentTouch(e)\n if (dragPercent.current !== null) {\n setPercent(dragPercent.current)\n\n const seconds = dragPercent.current * totalSeconds\n if (onScrub) {\n onScrub(seconds)\n }\n }\n },\n [dragPercent, setDragPercentTouch, totalSeconds, setPercent, onScrub]\n )\n\n /**\n * Watches for a mouse-up action (which may not occur on the scrubber itself),\n * calls the release callback, and resets dragging state.\n */\n const onMouseUp = useCallback(() => {\n if (mouseMoveRef.current) {\n document.removeEventListener('mousemove', mouseMoveRef.current)\n }\n if (mouseUpRef.current) {\n document.removeEventListener('mouseup', mouseUpRef.current)\n }\n\n if (dragPercent.current !== null) {\n const seconds = dragPercent.current * totalSeconds\n if (onScrubRelease) {\n onScrubRelease(seconds)\n }\n\n dragPercent.current = null\n }\n }, [mouseMoveRef, mouseUpRef, dragPercent, totalSeconds, onScrubRelease])\n\n /**\n * Watches for a touch-end action (which may not occur on the scrubber itself),\n * calls the release callback, and resets dragging state.\n */\n const onTouchEnd = useCallback(() => {\n if (touchMoveRef.current) {\n document.removeEventListener('touchmove', touchMoveRef.current)\n }\n if (touchEndRef.current) {\n document.removeEventListener('touchend', touchEndRef.current)\n }\n\n if (dragPercent.current !== null) {\n const seconds = dragPercent.current * totalSeconds\n if (onScrubRelease) {\n onScrubRelease(seconds)\n }\n\n dragPercent.current = null\n }\n }, [touchMoveRef, touchEndRef, dragPercent, totalSeconds, onScrubRelease])\n\n /**\n * Attaches mouse-move and mouse-up event listeners and sets dragging state.\n */\n const onMouseDown = (e: React.MouseEvent) => {\n // Cancel mouse down if touch was fired.\n if (e.button !== 0 || touchMoveRef.current) return\n\n mouseMoveRef.current = onMouseMove\n mouseUpRef.current = onMouseUp\n document.addEventListener('mousemove', mouseMoveRef.current)\n document.addEventListener('mouseup', mouseUpRef.current)\n\n setDragPercentMouse(e)\n if (dragPercent.current !== null) {\n setPercent(dragPercent.current)\n }\n }\n\n /**\n * Attaches touch-move and touch-end event listeners and sets dragging state.\n */\n const onTouchStart = (e: React.TouchEvent) => {\n touchMoveRef.current = onTouchMove\n touchEndRef.current = onTouchEnd\n document.addEventListener('touchmove', touchMoveRef.current)\n document.addEventListener('touchend', touchEndRef.current)\n\n setDragPercentTouch(e)\n if (dragPercent.current !== null) {\n setPercent(dragPercent.current)\n }\n }\n\n // Watch interactions to the scrubber and call to animate\n useEffect(() => {\n if (!dragPercent.current) {\n if (isPlaying) play()\n else pause()\n }\n }, [isPlaying, dragPercent, play, pause])\n\n useEffect(() => {\n setPercent(elapsedSeconds / totalSeconds)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [playbackRate, elapsedSeconds, totalSeconds])\n\n // When the key changes, reset the animation\n useEffect(() => {\n if (mediaKey !== previousMediaKey) {\n if (!totalSeconds) {\n setPercent(0)\n } else {\n setPercent(elapsedSeconds / totalSeconds)\n }\n setPreviousMediaKey(mediaKey)\n }\n }, [\n mediaKey,\n previousMediaKey,\n setPreviousMediaKey,\n setPercent,\n elapsedSeconds,\n totalSeconds\n ])\n\n const getShowHandle = () =>\n !style || style.showHandle === undefined ? true : style.showHandle\n\n const getRailStyle = () => {\n const s: CSSProperties = {}\n if (style && style.railUnlistenedColor) {\n s.background = style.railUnlistenedColor\n }\n return s\n }\n\n const getTrackStyle = () => {\n const s: CSSProperties = {}\n if (style && style.railListenedColor) {\n s.background = style.railListenedColor\n }\n\n if (style && style.railListenedColor) {\n s.borderRadius = 'var(--unit-half)'\n }\n return s\n }\n\n const getSliderStyle = () => {\n if (style && style.sliderMargin) return { margin: style.sliderMargin }\n return {}\n }\n\n const getHandleStyle = () => {\n const s: CSSProperties = {}\n if (style) {\n if (style.handleColor) s.background = style.handleColor\n if (style.handleShadow) s.boxShadow = style.handleShadow\n }\n return s\n }\n\n return (\n <div\n className={cn(styles.slider, {\n [styles.isMobile]: isMobile,\n [styles.isDisabled]: isDisabled,\n [styles.showHandle]: getShowHandle(),\n [styles.expandedTargets]: includeExpandedTargets\n })}\n onMouseDown={isDisabled ? () => {} : onMouseDown}\n onTouchStart={isDisabled ? () => {} : onTouchStart}\n style={getSliderStyle()}\n >\n <div ref={railRef} className={styles.rail} style={getRailStyle()}>\n <div ref={trackRef} className={styles.trackWrapper}>\n <div\n ref={trackRef}\n className={styles.track}\n style={getTrackStyle()}\n />\n </div>\n </div>\n <div ref={handleRef} className={styles.handleWrapper}>\n <div\n ref={handleRef}\n className={styles.handle}\n style={getHandleStyle()}\n />\n </div>\n </div>\n )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"Slider.js","sources":["../../../src/components/scrubber/Slider.tsx"],"sourcesContent":["import { useEffect, useCallback, useRef, CSSProperties } from 'react'\nimport * as React from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Slider.module.css'\nimport { usePlaybackPositionTracking } from './hooks'\nimport { ScrubberProps } from './types'\n\n/** Gets the X-position of a div. */\nconst getXPosition = (element: HTMLDivElement) => {\n const coords = element.getBoundingClientRect()\n return window.pageXOffset + coords.left\n}\n\n/**\n * A smooth scrubbable slider that relies on CSS animations rather\n * than progress ticks to achieve fluidity.\n */\nexport const Slider = ({\n isPlaying,\n isMobile,\n isDisabled,\n totalSeconds,\n elapsedSeconds,\n onScrub,\n onScrubRelease,\n getAudioPosition,\n getTotalTime,\n includeExpandedTargets = true,\n style\n}: ScrubberProps) => {\n // Percentage of the complete scrubber being dragged to.\n // e.g. 0.25 means the user has dragged the scrubber 1/4th of the way.\n const dragPercent = useRef<number | null>(0)\n\n // Refs to handle event listeners\n const mouseMoveRef = useRef<((this: Document, ev: MouseEvent) => any) | null>(\n null\n )\n const mouseUpRef = useRef<((this: Document, ev: MouseEvent) => any) | null>(\n null\n )\n const touchMoveRef = useRef<((e: TouchEvent) => any) | null>(null)\n const touchEndRef = useRef<((e: TouchEvent) => any) | null>(null)\n\n // Div refs\n const railRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const handleRef = useRef<HTMLDivElement>(null)\n\n const {\n play,\n pause,\n refreshPosition,\n setPositionOverrideEnabled,\n setPosition\n } = usePlaybackPositionTracking(\n trackRef,\n handleRef,\n getAudioPosition,\n getTotalTime\n )\n\n /**\n * Sets the percentage across the scrubber for a given pageX position.\n */\n const setDragPercent = useCallback(\n (pageX: number) => {\n if (railRef.current) {\n const clickPosition = pageX - getXPosition(railRef.current)\n const railWidth = railRef.current.offsetWidth\n const percent =\n Math.min(Math.max(0, clickPosition), railWidth) / railWidth\n dragPercent.current = percent\n }\n },\n [dragPercent]\n )\n\n /**\n * Sets the percentage across the scrubber for a given mouse event.\n */\n const setDragPercentMouse = useCallback(\n (e: React.MouseEvent | MouseEvent) => {\n setDragPercent(e.pageX)\n },\n [setDragPercent]\n )\n\n /**\n * Sets the percentage across the scurbber for a given touch event.\n */\n const setDragPercentTouch = useCallback(\n (e: React.TouchEvent | TouchEvent) => {\n setDragPercent(e.touches[0].pageX)\n },\n [setDragPercent]\n )\n\n /**\n * Watches user mouse movements while the scrubber handle is being dragged.\n */\n const onMouseMove = useCallback(\n (e: MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n\n setDragPercentMouse(e)\n if (dragPercent.current !== null) {\n setPosition(dragPercent.current)\n const seconds = dragPercent.current * totalSeconds\n if (onScrub) {\n onScrub(seconds)\n }\n }\n },\n [dragPercent, setDragPercentMouse, totalSeconds, onScrub, setPosition]\n )\n\n /**\n * Watches user touch movements while the scrubber handle is being dragged.\n */\n const onTouchMove = useCallback(\n (e: TouchEvent) => {\n e.stopPropagation()\n e.preventDefault()\n\n setDragPercentTouch(e)\n if (dragPercent.current !== null) {\n setPosition(dragPercent.current)\n\n const seconds = dragPercent.current * totalSeconds\n if (onScrub) {\n onScrub(seconds)\n }\n }\n },\n [dragPercent, setDragPercentTouch, totalSeconds, onScrub, setPosition]\n )\n\n /**\n * Watches for a mouse-up action (which may not occur on the scrubber itself),\n * calls the release callback, and resets dragging state.\n */\n const onMouseUp = useCallback(() => {\n if (mouseMoveRef.current) {\n document.removeEventListener('mousemove', mouseMoveRef.current)\n }\n if (mouseUpRef.current) {\n document.removeEventListener('mouseup', mouseUpRef.current)\n }\n setPositionOverrideEnabled(false)\n\n if (dragPercent.current !== null) {\n const seconds = dragPercent.current * totalSeconds\n if (onScrubRelease) {\n onScrubRelease(seconds)\n }\n\n dragPercent.current = null\n }\n }, [\n mouseMoveRef,\n mouseUpRef,\n dragPercent,\n totalSeconds,\n onScrubRelease,\n setPositionOverrideEnabled\n ])\n\n /**\n * Watches for a touch-end action (which may not occur on the scrubber itself),\n * calls the release callback, and resets dragging state.\n */\n const onTouchEnd = useCallback(() => {\n if (touchMoveRef.current) {\n document.removeEventListener('touchmove', touchMoveRef.current)\n }\n if (touchEndRef.current) {\n document.removeEventListener('touchend', touchEndRef.current)\n }\n setPositionOverrideEnabled(false)\n\n if (dragPercent.current !== null) {\n const seconds = dragPercent.current * totalSeconds\n if (onScrubRelease) {\n onScrubRelease(seconds)\n }\n\n dragPercent.current = null\n }\n }, [\n touchMoveRef,\n touchEndRef,\n dragPercent,\n totalSeconds,\n onScrubRelease,\n setPositionOverrideEnabled\n ])\n\n /**\n * Attaches mouse-move and mouse-up event listeners and sets dragging state.\n */\n const onMouseDown = (e: React.MouseEvent) => {\n // Cancel mouse down if touch was fired.\n if (e.button !== 0 || touchMoveRef.current) return\n\n mouseMoveRef.current = onMouseMove\n mouseUpRef.current = onMouseUp\n document.addEventListener('mousemove', mouseMoveRef.current)\n document.addEventListener('mouseup', mouseUpRef.current)\n setPositionOverrideEnabled(true)\n\n setDragPercentMouse(e)\n }\n\n /**\n * Attaches touch-move and touch-end event listeners and sets dragging state.\n */\n const onTouchStart = (e: React.TouchEvent) => {\n touchMoveRef.current = onTouchMove\n touchEndRef.current = onTouchEnd\n document.addEventListener('touchmove', touchMoveRef.current)\n document.addEventListener('touchend', touchEndRef.current)\n setPositionOverrideEnabled(true)\n\n setDragPercentTouch(e)\n }\n\n // Watch interactions to the scrubber and call to animate\n useEffect(() => {\n if (!dragPercent.current) {\n if (isPlaying) play()\n else pause()\n }\n }, [isPlaying, dragPercent, play, pause])\n\n useEffect(() => {\n refreshPosition()\n }, [elapsedSeconds, totalSeconds, refreshPosition])\n\n const getShowHandle = () =>\n !style || style.showHandle === undefined ? true : style.showHandle\n\n const getRailStyle = () => {\n const s: CSSProperties = {}\n if (style && style.railUnlistenedColor) {\n s.background = style.railUnlistenedColor\n }\n return s\n }\n\n const getTrackStyle = () => {\n const s: CSSProperties = {}\n if (style && style.railListenedColor) {\n s.background = style.railListenedColor\n }\n\n if (style && style.railListenedColor) {\n s.borderRadius = 'var(--unit-half)'\n }\n return s\n }\n\n const getSliderStyle = () => {\n if (style && style.sliderMargin) return { margin: style.sliderMargin }\n return {}\n }\n\n const getHandleStyle = () => {\n const s: CSSProperties = {}\n if (style) {\n if (style.handleColor) s.background = style.handleColor\n if (style.handleShadow) s.boxShadow = style.handleShadow\n }\n return s\n }\n\n return (\n <div\n className={cn(styles.slider, {\n [styles.isMobile]: isMobile,\n [styles.isDisabled]: isDisabled,\n [styles.showHandle]: getShowHandle(),\n [styles.expandedTargets]: includeExpandedTargets\n })}\n onMouseDown={isDisabled ? () => {} : onMouseDown}\n onTouchStart={isDisabled ? () => {} : onTouchStart}\n style={getSliderStyle()}\n >\n <div ref={railRef} className={styles.rail} style={getRailStyle()}>\n <div ref={trackRef} className={styles.trackWrapper}>\n <div\n ref={trackRef}\n className={styles.track}\n style={getTrackStyle()}\n />\n </div>\n </div>\n <div ref={handleRef} className={styles.handleWrapper}>\n <div\n ref={handleRef}\n className={styles.handle}\n style={getHandleStyle()}\n />\n </div>\n </div>\n )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}