@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.umd.js CHANGED
@@ -341,6 +341,11 @@
341
341
  variant: "contained",
342
342
  color: "seafoam",
343
343
  size: "small",
344
+ sx: {
345
+ marginTop: "4px",
346
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
347
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
348
+ },
344
349
  onClick: function onClick() {
345
350
  return setOpenSave(false);
346
351
  }
@@ -354,7 +359,9 @@
354
359
  sx: {
355
360
  ".MuiButton-startIcon": {
356
361
  margin: "0"
357
- }
362
+ },
363
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
364
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
358
365
  },
359
366
  size: "small",
360
367
  startIcon: /*#__PURE__*/React__default['default'].createElement(BookmarkRemoveOutlinedIcon__default['default'], {
@@ -366,6 +373,11 @@
366
373
  }, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default['default'].createElement(Button, {
367
374
  variant: "text",
368
375
  color: "grey4",
376
+ sx: {
377
+ marginTop: "4px",
378
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
379
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
380
+ },
369
381
  onClick: function onClick() {
370
382
  handleClickOrganize();
371
383
  }
@@ -373,7 +385,7 @@
373
385
  };
374
386
 
375
387
  var _templateObject$f;
376
- 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"])));
388
+ 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"])));
377
389
 
378
390
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
379
391
  var bite = _ref.bite,
@@ -938,7 +950,7 @@
938
950
  width: "100%",
939
951
  justifyContent: "space-between",
940
952
  alignItems: "center",
941
- 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.
953
+ 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.
942
954
  ,
943
955
  position: sizeParams.buttonSize === "small" && "absolute"
944
956
  }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -949,7 +961,19 @@
949
961
  top: "30px",
950
962
  left: "10px"
951
963
  }
952
- }, 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, {
964
+ }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React__default['default'].createElement(Text, {
965
+ fontSize: "8px",
966
+ color: isPremium ? "waxwing.main" : "grey5.main",
967
+ sx: {
968
+ maxWidth: "24px",
969
+ textOverflow: "ellipsis",
970
+ overflow: "hidden",
971
+ position: "absolute",
972
+ top: "56px",
973
+ right: "4px",
974
+ opacity: isBlerpHovered ? 1 : 0.6
975
+ }
976
+ }, (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, {
953
977
  title: "May contain potentially sensitive content",
954
978
  sx: {
955
979
  wordWrap: "break-word"
@@ -976,7 +1000,7 @@
976
1000
  borderRadius: "12px",
977
1001
  height: "24px",
978
1002
  position: "relative",
979
- left: "4px"
1003
+ left: "2px"
980
1004
  }
981
1005
  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
982
1006
  sx: {
@@ -996,7 +1020,7 @@
996
1020
  },
997
1021
  sx: {
998
1022
  color: "notBlack.main",
999
- padding: "4px"
1023
+ padding: "2px"
1000
1024
  }
1001
1025
  }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1002
1026
  fontSize: "small"
@@ -1009,7 +1033,7 @@
1009
1033
  },
1010
1034
  sx: {
1011
1035
  color: "notBlack.main",
1012
- padding: "4px"
1036
+ padding: "2px"
1013
1037
  }
1014
1038
  }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, {
1015
1039
  fontSize: "small"
@@ -1186,10 +1210,20 @@
1186
1210
  reactionSize: "24px",
1187
1211
  buttonSize: "large"
1188
1212
  };
1213
+ var tinySize = {
1214
+ width: 110,
1215
+ height: 120,
1216
+ fontSize: "10px",
1217
+ imageSize: "60px",
1218
+ reactionSpacing: 0.5,
1219
+ reactionPadding: "1px",
1220
+ reactionSize: "11px",
1221
+ buttonSize: "small"
1222
+ };
1189
1223
  var smallSize = {
1190
1224
  width: 150,
1191
1225
  height: 160,
1192
- fontSize: "14px",
1226
+ fontSize: "12px",
1193
1227
  imageSize: "90px",
1194
1228
  reactionSpacing: 1,
1195
1229
  reactionPadding: "3px",
@@ -1232,6 +1266,8 @@
1232
1266
  sizeParams = mediumSize;
1233
1267
  } else if (variantSize === "large") {
1234
1268
  sizeParams = largeSize;
1269
+ } else if (variantSize === "tiny") {
1270
+ sizeParams = tinySize;
1235
1271
  }
1236
1272
  }
1237
1273
 
@@ -1264,7 +1300,7 @@
1264
1300
  backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
1265
1301
  transition: "0.3s",
1266
1302
  position: "relative",
1267
- cursor: "inherit",
1303
+ cursor: "pointer",
1268
1304
  "&:hover": {
1269
1305
  bgcolor: isPremium ? "white.main" : "grey2.main",
1270
1306
  border: isPremium ? "none" : "2px solid transparent"
@@ -1355,7 +1391,7 @@
1355
1391
  handleClickTitle: PropTypes__default['default'].func.isRequired
1356
1392
  };
1357
1393
 
1358
- var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4;
1394
+ var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$1;
1359
1395
  // _id: "5b237fbafca7167a35619410",
1360
1396
  // title: "Crying",
1361
1397
  // image: {
@@ -1374,7 +1410,7 @@
1374
1410
  // },
1375
1411
  // };
1376
1412
 
1377
- var BlerpImage$1 = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n /* border-radius: 8px; */\n border-radius: 50%;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
1413
+ var BlerpImage$1 = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n border-radius: 50%;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
1378
1414
  return props.url;
1379
1415
  });
1380
1416
  var zoomIn$1 = styled.keyframes(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
@@ -1383,16 +1419,30 @@
1383
1419
  }, function (props) {
1384
1420
  return props.theme.colors.notBlack;
1385
1421
  }, zoomIn$1);
1386
- var SaveContainer$1 = styled__default['default'].div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n height: 25px;\n opacity: 0;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n"])), function (props) {
1422
+ 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) {
1423
+ return "".concat(props.theme.colors.notBlack, "8a");
1424
+ }, function (props) {
1425
+ return props.theme.colors.seafoam;
1426
+ }, function (props) {
1387
1427
  return props.theme.colors.white;
1388
1428
  });
1389
- var BlerpImageScrim$1 = styled__default['default'].div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "10;\n /* position: absolute; */\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n /* border-radius: 8px; */\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
1429
+ var BlerpImageScrim$1 = styled__default['default'].div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "10;\n /* position: absolute; */\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n"])), function (props) {
1390
1430
  return props.theme.colors.notBlackOverride;
1391
1431
  }, function (props) {
1392
1432
  return props.theme.colors.notBlackOverride;
1393
- }, SaveContainer$1);
1394
- styled__default['default'].div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
1395
- var BlerpListView$1 = function BlerpListView(_ref) {
1433
+ });
1434
+ 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) {
1435
+ return props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a");
1436
+ }, function (props) {
1437
+ return props.theme.colors.seafoam;
1438
+ });
1439
+ 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) {
1440
+ return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
1441
+ }, function (props) {
1442
+ return props.theme.colors.ibisRed;
1443
+ });
1444
+ 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"])));
1445
+ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
1396
1446
  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
1397
1447
 
1398
1448
  var bite = _ref.bite,
@@ -1404,13 +1454,17 @@
1404
1454
  secondaryActionButton = _ref.secondaryActionButton,
1405
1455
  handleClickBackground = _ref.handleClickBackground,
1406
1456
  handleClickPlay = _ref.handleClickPlay,
1407
- handleClickSave = _ref.handleClickSave,
1408
- handleClickThreeDot = _ref.handleClickThreeDot,
1409
- handleClickUnsave = _ref.handleClickUnsave,
1457
+ handleClickSave = _ref.handleClickSave;
1458
+ _ref.handleClickThreeDot;
1459
+ var handleClickUnsave = _ref.handleClickUnsave,
1410
1460
  handleClickTitle = _ref.handleClickTitle,
1411
1461
  isLinkTitle = _ref.isLinkTitle,
1462
+ isLocked = _ref.isLocked,
1412
1463
  fluid = _ref.fluid;
1413
1464
  _ref.props;
1465
+ _ref.isPremium;
1466
+ var handleClickLock = _ref.handleClickLock,
1467
+ handleClickPremium = _ref.handleClickPremium;
1414
1468
 
1415
1469
  var _useState = React.useState(false),
1416
1470
  _useState2 = _slicedToArray__default['default'](_useState, 2);
@@ -1419,12 +1473,24 @@
1419
1473
 
1420
1474
  var _usePalette = reactPalette.usePalette(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url);
1421
1475
  _usePalette.loading;
1422
- _usePalette.data;
1476
+ var data = _usePalette.data;
1423
1477
  _usePalette.error;
1424
1478
 
1425
1479
  var theme = React.useContext(styled.ThemeContext);
1426
1480
  var size = useWindowSize();
1427
1481
 
1482
+ var _useState3 = React.useState(false),
1483
+ _useState4 = _slicedToArray__default['default'](_useState3, 2),
1484
+ isBlerpHovered = _useState4[0],
1485
+ setIsBlerpHovered = _useState4[1];
1486
+
1487
+ var _useState5 = React.useState(false),
1488
+ _useState6 = _slicedToArray__default['default'](_useState5, 2),
1489
+ actionButtonHovered = _useState6[0],
1490
+ setActionButtonHovered = _useState6[1];
1491
+
1492
+ console.log(data);
1493
+
1428
1494
  var sizeParams;
1429
1495
  var smallSize = {
1430
1496
  width: 300,
@@ -1487,21 +1553,41 @@
1487
1553
  }
1488
1554
 
1489
1555
  return /*#__PURE__*/React__default['default'].createElement(Box, {
1556
+ onMouseEnter: function onMouseEnter(e) {
1557
+ return setIsBlerpHovered(true);
1558
+ },
1559
+ onMouseLeave: function onMouseLeave(e) {
1560
+ return setIsBlerpHovered(false);
1561
+ },
1490
1562
  sx: {
1491
1563
  width: sizeParams.width,
1564
+ position: "relative",
1492
1565
  minWidth: fluid && "300px",
1493
1566
  borderRadius: "8px",
1494
1567
  border: "2px transparent",
1495
- bgcolor: "grey2.main",
1568
+ backgroundImage: "white",
1496
1569
  backgroundOrigin: "border-box",
1497
1570
  backgroundClip: "content-box, border-box",
1498
1571
  boxShadow: "2px 2px 4px 0px #999999a1;",
1499
- transition: "0.3s",
1572
+ // overflow: "hidden",
1500
1573
  "&:hover": {
1501
- bgcolor: "grey3.main"
1574
+ transition: "0.3s",
1575
+ bgcolor: "grey2.main"
1502
1576
  }
1503
1577
  }
1504
- }, /*#__PURE__*/React__default['default'].createElement(Box, {
1578
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1579
+ sx: {
1580
+ position: "absolute",
1581
+ top: "0",
1582
+ bottom: "0",
1583
+ left: "0",
1584
+ right: "0",
1585
+ borderRadius: "8px",
1586
+ background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
1587
+ transition: "opacity .15s ease-in-out",
1588
+ opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
1589
+ }
1590
+ }), /*#__PURE__*/React__default['default'].createElement(Box, {
1505
1591
  onClick: function onClick(e) {
1506
1592
  e.stopPropagation();
1507
1593
  handleClickBackground();
@@ -1527,13 +1613,13 @@
1527
1613
  width: "70%",
1528
1614
  alignItems: "center",
1529
1615
  sx: {
1530
- cursor: "pointer"
1616
+ cursor: "pointer",
1617
+ minWidth: "30%"
1531
1618
  }
1532
1619
  }, /*#__PURE__*/React__default['default'].createElement(BlerpImage$1, {
1533
1620
  style: {
1534
1621
  width: sizeParams.imageSize,
1535
- height: sizeParams.imageSize,
1536
- boxShadow: "0px 0px 0px 0px #999999a1;"
1622
+ height: sizeParams.imageSize
1537
1623
  },
1538
1624
  url: bite === null || bite === void 0 ? void 0 : (_bite$image2 = bite.image) === null || _bite$image2 === void 0 ? void 0 : (_bite$image2$original = _bite$image2.original) === null || _bite$image2$original === void 0 ? void 0 : _bite$image2$original.url
1539
1625
  }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim$1, {
@@ -1559,13 +1645,7 @@
1559
1645
  height: "30px",
1560
1646
  color: "white.override"
1561
1647
  }
1562
- }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
1563
- href: "/soundbites/".concat(bite._id),
1564
- style: {
1565
- textDecoration: "none",
1566
- width: "100%"
1567
- }
1568
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
1648
+ }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
1569
1649
  textAlign: "left",
1570
1650
  fontSize: sizeParams.fontSize,
1571
1651
  noWrap: true,
@@ -1583,12 +1663,19 @@
1583
1663
  handleClickTitle();
1584
1664
  }
1585
1665
  }
1666
+ }, /*#__PURE__*/React__default['default'].createElement("a", {
1667
+ href: "/soundbites/".concat(bite._id),
1668
+ style: {
1669
+ textDecoration: "none",
1670
+ color: "white"
1671
+ }
1586
1672
  }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
1587
1673
  textAlign: "left",
1588
1674
  fontSize: sizeParams.fontSize,
1589
1675
  noWrap: true,
1590
1676
  width: "80%",
1591
1677
  marginLeft: "10px",
1678
+ color: "white.override",
1592
1679
  sx: {
1593
1680
  ":hover": {
1594
1681
  textDecoration: handleClickTitle ? "underline" : "none"
@@ -1601,64 +1688,120 @@
1601
1688
  }
1602
1689
  }
1603
1690
  }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
1604
- direction: "row"
1605
- }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
1691
+ direction: "row",
1692
+ alignItems: "center"
1693
+ }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer$1, {
1694
+ isLocked: isLocked,
1695
+ isBlerpHovered: isBlerpHovered,
1606
1696
  onClick: function onClick(e) {
1607
1697
  e.stopPropagation();
1608
- handleClickUnsave();
1609
- setOpenSave(true);
1698
+
1699
+ if (handleClickLock) {
1700
+ handleClickLock();
1701
+ }
1702
+ },
1703
+ onMouseEnter: function onMouseEnter() {
1704
+ return setActionButtonHovered(true);
1610
1705
  },
1706
+ onMouseLeave: function onMouseLeave() {
1707
+ return setActionButtonHovered(false);
1708
+ }
1709
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1611
1710
  sx: {
1612
- backgroundColor: "white.override",
1613
- color: "starling.main",
1614
- padding: "5px",
1615
- marginRight: "10px",
1616
- ":hover": {
1617
- backgroundColor: "grey3.main"
1711
+ position: "relative",
1712
+ top: "1px",
1713
+ "& svg": {
1714
+ color: "white.main"
1618
1715
  }
1619
1716
  }
1620
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1717
+ }, /*#__PURE__*/React__default['default'].createElement(Tooltip, {
1718
+ title: "Unlock Premium"
1719
+ }, actionButtonHovered ? /*#__PURE__*/React__default['default'].createElement(OpenLockIcon, {
1621
1720
  sx: {
1622
- color: "notBlack.override"
1721
+ fontSize: "22px",
1722
+ position: "relative",
1723
+ bottom: "2px",
1724
+ left: "0px"
1623
1725
  }
1624
- })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
1726
+ }) : /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
1727
+ sx: {
1728
+ fontSize: "16px",
1729
+ position: "relative",
1730
+ bottom: "1px"
1731
+ }
1732
+ })))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), !!handleClickPremium && /*#__PURE__*/React__default['default'].createElement(PremiumPill, {
1733
+ isLocked: isLocked,
1734
+ isBlerpHovered: isBlerpHovered,
1625
1735
  onClick: function onClick(e) {
1626
1736
  e.stopPropagation();
1627
- handleClickSave();
1737
+ handleClickPremium();
1738
+ }
1739
+ }, /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
1740
+ sx: {
1741
+ width: "16px",
1742
+ marginRight: "4px",
1743
+ color: "white.main"
1744
+ }
1745
+ }), /*#__PURE__*/React__default['default'].createElement(Text, {
1746
+ sx: {
1747
+ marginRight: "4px",
1748
+ color: "white.main",
1749
+ fontSize: "12px"
1750
+ }
1751
+ }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
1752
+ onClick: function onClick(e) {
1753
+ e.stopPropagation();
1754
+
1755
+ if (handleClickUnsave) {
1756
+ handleClickUnsave();
1757
+ }
1758
+
1628
1759
  setOpenSave(true);
1629
1760
  },
1630
1761
  sx: {
1631
1762
  backgroundColor: "white.override",
1632
1763
  color: "starling.main",
1633
1764
  padding: "5px",
1634
- marginRight: "10px",
1765
+ margin: "0 8px",
1635
1766
  ":hover": {
1636
- backgroundColor: "grey3.main"
1767
+ backgroundColor: "seafoam.main"
1768
+ },
1769
+ ":hover svg": {
1770
+ color: "white.main"
1637
1771
  }
1638
1772
  }
1639
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1773
+ }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1640
1774
  sx: {
1641
- color: "notBlack.override"
1775
+ color: "starling.main"
1642
1776
  }
1643
- })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
1777
+ })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
1644
1778
  onClick: function onClick(e) {
1645
- handleClickThreeDot(e);
1779
+ e.stopPropagation();
1780
+
1781
+ if (handleClickSave) {
1782
+ handleClickSave();
1783
+ }
1784
+
1785
+ setOpenSave(true);
1646
1786
  },
1647
1787
  sx: {
1648
1788
  backgroundColor: "white.override",
1649
1789
  padding: "5px",
1650
1790
  marginRight: "10px",
1651
1791
  ":hover": {
1652
- backgroundColor: "grey3.main"
1792
+ backgroundColor: "seafoam.main"
1793
+ },
1794
+ ":hover svg": {
1795
+ color: "white.main"
1653
1796
  }
1654
1797
  }
1655
- }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
1798
+ }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1656
1799
  sx: {
1657
- color: "notBlack.override"
1800
+ color: "starling.main"
1658
1801
  }
1659
1802
  })))), extraInfoComponent && extraInfoComponent);
1660
1803
  };
1661
- BlerpListView$1.propTypes = {
1804
+ BlerpListViewPremium$1.propTypes = {
1662
1805
  bite: PropTypes__default['default'].object.isRequired,
1663
1806
  collections: PropTypes__default['default'].array.isRequired,
1664
1807
  variantSize: PropTypes__default['default'].string.isRequired,
@@ -1676,97 +1819,106 @@
1676
1819
  handleClickUnsave: PropTypes__default['default'].func.isRequired
1677
1820
  };
1678
1821
 
1679
- var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
1680
- var MasterContainer = styled__default['default'].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral__default['default'](["\n display: flex;\n /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n height: ", ";\n width: ", ";\n min-width: ", ";\n border-radius: 8px;\n background-origin: border-box;\n background-clip: content-box, border-box;\n box-shadow: 2px 2px 4px 0px #999999a1;\n position: relative;\n\n #second-button {\n opacity: 0;\n margin-left: 0px;\n margin-right: 15px;\n }\n\n :hover #yellow-border {\n opacity: 1;\n }\n :hover #second-button {\n opacity: 1;\n margin-left: 5px;\n margin-right: 10px;\n }\n :hover #mid-box {\n width: 96%;\n }\n :hover #back-box {\n width: ", ";\n }\n"])), function (_ref) {
1681
- var sizeParams = _ref.sizeParams;
1682
- return (sizeParams.height += 2) + "px";
1683
- }, function (_ref2) {
1684
- var sizeParams = _ref2.sizeParams;
1685
- return sizeParams.width;
1686
- }, function (_ref3) {
1687
- var fluid = _ref3.fluid;
1688
- return fluid ? "300px" : "0";
1689
- }, function (props) {
1690
- return props.owned ? "102%" : "100%";
1822
+ var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3;
1823
+ // _id: "5b237fbafca7167a35619410",
1824
+ // title: "Crying",
1825
+ // image: {
1826
+ // filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
1827
+ // original: {
1828
+ // url:
1829
+ // "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",
1830
+ // },
1831
+ // },
1832
+ // audio: {
1833
+ // filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
1834
+ // original: {
1835
+ // url:
1836
+ // "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",
1837
+ // },
1838
+ // },
1839
+ // };
1840
+
1841
+ 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) {
1842
+ return props.url;
1691
1843
  });
1692
- var YellowHoverBorder$1 = styled__default['default'].div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 113%;\n width: 102%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 3px solid rgb(255, 225, 76);\n border-radius: 14px;\n transition: opacity 0.2s ease-in-out;\n opacity: 0;\n"])));
1693
- var TopBox = styled__default['default'].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral__default['default'](["\n z-index: 3;\n border: 2px transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ", ";\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n position: relative;\n overflow: hidden;\n"])), function (props) {
1844
+ 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"])));
1845
+ 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) {
1846
+ return props.theme.colors.notBlack;
1847
+ }, function (props) {
1848
+ return props.theme.colors.notBlack;
1849
+ }, zoomIn);
1850
+ var SaveContainer = styled__default['default'].div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n height: 25px;\n opacity: 0;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n"])), function (props) {
1694
1851
  return props.theme.colors.white;
1695
1852
  });
1696
- var MidBox = styled__default['default'].div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral__default['default'](["\n z-index: 2;\n position: absolute;\n background-color: ", ";\n width: 95%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n overflow: hidden;\n"])), function (props) {
1697
- return props.theme.colors.grey5;
1698
- });
1699
- var BackBox = styled__default['default'].div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral__default['default'](["\n background-color: blue;\n background-color: ", ";\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n overflow: hidden;\n"])), function (props) {
1700
- return props.theme.colors.grey7;
1701
- });
1702
- var PhotoBackground = styled__default['default'].div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(", ");\n background-size: cover;\n border-radius: 8px;\n overflow: hidden;\n background-position: center;\n"])), function (props) {
1703
- return props.url;
1704
- });
1705
- var BlurBackground = styled__default['default'].div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 8px;\n backdrop-filter: blur(4px);\n"])));
1706
- var GradientBackground = styled__default['default'].div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral__default['default'](["\n width: 100%;\n opacity: 0.7;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 8px;\n width: 100%;\n height: 100%;\n"])));
1707
- var InteractionBox = styled__default['default'].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: calc(100% - 4px);\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n margin: 0 auto;\n transition: 0.2s;\n position: relative;\n"]))); // Box on the left of the Collection that is clicked to save/unsave
1708
-
1709
- var SaveBox = styled__default['default'].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n border-radius: 4px;\n transition: 0.2s;\n box-shadow: 0px 0px 0px 0px #999999a1;\n cursor: pointer;\n\n &:hover {\n transform: scale(1.05);\n }\n"])));
1710
- var SaveBoxTop = styled__default['default'].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default['default'](["\n z-index: 5;\n width: 100%;\n position: relative;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n"])), function (props) {
1853
+ var BlerpImageScrim = styled__default['default'].div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "10;\n /* position: absolute; */\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n /* border-radius: 8px; */\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
1711
1854
  return props.theme.colors.notBlackOverride;
1712
- });
1713
- var SaveBoxTopDarken = styled__default['default'].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default['default'](["\n opacity: 1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 4px;\n"])));
1714
- var SaveBoxShadowSquare = styled__default['default'].div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 4px;\n ", ";\n"])), function (props) {
1715
- return props.depth === "1" ? "\n transform: skewX(-5deg); \n left: 2px; \n height: 94%; \n bottom: 0" : props.depth === "2" ? "\n transform: skewX(-12deg); \n left: 5px; \n height: 83%; \n width:97%;\n bottom: 0" : "";
1716
- });
1717
- var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
1718
- var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
1855
+ }, function (props) {
1856
+ return props.theme.colors.notBlackOverride;
1857
+ }, SaveContainer);
1858
+ 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"])));
1859
+ var BlerpListView$1 = function BlerpListView(_ref) {
1860
+ var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
1719
1861
 
1720
- var collection = _ref4.collection,
1721
- variantSize = _ref4.variantSize,
1722
- extraInfoComponent = _ref4.extraInfoComponent,
1723
- primaryActionButton = _ref4.primaryActionButton,
1724
- secondaryActionButton = _ref4.secondaryActionButton,
1725
- handleClickBackground = _ref4.handleClickBackground,
1726
- handleClickTitle = _ref4.handleClickTitle,
1727
- isLinkTitle = _ref4.isLinkTitle,
1728
- fluid = _ref4.fluid;
1862
+ var bite = _ref.bite,
1863
+ variantSize = _ref.variantSize,
1864
+ isSelected = _ref.isSelected,
1865
+ playingState = _ref.playingState,
1866
+ extraInfoComponent = _ref.extraInfoComponent,
1867
+ primaryActionButton = _ref.primaryActionButton,
1868
+ secondaryActionButton = _ref.secondaryActionButton,
1869
+ handleClickBackground = _ref.handleClickBackground,
1870
+ handleClickPlay = _ref.handleClickPlay,
1871
+ handleClickSave = _ref.handleClickSave,
1872
+ handleClickThreeDot = _ref.handleClickThreeDot,
1873
+ handleClickUnsave = _ref.handleClickUnsave,
1874
+ handleClickTitle = _ref.handleClickTitle,
1875
+ isLinkTitle = _ref.isLinkTitle,
1876
+ fluid = _ref.fluid,
1877
+ props = _ref.props,
1878
+ isLocked = _ref.isLocked,
1879
+ isPremium = _ref.isPremium,
1880
+ handleClickLock = _ref.handleClickLock,
1881
+ handleClickPremium = _ref.handleClickPremium;
1729
1882
 
1730
1883
  var _useState = React.useState(false),
1731
1884
  _useState2 = _slicedToArray__default['default'](_useState, 2);
1732
1885
  _useState2[0];
1733
- _useState2[1]; // Will use this exclusively for picking colors from image...no ColorExtractor
1734
-
1886
+ var setOpenSave = _useState2[1];
1735
1887
 
1736
- var _usePalette = reactPalette.usePalette(collection === null || collection === void 0 ? void 0 : (_collection$image = collection.image) === null || _collection$image === void 0 ? void 0 : (_collection$image$ori = _collection$image.original) === null || _collection$image$ori === void 0 ? void 0 : _collection$image$ori.url);
1888
+ 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);
1737
1889
  _usePalette.loading;
1738
- var data = _usePalette.data;
1890
+ _usePalette.data;
1739
1891
  _usePalette.error;
1740
1892
 
1741
1893
  var theme = React.useContext(styled.ThemeContext);
1742
1894
  var size = useWindowSize();
1743
- console.log("Collleeeeection", collection);
1895
+
1744
1896
  var sizeParams;
1745
1897
  var smallSize = {
1746
- width: "300px",
1898
+ width: 300,
1747
1899
  height: 40,
1748
1900
  fontSize: "16px",
1749
- saveBoxSize: "36px",
1901
+ imageSize: "40px",
1750
1902
  reactionSpacing: 1,
1751
1903
  reactionPadding: "3px",
1752
1904
  reactionSize: "20px",
1753
1905
  buttonSize: "small"
1754
1906
  };
1755
1907
  var mediumSize = {
1756
- width: "375px",
1908
+ width: 375,
1757
1909
  height: 48,
1758
1910
  fontSize: "18px",
1759
- saveBoxSize: "44px",
1911
+ imageSize: "48px",
1760
1912
  reactionSpacing: 1,
1761
1913
  reactionPadding: "3px",
1762
1914
  reactionSize: "23px",
1763
1915
  buttonSize: "medium"
1764
1916
  };
1765
1917
  var largeSize = {
1766
- width: "440px",
1918
+ width: 440,
1767
1919
  height: 56,
1768
1920
  fontSize: "20px",
1769
- saveBoxSize: "52px",
1921
+ imageSize: "56px",
1770
1922
  reactionSpacing: 1,
1771
1923
  reactionPadding: "5px",
1772
1924
  reactionSize: "30px",
@@ -1779,7 +1931,7 @@
1779
1931
  width: "100%",
1780
1932
  height: 48,
1781
1933
  fontSize: "18px",
1782
- saveBoxSize: "44px",
1934
+ imageSize: "48px",
1783
1935
  reactionSpacing: 1,
1784
1936
  reactionPadding: "3px",
1785
1937
  reactionSize: "23px",
@@ -1796,237 +1948,211 @@
1796
1948
  if (variantSize === "small") {
1797
1949
  sizeParams = smallSize;
1798
1950
  } else if (variantSize === "medium") {
1799
- console.log(variantSize);
1800
1951
  sizeParams = mediumSize;
1801
1952
  } else if (variantSize === "large") {
1802
1953
  sizeParams = largeSize;
1803
1954
  }
1804
1955
  }
1805
1956
 
1806
- return (
1807
- /*#__PURE__*/
1808
- // This is the master container. All children's size should be in relation to this box. This box's should not be dependent on its children, but should be dependent on either screen size or the variantSize prop ONLY.
1957
+ if (isPremium) {
1958
+ return /*#__PURE__*/React__default['default'].createElement(BlerpListViewPremium$1, {
1959
+ bite: bite,
1960
+ variantSize: variantSize,
1961
+ isSelected: isSelected,
1962
+ playingState: playingState,
1963
+ extraInfoComponent: extraInfoComponent,
1964
+ primaryActionButton: primaryActionButton,
1965
+ secondaryActionButton: secondaryActionButton,
1966
+ handleClickBackground: handleClickBackground,
1967
+ handleClickPlay: handleClickPlay,
1968
+ handleClickSave: handleClickSave,
1969
+ handleClickThreeDot: handleClickThreeDot,
1970
+ handleClickUnsave: handleClickUnsave,
1971
+ handleClickTitle: handleClickTitle,
1972
+ isLinkTitle: isLinkTitle,
1973
+ fluid: fluid,
1974
+ props: props,
1975
+ isLocked: isLocked,
1976
+ isPremium: isPremium,
1977
+ handleClickLock: handleClickLock,
1978
+ handleClickPremium: handleClickPremium
1979
+ });
1980
+ }
1809
1981
 
1810
- /* BIG PICTURE OF COMPONENT:
1811
- Master Container
1812
- - TopBox (solid white background)
1813
- - PhotoBackground (if collection has photo)
1814
- - BlurBackground (always applied)
1815
- - Gradient Background (default is photo color --> black, fall back is white --> black)
1816
- - Interaction Box (holds clickable elements)
1817
- - MidBox (first "shadow")
1818
- - BackBox (second "shadow")
1819
- */
1820
- React__default['default'].createElement(MasterContainer, {
1821
- owned: collection === null || collection === void 0 ? void 0 : collection.owned,
1822
- sizeParams: sizeParams,
1823
- fluid: fluid
1824
- }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder$1, {
1825
- id: "yellow-border"
1826
- }), /*#__PURE__*/React__default['default'].createElement(TopBox, {
1827
- onClick: function onClick(e) {
1828
- e.stopPropagation();
1829
- handleClickBackground();
1830
- },
1831
- style: {
1832
- borderBottomColor: extraInfoComponent && theme.colors.grey3,
1833
- width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
1834
- }
1835
- }, /*#__PURE__*/React__default['default'].createElement(PhotoBackground, {
1836
- url: collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url
1837
- }), /*#__PURE__*/React__default['default'].createElement(BlurBackground, null), /*#__PURE__*/React__default['default'].createElement(GradientBackground, {
1838
- style: {
1839
- background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
1840
- }
1841
- }), /*#__PURE__*/React__default['default'].createElement(InteractionBox, {
1842
- style: {
1843
- borderBottomColor: extraInfoComponent && theme.colors.grey3
1982
+ return /*#__PURE__*/React__default['default'].createElement(Box, {
1983
+ sx: {
1984
+ width: sizeParams.width,
1985
+ minWidth: fluid && "300px",
1986
+ borderRadius: "8px",
1987
+ border: "2px transparent",
1988
+ bgcolor: "grey2.main",
1989
+ backgroundOrigin: "border-box",
1990
+ backgroundClip: "content-box, border-box",
1991
+ boxShadow: "2px 2px 4px 0px #999999a1;",
1992
+ transition: "0.3s",
1993
+ "&:hover": {
1994
+ bgcolor: "grey3.main"
1844
1995
  }
1845
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1846
- direction: "row",
1847
- justifyContent: "flex-start",
1996
+ }
1997
+ }, /*#__PURE__*/React__default['default'].createElement(Box, {
1998
+ onClick: function onClick(e) {
1999
+ e.stopPropagation();
2000
+ handleClickBackground();
2001
+ },
2002
+ sx: {
2003
+ width: "calc(100% - 4px)",
2004
+ height: sizeParams.height,
2005
+ display: "flex",
2006
+ flexDirection: "row",
1848
2007
  alignItems: "center",
1849
- sx: {
1850
- position: "relative",
1851
- width: "calc(100% - 180px)",
1852
- left: "2px"
2008
+ justifyContent: "space-between",
2009
+ borderRadius: "8px",
2010
+ border: "2px solid transparent",
2011
+ borderRightWidth: "0px",
2012
+ borderLeftWidth: "0px",
2013
+ margin: "0 auto",
2014
+ borderBottomColor: extraInfoComponent && theme.colors.grey3,
2015
+ transition: "0.3s",
2016
+ position: "relative"
2017
+ }
2018
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2019
+ direction: "row",
2020
+ width: "70%",
2021
+ alignItems: "center",
2022
+ sx: {
2023
+ cursor: "pointer"
2024
+ }
2025
+ }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
2026
+ style: {
2027
+ width: sizeParams.imageSize,
2028
+ height: sizeParams.imageSize,
2029
+ boxShadow: "0px 0px 0px 0px #999999a1;"
2030
+ },
2031
+ 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
2032
+ }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim, {
2033
+ style: {
2034
+ width: sizeParams.imageSize,
2035
+ height: sizeParams.imageSize
2036
+ },
2037
+ onClick: function onClick(e) {
2038
+ if (handleClickPlay) {
2039
+ e.stopPropagation();
2040
+ handleClickPlay();
1853
2041
  }
1854
- }, /*#__PURE__*/React__default['default'].createElement(SaveBox, {
1855
- style: {
1856
- width: sizeParams.saveBoxSize,
1857
- height: sizeParams.saveBoxSize
1858
- },
1859
- onClick: function onClick(e) {
1860
- console.log("handle save/unsave here");
2042
+ }
2043
+ }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
2044
+ sx: {
2045
+ width: "30px",
2046
+ height: "30px",
2047
+ color: "white.override"
2048
+ }
2049
+ }) : /*#__PURE__*/React__default['default'].createElement(PlayOutlineIcon, {
2050
+ sx: {
2051
+ width: "30px",
2052
+ height: "30px",
2053
+ color: "white.override"
2054
+ }
2055
+ }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
2056
+ href: "/soundbites/".concat(bite._id),
2057
+ style: {
2058
+ textDecoration: "none",
2059
+ width: "100%"
2060
+ }
2061
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
2062
+ textAlign: "left",
2063
+ fontSize: sizeParams.fontSize,
2064
+ noWrap: true,
2065
+ width: "80%",
2066
+ marginLeft: "10px",
2067
+ color: "white.override",
2068
+ sx: {
2069
+ ":hover": {
2070
+ textDecoration: handleClickTitle ? "underline" : "none"
1861
2071
  }
1862
- }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTop, {
1863
- style: {
1864
- width: sizeParams.saveBoxSize,
1865
- height: sizeParams.saveBoxSize,
1866
- background: data.darkVibrant || "#999999"
2072
+ },
2073
+ onClick: function onClick(e) {
2074
+ if (handleClickTitle) {
2075
+ e.stopPropagation();
2076
+ handleClickTitle();
1867
2077
  }
1868
- }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTopDarken, {
1869
- style: {
1870
- background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
2078
+ }
2079
+ }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
2080
+ textAlign: "left",
2081
+ fontSize: sizeParams.fontSize,
2082
+ noWrap: true,
2083
+ width: "80%",
2084
+ marginLeft: "10px",
2085
+ sx: {
2086
+ ":hover": {
2087
+ textDecoration: handleClickTitle ? "underline" : "none"
1871
2088
  }
1872
- }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1873
- sx: {
1874
- width: "30px",
1875
- height: "30px",
1876
- color: "white.override",
1877
- position: "relative",
1878
- bottom: "1px"
2089
+ },
2090
+ onClick: function onClick(e) {
2091
+ if (handleClickTitle) {
2092
+ e.stopPropagation();
2093
+ handleClickTitle();
1879
2094
  }
1880
- }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1881
- sx: {
1882
- width: "30px",
1883
- height: "30px",
1884
- color: "white.override",
1885
- position: "relative",
1886
- bottom: "1px"
2095
+ }
2096
+ }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
2097
+ direction: "row"
2098
+ }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
2099
+ onClick: function onClick(e) {
2100
+ e.stopPropagation();
2101
+ handleClickUnsave();
2102
+ setOpenSave(true);
2103
+ },
2104
+ sx: {
2105
+ backgroundColor: "white.override",
2106
+ color: "starling.main",
2107
+ padding: "5px",
2108
+ marginRight: "10px",
2109
+ ":hover": {
2110
+ backgroundColor: "grey3.main"
1887
2111
  }
1888
- })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
1889
- depth: "2",
1890
- style: {
1891
- background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
1892
- }
1893
- }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
1894
- depth: "1",
1895
- style: {
1896
- background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
1897
- }
1898
- })), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
1899
- href: "/sound-collection/".concat(collection._id),
1900
- style: {
1901
- textDecoration: "none",
1902
- width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
1903
- position: "relative",
1904
- left: "12px"
1905
- }
1906
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
1907
- textAlign: "left",
1908
- fontSize: sizeParams.fontSize,
1909
- noWrap: true,
1910
- color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
1911
- sx: {
1912
- ":hover": {
1913
- textDecoration: handleClickTitle ? "underline" : "none"
1914
- },
1915
- "@media (max-width: 600px)": {
1916
- maxWidth: "133px"
1917
- }
1918
- },
1919
- onClick: function onClick(e) {
1920
- if (handleClickTitle) {
1921
- e.stopPropagation();
1922
- handleClickTitle();
1923
- }
1924
- }
1925
- }, collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
1926
- textAlign: "left",
1927
- fontSize: sizeParams.fontSize,
1928
- noWrap: true,
1929
- color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
1930
- sx: {
1931
- position: "relative",
1932
- left: "12px",
1933
- ":hover": {
1934
- textDecoration: handleClickTitle ? "underline" : "none"
1935
- },
1936
- "@media (max-width: 600px)": {
1937
- maxWidth: "133px"
1938
- }
1939
- },
1940
- onClick: function onClick(e) {
1941
- console.log("handle non-linkTitle click here");
1942
- }
1943
- }, collection.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
1944
- direction: "row",
1945
- justifyContent: "flex-end",
1946
- alignItems: "center",
1947
- sx: {
1948
- height: "70%"
1949
- }
1950
- }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
1951
- direction: "row",
1952
- justifyContent: "space-around",
1953
- alignItems: "center",
1954
- sx: {
1955
- height: "100%",
1956
- width: "102px",
1957
- position: "relative"
1958
- }
1959
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1960
- sx: {
1961
- borderRadius: "20px",
1962
- position: "absolute",
1963
- top: "0",
1964
- bottom: "0",
1965
- left: "0",
1966
- right: "0",
1967
- backgroundColor: "notBlack.main",
1968
- opacity: ".5"
1969
- }
1970
- }), /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
1971
- sx: {
1972
- opacity: "1",
1973
- zIndex: "2",
1974
- color: "white.override",
1975
- height: "18px"
1976
- }
1977
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
1978
- sx: {
1979
- zIndex: "2",
1980
- color: "white.override",
1981
- fontWeight: "lighter",
1982
- fontSize: "14px",
1983
- cursor: "default",
1984
- position: "relative",
1985
- right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
1986
- }
1987
- }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
1988
- sx: {
1989
- zIndex: "2",
1990
- color: "white.override",
1991
- height: "14px"
1992
- }
1993
- })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
1994
- id: "second-button",
1995
- onClick: function onClick(e) {
1996
- console.log("handle secondary button click here");
1997
- },
1998
- sx: {
1999
- padding: "5px",
2000
- transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
2001
- "&:hover": {
2002
- backgroundColor: "grey6.main"
2003
- }
2004
- }
2005
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2006
- sx: {
2007
- borderRadius: "20px",
2008
- position: "absolute",
2009
- top: "0",
2010
- bottom: "0",
2011
- left: "0",
2012
- right: "0",
2013
- backgroundColor: "notBlack.main",
2014
- opacity: ".5"
2112
+ }
2113
+ }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
2114
+ sx: {
2115
+ color: "notBlack.override"
2116
+ }
2117
+ })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
2118
+ onClick: function onClick(e) {
2119
+ e.stopPropagation();
2120
+ handleClickSave();
2121
+ setOpenSave(true);
2122
+ },
2123
+ sx: {
2124
+ backgroundColor: "white.override",
2125
+ color: "starling.main",
2126
+ padding: "5px",
2127
+ marginRight: "10px",
2128
+ ":hover": {
2129
+ backgroundColor: "grey3.main"
2015
2130
  }
2016
- }), /*#__PURE__*/React__default['default'].createElement(KeyboardArrowRightRoundedIcon__default['default'], {
2017
- sx: {
2018
- zIndex: "2",
2019
- color: "white.override"
2131
+ }
2132
+ }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
2133
+ sx: {
2134
+ color: "notBlack.override"
2135
+ }
2136
+ })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
2137
+ onClick: function onClick(e) {
2138
+ handleClickThreeDot(e);
2139
+ },
2140
+ sx: {
2141
+ backgroundColor: "white.override",
2142
+ padding: "5px",
2143
+ marginRight: "10px",
2144
+ ":hover": {
2145
+ backgroundColor: "grey3.main"
2020
2146
  }
2021
- }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(MidBox, {
2022
- id: "mid-box"
2023
- }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(BackBox, {
2024
- id: "back-box"
2025
- }), extraInfoComponent && extraInfoComponent)
2026
- );
2147
+ }
2148
+ }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
2149
+ sx: {
2150
+ color: "notBlack.override"
2151
+ }
2152
+ })))), extraInfoComponent && extraInfoComponent);
2027
2153
  };
2028
- CollectionListViewPremium$1.propTypes = {
2029
- collection: PropTypes__default['default'].object.isRequired,
2154
+ BlerpListView$1.propTypes = {
2155
+ bite: PropTypes__default['default'].object.isRequired,
2030
2156
  collections: PropTypes__default['default'].array.isRequired,
2031
2157
  variantSize: PropTypes__default['default'].string.isRequired,
2032
2158
  userSignedIn: PropTypes__default['default'].object.isRequired,
@@ -2036,142 +2162,104 @@
2036
2162
  getUserReactions: PropTypes__default['default'].func.isRequired,
2037
2163
  createCollection: PropTypes__default['default'].func.isRequired,
2038
2164
  handleClickBackground: PropTypes__default['default'].func.isRequired,
2165
+ handleClickPlay: PropTypes__default['default'].func.isRequired,
2166
+ handleClickThreeDot: PropTypes__default['default'].func.isRequired,
2039
2167
  handleClickSave: PropTypes__default['default'].func.isRequired,
2040
2168
  handleClickReaction: PropTypes__default['default'].func.isRequired,
2041
2169
  handleClickUnsave: PropTypes__default['default'].func.isRequired
2042
2170
  };
2043
2171
 
2044
- var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8;
2045
- // _id: "5b237fbafca7167a35619410",
2046
- // title: "Crying",
2047
- // image: {
2048
- // filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
2049
- // original: {
2050
- // url:
2051
- // "https://blerp-content-images-1144.storage.googleapis.com/original/72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=03746d6018c257bf5b34e773fb39d0dd502ee337dcb654c2b0d2dcf1c0bacc704cfae0daf0028a00339e15529a0fbcf613a83760422433f25577db978f704806100ed6c71f7176aaa23fc08c3d99692eec6fda7cdac3eb95ae6e26c65a8495f17e4da4895730c57c9e5f66509ae90f7c00c4da944caab44396f53de1bf0bc7710159f92430f571b47b893bea452da14a1667b373faa8d195f31cd23ea72b3db17d0557e0fded6411fc1564207aede8b6aa768c9fc63323a4af42c496f2a9b3a8290c68e96bf0f39aa097f2c6a0a3b47312b7f3040dc9b77736f6ea55b5fac41140ec6c7e837b827b5210d43a4b6299b55f65dc16da26c1f39f644919ac68ac6c",
2052
- // },
2053
- // },
2054
- // audio: {
2055
- // filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
2056
- // original: {
2057
- // url:
2058
- // "https://blerp-content-audio-1144.storage.googleapis.com/mp3/4d6796be-a58c-4c12-9949-fd832cbf646d?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=40f5a61ce407158c9e324a8fb09c459dde051d29ec0f528dc1a6f3ed7e02638a4deaabb980289daa6b0498069718389d8b1a95b10e7097df3f8be2cee452274fdb876f5e553c868de683dc222bcaa19144e6879fbcc84145aa9d6837efea1b8cc06efde3d459f3f721d9a2a7e9d775a36e916809b1e1be999fc7331590affdc7149c7b24da4c48b3096119d7e6f225c4026a82bc16751a8fb1e8129c9ed835db30858306010769db97478305a9224d498b001589baad3e23ad94c1ea7c6d4721f27bcbc24fa75968e8bafcdaf250ff58e16e9b0a47f68cca496d93014a2e792262de6876a8ccc9776da8ffa21c194b9c7228e8748075207335fa91aace2250c0",
2059
- // },
2060
- // },
2061
- // };
2062
-
2063
- var BlerpImage = styled__default['default'].div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n border-radius: 50%;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
2064
- return props.url;
2065
- });
2066
- var zoomIn = styled.keyframes(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
2067
- styled__default['default'].div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\n height: 100%;\n width: 100%;\n position: absolute;\n border-radius: 8px;\n transform: scale(0);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n background-color: ", "D3;\n border: 2px solid ", "D3;\n backdrop-filter: blur(4px);\n animation: ", " 0.2s forwards;\n"])), function (props) {
2068
- return props.theme.colors.notBlack;
2069
- }, function (props) {
2070
- return props.theme.colors.notBlack;
2071
- }, zoomIn);
2072
- var SaveContainer = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n /* position: absolute; */\n top: 0;\n right: 0;\n width: 25px;\n height: 25px;\n opacity: 1;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &:hover svg {\n color: ", ";\n }\n"])), function (props) {
2073
- return "".concat(props.theme.colors.notBlack, "8a");
2074
- }, function (props) {
2075
- return props.theme.colors.seafoam;
2172
+ var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2173
+ 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) {
2174
+ var sizeParams = _ref.sizeParams;
2175
+ return (sizeParams.height += 2) + "px";
2176
+ }, function (_ref2) {
2177
+ var sizeParams = _ref2.sizeParams;
2178
+ return sizeParams.width;
2179
+ }, function (_ref3) {
2180
+ var fluid = _ref3.fluid;
2181
+ return fluid ? "300px" : "0";
2076
2182
  }, function (props) {
2183
+ return props.owned ? "102%" : "100%";
2184
+ });
2185
+ 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"])));
2186
+ var TopBox = styled__default['default'].div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\n z-index: 3;\n border: 2px transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ", ";\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n position: relative;\n overflow: hidden;\n"])), function (props) {
2077
2187
  return props.theme.colors.white;
2078
2188
  });
2079
- var BlerpImageScrim = styled__default['default'].div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "10;\n /* position: absolute; */\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n"])), function (props) {
2080
- return props.theme.colors.notBlackOverride;
2081
- }, function (props) {
2082
- return props.theme.colors.notBlackOverride;
2189
+ 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) {
2190
+ return props.theme.colors.grey5;
2083
2191
  });
2084
- var PremiumPill = styled__default['default'].div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-radius: 20px;\n height: 25px;\n width: 75px;\n padding: 0 4px;\n margin: 0 4px;\n cursor: pointer;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n"])), function (props) {
2085
- return props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a");
2086
- }, function (props) {
2087
- return props.theme.colors.seafoam;
2192
+ 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) {
2193
+ return props.theme.colors.grey7;
2088
2194
  });
2089
- styled__default['default'].div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral__default['default'](["\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px;\n transition: 0.2s;\n margin-right: 0;\n cursor: pointer;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) {
2090
- return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
2091
- }, function (props) {
2092
- return props.theme.colors.ibisRed;
2195
+ 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) {
2196
+ return props.url;
2093
2197
  });
2094
- styled__default['default'].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
2095
- var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
2096
- var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
2198
+ 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"])));
2199
+ 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"])));
2200
+ 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
2097
2201
 
2098
- var bite = _ref.bite,
2099
- variantSize = _ref.variantSize;
2100
- _ref.isSelected;
2101
- var playingState = _ref.playingState,
2102
- extraInfoComponent = _ref.extraInfoComponent,
2103
- primaryActionButton = _ref.primaryActionButton,
2104
- secondaryActionButton = _ref.secondaryActionButton,
2105
- handleClickBackground = _ref.handleClickBackground,
2106
- handleClickPlay = _ref.handleClickPlay,
2107
- handleClickSave = _ref.handleClickSave;
2108
- _ref.handleClickThreeDot;
2109
- var handleClickUnsave = _ref.handleClickUnsave,
2110
- handleClickTitle = _ref.handleClickTitle,
2111
- isLinkTitle = _ref.isLinkTitle,
2112
- isLocked = _ref.isLocked,
2113
- fluid = _ref.fluid;
2114
- _ref.props;
2202
+ 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"])));
2203
+ 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) {
2204
+ return props.theme.colors.notBlackOverride;
2205
+ });
2206
+ 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"])));
2207
+ 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) {
2208
+ 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" : "";
2209
+ });
2210
+ var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
2211
+ var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
2212
+
2213
+ var collection = _ref4.collection,
2214
+ variantSize = _ref4.variantSize,
2215
+ extraInfoComponent = _ref4.extraInfoComponent,
2216
+ primaryActionButton = _ref4.primaryActionButton,
2217
+ secondaryActionButton = _ref4.secondaryActionButton,
2218
+ handleClickBackground = _ref4.handleClickBackground,
2219
+ handleClickTitle = _ref4.handleClickTitle,
2220
+ isLinkTitle = _ref4.isLinkTitle,
2221
+ fluid = _ref4.fluid;
2115
2222
 
2116
2223
  var _useState = React.useState(false),
2117
2224
  _useState2 = _slicedToArray__default['default'](_useState, 2);
2118
2225
  _useState2[0];
2119
- var setOpenSave = _useState2[1];
2226
+ _useState2[1]; // Will use this exclusively for picking colors from image...no ColorExtractor
2120
2227
 
2121
- var _usePalette = reactPalette.usePalette(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url);
2228
+
2229
+ var _usePalette = reactPalette.usePalette(collection === null || collection === void 0 ? void 0 : (_collection$image = collection.image) === null || _collection$image === void 0 ? void 0 : (_collection$image$ori = _collection$image.original) === null || _collection$image$ori === void 0 ? void 0 : _collection$image$ori.url);
2122
2230
  _usePalette.loading;
2123
2231
  var data = _usePalette.data;
2124
2232
  _usePalette.error;
2125
2233
 
2126
2234
  var theme = React.useContext(styled.ThemeContext);
2127
2235
  var size = useWindowSize();
2128
-
2129
- var _useState3 = React.useState(false),
2130
- _useState4 = _slicedToArray__default['default'](_useState3, 2),
2131
- isBlerpHovered = _useState4[0],
2132
- setIsBlerpHovered = _useState4[1];
2133
-
2134
- var _useState5 = React.useState(false),
2135
- _useState6 = _slicedToArray__default['default'](_useState5, 2),
2136
- actionButtonHovered = _useState6[0],
2137
- setActionButtonHovered = _useState6[1];
2138
-
2139
- console.log(data);
2140
-
2141
- var handleClickLock = function handleClickLock(bite) {
2142
- console.log("route to purchase modal with id: ".concat(bite));
2143
- };
2144
-
2145
- var handleClickPremium = function handleClickPremium(bite) {
2146
- console.log("route to purchase modal with id: ".concat(bite));
2147
- };
2148
-
2236
+ console.log("Collleeeeection", collection);
2149
2237
  var sizeParams;
2150
2238
  var smallSize = {
2151
- width: 300,
2239
+ width: "300px",
2152
2240
  height: 40,
2153
2241
  fontSize: "16px",
2154
- imageSize: "40px",
2242
+ saveBoxSize: "36px",
2155
2243
  reactionSpacing: 1,
2156
2244
  reactionPadding: "3px",
2157
2245
  reactionSize: "20px",
2158
2246
  buttonSize: "small"
2159
2247
  };
2160
2248
  var mediumSize = {
2161
- width: 375,
2249
+ width: "375px",
2162
2250
  height: 48,
2163
2251
  fontSize: "18px",
2164
- imageSize: "48px",
2252
+ saveBoxSize: "44px",
2165
2253
  reactionSpacing: 1,
2166
2254
  reactionPadding: "3px",
2167
2255
  reactionSize: "23px",
2168
2256
  buttonSize: "medium"
2169
2257
  };
2170
2258
  var largeSize = {
2171
- width: 440,
2259
+ width: "440px",
2172
2260
  height: 56,
2173
2261
  fontSize: "20px",
2174
- imageSize: "56px",
2262
+ saveBoxSize: "52px",
2175
2263
  reactionSpacing: 1,
2176
2264
  reactionPadding: "5px",
2177
2265
  reactionSize: "30px",
@@ -2184,7 +2272,7 @@
2184
2272
  width: "100%",
2185
2273
  height: 48,
2186
2274
  fontSize: "18px",
2187
- imageSize: "48px",
2275
+ saveBoxSize: "44px",
2188
2276
  reactionSpacing: 1,
2189
2277
  reactionPadding: "3px",
2190
2278
  reactionSize: "23px",
@@ -2201,252 +2289,237 @@
2201
2289
  if (variantSize === "small") {
2202
2290
  sizeParams = smallSize;
2203
2291
  } else if (variantSize === "medium") {
2292
+ console.log(variantSize);
2204
2293
  sizeParams = mediumSize;
2205
2294
  } else if (variantSize === "large") {
2206
2295
  sizeParams = largeSize;
2207
2296
  }
2208
2297
  }
2209
2298
 
2210
- return /*#__PURE__*/React__default['default'].createElement(Box, {
2211
- onMouseEnter: function onMouseEnter(e) {
2212
- return setIsBlerpHovered(true);
2213
- },
2214
- onMouseLeave: function onMouseLeave(e) {
2215
- return setIsBlerpHovered(false);
2216
- },
2217
- sx: {
2218
- width: sizeParams.width,
2219
- position: "relative",
2220
- minWidth: fluid && "300px",
2221
- borderRadius: "8px",
2222
- border: "2px transparent",
2223
- backgroundImage: "white",
2224
- backgroundOrigin: "border-box",
2225
- backgroundClip: "content-box, border-box",
2226
- boxShadow: "2px 2px 4px 0px #999999a1;",
2227
- // overflow: "hidden",
2228
- "&:hover": {
2229
- transition: "0.3s",
2230
- bgcolor: "grey2.main"
2299
+ return (
2300
+ /*#__PURE__*/
2301
+ // 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.
2302
+
2303
+ /* BIG PICTURE OF COMPONENT:
2304
+ Master Container
2305
+ - TopBox (solid white background)
2306
+ - PhotoBackground (if collection has photo)
2307
+ - BlurBackground (always applied)
2308
+ - Gradient Background (default is photo color --> black, fall back is white --> black)
2309
+ - Interaction Box (holds clickable elements)
2310
+ - MidBox (first "shadow")
2311
+ - BackBox (second "shadow")
2312
+ */
2313
+ React__default['default'].createElement(MasterContainer, {
2314
+ owned: collection === null || collection === void 0 ? void 0 : collection.owned,
2315
+ sizeParams: sizeParams,
2316
+ fluid: fluid
2317
+ }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder$1, {
2318
+ id: "yellow-border"
2319
+ }), /*#__PURE__*/React__default['default'].createElement(TopBox, {
2320
+ onClick: function onClick(e) {
2321
+ e.stopPropagation();
2322
+ handleClickBackground();
2323
+ },
2324
+ style: {
2325
+ borderBottomColor: extraInfoComponent && theme.colors.grey3,
2326
+ width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
2231
2327
  }
2232
- }
2233
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2234
- sx: {
2235
- position: "absolute",
2236
- top: "0",
2237
- bottom: "0",
2238
- left: "0",
2239
- right: "0",
2240
- borderRadius: "8px",
2241
- background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
2242
- transition: "opacity .15s ease-in-out",
2243
- opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
2244
- }
2245
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
2246
- onClick: function onClick(e) {
2247
- e.stopPropagation();
2248
- handleClickBackground();
2249
- },
2250
- sx: {
2251
- width: "calc(100% - 4px)",
2252
- height: sizeParams.height,
2253
- display: "flex",
2254
- flexDirection: "row",
2328
+ }, /*#__PURE__*/React__default['default'].createElement(PhotoBackground, {
2329
+ 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
2330
+ }), /*#__PURE__*/React__default['default'].createElement(BlurBackground, null), /*#__PURE__*/React__default['default'].createElement(GradientBackground, {
2331
+ style: {
2332
+ background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
2333
+ }
2334
+ }), /*#__PURE__*/React__default['default'].createElement(InteractionBox, {
2335
+ style: {
2336
+ borderBottomColor: extraInfoComponent && theme.colors.grey3
2337
+ }
2338
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2339
+ direction: "row",
2340
+ justifyContent: "flex-start",
2255
2341
  alignItems: "center",
2256
- justifyContent: "space-between",
2257
- borderRadius: "8px",
2258
- border: "2px solid transparent",
2259
- borderRightWidth: "0px",
2260
- borderLeftWidth: "0px",
2261
- margin: "0 auto",
2262
- borderBottomColor: extraInfoComponent && theme.colors.grey3,
2263
- transition: "0.3s",
2264
- position: "relative"
2265
- }
2266
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2267
- direction: "row",
2268
- width: "70%",
2269
- alignItems: "center",
2270
- sx: {
2271
- cursor: "pointer",
2272
- minWidth: "30%"
2273
- }
2274
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
2275
- style: {
2276
- width: sizeParams.imageSize,
2277
- height: sizeParams.imageSize
2278
- },
2279
- url: bite === null || bite === void 0 ? void 0 : (_bite$image2 = bite.image) === null || _bite$image2 === void 0 ? void 0 : (_bite$image2$original = _bite$image2.original) === null || _bite$image2$original === void 0 ? void 0 : _bite$image2$original.url
2280
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim, {
2281
- style: {
2282
- width: sizeParams.imageSize,
2283
- height: sizeParams.imageSize
2284
- },
2285
- onClick: function onClick(e) {
2286
- if (handleClickPlay) {
2287
- e.stopPropagation();
2288
- handleClickPlay();
2342
+ sx: {
2343
+ position: "relative",
2344
+ width: "calc(100% - 180px)",
2345
+ left: "2px"
2346
+ }
2347
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBox, {
2348
+ style: {
2349
+ width: sizeParams.saveBoxSize,
2350
+ height: sizeParams.saveBoxSize
2351
+ },
2352
+ onClick: function onClick(e) {
2353
+ console.log("handle save/unsave here");
2354
+ }
2355
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTop, {
2356
+ style: {
2357
+ width: sizeParams.saveBoxSize,
2358
+ height: sizeParams.saveBoxSize,
2359
+ background: data.darkVibrant || "#999999"
2360
+ }
2361
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTopDarken, {
2362
+ style: {
2363
+ background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
2364
+ }
2365
+ }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
2366
+ sx: {
2367
+ width: "30px",
2368
+ height: "30px",
2369
+ color: "white.override",
2370
+ position: "relative",
2371
+ bottom: "1px"
2372
+ }
2373
+ }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
2374
+ sx: {
2375
+ width: "30px",
2376
+ height: "30px",
2377
+ color: "white.override",
2378
+ position: "relative",
2379
+ bottom: "1px"
2380
+ }
2381
+ })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
2382
+ depth: "2",
2383
+ style: {
2384
+ background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
2385
+ }
2386
+ }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
2387
+ depth: "1",
2388
+ style: {
2389
+ background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
2390
+ }
2391
+ })), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
2392
+ href: "/sound-collection/".concat(collection._id),
2393
+ style: {
2394
+ textDecoration: "none",
2395
+ width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
2396
+ position: "relative",
2397
+ left: "12px"
2398
+ }
2399
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
2400
+ textAlign: "left",
2401
+ fontSize: sizeParams.fontSize,
2402
+ noWrap: true,
2403
+ color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
2404
+ sx: {
2405
+ ":hover": {
2406
+ textDecoration: handleClickTitle ? "underline" : "none"
2407
+ },
2408
+ "@media (max-width: 600px)": {
2409
+ maxWidth: "133px"
2410
+ }
2411
+ },
2412
+ onClick: function onClick(e) {
2413
+ if (handleClickTitle) {
2414
+ e.stopPropagation();
2415
+ handleClickTitle();
2416
+ }
2289
2417
  }
2290
- }
2291
- }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
2292
- sx: {
2293
- width: "30px",
2294
- height: "30px",
2295
- color: "white.override"
2296
- }
2297
- }) : /*#__PURE__*/React__default['default'].createElement(PlayOutlineIcon, {
2298
- sx: {
2299
- width: "30px",
2300
- height: "30px",
2301
- color: "white.override"
2302
- }
2303
- }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
2304
- textAlign: "left",
2305
- fontSize: sizeParams.fontSize,
2306
- noWrap: true,
2307
- width: "80%",
2308
- marginLeft: "10px",
2309
- color: "white.override",
2310
- sx: {
2311
- ":hover": {
2312
- textDecoration: handleClickTitle ? "underline" : "none"
2418
+ }, collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
2419
+ textAlign: "left",
2420
+ fontSize: sizeParams.fontSize,
2421
+ noWrap: true,
2422
+ color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
2423
+ sx: {
2424
+ position: "relative",
2425
+ left: "12px",
2426
+ ":hover": {
2427
+ textDecoration: handleClickTitle ? "underline" : "none"
2428
+ },
2429
+ "@media (max-width: 600px)": {
2430
+ maxWidth: "133px"
2431
+ }
2432
+ },
2433
+ onClick: function onClick(e) {
2434
+ console.log("handle non-linkTitle click here");
2313
2435
  }
2314
- },
2315
- onClick: function onClick(e) {
2316
- if (handleClickTitle) {
2317
- e.stopPropagation();
2318
- handleClickTitle();
2436
+ }, collection.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
2437
+ direction: "row",
2438
+ justifyContent: "flex-end",
2439
+ alignItems: "center",
2440
+ sx: {
2441
+ height: "70%"
2319
2442
  }
2320
- }
2321
- }, /*#__PURE__*/React__default['default'].createElement("a", {
2322
- href: "/soundbites/".concat(bite._id),
2323
- style: {
2324
- textDecoration: "none",
2325
- color: "white"
2326
- }
2327
- }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
2328
- textAlign: "left",
2329
- fontSize: sizeParams.fontSize,
2330
- noWrap: true,
2331
- width: "80%",
2332
- marginLeft: "10px",
2333
- color: "white.override",
2334
- sx: {
2335
- ":hover": {
2336
- textDecoration: handleClickTitle ? "underline" : "none"
2443
+ }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
2444
+ direction: "row",
2445
+ justifyContent: "space-around",
2446
+ alignItems: "center",
2447
+ sx: {
2448
+ height: "100%",
2449
+ width: "102px",
2450
+ position: "relative"
2337
2451
  }
2338
- },
2339
- onClick: function onClick(e) {
2340
- if (handleClickTitle) {
2341
- e.stopPropagation();
2342
- handleClickTitle();
2452
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2453
+ sx: {
2454
+ borderRadius: "20px",
2455
+ position: "absolute",
2456
+ top: "0",
2457
+ bottom: "0",
2458
+ left: "0",
2459
+ right: "0",
2460
+ backgroundColor: "notBlack.main",
2461
+ opacity: ".5"
2343
2462
  }
2344
- }
2345
- }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
2346
- direction: "row",
2347
- alignItems: "center"
2348
- }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer, {
2349
- isLocked: isLocked,
2350
- isBlerpHovered: isBlerpHovered,
2351
- onClick: function onClick(e) {
2352
- e.stopPropagation();
2353
- handleClickLock();
2354
- },
2355
- onMouseEnter: function onMouseEnter() {
2356
- return setActionButtonHovered(true);
2357
- },
2358
- onMouseLeave: function onMouseLeave() {
2359
- return setActionButtonHovered(false);
2360
- }
2361
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2362
- sx: {
2363
- position: "relative",
2364
- top: "1px",
2365
- "& svg": {
2366
- color: "white.main"
2463
+ }), /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
2464
+ sx: {
2465
+ opacity: "1",
2466
+ zIndex: "2",
2467
+ color: "white.override",
2468
+ height: "18px"
2367
2469
  }
2368
- }
2369
- }, /*#__PURE__*/React__default['default'].createElement(Tooltip, {
2370
- title: "Unlock"
2371
- }, actionButtonHovered ? /*#__PURE__*/React__default['default'].createElement(OpenLockIcon, {
2372
- sx: {
2373
- fontSize: "22px",
2374
- position: "relative",
2375
- bottom: "2px",
2376
- left: "0px"
2377
- }
2378
- }) : /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
2379
- sx: {
2380
- fontSize: "16px",
2381
- position: "relative",
2382
- bottom: "1px"
2383
- }
2384
- })))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), /*#__PURE__*/React__default['default'].createElement(PremiumPill, {
2385
- isLocked: isLocked,
2386
- isBlerpHovered: isBlerpHovered,
2387
- onClick: function onClick(e) {
2388
- e.stopPropagation();
2389
- handleClickPremium();
2390
- }
2391
- }, /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
2392
- sx: {
2393
- width: "16px",
2394
- marginRight: "4px",
2395
- color: "white.main"
2396
- }
2397
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
2398
- sx: {
2399
- marginRight: "4px",
2400
- color: "white.main",
2401
- fontSize: "12px"
2402
- }
2403
- }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
2404
- onClick: function onClick(e) {
2405
- e.stopPropagation();
2406
- handleClickUnsave();
2407
- setOpenSave(true);
2408
- },
2409
- sx: {
2410
- backgroundColor: "white.override",
2411
- color: "starling.main",
2412
- padding: "5px",
2413
- marginRight: "10px",
2414
- ":hover": {
2415
- backgroundColor: "seafoam.main"
2416
- },
2417
- ":hover svg": {
2418
- color: "white.main"
2470
+ }), /*#__PURE__*/React__default['default'].createElement(Text, {
2471
+ sx: {
2472
+ zIndex: "2",
2473
+ color: "white.override",
2474
+ fontWeight: "lighter",
2475
+ fontSize: "14px",
2476
+ cursor: "default",
2477
+ position: "relative",
2478
+ right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
2419
2479
  }
2420
- }
2421
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
2422
- sx: {
2423
- color: "starling.main"
2424
- }
2425
- })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
2426
- onClick: function onClick(e) {
2427
- e.stopPropagation();
2428
- handleClickSave();
2429
- setOpenSave(true);
2430
- },
2431
- sx: {
2432
- backgroundColor: "white.override",
2433
- padding: "5px",
2434
- marginRight: "10px",
2435
- ":hover": {
2436
- backgroundColor: "seafoam.main"
2480
+ }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
2481
+ sx: {
2482
+ zIndex: "2",
2483
+ color: "white.override",
2484
+ height: "14px"
2485
+ }
2486
+ })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
2487
+ id: "second-button",
2488
+ onClick: function onClick(e) {
2489
+ console.log("handle secondary button click here");
2437
2490
  },
2438
- ":hover svg": {
2439
- color: "white.main"
2491
+ sx: {
2492
+ padding: "5px",
2493
+ transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
2494
+ "&:hover": {
2495
+ backgroundColor: "grey6.main"
2496
+ }
2440
2497
  }
2441
- }
2442
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
2443
- sx: {
2444
- color: "starling.main"
2445
- }
2446
- })))), extraInfoComponent && extraInfoComponent);
2498
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2499
+ sx: {
2500
+ borderRadius: "20px",
2501
+ position: "absolute",
2502
+ top: "0",
2503
+ bottom: "0",
2504
+ left: "0",
2505
+ right: "0",
2506
+ backgroundColor: "notBlack.main",
2507
+ opacity: ".5"
2508
+ }
2509
+ }), /*#__PURE__*/React__default['default'].createElement(KeyboardArrowRightRoundedIcon__default['default'], {
2510
+ sx: {
2511
+ zIndex: "2",
2512
+ color: "white.override"
2513
+ }
2514
+ }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(MidBox, {
2515
+ id: "mid-box"
2516
+ }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(BackBox, {
2517
+ id: "back-box"
2518
+ }), extraInfoComponent && extraInfoComponent)
2519
+ );
2447
2520
  };
2448
- BlerpListViewPremium$1.propTypes = {
2449
- bite: PropTypes__default['default'].object.isRequired,
2521
+ CollectionListViewPremium$1.propTypes = {
2522
+ collection: PropTypes__default['default'].object.isRequired,
2450
2523
  collections: PropTypes__default['default'].array.isRequired,
2451
2524
  variantSize: PropTypes__default['default'].string.isRequired,
2452
2525
  userSignedIn: PropTypes__default['default'].object.isRequired,
@@ -2456,8 +2529,6 @@
2456
2529
  getUserReactions: PropTypes__default['default'].func.isRequired,
2457
2530
  createCollection: PropTypes__default['default'].func.isRequired,
2458
2531
  handleClickBackground: PropTypes__default['default'].func.isRequired,
2459
- handleClickPlay: PropTypes__default['default'].func.isRequired,
2460
- handleClickThreeDot: PropTypes__default['default'].func.isRequired,
2461
2532
  handleClickSave: PropTypes__default['default'].func.isRequired,
2462
2533
  handleClickReaction: PropTypes__default['default'].func.isRequired,
2463
2534
  handleClickUnsave: PropTypes__default['default'].func.isRequired
@@ -2796,8 +2867,8 @@
2796
2867
  _onClick = _ref.onClick;
2797
2868
  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, {
2798
2869
  checked: checked,
2799
- onClick: function onClick() {
2800
- return _onClick();
2870
+ onClick: function onClick(e) {
2871
+ return _onClick(e);
2801
2872
  }
2802
2873
  }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, {
2803
2874
  checked: checked,