@blerp/design 1.0.62 → 1.0.65

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 +725 -654
  2. package/dist/index.esm.js +725 -654
  3. package/dist/index.umd.js +725 -654
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -388,6 +388,11 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
388
388
  variant: "contained",
389
389
  color: "seafoam",
390
390
  size: "small",
391
+ sx: {
392
+ marginTop: "4px",
393
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
394
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
395
+ },
391
396
  onClick: function onClick() {
392
397
  return setOpenSave(false);
393
398
  }
@@ -401,7 +406,9 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
401
406
  sx: {
402
407
  ".MuiButton-startIcon": {
403
408
  margin: "0"
404
- }
409
+ },
410
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
411
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
405
412
  },
406
413
  size: "small",
407
414
  startIcon: /*#__PURE__*/React__default['default'].createElement(BookmarkRemoveOutlinedIcon__default['default'], {
@@ -413,6 +420,11 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
413
420
  }, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default['default'].createElement(Button, {
414
421
  variant: "text",
415
422
  color: "grey4",
423
+ sx: {
424
+ marginTop: "4px",
425
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
426
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
427
+ },
416
428
  onClick: function onClick() {
417
429
  handleClickOrganize();
418
430
  }
@@ -420,7 +432,7 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
420
432
  };
421
433
 
422
434
  var _templateObject$f;
423
- var LineClamp$2 = styled__default['default'].div(_templateObject$f || (_templateObject$f = _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"])));
435
+ var LineClamp$2 = styled__default['default'].div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 0;\n"])));
424
436
 
425
437
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
426
438
  var bite = _ref.bite,
@@ -985,7 +997,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
985
997
  width: "100%",
986
998
  justifyContent: "space-between",
987
999
  alignItems: "center",
988
- height: bite.visibility !== "PRIVATE" || isOwner ? "32px" : "30px" // makes the top row absolute for small size only. Effictively, this spaces the blerp image beneath it correctly.
1000
+ height: bite.visibility !== "PRIVATE" || isOwner ? "30px" : "30px" // makes the top row absolute for small size only. Effictively, this spaces the blerp image beneath it correctly.
989
1001
  ,
990
1002
  position: sizeParams.buttonSize === "small" && "absolute"
991
1003
  }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -996,7 +1008,19 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
996
1008
  top: "30px",
997
1009
  left: "10px"
998
1010
  }
999
- }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
1011
+ }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React__default['default'].createElement(Text, {
1012
+ fontSize: "8px",
1013
+ color: isPremium ? "waxwing.main" : "grey5.main",
1014
+ sx: {
1015
+ maxWidth: "24px",
1016
+ textOverflow: "ellipsis",
1017
+ overflow: "hidden",
1018
+ position: "absolute",
1019
+ top: "56px",
1020
+ right: "4px",
1021
+ opacity: isBlerpHovered ? 1 : 0.6
1022
+ }
1023
+ }, (Number(bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(1), "s"), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
1000
1024
  title: "May contain potentially sensitive content",
1001
1025
  sx: {
1002
1026
  wordWrap: "break-word"
@@ -1023,7 +1047,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
1023
1047
  borderRadius: "12px",
1024
1048
  height: "24px",
1025
1049
  position: "relative",
1026
- left: "4px"
1050
+ left: "2px"
1027
1051
  }
1028
1052
  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1029
1053
  sx: {
@@ -1043,7 +1067,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
1043
1067
  },
1044
1068
  sx: {
1045
1069
  color: "notBlack.main",
1046
- padding: "4px"
1070
+ padding: "2px"
1047
1071
  }
1048
1072
  }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1049
1073
  fontSize: "small"
@@ -1056,7 +1080,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
1056
1080
  },
1057
1081
  sx: {
1058
1082
  color: "notBlack.main",
1059
- padding: "4px"
1083
+ padding: "2px"
1060
1084
  }
1061
1085
  }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, {
1062
1086
  fontSize: "small"
@@ -1233,10 +1257,20 @@ var Blerp$1 = function Blerp(_ref) {
1233
1257
  reactionSize: "24px",
1234
1258
  buttonSize: "large"
1235
1259
  };
1260
+ var tinySize = {
1261
+ width: 110,
1262
+ height: 120,
1263
+ fontSize: "10px",
1264
+ imageSize: "60px",
1265
+ reactionSpacing: 0.5,
1266
+ reactionPadding: "1px",
1267
+ reactionSize: "11px",
1268
+ buttonSize: "small"
1269
+ };
1236
1270
  var smallSize = {
1237
1271
  width: 150,
1238
1272
  height: 160,
1239
- fontSize: "14px",
1273
+ fontSize: "12px",
1240
1274
  imageSize: "90px",
1241
1275
  reactionSpacing: 1,
1242
1276
  reactionPadding: "3px",
@@ -1279,6 +1313,8 @@ var Blerp$1 = function Blerp(_ref) {
1279
1313
  sizeParams = mediumSize;
1280
1314
  } else if (variantSize === "large") {
1281
1315
  sizeParams = largeSize;
1316
+ } else if (variantSize === "tiny") {
1317
+ sizeParams = tinySize;
1282
1318
  }
1283
1319
  }
1284
1320
 
@@ -1311,7 +1347,7 @@ var Blerp$1 = function Blerp(_ref) {
1311
1347
  backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
1312
1348
  transition: "0.3s",
1313
1349
  position: "relative",
1314
- cursor: "inherit",
1350
+ cursor: "pointer",
1315
1351
  "&:hover": {
1316
1352
  bgcolor: isPremium ? "white.main" : "grey2.main",
1317
1353
  border: isPremium ? "none" : "2px solid transparent"
@@ -1402,7 +1438,7 @@ Blerp$1.propTypes = {
1402
1438
  handleClickTitle: PropTypes__default['default'].func.isRequired
1403
1439
  };
1404
1440
 
1405
- var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4;
1441
+ var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$1;
1406
1442
  // _id: "5b237fbafca7167a35619410",
1407
1443
  // title: "Crying",
1408
1444
  // image: {
@@ -1421,7 +1457,7 @@ var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$
1421
1457
  // },
1422
1458
  // };
1423
1459
 
1424
- 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) {
1460
+ 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) {
1425
1461
  return props.url;
1426
1462
  });
1427
1463
  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"])));
@@ -1430,16 +1466,30 @@ styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _tagg
1430
1466
  }, function (props) {
1431
1467
  return props.theme.colors.notBlack;
1432
1468
  }, zoomIn$1);
1433
- 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) {
1469
+ 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) {
1470
+ return "".concat(props.theme.colors.notBlack, "8a");
1471
+ }, function (props) {
1472
+ return props.theme.colors.seafoam;
1473
+ }, function (props) {
1434
1474
  return props.theme.colors.white;
1435
1475
  });
1436
- 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) {
1476
+ 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) {
1437
1477
  return props.theme.colors.notBlackOverride;
1438
1478
  }, function (props) {
1439
1479
  return props.theme.colors.notBlackOverride;
1440
- }, SaveContainer$1);
1441
- 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"])));
1442
- var BlerpListView$1 = function BlerpListView(_ref) {
1480
+ });
1481
+ 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) {
1482
+ return props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a");
1483
+ }, function (props) {
1484
+ return props.theme.colors.seafoam;
1485
+ });
1486
+ 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) {
1487
+ return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
1488
+ }, function (props) {
1489
+ return props.theme.colors.ibisRed;
1490
+ });
1491
+ 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"])));
1492
+ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
1443
1493
  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
1444
1494
 
1445
1495
  var bite = _ref.bite,
@@ -1451,13 +1501,17 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1451
1501
  secondaryActionButton = _ref.secondaryActionButton,
1452
1502
  handleClickBackground = _ref.handleClickBackground,
1453
1503
  handleClickPlay = _ref.handleClickPlay,
1454
- handleClickSave = _ref.handleClickSave,
1455
- handleClickThreeDot = _ref.handleClickThreeDot,
1456
- handleClickUnsave = _ref.handleClickUnsave,
1504
+ handleClickSave = _ref.handleClickSave;
1505
+ _ref.handleClickThreeDot;
1506
+ var handleClickUnsave = _ref.handleClickUnsave,
1457
1507
  handleClickTitle = _ref.handleClickTitle,
1458
1508
  isLinkTitle = _ref.isLinkTitle,
1509
+ isLocked = _ref.isLocked,
1459
1510
  fluid = _ref.fluid;
1460
1511
  _ref.props;
1512
+ _ref.isPremium;
1513
+ var handleClickLock = _ref.handleClickLock,
1514
+ handleClickPremium = _ref.handleClickPremium;
1461
1515
 
1462
1516
  var _useState = React.useState(false),
1463
1517
  _useState2 = _slicedToArray__default['default'](_useState, 2);
@@ -1466,12 +1520,24 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1466
1520
 
1467
1521
  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);
1468
1522
  _usePalette.loading;
1469
- _usePalette.data;
1523
+ var data = _usePalette.data;
1470
1524
  _usePalette.error;
1471
1525
 
1472
1526
  var theme = React.useContext(styled.ThemeContext);
1473
1527
  var size = useWindowSize();
1474
1528
 
1529
+ var _useState3 = React.useState(false),
1530
+ _useState4 = _slicedToArray__default['default'](_useState3, 2),
1531
+ isBlerpHovered = _useState4[0],
1532
+ setIsBlerpHovered = _useState4[1];
1533
+
1534
+ var _useState5 = React.useState(false),
1535
+ _useState6 = _slicedToArray__default['default'](_useState5, 2),
1536
+ actionButtonHovered = _useState6[0],
1537
+ setActionButtonHovered = _useState6[1];
1538
+
1539
+ console.log(data);
1540
+
1475
1541
  var sizeParams;
1476
1542
  var smallSize = {
1477
1543
  width: 300,
@@ -1534,21 +1600,41 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1534
1600
  }
1535
1601
 
1536
1602
  return /*#__PURE__*/React__default['default'].createElement(Box, {
1603
+ onMouseEnter: function onMouseEnter(e) {
1604
+ return setIsBlerpHovered(true);
1605
+ },
1606
+ onMouseLeave: function onMouseLeave(e) {
1607
+ return setIsBlerpHovered(false);
1608
+ },
1537
1609
  sx: {
1538
1610
  width: sizeParams.width,
1611
+ position: "relative",
1539
1612
  minWidth: fluid && "300px",
1540
1613
  borderRadius: "8px",
1541
1614
  border: "2px transparent",
1542
- bgcolor: "grey2.main",
1615
+ backgroundImage: "white",
1543
1616
  backgroundOrigin: "border-box",
1544
1617
  backgroundClip: "content-box, border-box",
1545
1618
  boxShadow: "2px 2px 4px 0px #999999a1;",
1546
- transition: "0.3s",
1619
+ // overflow: "hidden",
1547
1620
  "&:hover": {
1548
- bgcolor: "grey3.main"
1621
+ transition: "0.3s",
1622
+ bgcolor: "grey2.main"
1549
1623
  }
1550
1624
  }
1551
- }, /*#__PURE__*/React__default['default'].createElement(Box, {
1625
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1626
+ sx: {
1627
+ position: "absolute",
1628
+ top: "0",
1629
+ bottom: "0",
1630
+ left: "0",
1631
+ right: "0",
1632
+ borderRadius: "8px",
1633
+ background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
1634
+ transition: "opacity .15s ease-in-out",
1635
+ opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
1636
+ }
1637
+ }), /*#__PURE__*/React__default['default'].createElement(Box, {
1552
1638
  onClick: function onClick(e) {
1553
1639
  e.stopPropagation();
1554
1640
  handleClickBackground();
@@ -1574,13 +1660,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1574
1660
  width: "70%",
1575
1661
  alignItems: "center",
1576
1662
  sx: {
1577
- cursor: "pointer"
1663
+ cursor: "pointer",
1664
+ minWidth: "30%"
1578
1665
  }
1579
1666
  }, /*#__PURE__*/React__default['default'].createElement(BlerpImage$1, {
1580
1667
  style: {
1581
1668
  width: sizeParams.imageSize,
1582
- height: sizeParams.imageSize,
1583
- boxShadow: "0px 0px 0px 0px #999999a1;"
1669
+ height: sizeParams.imageSize
1584
1670
  },
1585
1671
  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
1586
1672
  }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim$1, {
@@ -1606,13 +1692,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1606
1692
  height: "30px",
1607
1693
  color: "white.override"
1608
1694
  }
1609
- }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
1610
- href: "/soundbites/".concat(bite._id),
1611
- style: {
1612
- textDecoration: "none",
1613
- width: "100%"
1614
- }
1615
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
1695
+ }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
1616
1696
  textAlign: "left",
1617
1697
  fontSize: sizeParams.fontSize,
1618
1698
  noWrap: true,
@@ -1630,12 +1710,19 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1630
1710
  handleClickTitle();
1631
1711
  }
1632
1712
  }
1713
+ }, /*#__PURE__*/React__default['default'].createElement("a", {
1714
+ href: "/soundbites/".concat(bite._id),
1715
+ style: {
1716
+ textDecoration: "none",
1717
+ color: "white"
1718
+ }
1633
1719
  }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
1634
1720
  textAlign: "left",
1635
1721
  fontSize: sizeParams.fontSize,
1636
1722
  noWrap: true,
1637
1723
  width: "80%",
1638
1724
  marginLeft: "10px",
1725
+ color: "white.override",
1639
1726
  sx: {
1640
1727
  ":hover": {
1641
1728
  textDecoration: handleClickTitle ? "underline" : "none"
@@ -1648,64 +1735,120 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1648
1735
  }
1649
1736
  }
1650
1737
  }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
1651
- direction: "row"
1652
- }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
1738
+ direction: "row",
1739
+ alignItems: "center"
1740
+ }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer$1, {
1741
+ isLocked: isLocked,
1742
+ isBlerpHovered: isBlerpHovered,
1653
1743
  onClick: function onClick(e) {
1654
1744
  e.stopPropagation();
1655
- handleClickUnsave();
1656
- setOpenSave(true);
1745
+
1746
+ if (handleClickLock) {
1747
+ handleClickLock();
1748
+ }
1749
+ },
1750
+ onMouseEnter: function onMouseEnter() {
1751
+ return setActionButtonHovered(true);
1657
1752
  },
1753
+ onMouseLeave: function onMouseLeave() {
1754
+ return setActionButtonHovered(false);
1755
+ }
1756
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1658
1757
  sx: {
1659
- backgroundColor: "white.override",
1660
- color: "starling.main",
1661
- padding: "5px",
1662
- marginRight: "10px",
1663
- ":hover": {
1664
- backgroundColor: "grey3.main"
1758
+ position: "relative",
1759
+ top: "1px",
1760
+ "& svg": {
1761
+ color: "white.main"
1665
1762
  }
1666
1763
  }
1667
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1764
+ }, /*#__PURE__*/React__default['default'].createElement(Tooltip, {
1765
+ title: "Unlock Premium"
1766
+ }, actionButtonHovered ? /*#__PURE__*/React__default['default'].createElement(OpenLockIcon, {
1668
1767
  sx: {
1669
- color: "notBlack.override"
1768
+ fontSize: "22px",
1769
+ position: "relative",
1770
+ bottom: "2px",
1771
+ left: "0px"
1670
1772
  }
1671
- })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
1773
+ }) : /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
1774
+ sx: {
1775
+ fontSize: "16px",
1776
+ position: "relative",
1777
+ bottom: "1px"
1778
+ }
1779
+ })))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), !!handleClickPremium && /*#__PURE__*/React__default['default'].createElement(PremiumPill, {
1780
+ isLocked: isLocked,
1781
+ isBlerpHovered: isBlerpHovered,
1672
1782
  onClick: function onClick(e) {
1673
1783
  e.stopPropagation();
1674
- handleClickSave();
1784
+ handleClickPremium();
1785
+ }
1786
+ }, /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
1787
+ sx: {
1788
+ width: "16px",
1789
+ marginRight: "4px",
1790
+ color: "white.main"
1791
+ }
1792
+ }), /*#__PURE__*/React__default['default'].createElement(Text, {
1793
+ sx: {
1794
+ marginRight: "4px",
1795
+ color: "white.main",
1796
+ fontSize: "12px"
1797
+ }
1798
+ }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
1799
+ onClick: function onClick(e) {
1800
+ e.stopPropagation();
1801
+
1802
+ if (handleClickUnsave) {
1803
+ handleClickUnsave();
1804
+ }
1805
+
1675
1806
  setOpenSave(true);
1676
1807
  },
1677
1808
  sx: {
1678
1809
  backgroundColor: "white.override",
1679
1810
  color: "starling.main",
1680
1811
  padding: "5px",
1681
- marginRight: "10px",
1812
+ margin: "0 8px",
1682
1813
  ":hover": {
1683
- backgroundColor: "grey3.main"
1814
+ backgroundColor: "seafoam.main"
1815
+ },
1816
+ ":hover svg": {
1817
+ color: "white.main"
1684
1818
  }
1685
1819
  }
1686
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1820
+ }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1687
1821
  sx: {
1688
- color: "notBlack.override"
1822
+ color: "starling.main"
1689
1823
  }
1690
- })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
1824
+ })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
1691
1825
  onClick: function onClick(e) {
1692
- handleClickThreeDot(e);
1826
+ e.stopPropagation();
1827
+
1828
+ if (handleClickSave) {
1829
+ handleClickSave();
1830
+ }
1831
+
1832
+ setOpenSave(true);
1693
1833
  },
1694
1834
  sx: {
1695
1835
  backgroundColor: "white.override",
1696
1836
  padding: "5px",
1697
1837
  marginRight: "10px",
1698
1838
  ":hover": {
1699
- backgroundColor: "grey3.main"
1839
+ backgroundColor: "seafoam.main"
1840
+ },
1841
+ ":hover svg": {
1842
+ color: "white.main"
1700
1843
  }
1701
1844
  }
1702
- }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
1845
+ }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1703
1846
  sx: {
1704
- color: "notBlack.override"
1847
+ color: "starling.main"
1705
1848
  }
1706
1849
  })))), extraInfoComponent && extraInfoComponent);
1707
1850
  };
1708
- BlerpListView$1.propTypes = {
1851
+ BlerpListViewPremium$1.propTypes = {
1709
1852
  bite: PropTypes__default['default'].object.isRequired,
1710
1853
  collections: PropTypes__default['default'].array.isRequired,
1711
1854
  variantSize: PropTypes__default['default'].string.isRequired,
@@ -1723,97 +1866,106 @@ BlerpListView$1.propTypes = {
1723
1866
  handleClickUnsave: PropTypes__default['default'].func.isRequired
1724
1867
  };
1725
1868
 
1726
- var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
1727
- 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) {
1728
- var sizeParams = _ref.sizeParams;
1729
- return (sizeParams.height += 2) + "px";
1730
- }, function (_ref2) {
1731
- var sizeParams = _ref2.sizeParams;
1732
- return sizeParams.width;
1733
- }, function (_ref3) {
1734
- var fluid = _ref3.fluid;
1735
- return fluid ? "300px" : "0";
1736
- }, function (props) {
1737
- return props.owned ? "102%" : "100%";
1869
+ var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3;
1870
+ // _id: "5b237fbafca7167a35619410",
1871
+ // title: "Crying",
1872
+ // image: {
1873
+ // filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
1874
+ // original: {
1875
+ // url:
1876
+ // "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",
1877
+ // },
1878
+ // },
1879
+ // audio: {
1880
+ // filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
1881
+ // original: {
1882
+ // url:
1883
+ // "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",
1884
+ // },
1885
+ // },
1886
+ // };
1887
+
1888
+ 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) {
1889
+ return props.url;
1738
1890
  });
1739
- 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"])));
1740
- 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) {
1891
+ 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"])));
1892
+ 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) {
1893
+ return props.theme.colors.notBlack;
1894
+ }, function (props) {
1895
+ return props.theme.colors.notBlack;
1896
+ }, zoomIn);
1897
+ 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) {
1741
1898
  return props.theme.colors.white;
1742
1899
  });
1743
- 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) {
1744
- return props.theme.colors.grey5;
1745
- });
1746
- 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) {
1747
- return props.theme.colors.grey7;
1748
- });
1749
- 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) {
1750
- return props.url;
1751
- });
1752
- 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"])));
1753
- 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"])));
1754
- 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
1755
-
1756
- 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"])));
1757
- 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) {
1900
+ 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) {
1758
1901
  return props.theme.colors.notBlackOverride;
1759
- });
1760
- 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"])));
1761
- 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) {
1762
- 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" : "";
1763
- });
1764
- var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
1765
- var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
1902
+ }, function (props) {
1903
+ return props.theme.colors.notBlackOverride;
1904
+ }, SaveContainer);
1905
+ 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"])));
1906
+ var BlerpListView$1 = function BlerpListView(_ref) {
1907
+ var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
1766
1908
 
1767
- var collection = _ref4.collection,
1768
- variantSize = _ref4.variantSize,
1769
- extraInfoComponent = _ref4.extraInfoComponent,
1770
- primaryActionButton = _ref4.primaryActionButton,
1771
- secondaryActionButton = _ref4.secondaryActionButton,
1772
- handleClickBackground = _ref4.handleClickBackground,
1773
- handleClickTitle = _ref4.handleClickTitle,
1774
- isLinkTitle = _ref4.isLinkTitle,
1775
- fluid = _ref4.fluid;
1909
+ var bite = _ref.bite,
1910
+ variantSize = _ref.variantSize,
1911
+ isSelected = _ref.isSelected,
1912
+ playingState = _ref.playingState,
1913
+ extraInfoComponent = _ref.extraInfoComponent,
1914
+ primaryActionButton = _ref.primaryActionButton,
1915
+ secondaryActionButton = _ref.secondaryActionButton,
1916
+ handleClickBackground = _ref.handleClickBackground,
1917
+ handleClickPlay = _ref.handleClickPlay,
1918
+ handleClickSave = _ref.handleClickSave,
1919
+ handleClickThreeDot = _ref.handleClickThreeDot,
1920
+ handleClickUnsave = _ref.handleClickUnsave,
1921
+ handleClickTitle = _ref.handleClickTitle,
1922
+ isLinkTitle = _ref.isLinkTitle,
1923
+ fluid = _ref.fluid,
1924
+ props = _ref.props,
1925
+ isLocked = _ref.isLocked,
1926
+ isPremium = _ref.isPremium,
1927
+ handleClickLock = _ref.handleClickLock,
1928
+ handleClickPremium = _ref.handleClickPremium;
1776
1929
 
1777
1930
  var _useState = React.useState(false),
1778
1931
  _useState2 = _slicedToArray__default['default'](_useState, 2);
1779
1932
  _useState2[0];
1780
- _useState2[1]; // Will use this exclusively for picking colors from image...no ColorExtractor
1781
-
1933
+ var setOpenSave = _useState2[1];
1782
1934
 
1783
- 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);
1935
+ 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);
1784
1936
  _usePalette.loading;
1785
- var data = _usePalette.data;
1937
+ _usePalette.data;
1786
1938
  _usePalette.error;
1787
1939
 
1788
1940
  var theme = React.useContext(styled.ThemeContext);
1789
1941
  var size = useWindowSize();
1790
- console.log("Collleeeeection", collection);
1942
+
1791
1943
  var sizeParams;
1792
1944
  var smallSize = {
1793
- width: "300px",
1945
+ width: 300,
1794
1946
  height: 40,
1795
1947
  fontSize: "16px",
1796
- saveBoxSize: "36px",
1948
+ imageSize: "40px",
1797
1949
  reactionSpacing: 1,
1798
1950
  reactionPadding: "3px",
1799
1951
  reactionSize: "20px",
1800
1952
  buttonSize: "small"
1801
1953
  };
1802
1954
  var mediumSize = {
1803
- width: "375px",
1955
+ width: 375,
1804
1956
  height: 48,
1805
1957
  fontSize: "18px",
1806
- saveBoxSize: "44px",
1958
+ imageSize: "48px",
1807
1959
  reactionSpacing: 1,
1808
1960
  reactionPadding: "3px",
1809
1961
  reactionSize: "23px",
1810
1962
  buttonSize: "medium"
1811
1963
  };
1812
1964
  var largeSize = {
1813
- width: "440px",
1965
+ width: 440,
1814
1966
  height: 56,
1815
1967
  fontSize: "20px",
1816
- saveBoxSize: "52px",
1968
+ imageSize: "56px",
1817
1969
  reactionSpacing: 1,
1818
1970
  reactionPadding: "5px",
1819
1971
  reactionSize: "30px",
@@ -1826,7 +1978,7 @@ var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
1826
1978
  width: "100%",
1827
1979
  height: 48,
1828
1980
  fontSize: "18px",
1829
- saveBoxSize: "44px",
1981
+ imageSize: "48px",
1830
1982
  reactionSpacing: 1,
1831
1983
  reactionPadding: "3px",
1832
1984
  reactionSize: "23px",
@@ -1843,237 +1995,211 @@ var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
1843
1995
  if (variantSize === "small") {
1844
1996
  sizeParams = smallSize;
1845
1997
  } else if (variantSize === "medium") {
1846
- console.log(variantSize);
1847
1998
  sizeParams = mediumSize;
1848
1999
  } else if (variantSize === "large") {
1849
2000
  sizeParams = largeSize;
1850
2001
  }
1851
2002
  }
1852
2003
 
1853
- return (
1854
- /*#__PURE__*/
1855
- // 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.
2004
+ if (isPremium) {
2005
+ return /*#__PURE__*/React__default['default'].createElement(BlerpListViewPremium$1, {
2006
+ bite: bite,
2007
+ variantSize: variantSize,
2008
+ isSelected: isSelected,
2009
+ playingState: playingState,
2010
+ extraInfoComponent: extraInfoComponent,
2011
+ primaryActionButton: primaryActionButton,
2012
+ secondaryActionButton: secondaryActionButton,
2013
+ handleClickBackground: handleClickBackground,
2014
+ handleClickPlay: handleClickPlay,
2015
+ handleClickSave: handleClickSave,
2016
+ handleClickThreeDot: handleClickThreeDot,
2017
+ handleClickUnsave: handleClickUnsave,
2018
+ handleClickTitle: handleClickTitle,
2019
+ isLinkTitle: isLinkTitle,
2020
+ fluid: fluid,
2021
+ props: props,
2022
+ isLocked: isLocked,
2023
+ isPremium: isPremium,
2024
+ handleClickLock: handleClickLock,
2025
+ handleClickPremium: handleClickPremium
2026
+ });
2027
+ }
1856
2028
 
1857
- /* BIG PICTURE OF COMPONENT:
1858
- Master Container
1859
- - TopBox (solid white background)
1860
- - PhotoBackground (if collection has photo)
1861
- - BlurBackground (always applied)
1862
- - Gradient Background (default is photo color --> black, fall back is white --> black)
1863
- - Interaction Box (holds clickable elements)
1864
- - MidBox (first "shadow")
1865
- - BackBox (second "shadow")
1866
- */
1867
- React__default['default'].createElement(MasterContainer, {
1868
- owned: collection === null || collection === void 0 ? void 0 : collection.owned,
1869
- sizeParams: sizeParams,
1870
- fluid: fluid
1871
- }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder$1, {
1872
- id: "yellow-border"
1873
- }), /*#__PURE__*/React__default['default'].createElement(TopBox, {
1874
- onClick: function onClick(e) {
1875
- e.stopPropagation();
1876
- handleClickBackground();
1877
- },
1878
- style: {
1879
- borderBottomColor: extraInfoComponent && theme.colors.grey3,
1880
- width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
1881
- }
1882
- }, /*#__PURE__*/React__default['default'].createElement(PhotoBackground, {
1883
- 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
1884
- }), /*#__PURE__*/React__default['default'].createElement(BlurBackground, null), /*#__PURE__*/React__default['default'].createElement(GradientBackground, {
1885
- style: {
1886
- background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
1887
- }
1888
- }), /*#__PURE__*/React__default['default'].createElement(InteractionBox, {
1889
- style: {
1890
- borderBottomColor: extraInfoComponent && theme.colors.grey3
2029
+ return /*#__PURE__*/React__default['default'].createElement(Box, {
2030
+ sx: {
2031
+ width: sizeParams.width,
2032
+ minWidth: fluid && "300px",
2033
+ borderRadius: "8px",
2034
+ border: "2px transparent",
2035
+ bgcolor: "grey2.main",
2036
+ backgroundOrigin: "border-box",
2037
+ backgroundClip: "content-box, border-box",
2038
+ boxShadow: "2px 2px 4px 0px #999999a1;",
2039
+ transition: "0.3s",
2040
+ "&:hover": {
2041
+ bgcolor: "grey3.main"
1891
2042
  }
1892
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1893
- direction: "row",
1894
- justifyContent: "flex-start",
2043
+ }
2044
+ }, /*#__PURE__*/React__default['default'].createElement(Box, {
2045
+ onClick: function onClick(e) {
2046
+ e.stopPropagation();
2047
+ handleClickBackground();
2048
+ },
2049
+ sx: {
2050
+ width: "calc(100% - 4px)",
2051
+ height: sizeParams.height,
2052
+ display: "flex",
2053
+ flexDirection: "row",
1895
2054
  alignItems: "center",
1896
- sx: {
1897
- position: "relative",
1898
- width: "calc(100% - 180px)",
1899
- left: "2px"
2055
+ justifyContent: "space-between",
2056
+ borderRadius: "8px",
2057
+ border: "2px solid transparent",
2058
+ borderRightWidth: "0px",
2059
+ borderLeftWidth: "0px",
2060
+ margin: "0 auto",
2061
+ borderBottomColor: extraInfoComponent && theme.colors.grey3,
2062
+ transition: "0.3s",
2063
+ position: "relative"
2064
+ }
2065
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2066
+ direction: "row",
2067
+ width: "70%",
2068
+ alignItems: "center",
2069
+ sx: {
2070
+ cursor: "pointer"
2071
+ }
2072
+ }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
2073
+ style: {
2074
+ width: sizeParams.imageSize,
2075
+ height: sizeParams.imageSize,
2076
+ boxShadow: "0px 0px 0px 0px #999999a1;"
2077
+ },
2078
+ 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
2079
+ }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim, {
2080
+ style: {
2081
+ width: sizeParams.imageSize,
2082
+ height: sizeParams.imageSize
2083
+ },
2084
+ onClick: function onClick(e) {
2085
+ if (handleClickPlay) {
2086
+ e.stopPropagation();
2087
+ handleClickPlay();
1900
2088
  }
1901
- }, /*#__PURE__*/React__default['default'].createElement(SaveBox, {
1902
- style: {
1903
- width: sizeParams.saveBoxSize,
1904
- height: sizeParams.saveBoxSize
1905
- },
1906
- onClick: function onClick(e) {
1907
- console.log("handle save/unsave here");
2089
+ }
2090
+ }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
2091
+ sx: {
2092
+ width: "30px",
2093
+ height: "30px",
2094
+ color: "white.override"
2095
+ }
2096
+ }) : /*#__PURE__*/React__default['default'].createElement(PlayOutlineIcon, {
2097
+ sx: {
2098
+ width: "30px",
2099
+ height: "30px",
2100
+ color: "white.override"
2101
+ }
2102
+ }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
2103
+ href: "/soundbites/".concat(bite._id),
2104
+ style: {
2105
+ textDecoration: "none",
2106
+ width: "100%"
2107
+ }
2108
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
2109
+ textAlign: "left",
2110
+ fontSize: sizeParams.fontSize,
2111
+ noWrap: true,
2112
+ width: "80%",
2113
+ marginLeft: "10px",
2114
+ color: "white.override",
2115
+ sx: {
2116
+ ":hover": {
2117
+ textDecoration: handleClickTitle ? "underline" : "none"
1908
2118
  }
1909
- }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTop, {
1910
- style: {
1911
- width: sizeParams.saveBoxSize,
1912
- height: sizeParams.saveBoxSize,
1913
- background: data.darkVibrant || "#999999"
2119
+ },
2120
+ onClick: function onClick(e) {
2121
+ if (handleClickTitle) {
2122
+ e.stopPropagation();
2123
+ handleClickTitle();
1914
2124
  }
1915
- }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTopDarken, {
1916
- style: {
1917
- background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
2125
+ }
2126
+ }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
2127
+ textAlign: "left",
2128
+ fontSize: sizeParams.fontSize,
2129
+ noWrap: true,
2130
+ width: "80%",
2131
+ marginLeft: "10px",
2132
+ sx: {
2133
+ ":hover": {
2134
+ textDecoration: handleClickTitle ? "underline" : "none"
1918
2135
  }
1919
- }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1920
- sx: {
1921
- width: "30px",
1922
- height: "30px",
1923
- color: "white.override",
1924
- position: "relative",
1925
- bottom: "1px"
2136
+ },
2137
+ onClick: function onClick(e) {
2138
+ if (handleClickTitle) {
2139
+ e.stopPropagation();
2140
+ handleClickTitle();
1926
2141
  }
1927
- }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1928
- sx: {
1929
- width: "30px",
1930
- height: "30px",
1931
- color: "white.override",
1932
- position: "relative",
1933
- bottom: "1px"
2142
+ }
2143
+ }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
2144
+ direction: "row"
2145
+ }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
2146
+ onClick: function onClick(e) {
2147
+ e.stopPropagation();
2148
+ handleClickUnsave();
2149
+ setOpenSave(true);
2150
+ },
2151
+ sx: {
2152
+ backgroundColor: "white.override",
2153
+ color: "starling.main",
2154
+ padding: "5px",
2155
+ marginRight: "10px",
2156
+ ":hover": {
2157
+ backgroundColor: "grey3.main"
1934
2158
  }
1935
- })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
1936
- depth: "2",
1937
- style: {
1938
- background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
1939
- }
1940
- }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
1941
- depth: "1",
1942
- style: {
1943
- background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
1944
- }
1945
- })), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
1946
- href: "/sound-collection/".concat(collection._id),
1947
- style: {
1948
- textDecoration: "none",
1949
- width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
1950
- position: "relative",
1951
- left: "12px"
1952
- }
1953
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
1954
- textAlign: "left",
1955
- fontSize: sizeParams.fontSize,
1956
- noWrap: true,
1957
- color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
1958
- sx: {
1959
- ":hover": {
1960
- textDecoration: handleClickTitle ? "underline" : "none"
1961
- },
1962
- "@media (max-width: 600px)": {
1963
- maxWidth: "133px"
1964
- }
1965
- },
1966
- onClick: function onClick(e) {
1967
- if (handleClickTitle) {
1968
- e.stopPropagation();
1969
- handleClickTitle();
1970
- }
1971
- }
1972
- }, collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
1973
- textAlign: "left",
1974
- fontSize: sizeParams.fontSize,
1975
- noWrap: true,
1976
- color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
1977
- sx: {
1978
- position: "relative",
1979
- left: "12px",
1980
- ":hover": {
1981
- textDecoration: handleClickTitle ? "underline" : "none"
1982
- },
1983
- "@media (max-width: 600px)": {
1984
- maxWidth: "133px"
1985
- }
1986
- },
1987
- onClick: function onClick(e) {
1988
- console.log("handle non-linkTitle click here");
1989
- }
1990
- }, collection.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
1991
- direction: "row",
1992
- justifyContent: "flex-end",
1993
- alignItems: "center",
1994
- sx: {
1995
- height: "70%"
1996
- }
1997
- }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
1998
- direction: "row",
1999
- justifyContent: "space-around",
2000
- alignItems: "center",
2001
- sx: {
2002
- height: "100%",
2003
- width: "102px",
2004
- position: "relative"
2005
- }
2006
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2007
- sx: {
2008
- borderRadius: "20px",
2009
- position: "absolute",
2010
- top: "0",
2011
- bottom: "0",
2012
- left: "0",
2013
- right: "0",
2014
- backgroundColor: "notBlack.main",
2015
- opacity: ".5"
2016
- }
2017
- }), /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
2018
- sx: {
2019
- opacity: "1",
2020
- zIndex: "2",
2021
- color: "white.override",
2022
- height: "18px"
2023
- }
2024
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
2025
- sx: {
2026
- zIndex: "2",
2027
- color: "white.override",
2028
- fontWeight: "lighter",
2029
- fontSize: "14px",
2030
- cursor: "default",
2031
- position: "relative",
2032
- right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
2033
- }
2034
- }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
2035
- sx: {
2036
- zIndex: "2",
2037
- color: "white.override",
2038
- height: "14px"
2039
- }
2040
- })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
2041
- id: "second-button",
2042
- onClick: function onClick(e) {
2043
- console.log("handle secondary button click here");
2044
- },
2045
- sx: {
2046
- padding: "5px",
2047
- transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
2048
- "&:hover": {
2049
- backgroundColor: "grey6.main"
2050
- }
2051
- }
2052
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2053
- sx: {
2054
- borderRadius: "20px",
2055
- position: "absolute",
2056
- top: "0",
2057
- bottom: "0",
2058
- left: "0",
2059
- right: "0",
2060
- backgroundColor: "notBlack.main",
2061
- opacity: ".5"
2159
+ }
2160
+ }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
2161
+ sx: {
2162
+ color: "notBlack.override"
2163
+ }
2164
+ })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
2165
+ onClick: function onClick(e) {
2166
+ e.stopPropagation();
2167
+ handleClickSave();
2168
+ setOpenSave(true);
2169
+ },
2170
+ sx: {
2171
+ backgroundColor: "white.override",
2172
+ color: "starling.main",
2173
+ padding: "5px",
2174
+ marginRight: "10px",
2175
+ ":hover": {
2176
+ backgroundColor: "grey3.main"
2062
2177
  }
2063
- }), /*#__PURE__*/React__default['default'].createElement(KeyboardArrowRightRoundedIcon__default['default'], {
2064
- sx: {
2065
- zIndex: "2",
2066
- color: "white.override"
2178
+ }
2179
+ }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
2180
+ sx: {
2181
+ color: "notBlack.override"
2182
+ }
2183
+ })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
2184
+ onClick: function onClick(e) {
2185
+ handleClickThreeDot(e);
2186
+ },
2187
+ sx: {
2188
+ backgroundColor: "white.override",
2189
+ padding: "5px",
2190
+ marginRight: "10px",
2191
+ ":hover": {
2192
+ backgroundColor: "grey3.main"
2067
2193
  }
2068
- }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(MidBox, {
2069
- id: "mid-box"
2070
- }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(BackBox, {
2071
- id: "back-box"
2072
- }), extraInfoComponent && extraInfoComponent)
2073
- );
2194
+ }
2195
+ }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
2196
+ sx: {
2197
+ color: "notBlack.override"
2198
+ }
2199
+ })))), extraInfoComponent && extraInfoComponent);
2074
2200
  };
2075
- CollectionListViewPremium$1.propTypes = {
2076
- collection: PropTypes__default['default'].object.isRequired,
2201
+ BlerpListView$1.propTypes = {
2202
+ bite: PropTypes__default['default'].object.isRequired,
2077
2203
  collections: PropTypes__default['default'].array.isRequired,
2078
2204
  variantSize: PropTypes__default['default'].string.isRequired,
2079
2205
  userSignedIn: PropTypes__default['default'].object.isRequired,
@@ -2083,142 +2209,104 @@ CollectionListViewPremium$1.propTypes = {
2083
2209
  getUserReactions: PropTypes__default['default'].func.isRequired,
2084
2210
  createCollection: PropTypes__default['default'].func.isRequired,
2085
2211
  handleClickBackground: PropTypes__default['default'].func.isRequired,
2212
+ handleClickPlay: PropTypes__default['default'].func.isRequired,
2213
+ handleClickThreeDot: PropTypes__default['default'].func.isRequired,
2086
2214
  handleClickSave: PropTypes__default['default'].func.isRequired,
2087
2215
  handleClickReaction: PropTypes__default['default'].func.isRequired,
2088
2216
  handleClickUnsave: PropTypes__default['default'].func.isRequired
2089
2217
  };
2090
2218
 
2091
- var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8;
2092
- // _id: "5b237fbafca7167a35619410",
2093
- // title: "Crying",
2094
- // image: {
2095
- // filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
2096
- // original: {
2097
- // url:
2098
- // "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",
2099
- // },
2100
- // },
2101
- // audio: {
2102
- // filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
2103
- // original: {
2104
- // url:
2105
- // "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",
2106
- // },
2107
- // },
2108
- // };
2109
-
2110
- 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) {
2111
- return props.url;
2112
- });
2113
- 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"])));
2114
- 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) {
2115
- return props.theme.colors.notBlack;
2116
- }, function (props) {
2117
- return props.theme.colors.notBlack;
2118
- }, zoomIn);
2119
- 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) {
2120
- return "".concat(props.theme.colors.notBlack, "8a");
2121
- }, function (props) {
2122
- return props.theme.colors.seafoam;
2219
+ var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2220
+ 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) {
2221
+ var sizeParams = _ref.sizeParams;
2222
+ return (sizeParams.height += 2) + "px";
2223
+ }, function (_ref2) {
2224
+ var sizeParams = _ref2.sizeParams;
2225
+ return sizeParams.width;
2226
+ }, function (_ref3) {
2227
+ var fluid = _ref3.fluid;
2228
+ return fluid ? "300px" : "0";
2123
2229
  }, function (props) {
2230
+ return props.owned ? "102%" : "100%";
2231
+ });
2232
+ 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"])));
2233
+ 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) {
2124
2234
  return props.theme.colors.white;
2125
2235
  });
2126
- 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) {
2127
- return props.theme.colors.notBlackOverride;
2128
- }, function (props) {
2129
- return props.theme.colors.notBlackOverride;
2236
+ 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) {
2237
+ return props.theme.colors.grey5;
2130
2238
  });
2131
- 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) {
2132
- return props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a");
2133
- }, function (props) {
2134
- return props.theme.colors.seafoam;
2239
+ 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) {
2240
+ return props.theme.colors.grey7;
2135
2241
  });
2136
- 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) {
2137
- return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
2138
- }, function (props) {
2139
- return props.theme.colors.ibisRed;
2242
+ 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) {
2243
+ return props.url;
2140
2244
  });
2141
- 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"])));
2142
- var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
2143
- var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
2245
+ 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"])));
2246
+ 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"])));
2247
+ 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
2144
2248
 
2145
- var bite = _ref.bite,
2146
- variantSize = _ref.variantSize;
2147
- _ref.isSelected;
2148
- var playingState = _ref.playingState,
2149
- extraInfoComponent = _ref.extraInfoComponent,
2150
- primaryActionButton = _ref.primaryActionButton,
2151
- secondaryActionButton = _ref.secondaryActionButton,
2152
- handleClickBackground = _ref.handleClickBackground,
2153
- handleClickPlay = _ref.handleClickPlay,
2154
- handleClickSave = _ref.handleClickSave;
2155
- _ref.handleClickThreeDot;
2156
- var handleClickUnsave = _ref.handleClickUnsave,
2157
- handleClickTitle = _ref.handleClickTitle,
2158
- isLinkTitle = _ref.isLinkTitle,
2159
- isLocked = _ref.isLocked,
2160
- fluid = _ref.fluid;
2161
- _ref.props;
2249
+ 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"])));
2250
+ 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) {
2251
+ return props.theme.colors.notBlackOverride;
2252
+ });
2253
+ 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"])));
2254
+ 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) {
2255
+ 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" : "";
2256
+ });
2257
+ var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
2258
+ var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
2259
+
2260
+ var collection = _ref4.collection,
2261
+ variantSize = _ref4.variantSize,
2262
+ extraInfoComponent = _ref4.extraInfoComponent,
2263
+ primaryActionButton = _ref4.primaryActionButton,
2264
+ secondaryActionButton = _ref4.secondaryActionButton,
2265
+ handleClickBackground = _ref4.handleClickBackground,
2266
+ handleClickTitle = _ref4.handleClickTitle,
2267
+ isLinkTitle = _ref4.isLinkTitle,
2268
+ fluid = _ref4.fluid;
2162
2269
 
2163
2270
  var _useState = React.useState(false),
2164
2271
  _useState2 = _slicedToArray__default['default'](_useState, 2);
2165
2272
  _useState2[0];
2166
- var setOpenSave = _useState2[1];
2273
+ _useState2[1]; // Will use this exclusively for picking colors from image...no ColorExtractor
2167
2274
 
2168
- 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);
2275
+
2276
+ 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);
2169
2277
  _usePalette.loading;
2170
2278
  var data = _usePalette.data;
2171
2279
  _usePalette.error;
2172
2280
 
2173
2281
  var theme = React.useContext(styled.ThemeContext);
2174
2282
  var size = useWindowSize();
2175
-
2176
- var _useState3 = React.useState(false),
2177
- _useState4 = _slicedToArray__default['default'](_useState3, 2),
2178
- isBlerpHovered = _useState4[0],
2179
- setIsBlerpHovered = _useState4[1];
2180
-
2181
- var _useState5 = React.useState(false),
2182
- _useState6 = _slicedToArray__default['default'](_useState5, 2),
2183
- actionButtonHovered = _useState6[0],
2184
- setActionButtonHovered = _useState6[1];
2185
-
2186
- console.log(data);
2187
-
2188
- var handleClickLock = function handleClickLock(bite) {
2189
- console.log("route to purchase modal with id: ".concat(bite));
2190
- };
2191
-
2192
- var handleClickPremium = function handleClickPremium(bite) {
2193
- console.log("route to purchase modal with id: ".concat(bite));
2194
- };
2195
-
2283
+ console.log("Collleeeeection", collection);
2196
2284
  var sizeParams;
2197
2285
  var smallSize = {
2198
- width: 300,
2286
+ width: "300px",
2199
2287
  height: 40,
2200
2288
  fontSize: "16px",
2201
- imageSize: "40px",
2289
+ saveBoxSize: "36px",
2202
2290
  reactionSpacing: 1,
2203
2291
  reactionPadding: "3px",
2204
2292
  reactionSize: "20px",
2205
2293
  buttonSize: "small"
2206
2294
  };
2207
2295
  var mediumSize = {
2208
- width: 375,
2296
+ width: "375px",
2209
2297
  height: 48,
2210
2298
  fontSize: "18px",
2211
- imageSize: "48px",
2299
+ saveBoxSize: "44px",
2212
2300
  reactionSpacing: 1,
2213
2301
  reactionPadding: "3px",
2214
2302
  reactionSize: "23px",
2215
2303
  buttonSize: "medium"
2216
2304
  };
2217
2305
  var largeSize = {
2218
- width: 440,
2306
+ width: "440px",
2219
2307
  height: 56,
2220
2308
  fontSize: "20px",
2221
- imageSize: "56px",
2309
+ saveBoxSize: "52px",
2222
2310
  reactionSpacing: 1,
2223
2311
  reactionPadding: "5px",
2224
2312
  reactionSize: "30px",
@@ -2231,7 +2319,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
2231
2319
  width: "100%",
2232
2320
  height: 48,
2233
2321
  fontSize: "18px",
2234
- imageSize: "48px",
2322
+ saveBoxSize: "44px",
2235
2323
  reactionSpacing: 1,
2236
2324
  reactionPadding: "3px",
2237
2325
  reactionSize: "23px",
@@ -2248,252 +2336,237 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
2248
2336
  if (variantSize === "small") {
2249
2337
  sizeParams = smallSize;
2250
2338
  } else if (variantSize === "medium") {
2339
+ console.log(variantSize);
2251
2340
  sizeParams = mediumSize;
2252
2341
  } else if (variantSize === "large") {
2253
2342
  sizeParams = largeSize;
2254
2343
  }
2255
2344
  }
2256
2345
 
2257
- return /*#__PURE__*/React__default['default'].createElement(Box, {
2258
- onMouseEnter: function onMouseEnter(e) {
2259
- return setIsBlerpHovered(true);
2260
- },
2261
- onMouseLeave: function onMouseLeave(e) {
2262
- return setIsBlerpHovered(false);
2263
- },
2264
- sx: {
2265
- width: sizeParams.width,
2266
- position: "relative",
2267
- minWidth: fluid && "300px",
2268
- borderRadius: "8px",
2269
- border: "2px transparent",
2270
- backgroundImage: "white",
2271
- backgroundOrigin: "border-box",
2272
- backgroundClip: "content-box, border-box",
2273
- boxShadow: "2px 2px 4px 0px #999999a1;",
2274
- // overflow: "hidden",
2275
- "&:hover": {
2276
- transition: "0.3s",
2277
- bgcolor: "grey2.main"
2346
+ return (
2347
+ /*#__PURE__*/
2348
+ // 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.
2349
+
2350
+ /* BIG PICTURE OF COMPONENT:
2351
+ Master Container
2352
+ - TopBox (solid white background)
2353
+ - PhotoBackground (if collection has photo)
2354
+ - BlurBackground (always applied)
2355
+ - Gradient Background (default is photo color --> black, fall back is white --> black)
2356
+ - Interaction Box (holds clickable elements)
2357
+ - MidBox (first "shadow")
2358
+ - BackBox (second "shadow")
2359
+ */
2360
+ React__default['default'].createElement(MasterContainer, {
2361
+ owned: collection === null || collection === void 0 ? void 0 : collection.owned,
2362
+ sizeParams: sizeParams,
2363
+ fluid: fluid
2364
+ }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder$1, {
2365
+ id: "yellow-border"
2366
+ }), /*#__PURE__*/React__default['default'].createElement(TopBox, {
2367
+ onClick: function onClick(e) {
2368
+ e.stopPropagation();
2369
+ handleClickBackground();
2370
+ },
2371
+ style: {
2372
+ borderBottomColor: extraInfoComponent && theme.colors.grey3,
2373
+ width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
2278
2374
  }
2279
- }
2280
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2281
- sx: {
2282
- position: "absolute",
2283
- top: "0",
2284
- bottom: "0",
2285
- left: "0",
2286
- right: "0",
2287
- borderRadius: "8px",
2288
- background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
2289
- transition: "opacity .15s ease-in-out",
2290
- opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
2291
- }
2292
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
2293
- onClick: function onClick(e) {
2294
- e.stopPropagation();
2295
- handleClickBackground();
2296
- },
2297
- sx: {
2298
- width: "calc(100% - 4px)",
2299
- height: sizeParams.height,
2300
- display: "flex",
2301
- flexDirection: "row",
2375
+ }, /*#__PURE__*/React__default['default'].createElement(PhotoBackground, {
2376
+ 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
2377
+ }), /*#__PURE__*/React__default['default'].createElement(BlurBackground, null), /*#__PURE__*/React__default['default'].createElement(GradientBackground, {
2378
+ style: {
2379
+ background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
2380
+ }
2381
+ }), /*#__PURE__*/React__default['default'].createElement(InteractionBox, {
2382
+ style: {
2383
+ borderBottomColor: extraInfoComponent && theme.colors.grey3
2384
+ }
2385
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2386
+ direction: "row",
2387
+ justifyContent: "flex-start",
2302
2388
  alignItems: "center",
2303
- justifyContent: "space-between",
2304
- borderRadius: "8px",
2305
- border: "2px solid transparent",
2306
- borderRightWidth: "0px",
2307
- borderLeftWidth: "0px",
2308
- margin: "0 auto",
2309
- borderBottomColor: extraInfoComponent && theme.colors.grey3,
2310
- transition: "0.3s",
2311
- position: "relative"
2312
- }
2313
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2314
- direction: "row",
2315
- width: "70%",
2316
- alignItems: "center",
2317
- sx: {
2318
- cursor: "pointer",
2319
- minWidth: "30%"
2320
- }
2321
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
2322
- style: {
2323
- width: sizeParams.imageSize,
2324
- height: sizeParams.imageSize
2325
- },
2326
- 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
2327
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim, {
2328
- style: {
2329
- width: sizeParams.imageSize,
2330
- height: sizeParams.imageSize
2331
- },
2332
- onClick: function onClick(e) {
2333
- if (handleClickPlay) {
2334
- e.stopPropagation();
2335
- handleClickPlay();
2389
+ sx: {
2390
+ position: "relative",
2391
+ width: "calc(100% - 180px)",
2392
+ left: "2px"
2393
+ }
2394
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBox, {
2395
+ style: {
2396
+ width: sizeParams.saveBoxSize,
2397
+ height: sizeParams.saveBoxSize
2398
+ },
2399
+ onClick: function onClick(e) {
2400
+ console.log("handle save/unsave here");
2401
+ }
2402
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTop, {
2403
+ style: {
2404
+ width: sizeParams.saveBoxSize,
2405
+ height: sizeParams.saveBoxSize,
2406
+ background: data.darkVibrant || "#999999"
2407
+ }
2408
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTopDarken, {
2409
+ style: {
2410
+ background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
2411
+ }
2412
+ }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
2413
+ sx: {
2414
+ width: "30px",
2415
+ height: "30px",
2416
+ color: "white.override",
2417
+ position: "relative",
2418
+ bottom: "1px"
2419
+ }
2420
+ }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
2421
+ sx: {
2422
+ width: "30px",
2423
+ height: "30px",
2424
+ color: "white.override",
2425
+ position: "relative",
2426
+ bottom: "1px"
2427
+ }
2428
+ })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
2429
+ depth: "2",
2430
+ style: {
2431
+ background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
2432
+ }
2433
+ }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
2434
+ depth: "1",
2435
+ style: {
2436
+ background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
2437
+ }
2438
+ })), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
2439
+ href: "/sound-collection/".concat(collection._id),
2440
+ style: {
2441
+ textDecoration: "none",
2442
+ width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
2443
+ position: "relative",
2444
+ left: "12px"
2445
+ }
2446
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
2447
+ textAlign: "left",
2448
+ fontSize: sizeParams.fontSize,
2449
+ noWrap: true,
2450
+ color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
2451
+ sx: {
2452
+ ":hover": {
2453
+ textDecoration: handleClickTitle ? "underline" : "none"
2454
+ },
2455
+ "@media (max-width: 600px)": {
2456
+ maxWidth: "133px"
2457
+ }
2458
+ },
2459
+ onClick: function onClick(e) {
2460
+ if (handleClickTitle) {
2461
+ e.stopPropagation();
2462
+ handleClickTitle();
2463
+ }
2336
2464
  }
2337
- }
2338
- }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
2339
- sx: {
2340
- width: "30px",
2341
- height: "30px",
2342
- color: "white.override"
2343
- }
2344
- }) : /*#__PURE__*/React__default['default'].createElement(PlayOutlineIcon, {
2345
- sx: {
2346
- width: "30px",
2347
- height: "30px",
2348
- color: "white.override"
2349
- }
2350
- }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
2351
- textAlign: "left",
2352
- fontSize: sizeParams.fontSize,
2353
- noWrap: true,
2354
- width: "80%",
2355
- marginLeft: "10px",
2356
- color: "white.override",
2357
- sx: {
2358
- ":hover": {
2359
- textDecoration: handleClickTitle ? "underline" : "none"
2465
+ }, collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
2466
+ textAlign: "left",
2467
+ fontSize: sizeParams.fontSize,
2468
+ noWrap: true,
2469
+ color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
2470
+ sx: {
2471
+ position: "relative",
2472
+ left: "12px",
2473
+ ":hover": {
2474
+ textDecoration: handleClickTitle ? "underline" : "none"
2475
+ },
2476
+ "@media (max-width: 600px)": {
2477
+ maxWidth: "133px"
2478
+ }
2479
+ },
2480
+ onClick: function onClick(e) {
2481
+ console.log("handle non-linkTitle click here");
2360
2482
  }
2361
- },
2362
- onClick: function onClick(e) {
2363
- if (handleClickTitle) {
2364
- e.stopPropagation();
2365
- handleClickTitle();
2483
+ }, collection.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
2484
+ direction: "row",
2485
+ justifyContent: "flex-end",
2486
+ alignItems: "center",
2487
+ sx: {
2488
+ height: "70%"
2366
2489
  }
2367
- }
2368
- }, /*#__PURE__*/React__default['default'].createElement("a", {
2369
- href: "/soundbites/".concat(bite._id),
2370
- style: {
2371
- textDecoration: "none",
2372
- color: "white"
2373
- }
2374
- }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
2375
- textAlign: "left",
2376
- fontSize: sizeParams.fontSize,
2377
- noWrap: true,
2378
- width: "80%",
2379
- marginLeft: "10px",
2380
- color: "white.override",
2381
- sx: {
2382
- ":hover": {
2383
- textDecoration: handleClickTitle ? "underline" : "none"
2490
+ }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
2491
+ direction: "row",
2492
+ justifyContent: "space-around",
2493
+ alignItems: "center",
2494
+ sx: {
2495
+ height: "100%",
2496
+ width: "102px",
2497
+ position: "relative"
2384
2498
  }
2385
- },
2386
- onClick: function onClick(e) {
2387
- if (handleClickTitle) {
2388
- e.stopPropagation();
2389
- handleClickTitle();
2499
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2500
+ sx: {
2501
+ borderRadius: "20px",
2502
+ position: "absolute",
2503
+ top: "0",
2504
+ bottom: "0",
2505
+ left: "0",
2506
+ right: "0",
2507
+ backgroundColor: "notBlack.main",
2508
+ opacity: ".5"
2390
2509
  }
2391
- }
2392
- }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
2393
- direction: "row",
2394
- alignItems: "center"
2395
- }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer, {
2396
- isLocked: isLocked,
2397
- isBlerpHovered: isBlerpHovered,
2398
- onClick: function onClick(e) {
2399
- e.stopPropagation();
2400
- handleClickLock();
2401
- },
2402
- onMouseEnter: function onMouseEnter() {
2403
- return setActionButtonHovered(true);
2404
- },
2405
- onMouseLeave: function onMouseLeave() {
2406
- return setActionButtonHovered(false);
2407
- }
2408
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2409
- sx: {
2410
- position: "relative",
2411
- top: "1px",
2412
- "& svg": {
2413
- color: "white.main"
2510
+ }), /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
2511
+ sx: {
2512
+ opacity: "1",
2513
+ zIndex: "2",
2514
+ color: "white.override",
2515
+ height: "18px"
2414
2516
  }
2415
- }
2416
- }, /*#__PURE__*/React__default['default'].createElement(Tooltip, {
2417
- title: "Unlock"
2418
- }, actionButtonHovered ? /*#__PURE__*/React__default['default'].createElement(OpenLockIcon, {
2419
- sx: {
2420
- fontSize: "22px",
2421
- position: "relative",
2422
- bottom: "2px",
2423
- left: "0px"
2424
- }
2425
- }) : /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
2426
- sx: {
2427
- fontSize: "16px",
2428
- position: "relative",
2429
- bottom: "1px"
2430
- }
2431
- })))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), /*#__PURE__*/React__default['default'].createElement(PremiumPill, {
2432
- isLocked: isLocked,
2433
- isBlerpHovered: isBlerpHovered,
2434
- onClick: function onClick(e) {
2435
- e.stopPropagation();
2436
- handleClickPremium();
2437
- }
2438
- }, /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
2439
- sx: {
2440
- width: "16px",
2441
- marginRight: "4px",
2442
- color: "white.main"
2443
- }
2444
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
2445
- sx: {
2446
- marginRight: "4px",
2447
- color: "white.main",
2448
- fontSize: "12px"
2449
- }
2450
- }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
2451
- onClick: function onClick(e) {
2452
- e.stopPropagation();
2453
- handleClickUnsave();
2454
- setOpenSave(true);
2455
- },
2456
- sx: {
2457
- backgroundColor: "white.override",
2458
- color: "starling.main",
2459
- padding: "5px",
2460
- marginRight: "10px",
2461
- ":hover": {
2462
- backgroundColor: "seafoam.main"
2463
- },
2464
- ":hover svg": {
2465
- color: "white.main"
2517
+ }), /*#__PURE__*/React__default['default'].createElement(Text, {
2518
+ sx: {
2519
+ zIndex: "2",
2520
+ color: "white.override",
2521
+ fontWeight: "lighter",
2522
+ fontSize: "14px",
2523
+ cursor: "default",
2524
+ position: "relative",
2525
+ right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
2466
2526
  }
2467
- }
2468
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
2469
- sx: {
2470
- color: "starling.main"
2471
- }
2472
- })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
2473
- onClick: function onClick(e) {
2474
- e.stopPropagation();
2475
- handleClickSave();
2476
- setOpenSave(true);
2477
- },
2478
- sx: {
2479
- backgroundColor: "white.override",
2480
- padding: "5px",
2481
- marginRight: "10px",
2482
- ":hover": {
2483
- backgroundColor: "seafoam.main"
2527
+ }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
2528
+ sx: {
2529
+ zIndex: "2",
2530
+ color: "white.override",
2531
+ height: "14px"
2532
+ }
2533
+ })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
2534
+ id: "second-button",
2535
+ onClick: function onClick(e) {
2536
+ console.log("handle secondary button click here");
2484
2537
  },
2485
- ":hover svg": {
2486
- color: "white.main"
2538
+ sx: {
2539
+ padding: "5px",
2540
+ transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
2541
+ "&:hover": {
2542
+ backgroundColor: "grey6.main"
2543
+ }
2487
2544
  }
2488
- }
2489
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
2490
- sx: {
2491
- color: "starling.main"
2492
- }
2493
- })))), extraInfoComponent && extraInfoComponent);
2545
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2546
+ sx: {
2547
+ borderRadius: "20px",
2548
+ position: "absolute",
2549
+ top: "0",
2550
+ bottom: "0",
2551
+ left: "0",
2552
+ right: "0",
2553
+ backgroundColor: "notBlack.main",
2554
+ opacity: ".5"
2555
+ }
2556
+ }), /*#__PURE__*/React__default['default'].createElement(KeyboardArrowRightRoundedIcon__default['default'], {
2557
+ sx: {
2558
+ zIndex: "2",
2559
+ color: "white.override"
2560
+ }
2561
+ }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(MidBox, {
2562
+ id: "mid-box"
2563
+ }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(BackBox, {
2564
+ id: "back-box"
2565
+ }), extraInfoComponent && extraInfoComponent)
2566
+ );
2494
2567
  };
2495
- BlerpListViewPremium$1.propTypes = {
2496
- bite: PropTypes__default['default'].object.isRequired,
2568
+ CollectionListViewPremium$1.propTypes = {
2569
+ collection: PropTypes__default['default'].object.isRequired,
2497
2570
  collections: PropTypes__default['default'].array.isRequired,
2498
2571
  variantSize: PropTypes__default['default'].string.isRequired,
2499
2572
  userSignedIn: PropTypes__default['default'].object.isRequired,
@@ -2503,8 +2576,6 @@ BlerpListViewPremium$1.propTypes = {
2503
2576
  getUserReactions: PropTypes__default['default'].func.isRequired,
2504
2577
  createCollection: PropTypes__default['default'].func.isRequired,
2505
2578
  handleClickBackground: PropTypes__default['default'].func.isRequired,
2506
- handleClickPlay: PropTypes__default['default'].func.isRequired,
2507
- handleClickThreeDot: PropTypes__default['default'].func.isRequired,
2508
2579
  handleClickSave: PropTypes__default['default'].func.isRequired,
2509
2580
  handleClickReaction: PropTypes__default['default'].func.isRequired,
2510
2581
  handleClickUnsave: PropTypes__default['default'].func.isRequired
@@ -2843,8 +2914,8 @@ var Toggle$1 = function Toggle(_ref) {
2843
2914
  _onClick = _ref.onClick;
2844
2915
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, loading ? /*#__PURE__*/React__default['default'].createElement(LoadingContainer$1, null, /*#__PURE__*/React__default['default'].createElement(EllipsisLoader, null)) : /*#__PURE__*/React__default['default'].createElement(Switch$1, {
2845
2916
  checked: checked,
2846
- onClick: function onClick() {
2847
- return _onClick();
2917
+ onClick: function onClick(e) {
2918
+ return _onClick(e);
2848
2919
  }
2849
2920
  }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, {
2850
2921
  checked: checked,