@blerp/design 1.2.74 → 1.2.76

package/dist/esm/CollectionCard.js

@@ -0,0 +1,392 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import { BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, LockRounded, VisibilityOffRounded } from '@mui/icons-material';
+import React, { useState } from 'react';
+import { usePalette } from 'react-palette';
+import { Box, Stack, IconButton, Tooltip, Text } from './index.js';
+import { PremiumCollectionCard } from './PremiumCollectionCard.js';
+import styled from 'styled-components';
+import { TwitchBitIcon } from './Icons/Icons.js';
+
+var _templateObject;
+const LineClamp = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin: 5px 0;\n    max-width: 92%;\n"]))); //on background click
+//primary and secondary action buttons
+
+const CollectionCard = _ref => {
+  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or;
+
+  let {
+    collection,
+    variantSize,
+    handleClickBackground,
+    handleClickSave,
+    handleClickDrag,
+    handleClickView,
+    handleClickUnlock,
+    handleClickPrimaryAction,
+    handleClickSecondaryAction,
+    primaryActionButton,
+    secondaryActionButton,
+    fluid,
+    fontSize,
+    isLink,
+    isPremium,
+    isLocked,
+    isOwner,
+    overrideViewText,
+    hideUnlockPlatformText,
+    hidePremiumLockIcon,
+    unlockPlatformText,
+    hideCollectionBackground,
+    bottomLeftIcon,
+    handleClickBottomLeftIcon,
+    premiumDiamondPill
+  } = _ref;
+  const [cardColors, setCardColors] = useState(null);
+  const {
+    data,
+    loading,
+    error
+  } = usePalette((collection === null || collection === void 0 ? void 0 : collection.visibility) !== "PRIVATE" || isOwner ? collection === null || collection === void 0 ? void 0 : (_collection$image = collection.image) === null || _collection$image === void 0 ? void 0 : (_collection$image$ori = _collection$image.original) === null || _collection$image$ori === void 0 ? void 0 : _collection$image$ori.url : "black");
+
+  const renderProfileImage = () => {
+    var _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$ownerObje4, _collection$ownerObje5, _collection$ownerObje6;
+
+    return /*#__PURE__*/React.createElement(Stack, {
+      sx: {
+        zIndex: "3",
+        justifyContent: "center",
+        alignItems: "center",
+        position: "absolute",
+        width: "20px",
+        height: "20px",
+        borderRadius: "50%",
+        top: "5px",
+        right: "5px",
+        padding: "2px",
+        transition: "all .1s ease-in-out"
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      sx: {
+        backgroundColor: "notBlack.override",
+        width: "20px",
+        height: "20px",
+        ":hover": {
+          backgroundColor: "ibisRed.main"
+        }
+      },
+      onClick: e => {
+        e.stopPropagation();
+        handleClickSecondaryAction();
+      }
+    }, collection !== null && collection !== void 0 && (_collection$ownerObje = collection.ownerObject) !== null && _collection$ownerObje !== void 0 && (_collection$ownerObje2 = _collection$ownerObje.profileImage) !== null && _collection$ownerObje2 !== void 0 && (_collection$ownerObje3 = _collection$ownerObje2.original) !== null && _collection$ownerObje3 !== void 0 && _collection$ownerObje3.url ? /*#__PURE__*/React.createElement("img", {
+      alt: "profile",
+      src: collection === null || collection === void 0 ? void 0 : (_collection$ownerObje4 = collection.ownerObject) === null || _collection$ownerObje4 === void 0 ? void 0 : (_collection$ownerObje5 = _collection$ownerObje4.profileImage) === null || _collection$ownerObje5 === void 0 ? void 0 : (_collection$ownerObje6 = _collection$ownerObje5.original) === null || _collection$ownerObje6 === void 0 ? void 0 : _collection$ownerObje6.url,
+      style: {
+        width: "18px",
+        height: "18px",
+        objectFit: "cover",
+        borderRadius: "50%",
+        pointerEvents: "none"
+      }
+    }) : /*#__PURE__*/React.createElement(AccountCircleRounded, {
+      sx: {
+        fontSize: "16px",
+        color: "white.override"
+      }
+    })));
+  };
+
+  const renderPrimaryActionButton = () => {
+    return primaryActionButton ? primaryActionButton : /*#__PURE__*/React.createElement(IconButton, {
+      sx: {
+        width: "16px",
+        height: "16px",
+        margin: "0",
+        ":hover": {
+          backgroundColor: "grey3.override"
+        }
+      }
+    }, collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React.createElement(BookmarkRounded, {
+      onClick: e => {
+        e.stopPropagation();
+        handleClickSave(false);
+      },
+      sx: {
+        fontSize: "16px",
+        color: "white.override"
+      }
+    }) : /*#__PURE__*/React.createElement(BookmarkAddOutlined, {
+      onClick: e => {
+        e.stopPropagation();
+        handleClickSave(true);
+      },
+      sx: {
+        fontSize: "16px",
+        color: "white.override"
+      }
+    }));
+  };
+
+  const smallSize = {
+    size: "small",
+    width: "70px",
+    height: "70px"
+  };
+  const largeSize = {
+    size: "large",
+    width: "200px",
+    height: "200px"
+  };
+  let sizeParams = largeSize;
+
+  if (variantSize === "small") {
+    sizeParams = smallSize;
+  }
+
+  if (isPremium) {
+    return /*#__PURE__*/React.createElement(PremiumCollectionCard, {
+      collection: collection,
+      variantSize: variantSize,
+      handleClickBackground: handleClickBackground,
+      handleClickView: handleClickView,
+      handleClickUnlock: handleClickUnlock,
+      handleClickSave: handleClickSave,
+      handleClickDrag: handleClickDrag,
+      handleClickPrimaryAction: handleClickPrimaryAction,
+      handleClickSecondaryAction: handleClickSecondaryAction,
+      primaryActionButton: primaryActionButton,
+      secondaryActionButton: secondaryActionButton,
+      fluid: fluid,
+      fontSize: fontSize,
+      isLink: isLink,
+      isPremium: isPremium,
+      isLocked: isLocked,
+      overrideViewText: overrideViewText,
+      hideUnlockPlatformText: hideUnlockPlatformText,
+      hidePremiumLockIcon: hidePremiumLockIcon,
+      unlockPlatformText: unlockPlatformText,
+      hideCollectionBackground: hideCollectionBackground,
+      bottomLeftIcon: bottomLeftIcon,
+      handleClickBottomLeftIcon: handleClickBottomLeftIcon,
+      premiumDiamondPill: premiumDiamondPill
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      width: fluid ? "80%" : sizeParams.width,
+      height: fluid ? "80%" : sizeParams.height // ":hover #collection-background-1": {
+      //     transform: "rotate(7deg)",
+      //     height: "91%",
+      //     right: "-11px",
+      //     top: "12px",
+      // },
+      // ":hover #collection-background-2": {
+      //     transform: "rotate(14deg)",
+      //     height: "84%",
+      //     right: "-20px",
+      //     top: "24px",
+      // },
+
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    onClick: () => {
+      handleClickBackground();
+    },
+    sx: {
+      borderRadius: "8px",
+      position: "relative",
+      width: fluid ? "90%" : sizeParams.width,
+      height: fluid ? "90%" : sizeParams.height,
+      cursor: "pointer",
+      ":hover #collection-background-1": {
+        transform: "rotate(7deg)",
+        height: "91%",
+        right: "-11px",
+        top: "12px"
+      },
+      ":hover #collection-background-2": {
+        transform: "rotate(14deg)",
+        height: "84%",
+        right: "-20px",
+        top: "24px"
+      }
+    }
+  }, variantSize !== "small" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      backgroundColor: "white.override",
+      borderRadius: "8px",
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: "0",
+      zIndex: "3"
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    id: "collection-background-1",
+    sx: {
+      backgroundImage: "linear-gradient(".concat(data.muted || "#444444", ", #444444)"),
+      borderRadius: "8px",
+      width: "50%",
+      height: "94%",
+      position: "absolute",
+      transform: "rotate(5deg) scale(1)",
+      right: "-8px",
+      top: "8px",
+      zIndex: "2",
+      transition: "0.2s ease-out"
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    id: "collection-background-2",
+    sx: {
+      backgroundImage: "linear-gradient(".concat(data.darkMuted || "#252525", ", #252525)"),
+      borderRadius: "8px",
+      width: "50%",
+      height: "89%",
+      position: "absolute",
+      transform: "rotate(10deg) scale(1)",
+      right: "-16px",
+      top: "16px",
+      zIndex: "1",
+      transition: "0.2s ease-out"
+    }
+  }), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && !isOwner ? /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      backgroundColor: "grey3.main",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+      width: "100%",
+      height: "100%",
+      borderRadius: "8px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      alignItems: "center",
+      position: "absolute",
+      zIndex: "3"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: "20%"
+    }
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    sx: {
+      position: "absolute",
+      top: "5px",
+      left: "5px",
+      backgroundColor: "notBlack.override",
+      opacity: "0.7",
+      borderRadius: "20px",
+      padding: "3px 6px",
+      boxSizing: "border-box",
+      alignItems: "center"
+    }
+  }, renderPrimaryActionButton()), renderProfileImage(), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "This collection has been removed or hidden"
+  }, /*#__PURE__*/React.createElement(LockRounded, {
+    sx: {
+      color: "white.override",
+      fontSize: "35px"
+    }
+  })), /*#__PURE__*/React.createElement(LineClamp, null, /*#__PURE__*/React.createElement(Text, {
+    fontSize: fontSize ? fontSize : "22px",
+    color: "white.override",
+    textAlign: "center"
+  }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      backgroundImage: "linear-gradient(".concat(data.muted || "#000000", "7a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url, ")"),
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+      width: "100%",
+      height: "100%",
+      borderRadius: "8px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "absolute",
+      zIndex: "3"
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    sx: {
+      position: "absolute",
+      top: "5px",
+      left: "5px",
+      backgroundColor: "notBlack.override",
+      opacity: "0.7",
+      borderRadius: "20px",
+      padding: "3px 6px",
+      boxSizing: "border-box",
+      alignItems: "center"
+    }
+  }, (collection === null || collection === void 0 ? void 0 : collection.edgeType) !== "NewTwitchGroupEdge" && renderPrimaryActionButton(), (collection === null || collection === void 0 ? void 0 : collection.edgeType) === "NewTwitchGroupEdge" && /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Featured on Twitch Bits"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(TwitchBitIcon, {
+    sx: {
+      color: "white.override",
+      zIndex: "1",
+      fontSize: "18px"
+    }
+  }))), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && isOwner && /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Private"
+  }, /*#__PURE__*/React.createElement(LockRounded, {
+    sx: {
+      marginLeft: "4px",
+      fontSize: "16px",
+      color: "white.override"
+    }
+  })), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "UNLISTED" && /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Unlisted"
+  }, /*#__PURE__*/React.createElement(VisibilityOffRounded, {
+    sx: {
+      marginLeft: "4px",
+      fontSize: "16px",
+      color: "white.override"
+    }
+  }))), secondaryActionButton ? secondaryActionButton : renderProfileImage(), /*#__PURE__*/React.createElement(LineClamp, null, isLink ? /*#__PURE__*/React.createElement("a", {
+    href: "/sound-collection/".concat(collection._id),
+    style: {
+      color: "white",
+      textDecoration: "none"
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontSize: fontSize ? fontSize : "22px",
+    color: "white.override",
+    textAlign: "center",
+    sx: {
+      ":hover": {
+        textDecoration: "underline"
+      }
+    }
+  }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React.createElement(Text, {
+    fontSize: fontSize ? fontSize : "22px",
+    color: "white.override",
+    textAlign: "center"
+  }, collection === null || collection === void 0 ? void 0 : collection.title)))) : /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image3 = collection.image) === null || _collection$image3 === void 0 ? void 0 : (_collection$image3$or = _collection$image3.original) === null || _collection$image3$or === void 0 ? void 0 : _collection$image3$or.url, ")"),
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+      width: "100%",
+      height: "100%",
+      borderRadius: "8px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "relative"
+    }
+  })));
+};
+
+export default CollectionCard;
+export { CollectionCard };