@blerp/design 1.2.11 → 1.2.13

package/dist/index.umd.js

@@ -1515,215 +1515,6 @@
       handleClickTitle: PropTypes__default['default'].func.isRequired
     };
 
-    var BlerpAudioContext = /*#__PURE__*/React.createContext({});
-    var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
-      var children = _ref.children;
-
-      if (typeof window === "undefined") {
-        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children);
-      }
-
-      var _useState = React.useState(null),
-          _useState2 = _slicedToArray__default['default'](_useState, 2),
-          selectedBlerp = _useState2[0],
-          _setSelectedBlerp = _useState2[1];
-
-      var _useState3 = React.useState("stopped"),
-          _useState4 = _slicedToArray__default['default'](_useState3, 2),
-          playState = _useState4[0],
-          setPlayState = _useState4[1];
-
-      var _useState5 = React.useState(0),
-          _useState6 = _slicedToArray__default['default'](_useState5, 2);
-          _useState6[0];
-          var setStartTime = _useState6[1]; // const [audioCtx, setAudioCtx] = useState(null);
-      // Refs
-
-
-      var audioRef = React.useRef(new Audio());
-
-      var pause = /*#__PURE__*/function () {
-        var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
-          return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  setPlayState("paused");
-                  _context.next = 3;
-                  return audioRef.current.pause();
-
-                case 3:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee);
-        }));
-
-        return function pause() {
-          return _ref2.apply(this, arguments);
-        };
-      }();
-
-      var play = /*#__PURE__*/function () {
-        var _ref4 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3(_ref3) {
-          var _bite$audio, _bite$audio$mp;
-
-          var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, newGain, audioCtx, gainNode, source;
-
-          return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
-            while (1) {
-              switch (_context3.prev = _context3.next) {
-                case 0:
-                  bite = _ref3.bite, _ref3$gain = _ref3.gain, gain = _ref3$gain === void 0 ? 1 : _ref3$gain, _ref3$startTime = _ref3.startTime, startTime = _ref3$startTime === void 0 ? 0 : _ref3$startTime, _ref3$forcePlay = _ref3.forcePlay, forcePlay = _ref3$forcePlay === void 0 ? false : _ref3$forcePlay;
-                  console.log("astats", startTime, playState);
-                  startTime = audioRef.current.currentTime > 0 ? audioRef.current.currentTime : startTime;
-                  console.log("play", playState, startTime);
-
-                  if (!((bite === null || bite === void 0 ? void 0 : bite._id) !== (selectedBlerp === null || selectedBlerp === void 0 ? void 0 : selectedBlerp._id) && playState === "playing")) {
-                    _context3.next = 8;
-                    break;
-                  }
-
-                  _context3.next = 7;
-                  return audioRef.current.pause();
-
-                case 7:
-                  if (!forcePlay) {
-                    startTime = 0;
-                  }
-
-                case 8:
-                  if (!(playState === "playing" && (bite === null || bite === void 0 ? void 0 : bite._id) === (selectedBlerp === null || selectedBlerp === void 0 ? void 0 : selectedBlerp._id))) {
-                    _context3.next = 11;
-                    break;
-                  }
-
-                  pause();
-                  return _context3.abrupt("return");
-
-                case 11:
-                  audioRef.current = new 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);
-                  audioRef.current.crossOrigin = "anonymous";
-                  console.log("current time", startTime);
-                  audioRef.current.currentTime = startTime;
-                  newGain = gain;
-                  audioRef.current.onended = /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2() {
-                    return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
-                      while (1) {
-                        switch (_context2.prev = _context2.next) {
-                          case 0:
-                            console.log("ended");
-                            setPlayState("played");
-                            _context2.next = 4;
-                            return audioRef.current.pause();
-
-                          case 4:
-                            audioRef.current.currentTime = 0;
-
-                          case 5:
-                          case "end":
-                            return _context2.stop();
-                        }
-                      }
-                    }, _callee2);
-                  }));
-                  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-                  gainNode = audioCtx.createGain(); // gainNode.gain.value = 2 // value between 0 and 2 https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API
-
-                  gainNode.gain.setValueAtTime(newGain, 0);
-                  source = audioCtx.createMediaElementSource(audioRef.current);
-                  source.connect(gainNode);
-                  gainNode.connect(audioCtx.destination);
-                  _context3.next = 25;
-                  return audioRef.current.play().then(function () {
-                    console.log("playing", bite === null || bite === void 0 ? void 0 : bite.title);
-                    setPlayState("playing");
-                  }).catch(function (e) {
-                    setPlayState("stopped");
-                  });
-
-                case 25:
-                  // const playPromise = audioRef.current.play();
-                  // if (playPromise !== undefined) {
-                  //     playPromise
-                  //         .then((_) => {
-                  //             // Automatic playback started!
-                  //             // Show playing UI.
-                  //             setPlayState("playing");
-                  //         })
-                  //         .catch((error) => {
-                  //             // Auto-play was prevented
-                  //             // Show paused UI.
-                  //             console.log("playing failed witihin", error);
-                  //         });
-                  // }
-                  _setSelectedBlerp(bite);
-
-                case 26:
-                case "end":
-                  return _context3.stop();
-              }
-            }
-          }, _callee3);
-        }));
-
-        return function play(_x) {
-          return _ref4.apply(this, arguments);
-        };
-      }();
-
-      return /*#__PURE__*/React__default['default'].createElement(BlerpAudioContext.Provider, {
-        value: {
-          selectedBlerp: selectedBlerp,
-          setSelectedBlerp: function setSelectedBlerp(_ref6) {
-            var bite = _ref6.bite;
-
-            _setSelectedBlerp(bite);
-          },
-          pause: pause,
-          play: play,
-          stop: function () {
-            var _stop = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee4() {
-              var _audioRef$current;
-
-              return _regeneratorRuntime__default['default'].wrap(function _callee4$(_context4) {
-                while (1) {
-                  switch (_context4.prev = _context4.next) {
-                    case 0:
-                      setPlayState("stopped");
-                      _context4.next = 3;
-                      return (_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.pause();
-
-                    case 3:
-                      audioRef.current.currentTime = 0;
-
-                    case 4:
-                    case "end":
-                      return _context4.stop();
-                  }
-                }
-              }, _callee4);
-            }));
-
-            function stop() {
-              return _stop.apply(this, arguments);
-            }
-
-            return stop;
-          }(),
-          getPlayState: function getPlayState(_ref7) {
-            var biteId = _ref7.biteId;
-
-            if (biteId === (selectedBlerp && selectedBlerp._id)) {
-              return playState;
-            }
-          },
-          setStartTime: setStartTime
-        }
-      }, children);
-    };
-
     var _templateObject$f, _templateObject2$a;
     var PremiumContainer = styled__default['default'].div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n    background: transparent;\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    margin: 20px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])));
     var Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n"])), function (props) {
@@ -2131,15 +1922,10 @@
     var NewBlerp$1 = function NewBlerp(_ref8) {
       var _bite$image, _bite$image$original, _bite$ownerObject;
 
-      var _ref8$Waveform = _ref8.Waveform,
-          Waveform = _ref8$Waveform === void 0 ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : _ref8$Waveform,
-          bite = _ref8.bite;
-          _ref8.playState;
-
-      var _useContext = React.useContext(BlerpAudioContext),
-          play = _useContext.play,
-          getPlayState = _useContext.getPlayState;
-          _useContext.stop;
+      var Waveform = _ref8.Waveform,
+          bite = _ref8.bite,
+          playState = _ref8.playState,
+          play = _ref8.play;
 
       var _useState9 = React.useState(false),
           _useState10 = _slicedToArray__default['default'](_useState9, 2),
@@ -2157,10 +1943,6 @@
       var saveCount = formatter.format(bite === null || bite === void 0 ? void 0 : bite.totalSaveCount);
 
       var renderPlayStateIcon = function renderPlayStateIcon() {
-        var playState = getPlayState({
-          biteId: bite === null || bite === void 0 ? void 0 : bite._id
-        });
-
         if (playState === "played") {
           return /*#__PURE__*/React__default['default'].createElement("svg", {
             xmlns: "http://www.w3.org/2000/svg",
@@ -2316,7 +2098,9 @@
           pointerEvents: "none",
           zIndex: "1"
         }
-      }, renderPlayStateIcon()), Waveform && /*#__PURE__*/React__default['default'].createElement(Waveform, null)), /*#__PURE__*/React__default['default'].createElement(Text, {
+      }, renderPlayStateIcon()), Waveform({
+        hovering: hovering
+      })), /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {
           fontSize: "16px",
           fontWeight: "400",
@@ -2412,6 +2196,211 @@
       }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s"))));
     };
 
+    var BlerpAudioContext = /*#__PURE__*/React.createContext({});
+    var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
+      var children = _ref.children;
+
+      var _useState = React.useState(null),
+          _useState2 = _slicedToArray__default['default'](_useState, 2),
+          selectedBlerp = _useState2[0],
+          _setSelectedBlerp = _useState2[1];
+
+      var _useState3 = React.useState("stopped"),
+          _useState4 = _slicedToArray__default['default'](_useState3, 2),
+          playState = _useState4[0],
+          setPlayState = _useState4[1];
+
+      var _useState5 = React.useState(0),
+          _useState6 = _slicedToArray__default['default'](_useState5, 2);
+          _useState6[0];
+          var setStartTime = _useState6[1]; // const [audioCtx, setAudioCtx] = useState(null);
+      // Refs
+
+
+      var audioRef = React.useRef(null);
+
+      var pause = /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
+          return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  setPlayState("paused");
+                  _context.next = 3;
+                  return audioRef.current.pause();
+
+                case 3:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        return function pause() {
+          return _ref2.apply(this, arguments);
+        };
+      }();
+
+      var play = /*#__PURE__*/function () {
+        var _ref4 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3(_ref3) {
+          var _bite$audio, _bite$audio$mp;
+
+          var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, newGain, audioCtx, gainNode, source;
+
+          return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
+            while (1) {
+              switch (_context3.prev = _context3.next) {
+                case 0:
+                  bite = _ref3.bite, _ref3$gain = _ref3.gain, gain = _ref3$gain === void 0 ? 1 : _ref3$gain, _ref3$startTime = _ref3.startTime, startTime = _ref3$startTime === void 0 ? 0 : _ref3$startTime, _ref3$forcePlay = _ref3.forcePlay, forcePlay = _ref3$forcePlay === void 0 ? false : _ref3$forcePlay;
+                  console.log("astats", startTime, playState);
+                  startTime = audioRef.current.currentTime > 0 ? audioRef.current.currentTime : startTime;
+                  console.log("play", playState, startTime);
+
+                  if (!((bite === null || bite === void 0 ? void 0 : bite._id) !== (selectedBlerp === null || selectedBlerp === void 0 ? void 0 : selectedBlerp._id) && playState === "playing")) {
+                    _context3.next = 8;
+                    break;
+                  }
+
+                  _context3.next = 7;
+                  return audioRef.current.pause();
+
+                case 7:
+                  if (!forcePlay) {
+                    startTime = 0;
+                  }
+
+                case 8:
+                  if (!(playState === "playing" && (bite === null || bite === void 0 ? void 0 : bite._id) === (selectedBlerp === null || selectedBlerp === void 0 ? void 0 : selectedBlerp._id))) {
+                    _context3.next = 11;
+                    break;
+                  }
+
+                  pause();
+                  return _context3.abrupt("return");
+
+                case 11:
+                  audioRef.current = new 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);
+                  audioRef.current.crossOrigin = "anonymous";
+                  console.log("current time", startTime);
+                  audioRef.current.currentTime = startTime;
+                  newGain = gain;
+                  audioRef.current.onended = /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2() {
+                    return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
+                      while (1) {
+                        switch (_context2.prev = _context2.next) {
+                          case 0:
+                            console.log("ended");
+                            setPlayState("played");
+                            _context2.next = 4;
+                            return audioRef.current.pause();
+
+                          case 4:
+                            audioRef.current.currentTime = 0;
+
+                          case 5:
+                          case "end":
+                            return _context2.stop();
+                        }
+                      }
+                    }, _callee2);
+                  }));
+                  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                  gainNode = audioCtx.createGain(); // gainNode.gain.value = 2 // value between 0 and 2 https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API
+
+                  gainNode.gain.setValueAtTime(newGain, 0);
+                  source = audioCtx.createMediaElementSource(audioRef.current);
+                  source.connect(gainNode);
+                  gainNode.connect(audioCtx.destination);
+                  _context3.next = 25;
+                  return audioRef.current.play().then(function () {
+                    console.log("playing", bite === null || bite === void 0 ? void 0 : bite.title);
+                    setPlayState("playing");
+                  }).catch(function (e) {
+                    setPlayState("stopped");
+                  });
+
+                case 25:
+                  // const playPromise = audioRef.current.play();
+                  // if (playPromise !== undefined) {
+                  //     playPromise
+                  //         .then((_) => {
+                  //             // Automatic playback started!
+                  //             // Show playing UI.
+                  //             setPlayState("playing");
+                  //         })
+                  //         .catch((error) => {
+                  //             // Auto-play was prevented
+                  //             // Show paused UI.
+                  //             console.log("playing failed witihin", error);
+                  //         });
+                  // }
+                  _setSelectedBlerp(bite);
+
+                case 26:
+                case "end":
+                  return _context3.stop();
+              }
+            }
+          }, _callee3);
+        }));
+
+        return function play(_x) {
+          return _ref4.apply(this, arguments);
+        };
+      }();
+
+      return /*#__PURE__*/React__default['default'].createElement(BlerpAudioContext.Provider, {
+        value: {
+          selectedBlerp: selectedBlerp,
+          setSelectedBlerp: function setSelectedBlerp(_ref6) {
+            var bite = _ref6.bite;
+
+            _setSelectedBlerp(bite);
+          },
+          pause: pause,
+          play: play,
+          stop: function () {
+            var _stop = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee4() {
+              var _audioRef$current;
+
+              return _regeneratorRuntime__default['default'].wrap(function _callee4$(_context4) {
+                while (1) {
+                  switch (_context4.prev = _context4.next) {
+                    case 0:
+                      setPlayState("stopped");
+                      _context4.next = 3;
+                      return (_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.pause();
+
+                    case 3:
+                      audioRef.current.currentTime = 0;
+
+                    case 4:
+                    case "end":
+                      return _context4.stop();
+                  }
+                }
+              }, _callee4);
+            }));
+
+            function stop() {
+              return _stop.apply(this, arguments);
+            }
+
+            return stop;
+          }(),
+          getPlayState: function getPlayState(_ref7) {
+            var biteId = _ref7.biteId;
+
+            if (biteId === (selectedBlerp && selectedBlerp._id)) {
+              return playState;
+            }
+          },
+          setStartTime: setStartTime
+        }
+      }, children);
+    };
+
     var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
     var BlerpImage$1 = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
       return props.url;
@@ -5704,7 +5693,7 @@
           icons: icons,
           mode: mode === "dark" ? "dark" : "light"
         }, currentTheme)
-      }, /*#__PURE__*/React__default['default'].createElement(SnackbarProvider, null, /*#__PURE__*/React__default['default'].createElement(BlerpAudioContextProvider$1, null, children))));
+      }, /*#__PURE__*/React__default['default'].createElement(SnackbarProvider, null, children)));
     };
 
     var LottieAnimation = function LottieAnimation(_ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blerp/design",
-    "version": "1.2.11",
+    "version": "1.2.13",
     "description": "Blerp UI",
     "main": "dist/index.cjs.js",
     "scripts": {
@@ -12,6 +12,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.14.0",
+        "@blerp/wavesurfer": "^6.4.2",
         "@mui/icons-material": "5.10.16",
         "@mui/material": "5.10.16",
         "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",