@blerp/design 1.2.9 → 1.2.11

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 +35 -207
  2. package/dist/index.esm.js +33 -205
  3. package/dist/index.umd.js +37 -207
  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,28 @@ 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 _ref8$Waveform = _ref8.Waveform,
2190
+ Waveform = _ref8$Waveform === void 0 ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : _ref8$Waveform,
2191
+ bite = _ref8.bite;
2192
+ _ref8.playState;
2362
2193
 
2363
- var _useContext2 = React.useContext(BlerpAudioContext),
2364
- play = _useContext2.play,
2365
- getPlayState = _useContext2.getPlayState;
2366
- _useContext2.stop;
2194
+ var _useContext = React.useContext(BlerpAudioContext),
2195
+ play = _useContext.play,
2196
+ getPlayState = _useContext.getPlayState;
2197
+ _useContext.stop;
2367
2198
 
2368
- var _useState13 = React.useState(false),
2369
- _useState14 = _slicedToArray__default['default'](_useState13, 2),
2370
- hovering = _useState14[0],
2371
- setHovering = _useState14[1];
2199
+ var _useState9 = React.useState(false),
2200
+ _useState10 = _slicedToArray__default['default'](_useState9, 2),
2201
+ hovering = _useState10[0],
2202
+ setHovering = _useState10[1];
2372
2203
 
2373
- var _useState15 = React.useState(false),
2374
- _useState16 = _slicedToArray__default['default'](_useState15, 2),
2375
- addedToPlace = _useState16[0],
2376
- setAddedToPlace = _useState16[1];
2204
+ var _useState11 = React.useState(false),
2205
+ _useState12 = _slicedToArray__default['default'](_useState11, 2),
2206
+ addedToPlace = _useState12[0],
2207
+ setAddedToPlace = _useState12[1];
2377
2208
 
2378
2209
  var formatter = Intl.NumberFormat("en", {
2379
2210
  notation: "compact"
@@ -2540,10 +2371,7 @@ var NewBlerp$1 = function NewBlerp(_ref10) {
2540
2371
  pointerEvents: "none",
2541
2372
  zIndex: "1"
2542
2373
  }
2543
- }, renderPlayStateIcon()), /*#__PURE__*/React__default['default'].createElement(BlerpWaveform, {
2544
- bite: bite,
2545
- hovering: hovering
2546
- })), /*#__PURE__*/React__default['default'].createElement(Text, {
2374
+ }, renderPlayStateIcon()), Waveform && /*#__PURE__*/React__default['default'].createElement(Waveform, null)), /*#__PURE__*/React__default['default'].createElement(Text, {
2547
2375
  sx: {
2548
2376
  fontSize: "16px",
2549
2377
  fontWeight: "400",
@@ -5931,7 +5759,7 @@ var BlerpTheme = function BlerpTheme(_ref) {
5931
5759
  icons: icons,
5932
5760
  mode: mode === "dark" ? "dark" : "light"
5933
5761
  }, currentTheme)
5934
- }, /*#__PURE__*/React__default['default'].createElement(SnackbarProvider, null, children)));
5762
+ }, /*#__PURE__*/React__default['default'].createElement(SnackbarProvider, null, /*#__PURE__*/React__default['default'].createElement(BlerpAudioContextProvider$1, null, children))));
5935
5763
  };
5936
5764
 
5937
5765
  var LottieAnimation = function LottieAnimation(_ref) {
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,28 @@ 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 _ref8$Waveform = _ref8.Waveform,
2115
+ Waveform = _ref8$Waveform === void 0 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null) : _ref8$Waveform,
2116
+ bite = _ref8.bite;
2117
+ _ref8.playState;
2287
2118
 
2288
- var _useContext2 = useContext(BlerpAudioContext),
2289
- play = _useContext2.play,
2290
- getPlayState = _useContext2.getPlayState;
2291
- _useContext2.stop;
2119
+ var _useContext = useContext(BlerpAudioContext),
2120
+ play = _useContext.play,
2121
+ getPlayState = _useContext.getPlayState;
2122
+ _useContext.stop;
2292
2123
 
2293
- var _useState13 = useState(false),
2294
- _useState14 = _slicedToArray(_useState13, 2),
2295
- hovering = _useState14[0],
2296
- setHovering = _useState14[1];
2124
+ var _useState9 = useState(false),
2125
+ _useState10 = _slicedToArray(_useState9, 2),
2126
+ hovering = _useState10[0],
2127
+ setHovering = _useState10[1];
2297
2128
 
2298
- var _useState15 = useState(false),
2299
- _useState16 = _slicedToArray(_useState15, 2),
2300
- addedToPlace = _useState16[0],
2301
- setAddedToPlace = _useState16[1];
2129
+ var _useState11 = useState(false),
2130
+ _useState12 = _slicedToArray(_useState11, 2),
2131
+ addedToPlace = _useState12[0],
2132
+ setAddedToPlace = _useState12[1];
2302
2133
 
2303
2134
  var formatter = Intl.NumberFormat("en", {
2304
2135
  notation: "compact"
@@ -2465,10 +2296,7 @@ var NewBlerp$1 = function NewBlerp(_ref10) {
2465
2296
  pointerEvents: "none",
2466
2297
  zIndex: "1"
2467
2298
  }
2468
- }, renderPlayStateIcon()), /*#__PURE__*/React__default.createElement(BlerpWaveform, {
2469
- bite: bite,
2470
- hovering: hovering
2471
- })), /*#__PURE__*/React__default.createElement(Text, {
2299
+ }, renderPlayStateIcon()), Waveform && /*#__PURE__*/React__default.createElement(Waveform, null)), /*#__PURE__*/React__default.createElement(Text, {
2472
2300
  sx: {
2473
2301
  fontSize: "16px",
2474
2302
  fontWeight: "400",
@@ -5856,7 +5684,7 @@ var BlerpTheme = function BlerpTheme(_ref) {
5856
5684
  icons: icons,
5857
5685
  mode: mode === "dark" ? "dark" : "light"
5858
5686
  }, currentTheme)
5859
- }, /*#__PURE__*/React__default.createElement(SnackbarProvider, null, children)));
5687
+ }, /*#__PURE__*/React__default.createElement(SnackbarProvider, null, /*#__PURE__*/React__default.createElement(BlerpAudioContextProvider$1, null, children))));
5860
5688
  };
5861
5689
 
5862
5690
  var LottieAnimation = function LottieAnimation(_ref) {
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,28 @@
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 _ref8$Waveform = _ref8.Waveform,
2135
+ Waveform = _ref8$Waveform === void 0 ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : _ref8$Waveform,
2136
+ bite = _ref8.bite;
2137
+ _ref8.playState;
2305
2138
 
2306
- var _useContext2 = React.useContext(BlerpAudioContext),
2307
- play = _useContext2.play,
2308
- getPlayState = _useContext2.getPlayState;
2309
- _useContext2.stop;
2139
+ var _useContext = React.useContext(BlerpAudioContext),
2140
+ play = _useContext.play,
2141
+ getPlayState = _useContext.getPlayState;
2142
+ _useContext.stop;
2310
2143
 
2311
- var _useState13 = React.useState(false),
2312
- _useState14 = _slicedToArray__default['default'](_useState13, 2),
2313
- hovering = _useState14[0],
2314
- setHovering = _useState14[1];
2144
+ var _useState9 = React.useState(false),
2145
+ _useState10 = _slicedToArray__default['default'](_useState9, 2),
2146
+ hovering = _useState10[0],
2147
+ setHovering = _useState10[1];
2315
2148
 
2316
- var _useState15 = React.useState(false),
2317
- _useState16 = _slicedToArray__default['default'](_useState15, 2),
2318
- addedToPlace = _useState16[0],
2319
- setAddedToPlace = _useState16[1];
2149
+ var _useState11 = React.useState(false),
2150
+ _useState12 = _slicedToArray__default['default'](_useState11, 2),
2151
+ addedToPlace = _useState12[0],
2152
+ setAddedToPlace = _useState12[1];
2320
2153
 
2321
2154
  var formatter = Intl.NumberFormat("en", {
2322
2155
  notation: "compact"
@@ -2483,10 +2316,7 @@
2483
2316
  pointerEvents: "none",
2484
2317
  zIndex: "1"
2485
2318
  }
2486
- }, renderPlayStateIcon()), /*#__PURE__*/React__default['default'].createElement(BlerpWaveform, {
2487
- bite: bite,
2488
- hovering: hovering
2489
- })), /*#__PURE__*/React__default['default'].createElement(Text, {
2319
+ }, renderPlayStateIcon()), Waveform && /*#__PURE__*/React__default['default'].createElement(Waveform, null)), /*#__PURE__*/React__default['default'].createElement(Text, {
2490
2320
  sx: {
2491
2321
  fontSize: "16px",
2492
2322
  fontWeight: "400",
@@ -5874,7 +5704,7 @@
5874
5704
  icons: icons,
5875
5705
  mode: mode === "dark" ? "dark" : "light"
5876
5706
  }, currentTheme)
5877
- }, /*#__PURE__*/React__default['default'].createElement(SnackbarProvider, null, children)));
5707
+ }, /*#__PURE__*/React__default['default'].createElement(SnackbarProvider, null, /*#__PURE__*/React__default['default'].createElement(BlerpAudioContextProvider$1, null, children))));
5878
5708
  };
5879
5709
 
5880
5710
  var LottieAnimation = function LottieAnimation(_ref) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blerp/design",
3
- "version": "1.2.9",
3
+ "version": "1.2.11",
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",