@blerp/design 1.2.38 → 1.2.40
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 +40 -22
- package/dist/index.esm.js +41 -23
- package/dist/index.umd.js +40 -22
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1570,7 +1570,7 @@ Blerp$1.propTypes = {
|
|
|
1570
1570
|
};
|
|
1571
1571
|
|
|
1572
1572
|
var UserCard$1 = function UserCard(_ref) {
|
|
1573
|
-
var _user$twitchChannelIn, _user$twitchChannelIn2, _user$profileImage, _user$profileImage$or;
|
|
1573
|
+
var _user$twitchChannelIn, _user$twitchChannelIn2, _user$twitchChannelIn3, _user$twitchChannelIn4, _user$profileImage, _user$profileImage$or, _user$twitchChannelIn5, _user$twitchChannelIn6;
|
|
1574
1574
|
|
|
1575
1575
|
var user = _ref.user,
|
|
1576
1576
|
onUsernameClick = _ref.onUsernameClick,
|
|
@@ -1588,7 +1588,9 @@ var UserCard$1 = function UserCard(_ref) {
|
|
|
1588
1588
|
alignItems: "center",
|
|
1589
1589
|
padding: "16px",
|
|
1590
1590
|
boxSizing: "border-box",
|
|
1591
|
-
justifyContent: "space-around"
|
|
1591
|
+
justifyContent: "space-around",
|
|
1592
|
+
border: "1px solid transparent",
|
|
1593
|
+
borderColor: collapsed ? (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn = user.twitchChannelInfo) === null || _user$twitchChannelIn === void 0 ? void 0 : _user$twitchChannelIn.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn2 = user.twitchChannelInfo) === null || _user$twitchChannelIn2 === void 0 ? void 0 : _user$twitchChannelIn2.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent" : "transparent"
|
|
1592
1594
|
}
|
|
1593
1595
|
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1594
1596
|
sx: {
|
|
@@ -1600,13 +1602,22 @@ var UserCard$1 = function UserCard(_ref) {
|
|
|
1600
1602
|
height: collapsed ? "49px" : "89px",
|
|
1601
1603
|
borderRadius: "50%",
|
|
1602
1604
|
border: "2px solid transparent",
|
|
1603
|
-
borderColor: (user === null || user === void 0 ? void 0 : (_user$
|
|
1605
|
+
borderColor: collapsed ? "transparent" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn3 = user.twitchChannelInfo) === null || _user$twitchChannelIn3 === void 0 ? void 0 : _user$twitchChannelIn3.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn4 = user.twitchChannelInfo) === null || _user$twitchChannelIn4 === void 0 ? void 0 : _user$twitchChannelIn4.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent",
|
|
1604
1606
|
padding: collapsed ? "3px" : "6px",
|
|
1605
1607
|
boxSizing: "border-box"
|
|
1606
1608
|
},
|
|
1607
1609
|
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",
|
|
1608
1610
|
alt: "profile"
|
|
1609
|
-
}), (user === null || user === void 0 ? void 0 : user.
|
|
1611
|
+
}), (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn5 = user.twitchChannelInfo) === null || _user$twitchChannelIn5 === void 0 ? void 0 : _user$twitchChannelIn5.broadcasterType) === "partner" && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.VerifiedRounded, {
|
|
1612
|
+
sx: {
|
|
1613
|
+
position: "absolute",
|
|
1614
|
+
bottom: collapsed ? "0" : "5px",
|
|
1615
|
+
right: collapsed ? "0" : "5px",
|
|
1616
|
+
fontSize: "17px",
|
|
1617
|
+
backgroundColor: "grey4.main",
|
|
1618
|
+
borderRadius: "50%"
|
|
1619
|
+
}
|
|
1620
|
+
}), (user === null || user === void 0 ? void 0 : user.premiumBlerpUserStatus) === "ACTIVE" && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.DiamondRounded, {
|
|
1610
1621
|
sx: {
|
|
1611
1622
|
position: "absolute",
|
|
1612
1623
|
bottom: collapsed ? "0" : "5px",
|
|
@@ -1658,7 +1669,7 @@ var UserCard$1 = function UserCard(_ref) {
|
|
|
1658
1669
|
fontWeight: "400",
|
|
1659
1670
|
cursor: "inherit"
|
|
1660
1671
|
}
|
|
1661
|
-
}, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1672
|
+
}, (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn6 = user.twitchChannelInfo) === null || _user$twitchChannelIn6 === void 0 ? void 0 : _user$twitchChannelIn6.followerCount) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1662
1673
|
sx: {
|
|
1663
1674
|
fontSize: "12px",
|
|
1664
1675
|
fontWeight: "300",
|
|
@@ -2019,13 +2030,9 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
|
|
|
2019
2030
|
onPlusClick = _ref5.onPlusClick,
|
|
2020
2031
|
_onOptionClicked = _ref5.onOptionClicked,
|
|
2021
2032
|
selectedOption = _ref5.selectedOption,
|
|
2022
|
-
renderAddContentButton = _ref5.renderAddContentButton
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
_useState6 = _slicedToArray__default['default'](_useState5, 2),
|
|
2026
|
-
hoveringAddTo = _useState6[0],
|
|
2027
|
-
setHoveringAddTo = _useState6[1];
|
|
2028
|
-
|
|
2033
|
+
renderAddContentButton = _ref5.renderAddContentButton,
|
|
2034
|
+
hoveringAddTo = _ref5.hoveringAddTo,
|
|
2035
|
+
setHoveringAddTo = _ref5.setHoveringAddTo;
|
|
2029
2036
|
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2030
2037
|
direction: "row",
|
|
2031
2038
|
justifyContent: "space-between",
|
|
@@ -2092,17 +2099,23 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
|
2092
2099
|
selectedOption = _ref6.selectedOption,
|
|
2093
2100
|
_ref6$trending = _ref6.trending,
|
|
2094
2101
|
trending = _ref6$trending === void 0 ? false : _ref6$trending,
|
|
2095
|
-
renderAddContentButton = _ref6.renderAddContentButton
|
|
2102
|
+
renderAddContentButton = _ref6.renderAddContentButton,
|
|
2103
|
+
renderThreeDot = _ref6.renderThreeDot;
|
|
2104
|
+
|
|
2105
|
+
var _useState5 = React.useState(false),
|
|
2106
|
+
_useState6 = _slicedToArray__default['default'](_useState5, 2),
|
|
2107
|
+
hovering = _useState6[0],
|
|
2108
|
+
setHovering = _useState6[1];
|
|
2096
2109
|
|
|
2097
2110
|
var _useState7 = React.useState(false),
|
|
2098
2111
|
_useState8 = _slicedToArray__default['default'](_useState7, 2),
|
|
2099
|
-
|
|
2100
|
-
|
|
2112
|
+
addedToPlace = _useState8[0],
|
|
2113
|
+
setAddedToPlace = _useState8[1];
|
|
2101
2114
|
|
|
2102
2115
|
var _useState9 = React.useState(false),
|
|
2103
2116
|
_useState10 = _slicedToArray__default['default'](_useState9, 2),
|
|
2104
|
-
|
|
2105
|
-
|
|
2117
|
+
hoveringAddTo = _useState10[0],
|
|
2118
|
+
setHoveringAddTo = _useState10[1];
|
|
2106
2119
|
|
|
2107
2120
|
var titleRef = React.useRef(null);
|
|
2108
2121
|
|
|
@@ -2244,11 +2257,13 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
|
2244
2257
|
hovering: hovering,
|
|
2245
2258
|
onPlusClick: handleAddToPlace,
|
|
2246
2259
|
selectedOption: selectedOption,
|
|
2247
|
-
renderAddContentButton: renderAddContentButton
|
|
2260
|
+
renderAddContentButton: renderAddContentButton,
|
|
2261
|
+
hoveringAddTo: hoveringAddTo,
|
|
2262
|
+
setHoveringAddTo: setHoveringAddTo
|
|
2248
2263
|
}), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2249
2264
|
sx: {
|
|
2250
2265
|
transition: "0.3s",
|
|
2251
|
-
opacity: hovering ? "1" : "0",
|
|
2266
|
+
opacity: hovering && !hoveringAddTo ? "1" : "0",
|
|
2252
2267
|
pointerEvents: "none",
|
|
2253
2268
|
zIndex: "3"
|
|
2254
2269
|
}
|
|
@@ -2269,11 +2284,14 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
|
2269
2284
|
position: "absolute",
|
|
2270
2285
|
right: "0",
|
|
2271
2286
|
top: "0",
|
|
2272
|
-
width: "
|
|
2287
|
+
width: "50px",
|
|
2273
2288
|
height: "100%",
|
|
2274
|
-
|
|
2289
|
+
display: "flex",
|
|
2290
|
+
alignItems: "flex-end",
|
|
2291
|
+
justifyContent: "center",
|
|
2292
|
+
background: "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
|
|
2275
2293
|
}
|
|
2276
|
-
})), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2294
|
+
}, renderThreeDot())), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2277
2295
|
direction: "row",
|
|
2278
2296
|
alignItems: "center",
|
|
2279
2297
|
sx: {
|
package/dist/index.esm.js
CHANGED
|
@@ -6,7 +6,7 @@ import React__default, { useState, useEffect, useContext, useRef, createContext,
|
|
|
6
6
|
import { ColorExtractor } from 'react-color-extractor';
|
|
7
7
|
import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
|
|
8
8
|
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
9
|
-
import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
|
|
9
|
+
import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, DiamondRounded, 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
12
|
import DoNotDisturbRoundedIcon from '@mui/icons-material/DoNotDisturbRounded';
|
|
@@ -1495,7 +1495,7 @@ Blerp$1.propTypes = {
|
|
|
1495
1495
|
};
|
|
1496
1496
|
|
|
1497
1497
|
var UserCard$1 = function UserCard(_ref) {
|
|
1498
|
-
var _user$twitchChannelIn, _user$twitchChannelIn2, _user$profileImage, _user$profileImage$or;
|
|
1498
|
+
var _user$twitchChannelIn, _user$twitchChannelIn2, _user$twitchChannelIn3, _user$twitchChannelIn4, _user$profileImage, _user$profileImage$or, _user$twitchChannelIn5, _user$twitchChannelIn6;
|
|
1499
1499
|
|
|
1500
1500
|
var user = _ref.user,
|
|
1501
1501
|
onUsernameClick = _ref.onUsernameClick,
|
|
@@ -1513,7 +1513,9 @@ var UserCard$1 = function UserCard(_ref) {
|
|
|
1513
1513
|
alignItems: "center",
|
|
1514
1514
|
padding: "16px",
|
|
1515
1515
|
boxSizing: "border-box",
|
|
1516
|
-
justifyContent: "space-around"
|
|
1516
|
+
justifyContent: "space-around",
|
|
1517
|
+
border: "1px solid transparent",
|
|
1518
|
+
borderColor: collapsed ? (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn = user.twitchChannelInfo) === null || _user$twitchChannelIn === void 0 ? void 0 : _user$twitchChannelIn.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn2 = user.twitchChannelInfo) === null || _user$twitchChannelIn2 === void 0 ? void 0 : _user$twitchChannelIn2.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent" : "transparent"
|
|
1517
1519
|
}
|
|
1518
1520
|
}, /*#__PURE__*/React__default.createElement(Stack, {
|
|
1519
1521
|
sx: {
|
|
@@ -1525,13 +1527,22 @@ var UserCard$1 = function UserCard(_ref) {
|
|
|
1525
1527
|
height: collapsed ? "49px" : "89px",
|
|
1526
1528
|
borderRadius: "50%",
|
|
1527
1529
|
border: "2px solid transparent",
|
|
1528
|
-
borderColor: (user === null || user === void 0 ? void 0 : (_user$
|
|
1530
|
+
borderColor: collapsed ? "transparent" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn3 = user.twitchChannelInfo) === null || _user$twitchChannelIn3 === void 0 ? void 0 : _user$twitchChannelIn3.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn4 = user.twitchChannelInfo) === null || _user$twitchChannelIn4 === void 0 ? void 0 : _user$twitchChannelIn4.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent",
|
|
1529
1531
|
padding: collapsed ? "3px" : "6px",
|
|
1530
1532
|
boxSizing: "border-box"
|
|
1531
1533
|
},
|
|
1532
1534
|
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",
|
|
1533
1535
|
alt: "profile"
|
|
1534
|
-
}), (user === null || user === void 0 ? void 0 : user.
|
|
1536
|
+
}), (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn5 = user.twitchChannelInfo) === null || _user$twitchChannelIn5 === void 0 ? void 0 : _user$twitchChannelIn5.broadcasterType) === "partner" && /*#__PURE__*/React__default.createElement(VerifiedRounded, {
|
|
1537
|
+
sx: {
|
|
1538
|
+
position: "absolute",
|
|
1539
|
+
bottom: collapsed ? "0" : "5px",
|
|
1540
|
+
right: collapsed ? "0" : "5px",
|
|
1541
|
+
fontSize: "17px",
|
|
1542
|
+
backgroundColor: "grey4.main",
|
|
1543
|
+
borderRadius: "50%"
|
|
1544
|
+
}
|
|
1545
|
+
}), (user === null || user === void 0 ? void 0 : user.premiumBlerpUserStatus) === "ACTIVE" && /*#__PURE__*/React__default.createElement(DiamondRounded, {
|
|
1535
1546
|
sx: {
|
|
1536
1547
|
position: "absolute",
|
|
1537
1548
|
bottom: collapsed ? "0" : "5px",
|
|
@@ -1583,7 +1594,7 @@ var UserCard$1 = function UserCard(_ref) {
|
|
|
1583
1594
|
fontWeight: "400",
|
|
1584
1595
|
cursor: "inherit"
|
|
1585
1596
|
}
|
|
1586
|
-
}, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default.createElement(Text, {
|
|
1597
|
+
}, (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn6 = user.twitchChannelInfo) === null || _user$twitchChannelIn6 === void 0 ? void 0 : _user$twitchChannelIn6.followerCount) || 0), /*#__PURE__*/React__default.createElement(Text, {
|
|
1587
1598
|
sx: {
|
|
1588
1599
|
fontSize: "12px",
|
|
1589
1600
|
fontWeight: "300",
|
|
@@ -1944,13 +1955,9 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
|
|
|
1944
1955
|
onPlusClick = _ref5.onPlusClick,
|
|
1945
1956
|
_onOptionClicked = _ref5.onOptionClicked,
|
|
1946
1957
|
selectedOption = _ref5.selectedOption,
|
|
1947
|
-
renderAddContentButton = _ref5.renderAddContentButton
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
1951
|
-
hoveringAddTo = _useState6[0],
|
|
1952
|
-
setHoveringAddTo = _useState6[1];
|
|
1953
|
-
|
|
1958
|
+
renderAddContentButton = _ref5.renderAddContentButton,
|
|
1959
|
+
hoveringAddTo = _ref5.hoveringAddTo,
|
|
1960
|
+
setHoveringAddTo = _ref5.setHoveringAddTo;
|
|
1954
1961
|
return /*#__PURE__*/React__default.createElement(Stack, {
|
|
1955
1962
|
direction: "row",
|
|
1956
1963
|
justifyContent: "space-between",
|
|
@@ -2017,17 +2024,23 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
|
2017
2024
|
selectedOption = _ref6.selectedOption,
|
|
2018
2025
|
_ref6$trending = _ref6.trending,
|
|
2019
2026
|
trending = _ref6$trending === void 0 ? false : _ref6$trending,
|
|
2020
|
-
renderAddContentButton = _ref6.renderAddContentButton
|
|
2027
|
+
renderAddContentButton = _ref6.renderAddContentButton,
|
|
2028
|
+
renderThreeDot = _ref6.renderThreeDot;
|
|
2029
|
+
|
|
2030
|
+
var _useState5 = useState(false),
|
|
2031
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
2032
|
+
hovering = _useState6[0],
|
|
2033
|
+
setHovering = _useState6[1];
|
|
2021
2034
|
|
|
2022
2035
|
var _useState7 = useState(false),
|
|
2023
2036
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
2024
|
-
|
|
2025
|
-
|
|
2037
|
+
addedToPlace = _useState8[0],
|
|
2038
|
+
setAddedToPlace = _useState8[1];
|
|
2026
2039
|
|
|
2027
2040
|
var _useState9 = useState(false),
|
|
2028
2041
|
_useState10 = _slicedToArray(_useState9, 2),
|
|
2029
|
-
|
|
2030
|
-
|
|
2042
|
+
hoveringAddTo = _useState10[0],
|
|
2043
|
+
setHoveringAddTo = _useState10[1];
|
|
2031
2044
|
|
|
2032
2045
|
var titleRef = useRef(null);
|
|
2033
2046
|
|
|
@@ -2169,11 +2182,13 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
|
2169
2182
|
hovering: hovering,
|
|
2170
2183
|
onPlusClick: handleAddToPlace,
|
|
2171
2184
|
selectedOption: selectedOption,
|
|
2172
|
-
renderAddContentButton: renderAddContentButton
|
|
2185
|
+
renderAddContentButton: renderAddContentButton,
|
|
2186
|
+
hoveringAddTo: hoveringAddTo,
|
|
2187
|
+
setHoveringAddTo: setHoveringAddTo
|
|
2173
2188
|
}), /*#__PURE__*/React__default.createElement(Stack, {
|
|
2174
2189
|
sx: {
|
|
2175
2190
|
transition: "0.3s",
|
|
2176
|
-
opacity: hovering ? "1" : "0",
|
|
2191
|
+
opacity: hovering && !hoveringAddTo ? "1" : "0",
|
|
2177
2192
|
pointerEvents: "none",
|
|
2178
2193
|
zIndex: "3"
|
|
2179
2194
|
}
|
|
@@ -2194,11 +2209,14 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
|
2194
2209
|
position: "absolute",
|
|
2195
2210
|
right: "0",
|
|
2196
2211
|
top: "0",
|
|
2197
|
-
width: "
|
|
2212
|
+
width: "50px",
|
|
2198
2213
|
height: "100%",
|
|
2199
|
-
|
|
2214
|
+
display: "flex",
|
|
2215
|
+
alignItems: "flex-end",
|
|
2216
|
+
justifyContent: "center",
|
|
2217
|
+
background: "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
|
|
2200
2218
|
}
|
|
2201
|
-
})), /*#__PURE__*/React__default.createElement(Stack, {
|
|
2219
|
+
}, renderThreeDot())), /*#__PURE__*/React__default.createElement(Stack, {
|
|
2202
2220
|
direction: "row",
|
|
2203
2221
|
alignItems: "center",
|
|
2204
2222
|
sx: {
|
package/dist/index.umd.js
CHANGED
|
@@ -1516,7 +1516,7 @@
|
|
|
1516
1516
|
};
|
|
1517
1517
|
|
|
1518
1518
|
var UserCard$1 = function UserCard(_ref) {
|
|
1519
|
-
var _user$twitchChannelIn, _user$twitchChannelIn2, _user$profileImage, _user$profileImage$or;
|
|
1519
|
+
var _user$twitchChannelIn, _user$twitchChannelIn2, _user$twitchChannelIn3, _user$twitchChannelIn4, _user$profileImage, _user$profileImage$or, _user$twitchChannelIn5, _user$twitchChannelIn6;
|
|
1520
1520
|
|
|
1521
1521
|
var user = _ref.user,
|
|
1522
1522
|
onUsernameClick = _ref.onUsernameClick,
|
|
@@ -1534,7 +1534,9 @@
|
|
|
1534
1534
|
alignItems: "center",
|
|
1535
1535
|
padding: "16px",
|
|
1536
1536
|
boxSizing: "border-box",
|
|
1537
|
-
justifyContent: "space-around"
|
|
1537
|
+
justifyContent: "space-around",
|
|
1538
|
+
border: "1px solid transparent",
|
|
1539
|
+
borderColor: collapsed ? (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn = user.twitchChannelInfo) === null || _user$twitchChannelIn === void 0 ? void 0 : _user$twitchChannelIn.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn2 = user.twitchChannelInfo) === null || _user$twitchChannelIn2 === void 0 ? void 0 : _user$twitchChannelIn2.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent" : "transparent"
|
|
1538
1540
|
}
|
|
1539
1541
|
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1540
1542
|
sx: {
|
|
@@ -1546,13 +1548,22 @@
|
|
|
1546
1548
|
height: collapsed ? "49px" : "89px",
|
|
1547
1549
|
borderRadius: "50%",
|
|
1548
1550
|
border: "2px solid transparent",
|
|
1549
|
-
borderColor: (user === null || user === void 0 ? void 0 : (_user$
|
|
1551
|
+
borderColor: collapsed ? "transparent" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn3 = user.twitchChannelInfo) === null || _user$twitchChannelIn3 === void 0 ? void 0 : _user$twitchChannelIn3.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn4 = user.twitchChannelInfo) === null || _user$twitchChannelIn4 === void 0 ? void 0 : _user$twitchChannelIn4.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent",
|
|
1550
1552
|
padding: collapsed ? "3px" : "6px",
|
|
1551
1553
|
boxSizing: "border-box"
|
|
1552
1554
|
},
|
|
1553
1555
|
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",
|
|
1554
1556
|
alt: "profile"
|
|
1555
|
-
}), (user === null || user === void 0 ? void 0 : user.
|
|
1557
|
+
}), (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn5 = user.twitchChannelInfo) === null || _user$twitchChannelIn5 === void 0 ? void 0 : _user$twitchChannelIn5.broadcasterType) === "partner" && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.VerifiedRounded, {
|
|
1558
|
+
sx: {
|
|
1559
|
+
position: "absolute",
|
|
1560
|
+
bottom: collapsed ? "0" : "5px",
|
|
1561
|
+
right: collapsed ? "0" : "5px",
|
|
1562
|
+
fontSize: "17px",
|
|
1563
|
+
backgroundColor: "grey4.main",
|
|
1564
|
+
borderRadius: "50%"
|
|
1565
|
+
}
|
|
1566
|
+
}), (user === null || user === void 0 ? void 0 : user.premiumBlerpUserStatus) === "ACTIVE" && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.DiamondRounded, {
|
|
1556
1567
|
sx: {
|
|
1557
1568
|
position: "absolute",
|
|
1558
1569
|
bottom: collapsed ? "0" : "5px",
|
|
@@ -1604,7 +1615,7 @@
|
|
|
1604
1615
|
fontWeight: "400",
|
|
1605
1616
|
cursor: "inherit"
|
|
1606
1617
|
}
|
|
1607
|
-
}, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1618
|
+
}, (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn6 = user.twitchChannelInfo) === null || _user$twitchChannelIn6 === void 0 ? void 0 : _user$twitchChannelIn6.followerCount) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1608
1619
|
sx: {
|
|
1609
1620
|
fontSize: "12px",
|
|
1610
1621
|
fontWeight: "300",
|
|
@@ -1965,13 +1976,9 @@
|
|
|
1965
1976
|
onPlusClick = _ref5.onPlusClick,
|
|
1966
1977
|
_onOptionClicked = _ref5.onOptionClicked,
|
|
1967
1978
|
selectedOption = _ref5.selectedOption,
|
|
1968
|
-
renderAddContentButton = _ref5.renderAddContentButton
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
_useState6 = _slicedToArray__default['default'](_useState5, 2),
|
|
1972
|
-
hoveringAddTo = _useState6[0],
|
|
1973
|
-
setHoveringAddTo = _useState6[1];
|
|
1974
|
-
|
|
1979
|
+
renderAddContentButton = _ref5.renderAddContentButton,
|
|
1980
|
+
hoveringAddTo = _ref5.hoveringAddTo,
|
|
1981
|
+
setHoveringAddTo = _ref5.setHoveringAddTo;
|
|
1975
1982
|
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1976
1983
|
direction: "row",
|
|
1977
1984
|
justifyContent: "space-between",
|
|
@@ -2038,17 +2045,23 @@
|
|
|
2038
2045
|
selectedOption = _ref6.selectedOption,
|
|
2039
2046
|
_ref6$trending = _ref6.trending,
|
|
2040
2047
|
trending = _ref6$trending === void 0 ? false : _ref6$trending,
|
|
2041
|
-
renderAddContentButton = _ref6.renderAddContentButton
|
|
2048
|
+
renderAddContentButton = _ref6.renderAddContentButton,
|
|
2049
|
+
renderThreeDot = _ref6.renderThreeDot;
|
|
2050
|
+
|
|
2051
|
+
var _useState5 = React.useState(false),
|
|
2052
|
+
_useState6 = _slicedToArray__default['default'](_useState5, 2),
|
|
2053
|
+
hovering = _useState6[0],
|
|
2054
|
+
setHovering = _useState6[1];
|
|
2042
2055
|
|
|
2043
2056
|
var _useState7 = React.useState(false),
|
|
2044
2057
|
_useState8 = _slicedToArray__default['default'](_useState7, 2),
|
|
2045
|
-
|
|
2046
|
-
|
|
2058
|
+
addedToPlace = _useState8[0],
|
|
2059
|
+
setAddedToPlace = _useState8[1];
|
|
2047
2060
|
|
|
2048
2061
|
var _useState9 = React.useState(false),
|
|
2049
2062
|
_useState10 = _slicedToArray__default['default'](_useState9, 2),
|
|
2050
|
-
|
|
2051
|
-
|
|
2063
|
+
hoveringAddTo = _useState10[0],
|
|
2064
|
+
setHoveringAddTo = _useState10[1];
|
|
2052
2065
|
|
|
2053
2066
|
var titleRef = React.useRef(null);
|
|
2054
2067
|
|
|
@@ -2190,11 +2203,13 @@
|
|
|
2190
2203
|
hovering: hovering,
|
|
2191
2204
|
onPlusClick: handleAddToPlace,
|
|
2192
2205
|
selectedOption: selectedOption,
|
|
2193
|
-
renderAddContentButton: renderAddContentButton
|
|
2206
|
+
renderAddContentButton: renderAddContentButton,
|
|
2207
|
+
hoveringAddTo: hoveringAddTo,
|
|
2208
|
+
setHoveringAddTo: setHoveringAddTo
|
|
2194
2209
|
}), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2195
2210
|
sx: {
|
|
2196
2211
|
transition: "0.3s",
|
|
2197
|
-
opacity: hovering ? "1" : "0",
|
|
2212
|
+
opacity: hovering && !hoveringAddTo ? "1" : "0",
|
|
2198
2213
|
pointerEvents: "none",
|
|
2199
2214
|
zIndex: "3"
|
|
2200
2215
|
}
|
|
@@ -2215,11 +2230,14 @@
|
|
|
2215
2230
|
position: "absolute",
|
|
2216
2231
|
right: "0",
|
|
2217
2232
|
top: "0",
|
|
2218
|
-
width: "
|
|
2233
|
+
width: "50px",
|
|
2219
2234
|
height: "100%",
|
|
2220
|
-
|
|
2235
|
+
display: "flex",
|
|
2236
|
+
alignItems: "flex-end",
|
|
2237
|
+
justifyContent: "center",
|
|
2238
|
+
background: "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
|
|
2221
2239
|
}
|
|
2222
|
-
})), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2240
|
+
}, renderThreeDot())), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2223
2241
|
direction: "row",
|
|
2224
2242
|
alignItems: "center",
|
|
2225
2243
|
sx: {
|