@blerp/design 1.2.74 → 1.2.76

package/dist/esm/BlerpListView.js

@@ -0,0 +1,344 @@
+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 MoreHorizRoundedIcon from '@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 { BlerpListViewPremium } from './BlerpListViewPremium.js';
+import { PlayOutlineIcon } from './Icons/Icons.js';
+import { Box, Stack, Text, IconButton } from './index.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const BlerpImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    /* border-radius: 8px; */\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 zoomIn = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
+styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    border-radius: 8px;\n    transform: scale(0);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-around;\n    background-color: ", "D3;\n    border: 2px solid ", "D3;\n    backdrop-filter: blur(4px);\n    animation: ", " 0.2s forwards;\n"])), props => props.theme.colors.notBlack, props => props.theme.colors.notBlack, zoomIn);
+const SaveContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\n    opacity: 0;\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"])), props => props.theme.colors.white);
+const BlerpImageScrim = styled.div(_templateObject5 || (_templateObject5 = _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    /* border-radius: 8px; */\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), props => props.theme.colors.notBlackOverride, props => props.theme.colors.notBlackOverride, SaveContainer);
+styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin: 5px 0;\n"])));
+const BlerpListView = _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,
+    fluid,
+    backgroundColor,
+    hoverColor,
+    props,
+    isLocked,
+    isPremium,
+    handleClickLock,
+    handleClickPremium
+  } = _ref;
+  const [openSave, setOpenSave] = useState(false);
+  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();
+
+  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;
+    }
+  }
+
+  if (isPremium) {
+    return /*#__PURE__*/React.createElement(BlerpListViewPremium, {
+      bite: bite,
+      variantSize: variantSize,
+      isSelected: isSelected,
+      playingState: playingState,
+      extraInfoComponent: extraInfoComponent,
+      primaryActionButton: primaryActionButton,
+      secondaryActionButton: secondaryActionButton,
+      handleClickBackground: handleClickBackground,
+      handleClickPlay: handleClickPlay,
+      handleClickSave: handleClickSave,
+      handleClickThreeDot: handleClickThreeDot,
+      handleClickUnsave: handleClickUnsave,
+      handleClickTitle: handleClickTitle,
+      biteSubtitle: biteSubtitle,
+      handleSubtitleClick: handleSubtitleClick,
+      isLinkTitle: isLinkTitle,
+      fluid: fluid,
+      props: props,
+      isLocked: isLocked,
+      isPremium: isPremium,
+      handleClickLock: handleClickLock,
+      handleClickPremium: handleClickPremium,
+      backgroundColor: backgroundColor,
+      hoverColor: hoverColor
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: sizeParams.width,
+      minWidth: fluid && "300px",
+      borderRadius: "8px",
+      border: "2px transparent",
+      bgcolor: backgroundColor ? backgroundColor : "grey2.main",
+      backgroundOrigin: "border-box",
+      backgroundClip: "content-box, border-box",
+      boxShadow: "2px 2px 4px 0px #999999a1;",
+      transition: "0.3s",
+      "&:hover": {
+        bgcolor: hoverColor ? hoverColor : "grey3.main"
+      }
+    }
+  }, /*#__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"
+    }
+  }, /*#__PURE__*/React.createElement(BlerpImage, {
+    style: {
+      width: sizeParams.imageSize,
+      height: sizeParams.imageSize,
+      boxShadow: "0px 0px 0px 0px #999999a1;"
+    },
+    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("a", {
+    href: "/soundbites/".concat(bite._id),
+    style: {
+      textDecoration: "none",
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.fontSize,
+    noWrap: true,
+    width: "100%",
+    marginLeft: "10px",
+    color: "white.override",
+    sx: {
+      ":hover": {
+        textDecoration: handleClickTitle ? "underline" : "none"
+      }
+    },
+    onClick: e => {
+      if (handleClickTitle) {
+        e.stopPropagation();
+        handleClickTitle();
+      }
+    }
+  }, bite.title)) : /*#__PURE__*/React.createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.fontSize,
+    noWrap: true,
+    width: "100%",
+    marginLeft: "10px",
+    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"
+  }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React.createElement(IconButton, {
+    onClick: e => {
+      e.stopPropagation();
+      handleClickUnsave();
+      setOpenSave(true);
+    },
+    sx: {
+      backgroundColor: "white.override",
+      color: "starling.main",
+      padding: "5px",
+      marginRight: "10px",
+      ":hover": {
+        backgroundColor: "grey3.main"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(BookmarkOutlinedIcon, {
+    sx: {
+      color: "notBlack.override"
+    }
+  })) : /*#__PURE__*/React.createElement(IconButton, {
+    onClick: e => {
+      e.stopPropagation();
+      handleClickSave();
+      setOpenSave(true);
+    },
+    sx: {
+      backgroundColor: "white.override",
+      color: "starling.main",
+      padding: "5px",
+      marginRight: "10px",
+      ":hover": {
+        backgroundColor: "grey3.main"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(BookmarkAddOutlinedIcon, {
+    sx: {
+      color: "notBlack.override"
+    }
+  })), secondaryActionButton || /*#__PURE__*/React.createElement(IconButton, {
+    onClick: e => {
+      handleClickThreeDot(e);
+    },
+    sx: {
+      backgroundColor: "white.override",
+      padding: "5px",
+      marginRight: "10px",
+      ":hover": {
+        backgroundColor: "grey3.main"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(MoreHorizRoundedIcon, {
+    sx: {
+      color: "notBlack.override"
+    }
+  })))), extraInfoComponent && extraInfoComponent);
+};
+
+export default BlerpListView;
+export { BlerpListView };