@blerp/design 1.2.13 → 1.2.15

package/dist/index.cjs.js

@@ -20,6 +20,7 @@ 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 _ = require('.');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
@@ -131,8 +132,8 @@ var SearchRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchRounde
 var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
 var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
 
-var _templateObject$i, _templateObject2$b, _templateObject3$8, _templateObject4$7;
-var BlerpImage$2 = styled__default['default'].div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
+var _templateObject$j, _templateObject2$b, _templateObject3$8, _templateObject4$7;
+var BlerpImage$3 = styled__default['default'].div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
   return props.url;
 });
 var SaveContainer$2 = styled__default['default'].div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 20px;\n    height: 20px;\n    opacity: 1;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 5px;\n    transition: 0.3s;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), function (props) {
@@ -178,7 +179,7 @@ var BlerpImageRow = function BlerpImageRow(_ref) {
     return /*#__PURE__*/React__default['default'].createElement(Stack, {
       direction: "row",
       marginTop: sizeParams.buttonSize === "small" && "28px"
-    }, /*#__PURE__*/React__default['default'].createElement(BlerpImage$2, {
+    }, /*#__PURE__*/React__default['default'].createElement(BlerpImage$3, {
       style: {
         width: sizeParams.imageSize,
         height: sizeParams.imageSize
@@ -208,7 +209,7 @@ var BlerpImageRow = function BlerpImageRow(_ref) {
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     marginTop: sizeParams.buttonSize === "small" && "28px"
-  }, /*#__PURE__*/React__default['default'].createElement(BlerpImage$2, {
+  }, /*#__PURE__*/React__default['default'].createElement(BlerpImage$3, {
     style: {
       width: sizeParams.imageSize,
       height: sizeParams.imageSize
@@ -302,8 +303,8 @@ var BlerpImageRow = function BlerpImageRow(_ref) {
   }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, null)))))));
 };
 
-var _templateObject$h;
-var ReactionButton$1 = styled__default['default'].div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    transition: 0.2s;\n    margin-right: 0;\n    cursor: pointer;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), function (props) {
+var _templateObject$i;
+var ReactionButton$1 = styled__default['default'].div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral__default['default'](["\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    transition: 0.2s;\n    margin-right: 0;\n    cursor: pointer;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), function (props) {
   return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5Override;
 }, function (props) {
   return props.theme.colors.ibisRed;
@@ -446,8 +447,8 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
   }, "Organize")));
 };
 
-var _templateObject$g;
-var LineClamp$2 = styled__default['default'].div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    margin: 0;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"])));
+var _templateObject$h;
+var LineClamp$2 = styled__default['default'].div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    margin: 0;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"])));
 
 var BlerpTitleRow = function BlerpTitleRow(_ref) {
   var bite = _ref.bite,
@@ -1570,49 +1571,138 @@ Blerp$1.propTypes = {
   handleClickTitle: PropTypes__default['default'].func.isRequired
 };
 
-var _templateObject$f, _templateObject2$a;
-var PremiumContainer = styled__default['default'].div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n    background: transparent;\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    margin: 20px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])));
+var UserCard$1 = function UserCard(_ref) {
+  var _user$twitchChannelIn, _user$twitchChannelIn2;
+
+  var user = _ref.user;
+  return /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row",
+    sx: {
+      backgroundColor: "grey3.main",
+      minWidth: "280px",
+      maxWidth: "320px",
+      height: "121px",
+      borderRadius: "12px",
+      alignItems: "center",
+      padding: "16px",
+      boxSizing: "border-box",
+      justifyContent: "space-around"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+    sx: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("img", {
+    style: {
+      width: "89px",
+      height: "89px",
+      borderRadius: "50%",
+      border: "2px solid transparent",
+      borderColor: (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn = user.twitchChannelInfo) === null || _user$twitchChannelIn === void 0 ? void 0 : _user$twitchChannelIn.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn2 = user.twitchChannelInfo) === null || _user$twitchChannelIn2 === void 0 ? void 0 : _user$twitchChannelIn2.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent",
+      padding: "6px",
+      boxSizing: "border-box"
+    },
+    src: user === null || user === void 0 ? void 0 : user.profileUrl,
+    alt: "profile"
+  }), (user === null || user === void 0 ? void 0 : user.verified) && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.VerifiedRounded, {
+    sx: {
+      position: "absolute",
+      bottom: "5px",
+      right: "5px",
+      fontSize: "17px"
+    }
+  })), /*#__PURE__*/React__default['default'].createElement(Stack, {
+    sx: {
+      flex: 1,
+      marginLeft: "22px"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(Text, {
+    sx: {
+      fontSize: "18px",
+      fontWeight: "400",
+      maxWidth: "150px",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      marginBottom: "10px",
+      overflow: "hidden"
+    }
+  }, user === null || user === void 0 ? void 0 : user.username), /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row",
+    sx: {
+      alignItems: "center",
+      justifyContent: "space-around"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+    alignItems: "center"
+  }, /*#__PURE__*/React__default['default'].createElement(Text, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: "400"
+    }
+  }, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
+    sx: {
+      fontSize: "12px",
+      fontWeight: "300",
+      color: "grey7.main"
+    }
+  }, "followers")), /*#__PURE__*/React__default['default'].createElement(Stack, {
+    alignItems: "center"
+  }, /*#__PURE__*/React__default['default'].createElement(Text, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: "400"
+    }
+  }, (user === null || user === void 0 ? void 0 : user.created) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
+    sx: {
+      fontSize: "12px",
+      fontWeight: "300",
+      color: "grey7.main"
+    }
+  }, "created")))));
+};
+
+var _templateObject$g, _templateObject2$a;
+var PremiumContainer = styled__default['default'].div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n    background: transparent;\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])));
 var Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n"])), function (props) {
   return props.theme.colors.grey7;
 });
 
 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
+  var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext, _item$discordContext, _item$soundEmotesCont;
+
+  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: "Place 1",
-    value: "PLACE_1",
-    added: false
+    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: "Place 1",
-    value: "PLACE_1",
-    added: false
+    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
   }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
+    name: "Discord",
+    value: "DISCORD",
+    added: item === null || item === void 0 ? void 0 : (_item$discordContext = item.discordContext) === null || _item$discordContext === void 0 ? void 0 : _item$discordContext._id
   }, {
-    name: "Place 1",
-    value: "PLACE_1",
-    added: false
+    name: "Sound Emotes",
+    value: "SOUND_EMOTES",
+    added: item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont._id
   }, {
-    name: "Place 1",
-    value: "PLACE_1",
+    name: "Add To Group",
+    value: "ADD_TO_GROUP",
     added: false
   }, {
-    name: "Place 1",
-    value: "PLACE_1",
+    name: "Suggest To...",
+    value: "SUGGEST",
     added: false
-  }] : _ref$options,
-      active = _ref.active,
-      onOptionClicked = _ref.onOptionClicked;
+  }];
+  var anchorRef = React.useRef(null);
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -1621,10 +1711,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 +1730,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 +1816,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 +1844,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%"
@@ -1778,11 +1875,12 @@ var AddContentButton = function AddContentButton(_ref2) {
 
 var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
   var saved = _ref3.saved,
-      count = _ref3.count;
-      _ref3.onClick;
+      count = _ref3.count,
+      onClick = _ref3.onClick;
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
-    alignItems: "center"
+    alignItems: "center",
+    onClick: onClick
   }, saved ? /*#__PURE__*/React__default['default'].createElement(FavoriteIcon__default['default'], {
     sx: {
       fontSize: "16px",
@@ -1810,24 +1908,28 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
     }
   }, count));
 };
-
 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"
     }
@@ -1975,7 +2077,7 @@ var ReportedWarning = function ReportedWarning(_ref7) {
 };
 
 var NewBlerp$1 = function NewBlerp(_ref8) {
-  var _bite$image, _bite$image$original, _bite$ownerObject;
+  var _bite$image, _bite$image$original, _bite$ownerObject, _bite$ownerObject2;
 
   var Waveform = _ref8.Waveform,
       bite = _ref8.bite,
@@ -1992,6 +2094,12 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       addedToPlace = _useState12[0],
       setAddedToPlace = _useState12[1];
 
+  var _useState13 = React.useState(null),
+      _useState14 = _slicedToArray__default['default'](_useState13, 2),
+      userCardRef = _useState14[0],
+      setUserCardRef = _useState14[1];
+
+  var openUserCard = Boolean(userCardRef);
   var formatter = Intl.NumberFormat("en", {
     notation: "compact"
   });
@@ -2065,6 +2173,7 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
 
   var handleAddToPlace = function handleAddToPlace(place) {
     setAddedToPlace(true);
+    console.log(place);
     setTimeout(function () {
       setAddedToPlace(false);
     }, 2000);
@@ -2074,7 +2183,7 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(PremiumContainer, {
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PremiumContainer, {
     style: {
       background: addedToPlace ? "white" : (bite === null || bite === void 0 ? void 0 : bite.isPremium) && "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)"
     }
@@ -2086,7 +2195,6 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       return console.log("clicked save");
     }
   }), /*#__PURE__*/React__default['default'].createElement(Container$1, null, /*#__PURE__*/React__default['default'].createElement(Stack, {
-    id: "blerp-audio-button-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
     sx: {
       backgroundImage: "url(".concat(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url, ")"),
       backgroundSize: "cover",
@@ -2095,7 +2203,7 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       width: "100%",
       height: "100%",
       borderRadius: "8px",
-      padding: "6px",
+      padding: "10px",
       boxSizing: "border-box",
       position: "relative",
       overflow: "hidden",
@@ -2110,12 +2218,12 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       setHovering(false);
     }
   }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+    id: "blerp-audio-button-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
     className: "blerp-hover",
     onClick: function onClick() {
-      console.log("play cliceckkes");
       play({
         bite: bite
-      });
+      }); // play({ bite });
     },
     sx: {
       width: "100%",
@@ -2135,23 +2243,26 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
     justifyContent: "space-between",
     width: "100%",
     sx: {
-      position: "relative"
+      position: "relative",
+      minHeight: "20px"
     }
   }, /*#__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: {
       transition: "0.3s",
       opacity: hovering ? "1" : "0",
       pointerEvents: "none",
-      zIndex: "1"
+      zIndex: "3"
     }
   }, renderPlayStateIcon()), Waveform({
     hovering: hovering
@@ -2241,14 +2352,212 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       whiteSpace: "nowrap",
       overflow: "hidden",
       margin: "0 10px"
-    }
+    },
+    onClick: function onClick(e) {
+      setUserCardRef(e.target);
+    } // onMouseLeave={() => {
+    //     setUserCardRef(null);
+    // }}
+
   }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject.username), /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       fontWeight: "300",
       fontSize: "12px",
       color: "grey7.main"
     }
-  }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s"))));
+  }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))), /*#__PURE__*/React__default['default'].createElement(Popover, {
+    id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2._id),
+    open: openUserCard,
+    anchorEl: userCardRef,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    PaperProps: {
+      // onMouseEnter: (e) => {
+      //     setUserCardRef(e.target);
+      // },
+      sx: {
+        backgroundColor: "transparent"
+      },
+      onMouseLeave: function onMouseLeave() {
+        setUserCardRef(null);
+      }
+    },
+    onClose: function onClose() {
+      return setUserCardRef(null);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(UserCard$1, {
+    user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
+  })));
+};
+
+var _templateObject$f;
+var BlerpImage$2 = styled__default['default'].div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n    background-image: url(", ");\n    background-repeat: no-repeat;\n    background-size: cover;\n    width: 140px;\n    height: 140px;\n    border-radius: 12px;\n    transition: 0.3s;\n    position: absolute;\n    opacity: ", ";\n    transform: rotate(", ");\n"])), function (props) {
+  return props.image;
+}, function (props) {
+  return props.firstImage ? "1" : props.hovering ? "1" : "0.5";
+}, function (props) {
+  return props.hovering ? "45deg" : "20deg";
+});
+var GroupCard$1 = function GroupCard(_ref) {
+  var _group$blerps14;
+
+  var group = _ref.group;
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      hovering = _useState2[0],
+      setHovering = _useState2[1];
+
+  var formatter = Intl.NumberFormat("en", {
+    notation: "compact"
+  });
+  var saveCount = formatter.format(group === null || group === void 0 ? void 0 : group.totalSaveCount);
+
+  var calculateBottom = function calculateBottom(index) {
+    if (hovering) {
+      return "-20px";
+    }
+
+    return "".concat((index - 2) * 10, "px");
+  };
+
+  var calculateLeft = function calculateLeft(index) {
+    var _group$blerps, _group$blerps2, _group$blerps5, _group$blerps8, _group$blerps11;
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps = group.blerps) === null || _group$blerps === void 0 ? void 0 : _group$blerps.length) === 1) {
+      return "25%";
+    }
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps2 = group.blerps) === null || _group$blerps2 === void 0 ? void 0 : _group$blerps2.length) === 2) {
+      var _group$blerps4;
+
+      if (hovering) {
+        var _group$blerps3;
+
+        return "".concat((index - 0.05) / (group === null || group === void 0 ? void 0 : (_group$blerps3 = group.blerps) === null || _group$blerps3 === void 0 ? void 0 : _group$blerps3.length) * 100, "%");
+      }
+
+      return "".concat((index + 0.5) / ((group === null || group === void 0 ? void 0 : (_group$blerps4 = group.blerps) === null || _group$blerps4 === void 0 ? void 0 : _group$blerps4.length) + 2.5) * 100, "%");
+    }
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps5 = group.blerps) === null || _group$blerps5 === void 0 ? void 0 : _group$blerps5.length) === 3) {
+      var _group$blerps7;
+
+      if (hovering) {
+        var _group$blerps6;
+
+        return "".concat((index - 0.35) / (group === null || group === void 0 ? void 0 : (_group$blerps6 = group.blerps) === null || _group$blerps6 === void 0 ? void 0 : _group$blerps6.length) * 100, "%");
+      }
+
+      return "".concat((index + 0.4) / ((group === null || group === void 0 ? void 0 : (_group$blerps7 = group.blerps) === null || _group$blerps7 === void 0 ? void 0 : _group$blerps7.length) + 2.5) * 100, "%");
+    }
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps8 = group.blerps) === null || _group$blerps8 === void 0 ? void 0 : _group$blerps8.length) === 4) {
+      var _group$blerps10;
+
+      if (hovering) {
+        var _group$blerps9;
+
+        return "".concat((index - 0.6) / (group === null || group === void 0 ? void 0 : (_group$blerps9 = group.blerps) === null || _group$blerps9 === void 0 ? void 0 : _group$blerps9.length) * 100, "%");
+      }
+
+      return "".concat((index + 0.2) / ((group === null || group === void 0 ? void 0 : (_group$blerps10 = group.blerps) === null || _group$blerps10 === void 0 ? void 0 : _group$blerps10.length) + 2.5) * 100, "%");
+    }
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps11 = group.blerps) === null || _group$blerps11 === void 0 ? void 0 : _group$blerps11.length) === 5) {
+      var _group$blerps13;
+
+      if (hovering) {
+        var _group$blerps12;
+
+        return "".concat((index - 0.7) / (group === null || group === void 0 ? void 0 : (_group$blerps12 = group.blerps) === null || _group$blerps12 === void 0 ? void 0 : _group$blerps12.length) * 100, "%");
+      }
+
+      return "".concat((index + 0.2) / ((group === null || group === void 0 ? void 0 : (_group$blerps13 = group.blerps) === null || _group$blerps13 === void 0 ? void 0 : _group$blerps13.length) + 2.5) * 100, "%");
+    }
+
+    return "".concat((index - 2) * 10, "px");
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    sx: {
+      minWidth: "250px",
+      maxWidth: "290px",
+      minHeight: "250px",
+      maxHeight: "290px",
+      width: "100%",
+      height: "100%",
+      aspectRatio: "1 / 1",
+      backgroundColor: "grey2.main",
+      borderRadius: "12px",
+      padding: "30px",
+      position: "relative",
+      boxSizing: "border-box",
+      flex: "1",
+      overflow: "hidden"
+    },
+    onMouseEnter: function onMouseEnter() {
+      setHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setHovering(false);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    height: "100%"
+  }, /*#__PURE__*/React__default['default'].createElement(_.Text, {
+    sx: {
+      color: "grey5.main",
+      fontSize: "12px",
+      fontWeight: "300"
+    }
+  }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+    sx: {
+      whiteSpace: "nowrap",
+      overflowX: "hidden",
+      textOverflow: "ellipsis",
+      maxWidth: "200px",
+      fontSize: "24px",
+      fontWeight: "600",
+      lineHeight: "1",
+      height: "31px",
+      marginBottom: "5px"
+    }
+  }, group === null || group === void 0 ? void 0 : group.title), /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    direction: "row"
+  }, /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
+    item: group,
+    hovering: true
+  }), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
+    saved: group === null || group === void 0 ? void 0 : group.saved,
+    count: saveCount
+  })), /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    direction: "row",
+    sx: {
+      width: "100%",
+      height: "100%",
+      right: "0",
+      bottom: "0"
+    }
+  }, (_group$blerps14 = group.blerps) === null || _group$blerps14 === void 0 ? void 0 : _group$blerps14.map(function (blerp, index) {
+    var _group$blerps15, _blerp$image, _blerp$image$original;
+
+    return /*#__PURE__*/React__default['default'].createElement(BlerpImage$2, {
+      index: index,
+      firstImage: index === ((_group$blerps15 = group.blerps) === null || _group$blerps15 === void 0 ? void 0 : _group$blerps15.length) - 1,
+      hovering: hovering,
+      image: blerp === null || blerp === void 0 ? void 0 : (_blerp$image = blerp.image) === null || _blerp$image === void 0 ? void 0 : (_blerp$image$original = _blerp$image.original) === null || _blerp$image$original === void 0 ? void 0 : _blerp$image$original.url,
+      style: {
+        bottom: calculateBottom(index),
+        left: calculateLeft(index)
+      }
+    });
+  }))));
 };
 
 var BlerpAudioContext = /*#__PURE__*/React.createContext({});
@@ -2258,7 +2567,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
       selectedBlerp = _useState2[0],
-      _setSelectedBlerp = _useState2[1];
+      setSelectedBlerp = _useState2[1];
 
   var _useState3 = React.useState("stopped"),
       _useState4 = _slicedToArray__default['default'](_useState3, 2),
@@ -2297,7 +2606,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
     };
   }();
 
-  var play = /*#__PURE__*/function () {
+  var mplay = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3(_ref3) {
       var _bite$audio, _bite$audio$mp;
 
@@ -2308,33 +2617,38 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
           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;
+
+              if (!audioRef.current) {
+                audioRef.current = new Audio();
+              }
+
               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;
+                _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:
+            case 12:
               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);
@@ -2367,7 +2681,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");
@@ -2375,7 +2689,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
                 setPlayState("stopped");
               });
 
-            case 25:
+            case 26:
               // const playPromise = audioRef.current.play();
               // if (playPromise !== undefined) {
               //     playPromise
@@ -2390,9 +2704,9 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
               //             console.log("playing failed witihin", error);
               //         });
               // }
-              _setSelectedBlerp(bite);
+              setSelectedBlerp(bite);
 
-            case 26:
+            case 27:
             case "end":
               return _context3.stop();
           }
@@ -2400,7 +2714,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
       }, _callee3);
     }));
 
-    return function play(_x) {
+    return function mplay(_x) {
       return _ref4.apply(this, arguments);
     };
   }();
@@ -2408,29 +2722,35 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
   return /*#__PURE__*/React__default['default'].createElement(BlerpAudioContext.Provider, {
     value: {
       selectedBlerp: selectedBlerp,
-      setSelectedBlerp: function setSelectedBlerp(_ref6) {
-        var bite = _ref6.bite;
-
-        _setSelectedBlerp(bite);
-      },
+      setSelectedBlerp: setSelectedBlerp,
       pause: pause,
-      play: play,
+      play: mplay,
+      // play: async (bite, onPlay) => {
+      //   // const tempBite = {...bite}
+      //   if (bite?._id !== selectedBlerp?._id) {
+      //     setPlayState("playing")
+      //     setSelectedBlerp({...bite})
+      //     return
+      //   }
+      //   if (playState === "playing" && bite?._id === selectedBlerp?._id) {
+      //     setPlayState("paused")
+      //     return 
+      //   }
+      //   if (bite?._id === selectedBlerp?._id) {
+      //     setPlayState("playing")
+      //     return
+      //   }
+      // },
       stop: function () {
         var _stop = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee4() {
-          var _audioRef$current;
-
           return _regeneratorRuntime__default['default'].wrap(function _callee4$(_context4) {
             while (1) {
               switch (_context4.prev = _context4.next) {
                 case 0:
-                  setPlayState("stopped");
-                  _context4.next = 3;
-                  return (_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.pause();
-
-                case 3:
-                  audioRef.current.currentTime = 0;
+                  setPlayState("stopped"); // await audioRef.current?.pause();
+                  // audioRef.current.currentTime = 0;
 
-                case 4:
+                case 1:
                 case "end":
                   return _context4.stop();
               }
@@ -2444,13 +2764,12 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
 
         return stop;
       }(),
-      getPlayState: function getPlayState(_ref7) {
-        var biteId = _ref7.biteId;
-
+      getPlayState: function getPlayState(biteId) {
         if (biteId === (selectedBlerp && selectedBlerp._id)) {
           return playState;
         }
       },
+      setPlayState: setPlayState,
       setStartTime: setStartTime
     }
   }, children);
@@ -91188,6 +91507,8 @@ var Modal = material.Modal;
 var Popover = material.Popover;
 var Blerp = Blerp$1;
 var NewBlerp = NewBlerp$1;
+var GroupCard = GroupCard$1;
+var UserCard = UserCard$1;
 var BlerpAudioContextProvider = BlerpAudioContextProvider$1;
 var IconButton = material.IconButton;
 var Toggle = Toggle$1;
@@ -91484,6 +91805,7 @@ exports.Dropdown = Dropdown;
 exports.FloatingActionButton = FloatingActionButton;
 exports.GiftIcon = GiftIcon;
 exports.Grid = Grid;
+exports.GroupCard = GroupCard;
 exports.IconButton = IconButton;
 exports.ImageList = ImageList;
 exports.Input = Input;
@@ -91539,6 +91861,7 @@ exports.Tooltip = Tooltip;
 exports.TwitchBitIcon = TwitchBitIcon;
 exports.TwitchIcon = TwitchIcon;
 exports.UnsafeIcon = UnsafeIcon;
+exports.UserCard = UserCard;
 exports.UserLibraryHeader = UserLibraryHeader;
 exports.UserProfileHeader = UserProfileHeader;
 exports.WalkonIcon = WalkonIcon;