@blerp/design 1.2.74 → 1.2.76

package/dist/cjs/NewBlerpTest.js

@@ -0,0 +1,808 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var DoNotDisturbRoundedIcon = require('@mui/icons-material/DoNotDisturbRounded');
+var ExtensionRoundedIcon = require('@mui/icons-material/ExtensionRounded');
+var FavoriteIcon = require('@mui/icons-material/Favorite');
+var FavoriteBorderIcon = require('@mui/icons-material/FavoriteBorder');
+var LayersRoundedIcon = require('@mui/icons-material/LayersRounded');
+var PauseRoundedIcon = require('@mui/icons-material/PauseRounded');
+var PlayArrowRoundedIcon = require('@mui/icons-material/PlayArrowRounded');
+var WarningRoundedIcon = require('@mui/icons-material/WarningRounded');
+var React = require('react');
+var styled = require('styled-components');
+var UsernameWithPopout = require('./UsernameWithPopout.js');
+var index = require('./index.js');
+var LockRoundedIcon = require('@mui/icons-material/LockRounded');
+var Icons = require('./Icons/Icons.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var DoNotDisturbRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DoNotDisturbRoundedIcon);
+var ExtensionRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExtensionRoundedIcon);
+var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
+var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBorderIcon);
+var LayersRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LayersRoundedIcon);
+var PauseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseRoundedIcon);
+var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
+var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
+
+var _templateObject, _templateObject2, _templateObject3;
+const PremiumContainer = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    background: ", ";\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"])), props => props.theme.colors.grey7);
+const Container = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    background: ", ";\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    transition: 0.3s;\n"])), props => props.addToOpen ? props.theme.colors.grey5 : props.theme.colors.grey7, props => props.isPremium && "linear-gradient(308.34deg, rgba(83, 195, 219, 0.1) 6.23%, rgba(168, 57, 255, 0.1) 87.91%), linear-gradient(147.84deg, #2C3233 18.52%, #8A9193 27.81%, #1A1E1F 39.67%, #202425 62.87%, #414545 80.4%, #1A1E1F 93.3%), #2C3233");
+const HoverScrollText = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\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"])), props => props.hover && "transform: translateX(calc(180px - 100%));");
+const FavoriteIconWithCounter = _ref => {
+  let {
+    saved,
+    count,
+    onClick
+  } = _ref;
+  const formatter = Intl.NumberFormat("en", {
+    notation: "compact"
+  });
+  let savedCount = formatter.format(count);
+  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    direction: "row",
+    alignItems: "center",
+    onClick: onClick
+  }, saved ? /*#__PURE__*/React__default['default'].createElement(FavoriteIcon__default['default'], {
+    sx: {
+      fontSize: "17px",
+      marginRight: "6px",
+      transition: "0.3s",
+      cursor: "pointer",
+      opacity: 0.5,
+      "&:hover": {
+        opacity: 1
+      }
+    }
+  }) : /*#__PURE__*/React__default['default'].createElement(FavoriteBorderIcon__default['default'], {
+    sx: {
+      fontSize: "17px",
+      marginRight: "6px",
+      transition: "0.3s",
+      cursor: "pointer",
+      opacity: 0.5,
+      "&:hover": {
+        opacity: 1
+      }
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    sx: {
+      fontSize: "12px",
+      fontWeight: "400"
+    }
+  }, savedCount));
+};
+const AddedToIcons = _ref2 => {
+  var _item$soundEmotesCont, _item$channelPointsCo, _item$channelPointsBu, _item$whitelistContex, _item$walkOnChannelCo, _item$organizationalG;
+
+  let {
+    item,
+    hovering,
+    hide = false
+  } = _ref2;
+  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    direction: "row",
+    sx: {
+      transition: "0.3s",
+      opacity: hide ? "0" : hovering ? "0" : "1",
+      alignItems: "start",
+      justifyContent: "end",
+      flexWrap: "wrap",
+      flex: 1
+    }
+  }, (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+    title: "Added to Universal Extension"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ExtensionRoundedIcon__default['default'], {
+    sx: {
+      fontSize: "20px",
+      filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
+    }
+  }))), ((item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) || (item === null || item === void 0 ? void 0 : (_item$channelPointsBu = item.channelPointsBucketsContext) === null || _item$channelPointsBu === void 0 ? void 0 : _item$channelPointsBu.length) > 0) && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+    title: "Added to Channel Points"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Icons.ChannelPointsIcon, {
+    sx: {
+      fontSize: "20px",
+      filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
+    }
+  }))), (item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id) && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+    title: "Added to Bits Library"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Icons.TwitchBitIcon, {
+    sx: {
+      fontSize: "20px",
+      filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
+    }
+  }))), (item === null || item === void 0 ? void 0 : (_item$walkOnChannelCo = item.walkOnChannelContext) === null || _item$walkOnChannelCo === void 0 ? void 0 : _item$walkOnChannelCo._id) && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+    title: "Added to WalkOn"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Icons.WalkonIcon, {
+    sx: {
+      fontSize: "20px",
+      filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
+    }
+  }))), (item === null || item === void 0 ? void 0 : (_item$organizationalG = item.organizationalGroupEdgesContext) === null || _item$organizationalG === void 0 ? void 0 : _item$organizationalG.length) > 0 && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+    title: "Added to Group"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(LayersRoundedIcon__default['default'], {
+    sx: {
+      fontSize: "20px",
+      filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
+    }
+  }))));
+};
+
+const RatingInfoItem = _ref3 => {
+  let {
+    hovering,
+    tooltipText,
+    displayText
+  } = _ref3;
+  return /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+    title: tooltipText
+  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    sx: {
+      fontSize: "9px",
+      fontWeight: "600",
+      backgroundColor: "white.override",
+      borderRadius: "2px",
+      border: hovering ? "none" : "4px solid transparent",
+      borderColor: "#000000a7",
+      color: "notBlack.override",
+      margin: "0 4px 4px 0",
+      padding: "1px 2px",
+      height: "auto",
+      width: "fit-content"
+    }
+  }, displayText));
+};
+
+const RatingInfo = _ref4 => {
+  let {
+    bite,
+    hovering
+  } = _ref4;
+  let ratingText = {
+    tooltipText: "",
+    text: ""
+  };
+
+  if ((bite === null || bite === void 0 ? void 0 : bite.sexualSound) >= 2 || (bite === null || bite === void 0 ? void 0 : bite.sexualLanguage) >= 2) {
+    // ratingText.tooltipText = "Not Safe For Work";
+    // ratingText.text = "NSFW";
+    return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+      direction: "row",
+      alignItems: "start",
+      sx: {
+        transition: "0.2s",
+        flex: 0,
+        flexWrap: "wrap",
+        marginTop: hovering ? "35px" : "0"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
+      tooltipText: "Not Safe For Work",
+      displayText: "NSFW",
+      hovering: false
+    }));
+  } else if ((bite === null || bite === void 0 ? void 0 : bite.scarySound) >= 2 || (bite === null || bite === void 0 ? void 0 : bite.creepySound) >= 2 || (bite === null || bite === void 0 ? void 0 : bite.creepyLanguage) >= 2) {
+    // ratingText.tooltipText = "This sound may jumpscare you";
+    // ratingText.text = "SCARY";
+    return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+      direction: "row",
+      alignItems: "start",
+      sx: {
+        transition: "0.2s",
+        flex: 0,
+        flexWrap: "wrap",
+        marginTop: hovering ? "35px" : "0"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
+      tooltipText: "This sound may jumpscare you",
+      displayText: "SCARY",
+      hovering: false
+    }));
+  } else if ((bite === null || bite === void 0 ? void 0 : bite.drugLanguage) >= 2 || (bite === null || bite === void 0 ? void 0 : bite.drugSound) >= 2 || (bite === null || bite === void 0 ? void 0 : bite.curseLanguage) >= 2) {
+    // ratingText.tooltipText = "May contain swearing or drug references";
+    // ratingText.text = "EXPLICIT";
+    return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+      direction: "row",
+      alignItems: "start",
+      sx: {
+        transition: "0.2s",
+        flex: 0,
+        flexWrap: "wrap",
+        marginTop: hovering ? "35px" : "0"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
+      tooltipText: "May contain swearing or drug references",
+      displayText: "EXPLICIT",
+      hovering: false
+    }));
+  } else if ((bite === null || bite === void 0 ? void 0 : bite.violentSound) >= 2 || (bite === null || bite === void 0 ? void 0 : bite.violentLanguage) >= 2) {
+    // ratingText.tooltipText = "May contain violenct references";
+    // ratingText.text = "VIOLENCE";
+    return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+      direction: "row",
+      alignItems: "start",
+      sx: {
+        transition: "0.2s",
+        flex: 0,
+        flexWrap: "wrap",
+        marginTop: hovering ? "35px" : "0"
+      }
+    }, " ", /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
+      tooltipText: "May contain violenct references",
+      displayText: "VIOLENCE",
+      hovering: false
+    }), "   ");
+  } else if (bite !== null && bite !== void 0 && bite.newAudienceRating) {
+    var _bite$newAudienceRati, _bite$newAudienceRati2;
+
+    if (!(bite !== null && bite !== void 0 && (_bite$newAudienceRati = bite.newAudienceRating) !== null && _bite$newAudienceRati !== void 0 && _bite$newAudienceRati.length)) {
+      // unrated
+      ratingText.tooltipText = "Hasn't Been Reviewed";
+      ratingText.text = "UNRATED";
+    }
+
+    return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+      direction: "row",
+      alignItems: "start",
+      sx: {
+        transition: "0.2s",
+        flex: 2,
+        flexWrap: "wrap",
+        marginTop: hovering ? "35px" : "0"
+      }
+    }, bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(rating => {
+      if (rating === "SAFE") {
+        // nothing
+        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+      } else if (rating === "NSFW") {
+        // NSFW
+        ratingText.tooltipText = "Not Safe For Work";
+        ratingText.text = "NSFW";
+      } else if (rating === "EXPLICIT") {
+        // EXPLICIT
+        ratingText.tooltipText = "Explicit";
+        ratingText.text = "EXPLICIT";
+      } else if (rating === "DMCA") {
+        // DMCA
+        ratingText.tooltipText = "DMCA";
+        ratingText.text = "DMCA";
+      } else {
+        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+      }
+
+      return /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
+        tooltipText: ratingText.tooltipText,
+        displayText: ratingText.text,
+        hovering: hovering
+      });
+    }));
+  } else if (bite !== null && bite !== void 0 && bite.audienceRating) {
+    // what you have now
+    if ((bite === null || bite === void 0 ? void 0 : bite.audienceRating) === "UR") {
+      ratingText.tooltipText = "Hasn't Been Reviewed";
+      ratingText.text = "UNRATED";
+    } else if ((bite === null || bite === void 0 ? void 0 : bite.audienceRating) === "NC17") {
+      ratingText.tooltipText = "Not Safe For Work";
+      ratingText.text = "NSFW";
+    } else {
+      ratingText.tooltipText = null;
+      ratingText.text = null;
+    }
+  } else {
+    // unrated
+    ratingText.tooltipText = "Hasn't Been Reviewed";
+    ratingText.text = "UNRATED";
+  }
+
+  if (!ratingText.tooltipText) return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    direction: "row",
+    sx: {
+      flex: 0
+    }
+  });
+  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    direction: "row",
+    alignItems: "start",
+    sx: {
+      transition: "0.2s",
+      flex: 0,
+      flexWrap: "wrap",
+      marginTop: hovering ? "35px" : "0"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
+    tooltipText: ratingText.tooltipText,
+    displayText: ratingText.text,
+    hovering: hovering
+  }));
+};
+
+const ReportedWarning = _ref5 => {
+  let {
+    showWarning,
+    blacklisted,
+    saved,
+    count,
+    onClick
+  } = _ref5;
+  const [show, setShow] = React.useState(showWarning);
+  const [hovering, setHovering] = React.useState(false);
+
+  const renderInfo = () => {
+    if (blacklisted) {
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(DoNotDisturbRoundedIcon__default['default'], {
+        sx: {
+          marginBottom: "20px"
+        }
+      }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+        sx: {
+          fontSize: "18px",
+          fontWeight: "600",
+          color: "white.override"
+        }
+      }, "Blocked"), hovering && /*#__PURE__*/React__default['default'].createElement(index.Button, {
+        color: "whiteOverride",
+        variant: "outlined",
+        sx: {
+          marginTop: "20px"
+        },
+        onClick: () => {
+          setShow(false);
+        }
+      }, "View"));
+    }
+
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(WarningRoundedIcon__default['default'], {
+      sx: {
+        marginBottom: "20px"
+      }
+    }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+      sx: {
+        fontSize: "18px",
+        fontWeight: "600",
+        color: "white.override",
+        marginBottom: "10px"
+      }
+    }, "Hold Up"), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+      sx: {
+        fontSize: "14px",
+        fontWeight: "400",
+        color: "white.override",
+        textAlign: "center"
+      }
+    }, "This content has been", /*#__PURE__*/React__default['default'].createElement("br", null), " reported and may be unsafe."), hovering && /*#__PURE__*/React__default['default'].createElement(index.Button, {
+      color: "whiteOverride",
+      variant: "outlined",
+      sx: {
+        marginTop: "20px"
+      },
+      onClick: () => {
+        setShow(false);
+      }
+    }, "View"));
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      backgroundColor: "#00000040",
+      backdropFilter: "blur(8px)",
+      padding: "22px",
+      boxSizing: "border-box",
+      zIndex: "10",
+      alignItems: "center",
+      justifyContent: "center",
+      display: show ? "flex" : "none",
+      opacity: show ? "1" : "0",
+      transition: "0.3s"
+    },
+    onMouseEnter: () => {
+      setHovering(true);
+    },
+    onMouseLeave: () => {
+      setHovering(false);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      position: "absolute",
+      top: "20px",
+      left: "20px"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
+    saved: saved,
+    count: count,
+    onClick: onClick
+  })), renderInfo());
+};
+
+const BlerpTopRow = _ref6 => {
+  let {
+    bite,
+    hovering,
+    onPlusClick,
+    onOptionClicked,
+    selectedOption,
+    addToOpen,
+    setAddToOpen,
+    renderAddContentButton,
+    hoveringAddTo,
+    setHovering
+  } = _ref6;
+  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    sx: {
+      position: "relative",
+      minHeight: "20px"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    direction: "row",
+    alignItems: "start",
+    justifyContent: "space-between",
+    sx: {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      overflow: "hidden",
+      transition: "0.2s",
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
+    hovering: hovering,
+    bite: bite
+  }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
+    item: bite,
+    hovering: hovering || hoveringAddTo
+  })), renderAddContentButton({
+    item: bite,
+    hovering: hovering,
+    addToOpen: addToOpen,
+    setAddToOpen: setAddToOpen,
+    hoveringAddTo: hoveringAddTo,
+    setHovering: setHovering,
+    onPlusClick: onPlusClick,
+    onOptionClicked: option => onOptionClicked(option),
+    selectedOption: selectedOption
+  }));
+};
+
+const NewBlerpTest = _ref7 => {
+  var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnChannelCo, _bite$soundEmotesCont, _bite$channelPointsBu, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
+
+  let {
+    Waveform,
+    bite,
+    playState,
+    play,
+    onTitleClick = () => {
+      console.log("onTitleClick");
+    },
+    onUsernameClick = () => {
+      console.log("onUsernameClick");
+    },
+    onFavoriteClick = () => {
+      console.log("onFavoriteClick");
+    },
+    onAddToPlace = () => {
+      console.log("onAddToPlace");
+    },
+    onOptionClicked = () => {
+      console.log("onAddToPlace");
+    },
+    selectedOption,
+    trending = false,
+    renderAddContentButton,
+    renderThreeDot,
+    isOwner
+  } = _ref7;
+  const [previewed, setPreviewed] = React.useState(false);
+  const [hovering, setHovering] = React.useState(false);
+  const [hoveringAddTo, setHoveringAddTo] = React.useState(false);
+  const [addToOpen, setAddToOpen] = React.useState(false);
+  const titleRef = React.useRef(null);
+  const addedToPlace = (bite === null || bite === void 0 ? void 0 : (_bite$whitelistContex = bite.whitelistContext) === null || _bite$whitelistContex === void 0 ? void 0 : _bite$whitelistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsCo = bite.channelPointsContext) === null || _bite$channelPointsCo === void 0 ? void 0 : _bite$channelPointsCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$walkOnChannelCo = bite.walkOnChannelContext) === null || _bite$walkOnChannelCo === void 0 ? void 0 : _bite$walkOnChannelCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$soundEmotesCont = bite.soundEmotesContext) === null || _bite$soundEmotesCont === void 0 ? void 0 : _bite$soundEmotesCont.hasAdded) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsBu = bite.channelPointsBucketsContext) === null || _bite$channelPointsBu === void 0 ? void 0 : _bite$channelPointsBu.length) > 0;
+  const showWarning = (bite === null || bite === void 0 ? void 0 : (_bite$blacklistContex = bite.blacklistContext) === null || _bite$blacklistContex === void 0 ? void 0 : _bite$blacklistContex._id) || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "URGENT" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "SUPER_URGENT" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "REVIEWED_BLACKLISTED" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "APPEALING";
+
+  const renderPlayStateIcon = () => {
+    if (playState === "played") {
+      return /*#__PURE__*/React__default['default'].createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "84",
+        height: "84",
+        viewBox: "0 0 84 84",
+        fill: "none"
+      }, /*#__PURE__*/React__default['default'].createElement("g", {
+        filter: "url(#filter0_d_381_451457)"
+      }, /*#__PURE__*/React__default['default'].createElement("path", {
+        d: "M49.4991 43.6611C50.8996 42.9059 50.8327 41.0394 49.5597 40.2386L38.0648 33.008C36.7329 32.1702 34.9999 33.1272 34.9999 34.7006C34.9999 37.0176 34.9999 39.9606 34.9999 42C34.9999 43.9641 34.9999 46.5476 34.9999 48.6074C34.9999 50.1492 36.6708 51.1099 38.0041 50.3357L49.4991 43.6611ZM42.9099 10.5C25.0949 10.01 10.4999 24.325 10.4999 42H4.23486C2.65986 42 1.88986 43.89 3.00986 44.975L12.7749 54.74C13.4749 55.44 14.5599 55.44 15.2599 54.74L25.0249 44.975C26.1099 43.89 25.3399 42 23.7649 42H17.4999C17.4999 28.35 28.6299 17.325 42.3499 17.5C55.3699 17.675 66.3249 28.63 66.4999 41.65C66.6749 55.335 55.6499 66.5 41.9999 66.5C37.6249 66.5 33.5299 65.31 29.9599 63.315C28.5949 62.545 26.9149 62.825 25.8299 63.945C24.2199 65.555 24.5349 68.32 26.5299 69.44C31.1149 71.995 36.3649 73.5 41.9999 73.5C59.6749 73.5 73.9899 58.905 73.4999 41.09C73.0449 24.675 59.3249 10.955 42.9099 10.5Z",
+        fill: "white"
+      })), /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("filter", {
+        id: "filter0_d_381_451457",
+        x: "-9.18718",
+        y: "0.487792",
+        width: "94.3661",
+        height: "86.3455",
+        filterUnits: "userSpaceOnUse",
+        "color-interpolation-filters": "sRGB"
+      }, /*#__PURE__*/React__default['default'].createElement("feFlood", {
+        "flood-opacity": "0",
+        result: "BackgroundImageFix"
+      }), /*#__PURE__*/React__default['default'].createElement("feColorMatrix", {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+      }), /*#__PURE__*/React__default['default'].createElement("feOffset", {
+        dy: "1.66667"
+      }), /*#__PURE__*/React__default['default'].createElement("feGaussianBlur", {
+        stdDeviation: "5.83333"
+      }), /*#__PURE__*/React__default['default'].createElement("feComposite", {
+        in2: "hardAlpha",
+        operator: "out"
+      }), /*#__PURE__*/React__default['default'].createElement("feColorMatrix", {
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.52 0"
+      }), /*#__PURE__*/React__default['default'].createElement("feBlend", {
+        mode: "normal",
+        in2: "BackgroundImageFix",
+        result: "effect1_dropShadow_381_451457"
+      }), /*#__PURE__*/React__default['default'].createElement("feBlend", {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "effect1_dropShadow_381_451457",
+        result: "shape"
+      }))));
+    }
+
+    if (playState === "playing") {
+      return /*#__PURE__*/React__default['default'].createElement(PauseRoundedIcon__default['default'], {
+        sx: {
+          fontSize: "84px"
+        }
+      });
+    }
+
+    return /*#__PURE__*/React__default['default'].createElement(PlayArrowRoundedIcon__default['default'], {
+      sx: {
+        fontSize: "84px"
+      }
+    });
+  };
+
+  const handleAddToPlace = added => {
+    onAddToPlace(added);
+  };
+
+  if (!bite) {
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+  }
+
+  if (!isOwner && ((bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" || (bite === null || bite === void 0 ? void 0 : bite.redactionType) === "PRIVATE")) {
+    return /*#__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%)"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(Container, null, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+      sx: {
+        backgroundColor: "grey4.main",
+        width: "100%",
+        height: "100%",
+        borderRadius: "8px",
+        padding: "10px",
+        boxSizing: "border-box",
+        position: "relative",
+        overflow: "hidden",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], null), /*#__PURE__*/React__default['default'].createElement(index.Text, null, "Private Blerp"))));
+  }
+
+  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%)"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(ReportedWarning, {
+    showWarning: showWarning,
+    bite: bite,
+    blacklisted: bite === null || bite === void 0 ? void 0 : (_bite$blacklistContex2 = bite.blacklistContext) === null || _bite$blacklistContex2 === void 0 ? void 0 : _bite$blacklistContex2._id,
+    saved: bite === null || bite === void 0 ? void 0 : bite.saved,
+    count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
+    onClick: onFavoriteClick
+  }), /*#__PURE__*/React__default['default'].createElement(Container, {
+    isPremium: bite === null || bite === void 0 ? void 0 : bite.isPremium,
+    addToOpen: addToOpen
+  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    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",
+      backgroundRepeat: "no-repeat",
+      backgroundColor: "grey4.main",
+      width: "100%",
+      height: "100%",
+      borderRadius: "8px",
+      padding: "10px",
+      boxSizing: "border-box",
+      position: "relative",
+      overflow: "hidden",
+      alignItems: "center",
+      justifyContent: "space-between",
+      cursor: "pointer"
+    },
+    onMouseEnter: () => {
+      setHovering(true);
+    },
+    onMouseLeave: () => {
+      setHovering(false);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    id: "blerp-audio-button-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
+    className: "blerp-hover",
+    onClick: () => {
+      play({
+        bite
+      });
+      setPreviewed(true); // play({ bite });
+    },
+    sx: {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: "0",
+      left: "0",
+      backgroundColor: "notBlack.override",
+      transition: "0.3s",
+      opacity: previewed || hovering ? "0.5" : "0",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(BlerpTopRow, {
+    bite: bite,
+    onOptionClicked: onOptionClicked,
+    hovering: hovering,
+    onPlusClick: handleAddToPlace,
+    selectedOption: selectedOption,
+    renderAddContentButton: renderAddContentButton,
+    addToOpen: addToOpen,
+    setAddToOpen: setAddToOpen,
+    hoveringAddTo: hoveringAddTo,
+    setHovering: setHovering
+  }), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      transition: "0.3s",
+      opacity: hovering && !hoveringAddTo ? "1" : "0",
+      pointerEvents: "none",
+      zIndex: "3"
+    }
+  }, renderPlayStateIcon()), Waveform({
+    hovering: hovering
+  })), /*#__PURE__*/React__default['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['default'].createElement("a", {
+    href: "/soundbites/".concat(bite._id),
+    style: {
+      textDecoration: "none"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    ref: titleRef,
+    sx: {
+      fontSize: "16px",
+      fontWeight: "400",
+      lineHeight: "1"
+    }
+  }, bite === null || bite === void 0 ? void 0 : bite.title)), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      position: "absolute",
+      right: "0",
+      top: "0",
+      width: "50px",
+      height: "100%",
+      display: "flex",
+      alignItems: "flex-end",
+      justifyContent: "center",
+      background: bite !== null && bite !== void 0 && bite.isPremium ? "linear-gradient(270deg, rgb(49 62 65) 40%, rgba(0,0,0,0) 100%)" : "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
+    }
+  }, renderThreeDot())), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    direction: "row",
+    alignItems: "center",
+    sx: {
+      width: "100%",
+      justifyContent: "start",
+      postion: "relative"
+    }
+  }, (bite === null || bite === void 0 ? void 0 : bite.isPremium) && /*#__PURE__*/React__default['default'].createElement(Icons.DiamondIcon, {
+    sx: {
+      fontSize: "18px",
+      marginRight: "5px"
+    }
+  }), trending && /*#__PURE__*/React__default['default'].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "17",
+    height: "17",
+    viewBox: "5 5 24 24",
+    fill: "none",
+    style: {
+      marginRight: "5px",
+      minWidth: "17px"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("g", {
+    filter: "url(#filter0_d_808_2472)"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M24.0435 17.3064C22.6698 13.7364 17.7785 13.5439 18.9598 8.35512C19.0473 7.97012 18.636 7.67262 18.3035 7.87387C15.1273 9.74637 12.8435 13.5001 14.7598 18.4176C14.9173 18.8201 14.4448 19.1964 14.1035 18.9339C12.5198 17.7351 12.3535 16.0114 12.4935 14.7776C12.546 14.3226 11.951 14.1039 11.6973 14.4801C11.1023 15.3901 10.4985 16.8601 10.4985 19.0739C10.831 23.9739 14.9698 25.4789 16.4573 25.6714C18.5835 25.9426 20.8848 25.5489 22.5385 24.0351C24.3585 22.3464 25.0235 19.6514 24.0435 17.3064ZM15.9235 21.7076C17.1835 21.4014 17.831 20.4914 18.006 19.6864C18.2948 18.4351 17.166 17.2101 17.9273 15.2326C18.216 16.8689 20.8885 17.8926 20.8885 19.6776C20.8585 21.8914 18.461 23.7901 15.9235 21.7076Z",
+    fill: "#FFD400"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M24.0435 17.3064C22.6698 13.7364 17.7785 13.5439 18.9598 8.35512C19.0473 7.97012 18.636 7.67262 18.3035 7.87387C15.1273 9.74637 12.8435 13.5001 14.7598 18.4176C14.9173 18.8201 14.4448 19.1964 14.1035 18.9339C12.5198 17.7351 12.3535 16.0114 12.4935 14.7776C12.546 14.3226 11.951 14.1039 11.6973 14.4801C11.1023 15.3901 10.4985 16.8601 10.4985 19.0739C10.831 23.9739 14.9698 25.4789 16.4573 25.6714C18.5835 25.9426 20.8848 25.5489 22.5385 24.0351C24.3585 22.3464 25.0235 19.6514 24.0435 17.3064ZM15.9235 21.7076C17.1835 21.4014 17.831 20.4914 18.006 19.6864C18.2948 18.4351 17.166 17.2101 17.9273 15.2326C18.216 16.8689 20.8885 17.8926 20.8885 19.6776C20.8585 21.8914 18.461 23.7901 15.9235 21.7076Z",
+    fill: "#FD295C",
+    "fill-opacity": "0.5"
+  })), /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("filter", {
+    id: "filter0_d_808_2472",
+    x: "0.498536",
+    y: "0.809083",
+    width: "33.9966",
+    height: "37.9418",
+    filterUnits: "userSpaceOnUse",
+    "color-interpolation-filters": "sRGB"
+  }, /*#__PURE__*/React__default['default'].createElement("feFlood", {
+    "flood-opacity": "0",
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React__default['default'].createElement("feColorMatrix", {
+    in: "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React__default['default'].createElement("feOffset", {
+    dy: "3"
+  }), /*#__PURE__*/React__default['default'].createElement("feGaussianBlur", {
+    stdDeviation: "5"
+  }), /*#__PURE__*/React__default['default'].createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React__default['default'].createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.51 0"
+  }), /*#__PURE__*/React__default['default'].createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_808_2472"
+  }), /*#__PURE__*/React__default['default'].createElement("feBlend", {
+    mode: "normal",
+    in: "SourceGraphic",
+    in2: "effect1_dropShadow_808_2472",
+    result: "shape"
+  })))), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
+    saved: bite === null || bite === void 0 ? void 0 : bite.saved,
+    count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
+    onClick: onFavoriteClick
+  }), /*#__PURE__*/React__default['default'].createElement(UsernameWithPopout.UsernameWithPopout, {
+    onUsernameClick: onUsernameClick,
+    user: bite === null || bite === void 0 ? void 0 : bite.ownerObject,
+    collapsed: false
+  }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    sx: {
+      fontWeight: "300",
+      fontSize: "12px",
+      color: "grey7.main",
+      position: "absolute",
+      right: "12px"
+    }
+  }, (((bite === null || bite === void 0 ? void 0 : bite.audioDuration) || 1) / 1000).toFixed(0), "s")))));
+};
+
+exports.AddedToIcons = AddedToIcons;
+exports.FavoriteIconWithCounter = FavoriteIconWithCounter;
+exports.NewBlerpTest = NewBlerpTest;
+exports.default = NewBlerpTest;