@blerp/design 1.2.74 → 1.2.75

package/dist/esm/BlerpListViewPremium.js

@@ -0,0 +1,391 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import { PauseCircleOutlineRounded } from '@mui/icons-material';
+import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
+import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
+import '@mui/icons-material/MoreHorizRounded';
+import 'prop-types';
+import React, { useState, useContext } from 'react';
+import { usePalette } from 'react-palette';
+import styled, { keyframes, ThemeContext } from 'styled-components';
+import { useWindowSize } from './ScreenSizeHook.js';
+import { PlayOutlineIcon, OpenLockIcon, DiamondIcon } from './Icons/Icons.js';
+import LockRoundedIcon from '@mui/icons-material/LockRounded';
+import { Box, Stack, Text, Tooltip, IconButton } from './index.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+const BlerpImage = styled.div(_templateObject || (_templateObject = _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"])), props => props.url);
+keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
+const SaveContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    /* position: absolute; */\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\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        cursor: pointer;\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), props => "".concat(props.theme.colors.notBlack, "8a"), props => props.theme.colors.seafoam, props => props.theme.colors.override);
+const BlerpImageScrim = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-color: ", "10;\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"])), props => props.theme.colors.notBlackOverride, props => props.theme.colors.notBlackOverride);
+const PremiumPill = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    border-radius: 20px;\n    height: 25px;\n    width: 75px;\n    padding: 0 4px;\n    margin: 0 0 0 8px;\n    cursor: pointer;\n\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n        cursor: pointer;\n    }\n"])), props => props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a"), props => props.theme.colors.seafoam);
+styled.div(_templateObject6 || (_templateObject6 = _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.grey5, props => props.theme.colors.ibisRed);
+styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin: 5px 0;\n"])));
+const BlerpListViewPremium = _ref => {
+  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
+
+  let {
+    bite,
+    variantSize,
+    isSelected,
+    playingState,
+    extraInfoComponent,
+    primaryActionButton,
+    secondaryActionButton,
+    handleClickBackground,
+    handleClickPlay,
+    handleClickSave,
+    handleClickThreeDot,
+    handleClickUnsave,
+    handleClickTitle,
+    handleSubtitleClick,
+    biteSubtitle,
+    isLinkTitle,
+    isLocked,
+    fluid,
+    props,
+    backgroundColor,
+    hoverColor,
+    isPremium,
+    handleClickLock,
+    handleClickPremium
+  } = _ref;
+  const [openSave, setOpenSave] = useState(false);
+  const {
+    loading,
+    data,
+    error
+  } = usePalette(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);
+  const theme = useContext(ThemeContext);
+  const size = useWindowSize();
+  const [isBlerpHovered, setIsBlerpHovered] = useState(false);
+  const [actionButtonHovered, setActionButtonHovered] = useState(false);
+
+  let sizeParams;
+  const smallSize = {
+    width: 300,
+    height: 52,
+    smallFontSize: "12px",
+    fontSize: "16px",
+    imageSize: "40px",
+    reactionSpacing: 1,
+    reactionPadding: "3px",
+    reactionSize: "20px",
+    buttonSize: "small"
+  };
+  const mediumSize = {
+    width: 375,
+    height: 60,
+    smallFontSize: "14px",
+    fontSize: "18px",
+    imageSize: "48px",
+    reactionSpacing: 1,
+    reactionPadding: "3px",
+    reactionSize: "23px",
+    buttonSize: "medium"
+  };
+  const largeSize = {
+    width: 440,
+    height: 72,
+    smallFontSize: "26px",
+    fontSize: "20px",
+    imageSize: "56px",
+    reactionSpacing: 1,
+    reactionPadding: "5px",
+    reactionSize: "30px",
+    buttonFontSize: "large"
+  };
+
+  if (!variantSize) {
+    if (fluid) {
+      sizeParams = {
+        width: "100%",
+        height: 52,
+        smallFontSize: "14px",
+        fontSize: "18px",
+        imageSize: "48px",
+        reactionSpacing: 1,
+        reactionPadding: "3px",
+        reactionSize: "23px",
+        buttonSize: "medium"
+      };
+    } else if (size.width <= 400) {
+      sizeParams = smallSize;
+    } else if (size.width <= 900) {
+      sizeParams = mediumSize;
+    } else if (size.width > 900) {
+      sizeParams = largeSize;
+    }
+  } else {
+    if (variantSize === "small") {
+      sizeParams = smallSize;
+    } else if (variantSize === "medium") {
+      sizeParams = mediumSize;
+    } else if (variantSize === "large") {
+      sizeParams = largeSize;
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(Box, {
+    onMouseEnter: e => setIsBlerpHovered(true),
+    onMouseLeave: e => setIsBlerpHovered(false),
+    sx: {
+      width: sizeParams.width,
+      position: "relative",
+      minWidth: fluid && "300px",
+      borderRadius: "8px",
+      border: "2px transparent",
+      backgroundImage: "white",
+      backgroundOrigin: "border-box",
+      backgroundClip: "content-box, border-box",
+      boxShadow: "2px 2px 4px 0px #999999a1;",
+      // overflow: "hidden",
+      "&:hover": {
+        transition: "0.3s",
+        bgcolor: hoverColor ? hoverColor : "grey2.main"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      position: "absolute",
+      top: "0",
+      bottom: "0",
+      left: "0",
+      right: "0",
+      borderRadius: "8px",
+      background: backgroundColor ? backgroundColor : data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
+      transition: "opacity .15s ease-in-out",
+      opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    onClick: e => {
+      e.stopPropagation();
+      handleClickBackground();
+    },
+    sx: {
+      width: "calc(100% - 4px)",
+      height: sizeParams.height,
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      borderRadius: "8px",
+      border: "2px solid transparent",
+      borderRightWidth: "0px",
+      borderLeftWidth: "0px",
+      margin: "0 auto",
+      borderBottomColor: extraInfoComponent && theme.colors.grey3,
+      transition: "0.3s",
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    width: "70%",
+    alignItems: "center",
+    sx: {
+      cursor: "pointer",
+      minWidth: "30%"
+    }
+  }, /*#__PURE__*/React.createElement(BlerpImage, {
+    style: {
+      width: sizeParams.imageSize,
+      height: sizeParams.imageSize
+    },
+    url: 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
+  }, /*#__PURE__*/React.createElement(BlerpImageScrim, {
+    style: {
+      width: sizeParams.imageSize,
+      height: sizeParams.imageSize
+    },
+    onClick: e => {
+      if (handleClickPlay) {
+        e.stopPropagation();
+        handleClickPlay();
+      }
+    }
+  }, playingState === "playing" ? /*#__PURE__*/React.createElement(PauseCircleOutlineRounded, {
+    sx: {
+      width: "30px",
+      height: "30px",
+      color: "white.override"
+    }
+  }) : /*#__PURE__*/React.createElement(PlayOutlineIcon, {
+    sx: {
+      width: "30px",
+      height: "30px",
+      color: "white.override"
+    }
+  }))), /*#__PURE__*/React.createElement(Stack, {
+    direction: "column",
+    alignItems: "flex-start",
+    sx: {
+      width: "80%"
+    }
+  }, isLinkTitle ? /*#__PURE__*/React.createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.fontSize,
+    noWrap: true,
+    width: "80%",
+    marginLeft: "10px",
+    color: "white.override",
+    sx: {
+      ":hover": {
+        textDecoration: handleClickTitle ? "underline" : "none"
+      }
+    },
+    onClick: e => {
+      if (handleClickTitle) {
+        e.stopPropagation();
+        handleClickTitle();
+      }
+    }
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "/soundbites/".concat(bite._id),
+    style: {
+      textDecoration: "none",
+      color: "white"
+    }
+  }, bite.title)) : /*#__PURE__*/React.createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.fontSize,
+    noWrap: true,
+    width: "80%",
+    marginLeft: "10px",
+    color: "white.override",
+    sx: {
+      ":hover": {
+        textDecoration: handleClickTitle ? "underline" : "none"
+      }
+    },
+    onClick: e => {
+      if (handleClickTitle) {
+        e.stopPropagation();
+        handleClickTitle();
+      }
+    }
+  }, bite.title), biteSubtitle && /*#__PURE__*/React.createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.smallFontSize,
+    noWrap: true,
+    marginLeft: "10px",
+    width: "100%",
+    color: "white.override",
+    sx: {},
+    onClick: e => {
+      if (handleSubtitleClick) {
+        e.stopPropagation();
+        handleSubtitleClick();
+      }
+    }
+  }, biteSubtitle))), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center"
+  }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React.createElement(SaveContainer, {
+    isLocked: isLocked,
+    isBlerpHovered: isBlerpHovered,
+    onClick: e => {
+      e.stopPropagation();
+
+      if (handleClickLock) {
+        handleClickLock();
+      }
+    },
+    onMouseEnter: () => setActionButtonHovered(true),
+    onMouseLeave: () => setActionButtonHovered(false)
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      position: "relative",
+      top: "1px",
+      "& svg": {
+        color: "white.override"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Unlock Premium"
+  }, actionButtonHovered ? /*#__PURE__*/React.createElement(OpenLockIcon, {
+    sx: {
+      fontSize: "22px",
+      position: "relative",
+      bottom: "2px",
+      left: "0px"
+    }
+  }) : /*#__PURE__*/React.createElement(LockRoundedIcon, {
+    sx: {
+      fontSize: "16px",
+      position: "relative",
+      bottom: "1px"
+    }
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null), !!handleClickPremium && /*#__PURE__*/React.createElement(PremiumPill, {
+    isLocked: isLocked,
+    isBlerpHovered: isBlerpHovered,
+    onClick: e => {
+      e.stopPropagation();
+      handleClickPremium();
+    }
+  }, /*#__PURE__*/React.createElement(DiamondIcon, {
+    sx: {
+      width: "16px",
+      marginRight: "4px",
+      color: "white.override"
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      marginRight: "4px",
+      color: "white.override",
+      fontSize: "12px"
+    }
+  }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React.createElement(IconButton, {
+    onClick: e => {
+      e.stopPropagation();
+
+      if (handleClickUnsave) {
+        handleClickUnsave();
+      }
+
+      setOpenSave(true);
+    },
+    sx: {
+      backgroundColor: "white.override",
+      color: "starling.main",
+      padding: "5px",
+      margin: "0 8px",
+      ":hover": {
+        backgroundColor: "seafoam.main"
+      },
+      ":hover svg": {
+        color: "white.override"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(BookmarkOutlinedIcon, {
+    sx: {
+      color: "starling.main"
+    }
+  })) : /*#__PURE__*/React.createElement(IconButton, {
+    onClick: e => {
+      e.stopPropagation();
+
+      if (handleClickSave) {
+        handleClickSave();
+      }
+
+      setOpenSave(true);
+    },
+    sx: {
+      backgroundColor: "white.override",
+      padding: "5px",
+      marginRight: "10px",
+      ":hover": {
+        backgroundColor: "seafoam.main"
+      },
+      ":hover svg": {
+        color: "white.override"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(BookmarkAddOutlinedIcon, {
+    sx: {
+      color: "starling.main"
+    }
+  })))), extraInfoComponent && extraInfoComponent);
+};
+
+export default BlerpListViewPremium;
+export { BlerpListViewPremium };

package/dist/esm/BlerpListViewSkeleton.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React from 'react';
+import styled from 'styled-components';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+const NewBlerpsSkeleton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 300px;\n    height: 44px;\n    background: ", ";\n    border-radius: 8px;\n    animation: pulse 3s ease-in-out infinite;\n    @keyframes pulse {\n        0% {\n            opacity: 0.5;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            opacity: 0.5;\n        }\n    }\n"])), props => props.theme.colors.grey4);
+const LeftNewBlerpsBox = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: 38px;\n    width: 38px;\n    background-color: ", ";\n    border-radius: 8px;\n    margin-left: 4px;\n"])), props => props.theme.colors.white);
+const RightNewBlerpsBox = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 80px;\n    margin-right: 10px;\n"])));
+const NewBlerpsCircle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    height: 34px;\n    width: 34px;\n    background-color: ", ";\n    border-radius: 50%;\n"])), props => props.theme.colors.white);
+const BlerpListViewSkeleton = () => {
+  return /*#__PURE__*/React.createElement(NewBlerpsSkeleton, {
+    md: 6,
+    lg: 4
+  }, /*#__PURE__*/React.createElement(LeftNewBlerpsBox, null), /*#__PURE__*/React.createElement(RightNewBlerpsBox, null, /*#__PURE__*/React.createElement(NewBlerpsCircle, null), /*#__PURE__*/React.createElement(NewBlerpsCircle, null)));
+};
+
+export { BlerpListViewSkeleton };

package/dist/esm/BlerpSkeleton.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React from 'react';
+import styled from 'styled-components';
+
+var _templateObject, _templateObject2, _templateObject3;
+const FeaturedBlerpSkeleton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-between;\n    height: 234px;\n    width: 220px;\n    border: 2px solid ", ";\n    border-radius: 8px;\n\n    @media (max-width: 900px) {\n        height: 190px;\n        width: 180px;\n        border: 2px solid ", ";\n        border-radius: 8px;\n    }\n\n    animation: pulse 3s ease-in-out infinite;\n    @keyframes pulse {\n        0% {\n            opacity: 0.5;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            opacity: 0.5;\n        }\n    }\n"])), props => props.theme.colors.grey2, props => props.theme.colors.grey2);
+const FeaturedBlerpCircle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: 135px;\n    width: 135px;\n    border-radius: 50%;\n    margin-top: 30px;\n    background: ", ";\n\n    @media (max-width: 900px) {\n        height: 100px;\n        width: 100px;\n        margin-top: 30px;\n    }\n"])), props => props.theme.colors.grey2);
+const FeaturedBlerpTitle = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 80%;\n    height: 24px;\n    background: ", ";\n    margin-bottom: 20px;\n"])), props => props.theme.colors.grey2);
+const BlerpSkeleton = () => {
+  return /*#__PURE__*/React.createElement(FeaturedBlerpSkeleton, null, /*#__PURE__*/React.createElement(FeaturedBlerpCircle, null), /*#__PURE__*/React.createElement(FeaturedBlerpTitle, null));
+};
+
+export { BlerpSkeleton };