@blerp/design 1.2.36 → 1.2.38

package/dist/index.esm.js

@@ -9,8 +9,6 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral
 import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
 import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
 import LockRoundedIcon from '@mui/icons-material/LockRounded';
-import AddRoundedIcon from '@mui/icons-material/AddRounded';
-import '@mui/icons-material/ArrowDropDownRounded';
 import DoNotDisturbRoundedIcon from '@mui/icons-material/DoNotDisturbRounded';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
@@ -36,6 +34,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Slide from '@mui/material/Slide';
 import Fade from '@mui/material/Fade';
 import Lottie from 'react-lottie';
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
 import FacebookIcon from '@mui/icons-material/Facebook';
 import InstagramIcon from '@mui/icons-material/Instagram';
 import ModeEditRoundedIcon from '@mui/icons-material/ModeEditRounded';
@@ -56,7 +55,7 @@ import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import BookmarkRemoveOutlinedIcon from '@mui/icons-material/BookmarkRemoveOutlined';
 import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
 
-var _templateObject$j, _templateObject2$b, _templateObject3$8, _templateObject4$7;
+var _templateObject$j, _templateObject2$b, _templateObject3$9, _templateObject4$7;
 var BlerpImage$3 = styled.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
   return props.url;
 });
@@ -67,7 +66,7 @@ var SaveContainer$2 = styled.div(_templateObject2$b || (_templateObject2$b = _ta
 }, function (props) {
   return props.theme.colors.white;
 });
-var BlerpImageScrim$2 = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-color: ", "70;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), function (props) {
+var BlerpImageScrim$2 = styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-color: ", "70;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), function (props) {
   return props.theme.colors.grey6Override;
 }, function (props) {
   return props.theme.colors.grey6Override;
@@ -1701,284 +1700,14 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
   }, user === null || user === void 0 ? void 0 : user.username));
 };
 
-var _templateObject$g, _templateObject2$a;
+var _templateObject$g, _templateObject2$a, _templateObject3$8;
 var PremiumContainer = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    background: transparent;\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])));
 var Container$1 = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n"])), function (props) {
   return props.theme.colors.grey7;
-}); // const AddContentDropdown = ({
-//     item,
-//     active,
-//     onOptionClicked,
-//     selectedOption,
-// }) => {
-//     const options = [
-//         {
-//             name: "Channel Points",
-//             value: "CHANNEL_POINTS",
-//             added: item?.channelPointsContext?._id,
-//         },
-//         { name: "Bits", value: "BITS", added: item?.whitelistContext?._id },
-//         { name: "WalkOn", value: "WALK_ON", added: item?.walkOnContext?._id },
-//         { name: "Discord", value: "DISCORD", added: item?.discordContext?._id },
-//         {
-//             name: "Sound Emotes",
-//             value: "SOUND_EMOTES",
-//             added: item?.soundEmotesContext?._id,
-//         },
-//         {
-//             name: "Add To Group",
-//             value: "ADD_TO_GROUP",
-//             added: false,
-//         },
-//         {
-//             name: "Suggest To...",
-//             value: "SUGGEST",
-//             added: false,
-//         },
-//     ];
-//     const anchorRef = useRef(null);
-//     const [anchor, setAnchor] = useState(null);
-//     const open = Boolean(anchor);
-//     return (
-//         <>
-//             <Button
-//                 ref={anchorRef}
-//                 color="whiteOverride"
-//                 variant="outlined"
-//                 onClick={(e) => {
-//                     if (active) setAnchor(anchorRef?.current);
-//                 }}
-//                 sx={{
-//                     width: "100%",
-//                     height: "30px",
-//                     transition: "0.3s",
-//                     cursor: active ? "pointer" : "default",
-//                     justifyContent: "space-between",
-//                     marginRight: "10px",
-//                     backgroundColor: "#2C323380",
-//                     opacity: active ? "1" : "0",
-//                     whiteSpace: "nowrap",
-//                     "&:hover": {
-//                         backgroundColor: "grey3.main",
-//                     },
-//                 }}
-//                 endIcon={
-//                     <ArrowDropDownRoundedIcon sx={{ pointerEvents: "none" }} />
-//                 }
-//             >
-//                 {selectedOption?.name || options[0]?.name}
-//             </Button>
-//             <Popover
-//                 open={open}
-//                 anchorEl={anchor}
-//                 anchorOrigin={{
-//                     vertical: "top",
-//                     horizontal: "left",
-//                 }}
-//                 transformOrigin={{
-//                     vertical: "top",
-//                     horizontal: "left",
-//                 }}
-//                 onClose={() => {
-//                     setAnchor(null);
-//                 }}
-//                 PaperProps={{
-//                     sx: {
-//                         width: anchor?.getBoundingClientRect().width,
-//                         backgroundColor: "#2C323380",
-//                         borderRadius: "18px",
-//                         padding: "35px 0 0 0",
-//                         boxSizing: "border-box",
-//                         maxHeight: "160px",
-//                         overflowY: "hidden",
-//                     },
-//                 }}
-//             >
-//                 <Stack sx={{ maxHeight: "120px", overflowY: "scroll" }}>
-//                     {options?.map((option) => (
-//                         <Stack
-//                             direction="row"
-//                             sx={{
-//                                 boxSizing: "border-box",
-//                                 justifyContent: "space-between",
-//                                 alignItems: "center",
-//                                 width: "100%",
-//                                 height: "100%",
-//                                 padding: "6px 5px 6px 10px",
-//                                 cursor: "pointer",
-//                                 transition: "0.3s",
-//                                 "&:hover": {
-//                                     backgroundColor: "#474D4F80",
-//                                 },
-//                                 "&:hover #added-to-content-icon": {
-//                                     display: option?.added ? "none" : "block",
-//                                     opacity: "1",
-//                                 },
-//                                 "&:hover #remove-from-content-icon": {
-//                                     display: option?.added ? "block" : "none",
-//                                     opacity: option?.added ? "1" : "0",
-//                                 },
-//                             }}
-//                             onClick={() => {
-//                                 if (onOptionClicked) onOptionClicked(option);
-//                                 setAnchor(null);
-//                             }}
-//                         >
-//                             <Text
-//                                 sx={{
-//                                     fontSize: "14px",
-//                                     fontWeight: "400",
-//                                 }}
-//                             >
-//                                 {option.name}
-//                             </Text>
-//                             <CheckRounded
-//                                 id="added-to-content-icon"
-//                                 sx={{
-//                                     transition: "0.3s",
-//                                     opacity: option.added ? "1" : "0",
-//                                 }}
-//                             />
-//                             <CloseRounded
-//                                 id="remove-from-content-icon"
-//                                 sx={{
-//                                     transition: "0.3s",
-//                                     display: "none",
-//                                     opacity: "0",
-//                                 }}
-//                             />
-//                         </Stack>
-//                     ))}
-//                 </Stack>
-//             </Popover>
-//         </>
-//     );
-// };
-// const AddContentButton = ({
-//     item,
-//     hovering,
-//     hoveringAddTo,
-//     setHoveringAddTo,
-//     openPremiumModal,
-//     onOptionClicked,
-//     onPlusClick,
-//     selectedOption,
-//     isUnownedPremium,
-// }) => {
-//     let added = false;
-//     if (item?.whitelistContext?._id && selectedOption?.value === "BITS") {
-//         added = true;
-//     } else if (
-//         item?.channelPointsContext?._id &&
-//         selectedOption?.value === "CHANNEL_POINTS"
-//     ) {
-//         added = true;
-//     } else if (
-//         item?.walkOnContext?._id &&
-//         selectedOption?.value === "WALK_ON"
-//     ) {
-//         added = true;
-//     } else if (
-//         item?.discordContext?._id &&
-//         selectedOption?.value === "DISCORD"
-//     ) {
-//         added = true;
-//     }
-//     return (
-//         <Stack
-//             direction="row"
-//             width={hoveringAddTo ? "100%" : "60%"}
-//             sx={{
-//                 justifyContent: "end",
-//                 transition: "0.5s",
-//                 boxSizing: "border-box",
-//                 opacity: hovering ? "1" : "0",
-//             }}
-//             onMouseLeave={() => {
-//                 setHoveringAddTo(false);
-//             }}
-//         >
-//             <AddContentDropdown
-//                 item={item}
-//                 active={hoveringAddTo}
-//                 onOptionClicked={onOptionClicked}
-//                 selectedOption={selectedOption}
-//             />
-//             {isUnownedPremium ? (
-//                 <IconButton
-//                     sx={{
-//                         width: "30px",
-//                         height: "30px",
-//                         backgroundColor: "white.override",
-//                         "&:hover .open-lock-icon": {
-//                             display: "flex !important",
-//                             opacity: "1 !important",
-//                         },
-//                         "&:hover .lock-icon": {
-//                             display: "none !important",
-//                             opacity: "0 !important",
-//                         },
-//                         "&:hover": {
-//                             backgroundColor: "grey7.main",
-//                         },
-//                     }}
-//                     onClick={(e) => {
-//                         e.stopPropagation();
-//                         openPremiumModal();
-//                     }}
-//                 >
-//                     <LockRoundedIcon
-//                         className="lock-icon"
-//                         sx={{
-//                             transition: "0.3s",
-//                             color: "notBlack.override",
-//                             display: "flex",
-//                             opacity: "1",
-//                             fontSize: "17px",
-//                         }}
-//                     />
-//                     <div
-//                         className="open-lock-icon"
-//                         style={{ display: "none", opacity: "0" }}
-//                     >
-//                         <OpenLockIcon
-//                             sx={{
-//                                 transition: "0.3s",
-//                                 color: "notBlack.override",
-//                                 fontSize: "17px",
-//                             }}
-//                         />
-//                     </div>
-//                 </IconButton>
-//             ) : (
-//                 <IconButton
-//                     sx={{
-//                         width: "30px",
-//                         height: "30px",
-//                         backgroundColor: "white.override",
-//                         "&:hover": {
-//                             backgroundColor: "grey7.main",
-//                         },
-//                     }}
-//                     onMouseEnter={(e) => {
-//                         e.stopPropagation();
-//                         setHoveringAddTo(true);
-//                     }}
-//                     onClick={() => onPlusClick(added)}
-//                 >
-//                     <AddRoundedIcon
-//                         sx={{
-//                             transition: "0.3s",
-//                             color: "notBlack.override",
-//                             transform: added && "rotate(45deg)",
-//                         }}
-//                     />
-//                 </IconButton>
-//             )}
-//         </Stack>
-//     );
-// };
-
+});
+var HoverScrollText = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n    width: 100%;\n    max-width: 280px;\n    min-width: 190px;\n    height: 23px;\n    overflow: hidden;\n    line-height: 30px;\n    box-sizing: border-box;\n    position: relative;\n    margin: 10px 0 5px 0;\n    cursor: pointer;\n    & p {\n        cursor: default;\n        position: absolute;\n        white-space: nowrap;\n        transform: translateX(0);\n        transition: 1s;\n    }\n\n    &:hover p {\n        ", "\n        text-decoration: underline;\n        cursor: pointer;\n    }\n"])), function (props) {
+  return props.hover && "transform: translateX(calc(180px - 100%));";
+});
 var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
   var saved = _ref.saved,
       count = _ref.count,
@@ -2099,126 +1828,7 @@ var RatingInfo = function RatingInfo(_ref3) {
     default:
       return /*#__PURE__*/React__default.createElement(React__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(_ref4) {
   var showWarning = _ref4.showWarning,
@@ -2360,7 +1970,7 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
 
     }
   }, /*#__PURE__*/React__default.createElement(RatingInfo, {
-    rating: bite === null || bite === void 0 ? void 0 : bite.strictAudienceRating
+    rating: bite === null || bite === void 0 ? void 0 : bite.audienceRating
   }), /*#__PURE__*/React__default.createElement(AddedToIcons, {
     item: bite,
     hovering: hovering
@@ -2378,7 +1988,7 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
 };
 
 var NewBlerp$1 = function NewBlerp(_ref6) {
-  var _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original;
+  var _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
 
   var Waveform = _ref6.Waveform,
       bite = _ref6.bite,
@@ -2419,6 +2029,8 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
       addedToPlace = _useState10[0],
       setAddedToPlace = _useState10[1];
 
+  var titleRef = useRef(null);
+
   var renderPlayStateIcon = function renderPlayStateIcon() {
     if (playState === "played") {
       return /*#__PURE__*/React__default.createElement("svg", {
@@ -2567,27 +2179,26 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
     }
   }, renderPlayStateIcon()), Waveform({
     hovering: hovering
-  })), /*#__PURE__*/React__default.createElement(Text, {
+  })), /*#__PURE__*/React__default.createElement(HoverScrollText, {
+    hover: ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : (_titleRef$current$get = _titleRef$current.getBoundingClientRect()) === null || _titleRef$current$get === void 0 ? void 0 : _titleRef$current$get.width) > 190,
+    onClick: onTitleClick
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    ref: titleRef,
     sx: {
       fontSize: "16px",
       fontWeight: "400",
-      maxWidth: "260px",
-      minWidth: "180px",
-      width: "100%",
-      whiteSpace: "nowrap",
-      overflowX: "hidden",
-      overflowY: "auto",
-      lineHeight: "1",
-      height: "23px",
-      margin: "10px 0 5px 0",
-      cursor: "pointer",
-      transition: "0.3s",
-      "&:hover": {
-        textDecoration: "underline"
-      }
-    },
-    onClick: onTitleClick
+      lineHeight: "1"
+    }
   }, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default.createElement(Stack, {
+    sx: {
+      position: "absolute",
+      right: "0",
+      top: "0",
+      width: "30px",
+      height: "100%",
+      background: "linear-gradient(270deg, rgba(40,50,51,1) 0%, rgba(0,0,0,0) 100%)"
+    }
+  })), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     alignItems: "center",
     sx: {