@blerp/design 1.2.16 → 1.2.18

package/dist/index.cjs.js

@@ -14,12 +14,12 @@ var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
 var LockRoundedIcon = require('@mui/icons-material/LockRounded');
 var AddRoundedIcon = require('@mui/icons-material/AddRounded');
 var ArrowDropDownRoundedIcon = require('@mui/icons-material/ArrowDropDownRounded');
+require('@mui/icons-material/DoNotDisturbRounded');
 var FavoriteIcon = require('@mui/icons-material/Favorite');
 var FavoriteBorderIcon = require('@mui/icons-material/FavoriteBorder');
 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');
@@ -1057,7 +1057,7 @@ var TikTokIcon = function TikTokIcon(_ref28) {
   })))));
 };
 
-var BlerpTopRow = function BlerpTopRow(_ref) {
+var BlerpTopRow$1 = function BlerpTopRow(_ref) {
   var _bite$topReactions, _bite$topReactions2, _bite$topReactions3;
 
   var secondaryActionButton = _ref.secondaryActionButton,
@@ -1501,7 +1501,7 @@ var Blerp$1 = function Blerp(_ref) {
     getColors: function getColors(colors) {
       return setProfileColors(colors);
     }
-  }), /*#__PURE__*/React__default['default'].createElement(BlerpTopRow, {
+  }), /*#__PURE__*/React__default['default'].createElement(BlerpTopRow$1, {
     bite: bite,
     isOwner: isOwner,
     sizeParams: sizeParams,
@@ -1573,14 +1573,18 @@ Blerp$1.propTypes = {
 var UserCard$1 = function UserCard(_ref) {
   var _user$twitchChannelIn, _user$twitchChannelIn2;
 
-  var user = _ref.user;
+  var user = _ref.user,
+      onUsernameClick = _ref.onUsernameClick,
+      onFollowerClick = _ref.onFollowerClick,
+      onCreatedClick = _ref.onCreatedClick,
+      collapsed = _ref.collapsed;
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     sx: {
-      backgroundColor: "grey3.main",
+      backgroundColor: "grey4.main",
       minWidth: "280px",
       maxWidth: "320px",
-      height: "121px",
+      height: collapsed ? "69px" : "121px",
       borderRadius: "12px",
       alignItems: "center",
       padding: "16px",
@@ -1593,12 +1597,12 @@ var UserCard$1 = function UserCard(_ref) {
     }
   }, /*#__PURE__*/React__default['default'].createElement("img", {
     style: {
-      width: "89px",
-      height: "89px",
+      width: collapsed ? "49px" : "89px",
+      height: collapsed ? "49px" : "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",
+      padding: collapsed ? "3px" : "6px",
       boxSizing: "border-box"
     },
     src: user === null || user === void 0 ? void 0 : user.profileUrl,
@@ -1606,8 +1610,8 @@ var UserCard$1 = function UserCard(_ref) {
   }), (user === null || user === void 0 ? void 0 : user.verified) && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.VerifiedRounded, {
     sx: {
       position: "absolute",
-      bottom: "5px",
-      right: "5px",
+      bottom: collapsed ? "0" : "5px",
+      right: collapsed ? "0" : "5px",
       fontSize: "17px"
     }
   })), /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -1622,44 +1626,148 @@ var UserCard$1 = function UserCard(_ref) {
       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, {
+      marginBottom: !collapsed && "10px",
+      overflow: "hidden",
+      cursor: "pointer",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onUsernameClick
+  }, user === null || user === void 0 ? void 0 : user.username), !collapsed && /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     sx: {
       alignItems: "center",
       justifyContent: "space-around"
     }
   }, /*#__PURE__*/React__default['default'].createElement(Stack, {
-    alignItems: "center"
+    alignItems: "center",
+    sx: {
+      cursor: "poiner",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onFollowerClick
   }, /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       fontSize: "14px",
-      fontWeight: "400"
+      fontWeight: "400",
+      cursor: "inherit"
     }
   }, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "300",
-      color: "grey7.main"
+      color: "grey7.main",
+      cursor: "inherit"
     }
   }, "followers")), /*#__PURE__*/React__default['default'].createElement(Stack, {
-    alignItems: "center"
+    alignItems: "center",
+    sx: {
+      cursor: "poiner",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onCreatedClick
   }, /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       fontSize: "14px",
-      fontWeight: "400"
+      fontWeight: "400",
+      cursor: "inherit"
     }
   }, (user === null || user === void 0 ? void 0 : user.created) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "300",
-      color: "grey7.main"
+      color: "grey7.main",
+      cursor: "inherit"
     }
   }, "created")))));
 };
 
+var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
+  var user = _ref.user,
+      onUsernameClick = _ref.onUsernameClick,
+      onFollowerClick = _ref.onFollowerClick,
+      onCreatedClick = _ref.onCreatedClick;
+
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      userCardRef = _useState2[0],
+      setUserCardRef = _useState2[1];
+
+  var openUserCard = Boolean(userCardRef);
+  return /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row",
+    onClick: function onClick(e) {
+      setUserCardRef(e.target);
+    },
+    onMouseEnter: function onMouseEnter(e) {
+      setTimeout(function () {
+        setUserCardRef(e.target);
+      }, [500]);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      setUserCardRef(null);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(Popover, {
+    open: openUserCard,
+    anchorEl: userCardRef,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    disablePortal: true,
+    hideBackdrop: true,
+    sx: {
+      pointerEvents: "none"
+    },
+    PaperProps: {
+      // onMouseEnter: (e) => {
+      //     setUserCardRef(e.target);
+      // },
+      sx: {
+        pointerEvents: "auto",
+        backgroundColor: "transparent",
+        borderRadius: "12px"
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        setUserCardRef(null);
+      }
+    } // onClose={() => setUserCardRef(null)}
+
+  }, /*#__PURE__*/React__default['default'].createElement(UserCard$1, {
+    onUsernameClick: onUsernameClick,
+    onFollowerClick: onFollowerClick,
+    onCreatedClick: onCreatedClick,
+    collapsed: true,
+    user: user
+  })), /*#__PURE__*/React__default['default'].createElement(Text, {
+    sx: {
+      fontWeight: "300",
+      fontSize: "12px",
+      color: "grey7.main",
+      maxWidth: "95px",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      margin: "0 10px",
+      cursor: "pointer",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    }
+  }, user === null || user === void 0 ? void 0 : user.username));
+};
+
 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) {
@@ -1721,10 +1829,11 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
       height: "30px",
       transition: "0.3s",
       cursor: active ? "pointer" : "default",
-      opacity: active ? "1" : "0",
       justifyContent: "space-between",
       marginRight: "10px",
       backgroundColor: "#2C323380",
+      opacity: active ? "1" : "0",
+      whiteSpace: "nowrap",
       "&:hover": {
         backgroundColor: "grey3.main"
       }
@@ -1816,40 +1925,28 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
 
 var AddContentButton = function AddContentButton(_ref2) {
   var item = _ref2.item,
-      hovering = _ref2.hovering;
+      hovering = _ref2.hovering,
+      hoveringAddTo = _ref2.hoveringAddTo,
+      setHoveringAddTo = _ref2.setHoveringAddTo;
       _ref2.openPremiumModal;
-      var onOptionClicked = _ref2.onOptionClicked;
-
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      active = _useState4[0],
-      setActive = _useState4[1];
-
-  React.useEffect(function () {
-    if (hovering === false) {
-      setActive(false);
-    }
-  }, [hovering]);
+      var onOptionClicked = _ref2.onOptionClicked,
+      onPlusClick = _ref2.onPlusClick;
+  var added = false;
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     width: "100%",
     sx: {
-      position: "absolute",
-      top: "0px",
-      left: "0px",
       transition: "0.3s",
-      padding: "10px",
       boxSizing: "border-box",
       opacity: hovering ? "1" : "0"
+    },
+    onMouseLeave: function onMouseLeave() {
+      setHoveringAddTo(false);
     }
-  }, active ? /*#__PURE__*/React__default['default'].createElement(AddContentDropdown, {
+  }, /*#__PURE__*/React__default['default'].createElement(AddContentDropdown, {
     item: item,
-    active: active,
+    active: hoveringAddTo,
     onOptionClicked: onOptionClicked
-  }) : /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      width: "100%"
-    }
   }), /*#__PURE__*/React__default['default'].createElement(IconButton, {
     sx: {
       width: "30px",
@@ -1859,15 +1956,16 @@ var AddContentButton = function AddContentButton(_ref2) {
         backgroundColor: "grey7.main"
       }
     },
-    onClick: function onClick(e) {
+    onMouseEnter: function onMouseEnter(e) {
       e.stopPropagation();
-      setActive(!active);
-    }
+      setHoveringAddTo(true);
+    },
+    onClick: onPlusClick
   }, /*#__PURE__*/React__default['default'].createElement(AddRoundedIcon__default['default'], {
     sx: {
       transition: "0.3s",
       color: "notBlack.override",
-      transform: active && "rotate(45deg)"
+      transform: added 
     }
   })));
 };
@@ -1876,6 +1974,10 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
   var saved = _ref3.saved,
       count = _ref3.count,
       onClick = _ref3.onClick;
+  var formatter = Intl.NumberFormat("en", {
+    notation: "compact"
+  });
+  var savedCount = formatter.format(count);
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     alignItems: "center",
@@ -1905,7 +2007,7 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
       fontSize: "12px",
       fontWeight: "400"
     }
-  }, count));
+  }, savedCount));
 };
 var AddedToIcons = function AddedToIcons(_ref4) {
   var _item$channelPointsCo2, _item$whitelistContex2, _item$walkOnContext2;
@@ -1989,22 +2091,141 @@ var RatingInfo = function RatingInfo(_ref5) {
       return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
   }
 }; // const BlerpWaveform = ({ hovering, bite }) => {
+//     const id = bite?._id;
+//     const audio = bite?.audio?.mp3?.url;
+//     const { play, getPlayState, selectedBlerp } = useContext(BlerpAudioContext);
+//     const [hasRendered, setHasRendered] = useState(false);
+//     const [wavesurfer, setWavesurfer] = useState(null);
+//     useEffect(() => {
+//         const create = async () => {
+//             console.log("creating", hovering, wavesurfer, hasRendered);
+//             if (hovering && wavesurfer) {
+//                 wavesurfer.load(audio);
+//             } else if (
+//                 hovering &&
+//                 !wavesurfer &&
+//                 !hasRendered &&
+//                 document.querySelector(`#blerp-waveform-${id}`) &&
+//                 document.querySelector(`#blerp-waveform-${id}`).children
+//                     .length === 0
+//             ) {
+//                 const WaveSurfer = (await import("@blerp/wavesurfer")).default;
+//                 const CursorPlugin = (
+//                     await import("@blerp/wavesurfer/src/plugin/cursor")
+//                 ).default;
+//                 let mWavesurfer = WaveSurfer.create({
+//                     container: document.querySelector(`#blerp-waveform-${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?.on("seek", (prog) => {
+//                     if (prog) {
+//                         console.log("SEEEEEEK", prog, bite);
+//                         mWavesurfer?.setMute(true);
+//                         mWavesurfer?.play();
+//                         play({
+//                             bite: bite,
+//                             startTime: mWavesurfer?.getCurrentTime(),
+//                             forcePlay: true,
+//                         });
+//                     }
+//                 });
+//                 // Load audio from URL
+//                 // mWavesurfer.load(audio);
+//                 setWavesurfer(mWavesurfer);
+//                 setHasRendered(true);
+//             }
+//         };
+//         create();
+//     }, [wavesurfer, bite, play, audio, hovering, hasRendered, id]);
+//     useEffect(() => {
+//         // if (wavesurfer && selectedBlerp?._id === bite?._id) {
+//         //     wavesurfer?.on("seek", (prog) => {
+//         //         if (prog) {
+//         //             console.log("SEEEEEEK", prog, selectedBlerp);
+//         //             play({
+//         //                 bite: bite,
+//         //                 startTime: wavesurfer?.getCurrentTime(),
+//         //             });
+//         //             wavesurfer?.setMute(true);
+//         //             wavesurfer?.play();
+//         //         }
+//         //     });
+//         // } else {
+//         //     wavesurfer?.un("seek");
+//         // }
+//         if (getPlayState({ biteId: bite?._id }) === "playing") {
+//             wavesurfer?.setMute(true);
+//             wavesurfer?.play();
+//             // Play button
+//             // console.log(wavesurfer.play());
+//         }
+//         if (getPlayState({ biteId: bite?._id }) === "paused") {
+//             wavesurfer?.setMute(true);
+//             wavesurfer?.pause();
+//             // Play button
+//             // console.log(wavesurfer.play());
+//         }
+//         if (getPlayState({ biteId: bite?._id }) === "stopped") {
+//             wavesurfer?.setMute(true);
+//             console.log("stop");
+//             wavesurfer?.stop();
+//             // Play button
+//             // console.log(wavesurfer.play());
+//         }
+//     }, [bite, getPlayState, wavesurfer]);
+//     return (
+//         <div
+//             id={`blerp-waveform-${id}`}
+//             style={{
+//                 height: "30px",
+//                 width: "100%",
+//                 transition: "0.3s",
+//                 opacity: hovering ? "1" : "0",
+//             }}
+//         >
+//             {/* <!-- Here be the waveform --> */}
+//         </div>
+//     );
+// };
 
-var ReportedWarning = function ReportedWarning(_ref7) {
-  var showWarning = _ref7.showWarning,
-      saved = _ref7.saved,
-      count = _ref7.count,
-      onClick = _ref7.onClick;
 
-  var _useState5 = React.useState(showWarning),
-      _useState6 = _slicedToArray__default['default'](_useState5, 2),
-      show = _useState6[0],
-      setShow = _useState6[1];
+var ReportedWarning = function ReportedWarning(_ref6) {
+  var showWarning = _ref6.showWarning,
+      saved = _ref6.saved,
+      count = _ref6.count,
+      onClick = _ref6.onClick;
 
-  var _useState7 = React.useState(false),
-      _useState8 = _slicedToArray__default['default'](_useState7, 2),
-      hovering = _useState8[0],
-      setHovering = _useState8[1];
+  var _useState3 = React.useState(showWarning),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      show = _useState4[0],
+      setShow = _useState4[1];
+
+  var _useState5 = React.useState(false),
+      _useState6 = _slicedToArray__default['default'](_useState5, 2),
+      hovering = _useState6[0],
+      setHovering = _useState6[1];
 
   var renderInfo = function renderInfo() {
 
@@ -2075,13 +2296,57 @@ var ReportedWarning = function ReportedWarning(_ref7) {
   })), renderInfo());
 };
 
+var BlerpTopRow = function BlerpTopRow(_ref7) {
+  var bite = _ref7.bite,
+      hovering = _ref7.hovering,
+      onPlusClick = _ref7.onPlusClick,
+      _onOptionClicked = _ref7.onOptionClicked;
+
+  var _useState7 = React.useState(false),
+      _useState8 = _slicedToArray__default['default'](_useState7, 2),
+      hoveringAddTo = _useState8[0],
+      setHoveringAddTo = _useState8[1];
+
+  return /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    sx: {
+      position: "relative",
+      minHeight: "20px"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+    sx: {
+      transition: "0.3s",
+      opacity: hoveringAddTo ? "0" : "1",
+      width: hoveringAddTo ? "0%" : "100%" // display: hoveringAddTo && "none",
+
+    }
+  }, /*#__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(AddContentButton, {
+    item: bite,
+    hovering: hovering,
+    hoveringAddTo: hoveringAddTo,
+    setHoveringAddTo: setHoveringAddTo,
+    onPlusClick: onPlusClick,
+    onOptionClicked: function onOptionClicked(option) {
+      return _onOptionClicked(option);
+    }
+  }));
+};
+
 var NewBlerp$1 = function NewBlerp(_ref8) {
-  var _bite$image, _bite$image$original, _bite$ownerObject, _bite$ownerObject2;
+  var _bite$image, _bite$image$original;
 
   var Waveform = _ref8.Waveform,
       bite = _ref8.bite,
       playState = _ref8.playState,
-      play = _ref8.play;
+      play = _ref8.play,
+      onTitleClick = _ref8.onTitleClick;
 
   var _useState9 = React.useState(false),
       _useState10 = _slicedToArray__default['default'](_useState9, 2),
@@ -2093,12 +2358,6 @@ 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"
   });
@@ -2237,25 +2496,13 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       alignItems: "center",
       justifyContent: "center"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(Stack, {
-    direction: "row",
-    justifyContent: "space-between",
-    width: "100%",
-    sx: {
-      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,
+  }), /*#__PURE__*/React__default['default'].createElement(BlerpTopRow, {
+    bite: bite,
+    onOptionClicked: function onOptionClicked() {
+      return null;
+    },
     hovering: hovering,
-    onOptionClicked: function onOptionClicked(option) {
-      return handleAddToPlace(option);
-    }
+    onPlusClick: handleAddToPlace
   }), /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
       transition: "0.3s",
@@ -2277,8 +2524,14 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       overflowY: "auto",
       lineHeight: "1",
       height: "23px",
-      margin: "10px 0 5px 0"
-    }
+      margin: "10px 0 5px 0",
+      cursor: "pointer",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onTitleClick
   }, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     alignItems: "center",
@@ -2342,57 +2595,15 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
   })))), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
     saved: bite === null || bite === void 0 ? void 0 : bite.saved,
     count: saveCount
+  }), /*#__PURE__*/React__default['default'].createElement(UsernameWithPopout$1, {
+    user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
   }), /*#__PURE__*/React__default['default'].createElement(Text, {
-    sx: {
-      fontWeight: "300",
-      fontSize: "12px",
-      color: "grey7.main",
-      maxWidth: "95px",
-      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")))), /*#__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
-  })));
+  }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))));
 };
 
 var _templateObject$f;
@@ -91508,6 +91719,7 @@ var Blerp = Blerp$1;
 var NewBlerp = NewBlerp$1;
 var GroupCard = GroupCard$1;
 var UserCard = UserCard$1;
+var UsernameWithPopout = UsernameWithPopout$1;
 var BlerpAudioContextProvider = BlerpAudioContextProvider$1;
 var IconButton = material.IconButton;
 var Toggle = Toggle$1;
@@ -91863,6 +92075,7 @@ exports.UnsafeIcon = UnsafeIcon;
 exports.UserCard = UserCard;
 exports.UserLibraryHeader = UserLibraryHeader;
 exports.UserProfileHeader = UserProfileHeader;
+exports.UsernameWithPopout = UsernameWithPopout;
 exports.WalkonIcon = WalkonIcon;
 exports.WindowsIcon = WindowsIcon;
 exports.darkThemeV1 = darkThemeV1;