@blerp/design 1.2.74 → 1.2.75

package/dist/cjs/Blerp/BlerpImageRow.js

@@ -0,0 +1,167 @@
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var iconsMaterial = require('@mui/icons-material');
+var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
+var LockRoundedIcon = require('@mui/icons-material/LockRounded');
+var React = require('react');
+var styled = require('styled-components');
+var index = require('../index.js');
+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 BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
+var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+const BlerpImage = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), props => props.url);
+const SaveContainer = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 20px;\n    height: 20px;\n    opacity: 1;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 5px;\n    transition: 0.3s;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), props => props.theme.colors.whiteOverride, props => props.isLocked ? "".concat(props.theme.colors.seafoam) : props.isPremium ? "".concat(props.theme.colors.starling) : "".concat(props.theme.colors.seafoam), props => props.theme.colors.white);
+const BlerpImageScrim = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\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"])), props => props.theme.colors.grey6Override, props => props.theme.colors.grey6Override, SaveContainer);
+const BlerpImageScrimPrivate = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\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\n    &:hover p {\n        display: block;\n    }\n    &:hover svg {\n        display: none;\n    }\n"])), props => props.theme.colors.grey3, props => props.theme.colors.grey3, SaveContainer);
+
+const BlerpImageRow = _ref => {
+  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original, _bite$giphy;
+
+  let {
+    bite,
+    playingState,
+    primaryActionButton,
+    getUserReactions,
+    handleClickPlay,
+    handleClickSave,
+    isPremium,
+    isLocked,
+    isOwner,
+    handleClickLock,
+    setOpenSave,
+    sizeParams
+  } = _ref;
+  const [actionButtonHovered, setActionButtonHovered] = React.useState(false);
+
+  if (bite.visibility === "PRIVATE" && !isOwner) {
+    return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+      direction: "row",
+      marginTop: sizeParams.buttonSize === "small" && "28px"
+    }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
+      style: {
+        width: sizeParams.imageSize,
+        height: sizeParams.imageSize
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrimPrivate, {
+      id: "blerp-image-scrim-private",
+      style: {
+        width: sizeParams.imageSize,
+        height: sizeParams.imageSize
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+      sx: {
+        display: "none",
+        fontWeight: "regular",
+        color: "grey5.override",
+        lineHeight: "20px",
+        textAlign: "center"
+      }
+    }, "No longer avaliable"), /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
+      sx: {
+        fontSize: "25px",
+        color: "white.override"
+      }
+    }))));
+  }
+
+  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    direction: "row",
+    marginTop: sizeParams.buttonSize === "small" && "28px"
+  }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
+    style: {
+      width: sizeParams.imageSize,
+      height: sizeParams.imageSize
+    },
+    url: (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.local) || (bite === null || bite === void 0 ? void 0 : (_bite$image2 = bite.image) === null || _bite$image2 === void 0 ? void 0 : (_bite$image2$original = _bite$image2.original) === null || _bite$image2$original === void 0 ? void 0 : _bite$image2$original.url) || (bite === null || bite === void 0 ? void 0 : (_bite$giphy = bite.giphy) === null || _bite$giphy === void 0 ? void 0 : _bite$giphy.gif)
+  }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim, {
+    style: {
+      width: sizeParams.imageSize,
+      height: sizeParams.imageSize
+    },
+    onClick: () => handleClickPlay()
+  }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
+    sx: {
+      width: "50px",
+      height: "50px",
+      color: "white.override"
+    }
+  }) : /*#__PURE__*/React__default['default'].createElement(Icons.PlayOutlineIcon, {
+    sx: {
+      width: "40px",
+      height: "40px",
+      color: "white.override"
+    }
+  }), isPremium && isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer, {
+    isPremium: isPremium,
+    isLocked: isLocked,
+    onClick: e => {
+      e.stopPropagation();
+      handleClickLock();
+    },
+    onMouseEnter: () => setActionButtonHovered(true),
+    onMouseLeave: () => setActionButtonHovered(false)
+  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      position: "relative",
+      top: "1px",
+      "&:hover svg": {
+        color: "white.main"
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+    title: "Unlock"
+  }, actionButtonHovered ? /*#__PURE__*/React__default['default'].createElement(Icons.OpenLockIcon, {
+    sx: {
+      fontSize: "20px",
+      color: "white.override",
+      position: "relative",
+      bottom: "1px",
+      left: "1px"
+    }
+  }) : /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
+    sx: {
+      fontSize: "16px",
+      color: "notBlack.override"
+    }
+  })))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(SaveContainer, {
+    isPremium: isPremium,
+    isLocked: isLocked,
+    onClick: e => {
+      e.stopPropagation();
+
+      if (isPremium && isLocked) {
+        handleClickLock();
+      } else {
+        getUserReactions();
+        !(bite !== null && bite !== void 0 && bite.saved) && handleClickSave();
+        setOpenSave(true);
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      position: "relative",
+      top: "1px",
+      "& svg": {
+        color: "notBlack.override"
+      },
+      "&:hover svg": {
+        color: "white.override"
+      }
+    }
+  }, bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
+    sx: {
+      fontSize: "18px"
+    }
+  }) : /*#__PURE__*/React__default['default'].createElement(Icons.BookmarkAddRounded, null)))))));
+};
+
+module.exports = BlerpImageRow;

package/dist/cjs/Blerp/BlerpSavePopup.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var BookmarkRemoveOutlinedIcon = require('@mui/icons-material/BookmarkRemoveOutlined');
+var CloseRoundedIcon = require('@mui/icons-material/CloseRounded');
+var React = require('react');
+var styled = require('styled-components');
+var Blerp = require('../Blerp.js');
+var index = require('../index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
+var CloseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseRoundedIcon);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject;
+const ReactionButton = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    transition: 0.2s;\n    margin-right: 0;\n    cursor: pointer;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), 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__default['default'].createElement(index.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__default['default'].createElement(CloseRoundedIcon__default['default'], {
+    onClick: () => {
+      setOpenSave(false);
+    },
+    sx: {
+      color: "white.override",
+      position: "absolute",
+      top: "0",
+      right: "0"
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(index.Grid, {
+    display: "grid",
+    gridTemplateColumns: "repeat(5, 1fr)",
+    alignItems: "center",
+    marginTop: "16px",
+    gap: 1
+  }, Object.keys(Blerp.reactionIconUrls).map(reaction => {
+    var _bite$userReactions;
+
+    return /*#__PURE__*/React__default['default'].createElement(index.Grid, {
+      key: "".concat(reaction, "-button"),
+      gridColumn: "span 1",
+      display: "flex",
+      justifyContent: "center"
+    }, /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+      title: reaction
+    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("img", {
+      alt: "reaction-".concat(reaction),
+      width: "100%",
+      height: "100%",
+      src: Blerp.reactionIconUrls[reaction]
+    }))));
+  })), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    justifyContent: "space-around",
+    alignItems: "center",
+    direction: "row",
+    width: "100%",
+    flexWrap: "wrap"
+  }, /*#__PURE__*/React__default['default'].createElement(index.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__default['default'].createElement(React__default['default'].Fragment, null, (!bite.isPremium || !bite.owned) && /*#__PURE__*/React__default['default'].createElement(index.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__default['default'].createElement(BookmarkRemoveOutlinedIcon__default['default'], {
+      sx: {
+        color: "white.override",
+        margin: "0"
+      }
+    })
+  }, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default['default'].createElement(index.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")));
+};
+
+module.exports = BlerpSavePopup;

package/dist/cjs/Blerp/BlerpTitleRow.js

@@ -0,0 +1,116 @@
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var React = require('react');
+var styled = require('styled-components');
+var index = require('../index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject;
+const LineClamp = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    margin: 0;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"])));
+
+const BlerpTitleRow = _ref => {
+  let {
+    bite,
+    title,
+    isLinkTitle,
+    handleClickTitle,
+    isPremium,
+    isLocked,
+    isOwner,
+    sizeParams
+  } = _ref;
+
+  if (bite.visibility === "PRIVATE" && !isOwner) {
+    return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+      direction: "row",
+      sx: {
+        width: "90%",
+        textAlign: "center",
+        zIndex: "1",
+        overflow: "hidden",
+        justifyContent: "center",
+        margin: "auto"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(LineClamp, {
+      onClick: e => {
+        if (handleClickTitle) {
+          e.stopPropagation();
+          handleClickTitle();
+        }
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(index.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__default['default'].createElement(index.Stack, {
+    direction: "row",
+    sx: {
+      width: "90%",
+      textAlign: "center",
+      zIndex: "1",
+      overflow: "hidden",
+      padding: "4px 0",
+      justifyContent: "center",
+      margin: "auto"
+    }
+  }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(LineClamp, {
+    onClick: e => {
+      if (handleClickTitle) {
+        e.stopPropagation();
+        handleClickTitle();
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "/soundbites/".concat(bite._id),
+    style: {
+      textDecoration: "none"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.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__default['default'].createElement(LineClamp, {
+    onClick: e => {
+      if (handleClickTitle) {
+        e.stopPropagation();
+        handleClickTitle();
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.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)));
+};
+
+module.exports = BlerpTitleRow;