@blerp/design 1.2.9 → 1.2.10

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 (4) hide show
  1. package/dist/index.cjs.js +33 -206
  2. package/dist/index.esm.js +31 -204
  3. package/dist/index.umd.js +35 -206
  4. package/package.json +1 -2
package/dist/index.cjs.js CHANGED
@@ -12,10 +12,6 @@ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiter
12
12
  var iconsMaterial = require('@mui/icons-material');
13
13
  var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
14
14
  var LockRoundedIcon = require('@mui/icons-material/LockRounded');
15
- var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
16
- var _regeneratorRuntime = require('@babel/runtime/regenerator');
17
- require('@blerp/wavesurfer');
18
- require('@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js');
19
15
  var AddRoundedIcon = require('@mui/icons-material/AddRounded');
20
16
  var ArrowDropDownRoundedIcon = require('@mui/icons-material/ArrowDropDownRounded');
21
17
  var FavoriteIcon = require('@mui/icons-material/Favorite');
@@ -24,6 +20,8 @@ var PauseRoundedIcon = require('@mui/icons-material/PauseRounded');
24
20
  var PlayArrowRoundedIcon = require('@mui/icons-material/PlayArrowRounded');
25
21
  var WarningRoundedIcon = require('@mui/icons-material/WarningRounded');
26
22
  require('@mui/icons-material/DoNotDisturbRounded');
23
+ var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
24
+ var _regeneratorRuntime = require('@babel/runtime/regenerator');
27
25
  var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
28
26
  var MoreHorizRoundedIcon = require('@mui/icons-material/MoreHorizRounded');
29
27
  var reactPalette = require('react-palette');
@@ -91,8 +89,6 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
91
89
  var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
92
90
  var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
93
91
  var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
94
- var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
95
- var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
96
92
  var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
97
93
  var ArrowDropDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDropDownRoundedIcon);
98
94
  var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
@@ -100,6 +96,8 @@ var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBor
100
96
  var PauseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseRoundedIcon);
101
97
  var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
102
98
  var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
99
+ var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
100
+ var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
103
101
  var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
104
102
  var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
105
103
  var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
@@ -2098,192 +2096,23 @@ var RatingInfo = function RatingInfo(_ref5) {
2098
2096
  default:
2099
2097
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
2100
2098
  }
2101
- };
2099
+ }; // const BlerpWaveform = ({ hovering, bite }) => {
2102
2100
 
2103
- var BlerpWaveform = function BlerpWaveform(_ref6) {
2104
- var _bite$audio, _bite$audio$mp;
2101
+ var ReportedWarning = function ReportedWarning(_ref7) {
2102
+ var showWarning = _ref7.showWarning,
2103
+ saved = _ref7.saved,
2104
+ count = _ref7.count,
2105
+ onClick = _ref7.onClick;
2105
2106
 
2106
- var hovering = _ref6.hovering,
2107
- bite = _ref6.bite;
2108
- var id = bite === null || bite === void 0 ? void 0 : bite._id;
2109
- var audio = bite === null || bite === void 0 ? void 0 : (_bite$audio = bite.audio) === null || _bite$audio === void 0 ? void 0 : (_bite$audio$mp = _bite$audio.mp3) === null || _bite$audio$mp === void 0 ? void 0 : _bite$audio$mp.url;
2110
-
2111
- var _useContext = React.useContext(BlerpAudioContext),
2112
- play = _useContext.play,
2113
- getPlayState = _useContext.getPlayState;
2114
- _useContext.selectedBlerp;
2115
-
2116
- var _useState5 = React.useState(false),
2107
+ var _useState5 = React.useState(showWarning),
2117
2108
  _useState6 = _slicedToArray__default['default'](_useState5, 2),
2118
- hasRendered = _useState6[0],
2119
- setHasRendered = _useState6[1];
2109
+ show = _useState6[0],
2110
+ setShow = _useState6[1];
2120
2111
 
2121
- var _useState7 = React.useState(null),
2112
+ var _useState7 = React.useState(false),
2122
2113
  _useState8 = _slicedToArray__default['default'](_useState7, 2),
2123
- wavesurfer = _useState8[0],
2124
- setWavesurfer = _useState8[1];
2125
-
2126
- React.useEffect(function () {
2127
- var create = /*#__PURE__*/function () {
2128
- var _ref7 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
2129
- var _WaveSurfer, _CursorPlugin, mWavesurfer;
2130
-
2131
- return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
2132
- while (1) {
2133
- switch (_context.prev = _context.next) {
2134
- case 0:
2135
- console.log("creating", hovering, wavesurfer, hasRendered);
2136
-
2137
- if (!(hovering && wavesurfer)) {
2138
- _context.next = 5;
2139
- break;
2140
- }
2141
-
2142
- wavesurfer.load(audio);
2143
- _context.next = 17;
2144
- break;
2145
-
2146
- case 5:
2147
- if (!(hovering && !wavesurfer && !hasRendered && document.querySelector("#blerp-waveform-".concat(id)) && document.querySelector("#blerp-waveform-".concat(id)).children.length === 0)) {
2148
- _context.next = 17;
2149
- break;
2150
- }
2151
-
2152
- _context.next = 8;
2153
- return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@blerp/wavesurfer')); });
2154
-
2155
- case 8:
2156
- _WaveSurfer = _context.sent.default;
2157
- _context.next = 11;
2158
- return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@blerp/wavesurfer/src/plugin/cursor')); });
2159
-
2160
- case 11:
2161
- _CursorPlugin = _context.sent.default;
2162
- mWavesurfer = _WaveSurfer.create({
2163
- container: document.querySelector("#blerp-waveform-".concat(id)),
2164
- barWidth: 2,
2165
- barHeight: 1.5,
2166
- // the height of the wave
2167
- barGap: 2,
2168
- // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
2169
- progressColor: "#ffffff",
2170
- hoverColor: "#ffffff99",
2171
- barRadius: 2,
2172
- height: 30,
2173
- hideScrollBar: true,
2174
- plugins: [_CursorPlugin.create({
2175
- showTime: false,
2176
- opacity: 0,
2177
- customShowTimeStyle: {
2178
- "background-color": "#000",
2179
- color: "#fff",
2180
- padding: "2px",
2181
- "font-size": "10px"
2182
- }
2183
- })]
2184
- });
2185
- mWavesurfer.on("error", function (e) {
2186
- console.warn(e);
2187
- });
2188
- mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.on("seek", function (prog) {
2189
- if (prog) {
2190
- console.log("SEEEEEEK", prog, bite);
2191
- mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.setMute(true);
2192
- mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.play();
2193
- play({
2194
- bite: bite,
2195
- startTime: mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.getCurrentTime(),
2196
- forcePlay: true
2197
- });
2198
- }
2199
- }); // Load audio from URL
2200
- // mWavesurfer.load(audio);
2201
-
2202
- setWavesurfer(mWavesurfer);
2203
- setHasRendered(true);
2204
-
2205
- case 17:
2206
- case "end":
2207
- return _context.stop();
2208
- }
2209
- }
2210
- }, _callee);
2211
- }));
2212
-
2213
- return function create() {
2214
- return _ref7.apply(this, arguments);
2215
- };
2216
- }();
2217
-
2218
- create();
2219
- }, [wavesurfer, bite, play, audio, hovering, hasRendered, id]);
2220
- React.useEffect(function () {
2221
- // if (wavesurfer && selectedBlerp?._id === bite?._id) {
2222
- // wavesurfer?.on("seek", (prog) => {
2223
- // if (prog) {
2224
- // console.log("SEEEEEEK", prog, selectedBlerp);
2225
- // play({
2226
- // bite: bite,
2227
- // startTime: wavesurfer?.getCurrentTime(),
2228
- // });
2229
- // wavesurfer?.setMute(true);
2230
- // wavesurfer?.play();
2231
- // }
2232
- // });
2233
- // } else {
2234
- // wavesurfer?.un("seek");
2235
- // }
2236
- if (getPlayState({
2237
- biteId: bite === null || bite === void 0 ? void 0 : bite._id
2238
- }) === "playing") {
2239
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.setMute(true);
2240
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.play(); // Play button
2241
- // console.log(wavesurfer.play());
2242
- }
2243
-
2244
- if (getPlayState({
2245
- biteId: bite === null || bite === void 0 ? void 0 : bite._id
2246
- }) === "paused") {
2247
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.setMute(true);
2248
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.pause(); // Play button
2249
- // console.log(wavesurfer.play());
2250
- }
2251
-
2252
- if (getPlayState({
2253
- biteId: bite === null || bite === void 0 ? void 0 : bite._id
2254
- }) === "stopped") {
2255
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.setMute(true);
2256
- console.log("stop");
2257
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.stop(); // Play button
2258
- // console.log(wavesurfer.play());
2259
- }
2260
- }, [bite, getPlayState, wavesurfer]);
2261
- return /*#__PURE__*/React__default['default'].createElement("div", {
2262
- id: "blerp-waveform-".concat(id),
2263
- style: {
2264
- height: "30px",
2265
- width: "100%",
2266
- transition: "0.3s",
2267
- opacity: hovering ? "1" : "0"
2268
- }
2269
- });
2270
- };
2271
-
2272
- var ReportedWarning = function ReportedWarning(_ref9) {
2273
- var showWarning = _ref9.showWarning,
2274
- saved = _ref9.saved,
2275
- count = _ref9.count,
2276
- onClick = _ref9.onClick;
2277
-
2278
- var _useState9 = React.useState(showWarning),
2279
- _useState10 = _slicedToArray__default['default'](_useState9, 2),
2280
- show = _useState10[0],
2281
- setShow = _useState10[1];
2282
-
2283
- var _useState11 = React.useState(false),
2284
- _useState12 = _slicedToArray__default['default'](_useState11, 2),
2285
- hovering = _useState12[0],
2286
- setHovering = _useState12[1];
2114
+ hovering = _useState8[0],
2115
+ setHovering = _useState8[1];
2287
2116
 
2288
2117
  var renderInfo = function renderInfo() {
2289
2118
 
@@ -2354,26 +2183,27 @@ var ReportedWarning = function ReportedWarning(_ref9) {
2354
2183
  })), renderInfo());
2355
2184
  };
2356
2185
 
2357
- var NewBlerp$1 = function NewBlerp(_ref10) {
2186
+ var NewBlerp$1 = function NewBlerp(_ref8) {
2358
2187
  var _bite$image, _bite$image$original, _bite$ownerObject;
2359
2188
 
2360
- var bite = _ref10.bite;
2361
- _ref10.playState;
2189
+ var Waveform = _ref8.Waveform,
2190
+ bite = _ref8.bite;
2191
+ _ref8.playState;
2362
2192
 
2363
- var _useContext2 = React.useContext(BlerpAudioContext),
2364
- play = _useContext2.play,
2365
- getPlayState = _useContext2.getPlayState;
2366
- _useContext2.stop;
2193
+ var _useContext = React.useContext(BlerpAudioContext),
2194
+ play = _useContext.play,
2195
+ getPlayState = _useContext.getPlayState;
2196
+ _useContext.stop;
2367
2197
 
2368
- var _useState13 = React.useState(false),
2369
- _useState14 = _slicedToArray__default['default'](_useState13, 2),
2370
- hovering = _useState14[0],
2371
- setHovering = _useState14[1];
2198
+ var _useState9 = React.useState(false),
2199
+ _useState10 = _slicedToArray__default['default'](_useState9, 2),
2200
+ hovering = _useState10[0],
2201
+ setHovering = _useState10[1];
2372
2202
 
2373
- var _useState15 = React.useState(false),
2374
- _useState16 = _slicedToArray__default['default'](_useState15, 2),
2375
- addedToPlace = _useState16[0],
2376
- setAddedToPlace = _useState16[1];
2203
+ var _useState11 = React.useState(false),
2204
+ _useState12 = _slicedToArray__default['default'](_useState11, 2),
2205
+ addedToPlace = _useState12[0],
2206
+ setAddedToPlace = _useState12[1];
2377
2207
 
2378
2208
  var formatter = Intl.NumberFormat("en", {
2379
2209
  notation: "compact"
@@ -2540,10 +2370,7 @@ var NewBlerp$1 = function NewBlerp(_ref10) {
2540
2370
  pointerEvents: "none",
2541
2371
  zIndex: "1"
2542
2372
  }
2543
- }, renderPlayStateIcon()), /*#__PURE__*/React__default['default'].createElement(BlerpWaveform, {
2544
- bite: bite,
2545
- hovering: hovering
2546
- })), /*#__PURE__*/React__default['default'].createElement(Text, {
2373
+ }, renderPlayStateIcon()), Waveform && /*#__PURE__*/React__default['default'].createElement(Waveform, null)), /*#__PURE__*/React__default['default'].createElement(Text, {
2547
2374
  sx: {
2548
2375
  fontSize: "16px",
2549
2376
  fontWeight: "400",
package/dist/index.esm.js CHANGED
@@ -9,10 +9,6 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral
9
9
  import { PauseCircleOutlineRounded, LockRounded, CheckRounded, CloseRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
10
10
  import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
11
11
  import LockRoundedIcon from '@mui/icons-material/LockRounded';
12
- import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
13
- import _regeneratorRuntime from '@babel/runtime/regenerator';
14
- import '@blerp/wavesurfer';
15
- import '@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js';
16
12
  import AddRoundedIcon from '@mui/icons-material/AddRounded';
17
13
  import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
18
14
  import FavoriteIcon from '@mui/icons-material/Favorite';
@@ -21,6 +17,8 @@ import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
21
17
  import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
22
18
  import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
23
19
  import '@mui/icons-material/DoNotDisturbRounded';
20
+ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
21
+ import _regeneratorRuntime from '@babel/runtime/regenerator';
24
22
  import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
25
23
  import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
26
24
  import { usePalette } from 'react-palette';
@@ -2023,192 +2021,23 @@ var RatingInfo = function RatingInfo(_ref5) {
2023
2021
  default:
2024
2022
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
2025
2023
  }
2026
- };
2024
+ }; // const BlerpWaveform = ({ hovering, bite }) => {
2027
2025
 
2028
- var BlerpWaveform = function BlerpWaveform(_ref6) {
2029
- var _bite$audio, _bite$audio$mp;
2030
-
2031
- var hovering = _ref6.hovering,
2032
- bite = _ref6.bite;
2033
- var id = bite === null || bite === void 0 ? void 0 : bite._id;
2034
- var audio = bite === null || bite === void 0 ? void 0 : (_bite$audio = bite.audio) === null || _bite$audio === void 0 ? void 0 : (_bite$audio$mp = _bite$audio.mp3) === null || _bite$audio$mp === void 0 ? void 0 : _bite$audio$mp.url;
2035
-
2036
- var _useContext = useContext(BlerpAudioContext),
2037
- play = _useContext.play,
2038
- getPlayState = _useContext.getPlayState;
2039
- _useContext.selectedBlerp;
2026
+ var ReportedWarning = function ReportedWarning(_ref7) {
2027
+ var showWarning = _ref7.showWarning,
2028
+ saved = _ref7.saved,
2029
+ count = _ref7.count,
2030
+ onClick = _ref7.onClick;
2040
2031
 
2041
- var _useState5 = useState(false),
2032
+ var _useState5 = useState(showWarning),
2042
2033
  _useState6 = _slicedToArray(_useState5, 2),
2043
- hasRendered = _useState6[0],
2044
- setHasRendered = _useState6[1];
2034
+ show = _useState6[0],
2035
+ setShow = _useState6[1];
2045
2036
 
2046
- var _useState7 = useState(null),
2037
+ var _useState7 = useState(false),
2047
2038
  _useState8 = _slicedToArray(_useState7, 2),
2048
- wavesurfer = _useState8[0],
2049
- setWavesurfer = _useState8[1];
2050
-
2051
- useEffect(function () {
2052
- var create = /*#__PURE__*/function () {
2053
- var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
2054
- var _WaveSurfer, _CursorPlugin, mWavesurfer;
2055
-
2056
- return _regeneratorRuntime.wrap(function _callee$(_context) {
2057
- while (1) {
2058
- switch (_context.prev = _context.next) {
2059
- case 0:
2060
- console.log("creating", hovering, wavesurfer, hasRendered);
2061
-
2062
- if (!(hovering && wavesurfer)) {
2063
- _context.next = 5;
2064
- break;
2065
- }
2066
-
2067
- wavesurfer.load(audio);
2068
- _context.next = 17;
2069
- break;
2070
-
2071
- case 5:
2072
- if (!(hovering && !wavesurfer && !hasRendered && document.querySelector("#blerp-waveform-".concat(id)) && document.querySelector("#blerp-waveform-".concat(id)).children.length === 0)) {
2073
- _context.next = 17;
2074
- break;
2075
- }
2076
-
2077
- _context.next = 8;
2078
- return import('@blerp/wavesurfer');
2079
-
2080
- case 8:
2081
- _WaveSurfer = _context.sent.default;
2082
- _context.next = 11;
2083
- return import('@blerp/wavesurfer/src/plugin/cursor');
2084
-
2085
- case 11:
2086
- _CursorPlugin = _context.sent.default;
2087
- mWavesurfer = _WaveSurfer.create({
2088
- container: document.querySelector("#blerp-waveform-".concat(id)),
2089
- barWidth: 2,
2090
- barHeight: 1.5,
2091
- // the height of the wave
2092
- barGap: 2,
2093
- // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
2094
- progressColor: "#ffffff",
2095
- hoverColor: "#ffffff99",
2096
- barRadius: 2,
2097
- height: 30,
2098
- hideScrollBar: true,
2099
- plugins: [_CursorPlugin.create({
2100
- showTime: false,
2101
- opacity: 0,
2102
- customShowTimeStyle: {
2103
- "background-color": "#000",
2104
- color: "#fff",
2105
- padding: "2px",
2106
- "font-size": "10px"
2107
- }
2108
- })]
2109
- });
2110
- mWavesurfer.on("error", function (e) {
2111
- console.warn(e);
2112
- });
2113
- mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.on("seek", function (prog) {
2114
- if (prog) {
2115
- console.log("SEEEEEEK", prog, bite);
2116
- mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.setMute(true);
2117
- mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.play();
2118
- play({
2119
- bite: bite,
2120
- startTime: mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.getCurrentTime(),
2121
- forcePlay: true
2122
- });
2123
- }
2124
- }); // Load audio from URL
2125
- // mWavesurfer.load(audio);
2126
-
2127
- setWavesurfer(mWavesurfer);
2128
- setHasRendered(true);
2129
-
2130
- case 17:
2131
- case "end":
2132
- return _context.stop();
2133
- }
2134
- }
2135
- }, _callee);
2136
- }));
2137
-
2138
- return function create() {
2139
- return _ref7.apply(this, arguments);
2140
- };
2141
- }();
2142
-
2143
- create();
2144
- }, [wavesurfer, bite, play, audio, hovering, hasRendered, id]);
2145
- useEffect(function () {
2146
- // if (wavesurfer && selectedBlerp?._id === bite?._id) {
2147
- // wavesurfer?.on("seek", (prog) => {
2148
- // if (prog) {
2149
- // console.log("SEEEEEEK", prog, selectedBlerp);
2150
- // play({
2151
- // bite: bite,
2152
- // startTime: wavesurfer?.getCurrentTime(),
2153
- // });
2154
- // wavesurfer?.setMute(true);
2155
- // wavesurfer?.play();
2156
- // }
2157
- // });
2158
- // } else {
2159
- // wavesurfer?.un("seek");
2160
- // }
2161
- if (getPlayState({
2162
- biteId: bite === null || bite === void 0 ? void 0 : bite._id
2163
- }) === "playing") {
2164
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.setMute(true);
2165
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.play(); // Play button
2166
- // console.log(wavesurfer.play());
2167
- }
2168
-
2169
- if (getPlayState({
2170
- biteId: bite === null || bite === void 0 ? void 0 : bite._id
2171
- }) === "paused") {
2172
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.setMute(true);
2173
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.pause(); // Play button
2174
- // console.log(wavesurfer.play());
2175
- }
2176
-
2177
- if (getPlayState({
2178
- biteId: bite === null || bite === void 0 ? void 0 : bite._id
2179
- }) === "stopped") {
2180
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.setMute(true);
2181
- console.log("stop");
2182
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.stop(); // Play button
2183
- // console.log(wavesurfer.play());
2184
- }
2185
- }, [bite, getPlayState, wavesurfer]);
2186
- return /*#__PURE__*/React__default.createElement("div", {
2187
- id: "blerp-waveform-".concat(id),
2188
- style: {
2189
- height: "30px",
2190
- width: "100%",
2191
- transition: "0.3s",
2192
- opacity: hovering ? "1" : "0"
2193
- }
2194
- });
2195
- };
2196
-
2197
- var ReportedWarning = function ReportedWarning(_ref9) {
2198
- var showWarning = _ref9.showWarning,
2199
- saved = _ref9.saved,
2200
- count = _ref9.count,
2201
- onClick = _ref9.onClick;
2202
-
2203
- var _useState9 = useState(showWarning),
2204
- _useState10 = _slicedToArray(_useState9, 2),
2205
- show = _useState10[0],
2206
- setShow = _useState10[1];
2207
-
2208
- var _useState11 = useState(false),
2209
- _useState12 = _slicedToArray(_useState11, 2),
2210
- hovering = _useState12[0],
2211
- setHovering = _useState12[1];
2039
+ hovering = _useState8[0],
2040
+ setHovering = _useState8[1];
2212
2041
 
2213
2042
  var renderInfo = function renderInfo() {
2214
2043
 
@@ -2279,26 +2108,27 @@ var ReportedWarning = function ReportedWarning(_ref9) {
2279
2108
  })), renderInfo());
2280
2109
  };
2281
2110
 
2282
- var NewBlerp$1 = function NewBlerp(_ref10) {
2111
+ var NewBlerp$1 = function NewBlerp(_ref8) {
2283
2112
  var _bite$image, _bite$image$original, _bite$ownerObject;
2284
2113
 
2285
- var bite = _ref10.bite;
2286
- _ref10.playState;
2114
+ var Waveform = _ref8.Waveform,
2115
+ bite = _ref8.bite;
2116
+ _ref8.playState;
2287
2117
 
2288
- var _useContext2 = useContext(BlerpAudioContext),
2289
- play = _useContext2.play,
2290
- getPlayState = _useContext2.getPlayState;
2291
- _useContext2.stop;
2118
+ var _useContext = useContext(BlerpAudioContext),
2119
+ play = _useContext.play,
2120
+ getPlayState = _useContext.getPlayState;
2121
+ _useContext.stop;
2292
2122
 
2293
- var _useState13 = useState(false),
2294
- _useState14 = _slicedToArray(_useState13, 2),
2295
- hovering = _useState14[0],
2296
- setHovering = _useState14[1];
2123
+ var _useState9 = useState(false),
2124
+ _useState10 = _slicedToArray(_useState9, 2),
2125
+ hovering = _useState10[0],
2126
+ setHovering = _useState10[1];
2297
2127
 
2298
- var _useState15 = useState(false),
2299
- _useState16 = _slicedToArray(_useState15, 2),
2300
- addedToPlace = _useState16[0],
2301
- setAddedToPlace = _useState16[1];
2128
+ var _useState11 = useState(false),
2129
+ _useState12 = _slicedToArray(_useState11, 2),
2130
+ addedToPlace = _useState12[0],
2131
+ setAddedToPlace = _useState12[1];
2302
2132
 
2303
2133
  var formatter = Intl.NumberFormat("en", {
2304
2134
  notation: "compact"
@@ -2465,10 +2295,7 @@ var NewBlerp$1 = function NewBlerp(_ref10) {
2465
2295
  pointerEvents: "none",
2466
2296
  zIndex: "1"
2467
2297
  }
2468
- }, renderPlayStateIcon()), /*#__PURE__*/React__default.createElement(BlerpWaveform, {
2469
- bite: bite,
2470
- hovering: hovering
2471
- })), /*#__PURE__*/React__default.createElement(Text, {
2298
+ }, renderPlayStateIcon()), Waveform && /*#__PURE__*/React__default.createElement(Waveform, null)), /*#__PURE__*/React__default.createElement(Text, {
2472
2299
  sx: {
2473
2300
  fontSize: "16px",
2474
2301
  fontWeight: "400",
package/dist/index.umd.js CHANGED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('@blerp/wavesurfer'), require('@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/ArrowDropDownRounded'), require('@mui/icons-material/Favorite'), require('@mui/icons-material/FavoriteBorder'), require('@mui/icons-material/PauseRounded'), require('@mui/icons-material/PlayArrowRounded'), require('@mui/icons-material/WarningRounded'), require('@mui/icons-material/DoNotDisturbRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), require('react-lottie'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
3
- typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', '@blerp/wavesurfer', '@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js', '@mui/icons-material/AddRounded', '@mui/icons-material/ArrowDropDownRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@mui/icons-material/DoNotDisturbRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', 'react-lottie', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global._asyncToGenerator, global._regeneratorRuntime, null, null, global.AddRoundedIcon, global.ArrowDropDownRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, null, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
5
- }(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, _asyncToGenerator, _regeneratorRuntime, wavesurfer, wavesurfer_cursor_min_js, AddRoundedIcon, ArrowDropDownRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, DoNotDisturbRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/ArrowDropDownRounded'), require('@mui/icons-material/Favorite'), require('@mui/icons-material/FavoriteBorder'), require('@mui/icons-material/PauseRounded'), require('@mui/icons-material/PlayArrowRounded'), require('@mui/icons-material/WarningRounded'), require('@mui/icons-material/DoNotDisturbRounded'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), require('react-lottie'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/AddRounded', '@mui/icons-material/ArrowDropDownRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@mui/icons-material/DoNotDisturbRounded', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', 'react-lottie', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.AddRoundedIcon, global.ArrowDropDownRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, null, global._asyncToGenerator, global._regeneratorRuntime, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
5
+ }(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, AddRoundedIcon, ArrowDropDownRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, DoNotDisturbRoundedIcon, _asyncToGenerator, _regeneratorRuntime, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -34,8 +34,6 @@
34
34
  var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
35
35
  var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
36
36
  var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
37
- var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
38
- var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
39
37
  var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
40
38
  var ArrowDropDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDropDownRoundedIcon);
41
39
  var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
@@ -43,6 +41,8 @@
43
41
  var PauseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseRoundedIcon);
44
42
  var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
45
43
  var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
44
+ var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
45
+ var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
46
46
  var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
47
47
  var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
48
48
  var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
@@ -2041,192 +2041,23 @@
2041
2041
  default:
2042
2042
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
2043
2043
  }
2044
- };
2044
+ }; // const BlerpWaveform = ({ hovering, bite }) => {
2045
2045
 
2046
- var BlerpWaveform = function BlerpWaveform(_ref6) {
2047
- var _bite$audio, _bite$audio$mp;
2048
-
2049
- var hovering = _ref6.hovering,
2050
- bite = _ref6.bite;
2051
- var id = bite === null || bite === void 0 ? void 0 : bite._id;
2052
- var audio = bite === null || bite === void 0 ? void 0 : (_bite$audio = bite.audio) === null || _bite$audio === void 0 ? void 0 : (_bite$audio$mp = _bite$audio.mp3) === null || _bite$audio$mp === void 0 ? void 0 : _bite$audio$mp.url;
2053
-
2054
- var _useContext = React.useContext(BlerpAudioContext),
2055
- play = _useContext.play,
2056
- getPlayState = _useContext.getPlayState;
2057
- _useContext.selectedBlerp;
2046
+ var ReportedWarning = function ReportedWarning(_ref7) {
2047
+ var showWarning = _ref7.showWarning,
2048
+ saved = _ref7.saved,
2049
+ count = _ref7.count,
2050
+ onClick = _ref7.onClick;
2058
2051
 
2059
- var _useState5 = React.useState(false),
2052
+ var _useState5 = React.useState(showWarning),
2060
2053
  _useState6 = _slicedToArray__default['default'](_useState5, 2),
2061
- hasRendered = _useState6[0],
2062
- setHasRendered = _useState6[1];
2054
+ show = _useState6[0],
2055
+ setShow = _useState6[1];
2063
2056
 
2064
- var _useState7 = React.useState(null),
2057
+ var _useState7 = React.useState(false),
2065
2058
  _useState8 = _slicedToArray__default['default'](_useState7, 2),
2066
- wavesurfer = _useState8[0],
2067
- setWavesurfer = _useState8[1];
2068
-
2069
- React.useEffect(function () {
2070
- var create = /*#__PURE__*/function () {
2071
- var _ref7 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
2072
- var _WaveSurfer, _CursorPlugin, mWavesurfer;
2073
-
2074
- return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
2075
- while (1) {
2076
- switch (_context.prev = _context.next) {
2077
- case 0:
2078
- console.log("creating", hovering, wavesurfer, hasRendered);
2079
-
2080
- if (!(hovering && wavesurfer)) {
2081
- _context.next = 5;
2082
- break;
2083
- }
2084
-
2085
- wavesurfer.load(audio);
2086
- _context.next = 17;
2087
- break;
2088
-
2089
- case 5:
2090
- if (!(hovering && !wavesurfer && !hasRendered && document.querySelector("#blerp-waveform-".concat(id)) && document.querySelector("#blerp-waveform-".concat(id)).children.length === 0)) {
2091
- _context.next = 17;
2092
- break;
2093
- }
2094
-
2095
- _context.next = 8;
2096
- return import('@blerp/wavesurfer');
2097
-
2098
- case 8:
2099
- _WaveSurfer = _context.sent.default;
2100
- _context.next = 11;
2101
- return import('@blerp/wavesurfer/src/plugin/cursor');
2102
-
2103
- case 11:
2104
- _CursorPlugin = _context.sent.default;
2105
- mWavesurfer = _WaveSurfer.create({
2106
- container: document.querySelector("#blerp-waveform-".concat(id)),
2107
- barWidth: 2,
2108
- barHeight: 1.5,
2109
- // the height of the wave
2110
- barGap: 2,
2111
- // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
2112
- progressColor: "#ffffff",
2113
- hoverColor: "#ffffff99",
2114
- barRadius: 2,
2115
- height: 30,
2116
- hideScrollBar: true,
2117
- plugins: [_CursorPlugin.create({
2118
- showTime: false,
2119
- opacity: 0,
2120
- customShowTimeStyle: {
2121
- "background-color": "#000",
2122
- color: "#fff",
2123
- padding: "2px",
2124
- "font-size": "10px"
2125
- }
2126
- })]
2127
- });
2128
- mWavesurfer.on("error", function (e) {
2129
- console.warn(e);
2130
- });
2131
- mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.on("seek", function (prog) {
2132
- if (prog) {
2133
- console.log("SEEEEEEK", prog, bite);
2134
- mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.setMute(true);
2135
- mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.play();
2136
- play({
2137
- bite: bite,
2138
- startTime: mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.getCurrentTime(),
2139
- forcePlay: true
2140
- });
2141
- }
2142
- }); // Load audio from URL
2143
- // mWavesurfer.load(audio);
2144
-
2145
- setWavesurfer(mWavesurfer);
2146
- setHasRendered(true);
2147
-
2148
- case 17:
2149
- case "end":
2150
- return _context.stop();
2151
- }
2152
- }
2153
- }, _callee);
2154
- }));
2155
-
2156
- return function create() {
2157
- return _ref7.apply(this, arguments);
2158
- };
2159
- }();
2160
-
2161
- create();
2162
- }, [wavesurfer, bite, play, audio, hovering, hasRendered, id]);
2163
- React.useEffect(function () {
2164
- // if (wavesurfer && selectedBlerp?._id === bite?._id) {
2165
- // wavesurfer?.on("seek", (prog) => {
2166
- // if (prog) {
2167
- // console.log("SEEEEEEK", prog, selectedBlerp);
2168
- // play({
2169
- // bite: bite,
2170
- // startTime: wavesurfer?.getCurrentTime(),
2171
- // });
2172
- // wavesurfer?.setMute(true);
2173
- // wavesurfer?.play();
2174
- // }
2175
- // });
2176
- // } else {
2177
- // wavesurfer?.un("seek");
2178
- // }
2179
- if (getPlayState({
2180
- biteId: bite === null || bite === void 0 ? void 0 : bite._id
2181
- }) === "playing") {
2182
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.setMute(true);
2183
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.play(); // Play button
2184
- // console.log(wavesurfer.play());
2185
- }
2186
-
2187
- if (getPlayState({
2188
- biteId: bite === null || bite === void 0 ? void 0 : bite._id
2189
- }) === "paused") {
2190
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.setMute(true);
2191
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.pause(); // Play button
2192
- // console.log(wavesurfer.play());
2193
- }
2194
-
2195
- if (getPlayState({
2196
- biteId: bite === null || bite === void 0 ? void 0 : bite._id
2197
- }) === "stopped") {
2198
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.setMute(true);
2199
- console.log("stop");
2200
- wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.stop(); // Play button
2201
- // console.log(wavesurfer.play());
2202
- }
2203
- }, [bite, getPlayState, wavesurfer]);
2204
- return /*#__PURE__*/React__default['default'].createElement("div", {
2205
- id: "blerp-waveform-".concat(id),
2206
- style: {
2207
- height: "30px",
2208
- width: "100%",
2209
- transition: "0.3s",
2210
- opacity: hovering ? "1" : "0"
2211
- }
2212
- });
2213
- };
2214
-
2215
- var ReportedWarning = function ReportedWarning(_ref9) {
2216
- var showWarning = _ref9.showWarning,
2217
- saved = _ref9.saved,
2218
- count = _ref9.count,
2219
- onClick = _ref9.onClick;
2220
-
2221
- var _useState9 = React.useState(showWarning),
2222
- _useState10 = _slicedToArray__default['default'](_useState9, 2),
2223
- show = _useState10[0],
2224
- setShow = _useState10[1];
2225
-
2226
- var _useState11 = React.useState(false),
2227
- _useState12 = _slicedToArray__default['default'](_useState11, 2),
2228
- hovering = _useState12[0],
2229
- setHovering = _useState12[1];
2059
+ hovering = _useState8[0],
2060
+ setHovering = _useState8[1];
2230
2061
 
2231
2062
  var renderInfo = function renderInfo() {
2232
2063
 
@@ -2297,26 +2128,27 @@
2297
2128
  })), renderInfo());
2298
2129
  };
2299
2130
 
2300
- var NewBlerp$1 = function NewBlerp(_ref10) {
2131
+ var NewBlerp$1 = function NewBlerp(_ref8) {
2301
2132
  var _bite$image, _bite$image$original, _bite$ownerObject;
2302
2133
 
2303
- var bite = _ref10.bite;
2304
- _ref10.playState;
2134
+ var Waveform = _ref8.Waveform,
2135
+ bite = _ref8.bite;
2136
+ _ref8.playState;
2305
2137
 
2306
- var _useContext2 = React.useContext(BlerpAudioContext),
2307
- play = _useContext2.play,
2308
- getPlayState = _useContext2.getPlayState;
2309
- _useContext2.stop;
2138
+ var _useContext = React.useContext(BlerpAudioContext),
2139
+ play = _useContext.play,
2140
+ getPlayState = _useContext.getPlayState;
2141
+ _useContext.stop;
2310
2142
 
2311
- var _useState13 = React.useState(false),
2312
- _useState14 = _slicedToArray__default['default'](_useState13, 2),
2313
- hovering = _useState14[0],
2314
- setHovering = _useState14[1];
2143
+ var _useState9 = React.useState(false),
2144
+ _useState10 = _slicedToArray__default['default'](_useState9, 2),
2145
+ hovering = _useState10[0],
2146
+ setHovering = _useState10[1];
2315
2147
 
2316
- var _useState15 = React.useState(false),
2317
- _useState16 = _slicedToArray__default['default'](_useState15, 2),
2318
- addedToPlace = _useState16[0],
2319
- setAddedToPlace = _useState16[1];
2148
+ var _useState11 = React.useState(false),
2149
+ _useState12 = _slicedToArray__default['default'](_useState11, 2),
2150
+ addedToPlace = _useState12[0],
2151
+ setAddedToPlace = _useState12[1];
2320
2152
 
2321
2153
  var formatter = Intl.NumberFormat("en", {
2322
2154
  notation: "compact"
@@ -2483,10 +2315,7 @@
2483
2315
  pointerEvents: "none",
2484
2316
  zIndex: "1"
2485
2317
  }
2486
- }, renderPlayStateIcon()), /*#__PURE__*/React__default['default'].createElement(BlerpWaveform, {
2487
- bite: bite,
2488
- hovering: hovering
2489
- })), /*#__PURE__*/React__default['default'].createElement(Text, {
2318
+ }, renderPlayStateIcon()), Waveform && /*#__PURE__*/React__default['default'].createElement(Waveform, null)), /*#__PURE__*/React__default['default'].createElement(Text, {
2490
2319
  sx: {
2491
2320
  fontSize: "16px",
2492
2321
  fontWeight: "400",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blerp/design",
3
- "version": "1.2.9",
3
+ "version": "1.2.10",
4
4
  "description": "Blerp UI",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {
@@ -12,7 +12,6 @@
12
12
  },
13
13
  "dependencies": {
14
14
  "@babel/runtime": "^7.14.0",
15
- "@blerp/wavesurfer": "^6.4.2",
16
15
  "@mui/icons-material": "5.10.16",
17
16
  "@mui/material": "5.10.16",
18
17
  "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",