@blerp/design 1.2.49 → 1.2.51
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.
- package/dist/index.cjs.js +79 -43
- package/dist/index.esm.js +76 -41
- package/dist/index.umd.js +80 -45
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -12,13 +12,15 @@ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiter
|
|
|
12
12
|
var iconsMaterial = require('@mui/icons-material');
|
|
13
13
|
var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
|
|
14
14
|
var LockRoundedIcon = require('@mui/icons-material/LockRounded');
|
|
15
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
15
16
|
var DoNotDisturbRoundedIcon = require('@mui/icons-material/DoNotDisturbRounded');
|
|
16
17
|
var FavoriteIcon = require('@mui/icons-material/Favorite');
|
|
17
18
|
var FavoriteBorderIcon = require('@mui/icons-material/FavoriteBorder');
|
|
18
19
|
var PauseRoundedIcon = require('@mui/icons-material/PauseRounded');
|
|
19
20
|
var PlayArrowRoundedIcon = require('@mui/icons-material/PlayArrowRounded');
|
|
20
21
|
var WarningRoundedIcon = require('@mui/icons-material/WarningRounded');
|
|
21
|
-
var
|
|
22
|
+
var VisibilityOffRoundedIcon = require('@mui/icons-material/VisibilityOffRounded');
|
|
23
|
+
var VisibilityRoundedIcon = require('@mui/icons-material/VisibilityRounded');
|
|
22
24
|
var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
|
|
23
25
|
var _regeneratorRuntime = require('@babel/runtime/regenerator');
|
|
24
26
|
var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
|
|
@@ -56,7 +58,6 @@ var ChevronRightRoundedIcon = require('@mui/icons-material/ChevronRightRounded')
|
|
|
56
58
|
var PersonRoundedIcon = require('@mui/icons-material/PersonRounded');
|
|
57
59
|
var SearchRoundedIcon = require('@mui/icons-material/SearchRounded');
|
|
58
60
|
var BookmarkRemoveOutlinedIcon = require('@mui/icons-material/BookmarkRemoveOutlined');
|
|
59
|
-
var VisibilityOffRoundedIcon = require('@mui/icons-material/VisibilityOffRounded');
|
|
60
61
|
|
|
61
62
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
62
63
|
|
|
@@ -88,13 +89,15 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
88
89
|
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
|
|
89
90
|
var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
|
|
90
91
|
var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
|
|
92
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
91
93
|
var DoNotDisturbRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DoNotDisturbRoundedIcon);
|
|
92
94
|
var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
|
|
93
95
|
var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBorderIcon);
|
|
94
96
|
var PauseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseRoundedIcon);
|
|
95
97
|
var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
|
|
96
98
|
var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
|
|
97
|
-
var
|
|
99
|
+
var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
|
|
100
|
+
var VisibilityRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityRoundedIcon);
|
|
98
101
|
var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
|
|
99
102
|
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
|
|
100
103
|
var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
|
|
@@ -128,7 +131,6 @@ var ChevronRightRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(Chevro
|
|
|
128
131
|
var PersonRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRoundedIcon);
|
|
129
132
|
var SearchRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchRoundedIcon);
|
|
130
133
|
var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
|
|
131
|
-
var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
|
|
132
134
|
|
|
133
135
|
var _templateObject$j, _templateObject2$b, _templateObject3$9, _templateObject4$7;
|
|
134
136
|
var BlerpImage$3 = styled__default['default'].div(_templateObject$j || (_templateObject$j = _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) {
|
|
@@ -1570,13 +1572,18 @@ Blerp$1.propTypes = {
|
|
|
1570
1572
|
};
|
|
1571
1573
|
|
|
1572
1574
|
var UserCard$1 = function UserCard(_ref) {
|
|
1573
|
-
var _user$twitchChannelIn, _user$twitchChannelIn2, _user$twitchChannelIn3, _user$twitchChannelIn4, _user$
|
|
1575
|
+
var _user$twitchChannelIn, _user$twitchChannelIn2, _user$twitchChannelIn3, _user$twitchChannelIn4, _user$twitchChannelIn5, _user$profileImage, _user$profileImage$or, _user$twitchChannelIn6;
|
|
1574
1576
|
|
|
1575
1577
|
var user = _ref.user,
|
|
1576
1578
|
onUsernameClick = _ref.onUsernameClick,
|
|
1577
1579
|
onFollowerClick = _ref.onFollowerClick,
|
|
1578
1580
|
onCreatedClick = _ref.onCreatedClick,
|
|
1579
1581
|
collapsed = _ref.collapsed;
|
|
1582
|
+
var formatter = Intl.NumberFormat("en", {
|
|
1583
|
+
notation: "compact"
|
|
1584
|
+
});
|
|
1585
|
+
var followerCount = formatter.format((user === null || user === void 0 ? void 0 : (_user$twitchChannelIn = user.twitchChannelInfo) === null || _user$twitchChannelIn === void 0 ? void 0 : _user$twitchChannelIn.followerCount) || 0);
|
|
1586
|
+
var createdCount = formatter.format((user === null || user === void 0 ? void 0 : user.totalCreationCount) || 0);
|
|
1580
1587
|
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1581
1588
|
direction: "row",
|
|
1582
1589
|
sx: {
|
|
@@ -1590,7 +1597,7 @@ var UserCard$1 = function UserCard(_ref) {
|
|
|
1590
1597
|
boxSizing: "border-box",
|
|
1591
1598
|
justifyContent: "space-around",
|
|
1592
1599
|
border: "1px solid transparent",
|
|
1593
|
-
borderColor: collapsed ? (user === null || user === void 0 ? void 0 : (_user$
|
|
1600
|
+
borderColor: collapsed ? (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn2 = user.twitchChannelInfo) === null || _user$twitchChannelIn2 === void 0 ? void 0 : _user$twitchChannelIn2.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn3 = user.twitchChannelInfo) === null || _user$twitchChannelIn3 === void 0 ? void 0 : _user$twitchChannelIn3.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent" : "transparent"
|
|
1594
1601
|
}
|
|
1595
1602
|
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1596
1603
|
sx: {
|
|
@@ -1602,13 +1609,13 @@ var UserCard$1 = function UserCard(_ref) {
|
|
|
1602
1609
|
height: collapsed ? "49px" : "89px",
|
|
1603
1610
|
borderRadius: "50%",
|
|
1604
1611
|
border: "2px solid transparent",
|
|
1605
|
-
borderColor: collapsed ? "transparent" : (user === null || user === void 0 ? void 0 : (_user$
|
|
1612
|
+
borderColor: collapsed ? "transparent" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn4 = user.twitchChannelInfo) === null || _user$twitchChannelIn4 === void 0 ? void 0 : _user$twitchChannelIn4.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn5 = user.twitchChannelInfo) === null || _user$twitchChannelIn5 === void 0 ? void 0 : _user$twitchChannelIn5.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent",
|
|
1606
1613
|
padding: collapsed ? "3px" : "6px",
|
|
1607
1614
|
boxSizing: "border-box"
|
|
1608
1615
|
},
|
|
1609
1616
|
src: (user === null || user === void 0 ? void 0 : (_user$profileImage = user.profileImage) === null || _user$profileImage === void 0 ? void 0 : (_user$profileImage$or = _user$profileImage.original) === null || _user$profileImage$or === void 0 ? void 0 : _user$profileImage$or.url) || "https://cdn.blerp.com/blerp_products/Icons/Account-White.svg",
|
|
1610
1617
|
alt: "profile"
|
|
1611
|
-
}), (user === null || user === void 0 ? void 0 : (_user$
|
|
1618
|
+
}), (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn6 = user.twitchChannelInfo) === null || _user$twitchChannelIn6 === void 0 ? void 0 : _user$twitchChannelIn6.broadcasterType) === "partner" && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.VerifiedRounded, {
|
|
1612
1619
|
sx: {
|
|
1613
1620
|
position: "absolute",
|
|
1614
1621
|
bottom: collapsed ? "0" : "5px",
|
|
@@ -1656,61 +1663,51 @@ var UserCard$1 = function UserCard(_ref) {
|
|
|
1656
1663
|
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1657
1664
|
alignItems: "center",
|
|
1658
1665
|
sx: {
|
|
1659
|
-
cursor: "
|
|
1660
|
-
transition: "0.3s",
|
|
1661
|
-
"&:hover": {
|
|
1662
|
-
textDecoration: "underline"
|
|
1663
|
-
}
|
|
1666
|
+
cursor: "pointer"
|
|
1664
1667
|
},
|
|
1665
1668
|
onClick: onFollowerClick
|
|
1666
1669
|
}, /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1667
1670
|
sx: {
|
|
1668
1671
|
fontSize: "14px",
|
|
1669
|
-
fontWeight: "400"
|
|
1670
|
-
cursor: "inherit"
|
|
1672
|
+
fontWeight: "400"
|
|
1671
1673
|
}
|
|
1672
|
-
},
|
|
1674
|
+
}, followerCount), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1673
1675
|
sx: {
|
|
1674
1676
|
fontSize: "12px",
|
|
1675
1677
|
fontWeight: "300",
|
|
1676
|
-
color: "grey7.main"
|
|
1677
|
-
cursor: "inherit"
|
|
1678
|
+
color: "grey7.main"
|
|
1678
1679
|
}
|
|
1679
1680
|
}, "followers")), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1680
1681
|
alignItems: "center",
|
|
1681
1682
|
sx: {
|
|
1682
|
-
cursor: "
|
|
1683
|
-
transition: "0.3s",
|
|
1684
|
-
"&:hover": {
|
|
1685
|
-
textDecoration: "underline"
|
|
1686
|
-
}
|
|
1683
|
+
cursor: "pointer"
|
|
1687
1684
|
},
|
|
1688
1685
|
onClick: onCreatedClick
|
|
1689
1686
|
}, /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1690
1687
|
sx: {
|
|
1691
1688
|
fontSize: "14px",
|
|
1692
|
-
fontWeight: "400"
|
|
1693
|
-
cursor: "inherit"
|
|
1689
|
+
fontWeight: "400"
|
|
1694
1690
|
}
|
|
1695
|
-
},
|
|
1691
|
+
}, createdCount), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1696
1692
|
sx: {
|
|
1697
1693
|
fontSize: "12px",
|
|
1698
1694
|
fontWeight: "300",
|
|
1699
|
-
color: "grey7.main"
|
|
1700
|
-
cursor: "inherit"
|
|
1695
|
+
color: "grey7.main"
|
|
1701
1696
|
}
|
|
1702
1697
|
}, "created")))));
|
|
1703
1698
|
};
|
|
1704
1699
|
|
|
1705
|
-
function ownKeys$
|
|
1700
|
+
function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
1706
1701
|
|
|
1707
|
-
function _objectSpread$
|
|
1702
|
+
function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
1708
1703
|
var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
|
|
1709
1704
|
var user = _ref.user,
|
|
1710
1705
|
onUsernameClick = _ref.onUsernameClick,
|
|
1711
1706
|
onFollowerClick = _ref.onFollowerClick,
|
|
1712
1707
|
onCreatedClick = _ref.onCreatedClick,
|
|
1713
|
-
textStyle = _ref.textStyle
|
|
1708
|
+
textStyle = _ref.textStyle,
|
|
1709
|
+
_ref$collapsed = _ref.collapsed,
|
|
1710
|
+
collapsed = _ref$collapsed === void 0 ? true : _ref$collapsed;
|
|
1714
1711
|
|
|
1715
1712
|
var _useState = React.useState(null),
|
|
1716
1713
|
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
@@ -1767,10 +1764,10 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
|
|
|
1767
1764
|
onUsernameClick: onUsernameClick,
|
|
1768
1765
|
onFollowerClick: onFollowerClick,
|
|
1769
1766
|
onCreatedClick: onCreatedClick,
|
|
1770
|
-
collapsed:
|
|
1767
|
+
collapsed: collapsed,
|
|
1771
1768
|
user: user
|
|
1772
1769
|
})), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1773
|
-
sx: _objectSpread$
|
|
1770
|
+
sx: _objectSpread$7({
|
|
1774
1771
|
fontWeight: "300",
|
|
1775
1772
|
fontSize: "12px",
|
|
1776
1773
|
color: "grey7.main",
|
|
@@ -1787,6 +1784,10 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
|
|
|
1787
1784
|
};
|
|
1788
1785
|
|
|
1789
1786
|
var _templateObject$g, _templateObject2$a, _templateObject3$8;
|
|
1787
|
+
|
|
1788
|
+
function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
1789
|
+
|
|
1790
|
+
function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
1790
1791
|
var PremiumContainer = styled__default['default'].div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n background: transparent;\n overflow: hidden;\n min-width: 210px;\n max-width: 260px;\n width: 100%;\n max-height: 322px;\n flex: 1;\n min-height: 272px;\n aspect-ratio: 260 / 322;\n gap: 10px;\n border-radius: 18px;\n box-sizing: border-box;\n padding: 2px;\n position: relative;\n transition: 0.3s;\n"])));
|
|
1791
1792
|
var Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n background-color: ", ";\n background: ", ";\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n position: relative;\n height: 100%;\n padding: 10px;\n border-radius: 17px;\n box-sizing: border-box;\n"])), function (props) {
|
|
1792
1793
|
return props.theme.colors.grey7;
|
|
@@ -1814,8 +1815,9 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
|
|
|
1814
1815
|
marginRight: "6px",
|
|
1815
1816
|
transition: "0.3s",
|
|
1816
1817
|
cursor: "pointer",
|
|
1818
|
+
opacity: 0.5,
|
|
1817
1819
|
"&:hover": {
|
|
1818
|
-
opacity:
|
|
1820
|
+
opacity: 1
|
|
1819
1821
|
}
|
|
1820
1822
|
}
|
|
1821
1823
|
}) : /*#__PURE__*/React__default['default'].createElement(FavoriteBorderIcon__default['default'], {
|
|
@@ -1824,8 +1826,9 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
|
|
|
1824
1826
|
marginRight: "6px",
|
|
1825
1827
|
transition: "0.3s",
|
|
1826
1828
|
cursor: "pointer",
|
|
1829
|
+
opacity: 0.5,
|
|
1827
1830
|
"&:hover": {
|
|
1828
|
-
opacity:
|
|
1831
|
+
opacity: 1
|
|
1829
1832
|
}
|
|
1830
1833
|
}
|
|
1831
1834
|
}), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
@@ -1908,6 +1911,16 @@ var RatingInfo = function RatingInfo(_ref4) {
|
|
|
1908
1911
|
tooltipText: "",
|
|
1909
1912
|
text: ""
|
|
1910
1913
|
};
|
|
1914
|
+
var visStyle = {
|
|
1915
|
+
fontSize: "23px",
|
|
1916
|
+
fontWeight: "600",
|
|
1917
|
+
backgroundColor: "#585858a3",
|
|
1918
|
+
border: "4px solid transparent",
|
|
1919
|
+
borderColor: "#585858a3",
|
|
1920
|
+
borderRadius: "4px",
|
|
1921
|
+
color: "whiteOverride.main",
|
|
1922
|
+
marginBottom: "12px"
|
|
1923
|
+
};
|
|
1911
1924
|
|
|
1912
1925
|
if (bite !== null && bite !== void 0 && bite.newAudienceRating) {
|
|
1913
1926
|
var _bite$newAudienceRati, _bite$newAudienceRati2;
|
|
@@ -1921,7 +1934,15 @@ var RatingInfo = function RatingInfo(_ref4) {
|
|
|
1921
1934
|
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1922
1935
|
direction: "row",
|
|
1923
1936
|
alignItems: "center"
|
|
1924
|
-
}, bite === null || bite === void 0 ? void 0 :
|
|
1937
|
+
}, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
|
|
1938
|
+
title: "Private"
|
|
1939
|
+
}, /*#__PURE__*/React__default['default'].createElement(VisibilityOffRoundedIcon__default['default'], {
|
|
1940
|
+
sx: _objectSpread$6({}, visStyle)
|
|
1941
|
+
})), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
|
|
1942
|
+
title: "Unlisted"
|
|
1943
|
+
}, /*#__PURE__*/React__default['default'].createElement(VisibilityRoundedIcon__default['default'], {
|
|
1944
|
+
sx: _objectSpread$6({}, visStyle)
|
|
1945
|
+
})), bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(function (rating) {
|
|
1925
1946
|
if (rating === "SAFE") {
|
|
1926
1947
|
// nothing
|
|
1927
1948
|
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
|
|
@@ -1965,10 +1986,21 @@ var RatingInfo = function RatingInfo(_ref4) {
|
|
|
1965
1986
|
}
|
|
1966
1987
|
|
|
1967
1988
|
if (!ratingText.tooltipText) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
|
|
1968
|
-
return /*#__PURE__*/React__default['default'].createElement(
|
|
1989
|
+
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1990
|
+
direction: "row",
|
|
1991
|
+
alignItems: "center"
|
|
1992
|
+
}, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
|
|
1993
|
+
title: "Private"
|
|
1994
|
+
}, /*#__PURE__*/React__default['default'].createElement(VisibilityOffRoundedIcon__default['default'], {
|
|
1995
|
+
sx: _objectSpread$6({}, visStyle)
|
|
1996
|
+
})), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
|
|
1997
|
+
title: "Unlisted"
|
|
1998
|
+
}, /*#__PURE__*/React__default['default'].createElement(VisibilityRoundedIcon__default['default'], {
|
|
1999
|
+
sx: _objectSpread$6({}, visStyle)
|
|
2000
|
+
})), /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
|
|
1969
2001
|
tooltipText: ratingText.tooltipText,
|
|
1970
2002
|
displayText: ratingText.text
|
|
1971
|
-
});
|
|
2003
|
+
}));
|
|
1972
2004
|
};
|
|
1973
2005
|
|
|
1974
2006
|
var ReportedWarning = function ReportedWarning(_ref5) {
|
|
@@ -2347,14 +2379,15 @@ var NewBlerp$1 = function NewBlerp(_ref7) {
|
|
|
2347
2379
|
display: "flex",
|
|
2348
2380
|
alignItems: "flex-end",
|
|
2349
2381
|
justifyContent: "center",
|
|
2350
|
-
background: "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
|
|
2382
|
+
background: bite !== null && bite !== void 0 && bite.isPremium ? "linear-gradient(270deg, rgb(49 62 65) 40%, rgba(0,0,0,0) 100%)" : "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
|
|
2351
2383
|
}
|
|
2352
2384
|
}, renderThreeDot())), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2353
2385
|
direction: "row",
|
|
2354
2386
|
alignItems: "center",
|
|
2355
2387
|
sx: {
|
|
2356
2388
|
width: "100%",
|
|
2357
|
-
justifyContent: "start"
|
|
2389
|
+
justifyContent: "start",
|
|
2390
|
+
postion: "relative"
|
|
2358
2391
|
}
|
|
2359
2392
|
}, (bite === null || bite === void 0 ? void 0 : bite.isPremium) && /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
|
|
2360
2393
|
sx: {
|
|
@@ -2421,14 +2454,17 @@ var NewBlerp$1 = function NewBlerp(_ref7) {
|
|
|
2421
2454
|
onClick: onFavoriteClick
|
|
2422
2455
|
}), /*#__PURE__*/React__default['default'].createElement(UsernameWithPopout$1, {
|
|
2423
2456
|
onUsernameClick: onUsernameClick,
|
|
2424
|
-
user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
|
|
2457
|
+
user: bite === null || bite === void 0 ? void 0 : bite.ownerObject,
|
|
2458
|
+
collapsed: false
|
|
2425
2459
|
}), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
2426
2460
|
sx: {
|
|
2427
2461
|
fontWeight: "300",
|
|
2428
2462
|
fontSize: "12px",
|
|
2429
|
-
color: "grey7.main"
|
|
2463
|
+
color: "grey7.main",
|
|
2464
|
+
position: "absolute",
|
|
2465
|
+
right: "12px"
|
|
2430
2466
|
}
|
|
2431
|
-
}, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))));
|
|
2467
|
+
}, (((bite === null || bite === void 0 ? void 0 : bite.audioDuration) || 1) / 1000).toFixed(0), "s")))));
|
|
2432
2468
|
};
|
|
2433
2469
|
|
|
2434
2470
|
var _templateObject$f;
|
package/dist/index.esm.js
CHANGED
|
@@ -9,13 +9,15 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral
|
|
|
9
9
|
import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, DiamondRounded, MusicNoteRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
|
|
10
10
|
import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
|
|
11
11
|
import LockRoundedIcon from '@mui/icons-material/LockRounded';
|
|
12
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
12
13
|
import DoNotDisturbRoundedIcon from '@mui/icons-material/DoNotDisturbRounded';
|
|
13
14
|
import FavoriteIcon from '@mui/icons-material/Favorite';
|
|
14
15
|
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
|
15
16
|
import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
|
|
16
17
|
import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
|
|
17
18
|
import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
|
|
18
|
-
import
|
|
19
|
+
import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
|
|
20
|
+
import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
|
|
19
21
|
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
|
|
20
22
|
import _regeneratorRuntime from '@babel/runtime/regenerator';
|
|
21
23
|
import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
|
|
@@ -53,7 +55,6 @@ import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
|
|
|
53
55
|
import PersonRoundedIcon from '@mui/icons-material/PersonRounded';
|
|
54
56
|
import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
|
|
55
57
|
import BookmarkRemoveOutlinedIcon from '@mui/icons-material/BookmarkRemoveOutlined';
|
|
56
|
-
import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
|
|
57
58
|
|
|
58
59
|
var _templateObject$j, _templateObject2$b, _templateObject3$9, _templateObject4$7;
|
|
59
60
|
var BlerpImage$3 = styled.div(_templateObject$j || (_templateObject$j = _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) {
|
|
@@ -1495,13 +1496,18 @@ Blerp$1.propTypes = {
|
|
|
1495
1496
|
};
|
|
1496
1497
|
|
|
1497
1498
|
var UserCard$1 = function UserCard(_ref) {
|
|
1498
|
-
var _user$twitchChannelIn, _user$twitchChannelIn2, _user$twitchChannelIn3, _user$twitchChannelIn4, _user$
|
|
1499
|
+
var _user$twitchChannelIn, _user$twitchChannelIn2, _user$twitchChannelIn3, _user$twitchChannelIn4, _user$twitchChannelIn5, _user$profileImage, _user$profileImage$or, _user$twitchChannelIn6;
|
|
1499
1500
|
|
|
1500
1501
|
var user = _ref.user,
|
|
1501
1502
|
onUsernameClick = _ref.onUsernameClick,
|
|
1502
1503
|
onFollowerClick = _ref.onFollowerClick,
|
|
1503
1504
|
onCreatedClick = _ref.onCreatedClick,
|
|
1504
1505
|
collapsed = _ref.collapsed;
|
|
1506
|
+
var formatter = Intl.NumberFormat("en", {
|
|
1507
|
+
notation: "compact"
|
|
1508
|
+
});
|
|
1509
|
+
var followerCount = formatter.format((user === null || user === void 0 ? void 0 : (_user$twitchChannelIn = user.twitchChannelInfo) === null || _user$twitchChannelIn === void 0 ? void 0 : _user$twitchChannelIn.followerCount) || 0);
|
|
1510
|
+
var createdCount = formatter.format((user === null || user === void 0 ? void 0 : user.totalCreationCount) || 0);
|
|
1505
1511
|
return /*#__PURE__*/React__default.createElement(Stack, {
|
|
1506
1512
|
direction: "row",
|
|
1507
1513
|
sx: {
|
|
@@ -1515,7 +1521,7 @@ var UserCard$1 = function UserCard(_ref) {
|
|
|
1515
1521
|
boxSizing: "border-box",
|
|
1516
1522
|
justifyContent: "space-around",
|
|
1517
1523
|
border: "1px solid transparent",
|
|
1518
|
-
borderColor: collapsed ? (user === null || user === void 0 ? void 0 : (_user$
|
|
1524
|
+
borderColor: collapsed ? (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn2 = user.twitchChannelInfo) === null || _user$twitchChannelIn2 === void 0 ? void 0 : _user$twitchChannelIn2.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn3 = user.twitchChannelInfo) === null || _user$twitchChannelIn3 === void 0 ? void 0 : _user$twitchChannelIn3.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent" : "transparent"
|
|
1519
1525
|
}
|
|
1520
1526
|
}, /*#__PURE__*/React__default.createElement(Stack, {
|
|
1521
1527
|
sx: {
|
|
@@ -1527,13 +1533,13 @@ var UserCard$1 = function UserCard(_ref) {
|
|
|
1527
1533
|
height: collapsed ? "49px" : "89px",
|
|
1528
1534
|
borderRadius: "50%",
|
|
1529
1535
|
border: "2px solid transparent",
|
|
1530
|
-
borderColor: collapsed ? "transparent" : (user === null || user === void 0 ? void 0 : (_user$
|
|
1536
|
+
borderColor: collapsed ? "transparent" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn4 = user.twitchChannelInfo) === null || _user$twitchChannelIn4 === void 0 ? void 0 : _user$twitchChannelIn4.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn5 = user.twitchChannelInfo) === null || _user$twitchChannelIn5 === void 0 ? void 0 : _user$twitchChannelIn5.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent",
|
|
1531
1537
|
padding: collapsed ? "3px" : "6px",
|
|
1532
1538
|
boxSizing: "border-box"
|
|
1533
1539
|
},
|
|
1534
1540
|
src: (user === null || user === void 0 ? void 0 : (_user$profileImage = user.profileImage) === null || _user$profileImage === void 0 ? void 0 : (_user$profileImage$or = _user$profileImage.original) === null || _user$profileImage$or === void 0 ? void 0 : _user$profileImage$or.url) || "https://cdn.blerp.com/blerp_products/Icons/Account-White.svg",
|
|
1535
1541
|
alt: "profile"
|
|
1536
|
-
}), (user === null || user === void 0 ? void 0 : (_user$
|
|
1542
|
+
}), (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn6 = user.twitchChannelInfo) === null || _user$twitchChannelIn6 === void 0 ? void 0 : _user$twitchChannelIn6.broadcasterType) === "partner" && /*#__PURE__*/React__default.createElement(VerifiedRounded, {
|
|
1537
1543
|
sx: {
|
|
1538
1544
|
position: "absolute",
|
|
1539
1545
|
bottom: collapsed ? "0" : "5px",
|
|
@@ -1581,61 +1587,51 @@ var UserCard$1 = function UserCard(_ref) {
|
|
|
1581
1587
|
}, /*#__PURE__*/React__default.createElement(Stack, {
|
|
1582
1588
|
alignItems: "center",
|
|
1583
1589
|
sx: {
|
|
1584
|
-
cursor: "
|
|
1585
|
-
transition: "0.3s",
|
|
1586
|
-
"&:hover": {
|
|
1587
|
-
textDecoration: "underline"
|
|
1588
|
-
}
|
|
1590
|
+
cursor: "pointer"
|
|
1589
1591
|
},
|
|
1590
1592
|
onClick: onFollowerClick
|
|
1591
1593
|
}, /*#__PURE__*/React__default.createElement(Text, {
|
|
1592
1594
|
sx: {
|
|
1593
1595
|
fontSize: "14px",
|
|
1594
|
-
fontWeight: "400"
|
|
1595
|
-
cursor: "inherit"
|
|
1596
|
+
fontWeight: "400"
|
|
1596
1597
|
}
|
|
1597
|
-
},
|
|
1598
|
+
}, followerCount), /*#__PURE__*/React__default.createElement(Text, {
|
|
1598
1599
|
sx: {
|
|
1599
1600
|
fontSize: "12px",
|
|
1600
1601
|
fontWeight: "300",
|
|
1601
|
-
color: "grey7.main"
|
|
1602
|
-
cursor: "inherit"
|
|
1602
|
+
color: "grey7.main"
|
|
1603
1603
|
}
|
|
1604
1604
|
}, "followers")), /*#__PURE__*/React__default.createElement(Stack, {
|
|
1605
1605
|
alignItems: "center",
|
|
1606
1606
|
sx: {
|
|
1607
|
-
cursor: "
|
|
1608
|
-
transition: "0.3s",
|
|
1609
|
-
"&:hover": {
|
|
1610
|
-
textDecoration: "underline"
|
|
1611
|
-
}
|
|
1607
|
+
cursor: "pointer"
|
|
1612
1608
|
},
|
|
1613
1609
|
onClick: onCreatedClick
|
|
1614
1610
|
}, /*#__PURE__*/React__default.createElement(Text, {
|
|
1615
1611
|
sx: {
|
|
1616
1612
|
fontSize: "14px",
|
|
1617
|
-
fontWeight: "400"
|
|
1618
|
-
cursor: "inherit"
|
|
1613
|
+
fontWeight: "400"
|
|
1619
1614
|
}
|
|
1620
|
-
},
|
|
1615
|
+
}, createdCount), /*#__PURE__*/React__default.createElement(Text, {
|
|
1621
1616
|
sx: {
|
|
1622
1617
|
fontSize: "12px",
|
|
1623
1618
|
fontWeight: "300",
|
|
1624
|
-
color: "grey7.main"
|
|
1625
|
-
cursor: "inherit"
|
|
1619
|
+
color: "grey7.main"
|
|
1626
1620
|
}
|
|
1627
1621
|
}, "created")))));
|
|
1628
1622
|
};
|
|
1629
1623
|
|
|
1630
|
-
function ownKeys$
|
|
1624
|
+
function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
1631
1625
|
|
|
1632
|
-
function _objectSpread$
|
|
1626
|
+
function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
1633
1627
|
var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
|
|
1634
1628
|
var user = _ref.user,
|
|
1635
1629
|
onUsernameClick = _ref.onUsernameClick,
|
|
1636
1630
|
onFollowerClick = _ref.onFollowerClick,
|
|
1637
1631
|
onCreatedClick = _ref.onCreatedClick,
|
|
1638
|
-
textStyle = _ref.textStyle
|
|
1632
|
+
textStyle = _ref.textStyle,
|
|
1633
|
+
_ref$collapsed = _ref.collapsed,
|
|
1634
|
+
collapsed = _ref$collapsed === void 0 ? true : _ref$collapsed;
|
|
1639
1635
|
|
|
1640
1636
|
var _useState = useState(null),
|
|
1641
1637
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -1692,10 +1688,10 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
|
|
|
1692
1688
|
onUsernameClick: onUsernameClick,
|
|
1693
1689
|
onFollowerClick: onFollowerClick,
|
|
1694
1690
|
onCreatedClick: onCreatedClick,
|
|
1695
|
-
collapsed:
|
|
1691
|
+
collapsed: collapsed,
|
|
1696
1692
|
user: user
|
|
1697
1693
|
})), /*#__PURE__*/React__default.createElement(Text, {
|
|
1698
|
-
sx: _objectSpread$
|
|
1694
|
+
sx: _objectSpread$7({
|
|
1699
1695
|
fontWeight: "300",
|
|
1700
1696
|
fontSize: "12px",
|
|
1701
1697
|
color: "grey7.main",
|
|
@@ -1712,6 +1708,10 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
|
|
|
1712
1708
|
};
|
|
1713
1709
|
|
|
1714
1710
|
var _templateObject$g, _templateObject2$a, _templateObject3$8;
|
|
1711
|
+
|
|
1712
|
+
function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
1713
|
+
|
|
1714
|
+
function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
1715
1715
|
var PremiumContainer = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n background: transparent;\n overflow: hidden;\n min-width: 210px;\n max-width: 260px;\n width: 100%;\n max-height: 322px;\n flex: 1;\n min-height: 272px;\n aspect-ratio: 260 / 322;\n gap: 10px;\n border-radius: 18px;\n box-sizing: border-box;\n padding: 2px;\n position: relative;\n transition: 0.3s;\n"])));
|
|
1716
1716
|
var Container$1 = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n background-color: ", ";\n background: ", ";\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n position: relative;\n height: 100%;\n padding: 10px;\n border-radius: 17px;\n box-sizing: border-box;\n"])), function (props) {
|
|
1717
1717
|
return props.theme.colors.grey7;
|
|
@@ -1739,8 +1739,9 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
|
|
|
1739
1739
|
marginRight: "6px",
|
|
1740
1740
|
transition: "0.3s",
|
|
1741
1741
|
cursor: "pointer",
|
|
1742
|
+
opacity: 0.5,
|
|
1742
1743
|
"&:hover": {
|
|
1743
|
-
opacity:
|
|
1744
|
+
opacity: 1
|
|
1744
1745
|
}
|
|
1745
1746
|
}
|
|
1746
1747
|
}) : /*#__PURE__*/React__default.createElement(FavoriteBorderIcon, {
|
|
@@ -1749,8 +1750,9 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
|
|
|
1749
1750
|
marginRight: "6px",
|
|
1750
1751
|
transition: "0.3s",
|
|
1751
1752
|
cursor: "pointer",
|
|
1753
|
+
opacity: 0.5,
|
|
1752
1754
|
"&:hover": {
|
|
1753
|
-
opacity:
|
|
1755
|
+
opacity: 1
|
|
1754
1756
|
}
|
|
1755
1757
|
}
|
|
1756
1758
|
}), /*#__PURE__*/React__default.createElement(Text, {
|
|
@@ -1833,6 +1835,16 @@ var RatingInfo = function RatingInfo(_ref4) {
|
|
|
1833
1835
|
tooltipText: "",
|
|
1834
1836
|
text: ""
|
|
1835
1837
|
};
|
|
1838
|
+
var visStyle = {
|
|
1839
|
+
fontSize: "23px",
|
|
1840
|
+
fontWeight: "600",
|
|
1841
|
+
backgroundColor: "#585858a3",
|
|
1842
|
+
border: "4px solid transparent",
|
|
1843
|
+
borderColor: "#585858a3",
|
|
1844
|
+
borderRadius: "4px",
|
|
1845
|
+
color: "whiteOverride.main",
|
|
1846
|
+
marginBottom: "12px"
|
|
1847
|
+
};
|
|
1836
1848
|
|
|
1837
1849
|
if (bite !== null && bite !== void 0 && bite.newAudienceRating) {
|
|
1838
1850
|
var _bite$newAudienceRati, _bite$newAudienceRati2;
|
|
@@ -1846,7 +1858,15 @@ var RatingInfo = function RatingInfo(_ref4) {
|
|
|
1846
1858
|
return /*#__PURE__*/React__default.createElement(Stack, {
|
|
1847
1859
|
direction: "row",
|
|
1848
1860
|
alignItems: "center"
|
|
1849
|
-
}, bite === null || bite === void 0 ? void 0 :
|
|
1861
|
+
}, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default.createElement(Tooltip, {
|
|
1862
|
+
title: "Private"
|
|
1863
|
+
}, /*#__PURE__*/React__default.createElement(VisibilityOffRoundedIcon, {
|
|
1864
|
+
sx: _objectSpread$6({}, visStyle)
|
|
1865
|
+
})), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default.createElement(Tooltip, {
|
|
1866
|
+
title: "Unlisted"
|
|
1867
|
+
}, /*#__PURE__*/React__default.createElement(VisibilityRoundedIcon, {
|
|
1868
|
+
sx: _objectSpread$6({}, visStyle)
|
|
1869
|
+
})), bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(function (rating) {
|
|
1850
1870
|
if (rating === "SAFE") {
|
|
1851
1871
|
// nothing
|
|
1852
1872
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
|
|
@@ -1890,10 +1910,21 @@ var RatingInfo = function RatingInfo(_ref4) {
|
|
|
1890
1910
|
}
|
|
1891
1911
|
|
|
1892
1912
|
if (!ratingText.tooltipText) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
|
|
1893
|
-
return /*#__PURE__*/React__default.createElement(
|
|
1913
|
+
return /*#__PURE__*/React__default.createElement(Stack, {
|
|
1914
|
+
direction: "row",
|
|
1915
|
+
alignItems: "center"
|
|
1916
|
+
}, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default.createElement(Tooltip, {
|
|
1917
|
+
title: "Private"
|
|
1918
|
+
}, /*#__PURE__*/React__default.createElement(VisibilityOffRoundedIcon, {
|
|
1919
|
+
sx: _objectSpread$6({}, visStyle)
|
|
1920
|
+
})), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default.createElement(Tooltip, {
|
|
1921
|
+
title: "Unlisted"
|
|
1922
|
+
}, /*#__PURE__*/React__default.createElement(VisibilityRoundedIcon, {
|
|
1923
|
+
sx: _objectSpread$6({}, visStyle)
|
|
1924
|
+
})), /*#__PURE__*/React__default.createElement(RatingInfoItem, {
|
|
1894
1925
|
tooltipText: ratingText.tooltipText,
|
|
1895
1926
|
displayText: ratingText.text
|
|
1896
|
-
});
|
|
1927
|
+
}));
|
|
1897
1928
|
};
|
|
1898
1929
|
|
|
1899
1930
|
var ReportedWarning = function ReportedWarning(_ref5) {
|
|
@@ -2272,14 +2303,15 @@ var NewBlerp$1 = function NewBlerp(_ref7) {
|
|
|
2272
2303
|
display: "flex",
|
|
2273
2304
|
alignItems: "flex-end",
|
|
2274
2305
|
justifyContent: "center",
|
|
2275
|
-
background: "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
|
|
2306
|
+
background: bite !== null && bite !== void 0 && bite.isPremium ? "linear-gradient(270deg, rgb(49 62 65) 40%, rgba(0,0,0,0) 100%)" : "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
|
|
2276
2307
|
}
|
|
2277
2308
|
}, renderThreeDot())), /*#__PURE__*/React__default.createElement(Stack, {
|
|
2278
2309
|
direction: "row",
|
|
2279
2310
|
alignItems: "center",
|
|
2280
2311
|
sx: {
|
|
2281
2312
|
width: "100%",
|
|
2282
|
-
justifyContent: "start"
|
|
2313
|
+
justifyContent: "start",
|
|
2314
|
+
postion: "relative"
|
|
2283
2315
|
}
|
|
2284
2316
|
}, (bite === null || bite === void 0 ? void 0 : bite.isPremium) && /*#__PURE__*/React__default.createElement(DiamondIcon, {
|
|
2285
2317
|
sx: {
|
|
@@ -2346,14 +2378,17 @@ var NewBlerp$1 = function NewBlerp(_ref7) {
|
|
|
2346
2378
|
onClick: onFavoriteClick
|
|
2347
2379
|
}), /*#__PURE__*/React__default.createElement(UsernameWithPopout$1, {
|
|
2348
2380
|
onUsernameClick: onUsernameClick,
|
|
2349
|
-
user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
|
|
2381
|
+
user: bite === null || bite === void 0 ? void 0 : bite.ownerObject,
|
|
2382
|
+
collapsed: false
|
|
2350
2383
|
}), /*#__PURE__*/React__default.createElement(Text, {
|
|
2351
2384
|
sx: {
|
|
2352
2385
|
fontWeight: "300",
|
|
2353
2386
|
fontSize: "12px",
|
|
2354
|
-
color: "grey7.main"
|
|
2387
|
+
color: "grey7.main",
|
|
2388
|
+
position: "absolute",
|
|
2389
|
+
right: "12px"
|
|
2355
2390
|
}
|
|
2356
|
-
}, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))));
|
|
2391
|
+
}, (((bite === null || bite === void 0 ? void 0 : bite.audioDuration) || 1) / 1000).toFixed(0), "s")))));
|
|
2357
2392
|
};
|
|
2358
2393
|
|
|
2359
2394
|
var _templateObject$f;
|
package/dist/index.umd.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/DoNotDisturbRounded'), require('@mui/icons-material/Favorite'), require('@mui/icons-material/FavoriteBorder'), require('@mui/icons-material/PauseRounded'), require('@mui/icons-material/PlayArrowRounded'), require('@mui/icons-material/WarningRounded'), require('@
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/DoNotDisturbRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.DoNotDisturbRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, global.
|
|
5
|
-
}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, DoNotDisturbRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/DoNotDisturbRounded'), require('@mui/icons-material/Favorite'), require('@mui/icons-material/FavoriteBorder'), require('@mui/icons-material/PauseRounded'), require('@mui/icons-material/PlayArrowRounded'), require('@mui/icons-material/WarningRounded'), require('@mui/icons-material/VisibilityOffRounded'), require('@mui/icons-material/VisibilityRounded'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), require('react-lottie'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/DoNotDisturbRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@mui/icons-material/VisibilityOffRounded', '@mui/icons-material/VisibilityRounded', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', 'react-lottie', '@mui/icons-material/AddRounded', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global._defineProperty, global.DoNotDisturbRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, global.VisibilityOffRoundedIcon, global.VisibilityRoundedIcon, global._asyncToGenerator, global._regeneratorRuntime, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon));
|
|
5
|
+
}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, _defineProperty, DoNotDisturbRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, VisibilityOffRoundedIcon, VisibilityRoundedIcon, _asyncToGenerator, _regeneratorRuntime, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
@@ -34,13 +34,15 @@
|
|
|
34
34
|
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
|
|
35
35
|
var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
|
|
36
36
|
var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
|
|
37
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
37
38
|
var DoNotDisturbRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DoNotDisturbRoundedIcon);
|
|
38
39
|
var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
|
|
39
40
|
var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBorderIcon);
|
|
40
41
|
var PauseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseRoundedIcon);
|
|
41
42
|
var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
|
|
42
43
|
var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
|
|
43
|
-
var
|
|
44
|
+
var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
|
|
45
|
+
var VisibilityRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityRoundedIcon);
|
|
44
46
|
var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
|
|
45
47
|
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
|
|
46
48
|
var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
|
|
@@ -74,7 +76,6 @@
|
|
|
74
76
|
var PersonRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRoundedIcon);
|
|
75
77
|
var SearchRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchRoundedIcon);
|
|
76
78
|
var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
|
|
77
|
-
var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
|
|
78
79
|
|
|
79
80
|
var _templateObject$j, _templateObject2$b, _templateObject3$9, _templateObject4$7;
|
|
80
81
|
var BlerpImage$3 = styled__default['default'].div(_templateObject$j || (_templateObject$j = _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) {
|
|
@@ -1516,13 +1517,18 @@
|
|
|
1516
1517
|
};
|
|
1517
1518
|
|
|
1518
1519
|
var UserCard$1 = function UserCard(_ref) {
|
|
1519
|
-
var _user$twitchChannelIn, _user$twitchChannelIn2, _user$twitchChannelIn3, _user$twitchChannelIn4, _user$
|
|
1520
|
+
var _user$twitchChannelIn, _user$twitchChannelIn2, _user$twitchChannelIn3, _user$twitchChannelIn4, _user$twitchChannelIn5, _user$profileImage, _user$profileImage$or, _user$twitchChannelIn6;
|
|
1520
1521
|
|
|
1521
1522
|
var user = _ref.user,
|
|
1522
1523
|
onUsernameClick = _ref.onUsernameClick,
|
|
1523
1524
|
onFollowerClick = _ref.onFollowerClick,
|
|
1524
1525
|
onCreatedClick = _ref.onCreatedClick,
|
|
1525
1526
|
collapsed = _ref.collapsed;
|
|
1527
|
+
var formatter = Intl.NumberFormat("en", {
|
|
1528
|
+
notation: "compact"
|
|
1529
|
+
});
|
|
1530
|
+
var followerCount = formatter.format((user === null || user === void 0 ? void 0 : (_user$twitchChannelIn = user.twitchChannelInfo) === null || _user$twitchChannelIn === void 0 ? void 0 : _user$twitchChannelIn.followerCount) || 0);
|
|
1531
|
+
var createdCount = formatter.format((user === null || user === void 0 ? void 0 : user.totalCreationCount) || 0);
|
|
1526
1532
|
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1527
1533
|
direction: "row",
|
|
1528
1534
|
sx: {
|
|
@@ -1536,7 +1542,7 @@
|
|
|
1536
1542
|
boxSizing: "border-box",
|
|
1537
1543
|
justifyContent: "space-around",
|
|
1538
1544
|
border: "1px solid transparent",
|
|
1539
|
-
borderColor: collapsed ? (user === null || user === void 0 ? void 0 : (_user$
|
|
1545
|
+
borderColor: collapsed ? (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn2 = user.twitchChannelInfo) === null || _user$twitchChannelIn2 === void 0 ? void 0 : _user$twitchChannelIn2.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn3 = user.twitchChannelInfo) === null || _user$twitchChannelIn3 === void 0 ? void 0 : _user$twitchChannelIn3.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent" : "transparent"
|
|
1540
1546
|
}
|
|
1541
1547
|
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1542
1548
|
sx: {
|
|
@@ -1548,13 +1554,13 @@
|
|
|
1548
1554
|
height: collapsed ? "49px" : "89px",
|
|
1549
1555
|
borderRadius: "50%",
|
|
1550
1556
|
border: "2px solid transparent",
|
|
1551
|
-
borderColor: collapsed ? "transparent" : (user === null || user === void 0 ? void 0 : (_user$
|
|
1557
|
+
borderColor: collapsed ? "transparent" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn4 = user.twitchChannelInfo) === null || _user$twitchChannelIn4 === void 0 ? void 0 : _user$twitchChannelIn4.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn5 = user.twitchChannelInfo) === null || _user$twitchChannelIn5 === void 0 ? void 0 : _user$twitchChannelIn5.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent",
|
|
1552
1558
|
padding: collapsed ? "3px" : "6px",
|
|
1553
1559
|
boxSizing: "border-box"
|
|
1554
1560
|
},
|
|
1555
1561
|
src: (user === null || user === void 0 ? void 0 : (_user$profileImage = user.profileImage) === null || _user$profileImage === void 0 ? void 0 : (_user$profileImage$or = _user$profileImage.original) === null || _user$profileImage$or === void 0 ? void 0 : _user$profileImage$or.url) || "https://cdn.blerp.com/blerp_products/Icons/Account-White.svg",
|
|
1556
1562
|
alt: "profile"
|
|
1557
|
-
}), (user === null || user === void 0 ? void 0 : (_user$
|
|
1563
|
+
}), (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn6 = user.twitchChannelInfo) === null || _user$twitchChannelIn6 === void 0 ? void 0 : _user$twitchChannelIn6.broadcasterType) === "partner" && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.VerifiedRounded, {
|
|
1558
1564
|
sx: {
|
|
1559
1565
|
position: "absolute",
|
|
1560
1566
|
bottom: collapsed ? "0" : "5px",
|
|
@@ -1602,61 +1608,51 @@
|
|
|
1602
1608
|
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1603
1609
|
alignItems: "center",
|
|
1604
1610
|
sx: {
|
|
1605
|
-
cursor: "
|
|
1606
|
-
transition: "0.3s",
|
|
1607
|
-
"&:hover": {
|
|
1608
|
-
textDecoration: "underline"
|
|
1609
|
-
}
|
|
1611
|
+
cursor: "pointer"
|
|
1610
1612
|
},
|
|
1611
1613
|
onClick: onFollowerClick
|
|
1612
1614
|
}, /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1613
1615
|
sx: {
|
|
1614
1616
|
fontSize: "14px",
|
|
1615
|
-
fontWeight: "400"
|
|
1616
|
-
cursor: "inherit"
|
|
1617
|
+
fontWeight: "400"
|
|
1617
1618
|
}
|
|
1618
|
-
},
|
|
1619
|
+
}, followerCount), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1619
1620
|
sx: {
|
|
1620
1621
|
fontSize: "12px",
|
|
1621
1622
|
fontWeight: "300",
|
|
1622
|
-
color: "grey7.main"
|
|
1623
|
-
cursor: "inherit"
|
|
1623
|
+
color: "grey7.main"
|
|
1624
1624
|
}
|
|
1625
1625
|
}, "followers")), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1626
1626
|
alignItems: "center",
|
|
1627
1627
|
sx: {
|
|
1628
|
-
cursor: "
|
|
1629
|
-
transition: "0.3s",
|
|
1630
|
-
"&:hover": {
|
|
1631
|
-
textDecoration: "underline"
|
|
1632
|
-
}
|
|
1628
|
+
cursor: "pointer"
|
|
1633
1629
|
},
|
|
1634
1630
|
onClick: onCreatedClick
|
|
1635
1631
|
}, /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1636
1632
|
sx: {
|
|
1637
1633
|
fontSize: "14px",
|
|
1638
|
-
fontWeight: "400"
|
|
1639
|
-
cursor: "inherit"
|
|
1634
|
+
fontWeight: "400"
|
|
1640
1635
|
}
|
|
1641
|
-
},
|
|
1636
|
+
}, createdCount), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1642
1637
|
sx: {
|
|
1643
1638
|
fontSize: "12px",
|
|
1644
1639
|
fontWeight: "300",
|
|
1645
|
-
color: "grey7.main"
|
|
1646
|
-
cursor: "inherit"
|
|
1640
|
+
color: "grey7.main"
|
|
1647
1641
|
}
|
|
1648
1642
|
}, "created")))));
|
|
1649
1643
|
};
|
|
1650
1644
|
|
|
1651
|
-
function ownKeys$
|
|
1645
|
+
function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
1652
1646
|
|
|
1653
|
-
function _objectSpread$
|
|
1647
|
+
function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
1654
1648
|
var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
|
|
1655
1649
|
var user = _ref.user,
|
|
1656
1650
|
onUsernameClick = _ref.onUsernameClick,
|
|
1657
1651
|
onFollowerClick = _ref.onFollowerClick,
|
|
1658
1652
|
onCreatedClick = _ref.onCreatedClick,
|
|
1659
|
-
textStyle = _ref.textStyle
|
|
1653
|
+
textStyle = _ref.textStyle,
|
|
1654
|
+
_ref$collapsed = _ref.collapsed,
|
|
1655
|
+
collapsed = _ref$collapsed === void 0 ? true : _ref$collapsed;
|
|
1660
1656
|
|
|
1661
1657
|
var _useState = React.useState(null),
|
|
1662
1658
|
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
@@ -1713,10 +1709,10 @@
|
|
|
1713
1709
|
onUsernameClick: onUsernameClick,
|
|
1714
1710
|
onFollowerClick: onFollowerClick,
|
|
1715
1711
|
onCreatedClick: onCreatedClick,
|
|
1716
|
-
collapsed:
|
|
1712
|
+
collapsed: collapsed,
|
|
1717
1713
|
user: user
|
|
1718
1714
|
})), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1719
|
-
sx: _objectSpread$
|
|
1715
|
+
sx: _objectSpread$7({
|
|
1720
1716
|
fontWeight: "300",
|
|
1721
1717
|
fontSize: "12px",
|
|
1722
1718
|
color: "grey7.main",
|
|
@@ -1733,6 +1729,10 @@
|
|
|
1733
1729
|
};
|
|
1734
1730
|
|
|
1735
1731
|
var _templateObject$g, _templateObject2$a, _templateObject3$8;
|
|
1732
|
+
|
|
1733
|
+
function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
1734
|
+
|
|
1735
|
+
function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
1736
1736
|
var PremiumContainer = styled__default['default'].div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n background: transparent;\n overflow: hidden;\n min-width: 210px;\n max-width: 260px;\n width: 100%;\n max-height: 322px;\n flex: 1;\n min-height: 272px;\n aspect-ratio: 260 / 322;\n gap: 10px;\n border-radius: 18px;\n box-sizing: border-box;\n padding: 2px;\n position: relative;\n transition: 0.3s;\n"])));
|
|
1737
1737
|
var Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n background-color: ", ";\n background: ", ";\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n position: relative;\n height: 100%;\n padding: 10px;\n border-radius: 17px;\n box-sizing: border-box;\n"])), function (props) {
|
|
1738
1738
|
return props.theme.colors.grey7;
|
|
@@ -1760,8 +1760,9 @@
|
|
|
1760
1760
|
marginRight: "6px",
|
|
1761
1761
|
transition: "0.3s",
|
|
1762
1762
|
cursor: "pointer",
|
|
1763
|
+
opacity: 0.5,
|
|
1763
1764
|
"&:hover": {
|
|
1764
|
-
opacity:
|
|
1765
|
+
opacity: 1
|
|
1765
1766
|
}
|
|
1766
1767
|
}
|
|
1767
1768
|
}) : /*#__PURE__*/React__default['default'].createElement(FavoriteBorderIcon__default['default'], {
|
|
@@ -1770,8 +1771,9 @@
|
|
|
1770
1771
|
marginRight: "6px",
|
|
1771
1772
|
transition: "0.3s",
|
|
1772
1773
|
cursor: "pointer",
|
|
1774
|
+
opacity: 0.5,
|
|
1773
1775
|
"&:hover": {
|
|
1774
|
-
opacity:
|
|
1776
|
+
opacity: 1
|
|
1775
1777
|
}
|
|
1776
1778
|
}
|
|
1777
1779
|
}), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
@@ -1854,6 +1856,16 @@
|
|
|
1854
1856
|
tooltipText: "",
|
|
1855
1857
|
text: ""
|
|
1856
1858
|
};
|
|
1859
|
+
var visStyle = {
|
|
1860
|
+
fontSize: "23px",
|
|
1861
|
+
fontWeight: "600",
|
|
1862
|
+
backgroundColor: "#585858a3",
|
|
1863
|
+
border: "4px solid transparent",
|
|
1864
|
+
borderColor: "#585858a3",
|
|
1865
|
+
borderRadius: "4px",
|
|
1866
|
+
color: "whiteOverride.main",
|
|
1867
|
+
marginBottom: "12px"
|
|
1868
|
+
};
|
|
1857
1869
|
|
|
1858
1870
|
if (bite !== null && bite !== void 0 && bite.newAudienceRating) {
|
|
1859
1871
|
var _bite$newAudienceRati, _bite$newAudienceRati2;
|
|
@@ -1867,7 +1879,15 @@
|
|
|
1867
1879
|
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1868
1880
|
direction: "row",
|
|
1869
1881
|
alignItems: "center"
|
|
1870
|
-
}, bite === null || bite === void 0 ? void 0 :
|
|
1882
|
+
}, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
|
|
1883
|
+
title: "Private"
|
|
1884
|
+
}, /*#__PURE__*/React__default['default'].createElement(VisibilityOffRoundedIcon__default['default'], {
|
|
1885
|
+
sx: _objectSpread$6({}, visStyle)
|
|
1886
|
+
})), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
|
|
1887
|
+
title: "Unlisted"
|
|
1888
|
+
}, /*#__PURE__*/React__default['default'].createElement(VisibilityRoundedIcon__default['default'], {
|
|
1889
|
+
sx: _objectSpread$6({}, visStyle)
|
|
1890
|
+
})), bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(function (rating) {
|
|
1871
1891
|
if (rating === "SAFE") {
|
|
1872
1892
|
// nothing
|
|
1873
1893
|
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
|
|
@@ -1911,10 +1931,21 @@
|
|
|
1911
1931
|
}
|
|
1912
1932
|
|
|
1913
1933
|
if (!ratingText.tooltipText) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
|
|
1914
|
-
return /*#__PURE__*/React__default['default'].createElement(
|
|
1934
|
+
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1935
|
+
direction: "row",
|
|
1936
|
+
alignItems: "center"
|
|
1937
|
+
}, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
|
|
1938
|
+
title: "Private"
|
|
1939
|
+
}, /*#__PURE__*/React__default['default'].createElement(VisibilityOffRoundedIcon__default['default'], {
|
|
1940
|
+
sx: _objectSpread$6({}, visStyle)
|
|
1941
|
+
})), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
|
|
1942
|
+
title: "Unlisted"
|
|
1943
|
+
}, /*#__PURE__*/React__default['default'].createElement(VisibilityRoundedIcon__default['default'], {
|
|
1944
|
+
sx: _objectSpread$6({}, visStyle)
|
|
1945
|
+
})), /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
|
|
1915
1946
|
tooltipText: ratingText.tooltipText,
|
|
1916
1947
|
displayText: ratingText.text
|
|
1917
|
-
});
|
|
1948
|
+
}));
|
|
1918
1949
|
};
|
|
1919
1950
|
|
|
1920
1951
|
var ReportedWarning = function ReportedWarning(_ref5) {
|
|
@@ -2293,14 +2324,15 @@
|
|
|
2293
2324
|
display: "flex",
|
|
2294
2325
|
alignItems: "flex-end",
|
|
2295
2326
|
justifyContent: "center",
|
|
2296
|
-
background: "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
|
|
2327
|
+
background: bite !== null && bite !== void 0 && bite.isPremium ? "linear-gradient(270deg, rgb(49 62 65) 40%, rgba(0,0,0,0) 100%)" : "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
|
|
2297
2328
|
}
|
|
2298
2329
|
}, renderThreeDot())), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2299
2330
|
direction: "row",
|
|
2300
2331
|
alignItems: "center",
|
|
2301
2332
|
sx: {
|
|
2302
2333
|
width: "100%",
|
|
2303
|
-
justifyContent: "start"
|
|
2334
|
+
justifyContent: "start",
|
|
2335
|
+
postion: "relative"
|
|
2304
2336
|
}
|
|
2305
2337
|
}, (bite === null || bite === void 0 ? void 0 : bite.isPremium) && /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
|
|
2306
2338
|
sx: {
|
|
@@ -2367,14 +2399,17 @@
|
|
|
2367
2399
|
onClick: onFavoriteClick
|
|
2368
2400
|
}), /*#__PURE__*/React__default['default'].createElement(UsernameWithPopout$1, {
|
|
2369
2401
|
onUsernameClick: onUsernameClick,
|
|
2370
|
-
user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
|
|
2402
|
+
user: bite === null || bite === void 0 ? void 0 : bite.ownerObject,
|
|
2403
|
+
collapsed: false
|
|
2371
2404
|
}), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
2372
2405
|
sx: {
|
|
2373
2406
|
fontWeight: "300",
|
|
2374
2407
|
fontSize: "12px",
|
|
2375
|
-
color: "grey7.main"
|
|
2408
|
+
color: "grey7.main",
|
|
2409
|
+
position: "absolute",
|
|
2410
|
+
right: "12px"
|
|
2376
2411
|
}
|
|
2377
|
-
}, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))));
|
|
2412
|
+
}, (((bite === null || bite === void 0 ? void 0 : bite.audioDuration) || 1) / 1000).toFixed(0), "s")))));
|
|
2378
2413
|
};
|
|
2379
2414
|
|
|
2380
2415
|
var _templateObject$f;
|