@blerp/design 1.0.62 → 1.0.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs.js +692 -657
  2. package/dist/index.esm.js +692 -657
  3. package/dist/index.umd.js +692 -657
  4. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -1334,7 +1334,7 @@ Blerp$1.propTypes = {
1334
1334
  handleClickTitle: PropTypes.func.isRequired
1335
1335
  };
1336
1336
 
1337
- var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4;
1337
+ var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$1;
1338
1338
  // _id: "5b237fbafca7167a35619410",
1339
1339
  // title: "Crying",
1340
1340
  // image: {
@@ -1353,7 +1353,7 @@ var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$
1353
1353
  // },
1354
1354
  // };
1355
1355
 
1356
- var BlerpImage$1 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n /* border-radius: 8px; */\n border-radius: 50%;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
1356
+ var BlerpImage$1 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\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) {
1357
1357
  return props.url;
1358
1358
  });
1359
1359
  var zoomIn$1 = keyframes(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
@@ -1362,16 +1362,30 @@ styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["
1362
1362
  }, function (props) {
1363
1363
  return props.theme.colors.notBlack;
1364
1364
  }, zoomIn$1);
1365
- var SaveContainer$1 = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n height: 25px;\n opacity: 0;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n"])), function (props) {
1365
+ var SaveContainer$1 = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\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) {
1366
+ return "".concat(props.theme.colors.notBlack, "8a");
1367
+ }, function (props) {
1368
+ return props.theme.colors.seafoam;
1369
+ }, function (props) {
1366
1370
  return props.theme.colors.white;
1367
1371
  });
1368
- var BlerpImageScrim$1 = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n height: 150px;\n width: 150px;\n background-color: ", "10;\n /* position: absolute; */\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n /* border-radius: 8px; */\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
1372
+ var BlerpImageScrim$1 = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n height: 150px;\n width: 150px;\n background-color: ", "10;\n /* position: absolute; */\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n"])), function (props) {
1369
1373
  return props.theme.colors.notBlackOverride;
1370
1374
  }, function (props) {
1371
1375
  return props.theme.colors.notBlackOverride;
1372
- }, SaveContainer$1);
1373
- styled.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
1374
- var BlerpListView$1 = function BlerpListView(_ref) {
1376
+ });
1377
+ var PremiumPill = styled.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral(["\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) {
1378
+ return props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a");
1379
+ }, function (props) {
1380
+ return props.theme.colors.seafoam;
1381
+ });
1382
+ styled.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\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) {
1383
+ return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
1384
+ }, function (props) {
1385
+ return props.theme.colors.ibisRed;
1386
+ });
1387
+ styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
1388
+ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
1375
1389
  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
1376
1390
 
1377
1391
  var bite = _ref.bite,
@@ -1383,13 +1397,17 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1383
1397
  secondaryActionButton = _ref.secondaryActionButton,
1384
1398
  handleClickBackground = _ref.handleClickBackground,
1385
1399
  handleClickPlay = _ref.handleClickPlay,
1386
- handleClickSave = _ref.handleClickSave,
1387
- handleClickThreeDot = _ref.handleClickThreeDot,
1388
- handleClickUnsave = _ref.handleClickUnsave,
1400
+ handleClickSave = _ref.handleClickSave;
1401
+ _ref.handleClickThreeDot;
1402
+ var handleClickUnsave = _ref.handleClickUnsave,
1389
1403
  handleClickTitle = _ref.handleClickTitle,
1390
1404
  isLinkTitle = _ref.isLinkTitle,
1405
+ isLocked = _ref.isLocked,
1391
1406
  fluid = _ref.fluid;
1392
1407
  _ref.props;
1408
+ _ref.isPremium;
1409
+ var handleClickLock = _ref.handleClickLock,
1410
+ handleClickPremium = _ref.handleClickPremium;
1393
1411
 
1394
1412
  var _useState = useState(false),
1395
1413
  _useState2 = _slicedToArray(_useState, 2);
@@ -1398,12 +1416,24 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1398
1416
 
1399
1417
  var _usePalette = 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);
1400
1418
  _usePalette.loading;
1401
- _usePalette.data;
1419
+ var data = _usePalette.data;
1402
1420
  _usePalette.error;
1403
1421
 
1404
1422
  var theme = useContext(ThemeContext);
1405
1423
  var size = useWindowSize();
1406
1424
 
1425
+ var _useState3 = useState(false),
1426
+ _useState4 = _slicedToArray(_useState3, 2),
1427
+ isBlerpHovered = _useState4[0],
1428
+ setIsBlerpHovered = _useState4[1];
1429
+
1430
+ var _useState5 = useState(false),
1431
+ _useState6 = _slicedToArray(_useState5, 2),
1432
+ actionButtonHovered = _useState6[0],
1433
+ setActionButtonHovered = _useState6[1];
1434
+
1435
+ console.log(data);
1436
+
1407
1437
  var sizeParams;
1408
1438
  var smallSize = {
1409
1439
  width: 300,
@@ -1466,21 +1496,41 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1466
1496
  }
1467
1497
 
1468
1498
  return /*#__PURE__*/React__default.createElement(Box, {
1499
+ onMouseEnter: function onMouseEnter(e) {
1500
+ return setIsBlerpHovered(true);
1501
+ },
1502
+ onMouseLeave: function onMouseLeave(e) {
1503
+ return setIsBlerpHovered(false);
1504
+ },
1469
1505
  sx: {
1470
1506
  width: sizeParams.width,
1507
+ position: "relative",
1471
1508
  minWidth: fluid && "300px",
1472
1509
  borderRadius: "8px",
1473
1510
  border: "2px transparent",
1474
- bgcolor: "grey2.main",
1511
+ backgroundImage: "white",
1475
1512
  backgroundOrigin: "border-box",
1476
1513
  backgroundClip: "content-box, border-box",
1477
1514
  boxShadow: "2px 2px 4px 0px #999999a1;",
1478
- transition: "0.3s",
1515
+ // overflow: "hidden",
1479
1516
  "&:hover": {
1480
- bgcolor: "grey3.main"
1517
+ transition: "0.3s",
1518
+ bgcolor: "grey2.main"
1481
1519
  }
1482
1520
  }
1483
- }, /*#__PURE__*/React__default.createElement(Box, {
1521
+ }, /*#__PURE__*/React__default.createElement(Stack, {
1522
+ sx: {
1523
+ position: "absolute",
1524
+ top: "0",
1525
+ bottom: "0",
1526
+ left: "0",
1527
+ right: "0",
1528
+ borderRadius: "8px",
1529
+ background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
1530
+ transition: "opacity .15s ease-in-out",
1531
+ opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
1532
+ }
1533
+ }), /*#__PURE__*/React__default.createElement(Box, {
1484
1534
  onClick: function onClick(e) {
1485
1535
  e.stopPropagation();
1486
1536
  handleClickBackground();
@@ -1506,13 +1556,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1506
1556
  width: "70%",
1507
1557
  alignItems: "center",
1508
1558
  sx: {
1509
- cursor: "pointer"
1559
+ cursor: "pointer",
1560
+ minWidth: "30%"
1510
1561
  }
1511
1562
  }, /*#__PURE__*/React__default.createElement(BlerpImage$1, {
1512
1563
  style: {
1513
1564
  width: sizeParams.imageSize,
1514
- height: sizeParams.imageSize,
1515
- boxShadow: "0px 0px 0px 0px #999999a1;"
1565
+ height: sizeParams.imageSize
1516
1566
  },
1517
1567
  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
1518
1568
  }, /*#__PURE__*/React__default.createElement(BlerpImageScrim$1, {
@@ -1538,13 +1588,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1538
1588
  height: "30px",
1539
1589
  color: "white.override"
1540
1590
  }
1541
- }))), isLinkTitle ? /*#__PURE__*/React__default.createElement("a", {
1542
- href: "/soundbites/".concat(bite._id),
1543
- style: {
1544
- textDecoration: "none",
1545
- width: "100%"
1546
- }
1547
- }, /*#__PURE__*/React__default.createElement(Text, {
1591
+ }))), isLinkTitle ? /*#__PURE__*/React__default.createElement(Text, {
1548
1592
  textAlign: "left",
1549
1593
  fontSize: sizeParams.fontSize,
1550
1594
  noWrap: true,
@@ -1562,12 +1606,19 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1562
1606
  handleClickTitle();
1563
1607
  }
1564
1608
  }
1609
+ }, /*#__PURE__*/React__default.createElement("a", {
1610
+ href: "/soundbites/".concat(bite._id),
1611
+ style: {
1612
+ textDecoration: "none",
1613
+ color: "white"
1614
+ }
1565
1615
  }, bite.title)) : /*#__PURE__*/React__default.createElement(Text, {
1566
1616
  textAlign: "left",
1567
1617
  fontSize: sizeParams.fontSize,
1568
1618
  noWrap: true,
1569
1619
  width: "80%",
1570
1620
  marginLeft: "10px",
1621
+ color: "white.override",
1571
1622
  sx: {
1572
1623
  ":hover": {
1573
1624
  textDecoration: handleClickTitle ? "underline" : "none"
@@ -1580,64 +1631,120 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1580
1631
  }
1581
1632
  }
1582
1633
  }, bite.title)), /*#__PURE__*/React__default.createElement(Stack, {
1583
- direction: "row"
1584
- }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default.createElement(IconButton, {
1634
+ direction: "row",
1635
+ alignItems: "center"
1636
+ }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default.createElement(SaveContainer$1, {
1637
+ isLocked: isLocked,
1638
+ isBlerpHovered: isBlerpHovered,
1585
1639
  onClick: function onClick(e) {
1586
1640
  e.stopPropagation();
1587
- handleClickUnsave();
1588
- setOpenSave(true);
1641
+
1642
+ if (handleClickLock) {
1643
+ handleClickLock();
1644
+ }
1589
1645
  },
1646
+ onMouseEnter: function onMouseEnter() {
1647
+ return setActionButtonHovered(true);
1648
+ },
1649
+ onMouseLeave: function onMouseLeave() {
1650
+ return setActionButtonHovered(false);
1651
+ }
1652
+ }, /*#__PURE__*/React__default.createElement(Stack, {
1590
1653
  sx: {
1591
- backgroundColor: "white.override",
1592
- color: "starling.main",
1593
- padding: "5px",
1594
- marginRight: "10px",
1595
- ":hover": {
1596
- backgroundColor: "grey3.main"
1654
+ position: "relative",
1655
+ top: "1px",
1656
+ "& svg": {
1657
+ color: "white.main"
1597
1658
  }
1598
1659
  }
1599
- }, /*#__PURE__*/React__default.createElement(BookmarkOutlinedIcon, {
1660
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
1661
+ title: "Unlock Premium"
1662
+ }, actionButtonHovered ? /*#__PURE__*/React__default.createElement(OpenLockIcon, {
1600
1663
  sx: {
1601
- color: "notBlack.override"
1664
+ fontSize: "22px",
1665
+ position: "relative",
1666
+ bottom: "2px",
1667
+ left: "0px"
1602
1668
  }
1603
- })) : /*#__PURE__*/React__default.createElement(IconButton, {
1669
+ }) : /*#__PURE__*/React__default.createElement(LockRoundedIcon, {
1670
+ sx: {
1671
+ fontSize: "16px",
1672
+ position: "relative",
1673
+ bottom: "1px"
1674
+ }
1675
+ })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), !!handleClickPremium && /*#__PURE__*/React__default.createElement(PremiumPill, {
1676
+ isLocked: isLocked,
1677
+ isBlerpHovered: isBlerpHovered,
1604
1678
  onClick: function onClick(e) {
1605
1679
  e.stopPropagation();
1606
- handleClickSave();
1680
+ handleClickPremium();
1681
+ }
1682
+ }, /*#__PURE__*/React__default.createElement(DiamondIcon, {
1683
+ sx: {
1684
+ width: "16px",
1685
+ marginRight: "4px",
1686
+ color: "white.main"
1687
+ }
1688
+ }), /*#__PURE__*/React__default.createElement(Text, {
1689
+ sx: {
1690
+ marginRight: "4px",
1691
+ color: "white.main",
1692
+ fontSize: "12px"
1693
+ }
1694
+ }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default.createElement(IconButton, {
1695
+ onClick: function onClick(e) {
1696
+ e.stopPropagation();
1697
+
1698
+ if (handleClickUnsave) {
1699
+ handleClickUnsave();
1700
+ }
1701
+
1607
1702
  setOpenSave(true);
1608
1703
  },
1609
1704
  sx: {
1610
1705
  backgroundColor: "white.override",
1611
1706
  color: "starling.main",
1612
1707
  padding: "5px",
1613
- marginRight: "10px",
1708
+ margin: "0 8px",
1614
1709
  ":hover": {
1615
- backgroundColor: "grey3.main"
1710
+ backgroundColor: "seafoam.main"
1711
+ },
1712
+ ":hover svg": {
1713
+ color: "white.main"
1616
1714
  }
1617
1715
  }
1618
- }, /*#__PURE__*/React__default.createElement(BookmarkAddOutlinedIcon, {
1716
+ }, /*#__PURE__*/React__default.createElement(BookmarkOutlinedIcon, {
1619
1717
  sx: {
1620
- color: "notBlack.override"
1718
+ color: "starling.main"
1621
1719
  }
1622
- })), secondaryActionButton || /*#__PURE__*/React__default.createElement(IconButton, {
1720
+ })) : /*#__PURE__*/React__default.createElement(IconButton, {
1623
1721
  onClick: function onClick(e) {
1624
- handleClickThreeDot(e);
1722
+ e.stopPropagation();
1723
+
1724
+ if (handleClickSave) {
1725
+ handleClickSave();
1726
+ }
1727
+
1728
+ setOpenSave(true);
1625
1729
  },
1626
1730
  sx: {
1627
1731
  backgroundColor: "white.override",
1628
1732
  padding: "5px",
1629
1733
  marginRight: "10px",
1630
1734
  ":hover": {
1631
- backgroundColor: "grey3.main"
1735
+ backgroundColor: "seafoam.main"
1736
+ },
1737
+ ":hover svg": {
1738
+ color: "white.main"
1632
1739
  }
1633
1740
  }
1634
- }, /*#__PURE__*/React__default.createElement(MoreHorizRoundedIcon, {
1741
+ }, /*#__PURE__*/React__default.createElement(BookmarkAddOutlinedIcon, {
1635
1742
  sx: {
1636
- color: "notBlack.override"
1743
+ color: "starling.main"
1637
1744
  }
1638
1745
  })))), extraInfoComponent && extraInfoComponent);
1639
1746
  };
1640
- BlerpListView$1.propTypes = {
1747
+ BlerpListViewPremium$1.propTypes = {
1641
1748
  bite: PropTypes.object.isRequired,
1642
1749
  collections: PropTypes.array.isRequired,
1643
1750
  variantSize: PropTypes.string.isRequired,
@@ -1655,97 +1762,106 @@ BlerpListView$1.propTypes = {
1655
1762
  handleClickUnsave: PropTypes.func.isRequired
1656
1763
  };
1657
1764
 
1658
- var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
1659
- var MasterContainer = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\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) {
1660
- var sizeParams = _ref.sizeParams;
1661
- return (sizeParams.height += 2) + "px";
1662
- }, function (_ref2) {
1663
- var sizeParams = _ref2.sizeParams;
1664
- return sizeParams.width;
1665
- }, function (_ref3) {
1666
- var fluid = _ref3.fluid;
1667
- return fluid ? "300px" : "0";
1668
- }, function (props) {
1669
- return props.owned ? "102%" : "100%";
1765
+ var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3;
1766
+ // _id: "5b237fbafca7167a35619410",
1767
+ // title: "Crying",
1768
+ // image: {
1769
+ // filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
1770
+ // original: {
1771
+ // url:
1772
+ // "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",
1773
+ // },
1774
+ // },
1775
+ // audio: {
1776
+ // filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
1777
+ // original: {
1778
+ // url:
1779
+ // "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",
1780
+ // },
1781
+ // },
1782
+ // };
1783
+
1784
+ var BlerpImage = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n /* border-radius: 8px; */\n border-radius: 50%;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
1785
+ return props.url;
1670
1786
  });
1671
- var YellowHoverBorder$1 = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\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"])));
1672
- var TopBox = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\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) {
1787
+ var zoomIn = keyframes(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
1788
+ styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n height: 100%;\n width: 100%;\n position: absolute;\n border-radius: 8px;\n transform: scale(0);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n background-color: ", "D3;\n border: 2px solid ", "D3;\n backdrop-filter: blur(4px);\n animation: ", " 0.2s forwards;\n"])), function (props) {
1789
+ return props.theme.colors.notBlack;
1790
+ }, function (props) {
1791
+ return props.theme.colors.notBlack;
1792
+ }, zoomIn);
1793
+ var SaveContainer = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n height: 25px;\n opacity: 0;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n"])), function (props) {
1673
1794
  return props.theme.colors.white;
1674
1795
  });
1675
- var MidBox = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\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) {
1676
- return props.theme.colors.grey5;
1677
- });
1678
- var BackBox = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\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) {
1679
- return props.theme.colors.grey7;
1680
- });
1681
- var PhotoBackground = styled.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral(["\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) {
1682
- return props.url;
1683
- });
1684
- var BlurBackground = styled.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\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"])));
1685
- var GradientBackground = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\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"])));
1686
- var InteractionBox = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\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
1687
-
1688
- var SaveBox = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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"])));
1689
- var SaveBoxTop = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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) {
1796
+ var BlerpImageScrim = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n height: 150px;\n width: 150px;\n background-color: ", "10;\n /* position: absolute; */\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n /* border-radius: 8px; */\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
1690
1797
  return props.theme.colors.notBlackOverride;
1691
- });
1692
- var SaveBoxTopDarken = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n opacity: 1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 4px;\n"])));
1693
- var SaveBoxShadowSquare = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 4px;\n ", ";\n"])), function (props) {
1694
- 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" : "";
1695
- });
1696
- var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
1697
- var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
1698
-
1699
- var collection = _ref4.collection,
1700
- variantSize = _ref4.variantSize,
1701
- extraInfoComponent = _ref4.extraInfoComponent,
1702
- primaryActionButton = _ref4.primaryActionButton,
1703
- secondaryActionButton = _ref4.secondaryActionButton,
1704
- handleClickBackground = _ref4.handleClickBackground,
1705
- handleClickTitle = _ref4.handleClickTitle,
1706
- isLinkTitle = _ref4.isLinkTitle,
1707
- fluid = _ref4.fluid;
1708
-
1709
- var _useState = useState(false),
1710
- _useState2 = _slicedToArray(_useState, 2);
1711
- _useState2[0];
1712
- _useState2[1]; // Will use this exclusively for picking colors from image...no ColorExtractor
1713
-
1714
-
1715
- var _usePalette = 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);
1716
- _usePalette.loading;
1717
- var data = _usePalette.data;
1718
- _usePalette.error;
1798
+ }, function (props) {
1799
+ return props.theme.colors.notBlackOverride;
1800
+ }, SaveContainer);
1801
+ styled.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
1802
+ var BlerpListView$1 = function BlerpListView(_ref) {
1803
+ var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
1719
1804
 
1720
- var theme = useContext(ThemeContext);
1805
+ var bite = _ref.bite,
1806
+ variantSize = _ref.variantSize,
1807
+ isSelected = _ref.isSelected,
1808
+ playingState = _ref.playingState,
1809
+ extraInfoComponent = _ref.extraInfoComponent,
1810
+ primaryActionButton = _ref.primaryActionButton,
1811
+ secondaryActionButton = _ref.secondaryActionButton,
1812
+ handleClickBackground = _ref.handleClickBackground,
1813
+ handleClickPlay = _ref.handleClickPlay,
1814
+ handleClickSave = _ref.handleClickSave,
1815
+ handleClickThreeDot = _ref.handleClickThreeDot,
1816
+ handleClickUnsave = _ref.handleClickUnsave,
1817
+ handleClickTitle = _ref.handleClickTitle,
1818
+ isLinkTitle = _ref.isLinkTitle,
1819
+ fluid = _ref.fluid,
1820
+ props = _ref.props,
1821
+ isLocked = _ref.isLocked,
1822
+ isPremium = _ref.isPremium,
1823
+ handleClickLock = _ref.handleClickLock,
1824
+ handleClickPremium = _ref.handleClickPremium;
1825
+
1826
+ var _useState = useState(false),
1827
+ _useState2 = _slicedToArray(_useState, 2);
1828
+ _useState2[0];
1829
+ var setOpenSave = _useState2[1];
1830
+
1831
+ var _usePalette = 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);
1832
+ _usePalette.loading;
1833
+ _usePalette.data;
1834
+ _usePalette.error;
1835
+
1836
+ var theme = useContext(ThemeContext);
1721
1837
  var size = useWindowSize();
1722
- console.log("Collleeeeection", collection);
1838
+
1723
1839
  var sizeParams;
1724
1840
  var smallSize = {
1725
- width: "300px",
1841
+ width: 300,
1726
1842
  height: 40,
1727
1843
  fontSize: "16px",
1728
- saveBoxSize: "36px",
1844
+ imageSize: "40px",
1729
1845
  reactionSpacing: 1,
1730
1846
  reactionPadding: "3px",
1731
1847
  reactionSize: "20px",
1732
1848
  buttonSize: "small"
1733
1849
  };
1734
1850
  var mediumSize = {
1735
- width: "375px",
1851
+ width: 375,
1736
1852
  height: 48,
1737
1853
  fontSize: "18px",
1738
- saveBoxSize: "44px",
1854
+ imageSize: "48px",
1739
1855
  reactionSpacing: 1,
1740
1856
  reactionPadding: "3px",
1741
1857
  reactionSize: "23px",
1742
1858
  buttonSize: "medium"
1743
1859
  };
1744
1860
  var largeSize = {
1745
- width: "440px",
1861
+ width: 440,
1746
1862
  height: 56,
1747
1863
  fontSize: "20px",
1748
- saveBoxSize: "52px",
1864
+ imageSize: "56px",
1749
1865
  reactionSpacing: 1,
1750
1866
  reactionPadding: "5px",
1751
1867
  reactionSize: "30px",
@@ -1758,7 +1874,7 @@ var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
1758
1874
  width: "100%",
1759
1875
  height: 48,
1760
1876
  fontSize: "18px",
1761
- saveBoxSize: "44px",
1877
+ imageSize: "48px",
1762
1878
  reactionSpacing: 1,
1763
1879
  reactionPadding: "3px",
1764
1880
  reactionSize: "23px",
@@ -1775,237 +1891,211 @@ var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
1775
1891
  if (variantSize === "small") {
1776
1892
  sizeParams = smallSize;
1777
1893
  } else if (variantSize === "medium") {
1778
- console.log(variantSize);
1779
1894
  sizeParams = mediumSize;
1780
1895
  } else if (variantSize === "large") {
1781
1896
  sizeParams = largeSize;
1782
1897
  }
1783
1898
  }
1784
1899
 
1785
- return (
1786
- /*#__PURE__*/
1787
- // 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.
1900
+ if (isPremium) {
1901
+ return /*#__PURE__*/React__default.createElement(BlerpListViewPremium$1, {
1902
+ bite: bite,
1903
+ variantSize: variantSize,
1904
+ isSelected: isSelected,
1905
+ playingState: playingState,
1906
+ extraInfoComponent: extraInfoComponent,
1907
+ primaryActionButton: primaryActionButton,
1908
+ secondaryActionButton: secondaryActionButton,
1909
+ handleClickBackground: handleClickBackground,
1910
+ handleClickPlay: handleClickPlay,
1911
+ handleClickSave: handleClickSave,
1912
+ handleClickThreeDot: handleClickThreeDot,
1913
+ handleClickUnsave: handleClickUnsave,
1914
+ handleClickTitle: handleClickTitle,
1915
+ isLinkTitle: isLinkTitle,
1916
+ fluid: fluid,
1917
+ props: props,
1918
+ isLocked: isLocked,
1919
+ isPremium: isPremium,
1920
+ handleClickLock: handleClickLock,
1921
+ handleClickPremium: handleClickPremium
1922
+ });
1923
+ }
1788
1924
 
1789
- /* BIG PICTURE OF COMPONENT:
1790
- Master Container
1791
- - TopBox (solid white background)
1792
- - PhotoBackground (if collection has photo)
1793
- - BlurBackground (always applied)
1794
- - Gradient Background (default is photo color --> black, fall back is white --> black)
1795
- - Interaction Box (holds clickable elements)
1796
- - MidBox (first "shadow")
1797
- - BackBox (second "shadow")
1798
- */
1799
- React__default.createElement(MasterContainer, {
1800
- owned: collection === null || collection === void 0 ? void 0 : collection.owned,
1801
- sizeParams: sizeParams,
1802
- fluid: fluid
1803
- }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default.createElement(YellowHoverBorder$1, {
1804
- id: "yellow-border"
1805
- }), /*#__PURE__*/React__default.createElement(TopBox, {
1806
- onClick: function onClick(e) {
1807
- e.stopPropagation();
1808
- handleClickBackground();
1809
- },
1810
- style: {
1811
- borderBottomColor: extraInfoComponent && theme.colors.grey3,
1812
- width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
1813
- }
1814
- }, /*#__PURE__*/React__default.createElement(PhotoBackground, {
1815
- 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
1816
- }), /*#__PURE__*/React__default.createElement(BlurBackground, null), /*#__PURE__*/React__default.createElement(GradientBackground, {
1817
- style: {
1818
- background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
1819
- }
1820
- }), /*#__PURE__*/React__default.createElement(InteractionBox, {
1821
- style: {
1822
- borderBottomColor: extraInfoComponent && theme.colors.grey3
1925
+ return /*#__PURE__*/React__default.createElement(Box, {
1926
+ sx: {
1927
+ width: sizeParams.width,
1928
+ minWidth: fluid && "300px",
1929
+ borderRadius: "8px",
1930
+ border: "2px transparent",
1931
+ bgcolor: "grey2.main",
1932
+ backgroundOrigin: "border-box",
1933
+ backgroundClip: "content-box, border-box",
1934
+ boxShadow: "2px 2px 4px 0px #999999a1;",
1935
+ transition: "0.3s",
1936
+ "&:hover": {
1937
+ bgcolor: "grey3.main"
1823
1938
  }
1824
- }, /*#__PURE__*/React__default.createElement(Stack, {
1825
- direction: "row",
1826
- justifyContent: "flex-start",
1939
+ }
1940
+ }, /*#__PURE__*/React__default.createElement(Box, {
1941
+ onClick: function onClick(e) {
1942
+ e.stopPropagation();
1943
+ handleClickBackground();
1944
+ },
1945
+ sx: {
1946
+ width: "calc(100% - 4px)",
1947
+ height: sizeParams.height,
1948
+ display: "flex",
1949
+ flexDirection: "row",
1827
1950
  alignItems: "center",
1828
- sx: {
1829
- position: "relative",
1830
- width: "calc(100% - 180px)",
1831
- left: "2px"
1951
+ justifyContent: "space-between",
1952
+ borderRadius: "8px",
1953
+ border: "2px solid transparent",
1954
+ borderRightWidth: "0px",
1955
+ borderLeftWidth: "0px",
1956
+ margin: "0 auto",
1957
+ borderBottomColor: extraInfoComponent && theme.colors.grey3,
1958
+ transition: "0.3s",
1959
+ position: "relative"
1960
+ }
1961
+ }, /*#__PURE__*/React__default.createElement(Stack, {
1962
+ direction: "row",
1963
+ width: "70%",
1964
+ alignItems: "center",
1965
+ sx: {
1966
+ cursor: "pointer"
1967
+ }
1968
+ }, /*#__PURE__*/React__default.createElement(BlerpImage, {
1969
+ style: {
1970
+ width: sizeParams.imageSize,
1971
+ height: sizeParams.imageSize,
1972
+ boxShadow: "0px 0px 0px 0px #999999a1;"
1973
+ },
1974
+ 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
1975
+ }, /*#__PURE__*/React__default.createElement(BlerpImageScrim, {
1976
+ style: {
1977
+ width: sizeParams.imageSize,
1978
+ height: sizeParams.imageSize
1979
+ },
1980
+ onClick: function onClick(e) {
1981
+ if (handleClickPlay) {
1982
+ e.stopPropagation();
1983
+ handleClickPlay();
1832
1984
  }
1833
- }, /*#__PURE__*/React__default.createElement(SaveBox, {
1834
- style: {
1835
- width: sizeParams.saveBoxSize,
1836
- height: sizeParams.saveBoxSize
1837
- },
1838
- onClick: function onClick(e) {
1839
- console.log("handle save/unsave here");
1985
+ }
1986
+ }, playingState === "playing" ? /*#__PURE__*/React__default.createElement(PauseCircleOutlineRounded, {
1987
+ sx: {
1988
+ width: "30px",
1989
+ height: "30px",
1990
+ color: "white.override"
1991
+ }
1992
+ }) : /*#__PURE__*/React__default.createElement(PlayOutlineIcon, {
1993
+ sx: {
1994
+ width: "30px",
1995
+ height: "30px",
1996
+ color: "white.override"
1997
+ }
1998
+ }))), isLinkTitle ? /*#__PURE__*/React__default.createElement("a", {
1999
+ href: "/soundbites/".concat(bite._id),
2000
+ style: {
2001
+ textDecoration: "none",
2002
+ width: "100%"
2003
+ }
2004
+ }, /*#__PURE__*/React__default.createElement(Text, {
2005
+ textAlign: "left",
2006
+ fontSize: sizeParams.fontSize,
2007
+ noWrap: true,
2008
+ width: "80%",
2009
+ marginLeft: "10px",
2010
+ color: "white.override",
2011
+ sx: {
2012
+ ":hover": {
2013
+ textDecoration: handleClickTitle ? "underline" : "none"
1840
2014
  }
1841
- }, /*#__PURE__*/React__default.createElement(SaveBoxTop, {
1842
- style: {
1843
- width: sizeParams.saveBoxSize,
1844
- height: sizeParams.saveBoxSize,
1845
- background: data.darkVibrant || "#999999"
2015
+ },
2016
+ onClick: function onClick(e) {
2017
+ if (handleClickTitle) {
2018
+ e.stopPropagation();
2019
+ handleClickTitle();
1846
2020
  }
1847
- }, /*#__PURE__*/React__default.createElement(SaveBoxTopDarken, {
1848
- style: {
1849
- background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
2021
+ }
2022
+ }, bite.title)) : /*#__PURE__*/React__default.createElement(Text, {
2023
+ textAlign: "left",
2024
+ fontSize: sizeParams.fontSize,
2025
+ noWrap: true,
2026
+ width: "80%",
2027
+ marginLeft: "10px",
2028
+ sx: {
2029
+ ":hover": {
2030
+ textDecoration: handleClickTitle ? "underline" : "none"
1850
2031
  }
1851
- }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default.createElement(BookmarkOutlinedIcon, {
1852
- sx: {
1853
- width: "30px",
1854
- height: "30px",
1855
- color: "white.override",
1856
- position: "relative",
1857
- bottom: "1px"
2032
+ },
2033
+ onClick: function onClick(e) {
2034
+ if (handleClickTitle) {
2035
+ e.stopPropagation();
2036
+ handleClickTitle();
1858
2037
  }
1859
- }) : /*#__PURE__*/React__default.createElement(BookmarkAddOutlinedIcon, {
1860
- sx: {
1861
- width: "30px",
1862
- height: "30px",
1863
- color: "white.override",
1864
- position: "relative",
1865
- bottom: "1px"
2038
+ }
2039
+ }, bite.title)), /*#__PURE__*/React__default.createElement(Stack, {
2040
+ direction: "row"
2041
+ }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default.createElement(IconButton, {
2042
+ onClick: function onClick(e) {
2043
+ e.stopPropagation();
2044
+ handleClickUnsave();
2045
+ setOpenSave(true);
2046
+ },
2047
+ sx: {
2048
+ backgroundColor: "white.override",
2049
+ color: "starling.main",
2050
+ padding: "5px",
2051
+ marginRight: "10px",
2052
+ ":hover": {
2053
+ backgroundColor: "grey3.main"
1866
2054
  }
1867
- })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default.createElement(SaveBoxShadowSquare, {
1868
- depth: "2",
1869
- style: {
1870
- background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
1871
- }
1872
- }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default.createElement(SaveBoxShadowSquare, {
1873
- depth: "1",
1874
- style: {
1875
- background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
1876
- }
1877
- })), isLinkTitle ? /*#__PURE__*/React__default.createElement("a", {
1878
- href: "/sound-collection/".concat(collection._id),
1879
- style: {
1880
- textDecoration: "none",
1881
- width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
1882
- position: "relative",
1883
- left: "12px"
1884
- }
1885
- }, /*#__PURE__*/React__default.createElement(Text, {
1886
- textAlign: "left",
1887
- fontSize: sizeParams.fontSize,
1888
- noWrap: true,
1889
- color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
1890
- sx: {
1891
- ":hover": {
1892
- textDecoration: handleClickTitle ? "underline" : "none"
1893
- },
1894
- "@media (max-width: 600px)": {
1895
- maxWidth: "133px"
1896
- }
1897
- },
1898
- onClick: function onClick(e) {
1899
- if (handleClickTitle) {
1900
- e.stopPropagation();
1901
- handleClickTitle();
1902
- }
1903
- }
1904
- }, collection.title)) : /*#__PURE__*/React__default.createElement(Text, {
1905
- textAlign: "left",
1906
- fontSize: sizeParams.fontSize,
1907
- noWrap: true,
1908
- color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
1909
- sx: {
1910
- position: "relative",
1911
- left: "12px",
1912
- ":hover": {
1913
- textDecoration: handleClickTitle ? "underline" : "none"
1914
- },
1915
- "@media (max-width: 600px)": {
1916
- maxWidth: "133px"
1917
- }
1918
- },
1919
- onClick: function onClick(e) {
1920
- console.log("handle non-linkTitle click here");
1921
- }
1922
- }, collection.title)), /*#__PURE__*/React__default.createElement(Stack, {
1923
- direction: "row",
1924
- justifyContent: "flex-end",
1925
- alignItems: "center",
1926
- sx: {
1927
- height: "70%"
1928
- }
1929
- }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default.createElement(Stack, {
1930
- direction: "row",
1931
- justifyContent: "space-around",
1932
- alignItems: "center",
1933
- sx: {
1934
- height: "100%",
1935
- width: "102px",
1936
- position: "relative"
1937
- }
1938
- }, /*#__PURE__*/React__default.createElement(Stack, {
1939
- sx: {
1940
- borderRadius: "20px",
1941
- position: "absolute",
1942
- top: "0",
1943
- bottom: "0",
1944
- left: "0",
1945
- right: "0",
1946
- backgroundColor: "notBlack.main",
1947
- opacity: ".5"
1948
- }
1949
- }), /*#__PURE__*/React__default.createElement(DiamondIcon, {
1950
- sx: {
1951
- opacity: "1",
1952
- zIndex: "2",
1953
- color: "white.override",
1954
- height: "18px"
1955
- }
1956
- }), /*#__PURE__*/React__default.createElement(Text, {
1957
- sx: {
1958
- zIndex: "2",
1959
- color: "white.override",
1960
- fontWeight: "lighter",
1961
- fontSize: "14px",
1962
- cursor: "default",
1963
- position: "relative",
1964
- right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
1965
- }
1966
- }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default.createElement(LockRoundedIcon, {
1967
- sx: {
1968
- zIndex: "2",
1969
- color: "white.override",
1970
- height: "14px"
1971
- }
1972
- })), secondaryActionButton || /*#__PURE__*/React__default.createElement(IconButton, {
1973
- id: "second-button",
1974
- onClick: function onClick(e) {
1975
- console.log("handle secondary button click here");
1976
- },
1977
- sx: {
1978
- padding: "5px",
1979
- transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
1980
- "&:hover": {
1981
- backgroundColor: "grey6.main"
1982
- }
1983
- }
1984
- }, /*#__PURE__*/React__default.createElement(Stack, {
1985
- sx: {
1986
- borderRadius: "20px",
1987
- position: "absolute",
1988
- top: "0",
1989
- bottom: "0",
1990
- left: "0",
1991
- right: "0",
1992
- backgroundColor: "notBlack.main",
1993
- opacity: ".5"
2055
+ }
2056
+ }, /*#__PURE__*/React__default.createElement(BookmarkOutlinedIcon, {
2057
+ sx: {
2058
+ color: "notBlack.override"
2059
+ }
2060
+ })) : /*#__PURE__*/React__default.createElement(IconButton, {
2061
+ onClick: function onClick(e) {
2062
+ e.stopPropagation();
2063
+ handleClickSave();
2064
+ setOpenSave(true);
2065
+ },
2066
+ sx: {
2067
+ backgroundColor: "white.override",
2068
+ color: "starling.main",
2069
+ padding: "5px",
2070
+ marginRight: "10px",
2071
+ ":hover": {
2072
+ backgroundColor: "grey3.main"
1994
2073
  }
1995
- }), /*#__PURE__*/React__default.createElement(KeyboardArrowRightRoundedIcon, {
1996
- sx: {
1997
- zIndex: "2",
1998
- color: "white.override"
2074
+ }
2075
+ }, /*#__PURE__*/React__default.createElement(BookmarkAddOutlinedIcon, {
2076
+ sx: {
2077
+ color: "notBlack.override"
2078
+ }
2079
+ })), secondaryActionButton || /*#__PURE__*/React__default.createElement(IconButton, {
2080
+ onClick: function onClick(e) {
2081
+ handleClickThreeDot(e);
2082
+ },
2083
+ sx: {
2084
+ backgroundColor: "white.override",
2085
+ padding: "5px",
2086
+ marginRight: "10px",
2087
+ ":hover": {
2088
+ backgroundColor: "grey3.main"
1999
2089
  }
2000
- }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default.createElement(MidBox, {
2001
- id: "mid-box"
2002
- }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default.createElement(BackBox, {
2003
- id: "back-box"
2004
- }), extraInfoComponent && extraInfoComponent)
2005
- );
2090
+ }
2091
+ }, /*#__PURE__*/React__default.createElement(MoreHorizRoundedIcon, {
2092
+ sx: {
2093
+ color: "notBlack.override"
2094
+ }
2095
+ })))), extraInfoComponent && extraInfoComponent);
2006
2096
  };
2007
- CollectionListViewPremium$1.propTypes = {
2008
- collection: PropTypes.object.isRequired,
2097
+ BlerpListView$1.propTypes = {
2098
+ bite: PropTypes.object.isRequired,
2009
2099
  collections: PropTypes.array.isRequired,
2010
2100
  variantSize: PropTypes.string.isRequired,
2011
2101
  userSignedIn: PropTypes.object.isRequired,
@@ -2015,142 +2105,104 @@ CollectionListViewPremium$1.propTypes = {
2015
2105
  getUserReactions: PropTypes.func.isRequired,
2016
2106
  createCollection: PropTypes.func.isRequired,
2017
2107
  handleClickBackground: PropTypes.func.isRequired,
2108
+ handleClickPlay: PropTypes.func.isRequired,
2109
+ handleClickThreeDot: PropTypes.func.isRequired,
2018
2110
  handleClickSave: PropTypes.func.isRequired,
2019
2111
  handleClickReaction: PropTypes.func.isRequired,
2020
2112
  handleClickUnsave: PropTypes.func.isRequired
2021
2113
  };
2022
2114
 
2023
- var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8;
2024
- // _id: "5b237fbafca7167a35619410",
2025
- // title: "Crying",
2026
- // image: {
2027
- // filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
2028
- // original: {
2029
- // url:
2030
- // "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",
2031
- // },
2032
- // },
2033
- // audio: {
2034
- // filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
2035
- // original: {
2036
- // url:
2037
- // "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",
2038
- // },
2039
- // },
2040
- // };
2041
-
2042
- var BlerpImage = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\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) {
2043
- return props.url;
2044
- });
2045
- var zoomIn = keyframes(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
2046
- styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n height: 100%;\n width: 100%;\n position: absolute;\n border-radius: 8px;\n transform: scale(0);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n background-color: ", "D3;\n border: 2px solid ", "D3;\n backdrop-filter: blur(4px);\n animation: ", " 0.2s forwards;\n"])), function (props) {
2047
- return props.theme.colors.notBlack;
2048
- }, function (props) {
2049
- return props.theme.colors.notBlack;
2050
- }, zoomIn);
2051
- var SaveContainer = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\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) {
2052
- return "".concat(props.theme.colors.notBlack, "8a");
2053
- }, function (props) {
2054
- return props.theme.colors.seafoam;
2115
+ var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2116
+ var MasterContainer = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\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) {
2117
+ var sizeParams = _ref.sizeParams;
2118
+ return (sizeParams.height += 2) + "px";
2119
+ }, function (_ref2) {
2120
+ var sizeParams = _ref2.sizeParams;
2121
+ return sizeParams.width;
2122
+ }, function (_ref3) {
2123
+ var fluid = _ref3.fluid;
2124
+ return fluid ? "300px" : "0";
2055
2125
  }, function (props) {
2126
+ return props.owned ? "102%" : "100%";
2127
+ });
2128
+ var YellowHoverBorder$1 = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\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"])));
2129
+ var TopBox = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\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) {
2056
2130
  return props.theme.colors.white;
2057
2131
  });
2058
- var BlerpImageScrim = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n height: 150px;\n width: 150px;\n background-color: ", "10;\n /* position: absolute; */\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n"])), function (props) {
2059
- return props.theme.colors.notBlackOverride;
2060
- }, function (props) {
2061
- return props.theme.colors.notBlackOverride;
2132
+ var MidBox = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\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) {
2133
+ return props.theme.colors.grey5;
2062
2134
  });
2063
- var PremiumPill = styled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\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) {
2064
- return props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a");
2065
- }, function (props) {
2066
- return props.theme.colors.seafoam;
2135
+ var BackBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\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) {
2136
+ return props.theme.colors.grey7;
2067
2137
  });
2068
- styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\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) {
2069
- return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
2070
- }, function (props) {
2071
- return props.theme.colors.ibisRed;
2138
+ var PhotoBackground = styled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\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) {
2139
+ return props.url;
2072
2140
  });
2073
- styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
2074
- var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
2075
- var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
2076
-
2077
- var bite = _ref.bite,
2078
- variantSize = _ref.variantSize;
2079
- _ref.isSelected;
2080
- var playingState = _ref.playingState,
2081
- extraInfoComponent = _ref.extraInfoComponent,
2082
- primaryActionButton = _ref.primaryActionButton,
2083
- secondaryActionButton = _ref.secondaryActionButton,
2084
- handleClickBackground = _ref.handleClickBackground,
2085
- handleClickPlay = _ref.handleClickPlay,
2086
- handleClickSave = _ref.handleClickSave;
2087
- _ref.handleClickThreeDot;
2088
- var handleClickUnsave = _ref.handleClickUnsave,
2089
- handleClickTitle = _ref.handleClickTitle,
2090
- isLinkTitle = _ref.isLinkTitle,
2091
- isLocked = _ref.isLocked,
2092
- fluid = _ref.fluid;
2093
- _ref.props;
2094
-
2095
- var _useState = useState(false),
2096
- _useState2 = _slicedToArray(_useState, 2);
2097
- _useState2[0];
2098
- var setOpenSave = _useState2[1];
2141
+ var BlurBackground = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\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"])));
2142
+ var GradientBackground = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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"])));
2143
+ var InteractionBox = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\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
2099
2144
 
2100
- var _usePalette = 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);
2101
- _usePalette.loading;
2102
- var data = _usePalette.data;
2103
- _usePalette.error;
2104
-
2105
- var theme = useContext(ThemeContext);
2106
- var size = useWindowSize();
2107
-
2108
- var _useState3 = useState(false),
2109
- _useState4 = _slicedToArray(_useState3, 2),
2110
- isBlerpHovered = _useState4[0],
2111
- setIsBlerpHovered = _useState4[1];
2145
+ var SaveBox = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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"])));
2146
+ var SaveBoxTop = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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) {
2147
+ return props.theme.colors.notBlackOverride;
2148
+ });
2149
+ var SaveBoxTopDarken = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n opacity: 1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 4px;\n"])));
2150
+ var SaveBoxShadowSquare = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 4px;\n ", ";\n"])), function (props) {
2151
+ 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" : "";
2152
+ });
2153
+ var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
2154
+ var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
2112
2155
 
2113
- var _useState5 = useState(false),
2114
- _useState6 = _slicedToArray(_useState5, 2),
2115
- actionButtonHovered = _useState6[0],
2116
- setActionButtonHovered = _useState6[1];
2156
+ var collection = _ref4.collection,
2157
+ variantSize = _ref4.variantSize,
2158
+ extraInfoComponent = _ref4.extraInfoComponent,
2159
+ primaryActionButton = _ref4.primaryActionButton,
2160
+ secondaryActionButton = _ref4.secondaryActionButton,
2161
+ handleClickBackground = _ref4.handleClickBackground,
2162
+ handleClickTitle = _ref4.handleClickTitle,
2163
+ isLinkTitle = _ref4.isLinkTitle,
2164
+ fluid = _ref4.fluid;
2117
2165
 
2118
- console.log(data);
2166
+ var _useState = useState(false),
2167
+ _useState2 = _slicedToArray(_useState, 2);
2168
+ _useState2[0];
2169
+ _useState2[1]; // Will use this exclusively for picking colors from image...no ColorExtractor
2119
2170
 
2120
- var handleClickLock = function handleClickLock(bite) {
2121
- console.log("route to purchase modal with id: ".concat(bite));
2122
- };
2123
2171
 
2124
- var handleClickPremium = function handleClickPremium(bite) {
2125
- console.log("route to purchase modal with id: ".concat(bite));
2126
- };
2172
+ var _usePalette = 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);
2173
+ _usePalette.loading;
2174
+ var data = _usePalette.data;
2175
+ _usePalette.error;
2127
2176
 
2177
+ var theme = useContext(ThemeContext);
2178
+ var size = useWindowSize();
2179
+ console.log("Collleeeeection", collection);
2128
2180
  var sizeParams;
2129
2181
  var smallSize = {
2130
- width: 300,
2182
+ width: "300px",
2131
2183
  height: 40,
2132
2184
  fontSize: "16px",
2133
- imageSize: "40px",
2185
+ saveBoxSize: "36px",
2134
2186
  reactionSpacing: 1,
2135
2187
  reactionPadding: "3px",
2136
2188
  reactionSize: "20px",
2137
2189
  buttonSize: "small"
2138
2190
  };
2139
2191
  var mediumSize = {
2140
- width: 375,
2192
+ width: "375px",
2141
2193
  height: 48,
2142
2194
  fontSize: "18px",
2143
- imageSize: "48px",
2195
+ saveBoxSize: "44px",
2144
2196
  reactionSpacing: 1,
2145
2197
  reactionPadding: "3px",
2146
2198
  reactionSize: "23px",
2147
2199
  buttonSize: "medium"
2148
2200
  };
2149
2201
  var largeSize = {
2150
- width: 440,
2202
+ width: "440px",
2151
2203
  height: 56,
2152
2204
  fontSize: "20px",
2153
- imageSize: "56px",
2205
+ saveBoxSize: "52px",
2154
2206
  reactionSpacing: 1,
2155
2207
  reactionPadding: "5px",
2156
2208
  reactionSize: "30px",
@@ -2163,7 +2215,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
2163
2215
  width: "100%",
2164
2216
  height: 48,
2165
2217
  fontSize: "18px",
2166
- imageSize: "48px",
2218
+ saveBoxSize: "44px",
2167
2219
  reactionSpacing: 1,
2168
2220
  reactionPadding: "3px",
2169
2221
  reactionSize: "23px",
@@ -2180,252 +2232,237 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
2180
2232
  if (variantSize === "small") {
2181
2233
  sizeParams = smallSize;
2182
2234
  } else if (variantSize === "medium") {
2235
+ console.log(variantSize);
2183
2236
  sizeParams = mediumSize;
2184
2237
  } else if (variantSize === "large") {
2185
2238
  sizeParams = largeSize;
2186
2239
  }
2187
2240
  }
2188
2241
 
2189
- return /*#__PURE__*/React__default.createElement(Box, {
2190
- onMouseEnter: function onMouseEnter(e) {
2191
- return setIsBlerpHovered(true);
2192
- },
2193
- onMouseLeave: function onMouseLeave(e) {
2194
- return setIsBlerpHovered(false);
2195
- },
2196
- sx: {
2197
- width: sizeParams.width,
2198
- position: "relative",
2199
- minWidth: fluid && "300px",
2200
- borderRadius: "8px",
2201
- border: "2px transparent",
2202
- backgroundImage: "white",
2203
- backgroundOrigin: "border-box",
2204
- backgroundClip: "content-box, border-box",
2205
- boxShadow: "2px 2px 4px 0px #999999a1;",
2206
- // overflow: "hidden",
2207
- "&:hover": {
2208
- transition: "0.3s",
2209
- bgcolor: "grey2.main"
2242
+ return (
2243
+ /*#__PURE__*/
2244
+ // 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.
2245
+
2246
+ /* BIG PICTURE OF COMPONENT:
2247
+ Master Container
2248
+ - TopBox (solid white background)
2249
+ - PhotoBackground (if collection has photo)
2250
+ - BlurBackground (always applied)
2251
+ - Gradient Background (default is photo color --> black, fall back is white --> black)
2252
+ - Interaction Box (holds clickable elements)
2253
+ - MidBox (first "shadow")
2254
+ - BackBox (second "shadow")
2255
+ */
2256
+ React__default.createElement(MasterContainer, {
2257
+ owned: collection === null || collection === void 0 ? void 0 : collection.owned,
2258
+ sizeParams: sizeParams,
2259
+ fluid: fluid
2260
+ }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default.createElement(YellowHoverBorder$1, {
2261
+ id: "yellow-border"
2262
+ }), /*#__PURE__*/React__default.createElement(TopBox, {
2263
+ onClick: function onClick(e) {
2264
+ e.stopPropagation();
2265
+ handleClickBackground();
2266
+ },
2267
+ style: {
2268
+ borderBottomColor: extraInfoComponent && theme.colors.grey3,
2269
+ width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
2210
2270
  }
2211
- }
2212
- }, /*#__PURE__*/React__default.createElement(Stack, {
2213
- sx: {
2214
- position: "absolute",
2215
- top: "0",
2216
- bottom: "0",
2217
- left: "0",
2218
- right: "0",
2219
- borderRadius: "8px",
2220
- background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
2221
- transition: "opacity .15s ease-in-out",
2222
- opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
2223
- }
2224
- }), /*#__PURE__*/React__default.createElement(Box, {
2225
- onClick: function onClick(e) {
2226
- e.stopPropagation();
2227
- handleClickBackground();
2228
- },
2229
- sx: {
2230
- width: "calc(100% - 4px)",
2231
- height: sizeParams.height,
2232
- display: "flex",
2233
- flexDirection: "row",
2271
+ }, /*#__PURE__*/React__default.createElement(PhotoBackground, {
2272
+ 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
2273
+ }), /*#__PURE__*/React__default.createElement(BlurBackground, null), /*#__PURE__*/React__default.createElement(GradientBackground, {
2274
+ style: {
2275
+ background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
2276
+ }
2277
+ }), /*#__PURE__*/React__default.createElement(InteractionBox, {
2278
+ style: {
2279
+ borderBottomColor: extraInfoComponent && theme.colors.grey3
2280
+ }
2281
+ }, /*#__PURE__*/React__default.createElement(Stack, {
2282
+ direction: "row",
2283
+ justifyContent: "flex-start",
2234
2284
  alignItems: "center",
2235
- justifyContent: "space-between",
2236
- borderRadius: "8px",
2237
- border: "2px solid transparent",
2238
- borderRightWidth: "0px",
2239
- borderLeftWidth: "0px",
2240
- margin: "0 auto",
2241
- borderBottomColor: extraInfoComponent && theme.colors.grey3,
2242
- transition: "0.3s",
2243
- position: "relative"
2244
- }
2245
- }, /*#__PURE__*/React__default.createElement(Stack, {
2246
- direction: "row",
2247
- width: "70%",
2248
- alignItems: "center",
2249
- sx: {
2250
- cursor: "pointer",
2251
- minWidth: "30%"
2252
- }
2253
- }, /*#__PURE__*/React__default.createElement(BlerpImage, {
2254
- style: {
2255
- width: sizeParams.imageSize,
2256
- height: sizeParams.imageSize
2257
- },
2258
- 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
2259
- }, /*#__PURE__*/React__default.createElement(BlerpImageScrim, {
2260
- style: {
2261
- width: sizeParams.imageSize,
2262
- height: sizeParams.imageSize
2263
- },
2264
- onClick: function onClick(e) {
2265
- if (handleClickPlay) {
2266
- e.stopPropagation();
2267
- handleClickPlay();
2285
+ sx: {
2286
+ position: "relative",
2287
+ width: "calc(100% - 180px)",
2288
+ left: "2px"
2268
2289
  }
2269
- }
2270
- }, playingState === "playing" ? /*#__PURE__*/React__default.createElement(PauseCircleOutlineRounded, {
2271
- sx: {
2272
- width: "30px",
2273
- height: "30px",
2274
- color: "white.override"
2275
- }
2276
- }) : /*#__PURE__*/React__default.createElement(PlayOutlineIcon, {
2277
- sx: {
2278
- width: "30px",
2279
- height: "30px",
2280
- color: "white.override"
2281
- }
2282
- }))), isLinkTitle ? /*#__PURE__*/React__default.createElement(Text, {
2283
- textAlign: "left",
2284
- fontSize: sizeParams.fontSize,
2285
- noWrap: true,
2286
- width: "80%",
2287
- marginLeft: "10px",
2288
- color: "white.override",
2289
- sx: {
2290
- ":hover": {
2291
- textDecoration: handleClickTitle ? "underline" : "none"
2290
+ }, /*#__PURE__*/React__default.createElement(SaveBox, {
2291
+ style: {
2292
+ width: sizeParams.saveBoxSize,
2293
+ height: sizeParams.saveBoxSize
2294
+ },
2295
+ onClick: function onClick(e) {
2296
+ console.log("handle save/unsave here");
2292
2297
  }
2293
- },
2294
- onClick: function onClick(e) {
2295
- if (handleClickTitle) {
2296
- e.stopPropagation();
2297
- handleClickTitle();
2298
+ }, /*#__PURE__*/React__default.createElement(SaveBoxTop, {
2299
+ style: {
2300
+ width: sizeParams.saveBoxSize,
2301
+ height: sizeParams.saveBoxSize,
2302
+ background: data.darkVibrant || "#999999"
2298
2303
  }
2299
- }
2300
- }, /*#__PURE__*/React__default.createElement("a", {
2301
- href: "/soundbites/".concat(bite._id),
2302
- style: {
2303
- textDecoration: "none",
2304
- color: "white"
2305
- }
2306
- }, bite.title)) : /*#__PURE__*/React__default.createElement(Text, {
2307
- textAlign: "left",
2308
- fontSize: sizeParams.fontSize,
2309
- noWrap: true,
2310
- width: "80%",
2311
- marginLeft: "10px",
2312
- color: "white.override",
2313
- sx: {
2314
- ":hover": {
2315
- textDecoration: handleClickTitle ? "underline" : "none"
2304
+ }, /*#__PURE__*/React__default.createElement(SaveBoxTopDarken, {
2305
+ style: {
2306
+ background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
2316
2307
  }
2317
- },
2318
- onClick: function onClick(e) {
2319
- if (handleClickTitle) {
2320
- e.stopPropagation();
2321
- handleClickTitle();
2308
+ }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default.createElement(BookmarkOutlinedIcon, {
2309
+ sx: {
2310
+ width: "30px",
2311
+ height: "30px",
2312
+ color: "white.override",
2313
+ position: "relative",
2314
+ bottom: "1px"
2322
2315
  }
2323
- }
2324
- }, bite.title)), /*#__PURE__*/React__default.createElement(Stack, {
2325
- direction: "row",
2326
- alignItems: "center"
2327
- }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default.createElement(SaveContainer, {
2328
- isLocked: isLocked,
2329
- isBlerpHovered: isBlerpHovered,
2330
- onClick: function onClick(e) {
2331
- e.stopPropagation();
2332
- handleClickLock();
2333
- },
2334
- onMouseEnter: function onMouseEnter() {
2335
- return setActionButtonHovered(true);
2336
- },
2337
- onMouseLeave: function onMouseLeave() {
2338
- return setActionButtonHovered(false);
2339
- }
2340
- }, /*#__PURE__*/React__default.createElement(Stack, {
2341
- sx: {
2342
- position: "relative",
2343
- top: "1px",
2344
- "& svg": {
2345
- color: "white.main"
2316
+ }) : /*#__PURE__*/React__default.createElement(BookmarkAddOutlinedIcon, {
2317
+ sx: {
2318
+ width: "30px",
2319
+ height: "30px",
2320
+ color: "white.override",
2321
+ position: "relative",
2322
+ bottom: "1px"
2346
2323
  }
2347
- }
2348
- }, /*#__PURE__*/React__default.createElement(Tooltip, {
2349
- title: "Unlock"
2350
- }, actionButtonHovered ? /*#__PURE__*/React__default.createElement(OpenLockIcon, {
2351
- sx: {
2352
- fontSize: "22px",
2353
- position: "relative",
2354
- bottom: "2px",
2355
- left: "0px"
2356
- }
2357
- }) : /*#__PURE__*/React__default.createElement(LockRoundedIcon, {
2358
- sx: {
2359
- fontSize: "16px",
2360
- position: "relative",
2361
- bottom: "1px"
2362
- }
2363
- })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), /*#__PURE__*/React__default.createElement(PremiumPill, {
2364
- isLocked: isLocked,
2365
- isBlerpHovered: isBlerpHovered,
2366
- onClick: function onClick(e) {
2367
- e.stopPropagation();
2368
- handleClickPremium();
2369
- }
2370
- }, /*#__PURE__*/React__default.createElement(DiamondIcon, {
2371
- sx: {
2372
- width: "16px",
2373
- marginRight: "4px",
2374
- color: "white.main"
2375
- }
2376
- }), /*#__PURE__*/React__default.createElement(Text, {
2377
- sx: {
2378
- marginRight: "4px",
2379
- color: "white.main",
2380
- fontSize: "12px"
2381
- }
2382
- }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default.createElement(IconButton, {
2383
- onClick: function onClick(e) {
2384
- e.stopPropagation();
2385
- handleClickUnsave();
2386
- setOpenSave(true);
2387
- },
2388
- sx: {
2389
- backgroundColor: "white.override",
2390
- color: "starling.main",
2391
- padding: "5px",
2392
- marginRight: "10px",
2393
- ":hover": {
2394
- backgroundColor: "seafoam.main"
2324
+ })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default.createElement(SaveBoxShadowSquare, {
2325
+ depth: "2",
2326
+ style: {
2327
+ background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
2328
+ }
2329
+ }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default.createElement(SaveBoxShadowSquare, {
2330
+ depth: "1",
2331
+ style: {
2332
+ background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
2333
+ }
2334
+ })), isLinkTitle ? /*#__PURE__*/React__default.createElement("a", {
2335
+ href: "/sound-collection/".concat(collection._id),
2336
+ style: {
2337
+ textDecoration: "none",
2338
+ width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
2339
+ position: "relative",
2340
+ left: "12px"
2341
+ }
2342
+ }, /*#__PURE__*/React__default.createElement(Text, {
2343
+ textAlign: "left",
2344
+ fontSize: sizeParams.fontSize,
2345
+ noWrap: true,
2346
+ color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
2347
+ sx: {
2348
+ ":hover": {
2349
+ textDecoration: handleClickTitle ? "underline" : "none"
2350
+ },
2351
+ "@media (max-width: 600px)": {
2352
+ maxWidth: "133px"
2353
+ }
2395
2354
  },
2396
- ":hover svg": {
2397
- color: "white.main"
2355
+ onClick: function onClick(e) {
2356
+ if (handleClickTitle) {
2357
+ e.stopPropagation();
2358
+ handleClickTitle();
2359
+ }
2398
2360
  }
2399
- }
2400
- }, /*#__PURE__*/React__default.createElement(BookmarkOutlinedIcon, {
2401
- sx: {
2402
- color: "starling.main"
2403
- }
2404
- })) : /*#__PURE__*/React__default.createElement(IconButton, {
2405
- onClick: function onClick(e) {
2406
- e.stopPropagation();
2407
- handleClickSave();
2408
- setOpenSave(true);
2409
- },
2410
- sx: {
2411
- backgroundColor: "white.override",
2412
- padding: "5px",
2413
- marginRight: "10px",
2414
- ":hover": {
2415
- backgroundColor: "seafoam.main"
2361
+ }, collection.title)) : /*#__PURE__*/React__default.createElement(Text, {
2362
+ textAlign: "left",
2363
+ fontSize: sizeParams.fontSize,
2364
+ noWrap: true,
2365
+ color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
2366
+ sx: {
2367
+ position: "relative",
2368
+ left: "12px",
2369
+ ":hover": {
2370
+ textDecoration: handleClickTitle ? "underline" : "none"
2371
+ },
2372
+ "@media (max-width: 600px)": {
2373
+ maxWidth: "133px"
2374
+ }
2416
2375
  },
2417
- ":hover svg": {
2418
- color: "white.main"
2376
+ onClick: function onClick(e) {
2377
+ console.log("handle non-linkTitle click here");
2419
2378
  }
2420
- }
2421
- }, /*#__PURE__*/React__default.createElement(BookmarkAddOutlinedIcon, {
2422
- sx: {
2423
- color: "starling.main"
2424
- }
2425
- })))), extraInfoComponent && extraInfoComponent);
2379
+ }, collection.title)), /*#__PURE__*/React__default.createElement(Stack, {
2380
+ direction: "row",
2381
+ justifyContent: "flex-end",
2382
+ alignItems: "center",
2383
+ sx: {
2384
+ height: "70%"
2385
+ }
2386
+ }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default.createElement(Stack, {
2387
+ direction: "row",
2388
+ justifyContent: "space-around",
2389
+ alignItems: "center",
2390
+ sx: {
2391
+ height: "100%",
2392
+ width: "102px",
2393
+ position: "relative"
2394
+ }
2395
+ }, /*#__PURE__*/React__default.createElement(Stack, {
2396
+ sx: {
2397
+ borderRadius: "20px",
2398
+ position: "absolute",
2399
+ top: "0",
2400
+ bottom: "0",
2401
+ left: "0",
2402
+ right: "0",
2403
+ backgroundColor: "notBlack.main",
2404
+ opacity: ".5"
2405
+ }
2406
+ }), /*#__PURE__*/React__default.createElement(DiamondIcon, {
2407
+ sx: {
2408
+ opacity: "1",
2409
+ zIndex: "2",
2410
+ color: "white.override",
2411
+ height: "18px"
2412
+ }
2413
+ }), /*#__PURE__*/React__default.createElement(Text, {
2414
+ sx: {
2415
+ zIndex: "2",
2416
+ color: "white.override",
2417
+ fontWeight: "lighter",
2418
+ fontSize: "14px",
2419
+ cursor: "default",
2420
+ position: "relative",
2421
+ right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
2422
+ }
2423
+ }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default.createElement(LockRoundedIcon, {
2424
+ sx: {
2425
+ zIndex: "2",
2426
+ color: "white.override",
2427
+ height: "14px"
2428
+ }
2429
+ })), secondaryActionButton || /*#__PURE__*/React__default.createElement(IconButton, {
2430
+ id: "second-button",
2431
+ onClick: function onClick(e) {
2432
+ console.log("handle secondary button click here");
2433
+ },
2434
+ sx: {
2435
+ padding: "5px",
2436
+ transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
2437
+ "&:hover": {
2438
+ backgroundColor: "grey6.main"
2439
+ }
2440
+ }
2441
+ }, /*#__PURE__*/React__default.createElement(Stack, {
2442
+ sx: {
2443
+ borderRadius: "20px",
2444
+ position: "absolute",
2445
+ top: "0",
2446
+ bottom: "0",
2447
+ left: "0",
2448
+ right: "0",
2449
+ backgroundColor: "notBlack.main",
2450
+ opacity: ".5"
2451
+ }
2452
+ }), /*#__PURE__*/React__default.createElement(KeyboardArrowRightRoundedIcon, {
2453
+ sx: {
2454
+ zIndex: "2",
2455
+ color: "white.override"
2456
+ }
2457
+ }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default.createElement(MidBox, {
2458
+ id: "mid-box"
2459
+ }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default.createElement(BackBox, {
2460
+ id: "back-box"
2461
+ }), extraInfoComponent && extraInfoComponent)
2462
+ );
2426
2463
  };
2427
- BlerpListViewPremium$1.propTypes = {
2428
- bite: PropTypes.object.isRequired,
2464
+ CollectionListViewPremium$1.propTypes = {
2465
+ collection: PropTypes.object.isRequired,
2429
2466
  collections: PropTypes.array.isRequired,
2430
2467
  variantSize: PropTypes.string.isRequired,
2431
2468
  userSignedIn: PropTypes.object.isRequired,
@@ -2435,8 +2472,6 @@ BlerpListViewPremium$1.propTypes = {
2435
2472
  getUserReactions: PropTypes.func.isRequired,
2436
2473
  createCollection: PropTypes.func.isRequired,
2437
2474
  handleClickBackground: PropTypes.func.isRequired,
2438
- handleClickPlay: PropTypes.func.isRequired,
2439
- handleClickThreeDot: PropTypes.func.isRequired,
2440
2475
  handleClickSave: PropTypes.func.isRequired,
2441
2476
  handleClickReaction: PropTypes.func.isRequired,
2442
2477
  handleClickUnsave: PropTypes.func.isRequired