Up to date commit
[DeezloaderRemix.git] / app / public / index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <title>Deezloader Remix</title>
5   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6   <link rel="stylesheet" type="text/css" href="css/material-icons.css"/>
7   <link rel="stylesheet" type="text/css" href="css/materialize.min.css"/>
8   <link rel="stylesheet" type="text/css" href="css/animate.css">
9   <link rel="stylesheet" type="text/css" href="css/style.css"/>
10   <link rel="stylesheet" type="text/css" href="css/darkMode.css" name="darkMode" disabled/>
11   <script type='text/javascript'>
12     if (eval(localStorage.darkMode)){
13       document.getElementsByName("darkMode")[0].removeAttribute("disabled");
14     }
15   </script>
16   <meta charset="utf-8"/>
17 </head>
18 <body>
19 <span id="appVersionFallback" hidden>4.1.3</span>
20
21 <div id="title-bar" class="deezloader-black">
22         <div class="resize-padding" style="width: 100%; height: 3px;"></div>
23         <div class="resize-padding" style="width: 3px; height: 31px;"></div>
24         <div id="title">Deezloader Remix v<span id="application_version"></span></div>
25
26         <div id="title-bar-btns">
27                 <button id="min-btn"><i class="material-icons">remove</i></button>
28                 <button id="max-btn"><i class="material-icons">add</i></button>
29                 <button id="close-btn"><i class="material-icons">close</i></button>
30         </div>
31
32         <div class="resize-padding" style="position: absolute; top:0; right:0px; width: 3px; height: 31px;"></div>
33 </div>
34
35 <!--#############################################INITIALIZING-SCREEN############################################-->
36 <div id="initializing" class="deezloader-black valign-wrapper">
37         <div class="modal-content container" id="login-page">
38                 <div class="card">
39                         <div class="card-content">
40                                 <span class="card-title">Please login to your deezer account.</span>
41                                 <h6 class="red-text" id="login-res-text"></h6>
42                                 <div class="input-field col s12">
43                                         <input type="text" id="modal_login_input_username"/>
44                                         <label for="modal_login_input_username">Email</label>
45                                 </div>
46                                 <div class="input-field col s12">
47                                         <input type="password" id="modal_login_input_password"/>
48                                         <label for="modal_login_input_password">Password</label>
49                                 </div>
50                         </div>
51                         <div class="card-action row">
52         <div class="col s12 m2 right center" id="modal_login_autologin">
53           <label>
54             <input type="checkbox" class="filled-in" id="modal_login_input_autologin"/>
55             <span>Remember me</span>
56           </label>
57                                 </div>
58                                 <a href="#" class="deezloader-primary col s12 m2 waves-effect waves-light btn" id="modal_login_btn_login">Log in</a>
59                                 <a href="#" class="deezloader-secondary col s12 m2 waves-effect waves-light btn" id="modal_login_btn_signup">Sign up</a>
60                         </div>
61                 </div>
62         </div>
63 </div>
64
65 <!--#############################################MODAL_SETTINGS############################################-->
66 <div id="modal_settings" class="modal modal-fixed-footer">
67         <div class="modal-content">
68                 <div class="row">
69                         <h4 class="col s12">Settings</h4>
70                 </div>
71                 <div class="row">
72                         <div class="input-field col s12 m6">
73                                 <i class="material-icons prefix">label</i>
74                                 <input type="text" id="modal_settings_input_trackNameTemplate"/>
75                                 <label for="modal_settings_input_trackNameTemplate">Track names <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
76           data-tooltip="Supported variables are: %number%, %year%, %artist%, %title%, %album%, %explicit% and %label%">info_outline</i></label>
77                         </div>
78                         <div class="input-field col s12 m6">
79                                 <i class="material-icons prefix">label</i>
80                                 <input type="text" id="modal_settings_input_playlistTrackNameTemplate"/>
81                                 <label for="modal_settings_input_playlistTrackNameTemplate">Playlist track names <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
82           data-tooltip="Supported variables are: %number%, %year%, %artist%, %title%, %album%, %explicit% and %label%">info_outline</i></label>
83                         </div>
84                 </div>
85     <div class="row">
86                         <div class="input-field col s12 m6">
87                                 <i class="material-icons prefix">label</i>
88                                 <input type="text" id="modal_settings_input_albumTrackNameTemplate"/>
89                                 <label for="modal_settings_input_albumTrackNameTemplate">Album track names <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
90           data-tooltip="Supported variables are: %number%, %year%, %artist%, %title%, %album%, %explicit% and %label%">info_outline</i></label>
91                         </div>
92                         <div class="input-field col s12 m6">
93                                 <i class="material-icons prefix">label</i>
94                                 <input type="text" id="modal_settings_input_albumNameTemplate"/>
95                                 <label for="modal_settings_input_albumNameTemplate">Album names <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
96           data-tooltip="Supported variables are: %year%, %artist%, %type%, %album%, %explicit% and %label%">info_outline</i></label>
97                         </div>
98                 </div>
99     <div class="row">
100                         <div class="input-field col s12 m6">
101                                 <i class="material-icons prefix">label</i>
102                                 <input type="text" id="modal_settings_input_coverImageTemplate"/>
103                                 <label for="modal_settings_input_albumTrackNameTemplate">Cover Image name <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
104           data-tooltip="Supported variables are: %artist% and %name%">info_outline</i></label>
105                         </div>
106                         <div class="input-field col s12 m6">
107                                 <i class="material-icons prefix">label</i>
108                                 <input type="text" id="modal_settings_input_artistImageTemplate"/>
109                                 <label for="modal_settings_input_albumNameTemplate">Artist Image name <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
110           data-tooltip="Supported variables are: %artist%">info_outline</i></label>
111                         </div>
112                 </div>
113                 <div class="row">
114                         <div class="input-field col s12 m6">
115                                 <i class="material-icons prefix">label</i>
116                                 <select name="artworkSize" id="modal_settings_select_artworkSize">
117           <option value="1400">1400x1400</option>
118           <option value="1200">1200x1200</option>
119           <option value="1000">1000x1000</option>
120           <option value="800">800x800</option>
121           <option value="500">500x500</option>
122           <option value="250">250x250</option>
123                                 </select>
124                                 <label for="modal_settings_select_artworkSize">Artwork size</label>
125                         </div>
126       <div class="input-field col s12 m6">
127                                 <i class="material-icons prefix">label</i>
128                                 <select name="maxBitrate" id="modal_settings_select_maxBitrate">
129           <option value="9">FLAC 1411kbps</option>
130           <option value="3">MP3 320kbps</option>
131           <option value="1">MP3 128kbps</option>
132                                 </select>
133                                 <label for="modal_settings_select_maxBitrate">Downloaded bitrate</label>
134                         </div>
135                 </div>
136     <div class="row">
137                         <div class="input-field col s12 m6">
138                                 <i class="material-icons prefix">label</i>
139                                 <select name="chartsCountry" id="modal_settings_select_chartsCounrty">
140                                 </select>
141                                 <label for="modal_settings_select_chartsCounrty">Default Country for Charts</label>
142                         </div>
143       <div class="input-field col s12 m6">
144                                 <i class="material-icons prefix">label</i>
145                                 <select name="multitagSeparator" id="modal_settings_select_multitagSeparator">
146                                         <option value="null">Null Character</option>
147           <option value=",">,</option>
148           <option value=", ">, with space</option>
149                                         <option value="/">/</option>
150           <option value=" / ">/ with space</option>
151                                         <option value=";">;</option>
152           <option value="; ">; with space</option>
153                                 </select>
154                                 <label for="modal_settings_select_multitagSeparator">Multitag Separator</label>
155                         </div>
156                 </div>
157     <div class="row">
158                         <div class="input-field col s12 m6">
159                                 <i class="material-icons prefix">label</i>
160                                 <select name="dateFormat" id="modal_settings_select_dateFormat">
161           <option value="0">YMD</option>
162                                         <option value="1">DMY</option>
163                                         <option value="2">MDY</option>
164           <option value="3">YDM</option>
165           <option value="4">ID3 Defaut</option>
166                                 </select>
167                                 <label for="modal_settings_select_dateFormat">Date Format</label>
168                         </div>
169       <div class="input-field col s12 m6">
170                                 <i class="material-icons prefix">label</i>
171                                 <select name="dateFormatYear" id="modal_settings_select_dateFormatYear">
172           <option value="2">2</option>
173                                         <option value="4">4</option>
174                                 </select>
175                                 <label for="modal_settings_select_dateFormatYear">Number of digits for the year (only in date tag)</label>
176                         </div>
177                 </div>
178                 <div class="row">
179                         <div class="input-field col s12">
180                                 <i class="material-icons prefix">label</i>
181                                 <input type="text" id="modal_settings_input_downloadTracksLocation"/>
182                                 <label for="modal_settings_input_downloadTracksLocation">Download location</label>
183                         </div>
184                 </div>
185     <div class="row">
186                         <div class="input-field col s12 m6">
187                                 <i class="material-icons prefix">label</i>
188                                 <input type="number" id="modal_settings_number_queueConcurrency" min="1"/>
189                                 <label for="modal_settings_number_queueConcurrency">Queue Concurrency</label>
190                         </div>
191                         <div class="input-field col s12 m6">
192                                 <i class="material-icons prefix">label</i>
193                                 <input type="text" id="modal_settings_input_spotifyUser"/>
194                                 <label for="modal_settings_input_spotifyUser">Spotify Username</label>
195                         </div>
196                 </div>
197                 <div class="row">
198                         <p class="col s12 m4">
199         <label>
200                                 <input type="checkbox" id="modal_settings_cbox_createM3UFile" class="filled-in"/>
201                                 <span>Create M3U (Playlist) file</span>
202         </label>
203                         </p>
204             <p class="col s12 m4">
205         <label>
206           <input type="checkbox" id="modal_settings_cbox_minimizeToTray" class="filled-in"/>
207           <span>Minimize to system tray</span>
208         </label>
209       </p>
210       <p class="col s12 m4">
211         <label>
212                                 <input type="checkbox" id="modal_settings_cbox_syncedlyrics" class="filled-in"/>
213                                 <span class="tooltipped" data-position="top" data-delay="500"
214             data-tooltip="Downloads lyrics .lyr file">Download synced lyrics file</span>
215         </label>
216       </p>
217       <p class="col s12 m4">
218         <label>
219                                 <input type="checkbox" id="modal_settings_cbox_numplaylistbyalbum" class="filled-in"/>
220                                 <span class="tooltipped" data-position="top" data-delay="500"
221             data-tooltip="Track numbers when downloading a Playlist will be the original ones">Number playlist by album</span>
222         </label>
223       </p>
224                         <p class="col s12 m4">
225         <label>
226                                 <input type="checkbox" id="modal_settings_cbox_createArtistFolder" class="filled-in"/>
227                                 <span>Create folder for artists</span>
228         </label>
229                         </p>
230                         <p class="col s12 m4">
231         <label>
232                                 <input type="checkbox" id="modal_settings_cbox_createAlbumFolder" class="filled-in"/>
233                                 <span>Create folder for albums</span>
234         </label>
235                         </p>
236       <p class="col s12 m4">
237         <label>
238                                 <input type="checkbox" id="modal_settings_cbox_createCDFolder" class="filled-in"/>
239                                 <span>Create folder for CDs</span>
240         </label>
241       </p>
242                         <p class="col s12 m4">
243         <label>
244                                 <input type="checkbox" id="modal_settings_cbox_padtrck" class="filled-in"/>
245                                 <span class="tooltipped" data-position="top" data-delay="500"
246             data-tooltip="Adds 0s before %number% to have the same character length">Pad track numbers</span>
247         </label>
248       </p>
249       <p class="col s12 m4">
250         <label>
251                                 <input type="checkbox" id="modal_settings_cbox_logErrors" class="filled-in"/>
252                                 <span>Create log file for Errors</span>
253         </label>
254       </p>
255       <p class="col s12 m4">
256         <label>
257                                 <input type="checkbox" id="modal_settings_cbox_logSearched" class="filled-in"/>
258                                 <span>Create log file for alternatives</span>
259         </label>
260       </p>
261       <p class="col s12 m4">
262         <label>
263                                 <input type="checkbox" id="modal_settings_cbox_saveArtwork" class="filled-in"/>
264                                 <span>Save Album Artwork</span>
265         </label>
266       </p>
267       <p class="col s12 m4">
268         <label>
269                                 <input type="checkbox" id="modal_settings_cbox_saveArtworkArtist" class="filled-in"/>
270                                 <span>Save Artist Artwork</span>
271         </label>
272       </p>
273       <p class="col s12 m4">
274         <label>
275                                 <input type="checkbox" id="modal_settings_cbox_PNGcovers" class="filled-in"/>
276                                 <span>Download images as PNGs</span>
277         </label>
278                         </p>
279       <p class="col s12 m4">
280         <label>
281                                 <input type="checkbox" id="modal_settings_cbox_removeAlbumVersion" class="filled-in"/>
282                                 <span>Remove "(Album Version)" from track title</span>
283         </label>
284                         </p>
285       <p class="col s12 m4">
286         <label>
287                                 <input type="checkbox" id="modal_settings_cbox_fallbackBitrate" class="filled-in"/>
288                                 <span>Fallback to lower bitrates</span>
289         </label>
290       </p>
291                 </div>
292     <div class="row">
293       <div class="col s12">
294         <a href="#modal_tags" class="modal-trigger waves-effect waves-light btn btn-large" style="width:100%;">Choose which tags to Save</a>
295       </div>
296     </div>
297                 <div class="row">
298                         <div class="col s12">
299         <img id="modal_settings_picture" src="" alt="Profile Picture" class="circle left" style="height:125px; margin-right: 12px;"/>
300                                 <p>You are logged in as <b id="modal_settings_username"></b></p>
301                                 <a href="#" class="modal-close waves-effect waves-light btn" id="modal_settings_btn_logout">Logout</a>
302                         </div>
303                 </div>
304         </div>
305         <div class="modal-footer">
306                 <a href="#" class="modal-close waves-effect waves-light deezloader-primary btn" id="modal_settings_btn_saveSettings"><i
307                                                 class="material-icons right">save</i>Save</a>
308                 <a href="#" class="waves-effect btn-flat" id="modal_settings_btn_defaultSettings"><i
309                                                 class="material-icons right">settings_backup_restore</i>Default Settings</a>
310                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
311         </div>
312 </div>
313
314 <!--#############################################MODAL_TAGS############################################-->
315 <div id="modal_tags" class="modal modal-fixed-footer">
316         <div class="modal-content">
317                 <div class="row">
318                         <h4 class="col s12">Saved Tags</h4>
319                 </div>
320                 <div class="row">
321                         <p class="col s12 m4">
322         <label>
323                                 <input type="checkbox" id="modal_tags_title" class="filled-in"/>
324                                 <span>Title</span>
325         </label>
326                         </p>
327       <p class="col s12 m4">
328         <label>
329                                 <input type="checkbox" id="modal_tags_artist" class="filled-in"/>
330                                 <span>Artist</span>
331         </label>
332                         </p>
333       <p class="col s12 m4">
334         <label>
335                                 <input type="checkbox" id="modal_tags_album" class="filled-in"/>
336                                 <span>Album</span>
337         </label>
338                         </p>
339       <p class="col s12 m4">
340         <label>
341                                 <input type="checkbox" id="modal_tags_cover" class="filled-in"/>
342                                 <span>Cover</span>
343         </label>
344                         </p>
345       <p class="col s12 m4">
346         <label>
347                                 <input type="checkbox" id="modal_tags_trackNumber" class="filled-in"/>
348                                 <span>Track Number</span>
349         </label>
350                         </p>
351       <p class="col s12 m4">
352         <label>
353                                 <input type="checkbox" id="modal_tags_trackTotal" class="filled-in"/>
354                                 <span>Track Total</span>
355         </label>
356                         </p>
357       <p class="col s12 m4">
358         <label>
359                                 <input type="checkbox" id="modal_tags_discNumber" class="filled-in"/>
360                                 <span>Disc Number</span>
361         </label>
362                         </p>
363       <p class="col s12 m4">
364         <label>
365                                 <input type="checkbox" id="modal_tags_discTotal" class="filled-in"/>
366                                 <span>Disc Total</span>
367         </label>
368                         </p>
369       <p class="col s12 m4">
370         <label>
371                                 <input type="checkbox" id="modal_tags_albumArtist" class="filled-in"/>
372                                 <span>Album Artist</span>
373         </label>
374                         </p>
375       <p class="col s12 m4">
376         <label>
377                                 <input type="checkbox" id="modal_tags_genre" class="filled-in"/>
378                                 <span>Genre</span>
379         </label>
380                         </p>
381       <p class="col s12 m4">
382         <label>
383                                 <input type="checkbox" id="modal_tags_year" class="filled-in"/>
384                                 <span>Year</span>
385         </label>
386                         </p>
387       <p class="col s12 m4">
388         <label>
389                                 <input type="checkbox" id="modal_tags_date" class="filled-in"/>
390                                 <span>Date</span>
391         </label>
392                         </p>
393       <p class="col s12 m4">
394         <label>
395                                 <input type="checkbox" id="modal_tags_explicit" class="filled-in"/>
396                                 <span>Explicit</span>
397         </label>
398                         </p>
399       <p class="col s12 m4">
400         <label>
401                                 <input type="checkbox" id="modal_tags_isrc" class="filled-in"/>
402                                 <span>ISRC</span>
403         </label>
404                         </p>
405       <p class="col s12 m4">
406         <label>
407                                 <input type="checkbox" id="modal_tags_length" class="filled-in"/>
408                                 <span>Length</span>
409         </label>
410                         </p>
411       <p class="col s12 m4">
412         <label>
413                                 <input type="checkbox" id="modal_tags_barcode" class="filled-in"/>
414                                 <span>Barcode</span>
415         </label>
416                         </p>
417       <p class="col s12 m4">
418         <label>
419                                 <input type="checkbox" id="modal_tags_bpm" class="filled-in"/>
420                                 <span>BPM</span>
421         </label>
422                         </p>
423       <p class="col s12 m4">
424         <label>
425                                 <input type="checkbox" id="modal_tags_replayGain" class="filled-in"/>
426                                 <span>Replay Gain</span>
427         </label>
428                         </p>
429       <p class="col s12 m4">
430         <label>
431                                 <input type="checkbox" id="modal_tags_publisher" class="filled-in"/>
432                                 <span>Label</span>
433         </label>
434                         </p>
435       <p class="col s12 m4">
436         <label>
437                                 <input type="checkbox" id="modal_tags_unsynchronisedLyrics" class="filled-in"/>
438                                 <span>Unsynchronised Lyrics</span>
439         </label>
440                         </p>
441       <p class="col s12 m4">
442         <label>
443                                 <input type="checkbox" id="modal_tags_copyright" class="filled-in"/>
444                                 <span>Copyright</span>
445         </label>
446                         </p>
447       <p class="col s12 m4">
448         <label>
449                                 <input type="checkbox" id="modal_tags_musicpublisher" class="filled-in"/>
450                                 <span>Publisher</span>
451         </label>
452                         </p>
453       <p class="col s12 m4">
454         <label>
455                                 <input type="checkbox" id="modal_tags_composer" class="filled-in"/>
456                                 <span>Composer</span>
457         </label>
458                         </p>
459       <p class="col s12 m4">
460         <label>
461                                 <input type="checkbox" id="modal_tags_mixer" class="filled-in"/>
462                                 <span>Mixer</span>
463         </label>
464                         </p>
465       <p class="col s12 m4">
466         <label>
467                                 <input type="checkbox" id="modal_tags_author" class="filled-in"/>
468                                 <span>Author</span>
469         </label>
470                         </p>
471       <p class="col s12 m4">
472         <label>
473                                 <input type="checkbox" id="modal_tags_writer" class="filled-in"/>
474                                 <span>Writer</span>
475         </label>
476                         </p>
477       <p class="col s12 m4">
478         <label>
479                                 <input type="checkbox" id="modal_tags_engineer" class="filled-in"/>
480                                 <span>Engineer</span>
481         </label>
482                         </p>
483       <p class="col s12 m4">
484         <label>
485                                 <input type="checkbox" id="modal_tags_producer" class="filled-in"/>
486                                 <span>Producer</span>
487         </label>
488                         </p>
489                 </div>
490         </div>
491         <div class="modal-footer">
492                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
493         </div>
494 </div>
495
496 <!--#############################################MODAL_ABOUT############################################-->
497 <div id="modal_about" class="modal modal-fixed-footer">
498         <div class="modal-content">
499                 <h4>More</h4>
500                 <div class="row">
501                         <ul class="collapsible" data-collapsible="accordion">
502                                 <li>
503                                         <div class="collapsible-header waves-effect"><i class="material-icons">info</i>About</div>
504                                         <div class="collapsible-body">
505                                                 <p>
506               <b>Branch: </b>Remix</br>
507                                                         <b>Version:</b> <span id="application_version_about"></span><br/>
508                                                         <b>Original Programmer:</b> <a href="https://boerse.to/members/zzmtv.3378614/">ZzMTV</a><br/>
509                                                         <b>Former Maintainers:</b> <a href="https://www.reddit.com/user/ParadoxalManiak/">ParadoxalManiak</a>, <a href="https://www.reddit.com/user/_snwflake/">snwflake</a>, <a href="https://www.reddit.com/user/ExtendLord/">ExtendLord</a><br>
510               <b>Current Maintainer:</b> RemixDevs<br/>
511               <b>Repo: </b> <a href="https://notabug.org/RemixDevs/DeezloaderRemix">Official Repo</a><br/>
512               <b>Interface:</b> <a href="http://materializecss.com/">materializecss</a><br/>
513               <b>Based on: </b>Deezloader Reborn</br>
514                                                 </p>
515                                         </div>
516                                 </li>
517                                 <li>
518                                         <div class="collapsible-header waves-effect"><i class="material-icons">feedback</i>Feedback</div>
519                                         <div class="collapsible-body">
520                                                 <p>
521                                                         Do you have some feedback or want to ask for some new features? Open a <a href="https://notabug.org/RemixDevs/DeezloaderRemix/issues/new">New Issue</a> and add the Feature label.
522                                                 </p>
523                                         </div>
524                                 </li>
525                                 <li>
526                                         <div class="collapsible-header waves-effect"><i class="material-icons">bug_report</i>Bugs</div>
527                                         <div class="collapsible-body">
528                                                 <p>
529                                                         If you experience any bugs, open a <a href="https://notabug.org/RemixDevs/DeezloaderRemix/issues/new">New Issue</a> and send the bug report there, thankyou.
530                                                 </p>
531                                         </div>
532                                 </li>
533         <li>
534           <div class="collapsible-header waves-effect"><i class="material-icons">group</i>Contacts</div>
535           <div class="collapsible-body">
536             <p>
537               If you want to talk about the app and help you can do that in this <a href="https://t.me/joinchat/BJf2dUoyFbSZFV-kQIe_LQ">Telegram Group</a>!
538             </p>
539           </div>
540         </li>
541                                 <li>
542                                         <div class="collapsible-header waves-effect"><i class="material-icons">warning</i>Attention!</div>
543                                         <div class="collapsible-body">
544                                                 <p>
545                                                         The authors don't call to commit crimes.<br/>
546                                                         The usage of this tool may be illegal in your country! Please inform yourself.<br/>
547                                                         The authors give no guarantee at all and aren't responsible for damages of all kinds!
548                                                 </p>
549                                         </div>
550                                 </li>
551                                 <li>
552                                         <div class="collapsible-header waves-effect"><i class="material-icons">history</i>Changelog</div>
553                                         <div class="collapsible-body">
554                                                 <p>
555               <b>Version 4.1.3</b><br/>
556               - Playlist and Album tracks now have fallback support<br/>
557               - M3U files now works correctly<br/>
558               - Fixed problems with tags<br/>
559               - Added option %explicit% for Track and Album names (Will add "(Explicit)" in that position if it's explicit)<br/>
560               - Added option to remove "(Album Version)" from track title<br/>
561               - Added options to select which format should the date tag have<br/>
562               - Added option to not fallback if desired bitrate is not aviable<br/>
563               - Logging enhancements<br/>
564               - Other minor bug-fixing<br/>
565               <br/>
566                           <b>Version 4.1.2</b><br/>
567                           - Fixed Login Problem (for real this time)<br/>
568                           - Fixed Login after refresh<br/>
569                           - Regionlock free download<br/>
570                           - Added support for download of User Uploaded tracks<br/>
571                           - Now you can select which tags your songs has<br/>
572                           - Fixed selecting problem<br/>
573                           - Tracks without preview will display a disabled play button<br/>
574                           - Previews inside modal will stop with modal close<br/>
575                           - New %label% field for tracks and albums<br/>
576                           - Added option to create folder for CDs<br/>
577                           - Added rename option for cover file<br/>
578                           - Added option to download Artist artwork<br/>
579                           - Added option do log downloaded alternative tracks<br/>
580                           - Fixed some minor bugs
581                           <br/>
582               <b>Version 4.1.1</b><br/>
583               - Fixed Login Problem (again)<br/>
584               - Added Dark Mode<br/>
585               - Added smaller cover option<br/>
586               - Added support for lower bitrates<br/>
587               - Added "Stop All Downloads" button<br/>
588               - Added support for Spotify Playlist preview<br/>
589               - Added support for PNG covers<br/>
590               - Re-Added Date Tag<br/>
591               - Fixed same cover for same track in different albums bug<br/>
592               - Fixed login issue from repository build<br/>
593               <br/>
594               <b>Version 4.1.0</b><br/>
595               - New UI (not completly optimized for small screens)<br/>
596               - Fixed login problems<br/>
597               - Fixed %type% parameter not working<br/>
598               - Fixed year tagging problem<br/>
599               - Fixed playlist file not containing tracks<br/>
600               - More precision in Spotify Playlist conversion<br/>
601               <br/>
602               <a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Changelog">Full Changelog Here</a>
603                                                 </p>
604                                         </div>
605                                 </li>
606                                 <li>
607                                         <div class="collapsible-header waves-effect"><i class="material-icons">build</i>Contributors</div>
608                                         <div class="collapsible-body">
609                                                 <p>Thanks to the following contributors for fixing bugs and improving this application.<br>
610               <br>
611                                                         <a href="https://www.reddit.com/user/Blind-Mute">Blind-Mute</a> <br>
612                                                         <a href="https://gitlab.com/Persei08">Persei08</a> <br>
613                                                         <a href="https://github.com/Uukrull">Uukrull</a> <br>
614                                                 </p>
615                                         </div>
616                                 </li>
617                                 <li>
618                                         <div class="collapsible-header waves-effect"><i class="material-icons">copyright</i>License</div>
619                                         <div class="collapsible-body">
620                                                 <p>
621                                                         <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html">
622                                                                 <img alt="GNU General Public License" style="border-width:0"
623                                                                                  src="https://www.gnu.org/graphics/gplv3-127x51.png"/>
624                                                         </a><br/>
625                                                         This work is licensed under a <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html">GNU General Public License 3.0</a>.
626                                                 </p>
627                                         </div>
628                                 </li>
629                         </ul>
630                 </div>
631         </div>
632         <div class="modal-footer">
633                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
634         </div>
635 </div>
636
637 <!--##########################################MODAL_TRACKLIST###########################################-->
638 <div id="modal_trackList" class="modal modal-fixed-footer">
639         <div class="modal-content">
640                 <div class="row">
641                         <h4 class="col s12">{{ title }}</h4>
642                 </div>
643                 <div class="row">
644                         <table class="highlight col s12">
645                                 <thead>
646                                 <tr>
647                                         <td v-for="data in head" v-html="data.title"></td>
648                                 </tr>
649                                 </thead>
650                                 <tbody id="modal_trackList_table_trackList_tbody_loadingIndicator" class="hide">
651                                 <tr>
652                                         <td class="center" colspan="4">
653                                                 <div class="preloader-wrapper big active">
654                                                         <div class="spinner-layer">
655                                                                 <div class="circle-clipper left">
656                                                                         <div class="circle"></div>
657                                                                 </div>
658                                                                 <div class="gap-patch">
659                                                                         <div class="circle"></div>
660                                                                 </div>
661                                                                 <div class="circle-clipper right">
662                                                                         <div class="circle"></div>
663                                                                 </div>
664                                                         </div>
665                                                 </div>
666                                         </td>
667                                 </tr>
668                                 </tbody>
669                                 <tbody id="modal_trackList_table_trackList_tbody_trackList" class="hide">
670                                 </tbody>
671                         </table>
672                 </div>
673         </div>
674         <div class="modal-footer">
675                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
676         </div>
677 </div>
678
679 <!--##########################################MODAL_TRACKLISTALBUM###########################################-->
680 <div id="modal_trackListSelective" class="modal modal-fixed-footer">
681         <div class="modal-content">
682                 <div class="row">
683                         <h4 class="col s12">{{ title }}</h4>
684                 </div>
685                 <div class="row">
686                         <table class="highlight col s12">
687                                 <thead>
688                                 <tr>
689                                         <td v-for="data in head" v-html="data.title"></td>
690                                 </tr>
691                                 </thead>
692                                 <tbody id="modal_trackListSelective_table_trackList_tbody_loadingIndicator" class="hide">
693                                 <tr>
694                                         <td class="center" colspan="4">
695                                                 <div class="preloader-wrapper big active">
696                                                         <div class="spinner-layer">
697                                                                 <div class="circle-clipper left">
698                                                                         <div class="circle"></div>
699                                                                 </div>
700                                                                 <div class="gap-patch">
701                                                                         <div class="circle"></div>
702                                                                 </div>
703                                                                 <div class="circle-clipper right">
704                                                                         <div class="circle"></div>
705                                                                 </div>
706                                                         </div>
707                                                 </div>
708                                         </td>
709                                 </tr>
710                                 </tbody>
711                                 <tbody id="modal_trackListSelective_table_trackListSelective_tbody_trackListSelective" class="hide">
712                                 </tbody>
713                         </table>
714                 </div>
715         </div>
716         <div class="modal-footer">
717                 <a href="#" id="download_track_selection" class="btn btn-flat waves-effect waves-light deezloader-primary white-text right">Download selection<i class="material-icons right">file_download</i></a>
718                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
719         </div>
720 </div>
721
722 <!--##########################################MODAL_MSG###########################################-->
723 <div id="modal_msg" class="modal">
724         <div class="modal-content">
725                 <div class="row">
726                         <h4 class="col s12" id="modal_msg_title"></h4>
727                 </div>
728                 <div class="row">
729                         <p style="white-space: pre-line" class="col s12" id="modal_msg_message"></p>
730                 </div>
731         </div>
732         <div class="modal-footer">
733                 <a href="#" class="modal-close waves-effect waves-light btn">I got it!</a>
734         </div>
735 </div>
736
737 <!--********************************************MAIN-CONTENT********************************************-->
738 <nav>
739   <div class="nav-wrapper">
740     <div class="brand-logo center hide-on-small-only">Deezloader <b>Remix</b></div>
741     <ul class="left hide-on-small-only">
742       <li>
743         <div class="switch">
744           <label>
745             <i class="material-icons left white-text" style="margin-right: 0px; margin-left: 15px;">brightness_2</i>
746             <input id="nightTimeSwitcher" type="checkbox">
747             <span class="lever"></span>
748           </label>
749         </div>
750       </li>
751     </ul>
752     <a href="#" data-target="slide-out" class="sidenav-trigger hide-on-med-and-up right"><i class="material-icons">menu</i></a>
753     <ul id="nav-mobile" class="right hide-on-small-only">
754       <li>
755                                 <a href="#modal_settings" id="nav_btn_openSettingsModal" class="waves-effect waves-light modal-trigger">
756                                         <i class="material-icons left">settings</i> <span class="hide-on-med-and-down">Settings</span>
757                                 </a>
758                         </li>
759                         <li>
760                                 <a href="#modal_about" class="waves-effect waves-light modal-trigger">
761                                         <i class="material-icons left">star</i> <span class="hide-on-med-and-down">More</span>
762                                 </a>
763                         </li>
764     </ul>
765   </div>
766 </nav>
767
768 <img src="img/icon.svg" class="circle" id="main_icon"></img>
769
770 <ul id="slide-out" class="sidenav">
771   <li><div class="user-view">
772     <div class="background"></div>
773     <a href="#user"><img class="circle" id="side_avatar"></a>
774     <a href="#name"><span class="white-text name" id="side_user"></span></a>
775     <a href="#email"><span class="white-text email" id="side_email"></span></a>
776   </div></li>
777   <li><a href="#!" tab-id="tab_search" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">search</i>Search</a></li>
778   <li><a href="#!" tab-id="tab_charts" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">bubble_chart</i>Charts</a></li>
779   <li><a href="#!" tab-id="tab_playlists" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">playlist_play</i>Playlists</a></li>
780   <li><a href="#!" tab-id="tab_url" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">link</i>Download from URL</a></li>
781   <li><a href="#!" tab-id="tab_downloads" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">get_app</i>Downloads</a></li>
782   <li><div class="divider"></div></li>
783   <li><a href="#modal_settings" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">settings</i>Settings</a></li>
784   <li><a href="#modal_about" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">star</i>About</a></li>
785   <li><a href="#!" id="nightModeSwitch2"><i class="material-icons">brightness_2</i>Enable Night Mode</a>
786   </li>
787 </ul>
788
789 <main class="container">
790   <ul id="tab-nav" class="row tabs tabs-fixed-width hide-on-small-only">
791     <li class="tab"><a class="active" href="#tab_search">Search</a></li>
792     <li class="tab"><a href="#tab_charts">Charts</a></li>
793     <li class="tab"><a href="#tab_playlists">Playlists</a></li>
794     <li class="tab"><a href="#tab_url">Download from URL</a></li>
795     <li class="tab"><a href="#tab_downloads">Downloads</a></li>
796   </ul>
797
798   <div id="main-content" class="row">
799
800     <div id="tab_search">
801       <form id="tab_search_form_search">
802         <div class="inline-input-group col s12">
803           <input id="tab_search_form_search_input_searchString" type="text" class="input" placeholder="Start searching ...">
804           <button class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">search</i></button>
805         </div>
806         <div class="row center">
807           <p class="col s3">
808             <label>
809             <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_song" value="track" checked/>
810             <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>
811             </label>
812           </p>
813           <p class="col s3">
814             <label>
815             <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_album" value="album"/>
816             <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>
817             </label>
818           </p>
819           <p class="col s3">
820             <label>
821             <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_artist" value="artist"/>
822             <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>
823             </label>
824           </p>
825           <p class="col s3">
826             <label>
827               <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_playlist" value="playlist"/>
828               <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>
829             </label>
830           </p>
831         </div>
832       </form>
833       <div id="tab_search_results">
834                                 <table id="tab_search_table_results" class="striped col s12">
835                                         <thead class="hide-on-small-only">
836                                         <tr class="animated fadeInUp hide" id="tab_search_table_results_thead_track">
837                                                 <th style="width: 56px;"><!--cover--></th>
838                                                 <th>Song</th>
839                                                 <th>Artist</th>
840                                                 <th>Album</th>
841                                                 <th><i class="material-icons">timer</i></th>
842                                                 <th style="width: 56px;"><!--download_link--></th>
843                                         </tr>
844                                         <tr class="animated fadeInUp hide" id="tab_search_table_results_thead_album">
845                                                 <th style="width: 56px;"><!--cover--></th>
846                                                 <th>Album</th>
847                                                 <th>Artist</th>
848                                                 <th>Songs</th>
849                                                 <th>Type</th>
850                                                 <th><!--space--></th>
851                                                 <th style="width: 56px;"><!--download_link--></th>
852                                         </tr>
853                                         <tr class="animated fadeInUp hide" id="tab_search_table_results_thead_artist">
854                                                 <th style="width: 56px;"><!--cover--></th>
855                                                 <th>Artist</th>
856                                                 <th>Albums</th>
857                                                 <th><!--space--></th>
858                                                 <th style="width: 56px;"><!--download_link--></th>
859                                         </tr>
860                                         <tr class="animated fadeInUp hide" id="tab_search_table_results_thead_playlist">
861                                                 <th style="width: 56px;"><!--cover--></th>
862                                                 <th>Name</th>
863                                                 <th>Songs</th>
864               <th style="width: 56px;"><!--space--></th>
865                                                 <th style="width: 56px;"><!--download_link--></th>
866                                         </tr>
867                                         </thead>
868                                         <tbody id="tab_search_table_results_tbody_loadingIndicator" class="hide loadingTab">
869                                         <tr>
870                                                 <td class="center">
871                                                           <div class="preloader-wrapper big active">
872                                                             <div class="spinner-layer spinner-blue-only">
873                                                               <!-- Spinner Code -->
874                                                               <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>
875                                                             </div>
876                                                           </div>
877                                                 </td>
878                                         </tr>
879                                         </tbody>
880                                         <tbody id="tab_search_table_results_tbody_results" class="animated fadeInUp"></tbody>
881                                         <tbody id="tab_search_table_results_tbody_noResults" class="animated fadeInUp hide">
882                                         <tr>
883                                                 <td class="center">Nothing found!</td>
884                                         </tr>
885                                         </tbody>
886                                 </table>
887                         </div>
888     </div>
889
890     <div id="tab_charts">
891       <div class="input-field col s12">
892         <select id="tab_charts_select_country" class="icons">
893           <!--All country selects have to be like the following example:
894           <option value="example" data-icon="images/sample.jpg" class="left circle">Example</option>
895           -->
896         </select>
897         <label>Country</label>
898       </div>
899       <button id="downloadChartPlaylist" class="col s12 btn btn-input btn-flat deezloader-primary white-text" style="margin-bottom:8px;">Download Playlist</button>
900       <table id="tab_charts_table_charts" class="striped">
901         <thead class="hide-on-small-only">
902           <tr>
903             <th>#</th>
904             <th style="width: 56px;"><!--cover--></th>
905             <th>Song</th>
906             <th>Artist</th>
907             <th>Album</th>
908             <th><i class="material-icons">timer</i></th>
909             <th style="width: 56px;"><!--download_link--></th>
910           </tr>
911         </thead>
912         <tbody id="tab_charts_table_charts_tbody_loadingIndicator" class="loadingTab">
913           <tr>
914             <td colspan="7" class="center">
915                                                         <div class="preloader-wrapper big active">
916                                                           <div class="spinner-layer spinner-blue-only">
917                                                             <!-- Spinner Code -->
918                                                             <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>
919                                                           </div>
920                                                         </div>
921             </td>
922           </tr>
923         </tbody>
924         <tbody id="tab_charts_table_charts_tbody_charts"></tbody>
925       </table>
926     </div>
927
928     <div id="tab_playlists" class="row">
929       <div class="col s12">
930         <button class="btn-flat btn-large waves-effect" id="button_refresh_playlist_tab" style="width:100%;">Refresh Playlist List</button>
931       </div>
932       <div class="col s12">
933         <table class="striped">
934           <thead>
935             <tr class="animated fadeInUp">
936               <th style="width: 56px;"><!--cover--></th>
937               <th>Name</th>
938               <th>Songs</th>
939               <th style="width: 56px;"><!--inspect_playlist--></th>
940               <th style="width: 56px;"><!--download_link--></th>
941             </tr>
942           </thead>
943           <tbody id="table_personal_playlists" class="animated fadeInUp">
944           </tbody>
945         </table>
946       </div>
947     </div>
948
949     <div id="tab_url">
950       <form id="tab_url_form_url" class="row">
951         <div class="inline-input-group">
952           <input type="text" id="song_url" class="input" placeholder="Song/Playlist/Album/Artist URL, separated by ';'">
953           <button class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">get_app</i></button>
954         </div>
955       </form>
956     </div>
957
958     <div id="tab_downloads">
959       <div class="row">
960         <div class="col s12 m4">
961           <button id="openDownloadsFolder" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
962             Open Downloads Folder
963           </button>
964         </div>
965         <div class="col s12 m4">
966           <button id="cancelAllTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-secondary white-text">
967             Cancel All Downloads
968           </button>
969         </div>
970         <div class="col s12 m4">
971           <button id="clearTracksTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-secondary white-text">
972             Clear List
973           </button>
974         </div>
975       </div>
976       <table id="tab_downloads_table_downloads" class="row">
977         <thead>
978           <tr>
979             <th>Name</th>
980             <th>Size</th>
981             <th>Downloaded</th>
982             <th>Failed</th>
983             <th style="width: 25%;"><!--progress--></th>
984             <th style="width: 56px;"><!--event buttons--></th>
985           </tr>
986         </thead>
987         <tbody></tbody>
988       </table>
989     </div>
990
991   </div>
992 </main>
993
994 <div class="fixed-action-btn" id="btn_scrollToTop" style="bottom: 45px; right: 24px;">
995   <a class="btn-floating btn-large deezloader-primary scale-transition scale-out">
996     <i class="large material-icons">keyboard_arrow_up</i>
997   </a>
998 </div>
999 <audio id="preview-track">
1000   <source id="preview-track_source" src="" type="audio/mpeg">
1001 </audio>
1002
1003 <footer class="deezloader-black darken-1 left page-footer hide-on-med-and-down valign-wrapper">
1004       <p><span style="position: relative;display: inline-block;transform: rotateY(180deg);">&copy;</span> Deezloader original code by <a class="white-text" href="https://boerse.to/members/zzmtv.3378614/">ZzMTV</a>.</p>
1005 </footer>
1006
1007 <script>if (typeof module === 'object') {
1008         window.module = module;
1009         module = undefined;
1010 }</script>
1011 <script type="text/javascript" src="js/socket.io.js"></script>
1012 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
1013 <script type="text/javascript" src="js/materialize.min.js"></script>
1014 <script type="text/javascript" src="js/vue.min.js"></script>
1015 <script type="text/javascript" src="js/appBase.js"></script>
1016 <script type="text/javascript" src="js/main.js"></script>
1017 <script>if (window.module) module = window.module;</script>
1018 </body>
1019 </html>