@blerp/design 1.2.74 → 1.2.75

package/dist/esm/Blerp/BlerpSavePopup.js

@@ -0,0 +1,147 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import BookmarkRemoveOutlinedIcon from '@mui/icons-material/BookmarkRemoveOutlined';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import React from 'react';
+import styled from 'styled-components';
+import { reactionIconUrls } from '../Blerp.js';
+import { Popover, Grid, Tooltip, Stack, Button } from '../index.js';
+
+var _templateObject;
+const ReactionButton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), props => props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5Override, props => props.theme.colors.ibisRed);
+
+const BlerpSavePopup = _ref => {
+  let {
+    openSave,
+    setOpenSave,
+    sizeParams,
+    unsaveButton,
+    handleClickReaction,
+    bite,
+    handleClickUnsave,
+    handleClickOrganize,
+    organizeButton,
+    anchorRef
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Popover, {
+    open: openSave,
+    onClose: () => setOpenSave(false),
+    anchorEl: anchorRef.current,
+    PaperProps: {
+      sx: {
+        height: sizeParams.height,
+        width: sizeParams.width,
+        padding: "10px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "space-around",
+        boxSizing: "border-box",
+        backgroundColor: "notBlack.override"
+      }
+    },
+    anchorOrigin: {
+      vertical: "center",
+      horizontal: "center"
+    },
+    transformOrigin: {
+      vertical: "center",
+      horizontal: "center"
+    }
+  }, /*#__PURE__*/React.createElement(CloseRoundedIcon, {
+    onClick: () => {
+      setOpenSave(false);
+    },
+    sx: {
+      color: "white.override",
+      position: "absolute",
+      top: "0",
+      right: "0"
+    }
+  }), /*#__PURE__*/React.createElement(Grid, {
+    display: "grid",
+    gridTemplateColumns: "repeat(5, 1fr)",
+    alignItems: "center",
+    marginTop: "16px",
+    gap: 1
+  }, Object.keys(reactionIconUrls).map(reaction => {
+    var _bite$userReactions;
+
+    return /*#__PURE__*/React.createElement(Grid, {
+      key: "".concat(reaction, "-button"),
+      gridColumn: "span 1",
+      display: "flex",
+      justifyContent: "center"
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      title: reaction
+    }, /*#__PURE__*/React.createElement(ReactionButton, {
+      active: bite === null || bite === void 0 ? void 0 : (_bite$userReactions = bite.userReactions) === null || _bite$userReactions === void 0 ? void 0 : _bite$userReactions.reactions.includes(reaction),
+      style: {
+        padding: sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.reactionPadding,
+        width: sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.reactionSize,
+        height: sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.reactionSize
+      },
+      onClick: () => {
+        var _bite$userReactions2;
+
+        let isRemove = bite === null || bite === void 0 ? void 0 : (_bite$userReactions2 = bite.userReactions) === null || _bite$userReactions2 === void 0 ? void 0 : _bite$userReactions2.reactions.includes(reaction);
+        handleClickReaction(reaction, isRemove);
+        setOpenSave(false);
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      alt: "reaction-".concat(reaction),
+      width: "100%",
+      height: "100%",
+      src: reactionIconUrls[reaction]
+    }))));
+  })), /*#__PURE__*/React.createElement(Stack, {
+    justifyContent: "space-around",
+    alignItems: "center",
+    direction: "row",
+    width: "100%",
+    flexWrap: "wrap"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    color: "seafoam",
+    size: "small",
+    sx: {
+      marginTop: "4px",
+      padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
+      fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
+    },
+    onClick: () => setOpenSave(false)
+  }, "DONE"), unsaveButton ? unsaveButton : /*#__PURE__*/React.createElement(React.Fragment, null, (!bite.isPremium || !bite.owned) && /*#__PURE__*/React.createElement(Button, {
+    onClick: () => {
+      handleClickUnsave();
+      setOpenSave(false);
+    },
+    variant: "outlined",
+    color: "whiteOverride",
+    sx: {
+      ".MuiButton-startIcon": {
+        margin: "0"
+      },
+      padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
+      fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
+    },
+    size: "small",
+    startIcon: /*#__PURE__*/React.createElement(BookmarkRemoveOutlinedIcon, {
+      sx: {
+        color: "white.override",
+        margin: "0"
+      }
+    })
+  }, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React.createElement(Button, {
+    variant: "text",
+    color: "grey4",
+    sx: {
+      marginTop: "4px",
+      padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
+      fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
+    },
+    onClick: () => {
+      handleClickOrganize();
+    }
+  }, "Organize")));
+};
+
+export default BlerpSavePopup;

package/dist/esm/Blerp/BlerpTitleRow.js

@@ -0,0 +1,108 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React from 'react';
+import styled from 'styled-components';
+import { Stack, Text } from '../index.js';
+
+var _templateObject;
+const LineClamp = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
+
+const BlerpTitleRow = _ref => {
+  let {
+    bite,
+    title,
+    isLinkTitle,
+    handleClickTitle,
+    isPremium,
+    isLocked,
+    isOwner,
+    sizeParams
+  } = _ref;
+
+  if (bite.visibility === "PRIVATE" && !isOwner) {
+    return /*#__PURE__*/React.createElement(Stack, {
+      direction: "row",
+      sx: {
+        width: "90%",
+        textAlign: "center",
+        zIndex: "1",
+        overflow: "hidden",
+        justifyContent: "center",
+        margin: "auto"
+      }
+    }, /*#__PURE__*/React.createElement(LineClamp, {
+      onClick: e => {
+        if (handleClickTitle) {
+          e.stopPropagation();
+          handleClickTitle();
+        }
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      textAlign: "center",
+      fontSize: sizeParams.fontSize,
+      color: isPremium && !isLocked ? "white.main" : "notBlack.main",
+      sx: {
+        ":hover": {
+          textDecoration: handleClickTitle ? "underline" : "none"
+        },
+        textOverflow: "ellipsis"
+      },
+      lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
+    }, title || bite.title)));
+  }
+
+  return /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    sx: {
+      width: "90%",
+      textAlign: "center",
+      zIndex: "1",
+      overflow: "hidden",
+      padding: "4px 0",
+      justifyContent: "center",
+      margin: "auto"
+    }
+  }, isLinkTitle ? /*#__PURE__*/React.createElement(LineClamp, {
+    onClick: e => {
+      if (handleClickTitle) {
+        e.stopPropagation();
+        handleClickTitle();
+      }
+    }
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "/soundbites/".concat(bite._id),
+    style: {
+      textDecoration: "none"
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    textAlign: "center",
+    fontSize: sizeParams.fontSize,
+    color: isPremium ? "white.override" : "notBlack.main",
+    sx: {
+      ":hover": {
+        textDecoration: handleClickTitle ? "underline" : "none"
+      },
+      textOverflow: "ellipsis"
+    },
+    lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
+  }, title || bite.title))) : /*#__PURE__*/React.createElement(LineClamp, {
+    onClick: e => {
+      if (handleClickTitle) {
+        e.stopPropagation();
+        handleClickTitle();
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    textAlign: "center",
+    fontSize: sizeParams.fontSize,
+    color: isPremium ? "white.override" : "notBlack.main",
+    sx: {
+      ":hover": {
+        textDecoration: handleClickTitle ? "underline" : "none"
+      },
+      textOverflow: "ellipsis"
+    },
+    lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
+  }, title || bite.title)));
+};
+
+export default BlerpTitleRow;

package/dist/esm/Blerp/BlerpTopRow.js

@@ -0,0 +1,236 @@
+import LockRoundedIcon from '@mui/icons-material/LockRounded';
+import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
+import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
+import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
+import React from 'react';
+import { reactionIconUrls } from '../Blerp.js';
+import { UnsafeIcon, BookmarkAddRounded, DiamondIcon, TwitchBitIcon, ChannelPointsIcon } from '../Icons/Icons.js';
+import { Stack, Text, Tooltip, IconButton } from '../index.js';
+
+const BlerpTopRow = _ref => {
+  var _bite$topReactions, _bite$topReactions2, _bite$topReactions3;
+
+  let {
+    secondaryActionButton,
+    sizeParams,
+    bite,
+    isOwner,
+    getUserReactions,
+    setOpenSave,
+    handleClickSave,
+    isPremium,
+    isLocked,
+    isBlerpHovered,
+    handleClickThreeDot
+  } = _ref;
+
+  function formatNumber(n) {
+    var ranges = [{
+      divider: 1e9,
+      suffix: "B"
+    }, {
+      divider: 1e6,
+      suffix: "M"
+    }, {
+      divider: 1e3,
+      suffix: "k"
+    }];
+
+    for (var i = 0; i < ranges.length; i++) {
+      if (n >= ranges[i].divider) {
+        return (n / ranges[i].divider).toFixed(2).toString() + ranges[i].suffix;
+      }
+    }
+
+    return n.toString();
+  }
+
+  return /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    width: "100%",
+    justifyContent: "space-between",
+    alignItems: "center",
+    height: bite.visibility !== "PRIVATE" || isOwner ? "30px" : "30px" // makes the top row absolute for small size only. Effictively, this spaces the blerp image beneath it correctly.
+    ,
+    position: sizeParams.buttonSize === "small" && "absolute"
+  }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    fontSize: "12px",
+    color: isPremium && !isLocked ? "white.main" : "notBlack.main",
+    sx: {
+      position: "absolute",
+      top: "30px",
+      left: "10px"
+    }
+  }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React.createElement(Text, {
+    fontSize: "8px",
+    color: isPremium ? "waxwing.main" : "grey5.main",
+    sx: {
+      maxWidth: sizeParams.buttonSize === "small" ? "26px" : "40px",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      position: "absolute",
+      top: "26px",
+      right: "8px",
+      opacity: isBlerpHovered ? 1 : 0.78
+    }
+  }, (Number(bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(1), sizeParams.buttonSize === "small" ? "s" : "sec"), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React.createElement(Tooltip, {
+    title: "May contain potentially sensitive content",
+    sx: {
+      wordWrap: "break-word"
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    className: "unsafe-icon-blrp",
+    sx: {
+      position: "absolute",
+      top: !(bite !== null && bite !== void 0 && bite.audioDuration) ? "30px" : "42px",
+      right: "5px",
+      padding: "0"
+    }
+  }, /*#__PURE__*/React.createElement(UnsafeIcon, {
+    sx: {
+      fontSize: "18px",
+      color: "ibisRed.main"
+    }
+  }))), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    sx: {
+      overflow: "hidden",
+      borderRadius: "12px",
+      height: "24px",
+      position: "relative",
+      left: "2px"
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      backgroundColor: "white.main",
+      opacity: ".4",
+      position: "absolute",
+      top: "0",
+      bottom: "0",
+      left: "0",
+      right: "0"
+    }
+  }), bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React.createElement(IconButton, {
+    onClick: e => {
+      e.stopPropagation();
+      getUserReactions();
+      setOpenSave(true);
+    },
+    sx: {
+      color: "notBlack.main",
+      padding: "2px"
+    }
+  }, /*#__PURE__*/React.createElement(BookmarkOutlinedIcon, {
+    fontSize: "small"
+  })) : /*#__PURE__*/React.createElement(IconButton, {
+    onClick: e => {
+      e.stopPropagation();
+      getUserReactions();
+      handleClickSave();
+      setOpenSave(true);
+    },
+    sx: {
+      color: "notBlack.main",
+      padding: "2px"
+    }
+  }, /*#__PURE__*/React.createElement(BookmarkAddRounded, {
+    fontSize: "small"
+  })), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React.createElement(Text, {
+    color: "notBlack.main",
+    fontWeight: "light",
+    fontSize: "12px",
+    marginRight: "8px",
+    sx: {
+      zIndex: "1"
+    }
+  }, formatNumber((bite === null || bite === void 0 ? void 0 : bite.totalSaveCount) > 0 ? bite === null || bite === void 0 ? void 0 : bite.totalSaveCount : "")), !!(bite !== null && bite !== void 0 && (_bite$topReactions2 = bite.topReactions) !== null && _bite$topReactions2 !== void 0 && _bite$topReactions2.length) && /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    position: "relative",
+    width: "40px",
+    height: "20px"
+  }, bite === null || bite === void 0 ? void 0 : (_bite$topReactions3 = bite.topReactions) === null || _bite$topReactions3 === void 0 ? void 0 : _bite$topReactions3.map((reaction, index) => /*#__PURE__*/React.createElement(Tooltip, {
+    title: reaction
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: reaction,
+    className: "reaction-icon-blrp",
+    style: {
+      width: "16px",
+      height: "16px",
+      position: "relative",
+      margin: "-3px",
+      zIndex: index
+    },
+    src: reactionIconUrls[reaction]
+  })))), isPremium ? /*#__PURE__*/React.createElement(DiamondIcon, {
+    sx: {
+      width: "16px",
+      marginRight: "4px",
+      zIndex: "1"
+    }
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, bite.edgeType === "NewTwitchBiteEdge" && /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Featured on Twitch Bits"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      alignItems: "center",
+      margin: "5px"
+    }
+  }, /*#__PURE__*/React.createElement(TwitchBitIcon, {
+    sx: {
+      zIndex: "1",
+      fontSize: "18px"
+    }
+  }))), bite.edgeType === "ChannelPointsBiteEdge" && /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Featured on Twitch Channel Points"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      alignItems: "center",
+      margin: "5px"
+    }
+  }, /*#__PURE__*/React.createElement(ChannelPointsIcon, {
+    sx: {
+      zIndex: "1",
+      fontSize: "18px"
+    }
+  }))), (bite.visibility !== "PUBLIC" || !isOwner) && /*#__PURE__*/React.createElement("div", null), bite.visibility !== "PUBLIC" && /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    sx: {
+      alignItems: "center",
+      margin: "5px"
+    }
+  }, bite.visibility === "UNLISTED" && /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Unlisted"
+  }, /*#__PURE__*/React.createElement(VisibilityOffRoundedIcon, {
+    sx: {
+      fontSize: "15px"
+    }
+  })), bite.visibility === "PRIVATE" && isOwner && /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Private"
+  }, /*#__PURE__*/React.createElement(LockRoundedIcon, {
+    sx: {
+      fontSize: "15px"
+    }
+  }))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React.createElement(React.Fragment, null, isBlerpHovered ? /*#__PURE__*/React.createElement(IconButton, {
+    onClick: e => {
+      handleClickThreeDot(e);
+    },
+    sx: {
+      color: "notBlack.main",
+      padding: "0px",
+      zIndex: "2",
+      position: "relative",
+      right: "4px",
+      "&:hover": {
+        backgroundColor: "grey3.main"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(MoreHorizRoundedIcon, null)) : /*#__PURE__*/React.createElement(React.Fragment, null))));
+};
+
+export default BlerpTopRow;