\n
\n \n )\n}","export const Spinner = () => {\n return (\n \n
\n \n
\n \n
\n \n \n
\n )\n}","export default __webpack_public_path__ + \"static/media/defaultArtist.70e0484c.jpg\";","export default __webpack_public_path__ + \"static/media/defaultSong.5d5cecf8.webp\";","import React, { useState, useEffect, Suspense, lazy, useRef } from \"react\";\nimport { AiFillHeart, AiOutlineHeart } from \"react-icons/ai\";\nimport { userStore, useTippingMpesa, useTippingPaypal } from \"../../../stores\";\nimport { likeContent } from \"../../../api/auth\";\n\nimport { LoadingModal } from \"../../modals/loadingModal\";\nimport { usePlaylist } from \"../../../stores/index\";\nimport { Link } from \"react-router-dom\";\nimport defaultImage from \"../../../assets/defaultSong.webp\";\nimport blurredContent from \"../../../assets/blurredContent.jpg\";\n\nconst Login = lazy(() => import(\"../../auth/login\"));\nconst SignUp = lazy(() => import(\"../../auth/signup\"));\nconst TippingPaymentModal = lazy(() =>\n import(\"../../modals/tippingPaymentModal\")\n);\nconst PaypalTippingModal = lazy(() =>\n import(\"../../modals/paypalTippingModal\")\n);\nconst VotingModal = lazy(() => import(\"../../modals/votingModal\"));\n\nexport const ContentCard = ({ content }) => {\n const [showMenu, setShowMenu] = useState(false);\n const [liked, setLiked] = useState();\n const [likesCount, setLikesCount] = useState();\n const [loginText, setLoginText] = useState(\"\");\n const [showSignUp, setShowSignUp] = useState(false);\n const [showSignIn, setShowSignIn] = useState(false);\n const [showVotingModal, setShowVotingModal] = useState(false);\n const updatePlaylist = usePlaylist((state) => state.setPlaylist);\n const setIsPlaying = usePlaylist((state) => state.setIsPlaying);\n const mpesa = useTippingMpesa((state) => state.mpesa);\n const user = userStore((state) => state.user);\n const paypal = useTippingPaypal((state) => state.paypal);\n const setMpesa = useTippingMpesa((state) => state.setMpesa);\n const ref = useRef();\n UseOnClickOutside(ref, () => setShowMenu(false));\n useEffect(() => {\n setLikesCount(content?.likes?.length);\n if (user) {\n setLiked(\n user?.likedContent?.find((like) => {\n return like.contentId == content._id;\n })\n );\n }\n }, [user]);\n\n const likingContent = () => {\n if (user) {\n likeContent({ contentId: content._id }).then((response) => {});\n if (liked) {\n setLiked(!liked);\n setLikesCount(likesCount - 1);\n } else {\n setLiked(!liked);\n setLikesCount(likesCount + 1);\n }\n } else {\n setShowSignIn(true);\n setLoginText(\"Please authenticate to like a content.\");\n }\n };\n const showMoreMenu = () => {\n setShowMenu((prevState) => !prevState);\n };\n const closeVotingHandler = () => {\n setShowVotingModal(false);\n };\n return (\n <>\n \n
\n \n \n {liked && \"unLike song\"}\n {!liked && \"like song\"}\n
\n \n \n \n \n {showVotingModal && (\n \n {content?.contentName.replace(\".mp3\", \"\")}\n
\n \n {content?.userId?.names || content?.userId?.email?.split(\"@\")[0]}\n
\n\n \n {liked && \n \n setShowVotingModal(true)}\n >\n Tip\n
\n \n {likesCount}\n
\n \n \n
\n {}}>\n View Artist\n
\n \n \n
\n \n \n \n \n {showVotingModal && (\n \n \n {liked && \"UnLike song\"}\n {!liked && \"Like song\"}\n
\n \n {content?.contentName.replace(\".mp3\", \"\")}\n
\n \n \n \n setShowVotingModal(true)}\n >\n Tip\n
\n \n \n
\n {likesCount}
\n \n \n
\n View Artist
\n \n \n \n \n \n
\n );\n};\nexport const ContentRoundCardLoading = () => {\n return (\n \n \n \n \n
\n );\n};\nfunction UseOnClickOutside(ref, handler) {\n useEffect(() => {\n const listener = (event) => {\n // Do nothing if clicking ref's element or descendent elements\n if (!ref.current || ref.current.contains(event.target)) {\n return;\n }\n handler(event);\n };\n document.addEventListener(\"mousedown\", listener);\n document.addEventListener(\"touchstart\", listener);\n return () => {\n document.removeEventListener(\"mousedown\", listener);\n document.removeEventListener(\"touchstart\", listener);\n };\n }, [ref, handler]);\n}\n","export const FormInput = ({\n label,\n type,\n name,\n placeholder,\n onchangeHandler,\n dataTestId,\n defaultValue,\n required,\n light,\n autoComplete,\n className,\n}) => {\n return (\n \n \n {label}\n \n
\n );\n};\n","export default __webpack_public_path__ + \"static/media/blurredArtist.3755317c.jpg\";","import React, { useState, useEffect, Suspense, lazy, useRef } from \"react\";\nimport { RiUserFollowFill } from \"react-icons/ri\";\nimport { followArtist } from \"../../../api/auth\";\nimport { userStore } from \"../../../stores\";\nimport { LoadingModal } from \"../../modals/loadingModal\";\nimport { Link } from \"react-router-dom\";\n\nimport defaultArtist from \"../../../assets/defaultArtist.jpg\";\nimport blurredArtist from \"../../../assets/blurredArtist.jpg\";\nconst Login = lazy(() => import(\"../../auth/login\"));\nconst SignUp = lazy(() => import(\"../../auth/signup\"));\n\nexport const ArtistCard = ({ content, premium, book }) => {\n const [showMenu, setShowMenu] = useState(false);\n const [followersCount, setFollowersCount] = useState(0);\n const [userFollowing, setUserFollowing] = useState();\n const [artistFollowers, setArtistFollowers] = useState();\n const [showSignUp, setShowSignUp] = useState(false);\n const [showSignIn, setShowSignIn] = useState(false);\n const [loginText, setLoginText] = useState(\"\");\n const user = userStore((state) => state.user);\n const ref = useRef();\n UseOnClickOutside(ref, () => setShowMenu(false));\n useEffect(() => {\n if (content.followers) {\n setFollowersCount(content.followers.length);\n if (user) {\n setUserFollowing(\n content.followers.find((follower) => {\n return follower.userId == user._id;\n })\n );\n }\n }\n }, [user, content]);\n const userFollowArtist = () => {\n if (user) {\n if (userFollowing) {\n setFollowersCount(followersCount - 1);\n setUserFollowing(!userFollowing);\n } else if (!userFollowing) {\n setFollowersCount(followersCount + 1);\n setUserFollowing(!userFollowing);\n }\n followArtist({ artistId: content.artistId }).then((response) => {\n if (response && response.status) {\n }\n });\n } else {\n setShowSignIn(true);\n setLoginText(\"Please authenticate to follow an artist.\");\n }\n };\n const showMoreMenu = () => {\n setShowMenu((prevState) => !prevState);\n };\n return (\n <>\n \n
\n \n \n \n {!user && showSignUp && (\n \n
\n \n
\n \n {content?.names || content?.email?.split(\"@\")[0]}\n
\n \n \n \n {!userFollowing && \"Follow\"}\n {userFollowing && \"unFollow\"}\n
\n \n \n
\n {followersCount}
\n \n \n
\n \n View artist\n
\n \n \n Add to playlist\n
\n \n \n \n \n
\n );\n};\nfunction UseOnClickOutside(ref, handler) {\n useEffect(() => {\n const listener = (event) => {\n // Do nothing if clicking ref's element or descendent elements\n if (!ref.current || ref.current.contains(event.target)) {\n return;\n }\n handler(event);\n };\n document.addEventListener(\"mousedown\", listener);\n document.addEventListener(\"touchstart\", listener);\n return () => {\n document.removeEventListener(\"mousedown\", listener);\n document.removeEventListener(\"touchstart\", listener);\n };\n }, [ref, handler]);\n}\n","export default __webpack_public_path__ + \"static/media/singer.a577e86a.jpg\";","import { useState } from \"react\";\nimport { useHistory } from \"react-router-dom\";\n\nimport singer from \"../../assets/singer.jpg\";\nimport { FormInput } from \"../form/FormInput\";\nimport { MainSubmitButton } from \"../buttons/MainSubmitButton\";\nimport { loginUser } from \"../../api/auth\";\nimport { userStore } from \"../../stores\";\nimport { Feedback } from \"../../components/utils/feedback\";\nimport { isPhone } from \"../../validations/validator\";\nexport const Login = ({ setShowSignIn, setShowSignUp, loginText, url }) => {\n const history = useHistory();\n const intialize = {\n phone: \"\",\n password: \"\",\n };\n const storeUser = userStore((state) => state.storeUser);\n const [{ phone, password }, setUser] = useState(intialize);\n const [isLoading, setIsLoading] = useState(false);\n const [formError, setFormError] = useState(false);\n const [{ feedbackMessage, feedbackText }, setFeedBack] = useState({\n feedbackMessage: \"\",\n feedbackText: \"\",\n });\n const [loginArtistImg, setLoginArtistImg] = useState(false);\n\n const toggleSignIn = () => {\n setShowSignIn((prevState) => !prevState);\n };\n\n const toggleSignUp = () => {\n setShowSignIn(false);\n setShowSignUp(true);\n };\n\n const handleChange = (input) => {\n setUser((prevState) => ({\n ...prevState,\n [input.target.name]: input.target.value,\n }));\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n setIsLoading(true);\n const validPhone = isPhone(phone);\n loginUser({ phone: \"+\" + validPhone.phone, password: password }).then(\n (response) => {\n setIsLoading(false);\n if (response && response.status === 200) {\n setFormError(false);\n storeUser(response.data.user);\n setShowSignIn(false);\n window.location.href = \"/\";\n } else if (response) {\n setFeedBack({\n feedbackMessage: response.data.message,\n feedbackText: \"text-red-500\",\n });\n setFormError(true);\n }\n }\n );\n };\n const showImg = () => {\n setLoginArtistImg(true);\n };\n return (\n \n
\n \n );\n};\nexport default Login;\n","export default __webpack_public_path__ + \"static/media/drummer.4ba0f6d0.jpg\";","import { useState, useEffect } from \"react\";\nimport { useHistory } from \"react-router-dom\";\nimport music from \"../../assets/drummer.jpg\";\nimport { FormInput } from \"../form/FormInput\";\nimport { FormSelect } from \"../form/FormSelect\";\nimport { MainSubmitButton } from \"../buttons/MainSubmitButton\";\nimport { registerUser, sendOTPMessage, verifyOTP } from \"../../api/auth\";\nimport { userStore } from \"../../stores\";\nimport { Feedback } from \"../../components/utils/feedback\";\nimport { PhoneInput } from \"../phoneInput\";\n\nexport const SignUp = ({ setShowSignUp, setShowSignIn, userType }) => {\n const initialize = {\n email: \"\",\n password: \"\",\n confirmPassword: \"\",\n currency: \"\",\n country: \"\",\n role: \"\",\n terms: false,\n };\n const countries = {\n KE: \"+254\",\n NG: \"+234\",\n TZ: \"+255\",\n SA: \"+27\",\n };\n const history = useHistory();\n const storeUser = userStore((state) => state.storeUser);\n const [\n { email, password, confirmPassword, phone, name, role, terms, countryCode },\n setUser,\n ] = useState(initialize);\n const [formError, setFormError] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [{ feedbackMessage, feedbackText }, setFeedBack] = useState({\n feedbackMessage: \"\",\n feedbackText: \"\",\n });\n const [signupArtistImg, setSignupArtistImg] = useState(false);\n const [countrySelected, setCountrySelected] = useState(\"\");\n const [countryCodeSelected, setCountryCodeSelected] = useState(\"\");\n const [supportedCountries] = useState(countries);\n const [phoneNumberVerified, setPhoneNumberVerified] = useState(false);\n const [phoneNumber, setPhoneNumber] = useState(\"\");\n // useEffect(() => {\n // getClientInfoFromIp().then((response) => {\n // if (response && response.status === 200) {\n // selectCountry(response.data.country);\n // setUser((prevState) => ({\n // ...prevState,\n // currency: response.data.currency,\n // country: response.data.country,\n // countryCode: response.data.country_calling_code,\n // }));\n // }\n // });\n // }, []);\n\n const handleChange = (input) => {\n setUser((prevState) => ({\n ...prevState,\n [input.target.name]: input.target.value,\n }));\n };\n const toggleSignUp = () => {\n setFormError(false);\n setShowSignUp((prevState) => !prevState);\n };\n const handleSubmit = (e) => {\n e.preventDefault();\n setIsLoading(true);\n\n if (!validateInputs(e.target)) {\n setIsLoading(false);\n setFormError(true);\n setFeedBack({\n feedbackMessage: \"Please provide correct information\",\n feedbackText: \"text-red-500\",\n });\n return false;\n }\n registerUser({\n email: email,\n password: password,\n role: role,\n phone: phoneNumber,\n }).then((response) => {\n setIsLoading(false);\n if (response && response.status === 200) {\n setFormError(false);\n storeUser(response.data.user);\n\n if (role === \"artist\") {\n history.push(\"/dashboard/artist\");\n } else {\n window.location.reload();\n }\n } else {\n setFeedBack({\n feedbackMessage: response.data.message,\n feedbackText: \"text-red-500\",\n });\n setFormError(true);\n }\n });\n };\n\n const showImg = () => {\n setSignupArtistImg(true);\n };\n\n const validateInputs = (form) => {\n for (let i = 0; i < form.target.length; i++) {\n if (\n (form.target[i].localName === \"input\" && form.target[i].value === \"\") ||\n form.target[i].value === undefined ||\n form.target[i].value === null\n ) {\n return false;\n }\n if (\n form.target[i].localName === \"input\" &&\n form.target[i].type === \"email\" &&\n !form.target[i].value.includes(\"@\")\n ) {\n return false;\n }\n }\n const passwords = Array.from(form).filter(\n (input) => input.type === \"password\"\n );\n if (passwords[0].value !== passwords[1].value) {\n return false;\n }\n return true;\n };\n\n const toggleSignIn = () => {\n setShowSignUp(false);\n setShowSignIn(true);\n };\n\n const selectCountry = (e) => {\n setCountryCodeSelected(e);\n setCountrySelected(supportedCountries[e]);\n if (supportedCountries[e] === undefined) {\n setFormError(true);\n setFeedBack({\n feedbackMessage: \"Sorry we do not support your country yet\",\n feedbackText: \"text-red-500\",\n });\n } else {\n setFormError(false);\n }\n };\n\n const checkMissingFields = () => {\n if (email === \"\") {\n setFormError(true);\n setFeedBack({\n feedbackMessage: \"Email is required\",\n feedbackText: \"text-red-500\",\n });\n return;\n }\n if (password === \"\") {\n setFormError(true);\n setFeedBack({\n feedbackMessage: \"Password is required\",\n feedbackText: \"text-red-500\",\n });\n return;\n }\n if (role === \"\") {\n setFormError(true);\n setFeedBack({\n feedbackMessage: \"Role is required\",\n feedbackText: \"text-red-500\",\n });\n return;\n }\n if (confirmPassword === \"\") {\n setFormError(true);\n setFeedBack({\n feedbackMessage: \"Confirm password is required\",\n feedbackText: \"text-red-500\",\n });\n return;\n }\n if (password !== confirmPassword) {\n setFormError(true);\n setFeedBack({\n feedbackMessage: \"Passwords don't match\",\n feedbackText: \"text-red-500\",\n });\n return;\n }\n\n setFormError(false);\n };\n return (\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n {loginText || \"Experience Passion\"}\n
\n {formError && (\n \n \n
\n \n
\n \n \n \n );\n};\nexport default SignUp;\n","export default __webpack_public_path__ + \"static/media/logo.92a469d1.jpeg\";","export default __webpack_public_path__ + \"static/media/blurredChart.c693fa43.png\";","export const MusicLoader = () => {\n return (\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n \n Welcome to Magic\n
\n {formError && (\n \n
\n \n Already have an account?{\" \"}\n \n Sign in\n \n
\n \n \n \n \n
\n )\n}","export default __webpack_public_path__ + \"static/media/blurredContent.caa9692c.jpg\";","import axios from 'axios';\n\nconst api = axios.create({\n baseURL: process.env.REACT_APP_MAIN_API_BASE_URL,\n headers: {\n \"Content-Type\": \"application/json\",\n 'Access-Control-Allow-Origin': process.env.REACT_APP_BASE_URL,\n },\n withCredentials: true\n})\n\n\nexport const getUsersRecentPlays = async (page, limit, userId) => {\n\n return await api.post(`/stream/getUserStreams/?page=${page}&limit=${limit}`, { userId: userId }).then((response) => response).catch((error) => {\n return error.response\n })\n}\nexport const getDevicesRecentPlays = async (ipAddress, page, limit) => {\n\n return await api.post(`/stream/getDeviceStreams/?page=${page}&limit=${limit}`, { ipAddress: ipAddress }).then((response) => response).catch((error) => {\n return error.response\n })\n}\n\nexport const createUsersRecentPlays = async (data) => {\n\n return await api.post(`/stream/createStream`, data).then((response) => response).catch((error) => {\n return error.response\n })\n}\n\nexport const getRecommendedArtists = async (page, limit) => {\n\n return await api.get(`/user/artistRecommendation/?page=${page}&limit=${limit}`).then((response) => response).catch((error) => {\n return error.response\n })\n}\n\nexport const getNewReleases = async (page, limit) => {\n\n return await api.get(`/artistContent/getRecentlyReleasedContents/?page=${page}&limit=${limit}`).then((response) => response).catch((error) => {\n return error.response\n })\n}\n\nexport const getNewReleasesByGenre = async (page, limit, genre) => {\n\n return await api.get(`/artistContent/recentlyReleasedContentsByCategory/${genre}/?page=${page}&limit=${limit}`).then((response) => response).catch((error) => {\n return error.response\n })\n}","import { useState, useEffect } from \"react\";\nimport { useHistory } from \"react-router-dom\";\nimport { FormInput } from \"../form/FormInput\";\nimport { MusicLoader } from \"./musicLoaderSm\";\nimport SlidingPane from \"react-sliding-pane\";\nimport \"react-sliding-pane/dist/react-sliding-pane.css\";\nimport defaultArtist from \"../../assets/defaultArtist.jpg\";\nimport defaultSong from \"../../assets/defaultSong.webp\";\nimport { searchForAnything } from \"../../api/auth\";\n\nexport const Search = () => {\n const history = useHistory();\n const [searchField, setSearchField] = useState(\"\");\n const [showSearchResult, setShowSearchResult] = useState(false);\n const [searchResultLoading, setSearchResultLoading] = useState(false);\n const [searchResults, setSearchResults] = useState([]);\n const [openSearch, setOpenSearch] = useState(false);\n\n useEffect(() => {\n if (searchField === \"\") {\n setShowSearchResult(false);\n } else {\n setShowSearchResult(true);\n setSearchResultLoading(true);\n searchForAnything({ query: searchField }).then((response) => {\n setSearchResultLoading(false);\n if (response && response.status === 200) {\n setSearchResults(response.data);\n } else {\n setSearchResults([]);\n }\n });\n }\n }, [searchField]);\n\n const openClickedResult = (url) => {\n setSearchResults([]);\n setShowSearchResult(false);\n setOpenSearch(false);\n history.push(url);\n };\n\n const clearSearch = () => {\n setSearchResults([]);\n setShowSearchResult(false);\n };\n\n const search = (input) => {\n setSearchField(input.target.value);\n };\n\n return (\n \n
\n )}\n \n )}\n {showSearchResult && searchResultLoading && (\n \n
\n )}\n\n {searchResults?.contents?.length > 0 && (\n \n {searchResults?.artists?.length > 0 && (\n
\n )}\n {searchResults?.artists?.length > 0 && (\n \n {\n openClickedResult(\n `/player/browse/artist/${searchResults.artists[0]._id}`\n );\n }}\n >\n
\n }\n \n Top result\n
\n {\n \n
\n \n
\n \n
\n \n {(searchResults.artists[0] &&\n searchResults.artists[0].names) ||\n (searchResults.artists[0] &&\n searchResults.artists[0].email &&\n searchResults.artists[0].email.split(\"@\")[0])}\n
\n Artist
\n \n
\n \n \n
\n \n \n
\n \n {\n openClickedResult(\n `/player/browse/artist/${user._id}`\n );\n }}\n >\n
\n );\n }\n })}\n \n Artists\n
\n {searchResults.artists.map((user, key) => {\n if (key !== 0) {\n return (\n \n
\n \n
\n \n
\n \n {(user && user.names) ||\n (user &&\n user.email &&\n user.email.split(\"@\")[0])}\n
\n Artist
\n \n {\n openClickedResult(\n `/player/browse/content/${content._id}`\n );\n }}\n >\n
\n );\n })}\n \n Songs\n
\n {searchResults.contents.map((content, key) => {\n return (\n \n
\n \n
\n \n
\n \n {content && content.contentName}\n
\n \n
\n \n \n
\n \n
\n )}\n \n {(showSearchResult && !searchResultLoading && (\n \n \n
\n {(!openSearch && (\n \n
\n )}\n \n )}\n {showSearchResult &&\n !searchResultLoading &&\n searchResults?.length === 0 && (\n \n
\n )}\n\n {searchResults?.contents?.length > 0 && (\n \n Search\n
\n \n
\n {!showSearchResult && (\n \n
\n )}\n {showSearchResult && !searchResultLoading && (\n \n \n
\n \n Search for Artists, Tracks, Playlists & Albums\n
\n \n {searchResults?.artists?.length > 0 && (\n
\n )}\n {searchResults?.artists?.length > 0 && (\n \n {\n openClickedResult(\n `/player/browse/artist/${searchResults.artists[0]._id}`\n );\n }}\n >\n
\n }\n \n Top result\n
\n {\n \n
\n \n
\n \n
\n \n {(searchResults.artists[0] &&\n searchResults.artists[0].names) ||\n (searchResults.artists[0] &&\n searchResults.artists[0].email &&\n searchResults.artists[0].email.split(\"@\")[0])}\n
\n Artist
\n \n
\n \n \n
\n \n \n
\n \n {\n openClickedResult(\n `/player/browse/artist/${user._id}`\n );\n }}\n >\n
\n );\n }\n })}\n \n Artists\n
\n {searchResults.artists.map((user, key) => {\n if (key !== 0) {\n return (\n \n
\n \n
\n \n
\n \n {(user && user.names) ||\n (user &&\n user.email &&\n user.email.split(\"@\")[0])}\n
\n \n Artist\n
\n \n {\n openClickedResult(\n `/player/browse/content/${content._id}`\n );\n }}\n >\n
\n );\n })}\n \n Songs\n
\n {searchResults.contents.map((content, key) => {\n return (\n \n
\n \n
\n \n
\n \n {content && content.contentName}\n
\n Song name
\n \n
\n \n \n
\n \n No results found...\n
\n )}\n {showSearchResult && searchResultLoading && (\n \n Loading...\n
\n )}\n \n \n \n \n );\n};\n","import { Spinner } from \"../../components/utils/spinningLoader\";\n\nexport const MainActionButton = ({\n text,\n onClickHandler,\n loaderVisibility,\n className\n}) => {\n return (\n \n
\n );\n}\n\nexport default Navbar;\n","export const isEmail = (email) => {\n const regEx =\n /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n if (email.match(regEx)) return true;\n else return false;\n};\nexport const isTwitter = (twitter) => {\n const regEx = /http(?:s)?:\\/\\/(?:www\\.)?twitter\\.com\\/([a-zA-Z0-9_]+)/;\n if (twitter.match(regEx)) return true;\n else return false;\n};\nexport const isFacebook = (facebook) => {\n const regEx = /http(?:s)?:\\/\\/(?:www\\.)?facebook\\.com\\/([a-zA-Z0-9_]+)/;\n if (facebook.match(regEx)) return true;\n else return false;\n};\nexport const isInstagram = (instagram) => {\n const regEx = /http(?:s)?:\\/\\/(?:www\\.)?instagram\\.com\\/([a-zA-Z0-9_]+)/;\n if (instagram.match(regEx)) return true;\n else return false;\n};\nexport const isLinkedin = (linkedin) => {\n const regEx = /http(?:s)?:\\/\\/(?:www\\.)?linkedin\\.com\\/([a-zA-Z0-9_]+)/;\n if (linkedin.match(regEx)) return true;\n else return false;\n};\nexport const isYoutube = (youtube) => {\n const regEx = /http(?:s)?:\\/\\/(?:www\\.)?youtube\\.com\\/([a-zA-Z0-9_]+)/;\n if (youtube.match(regEx)) return true;\n else return false;\n};\nexport const isPassword = (password) => {\n if (password.length < 6) return false;\n else return true;\n};\nexport const isPhone = (phone) => {\n if (phone[0] == \"2\" && phone?.length !== 11)\n return { valid: false, phone: phone };\n else if (phone[0] == \"+\" && phone?.length !== 12)\n return { valid: false, phone: phone };\n else if (phone[0] == \"0\" && phone?.length !== 9)\n return { valid: false, phone: phone };\n else if (phone[0] === \"+\" && phone?.length === 12) {\n return { valid: true, phone: parseInt(phone.slice(1)) };\n } else if (phone[0] === \"0\" && phone?.length === 9) {\n const validPhone = \"254\" + phone.slice(1);\n return { valid: true, phone: parseInt(validPhone) };\n } else if (phone[0] === \"2\" && phone?.length === 11) {\n return { valid: true, phone: parseInt(phone) };\n }\n};\n","export const FormSelect = ({\n label,\n name,\n items,\n onchangeHandler,\n light,\n value,\n dark,\n other,\n className,\n}) => {\n return (\n \n {/*
\n {/* Debut Artists
*/}\n {/* \n
*/}\n \n \n
\n \n \n
\n \n Exclusive Artists\n
*/}\n {/* \n Exclusive Albums\n
\n \n Exclusive Mixes\n
*/}\n \n \n {label}\n \n \n {!value ? (\n \n ) : (\n \n )}\n {items.length > 0 ? (\n <>\n {items.map((item) => {\n return (\n \n );\n })}\n\n {other && }\n \n ) : (\n \n )}\n \n
\n );\n};\n","export const Feedback = ({message, type}) => {\n return (\n \n
\n );\n };","export default __webpack_public_path__ + \"static/media/logo.9be4f8ba.svg\";","import { createBrowserHistory } from \"history\";\n\nconst history = createBrowserHistory();\n\nexport default history;","import React, { useState } from \"react\";\nimport { useLocation } from \"react-router-dom\";\nimport { BsFillPersonCheckFill } from \"react-icons/bs\";\nimport { Link, NavLink } from \"react-router-dom\";\nimport { BiMenu } from \"react-icons/bi\";\nimport { AiOutlineClose } from \"react-icons/ai\";\nimport Login from \"../../../../../components/auth/login\";\nimport SignUp from \"../../../../../components/auth/signup\";\nimport { userStore } from \"../../../../../stores/index\";\nimport { logoutUser } from \"../../../../../api/auth\";\nimport defaultUser from \"../../../../../assets/defaultArtist.jpg\";\nimport EventModal from \"../../../../../components/modals/eventModal\";\nimport logo from \"../../../../../assets/logo.jpeg\";\n\nfunction Navbar() {\n let [open, setOpen] = useState(false);\n const [eventModal, setEventModal] = useState(false);\n const [showSignIn, setShowSignIn] = useState(false);\n const [showSignUp, setShowSignUp] = useState(false);\n const user = userStore((state) => state.user);\n const storeUser = userStore((state) => state.storeUser);\n const location = useLocation();\n const userLogout = () => {\n logoutUser().then((response) => {\n if (response && response.status === 200) {\n storeUser(null);\n window.location.href = \"/player\";\n }\n });\n };\n return (\n <>\n \n
\n \n \n
\n \n \n {message}\n \n
\n \n setOpen(!open)}\n className=\"text-3xl absolute cursor-pointer md:hidden block pt-3 z-10\"\n >\n {open ?
\n \n \n 
\n \n
\n\n {/*
\n \n\n \n {!user && (\n setShowSignIn(true)}\n >\n SignIn/\n
\n )}\n {user && (\n \n \n {(user && user.username) ||\n (user && user.email && user.email.split(\"@\")[0])}\n
\n \n )}\n {!user && (\n \n \n \n \n\n \n \n
\n )}\n \n \n {eventModal && \n
\n \n {(user && user.username) ||\n (user && user.email && user.email.split(\"@\")[0])}\n
\n Logout
\n \n \n \n \n {images &&\n images.map((item) => (\n \n \n
\n \n );\n}\n\nexport default ImageSlider;\n","import React, { useState } from \"react\";\nimport ReactPlayer from \"react-player\";\nimport { AiFillPlayCircle } from \"react-icons/ai\";\n// IMPORT ICONS\nimport playCircle from \"../../../../../assets/play-circle.png\";\nimport navigateNext from \"../../../../../assets/navigate-next.png\";\nimport navigatePrev from \"../../../../../assets/navigate-prev.png\";\n\n// OWL CAROUSEL\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\n\nfunction VideoSlider({ image }) {\n const [play, setPlay] = useState(false);\n\n const handlePlay = () => {\n setPlay(true);\n };\n\n const options = {\n loop: true,\n margin: 10,\n nav: true,\n responsive: {\n 0: {\n items: 1,\n },\n 600: {\n items: 1,\n },\n 1000: {\n items: 1,\n },\n },\n navText: [\n '',\n '',\n ],\n };\n\n return (\n <>\n \n
\n \n );\n}\n\nexport default VideoSlider;\n","import React from \"react\";\n\nimport facebookBackground from \"../../../../../assets/facebook-background.png\";\nimport instagramBackground from \"../../../../../assets/instagram-background.png\";\nimport twitterBackground from \"../../../../../assets/twitter-background.png\";\nimport linkedinBackground from \"../../../../../assets/linkedin-background.png\";\n\n// OWL CAROUSEL\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\n\nfunction SocialMedia() {\n const options = {\n loop: true,\n margin: 10,\n nav: true,\n responsive: {\n 0: {\n items: 4,\n },\n 600: {\n items: 4,\n },\n 1000: {\n items: 4,\n },\n },\n navText: [\n '',\n '',\n ],\n };\n\n return (\n \n {play ? (\n
\n \n 
\n
\n )}\n \n
\n \n
\n );\n}\n\nexport default SocialMedia;\n","import React from \"react\";\nimport { Link } from \"react-router-dom\";\nimport logo from \"../../../../../assets/logo.jpeg\";\n\nfunction Footer() {\n return (\n Social Media
\n \n \n \n \n \n
\n \n
\n \n\n \n \n
\n \n\n \n \n
\n \n\n \n
\n \n \n
\n );\n}\n\nexport default Footer;\n","import React from \"react\";\nimport { useHistory } from \"react-router-dom\";\nimport blurredChart from \"../../../../../assets/blurredChart.png\";\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\nfunction ArtistSlider({ title, items }) {\n const history = useHistory();\n const options = {\n loop: true,\n margin: 10,\n nav: true,\n autoplay: true,\n autoplayTimeout: 3000,\n responsive: {\n 0: {\n items: 5,\n },\n 600: {\n items: 5,\n },\n 1000: {\n items: 5,\n },\n },\n navText: [\n '',\n '',\n ],\n };\n return (\n <>\n \n
\n \n ![\"footer\"]()
\n
\n \n
\n \n \n Stay in the loop\n \n \n Join our mailing list to stay in the loop with our latest updates\n \n \n
\n \n
\n \n \n Email :info@cecafric.com\n \n \n Phone :+27631954288\n \n {/* \n Location :\n \n AfyaRekod Campus, Nairobi, Kenya\n \n */}\n
\n {/* \n
*/}\n \n
\n My Account
\n\n \n Profile\n \n \n Favorites\n \n \n Watchlist\n \n \n My Collections\n \n \n Settings\n \n \n Stats\n \n \n Rankings\n \n \n Activity\n \n
\n \n
\n Resources
\n\n \n Help Center\n \n \n Platform Status\n \n \n Partners\n \n \n Gas-Free Marketplace\n \n \n Taxes\n \n \n Blog\n \n \n Docs\n \n \n Newsletter\n \n
\n \n
\n Company
\n\n \n About\n \n \n Careers\n \n \n Ventures\n \n \n Grants\n \n
\n \n
\n {title}
\n\n\n \n {items &&\n items.map((item, index) => (\n {\n history.push(item?.link);\n }}\n >\n
\n ))}\n \n \n #{index + 1}\n {item.title}\n
\n \n \n Today\n \n \n This Week\n \n \n This Month\n \n
\n \n \n );\n}\n\nexport default ArtistSlider;\n","import React from \"react\";\n\nfunction Contact() {\n return (\n \n
\n );\n}\n\nexport default Contact;\n","import React, { useState } from \"react\";\nimport { useLocation } from \"react-router-dom\";\nimport { FaBell } from \"react-icons/fa\";\nimport { BsFillPersonCheckFill } from \"react-icons/bs\";\nimport { IoSettingsSharp } from \"react-icons/io5\";\nimport { Link, NavLink } from \"react-router-dom\";\nimport { BiMenu } from \"react-icons/bi\";\nimport { AiOutlineClose } from \"react-icons/ai\";\nimport Login from \"../../../../../components/auth/login\";\nimport SignUp from \"../../../../../components/auth/signup\";\nimport { userStore } from \"../../../../../stores/index\";\nimport { logoutUser } from \"../../../../../api/auth\";\nimport defaultArtist from \"../../../../../assets/defaultArtist.jpg\";\nimport EventModal from \"../../../../../components/modals/eventModal\";\nimport logo from \"../../../../../assets/logo.jpeg\";\n\nfunction Navbar() {\n let [open, setOpen] = useState(false);\n const [eventModal, setEventModal] = useState(false);\n const [showSignIn, setShowSignIn] = useState(false);\n const [showSignUp, setShowSignUp] = useState(false);\n const user = userStore((state) => state.user);\n const storeUser = userStore((state) => state.storeUser);\n const location = useLocation();\n const userLogout = () => {\n logoutUser().then((response) => {\n if (response && response.status === 200) {\n storeUser(null);\n window.location.href = \"/player\";\n }\n });\n };\n return (\n <>\n \n
\n \n
\n \n Let's Talk\n
\n \n Send us a message for any ideas, questions, issues or projects.\n \n
\n \n \n \n Send us a message for any ideas, questions, issues or projects.\n \n
\n
\n \n
\n \n Reach us\n \n We're just one click away\n \n
\n \n Email :info@cecafric.com\n \n \n Phone :+27631954288\n \n {/* \n Location :Nairobi, Kenya\n */}\n
\n \n \n Email :info@cecafric.com\n \n \n Phone :+27631954288\n \n {/* \n Location :Nairobi, Kenya\n */}\n
\n
\n \n Stay in the loop\n
\n \n Join our mailing list to stay on the loop
with our latest\n updates\n
\n setOpen(!open)}\n className=\"text-3xl cursor-pointer block z-10\"\n >\n {open ?
\n \n \n \n \n
\n \n {!user && (\n setShowSignIn(true)}\n className=\" text-2xl\"\n />\n )}\n
\n \n {open && (\n \n {!user && (\n setShowSignIn(true)}\n >\n SignIn/\n
\n )}\n {user && (\n \n {(user && user.username) ||\n (user && user.email && user.email.split(\"@\")[0])}\n
\n \n )}\n {!user && (\n \n \n \n \n\n \n \n
\n )}\n \n \n
\n \n \n {(user && user.username) ||\n (user && user.email && user.email.split(\"@\")[0])}\n
\n \n Logout
\n \n \n \n
\n \n );\n}\n\nexport default VideoSlider;\n","import React from \"react\";\nimport { useHistory } from \"react-router-dom\";\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\nimport blurredChart from \"../../../../../assets/blurredChart.png\";\n\nfunction ArtistSlider({ title, items }) {\n const history = useHistory();\n const options = {\n loop: true,\n margin: 10,\n nav: true,\n autoplay: true,\n autoplayTimeout: 3000,\n responsive: {\n 0: {\n items: 2,\n },\n 600: {\n items: 2,\n },\n 1000: {\n items: 2,\n },\n },\n navText: [\n '',\n '',\n ],\n };\n return (\n <>\n \n {play ? (\n
\n \n \n
\n )}\n \n
\n \n
\n {title}
\n\n\n \n {items &&\n items.map((item, index) => (\n {\n history.push(item?.link);\n }}\n >\n
\n ))}\n \n \n #{index + 1}\n {item.title}\n
\n \n \n Today\n \n \n This Week\n \n \n This Month\n \n
\n \n \n );\n}\n\nexport default ArtistSlider;\n","import React from \"react\";\n\nimport facebookBackground from \"../../../../../assets/facebook-background.png\";\nimport instagramBackground from \"../../../../../assets/instagram-background.png\";\nimport twitterBackground from \"../../../../../assets/twitter-background.png\";\nimport linkedinBackground from \"../../../../../assets/linkedin-background.png\";\n\n// OWL CAROUSEL\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\n\nfunction SocialMedia() {\n const options = {\n loop: true,\n margin: 10,\n nav: true,\n autoplay: true,\n autoplayTimeout: 3000,\n responsive: {\n 0: {\n items: 2,\n },\n 600: {\n items: 3,\n },\n 1000: {\n items: 3,\n },\n },\n navText: [\n '',\n '',\n ],\n };\n\n return (\n \n
\n );}\n\nexport default SocialMedia;\n","import React from \"react\";\nimport { Link } from \"react-router-dom\";\nimport logo from \"../../../../../assets/logo.jpeg\";\n\nfunction Footer() {\n return (\n Social Media
\n \n \n \n \n \n
\n \n
\n \n\n \n \n
\n \n\n \n \n
\n \n\n \n
\n \n \n
\n );\n}\n\nexport default Footer;\n","export default __webpack_public_path__ + \"static/media/load-sound.fde7789f.mp3\";","import { useRef, useEffect, useState, Suspense, lazy } from \"react\";\nimport { getClientInfoFromIp } from \"../../api/ip\";\nimport { createUsersRecentPlays } from \"../../api/streams\";\nimport { useLocation } from \"react-router-dom\";\nimport loadSound from \"../../assets/load-sound.mp3\";\nimport {\n BiPlay,\n BiPause,\n BiSkipPrevious,\n BiSkipNext,\n BiShuffle,\n BiRepost,\n BiListUl,\n BiVolumeFull,\n} from \"react-icons/bi\";\nimport { MdHowToVote } from \"react-icons/md\";\nimport { AiFillHeart, AiOutlineHeart } from \"react-icons/ai\";\nimport { usePlaylist } from \"../../stores\";\nimport { userStore } from \"../../stores/index\";\nimport { likeContent } from \"../../api/auth\";\n\nimport defaultSong from \"../../assets/defaultSong.webp\";\n\nconst Login = lazy(() => import(\"../auth/login\"));\nconst SignUp = lazy(() => import(\"../auth/signup\"));\nconst VotingModal = lazy(() => import(\"../modals/votingModal\"));\n\nconst mode = {\n light: {\n text: \"text-bloow-black\",\n background: \"bg-white\",\n navLink: \"text-black\",\n navText: \"text-bloow-blue\",\n },\n dark: {\n text: \"text-white\",\n background: \"bg-bloow-blue\",\n navLink: \"text-black\",\n navText: \"text-white\",\n },\n};\nexport const WavePlayer = ({ url, togglePlay }) => {\n return ;\n};\n\nexport const MusicPlayer = () => {\n const playlist = usePlaylist((state) => state.playlist);\n const changePlaylist = usePlaylist((state) => state.changePlaylist);\n const isPlaying = usePlaylist((state) => state.isPlaying);\n const setIsPlaying = usePlaylist((state) => state.setIsPlaying);\n const currentlyPlaying = usePlaylist((state) => state.currentlyPlaying);\n const setCurrentlyPlaying = usePlaylist((state) => state.setCurrentlyPlaying);\n\n const [percentage, setPercentage] = useState(0);\n const [ipAddress, setIpAddress] = useState();\n const [content, setContent] = useState(null);\n const [duration, setDuration] = useState(0);\n const [currentTime, setCurrentTime] = useState(0);\n const [volume, setVolume] = useState(0.9);\n const [volumePercentage, setVolumePercentage] = useState(90);\n const [loop, setLoop] = useState(false);\n const [shuffle, setShuffle] = useState(false);\n const [showVotingModal, setShowVotingModal] = useState(false);\n const [stream, setStream] = useState(false);\n const [liked, setLiked] = useState();\n const [isBlocked, setIsBlocked] = useState(false);\n const [loginText, setLoginText] = useState(\"\");\n const [showSignIn, setShowSignIn] = useState(false);\n const [showSignUp, setShowSignUp] = useState(false);\n const user = userStore((state) => state.user);\n const audioRef = useRef();\n const volumeRangeRef = useRef();\n const playRef = useRef();\n const location = useLocation();\n useEffect(() => {\n if (user) {\n setLiked(\n user?.likedContent?.find((like) => {\n return like?.contentId == content?._id;\n })\n );\n }\n }, [user]);\n useEffect(() => {\n if (isBlocked) {\n const audio = audioRef.current;\n\n audio.pause();\n return;\n }\n }, [isBlocked]);\n // useEffect(() => {\n\n // return () => {\n // setIsPlaying(false);\n // };\n // }, []);\n useEffect(async () => {\n const response = await getClientInfoFromIp();\n setIpAddress(response?.data?.ip);\n }, []);\n useEffect(async () => {\n if (stream) {\n const response = await createUsersRecentPlays({\n contentId: playlist[currentlyPlaying]._id,\n ipAddress: ipAddress,\n });\n }\n }, [stream]);\n\n useEffect(() => {\n const storedPlaylist = window.localStorage.getItem(\"playlist\");\n if (storedPlaylist) {\n changePlaylist(JSON.parse(storedPlaylist));\n }\n }, []);\n\n useEffect(() => {\n if (playlist.length > 0) {\n setContent(playlist[0]);\n window.localStorage.setItem(\"playlist\", JSON.stringify(playlist));\n }\n }, [playlist]);\n\n useEffect(() => {\n if (currentTime === duration && playlist.length > 0 && isPlaying) {\n setTimeout(() => {\n playNext();\n }, 1500);\n }\n }, [currentTime, duration]);\n\n useEffect(() => {\n if (content && isPlaying) {\n const audio = audioRef.current;\n audio.load();\n audio.volume = volume;\n const playPromise = audio.play();\n if (playPromise !== undefined) {\n playPromise\n .then((res) => {\n setIsPlaying(true);\n })\n .catch((err) => {\n setIsPlaying(false);\n });\n }\n }\n }, [content]);\n\n useEffect(() => {\n const audio = audioRef.current;\n\n if ((!isPlaying && content) || isBlocked) {\n audio.pause();\n return;\n }\n if (isPlaying && content && !isBlocked) {\n audio.play();\n return;\n }\n }, [isPlaying]);\n\n useEffect(() => {\n const audio = audioRef.current;\n audio.volume = volume;\n }, [volume]);\n\n useEffect(() => {\n if (playlist.length > 0 && currentlyPlaying !== playlist?.length) {\n setContent(playlist[currentlyPlaying]);\n }\n }, [currentlyPlaying]);\n\n const onChange = (e) => {\n const audio = audioRef.current;\n audio.currentTime = (audio.duration / 100) * e.target.value;\n setPercentage(e.target.value);\n };\n\n const onChangeVolume = (e) => {\n setVolume(parseFloat(e.target.value));\n setVolumePercentage(e.target.value * 100);\n };\n\n // const play = () => {\n // const audio = audioRef?.current;\n // audio.volume = volume;\n // if (!isPlaying) {\n // setIsPlaying(true);\n // audio.play();\n // }\n // if (isPlaying) {\n // setIsPlaying(false);\n // audio.pause();\n // }\n // };\n\n const getCurrDuration = (e) => {\n const percent = (\n (e.currentTarget.currentTime / e.currentTarget.duration) *\n 100\n ).toFixed(2);\n const time = e.currentTarget.currentTime;\n\n setPercentage(percent);\n setCurrentTime(time.toFixed(2));\n if (currentTime > 10 && !user) {\n setIsPlaying(false);\n setLoginText(\"Please sign in to continue streaming.\");\n setIsBlocked(true);\n setShowSignIn(true);\n }\n if (currentTime > 10 && !stream) {\n setStream(true);\n }\n if (currentTime < 10 && stream) {\n setStream(false);\n }\n };\n\n const isPlayingLastSong = () => {\n return playlist?.length - 1 === currentlyPlaying;\n };\n\n const isPlayingFirstSong = () => {\n return currentlyPlaying === 0;\n };\n\n const playNext = () => {\n if (isPlayingLastSong() && !loop && !shuffle) {\n setCurrentlyPlaying(0);\n setIsPlaying(true);\n }\n if (!isPlayingLastSong() && !loop && !shuffle) {\n setCurrentlyPlaying(currentlyPlaying + 1);\n setIsPlaying(true);\n }\n if (shuffle) {\n const allSongs = playlist.length;\n let nextSong = Math.floor(Math.random() * allSongs);\n while (nextSong === currentlyPlaying) {\n nextSong = Math.floor(Math.random() * allSongs);\n }\n setCurrentlyPlaying(nextSong);\n setIsPlaying(true);\n }\n };\n\n const playPrevious = () => {\n if (currentTime > 10) {\n const audio = audioRef.current;\n audio.currentTime = 0;\n } else if (playlist?.length > 1 && !isPlayingFirstSong()) {\n setCurrentlyPlaying(currentlyPlaying - 1);\n } else if (playlist?.length > 1 && isPlayingFirstSong()) {\n setCurrentlyPlaying(playlist.length - 1);\n }\n };\n const likingContent = () => {\n if (user) {\n likeContent({ contentId: content._id }).then((response) => {});\n if (liked) {\n setLiked(!liked);\n } else {\n setLiked(!liked);\n }\n } else {\n setShowSignIn(true);\n setLoginText(\"Please authenticate to like a content.\");\n }\n };\n return (\n <>\n \n
\n \n ![\"footer\"]()
\n
\n \n
\n \n \n Stay in the loop\n \n \n Join our mailing list to stay in the loop with our latest updates\n \n \n
\n \n
\n \n \n Email :info@ceceafric.com\n \n \n Phone :+27631954288\n \n \n Location :\n {/* \n AfyaRekod Campus, Nairobi, Kenya\n */}\n \n
\n {/* \n
*/}\n \n
\n My Account
\n\n
\n Profile
\n Favorites
\n Watchlist
\n \n My Collections\n
\n Settings
\n Stats
\n Rankings
\n Activity
\n \n
\n Resources
\n\n
\n \n Help Center\n
\n \n Platform Status\n
\n Partners
\n \n Gas-Free Marketplace\n
\n Taxes
\n Blog
\n Docs
\n \n Newsletter\n
\n \n
\n Company
\n\n
\n About
\n Careers
\n Ventures
\n Grants
\n \n
\n \n
\n \n
\n \n {content?.contentName.replace(\".mp3\", \"\")}\n
\n \n {content?.userId?.names || content?.userId?.email?.split(\"@\")[0]}\n
\n \n {\n setDuration(e.currentTarget.duration.toFixed(2));\n }}\n // src={loadSound}\n src={(content?.filePath && content?.filePath) || loadSound}\n >\n
\n \n \n {liked &&
\n \n
\n \n
\n \n \n
\n \n
\n \n {secondsToHms(currentTime)}\n
\n \n
\n \n
\n \n \n {secondsToHms(duration)}\n
\n \n );\n}\n\nconst ControlPlanel = ({\n setIsPlaying,\n isPlaying,\n playNext,\n playPrevious,\n loop,\n setLoop,\n shuffle,\n setShuffle,\n playRef,\n isBlocked,\n}) => {\n return (\n \n {\n setShuffle((prevState) => !prevState);\n }}\n >\n
\n \n {(!isPlaying && (\n {} : () => play(!isPlaying)}\n onKeyUp={enterPlayPause}\n ref={playRef}\n />\n )) || (\n {} : () => play(!isPlaying)}\n onKeyUp={enterPlayPause}\n />\n )}\n
\n );\n}\n","export default __webpack_public_path__ + \"static/media/blurry.91d973fa.jpg\";","import React from \"react\";\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\nimport blurredImage from \"../../../../../assets/blurry.jpg\";\nimport { Link } from \"react-router-dom\";\n\nfunction ImageSlider({ images }) {\n const options = {\n loop: true,\n margin: 10,\n autoplay: true,\n autoplayTimeout: 10000,\n\n responsive: {\n 0: {\n items: 1,\n },\n 600: {\n items: 1,\n },\n 1000: {\n items: 1,\n },\n },\n nav: true,\n navText: [\n ``,\n ``,\n ],\n };\n return (\n <>\n \n \n {images &&\n images.map((item) => (\n \n \n
\n \n );\n}\n\nexport default ImageSlider;\n","import React from \"react\";\n\nfunction Contact() {\n return (\n \n
\n );\n}\n\nexport default Contact;\n","import React from \"react\";\n\n// OWL CAROUSEL\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\nimport UONPoster from \"../../../../../assets/UON.png\";\nfunction EventsSlider() {\n const options = {\n loop: true,\n margin: 10,\n nav: true,\n autoplay: true,\n autoplayTimeout: 4000,\n responsive: {\n 0: {\n items: 3,\n center: true,\n },\n 600: {\n items: 3,\n },\n 1000: {\n items: 3,\n },\n },\n navText: [\n '',\n '',\n ],\n };\n\n return (\n <>\n \n
\n \n
\n \n Let's Talk\n
\n \n Send us a message for any ideas, questions, issues or projects.\n \n
\n \n \n \n Send us a message for any ideas, questions, issues or projects.\n \n
\n
\n \n
\n \n Reach us\n \n We're just one click away\n \n
\n \n Email :info@ceceafric.com\n \n \n Phone :+27631954288\n \n {/* \n Location :Nairobi, Kenya\n */}\n
\n \n \n Email :info@ceceafric.com\n \n \n Phone :+27631954288\n \n {/* \n Location :Nairobi, Kenya\n */}\n
\n
\n \n Stay in the loop\n
\n \n Join our mailing list to stay on the loop
with our latest\n updates\n
\n
\n \n );\n}\n\nexport default EventsSlider;\n","import React from \"react\";\n\n// OWL CAROUSEL\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\nimport UONPoster from \"../../../../../assets/UON.png\";\n\nfunction EventsSlider() {\n const options = {\n loop: true,\n margin: 8,\n nav: true,\n autoplay: true,\n autoplayTimeout: 4000,\n responsive: {\n 0: {\n items: 2,\n center: true,\n },\n 600: {\n items: 2,\n },\n 1000: {\n items: 2,\n },\n },\n navText: [\n '',\n '',\n ],\n };\n\n return (\n <>\n Upcoming Events
\n\n\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n \n );\n}\n\nexport default EventsSlider;\n","import React, { useState, useEffect } from \"react\";\nimport { AiOutlineClose, AiOutlineArrowRight } from \"react-icons/ai\";\nimport { Spinner } from \"../utils/spinningLoaderBlack\";\nimport { registerEvent } from \"../../api/auth\";\n\nfunction EventModal({ closeHandler }) {\n const [names, setNames] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n const [phone, setPhone] = useState(\"\");\n const [loading, setLoading] = useState();\n\n const onSubmit = async () => {\n if (names == \"\" || email == \"\" || phone == \"\") {\n return;\n }\n try {\n setLoading(true);\n const res = await registerEvent({\n names: names,\n phone: phone,\n email: email,\n eventName: \"Sample Event\",\n });\n closeHandler();\n } catch (error) {\n closeHandler();\n }\n setLoading(false);\n };\n return (\n <>\n \n Upcoming Events\n
\n\n\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n \n \n \n );\n}\n\nexport default EventModal;\n","export default __webpack_public_path__ + \"static/media/facebook-background.67ea16a8.png\";","export default __webpack_public_path__ + \"static/media/instagram-background.034f99f6.png\";","export default __webpack_public_path__ + \"static/media/twitter-background.b48fee7e.png\";","export default __webpack_public_path__ + \"static/media/linkedin-background.e7e5fd94.png\";","import React, { useState, useEffect, Suspense, lazy } from \"react\";\nimport { useHistory } from \"react-router-dom\";\nimport {\n userStore,\n useTippingMpesa,\n useTippingPaypal,\n} from \"../../../../../../../stores\";\nimport { likeContent } from \"../../../../../../../api/auth\";\nimport { AiFillHeart } from \"react-icons/ai\";\nimport { IoMdShareAlt } from \"react-icons/io\";\nimport { MdHowToVote } from \"react-icons/md\";\nimport { LoadingModal } from \"../../../../../../modals/loadingModal\";\nimport { usePlaylist } from \"../../../../../../../stores\";\nimport { Link } from \"react-router-dom\";\nimport defaultImage from \"../../../../../../../assets/defaultSong.webp\";\n\nconst Login = lazy(() => import(\"../../../../../../auth/login\"));\nconst SignUp = lazy(() => import(\"../../../../../../auth/signup\"));\nconst VotingModal = lazy(() => import(\"../../../../../../modals/votingModal\"));\nconst ShareModal = lazy(() => import(\"../../../../../../modals/shareModal\"));\nconst TippingPaymentModal = lazy(() =>\n import(\"../../../../../../modals/tippingPaymentModal\")\n);\nconst PaypalTippingModal = lazy(() =>\n import(\"../../../../../../modals/paypalTippingModal\")\n);\n\nexport const SectionThreeCard = ({ content }) => {\n const baseUrl = `${\n (window.location.href.includes(\"localhost\") &&\n \"http://localhost:3000/player/browse\") ||\n (window.location.href.includes(\"dev.bloowafrica\") &&\n \"https://dev.bloowafrica.com/player/browse\") ||\n \"https://bloowafrica.com/player/browse\"\n }`;\n const [showMenu, setShowMenu] = useState(false);\n const [liked, setLiked] = useState();\n const [likesCount, setLikesCount] = useState();\n const [loginText, setLoginText] = useState(\"\");\n const [showSignUp, setShowSignUp] = useState(false);\n const [showSignIn, setShowSignIn] = useState(false);\n const [showVotingModal, setShowVotingModal] = useState(false);\n const [showShareModal, setShowShareModal] = useState(false);\n const updatePlaylist = usePlaylist((state) => state.setPlaylist);\n const playlist = usePlaylist((state) => state.playlist);\n const setCurrentlyPlaying = usePlaylist((state) => state.setCurrentlyPlaying);\n const currentlyPlaying = usePlaylist((state) => state.currentlyPlaying);\n const setIsPlaying = usePlaylist((state) => state.setIsPlaying);\n const mpesa = useTippingMpesa((state) => state.mpesa);\n const user = userStore((state) => state.user);\n const paypal = useTippingPaypal((state) => state.paypal);\n const setMpesa = useTippingMpesa((state) => state.setMpesa);\n const history = useHistory();\n useEffect(() => {\n setLikesCount(content?.likes?.length);\n if (user) {\n setLiked(\n user?.likedContent?.find((like) => {\n return like.contentId == content._id;\n })\n );\n }\n }, [user]);\n\n const likingContent = (contentId) => {\n if (user) {\n likeContent({ contentId: contentId }).then((response) => {});\n if (liked) {\n setLiked(!liked);\n setLikesCount(likesCount - 1);\n } else {\n setLiked(!liked);\n setLikesCount(likesCount + 1);\n }\n } else {\n setShowSignIn(true);\n setLoginText(\"Please authenticate to like a content.\");\n }\n };\n const showMoreMenu = () => {\n setShowMenu((prevState) => !prevState);\n };\n const closeVotingHandler = () => {\n setShowVotingModal(false);\n };\n return (\n <>\n \n
\n \n \n
\n \n \n
\n \n Magic Event Registration\n
\n \n \n Full Names\n \n setNames(e.target.value)}\n className=\"w-full rounded-md text-black border placeholder-white text-sm focus:outline-none focus:ring-0 focus:border-bloow-blue bg-transparent\"\n placeholder=\"Enter Full Name\"\n required\n />\n
\n \n \n Email\n \n setEmail(e.target.value)}\n className=\"w-full rounded-md text-black bg-transparent placeholder-white text-sm border focus:outline-none focus:ring-0 focus:border-bloow-blue \"\n placeholder=\"Enter Email\"\n required\n />\n
\n \n \n Phone Number\n \n setPhone(e.target.value)}\n className=\"w-full rounded-md text-black bg-transparent placeholder-white text-sm border focus:outline-none focus:ring-0 focus:border-bloow-blue \"\n placeholder=\"Enter Phone Number\"\n required\n />\n
\n\n \n {loading ?
\n \n \n {\n updatePlaylist(content);\n setCurrentlyPlaying(0);\n setIsPlaying(true);\n }}\n >\n
\n \n \n {mpesa && (\n \n
\n \n \n
\n \n \n {content.contentName.replace(\".mp3\", \"\")}\n
\n \n \n {content?.userId?.names ||\n content?.userId?.email.split(\"@\")[0]}\n \n
\n \n
\n \n
\n \n {\n likingContent(content._id);\n }}\n />\n
\n like
\n \n {\n setShowVotingModal(true);\n }}\n />\n
\n Tip
\n \n {\n setShowShareModal(true);\n }}\n />\n
\n share
\n \n
\n \n );\n};\n","import { userStore } from \"../../stores\";\nimport { logoutUser } from \"../../api/auth\";\nimport { MainActionButton } from \"../buttons/MainActionButton\";\nimport { Link } from \"react-router-dom\";\nimport defaultUser from \"../../assets/defaultArtist.jpg\";\nimport { Search } from \"./search\";\nexport const NavProfile = ({ setShowSignIn, setShowSignUp }) => {\n const mode = {\n light: {\n text: \"text-bloow-black\",\n background: \"bg-white\",\n navLink: \"text-black\",\n navText: \"text-bloow-blue\",\n },\n dark: {\n text: \"text-white\",\n background: \"bg-midnight\",\n navLink: \"text-white\",\n navText: \"text-white\",\n },\n };\n const user = userStore((state) => state.user);\n const storeUser = userStore((state) => state.storeUser);\n\n const userLogout = () => {\n logoutUser().then((response) => {\n if (response && response.status === 200) {\n storeUser(null);\n window.location.href = \"/player\";\n }\n });\n };\n\n const toggleSignUp = () => {\n setShowSignUp((prevState) => !prevState);\n };\n const toggleSignIn = () => {\n setShowSignIn((prevState) => !prevState);\n };\n\n return (\n \n
\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n like
\n \n
\n \n
\n Tip
\n \n
\n \n
\n share
\n \n {(user && (\n
\n )}\n \n );\n};\n","import { MusicLoader } from '../utils/musicLoaderSm'\n\nexport const MainInactiveButton = ({ info, handleClick, loading, styles }) => {\n return (\n \n
\n )) || (\n \n
\n \n
\n \n \n \n \n \n \n {user.role === \"artist\" && (\n \n \n \n \n \n )}\n \n \n
\n \n
\n \n
\n \n {(user && user.username) ||\n (user && user.email && user.email.split(\"@\")[0])}\n
\n \n {user?.currency}{\" \"}\n \n {user?.wallet ? user.wallet.balance : 0}\n \n
\n Logout
\n \n \n \n {(user && user.username) ||\n (user && user.email && user.email.split(\"@\")[0])}\n
\n \n \n
\n \n \n Sign in\n
\n \n
\n \n
\n \n
\n )\n}\n","import axios from 'axios';\n\nconst api = axios.create({\n \n})\n\nexport const getClientInfoFromIp = async () => {\n\n return await api.get('https://ipapi.co/json').then((response) => response).catch((error) => {\n return error.response\n })\n}\n","import React, { useState, useEffect, Suspense, lazy, useRef } from \"react\";\nimport { AiFillHeart, AiOutlineHeart } from \"react-icons/ai\";\nimport { userStore } from \"../../../stores\";\nimport { likeContent } from \"../../../api/auth\";\nimport { LoadingModal } from \"../../modals/loadingModal\";\nimport { usePlaylist, useMpesa } from \"../../../stores/index\";\nimport defaultImage from \"../../../assets/defaultSong.webp\";\nimport blurredContent from \"../../../assets/blurredContent.jpg\";\n\nconst Login = lazy(() => import(\"../../auth/login\"));\nconst SignUp = lazy(() => import(\"../../auth/signup\"));\nconst VotingModal = lazy(() => import(\"../../modals/votingModal\"));\nconst PurchaseModal = lazy(() => import(\"../../modals/purchaseModal\"));\nconst PurchasedContent = lazy(() => import(\"../../modals/purchasedContent\"));\nconst ContentPaymentModal = lazy(() =>\n import(\"../../modals/contentPaymentModal\")\n);\n\nexport const PremiumCard = ({ content }) => {\n const [showMenu, setShowMenu] = useState(false);\n const [liked, setLiked] = useState();\n const [likesCount, setLikesCount] = useState();\n const [loginText, setLoginText] = useState(\"\");\n const [showSignUp, setShowSignUp] = useState(false);\n const [showSignIn, setShowSignIn] = useState(false);\n const [showPurchase, setShowPurchase] = useState(false);\n const [showPurchased, setShowPurchased] = useState(false);\n const [showVotingModal, setShowVotingModal] = useState(false);\n const updatePlaylist = usePlaylist((state) => state.setPlaylist);\n const setIsPlaying = usePlaylist((state) => state.setIsPlaying);\n const user = userStore((state) => state.user);\n const mpesa = useMpesa((state) => state.mpesa);\n const ref = useRef();\n UseOnClickOutside(ref, () => setShowMenu(false));\n // useEffect(() => {\n // setLikesCount(content?.contentId.likes?.length);\n // if (user) {\n // setLiked(\n // user?.likedContent?.find((like) => {\n // return like.contentId == content._id;\n // })\n // );\n // }\n // }, [user]);\n\n const purchaseContent = () => {\n if (user) {\n if (content.purchasers.includes(user._id)) {\n updatePlaylist(content?.contentId);\n return setIsPlaying(true);\n // return setShowPurchased(true);\n }\n return setShowPurchase(true);\n } else {\n setShowSignIn(true);\n setLoginText(\"Please Login to purchase content\");\n }\n };\n return (\n <>\n \n {\n loading ?\n
\n \n
\n \n
\n \n \n \n {showPurchase && (\n \n {content?.contentId.contentName.replace(\".mp3\", \"\")}\n
\n \n {content?.userId?.names || content?.userId?.email?.split(\"@\")[0]}\n
\n\n \n {liked && \n setShowVotingModal(true)}\n >\n Tip\n
\n \n {likesCount}\n
\n \n \n
\n \n {liked && \"unLike song\"}\n {!liked && \"like song\"}\n
\n \n \n {liked && \"UnLike song\"}\n {!liked && \"Like song\"}\n
\n \n \n \n \n \n {showVotingModal && (\n \n setShowVotingModal(true)}\n >\n Tip\n
\n \n {content?.contentId.contentName.replace(\".mp3\", \"\")}\n
\n \n \n {\n updatePlaylist(content);\n setIsPlaying(true);\n }}\n >\n Add to queue\n
\n \n \n
\n {likesCount}
\n \n \n
\n \n \n \n \n
\n );\n};\nexport const PremiumRoundCardLoading = () => {\n return (\n \n \n \n \n
\n );\n};\nfunction UseOnClickOutside(ref, handler) {\n useEffect(() => {\n const listener = (event) => {\n // Do nothing if clicking ref's element or descendent elements\n if (!ref.current || ref.current.contains(event.target)) {\n return;\n }\n handler(event);\n };\n document.addEventListener(\"mousedown\", listener);\n document.addEventListener(\"touchstart\", listener);\n return () => {\n document.removeEventListener(\"mousedown\", listener);\n document.removeEventListener(\"touchstart\", listener);\n };\n }, [ref, handler]);\n}\n","import React, { useState, useEffect } from \"react\";\n\nimport { ArtistCard, ArtistCardLoading } from \"../../../cards/artistCards\";\nimport { getAllPremiumArtists } from \"../../../../../api/auth\";\nfunction AllPremiumArtists() {\n const [loading, setLoading] = useState();\n const [artists, setArtists] = useState([]);\n const [page, setPage] = useState(1);\n\n useEffect(() => {\n const getContent = async () => {\n setLoading(true);\n const res = await getAllPremiumArtists(page);\n setLoading(false);\n if (res && res.status == 200) {\n setArtists(res.data);\n }\n };\n getContent();\n }, [page]);\n return (\n \n
\n \n {loading && \n {\n setPage((page) => page + 1);\n }}\n >\n \n
\n Debut Artists
\n \n {\n if (page > 1) {\n setPage((page) => page - 1);\n }\n }}\n >\n \n
\n \n {!loading &&\n artists.length > 0 &&\n artists.map((content) => (\n
\n \n );\n}\nexport const PremiumArtistLoading = () => {\n return (\n \n {Array(12)\n .fill(1)\n .map((el, index) => {\n return
\n );\n};\nexport default AllPremiumArtists;\n","// Do not use this component for other fields at the moment.\n// I thought it would be a generic component for editing\n// input profile fields but it is too opinionated\n\nimport { useState, useEffect } from \"react\";\nimport { FormInput } from \"./form/FormInput\";\nimport { MainInactiveButton } from \"./buttons/MainInactiveButton\";\nimport { MainActionButton } from \"./buttons/MainActionButton\";\nimport ReactFlagsSelect from \"react-flags-select\";\nimport { sendOTPMessage, verifyOTP } from \"../api/auth\";\nimport { userStore } from \"../stores\";\nimport { addPhoneNumber, checkPhoneNumber } from \"../api/auth\";\nimport { isPhone } from \"../validations/validator\";\nexport const PhoneInput = ({ setPhoneNumberVerified, setPhoneNumber }) => {\n const user = userStore((state) => state.user);\n const [phoneError, setPhoneError] = useState([]);\n const [phone, setPhone] = useState(\"\");\n const [verificationSent, setVerificationSent] = useState(false);\n const [phoneVerified, setPhoneVerified] = useState(false);\n const [verifyingPhone, setVerifyingPhone] = useState(false);\n const [checkingVerificationCode, setCheckingVerificationCode] =\n useState(false);\n const [OtpError, setOtpError] = useState([]);\n const [loadingPhone, setLoadingPhone] = useState(false);\n const storeUser = userStore((state) => state.storeUser);\n\n const handleChange = (input) => {\n setPhone(input.target.value);\n\n const validPhone = isPhone(input.target.value);\n\n if (validPhone && validPhone.valid) {\n setPhone(validPhone.phone);\n setPhoneError([false, \"\"]);\n } else {\n setPhoneError([true, \"Invalid Phone Number.\"]);\n }\n };\n\n const sendOTPVerification = () => {\n setVerifyingPhone(true);\n\n sendOTPMessage({\n phone: \"+\" + phone,\n }).then((response) => {\n setVerifyingPhone(false);\n if (response && response.status === 200) {\n setVerificationSent(true);\n } else {\n console.log(response);\n setPhoneError([true, \"Something Went Wrong\"]);\n setVerifyingPhone(false);\n }\n });\n };\n const handleChangeVerifyCode = (input) => {\n if (input.target.value && input.target.value.length === 4) {\n checkVerificationCode(input);\n }\n };\n\n const checkVerificationCode = (inp) => {\n setCheckingVerificationCode(true);\n console.log(phone);\n const code = Number(inp.target.value);\n\n verifyOTP({\n phone: \"+\" + phone,\n otp: code,\n }).then((response) => {\n if (response.status === 200) {\n setPhoneVerified(true);\n setPhoneNumberVerified(true);\n setPhoneNumber(\"+\" + phone);\n setOtpError([]);\n // handlePhoneSubmit();\n setCheckingVerificationCode(false);\n } else {\n console.log(response);\n setOtpError([true, \"Incorrect verification Code\"]);\n setCheckingVerificationCode(false);\n }\n });\n };\n // const handlePhoneSubmit = () => {\n // setLoadingPhone(true);\n\n // addPhoneNumber({ phone: \"+\" + phone }).then((response) => {\n // setLoadingPhone(false);\n // if (response && response.status === 200) {\n // const dataChanged = response.data.phoneNumber;\n // const newUser = { ...user, ...dataChanged };\n // storeUser(newUser);\n // } else {\n // setPhoneError(true, response.data.message);\n // }\n // });\n // };\n return (\n \n {(!verificationSent && !phoneVerified && (\n
\n );\n};\n","export default __webpack_public_path__ + \"static/media/blurredKhali.8090a84c.jpg\";","export default __webpack_public_path__ + \"static/media/khaligraph.a3374531.png\";","import React, { useState, useEffect } from \"react\";\nimport { ArtistCard, ArtistCardLoading } from \"../../../cards/artistCards\";\nimport { getBloowLeaderboard } from \"../../../../../api/auth\";\nfunction LeaderBoard() {\n const [artists, setArtists] = useState([]);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n setLoading(true);\n getBloowLeaderboard().then((response) => {\n setLoading(false);\n if (response && response.status === 200) {\n setArtists(response?.data?.leaderboard);\n }\n if (response && response.status === 204) {\n return;\n }\n });\n }, []);\n return (\n <>\n {(loading && \n
\n )) ||\n (verificationSent && !phoneVerified && (\n \n {phoneError[0] && (\n
\n {phoneError[1]}
\n )}\n \n
\n \n
\n )) ||\n (!phoneError[0] && phoneVerified && (\n \n {OtpError[0] && (\n
\n {OtpError[1]}
\n )}\n \n
\n \n {phone}\n
\n ))}\n \n {(phoneError[0] || phoneError.length == 0) && (\n
\n \n
\n )}\n {phoneError.length !== 0 &&\n !phoneError[0] &&\n !phoneVerified &&\n !verificationSent && (\n \n
\n )}\n \n
\n )}\n \n );\n}\nconst LeaderBoardLoading = () => {\n return (\n \n
\n Bloow LeaderBoard
\n \n {artists?.length > 0 &&\n artists?.map((content, key) => {\n return (\n {}}\n />\n );\n })}\n
\n \n
\n );\n};\n\nexport default LeaderBoard;\n","import { useState, useEffect } from \"react\";\nimport { userStore } from \"../../../../../stores\";\nimport { getTopTenLikedSongs } from \"../../../../../api/auth\";\nimport {\n ContentRoundCard,\n ContentCard,\n ContentRoundCardLoading,\n ContentCardLoading,\n} from \"../../../cards/contentCards\";\n\nfunction TopTenSongs() {\n const user = userStore((state) => state.user);\n const [loading, setLoading] = useState(false);\n\n const [contents, setContents] = useState([]);\n useEffect(() => {\n setLoading(true);\n getTopTenLikedSongs().then((response) => {\n setLoading(false);\n if (response && response.status === 200) {\n setContents(response?.data?.topTenLikedContent?.contents);\n }\n if (response && response.status === 204) {\n return;\n }\n });\n }, [user]);\n return (\n <>\n {!loading && contents?.length > 0 && (\n \n \n \n
\n \n {Array(6)\n .fill(1)\n .map((el, index) => {\n return
\n \n
\n )}\n {loading && \n
\n Top Ten Songs
\n \n {contents?.map((content, index) => {\n if (index === 0 && content.contentId !== null) {\n return
\n \n
\n );\n};\n\nexport default TopTenSongs;\n","import React, { useState, useEffect } from \"react\";\nimport { Link, useLocation, useHistory } from \"react-router-dom\";\nfunction PlayerNavbar() {\n const [navigation, setNavigation] = useState();\n const location = useLocation();\n\n\n useEffect(() => {\n if (/^\\/player\\b\\/*$/g.test(location.pathname)) {\n setNavigation(\"home\");\n } else if (/^\\/player\\/browse\\b[\\/\\w|\\d]*/g.test(location.pathname)) {\n setNavigation(\"genre\");\n } else if (/^\\/player\\/podcast\\b[\\/\\w|\\d]*/g.test(location.pathname)) {\n setNavigation(\"podcast\");\n }\n \n }, [location]);\n return (\n \n \n \n
\n \n {Array(6)\n .fill(1)\n .map((el, index) => {\n if (index === 0) {\n return
\n \n
\n \n\n \n {navigation}\n
\n \n \n
\n \n \n \n OVERVIEW\n {navigation == \"home\" && (\n
\n )}\n \n GENRE & MOODS\n {navigation == \"genre\" && (\n
\n )}\n PODCASTS
\n \n \n );\n}\n\nexport default PlayerNavbar;\n","import React, { useState, useEffect } from \"react\";\nimport { useHistory, Link } from \"react-router-dom\";\nconst BrowseNavigation = () => {\n const [subNav, setSubNav] = useState();\n const history = useHistory();\n useEffect(() => {\n if (\n /^\\/player\\/browse\\/genre\\b[\\/\\w|\\d]*/g.test(history.location.pathname)\n ) {\n setSubNav(\"genres\");\n } else if (\n /^\\/player\\/browse\\/newreleases\\b[\\/\\w|\\d]*/g.test(\n history.location.pathname\n )\n ) {\n setSubNav(\"newReleases\");\n } else if (\n /^\\/player\\/browse\\/podcasts\\b[\\/\\w|\\d]*/g.test(history.location.pathname)\n ) {\n setSubNav(\"podcasts\");\n }\n }, []);\n return (\n \n \n setSubNav(\"genres\")}\n >\n Genres & Moods{\" \"}\n
\n \n \n \n {\n history.push(\"/player/browse\");\n setNavigation(\"browse\");\n }}\n >\n Browse\n
\n \n {navigation === \"home\" && (\n
\n Magic
\n )}\n\n {navigation === \"bookings\" && (\n Bookings
\n )}\n {navigation === \"browse\" && Library
}\n {navigation === \"premium\" && Debut
}\n {navigation === \"queue\" && }\n \n
\n \n {showSignIn && (\n \n
\n \n \n
\n {/* \n Bloow
\n */}\n \n setNavigation(\"home\")}\n >\n
\n \n {/* \n \n
\n \n \n clickToggler((prevState) => !prevState)}\n >\n
*/}\n \n \n
\n {/* \n
\n \n Home\n
\n \n
\n \n Music\n
\n \n
\n \n Debut\n
\n \n
\n \n Purchased\n
\n \n
\n TV
\n \n
\n Radio
\n \n
\n Store
\n \n
\n Studio
\n \n
\n Wallet
\n \n
\n \n Merchandise\n
\n \n
\n \n Bookings\n
\n \n
\n \n About\n
\n \n
\n )}\n {loading && \n
\n Top Voted Songs
\n \n {contents?.map((content, index) => {\n if (index === 0 && content.contentId !== null) {\n return
\n \n
\n );\n};\n\nexport default TopVotedSongs;\n","import React, { useState, useEffect } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { ArtistCard, ArtistCardLoading } from \"../../../cards/artistCards\";\nimport { getBookableArtists } from \"../../../../../api/auth\";\nimport { FormSelect } from \"../../../../form/FormSelect\";\nfunction ArtistList() {\n const [loading, setLoading] = useState();\n const [artists, setArtists] = useState([]);\n const [talent, setTalent] = useState(\"artists\");\n useEffect(() => {\n const getContent = async () => {\n setLoading(true);\n const res = await getBookableArtists();\n setLoading(false);\n if (res && res.status == 200) {\n setArtists(res.data.artists);\n }\n };\n getContent();\n }, []);\n return (\n \n \n \n
\n \n {Array(6)\n .fill(1)\n .map((el, index) => {\n if (index === 0) {\n return
\n \n
\n );\n}\nconst ArtistListLoading = () => {\n return (\n \n
\n {talent == \"artists\" && (\n \n
\n \n \n Talents\n \n \n Your Bookings\n \n
\n \n
\n \n \n
\n \n \n
\n \n {loading &&
\n )}\n \n {!loading &&\n artists.length > 0 &&\n artists.map((content) => (\n
\n \n {Array(12)\n .fill(1)\n .map((el, index) => {\n return
\n );\n};\n\nconst SelectTalent = ({ setTalent, talent }) => {\n const handleChange = (input) => {\n setTalent(input.target.value);\n };\n return (\n \n
\n );\n};\n\nexport default ArtistList;\n","import Navbar from \"../../../../../components/utils/player/desktop/premium/navbar\";\nimport { userStore } from \"../../../../../stores\";\nimport ArtistList from \"../../../../../components/utils/player/desktop/bookArtist/ArtistList\";\nconst BookArtist = ({ play }) => {\n const user = userStore((state) => state.user);\n\n return (\n \n
\n \n
\n );\n};\n\nexport default BookArtist;\n","import React, { useState, useEffect } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { clientGetBookings } from \"../../../../../api/auth\";\nfunction UserBookings() {\n const [loading, setLoading] = useState();\n const [bookings, setBookings] = useState([]);\n useEffect(() => {\n const getContent = async () => {\n setLoading(true);\n const res = await clientGetBookings();\n setLoading(false);\n if (res && res.status == 200) {\n setBookings(res.data.bookings);\n }\n };\n getContent();\n }, []);\n return (\n \n
\n \n \n \n
\n
\n );\n}\nexport const BookingsListLoading = () => {\n return Array(5)\n .fill(1)\n .map((el, index) => {\n return (\n \n
\n \n \n Talents\n \n \n Your Bookings\n \n
\n \n | \n {booking?.artist?.names}\n | \n\n {booking?.title}\n | \n\n {booking?.location}\n | \n\n {booking?.time}\n | \n\n {booking?.currency}{\" \"}\n {booking?.offer}\n | \n\n {booking?.paymentStatus}\n | \n\n {booking?.status}\n | \n
\n
\n );\n};\n\nexport default UserBookingsPage;\n","import React, { useState, useEffect, Suspense, lazy } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { artistGetBookings } from \"../../../../../api/auth\";\nimport { userStore } from \"../../../../../stores\";\nimport { AiOutlineArrowLeft } from \"react-icons/ai\";\nconst SetBookableArtistModal = lazy(() =>\n import(\"../../../../modals/setBookableArtistModal\")\n);\n\nfunction ArtistBookings() {\n const [loading, setLoading] = useState();\n const [bookings, setBookings] = useState([]);\n const [bookableModal, setBookableModal] = useState();\n const user = userStore((state) => state.user);\n useEffect(() => {\n const getContent = async () => {\n setLoading(true);\n const res = await artistGetBookings();\n setLoading(false);\n if (res && res.status == 200) {\n setBookings(res.data.bookings);\n }\n };\n getContent();\n }, []);\n return (\n \n
\n \n
\n \n
\n \n \n Back to Profile\n \n )}\n {!user && (\n
\n \n
\n \n {user &&\n (user.image ? (\n
\n \n
\n \n {user ? user.names || \"No Name\" : \"No Name\"}\n
\n {user && user.email}
\n \n setBookableModal(true)}\n >\n Bookable Status\n
\n {user && (\n \n Create Account\n
\n )}\n \n \n setBookableModal(true)}\n >\n Booking Status\n \n
\n Bookings
\n | \n {booking?.title}\n | \n\n {booking?.location}\n | \n\n {booking?.time}\n | \n\n {booking?.currency}{\" \"}\n {booking?.offer}\n | \n\n {booking?.paymentStatus}\n | \n\n {booking?.status}\n | \n
\n
\n );\n};\n\nexport default ArtistBookingsPage;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React, { useState } from \"react\";\n\nimport { useHistory } from \"react-router-dom\";\nimport blurredChart from \"../../../../../assets/blurredChart.png\";\n// IMPORT IMAGES\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\nfunction Leaderboard() {\n const history = useHistory();\n const options = {\n loop: true,\n margin: 10,\n nav: true,\n\n responsive: {\n 0: {\n items: 5,\n },\n 600: {\n items: 5,\n },\n 1000: {\n items: 5,\n },\n },\n navText: [\n '',\n '',\n ],\n };\n const [leaderBoardActive, setLeaderBoardActive] = useState(0);\n\n const handleLeaderBoardTodayChange = () => {\n setLeaderBoardActive(0);\n };\n\n const handleLeaderBoardWeekChange = () => {\n setLeaderBoardActive(1);\n };\n\n const handleLeaderBoardMonthChange = () => {\n setLeaderBoardActive(2);\n };\n const artists1 = [\n {\n Name: \"Jua Cali\",\n Image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fvideos%2Fjuacali-33.png?alt=media&token=3bc96eff-353e-4639-862c-264f2ff810d2\",\n Link: \"/player/premium/album/641325a32b602ff63687f5b6\",\n },\n // {\n // Name: \"Khartoomoney\",\n // Image:\n // \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fimages%2Fkhatoomoney1.png?alt=media&token=3caf59cb-be69-42b8-83d2-dc3463cda1df\",\n // Link: \"/player/browse/artist/6217310555f0306e4be898a2\",\n // },\n {\n Name: \"Qqu\",\n Image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fimages%2Fqqu.png?alt=media&token=1e3b16d1-ecc3-4f3e-bc93-372a04597af4\",\n Link: \"/player/browse/artist/620bd0c43a1bf303b4641caf\",\n },\n {\n Name: \"Tingseh\",\n Image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fimages%2Ftingseh.png?alt=media&token=08f5b415-f44a-43f0-9909-4511584b37f1\",\n Link: \"/player/browse/artist/62277e7d5623cd0d1b3bcf2a\",\n },\n {\n Name: \"Versatile\",\n Image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fimages%2Fversatile.png?alt=media&token=e9877059-7cc5-4a20-b339-893fbecdec42\",\n Link: \"/player/browse/artist/620bd3e33a1bf303b4641d63\",\n },\n\n {\n Name: \"Kuky\",\n Image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fimages%2Fkuky.png?alt=media&token=a5727f5e-58cd-40e0-b179-d6b84f85ec2c\",\n Link: \"/player/browse/artist/634e8d730b3fb4b44f20297b\",\n },\n ];\n const artists2 = [\n {\n Name: \"Lynn(Diva)\",\n Image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fimages%2Flynn%20Diva.png?alt=media&token=f5a64b98-946d-46dd-986e-4cc8f4d5a04c\",\n Link: \"/player/browse/artist/62220dab5623cd0d1b3bccd2\",\n },\n ];\n return (\n <>\n \n
\n \n
\n \n \n );\n}\n\nexport default Leaderboard;\n","import React from \"react\";\n\nfunction Awards() {\n return (\n <>\n \n Magic Leaderboard\n
\n\n\n \n {artists1.map((artist, index) => (\n {\n history.push(artist?.Link);\n }}\n >\n
\n ))}\n \n \n #{index + 1}\n \n {artist.Name}\n \n
\n \n \n Magic
\n
\n \n );\n}\n\nexport default Awards;\n","import React, { useState } from \"react\";\nimport { AiFillPlayCircle } from \"react-icons/ai\";\n\nimport ReactPlayer from \"react-player\";\n// OWL CAROUSEL\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\n\nfunction TvRadio({ image }) {\n const [play, setPlay] = useState(false);\n\n const handlePlay = () => {\n setPlay(true);\n };\n\n const options = {\n loop: true,\n margin: 10,\n nav: true,\n responsive: {\n 0: {\n items: 5,\n },\n 600: {\n items: 5,\n },\n 1000: {\n items: 5,\n },\n },\n navText: [\n '',\n '',\n ],\n };\n\n const rules = {\n loop: true,\n margin: 10,\n nav: true,\n responsive: {\n 0: {\n items: 1,\n },\n 600: {\n items: 1,\n },\n 1000: {\n items: 1,\n },\n },\n navText: [\n '',\n '',\n ],\n };\n\n return (\n \n Magic
Awards\n
\n \n
\n \n
\n Magic TV
\n Magic Radio
\n \n \n {play ? (\n
\n \n\n \n {/*
\n\n \n {!play && (\n <>\n \n
*/}\n \n \n
\n )}\n \n
\n \n \n \n
\n \n
\n\n \n
\n\n \n
\n\n \n
\n \n
\n \n \n \n\n \n \n \n */}\n\n
\n );\n}\n\nexport default AuthenticatedHome;\n","import React from \"react\";\n// IMPORT COMPONENTS\nimport Navbar from \"./components/Navbar\";\nimport ImageSlider from \"./components/ImageSlider\";\nimport VideoSlider from \"./components/VideoSlider\";\nimport Leaderboard from \"./components/Leaderboard\";\nimport EventsSlider from \"./components/EventsSlider\";\nimport ArtistSlider from \"./components/ArtistSlider\";\nimport Awards from \"./components/Awards\";\nimport TvRadio from \"./components/TvRadio\";\nimport Contact from \"./components/Contact\";\nimport SocialMedia from \"./components/SocialMedia\";\nimport Footer from \"./components/Footer\";\nimport LandingVideoOne from \"../../../../assets/wyreVideo.png\";\nimport Khaligraph from \"../../../../assets/khaligraph.png\";\n// OWL CAROUSEL\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\n\nconst images = [\n {\n title: \"Events\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2FWhatsApp%20Image%202024-02-26%20at%2011.50.09%20AM%402x.png?alt=media&token=fb42fb40-bba1-44c7-a0c8-40beb345fd2f\",\n },\n {\n title: \"Khaligraph\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2FWhatsApp%20Image%202024-02-26%20at%2011.50.09%20AM%402x.png?alt=media&token=fb42fb40-bba1-44c7-a0c8-40beb345fd2f\",\n },\n {\n title: \"Jammin\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2FWhatsApp%20Image%202024-02-26%20at%2011.50.09%20AM%402x.png?alt=media&token=fb42fb40-bba1-44c7-a0c8-40beb345fd2f\",\n },\n];\n\nconst songs = [\n {\n title: \"Tee\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FTee.jpg?alt=media&token=536b9696-b644-460b-a696-b84d593de7b3\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n\n {\n title: \"Benjamin\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FBenjamin.jpg?alt=media&token=ed05f963-0e65-4d0b-aaff-6dd5ecc3eb94\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n {\n title: \"Badoo\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FBadoo.jpg?alt=media&token=348aca95-bbee-4f16-b6a3-aa7d987077b4\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n {\n title: \"Shalate\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FSHALATE.jpg?alt=media&token=9c5d0404-88fb-47a4-a346-95f4c6343e1e\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n {\n title: \"XXC\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FXXC.jpg?alt=media&token=471633af-0a9f-4c9e-b1bd-25068f4a6bd3\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n {\n title: \"Belo\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FBelo.jpg?alt=media&token=ddd7d7a1-6dc9-484f-b89d-159ee3afd2b6\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n\n {\n title: \"Vegas\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FVegas.jpg?alt=media&token=bfb08582-140e-4122-a52b-b660da3645d8\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n];\n\nconst options = {\n loop: true,\n margin: 10,\n nav: true,\n responsive: {\n 0: {\n items: 1,\n },\n 600: {\n items: 1,\n },\n 1000: {\n items: 1,\n },\n },\n navText: [\n '',\n '',\n ],\n};\n\nfunction AuthenticatedHome() {\n return (\n Shoutout!
\n\n
\n\n \n Key Features
on Bloow\n
\n
\n - \n
- Merchandise \n
- Voting & Awards \n
- Events & Concerts Booking \n
- Milestones \n
- Bloow Studio \n
- Bloow Label \n
- TV & Radio \n
- Store \n
- NFTs \n
- Finance \n
- Streaming \n
- Portfolio \n
- Affiliate Programs \n
\n
\n\n \n Key Features
on Bloow\n
\n
\n - \n
- Merchandise \n
- Voting & Awards \n
- Events & Concerts Booking \n
- Milestones \n
- Bloow Studio \n
- Bloow Label \n
- TV & Radio \n
- Store \n
- NFTs \n
- Finance \n
- Streaming \n
- Portfolio \n
- Affiliate Programs \n
\n
\n \n Key Features
on Bloow\n
\n
\n - \n
- Merchandise \n
- Voting & Awards \n
- Events & Concerts Booking \n
- Milestones \n
- Bloow Studio \n
- Bloow Label \n
- TV & Radio \n
- Store \n
- NFTs \n
- Finance \n
- Streaming \n
- Portfolio \n
- Affiliate Programs \n
\n \n \n\n \n \n \n */}\n\n
\n );\n}\n\nexport default AuthenticatedHome;\n","import { Suspense, lazy, useState, useEffect } from \"react\";\nimport { useHistory, useLocation } from \"react-router-dom\";\nimport { Navbar } from \"./components/navbar\";\nimport Sidebar from \"../../../components/sidebar/sidebar\";\nimport { MusicPlayer } from \"../../../components/music/musicPlayer\";\nimport { Switch, Route } from \"react-router-dom\";\nimport { Spinner } from \"../../../components/utils/spinningLoader\";\nconst Player = () => {\n const Home = lazy(() => import(\"./components/home\"));\n const Library = lazy(() => import(\"./components/library\"));\n const Browse = lazy(() => import(\"./components/browse\"));\n const Queue = lazy(() => import(\"./components/queue\"));\n const Premium = lazy(() => import(\"./components/premium/premium\"));\n const BookArtist = lazy(() =>\n import(\"./components/bookArtist/bookArtist.js\")\n );\n const BookArtistPage = lazy(() =>\n import(\"./components/bookArtist/bookArtistPage.js\")\n );\n const PremiumAlbum = lazy(() => import(\"./components/premium/premiumAlbum\"));\n const PurchusedContent = lazy(() =>\n import(\"./components/premium/purchasedContent\")\n );\n const Merchandise = lazy(() =>\n import(\"./components/merchandise/merchandise\")\n );\n const UserBookingsPage = lazy(() =>\n import(\"./components/bookArtist/userBookingsPage\")\n );\n const ArtistBookingsPage = lazy(() =>\n import(\"./components/bookArtist/artistBookingsPage\")\n );\n const [showPlayer, setShowPlayer] = useState();\n const history = useHistory();\n const location = useLocation();\n useEffect(() => {\n if (/^\\/player\\/merchandise\\b[\\/\\w|\\d]*/g.test(history.location.pathname)) {\n setShowPlayer(false);\n } else {\n setShowPlayer(true);\n }\n }, [location]);\n\n return (\n Shoutout!
\n\n
\n\n \n Key Features
on Bloow\n
\n
\n - \n
- Merchandise \n
- Voting & Awards \n
- Events & Concerts Booking \n
- Milestones \n
- Bloow Studio \n
- Bloow Label \n
- TV & Radio \n
- Store \n
- NFTs \n
- Finance \n
- Streaming \n
- Portfolio \n
- Affiliate Programs \n
\n
\n\n \n Key Features
on Bloow\n
\n
\n - \n
- Merchandise \n
- Voting & Awards \n
- Events & Concerts Booking \n
- Milestones \n
- Bloow Studio \n
- Bloow Label \n
- TV & Radio \n
- Store \n
- NFTs \n
- Finance \n
- Streaming \n
- Portfolio \n
- Affiliate Programs \n
\n
\n \n Key Features
on Bloow\n
\n
\n - \n
- Merchandise \n
- Voting & Awards \n
- Events & Concerts Booking \n
- Milestones \n
- Bloow Studio \n
- Bloow Label \n
- TV & Radio \n
- Store \n
- NFTs \n
- Finance \n
- Streaming \n
- Portfolio \n
- Affiliate Programs \n
\n
\n );\n};\n\nexport default Player;\n","import { useEffect, useState, Suspense, lazy } from \"react\";\nimport { Router, Switch, Route } from \"react-router-dom\";\nimport \"lazysizes\";\n// import a plugin\nimport \"lazysizes/plugins/parent-fit/ls.parent-fit\";\n\nimport history from \"../default\";\nimport { refreshToken } from \"../api/auth\";\nimport { userStore } from \"../../src/stores\";\nimport { Spinner } from \"../components/utils/spinningLoaderBlack\";\nimport \".././modal.css\";\nimport LandingThree from \"./pages/landing/landingThree/unauthenticatedHomepage\";\nimport AuthenticatedHome from \"./pages/landing/landingThree/authenticatedHomepage\";\nimport Player from \"./pages/player/dashboard\";\n\nconst Business = lazy(() => import(\"./pages/landing/landingThree/business\"));\nconst Fans = lazy(() => import(\"./pages/landing/landingThree/fans\"));\nconst Artists = lazy(() => import(\"./pages/landing/landingThree/artists\"));\nconst Agency = lazy(() => import(\"./pages/landing/landingThree/agency\"));\n\nconst About = lazy(() => import(\"./pages/landing/landingThree/about\"));\nconst Ticketing = lazy(() => import(\"./pages/landing/landingThree/ticketing\"));\nconst LandingArtist = lazy(() => import(\"./pages/landing/landingArtist\"));\nconst Dashboard = lazy(() => import(\"./pages/dashboard/dashboard\"));\n//const PublicArtist = lazy(() => (import('./pages/dashboard/publicArtist')));\nconst PublicEvent = lazy(() => import(\"./pages/events/publicEvent\"));\nconst GoToEvent = lazy(() => import(\"./pages/events/goToEvent\"));\nconst ArtistGoToEvent = lazy(() => import(\"./pages/events/artistEvent\"));\nconst ResetPasswordOne = lazy(() => import(\"../components/resetPasswordOne\"));\nconst ResetPasswordTwo = lazy(() => import(\"../components/resetPasswordTwo\"));\nconst GenreOverview = lazy(() =>\n import(\"./pages/player/components/genre/genreOverview\")\n);\nconst GenrePlaylist = lazy(() =>\n import(\"./pages/player/components/genre/genrePlaylist\")\n);\nconst PublicArtist = lazy(() =>\n import(\"./pages/player/components/artist/publicArtist\")\n);\n\nconst DesktopApp = () => {\n const user = userStore((state) => state.user);\n const [isLoadingUser, setIsLoadingUser] = useState(true);\n const storeUser = userStore((state) => state.storeUser);\n\n useEffect(() => {\n const fetchNewToken = async () => {\n try {\n setIsLoadingUser(true);\n const res = await refreshToken();\n\n setIsLoadingUser(false);\n if (res && res.status === 200) {\n storeUser(res.data.user);\n }\n } catch (error) {}\n };\n\n if (!user) {\n fetchNewToken();\n }\n }, [user, storeUser]);\n\n return (\n \n
\n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n {showPlayer && (\n
\n \n \n
\n )}\n \n {\n history.push(\"/player/queue\");\n }}\n autoPlay={true}\n />\n
\n \n
\n \n Magic Leaderboard\n
\n\n\n \n {artists1.map((artist, index) => (\n {}}\n >\n
\n ))}\n \n \n #{index + 1}\n \n {artist.Name}\n \n
\n \n
\n \n {artists &&\n artists.slice(0, 2).map((item, index) => (\n {}}\n >\n
\n ))}\n \n {artists &&\n artists.slice(2, 4).map((item, index) => (\n {}}\n >\n
\n ))}\n \n \n {artists &&\n artists.slice(4).map((item, index) => (\n {}}\n >\n 
\n
\n ))}\n \n \n \n \n );\n}\n\nexport default Leaderboard;\n","import React from \"react\";\n\nfunction Awards() {\n return (\n <>\n \n \n Magic
\n
\n \n );\n}\n\nexport default Awards;\n","export default __webpack_public_path__ + \"static/media/tv.47ece0d1.png\";","import React, { useState } from \"react\";\nimport { AiFillPlayCircle } from \"react-icons/ai\";\n\nimport ReactPlayer from \"react-player\";\n// OWL CAROUSEL\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\nimport Tv from \"../../../../../assets/tv.png\";\n\nfunction TvRadio({ image }) {\n const [play, setPlay] = useState(false);\n\n const handlePlay = () => {\n setPlay(true);\n };\n\n const options = {\n loop: true,\n margin: 10,\n nav: true,\n autoplay: true,\n autoplayTimeout: 3000,\n responsive: {\n 0: {\n items: 2,\n },\n 600: {\n items: 2,\n },\n 1000: {\n items: 2,\n },\n },\n navText: [\n '',\n '',\n ],\n };\n\n return (\n \n Magic
Awards\n
\n \n
\n \n
\n Magic TV
\n Magic Radio
\n \n
\n\n \n {play ? (\n
\n \n 
\n
\n )}\n \n
\n \n \n \n
\n \n
\n\n \n
\n\n \n
\n\n \n
\n \n
\n <
',\n '>
',\n ],\n};\n\nfunction UnauthenticatedHome() {\n const user = userStore((state) => state.user);\n useEffect(() => {\n if (user) {\n window.location.href = \"/player\";\n }\n }, [user]);\n return (\n \n \n \n\n \n */}\n\n
\n );\n}\n\nexport default UnauthenticatedHome;\n","import React from \"react\";\n// IMPORT COMPONENTS\nimport Navbar from \"./components/Navbar\";\nimport ImageSlider from \"./components/ImageSlider\";\nimport VideoSlider from \"./components/VideoSlider\";\nimport Leaderboard from \"./components/Leaderboard\";\nimport EventsSlider from \"./components/EventsSlider\";\nimport ArtistSlider from \"./components/ArtistSlider\";\nimport Awards from \"./components/Awards\";\nimport TvRadio from \"./components/TvRadio\";\nimport Contact from \"./components/Contact\";\nimport SocialMedia from \"./components/SocialMedia\";\nimport Footer from \"./components/Footer\";\nimport LandingVideoOne from \"../../../../assets/wyreVideo.png\";\nimport { IoIosArrowBack } from \"react-icons/io5\";\n// OWL CAROUSEL\nimport OwlCarousel from \"react-owl-carousel\";\nimport \"owl.carousel/dist/assets/owl.carousel.css\";\nimport \"owl.carousel/dist/assets/owl.theme.default.css\";\n\nconst images = [\n {\n title: \"Image Two\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2F540px%20%20x540px.jpg?alt=media&token=ccba3c2a-471c-4cb8-ac35-6d48ebec8488\",\n },\n {\n title: \"Image One\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2F540px%20%20x540px.jpg?alt=media&token=ccba3c2a-471c-4cb8-ac35-6d48ebec8488\",\n },\n {\n title: \"Image Three\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2F540px%20%20x540px.jpg?alt=media&token=ccba3c2a-471c-4cb8-ac35-6d48ebec8488\",\n },\n];\n\nconst songs = [\n {\n title: \"Tee\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FTee.jpg?alt=media&token=536b9696-b644-460b-a696-b84d593de7b3\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n\n {\n title: \"Benjamin\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FBenjamin.jpg?alt=media&token=ed05f963-0e65-4d0b-aaff-6dd5ecc3eb94\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n {\n title: \"Badoo\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FBadoo.jpg?alt=media&token=348aca95-bbee-4f16-b6a3-aa7d987077b4\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n {\n title: \"Shalate\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FSHALATE.jpg?alt=media&token=9c5d0404-88fb-47a4-a346-95f4c6343e1e\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n {\n title: \"XXC\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FXXC.jpg?alt=media&token=471633af-0a9f-4c9e-b1bd-25068f4a6bd3\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n {\n title: \"Belo\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FBelo.jpg?alt=media&token=ddd7d7a1-6dc9-484f-b89d-159ee3afd2b6\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n\n {\n title: \"Vegas\",\n image:\n \"https://firebasestorage.googleapis.com/v0/b/bloow-prod.appspot.com/o/files%2Fwhitelabel%2Fimages%2FVegas.jpg?alt=media&token=bfb08582-140e-4122-a52b-b660da3645d8\",\n link: \"/ticketing/66046a360397e325103bde70\",\n },\n];\n\nconst options = {\n loop: true,\n margin: 10,\n nav: true,\n responsive: {\n 0: {\n items: 1,\n },\n 600: {\n items: 1,\n },\n 1000: {\n items: 1,\n },\n },\n navText: [\n 'Shout Out!
\n\n Key Features on Bloow\n
\n\n \n \n
\n \n
\n\n \n
\n - \n
- Merchandise \n
- Voting & Awards \n
- Events & Concerts Booking \n
- Milestones \n
- Bloow Studio \n
- Bloow Label \n
- TV & Radio \n
- Store \n
- NFTs \n
- Finance \n
- Streaming \n
- Portfolio \n
- Affiliate Programs \n
\n
\n\n \n
\n - \n
- Merchandise \n
- Voting & Awards \n
- Events & Concerts Booking \n
- Milestones \n
- Bloow Studio \n
- Bloow Label \n
- TV & Radio \n
- Store \n
- NFTs \n
- Finance \n
- Streaming \n
- Portfolio \n
- Affiliate Programs \n
\n
\n \n
\n - \n
- Merchandise \n
- Voting & Awards \n
- Events & Concerts Booking \n
- Milestones \n
- Bloow Studio \n
- Bloow Label \n
- TV & Radio \n
- Store \n
- NFTs \n
- Finance \n
- Streaming \n
- Portfolio \n
- Affiliate Programs \n
<
',\n '>
',\n ],\n};\n\nfunction AuthenticatedHome() {\n return (\n \n \n \n\n \n */}\n\n
\n );\n}\n\nexport default AuthenticatedHome;\n","import React, { useEffect, useState } from \"react\";\nimport { useHistory, useLocation, Link } from \"react-router-dom\";\nimport logo from \"../../../../../assets/logo.svg\";\nimport { AiFillHome, AiOutlineRight } from \"react-icons/ai\";\nimport { IoMdMusicalNote } from \"react-icons/io\";\nimport { BsFillInfoCircleFill } from \"react-icons/bs\";\nimport { BiWallet } from \"react-icons/bi\";\nimport { GiMusicSpell, GiClothes } from \"react-icons/gi\";\nimport { MdBookmarkBorder } from \"react-icons/md\";\n\nimport { userStore, useOpenSidebar } from \"../../../../../stores/index\";\n\nfunction Sidebar() {\n const [navigation, setNavigation] = useState();\n const [minimizeMenu, setMininizeMenu] = useState(true);\n const history = useHistory();\n const location = useLocation();\n const openSidebar = useOpenSidebar((state) => state.openSidebar);\n\n useEffect(() => {\n if (/^\\/player\\b\\/*$/g.test(history.location.pathname)) {\n setNavigation(\"home\");\n } else if (/^\\/\\b\\/*$/g.test(history.location.pathname)) {\n setNavigation(\"index\");\n } else if (\n /^\\/player\\/merchandise\\b[\\/\\w|\\d]*/g.test(history.location.pathname)\n ) {\n setNavigation(\"merchandise\");\n } else if (\n /^\\/player\\/browse\\b[\\/\\w|\\d]*/g.test(history.location.pathname)\n ) {\n setNavigation(\"music\");\n } else if (\n /^\\/player\\/premium\\/purchased\\b[\\/\\w|\\d]*/g.test(\n history.location.pathname\n )\n ) {\n setNavigation(\"purchased\");\n } else if (\n /^\\/player\\/premium\\b[\\/\\w|\\d]*/g.test(history.location.pathname)\n ) {\n setNavigation(\"premium\");\n } else if (/^\\/player\\/tv\\b[\\/\\w|\\d]*/g.test(history.location.pathname)) {\n setNavigation(\"tv\");\n } else if (\n /^\\/player\\/radio\\b[\\/\\w|\\d]*/g.test(history.location.pathname)\n ) {\n setNavigation(\"radio\");\n } else if (\n /^\\/player\\/store\\b[\\/\\w|\\d]*/g.test(history.location.pathname)\n ) {\n setNavigation(\"store\");\n } else if (\n /^\\/player\\/studio\\b[\\/\\w|\\d]*/g.test(history.location.pathname)\n ) {\n setNavigation(\"studio\");\n } else if (\n /^\\/player\\/finance\\b[\\/\\w|\\d]*/g.test(history.location.pathname)\n ) {\n setNavigation(\"finance\");\n }\n }, [location]);\n\n return (\n <>\n {openSidebar && (\n Shoot Out!
\n\n Key Features on Bloow\n
\n\n \n \n
\n \n
\n\n \n
\n - \n
- Merchandise \n
- Voting & Awards \n
- Events & Concerts Booking \n
- Milestones \n
- Bloow Studio \n
- Bloow Label \n
- TV & Radio \n
- Store \n
- NFTs \n
- Finance \n
- Streaming \n
- Portfolio \n
- Affiliate Programs \n
\n
\n\n \n
\n - \n
- Merchandise \n
- Voting & Awards \n
- Events & Concerts Booking \n
- Milestones \n
- Bloow Studio \n
- Bloow Label \n
- TV & Radio \n
- Store \n
- NFTs \n
- Finance \n
- Streaming \n
- Portfolio \n
- Affiliate Programs \n
\n
\n \n
\n - \n
- Merchandise \n
- Voting & Awards \n
- Events & Concerts Booking \n
- Milestones \n
- Bloow Studio \n
- Bloow Label \n
- TV & Radio \n
- Store \n
- NFTs \n
- Finance \n
- Streaming \n
- Portfolio \n
- Affiliate Programs \n
\n setOpenSidebar(!openSidebar)}\n >\n setNavigation(\"premium\")}\n >\n
\n \n \n setNavigation(\"home\")}\n >\n
\n \n\n \n
\n setOpenSidebar(!openSidebar)}>\n \n \n
\n \n
\n \n Home\n
\n \n
\n \n Debut\n
\n \n
\n \n Purchased\n
\n \n
\n Wallet
\n \n
\n \n Merchandise\n
\n \n
\n \n Bookings\n
\n \n
\n \n About\n
\n \n
\n )}\n {loading && \n
\n Recently Played
\n \n
\n \n \n
\n \n \n
\n \n {contents?.map((content, index) => {\n if (index === 0 && content.contentId !== null) {\n return (\n
\n \n
\n );\n};\n","import { useState, useEffect } from \"react\";\nimport { userStore } from \"../../../../../stores\";\nimport { getNewReleases } from \"../../../../../api/streams\";\n\nimport { ContentCard, ContentCardLoading } from \"../../../cards/contentCards\";\nimport {\n SectionThreeCard,\n SectionThreeCardLoading,\n} from \"../../mobile/browse/genreAndMoods/overview/sectionThreeCards\";\n\nexport const SectionThree = () => {\n const user = userStore((state) => state.user);\n const [page, setPage] = useState(1);\n const [finalPage, setFinalPage] = useState(false);\n const [limit, setLimit] = useState(10);\n const [contents, setContents] = useState([]);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n setLoading(true);\n getNewReleases(page, limit).then((response) => {\n setLoading(false);\n if (response && response.status === 200) {\n setContents((prevState) => prevState.concat(response.data.contents));\n }\n if (response && response.status === 204) {\n setFinalPage(true);\n }\n });\n }, [user, page, limit]);\n\n const nextPage = () => {\n if (!finalPage) {\n setPage((prevState) => prevState + 1);\n }\n };\n return (\n <>\n {contents.length > 0 && (\n \n \n \n
\n \n {Array(6)\n .fill(1)\n .map((el, index) => {\n if (index === 0) {\n return
\n \n
\n \n )}\n {loading && \n
\n New Releases for you
\n \n {contents?.map((content, key) => {\n return
\n )}\n \n
\n \n \n View more\n
\n \n
\n );\n};\n","import { useState, useEffect } from \"react\";\nimport { getRecommendedArtists } from \"../../../../../api/streams\";\nimport { userStore } from \"../../../../../stores\";\n\nimport { ArtistCard, ArtistCardLoading } from \"../../../cards/artistCards\";\n\nexport const RecommendedStreams = () => {\n const user = userStore((state) => state.user);\n const [page, setPage] = useState(1);\n const [limit, setLimit] = useState(6);\n const [finalPage, setFinalPage] = useState(null);\n const [artists, setArtists] = useState([]);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n setLoading(true);\n getRecommendedArtists(page, limit).then((response) => {\n setLoading(false);\n if (response && response.status === 200) {\n setArtists(response.data.artists);\n }\n if (response && response.status === 204) {\n setFinalPage(true);\n }\n });\n }, [user, page, limit]);\n\n const previousPage = () => {\n if (finalPage) {\n setFinalPage(false);\n setPage((prevState) => prevState - 2);\n return;\n }\n if (page !== 0) {\n setPage((prevState) => prevState - 1);\n return;\n }\n };\n const nextPage = () => {\n if (!finalPage) {\n setPage((prevState) => prevState + 1);\n }\n };\n return (\n <>\n {(loading && \n {Array(4)\n .fill(1)\n .map((el, index) => {\n return
\n \n
\n \n
\n Recommended Artists
\n \n {} : previousPage}\n className=\"cursor-pointer\"\n >\n \n
\n \n \n
\n \n {artists.length > 0 &&\n artists?.map((content, key) => {\n return (\n {}}\n />\n );\n })}\n
\n \n )}\n \n );\n};\n\nexport const RecommendedStreamsLoading = () => {\n return (\n \n
\n );\n};\n","import React from \"react\";\nimport { Link } from \"react-router-dom\";\nexport function GenreCard({ content }) {\n return (\n <>\n \n \n \n \n
\n \n {Array(6)\n .fill(1)\n .map((el, index) => {\n return
\n \n ![\"\"]()
\n
\n \n \n );\n}\nexport function LoadingGenre() {\n return (\n \n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { AiOutlineRight } from \"react-icons/ai\";\nimport { GenreCard, LoadingGenre } from \"./genreCard\";\nimport { Link } from \"react-router-dom\";\nimport { getAllGenres } from \"../../../../../api/auth\";\nfunction GenreSection() {\n const [genres, setGenres] = useState();\n const [loadingGenres, setLoadingGenres] = useState(true);\n useEffect(() => {\n setLoadingGenres(true);\n getAllGenres().then((response) => {\n if (response && response.status === 200) {\n setGenres(response.data.contentCategories);\n setLoadingGenres(false);\n }\n });\n }, []);\n return (\n \n {content.category}\n
\n \n
\n );\n}\n\nexport default GenreSection;\n","import { useState, useEffect } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { getAllGenres } from \"../../../../api/auth\";\nimport LeaderBoard from \"../../../../components/utils/player/desktop/home/leaderBoard\";\nimport { SectionTwo } from \"../../../../components/utils/player/mobile/home/sectionTwo\";\nimport { SectionThree } from \"../../../../components/utils/player/mobile/home/sectionThree\";\nimport TopTenSongs from \"../../../../components/utils/player/desktop/home/topTenSongs\";\nimport TopVotedSongs from \"../../../../components/utils/player/mobile/home/topVotedSongs\";\nimport { RecommendedStreams } from \"../../../../components/utils/player/mobile/home/RecommendedStreams\";\nimport GenreSection from \"../../../../components/utils/player/mobile/home/genreSection\";\nimport Debut from \"../../../../components/utils/player/mobile/home/debut\";\nimport AllPremiumArtists from \"../../../../components/utils/player/desktop/premium/allPremiumArtists\";\nimport PlayerNavbar from \"./navigation/playerNavbar\";\nimport SlidingPane from \"react-sliding-pane\";\nimport \"react-sliding-pane/dist/react-sliding-pane.css\";\n\nimport { usePlaylist } from \"../../../../stores\";\nimport { userStore } from \"../../../../stores\";\n\nconst Home = () => {\n const user = userStore((state) => state.user);\n const [openGenre, setOpenGenre] = useState(false);\n const [loadingGenres, setLoadingGenres] = useState(true);\n const [genres, setGenres] = useState([]);\n\n useEffect(() => {\n setLoadingGenres(true);\n getAllGenres().then((response) => {\n if (response && response.status === 200) {\n setGenres(response.data.contentCategories);\n setLoadingGenres(false);\n }\n });\n }, []);\n\n return (\n \n
\n \n
\n \n Browse
\n \n Explore by genre and mood\n
\n \n
\n \n View All
\n \n
\n \n {loadingGenres && [1, 3].map(() =>
\n \n {\n // triggered on \"<\" on left top click or on outside click\n setOpenGenre(false);\n }}\n from=\"bottom\"\n width=\"100\"\n hideHeader={true}\n >\n
\n \n \n );\n};\n\nexport default Home;\n\n//\n","import { Suspense, useEffect, lazy, useState, useRef } from \"react\";\nimport { useHistory, useLocation } from \"react-router-dom\";\nimport { Navbar } from \"./components/navbar\";\nimport Sidebar from \"./components/navigation/sidebar\";\nimport { MusicPlayer } from \"../../../components/music/musicPlayer\";\nimport { Switch, Route } from \"react-router-dom\";\nimport BookArtist from \"../../../desktop/pages/player/components/bookArtist/bookArtist\";\nimport UserBookingsPage from \"../../../desktop/pages/player/components/bookArtist/userBookingsPage\";\nimport ArtistBookingsPage from \"../../../desktop/pages/player/components/bookArtist/artistBookingsPage\";\nimport { Spinner } from \"../../../components/utils/spinningLoader\";\nimport Home from \"./components/home\";\n\nconst Player = () => {\n const Library = lazy(() => import(\"./components/library\"));\n const Browse = lazy(() => import(\"./components/browse\"));\n const Account = lazy(() => import(\"./components/account\"));\n const Store = lazy(() => import(\"./components/store\"));\n\n const Queue = lazy(() => import(\"./components/queue\"));\n const Premium = lazy(() => import(\"./components/premium/premium\"));\n const PurchusedContent = lazy(() =>\n import(\"./components/premium/purchasedContent\")\n );\n const Merchandise = lazy(() =>\n import(\"../../../desktop/pages/player/components/merchandise/merchandise\")\n );\n const PremiumAlbum = lazy(() => import(\"./components/premium/premiumAlbum\"));\n\n const [showPlayer, setShowPlayer] = useState();\n\n const history = useHistory();\n const location = useLocation();\n const ref = useRef();\n\n useEffect(() => {\n if (/^\\/player\\/merchandise\\b[\\/\\w|\\d]*/g.test(history.location.pathname)) {\n setShowPlayer(false);\n } else {\n setShowPlayer(true);\n }\n }, [location]);\n\n return (\n \n {/*
\n \n
\n \n {\n setOpenGenre(false);\n }}\n >\n \n
\n Pick a genre
\n \n \n
\n \n
\n {genres.map((genre) => {\n return (\n All Genre
\n \n \n
\n );\n })}\n {genre.category}
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n {showPlayer && (\n
\n \n );\n};\n\nexport default Player;\n","import { useState, useEffect, lazy, Suspense } from \"react\";\nimport { Router, Switch, Route } from \"react-router-dom\";\nimport \".././modal.css\";\nimport history from \"../default\";\nimport { Spinner } from \"../components/utils/spinningLoaderBlack\";\nimport \"lazysizes\";\n// import a plugin\nimport \"lazysizes/plugins/parent-fit/ls.parent-fit\";\nimport { userStore } from \"../../src/stores\";\nimport { refreshToken } from \"../api/auth\";\nimport LandingThree from \"./pages/landing/landingThree/unauthenticatedHomepage\";\nimport AuthenticatedHome from \"./pages/landing/landingThree/authenticatedHomepage\";\nimport Player from \"./pages/player/dashboard\";\n\nconst Business = lazy(() => import(\"./pages/landing/landingThree/business\"));\nconst Fans = lazy(() => import(\"./pages/landing/landingThree/fans\"));\nconst Artists = lazy(() => import(\"./pages/landing/landingThree/artists\"));\n\nconst Ticketing = lazy(() => import(\"./pages/landing/landingThree/ticketing\"));\nconst About = lazy(() => import(\"./pages/landing/landingThree/about\"));\nconst Dashboard = lazy(() => import(\"./pages/dashboard/dashboard\"));\nconst GoToEvent = lazy(() => import(\"./pages/events/goToEvent\"));\nconst ResetPasswordOne = lazy(() => import(\"../components/resetPasswordOne\"));\nconst ResetPasswordTwo = lazy(() => import(\"../components/resetPasswordTwo\"));\nconst GenreOverview = lazy(() =>\n import(\"./pages/player/components/genre/genreOverview\")\n);\nconst GenrePlaylist = lazy(() =>\n import(\"./pages/player/components/genre/genrePlaylist\")\n);\nconst PublicArtist = lazy(() =>\n import(\"./pages/player/components/artist/publicArtist\")\n);\n\nconst MobileApp = () => {\n const user = userStore((state) => state.user);\n const [isLoadingUser, setIsLoadingUser] = useState(true);\n const storeUser = userStore((state) => state.storeUser);\n\n useEffect(() => {\n const fetchNewToken = async () => {\n try {\n setIsLoadingUser(true);\n const res = await refreshToken();\n\n setIsLoadingUser(false);\n if (res && res.status === 200) {\n storeUser(res.data.user);\n }\n } catch (error) {}\n };\n\n if (!user) {\n fetchNewToken();\n }\n }, [user, storeUser]);\n return (\n \n
\n\n \n
\n )}\n \n {\n history.push(\"/player/queue\");\n }}\n autoPlay={true}\n />\n
\n \n
\n \n Internet is not available\n
\n