@blerp/design 1.2.11 → 1.2.13

package/dist/index.esm.js

@@ -1495,215 +1495,6 @@ Blerp$1.propTypes = {
   handleClickTitle: PropTypes.func.isRequired
 };
 
-var BlerpAudioContext = /*#__PURE__*/createContext({});
-var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
-  var children = _ref.children;
-
-  if (typeof window === "undefined") {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
-  }
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedBlerp = _useState2[0],
-      _setSelectedBlerp = _useState2[1];
-
-  var _useState3 = useState("stopped"),
-      _useState4 = _slicedToArray(_useState3, 2),
-      playState = _useState4[0],
-      setPlayState = _useState4[1];
-
-  var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2);
-      _useState6[0];
-      var setStartTime = _useState6[1]; // const [audioCtx, setAudioCtx] = useState(null);
-  // Refs
-
-
-  var audioRef = useRef(new Audio());
-
-  var pause = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      return _regeneratorRuntime.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( /*#__PURE__*/_regeneratorRuntime.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.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( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-                return _regeneratorRuntime.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.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( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-          var _audioRef$current;
-
-          return _regeneratorRuntime.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.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\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.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\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) {
@@ -2111,15 +1902,10 @@ var ReportedWarning = function ReportedWarning(_ref7) {
 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.createElement(React__default.Fragment, null) : _ref8$Waveform,
-      bite = _ref8.bite;
-      _ref8.playState;
-
-  var _useContext = 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 = useState(false),
       _useState10 = _slicedToArray(_useState9, 2),
@@ -2137,10 +1923,6 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
   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.createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
@@ -2296,7 +2078,9 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       pointerEvents: "none",
       zIndex: "1"
     }
-  }, renderPlayStateIcon()), Waveform && /*#__PURE__*/React__default.createElement(Waveform, null)), /*#__PURE__*/React__default.createElement(Text, {
+  }, renderPlayStateIcon()), Waveform({
+    hovering: hovering
+  })), /*#__PURE__*/React__default.createElement(Text, {
     sx: {
       fontSize: "16px",
       fontWeight: "400",
@@ -2392,6 +2176,211 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
   }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s"))));
 };
 
+var BlerpAudioContext = /*#__PURE__*/createContext({});
+var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedBlerp = _useState2[0],
+      _setSelectedBlerp = _useState2[1];
+
+  var _useState3 = useState("stopped"),
+      _useState4 = _slicedToArray(_useState3, 2),
+      playState = _useState4[0],
+      setPlayState = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2);
+      _useState6[0];
+      var setStartTime = _useState6[1]; // const [audioCtx, setAudioCtx] = useState(null);
+  // Refs
+
+
+  var audioRef = useRef(null);
+
+  var pause = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.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( /*#__PURE__*/_regeneratorRuntime.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.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( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+                return _regeneratorRuntime.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.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( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+          var _audioRef$current;
+
+          return _regeneratorRuntime.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.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\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;
@@ -5684,7 +5673,7 @@ var BlerpTheme = function BlerpTheme(_ref) {
       icons: icons,
       mode: mode === "dark" ? "dark" : "light"
     }, currentTheme)
-  }, /*#__PURE__*/React__default.createElement(SnackbarProvider, null, /*#__PURE__*/React__default.createElement(BlerpAudioContextProvider$1, null, children))));
+  }, /*#__PURE__*/React__default.createElement(SnackbarProvider, null, children)));
 };
 
 var LottieAnimation = function LottieAnimation(_ref) {