RemixDev
/
deezloader-deemix


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242
							<!DOCTYPE html>
<html>
<head>
	<title>deemix</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link rel="stylesheet" type="text/css" href="css/material-icons.css"/>
	<link rel="stylesheet" type="text/css" href="css/materialize.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<link rel="stylesheet" type="text/css" href="css/darkMode.css" name="darkMode" disabled/>
	<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png"/>
	<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png"/>
	<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png"/>
	<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5"/>
	<link rel="shortcut icon" href="/favicons/favicon.ico"/>
	<meta name="msapplication-TileColor" content="#23232c"/>
	<link rel="manifest" href="/manifest.json"/>
	<meta name="msapplication-config" content="/favicons/browserconfig.xml"/>
	<meta name="theme-color" content="#23232c"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
	<script type='text/javascript'>
		if (eval(localStorage.selectedTheme == "dark")){
			document.getElementsByName("darkMode")[0].removeAttribute("disabled");
		}
	</script>
	<meta charset="utf-8"/>
</head>
<body>

<!--#############################################MODAL_SETTINGS############################################-->
<div id="modal_settings" class="modal modal-fixed-footer">
	<div class="modal-content">
		<h4 class="col s12">Settings</h4>

		<h6 class="col s12 secondary-text"><i class="material-icons left">person</i>Login</h6><hr>
		<div class="row">
			<div class="col s12 hide" id="logged_in_info">
				<img id="modal_settings_picture" src="" alt="Profile Picture" class="circle left" style="height:125px; margin-right: 12px;"/>
				<p>You are logged in as <b id="modal_settings_username"></b></p>
				<button class="waves-effect waves-light btn" id="modal_settings_btn_logout">Logout</button>
			</div>
			<p class="col s12" id="login_email_btn_container">
				<a href="#modal_login" class="modal-trigger waves-effect waves-light btn" id="login_email_btn" style="width:100%;">Login with e-mail</a>
			</p>
			<h6 class="red-text" id="login-res-text"></h6>
			<div class="inline-input-group col s12">
				<input autocomplete="off" type="password" id="modal_login_input_arl" placeholder="ARL"/>
				<label for="modal_login_input_arl"></label>
				<button class="btn btn-input btn-flat deezloader-primary white-text" id="modal_settings_btn_copyArl"><i class="material-icons">assignment</i></button>
			</div>
			<p class="col s12"><a href="https://codeberg.org/RemixDev/deemix/wiki/Getting-your-own-ARL" target="_blank">How do I get my arl?</a></p>
			<p class="col s12"><button class="deezloader-secondary waves-effect waves-light btn" style="width:100%;" id="modal_settings_btn_updateArl">Update ARL</button></p>
		</div>

		<h6 class="col s12 secondary-text"><i class="material-icons left">folder</i>Download Path</h6><hr>
		<div class="row">
			<div class="input-field col s12">
				<input autocomplete="off" type="text" id="modal_settings_input_downloadLocation"/>
				<label for="modal_settings_input_downloadLocation">Download folder path</label>
			</div>
		</div>

		<h6 class="col s12 secondary-text"><i class="material-icons left">font_download</i>Templates</h6><hr>
		<div class="row">
			<div class="input-field col s12">
				<input autocomplete="off" type="text" id="modal_settings_input_tracknameTemplate"/>
				<label for="modal_settings_input_tracknameTemplate">Tracknames template</label>
			</div>
		</div>

		<div class="row">
			<div class="input-field col s12">
				<input autocomplete="off" type="text" id="modal_settings_input_albumTracknameTemplate"/>
				<label for="modal_settings_input_albumTracknameTemplate">Album tracknames template</label>
			</div>
		</div>

		<div class="row">
			<div class="input-field col s12">
				<input autocomplete="off" type="text" id="modal_settings_input_playlistTracknameTemplate"/>
				<label for="modal_settings_input_playlistTracknameTemplate">Playlist tracknames template</label>
			</div>
		</div>

		<h6 class="col s12 secondary-text"><i class="material-icons left">create_new_folder</i>Folders</h6><hr>
		<div class="row">
			<div class="col s12 m4">
				<div class="switch settings_switch">
					<span>Create folders for Playlists</span>
					<label>
						<input type="checkbox" id="modal_settings_cbox_createPlaylistFolder" class="filled-in"/>
						<span class="lever"></span>
					</label>
				</div>
				<div class="input-field">
					<input autocomplete="off" type="text" id="modal_settings_input_playlistNameTemplate"/>
					<label for="modal_settings_input_playlistNameTemplate">Playlist names template</label>
				</div>
			</div>

			<div class="col s12 m4">
				<div class="switch settings_switch">
					<span>Create folders for Artists</span>
					<label>
						<input type="checkbox" id="modal_settings_cbox_createArtistFolder"/>
						<span class="lever"></span>
					</label>
				</div>
				<div class="input-field">
					<input autocomplete="off" type="text" id="modal_settings_input_artistNameTemplate"/>
					<label for="modal_settings_input_artistNameTemplate">Artist names template</label>
				</div>
			</div>

			<div class="col s12 m4">
				<div class="switch settings_switch">
					<span>Create folders for Albums</span>
					<label>
						<input type="checkbox" id="modal_settings_cbox_createAlbumFolder"/>
						<span class="lever"></span>
					</label>
				</div>
				<div class="input-field">
					<input autocomplete="off" type="text" id="modal_settings_input_albumNameTemplate"/>
					<label for="modal_settings_input_albumNameTemplate">Album names template</label>
				</div>
			</div>

			<div class="col s12 switch settings_switch">
				<span>Create folders for CDs</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_createCDFolder" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Create Artist, Albums and CDs folders for Playlists too</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_createStructurePlaylist" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Create album folders for single tracks</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_createSingleFolder" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
		</div>

		<h6 class="col s12 secondary-text"><i class="material-icons left">title</i>Track titles</h6><hr>
		<div class="row">
			<div class="col s12 m4 switch settings_switch">
				<span class="tooltipped" data-position="top" data-delay="500"
					data-tooltip="Adds 0s before %number% to have the same character length">Add padding to track numbers</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_padTracks" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="input-field col s12 m4">
				<input autocomplete="off" type="number" id="modal_settings_number_paddingSize" min="0"/>
				<label for="modal_settings_number_paddingSize">Overwrite padding size</label>
			</div>
			<div class="input-field col s12 m4">
				<input autocomplete="off" type="text" id="modal_settings_input_illegalCharacterReplacer" min="0"/>
				<label for="modal_settings_input_illegalCharacterReplacer">Illegal character replacer</label>
			</div>
		</div>

		<h6 class="col s12 secondary-text"><i class="material-icons left">get_app</i>Downloads</h6><hr>
		<div class="row">
			<div class="input-field col s12 m6">
				<input autocomplete="off" type="number" id="modal_settings_number_queueConcurrency" min="1"/>
				<label for="modal_settings_number_queueConcurrency">Concurrent download limit</label>
			</div>
			<div class="input-field col s12 m6">
				<select name="maxBitrate" id="modal_settings_select_maxBitrate">
					<option value="9">FLAC 1411kbps</option>
					<option value="3">MP3 320kbps</option>
					<option value="1">MP3 128kbps</option>
				</select>
				<label for="modal_settings_select_maxBitrate">Preferred bitrate</label>
			</div>
			<div class="input-field col s12">
				<select name="overwriteFile" id="modal_settings_select_overwriteFile">
					<option value="y">Yes, overwrite the files</option>
					<option value="n">No, don't overwrite the files</option>
					<option value="e">No, and don't look at the extension</option>
					<option value="b">No, keep both files and add a number to the duplicate</option>
					<option value="t">Overwrite only the tags</option>
				</select>
				<label for="modal_settings_select_overwriteFile">Should I overwrite the files?</label>
			</div>

			<div class="col s12 switch settings_switch">
				<span>Fallback to lower bitrates if preferred is not available</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_fallbackBitrate" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Fallback to search if song is not available</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_fallbackSearch" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Create log file for Errors inside download folder</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_logErrors" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Create log file for Alternatives inside download folder</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_logSearched" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Download Synced Lyrics File (.lrc)</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_syncedlyrics" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Create M3U8 (Playlist) File</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_createM3U8File" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="input-field col s12">
				<input autocomplete="off" type="text" id="modal_settings_input_playlistFilenameTemplate"/>
				<label for="modal_settings_input_playlistFilenameTemplate">Playlist filename template</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Save download queue on app closing</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_saveDownloadQueue" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
		</div>

		<h6 class="col s12 secondary-text"><i class="material-icons left">album</i>Album Covers</h6><hr>
		<div class="row">
			<div class="col s12 m6">
				<div class="switch settings_switch">
					<span>Save Album Artwork</span>
					<label>
						<input type="checkbox" id="modal_settings_cbox_saveArtwork" class="filled-in"/>
						<span class="lever"></span>
					</label>
				</div>
				<div class="input-field">
					<input autocomplete="off" type="text" id="modal_settings_input_coverImageTemplate"/>
					<label for="modal_settings_input_coverImageTemplate">Album Artwork Name Template</label>
				</div>
			</div>

			<div class="col s12 m6 ">
				<div class="switch settings_switch">
					<span>Save Artist Artwork</span>
					<label>
						<input type="checkbox" id="modal_settings_cbox_saveArtworkArtist" class="filled-in"/>
						<span class="lever"></span>
					</label>
				</div>
				<div class="input-field">
					<input autocomplete="off" type="text" id="modal_settings_input_artistImageTemplate"/>
					<label for="modal_settings_input_artistImageTemplate">Artist Artwork Name Template</label>
				</div>
			</div>
		</div>
		<div class="row">

			<div class="input-field col s12 m6">
				<select name="embeddedArtworkSize" id="modal_settings_select_embeddedArtworkSize">
					<option value="1800">1800x1800</option>
					<option value="1400">1400x1400</option>
					<option value="1200">1200x1200</option>
					<option value="1000">1000x1000</option>
					<option value="800">800x800</option>
					<option value="500">500x500</option>
					<option value="250">250x250</option>
				</select>
				<label for="modal_settings_select_embeddedArtworkSize">Embedded Artwork Size</label>
			</div>
			<div class="input-field col s12 m6">
				<select name="localArtworkSize" id="modal_settings_select_localArtworkSize">
					<option value="1800">1800x1800</option>
					<option value="1400">1400x1400</option>
					<option value="1200">1200x1200</option>
					<option value="1000">1000x1000</option>
					<option value="800">800x800</option>
					<option value="500">500x500</option>
					<option value="250">250x250</option>
				</select>
				<label for="modal_settings_select_localArtworkSize">Local Artwork Size</label>
			</div>

			<div class="input-field col s12 m6">
				<select name="localArtworkFormat" id="modal_settings_select_localArtworkFormat">
					<option value="jpg">jpg</option>
					<option value="png">png</option>
					<option value="jpg,png">both</option>
				</select>
				<label for="modal_settings_select_localArtworkFormat">Local Artwork Format</label>
			</div>
			<div class="input-field col s12 m6">
				<input autocomplete="off" type="number" id="modal_settings_number_jpegImageQuality" min="1"/>
				<label for="modal_settings_number_jpegImageQuality">JPEG image quality</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Save embedded artwork as as PNGs</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_embeddedArtworkPNG" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
		</div>

		<h6 class="col s12 secondary-text"><i class="material-icons left">list</i>Other</h6><hr>
		<div class="row">
			<div class="col s12 switch settings_switch">
				<span class="tooltipped" data-position="top" data-delay="500"
					data-tooltip="Replaces albums tags with the playlist ones">Save Playlist as Compilation</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_savePlaylistAsCompilation" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Use Null Separator in MP3s</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_useNullSeparator" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Save ID3v1 tags as well</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_saveID3v1" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>

			<div class="input-field col s12">
				<select name="multiArtistSeparator" id="modal_settings_select_multiArtistSeparator">
					<option value="nothing">Save only the main artist</option>
					<option value="default">Default</option>
					<option value="andFeat">& and feat.</option>
					<option value=" & ">& with space</option>
					<option value=",">,</option>
					<option value=", ">, with space</option>
					<option value="/">/</option>
					<option value=" / ">/ with space</option>
					<option value=";">;</option>
					<option value="; ">; with space</option>
				</select>
				<label for="modal_settings_select_multiArtistSeparator">Artist Tag Format</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Save only the main album artist</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_singleAlbumArtist" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Keep "Various Artists" in the Album Artists</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_albumVariousArtists" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Remove "(Album Version)" from tracknames</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_removeAlbumVersion" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="col s12 switch settings_switch">
				<span>Remove combinations of artists</span>
				<label>
					<input type="checkbox" id="modal_settings_cbox_removeDuplicateArtists" class="filled-in"/>
					<span class="lever"></span>
				</label>
			</div>
			<div class="input-field col s12 m6">
				<select name="dateFormat" id="modal_settings_select_dateFormat">
					<option value="Y-M-D">YY/MM/DD</option>
					<option value="D-M-Y">DD/MM/YY</option>
					<option value="M-D-Y">MM/DD/YY</option>
					<option value="Y-D-M">YY/DD/MM</option>
				</select>
				<label for="modal_settings_select_dateFormat">Date Format for FLAC files</label>
			</div>
			<div class="input-field col s12 m6">
				<select name="featuredToTitle" id="modal_settings_select_featuredToTitle">
					<option value="0">Keep unchanged</option>
					<option value="1">Remove it from the title</option>
					<option value="3">Remove it from the title and the album title</option>
					<option value="2">Move it to the title</option>
				</select>
				<label for="modal_settings_select_featuredToTitle">What should I do with featured artists?</label>
			</div>
			<div class="input-field col s12 m6">
				<select name="titleCasing" id="modal_settings_select_titleCasing">
					<option value="nothing">Do not change</option>
					<option value="lower">UPPER CASE</option>
					<option value="upper">lower case</option>
					<option value="start">Start Case</option>
					<option value="sentence">Sentence case</option>
				</select>
				<label for="modal_settings_select_titleCasing">Case for Title</label>
			</div>
			<div class="input-field col s12 m6">
				<select name="artistCasing" id="modal_settings_select_artistCasing">
					<option value="nothing">Do not change</option>
					<option value="lower">UPPER CASE</option>
					<option value="upper">lower case</option>
					<option value="start">Start Case</option>
					<option value="sentence">Sentence case</option>
				</select>
				<label for="modal_settings_select_artistCasing">Case for Artist</label>
			</div>
			<div class="range-field col s12 m6">
				<label for="modal_settings_range_previewVolume">Preview Volume</label>
		    <input type="range" min="0" max="100" id="modal_settings_range_previewVolume"/>
			</div>
			<div class="input-field col s12 m6">
				<input autocomplete="off" type="text" id="modal_settings_input_executeCommand"/>
				<label for="modal_settings_input_executeCommand">Command to execute after download</label>
			</div>
		</div>

		<div class="row">
			<div class="col s12">
				<a href="#modal_tags" class="modal-trigger waves-effect waves-light btn btn-large" style="width:100%;">Choose Which Tags To Save</a>
			</div>
		</div>

		<h6 class="col s12 secondary-text">Spotify Features</h6><hr>
		<p class="secondary-text">"Spotify Features" will <b>NOT</b> download music from Spotify.<br>This just enables a practical in app metadata converter. If a song is not on Deezer it can't be downloaded<br>You can see how to get the Client and Secret IDs <a href="https://codeberg.org/RemixDev/deemix/wiki/Enabling-Spotify-Features">here</a></p>
		<div class="row">
			<div class="input-field col s12 m6">
				<input autocomplete="off" type="text" id="modal_settings_input_spotifyClientID"/>
				<label for="modal_settings_input_spotifyClientID">Client ID</label>
			</div>
			<div class="input-field col s12 m6">
				<input autocomplete="off" type="password" id="modal_settings_input_spotifyClientSecret"/>
				<label for="modal_settings_input_spotifyClientSecret">Client Secret</label>
			</div>
			<div class="input-field col s12 m6">
				<input autocomplete="off" type="text" id="modal_settings_input_spotifyUser"/>
				<label for="modal_settings_input_spotifyUser">Spotify Username (for the Playlists Tab)</label>
			</div>
		</div>

	</div>
	<div class="modal-footer">
		<button class="modal-close waves-effect waves-light deezloader-primary btn" id="modal_settings_btn_saveSettings"><i class="material-icons right">save</i>Save</button>
		<button class="waves-effect btn-flat" id="modal_settings_btn_defaultSettings"><i class="material-icons right">settings_backup_restore</i><span class="hide-on-small-only">Default Settings</span></button>
		<button class="modal-close waves-effect btn-flat">Close</button>
	</div>
</div>

<!--#############################################MODAL_TAGS############################################-->
<div id="modal_tags" class="modal modal-fixed-footer">
	<div class="modal-content">
		<div class="row">
			<h4 class="col s12">Saved Tags</h4>
		</div>
		<div class="row">
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_title" class="filled-in"/>
					<span>Title</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_artist" class="filled-in"/>
					<span>Artist</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_album" class="filled-in"/>
					<span>Album</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_cover" class="filled-in"/>
					<span>Cover</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_trackNumber" class="filled-in"/>
					<span>Track Number</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_trackTotal" class="filled-in"/>
					<span>Track Total</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_discNumber" class="filled-in"/>
					<span>Disc Number</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_discTotal" class="filled-in"/>
					<span>Disc Total</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_albumArtist" class="filled-in"/>
					<span>Album Artist</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_genre" class="filled-in"/>
					<span>Genre</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_year" class="filled-in"/>
					<span>Year</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_date" class="filled-in"/>
					<span>Date</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_explicit" class="filled-in"/>
					<span>Explicit</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_isrc" class="filled-in"/>
					<span>ISRC</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_length" class="filled-in"/>
					<span>Length</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_barcode" class="filled-in"/>
					<span>Barcode</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_bpm" class="filled-in"/>
					<span>BPM</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_replayGain" class="filled-in"/>
					<span>Replay Gain</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_label" class="filled-in"/>
					<span>Label</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_lyrics" class="filled-in"/>
					<span>Unsynchronised Lyrics</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_syncedLyrics" class="filled-in"/>
					<span>Synchronised Lyrics</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_copyright" class="filled-in"/>
					<span>Copyright</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_composer" class="filled-in"/>
					<span>Composer</span>
				</label>
			</p>
			<p class="col s12 m4">
				<label>
					<input type="checkbox" id="modal_tags_involvedPeople" class="filled-in"/>
					<span>Involved People</span>
				</label>
			</p>
		</div>
	</div>
	<div class="modal-footer">
		<button class="modal-close waves-effect btn-flat">Close</button>
	</div>
</div>

<!--#############################################MODAL_ABOUT############################################-->
<div id="modal_about" class="modal modal-fixed-footer">
	<div class="modal-content">
		<div class="row">
			<h4 class="col s12">About the App</h4>
		</div>
		<div class="row">
			<ul class="collapsible" data-collapsible="accordion">
				<li>
					<div class="collapsible-header waves-effect"><i class="material-icons">info</i>About</div>
					<div class="collapsible-body">
						<p>
							<b>Made using: </b>deemix</br>
							<b>Version:</b> <span id="application_version_about"></span><br/>
							<b>Based on: </b>Deezloader Remix</br>
							<b>Interface:</b> <a href="http://materializecss.com/" target="_blank">Materialize CSS</a><br/>
							<br/>
							<b>Telegram Contacts</b><br/>
							<b><a href="https://t.me/RemixDevNews" target="_blank">News Channel</a></b><br/>
							<br>
							<b>Special Thanks to:</b><br>
							BasCurtiz for the app UI Design<br>
							<br>
						</p>
					</div>
				</li>
				<li>
					<div class="collapsible-header waves-effect"><i class="material-icons">warning</i>Attention!</div>
					<div class="collapsible-body">
						<p>The authors do not call to commit crimes!<br/>The usage of this tool may be illegal in your country, please inform yourself!<br/>The authors give no guarantees at all and aren't responsible for any damage or harm of any kind resulting from the use of this software!</p>
					</div>
				</li>
				<li>
					<div class="collapsible-header waves-effect"><i class="material-icons">copyright</i>License</div>
					<div class="collapsible-body">
						<p>
							<a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">
								<img alt="GNU General Public License" style="border-width:0"
										 src="https://www.gnu.org/graphics/gplv3-127x51.png"/>
							</a><br/>
							This work is licensed under a <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GNU General Public License 3.0</a>.
						</p>
					</div>
				</li>
				<li>
					<div class="collapsible-header waves-effect"><i class="material-icons">favorite</i>Contributions</div>
					<div class="collapsible-body">
						<h5>You want to contribute to this project? You can do that <b>in different ways!</b></h5>
						<p>If you know JavaScript, HTML, CSS or Node.js you could contribute writing code, fixing bugs and adding features using the <a href="https://codeberg.org/RemixDev/deezlaoder-deemix" target="_blank">Official Repo</a>.</p><br>
						<p>
							If you are good at finding bugs you can help Beta Test the app before release.<br>
							Join our <a href="https://t.me/deemixalpha" target="_blank">Telegram Channel</a> to be notified when alphas come out!
						</p><hr>
						<h5>You want to contribute monetarily? You could make a donation!</h5>
						<p>
							If you can donate you can do that with this links.<br>
							You shoud remember that <b>this is a free project</b> and <b>you should support the artists you love</b> before supporting the developer.<br>
							Don't feel obligated to donate, I appreciate you anyway!
						</p>
						<p>
							PayPal: <a href="https://paypal.me/RemixDev" target="_blank">PayPal.me/RemixDev</a><br>
							Ethereum: 0x1d2aa67e671485CD4062289772B662e0A6Ff976c
						</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="modal-footer">
		<button class="modal-close waves-effect btn-flat">Close</button>
	</div>
</div>

<!--##########################################MODAL_ARTIST###########################################-->
<div id="modal_artist" class="modal modal-fixed-footer modal-custom-header">
	<div class="modal-content">
		<div class="trackList-header" v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-modal-background) 100%), url(\''+image+'\')' }">
			<div class="valign-wrapper">
				<h4 style="width: calc(100% - 56px - 8px);display: inline-block; margin:0px;">{{ title }}</h4>
				<a id="download_all_tracks" v-bind:data-link="link" class="fab deezloader-primary white-text clickable"><i class="material-icons">file_download</i></a>
			</div>
		</div>
		<div class="modal-container">
			<table>
				<tbody id="modal_artist_table_trackList_tbody_loadingIndicator" class="hide">
				<tr>
					<td class="center" colspan="6">
						<div class="preloader-wrapper big active">
							<div class="spinner-layer">
								<div class="circle-clipper left">
									<div class="circle"></div>
								</div>
								<div class="gap-patch">
									<div class="circle"></div>
								</div>
								<div class="circle-clipper right">
									<div class="circle"></div>
								</div>
							</div>
						</div>
					</td>
				</tr>
				</tbody>
				<tbody id="modal_artist_table_trackList_tbody_noResults" class="hide">
					<tr>
						<td class="center">Nothing found!</td>
					</tr>
				</tbody>
			</table>
			<div v-if="body" class="row">
				<div class="col s12">
		      <ul id="artist-tabs" class="row tabs tabs-fixed-width">
						<template v-for="(item, name, index) in body">
							<li class="tab"><a v-bind:class="index==0 ? 'active' : ''" v-bind:href="'#artist_' + name" v-on:click="changeTab(name)">{{ name }}</a></li>
						</template>
		      </ul>
				</div>
				<div v-for="(item, name) in body" v-bind:id="'artist_' + name"></div>
				<table class="highlight col s12">
					<thead>
					<tr>
						<td v-for="data in head" v-on:click="data.sortKey ? sortBy(data.sortKey) : null" v-bind:style = "{ 'width': data.width ? data.width : 'auto'}" v-bind:class="{ 'hide-on-med-and-up' : data.smallonly, 'hide-on-small-only': data.hideonsmall, 'sort-asc': data.sortKey == sortKey && sortOrder == 'asc', 'sort-desc': data.sortKey == sortKey && sortOrder == 'desc', 'sortable': data.sortKey, 'clickable': data.sortKey }">
							{{data.title}}
						</td>
					</tr>
					</thead>
					<tbody>
						<template v-for="release in showTable">
							<tr>
							<td class="hide-on-med-and-up">
								<a href="#" v-on:click="moreInfo(release.link, event)" class="album_chip" v-bind:data-link="release.link"><div class="chip"><img v-bind:src="release.cover_small || 'img/noCover.jpg'"/><i v-if="release.explicit_lyrics" class="material-icons valignicon tiny materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i> {{release.title}}</div></a>
								<i v-if="checkNewRelease(release.release_date)" class="material-icons valignicon small" style="color:#FF7300">fiber_new</i>
								<p class="remove-margin secondary-text">{{release.release_date}}</p>
							</td>
							<td class="hide-on-small-only breakline">
								<a href="#" v-on:click="moreInfo(release.link, event)" class="album_chip" v-bind:data-link="release.link"><div class="chip"><img v-bind:src="release.cover_small || 'img/noCover.jpg'"/>
									<i v-if="release.explicit_lyrics" class="material-icons valignicon tiny materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i>
									{{release.title}}
								</div></a>
								<i v-if="checkNewRelease(release.release_date)" class="material-icons valignicon small" style="color:#FF7300;">fiber_new</i>
							</td>
							<td class="hide-on-small-only">{{release.release_date}}</td>
							<td><button class="waves-effect btn-flat" v-on:click="downloadClick(release.link, event)" v-on:contextmenu="downloadRClick(release.link, event)" v-bind:data-link="release.link"><i class="material-icons">file_download</i></button></td>
							</tr>
						</template>
					</tbody>
					<tbody id="modal_artist_table_trackList_tbody_trackList" class="hide">
					</tbody>
				</table>
	    </div>

		</div>
	</div>
	<div class="modal-footer">
		<button class="modal-close waves-effect btn-flat">Close</button>
	</div>
</div>

<!--##########################################MODAL_TRACKLIST###########################################-->
<div id="modal_trackListSelective" class="modal modal-fixed-footer modal-custom-header">
	<div class="modal-content">
		<div class="trackList-header" v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-modal-background) 100%), url(\''+image+'\')' }">
			<h4>{{ title }} <i v-if="explicit" class="material-icons valignicon materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i></h4>
			<h6 v-if="metadata" style="display: inline;">{{ metadata }}</h6>
			<span class="right hide-on-small-only" v-if="release_date">{{ release_date }}</span>
		</div>
		<div class="modal-container">
			<table class="highlight col s12">
				<thead>
				<tr>
					<td v-for="data in head" v-html="data.title" v-bind:style = "{ 'width': data.width ? data.width : 'auto'}" v-bind:class="{ 'hide-on-med-and-up' : data.smallonly, 'hide-on-small-only': data.hideonsmall }"></td>
				</tr>
				</thead>
				<tbody id="modal_trackListSelective_table_trackListSelective_tbody_loadingIndicator" class="hide">
				<tr>
					<td class="center" colspan="6">
						<div class="preloader-wrapper big active">
							<div class="spinner-layer">
								<div class="circle-clipper left">
									<div class="circle"></div>
								</div>
								<div class="gap-patch">
									<div class="circle"></div>
								</div>
								<div class="circle-clipper right">
									<div class="circle"></div>
								</div>
							</div>
						</div>
					</td>
				</tr>
				</tbody>
				<tbody id="modal_trackListSelective_table_trackListSelective_tbody_trackListSelective" class="hide">
				</tbody>
			</table>
			<span v-if="label" style="opacity: 0.40;margin-top: 8px;display: inline-block;font-size: 13px;">{{ label }}</span>
		</div>
	</div>
	<div class="modal-footer">
		<button id="download_all_tracks_selective" v-bind:data-link="link" class="btn btn-flat waves-effect waves-light left">Download {{ type }}</button>
		<button id="download_track_selection" class="btn btn-flat waves-effect waves-light deezloader-primary white-text"><span class="hide-on-small-only">Download selection<i class="material-icons right">file_download</i></span><i class="material-icons hide-on-med-and-up">file_download</i></button>
		<button class="modal-close waves-effect btn-flat">Close</button>
	</div>
</div>

<!--##########################################MODAL_MSG###########################################-->
<div id="modal_msg" class="modal">
	<div class="modal-content">
		<div class="row">
			<h4 class="col s12" id="modal_msg_title"></h4>
		</div>
		<div class="row">
			<p style="white-space: pre-line" class="col s12" id="modal_msg_message"></p>
		</div>
	</div>
	<div class="modal-footer">
		<button class="modal-close waves-effect waves-light btn">I got it!</button>
	</div>
</div>

<!--##########################################MODAL_ANALYZER_COUNTRY###########################################-->
<div id="modal_link_analyzer_country" class="modal modal-fixed-footer">
	<div class="modal-content">
		<h4 class="col s12">Available Countries for {{ title }}</h4>
		<table class="striped col s12">
			<thead>
				<tr>
					<th style="width:24px;"></th>
					<th>Country</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="cc in countries">
					<td v-for="val in cc">{{ val }}</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="modal-footer">
		<button class="modal-close waves-effect waves-light btn">Close</button>
	</div>
</div>

<!--********************************************MAIN-CONTENT********************************************-->
<nav>
	<div class="nav-wrapper">
		<div class="brand-logo center hide-on-small-only">Deezloader <b>deemix</b></div>
		<ul class="left hide-on-small-only">
			<li>
				<div class="switch">
					<label>
						<i class="material-icons left white-text" style="margin-right: 0px; margin-left: 15px;">brightness_2</i>
						<input id="nightTimeSwitcher" type="checkbox">
						<span class="lever"></span>
					</label>
				</div>
			</li>
		</ul>
		<a href="#" data-target="slide-out" class="sidenav-trigger hide-on-med-and-up right"><i class="material-icons">menu</i></a>
		<ul id="nav-mobile" class="right hide-on-small-only">
			<li>
				<a href="#modal_settings" id="nav_btn_openSettingsModal" class="waves-effect waves-light modal-trigger">
					<i class="material-icons left">settings</i> <span class="hide-on-med-and-down">Settings</span>
				</a>
			</li>
			<li>
				<a href="#modal_about" class="waves-effect waves-light modal-trigger">
					<i class="material-icons left">info</i> <span class="hide-on-med-and-down">About</span>
				</a>
			</li>
		</ul>
	</div>
</nav>

<img src="img/icon.svg" class="circle" id="main_icon"></img>

<ul id="slide-out" class="sidenav">
	<li><div class="user-view">
		<div class="background"></div>
		<a href="#user"><img class="circle" id="side_avatar"></a>
		<a href="#name"><span class="white-text name" id="side_user"></span></a>
		<a href="#email"><span class="white-text email" id="side_email"></span></a>
	</div></li>
	<li><a href="#" tab-id="tab_search" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">search</i>Search</a></li>
	<li><a href="#" tab-id="tab_charts" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">bubble_chart</i>Charts</a></li>
	<li><a href="#" tab-id="tab_playlists" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">playlist_play</i>Playlists</a></li>
	<li><a href="#" tab-id="tab_link" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">link</i>Link Analyzer</a></li>
	<li><a href="#" tab-id="tab_downloads" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">get_app</i>Downloads</a></li>
	<li><div class="divider"></div></li>
	<li><a href="#modal_settings" id="sidenav_settings" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">settings</i>Settings</a></li>
	<li><a href="#modal_about" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">info</i>About</a></li>
	<li><a href="#" id="nightModeSwitch2"><i class="material-icons">brightness_2</i>Enable Night Mode</a>
	</li>
</ul>

<main class="container" style="display: none">
	<div id="deezerNotAvailable" class="error-banner" style="display:none;">
		<button class="close-banner"><i class="material-icons">close</i></button>
		Deezer is not available in your country<br>
		Search and Login functions won't work. You should use a VPN if you want them.
	</div>
	<ul id="tab-nav" class="row tabs tabs-fixed-width hide-on-small-only">
		<li class="tab"><a class="active" href="#tab_search">Search</a></li>
		<li class="tab"><a href="#tab_charts">Charts</a></li>
		<li class="tab"><a href="#tab_playlists">Playlists</a></li>
		<li class="tab"><a href="#tab_link">Link Analyzer</a></li>
		<li class="tab"><a href="#tab_downloads">Downloads</a></li>
	</ul>

	<div id="main-content" class="row">

		<div id="tab_search">
			<form id="tab_search_form_search">
				<div class="inline-input-group col s12">
					<input autocomplete="off" id="tab_search_form_search_input_searchString" type="search" class="input" placeholder="Start searching..." autofocus>
					<button id="tab_search_button" class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">search</i></button>
				</div>
				<div class="row center">
					<p class="col s3">
						<label>
						<input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_song" value="track" checked/>
						<span><i class="material-icons show-on-small-only left deezloader-primary-text">music_note</i><span class="hide-on-med-and-down">Song</span></span>
						</label>
					</p>
					<p class="col s3">
						<label>
						<input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_album" value="album"/>
						<span><i class="material-icons show-on-small-only left deezloader-primary-text">album</i><span class="hide-on-med-and-down">Album</span></span>
						</label>
					</p>
					<p class="col s3">
						<label>
						<input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_artist" value="artist"/>
						<span><i class="material-icons show-on-small-only left deezloader-primary-text">person</i><span class="hide-on-med-and-down">Artist</span></span>
						</label>
					</p>
					<p class="col s3">
						<label>
							<input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_playlist" value="playlist"/>
							<span><i class="material-icons show-on-small-only left deezloader-primary-text">playlist_play</i><span class="hide-on-med-and-down">Playlist</span></span>
						</label>
					</p>
				</div>
			</form>
			<div id="tab_search_results">
				<table id="tab_search_table_results" class="striped col s12">
					<thead class="hide-on-small-only">
						<tr class="hide" id="tab_search_table_results_thead_track">
							<th style="width: 56px;"><!--cover--></th>
							<th>Song</th>
							<th>Artist</th>
							<th>Album</th>
							<th><i class="material-icons">timer</i></th>
							<th style="width: 56px;"><!--download_link--></th>
						</tr>
						<tr class="hide" id="tab_search_table_results_thead_album">
							<th style="width: 56px;"><!--cover--></th>
							<th>Album</th>
							<th>Artist</th>
							<th>Songs</th>
							<th>Type</th>
							<th><!--space--></th>
							<th style="width: 56px;"><!--download_link--></th>
						</tr>
						<tr class="hide" id="tab_search_table_results_thead_artist">
							<th style="width: 56px;"><!--cover--></th>
							<th>Artist</th>
							<th>Albums</th>
							<th><!--space--></th>
							<th style="width: 56px;"><!--download_link--></th>
						</tr>
						<tr class="hide" id="tab_search_table_results_thead_playlist">
							<th style="width: 56px;"><!--cover--></th>
							<th>Name</th>
							<th>Songs</th>
							<th style="width: 56px;"><!--space--></th>
							<th style="width: 56px;"><!--download_link--></th>
						</tr>
					</thead>
					<tbody id="tab_search_table_results_tbody_results"></tbody>
					<tbody id="tab_search_table_results_tbody_loadingIndicator" class="hide loadingTab">
						<tr>
							<td class="center" colspan="7">
								<div class="preloader-wrapper big active">
									<div class="spinner-layer spinner-blue-only">
										<!-- Spinner Code -->
										<div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div>
									</div>
								</div>
							</td>
						</tr>
					</tbody>
					<tbody id="tab_search_table_results_tbody_noResults" class="hide">
						<tr>
							<td class="center">Nothing found!</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div id="tab_charts">
			<div class="input-field col s12">
				<select id="tab_charts_select_country" class="icons">
					<!--All country selects have to be like the following example:
					<option value="example" data-icon="images/sample.jpg" class="left circle">Example</option>
					-->
				</select>
				<label>Country</label>
			</div>
			<button id="downloadChartPlaylist" class="col s12 btn btn-input btn-flat deezloader-primary white-text" style="margin-bottom:8px;">Download Playlist</button>
			<table id="tab_charts_table_charts" class="striped">
				<thead class="hide-on-small-only">
					<tr>
						<th>#</th>
						<th style="width: 56px;"><!--cover--></th>
						<th>Song</th>
						<th>Artist</th>
						<th>Album</th>
						<th><i class="material-icons">timer</i></th>
						<th style="width: 56px;"><!--download_link--></th>
					</tr>
				</thead>
				<tbody id="tab_charts_table_charts_tbody_loadingIndicator" class="loadingTab">
					<tr>
						<td colspan="7" class="center">
							<div class="preloader-wrapper big active">
								<div class="spinner-layer spinner-blue-only">
									<!-- Spinner Code -->
									<div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div>
								</div>
							</div>
						</td>
					</tr>
				</tbody>
				<tbody id="tab_charts_table_charts_tbody_charts"></tbody>
			</table>
		</div>

		<div id="tab_playlists" class="row">
			<div class="col s12">
				<button class="btn-flat btn-large waves-effect deezloader-primary white-text" id="button_refresh_playlist_tab" style="width:100%;">Refresh Playlists</button>
			</div>
			<div class="col s12">
				<table class="striped">
					<thead>
						<tr>
							<th style="width: 56px;"><!--cover--></th>
							<th>Name</th>
							<th>Songs</th>
							<th style="width: 56px;"><!--inspect_playlist--></th>
							<th style="width: 56px;"><!--download_link--></th>
						</tr>
					</thead>
					<tbody id="table_personal_playlists">
					</tbody>
					<tbody id="table_personal_spotify_playlists">
					</tbody>
				</table>
			</div>
		</div>

		<div id="tab_link">
			<div class="inline-input-group">
				<input autocomplete="off" type="search" id="link_analyzer_url" class="input" placeholder="Song/Album URL">
				<button id="link_analyzer_go" class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">search</i></button>
			</div>

			<div id="link_analyzer_loading" class="center" hidden>
				<div class="preloader-wrapper big active">
					<div class="spinner-layer spinner-blue-only">
						<!-- Spinner Code -->
						<div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div>
					</div>
				</div>
			</div>

			<div id="link_analyzer_start">
				<p class="secondary-text center">
					You can use this section to find out more information about the link you are trying to download<br/>
					This is usefull if you're trying to download some tracks that are not available in your country and want to know where they are available
				</p>
			</div>

			<div id="link_analyzer_notSupported" style="display: none;">
				<p class="secondary-text center">This link is currently not supported</p>
			</div>

			<div v-if="d.title" id="link_analyzer_song" class="link_analyzer_info">
				<div id="link_analyzer_song_sideinfo" class="hide-on-small-only link_analyzer_sideinfo">
					<img v-bind:src=" d.album.cover_medium "/>
					<a href="#modal_link_analyzer_country" class="modal-trigger waves-effect waves-light btn" style="width:100%;">See Available Countries</a>
				</div>
				<div id="link_analyzer_song_maininfo" class="link_analyzer_maininfo">
					<h5 style="margin-bottom:8px; margin-top:0px;">{{ d.title }} {{ d.version }}<i v-if="d.explicit_lyrics" class="material-icons valignicon materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i></h5>
					<p style="margin-top:0px;">by <span class="handlink" v-on:click="showArtist()"><b>{{ d.artist.name }}</b></span></br>
					in <span class="handlink" v-on:click="showAlbum()"><b>{{ d.album.title }}</b></span></p>
					<hr class="hide-on-small-only">
					<a v-if="d.alternative" v-bind:href="'d.alternative.link'"><b>Alternative Link</b></a>
					<table class="striped">
						<tbody>
							<tr v-if="d.isrc"><td><b>ISRC</b></td><td>{{ d.isrc }}</td></tr>
							<tr v-if="d.duration"><td><b>Duration</b></td><td>{{ d.duration_string }}</td></tr>
							<tr v-if="d.disk_number"><td><b>Disc Number</b></td><td>{{ d.disk_number }}</td></tr>
							<tr v-if="d.track_position"><td><b>Track Number</b></td><td>{{ d.track_position }}</td></tr>
							<tr v-if="d.release_date"><td><b>Release Date</b></td><td>{{ d.release_date }}</td></tr>
							<tr v-if="d.bpm"><td><b>BPM</b></td><td>{{ d.bpm }}</td></tr>
						</tbody>
					</table>
					<a href="#modal_link_analyzer_country" class="modal-trigger waves-effect waves-light btn hide-on-med-and-up" style="width:100%;">See Available Countries</a>
				</div>
			</div>

			<div v-if="d.title" id="link_analyzer_album" class="link_analyzer_info">
				<div id="link_analyzer_album_sideinfo" class="hide-on-small-only link_analyzer_sideinfo">
					<img v-bind:src=" d.cover_medium "/>
					<a v-on:click="showTrackListSelective(d.link)" class="waves-effect waves-light btn" style="width:100%;">Show Tracklist</a>
				</div>
				<div id="link_analyzer_album_maininfo" class="link_analyzer_maininfo">
					<h5 style="margin-bottom:8px; margin-top:0px;">{{ d.title }} <i v-if="d.explicit_lyrics" class="material-icons valignicon materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i></h5>
					<p style="margin-top:0px;">by <span class="handlink" v-on:click="showArtist()"><b>{{ d.artist.name }}</b></span></br>
					{{ d.tracks_string }}</p>
					<hr class="hide-on-small-only">
					<a v-if="d.alternative" v-bind:href="'d.alternative.link'"><b>Alternative Link</b></a>
					<table class="striped">
						<tbody>
							<tr v-if="d.upc"><td><b>UPC</b></td><td>{{ d.upc }}</td></tr>
							<tr v-if="d.duration"><td><b>Duration</b></td><td>{{ d.duration_string }}</td></tr>
							<tr v-if="d.release_date"><td><b>Release Date</b></td><td>{{ d.release_date }}</td></tr>
							<tr v-if="d.label"><td><b>Label</b></td><td>{{ d.label }}</td></tr>
							<tr v-if="d.record_type"><td><b>Record Type</b></td><td>{{ d.record_type.substring(0,1).toUpperCase()+ d.record_type.substring(1) }}</td></tr>
							<tr v-if="d.genres_string"><td><b>Genres</b></td><td>{{ d.genres_string }}</td></tr>
						</tbody>
					</table>
					<a v-on:click="showTrackListSelective(d.link)" class="waves-effect waves-light btn hide-on-med-and-up" style="width:100%;">Show Tracklist</a>
				</div>
			</div>
		</div>

		<div id="tab_downloads">
			<div class="row">
				<div class="col s12 m4">
					<button id="openDownloadsFolder" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
						Open Downloads Folder
					</button>
				</div>
				<div class="col s12 m4">
					<button id="cancelAllTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
						Cancel All Downloads
					</button>
				</div>
				<div class="col s12 m4">
					<button id="clearTracksTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
						Clear List
					</button>
				</div>
			</div>
			<table id="tab_downloads_table_downloads" class="row">
				<tbody></tbody>
			</table>
		</div>
	</div>
</main>

<div class="fixed-action-btn" id="btn_scrollToTop" style="bottom: 45px; right: 24px;">
	<a class="btn-floating btn-large deezloader-primary scale-transition scale-out">
		<i class="large material-icons">keyboard_arrow_up</i>
	</a>
</div>
<audio id="preview-track">
	<source id="preview-track_source" src="" type="audio/mpeg">
</audio>

<div id="modal_quality" class="smallmodal">
	<!-- Modal content -->
	<div class="smallmodal-content">
		<button onclick="modalQualityButton(9)" class="btn btn-flat waves-effect waves-light deezloader-primary white-text">Download FLAC</button><br>
		<button onclick="modalQualityButton(3)" class="btn btn-flat waves-effect waves-light deezloader-primary white-text">Download MP3 320kbps</button><br>
		<button onclick="modalQualityButton(1)" class="btn btn-flat waves-effect waves-light deezloader-primary white-text">Download MP3 128kbps</button><br>
		<button onclick="modalQualityButton(15)" class="btn btn-flat waves-effect waves-light deezloader-primary white-text">Download 360 Reality Audio [HQ]</button><br>
		<button onclick="modalQualityButton(14)" class="btn btn-flat waves-effect waves-light deezloader-primary white-text">Download 360 Reality Audio [MQ]</button><br>
		<button onclick="modalQualityButton(13)" class="btn btn-flat waves-effect waves-light deezloader-primary white-text">Download 360 Reality Audio [LQ]</button><br>
	</div>
</div>

<script>if (typeof module === 'object') {
	window.module = module;
	module = undefined;
}</script>

<script type="text/javascript" src="js/socket.io.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/lodash.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/appBase.js"></script>
<script type="text/javascript" src="js/frontend.js"></script>
<script>if (window.module) module = window.module;</script>
<script>
if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('/js/sw.js')
           .then(function() { console.log("Service Worker Registered"); });
}
</script>
</body>
</html>