@blerp/design 1.2.7 → 1.2.8

package/dist/index.cjs.js

@@ -12,8 +12,10 @@ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiter
 var iconsMaterial = require('@mui/icons-material');
 var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
 var LockRoundedIcon = require('@mui/icons-material/LockRounded');
-var WaveSurfer = require('@blerp/wavesurfer');
-var CursorPlugin = require('@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+require('@blerp/wavesurfer');
+require('@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js');
 var AddRoundedIcon = require('@mui/icons-material/AddRounded');
 var ArrowDropDownRoundedIcon = require('@mui/icons-material/ArrowDropDownRounded');
 var FavoriteIcon = require('@mui/icons-material/Favorite');
@@ -22,8 +24,6 @@ var PauseRoundedIcon = require('@mui/icons-material/PauseRounded');
 var PlayArrowRoundedIcon = require('@mui/icons-material/PlayArrowRounded');
 var WarningRoundedIcon = require('@mui/icons-material/WarningRounded');
 require('@mui/icons-material/DoNotDisturbRounded');
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
 var MoreHorizRoundedIcon = require('@mui/icons-material/MoreHorizRounded');
 var reactPalette = require('react-palette');
@@ -91,8 +91,8 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
 var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
-var WaveSurfer__default = /*#__PURE__*/_interopDefaultLegacy(WaveSurfer);
-var CursorPlugin__default = /*#__PURE__*/_interopDefaultLegacy(CursorPlugin);
+var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
 var ArrowDropDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDropDownRoundedIcon);
 var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
@@ -100,8 +100,6 @@ var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBor
 var PauseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseRoundedIcon);
 var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
 var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
-var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
-var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
 var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
 var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
@@ -1577,7 +1575,10 @@ Blerp$1.propTypes = {
 var BlerpAudioContext = /*#__PURE__*/React.createContext({});
 var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
   var children = _ref.children;
-  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+  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),
@@ -1625,7 +1626,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
     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, gainNode, source;
+      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) {
@@ -1684,13 +1685,14 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
                   }
                 }, _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 = 24;
+              _context3.next = 25;
               return audioRef.current.play().then(function () {
                 console.log("playing", bite === null || bite === void 0 ? void 0 : bite.title);
                 setPlayState("playing");
@@ -1698,7 +1700,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
                 setPlayState("stopped");
               });
 
-            case 24:
+            case 25:
               // const playPromise = audioRef.current.play();
               // if (playPromise !== undefined) {
               //     playPromise
@@ -1715,7 +1717,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
               // }
               _setSelectedBlerp(bite);
 
-            case 25:
+            case 26:
             case "end":
               return _context3.stop();
           }
@@ -1774,8 +1776,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
           return playState;
         }
       },
-      setStartTime: setStartTime,
-      audioContext: audioCtx
+      setStartTime: setStartTime
     }
   }, children);
 };
@@ -2123,57 +2124,98 @@ var BlerpWaveform = function BlerpWaveform(_ref6) {
       setWavesurfer = _useState8[1];
 
   React.useEffect(function () {
-    if (hovering && wavesurfer) {
-      wavesurfer.load(audio);
-    } else if (hovering && !wavesurfer && !hasRendered) {
-      if (!hasRendered && document.querySelector("#blerp-audio-button-".concat(id)) && document.querySelector("#blerp-waveform-".concat(id))) {
-        if (document.querySelector("#blerp-waveform-".concat(id)).children.length === 0) {
-          console.log("Creating Wave");
-          var mWavesurfer = WaveSurfer__default['default'].create({
-            container: document.querySelector("#blerp-waveform-".concat(id)),
-            barWidth: 2,
-            barHeight: 1.5,
-            // the height of the wave
-            barGap: 2,
-            // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
-            progressColor: "#ffffff",
-            hoverColor: "#ffffff99",
-            barRadius: 2,
-            height: 30,
-            hideScrollBar: true,
-            plugins: [CursorPlugin__default['default'].create({
-              showTime: false,
-              opacity: 0,
-              customShowTimeStyle: {
-                "background-color": "#000",
-                color: "#fff",
-                padding: "2px",
-                "font-size": "10px"
-              }
-            })]
-          });
-          mWavesurfer.on("error", function (e) {
-            console.warn(e);
-          });
-          mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.on("seek", function (prog) {
-            if (prog) {
-              console.log("SEEEEEEK", prog, bite);
-              mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.setMute(true);
-              mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.play();
-              play({
-                bite: bite,
-                startTime: mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.getCurrentTime(),
-                forcePlay: true
-              });
+    var create = /*#__PURE__*/function () {
+      var _ref7 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
+        var _WaveSurfer, _CursorPlugin, mWavesurfer;
+
+        return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                console.log("creating", hovering, wavesurfer, hasRendered);
+
+                if (!(hovering && wavesurfer)) {
+                  _context.next = 5;
+                  break;
+                }
+
+                wavesurfer.load(audio);
+                _context.next = 17;
+                break;
+
+              case 5:
+                if (!(hovering && !wavesurfer && !hasRendered && document.querySelector("#blerp-waveform-".concat(id)) && document.querySelector("#blerp-waveform-".concat(id)).children.length === 0)) {
+                  _context.next = 17;
+                  break;
+                }
+
+                _context.next = 8;
+                return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@blerp/wavesurfer')); });
+
+              case 8:
+                _WaveSurfer = _context.sent.default;
+                _context.next = 11;
+                return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@blerp/wavesurfer/src/plugin/cursor')); });
+
+              case 11:
+                _CursorPlugin = _context.sent.default;
+                mWavesurfer = _WaveSurfer.create({
+                  container: document.querySelector("#blerp-waveform-".concat(id)),
+                  barWidth: 2,
+                  barHeight: 1.5,
+                  // the height of the wave
+                  barGap: 2,
+                  // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
+                  progressColor: "#ffffff",
+                  hoverColor: "#ffffff99",
+                  barRadius: 2,
+                  height: 30,
+                  hideScrollBar: true,
+                  plugins: [_CursorPlugin.create({
+                    showTime: false,
+                    opacity: 0,
+                    customShowTimeStyle: {
+                      "background-color": "#000",
+                      color: "#fff",
+                      padding: "2px",
+                      "font-size": "10px"
+                    }
+                  })]
+                });
+                mWavesurfer.on("error", function (e) {
+                  console.warn(e);
+                });
+                mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.on("seek", function (prog) {
+                  if (prog) {
+                    console.log("SEEEEEEK", prog, bite);
+                    mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.setMute(true);
+                    mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.play();
+                    play({
+                      bite: bite,
+                      startTime: mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.getCurrentTime(),
+                      forcePlay: true
+                    });
+                  }
+                }); // Load audio from URL
+                // mWavesurfer.load(audio);
+
+                setWavesurfer(mWavesurfer);
+                setHasRendered(true);
+
+              case 17:
+              case "end":
+                return _context.stop();
             }
-          }); // Load audio from URL
-          // mWavesurfer.load(audio);
+          }
+        }, _callee);
+      }));
 
-          setWavesurfer(mWavesurfer);
-          setHasRendered(true);
-        }
-      }
-    }
+      return function create() {
+        return _ref7.apply(this, arguments);
+      };
+    }();
+
+    create();
   }, [wavesurfer, bite, play, audio, hovering, hasRendered, id]);
   React.useEffect(function () {
     // if (wavesurfer && selectedBlerp?._id === bite?._id) {
@@ -2227,11 +2269,11 @@ var BlerpWaveform = function BlerpWaveform(_ref6) {
   });
 };
 
-var ReportedWarning = function ReportedWarning(_ref8) {
-  var showWarning = _ref8.showWarning,
-      saved = _ref8.saved,
-      count = _ref8.count,
-      onClick = _ref8.onClick;
+var ReportedWarning = function ReportedWarning(_ref9) {
+  var showWarning = _ref9.showWarning,
+      saved = _ref9.saved,
+      count = _ref9.count,
+      onClick = _ref9.onClick;
 
   var _useState9 = React.useState(showWarning),
       _useState10 = _slicedToArray__default['default'](_useState9, 2),
@@ -2312,11 +2354,11 @@ var ReportedWarning = function ReportedWarning(_ref8) {
   })), renderInfo());
 };
 
-var NewBlerp$1 = function NewBlerp(_ref9) {
+var NewBlerp$1 = function NewBlerp(_ref10) {
   var _bite$image, _bite$image$original, _bite$ownerObject;
 
-  var bite = _ref9.bite;
-      _ref9.playState;
+  var bite = _ref10.bite;
+      _ref10.playState;
 
   var _useContext2 = React.useContext(BlerpAudioContext),
       play = _useContext2.play,

package/dist/index.esm.js

@@ -9,8 +9,10 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral
 import { PauseCircleOutlineRounded, LockRounded, CheckRounded, CloseRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
 import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
 import LockRoundedIcon from '@mui/icons-material/LockRounded';
-import WaveSurfer from '@blerp/wavesurfer';
-import CursorPlugin from '@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import '@blerp/wavesurfer';
+import '@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js';
 import AddRoundedIcon from '@mui/icons-material/AddRounded';
 import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
 import FavoriteIcon from '@mui/icons-material/Favorite';
@@ -19,8 +21,6 @@ import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
 import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import '@mui/icons-material/DoNotDisturbRounded';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
 import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
 import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
 import { usePalette } from 'react-palette';
@@ -1500,7 +1500,10 @@ Blerp$1.propTypes = {
 var BlerpAudioContext = /*#__PURE__*/createContext({});
 var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
   var children = _ref.children;
-  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+  if (typeof window === "undefined") {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  }
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1548,7 +1551,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
     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, gainNode, source;
+      var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, newGain, audioCtx, gainNode, source;
 
       return _regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
@@ -1607,13 +1610,14 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
                   }
                 }, _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 = 24;
+              _context3.next = 25;
               return audioRef.current.play().then(function () {
                 console.log("playing", bite === null || bite === void 0 ? void 0 : bite.title);
                 setPlayState("playing");
@@ -1621,7 +1625,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
                 setPlayState("stopped");
               });
 
-            case 24:
+            case 25:
               // const playPromise = audioRef.current.play();
               // if (playPromise !== undefined) {
               //     playPromise
@@ -1638,7 +1642,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
               // }
               _setSelectedBlerp(bite);
 
-            case 25:
+            case 26:
             case "end":
               return _context3.stop();
           }
@@ -1697,8 +1701,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
           return playState;
         }
       },
-      setStartTime: setStartTime,
-      audioContext: audioCtx
+      setStartTime: setStartTime
     }
   }, children);
 };
@@ -2046,57 +2049,98 @@ var BlerpWaveform = function BlerpWaveform(_ref6) {
       setWavesurfer = _useState8[1];
 
   useEffect(function () {
-    if (hovering && wavesurfer) {
-      wavesurfer.load(audio);
-    } else if (hovering && !wavesurfer && !hasRendered) {
-      if (!hasRendered && document.querySelector("#blerp-audio-button-".concat(id)) && document.querySelector("#blerp-waveform-".concat(id))) {
-        if (document.querySelector("#blerp-waveform-".concat(id)).children.length === 0) {
-          console.log("Creating Wave");
-          var mWavesurfer = WaveSurfer.create({
-            container: document.querySelector("#blerp-waveform-".concat(id)),
-            barWidth: 2,
-            barHeight: 1.5,
-            // the height of the wave
-            barGap: 2,
-            // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
-            progressColor: "#ffffff",
-            hoverColor: "#ffffff99",
-            barRadius: 2,
-            height: 30,
-            hideScrollBar: true,
-            plugins: [CursorPlugin.create({
-              showTime: false,
-              opacity: 0,
-              customShowTimeStyle: {
-                "background-color": "#000",
-                color: "#fff",
-                padding: "2px",
-                "font-size": "10px"
-              }
-            })]
-          });
-          mWavesurfer.on("error", function (e) {
-            console.warn(e);
-          });
-          mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.on("seek", function (prog) {
-            if (prog) {
-              console.log("SEEEEEEK", prog, bite);
-              mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.setMute(true);
-              mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.play();
-              play({
-                bite: bite,
-                startTime: mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.getCurrentTime(),
-                forcePlay: true
-              });
+    var create = /*#__PURE__*/function () {
+      var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _WaveSurfer, _CursorPlugin, mWavesurfer;
+
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                console.log("creating", hovering, wavesurfer, hasRendered);
+
+                if (!(hovering && wavesurfer)) {
+                  _context.next = 5;
+                  break;
+                }
+
+                wavesurfer.load(audio);
+                _context.next = 17;
+                break;
+
+              case 5:
+                if (!(hovering && !wavesurfer && !hasRendered && document.querySelector("#blerp-waveform-".concat(id)) && document.querySelector("#blerp-waveform-".concat(id)).children.length === 0)) {
+                  _context.next = 17;
+                  break;
+                }
+
+                _context.next = 8;
+                return import('@blerp/wavesurfer');
+
+              case 8:
+                _WaveSurfer = _context.sent.default;
+                _context.next = 11;
+                return import('@blerp/wavesurfer/src/plugin/cursor');
+
+              case 11:
+                _CursorPlugin = _context.sent.default;
+                mWavesurfer = _WaveSurfer.create({
+                  container: document.querySelector("#blerp-waveform-".concat(id)),
+                  barWidth: 2,
+                  barHeight: 1.5,
+                  // the height of the wave
+                  barGap: 2,
+                  // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
+                  progressColor: "#ffffff",
+                  hoverColor: "#ffffff99",
+                  barRadius: 2,
+                  height: 30,
+                  hideScrollBar: true,
+                  plugins: [_CursorPlugin.create({
+                    showTime: false,
+                    opacity: 0,
+                    customShowTimeStyle: {
+                      "background-color": "#000",
+                      color: "#fff",
+                      padding: "2px",
+                      "font-size": "10px"
+                    }
+                  })]
+                });
+                mWavesurfer.on("error", function (e) {
+                  console.warn(e);
+                });
+                mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.on("seek", function (prog) {
+                  if (prog) {
+                    console.log("SEEEEEEK", prog, bite);
+                    mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.setMute(true);
+                    mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.play();
+                    play({
+                      bite: bite,
+                      startTime: mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.getCurrentTime(),
+                      forcePlay: true
+                    });
+                  }
+                }); // Load audio from URL
+                // mWavesurfer.load(audio);
+
+                setWavesurfer(mWavesurfer);
+                setHasRendered(true);
+
+              case 17:
+              case "end":
+                return _context.stop();
             }
-          }); // Load audio from URL
-          // mWavesurfer.load(audio);
+          }
+        }, _callee);
+      }));
 
-          setWavesurfer(mWavesurfer);
-          setHasRendered(true);
-        }
-      }
-    }
+      return function create() {
+        return _ref7.apply(this, arguments);
+      };
+    }();
+
+    create();
   }, [wavesurfer, bite, play, audio, hovering, hasRendered, id]);
   useEffect(function () {
     // if (wavesurfer && selectedBlerp?._id === bite?._id) {
@@ -2150,11 +2194,11 @@ var BlerpWaveform = function BlerpWaveform(_ref6) {
   });
 };
 
-var ReportedWarning = function ReportedWarning(_ref8) {
-  var showWarning = _ref8.showWarning,
-      saved = _ref8.saved,
-      count = _ref8.count,
-      onClick = _ref8.onClick;
+var ReportedWarning = function ReportedWarning(_ref9) {
+  var showWarning = _ref9.showWarning,
+      saved = _ref9.saved,
+      count = _ref9.count,
+      onClick = _ref9.onClick;
 
   var _useState9 = useState(showWarning),
       _useState10 = _slicedToArray(_useState9, 2),
@@ -2235,11 +2279,11 @@ var ReportedWarning = function ReportedWarning(_ref8) {
   })), renderInfo());
 };
 
-var NewBlerp$1 = function NewBlerp(_ref9) {
+var NewBlerp$1 = function NewBlerp(_ref10) {
   var _bite$image, _bite$image$original, _bite$ownerObject;
 
-  var bite = _ref9.bite;
-      _ref9.playState;
+  var bite = _ref10.bite;
+      _ref10.playState;
 
   var _useContext2 = useContext(BlerpAudioContext),
       play = _useContext2.play,

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    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('@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('@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')) :
-    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', '@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', '@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) :
-    (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.WaveSurfer, global.CursorPlugin, 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));
-}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, WaveSurfer, CursorPlugin, 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';
+    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')) :
+    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) :
+    (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));
+}(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';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,8 +34,8 @@
     var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
     var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
     var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
-    var WaveSurfer__default = /*#__PURE__*/_interopDefaultLegacy(WaveSurfer);
-    var CursorPlugin__default = /*#__PURE__*/_interopDefaultLegacy(CursorPlugin);
+    var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
+    var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
     var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
     var ArrowDropDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDropDownRoundedIcon);
     var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
@@ -43,8 +43,6 @@
     var PauseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseRoundedIcon);
     var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
     var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
-    var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
-    var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
     var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
     var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
     var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
@@ -1520,7 +1518,10 @@
     var BlerpAudioContext = /*#__PURE__*/React.createContext({});
     var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
       var children = _ref.children;
-      var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+      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),
@@ -1568,7 +1569,7 @@
         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, gainNode, source;
+          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) {
@@ -1627,13 +1628,14 @@
                       }
                     }, _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 = 24;
+                  _context3.next = 25;
                   return audioRef.current.play().then(function () {
                     console.log("playing", bite === null || bite === void 0 ? void 0 : bite.title);
                     setPlayState("playing");
@@ -1641,7 +1643,7 @@
                     setPlayState("stopped");
                   });
 
-                case 24:
+                case 25:
                   // const playPromise = audioRef.current.play();
                   // if (playPromise !== undefined) {
                   //     playPromise
@@ -1658,7 +1660,7 @@
                   // }
                   _setSelectedBlerp(bite);
 
-                case 25:
+                case 26:
                 case "end":
                   return _context3.stop();
               }
@@ -1717,8 +1719,7 @@
               return playState;
             }
           },
-          setStartTime: setStartTime,
-          audioContext: audioCtx
+          setStartTime: setStartTime
         }
       }, children);
     };
@@ -2066,57 +2067,98 @@
           setWavesurfer = _useState8[1];
 
       React.useEffect(function () {
-        if (hovering && wavesurfer) {
-          wavesurfer.load(audio);
-        } else if (hovering && !wavesurfer && !hasRendered) {
-          if (!hasRendered && document.querySelector("#blerp-audio-button-".concat(id)) && document.querySelector("#blerp-waveform-".concat(id))) {
-            if (document.querySelector("#blerp-waveform-".concat(id)).children.length === 0) {
-              console.log("Creating Wave");
-              var mWavesurfer = WaveSurfer__default['default'].create({
-                container: document.querySelector("#blerp-waveform-".concat(id)),
-                barWidth: 2,
-                barHeight: 1.5,
-                // the height of the wave
-                barGap: 2,
-                // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
-                progressColor: "#ffffff",
-                hoverColor: "#ffffff99",
-                barRadius: 2,
-                height: 30,
-                hideScrollBar: true,
-                plugins: [CursorPlugin__default['default'].create({
-                  showTime: false,
-                  opacity: 0,
-                  customShowTimeStyle: {
-                    "background-color": "#000",
-                    color: "#fff",
-                    padding: "2px",
-                    "font-size": "10px"
-                  }
-                })]
-              });
-              mWavesurfer.on("error", function (e) {
-                console.warn(e);
-              });
-              mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.on("seek", function (prog) {
-                if (prog) {
-                  console.log("SEEEEEEK", prog, bite);
-                  mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.setMute(true);
-                  mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.play();
-                  play({
-                    bite: bite,
-                    startTime: mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.getCurrentTime(),
-                    forcePlay: true
-                  });
+        var create = /*#__PURE__*/function () {
+          var _ref7 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
+            var _WaveSurfer, _CursorPlugin, mWavesurfer;
+
+            return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    console.log("creating", hovering, wavesurfer, hasRendered);
+
+                    if (!(hovering && wavesurfer)) {
+                      _context.next = 5;
+                      break;
+                    }
+
+                    wavesurfer.load(audio);
+                    _context.next = 17;
+                    break;
+
+                  case 5:
+                    if (!(hovering && !wavesurfer && !hasRendered && document.querySelector("#blerp-waveform-".concat(id)) && document.querySelector("#blerp-waveform-".concat(id)).children.length === 0)) {
+                      _context.next = 17;
+                      break;
+                    }
+
+                    _context.next = 8;
+                    return import('@blerp/wavesurfer');
+
+                  case 8:
+                    _WaveSurfer = _context.sent.default;
+                    _context.next = 11;
+                    return import('@blerp/wavesurfer/src/plugin/cursor');
+
+                  case 11:
+                    _CursorPlugin = _context.sent.default;
+                    mWavesurfer = _WaveSurfer.create({
+                      container: document.querySelector("#blerp-waveform-".concat(id)),
+                      barWidth: 2,
+                      barHeight: 1.5,
+                      // the height of the wave
+                      barGap: 2,
+                      // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
+                      progressColor: "#ffffff",
+                      hoverColor: "#ffffff99",
+                      barRadius: 2,
+                      height: 30,
+                      hideScrollBar: true,
+                      plugins: [_CursorPlugin.create({
+                        showTime: false,
+                        opacity: 0,
+                        customShowTimeStyle: {
+                          "background-color": "#000",
+                          color: "#fff",
+                          padding: "2px",
+                          "font-size": "10px"
+                        }
+                      })]
+                    });
+                    mWavesurfer.on("error", function (e) {
+                      console.warn(e);
+                    });
+                    mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.on("seek", function (prog) {
+                      if (prog) {
+                        console.log("SEEEEEEK", prog, bite);
+                        mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.setMute(true);
+                        mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.play();
+                        play({
+                          bite: bite,
+                          startTime: mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.getCurrentTime(),
+                          forcePlay: true
+                        });
+                      }
+                    }); // Load audio from URL
+                    // mWavesurfer.load(audio);
+
+                    setWavesurfer(mWavesurfer);
+                    setHasRendered(true);
+
+                  case 17:
+                  case "end":
+                    return _context.stop();
                 }
-              }); // Load audio from URL
-              // mWavesurfer.load(audio);
+              }
+            }, _callee);
+          }));
 
-              setWavesurfer(mWavesurfer);
-              setHasRendered(true);
-            }
-          }
-        }
+          return function create() {
+            return _ref7.apply(this, arguments);
+          };
+        }();
+
+        create();
       }, [wavesurfer, bite, play, audio, hovering, hasRendered, id]);
       React.useEffect(function () {
         // if (wavesurfer && selectedBlerp?._id === bite?._id) {
@@ -2170,11 +2212,11 @@
       });
     };
 
-    var ReportedWarning = function ReportedWarning(_ref8) {
-      var showWarning = _ref8.showWarning,
-          saved = _ref8.saved,
-          count = _ref8.count,
-          onClick = _ref8.onClick;
+    var ReportedWarning = function ReportedWarning(_ref9) {
+      var showWarning = _ref9.showWarning,
+          saved = _ref9.saved,
+          count = _ref9.count,
+          onClick = _ref9.onClick;
 
       var _useState9 = React.useState(showWarning),
           _useState10 = _slicedToArray__default['default'](_useState9, 2),
@@ -2255,11 +2297,11 @@
       })), renderInfo());
     };
 
-    var NewBlerp$1 = function NewBlerp(_ref9) {
+    var NewBlerp$1 = function NewBlerp(_ref10) {
       var _bite$image, _bite$image$original, _bite$ownerObject;
 
-      var bite = _ref9.bite;
-          _ref9.playState;
+      var bite = _ref10.bite;
+          _ref10.playState;
 
       var _useContext2 = React.useContext(BlerpAudioContext),
           play = _useContext2.play,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blerp/design",
-    "version": "1.2.7",
+    "version": "1.2.8",
     "description": "Blerp UI",
     "main": "dist/index.cjs.js",
     "scripts": {