@blerp/design 1.0.59 → 1.0.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs.js +700 -660
  2. package/dist/index.esm.js +700 -660
  3. package/dist/index.umd.js +700 -660
  4. package/package.json +1 -1
package/dist/index.umd.js CHANGED
@@ -1264,7 +1264,7 @@
1264
1264
  backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
1265
1265
  transition: "0.3s",
1266
1266
  position: "relative",
1267
- cursor: "pointer",
1267
+ cursor: "inherit",
1268
1268
  "&:hover": {
1269
1269
  bgcolor: isPremium ? "white.main" : "grey2.main",
1270
1270
  border: isPremium ? "none" : "2px solid transparent"
@@ -1355,7 +1355,7 @@
1355
1355
  handleClickTitle: PropTypes__default['default'].func.isRequired
1356
1356
  };
1357
1357
 
1358
- var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4;
1358
+ var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$1;
1359
1359
  // _id: "5b237fbafca7167a35619410",
1360
1360
  // title: "Crying",
1361
1361
  // image: {
@@ -1374,7 +1374,7 @@
1374
1374
  // },
1375
1375
  // };
1376
1376
 
1377
- var BlerpImage$1 = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
1377
+ var BlerpImage$1 = styled__default['default'].div(_templateObject$e || (_templateObject$e = _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"])), function (props) {
1378
1378
  return props.url;
1379
1379
  });
1380
1380
  var zoomIn$1 = styled.keyframes(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
@@ -1383,16 +1383,30 @@
1383
1383
  }, function (props) {
1384
1384
  return props.theme.colors.notBlack;
1385
1385
  }, zoomIn$1);
1386
- var SaveContainer$1 = styled__default['default'].div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
1386
+ var SaveContainer$1 = styled__default['default'].div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
1387
+ return "".concat(props.theme.colors.notBlack, "8a");
1388
+ }, function (props) {
1389
+ return props.theme.colors.seafoam;
1390
+ }, function (props) {
1387
1391
  return props.theme.colors.white;
1388
1392
  });
1389
- var BlerpImageScrim$1 = styled__default['default'].div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
1393
+ var BlerpImageScrim$1 = styled__default['default'].div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
1390
1394
  return props.theme.colors.notBlackOverride;
1391
1395
  }, function (props) {
1392
1396
  return props.theme.colors.notBlackOverride;
1393
- }, SaveContainer$1);
1394
- styled__default['default'].div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
1395
- var BlerpListView$1 = function BlerpListView(_ref) {
1397
+ });
1398
+ var PremiumPill = styled__default['default'].div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
1399
+ return props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a");
1400
+ }, function (props) {
1401
+ return props.theme.colors.seafoam;
1402
+ });
1403
+ styled__default['default'].div(_templateObject7$2 || (_templateObject7$2 = _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"])), function (props) {
1404
+ return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
1405
+ }, function (props) {
1406
+ return props.theme.colors.ibisRed;
1407
+ });
1408
+ styled__default['default'].div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
1409
+ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
1396
1410
  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
1397
1411
 
1398
1412
  var bite = _ref.bite,
@@ -1404,13 +1418,17 @@
1404
1418
  secondaryActionButton = _ref.secondaryActionButton,
1405
1419
  handleClickBackground = _ref.handleClickBackground,
1406
1420
  handleClickPlay = _ref.handleClickPlay,
1407
- handleClickSave = _ref.handleClickSave,
1408
- handleClickThreeDot = _ref.handleClickThreeDot,
1409
- handleClickUnsave = _ref.handleClickUnsave,
1421
+ handleClickSave = _ref.handleClickSave;
1422
+ _ref.handleClickThreeDot;
1423
+ var handleClickUnsave = _ref.handleClickUnsave,
1410
1424
  handleClickTitle = _ref.handleClickTitle,
1411
1425
  isLinkTitle = _ref.isLinkTitle,
1426
+ isLocked = _ref.isLocked,
1412
1427
  fluid = _ref.fluid;
1413
1428
  _ref.props;
1429
+ _ref.isPremium;
1430
+ var handleClickLock = _ref.handleClickLock,
1431
+ handleClickPremium = _ref.handleClickPremium;
1414
1432
 
1415
1433
  var _useState = React.useState(false),
1416
1434
  _useState2 = _slicedToArray__default['default'](_useState, 2);
@@ -1419,12 +1437,24 @@
1419
1437
 
1420
1438
  var _usePalette = reactPalette.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);
1421
1439
  _usePalette.loading;
1422
- _usePalette.data;
1440
+ var data = _usePalette.data;
1423
1441
  _usePalette.error;
1424
1442
 
1425
1443
  var theme = React.useContext(styled.ThemeContext);
1426
1444
  var size = useWindowSize();
1427
1445
 
1446
+ var _useState3 = React.useState(false),
1447
+ _useState4 = _slicedToArray__default['default'](_useState3, 2),
1448
+ isBlerpHovered = _useState4[0],
1449
+ setIsBlerpHovered = _useState4[1];
1450
+
1451
+ var _useState5 = React.useState(false),
1452
+ _useState6 = _slicedToArray__default['default'](_useState5, 2),
1453
+ actionButtonHovered = _useState6[0],
1454
+ setActionButtonHovered = _useState6[1];
1455
+
1456
+ console.log(data);
1457
+
1428
1458
  var sizeParams;
1429
1459
  var smallSize = {
1430
1460
  width: 300,
@@ -1487,21 +1517,41 @@
1487
1517
  }
1488
1518
 
1489
1519
  return /*#__PURE__*/React__default['default'].createElement(Box, {
1520
+ onMouseEnter: function onMouseEnter(e) {
1521
+ return setIsBlerpHovered(true);
1522
+ },
1523
+ onMouseLeave: function onMouseLeave(e) {
1524
+ return setIsBlerpHovered(false);
1525
+ },
1490
1526
  sx: {
1491
1527
  width: sizeParams.width,
1528
+ position: "relative",
1492
1529
  minWidth: fluid && "300px",
1493
1530
  borderRadius: "8px",
1494
1531
  border: "2px transparent",
1495
- bgcolor: "grey2.main",
1532
+ backgroundImage: "white",
1496
1533
  backgroundOrigin: "border-box",
1497
1534
  backgroundClip: "content-box, border-box",
1498
1535
  boxShadow: "2px 2px 4px 0px #999999a1;",
1499
- transition: "0.3s",
1536
+ // overflow: "hidden",
1500
1537
  "&:hover": {
1501
- bgcolor: "grey3.main"
1538
+ transition: "0.3s",
1539
+ bgcolor: "grey2.main"
1502
1540
  }
1503
1541
  }
1504
- }, /*#__PURE__*/React__default['default'].createElement(Box, {
1542
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1543
+ sx: {
1544
+ position: "absolute",
1545
+ top: "0",
1546
+ bottom: "0",
1547
+ left: "0",
1548
+ right: "0",
1549
+ borderRadius: "8px",
1550
+ background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
1551
+ transition: "opacity .15s ease-in-out",
1552
+ opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
1553
+ }
1554
+ }), /*#__PURE__*/React__default['default'].createElement(Box, {
1505
1555
  onClick: function onClick(e) {
1506
1556
  e.stopPropagation();
1507
1557
  handleClickBackground();
@@ -1527,13 +1577,13 @@
1527
1577
  width: "70%",
1528
1578
  alignItems: "center",
1529
1579
  sx: {
1530
- cursor: "pointer"
1580
+ cursor: "pointer",
1581
+ minWidth: "30%"
1531
1582
  }
1532
1583
  }, /*#__PURE__*/React__default['default'].createElement(BlerpImage$1, {
1533
1584
  style: {
1534
1585
  width: sizeParams.imageSize,
1535
- height: sizeParams.imageSize,
1536
- boxShadow: "0px 0px 0px 0px #999999a1;"
1586
+ height: sizeParams.imageSize
1537
1587
  },
1538
1588
  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
1539
1589
  }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim$1, {
@@ -1559,13 +1609,7 @@
1559
1609
  height: "30px",
1560
1610
  color: "white.override"
1561
1611
  }
1562
- }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
1563
- href: "/soundbites/".concat(bite._id),
1564
- style: {
1565
- textDecoration: "none",
1566
- width: "100%"
1567
- }
1568
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
1612
+ }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
1569
1613
  textAlign: "left",
1570
1614
  fontSize: sizeParams.fontSize,
1571
1615
  noWrap: true,
@@ -1583,12 +1627,19 @@
1583
1627
  handleClickTitle();
1584
1628
  }
1585
1629
  }
1630
+ }, /*#__PURE__*/React__default['default'].createElement("a", {
1631
+ href: "/soundbites/".concat(bite._id),
1632
+ style: {
1633
+ textDecoration: "none",
1634
+ color: "white"
1635
+ }
1586
1636
  }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
1587
1637
  textAlign: "left",
1588
1638
  fontSize: sizeParams.fontSize,
1589
1639
  noWrap: true,
1590
1640
  width: "80%",
1591
1641
  marginLeft: "10px",
1642
+ color: "white.override",
1592
1643
  sx: {
1593
1644
  ":hover": {
1594
1645
  textDecoration: handleClickTitle ? "underline" : "none"
@@ -1601,64 +1652,120 @@
1601
1652
  }
1602
1653
  }
1603
1654
  }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
1604
- direction: "row"
1605
- }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
1655
+ direction: "row",
1656
+ alignItems: "center"
1657
+ }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer$1, {
1658
+ isLocked: isLocked,
1659
+ isBlerpHovered: isBlerpHovered,
1606
1660
  onClick: function onClick(e) {
1607
1661
  e.stopPropagation();
1608
- handleClickUnsave();
1609
- setOpenSave(true);
1662
+
1663
+ if (handleClickLock) {
1664
+ handleClickLock();
1665
+ }
1666
+ },
1667
+ onMouseEnter: function onMouseEnter() {
1668
+ return setActionButtonHovered(true);
1610
1669
  },
1670
+ onMouseLeave: function onMouseLeave() {
1671
+ return setActionButtonHovered(false);
1672
+ }
1673
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1611
1674
  sx: {
1612
- backgroundColor: "white.override",
1613
- color: "starling.main",
1614
- padding: "5px",
1615
- marginRight: "10px",
1616
- ":hover": {
1617
- backgroundColor: "grey3.main"
1675
+ position: "relative",
1676
+ top: "1px",
1677
+ "& svg": {
1678
+ color: "white.main"
1618
1679
  }
1619
1680
  }
1620
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1681
+ }, /*#__PURE__*/React__default['default'].createElement(Tooltip, {
1682
+ title: "Unlock Premium"
1683
+ }, actionButtonHovered ? /*#__PURE__*/React__default['default'].createElement(OpenLockIcon, {
1621
1684
  sx: {
1622
- color: "notBlack.override"
1685
+ fontSize: "22px",
1686
+ position: "relative",
1687
+ bottom: "2px",
1688
+ left: "0px"
1623
1689
  }
1624
- })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
1690
+ }) : /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
1691
+ sx: {
1692
+ fontSize: "16px",
1693
+ position: "relative",
1694
+ bottom: "1px"
1695
+ }
1696
+ })))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), !!handleClickPremium && /*#__PURE__*/React__default['default'].createElement(PremiumPill, {
1697
+ isLocked: isLocked,
1698
+ isBlerpHovered: isBlerpHovered,
1625
1699
  onClick: function onClick(e) {
1626
1700
  e.stopPropagation();
1627
- handleClickSave();
1701
+ handleClickPremium();
1702
+ }
1703
+ }, /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
1704
+ sx: {
1705
+ width: "16px",
1706
+ marginRight: "4px",
1707
+ color: "white.main"
1708
+ }
1709
+ }), /*#__PURE__*/React__default['default'].createElement(Text, {
1710
+ sx: {
1711
+ marginRight: "4px",
1712
+ color: "white.main",
1713
+ fontSize: "12px"
1714
+ }
1715
+ }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
1716
+ onClick: function onClick(e) {
1717
+ e.stopPropagation();
1718
+
1719
+ if (handleClickUnsave) {
1720
+ handleClickUnsave();
1721
+ }
1722
+
1628
1723
  setOpenSave(true);
1629
1724
  },
1630
1725
  sx: {
1631
1726
  backgroundColor: "white.override",
1632
1727
  color: "starling.main",
1633
1728
  padding: "5px",
1634
- marginRight: "10px",
1729
+ margin: "0 8px",
1635
1730
  ":hover": {
1636
- backgroundColor: "grey3.main"
1731
+ backgroundColor: "seafoam.main"
1732
+ },
1733
+ ":hover svg": {
1734
+ color: "white.main"
1637
1735
  }
1638
1736
  }
1639
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1737
+ }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1640
1738
  sx: {
1641
- color: "notBlack.override"
1739
+ color: "starling.main"
1642
1740
  }
1643
- })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
1741
+ })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
1644
1742
  onClick: function onClick(e) {
1645
- handleClickThreeDot(e);
1743
+ e.stopPropagation();
1744
+
1745
+ if (handleClickSave) {
1746
+ handleClickSave();
1747
+ }
1748
+
1749
+ setOpenSave(true);
1646
1750
  },
1647
1751
  sx: {
1648
1752
  backgroundColor: "white.override",
1649
1753
  padding: "5px",
1650
1754
  marginRight: "10px",
1651
1755
  ":hover": {
1652
- backgroundColor: "grey3.main"
1756
+ backgroundColor: "seafoam.main"
1757
+ },
1758
+ ":hover svg": {
1759
+ color: "white.main"
1653
1760
  }
1654
1761
  }
1655
- }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
1762
+ }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1656
1763
  sx: {
1657
- color: "notBlack.override"
1764
+ color: "starling.main"
1658
1765
  }
1659
1766
  })))), extraInfoComponent && extraInfoComponent);
1660
1767
  };
1661
- BlerpListView$1.propTypes = {
1768
+ BlerpListViewPremium$1.propTypes = {
1662
1769
  bite: PropTypes__default['default'].object.isRequired,
1663
1770
  collections: PropTypes__default['default'].array.isRequired,
1664
1771
  variantSize: PropTypes__default['default'].string.isRequired,
@@ -1676,97 +1783,106 @@
1676
1783
  handleClickUnsave: PropTypes__default['default'].func.isRequired
1677
1784
  };
1678
1785
 
1679
- var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
1680
- var MasterContainer = styled__default['default'].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral__default['default'](["\n display: flex;\n /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n height: ", ";\n width: ", ";\n min-width: ", ";\n border-radius: 8px;\n background-origin: border-box;\n background-clip: content-box, border-box;\n box-shadow: 2px 2px 4px 0px #999999a1;\n position: relative;\n\n #second-button {\n opacity: 0;\n margin-left: 0px;\n margin-right: 15px;\n }\n\n :hover #yellow-border {\n opacity: 1;\n }\n :hover #second-button {\n opacity: 1;\n margin-left: 5px;\n margin-right: 10px;\n }\n :hover #mid-box {\n width: 96%;\n }\n :hover #back-box {\n width: ", ";\n }\n"])), function (_ref) {
1681
- var sizeParams = _ref.sizeParams;
1682
- return (sizeParams.height += 2) + "px";
1683
- }, function (_ref2) {
1684
- var sizeParams = _ref2.sizeParams;
1685
- return sizeParams.width;
1686
- }, function (_ref3) {
1687
- var fluid = _ref3.fluid;
1688
- return fluid ? "300px" : "0";
1689
- }, function (props) {
1690
- return props.owned ? "102%" : "100%";
1786
+ var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3;
1787
+ // _id: "5b237fbafca7167a35619410",
1788
+ // title: "Crying",
1789
+ // image: {
1790
+ // filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
1791
+ // original: {
1792
+ // url:
1793
+ // "https://blerp-content-images-1144.storage.googleapis.com/original/72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=03746d6018c257bf5b34e773fb39d0dd502ee337dcb654c2b0d2dcf1c0bacc704cfae0daf0028a00339e15529a0fbcf613a83760422433f25577db978f704806100ed6c71f7176aaa23fc08c3d99692eec6fda7cdac3eb95ae6e26c65a8495f17e4da4895730c57c9e5f66509ae90f7c00c4da944caab44396f53de1bf0bc7710159f92430f571b47b893bea452da14a1667b373faa8d195f31cd23ea72b3db17d0557e0fded6411fc1564207aede8b6aa768c9fc63323a4af42c496f2a9b3a8290c68e96bf0f39aa097f2c6a0a3b47312b7f3040dc9b77736f6ea55b5fac41140ec6c7e837b827b5210d43a4b6299b55f65dc16da26c1f39f644919ac68ac6c",
1794
+ // },
1795
+ // },
1796
+ // audio: {
1797
+ // filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
1798
+ // original: {
1799
+ // url:
1800
+ // "https://blerp-content-audio-1144.storage.googleapis.com/mp3/4d6796be-a58c-4c12-9949-fd832cbf646d?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=40f5a61ce407158c9e324a8fb09c459dde051d29ec0f528dc1a6f3ed7e02638a4deaabb980289daa6b0498069718389d8b1a95b10e7097df3f8be2cee452274fdb876f5e553c868de683dc222bcaa19144e6879fbcc84145aa9d6837efea1b8cc06efde3d459f3f721d9a2a7e9d775a36e916809b1e1be999fc7331590affdc7149c7b24da4c48b3096119d7e6f225c4026a82bc16751a8fb1e8129c9ed835db30858306010769db97478305a9224d498b001589baad3e23ad94c1ea7c6d4721f27bcbc24fa75968e8bafcdaf250ff58e16e9b0a47f68cca496d93014a2e792262de6876a8ccc9776da8ffa21c194b9c7228e8748075207335fa91aace2250c0",
1801
+ // },
1802
+ // },
1803
+ // };
1804
+
1805
+ var BlerpImage = styled__default['default'].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
1806
+ return props.url;
1691
1807
  });
1692
- var YellowHoverBorder$1 = styled__default['default'].div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 113%;\n width: 102%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 3px solid rgb(255, 225, 76);\n border-radius: 14px;\n transition: opacity 0.2s ease-in-out;\n opacity: 0;\n"])));
1693
- var TopBox = styled__default['default'].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral__default['default'](["\n z-index: 3;\n border: 2px transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ", ";\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n position: relative;\n overflow: hidden;\n"])), function (props) {
1808
+ var zoomIn = styled.keyframes(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
1809
+ styled__default['default'].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
1810
+ return props.theme.colors.notBlack;
1811
+ }, function (props) {
1812
+ return props.theme.colors.notBlack;
1813
+ }, zoomIn);
1814
+ var SaveContainer = styled__default['default'].div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
1694
1815
  return props.theme.colors.white;
1695
1816
  });
1696
- var MidBox = styled__default['default'].div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral__default['default'](["\n z-index: 2;\n position: absolute;\n background-color: ", ";\n width: 95%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n overflow: hidden;\n"])), function (props) {
1697
- return props.theme.colors.grey5;
1698
- });
1699
- var BackBox = styled__default['default'].div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral__default['default'](["\n background-color: blue;\n background-color: ", ";\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n overflow: hidden;\n"])), function (props) {
1700
- return props.theme.colors.grey7;
1701
- });
1702
- var PhotoBackground = styled__default['default'].div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(", ");\n background-size: cover;\n border-radius: 8px;\n overflow: hidden;\n background-position: center;\n"])), function (props) {
1703
- return props.url;
1704
- });
1705
- var BlurBackground = styled__default['default'].div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 8px;\n backdrop-filter: blur(4px);\n"])));
1706
- var GradientBackground = styled__default['default'].div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral__default['default'](["\n width: 100%;\n opacity: 0.7;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 8px;\n width: 100%;\n height: 100%;\n"])));
1707
- var InteractionBox = styled__default['default'].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: calc(100% - 4px);\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n margin: 0 auto;\n transition: 0.2s;\n position: relative;\n"]))); // Box on the left of the Collection that is clicked to save/unsave
1708
-
1709
- var SaveBox = styled__default['default'].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n border-radius: 4px;\n transition: 0.2s;\n box-shadow: 0px 0px 0px 0px #999999a1;\n cursor: pointer;\n\n &:hover {\n transform: scale(1.05);\n }\n"])));
1710
- var SaveBoxTop = styled__default['default'].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default['default'](["\n z-index: 5;\n width: 100%;\n position: relative;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n"])), function (props) {
1817
+ var BlerpImageScrim = styled__default['default'].div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
1711
1818
  return props.theme.colors.notBlackOverride;
1712
- });
1713
- var SaveBoxTopDarken = styled__default['default'].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default['default'](["\n opacity: 1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 4px;\n"])));
1714
- var SaveBoxShadowSquare = styled__default['default'].div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 4px;\n ", ";\n"])), function (props) {
1715
- return props.depth === "1" ? "\n transform: skewX(-5deg); \n left: 2px; \n height: 94%; \n bottom: 0" : props.depth === "2" ? "\n transform: skewX(-12deg); \n left: 5px; \n height: 83%; \n width:97%;\n bottom: 0" : "";
1716
- });
1717
- var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
1718
- var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
1719
-
1720
- var collection = _ref4.collection,
1721
- variantSize = _ref4.variantSize,
1722
- extraInfoComponent = _ref4.extraInfoComponent,
1723
- primaryActionButton = _ref4.primaryActionButton,
1724
- secondaryActionButton = _ref4.secondaryActionButton,
1725
- handleClickBackground = _ref4.handleClickBackground,
1726
- handleClickTitle = _ref4.handleClickTitle,
1727
- isLinkTitle = _ref4.isLinkTitle,
1728
- fluid = _ref4.fluid;
1729
-
1730
- var _useState = React.useState(false),
1731
- _useState2 = _slicedToArray__default['default'](_useState, 2);
1732
- _useState2[0];
1733
- _useState2[1]; // Will use this exclusively for picking colors from image...no ColorExtractor
1734
-
1735
-
1736
- var _usePalette = reactPalette.usePalette(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);
1737
- _usePalette.loading;
1738
- var data = _usePalette.data;
1739
- _usePalette.error;
1819
+ }, function (props) {
1820
+ return props.theme.colors.notBlackOverride;
1821
+ }, SaveContainer);
1822
+ styled__default['default'].div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
1823
+ var BlerpListView$1 = function BlerpListView(_ref) {
1824
+ var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
1825
+
1826
+ var bite = _ref.bite,
1827
+ variantSize = _ref.variantSize,
1828
+ isSelected = _ref.isSelected,
1829
+ playingState = _ref.playingState,
1830
+ extraInfoComponent = _ref.extraInfoComponent,
1831
+ primaryActionButton = _ref.primaryActionButton,
1832
+ secondaryActionButton = _ref.secondaryActionButton,
1833
+ handleClickBackground = _ref.handleClickBackground,
1834
+ handleClickPlay = _ref.handleClickPlay,
1835
+ handleClickSave = _ref.handleClickSave,
1836
+ handleClickThreeDot = _ref.handleClickThreeDot,
1837
+ handleClickUnsave = _ref.handleClickUnsave,
1838
+ handleClickTitle = _ref.handleClickTitle,
1839
+ isLinkTitle = _ref.isLinkTitle,
1840
+ fluid = _ref.fluid,
1841
+ props = _ref.props,
1842
+ isLocked = _ref.isLocked,
1843
+ isPremium = _ref.isPremium,
1844
+ handleClickLock = _ref.handleClickLock,
1845
+ handleClickPremium = _ref.handleClickPremium;
1846
+
1847
+ var _useState = React.useState(false),
1848
+ _useState2 = _slicedToArray__default['default'](_useState, 2);
1849
+ _useState2[0];
1850
+ var setOpenSave = _useState2[1];
1851
+
1852
+ var _usePalette = reactPalette.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);
1853
+ _usePalette.loading;
1854
+ _usePalette.data;
1855
+ _usePalette.error;
1740
1856
 
1741
1857
  var theme = React.useContext(styled.ThemeContext);
1742
1858
  var size = useWindowSize();
1743
- console.log("Collleeeeection", collection);
1859
+
1744
1860
  var sizeParams;
1745
1861
  var smallSize = {
1746
- width: "300px",
1862
+ width: 300,
1747
1863
  height: 40,
1748
1864
  fontSize: "16px",
1749
- saveBoxSize: "36px",
1865
+ imageSize: "40px",
1750
1866
  reactionSpacing: 1,
1751
1867
  reactionPadding: "3px",
1752
1868
  reactionSize: "20px",
1753
1869
  buttonSize: "small"
1754
1870
  };
1755
1871
  var mediumSize = {
1756
- width: "375px",
1872
+ width: 375,
1757
1873
  height: 48,
1758
1874
  fontSize: "18px",
1759
- saveBoxSize: "44px",
1875
+ imageSize: "48px",
1760
1876
  reactionSpacing: 1,
1761
1877
  reactionPadding: "3px",
1762
1878
  reactionSize: "23px",
1763
1879
  buttonSize: "medium"
1764
1880
  };
1765
1881
  var largeSize = {
1766
- width: "440px",
1882
+ width: 440,
1767
1883
  height: 56,
1768
1884
  fontSize: "20px",
1769
- saveBoxSize: "52px",
1885
+ imageSize: "56px",
1770
1886
  reactionSpacing: 1,
1771
1887
  reactionPadding: "5px",
1772
1888
  reactionSize: "30px",
@@ -1779,7 +1895,7 @@
1779
1895
  width: "100%",
1780
1896
  height: 48,
1781
1897
  fontSize: "18px",
1782
- saveBoxSize: "44px",
1898
+ imageSize: "48px",
1783
1899
  reactionSpacing: 1,
1784
1900
  reactionPadding: "3px",
1785
1901
  reactionSize: "23px",
@@ -1796,237 +1912,211 @@
1796
1912
  if (variantSize === "small") {
1797
1913
  sizeParams = smallSize;
1798
1914
  } else if (variantSize === "medium") {
1799
- console.log(variantSize);
1800
1915
  sizeParams = mediumSize;
1801
1916
  } else if (variantSize === "large") {
1802
1917
  sizeParams = largeSize;
1803
1918
  }
1804
1919
  }
1805
1920
 
1806
- return (
1807
- /*#__PURE__*/
1808
- // This is the master container. All children's size should be in relation to this box. This box's should not be dependent on its children, but should be dependent on either screen size or the variantSize prop ONLY.
1921
+ if (isPremium) {
1922
+ return /*#__PURE__*/React__default['default'].createElement(BlerpListViewPremium$1, {
1923
+ bite: bite,
1924
+ variantSize: variantSize,
1925
+ isSelected: isSelected,
1926
+ playingState: playingState,
1927
+ extraInfoComponent: extraInfoComponent,
1928
+ primaryActionButton: primaryActionButton,
1929
+ secondaryActionButton: secondaryActionButton,
1930
+ handleClickBackground: handleClickBackground,
1931
+ handleClickPlay: handleClickPlay,
1932
+ handleClickSave: handleClickSave,
1933
+ handleClickThreeDot: handleClickThreeDot,
1934
+ handleClickUnsave: handleClickUnsave,
1935
+ handleClickTitle: handleClickTitle,
1936
+ isLinkTitle: isLinkTitle,
1937
+ fluid: fluid,
1938
+ props: props,
1939
+ isLocked: isLocked,
1940
+ isPremium: isPremium,
1941
+ handleClickLock: handleClickLock,
1942
+ handleClickPremium: handleClickPremium
1943
+ });
1944
+ }
1809
1945
 
1810
- /* BIG PICTURE OF COMPONENT:
1811
- Master Container
1812
- - TopBox (solid white background)
1813
- - PhotoBackground (if collection has photo)
1814
- - BlurBackground (always applied)
1815
- - Gradient Background (default is photo color --> black, fall back is white --> black)
1816
- - Interaction Box (holds clickable elements)
1817
- - MidBox (first "shadow")
1818
- - BackBox (second "shadow")
1819
- */
1820
- React__default['default'].createElement(MasterContainer, {
1821
- owned: collection === null || collection === void 0 ? void 0 : collection.owned,
1822
- sizeParams: sizeParams,
1823
- fluid: fluid
1824
- }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder$1, {
1825
- id: "yellow-border"
1826
- }), /*#__PURE__*/React__default['default'].createElement(TopBox, {
1827
- onClick: function onClick(e) {
1828
- e.stopPropagation();
1829
- handleClickBackground();
1830
- },
1831
- style: {
1832
- borderBottomColor: extraInfoComponent && theme.colors.grey3,
1833
- width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
1834
- }
1835
- }, /*#__PURE__*/React__default['default'].createElement(PhotoBackground, {
1836
- url: 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
1837
- }), /*#__PURE__*/React__default['default'].createElement(BlurBackground, null), /*#__PURE__*/React__default['default'].createElement(GradientBackground, {
1838
- style: {
1839
- background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
1840
- }
1841
- }), /*#__PURE__*/React__default['default'].createElement(InteractionBox, {
1842
- style: {
1843
- borderBottomColor: extraInfoComponent && theme.colors.grey3
1844
- }
1845
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1846
- direction: "row",
1847
- justifyContent: "flex-start",
1848
- alignItems: "center",
1849
- sx: {
1850
- position: "relative",
1851
- width: "calc(100% - 180px)",
1852
- left: "2px"
1853
- }
1854
- }, /*#__PURE__*/React__default['default'].createElement(SaveBox, {
1855
- style: {
1856
- width: sizeParams.saveBoxSize,
1857
- height: sizeParams.saveBoxSize
1858
- },
1859
- onClick: function onClick(e) {
1860
- console.log("handle save/unsave here");
1861
- }
1862
- }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTop, {
1863
- style: {
1864
- width: sizeParams.saveBoxSize,
1865
- height: sizeParams.saveBoxSize,
1866
- background: data.darkVibrant || "#999999"
1867
- }
1868
- }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTopDarken, {
1869
- style: {
1870
- background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
1871
- }
1872
- }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1873
- sx: {
1874
- width: "30px",
1875
- height: "30px",
1876
- color: "white.override",
1877
- position: "relative",
1878
- bottom: "1px"
1879
- }
1880
- }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1881
- sx: {
1882
- width: "30px",
1883
- height: "30px",
1884
- color: "white.override",
1885
- position: "relative",
1886
- bottom: "1px"
1887
- }
1888
- })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
1889
- depth: "2",
1890
- style: {
1891
- background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
1892
- }
1893
- }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
1894
- depth: "1",
1895
- style: {
1896
- background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
1897
- }
1898
- })), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
1899
- href: "/sound-collection/".concat(collection._id),
1900
- style: {
1901
- textDecoration: "none",
1902
- width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
1903
- position: "relative",
1904
- left: "12px"
1905
- }
1906
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
1907
- textAlign: "left",
1908
- fontSize: sizeParams.fontSize,
1909
- noWrap: true,
1910
- color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
1911
- sx: {
1912
- ":hover": {
1913
- textDecoration: handleClickTitle ? "underline" : "none"
1914
- },
1915
- "@media (max-width: 600px)": {
1916
- maxWidth: "133px"
1917
- }
1918
- },
1919
- onClick: function onClick(e) {
1920
- if (handleClickTitle) {
1921
- e.stopPropagation();
1922
- handleClickTitle();
1923
- }
1924
- }
1925
- }, collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
1926
- textAlign: "left",
1927
- fontSize: sizeParams.fontSize,
1928
- noWrap: true,
1929
- color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
1930
- sx: {
1931
- position: "relative",
1932
- left: "12px",
1933
- ":hover": {
1934
- textDecoration: handleClickTitle ? "underline" : "none"
1935
- },
1936
- "@media (max-width: 600px)": {
1937
- maxWidth: "133px"
1938
- }
1939
- },
1940
- onClick: function onClick(e) {
1941
- console.log("handle non-linkTitle click here");
1942
- }
1943
- }, collection.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
1944
- direction: "row",
1945
- justifyContent: "flex-end",
1946
- alignItems: "center",
1947
- sx: {
1948
- height: "70%"
1946
+ return /*#__PURE__*/React__default['default'].createElement(Box, {
1947
+ sx: {
1948
+ width: sizeParams.width,
1949
+ minWidth: fluid && "300px",
1950
+ borderRadius: "8px",
1951
+ border: "2px transparent",
1952
+ bgcolor: "grey2.main",
1953
+ backgroundOrigin: "border-box",
1954
+ backgroundClip: "content-box, border-box",
1955
+ boxShadow: "2px 2px 4px 0px #999999a1;",
1956
+ transition: "0.3s",
1957
+ "&:hover": {
1958
+ bgcolor: "grey3.main"
1949
1959
  }
1950
- }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
1951
- direction: "row",
1952
- justifyContent: "space-around",
1960
+ }
1961
+ }, /*#__PURE__*/React__default['default'].createElement(Box, {
1962
+ onClick: function onClick(e) {
1963
+ e.stopPropagation();
1964
+ handleClickBackground();
1965
+ },
1966
+ sx: {
1967
+ width: "calc(100% - 4px)",
1968
+ height: sizeParams.height,
1969
+ display: "flex",
1970
+ flexDirection: "row",
1953
1971
  alignItems: "center",
1954
- sx: {
1955
- height: "100%",
1956
- width: "102px",
1957
- position: "relative"
1972
+ justifyContent: "space-between",
1973
+ borderRadius: "8px",
1974
+ border: "2px solid transparent",
1975
+ borderRightWidth: "0px",
1976
+ borderLeftWidth: "0px",
1977
+ margin: "0 auto",
1978
+ borderBottomColor: extraInfoComponent && theme.colors.grey3,
1979
+ transition: "0.3s",
1980
+ position: "relative"
1981
+ }
1982
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1983
+ direction: "row",
1984
+ width: "70%",
1985
+ alignItems: "center",
1986
+ sx: {
1987
+ cursor: "pointer"
1988
+ }
1989
+ }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
1990
+ style: {
1991
+ width: sizeParams.imageSize,
1992
+ height: sizeParams.imageSize,
1993
+ boxShadow: "0px 0px 0px 0px #999999a1;"
1994
+ },
1995
+ 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
1996
+ }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim, {
1997
+ style: {
1998
+ width: sizeParams.imageSize,
1999
+ height: sizeParams.imageSize
2000
+ },
2001
+ onClick: function onClick(e) {
2002
+ if (handleClickPlay) {
2003
+ e.stopPropagation();
2004
+ handleClickPlay();
1958
2005
  }
1959
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1960
- sx: {
1961
- borderRadius: "20px",
1962
- position: "absolute",
1963
- top: "0",
1964
- bottom: "0",
1965
- left: "0",
1966
- right: "0",
1967
- backgroundColor: "notBlack.main",
1968
- opacity: ".5"
2006
+ }
2007
+ }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
2008
+ sx: {
2009
+ width: "30px",
2010
+ height: "30px",
2011
+ color: "white.override"
2012
+ }
2013
+ }) : /*#__PURE__*/React__default['default'].createElement(PlayOutlineIcon, {
2014
+ sx: {
2015
+ width: "30px",
2016
+ height: "30px",
2017
+ color: "white.override"
2018
+ }
2019
+ }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
2020
+ href: "/soundbites/".concat(bite._id),
2021
+ style: {
2022
+ textDecoration: "none",
2023
+ width: "100%"
2024
+ }
2025
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
2026
+ textAlign: "left",
2027
+ fontSize: sizeParams.fontSize,
2028
+ noWrap: true,
2029
+ width: "80%",
2030
+ marginLeft: "10px",
2031
+ color: "white.override",
2032
+ sx: {
2033
+ ":hover": {
2034
+ textDecoration: handleClickTitle ? "underline" : "none"
1969
2035
  }
1970
- }), /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
1971
- sx: {
1972
- opacity: "1",
1973
- zIndex: "2",
1974
- color: "white.override",
1975
- height: "18px"
2036
+ },
2037
+ onClick: function onClick(e) {
2038
+ if (handleClickTitle) {
2039
+ e.stopPropagation();
2040
+ handleClickTitle();
1976
2041
  }
1977
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
1978
- sx: {
1979
- zIndex: "2",
1980
- color: "white.override",
1981
- fontWeight: "lighter",
1982
- fontSize: "14px",
1983
- cursor: "default",
1984
- position: "relative",
1985
- right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
2042
+ }
2043
+ }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
2044
+ textAlign: "left",
2045
+ fontSize: sizeParams.fontSize,
2046
+ noWrap: true,
2047
+ width: "80%",
2048
+ marginLeft: "10px",
2049
+ sx: {
2050
+ ":hover": {
2051
+ textDecoration: handleClickTitle ? "underline" : "none"
1986
2052
  }
1987
- }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
1988
- sx: {
1989
- zIndex: "2",
1990
- color: "white.override",
1991
- height: "14px"
2053
+ },
2054
+ onClick: function onClick(e) {
2055
+ if (handleClickTitle) {
2056
+ e.stopPropagation();
2057
+ handleClickTitle();
1992
2058
  }
1993
- })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
1994
- id: "second-button",
1995
- onClick: function onClick(e) {
1996
- console.log("handle secondary button click here");
1997
- },
1998
- sx: {
1999
- padding: "5px",
2000
- transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
2001
- "&:hover": {
2002
- backgroundColor: "grey6.main"
2003
- }
2059
+ }
2060
+ }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
2061
+ direction: "row"
2062
+ }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
2063
+ onClick: function onClick(e) {
2064
+ e.stopPropagation();
2065
+ handleClickUnsave();
2066
+ setOpenSave(true);
2067
+ },
2068
+ sx: {
2069
+ backgroundColor: "white.override",
2070
+ color: "starling.main",
2071
+ padding: "5px",
2072
+ marginRight: "10px",
2073
+ ":hover": {
2074
+ backgroundColor: "grey3.main"
2004
2075
  }
2005
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2006
- sx: {
2007
- borderRadius: "20px",
2008
- position: "absolute",
2009
- top: "0",
2010
- bottom: "0",
2011
- left: "0",
2012
- right: "0",
2013
- backgroundColor: "notBlack.main",
2014
- opacity: ".5"
2076
+ }
2077
+ }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
2078
+ sx: {
2079
+ color: "notBlack.override"
2080
+ }
2081
+ })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
2082
+ onClick: function onClick(e) {
2083
+ e.stopPropagation();
2084
+ handleClickSave();
2085
+ setOpenSave(true);
2086
+ },
2087
+ sx: {
2088
+ backgroundColor: "white.override",
2089
+ color: "starling.main",
2090
+ padding: "5px",
2091
+ marginRight: "10px",
2092
+ ":hover": {
2093
+ backgroundColor: "grey3.main"
2015
2094
  }
2016
- }), /*#__PURE__*/React__default['default'].createElement(KeyboardArrowRightRoundedIcon__default['default'], {
2017
- sx: {
2018
- zIndex: "2",
2019
- color: "white.override"
2095
+ }
2096
+ }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
2097
+ sx: {
2098
+ color: "notBlack.override"
2099
+ }
2100
+ })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
2101
+ onClick: function onClick(e) {
2102
+ handleClickThreeDot(e);
2103
+ },
2104
+ sx: {
2105
+ backgroundColor: "white.override",
2106
+ padding: "5px",
2107
+ marginRight: "10px",
2108
+ ":hover": {
2109
+ backgroundColor: "grey3.main"
2020
2110
  }
2021
- }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(MidBox, {
2022
- id: "mid-box"
2023
- }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(BackBox, {
2024
- id: "back-box"
2025
- }), extraInfoComponent && extraInfoComponent)
2026
- );
2111
+ }
2112
+ }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
2113
+ sx: {
2114
+ color: "notBlack.override"
2115
+ }
2116
+ })))), extraInfoComponent && extraInfoComponent);
2027
2117
  };
2028
- CollectionListViewPremium$1.propTypes = {
2029
- collection: PropTypes__default['default'].object.isRequired,
2118
+ BlerpListView$1.propTypes = {
2119
+ bite: PropTypes__default['default'].object.isRequired,
2030
2120
  collections: PropTypes__default['default'].array.isRequired,
2031
2121
  variantSize: PropTypes__default['default'].string.isRequired,
2032
2122
  userSignedIn: PropTypes__default['default'].object.isRequired,
@@ -2036,142 +2126,104 @@
2036
2126
  getUserReactions: PropTypes__default['default'].func.isRequired,
2037
2127
  createCollection: PropTypes__default['default'].func.isRequired,
2038
2128
  handleClickBackground: PropTypes__default['default'].func.isRequired,
2129
+ handleClickPlay: PropTypes__default['default'].func.isRequired,
2130
+ handleClickThreeDot: PropTypes__default['default'].func.isRequired,
2039
2131
  handleClickSave: PropTypes__default['default'].func.isRequired,
2040
2132
  handleClickReaction: PropTypes__default['default'].func.isRequired,
2041
2133
  handleClickUnsave: PropTypes__default['default'].func.isRequired
2042
2134
  };
2043
2135
 
2044
- var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8;
2045
- // _id: "5b237fbafca7167a35619410",
2046
- // title: "Crying",
2047
- // image: {
2048
- // filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
2049
- // original: {
2050
- // url:
2051
- // "https://blerp-content-images-1144.storage.googleapis.com/original/72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=03746d6018c257bf5b34e773fb39d0dd502ee337dcb654c2b0d2dcf1c0bacc704cfae0daf0028a00339e15529a0fbcf613a83760422433f25577db978f704806100ed6c71f7176aaa23fc08c3d99692eec6fda7cdac3eb95ae6e26c65a8495f17e4da4895730c57c9e5f66509ae90f7c00c4da944caab44396f53de1bf0bc7710159f92430f571b47b893bea452da14a1667b373faa8d195f31cd23ea72b3db17d0557e0fded6411fc1564207aede8b6aa768c9fc63323a4af42c496f2a9b3a8290c68e96bf0f39aa097f2c6a0a3b47312b7f3040dc9b77736f6ea55b5fac41140ec6c7e837b827b5210d43a4b6299b55f65dc16da26c1f39f644919ac68ac6c",
2052
- // },
2053
- // },
2054
- // audio: {
2055
- // filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
2056
- // original: {
2057
- // url:
2058
- // "https://blerp-content-audio-1144.storage.googleapis.com/mp3/4d6796be-a58c-4c12-9949-fd832cbf646d?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=40f5a61ce407158c9e324a8fb09c459dde051d29ec0f528dc1a6f3ed7e02638a4deaabb980289daa6b0498069718389d8b1a95b10e7097df3f8be2cee452274fdb876f5e553c868de683dc222bcaa19144e6879fbcc84145aa9d6837efea1b8cc06efde3d459f3f721d9a2a7e9d775a36e916809b1e1be999fc7331590affdc7149c7b24da4c48b3096119d7e6f225c4026a82bc16751a8fb1e8129c9ed835db30858306010769db97478305a9224d498b001589baad3e23ad94c1ea7c6d4721f27bcbc24fa75968e8bafcdaf250ff58e16e9b0a47f68cca496d93014a2e792262de6876a8ccc9776da8ffa21c194b9c7228e8748075207335fa91aace2250c0",
2059
- // },
2060
- // },
2061
- // };
2062
-
2063
- var BlerpImage = styled__default['default'].div(_templateObject$c || (_templateObject$c = _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"])), function (props) {
2064
- return props.url;
2065
- });
2066
- var zoomIn = styled.keyframes(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
2067
- styled__default['default'].div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
2068
- return props.theme.colors.notBlack;
2069
- }, function (props) {
2070
- return props.theme.colors.notBlack;
2071
- }, zoomIn);
2072
- var SaveContainer = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
2073
- return "".concat(props.theme.colors.notBlack, "8a");
2074
- }, function (props) {
2075
- return props.theme.colors.seafoam;
2136
+ var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2137
+ var MasterContainer = styled__default['default'].div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral__default['default'](["\n display: flex;\n /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n height: ", ";\n width: ", ";\n min-width: ", ";\n border-radius: 8px;\n background-origin: border-box;\n background-clip: content-box, border-box;\n box-shadow: 2px 2px 4px 0px #999999a1;\n position: relative;\n\n #second-button {\n opacity: 0;\n margin-left: 0px;\n margin-right: 15px;\n }\n\n :hover #yellow-border {\n opacity: 1;\n }\n :hover #second-button {\n opacity: 1;\n margin-left: 5px;\n margin-right: 10px;\n }\n :hover #mid-box {\n width: 96%;\n }\n :hover #back-box {\n width: ", ";\n }\n"])), function (_ref) {
2138
+ var sizeParams = _ref.sizeParams;
2139
+ return (sizeParams.height += 2) + "px";
2140
+ }, function (_ref2) {
2141
+ var sizeParams = _ref2.sizeParams;
2142
+ return sizeParams.width;
2143
+ }, function (_ref3) {
2144
+ var fluid = _ref3.fluid;
2145
+ return fluid ? "300px" : "0";
2076
2146
  }, function (props) {
2147
+ return props.owned ? "102%" : "100%";
2148
+ });
2149
+ var YellowHoverBorder$1 = styled__default['default'].div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 113%;\n width: 102%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 3px solid rgb(255, 225, 76);\n border-radius: 14px;\n transition: opacity 0.2s ease-in-out;\n opacity: 0;\n"])));
2150
+ var TopBox = styled__default['default'].div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\n z-index: 3;\n border: 2px transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ", ";\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n position: relative;\n overflow: hidden;\n"])), function (props) {
2077
2151
  return props.theme.colors.white;
2078
2152
  });
2079
- var BlerpImageScrim = styled__default['default'].div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral__default['default'](["\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"])), function (props) {
2080
- return props.theme.colors.notBlackOverride;
2081
- }, function (props) {
2082
- return props.theme.colors.notBlackOverride;
2153
+ var MidBox = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n z-index: 2;\n position: absolute;\n background-color: ", ";\n width: 95%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n overflow: hidden;\n"])), function (props) {
2154
+ return props.theme.colors.grey5;
2083
2155
  });
2084
- var PremiumPill = styled__default['default'].div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral__default['default'](["\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 4px;\n cursor: pointer;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n"])), function (props) {
2085
- return props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a");
2086
- }, function (props) {
2087
- return props.theme.colors.seafoam;
2156
+ var BackBox = styled__default['default'].div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral__default['default'](["\n background-color: blue;\n background-color: ", ";\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n overflow: hidden;\n"])), function (props) {
2157
+ return props.theme.colors.grey7;
2088
2158
  });
2089
- styled__default['default'].div(_templateObject7$1 || (_templateObject7$1 = _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"])), function (props) {
2090
- return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
2091
- }, function (props) {
2092
- return props.theme.colors.ibisRed;
2159
+ var PhotoBackground = styled__default['default'].div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(", ");\n background-size: cover;\n border-radius: 8px;\n overflow: hidden;\n background-position: center;\n"])), function (props) {
2160
+ return props.url;
2161
+ });
2162
+ var BlurBackground = styled__default['default'].div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 8px;\n backdrop-filter: blur(4px);\n"])));
2163
+ var GradientBackground = styled__default['default'].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default['default'](["\n width: 100%;\n opacity: 0.7;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 8px;\n width: 100%;\n height: 100%;\n"])));
2164
+ var InteractionBox = styled__default['default'].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: calc(100% - 4px);\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n margin: 0 auto;\n transition: 0.2s;\n position: relative;\n"]))); // Box on the left of the Collection that is clicked to save/unsave
2165
+
2166
+ var SaveBox = styled__default['default'].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n border-radius: 4px;\n transition: 0.2s;\n box-shadow: 0px 0px 0px 0px #999999a1;\n cursor: pointer;\n\n &:hover {\n transform: scale(1.05);\n }\n"])));
2167
+ var SaveBoxTop = styled__default['default'].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default['default'](["\n z-index: 5;\n width: 100%;\n position: relative;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n"])), function (props) {
2168
+ return props.theme.colors.notBlackOverride;
2169
+ });
2170
+ var SaveBoxTopDarken = styled__default['default'].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default['default'](["\n opacity: 1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 4px;\n"])));
2171
+ var SaveBoxShadowSquare = styled__default['default'].div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 4px;\n ", ";\n"])), function (props) {
2172
+ return props.depth === "1" ? "\n transform: skewX(-5deg); \n left: 2px; \n height: 94%; \n bottom: 0" : props.depth === "2" ? "\n transform: skewX(-12deg); \n left: 5px; \n height: 83%; \n width:97%;\n bottom: 0" : "";
2093
2173
  });
2094
- styled__default['default'].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
2095
- var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
2096
- var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
2174
+ var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
2175
+ var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
2097
2176
 
2098
- var bite = _ref.bite,
2099
- variantSize = _ref.variantSize;
2100
- _ref.isSelected;
2101
- var playingState = _ref.playingState,
2102
- extraInfoComponent = _ref.extraInfoComponent,
2103
- primaryActionButton = _ref.primaryActionButton,
2104
- secondaryActionButton = _ref.secondaryActionButton,
2105
- handleClickBackground = _ref.handleClickBackground,
2106
- handleClickPlay = _ref.handleClickPlay,
2107
- handleClickSave = _ref.handleClickSave;
2108
- _ref.handleClickThreeDot;
2109
- var handleClickUnsave = _ref.handleClickUnsave,
2110
- handleClickTitle = _ref.handleClickTitle,
2111
- isLinkTitle = _ref.isLinkTitle,
2112
- isLocked = _ref.isLocked,
2113
- fluid = _ref.fluid;
2114
- _ref.props;
2177
+ var collection = _ref4.collection,
2178
+ variantSize = _ref4.variantSize,
2179
+ extraInfoComponent = _ref4.extraInfoComponent,
2180
+ primaryActionButton = _ref4.primaryActionButton,
2181
+ secondaryActionButton = _ref4.secondaryActionButton,
2182
+ handleClickBackground = _ref4.handleClickBackground,
2183
+ handleClickTitle = _ref4.handleClickTitle,
2184
+ isLinkTitle = _ref4.isLinkTitle,
2185
+ fluid = _ref4.fluid;
2115
2186
 
2116
2187
  var _useState = React.useState(false),
2117
2188
  _useState2 = _slicedToArray__default['default'](_useState, 2);
2118
2189
  _useState2[0];
2119
- var setOpenSave = _useState2[1];
2190
+ _useState2[1]; // Will use this exclusively for picking colors from image...no ColorExtractor
2120
2191
 
2121
- var _usePalette = reactPalette.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);
2192
+
2193
+ var _usePalette = reactPalette.usePalette(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);
2122
2194
  _usePalette.loading;
2123
2195
  var data = _usePalette.data;
2124
2196
  _usePalette.error;
2125
2197
 
2126
2198
  var theme = React.useContext(styled.ThemeContext);
2127
2199
  var size = useWindowSize();
2128
-
2129
- var _useState3 = React.useState(false),
2130
- _useState4 = _slicedToArray__default['default'](_useState3, 2),
2131
- isBlerpHovered = _useState4[0],
2132
- setIsBlerpHovered = _useState4[1];
2133
-
2134
- var _useState5 = React.useState(false),
2135
- _useState6 = _slicedToArray__default['default'](_useState5, 2),
2136
- actionButtonHovered = _useState6[0],
2137
- setActionButtonHovered = _useState6[1];
2138
-
2139
- console.log(data);
2140
-
2141
- var handleClickLock = function handleClickLock(bite) {
2142
- console.log("route to purchase modal with id: ".concat(bite));
2143
- };
2144
-
2145
- var handleClickPremium = function handleClickPremium(bite) {
2146
- console.log("route to purchase modal with id: ".concat(bite));
2147
- };
2148
-
2200
+ console.log("Collleeeeection", collection);
2149
2201
  var sizeParams;
2150
2202
  var smallSize = {
2151
- width: 300,
2203
+ width: "300px",
2152
2204
  height: 40,
2153
2205
  fontSize: "16px",
2154
- imageSize: "40px",
2206
+ saveBoxSize: "36px",
2155
2207
  reactionSpacing: 1,
2156
2208
  reactionPadding: "3px",
2157
2209
  reactionSize: "20px",
2158
2210
  buttonSize: "small"
2159
2211
  };
2160
2212
  var mediumSize = {
2161
- width: 375,
2213
+ width: "375px",
2162
2214
  height: 48,
2163
2215
  fontSize: "18px",
2164
- imageSize: "48px",
2216
+ saveBoxSize: "44px",
2165
2217
  reactionSpacing: 1,
2166
2218
  reactionPadding: "3px",
2167
2219
  reactionSize: "23px",
2168
2220
  buttonSize: "medium"
2169
2221
  };
2170
2222
  var largeSize = {
2171
- width: 440,
2223
+ width: "440px",
2172
2224
  height: 56,
2173
2225
  fontSize: "20px",
2174
- imageSize: "56px",
2226
+ saveBoxSize: "52px",
2175
2227
  reactionSpacing: 1,
2176
2228
  reactionPadding: "5px",
2177
2229
  reactionSize: "30px",
@@ -2184,7 +2236,7 @@
2184
2236
  width: "100%",
2185
2237
  height: 48,
2186
2238
  fontSize: "18px",
2187
- imageSize: "48px",
2239
+ saveBoxSize: "44px",
2188
2240
  reactionSpacing: 1,
2189
2241
  reactionPadding: "3px",
2190
2242
  reactionSize: "23px",
@@ -2201,252 +2253,237 @@
2201
2253
  if (variantSize === "small") {
2202
2254
  sizeParams = smallSize;
2203
2255
  } else if (variantSize === "medium") {
2256
+ console.log(variantSize);
2204
2257
  sizeParams = mediumSize;
2205
2258
  } else if (variantSize === "large") {
2206
2259
  sizeParams = largeSize;
2207
2260
  }
2208
2261
  }
2209
2262
 
2210
- return /*#__PURE__*/React__default['default'].createElement(Box, {
2211
- onMouseEnter: function onMouseEnter(e) {
2212
- return setIsBlerpHovered(true);
2213
- },
2214
- onMouseLeave: function onMouseLeave(e) {
2215
- return setIsBlerpHovered(false);
2216
- },
2217
- sx: {
2218
- width: sizeParams.width,
2219
- position: "relative",
2220
- minWidth: fluid && "300px",
2221
- borderRadius: "8px",
2222
- border: "2px transparent",
2223
- backgroundImage: "white",
2224
- backgroundOrigin: "border-box",
2225
- backgroundClip: "content-box, border-box",
2226
- boxShadow: "2px 2px 4px 0px #999999a1;",
2227
- // overflow: "hidden",
2228
- "&:hover": {
2229
- transition: "0.3s",
2230
- bgcolor: "grey2.main"
2263
+ return (
2264
+ /*#__PURE__*/
2265
+ // This is the master container. All children's size should be in relation to this box. This box's should not be dependent on its children, but should be dependent on either screen size or the variantSize prop ONLY.
2266
+
2267
+ /* BIG PICTURE OF COMPONENT:
2268
+ Master Container
2269
+ - TopBox (solid white background)
2270
+ - PhotoBackground (if collection has photo)
2271
+ - BlurBackground (always applied)
2272
+ - Gradient Background (default is photo color --> black, fall back is white --> black)
2273
+ - Interaction Box (holds clickable elements)
2274
+ - MidBox (first "shadow")
2275
+ - BackBox (second "shadow")
2276
+ */
2277
+ React__default['default'].createElement(MasterContainer, {
2278
+ owned: collection === null || collection === void 0 ? void 0 : collection.owned,
2279
+ sizeParams: sizeParams,
2280
+ fluid: fluid
2281
+ }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder$1, {
2282
+ id: "yellow-border"
2283
+ }), /*#__PURE__*/React__default['default'].createElement(TopBox, {
2284
+ onClick: function onClick(e) {
2285
+ e.stopPropagation();
2286
+ handleClickBackground();
2287
+ },
2288
+ style: {
2289
+ borderBottomColor: extraInfoComponent && theme.colors.grey3,
2290
+ width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
2231
2291
  }
2232
- }
2233
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2234
- sx: {
2235
- position: "absolute",
2236
- top: "0",
2237
- bottom: "0",
2238
- left: "0",
2239
- right: "0",
2240
- borderRadius: "8px",
2241
- background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
2242
- transition: "opacity .15s ease-in-out",
2243
- opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
2244
- }
2245
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
2246
- onClick: function onClick(e) {
2247
- e.stopPropagation();
2248
- handleClickBackground();
2249
- },
2250
- sx: {
2251
- width: "calc(100% - 4px)",
2252
- height: sizeParams.height,
2253
- display: "flex",
2254
- flexDirection: "row",
2292
+ }, /*#__PURE__*/React__default['default'].createElement(PhotoBackground, {
2293
+ url: 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
2294
+ }), /*#__PURE__*/React__default['default'].createElement(BlurBackground, null), /*#__PURE__*/React__default['default'].createElement(GradientBackground, {
2295
+ style: {
2296
+ background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
2297
+ }
2298
+ }), /*#__PURE__*/React__default['default'].createElement(InteractionBox, {
2299
+ style: {
2300
+ borderBottomColor: extraInfoComponent && theme.colors.grey3
2301
+ }
2302
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2303
+ direction: "row",
2304
+ justifyContent: "flex-start",
2255
2305
  alignItems: "center",
2256
- justifyContent: "space-between",
2257
- borderRadius: "8px",
2258
- border: "2px solid transparent",
2259
- borderRightWidth: "0px",
2260
- borderLeftWidth: "0px",
2261
- margin: "0 auto",
2262
- borderBottomColor: extraInfoComponent && theme.colors.grey3,
2263
- transition: "0.3s",
2264
- position: "relative"
2265
- }
2266
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2267
- direction: "row",
2268
- width: "70%",
2269
- alignItems: "center",
2270
- sx: {
2271
- cursor: "pointer",
2272
- minWidth: "30%"
2273
- }
2274
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
2275
- style: {
2276
- width: sizeParams.imageSize,
2277
- height: sizeParams.imageSize
2278
- },
2279
- 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
2280
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim, {
2281
- style: {
2282
- width: sizeParams.imageSize,
2283
- height: sizeParams.imageSize
2284
- },
2285
- onClick: function onClick(e) {
2286
- if (handleClickPlay) {
2287
- e.stopPropagation();
2288
- handleClickPlay();
2306
+ sx: {
2307
+ position: "relative",
2308
+ width: "calc(100% - 180px)",
2309
+ left: "2px"
2310
+ }
2311
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBox, {
2312
+ style: {
2313
+ width: sizeParams.saveBoxSize,
2314
+ height: sizeParams.saveBoxSize
2315
+ },
2316
+ onClick: function onClick(e) {
2317
+ console.log("handle save/unsave here");
2318
+ }
2319
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTop, {
2320
+ style: {
2321
+ width: sizeParams.saveBoxSize,
2322
+ height: sizeParams.saveBoxSize,
2323
+ background: data.darkVibrant || "#999999"
2324
+ }
2325
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTopDarken, {
2326
+ style: {
2327
+ background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
2328
+ }
2329
+ }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
2330
+ sx: {
2331
+ width: "30px",
2332
+ height: "30px",
2333
+ color: "white.override",
2334
+ position: "relative",
2335
+ bottom: "1px"
2336
+ }
2337
+ }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
2338
+ sx: {
2339
+ width: "30px",
2340
+ height: "30px",
2341
+ color: "white.override",
2342
+ position: "relative",
2343
+ bottom: "1px"
2344
+ }
2345
+ })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
2346
+ depth: "2",
2347
+ style: {
2348
+ background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
2349
+ }
2350
+ }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
2351
+ depth: "1",
2352
+ style: {
2353
+ background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
2354
+ }
2355
+ })), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
2356
+ href: "/sound-collection/".concat(collection._id),
2357
+ style: {
2358
+ textDecoration: "none",
2359
+ width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
2360
+ position: "relative",
2361
+ left: "12px"
2362
+ }
2363
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
2364
+ textAlign: "left",
2365
+ fontSize: sizeParams.fontSize,
2366
+ noWrap: true,
2367
+ color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
2368
+ sx: {
2369
+ ":hover": {
2370
+ textDecoration: handleClickTitle ? "underline" : "none"
2371
+ },
2372
+ "@media (max-width: 600px)": {
2373
+ maxWidth: "133px"
2374
+ }
2375
+ },
2376
+ onClick: function onClick(e) {
2377
+ if (handleClickTitle) {
2378
+ e.stopPropagation();
2379
+ handleClickTitle();
2380
+ }
2289
2381
  }
2290
- }
2291
- }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
2292
- sx: {
2293
- width: "30px",
2294
- height: "30px",
2295
- color: "white.override"
2296
- }
2297
- }) : /*#__PURE__*/React__default['default'].createElement(PlayOutlineIcon, {
2298
- sx: {
2299
- width: "30px",
2300
- height: "30px",
2301
- color: "white.override"
2302
- }
2303
- }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
2304
- textAlign: "left",
2305
- fontSize: sizeParams.fontSize,
2306
- noWrap: true,
2307
- width: "80%",
2308
- marginLeft: "10px",
2309
- color: "white.override",
2310
- sx: {
2311
- ":hover": {
2312
- textDecoration: handleClickTitle ? "underline" : "none"
2382
+ }, collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
2383
+ textAlign: "left",
2384
+ fontSize: sizeParams.fontSize,
2385
+ noWrap: true,
2386
+ color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
2387
+ sx: {
2388
+ position: "relative",
2389
+ left: "12px",
2390
+ ":hover": {
2391
+ textDecoration: handleClickTitle ? "underline" : "none"
2392
+ },
2393
+ "@media (max-width: 600px)": {
2394
+ maxWidth: "133px"
2395
+ }
2396
+ },
2397
+ onClick: function onClick(e) {
2398
+ console.log("handle non-linkTitle click here");
2313
2399
  }
2314
- },
2315
- onClick: function onClick(e) {
2316
- if (handleClickTitle) {
2317
- e.stopPropagation();
2318
- handleClickTitle();
2400
+ }, collection.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
2401
+ direction: "row",
2402
+ justifyContent: "flex-end",
2403
+ alignItems: "center",
2404
+ sx: {
2405
+ height: "70%"
2319
2406
  }
2320
- }
2321
- }, /*#__PURE__*/React__default['default'].createElement("a", {
2322
- href: "/soundbites/".concat(bite._id),
2323
- style: {
2324
- textDecoration: "none",
2325
- color: "white"
2326
- }
2327
- }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
2328
- textAlign: "left",
2329
- fontSize: sizeParams.fontSize,
2330
- noWrap: true,
2331
- width: "80%",
2332
- marginLeft: "10px",
2333
- color: "white.override",
2334
- sx: {
2335
- ":hover": {
2336
- textDecoration: handleClickTitle ? "underline" : "none"
2407
+ }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
2408
+ direction: "row",
2409
+ justifyContent: "space-around",
2410
+ alignItems: "center",
2411
+ sx: {
2412
+ height: "100%",
2413
+ width: "102px",
2414
+ position: "relative"
2337
2415
  }
2338
- },
2339
- onClick: function onClick(e) {
2340
- if (handleClickTitle) {
2341
- e.stopPropagation();
2342
- handleClickTitle();
2416
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2417
+ sx: {
2418
+ borderRadius: "20px",
2419
+ position: "absolute",
2420
+ top: "0",
2421
+ bottom: "0",
2422
+ left: "0",
2423
+ right: "0",
2424
+ backgroundColor: "notBlack.main",
2425
+ opacity: ".5"
2343
2426
  }
2344
- }
2345
- }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
2346
- direction: "row",
2347
- alignItems: "center"
2348
- }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer, {
2349
- isLocked: isLocked,
2350
- isBlerpHovered: isBlerpHovered,
2351
- onClick: function onClick(e) {
2352
- e.stopPropagation();
2353
- handleClickLock();
2354
- },
2355
- onMouseEnter: function onMouseEnter() {
2356
- return setActionButtonHovered(true);
2357
- },
2358
- onMouseLeave: function onMouseLeave() {
2359
- return setActionButtonHovered(false);
2360
- }
2361
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2362
- sx: {
2363
- position: "relative",
2364
- top: "1px",
2365
- "& svg": {
2366
- color: "white.main"
2427
+ }), /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
2428
+ sx: {
2429
+ opacity: "1",
2430
+ zIndex: "2",
2431
+ color: "white.override",
2432
+ height: "18px"
2367
2433
  }
2368
- }
2369
- }, /*#__PURE__*/React__default['default'].createElement(Tooltip, {
2370
- title: "Unlock"
2371
- }, actionButtonHovered ? /*#__PURE__*/React__default['default'].createElement(OpenLockIcon, {
2372
- sx: {
2373
- fontSize: "22px",
2374
- position: "relative",
2375
- bottom: "2px",
2376
- left: "0px"
2377
- }
2378
- }) : /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
2379
- sx: {
2380
- fontSize: "16px",
2381
- position: "relative",
2382
- bottom: "1px"
2383
- }
2384
- })))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), /*#__PURE__*/React__default['default'].createElement(PremiumPill, {
2385
- isLocked: isLocked,
2386
- isBlerpHovered: isBlerpHovered,
2387
- onClick: function onClick(e) {
2388
- e.stopPropagation();
2389
- handleClickPremium();
2390
- }
2391
- }, /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
2392
- sx: {
2393
- width: "16px",
2394
- marginRight: "4px",
2395
- color: "white.main"
2396
- }
2397
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
2398
- sx: {
2399
- marginRight: "4px",
2400
- color: "white.main",
2401
- fontSize: "12px"
2402
- }
2403
- }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
2404
- onClick: function onClick(e) {
2405
- e.stopPropagation();
2406
- handleClickUnsave();
2407
- setOpenSave(true);
2408
- },
2409
- sx: {
2410
- backgroundColor: "white.override",
2411
- color: "starling.main",
2412
- padding: "5px",
2413
- marginRight: "10px",
2414
- ":hover": {
2415
- backgroundColor: "seafoam.main"
2416
- },
2417
- ":hover svg": {
2418
- color: "white.main"
2434
+ }), /*#__PURE__*/React__default['default'].createElement(Text, {
2435
+ sx: {
2436
+ zIndex: "2",
2437
+ color: "white.override",
2438
+ fontWeight: "lighter",
2439
+ fontSize: "14px",
2440
+ cursor: "default",
2441
+ position: "relative",
2442
+ right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
2419
2443
  }
2420
- }
2421
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
2422
- sx: {
2423
- color: "starling.main"
2424
- }
2425
- })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
2426
- onClick: function onClick(e) {
2427
- e.stopPropagation();
2428
- handleClickSave();
2429
- setOpenSave(true);
2430
- },
2431
- sx: {
2432
- backgroundColor: "white.override",
2433
- padding: "5px",
2434
- marginRight: "10px",
2435
- ":hover": {
2436
- backgroundColor: "seafoam.main"
2444
+ }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
2445
+ sx: {
2446
+ zIndex: "2",
2447
+ color: "white.override",
2448
+ height: "14px"
2449
+ }
2450
+ })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
2451
+ id: "second-button",
2452
+ onClick: function onClick(e) {
2453
+ console.log("handle secondary button click here");
2437
2454
  },
2438
- ":hover svg": {
2439
- color: "white.main"
2455
+ sx: {
2456
+ padding: "5px",
2457
+ transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
2458
+ "&:hover": {
2459
+ backgroundColor: "grey6.main"
2460
+ }
2440
2461
  }
2441
- }
2442
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
2443
- sx: {
2444
- color: "starling.main"
2445
- }
2446
- })))), extraInfoComponent && extraInfoComponent);
2462
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2463
+ sx: {
2464
+ borderRadius: "20px",
2465
+ position: "absolute",
2466
+ top: "0",
2467
+ bottom: "0",
2468
+ left: "0",
2469
+ right: "0",
2470
+ backgroundColor: "notBlack.main",
2471
+ opacity: ".5"
2472
+ }
2473
+ }), /*#__PURE__*/React__default['default'].createElement(KeyboardArrowRightRoundedIcon__default['default'], {
2474
+ sx: {
2475
+ zIndex: "2",
2476
+ color: "white.override"
2477
+ }
2478
+ }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(MidBox, {
2479
+ id: "mid-box"
2480
+ }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(BackBox, {
2481
+ id: "back-box"
2482
+ }), extraInfoComponent && extraInfoComponent)
2483
+ );
2447
2484
  };
2448
- BlerpListViewPremium$1.propTypes = {
2449
- bite: PropTypes__default['default'].object.isRequired,
2485
+ CollectionListViewPremium$1.propTypes = {
2486
+ collection: PropTypes__default['default'].object.isRequired,
2450
2487
  collections: PropTypes__default['default'].array.isRequired,
2451
2488
  variantSize: PropTypes__default['default'].string.isRequired,
2452
2489
  userSignedIn: PropTypes__default['default'].object.isRequired,
@@ -2456,8 +2493,6 @@
2456
2493
  getUserReactions: PropTypes__default['default'].func.isRequired,
2457
2494
  createCollection: PropTypes__default['default'].func.isRequired,
2458
2495
  handleClickBackground: PropTypes__default['default'].func.isRequired,
2459
- handleClickPlay: PropTypes__default['default'].func.isRequired,
2460
- handleClickThreeDot: PropTypes__default['default'].func.isRequired,
2461
2496
  handleClickSave: PropTypes__default['default'].func.isRequired,
2462
2497
  handleClickReaction: PropTypes__default['default'].func.isRequired,
2463
2498
  handleClickUnsave: PropTypes__default['default'].func.isRequired
@@ -7087,7 +7122,7 @@
7087
7122
  var YellowHoverBorder = styled__default['default'].div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 105%;\n width: 105%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 4px solid rgb(255, 225, 76);\n border-radius: 20px;\n transition: opacity 0.3s ease-in-out;\n /* Opacity should be changed to \"1\" onHover of this component's parent */\n opacity: 0;\n"])));
7088
7123
  var LineClamp$1 = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
7089
7124
  var TopPill = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: ", ";\n position: absolute;\n top: 8px;\n left: 8px;\n border-radius: 20px;\n overflow: hidden;\n transition: width 0.3s ease-in-out;\n"])), function (props) {
7090
- return props.isLocked ? props.collectionHovered ? "90%" : "65%" : "45%";
7125
+ return props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%";
7091
7126
  });
7092
7127
  var TopPillBackground = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n height: 32px;\n width: 100%;\n position: absolute;\n background-color: ", ";\n opacity: 0.5;\n"])), function (props) {
7093
7128
  return props.theme.colors.notBlack;
@@ -7122,7 +7157,8 @@
7122
7157
  overrideViewText = _ref.overrideViewText,
7123
7158
  hideUnlockPlatformText = _ref.hideUnlockPlatformText,
7124
7159
  hidePremiumLockIcon = _ref.hidePremiumLockIcon,
7125
- unlockPlatformText = _ref.unlockPlatformText;
7160
+ unlockPlatformText = _ref.unlockPlatformText,
7161
+ hideCollectionBackground = _ref.hideCollectionBackground;
7126
7162
 
7127
7163
  var _useState = React.useState(null),
7128
7164
  _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -7220,7 +7256,7 @@
7220
7256
  top: "0",
7221
7257
  zIndex: "3"
7222
7258
  }
7223
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
7259
+ }), !hideCollectionBackground && /*#__PURE__*/React__default['default'].createElement(Box, {
7224
7260
  id: "collection-background-1",
7225
7261
  sx: {
7226
7262
  backgroundImage: "linear-gradient(".concat(data.muted || "#444444", ", #444444)"),
@@ -7234,7 +7270,7 @@
7234
7270
  zIndex: "2",
7235
7271
  transition: "0.2s ease-out"
7236
7272
  }
7237
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
7273
+ }), !hideCollectionBackground && /*#__PURE__*/React__default['default'].createElement(Box, {
7238
7274
  id: "collection-background-2",
7239
7275
  sx: {
7240
7276
  backgroundImage: "linear-gradient(".concat(data.darkMuted || "#252525", ", #252525)"),
@@ -7374,6 +7410,7 @@
7374
7410
  right: "5px",
7375
7411
  height: ".6em",
7376
7412
  color: "white.main",
7413
+ paddingRight: "8px",
7377
7414
  opacity: isLocked ? collectionHovered ? "0" : "1" : "0",
7378
7415
  transition: "opacity .2s ease-in-out"
7379
7416
  },
@@ -7477,7 +7514,7 @@
7477
7514
  zIndex: "3",
7478
7515
  fontSize: ".8rem"
7479
7516
  }
7480
- }, "unlockPlatformText") : /*#__PURE__*/React__default['default'].createElement(Text, {
7517
+ }, unlockPlatformText) : /*#__PURE__*/React__default['default'].createElement(Text, {
7481
7518
  sx: {
7482
7519
  color: "white.override",
7483
7520
  textAlign: "center",
@@ -7571,7 +7608,8 @@
7571
7608
  overrideViewText = _ref.overrideViewText,
7572
7609
  hideUnlockPlatformText = _ref.hideUnlockPlatformText,
7573
7610
  hidePremiumLockIcon = _ref.hidePremiumLockIcon,
7574
- unlockPlatformText = _ref.unlockPlatformText;
7611
+ unlockPlatformText = _ref.unlockPlatformText,
7612
+ hideCollectionBackground = _ref.hideCollectionBackground;
7575
7613
 
7576
7614
  var _useState = React.useState(null),
7577
7615
  _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -7699,7 +7737,8 @@
7699
7737
  overrideViewText: overrideViewText,
7700
7738
  hideUnlockPlatformText: hideUnlockPlatformText,
7701
7739
  hidePremiumLockIcon: hidePremiumLockIcon,
7702
- unlockPlatformText: unlockPlatformText
7740
+ unlockPlatformText: unlockPlatformText,
7741
+ hideCollectionBackground: hideCollectionBackground
7703
7742
  });
7704
7743
  }
7705
7744
 
@@ -8520,7 +8559,8 @@
8520
8559
  alignItems: "center",
8521
8560
  flexWrap: "wrap"
8522
8561
  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
8523
- direction: "row"
8562
+ direction: "row",
8563
+ flexWrap: "inherit"
8524
8564
  }, tabs === null || tabs === void 0 ? void 0 : tabs.map(function (tab) {
8525
8565
  return /*#__PURE__*/React__default['default'].createElement(Button, {
8526
8566
  key: "tab-".concat(tab),