{"version":3,"sources":["components/Header.js","components/Layout.js","components/FetchArea.js","components/Result.js","components/ResultArea.js","App.js","index.js"],"names":["Header","className","href","Layout","children","FetchArea","fetchVideo","useState","url","setUrl","type","placeholder","value","onChange","e","target","onClick","length","xmlns","height","viewBox","width","d","fill","Result","format","bitrate","window","location","ResultArea","loading","result","color","info","title","seconds","min","parseInt","toString","padStart","sec","parseTime","lengthSeconds","viewCount","channelId","author","audios","map","audio","key","App","setLoading","setResult","urlOrId","a","Axios","get","data","swal","response","message","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.4cc9a22f.chunk.js","sourcesContent":["import React from 'react'\n\nconst Header = () => {\n\treturn (\n\t\t<header className=\"header\">\n\t\t\t<h3 className=\"header__logo\">\n\t\t\t\t<a href=\"#\">YTmp3</a>\n\t\t\t</h3>\n\t\t</header>\n\t)\n}\n\nexport default Header\n","import React from 'react'\nimport Header from './Header'\n\nconst Layout = ({ children }) => {\n\treturn (\n\t\t<>\n\t\t\t<Header />\n\t\t\t<main className=\"content-area\">\n\t\t\t\t<div className=\"row\">\n\t\t\t\t\t<div className=\"card\">{children}</div>\n\t\t\t\t</div>\n\t\t\t</main>\n\t\t</>\n\t)\n}\n\nexport default Layout\n","import React, { useState } from 'react'\n\nconst FetchArea = ({ fetchVideo }) => {\n\tlet [url, setUrl] = useState('')\n\n\treturn (\n\t\t<div className=\"fetch-area text-center\">\n\t\t\t<h1 className=\"fetch-area__title\">\n\t\t\t\tDownload Audio from\n\t\t\t\t<span className=\"text-color-primary\">YouTube</span>\n\t\t\t</h1>\n\t\t\t<div className=\"search\">\n\t\t\t\t<div className=\"red-box\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclassName=\"search__input\"\n\t\t\t\t\t\tplaceholder=\"Paste your video url or id here...\"\n\t\t\t\t\t\tvalue={url}\n\t\t\t\t\t\tonChange={(e) => setUrl(e.target.value)}\n\t\t\t\t\t/>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclassName=\"button\"\n\t\t\t\t\t\tonClick={(e) => url.length && fetchVideo(url)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclassName=\"button__icon\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path d=\"M0 0h24v24H0z\" fill=\"none\" />\n\t\t\t\t\t\t\t<path d=\"M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<span className=\"button__text\">Fetch</span>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nexport default FetchArea\n","import React from 'react'\nimport Downloader from 'js-file-downloader'\n\nconst Result = ({ format, bitrate, url }) => {\n\treturn (\n\t\t<div className=\"red-box\">\n\t\t\t<div className=\"red-box__text\">\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\theight={24}\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\twidth={24}\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M0 0h24v24H0z\" fill=\"none\" />\n\t\t\t\t\t<path d=\"M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z\" />\n\t\t\t\t</svg>\n\t\t\t\t{bitrate} kbps\n\t\t\t</div>\n\t\t\t<button className=\"button\" onClick={(e) => (window.location.href = url)}>\n\t\t\t\t<svg\n\t\t\t\t\tclassName=\"button__icon\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"black\"\n\t\t\t\t\twidth=\"18px\"\n\t\t\t\t\theight=\"18px\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M0 0h24v24H0z\" fill=\"none\" />\n\t\t\t\t\t<path d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\" />\n\t\t\t\t</svg>\n\t\t\t\t<span className=\"button__text\">{format}</span>\n\t\t\t</button>\n\t\t</div>\n\t)\n}\n\nexport default Result\n","import React from 'react'\nimport SyncLoader from 'react-spinners/SyncLoader'\nimport Result from './Result'\n\nfunction parseTime(seconds) {\n\tlet min = parseInt(seconds / 60)\n\t\t.toString()\n\t\t.padStart(2, '0')\n\tlet sec = (seconds % 60).toString().padStart(2, '0')\n\n\treturn `${min}:${sec}`\n}\n\nconst ResultArea = ({ loading, result }) => {\n\treturn (\n\t\t<div className=\"download-result\">\n\t\t\t{loading === true && (\n\t\t\t\t<div className=\"text-center loader\">\n\t\t\t\t\t<SyncLoader color=\"#c00\" />\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{loading === false && (\n\t\t\t\t<>\n\t\t\t\t\t<h3 className=\"download-result__track-name\">{result.info?.title}</h3>\n\t\t\t\t\t<p className=\"download-result__duration\">\n\t\t\t\t\t\tDuration: {parseTime(result.info?.lengthSeconds)}\n\t\t\t\t\t</p>\n\t\t\t\t\t<p className=\"download-result__duration\">\n\t\t\t\t\t\tViews: {result.info?.viewCount}\n\t\t\t\t\t</p>\n\t\t\t\t\t<p className=\"download-result__duration\">\n\t\t\t\t\t\tCreator:{' '}\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref={`https://www.youtube.com/channel/${result.info?.channelId}`}\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{result.info?.author}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"download-buttons\">\n\t\t\t\t\t\t<div className=\"download-button\">\n\t\t\t\t\t\t\t{result.audios &&\n\t\t\t\t\t\t\t\tresult.audios.map((audio, key) => (\n\t\t\t\t\t\t\t\t\t<Result {...audio} key={key} />\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nexport default ResultArea\n","import React, { useState } from 'react'\nimport Layout from './components/Layout'\nimport './sass/style.scss'\nimport FetchArea from './components/FetchArea'\nimport ResultArea from './components/ResultArea'\nimport Axios from 'axios'\nimport swal from 'sweetalert'\n\nconst App = () => {\n\tlet [loading, setLoading] = useState(null)\n\tlet [result, setResult] = useState({})\n\n\tconst fetchVideo = async (urlOrId) => {\n\t\tsetLoading(true)\n\t\ttry {\n\t\t\tlet { data } = await Axios.get(\n\t\t\t\t'https://youtube-to-mp3-downloader.herokuapp.com/?video=' + urlOrId\n\t\t\t)\n\n\t\t\tif (data !== null) {\n\t\t\t\tsetLoading(false)\n\t\t\t\tsetResult(data)\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tswal('Hold on!', error.response.data.message, 'error')\n\t\t\tsetLoading(null)\n\t\t}\n\t}\n\n\treturn (\n\t\t<Layout>\n\t\t\t<FetchArea fetchVideo={fetchVideo} />\n\t\t\t<ResultArea result={result} loading={loading} />\n\t\t</Layout>\n\t)\n}\n\nexport default App\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\n\nReactDOM.render(<App />, document.getElementById('root'))\n"],"sourceRoot":""}