@blerp/design 1.2.12 → 1.2.14

package/dist/index.cjs.js

@@ -1577,42 +1577,25 @@ var Container$1 = styled__default['default'].div(_templateObject2$a || (_templat
 });
 
 var AddContentDropdown = function AddContentDropdown(_ref) {
-  var _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [{
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: true
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }] : _ref$options,
+  var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext;
+
+  var item = _ref.item,
       active = _ref.active,
       onOptionClicked = _ref.onOptionClicked;
+  var options = [{
+    name: "Channel Points",
+    value: "CHANNEL_POINTS",
+    added: item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id
+  }, {
+    name: "Bits",
+    value: "BITS",
+    added: item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id
+  }, {
+    name: "WalkOn",
+    value: "WALK_ON",
+    added: item === null || item === void 0 ? void 0 : (_item$walkOnContext = item.walkOnContext) === null || _item$walkOnContext === void 0 ? void 0 : _item$walkOnContext._id
+  }];
+  var anchorRef = React.useRef(null);
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -1621,10 +1604,11 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
 
   var open = Boolean(anchor);
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Button, {
+    ref: anchorRef,
     color: "whiteOverride",
     variant: "outlined",
     onClick: function onClick(e) {
-      if (active) setAnchor(e.target);
+      if (active) setAnchor(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
     },
     sx: {
       width: "100%",
@@ -1639,8 +1623,12 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
         backgroundColor: "grey3.main"
       }
     },
-    endIcon: /*#__PURE__*/React__default['default'].createElement(ArrowDropDownRoundedIcon__default['default'], null)
-  }, "Place"), /*#__PURE__*/React__default['default'].createElement(Popover, {
+    endIcon: /*#__PURE__*/React__default['default'].createElement(ArrowDropDownRoundedIcon__default['default'], {
+      sx: {
+        pointerEvents: "none"
+      }
+    })
+  }, "Last Place"), /*#__PURE__*/React__default['default'].createElement(Popover, {
     open: open,
     anchorEl: anchor,
     anchorOrigin: {
@@ -1721,9 +1709,10 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
 };
 
 var AddContentButton = function AddContentButton(_ref2) {
-  var hovering = _ref2.hovering;
+  var item = _ref2.item,
+      hovering = _ref2.hovering;
       _ref2.openPremiumModal;
-      var onClick = _ref2.onClick;
+      var onOptionClicked = _ref2.onOptionClicked;
 
   var _useState3 = React.useState(false),
       _useState4 = _slicedToArray__default['default'](_useState3, 2),
@@ -1748,8 +1737,9 @@ var AddContentButton = function AddContentButton(_ref2) {
       opacity: hovering ? "1" : "0"
     }
   }, active ? /*#__PURE__*/React__default['default'].createElement(AddContentDropdown, {
+    item: item,
     active: active,
-    onOptionClicked: onClick
+    onOptionClicked: onOptionClicked
   }) : /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       width: "100%"
@@ -1812,22 +1802,27 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
 };
 
 var AddedToIcons = function AddedToIcons(_ref4) {
-  var hovering = _ref4.hovering;
+  var _item$channelPointsCo2, _item$whitelistContex2, _item$walkOnContext2;
+
+  var item = _ref4.item,
+      hovering = _ref4.hovering,
+      _ref4$hide = _ref4.hide,
+      hide = _ref4$hide === void 0 ? false : _ref4$hide;
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     sx: {
       transition: "0.3s",
-      opacity: hovering ? "1" : "0"
+      opacity: hide ? "0" : hovering ? "1" : "0"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(ChannelPointsIcon, {
+  }, (item === null || item === void 0 ? void 0 : (_item$channelPointsCo2 = item.channelPointsContext) === null || _item$channelPointsCo2 === void 0 ? void 0 : _item$channelPointsCo2._id) && /*#__PURE__*/React__default['default'].createElement(ChannelPointsIcon, {
     sx: {
       fontSize: "15px"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(TwitchBitIcon, {
+  }), (item === null || item === void 0 ? void 0 : (_item$whitelistContex2 = item.whitelistContext) === null || _item$whitelistContex2 === void 0 ? void 0 : _item$whitelistContex2._id) && /*#__PURE__*/React__default['default'].createElement(TwitchBitIcon, {
     sx: {
       fontSize: "15px"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(WalkonIcon, {
+  }), (item === null || item === void 0 ? void 0 : (_item$walkOnContext2 = item.walkOnContext) === null || _item$walkOnContext2 === void 0 ? void 0 : _item$walkOnContext2._id) && /*#__PURE__*/React__default['default'].createElement(WalkonIcon, {
     sx: {
       fontSize: "15px"
     }
@@ -1977,8 +1972,7 @@ 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['default'].createElement(React__default['default'].Fragment, null) : _ref8$Waveform,
+  var Waveform = _ref8.Waveform,
       bite = _ref8.bite,
       playState = _ref8.playState,
       play = _ref8.play;
@@ -2066,6 +2060,7 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
 
   var handleAddToPlace = function handleAddToPlace(place) {
     setAddedToPlace(true);
+    console.log(place);
     setTimeout(function () {
       setAddedToPlace(false);
     }, 2000);
@@ -2096,7 +2091,7 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       width: "100%",
       height: "100%",
       borderRadius: "8px",
-      padding: "6px",
+      padding: "10px",
       boxSizing: "border-box",
       position: "relative",
       overflow: "hidden",
@@ -2113,7 +2108,6 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
   }, /*#__PURE__*/React__default['default'].createElement(Stack, {
     className: "blerp-hover",
     onClick: function onClick() {
-      console.log("play cliceckkes");
       play({
         bite: bite
       });
@@ -2141,11 +2135,13 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
   }, /*#__PURE__*/React__default['default'].createElement(Stack, null, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
     rating: bite === null || bite === void 0 ? void 0 : bite.strictAudienceRating
   }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
+    item: bite,
     hovering: hovering
   })), /*#__PURE__*/React__default['default'].createElement("div", null)), /*#__PURE__*/React__default['default'].createElement(AddContentButton, {
+    item: bite,
     hovering: hovering,
-    onClick: function onClick(option) {
-      return handleAddToPlace();
+    onOptionClicked: function onOptionClicked(option) {
+      return handleAddToPlace(option);
     }
   }), /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
@@ -2154,7 +2150,9 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       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",
@@ -2298,9 +2296,9 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
 
   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$audio2, _bite$audio2$mp;
 
-      var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, newGain, audioCtx, gainNode, source;
+      var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, _bite$audio, _bite$audio$mp, newGain, audioCtx, gainNode, source;
 
       return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
         while (1) {
@@ -2308,33 +2306,38 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
             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);
+
+              if (!audioRef.current) {
+                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);
+              }
+
               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;
+                _context3.next = 9;
                 break;
               }
 
-              _context3.next = 7;
+              _context3.next = 8;
               return audioRef.current.pause();
 
-            case 7:
+            case 8:
               if (!forcePlay) {
                 startTime = 0;
               }
 
-            case 8:
+            case 9:
               if (!(playState === "playing" && (bite === null || bite === void 0 ? void 0 : bite._id) === (selectedBlerp === null || selectedBlerp === void 0 ? void 0 : selectedBlerp._id))) {
-                _context3.next = 11;
+                _context3.next = 12;
                 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);
+            case 12:
+              audioRef.current = new Audio(bite === null || bite === void 0 ? void 0 : (_bite$audio2 = bite.audio) === null || _bite$audio2 === void 0 ? void 0 : (_bite$audio2$mp = _bite$audio2.mp3) === null || _bite$audio2$mp === void 0 ? void 0 : _bite$audio2$mp.url);
               audioRef.current.crossOrigin = "anonymous";
               console.log("current time", startTime);
               audioRef.current.currentTime = startTime;
@@ -2366,7 +2369,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
               source = audioCtx.createMediaElementSource(audioRef.current);
               source.connect(gainNode);
               gainNode.connect(audioCtx.destination);
-              _context3.next = 25;
+              _context3.next = 26;
               return audioRef.current.play().then(function () {
                 console.log("playing", bite === null || bite === void 0 ? void 0 : bite.title);
                 setPlayState("playing");
@@ -2374,7 +2377,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
                 setPlayState("stopped");
               });
 
-            case 25:
+            case 26:
               // const playPromise = audioRef.current.play();
               // if (playPromise !== undefined) {
               //     playPromise
@@ -2391,7 +2394,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
               // }
               _setSelectedBlerp(bite);
 
-            case 26:
+            case 27:
             case "end":
               return _context3.stop();
           }

package/dist/index.esm.js

@@ -1502,42 +1502,25 @@ var Container$1 = styled.div(_templateObject2$a || (_templateObject2$a = _tagged
 });
 
 var AddContentDropdown = function AddContentDropdown(_ref) {
-  var _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [{
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: true
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
-  }] : _ref$options,
+  var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext;
+
+  var item = _ref.item,
       active = _ref.active,
       onOptionClicked = _ref.onOptionClicked;
+  var options = [{
+    name: "Channel Points",
+    value: "CHANNEL_POINTS",
+    added: item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id
+  }, {
+    name: "Bits",
+    value: "BITS",
+    added: item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id
+  }, {
+    name: "WalkOn",
+    value: "WALK_ON",
+    added: item === null || item === void 0 ? void 0 : (_item$walkOnContext = item.walkOnContext) === null || _item$walkOnContext === void 0 ? void 0 : _item$walkOnContext._id
+  }];
+  var anchorRef = useRef(null);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1546,10 +1529,11 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
 
   var open = Boolean(anchor);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+    ref: anchorRef,
     color: "whiteOverride",
     variant: "outlined",
     onClick: function onClick(e) {
-      if (active) setAnchor(e.target);
+      if (active) setAnchor(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
     },
     sx: {
       width: "100%",
@@ -1564,8 +1548,12 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
         backgroundColor: "grey3.main"
       }
     },
-    endIcon: /*#__PURE__*/React__default.createElement(ArrowDropDownRoundedIcon, null)
-  }, "Place"), /*#__PURE__*/React__default.createElement(Popover, {
+    endIcon: /*#__PURE__*/React__default.createElement(ArrowDropDownRoundedIcon, {
+      sx: {
+        pointerEvents: "none"
+      }
+    })
+  }, "Last Place"), /*#__PURE__*/React__default.createElement(Popover, {
     open: open,
     anchorEl: anchor,
     anchorOrigin: {
@@ -1646,9 +1634,10 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
 };
 
 var AddContentButton = function AddContentButton(_ref2) {
-  var hovering = _ref2.hovering;
+  var item = _ref2.item,
+      hovering = _ref2.hovering;
       _ref2.openPremiumModal;
-      var onClick = _ref2.onClick;
+      var onOptionClicked = _ref2.onOptionClicked;
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -1673,8 +1662,9 @@ var AddContentButton = function AddContentButton(_ref2) {
       opacity: hovering ? "1" : "0"
     }
   }, active ? /*#__PURE__*/React__default.createElement(AddContentDropdown, {
+    item: item,
     active: active,
-    onOptionClicked: onClick
+    onOptionClicked: onOptionClicked
   }) : /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: "100%"
@@ -1737,22 +1727,27 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
 };
 
 var AddedToIcons = function AddedToIcons(_ref4) {
-  var hovering = _ref4.hovering;
+  var _item$channelPointsCo2, _item$whitelistContex2, _item$walkOnContext2;
+
+  var item = _ref4.item,
+      hovering = _ref4.hovering,
+      _ref4$hide = _ref4.hide,
+      hide = _ref4$hide === void 0 ? false : _ref4$hide;
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     sx: {
       transition: "0.3s",
-      opacity: hovering ? "1" : "0"
+      opacity: hide ? "0" : hovering ? "1" : "0"
     }
-  }, /*#__PURE__*/React__default.createElement(ChannelPointsIcon, {
+  }, (item === null || item === void 0 ? void 0 : (_item$channelPointsCo2 = item.channelPointsContext) === null || _item$channelPointsCo2 === void 0 ? void 0 : _item$channelPointsCo2._id) && /*#__PURE__*/React__default.createElement(ChannelPointsIcon, {
     sx: {
       fontSize: "15px"
     }
-  }), /*#__PURE__*/React__default.createElement(TwitchBitIcon, {
+  }), (item === null || item === void 0 ? void 0 : (_item$whitelistContex2 = item.whitelistContext) === null || _item$whitelistContex2 === void 0 ? void 0 : _item$whitelistContex2._id) && /*#__PURE__*/React__default.createElement(TwitchBitIcon, {
     sx: {
       fontSize: "15px"
     }
-  }), /*#__PURE__*/React__default.createElement(WalkonIcon, {
+  }), (item === null || item === void 0 ? void 0 : (_item$walkOnContext2 = item.walkOnContext) === null || _item$walkOnContext2 === void 0 ? void 0 : _item$walkOnContext2._id) && /*#__PURE__*/React__default.createElement(WalkonIcon, {
     sx: {
       fontSize: "15px"
     }
@@ -1902,8 +1897,7 @@ 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,
+  var Waveform = _ref8.Waveform,
       bite = _ref8.bite,
       playState = _ref8.playState,
       play = _ref8.play;
@@ -1991,6 +1985,7 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
 
   var handleAddToPlace = function handleAddToPlace(place) {
     setAddedToPlace(true);
+    console.log(place);
     setTimeout(function () {
       setAddedToPlace(false);
     }, 2000);
@@ -2021,7 +2016,7 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       width: "100%",
       height: "100%",
       borderRadius: "8px",
-      padding: "6px",
+      padding: "10px",
       boxSizing: "border-box",
       position: "relative",
       overflow: "hidden",
@@ -2038,7 +2033,6 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
   }, /*#__PURE__*/React__default.createElement(Stack, {
     className: "blerp-hover",
     onClick: function onClick() {
-      console.log("play cliceckkes");
       play({
         bite: bite
       });
@@ -2066,11 +2060,13 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
   }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(RatingInfo, {
     rating: bite === null || bite === void 0 ? void 0 : bite.strictAudienceRating
   }), /*#__PURE__*/React__default.createElement(AddedToIcons, {
+    item: bite,
     hovering: hovering
   })), /*#__PURE__*/React__default.createElement("div", null)), /*#__PURE__*/React__default.createElement(AddContentButton, {
+    item: bite,
     hovering: hovering,
-    onClick: function onClick(option) {
-      return handleAddToPlace();
+    onOptionClicked: function onOptionClicked(option) {
+      return handleAddToPlace(option);
     }
   }), /*#__PURE__*/React__default.createElement(Stack, {
     sx: {
@@ -2079,7 +2075,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",
@@ -2223,9 +2221,9 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
 
   var play = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref3) {
-      var _bite$audio, _bite$audio$mp;
+      var _bite$audio2, _bite$audio2$mp;
 
-      var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, newGain, audioCtx, gainNode, source;
+      var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, _bite$audio, _bite$audio$mp, newGain, audioCtx, gainNode, source;
 
       return _regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
@@ -2233,33 +2231,38 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
             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);
+
+              if (!audioRef.current) {
+                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);
+              }
+
               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;
+                _context3.next = 9;
                 break;
               }
 
-              _context3.next = 7;
+              _context3.next = 8;
               return audioRef.current.pause();
 
-            case 7:
+            case 8:
               if (!forcePlay) {
                 startTime = 0;
               }
 
-            case 8:
+            case 9:
               if (!(playState === "playing" && (bite === null || bite === void 0 ? void 0 : bite._id) === (selectedBlerp === null || selectedBlerp === void 0 ? void 0 : selectedBlerp._id))) {
-                _context3.next = 11;
+                _context3.next = 12;
                 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);
+            case 12:
+              audioRef.current = new Audio(bite === null || bite === void 0 ? void 0 : (_bite$audio2 = bite.audio) === null || _bite$audio2 === void 0 ? void 0 : (_bite$audio2$mp = _bite$audio2.mp3) === null || _bite$audio2$mp === void 0 ? void 0 : _bite$audio2$mp.url);
               audioRef.current.crossOrigin = "anonymous";
               console.log("current time", startTime);
               audioRef.current.currentTime = startTime;
@@ -2291,7 +2294,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
               source = audioCtx.createMediaElementSource(audioRef.current);
               source.connect(gainNode);
               gainNode.connect(audioCtx.destination);
-              _context3.next = 25;
+              _context3.next = 26;
               return audioRef.current.play().then(function () {
                 console.log("playing", bite === null || bite === void 0 ? void 0 : bite.title);
                 setPlayState("playing");
@@ -2299,7 +2302,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
                 setPlayState("stopped");
               });
 
-            case 25:
+            case 26:
               // const playPromise = audioRef.current.play();
               // if (playPromise !== undefined) {
               //     playPromise
@@ -2316,7 +2319,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
               // }
               _setSelectedBlerp(bite);
 
-            case 26:
+            case 27:
             case "end":
               return _context3.stop();
           }

package/dist/index.umd.js

@@ -1522,42 +1522,25 @@
     });
 
     var AddContentDropdown = function AddContentDropdown(_ref) {
-      var _ref$options = _ref.options,
-          options = _ref$options === void 0 ? [{
-        name: "Place 1",
-        value: "PLACE_1",
-        added: false
-      }, {
-        name: "Place 1",
-        value: "PLACE_1",
-        added: true
-      }, {
-        name: "Place 1",
-        value: "PLACE_1",
-        added: false
-      }, {
-        name: "Place 1",
-        value: "PLACE_1",
-        added: false
-      }, {
-        name: "Place 1",
-        value: "PLACE_1",
-        added: false
-      }, {
-        name: "Place 1",
-        value: "PLACE_1",
-        added: false
-      }, {
-        name: "Place 1",
-        value: "PLACE_1",
-        added: false
-      }, {
-        name: "Place 1",
-        value: "PLACE_1",
-        added: false
-      }] : _ref$options,
+      var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext;
+
+      var item = _ref.item,
           active = _ref.active,
           onOptionClicked = _ref.onOptionClicked;
+      var options = [{
+        name: "Channel Points",
+        value: "CHANNEL_POINTS",
+        added: item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id
+      }, {
+        name: "Bits",
+        value: "BITS",
+        added: item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id
+      }, {
+        name: "WalkOn",
+        value: "WALK_ON",
+        added: item === null || item === void 0 ? void 0 : (_item$walkOnContext = item.walkOnContext) === null || _item$walkOnContext === void 0 ? void 0 : _item$walkOnContext._id
+      }];
+      var anchorRef = React.useRef(null);
 
       var _useState = React.useState(null),
           _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -1566,10 +1549,11 @@
 
       var open = Boolean(anchor);
       return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Button, {
+        ref: anchorRef,
         color: "whiteOverride",
         variant: "outlined",
         onClick: function onClick(e) {
-          if (active) setAnchor(e.target);
+          if (active) setAnchor(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
         },
         sx: {
           width: "100%",
@@ -1584,8 +1568,12 @@
             backgroundColor: "grey3.main"
           }
         },
-        endIcon: /*#__PURE__*/React__default['default'].createElement(ArrowDropDownRoundedIcon__default['default'], null)
-      }, "Place"), /*#__PURE__*/React__default['default'].createElement(Popover, {
+        endIcon: /*#__PURE__*/React__default['default'].createElement(ArrowDropDownRoundedIcon__default['default'], {
+          sx: {
+            pointerEvents: "none"
+          }
+        })
+      }, "Last Place"), /*#__PURE__*/React__default['default'].createElement(Popover, {
         open: open,
         anchorEl: anchor,
         anchorOrigin: {
@@ -1666,9 +1654,10 @@
     };
 
     var AddContentButton = function AddContentButton(_ref2) {
-      var hovering = _ref2.hovering;
+      var item = _ref2.item,
+          hovering = _ref2.hovering;
           _ref2.openPremiumModal;
-          var onClick = _ref2.onClick;
+          var onOptionClicked = _ref2.onOptionClicked;
 
       var _useState3 = React.useState(false),
           _useState4 = _slicedToArray__default['default'](_useState3, 2),
@@ -1693,8 +1682,9 @@
           opacity: hovering ? "1" : "0"
         }
       }, active ? /*#__PURE__*/React__default['default'].createElement(AddContentDropdown, {
+        item: item,
         active: active,
-        onOptionClicked: onClick
+        onOptionClicked: onOptionClicked
       }) : /*#__PURE__*/React__default['default'].createElement("div", {
         style: {
           width: "100%"
@@ -1757,22 +1747,27 @@
     };
 
     var AddedToIcons = function AddedToIcons(_ref4) {
-      var hovering = _ref4.hovering;
+      var _item$channelPointsCo2, _item$whitelistContex2, _item$walkOnContext2;
+
+      var item = _ref4.item,
+          hovering = _ref4.hovering,
+          _ref4$hide = _ref4.hide,
+          hide = _ref4$hide === void 0 ? false : _ref4$hide;
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         sx: {
           transition: "0.3s",
-          opacity: hovering ? "1" : "0"
+          opacity: hide ? "0" : hovering ? "1" : "0"
         }
-      }, /*#__PURE__*/React__default['default'].createElement(ChannelPointsIcon, {
+      }, (item === null || item === void 0 ? void 0 : (_item$channelPointsCo2 = item.channelPointsContext) === null || _item$channelPointsCo2 === void 0 ? void 0 : _item$channelPointsCo2._id) && /*#__PURE__*/React__default['default'].createElement(ChannelPointsIcon, {
         sx: {
           fontSize: "15px"
         }
-      }), /*#__PURE__*/React__default['default'].createElement(TwitchBitIcon, {
+      }), (item === null || item === void 0 ? void 0 : (_item$whitelistContex2 = item.whitelistContext) === null || _item$whitelistContex2 === void 0 ? void 0 : _item$whitelistContex2._id) && /*#__PURE__*/React__default['default'].createElement(TwitchBitIcon, {
         sx: {
           fontSize: "15px"
         }
-      }), /*#__PURE__*/React__default['default'].createElement(WalkonIcon, {
+      }), (item === null || item === void 0 ? void 0 : (_item$walkOnContext2 = item.walkOnContext) === null || _item$walkOnContext2 === void 0 ? void 0 : _item$walkOnContext2._id) && /*#__PURE__*/React__default['default'].createElement(WalkonIcon, {
         sx: {
           fontSize: "15px"
         }
@@ -1922,8 +1917,7 @@
     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,
+      var Waveform = _ref8.Waveform,
           bite = _ref8.bite,
           playState = _ref8.playState,
           play = _ref8.play;
@@ -2011,6 +2005,7 @@
 
       var handleAddToPlace = function handleAddToPlace(place) {
         setAddedToPlace(true);
+        console.log(place);
         setTimeout(function () {
           setAddedToPlace(false);
         }, 2000);
@@ -2041,7 +2036,7 @@
           width: "100%",
           height: "100%",
           borderRadius: "8px",
-          padding: "6px",
+          padding: "10px",
           boxSizing: "border-box",
           position: "relative",
           overflow: "hidden",
@@ -2058,7 +2053,6 @@
       }, /*#__PURE__*/React__default['default'].createElement(Stack, {
         className: "blerp-hover",
         onClick: function onClick() {
-          console.log("play cliceckkes");
           play({
             bite: bite
           });
@@ -2086,11 +2080,13 @@
       }, /*#__PURE__*/React__default['default'].createElement(Stack, null, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
         rating: bite === null || bite === void 0 ? void 0 : bite.strictAudienceRating
       }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
+        item: bite,
         hovering: hovering
       })), /*#__PURE__*/React__default['default'].createElement("div", null)), /*#__PURE__*/React__default['default'].createElement(AddContentButton, {
+        item: bite,
         hovering: hovering,
-        onClick: function onClick(option) {
-          return handleAddToPlace();
+        onOptionClicked: function onOptionClicked(option) {
+          return handleAddToPlace(option);
         }
       }), /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
@@ -2099,7 +2095,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",
@@ -2243,9 +2241,9 @@
 
       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$audio2, _bite$audio2$mp;
 
-          var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, newGain, audioCtx, gainNode, source;
+          var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, _bite$audio, _bite$audio$mp, newGain, audioCtx, gainNode, source;
 
           return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
             while (1) {
@@ -2253,33 +2251,38 @@
                 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);
+
+                  if (!audioRef.current) {
+                    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);
+                  }
+
                   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;
+                    _context3.next = 9;
                     break;
                   }
 
-                  _context3.next = 7;
+                  _context3.next = 8;
                   return audioRef.current.pause();
 
-                case 7:
+                case 8:
                   if (!forcePlay) {
                     startTime = 0;
                   }
 
-                case 8:
+                case 9:
                   if (!(playState === "playing" && (bite === null || bite === void 0 ? void 0 : bite._id) === (selectedBlerp === null || selectedBlerp === void 0 ? void 0 : selectedBlerp._id))) {
-                    _context3.next = 11;
+                    _context3.next = 12;
                     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);
+                case 12:
+                  audioRef.current = new Audio(bite === null || bite === void 0 ? void 0 : (_bite$audio2 = bite.audio) === null || _bite$audio2 === void 0 ? void 0 : (_bite$audio2$mp = _bite$audio2.mp3) === null || _bite$audio2$mp === void 0 ? void 0 : _bite$audio2$mp.url);
                   audioRef.current.crossOrigin = "anonymous";
                   console.log("current time", startTime);
                   audioRef.current.currentTime = startTime;
@@ -2311,7 +2314,7 @@
                   source = audioCtx.createMediaElementSource(audioRef.current);
                   source.connect(gainNode);
                   gainNode.connect(audioCtx.destination);
-                  _context3.next = 25;
+                  _context3.next = 26;
                   return audioRef.current.play().then(function () {
                     console.log("playing", bite === null || bite === void 0 ? void 0 : bite.title);
                     setPlayState("playing");
@@ -2319,7 +2322,7 @@
                     setPlayState("stopped");
                   });
 
-                case 25:
+                case 26:
                   // const playPromise = audioRef.current.play();
                   // if (playPromise !== undefined) {
                   //     playPromise
@@ -2336,7 +2339,7 @@
                   // }
                   _setSelectedBlerp(bite);
 
-                case 26:
+                case 27:
                 case "end":
                   return _context3.stop();
               }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blerp/design",
-    "version": "1.2.12",
+    "version": "1.2.14",
     "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",