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