@blerp/design 1.2.37 → 1.2.39
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 +35 -23
- package/dist/index.esm.js +34 -22
- package/dist/index.umd.js +38 -25
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -12,8 +12,6 @@ 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 AddRoundedIcon = require('@mui/icons-material/AddRounded');
|
|
16
|
-
require('@mui/icons-material/ArrowDropDownRounded');
|
|
17
15
|
var DoNotDisturbRoundedIcon = require('@mui/icons-material/DoNotDisturbRounded');
|
|
18
16
|
var FavoriteIcon = require('@mui/icons-material/Favorite');
|
|
19
17
|
var FavoriteBorderIcon = require('@mui/icons-material/FavoriteBorder');
|
|
@@ -39,6 +37,7 @@ var styles = require('@mui/material/styles');
|
|
|
39
37
|
var Slide = require('@mui/material/Slide');
|
|
40
38
|
var Fade = require('@mui/material/Fade');
|
|
41
39
|
var Lottie = require('react-lottie');
|
|
40
|
+
var AddRoundedIcon = require('@mui/icons-material/AddRounded');
|
|
42
41
|
var FacebookIcon = require('@mui/icons-material/Facebook');
|
|
43
42
|
var InstagramIcon = require('@mui/icons-material/Instagram');
|
|
44
43
|
var ModeEditRoundedIcon = require('@mui/icons-material/ModeEditRounded');
|
|
@@ -89,7 +88,6 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
89
88
|
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
|
|
90
89
|
var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
|
|
91
90
|
var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
|
|
92
|
-
var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
|
|
93
91
|
var DoNotDisturbRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DoNotDisturbRoundedIcon);
|
|
94
92
|
var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
|
|
95
93
|
var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBorderIcon);
|
|
@@ -113,6 +111,7 @@ var InsertPhotoRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(InsertP
|
|
|
113
111
|
var Slide__default = /*#__PURE__*/_interopDefaultLegacy(Slide);
|
|
114
112
|
var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
|
|
115
113
|
var Lottie__default = /*#__PURE__*/_interopDefaultLegacy(Lottie);
|
|
114
|
+
var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
|
|
116
115
|
var FacebookIcon__default = /*#__PURE__*/_interopDefaultLegacy(FacebookIcon);
|
|
117
116
|
var InstagramIcon__default = /*#__PURE__*/_interopDefaultLegacy(InstagramIcon);
|
|
118
117
|
var ModeEditRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ModeEditRoundedIcon);
|
|
@@ -1781,7 +1780,9 @@ var PremiumContainer = styled__default['default'].div(_templateObject$g || (_tem
|
|
|
1781
1780
|
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) {
|
|
1782
1781
|
return props.theme.colors.grey7;
|
|
1783
1782
|
});
|
|
1784
|
-
var HoverScrollText = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n width: 100%;\n max-width: 280px;\n min-width:
|
|
1783
|
+
var HoverScrollText = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n width: 100%;\n max-width: 280px;\n min-width: 190px;\n height: 23px;\n overflow: hidden;\n line-height: 30px;\n box-sizing: border-box;\n position: relative;\n margin: 10px 0 5px 0;\n cursor: pointer;\n & p {\n cursor: default;\n position: absolute;\n white-space: nowrap;\n transform: translateX(0);\n transition: 1s;\n }\n\n &:hover p {\n ", "\n text-decoration: underline;\n cursor: pointer;\n }\n"])), function (props) {
|
|
1784
|
+
return props.hover && "transform: translateX(calc(180px - 100%));";
|
|
1785
|
+
});
|
|
1785
1786
|
var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
|
|
1786
1787
|
var saved = _ref.saved,
|
|
1787
1788
|
count = _ref.count,
|
|
@@ -2018,13 +2019,9 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
|
|
|
2018
2019
|
onPlusClick = _ref5.onPlusClick,
|
|
2019
2020
|
_onOptionClicked = _ref5.onOptionClicked,
|
|
2020
2021
|
selectedOption = _ref5.selectedOption,
|
|
2021
|
-
renderAddContentButton = _ref5.renderAddContentButton
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
_useState6 = _slicedToArray__default['default'](_useState5, 2),
|
|
2025
|
-
hoveringAddTo = _useState6[0],
|
|
2026
|
-
setHoveringAddTo = _useState6[1];
|
|
2027
|
-
|
|
2022
|
+
renderAddContentButton = _ref5.renderAddContentButton,
|
|
2023
|
+
hoveringAddTo = _ref5.hoveringAddTo,
|
|
2024
|
+
setHoveringAddTo = _ref5.setHoveringAddTo;
|
|
2028
2025
|
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2029
2026
|
direction: "row",
|
|
2030
2027
|
justifyContent: "space-between",
|
|
@@ -2044,7 +2041,7 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
|
|
|
2044
2041
|
|
|
2045
2042
|
}
|
|
2046
2043
|
}, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
|
|
2047
|
-
rating: bite === null || bite === void 0 ? void 0 : bite.
|
|
2044
|
+
rating: bite === null || bite === void 0 ? void 0 : bite.audienceRating
|
|
2048
2045
|
}), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
|
|
2049
2046
|
item: bite,
|
|
2050
2047
|
hovering: hovering
|
|
@@ -2062,7 +2059,7 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
|
|
|
2062
2059
|
};
|
|
2063
2060
|
|
|
2064
2061
|
var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
2065
|
-
var _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original;
|
|
2062
|
+
var _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
|
|
2066
2063
|
|
|
2067
2064
|
var Waveform = _ref6.Waveform,
|
|
2068
2065
|
bite = _ref6.bite,
|
|
@@ -2091,17 +2088,25 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
|
2091
2088
|
selectedOption = _ref6.selectedOption,
|
|
2092
2089
|
_ref6$trending = _ref6.trending,
|
|
2093
2090
|
trending = _ref6$trending === void 0 ? false : _ref6$trending,
|
|
2094
|
-
renderAddContentButton = _ref6.renderAddContentButton
|
|
2091
|
+
renderAddContentButton = _ref6.renderAddContentButton,
|
|
2092
|
+
renderThreeDot = _ref6.renderThreeDot;
|
|
2093
|
+
|
|
2094
|
+
var _useState5 = React.useState(false),
|
|
2095
|
+
_useState6 = _slicedToArray__default['default'](_useState5, 2),
|
|
2096
|
+
hovering = _useState6[0],
|
|
2097
|
+
setHovering = _useState6[1];
|
|
2095
2098
|
|
|
2096
2099
|
var _useState7 = React.useState(false),
|
|
2097
2100
|
_useState8 = _slicedToArray__default['default'](_useState7, 2),
|
|
2098
|
-
|
|
2099
|
-
|
|
2101
|
+
addedToPlace = _useState8[0],
|
|
2102
|
+
setAddedToPlace = _useState8[1];
|
|
2100
2103
|
|
|
2101
2104
|
var _useState9 = React.useState(false),
|
|
2102
2105
|
_useState10 = _slicedToArray__default['default'](_useState9, 2),
|
|
2103
|
-
|
|
2104
|
-
|
|
2106
|
+
hoveringAddTo = _useState10[0],
|
|
2107
|
+
setHoveringAddTo = _useState10[1];
|
|
2108
|
+
|
|
2109
|
+
var titleRef = React.useRef(null);
|
|
2105
2110
|
|
|
2106
2111
|
var renderPlayStateIcon = function renderPlayStateIcon() {
|
|
2107
2112
|
if (playState === "played") {
|
|
@@ -2241,19 +2246,23 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
|
2241
2246
|
hovering: hovering,
|
|
2242
2247
|
onPlusClick: handleAddToPlace,
|
|
2243
2248
|
selectedOption: selectedOption,
|
|
2244
|
-
renderAddContentButton: renderAddContentButton
|
|
2249
|
+
renderAddContentButton: renderAddContentButton,
|
|
2250
|
+
hoveringAddTo: hoveringAddTo,
|
|
2251
|
+
setHoveringAddTo: setHoveringAddTo
|
|
2245
2252
|
}), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2246
2253
|
sx: {
|
|
2247
2254
|
transition: "0.3s",
|
|
2248
|
-
opacity: hovering ? "1" : "0",
|
|
2255
|
+
opacity: hovering && !hoveringAddTo ? "1" : "0",
|
|
2249
2256
|
pointerEvents: "none",
|
|
2250
2257
|
zIndex: "3"
|
|
2251
2258
|
}
|
|
2252
2259
|
}, renderPlayStateIcon()), Waveform({
|
|
2253
2260
|
hovering: hovering
|
|
2254
2261
|
})), /*#__PURE__*/React__default['default'].createElement(HoverScrollText, {
|
|
2262
|
+
hover: ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : (_titleRef$current$get = _titleRef$current.getBoundingClientRect()) === null || _titleRef$current$get === void 0 ? void 0 : _titleRef$current$get.width) > 190,
|
|
2255
2263
|
onClick: onTitleClick
|
|
2256
2264
|
}, /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
2265
|
+
ref: titleRef,
|
|
2257
2266
|
sx: {
|
|
2258
2267
|
fontSize: "16px",
|
|
2259
2268
|
fontWeight: "400",
|
|
@@ -2264,11 +2273,14 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
|
2264
2273
|
position: "absolute",
|
|
2265
2274
|
right: "0",
|
|
2266
2275
|
top: "0",
|
|
2267
|
-
width: "
|
|
2276
|
+
width: "50px",
|
|
2268
2277
|
height: "100%",
|
|
2269
|
-
|
|
2278
|
+
display: "flex",
|
|
2279
|
+
alignItems: "flex-end",
|
|
2280
|
+
justifyContent: "center",
|
|
2281
|
+
background: "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
|
|
2270
2282
|
}
|
|
2271
|
-
})), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2283
|
+
}, renderThreeDot())), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2272
2284
|
direction: "row",
|
|
2273
2285
|
alignItems: "center",
|
|
2274
2286
|
sx: {
|
package/dist/index.esm.js
CHANGED
|
@@ -9,8 +9,6 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral
|
|
|
9
9
|
import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, 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 AddRoundedIcon from '@mui/icons-material/AddRounded';
|
|
13
|
-
import '@mui/icons-material/ArrowDropDownRounded';
|
|
14
12
|
import DoNotDisturbRoundedIcon from '@mui/icons-material/DoNotDisturbRounded';
|
|
15
13
|
import FavoriteIcon from '@mui/icons-material/Favorite';
|
|
16
14
|
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
|
@@ -36,6 +34,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
|
|
|
36
34
|
import Slide from '@mui/material/Slide';
|
|
37
35
|
import Fade from '@mui/material/Fade';
|
|
38
36
|
import Lottie from 'react-lottie';
|
|
37
|
+
import AddRoundedIcon from '@mui/icons-material/AddRounded';
|
|
39
38
|
import FacebookIcon from '@mui/icons-material/Facebook';
|
|
40
39
|
import InstagramIcon from '@mui/icons-material/Instagram';
|
|
41
40
|
import ModeEditRoundedIcon from '@mui/icons-material/ModeEditRounded';
|
|
@@ -1706,7 +1705,9 @@ var PremiumContainer = styled.div(_templateObject$g || (_templateObject$g = _tag
|
|
|
1706
1705
|
var Container$1 = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\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) {
|
|
1707
1706
|
return props.theme.colors.grey7;
|
|
1708
1707
|
});
|
|
1709
|
-
var HoverScrollText = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n width: 100%;\n max-width: 280px;\n min-width:
|
|
1708
|
+
var HoverScrollText = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n width: 100%;\n max-width: 280px;\n min-width: 190px;\n height: 23px;\n overflow: hidden;\n line-height: 30px;\n box-sizing: border-box;\n position: relative;\n margin: 10px 0 5px 0;\n cursor: pointer;\n & p {\n cursor: default;\n position: absolute;\n white-space: nowrap;\n transform: translateX(0);\n transition: 1s;\n }\n\n &:hover p {\n ", "\n text-decoration: underline;\n cursor: pointer;\n }\n"])), function (props) {
|
|
1709
|
+
return props.hover && "transform: translateX(calc(180px - 100%));";
|
|
1710
|
+
});
|
|
1710
1711
|
var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
|
|
1711
1712
|
var saved = _ref.saved,
|
|
1712
1713
|
count = _ref.count,
|
|
@@ -1943,13 +1944,9 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
|
|
|
1943
1944
|
onPlusClick = _ref5.onPlusClick,
|
|
1944
1945
|
_onOptionClicked = _ref5.onOptionClicked,
|
|
1945
1946
|
selectedOption = _ref5.selectedOption,
|
|
1946
|
-
renderAddContentButton = _ref5.renderAddContentButton
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
1950
|
-
hoveringAddTo = _useState6[0],
|
|
1951
|
-
setHoveringAddTo = _useState6[1];
|
|
1952
|
-
|
|
1947
|
+
renderAddContentButton = _ref5.renderAddContentButton,
|
|
1948
|
+
hoveringAddTo = _ref5.hoveringAddTo,
|
|
1949
|
+
setHoveringAddTo = _ref5.setHoveringAddTo;
|
|
1953
1950
|
return /*#__PURE__*/React__default.createElement(Stack, {
|
|
1954
1951
|
direction: "row",
|
|
1955
1952
|
justifyContent: "space-between",
|
|
@@ -1969,7 +1966,7 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
|
|
|
1969
1966
|
|
|
1970
1967
|
}
|
|
1971
1968
|
}, /*#__PURE__*/React__default.createElement(RatingInfo, {
|
|
1972
|
-
rating: bite === null || bite === void 0 ? void 0 : bite.
|
|
1969
|
+
rating: bite === null || bite === void 0 ? void 0 : bite.audienceRating
|
|
1973
1970
|
}), /*#__PURE__*/React__default.createElement(AddedToIcons, {
|
|
1974
1971
|
item: bite,
|
|
1975
1972
|
hovering: hovering
|
|
@@ -1987,7 +1984,7 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
|
|
|
1987
1984
|
};
|
|
1988
1985
|
|
|
1989
1986
|
var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
1990
|
-
var _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original;
|
|
1987
|
+
var _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
|
|
1991
1988
|
|
|
1992
1989
|
var Waveform = _ref6.Waveform,
|
|
1993
1990
|
bite = _ref6.bite,
|
|
@@ -2016,17 +2013,25 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
|
2016
2013
|
selectedOption = _ref6.selectedOption,
|
|
2017
2014
|
_ref6$trending = _ref6.trending,
|
|
2018
2015
|
trending = _ref6$trending === void 0 ? false : _ref6$trending,
|
|
2019
|
-
renderAddContentButton = _ref6.renderAddContentButton
|
|
2016
|
+
renderAddContentButton = _ref6.renderAddContentButton,
|
|
2017
|
+
renderThreeDot = _ref6.renderThreeDot;
|
|
2018
|
+
|
|
2019
|
+
var _useState5 = useState(false),
|
|
2020
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
2021
|
+
hovering = _useState6[0],
|
|
2022
|
+
setHovering = _useState6[1];
|
|
2020
2023
|
|
|
2021
2024
|
var _useState7 = useState(false),
|
|
2022
2025
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
2023
|
-
|
|
2024
|
-
|
|
2026
|
+
addedToPlace = _useState8[0],
|
|
2027
|
+
setAddedToPlace = _useState8[1];
|
|
2025
2028
|
|
|
2026
2029
|
var _useState9 = useState(false),
|
|
2027
2030
|
_useState10 = _slicedToArray(_useState9, 2),
|
|
2028
|
-
|
|
2029
|
-
|
|
2031
|
+
hoveringAddTo = _useState10[0],
|
|
2032
|
+
setHoveringAddTo = _useState10[1];
|
|
2033
|
+
|
|
2034
|
+
var titleRef = useRef(null);
|
|
2030
2035
|
|
|
2031
2036
|
var renderPlayStateIcon = function renderPlayStateIcon() {
|
|
2032
2037
|
if (playState === "played") {
|
|
@@ -2166,19 +2171,23 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
|
2166
2171
|
hovering: hovering,
|
|
2167
2172
|
onPlusClick: handleAddToPlace,
|
|
2168
2173
|
selectedOption: selectedOption,
|
|
2169
|
-
renderAddContentButton: renderAddContentButton
|
|
2174
|
+
renderAddContentButton: renderAddContentButton,
|
|
2175
|
+
hoveringAddTo: hoveringAddTo,
|
|
2176
|
+
setHoveringAddTo: setHoveringAddTo
|
|
2170
2177
|
}), /*#__PURE__*/React__default.createElement(Stack, {
|
|
2171
2178
|
sx: {
|
|
2172
2179
|
transition: "0.3s",
|
|
2173
|
-
opacity: hovering ? "1" : "0",
|
|
2180
|
+
opacity: hovering && !hoveringAddTo ? "1" : "0",
|
|
2174
2181
|
pointerEvents: "none",
|
|
2175
2182
|
zIndex: "3"
|
|
2176
2183
|
}
|
|
2177
2184
|
}, renderPlayStateIcon()), Waveform({
|
|
2178
2185
|
hovering: hovering
|
|
2179
2186
|
})), /*#__PURE__*/React__default.createElement(HoverScrollText, {
|
|
2187
|
+
hover: ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : (_titleRef$current$get = _titleRef$current.getBoundingClientRect()) === null || _titleRef$current$get === void 0 ? void 0 : _titleRef$current$get.width) > 190,
|
|
2180
2188
|
onClick: onTitleClick
|
|
2181
2189
|
}, /*#__PURE__*/React__default.createElement(Text, {
|
|
2190
|
+
ref: titleRef,
|
|
2182
2191
|
sx: {
|
|
2183
2192
|
fontSize: "16px",
|
|
2184
2193
|
fontWeight: "400",
|
|
@@ -2189,11 +2198,14 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
|
2189
2198
|
position: "absolute",
|
|
2190
2199
|
right: "0",
|
|
2191
2200
|
top: "0",
|
|
2192
|
-
width: "
|
|
2201
|
+
width: "50px",
|
|
2193
2202
|
height: "100%",
|
|
2194
|
-
|
|
2203
|
+
display: "flex",
|
|
2204
|
+
alignItems: "flex-end",
|
|
2205
|
+
justifyContent: "center",
|
|
2206
|
+
background: "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
|
|
2195
2207
|
}
|
|
2196
|
-
})), /*#__PURE__*/React__default.createElement(Stack, {
|
|
2208
|
+
}, renderThreeDot())), /*#__PURE__*/React__default.createElement(Stack, {
|
|
2197
2209
|
direction: "row",
|
|
2198
2210
|
alignItems: "center",
|
|
2199
2211
|
sx: {
|
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/
|
|
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/
|
|
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.
|
|
5
|
-
}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon,
|
|
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('@babel/runtime/helpers/defineProperty'), 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'), require('@mui/icons-material/VisibilityOffRounded')) :
|
|
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', '@babel/runtime/helpers/defineProperty', '@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', '@mui/icons-material/VisibilityOffRounded'], 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.DoNotDisturbRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, global._defineProperty, 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, global.VisibilityOffRoundedIcon));
|
|
5
|
+
}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, DoNotDisturbRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, _defineProperty, _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, VisibilityOffRoundedIcon) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
@@ -34,7 +34,6 @@
|
|
|
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 AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
|
|
38
37
|
var DoNotDisturbRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DoNotDisturbRoundedIcon);
|
|
39
38
|
var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
|
|
40
39
|
var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBorderIcon);
|
|
@@ -58,6 +57,7 @@
|
|
|
58
57
|
var Slide__default = /*#__PURE__*/_interopDefaultLegacy(Slide);
|
|
59
58
|
var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
|
|
60
59
|
var Lottie__default = /*#__PURE__*/_interopDefaultLegacy(Lottie);
|
|
60
|
+
var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
|
|
61
61
|
var FacebookIcon__default = /*#__PURE__*/_interopDefaultLegacy(FacebookIcon);
|
|
62
62
|
var InstagramIcon__default = /*#__PURE__*/_interopDefaultLegacy(InstagramIcon);
|
|
63
63
|
var ModeEditRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ModeEditRoundedIcon);
|
|
@@ -1726,7 +1726,9 @@
|
|
|
1726
1726
|
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) {
|
|
1727
1727
|
return props.theme.colors.grey7;
|
|
1728
1728
|
});
|
|
1729
|
-
var HoverScrollText = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n width: 100%;\n max-width: 280px;\n min-width:
|
|
1729
|
+
var HoverScrollText = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n width: 100%;\n max-width: 280px;\n min-width: 190px;\n height: 23px;\n overflow: hidden;\n line-height: 30px;\n box-sizing: border-box;\n position: relative;\n margin: 10px 0 5px 0;\n cursor: pointer;\n & p {\n cursor: default;\n position: absolute;\n white-space: nowrap;\n transform: translateX(0);\n transition: 1s;\n }\n\n &:hover p {\n ", "\n text-decoration: underline;\n cursor: pointer;\n }\n"])), function (props) {
|
|
1730
|
+
return props.hover && "transform: translateX(calc(180px - 100%));";
|
|
1731
|
+
});
|
|
1730
1732
|
var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
|
|
1731
1733
|
var saved = _ref.saved,
|
|
1732
1734
|
count = _ref.count,
|
|
@@ -1963,13 +1965,9 @@
|
|
|
1963
1965
|
onPlusClick = _ref5.onPlusClick,
|
|
1964
1966
|
_onOptionClicked = _ref5.onOptionClicked,
|
|
1965
1967
|
selectedOption = _ref5.selectedOption,
|
|
1966
|
-
renderAddContentButton = _ref5.renderAddContentButton
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
_useState6 = _slicedToArray__default['default'](_useState5, 2),
|
|
1970
|
-
hoveringAddTo = _useState6[0],
|
|
1971
|
-
setHoveringAddTo = _useState6[1];
|
|
1972
|
-
|
|
1968
|
+
renderAddContentButton = _ref5.renderAddContentButton,
|
|
1969
|
+
hoveringAddTo = _ref5.hoveringAddTo,
|
|
1970
|
+
setHoveringAddTo = _ref5.setHoveringAddTo;
|
|
1973
1971
|
return /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1974
1972
|
direction: "row",
|
|
1975
1973
|
justifyContent: "space-between",
|
|
@@ -1989,7 +1987,7 @@
|
|
|
1989
1987
|
|
|
1990
1988
|
}
|
|
1991
1989
|
}, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
|
|
1992
|
-
rating: bite === null || bite === void 0 ? void 0 : bite.
|
|
1990
|
+
rating: bite === null || bite === void 0 ? void 0 : bite.audienceRating
|
|
1993
1991
|
}), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
|
|
1994
1992
|
item: bite,
|
|
1995
1993
|
hovering: hovering
|
|
@@ -2007,7 +2005,7 @@
|
|
|
2007
2005
|
};
|
|
2008
2006
|
|
|
2009
2007
|
var NewBlerp$1 = function NewBlerp(_ref6) {
|
|
2010
|
-
var _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original;
|
|
2008
|
+
var _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
|
|
2011
2009
|
|
|
2012
2010
|
var Waveform = _ref6.Waveform,
|
|
2013
2011
|
bite = _ref6.bite,
|
|
@@ -2036,17 +2034,25 @@
|
|
|
2036
2034
|
selectedOption = _ref6.selectedOption,
|
|
2037
2035
|
_ref6$trending = _ref6.trending,
|
|
2038
2036
|
trending = _ref6$trending === void 0 ? false : _ref6$trending,
|
|
2039
|
-
renderAddContentButton = _ref6.renderAddContentButton
|
|
2037
|
+
renderAddContentButton = _ref6.renderAddContentButton,
|
|
2038
|
+
renderThreeDot = _ref6.renderThreeDot;
|
|
2039
|
+
|
|
2040
|
+
var _useState5 = React.useState(false),
|
|
2041
|
+
_useState6 = _slicedToArray__default['default'](_useState5, 2),
|
|
2042
|
+
hovering = _useState6[0],
|
|
2043
|
+
setHovering = _useState6[1];
|
|
2040
2044
|
|
|
2041
2045
|
var _useState7 = React.useState(false),
|
|
2042
2046
|
_useState8 = _slicedToArray__default['default'](_useState7, 2),
|
|
2043
|
-
|
|
2044
|
-
|
|
2047
|
+
addedToPlace = _useState8[0],
|
|
2048
|
+
setAddedToPlace = _useState8[1];
|
|
2045
2049
|
|
|
2046
2050
|
var _useState9 = React.useState(false),
|
|
2047
2051
|
_useState10 = _slicedToArray__default['default'](_useState9, 2),
|
|
2048
|
-
|
|
2049
|
-
|
|
2052
|
+
hoveringAddTo = _useState10[0],
|
|
2053
|
+
setHoveringAddTo = _useState10[1];
|
|
2054
|
+
|
|
2055
|
+
var titleRef = React.useRef(null);
|
|
2050
2056
|
|
|
2051
2057
|
var renderPlayStateIcon = function renderPlayStateIcon() {
|
|
2052
2058
|
if (playState === "played") {
|
|
@@ -2186,19 +2192,23 @@
|
|
|
2186
2192
|
hovering: hovering,
|
|
2187
2193
|
onPlusClick: handleAddToPlace,
|
|
2188
2194
|
selectedOption: selectedOption,
|
|
2189
|
-
renderAddContentButton: renderAddContentButton
|
|
2195
|
+
renderAddContentButton: renderAddContentButton,
|
|
2196
|
+
hoveringAddTo: hoveringAddTo,
|
|
2197
|
+
setHoveringAddTo: setHoveringAddTo
|
|
2190
2198
|
}), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2191
2199
|
sx: {
|
|
2192
2200
|
transition: "0.3s",
|
|
2193
|
-
opacity: hovering ? "1" : "0",
|
|
2201
|
+
opacity: hovering && !hoveringAddTo ? "1" : "0",
|
|
2194
2202
|
pointerEvents: "none",
|
|
2195
2203
|
zIndex: "3"
|
|
2196
2204
|
}
|
|
2197
2205
|
}, renderPlayStateIcon()), Waveform({
|
|
2198
2206
|
hovering: hovering
|
|
2199
2207
|
})), /*#__PURE__*/React__default['default'].createElement(HoverScrollText, {
|
|
2208
|
+
hover: ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : (_titleRef$current$get = _titleRef$current.getBoundingClientRect()) === null || _titleRef$current$get === void 0 ? void 0 : _titleRef$current$get.width) > 190,
|
|
2200
2209
|
onClick: onTitleClick
|
|
2201
2210
|
}, /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
2211
|
+
ref: titleRef,
|
|
2202
2212
|
sx: {
|
|
2203
2213
|
fontSize: "16px",
|
|
2204
2214
|
fontWeight: "400",
|
|
@@ -2209,11 +2219,14 @@
|
|
|
2209
2219
|
position: "absolute",
|
|
2210
2220
|
right: "0",
|
|
2211
2221
|
top: "0",
|
|
2212
|
-
width: "
|
|
2222
|
+
width: "50px",
|
|
2213
2223
|
height: "100%",
|
|
2214
|
-
|
|
2224
|
+
display: "flex",
|
|
2225
|
+
alignItems: "flex-end",
|
|
2226
|
+
justifyContent: "center",
|
|
2227
|
+
background: "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
|
|
2215
2228
|
}
|
|
2216
|
-
})), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2229
|
+
}, renderThreeDot())), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2217
2230
|
direction: "row",
|
|
2218
2231
|
alignItems: "center",
|
|
2219
2232
|
sx: {
|