@blerp/design 1.2.14 → 1.2.16
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 +370 -50
- package/dist/index.esm.js +370 -52
- package/dist/index.umd.js +370 -50
- package/package.json +1 -1
package/dist/index.umd.js
CHANGED
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
|
|
77
77
|
var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
|
|
78
78
|
|
|
79
|
-
var _templateObject$
|
|
80
|
-
var BlerpImage$
|
|
79
|
+
var _templateObject$j, _templateObject2$b, _templateObject3$8, _templateObject4$7;
|
|
80
|
+
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) {
|
|
81
81
|
return props.url;
|
|
82
82
|
});
|
|
83
83
|
var SaveContainer$2 = styled__default['default'].div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n height: 20px;\n opacity: 1;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover svg {\n color: ", ";\n }\n"])), function (props) {
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
124
124
|
direction: "row",
|
|
125
125
|
marginTop: sizeParams.buttonSize === "small" && "28px"
|
|
126
|
-
}, /*#__PURE__*/React__default['default'].createElement(BlerpImage$
|
|
126
|
+
}, /*#__PURE__*/React__default['default'].createElement(BlerpImage$3, {
|
|
127
127
|
style: {
|
|
128
128
|
width: sizeParams.imageSize,
|
|
129
129
|
height: sizeParams.imageSize
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
154
154
|
direction: "row",
|
|
155
155
|
marginTop: sizeParams.buttonSize === "small" && "28px"
|
|
156
|
-
}, /*#__PURE__*/React__default['default'].createElement(BlerpImage$
|
|
156
|
+
}, /*#__PURE__*/React__default['default'].createElement(BlerpImage$3, {
|
|
157
157
|
style: {
|
|
158
158
|
width: sizeParams.imageSize,
|
|
159
159
|
height: sizeParams.imageSize
|
|
@@ -247,8 +247,8 @@
|
|
|
247
247
|
}) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, null)))))));
|
|
248
248
|
};
|
|
249
249
|
|
|
250
|
-
var _templateObject$
|
|
251
|
-
var ReactionButton$1 = styled__default['default'].div(_templateObject$
|
|
250
|
+
var _templateObject$i;
|
|
251
|
+
var ReactionButton$1 = styled__default['default'].div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral__default['default'](["\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px;\n transition: 0.2s;\n margin-right: 0;\n cursor: pointer;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) {
|
|
252
252
|
return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5Override;
|
|
253
253
|
}, function (props) {
|
|
254
254
|
return props.theme.colors.ibisRed;
|
|
@@ -391,8 +391,8 @@
|
|
|
391
391
|
}, "Organize")));
|
|
392
392
|
};
|
|
393
393
|
|
|
394
|
-
var _templateObject$
|
|
395
|
-
var LineClamp$2 = styled__default['default'].div(_templateObject$
|
|
394
|
+
var _templateObject$h;
|
|
395
|
+
var LineClamp$2 = styled__default['default'].div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n margin: 0;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
|
|
396
396
|
|
|
397
397
|
var BlerpTitleRow = function BlerpTitleRow(_ref) {
|
|
398
398
|
var bite = _ref.bite,
|
|
@@ -1515,14 +1515,104 @@
|
|
|
1515
1515
|
handleClickTitle: PropTypes__default['default'].func.isRequired
|
|
1516
1516
|
};
|
|
1517
1517
|
|
|
1518
|
-
var
|
|
1519
|
-
|
|
1518
|
+
var UserCard$1 = function UserCard(_ref) {
|
|
1519
|
+
var _user$twitchChannelIn, _user$twitchChannelIn2;
|
|
1520
|
+
|
|
1521
|
+
var user = _ref.user;
|
|
1522
|
+
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1523
|
+
direction: "row",
|
|
1524
|
+
sx: {
|
|
1525
|
+
backgroundColor: "grey3.main",
|
|
1526
|
+
minWidth: "280px",
|
|
1527
|
+
maxWidth: "320px",
|
|
1528
|
+
height: "121px",
|
|
1529
|
+
borderRadius: "12px",
|
|
1530
|
+
alignItems: "center",
|
|
1531
|
+
padding: "16px",
|
|
1532
|
+
boxSizing: "border-box",
|
|
1533
|
+
justifyContent: "space-around"
|
|
1534
|
+
}
|
|
1535
|
+
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1536
|
+
sx: {
|
|
1537
|
+
position: "relative"
|
|
1538
|
+
}
|
|
1539
|
+
}, /*#__PURE__*/React__default['default'].createElement("img", {
|
|
1540
|
+
style: {
|
|
1541
|
+
width: "89px",
|
|
1542
|
+
height: "89px",
|
|
1543
|
+
borderRadius: "50%",
|
|
1544
|
+
border: "2px solid transparent",
|
|
1545
|
+
borderColor: (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",
|
|
1546
|
+
padding: "6px",
|
|
1547
|
+
boxSizing: "border-box"
|
|
1548
|
+
},
|
|
1549
|
+
src: user === null || user === void 0 ? void 0 : user.profileUrl,
|
|
1550
|
+
alt: "profile"
|
|
1551
|
+
}), (user === null || user === void 0 ? void 0 : user.verified) && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.VerifiedRounded, {
|
|
1552
|
+
sx: {
|
|
1553
|
+
position: "absolute",
|
|
1554
|
+
bottom: "5px",
|
|
1555
|
+
right: "5px",
|
|
1556
|
+
fontSize: "17px"
|
|
1557
|
+
}
|
|
1558
|
+
})), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1559
|
+
sx: {
|
|
1560
|
+
flex: 1,
|
|
1561
|
+
marginLeft: "22px"
|
|
1562
|
+
}
|
|
1563
|
+
}, /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1564
|
+
sx: {
|
|
1565
|
+
fontSize: "18px",
|
|
1566
|
+
fontWeight: "400",
|
|
1567
|
+
maxWidth: "150px",
|
|
1568
|
+
whiteSpace: "nowrap",
|
|
1569
|
+
textOverflow: "ellipsis",
|
|
1570
|
+
marginBottom: "10px",
|
|
1571
|
+
overflow: "hidden"
|
|
1572
|
+
}
|
|
1573
|
+
}, user === null || user === void 0 ? void 0 : user.username), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1574
|
+
direction: "row",
|
|
1575
|
+
sx: {
|
|
1576
|
+
alignItems: "center",
|
|
1577
|
+
justifyContent: "space-around"
|
|
1578
|
+
}
|
|
1579
|
+
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1580
|
+
alignItems: "center"
|
|
1581
|
+
}, /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1582
|
+
sx: {
|
|
1583
|
+
fontSize: "14px",
|
|
1584
|
+
fontWeight: "400"
|
|
1585
|
+
}
|
|
1586
|
+
}, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1587
|
+
sx: {
|
|
1588
|
+
fontSize: "12px",
|
|
1589
|
+
fontWeight: "300",
|
|
1590
|
+
color: "grey7.main"
|
|
1591
|
+
}
|
|
1592
|
+
}, "followers")), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1593
|
+
alignItems: "center"
|
|
1594
|
+
}, /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1595
|
+
sx: {
|
|
1596
|
+
fontSize: "14px",
|
|
1597
|
+
fontWeight: "400"
|
|
1598
|
+
}
|
|
1599
|
+
}, (user === null || user === void 0 ? void 0 : user.created) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1600
|
+
sx: {
|
|
1601
|
+
fontSize: "12px",
|
|
1602
|
+
fontWeight: "300",
|
|
1603
|
+
color: "grey7.main"
|
|
1604
|
+
}
|
|
1605
|
+
}, "created")))));
|
|
1606
|
+
};
|
|
1607
|
+
|
|
1608
|
+
var _templateObject$g, _templateObject2$a;
|
|
1609
|
+
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"])));
|
|
1520
1610
|
var Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n background-color: ", ";\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) {
|
|
1521
1611
|
return props.theme.colors.grey7;
|
|
1522
1612
|
});
|
|
1523
1613
|
|
|
1524
1614
|
var AddContentDropdown = function AddContentDropdown(_ref) {
|
|
1525
|
-
var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext;
|
|
1615
|
+
var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext, _item$discordContext, _item$soundEmotesCont;
|
|
1526
1616
|
|
|
1527
1617
|
var item = _ref.item,
|
|
1528
1618
|
active = _ref.active,
|
|
@@ -1539,6 +1629,22 @@
|
|
|
1539
1629
|
name: "WalkOn",
|
|
1540
1630
|
value: "WALK_ON",
|
|
1541
1631
|
added: item === null || item === void 0 ? void 0 : (_item$walkOnContext = item.walkOnContext) === null || _item$walkOnContext === void 0 ? void 0 : _item$walkOnContext._id
|
|
1632
|
+
}, {
|
|
1633
|
+
name: "Discord",
|
|
1634
|
+
value: "DISCORD",
|
|
1635
|
+
added: item === null || item === void 0 ? void 0 : (_item$discordContext = item.discordContext) === null || _item$discordContext === void 0 ? void 0 : _item$discordContext._id
|
|
1636
|
+
}, {
|
|
1637
|
+
name: "Sound Emotes",
|
|
1638
|
+
value: "SOUND_EMOTES",
|
|
1639
|
+
added: item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont._id
|
|
1640
|
+
}, {
|
|
1641
|
+
name: "Add To Group",
|
|
1642
|
+
value: "ADD_TO_GROUP",
|
|
1643
|
+
added: false
|
|
1644
|
+
}, {
|
|
1645
|
+
name: "Suggest To...",
|
|
1646
|
+
value: "SUGGEST",
|
|
1647
|
+
added: false
|
|
1542
1648
|
}];
|
|
1543
1649
|
var anchorRef = React.useRef(null);
|
|
1544
1650
|
|
|
@@ -1713,11 +1819,12 @@
|
|
|
1713
1819
|
|
|
1714
1820
|
var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
|
|
1715
1821
|
var saved = _ref3.saved,
|
|
1716
|
-
count = _ref3.count
|
|
1717
|
-
_ref3.onClick;
|
|
1822
|
+
count = _ref3.count,
|
|
1823
|
+
onClick = _ref3.onClick;
|
|
1718
1824
|
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1719
1825
|
direction: "row",
|
|
1720
|
-
alignItems: "center"
|
|
1826
|
+
alignItems: "center",
|
|
1827
|
+
onClick: onClick
|
|
1721
1828
|
}, saved ? /*#__PURE__*/React__default['default'].createElement(FavoriteIcon__default['default'], {
|
|
1722
1829
|
sx: {
|
|
1723
1830
|
fontSize: "16px",
|
|
@@ -1745,7 +1852,6 @@
|
|
|
1745
1852
|
}
|
|
1746
1853
|
}, count));
|
|
1747
1854
|
};
|
|
1748
|
-
|
|
1749
1855
|
var AddedToIcons = function AddedToIcons(_ref4) {
|
|
1750
1856
|
var _item$channelPointsCo2, _item$whitelistContex2, _item$walkOnContext2;
|
|
1751
1857
|
|
|
@@ -1915,7 +2021,7 @@
|
|
|
1915
2021
|
};
|
|
1916
2022
|
|
|
1917
2023
|
var NewBlerp$1 = function NewBlerp(_ref8) {
|
|
1918
|
-
var _bite$image, _bite$image$original, _bite$ownerObject;
|
|
2024
|
+
var _bite$image, _bite$image$original, _bite$ownerObject, _bite$ownerObject2;
|
|
1919
2025
|
|
|
1920
2026
|
var Waveform = _ref8.Waveform,
|
|
1921
2027
|
bite = _ref8.bite,
|
|
@@ -1932,6 +2038,12 @@
|
|
|
1932
2038
|
addedToPlace = _useState12[0],
|
|
1933
2039
|
setAddedToPlace = _useState12[1];
|
|
1934
2040
|
|
|
2041
|
+
var _useState13 = React.useState(null),
|
|
2042
|
+
_useState14 = _slicedToArray__default['default'](_useState13, 2),
|
|
2043
|
+
userCardRef = _useState14[0],
|
|
2044
|
+
setUserCardRef = _useState14[1];
|
|
2045
|
+
|
|
2046
|
+
var openUserCard = Boolean(userCardRef);
|
|
1935
2047
|
var formatter = Intl.NumberFormat("en", {
|
|
1936
2048
|
notation: "compact"
|
|
1937
2049
|
});
|
|
@@ -2015,7 +2127,7 @@
|
|
|
2015
2127
|
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
|
|
2016
2128
|
}
|
|
2017
2129
|
|
|
2018
|
-
return /*#__PURE__*/React__default['default'].createElement(PremiumContainer, {
|
|
2130
|
+
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PremiumContainer, {
|
|
2019
2131
|
style: {
|
|
2020
2132
|
background: addedToPlace ? "white" : (bite === null || bite === void 0 ? void 0 : bite.isPremium) && "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)"
|
|
2021
2133
|
}
|
|
@@ -2027,7 +2139,6 @@
|
|
|
2027
2139
|
return console.log("clicked save");
|
|
2028
2140
|
}
|
|
2029
2141
|
}), /*#__PURE__*/React__default['default'].createElement(Container$1, null, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2030
|
-
id: "blerp-audio-button-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
|
|
2031
2142
|
sx: {
|
|
2032
2143
|
backgroundImage: "url(".concat(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url, ")"),
|
|
2033
2144
|
backgroundSize: "cover",
|
|
@@ -2051,11 +2162,12 @@
|
|
|
2051
2162
|
setHovering(false);
|
|
2052
2163
|
}
|
|
2053
2164
|
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2165
|
+
id: "blerp-audio-button-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
|
|
2054
2166
|
className: "blerp-hover",
|
|
2055
2167
|
onClick: function onClick() {
|
|
2056
2168
|
play({
|
|
2057
2169
|
bite: bite
|
|
2058
|
-
});
|
|
2170
|
+
}); // play({ bite });
|
|
2059
2171
|
},
|
|
2060
2172
|
sx: {
|
|
2061
2173
|
width: "100%",
|
|
@@ -2075,7 +2187,8 @@
|
|
|
2075
2187
|
justifyContent: "space-between",
|
|
2076
2188
|
width: "100%",
|
|
2077
2189
|
sx: {
|
|
2078
|
-
position: "relative"
|
|
2190
|
+
position: "relative",
|
|
2191
|
+
minHeight: "20px"
|
|
2079
2192
|
}
|
|
2080
2193
|
}, /*#__PURE__*/React__default['default'].createElement(Stack, null, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
|
|
2081
2194
|
rating: bite === null || bite === void 0 ? void 0 : bite.strictAudienceRating
|
|
@@ -2093,7 +2206,7 @@
|
|
|
2093
2206
|
transition: "0.3s",
|
|
2094
2207
|
opacity: hovering ? "1" : "0",
|
|
2095
2208
|
pointerEvents: "none",
|
|
2096
|
-
zIndex: "
|
|
2209
|
+
zIndex: "3"
|
|
2097
2210
|
}
|
|
2098
2211
|
}, renderPlayStateIcon()), Waveform({
|
|
2099
2212
|
hovering: hovering
|
|
@@ -2183,14 +2296,212 @@
|
|
|
2183
2296
|
whiteSpace: "nowrap",
|
|
2184
2297
|
overflow: "hidden",
|
|
2185
2298
|
margin: "0 10px"
|
|
2186
|
-
}
|
|
2299
|
+
},
|
|
2300
|
+
onClick: function onClick(e) {
|
|
2301
|
+
setUserCardRef(e.target);
|
|
2302
|
+
} // onMouseLeave={() => {
|
|
2303
|
+
// setUserCardRef(null);
|
|
2304
|
+
// }}
|
|
2305
|
+
|
|
2187
2306
|
}, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject.username), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
2188
2307
|
sx: {
|
|
2189
2308
|
fontWeight: "300",
|
|
2190
2309
|
fontSize: "12px",
|
|
2191
2310
|
color: "grey7.main"
|
|
2192
2311
|
}
|
|
2193
|
-
}, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s"))))
|
|
2312
|
+
}, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))), /*#__PURE__*/React__default['default'].createElement(Popover, {
|
|
2313
|
+
id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2._id),
|
|
2314
|
+
open: openUserCard,
|
|
2315
|
+
anchorEl: userCardRef,
|
|
2316
|
+
anchorOrigin: {
|
|
2317
|
+
vertical: "bottom",
|
|
2318
|
+
horizontal: "left"
|
|
2319
|
+
},
|
|
2320
|
+
transformOrigin: {
|
|
2321
|
+
vertical: "top",
|
|
2322
|
+
horizontal: "left"
|
|
2323
|
+
},
|
|
2324
|
+
PaperProps: {
|
|
2325
|
+
// onMouseEnter: (e) => {
|
|
2326
|
+
// setUserCardRef(e.target);
|
|
2327
|
+
// },
|
|
2328
|
+
sx: {
|
|
2329
|
+
backgroundColor: "transparent"
|
|
2330
|
+
},
|
|
2331
|
+
onMouseLeave: function onMouseLeave() {
|
|
2332
|
+
setUserCardRef(null);
|
|
2333
|
+
}
|
|
2334
|
+
},
|
|
2335
|
+
onClose: function onClose() {
|
|
2336
|
+
return setUserCardRef(null);
|
|
2337
|
+
}
|
|
2338
|
+
}, /*#__PURE__*/React__default['default'].createElement(UserCard$1, {
|
|
2339
|
+
user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
|
|
2340
|
+
})));
|
|
2341
|
+
};
|
|
2342
|
+
|
|
2343
|
+
var _templateObject$f;
|
|
2344
|
+
var BlerpImage$2 = styled__default['default'].div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n background-image: url(", ");\n background-repeat: no-repeat;\n background-size: cover;\n width: 140px;\n height: 140px;\n border-radius: 12px;\n transition: 0.3s;\n position: absolute;\n opacity: ", ";\n transform: rotate(", ");\n"])), function (props) {
|
|
2345
|
+
return props.image;
|
|
2346
|
+
}, function (props) {
|
|
2347
|
+
return props.firstImage ? "1" : props.hovering ? "1" : "0.5";
|
|
2348
|
+
}, function (props) {
|
|
2349
|
+
return props.hovering ? "45deg" : "20deg";
|
|
2350
|
+
});
|
|
2351
|
+
var GroupCard$1 = function GroupCard(_ref) {
|
|
2352
|
+
var _group$blerps14;
|
|
2353
|
+
|
|
2354
|
+
var group = _ref.group;
|
|
2355
|
+
|
|
2356
|
+
var _useState = React.useState(false),
|
|
2357
|
+
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
2358
|
+
hovering = _useState2[0],
|
|
2359
|
+
setHovering = _useState2[1];
|
|
2360
|
+
|
|
2361
|
+
var formatter = Intl.NumberFormat("en", {
|
|
2362
|
+
notation: "compact"
|
|
2363
|
+
});
|
|
2364
|
+
var saveCount = formatter.format(group === null || group === void 0 ? void 0 : group.totalSaveCount);
|
|
2365
|
+
|
|
2366
|
+
var calculateBottom = function calculateBottom(index) {
|
|
2367
|
+
if (hovering) {
|
|
2368
|
+
return "-20px";
|
|
2369
|
+
}
|
|
2370
|
+
|
|
2371
|
+
return "".concat((index - 2) * 10, "px");
|
|
2372
|
+
};
|
|
2373
|
+
|
|
2374
|
+
var calculateLeft = function calculateLeft(index) {
|
|
2375
|
+
var _group$blerps, _group$blerps2, _group$blerps5, _group$blerps8, _group$blerps11;
|
|
2376
|
+
|
|
2377
|
+
if ((group === null || group === void 0 ? void 0 : (_group$blerps = group.blerps) === null || _group$blerps === void 0 ? void 0 : _group$blerps.length) === 1) {
|
|
2378
|
+
return "25%";
|
|
2379
|
+
}
|
|
2380
|
+
|
|
2381
|
+
if ((group === null || group === void 0 ? void 0 : (_group$blerps2 = group.blerps) === null || _group$blerps2 === void 0 ? void 0 : _group$blerps2.length) === 2) {
|
|
2382
|
+
var _group$blerps4;
|
|
2383
|
+
|
|
2384
|
+
if (hovering) {
|
|
2385
|
+
var _group$blerps3;
|
|
2386
|
+
|
|
2387
|
+
return "".concat((index - 0.05) / (group === null || group === void 0 ? void 0 : (_group$blerps3 = group.blerps) === null || _group$blerps3 === void 0 ? void 0 : _group$blerps3.length) * 100, "%");
|
|
2388
|
+
}
|
|
2389
|
+
|
|
2390
|
+
return "".concat((index + 0.5) / ((group === null || group === void 0 ? void 0 : (_group$blerps4 = group.blerps) === null || _group$blerps4 === void 0 ? void 0 : _group$blerps4.length) + 2.5) * 100, "%");
|
|
2391
|
+
}
|
|
2392
|
+
|
|
2393
|
+
if ((group === null || group === void 0 ? void 0 : (_group$blerps5 = group.blerps) === null || _group$blerps5 === void 0 ? void 0 : _group$blerps5.length) === 3) {
|
|
2394
|
+
var _group$blerps7;
|
|
2395
|
+
|
|
2396
|
+
if (hovering) {
|
|
2397
|
+
var _group$blerps6;
|
|
2398
|
+
|
|
2399
|
+
return "".concat((index - 0.35) / (group === null || group === void 0 ? void 0 : (_group$blerps6 = group.blerps) === null || _group$blerps6 === void 0 ? void 0 : _group$blerps6.length) * 100, "%");
|
|
2400
|
+
}
|
|
2401
|
+
|
|
2402
|
+
return "".concat((index + 0.4) / ((group === null || group === void 0 ? void 0 : (_group$blerps7 = group.blerps) === null || _group$blerps7 === void 0 ? void 0 : _group$blerps7.length) + 2.5) * 100, "%");
|
|
2403
|
+
}
|
|
2404
|
+
|
|
2405
|
+
if ((group === null || group === void 0 ? void 0 : (_group$blerps8 = group.blerps) === null || _group$blerps8 === void 0 ? void 0 : _group$blerps8.length) === 4) {
|
|
2406
|
+
var _group$blerps10;
|
|
2407
|
+
|
|
2408
|
+
if (hovering) {
|
|
2409
|
+
var _group$blerps9;
|
|
2410
|
+
|
|
2411
|
+
return "".concat((index - 0.6) / (group === null || group === void 0 ? void 0 : (_group$blerps9 = group.blerps) === null || _group$blerps9 === void 0 ? void 0 : _group$blerps9.length) * 100, "%");
|
|
2412
|
+
}
|
|
2413
|
+
|
|
2414
|
+
return "".concat((index + 0.2) / ((group === null || group === void 0 ? void 0 : (_group$blerps10 = group.blerps) === null || _group$blerps10 === void 0 ? void 0 : _group$blerps10.length) + 2.5) * 100, "%");
|
|
2415
|
+
}
|
|
2416
|
+
|
|
2417
|
+
if ((group === null || group === void 0 ? void 0 : (_group$blerps11 = group.blerps) === null || _group$blerps11 === void 0 ? void 0 : _group$blerps11.length) === 5) {
|
|
2418
|
+
var _group$blerps13;
|
|
2419
|
+
|
|
2420
|
+
if (hovering) {
|
|
2421
|
+
var _group$blerps12;
|
|
2422
|
+
|
|
2423
|
+
return "".concat((index - 0.7) / (group === null || group === void 0 ? void 0 : (_group$blerps12 = group.blerps) === null || _group$blerps12 === void 0 ? void 0 : _group$blerps12.length) * 100, "%");
|
|
2424
|
+
}
|
|
2425
|
+
|
|
2426
|
+
return "".concat((index + 0.2) / ((group === null || group === void 0 ? void 0 : (_group$blerps13 = group.blerps) === null || _group$blerps13 === void 0 ? void 0 : _group$blerps13.length) + 2.5) * 100, "%");
|
|
2427
|
+
}
|
|
2428
|
+
|
|
2429
|
+
return "".concat((index - 2) * 10, "px");
|
|
2430
|
+
};
|
|
2431
|
+
|
|
2432
|
+
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2433
|
+
sx: {
|
|
2434
|
+
minWidth: "250px",
|
|
2435
|
+
maxWidth: "290px",
|
|
2436
|
+
minHeight: "250px",
|
|
2437
|
+
maxHeight: "290px",
|
|
2438
|
+
width: "100%",
|
|
2439
|
+
height: "100%",
|
|
2440
|
+
aspectRatio: "1 / 1",
|
|
2441
|
+
backgroundColor: "grey2.main",
|
|
2442
|
+
borderRadius: "12px",
|
|
2443
|
+
padding: "30px",
|
|
2444
|
+
position: "relative",
|
|
2445
|
+
boxSizing: "border-box",
|
|
2446
|
+
flex: "1",
|
|
2447
|
+
overflow: "hidden"
|
|
2448
|
+
},
|
|
2449
|
+
onMouseEnter: function onMouseEnter() {
|
|
2450
|
+
setHovering(true);
|
|
2451
|
+
},
|
|
2452
|
+
onMouseLeave: function onMouseLeave() {
|
|
2453
|
+
setHovering(false);
|
|
2454
|
+
}
|
|
2455
|
+
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2456
|
+
height: "100%"
|
|
2457
|
+
}, /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
2458
|
+
sx: {
|
|
2459
|
+
color: "grey5.main",
|
|
2460
|
+
fontSize: "12px",
|
|
2461
|
+
fontWeight: "300"
|
|
2462
|
+
}
|
|
2463
|
+
}, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
2464
|
+
sx: {
|
|
2465
|
+
whiteSpace: "nowrap",
|
|
2466
|
+
overflowX: "hidden",
|
|
2467
|
+
textOverflow: "ellipsis",
|
|
2468
|
+
maxWidth: "200px",
|
|
2469
|
+
fontSize: "24px",
|
|
2470
|
+
fontWeight: "600",
|
|
2471
|
+
lineHeight: "1",
|
|
2472
|
+
height: "31px",
|
|
2473
|
+
marginBottom: "5px"
|
|
2474
|
+
}
|
|
2475
|
+
}, group === null || group === void 0 ? void 0 : group.title), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2476
|
+
direction: "row"
|
|
2477
|
+
}, /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
|
|
2478
|
+
item: group,
|
|
2479
|
+
hovering: true
|
|
2480
|
+
}), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
|
|
2481
|
+
saved: group === null || group === void 0 ? void 0 : group.saved,
|
|
2482
|
+
count: saveCount
|
|
2483
|
+
})), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2484
|
+
direction: "row",
|
|
2485
|
+
sx: {
|
|
2486
|
+
width: "100%",
|
|
2487
|
+
height: "100%",
|
|
2488
|
+
right: "0",
|
|
2489
|
+
bottom: "0"
|
|
2490
|
+
}
|
|
2491
|
+
}, (_group$blerps14 = group.blerps) === null || _group$blerps14 === void 0 ? void 0 : _group$blerps14.map(function (blerp, index) {
|
|
2492
|
+
var _group$blerps15, _blerp$image, _blerp$image$original;
|
|
2493
|
+
|
|
2494
|
+
return /*#__PURE__*/React__default['default'].createElement(BlerpImage$2, {
|
|
2495
|
+
index: index,
|
|
2496
|
+
firstImage: index === ((_group$blerps15 = group.blerps) === null || _group$blerps15 === void 0 ? void 0 : _group$blerps15.length) - 1,
|
|
2497
|
+
hovering: hovering,
|
|
2498
|
+
image: blerp === null || blerp === void 0 ? void 0 : (_blerp$image = blerp.image) === null || _blerp$image === void 0 ? void 0 : (_blerp$image$original = _blerp$image.original) === null || _blerp$image$original === void 0 ? void 0 : _blerp$image$original.url,
|
|
2499
|
+
style: {
|
|
2500
|
+
bottom: calculateBottom(index),
|
|
2501
|
+
left: calculateLeft(index)
|
|
2502
|
+
}
|
|
2503
|
+
});
|
|
2504
|
+
}))));
|
|
2194
2505
|
};
|
|
2195
2506
|
|
|
2196
2507
|
var BlerpAudioContext = /*#__PURE__*/React.createContext({});
|
|
@@ -2200,7 +2511,7 @@
|
|
|
2200
2511
|
var _useState = React.useState(null),
|
|
2201
2512
|
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
2202
2513
|
selectedBlerp = _useState2[0],
|
|
2203
|
-
|
|
2514
|
+
setSelectedBlerp = _useState2[1];
|
|
2204
2515
|
|
|
2205
2516
|
var _useState3 = React.useState("stopped"),
|
|
2206
2517
|
_useState4 = _slicedToArray__default['default'](_useState3, 2),
|
|
@@ -2239,23 +2550,23 @@
|
|
|
2239
2550
|
};
|
|
2240
2551
|
}();
|
|
2241
2552
|
|
|
2242
|
-
var
|
|
2553
|
+
var mplay = /*#__PURE__*/function () {
|
|
2243
2554
|
var _ref4 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3(_ref3) {
|
|
2244
|
-
var _bite$
|
|
2555
|
+
var _bite$audio, _bite$audio$mp;
|
|
2245
2556
|
|
|
2246
|
-
var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay,
|
|
2557
|
+
var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, newGain, audioCtx, gainNode, source;
|
|
2247
2558
|
|
|
2248
2559
|
return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
|
|
2249
2560
|
while (1) {
|
|
2250
2561
|
switch (_context3.prev = _context3.next) {
|
|
2251
2562
|
case 0:
|
|
2252
2563
|
bite = _ref3.bite, _ref3$gain = _ref3.gain, gain = _ref3$gain === void 0 ? 1 : _ref3$gain, _ref3$startTime = _ref3.startTime, startTime = _ref3$startTime === void 0 ? 0 : _ref3$startTime, _ref3$forcePlay = _ref3.forcePlay, forcePlay = _ref3$forcePlay === void 0 ? false : _ref3$forcePlay;
|
|
2253
|
-
console.log("astats", startTime, playState);
|
|
2254
2564
|
|
|
2255
2565
|
if (!audioRef.current) {
|
|
2256
|
-
audioRef.current = new Audio(
|
|
2566
|
+
audioRef.current = new Audio();
|
|
2257
2567
|
}
|
|
2258
2568
|
|
|
2569
|
+
console.log("astats", startTime, playState);
|
|
2259
2570
|
startTime = audioRef.current.currentTime > 0 ? audioRef.current.currentTime : startTime;
|
|
2260
2571
|
console.log("play", playState, startTime);
|
|
2261
2572
|
|
|
@@ -2282,7 +2593,7 @@
|
|
|
2282
2593
|
return _context3.abrupt("return");
|
|
2283
2594
|
|
|
2284
2595
|
case 12:
|
|
2285
|
-
audioRef.current = new Audio(bite === null || bite === void 0 ? void 0 : (_bite$
|
|
2596
|
+
audioRef.current = new Audio(bite === null || bite === void 0 ? void 0 : (_bite$audio = bite.audio) === null || _bite$audio === void 0 ? void 0 : (_bite$audio$mp = _bite$audio.mp3) === null || _bite$audio$mp === void 0 ? void 0 : _bite$audio$mp.url);
|
|
2286
2597
|
audioRef.current.crossOrigin = "anonymous";
|
|
2287
2598
|
console.log("current time", startTime);
|
|
2288
2599
|
audioRef.current.currentTime = startTime;
|
|
@@ -2337,7 +2648,7 @@
|
|
|
2337
2648
|
// console.log("playing failed witihin", error);
|
|
2338
2649
|
// });
|
|
2339
2650
|
// }
|
|
2340
|
-
|
|
2651
|
+
setSelectedBlerp(bite);
|
|
2341
2652
|
|
|
2342
2653
|
case 27:
|
|
2343
2654
|
case "end":
|
|
@@ -2347,7 +2658,7 @@
|
|
|
2347
2658
|
}, _callee3);
|
|
2348
2659
|
}));
|
|
2349
2660
|
|
|
2350
|
-
return function
|
|
2661
|
+
return function mplay(_x) {
|
|
2351
2662
|
return _ref4.apply(this, arguments);
|
|
2352
2663
|
};
|
|
2353
2664
|
}();
|
|
@@ -2355,29 +2666,35 @@
|
|
|
2355
2666
|
return /*#__PURE__*/React__default['default'].createElement(BlerpAudioContext.Provider, {
|
|
2356
2667
|
value: {
|
|
2357
2668
|
selectedBlerp: selectedBlerp,
|
|
2358
|
-
setSelectedBlerp:
|
|
2359
|
-
var bite = _ref6.bite;
|
|
2360
|
-
|
|
2361
|
-
_setSelectedBlerp(bite);
|
|
2362
|
-
},
|
|
2669
|
+
setSelectedBlerp: setSelectedBlerp,
|
|
2363
2670
|
pause: pause,
|
|
2364
|
-
play:
|
|
2671
|
+
play: mplay,
|
|
2672
|
+
// play: async (bite, onPlay) => {
|
|
2673
|
+
// // const tempBite = {...bite}
|
|
2674
|
+
// if (bite?._id !== selectedBlerp?._id) {
|
|
2675
|
+
// setPlayState("playing")
|
|
2676
|
+
// setSelectedBlerp({...bite})
|
|
2677
|
+
// return
|
|
2678
|
+
// }
|
|
2679
|
+
// if (playState === "playing" && bite?._id === selectedBlerp?._id) {
|
|
2680
|
+
// setPlayState("paused")
|
|
2681
|
+
// return
|
|
2682
|
+
// }
|
|
2683
|
+
// if (bite?._id === selectedBlerp?._id) {
|
|
2684
|
+
// setPlayState("playing")
|
|
2685
|
+
// return
|
|
2686
|
+
// }
|
|
2687
|
+
// },
|
|
2365
2688
|
stop: function () {
|
|
2366
2689
|
var _stop = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee4() {
|
|
2367
|
-
var _audioRef$current;
|
|
2368
|
-
|
|
2369
2690
|
return _regeneratorRuntime__default['default'].wrap(function _callee4$(_context4) {
|
|
2370
2691
|
while (1) {
|
|
2371
2692
|
switch (_context4.prev = _context4.next) {
|
|
2372
2693
|
case 0:
|
|
2373
|
-
setPlayState("stopped");
|
|
2374
|
-
|
|
2375
|
-
return (_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.pause();
|
|
2376
|
-
|
|
2377
|
-
case 3:
|
|
2378
|
-
audioRef.current.currentTime = 0;
|
|
2694
|
+
setPlayState("stopped"); // await audioRef.current?.pause();
|
|
2695
|
+
// audioRef.current.currentTime = 0;
|
|
2379
2696
|
|
|
2380
|
-
case
|
|
2697
|
+
case 1:
|
|
2381
2698
|
case "end":
|
|
2382
2699
|
return _context4.stop();
|
|
2383
2700
|
}
|
|
@@ -2391,13 +2708,12 @@
|
|
|
2391
2708
|
|
|
2392
2709
|
return stop;
|
|
2393
2710
|
}(),
|
|
2394
|
-
getPlayState: function getPlayState(
|
|
2395
|
-
var biteId = _ref7.biteId;
|
|
2396
|
-
|
|
2711
|
+
getPlayState: function getPlayState(biteId) {
|
|
2397
2712
|
if (biteId === (selectedBlerp && selectedBlerp._id)) {
|
|
2398
2713
|
return playState;
|
|
2399
2714
|
}
|
|
2400
2715
|
},
|
|
2716
|
+
setPlayState: setPlayState,
|
|
2401
2717
|
setStartTime: setStartTime
|
|
2402
2718
|
}
|
|
2403
2719
|
}, children);
|
|
@@ -91135,6 +91451,8 @@
|
|
|
91135
91451
|
var Popover = material.Popover;
|
|
91136
91452
|
var Blerp = Blerp$1;
|
|
91137
91453
|
var NewBlerp = NewBlerp$1;
|
|
91454
|
+
var GroupCard = GroupCard$1;
|
|
91455
|
+
var UserCard = UserCard$1;
|
|
91138
91456
|
var BlerpAudioContextProvider = BlerpAudioContextProvider$1;
|
|
91139
91457
|
var IconButton = material.IconButton;
|
|
91140
91458
|
var Toggle = Toggle$1;
|
|
@@ -91431,6 +91749,7 @@
|
|
|
91431
91749
|
exports.FloatingActionButton = FloatingActionButton;
|
|
91432
91750
|
exports.GiftIcon = GiftIcon;
|
|
91433
91751
|
exports.Grid = Grid;
|
|
91752
|
+
exports.GroupCard = GroupCard;
|
|
91434
91753
|
exports.IconButton = IconButton;
|
|
91435
91754
|
exports.ImageList = ImageList;
|
|
91436
91755
|
exports.Input = Input;
|
|
@@ -91486,6 +91805,7 @@
|
|
|
91486
91805
|
exports.TwitchBitIcon = TwitchBitIcon;
|
|
91487
91806
|
exports.TwitchIcon = TwitchIcon;
|
|
91488
91807
|
exports.UnsafeIcon = UnsafeIcon;
|
|
91808
|
+
exports.UserCard = UserCard;
|
|
91489
91809
|
exports.UserLibraryHeader = UserLibraryHeader;
|
|
91490
91810
|
exports.UserProfileHeader = UserProfileHeader;
|
|
91491
91811
|
exports.WalkonIcon = WalkonIcon;
|