@blerp/design 1.2.34 → 1.2.37
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 +20 -414
- package/dist/index.esm.js +20 -414
- package/dist/index.umd.js +20 -414
- package/package.json +1 -1
package/dist/index.umd.js
CHANGED
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
|
|
77
77
|
var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
|
|
78
78
|
|
|
79
|
-
var _templateObject$j, _templateObject2$b, _templateObject3$
|
|
79
|
+
var _templateObject$j, _templateObject2$b, _templateObject3$9, _templateObject4$7;
|
|
80
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
|
});
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
}, function (props) {
|
|
88
88
|
return props.theme.colors.white;
|
|
89
89
|
});
|
|
90
|
-
var BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$
|
|
90
|
+
var BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "70;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
|
|
91
91
|
return props.theme.colors.grey6Override;
|
|
92
92
|
}, function (props) {
|
|
93
93
|
return props.theme.colors.grey6Override;
|
|
@@ -1721,284 +1721,12 @@
|
|
|
1721
1721
|
}, user === null || user === void 0 ? void 0 : user.username));
|
|
1722
1722
|
};
|
|
1723
1723
|
|
|
1724
|
-
var _templateObject$g, _templateObject2$a;
|
|
1724
|
+
var _templateObject$g, _templateObject2$a, _templateObject3$8;
|
|
1725
1725
|
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"])));
|
|
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
|
-
});
|
|
1729
|
-
|
|
1730
|
-
// active,
|
|
1731
|
-
// onOptionClicked,
|
|
1732
|
-
// selectedOption,
|
|
1733
|
-
// }) => {
|
|
1734
|
-
// const options = [
|
|
1735
|
-
// {
|
|
1736
|
-
// name: "Channel Points",
|
|
1737
|
-
// value: "CHANNEL_POINTS",
|
|
1738
|
-
// added: item?.channelPointsContext?._id,
|
|
1739
|
-
// },
|
|
1740
|
-
// { name: "Bits", value: "BITS", added: item?.whitelistContext?._id },
|
|
1741
|
-
// { name: "WalkOn", value: "WALK_ON", added: item?.walkOnContext?._id },
|
|
1742
|
-
// { name: "Discord", value: "DISCORD", added: item?.discordContext?._id },
|
|
1743
|
-
// {
|
|
1744
|
-
// name: "Sound Emotes",
|
|
1745
|
-
// value: "SOUND_EMOTES",
|
|
1746
|
-
// added: item?.soundEmotesContext?._id,
|
|
1747
|
-
// },
|
|
1748
|
-
// {
|
|
1749
|
-
// name: "Add To Group",
|
|
1750
|
-
// value: "ADD_TO_GROUP",
|
|
1751
|
-
// added: false,
|
|
1752
|
-
// },
|
|
1753
|
-
// {
|
|
1754
|
-
// name: "Suggest To...",
|
|
1755
|
-
// value: "SUGGEST",
|
|
1756
|
-
// added: false,
|
|
1757
|
-
// },
|
|
1758
|
-
// ];
|
|
1759
|
-
// const anchorRef = useRef(null);
|
|
1760
|
-
// const [anchor, setAnchor] = useState(null);
|
|
1761
|
-
// const open = Boolean(anchor);
|
|
1762
|
-
// return (
|
|
1763
|
-
// <>
|
|
1764
|
-
// <Button
|
|
1765
|
-
// ref={anchorRef}
|
|
1766
|
-
// color="whiteOverride"
|
|
1767
|
-
// variant="outlined"
|
|
1768
|
-
// onClick={(e) => {
|
|
1769
|
-
// if (active) setAnchor(anchorRef?.current);
|
|
1770
|
-
// }}
|
|
1771
|
-
// sx={{
|
|
1772
|
-
// width: "100%",
|
|
1773
|
-
// height: "30px",
|
|
1774
|
-
// transition: "0.3s",
|
|
1775
|
-
// cursor: active ? "pointer" : "default",
|
|
1776
|
-
// justifyContent: "space-between",
|
|
1777
|
-
// marginRight: "10px",
|
|
1778
|
-
// backgroundColor: "#2C323380",
|
|
1779
|
-
// opacity: active ? "1" : "0",
|
|
1780
|
-
// whiteSpace: "nowrap",
|
|
1781
|
-
// "&:hover": {
|
|
1782
|
-
// backgroundColor: "grey3.main",
|
|
1783
|
-
// },
|
|
1784
|
-
// }}
|
|
1785
|
-
// endIcon={
|
|
1786
|
-
// <ArrowDropDownRoundedIcon sx={{ pointerEvents: "none" }} />
|
|
1787
|
-
// }
|
|
1788
|
-
// >
|
|
1789
|
-
// {selectedOption?.name || options[0]?.name}
|
|
1790
|
-
// </Button>
|
|
1791
|
-
// <Popover
|
|
1792
|
-
// open={open}
|
|
1793
|
-
// anchorEl={anchor}
|
|
1794
|
-
// anchorOrigin={{
|
|
1795
|
-
// vertical: "top",
|
|
1796
|
-
// horizontal: "left",
|
|
1797
|
-
// }}
|
|
1798
|
-
// transformOrigin={{
|
|
1799
|
-
// vertical: "top",
|
|
1800
|
-
// horizontal: "left",
|
|
1801
|
-
// }}
|
|
1802
|
-
// onClose={() => {
|
|
1803
|
-
// setAnchor(null);
|
|
1804
|
-
// }}
|
|
1805
|
-
// PaperProps={{
|
|
1806
|
-
// sx: {
|
|
1807
|
-
// width: anchor?.getBoundingClientRect().width,
|
|
1808
|
-
// backgroundColor: "#2C323380",
|
|
1809
|
-
// borderRadius: "18px",
|
|
1810
|
-
// padding: "35px 0 0 0",
|
|
1811
|
-
// boxSizing: "border-box",
|
|
1812
|
-
// maxHeight: "160px",
|
|
1813
|
-
// overflowY: "hidden",
|
|
1814
|
-
// },
|
|
1815
|
-
// }}
|
|
1816
|
-
// >
|
|
1817
|
-
// <Stack sx={{ maxHeight: "120px", overflowY: "scroll" }}>
|
|
1818
|
-
// {options?.map((option) => (
|
|
1819
|
-
// <Stack
|
|
1820
|
-
// direction="row"
|
|
1821
|
-
// sx={{
|
|
1822
|
-
// boxSizing: "border-box",
|
|
1823
|
-
// justifyContent: "space-between",
|
|
1824
|
-
// alignItems: "center",
|
|
1825
|
-
// width: "100%",
|
|
1826
|
-
// height: "100%",
|
|
1827
|
-
// padding: "6px 5px 6px 10px",
|
|
1828
|
-
// cursor: "pointer",
|
|
1829
|
-
// transition: "0.3s",
|
|
1830
|
-
// "&:hover": {
|
|
1831
|
-
// backgroundColor: "#474D4F80",
|
|
1832
|
-
// },
|
|
1833
|
-
// "&:hover #added-to-content-icon": {
|
|
1834
|
-
// display: option?.added ? "none" : "block",
|
|
1835
|
-
// opacity: "1",
|
|
1836
|
-
// },
|
|
1837
|
-
// "&:hover #remove-from-content-icon": {
|
|
1838
|
-
// display: option?.added ? "block" : "none",
|
|
1839
|
-
// opacity: option?.added ? "1" : "0",
|
|
1840
|
-
// },
|
|
1841
|
-
// }}
|
|
1842
|
-
// onClick={() => {
|
|
1843
|
-
// if (onOptionClicked) onOptionClicked(option);
|
|
1844
|
-
// setAnchor(null);
|
|
1845
|
-
// }}
|
|
1846
|
-
// >
|
|
1847
|
-
// <Text
|
|
1848
|
-
// sx={{
|
|
1849
|
-
// fontSize: "14px",
|
|
1850
|
-
// fontWeight: "400",
|
|
1851
|
-
// }}
|
|
1852
|
-
// >
|
|
1853
|
-
// {option.name}
|
|
1854
|
-
// </Text>
|
|
1855
|
-
// <CheckRounded
|
|
1856
|
-
// id="added-to-content-icon"
|
|
1857
|
-
// sx={{
|
|
1858
|
-
// transition: "0.3s",
|
|
1859
|
-
// opacity: option.added ? "1" : "0",
|
|
1860
|
-
// }}
|
|
1861
|
-
// />
|
|
1862
|
-
// <CloseRounded
|
|
1863
|
-
// id="remove-from-content-icon"
|
|
1864
|
-
// sx={{
|
|
1865
|
-
// transition: "0.3s",
|
|
1866
|
-
// display: "none",
|
|
1867
|
-
// opacity: "0",
|
|
1868
|
-
// }}
|
|
1869
|
-
// />
|
|
1870
|
-
// </Stack>
|
|
1871
|
-
// ))}
|
|
1872
|
-
// </Stack>
|
|
1873
|
-
// </Popover>
|
|
1874
|
-
// </>
|
|
1875
|
-
// );
|
|
1876
|
-
// };
|
|
1877
|
-
// const AddContentButton = ({
|
|
1878
|
-
// item,
|
|
1879
|
-
// hovering,
|
|
1880
|
-
// hoveringAddTo,
|
|
1881
|
-
// setHoveringAddTo,
|
|
1882
|
-
// openPremiumModal,
|
|
1883
|
-
// onOptionClicked,
|
|
1884
|
-
// onPlusClick,
|
|
1885
|
-
// selectedOption,
|
|
1886
|
-
// isUnownedPremium,
|
|
1887
|
-
// }) => {
|
|
1888
|
-
// let added = false;
|
|
1889
|
-
// if (item?.whitelistContext?._id && selectedOption?.value === "BITS") {
|
|
1890
|
-
// added = true;
|
|
1891
|
-
// } else if (
|
|
1892
|
-
// item?.channelPointsContext?._id &&
|
|
1893
|
-
// selectedOption?.value === "CHANNEL_POINTS"
|
|
1894
|
-
// ) {
|
|
1895
|
-
// added = true;
|
|
1896
|
-
// } else if (
|
|
1897
|
-
// item?.walkOnContext?._id &&
|
|
1898
|
-
// selectedOption?.value === "WALK_ON"
|
|
1899
|
-
// ) {
|
|
1900
|
-
// added = true;
|
|
1901
|
-
// } else if (
|
|
1902
|
-
// item?.discordContext?._id &&
|
|
1903
|
-
// selectedOption?.value === "DISCORD"
|
|
1904
|
-
// ) {
|
|
1905
|
-
// added = true;
|
|
1906
|
-
// }
|
|
1907
|
-
// return (
|
|
1908
|
-
// <Stack
|
|
1909
|
-
// direction="row"
|
|
1910
|
-
// width={hoveringAddTo ? "100%" : "60%"}
|
|
1911
|
-
// sx={{
|
|
1912
|
-
// justifyContent: "end",
|
|
1913
|
-
// transition: "0.5s",
|
|
1914
|
-
// boxSizing: "border-box",
|
|
1915
|
-
// opacity: hovering ? "1" : "0",
|
|
1916
|
-
// }}
|
|
1917
|
-
// onMouseLeave={() => {
|
|
1918
|
-
// setHoveringAddTo(false);
|
|
1919
|
-
// }}
|
|
1920
|
-
// >
|
|
1921
|
-
// <AddContentDropdown
|
|
1922
|
-
// item={item}
|
|
1923
|
-
// active={hoveringAddTo}
|
|
1924
|
-
// onOptionClicked={onOptionClicked}
|
|
1925
|
-
// selectedOption={selectedOption}
|
|
1926
|
-
// />
|
|
1927
|
-
// {isUnownedPremium ? (
|
|
1928
|
-
// <IconButton
|
|
1929
|
-
// sx={{
|
|
1930
|
-
// width: "30px",
|
|
1931
|
-
// height: "30px",
|
|
1932
|
-
// backgroundColor: "white.override",
|
|
1933
|
-
// "&:hover .open-lock-icon": {
|
|
1934
|
-
// display: "flex !important",
|
|
1935
|
-
// opacity: "1 !important",
|
|
1936
|
-
// },
|
|
1937
|
-
// "&:hover .lock-icon": {
|
|
1938
|
-
// display: "none !important",
|
|
1939
|
-
// opacity: "0 !important",
|
|
1940
|
-
// },
|
|
1941
|
-
// "&:hover": {
|
|
1942
|
-
// backgroundColor: "grey7.main",
|
|
1943
|
-
// },
|
|
1944
|
-
// }}
|
|
1945
|
-
// onClick={(e) => {
|
|
1946
|
-
// e.stopPropagation();
|
|
1947
|
-
// openPremiumModal();
|
|
1948
|
-
// }}
|
|
1949
|
-
// >
|
|
1950
|
-
// <LockRoundedIcon
|
|
1951
|
-
// className="lock-icon"
|
|
1952
|
-
// sx={{
|
|
1953
|
-
// transition: "0.3s",
|
|
1954
|
-
// color: "notBlack.override",
|
|
1955
|
-
// display: "flex",
|
|
1956
|
-
// opacity: "1",
|
|
1957
|
-
// fontSize: "17px",
|
|
1958
|
-
// }}
|
|
1959
|
-
// />
|
|
1960
|
-
// <div
|
|
1961
|
-
// className="open-lock-icon"
|
|
1962
|
-
// style={{ display: "none", opacity: "0" }}
|
|
1963
|
-
// >
|
|
1964
|
-
// <OpenLockIcon
|
|
1965
|
-
// sx={{
|
|
1966
|
-
// transition: "0.3s",
|
|
1967
|
-
// color: "notBlack.override",
|
|
1968
|
-
// fontSize: "17px",
|
|
1969
|
-
// }}
|
|
1970
|
-
// />
|
|
1971
|
-
// </div>
|
|
1972
|
-
// </IconButton>
|
|
1973
|
-
// ) : (
|
|
1974
|
-
// <IconButton
|
|
1975
|
-
// sx={{
|
|
1976
|
-
// width: "30px",
|
|
1977
|
-
// height: "30px",
|
|
1978
|
-
// backgroundColor: "white.override",
|
|
1979
|
-
// "&:hover": {
|
|
1980
|
-
// backgroundColor: "grey7.main",
|
|
1981
|
-
// },
|
|
1982
|
-
// }}
|
|
1983
|
-
// onMouseEnter={(e) => {
|
|
1984
|
-
// e.stopPropagation();
|
|
1985
|
-
// setHoveringAddTo(true);
|
|
1986
|
-
// }}
|
|
1987
|
-
// onClick={() => onPlusClick(added)}
|
|
1988
|
-
// >
|
|
1989
|
-
// <AddRoundedIcon
|
|
1990
|
-
// sx={{
|
|
1991
|
-
// transition: "0.3s",
|
|
1992
|
-
// color: "notBlack.override",
|
|
1993
|
-
// transform: added && "rotate(45deg)",
|
|
1994
|
-
// }}
|
|
1995
|
-
// />
|
|
1996
|
-
// </IconButton>
|
|
1997
|
-
// )}
|
|
1998
|
-
// </Stack>
|
|
1999
|
-
// );
|
|
2000
|
-
// };
|
|
2001
|
-
|
|
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: 210px;\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 &:hover p {\n transform: translateX(calc(180px - 100%));\n text-decoration: underline;\n cursor: pointer;\n }\n"])));
|
|
2002
1730
|
var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
|
|
2003
1731
|
var saved = _ref.saved,
|
|
2004
1732
|
count = _ref.count,
|
|
@@ -2119,126 +1847,7 @@
|
|
|
2119
1847
|
default:
|
|
2120
1848
|
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
|
|
2121
1849
|
}
|
|
2122
|
-
};
|
|
2123
|
-
// const id = bite?._id;
|
|
2124
|
-
// const audio = bite?.audio?.mp3?.url;
|
|
2125
|
-
// const { play, getPlayState, selectedBlerp } = useContext(BlerpAudioContext);
|
|
2126
|
-
// const [hasRendered, setHasRendered] = useState(false);
|
|
2127
|
-
// const [wavesurfer, setWavesurfer] = useState(null);
|
|
2128
|
-
// useEffect(() => {
|
|
2129
|
-
// const create = async () => {
|
|
2130
|
-
// console.log("creating", hovering, wavesurfer, hasRendered);
|
|
2131
|
-
// if (hovering && wavesurfer) {
|
|
2132
|
-
// wavesurfer.load(audio);
|
|
2133
|
-
// } else if (
|
|
2134
|
-
// hovering &&
|
|
2135
|
-
// !wavesurfer &&
|
|
2136
|
-
// !hasRendered &&
|
|
2137
|
-
// document.querySelector(`#blerp-waveform-${id}`) &&
|
|
2138
|
-
// document.querySelector(`#blerp-waveform-${id}`).children
|
|
2139
|
-
// .length === 0
|
|
2140
|
-
// ) {
|
|
2141
|
-
// const WaveSurfer = (await import("@blerp/wavesurfer")).default;
|
|
2142
|
-
// const CursorPlugin = (
|
|
2143
|
-
// await import("@blerp/wavesurfer/src/plugin/cursor")
|
|
2144
|
-
// ).default;
|
|
2145
|
-
// let mWavesurfer = WaveSurfer.create({
|
|
2146
|
-
// container: document.querySelector(`#blerp-waveform-${id}`),
|
|
2147
|
-
// barWidth: 2,
|
|
2148
|
-
// barHeight: 1.5, // the height of the wave
|
|
2149
|
-
// barGap: 2, // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
|
|
2150
|
-
// progressColor: "#ffffff",
|
|
2151
|
-
// hoverColor: "#ffffff99",
|
|
2152
|
-
// barRadius: 2,
|
|
2153
|
-
// height: 30,
|
|
2154
|
-
// hideScrollBar: true,
|
|
2155
|
-
// plugins: [
|
|
2156
|
-
// CursorPlugin.create({
|
|
2157
|
-
// showTime: false,
|
|
2158
|
-
// opacity: 0,
|
|
2159
|
-
// customShowTimeStyle: {
|
|
2160
|
-
// "background-color": "#000",
|
|
2161
|
-
// color: "#fff",
|
|
2162
|
-
// padding: "2px",
|
|
2163
|
-
// "font-size": "10px",
|
|
2164
|
-
// },
|
|
2165
|
-
// }),
|
|
2166
|
-
// ],
|
|
2167
|
-
// });
|
|
2168
|
-
// mWavesurfer.on("error", function (e) {
|
|
2169
|
-
// console.warn(e);
|
|
2170
|
-
// });
|
|
2171
|
-
// mWavesurfer?.on("seek", (prog) => {
|
|
2172
|
-
// if (prog) {
|
|
2173
|
-
// console.log("SEEEEEEK", prog, bite);
|
|
2174
|
-
// mWavesurfer?.setMute(true);
|
|
2175
|
-
// mWavesurfer?.play();
|
|
2176
|
-
// play({
|
|
2177
|
-
// bite: bite,
|
|
2178
|
-
// startTime: mWavesurfer?.getCurrentTime(),
|
|
2179
|
-
// forcePlay: true,
|
|
2180
|
-
// });
|
|
2181
|
-
// }
|
|
2182
|
-
// });
|
|
2183
|
-
// // Load audio from URL
|
|
2184
|
-
// // mWavesurfer.load(audio);
|
|
2185
|
-
// setWavesurfer(mWavesurfer);
|
|
2186
|
-
// setHasRendered(true);
|
|
2187
|
-
// }
|
|
2188
|
-
// };
|
|
2189
|
-
// create();
|
|
2190
|
-
// }, [wavesurfer, bite, play, audio, hovering, hasRendered, id]);
|
|
2191
|
-
// useEffect(() => {
|
|
2192
|
-
// // if (wavesurfer && selectedBlerp?._id === bite?._id) {
|
|
2193
|
-
// // wavesurfer?.on("seek", (prog) => {
|
|
2194
|
-
// // if (prog) {
|
|
2195
|
-
// // console.log("SEEEEEEK", prog, selectedBlerp);
|
|
2196
|
-
// // play({
|
|
2197
|
-
// // bite: bite,
|
|
2198
|
-
// // startTime: wavesurfer?.getCurrentTime(),
|
|
2199
|
-
// // });
|
|
2200
|
-
// // wavesurfer?.setMute(true);
|
|
2201
|
-
// // wavesurfer?.play();
|
|
2202
|
-
// // }
|
|
2203
|
-
// // });
|
|
2204
|
-
// // } else {
|
|
2205
|
-
// // wavesurfer?.un("seek");
|
|
2206
|
-
// // }
|
|
2207
|
-
// if (getPlayState({ biteId: bite?._id }) === "playing") {
|
|
2208
|
-
// wavesurfer?.setMute(true);
|
|
2209
|
-
// wavesurfer?.play();
|
|
2210
|
-
// // Play button
|
|
2211
|
-
// // console.log(wavesurfer.play());
|
|
2212
|
-
// }
|
|
2213
|
-
// if (getPlayState({ biteId: bite?._id }) === "paused") {
|
|
2214
|
-
// wavesurfer?.setMute(true);
|
|
2215
|
-
// wavesurfer?.pause();
|
|
2216
|
-
// // Play button
|
|
2217
|
-
// // console.log(wavesurfer.play());
|
|
2218
|
-
// }
|
|
2219
|
-
// if (getPlayState({ biteId: bite?._id }) === "stopped") {
|
|
2220
|
-
// wavesurfer?.setMute(true);
|
|
2221
|
-
// console.log("stop");
|
|
2222
|
-
// wavesurfer?.stop();
|
|
2223
|
-
// // Play button
|
|
2224
|
-
// // console.log(wavesurfer.play());
|
|
2225
|
-
// }
|
|
2226
|
-
// }, [bite, getPlayState, wavesurfer]);
|
|
2227
|
-
// return (
|
|
2228
|
-
// <div
|
|
2229
|
-
// id={`blerp-waveform-${id}`}
|
|
2230
|
-
// style={{
|
|
2231
|
-
// height: "30px",
|
|
2232
|
-
// width: "100%",
|
|
2233
|
-
// transition: "0.3s",
|
|
2234
|
-
// opacity: hovering ? "1" : "0",
|
|
2235
|
-
// }}
|
|
2236
|
-
// >
|
|
2237
|
-
// {/* <!-- Here be the waveform --> */}
|
|
2238
|
-
// </div>
|
|
2239
|
-
// );
|
|
2240
|
-
// };
|
|
2241
|
-
|
|
1850
|
+
};
|
|
2242
1851
|
|
|
2243
1852
|
var ReportedWarning = function ReportedWarning(_ref4) {
|
|
2244
1853
|
var showWarning = _ref4.showWarning,
|
|
@@ -2587,27 +2196,24 @@
|
|
|
2587
2196
|
}
|
|
2588
2197
|
}, renderPlayStateIcon()), Waveform({
|
|
2589
2198
|
hovering: hovering
|
|
2590
|
-
})), /*#__PURE__*/React__default['default'].createElement(
|
|
2199
|
+
})), /*#__PURE__*/React__default['default'].createElement(HoverScrollText, {
|
|
2200
|
+
onClick: onTitleClick
|
|
2201
|
+
}, /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
2591
2202
|
sx: {
|
|
2592
2203
|
fontSize: "16px",
|
|
2593
2204
|
fontWeight: "400",
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
width: "100%",
|
|
2597
|
-
whiteSpace: "nowrap",
|
|
2598
|
-
overflowX: "hidden",
|
|
2599
|
-
overflowY: "auto",
|
|
2600
|
-
lineHeight: "1",
|
|
2601
|
-
height: "23px",
|
|
2602
|
-
margin: "10px 0 5px 0",
|
|
2603
|
-
cursor: "pointer",
|
|
2604
|
-
transition: "0.3s",
|
|
2605
|
-
"&:hover": {
|
|
2606
|
-
textDecoration: "underline"
|
|
2607
|
-
}
|
|
2608
|
-
},
|
|
2609
|
-
onClick: onTitleClick
|
|
2205
|
+
lineHeight: "1"
|
|
2206
|
+
}
|
|
2610
2207
|
}, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2208
|
+
sx: {
|
|
2209
|
+
position: "absolute",
|
|
2210
|
+
right: "0",
|
|
2211
|
+
top: "0",
|
|
2212
|
+
width: "30px",
|
|
2213
|
+
height: "100%",
|
|
2214
|
+
background: "linear-gradient(270deg, rgba(40,50,51,1) 0%, rgba(0,0,0,0) 100%)"
|
|
2215
|
+
}
|
|
2216
|
+
})), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2611
2217
|
direction: "row",
|
|
2612
2218
|
alignItems: "center",
|
|
2613
2219
|
sx: {
|