Update 4.3.0
[DeezloaderRemix.git] / app / views / index.ejs
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         <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png"/>
12         <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png"/>
13         <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png"/>
14         <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5"/>
15         <link rel="shortcut icon" href="/favicons/favicon.ico"/>
16         <meta name="msapplication-TileColor" content="#23232c"/>
17         <link rel="manifest" href="/manifest.json"/>
18         <meta name="msapplication-config" content="/favicons/browserconfig.xml"/>
19         <meta name="theme-color" content="#23232c"/>
20         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
21         <script type='text/javascript'>
22                 if (eval(localStorage.darkMode)){
23                         document.getElementsByName("darkMode")[0].removeAttribute("disabled");
24                 }
25         </script>
26         <meta charset="utf-8"/>
27 </head>
28 <body>
29 <span id="appVersionFallback" hidden>4.3.0</span>
30
31 <div id="title-bar" class="deezloader-black">
32         <div class="resize-padding" style="width: 100%; height: 3px;"></div>
33         <div class="resize-padding" style="width: 3px; height: 31px;"></div>
34         <div id="title">Deezloader Remix v<span id="application_version"></span></div>
35
36         <div id="title-bar-btns">
37                 <button id="min-btn"><i class="material-icons">remove</i></button>
38                 <button id="max-btn"><i class="material-icons">add</i></button>
39                 <button id="close-btn"><i class="material-icons">close</i></button>
40         </div>
41
42         <div class="resize-padding" style="position: absolute; top:0; right:0px; width: 3px; height: 31px;"></div>
43 </div>
44
45 <!--##############################################MODAL_LOGIN##############################################-->
46 <div id="modal_login" class="modal valign-wrapper modal-fixed-footer">
47         <div class="modal-content" id="login-page">
48                 <div class="card">
49                         <div class="card-content">
50                                 <span class="card-title"><%= __('Please login to your deezer account')%>.</span>
51                                 <h6 class="red-text" id="login-res-text"></h6>
52                                 <div class="input-field col s12">
53                                         <input autocomplete="off" type="text" id="modal_login_input_username"/>
54                                         <label for="modal_login_input_username"><%= __('Email')%></label>
55                                 </div>
56                                 <div class="input-field col s12">
57                                         <input autocomplete="off" type="password" id="modal_login_input_password"/>
58                                         <label for="modal_login_input_password"><%= __('Password')%></label>
59                                 </div>
60                                 <input id="modal_login_input_captchaResponse" type="hidden" value=""/>
61                                 <!--<iframe id="modal_login_iframe_captcha" src="cap://deezer.com/"></iframe>-->
62                         </div>
63                         <div class="card-action row">
64                                 <button class="deezloader-primary col s12 m2 waves-effect waves-light btn" id="modal_login_btn_login"><%= __('Log in')%></button>
65                                 <button class="deezloader-secondary col s12 m2 waves-effect waves-light btn" id="modal_login_btn_signup"><%= __('Sign up')%></button>
66                         </div>
67                 </div>
68         </div>
69         <div class="modal-footer">
70                 <button class="modal-close waves-effect btn-flat"><%= __('Close')%></button>
71         </div>
72 </div>
73 <!--#############################################MODAL_SETTINGS############################################-->
74 <div id="modal_settings" class="modal modal-fixed-footer">
75         <div class="modal-content">
76                 <h4 class="col s12"><%= __('Settings')%></h4>
77
78                 <h6 class="col s12 secondary-text"><%= __('Deezer Login')%></h6><hr>
79                 <div class="row">
80                         <div class="col s12 hide" id="logged_in_info">
81                                 <img id="modal_settings_picture" src="" alt="Profile Picture" class="circle left" style="height:125px; margin-right: 12px;"/>
82                                 <p><%= __('You are logged in as')%> <b id="modal_settings_username"></b></p>
83                                 <button class="waves-effect waves-light btn" id="modal_settings_btn_logout"><%= __('Logout')%></button>
84                         </div>
85                         <p class="col s12" id="login_email_btn_container">
86                                 <a href="#modal_login" class="modal-trigger waves-effect waves-light btn" id="login_email_btn" style="width:100%;"><%= __('Login with e-mail')%></a>
87                         </p>
88                         <h6 class="red-text" id="login-res-text2"></h6>
89                         <div class="inline-input-group col s12">
90                                 <input autocomplete="off" type="password" id="modal_login_input_userToken" placeholder="<%= __('userToken')%>"/>
91                                 <label for="modal_login_input_userToken"></label>
92                                 <button class="btn btn-input btn-flat deezloader-primary white-text" id="modal_settings_btn_copyArl"><i class="material-icons">assignment</i></button>
93                         </div>
94                         <p class="col s12"><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank"><%= __('How do I get my userToken?')%></a></p>
95                         <p class="col s12"><button class="deezloader-secondary waves-effect waves-light btn" style="width:100%;" id="modal_settings_btn_updateArl"><%= __('Update userToken')%></button></p>
96                 </div>
97
98                 <h6 class="col s12 secondary-text"><%= __('Path Settings')%></h6><hr>
99                 <div class="row">
100                         <div class="input-field col s12">
101                                 <input autocomplete="off" type="text" id="modal_settings_input_downloadTracksLocation"/>
102                                 <label for="modal_settings_input_downloadTracksLocation"><%= __('Download folder path')%></label>
103                         </div>
104                 </div>
105
106                 <div class="row">
107                         <div class="input-field col s12">
108                                 <input autocomplete="off" type="text" id="modal_settings_input_trackNameTemplate"/>
109                                 <label for="modal_settings_input_trackNameTemplate"><%= __('Tracknames template')%> <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
110                                         data-tooltip="<%= __('Supported variables are')%>: %title%, %album%, %artist%, %year%, %date%, %label%, %number%, %disc%, %isrc%, %explicit%, %genre%, %track_id%, %album_id%">info_outline</i></label>
111                         </div>
112                 </div>
113
114                 <div class="row">
115                         <div class="input-field col s12">
116                                 <input autocomplete="off" type="text" id="modal_settings_input_albumTrackNameTemplate"/>
117                                 <label for="modal_settings_input_albumTrackNameTemplate"><%= __('Album tracknames template')%> <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
118                                         data-tooltip="<%= __('Supported variables are')%>: %title%, %album%, %artist%, %year%, %date%, %label%, %number%, %disc%, %isrc%, %explicit%, %genre%, %track_id%, %album_id%">info_outline</i></label>
119                         </div>
120                 </div>
121
122                 <div class="row">
123                         <div class="input-field col s12">
124                                 <input autocomplete="off" type="text" id="modal_settings_input_playlistTrackNameTemplate"/>
125                                 <label for="modal_settings_input_playlistTrackNameTemplate"><%= __('Playlist tracknames template')%> <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
126                                         data-tooltip="<%= __('Supported variables are')%>: %title%, %album%, %artist%, %year%, %date%, %label%, %number%, %position%, %disc%, %isrc%, %explicit%, %genre%, %track_id%, %album_id%, %playlist_id%">info_outline</i></label>
127                         </div>
128                 </div>
129
130                 <h6 class="col s12 secondary-text"><%= __('More Path Settings')%></h6><hr>
131                 <div class="row">
132                         <div class="col s12 switch settings_switch">
133                                 <span><%= __('Create folders for Playlists')%></span>
134                                 <label>
135                                         <input type="checkbox" id="modal_settings_cbox_createPlaylistFolder" class="filled-in"/>
136                                         <span class="lever"></span>
137                                 </label>
138                         </div>
139                         <div class="input-field col s12">
140                                 <input autocomplete="off" type="text" id="modal_settings_input_playlistNameTemplate"/>
141                                 <label for="modal_settings_input_playlistNameTemplate"><%= __('Playlist names template')%> <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
142                                         data-tooltip="<%= __('Supported variables are')%>: %owner%, %name%, %year%, %date%, %playlist_id%">info_outline</i></label>
143                         </div>
144                         <div class="col s12 switch settings_switch">
145                                 <span><%= __('Create folders for Artists')%></span>
146                                 <label>
147                                         <input type="checkbox" id="modal_settings_cbox_createArtistFolder"/>
148                                         <span class="lever"></span>
149                                 </label>
150                         </div>
151                         <div class="input-field col s12">
152                                 <input autocomplete="off" type="text" id="modal_settings_input_artistNameTemplate"/>
153                                 <label for="modal_settings_input_artistNameTemplate"><%= __('Artist names template')%> <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
154                                         data-tooltip="<%= __('Supported variables are')%>: %name%, %artist_id%">info_outline</i></label>
155                         </div>
156                         <div class="col s12 switch settings_switch">
157                                 <span><%= __('Create folders for Albums')%></span>
158                                 <label>
159                                         <input type="checkbox" id="modal_settings_cbox_createAlbumFolder"/>
160                                         <span class="lever"></span>
161                                 </label>
162                         </div>
163                         <div class="input-field col s12">
164                                 <input autocomplete="off" type="text" id="modal_settings_input_albumNameTemplate"/>
165                                 <label for="modal_settings_input_albumNameTemplate"><%= __('Album names template')%> <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
166                                         data-tooltip="<%= __('Supported variables are')%>: %album%, %artist%, %year%, %date%, %bitrate%, %type%, %label%, %album_id%, %upc%, %explicit%, %genre%">info_outline</i></label>
167                         </div>
168                         <div class="col s12 switch settings_switch">
169                                 <span><%= __('Create folders for CDs')%></span>
170                                 <label>
171                                         <input type="checkbox" id="modal_settings_cbox_createCDFolder" class="filled-in"/>
172                                         <span class="lever"></span>
173                                 </label>
174                         </div>
175                         <div class="col s12 switch settings_switch">
176                                 <span><%= __('Create Artist, Albums and CDs folders for Playlists too')%></span>
177                                 <label>
178                                         <input type="checkbox" id="modal_settings_cbox_createStructurePlaylist" class="filled-in"/>
179                                         <span class="lever"></span>
180                                 </label>
181                         </div>
182                         <div class="col s12 switch settings_switch">
183                                 <span><%= __('Save single tracks in a folder')%></span>
184                                 <label>
185                                         <input type="checkbox" id="modal_settings_cbox_createSingleFolder" class="filled-in"/>
186                                         <span class="lever"></span>
187                                 </label>
188                         </div>
189                         <div class="col s12 switch settings_switch">
190                                 <span><%= __('Write all Artists in track filename')%></span>
191                                 <label>
192                                         <input type="checkbox" id="modal_settings_cbox_saveFullArtists" class="filled-in"/>
193                                         <span class="lever"></span>
194                                 </label>
195                         </div>
196                         <div class="col s12 switch settings_switch">
197                                 <span class="tooltipped" data-position="top" data-delay="500"
198                                         data-tooltip="<%= __('Adds 0s before %number% to have the same character length')%>"><%= __('Add padding to track numbers')%></span>
199                                 <label>
200                                         <input type="checkbox" id="modal_settings_cbox_padtrck" class="filled-in"/>
201                                         <span class="lever"></span>
202                                 </label>
203                         </div>
204                         <div class="input-field col s12">
205                                 <input autocomplete="off" type="number" id="modal_settings_number_paddingSize" min="0"/>
206                                 <label for="modal_settings_number_paddingSize"><%= __('Overwrite padding size')%></label>
207                         </div>
208                 </div>
209
210                 <h6 class="col s12 secondary-text"><%= __('App Settings')%></h6><hr>
211                 <div class="row">
212                         <div class="input-field col s12 m6">
213                                 <input autocomplete="off" type="number" id="modal_settings_number_queueConcurrency" min="1"/>
214                                 <label for="modal_settings_number_queueConcurrency"><%= __('Concurrent download limit')%></label>
215                         </div>
216                         <div class="input-field col s12 m6">
217                                 <select name="maxBitrate" id="modal_settings_select_maxBitrate">
218                                         <option value="9">FLAC 1411kbps</option>
219                                         <option value="3">MP3 320kbps</option>
220                                         <option value="1">MP3 128kbps</option>
221                                 </select>
222                                 <label for="modal_settings_select_maxBitrate"><%= __('Preferred bitrate')%></label>
223                         </div>
224                         <div class="input-field col s12 m6">
225                                 <select name="lang" id="modal_settings_select_lang">
226                                         <option value="en">English</option>
227                                         <option value="fr">Français</option>
228                                         <option value="it">Italiano</option>
229                                         <option value="de">Deutsch</option>
230                                         <option value="es">Español</option>
231                                         <option value="ar">العربية</option>
232                                         <option value="cs">Čeština</option>
233                                         <option value="dk">Dansk</option>
234                                         <option value="fa">فارسی</option>
235                                         <option value="ko">한국어</option>
236                                         <option value="pt-BR">Português do Brasil</option>
237                                         <option value="ru">Русский</option>
238                                         <option value="th">ภาษาไทย</option>
239                                         <option value="tr">Türkçe</option>
240                                         <option value="uwu">engwish uwu</option>
241                                 </select>
242                                 <label for="modal_settings_select_lang"><%= __('Language')%></label>
243                         </div>
244                         <div class="col s12 switch settings_switch">
245                                 <span><%= __('Fallback to lower bitrates if preferred is not available')%></span>
246                                 <label>
247                                         <input type="checkbox" id="modal_settings_cbox_fallbackBitrate" class="filled-in"/>
248                                         <span class="lever"></span>
249                                 </label>
250                         </div>
251                         <div class="col s12 switch settings_switch">
252                                 <span><%= __('Fallback to search if song is not available')%></span>
253                                 <label>
254                                         <input type="checkbox" id="modal_settings_cbox_fallbackSearch" class="filled-in"/>
255                                         <span class="lever"></span>
256                                 </label>
257                         </div>
258                         <div class="col s12 switch settings_switch">
259                                 <span><%= __('Download albums with one track as a single track')%></span>
260                                 <label>
261                                         <input type="checkbox" id="modal_settings_cbox_downloadSinglesAsTracks" class="filled-in"/>
262                                         <span class="lever"></span>
263                                 </label>
264                         </div>
265                         <div class="col s12 switch settings_switch">
266                                 <span><%= __('Create log file for Errors inside download folder')%></span>
267                                 <label>
268                                         <input type="checkbox" id="modal_settings_cbox_logErrors" class="filled-in"/>
269                                         <span class="lever"></span>
270                                 </label>
271                         </div>
272                         <div class="col s12 switch settings_switch">
273                                 <span><%= __('Create log file for Alternatives inside download folder')%></span>
274                                 <label>
275                                         <input type="checkbox" id="modal_settings_cbox_logSearched" class="filled-in"/>
276                                         <span class="lever"></span>
277                                 </label>
278                         </div>
279                         <div class="col s12 switch settings_switch">
280                                 <span><%= __('Create M3U8 (Playlist) File')%></span>
281                                 <label>
282                                         <input type="checkbox" id="modal_settings_cbox_createM3UFile" class="filled-in"/>
283                                         <span class="lever"></span>
284                                 </label>
285                         </div>
286                 <div class="col s12 switch settings_switch">
287                         <span><%= __('Save Playlist File with folder name')%></span>
288                         <label>
289                                 <input type="checkbox" id="modal_settings_cbox_changePlaylistName" class="filled-in"/>
290                                 <span class="lever"></span>
291                         </label>
292                 </div>
293                         <div class="col s12 switch settings_switch">
294                                 <span><%= __('Download Synced Lyrics File (.lrc)')%></span>
295                                 <label>
296                                         <input type="checkbox" id="modal_settings_cbox_syncedlyrics" class="filled-in"/>
297                                         <span class="lever"></span>
298                                 </label>
299                         </div>
300                         <div class="col s12 switch settings_switch">
301                                 <span><%= __('Minimize to system tray')%></span>
302                                 <label>
303                                         <input type="checkbox" id="modal_settings_cbox_minimizeToTray" class="filled-in"/>
304                                         <span class="lever"></span>
305                                 </label>
306                         </div>
307                 </div>
308
309                 <h6 class="col s12 secondary-text"><%= __('Artworks')%></h6><hr>
310                 <div class="row">
311                         <div class="input-field col s12 m6">
312                                 <select name="embeddedArtworkSize" id="modal_settings_select_embeddedArtworkSize">
313                                         <option value="2000">2000x2000</option>
314                                         <option value="1400">1400x1400</option>
315                                         <option value="1200">1200x1200</option>
316                                         <option value="1000">1000x1000</option>
317                                         <option value="800">800x800</option>
318                                         <option value="500">500x500</option>
319                                         <option value="250">250x250</option>
320                                 </select>
321                                 <label for="modal_settings_select_embeddedArtworkSize"><%= __('Embedded Artwork Size')%></label>
322                         </div>
323                         <div class="input-field col s12 m6">
324                                 <select name="localArtworkSize" id="modal_settings_select_localArtworkSize">
325                                         <option value="2000">2000x2000</option>
326                                         <option value="1400">1400x1400</option>
327                                         <option value="1200">1200x1200</option>
328                                         <option value="1000">1000x1000</option>
329                                         <option value="800">800x800</option>
330                                         <option value="500">500x500</option>
331                                         <option value="250">250x250</option>
332                                 </select>
333                                 <label for="modal_settings_select_localArtworkSize"><%= __('Local Artwork Size')%></label>
334                         </div>
335                         <div class="col s12 switch settings_switch">
336                                 <span><%= __('Save Album Artwork')%></span>
337                                 <label>
338                                         <input type="checkbox" id="modal_settings_cbox_saveArtwork" class="filled-in"/>
339                                         <span class="lever"></span>
340                                 </label>
341                         </div>
342                         <div class="input-field col s12">
343                                 <input autocomplete="off" type="text" id="modal_settings_input_coverImageTemplate"/>
344                                 <label for="modal_settings_input_albumTrackNameTemplate"><%= __('Album Artwork Name Template')%> <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
345                                         data-tooltip="<%= __('Supported variables are')%>: %album%, %artist%, %year%, %date%, %bitrate%, %type%, %label%, %album_id%, %upc%, %explicit%, %genre%">info_outline</i></label>
346                         </div>
347                         <div class="col s12 switch settings_switch">
348                                 <span><%= __('Save Artist Artwork')%></span>
349                                 <label>
350                                         <input type="checkbox" id="modal_settings_cbox_saveArtworkArtist" class="filled-in"/>
351                                         <span class="lever"></span>
352                                 </label>
353                         </div>
354                         <div class="input-field col s12">
355                                 <input autocomplete="off" type="text" id="modal_settings_input_artistImageTemplate"/>
356                                 <label for="modal_settings_input_albumNameTemplate"><%= __('Artist Artwork Name Template')%><i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
357                                         data-tooltip="<%= __('Supported variables are')%>: %name%, %artist_id%">info_outline</i></label>
358                         </div>
359                         <div class="col s12 switch settings_switch">
360                                 <span><%= __('Download images as PNGs')%></span>
361                                 <label>
362                                         <input type="checkbox" id="modal_settings_cbox_PNGcovers" class="filled-in"/>
363                                         <span class="lever"></span>
364                                 </label>
365                         </div>
366                 </div>
367
368                 <h6 class="col s12 secondary-text"><%= __('Tags')%></h6><hr>
369                 <div class="row">
370                         <div class="input-field col s12">
371                                 <select name="multitagSeparator" id="modal_settings_select_multitagSeparator">
372                                         <option value="null"><%= __('Null Character')%></option>
373                                         <option value=",">,</option>
374                                         <option value=", ">, <%= __('with space')%></option>
375                                         <option value="/">/</option>
376                                         <option value=" / ">/ <%= __('with space')%></option>
377                                         <option value=";">;</option>
378                                         <option value="; ">; <%= __('with space')%></option>
379                                 </select>
380                                 <label for="modal_settings_select_multitagSeparator"><%= __('Multitag Separator')%></label>
381                         </div>
382                         <div class="input-field col s12 m6">
383                                 <select name="dateFormat" id="modal_settings_select_dateFormat">
384                                         <option value="0"><%= __('YY')%>/<%= __('MM')%>/<%= __('DD')%></option>
385                                         <option value="1"><%= __('DD')%>/<%= __('MM')%>/<%= __('YY')%></option>
386                                         <option value="2"><%= __('MM')%>/<%= __('DD')%>/<%= __('YY')%></option>
387                                         <option value="3"><%= __('YY')%>/<%= __('DD')%>/<%= __('MM')%></option>
388                                 </select>
389                                 <label for="modal_settings_select_dateFormat"><%= __('Date Format')%></label>
390                         </div>
391                         <div class="input-field col s12 m6">
392                                 <select name="dateFormatYear" id="modal_settings_select_dateFormatYear">
393                                         <option value="2">2 <%= __('digit')%></option>
394                                         <option value="4">4 <%= __('digit')%></option>
395                                 </select>
396                                 <label for="modal_settings_select_dateFormatYear"><%= __('Year Format')%></label>
397                         </div>
398                         <div class="col s12 switch settings_switch">
399                                 <span class="tooltipped" data-position="top" data-delay="500"
400                                         data-tooltip="<%= __('Replaces albums tags with the playlist ones')%>"><%= __('Save Playlist as Compilation')%></span>
401                                 <label>
402                                         <input type="checkbox" id="modal_settings_cbox_savePlaylistAsCompilation" class="filled-in"/>
403                                         <span class="lever"></span>
404                                 </label>
405                         </div>
406                         <div class="col s12 switch settings_switch">
407                                 <span><%= __('Remove \"(Album Version)\" from tracknames')%></span>
408                                 <label>
409                                         <input type="checkbox" id="modal_settings_cbox_removeAlbumVersion" class="filled-in"/>
410                                         <span class="lever"></span>
411                                 </label>
412                         </div>
413                         <div class="col s12 switch settings_switch">
414                                 <span><%= __('Save ID3v1 tags as well')%></span>
415                                 <label>
416                                         <input type="checkbox" id="modal_settings_cbox_saveID3v1" class="filled-in"/>
417                                         <span class="lever"></span>
418                                 </label>
419                         </div>
420                         <div class="input-field col s12 m6">
421                                 <select name="titleCasing" id="modal_settings_select_titleCasing">
422                                         <option value="nothing"><%= __('Do not change')%></option>
423                                         <option value="lower"><%= __('UPPER CASE')%></option>
424                                         <option value="upper"><%= __('lower case')%></option>
425                                         <option value="start"><%= __('Start Case')%></option>
426                                         <option value="sentence"><%= __('Sentence case')%></option>
427                                 </select>
428                                 <label for="modal_settings_select_titleCasing"><%= __('Case for Title')%></label>
429                         </div>
430                         <div class="input-field col s12 m6">
431                                 <select name="titleCasing" id="modal_settings_select_artistCasing">
432                                         <option value="nothing"><%= __('Do not change')%></option>
433                                         <option value="lower"><%= __('UPPER CASE')%></option>
434                                         <option value="upper"><%= __('lower case')%></option>
435                                         <option value="start"><%= __('Start Case')%></option>
436                                         <option value="sentence"><%= __('Sentence case')%></option>
437                                 </select>
438                                 <label for="modal_settings_select_artistCasing"><%= __('Case for Artist')%></label>
439                         </div>
440                 </div>
441
442                 <div class="row">
443                         <div class="col s12">
444                                 <a href="#modal_tags" class="modal-trigger waves-effect waves-light btn btn-large" style="width:100%;"><%= __('Choose Which Tags To Save')%></a>
445                         </div>
446                 </div>
447
448                 <h6 class="col s12 secondary-text"><%= __('Spotify Features')%></h6><hr>
449                 <p class="secondary-text"><%- __('SpotifyFeatures_Info')%></p>
450                 <div class="row">
451                         <div class="input-field col s12 m6">
452                                 <input autocomplete="off" type="text" id="modal_settings_input_spotifyClientID"/>
453                                 <label for="modal_settings_input_spotifyClientID"><%= __('Client ID')%></label>
454                         </div>
455                         <div class="input-field col s12 m6">
456                                 <input autocomplete="off" type="password" id="modal_settings_input_spotifyClientSecret"/>
457                                 <label for="modal_settings_input_spotifyClientSecret"><%= __('Client Secret')%></label>
458                         </div>
459                         <div class="input-field col s12 m6">
460                                 <input autocomplete="off" type="text" id="modal_settings_input_spotifyUser"/>
461                                 <label for="modal_settings_input_spotifyUser"><%= __('Spotify Username (for the Playlists Tab)')%></label>
462                         </div>
463                 </div>
464
465         </div>
466         <div class="modal-footer">
467                 <button class="modal-close waves-effect waves-light deezloader-primary btn" id="modal_settings_btn_saveSettings"><i class="material-icons right">save</i><%= __('Save')%></button>
468                 <button class="waves-effect btn-flat" id="modal_settings_btn_defaultSettings"><i class="material-icons right">settings_backup_restore</i><span class="hide-on-small-only"><%= __('Default Settings')%></span></button>
469                 <button class="modal-close waves-effect btn-flat"><%= __('Close')%></button>
470         </div>
471 </div>
472
473 <!--#############################################MODAL_TAGS############################################-->
474 <div id="modal_tags" class="modal modal-fixed-footer">
475         <div class="modal-content">
476                 <div class="row">
477                         <h4 class="col s12"><%= __('Saved Tags')%></h4>
478                 </div>
479                 <div class="row">
480                         <p class="col s12 m4">
481                                 <label>
482                                         <input type="checkbox" id="modal_tags_title" class="filled-in"/>
483                                         <span><%= __('Title')%></span>
484                                 </label>
485                         </p>
486                         <p class="col s12 m4">
487                                 <label>
488                                         <input type="checkbox" id="modal_tags_artist" class="filled-in"/>
489                                         <span><%= __('Artist')%></span>
490                                 </label>
491                         </p>
492                         <p class="col s12 m4">
493                                 <label>
494                                         <input type="checkbox" id="modal_tags_album" class="filled-in"/>
495                                         <span><%= __('Album')%></span>
496                                 </label>
497                         </p>
498                         <p class="col s12 m4">
499                                 <label>
500                                         <input type="checkbox" id="modal_tags_cover" class="filled-in"/>
501                                         <span><%= __('Cover')%></span>
502                                 </label>
503                         </p>
504                         <p class="col s12 m4">
505                                 <label>
506                                         <input type="checkbox" id="modal_tags_trackNumber" class="filled-in"/>
507                                         <span><%= __('Track Number')%></span>
508                                 </label>
509                         </p>
510                         <p class="col s12 m4">
511                                 <label>
512                                         <input type="checkbox" id="modal_tags_trackTotal" class="filled-in"/>
513                                         <span><%= __('Track Total')%></span>
514                                 </label>
515                         </p>
516                         <p class="col s12 m4">
517                                 <label>
518                                         <input type="checkbox" id="modal_tags_discNumber" class="filled-in"/>
519                                         <span><%= __('Disc Number')%></span>
520                                 </label>
521                         </p>
522                         <p class="col s12 m4">
523                                 <label>
524                                         <input type="checkbox" id="modal_tags_discTotal" class="filled-in"/>
525                                         <span><%= __('Disc Total')%></span>
526                                 </label>
527                         </p>
528                         <p class="col s12 m4">
529                                 <label>
530                                         <input type="checkbox" id="modal_tags_albumArtist" class="filled-in"/>
531                                         <span><%= __('Album Artist')%></span>
532                                 </label>
533                         </p>
534                         <p class="col s12 m4">
535                                 <label>
536                                         <input type="checkbox" id="modal_tags_genre" class="filled-in"/>
537                                         <span><%= __('Genre')%></span>
538                                 </label>
539                         </p>
540                         <p class="col s12 m4">
541                                 <label>
542                                         <input type="checkbox" id="modal_tags_year" class="filled-in"/>
543                                         <span><%= __('Year')%></span>
544                                 </label>
545                         </p>
546                         <p class="col s12 m4">
547                                 <label>
548                                         <input type="checkbox" id="modal_tags_date" class="filled-in"/>
549                                         <span><%= __('Date')%></span>
550                                 </label>
551                         </p>
552                         <p class="col s12 m4">
553                                 <label>
554                                         <input type="checkbox" id="modal_tags_explicit" class="filled-in"/>
555                                         <span><%= __('Explicit')%></span>
556                                 </label>
557                         </p>
558                         <p class="col s12 m4">
559                                 <label>
560                                         <input type="checkbox" id="modal_tags_isrc" class="filled-in"/>
561                                         <span>ISRC</span>
562                                 </label>
563                         </p>
564                         <p class="col s12 m4">
565                                 <label>
566                                         <input type="checkbox" id="modal_tags_length" class="filled-in"/>
567                                         <span><%= __('Length')%></span>
568                                 </label>
569                         </p>
570                         <p class="col s12 m4">
571                                 <label>
572                                         <input type="checkbox" id="modal_tags_barcode" class="filled-in"/>
573                                         <span><%= __('Barcode')%></span>
574                                 </label>
575                         </p>
576                         <p class="col s12 m4">
577                                 <label>
578                                         <input type="checkbox" id="modal_tags_bpm" class="filled-in"/>
579                                         <span>BPM</span>
580                                 </label>
581                         </p>
582                         <p class="col s12 m4">
583                                 <label>
584                                         <input type="checkbox" id="modal_tags_replayGain" class="filled-in"/>
585                                         <span><%= __('Replay Gain')%></span>
586                                 </label>
587                         </p>
588                         <p class="col s12 m4">
589                                 <label>
590                                         <input type="checkbox" id="modal_tags_publisher" class="filled-in"/>
591                                         <span><%= __('Label')%></span>
592                                 </label>
593                         </p>
594                         <p class="col s12 m4">
595                                 <label>
596                                         <input type="checkbox" id="modal_tags_unsynchronisedLyrics" class="filled-in"/>
597                                         <span><%= __('Unsynchronised Lyrics')%></span>
598                                 </label>
599                         </p>
600                         <p class="col s12 m4">
601                                 <label>
602                                         <input type="checkbox" id="modal_tags_copyright" class="filled-in"/>
603                                         <span><%= __('Copyright')%></span>
604                                 </label>
605                         </p>
606                         <p class="col s12 m4">
607                                 <label>
608                                         <input type="checkbox" id="modal_tags_musicpublisher" class="filled-in"/>
609                                         <span><%= __('Publisher')%></span>
610                                 </label>
611                         </p>
612                         <p class="col s12 m4">
613                                 <label>
614                                         <input type="checkbox" id="modal_tags_composer" class="filled-in"/>
615                                         <span><%= __('Composer')%></span>
616                                 </label>
617                         </p>
618                         <p class="col s12 m4">
619                                 <label>
620                                         <input type="checkbox" id="modal_tags_mixer" class="filled-in"/>
621                                         <span><%= __('Mixer')%></span>
622                                 </label>
623                         </p>
624                         <p class="col s12 m4">
625                                 <label>
626                                         <input type="checkbox" id="modal_tags_author" class="filled-in"/>
627                                         <span><%= __('Author')%></span>
628                                 </label>
629                         </p>
630                         <p class="col s12 m4">
631                                 <label>
632                                         <input type="checkbox" id="modal_tags_writer" class="filled-in"/>
633                                         <span><%= __('Writer')%></span>
634                                 </label>
635                         </p>
636                         <p class="col s12 m4">
637                                 <label>
638                                         <input type="checkbox" id="modal_tags_engineer" class="filled-in"/>
639                                         <span><%= __('Engineer')%></span>
640                                 </label>
641                         </p>
642                         <p class="col s12 m4">
643                                 <label>
644                                         <input type="checkbox" id="modal_tags_producer" class="filled-in"/>
645                                         <span><%= __('Producer')%></span>
646                                 </label>
647                         </p>
648                 </div>
649         </div>
650         <div class="modal-footer">
651                 <button class="modal-close waves-effect btn-flat"><%= __('Close')%></button>
652         </div>
653 </div>
654
655 <!--#############################################MODAL_ABOUT############################################-->
656 <div id="modal_about" class="modal modal-fixed-footer">
657         <div class="modal-content">
658                 <div class="row">
659                         <h4 class="col s12"><%= __('About the App')%></h4>
660                 </div>
661                 <div class="row">
662                         <ul class="collapsible" data-collapsible="accordion">
663                                 <li>
664                                         <div class="collapsible-header waves-effect"><i class="material-icons">info</i><%= __('About')%></div>
665                                         <div class="collapsible-body">
666                                                 <p>
667                                                         <b><%= __('Branch')%>: </b>Remix</br>
668                                                         <b><%= __('Version')%>:</b> <span id="application_version_about"></span><br/>
669                                                         <b><%= __('Based on')%>: </b>Deezloader Reborn</br>
670                                                         <b><%= __('Maintainers')%>:</b> RemixDevs Group<br/>
671                                                         <b><%= __('Repo')%>: </b> <a href="https://notabug.org/RemixDevs/DeezloaderRemix" target="_blank">Official Repo</a><br/>
672                                                         <b><%= __('FAQ')%>: </b> <a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/FAQ" target="_blank">Link</a><br/>
673                                                         <b><%= __('Official mirrors')%>: </b> <a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Downloads" target="_blank">Link</a><br/>
674                                                         <b><%= __('Interface')%>:</b> <a href="http://materializecss.com/" target="_blank">Materialize CSS</a><br/>
675                                                         <br/>
676                                                         <b><%= __('Telegram Contacts')%></b><br/>
677                                                         <b><a href="https://t.me/RemixDevs" target="_blank"><%= __('News Channel')%></a></b><br/>
678                                                         <b><a href="https://t.me/DeezloaderRemixBeta" target="_blank"><%= __('Betas Channel')%></a></b><br/>
679                                                         <b><a href="https://t.me/DeezloaderRemix" target="_blank"><%= __('Stable Releases Channel')%></a></b><br/>
680                                                         <br>
681                                                         <b><%= __('Special Thanks to')%>:</b><br>
682                                                         BasCurtiz for the app UI Design<br>
683                                                         ZzMTV for the original Deezloader code<br>
684                                                         ParadoxalManiak, snwflake and ExtendLord for maintaining the previous branches<br>
685                                                         <br>
686                                                         <b><%= __('Translations')%>:</b><br>
687                                                         Italian: RemixDev<br>
688                                                         German: lollilol, Tobs<br>
689                                                         Spanish: Wanamingo<br>
690                                                         Turkish: Metep<br>
691                                                         Russian: NitroOxid, HexEdit<br>
692                                                         Brazilian Portuguese: C4RLETH<br>
693                                                         Thai: RadiusGreenhill<br>
694                                                         French: LaurentHa, Didiou, kaypa<br>
695                                                         Persian: Alip983<br>
696                                                         Arabic: YassBoud1407<br>
697                                                         Korean: gimel3830<br>
698                                                 </p>
699                                         </div>
700                                 </li>
701                                 <li>
702                                         <div class="collapsible-header waves-effect"><i class="material-icons">feedback</i><%= __('Feedback')%></div>
703                                         <div class="collapsible-body">
704                                                 <p>
705                                                         <%- __('Feedback_Text')%>
706                                                 </p>
707                                         </div>
708                                 </li>
709                                 <li>
710                                         <div class="collapsible-header waves-effect"><i class="material-icons">bug_report</i><%= __('Reporting Bugs')%></div>
711                                         <div class="collapsible-body">
712                                                 <p>
713                                                         <%- __('Bugs_Text')%>
714                                                 </p>
715                                         </div>
716                                 </li>
717                                 <li>
718                                         <div class="collapsible-header waves-effect"><i class="material-icons">group</i><%= __('Contacts')%></div>
719                                         <div class="collapsible-body">
720                                                 <p>
721                                                         <%- __('Contacts_Text')%><br>
722                                                         <ul>
723                                                                 <li><a href="https://t.me/DeezloaderItalia">Gruppo in Italiano</a></li>
724                                                                 <li><a href="https://t.me/joinchat/Ed1JxEn3_Bx1et6SCeLurg">Grupo en español</a></li>
725                                                                 <li><a href="https://t.me/deezloaderpt">Grupo em Português</a></li>
726                                                 </ul>
727                                                 </p>
728                                         </div>
729                                 </li>
730                                 <li>
731                                         <div class="collapsible-header waves-effect"><i class="material-icons">warning</i><%= __('Attention!')%></div>
732                                         <div class="collapsible-body">
733                                                 <p><%- __('Attention_Text')%></p>
734                                         </div>
735                                 </li>
736                                 <li>
737                                         <div class="collapsible-header waves-effect"><i class="material-icons">history</i><%= __('Changelog')%></div>
738                                         <div class="collapsible-body">
739                                                 <p>
740                                                         <h5>Version 4.3.0</h5>
741                                                         <h6>Main changes:</h6>
742                                                         &nbsp;&nbsp;+ Loginless download is back!<br>
743                                                         &nbsp;&nbsp;&nbsp;&nbsp;+ You can still login in the Settings to view your playlists<br>
744                                                         &nbsp;&nbsp;&nbsp;&nbsp;+ Added option to export ARL<br>
745                                                         &nbsp;&nbsp;+ Localization Support<br>
746                                                         &nbsp;&nbsp;+ Merged Download from URL tab into Search tab<br>
747                                                         &nbsp;&nbsp;+ Improved memory usage during downloads (Now you can download Continuous Mixes)<br>
748                                                         &nbsp;&nbsp;+ Updated and improved UI<br>
749                                                         &nbsp;&nbsp;&nbsp;&nbsp;+ Better feedback for errors and warnings<br>
750                                                         &nbsp;&nbsp;&nbsp;&nbsp;+ Toast messages are forced to the bottom<br>
751                                                         &nbsp;&nbsp;&nbsp;&nbsp;+ Made darkmode darker<br>
752                                                         &nbsp;&nbsp;&nbsp;&nbsp;+ Charts are now alphabetically ordered<br>
753                                                         &nbsp;&nbsp;&nbsp;&nbsp;+ Redesigned Download tab<br>
754                                                         &nbsp;&nbsp;&nbsp;&nbsp;+ Made download bars more responsive<br>
755                                                         &nbsp;&nbsp;&nbsp;&nbsp;+ Added PWA metadata for servermode<br>
756                                                         &nbsp;&nbsp;+ Changed folder management structure<br>
757                                                         &nbsp;&nbsp;&nbsp;&nbsp;+ Added create playlist folder option<br>
758                                                         &nbsp;&nbsp;&nbsp;&nbsp;+ Added template names for playlist and artist folder<br>
759                                                         <br>
760                                                         <h6>New Features:</h6>
761                                                         &nbsp;&nbsp;+ Added ID3v1 support<br>
762                                                         &nbsp;&nbsp;+ Divided options for Local and Embedded cover size<br>
763                                                         &nbsp;&nbsp;+ Added 2000x2000 cover option<br>
764                                                         &nbsp;&nbsp;+ Added Case Settings for title and artists<br>
765                                                         &nbsp;&nbsp;+ Added REST API<br>
766                                                         &nbsp;&nbsp;+ Added Select song for Spotify Playlists<br>
767                                                         &nbsp;&nbsp;+ Added support for 360 audio [No way to play them tho]<br>
768                                                         &nbsp;&nbsp;+ Added option to rename the playlist file with the name of the folder<br>
769                                                         <br>
770                                                         <h6>Bugs fixes:</h6>
771                                                         &nbsp;&nbsp;+ Finished implementing Save playlist as Compilation<br>
772                                                         &nbsp;&nbsp;+ Fixed artwork caching<br>
773                                                         &nbsp;&nbsp;+ Fixed issues with autologin not working properly<br>
774                                                         &nbsp;&nbsp;+ Fixed the error 'ENOENT: no such file or directory, mkdir'<br>
775                                                         &nbsp;&nbsp;+ Fixed artist tags being too excessive<br>
776                                                         &nbsp;&nbsp;+ Fixed Explicit Variable on tracknames<br>
777                                                         &nbsp;&nbsp;+ Fixed fallbacks not working properly<br/>
778                                                         <br/>
779                                                         <a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Changelog" target="_blank"><%= __('Full Changelog Here')%></a>
780                                                 </p>
781                                         </div>
782                                 </li>
783                                 <li>
784                                         <div class="collapsible-header waves-effect"><i class="material-icons">copyright</i><%= __('License')%></div>
785                                         <div class="collapsible-body">
786                                                 <p>
787                                                         <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">
788                                                                 <img alt="GNU General Public License" style="border-width:0"
789                                                                                  src="https://www.gnu.org/graphics/gplv3-127x51.png"/>
790                                                         </a><br/>
791                                                         This work is licensed under a <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GNU General Public License 3.0</a>.
792                                                 </p>
793                                         </div>
794                                 </li>
795                                 <li>
796                                         <div class="collapsible-header waves-effect"><i class="material-icons">favorite</i><%= __('Contributions')%></div>
797                                         <div class="collapsible-body">
798                                                 <%- __('Contributions_Text')%>
799                                                 <p>
800                                                         PayPal: <a href="https://paypal.me/RemixDev" target="_blank">PayPal.me/RemixDev</a><br>
801                                                         Bitcoin: 1sdNymSJrMBWyHM4u2m9uco5nv6uV4Qs1<br>
802                                                         Ethereum: 0x1d2aa67e671485CD4062289772B662e0A6Ff976c
803                                                 </p>
804                                         </div>
805                                 </li>
806                         </ul>
807                 </div>
808         </div>
809         <div class="modal-footer">
810                 <button class="modal-close waves-effect btn-flat"><%= __('Close')%></button>
811         </div>
812 </div>
813
814 <!--##########################################MODAL_TRACKLIST###########################################-->
815 <div id="modal_trackList" class="modal modal-fixed-footer modal-custom-header">
816         <div class="modal-content">
817                 <div class="trackList-header" v-bind:style="{ 'background-image': `linear-gradient(to bottom, transparent 0%, var(--main-modal-background) 100%), url('${image}')` }">
818                         <h4>{{ title }}</h4>
819                         <h6 v-if="metadata" style="display: inline;">{{ metadata }}</h6>
820                         <span class="right hide-on-small-only" v-if="release_date"> {{ release_date }} </span>
821                 </div>
822                 <div class="modal-container">
823                         <table class="highlight col s12">
824                                 <thead>
825                                 <tr>
826                                         <td v-for="data in head" v-html="data.title" v-bind:style = "{ 'width': `${data.width ? data.width : 'auto'}`}" v-bind:class="{ 'hide-on-med-and-up' : data.smallonly, 'hide-on-small-only': data.hideonsmall }"></td>
827                                 </tr>
828                                 </thead>
829                                 <tbody id="modal_trackList_table_trackList_tbody_loadingIndicator" class="hide">
830                                 <tr>
831                                         <td class="center" colspan="6">
832                                                 <div class="preloader-wrapper big active">
833                                                         <div class="spinner-layer">
834                                                                 <div class="circle-clipper left">
835                                                                         <div class="circle"></div>
836                                                                 </div>
837                                                                 <div class="gap-patch">
838                                                                         <div class="circle"></div>
839                                                                 </div>
840                                                                 <div class="circle-clipper right">
841                                                                         <div class="circle"></div>
842                                                                 </div>
843                                                         </div>
844                                                 </div>
845                                         </td>
846                                 </tr>
847                                 </tbody>
848                                 <tbody id="modal_trackList_table_trackList_tbody_trackList" class="hide">
849                                 </tbody>
850                         </table>
851                 </div>
852         </div>
853         <div class="modal-footer">
854                 <button id="download_all_tracks" v-bind:data-link="link" class="btn btn-flat waves-effect waves-light left"><%= __('Download {{ type }}', {type: '{{ type }}'})%></button>
855                 <button class="modal-close waves-effect btn-flat"><%= __('Close')%></button>
856         </div>
857 </div>
858
859 <!--##########################################MODAL_TRACKLISTALBUM###########################################-->
860 <div id="modal_trackListSelective" class="modal modal-fixed-footer modal-custom-header">
861         <div class="modal-content">
862                 <div class="trackList-header" v-bind:style="{ 'background-image': `linear-gradient(to bottom, transparent 0%, var(--main-modal-background) 100%), url('${image}')` }">
863                         <h4>{{ title }} <i v-if="explicit" class="material-icons valignicon materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i></h4>
864                         <h6 v-if="metadata" style="display: inline;">{{ metadata }}</h6>
865                         <span class="right hide-on-small-only" v-if="release_date">{{ release_date }}</span>
866                 </div>
867                 <div class="modal-container">
868                         <table class="highlight col s12">
869                                 <thead>
870                                 <tr>
871                                         <td v-for="data in head" v-html="data.title" v-bind:style = "{ 'width': `${data.width ? data.width : 'auto'}`}" v-bind:class="{ 'hide-on-med-and-up' : data.smallonly, 'hide-on-small-only': data.hideonsmall }"></td>
872                                 </tr>
873                                 </thead>
874                                 <tbody id="modal_trackListSelective_table_trackListSelective_tbody_loadingIndicator" class="hide">
875                                 <tr>
876                                         <td class="center" colspan="6">
877                                                 <div class="preloader-wrapper big active">
878                                                         <div class="spinner-layer">
879                                                                 <div class="circle-clipper left">
880                                                                         <div class="circle"></div>
881                                                                 </div>
882                                                                 <div class="gap-patch">
883                                                                         <div class="circle"></div>
884                                                                 </div>
885                                                                 <div class="circle-clipper right">
886                                                                         <div class="circle"></div>
887                                                                 </div>
888                                                         </div>
889                                                 </div>
890                                         </td>
891                                 </tr>
892                                 </tbody>
893                                 <tbody id="modal_trackListSelective_table_trackListSelective_tbody_trackListSelective" class="hide">
894                                 </tbody>
895                         </table>
896                         <span v-if="label" style="opacity: 0.40;margin-top: 8px;display: inline-block;font-size: 13px;">{{ label }}</span>
897                 </div>
898         </div>
899         <div class="modal-footer">
900                 <button id="download_all_tracks_selective" v-bind:data-link="link" class="btn btn-flat waves-effect waves-light left"><%= __('Download {{ type }}', {type: '{{ type }}'})%></button>
901                 <button id="download_track_selection" class="btn btn-flat waves-effect waves-light deezloader-primary white-text"><span class="hide-on-small-only"><%= __('Download selection')%><i class="material-icons right">file_download</i></span><i class="material-icons hide-on-med-and-up">file_download</i></button>
902                 <button class="modal-close waves-effect btn-flat"><%= __('Close')%></button>
903         </div>
904 </div>
905
906 <!--##########################################MODAL_MSG###########################################-->
907 <div id="modal_msg" class="modal">
908         <div class="modal-content">
909                 <div class="row">
910                         <h4 class="col s12" id="modal_msg_title"></h4>
911                 </div>
912                 <div class="row">
913                         <p style="white-space: pre-line" class="col s12" id="modal_msg_message"></p>
914                 </div>
915         </div>
916         <div class="modal-footer">
917                 <button class="modal-close waves-effect waves-light btn"><%= __('I got it!')%></button>
918         </div>
919 </div>
920
921 <!--##########################################MODAL_ANALYZER_COUNTRY###########################################-->
922 <div id="modal_link_analyzer_country" class="modal modal-fixed-footer">
923         <div class="modal-content">
924                 <h4 class="col s12"><%= __('Available Countries for')%> {{ title }}</h4>
925                 <table class="striped col s12">
926                         <thead>
927                                 <tr>
928                                         <th style="width:24px;"></th>
929                                         <th><%= __('Country')%></th>
930                                 </tr>
931                         </thead>
932                         <tbody>
933                                 <tr v-for="cc in countries">
934                                         <td v-for="val in cc">{{ val }}</td>
935                                 </tr>
936                         </tbody>
937                 </table>
938         </div>
939         <div class="modal-footer">
940                 <button class="modal-close waves-effect waves-light btn"><%= __('Close')%></button>
941         </div>
942 </div>
943
944 <!--********************************************MAIN-CONTENT********************************************-->
945 <nav>
946         <div class="nav-wrapper">
947                 <div class="brand-logo center hide-on-small-only">Deezloader <b>Remix</b></div>
948                 <ul class="left hide-on-small-only">
949                         <li>
950                                 <div class="switch">
951                                         <label>
952                                                 <i class="material-icons left white-text" style="margin-right: 0px; margin-left: 15px;">brightness_2</i>
953                                                 <input id="nightTimeSwitcher" type="checkbox">
954                                                 <span class="lever"></span>
955                                         </label>
956                                 </div>
957                         </li>
958                 </ul>
959                 <a href="#" data-target="slide-out" class="sidenav-trigger hide-on-med-and-up right"><i class="material-icons">menu</i></a>
960                 <ul id="nav-mobile" class="right hide-on-small-only">
961                         <li>
962                                 <a href="#modal_settings" id="nav_btn_openSettingsModal" class="waves-effect waves-light modal-trigger">
963                                         <i class="material-icons left">settings</i> <span class="hide-on-med-and-down"><%= __('Settings')%></span>
964                                 </a>
965                         </li>
966                         <li>
967                                 <a href="#modal_about" class="waves-effect waves-light modal-trigger">
968                                         <i class="material-icons left">info</i> <span class="hide-on-med-and-down"><%= __('About')%></span>
969                                 </a>
970                         </li>
971                 </ul>
972         </div>
973 </nav>
974
975 <img src="img/icon.svg" class="circle" id="main_icon"></img>
976
977 <ul id="slide-out" class="sidenav">
978         <li><div class="user-view">
979                 <div class="background"></div>
980                 <a href="#user"><img class="circle" id="side_avatar"></a>
981                 <a href="#name"><span class="white-text name" id="side_user"></span></a>
982                 <a href="#email"><span class="white-text email" id="side_email"></span></a>
983         </div></li>
984         <li><a href="#" tab-id="tab_search" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">search</i><%= __('Search')%></a></li>
985         <li><a href="#" tab-id="tab_charts" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">bubble_chart</i><%= __('Charts')%></a></li>
986         <li><a href="#" tab-id="tab_playlists" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">playlist_play</i><%= __('Playlists')%></a></li>
987         <li><a href="#" tab-id="tab_link" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">link</i><%= __('Link Analyzer')%></a></li>
988         <li><a href="#" tab-id="tab_downloads" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">get_app</i><%= __('Downloads')%></a></li>
989         <li><div class="divider"></div></li>
990         <li><a href="#modal_settings" id="sidenav_settings" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">settings</i><%= __('Settings')%></a></li>
991         <li><a href="#modal_about" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">info</i><%= __('About')%></a></li>
992         <li><a href="#" id="nightModeSwitch2"><i class="material-icons">brightness_2</i><%= __('Enable Night Mode')%></a>
993         </li>
994 </ul>
995
996 <main class="container" style="display: none">
997         <div id="deezerNotAvailable" class="error-banner" style="display:none;">
998                 <button class="close-banner"><i class="material-icons">close</i></button>
999                 <%= __('Deezer is not available in your country')%><br>
1000                 <%= __('Search and Login functions won\'t work. You should use a VPN if you want them.')%>
1001         </div>
1002         <ul id="tab-nav" class="row tabs tabs-fixed-width hide-on-small-only">
1003                 <li class="tab"><a class="active" href="#tab_search"><%= __('Search')%></a></li>
1004                 <li class="tab"><a href="#tab_charts"><%= __('Charts')%></a></li>
1005                 <li class="tab"><a href="#tab_playlists"><%= __('Playlists')%></a></li>
1006                 <li class="tab"><a href="#tab_link"><%= __('Link Analyzer')%></a></li>
1007                 <li class="tab"><a href="#tab_downloads"><%= __('Downloads')%></a></li>
1008         </ul>
1009
1010         <div id="main-content" class="row">
1011
1012                 <div id="tab_search">
1013                         <form id="tab_search_form_search">
1014                                 <div class="inline-input-group col s12">
1015                                         <input autocomplete="off" id="tab_search_form_search_input_searchString" type="search" class="input" placeholder="<%= __('Start searching...')%>" autofocus>
1016                                         <button id="tab_search_button" class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">search</i></button>
1017                                 </div>
1018                                 <div class="row center">
1019                                         <p class="col s3">
1020                                                 <label>
1021                                                 <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_song" value="track" checked/>
1022                                                 <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>
1023                                                 </label>
1024                                         </p>
1025                                         <p class="col s3">
1026                                                 <label>
1027                                                 <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_album" value="album"/>
1028                                                 <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>
1029                                                 </label>
1030                                         </p>
1031                                         <p class="col s3">
1032                                                 <label>
1033                                                 <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_artist" value="artist"/>
1034                                                 <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>
1035                                                 </label>
1036                                         </p>
1037                                         <p class="col s3">
1038                                                 <label>
1039                                                         <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_playlist" value="playlist"/>
1040                                                         <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>
1041                                                 </label>
1042                                         </p>
1043                                 </div>
1044                         </form>
1045                         <div id="tab_search_results">
1046                                 <table id="tab_search_table_results" class="striped col s12">
1047                                         <thead class="hide-on-small-only">
1048                                                 <tr class="hide" id="tab_search_table_results_thead_track">
1049                                                         <th style="width: 56px;"><!--cover--></th>
1050                                                         <th><%= __('Song')%></th>
1051                                                         <th><%= __('Artist')%></th>
1052                                                         <th><%= __('Album')%></th>
1053                                                         <th><i class="material-icons">timer</i></th>
1054                                                         <th style="width: 56px;"><!--download_link--></th>
1055                                                 </tr>
1056                                                 <tr class="hide" id="tab_search_table_results_thead_album">
1057                                                         <th style="width: 56px;"><!--cover--></th>
1058                                                         <th><%= __('Album')%></th>
1059                                                         <th><%= __('Artist')%></th>
1060                                                         <th><%= __('Songs')%></th>
1061                                                         <th><%= __('Type')%></th>
1062                                                         <th><!--space--></th>
1063                                                         <th style="width: 56px;"><!--download_link--></th>
1064                                                 </tr>
1065                                                 <tr class="hide" id="tab_search_table_results_thead_artist">
1066                                                         <th style="width: 56px;"><!--cover--></th>
1067                                                         <th><%= __('Artist')%></th>
1068                                                         <th><%= __('Albums')%></th>
1069                                                         <th><!--space--></th>
1070                                                         <th style="width: 56px;"><!--download_link--></th>
1071                                                 </tr>
1072                                                 <tr class="hide" id="tab_search_table_results_thead_playlist">
1073                                                         <th style="width: 56px;"><!--cover--></th>
1074                                                         <th><%= __('Name')%></th>
1075                                                         <th><%= __('Songs')%></th>
1076                                                         <th style="width: 56px;"><!--space--></th>
1077                                                         <th style="width: 56px;"><!--download_link--></th>
1078                                                 </tr>
1079                                         </thead>
1080                                         <tbody id="tab_search_table_results_tbody_loadingIndicator" class="hide loadingTab">
1081                                                 <tr>
1082                                                         <td class="center">
1083                                                                 <div class="preloader-wrapper big active">
1084                                                                         <div class="spinner-layer spinner-blue-only">
1085                                                                                 <!-- Spinner Code -->
1086                                                                                 <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>
1087                                                                         </div>
1088                                                                 </div>
1089                                                         </td>
1090                                                 </tr>
1091                                         </tbody>
1092                                         <tbody id="tab_search_table_results_tbody_results"></tbody>
1093                                         <tbody id="tab_search_table_results_tbody_noResults" class="hide">
1094                                                 <tr>
1095                                                         <td class="center"><%= __('Nothing found!')%></td>
1096                                                 </tr>
1097                                         </tbody>
1098                                 </table>
1099                         </div>
1100                 </div>
1101
1102                 <div id="tab_charts">
1103                         <div class="input-field col s12">
1104                                 <select id="tab_charts_select_country" class="icons">
1105                                         <!--All country selects have to be like the following example:
1106                                         <option value="example" data-icon="images/sample.jpg" class="left circle">Example</option>
1107                                         -->
1108                                 </select>
1109                                 <label><%= __('Country')%></label>
1110                         </div>
1111                         <button id="downloadChartPlaylist" class="col s12 btn btn-input btn-flat deezloader-primary white-text" style="margin-bottom:8px;"><%= __('Download Playlist')%></button>
1112                         <table id="tab_charts_table_charts" class="striped">
1113                                 <thead class="hide-on-small-only">
1114                                         <tr>
1115                                                 <th>#</th>
1116                                                 <th style="width: 56px;"><!--cover--></th>
1117                                                 <th><%= __('Song')%></th>
1118                                                 <th><%= __('Artist')%></th>
1119                                                 <th><%= __('Album')%></th>
1120                                                 <th><i class="material-icons">timer</i></th>
1121                                                 <th style="width: 56px;"><!--download_link--></th>
1122                                         </tr>
1123                                 </thead>
1124                                 <tbody id="tab_charts_table_charts_tbody_loadingIndicator" class="loadingTab">
1125                                         <tr>
1126                                                 <td colspan="7" class="center">
1127                                                         <div class="preloader-wrapper big active">
1128                                                                 <div class="spinner-layer spinner-blue-only">
1129                                                                         <!-- Spinner Code -->
1130                                                                         <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>
1131                                                                 </div>
1132                                                         </div>
1133                                                 </td>
1134                                         </tr>
1135                                 </tbody>
1136                                 <tbody id="tab_charts_table_charts_tbody_charts"></tbody>
1137                         </table>
1138                 </div>
1139
1140                 <div id="tab_playlists" class="row">
1141                         <div class="col s12">
1142                                 <button class="btn-flat btn-large waves-effect deezloader-primary white-text" id="button_refresh_playlist_tab" style="width:100%;"><%= __('Refresh Playlists')%></button>
1143                         </div>
1144                         <div class="col s12">
1145                                 <table class="striped">
1146                                         <thead>
1147                                                 <tr>
1148                                                         <th style="width: 56px;"><!--cover--></th>
1149                                                         <th><%= __('Name')%></th>
1150                                                         <th><%= __('Songs')%></th>
1151                                                         <th style="width: 56px;"><!--inspect_playlist--></th>
1152                                                         <th style="width: 56px;"><!--download_link--></th>
1153                                                 </tr>
1154                                         </thead>
1155                                         <tbody id="table_personal_playlists">
1156                                         </tbody>
1157                                 </table>
1158                         </div>
1159                 </div>
1160
1161                 <div id="tab_link">
1162                         <div class="inline-input-group">
1163                                 <input autocomplete="off" type="search" id="link_analyzer_url" class="input" placeholder="<%= __('Song/Album URL')%>">
1164                                 <button id="link_analyzer_go" class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">search</i></button>
1165                         </div>
1166
1167                         <div id="link_analyzer_loading" class="center" hidden>
1168                                 <div class="preloader-wrapper big active">
1169                                         <div class="spinner-layer spinner-blue-only">
1170                                                 <!-- Spinner Code -->
1171                                                 <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>
1172                                         </div>
1173                                 </div>
1174                         </div>
1175
1176                         <div id="link_analyzer_start">
1177                                 <p class="secondary-text center"><%- __('LinkAnalyzer_Info')%></p>
1178                         </div>
1179
1180                         <div v-if="d.title" id="link_analyzer_song" class="link_analyzer_info">
1181                                 <div id="link_analyzer_song_sideinfo" class="hide-on-small-only link_analyzer_sideinfo">
1182                                         <img v-bind:src=" d.album.cover_medium "/>
1183                                         <a href="#modal_link_analyzer_country" class="modal-trigger waves-effect waves-light btn" style="width:100%;"><%= __('See Available Countries')%></a>
1184                                 </div>
1185                                 <div id="link_analyzer_song_maininfo" class="link_analyzer_maininfo">
1186                                         <h5 style="margin-bottom:8px; margin-top:0px;">{{ d.title }} {{ d.version }}<i v-if="d.explicit_lyrics" class="material-icons valignicon materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i></h5>
1187                                         <p style="margin-top:0px;"><%- __('by %s', '<span class="handlink" v-on:click="showArtist()"><b>{{ d.artist.name }}</b></span>')%></br>
1188                                         <%- __('in %s', '<span class="handlink" v-on:click="showAlbum()"><b>{{ d.album.title }}</b></span>')%></p>
1189                                         <hr class="hide-on-small-only">
1190                                         <a v-if="d.alternative" v-bind:href="'d.alternative.link'"><b><%= __('Alternative Link')%></b></a>
1191                                         <table class="striped">
1192                                                 <tbody>
1193                                                         <tr v-if="d.isrc"><td><b>ISRC</b></td><td>{{ d.isrc }}</td></tr>
1194                                                         <tr v-if="d.duration"><td><b><%= __('Duration')%></b></td><td>{{ d.duration_string }}</td></tr>
1195                                                         <tr v-if="d.disk_number"><td><b><%= __('Disc Number')%></b></td><td>{{ d.disk_number }}</td></tr>
1196                                                         <tr v-if="d.track_position"><td><b><%= __('Track Number')%></b></td><td>{{ d.track_position }}</td></tr>
1197                                                         <tr v-if="d.release_date"><td><b><%= __('Release Date')%></b></td><td>{{ d.release_date }}</td></tr>
1198                                                         <tr v-if="d.bpm"><td><b>BPM</b></td><td>{{ d.bpm }}</td></tr>
1199                                                 </tbody>
1200                                         </table>
1201                                         <a href="#modal_link_analyzer_country" class="modal-trigger waves-effect waves-light btn hide-on-med-and-up" style="width:100%;"><%= __('See Available Countries')%></a>
1202                                 </div>
1203                         </div>
1204
1205                         <div v-if="d.title" id="link_analyzer_album" class="link_analyzer_info">
1206                                 <div id="link_analyzer_album_sideinfo" class="hide-on-small-only link_analyzer_sideinfo">
1207                                         <img v-bind:src=" d.cover_medium "/>
1208                                         <a v-on:click="showTrackListSelective(d.link)" class="waves-effect waves-light btn" style="width:100%;"><%= __('Show Tracklist')%></a>
1209                                 </div>
1210                                 <div id="link_analyzer_album_maininfo" class="link_analyzer_maininfo">
1211                                         <h5 style="margin-bottom:8px; margin-top:0px;">{{ d.title }} <i v-if="d.explicit_lyrics" class="material-icons valignicon materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i></h5>
1212                                         <p style="margin-top:0px;"><%- __('by %s', '<span class="handlink" v-on:click="showArtist()"><b>{{ d.artist.name }}</b></span>')%></br>
1213                                         {{ d.tracks_string }}</p>
1214                                         <hr class="hide-on-small-only">
1215                                         <a v-if="d.alternative" v-bind:href="'d.alternative.link'"><b><%= __('Alternative Link')%></b></a>
1216                                         <table class="striped">
1217                                                 <tbody>
1218                                                         <tr v-if="d.upc"><td><b>UPC</b></td><td>{{ d.upc }}</td></tr>
1219                                                         <tr v-if="d.duration"><td><b><%= __('Duration')%></b></td><td>{{ d.duration_string }}</td></tr>
1220                                                         <tr v-if="d.release_date"><td><b><%= __('Release Date')%></b></td><td>{{ d.release_date }}</td></tr>
1221                                                         <tr v-if="d.label"><td><b><%= __('Label')%></b></td><td>{{ d.label }}</td></tr>
1222                                                         <tr v-if="d.record_type"><td><b><%= __('Record Type')%></b></td><td>{{ d.record_type.substring(0,1).toUpperCase()+ d.record_type.substring(1) }}</td></tr>
1223                                                         <tr v-if="d.genres_string"><td><b><%= __('Genres')%></b></td><td>{{ d.genres_string }}</td></tr>
1224                                                 </tbody>
1225                                         </table>
1226                                         <a v-on:click="showTrackListSelective(d.link)" class="waves-effect waves-light btn hide-on-med-and-up" style="width:100%;"><%= __('Show Tracklist')%></a>
1227                                 </div>
1228                         </div>
1229                 </div>
1230
1231                 <div id="tab_downloads">
1232                         <div class="row">
1233                                 <div class="col s12 m4">
1234                                         <button id="openDownloadsFolder" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
1235                                                 <%= __('Open Downloads Folder')%>
1236                                         </button>
1237                                 </div>
1238                                 <div class="col s12 m4">
1239                                         <button id="cancelAllTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
1240                                                 <%= __('Cancel All Downloads')%>
1241                                         </button>
1242                                 </div>
1243                                 <div class="col s12 m4">
1244                                         <button id="clearTracksTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
1245                                                 <%= __('Clear List')%>
1246                                         </button>
1247                                 </div>
1248                         </div>
1249                         <table id="tab_downloads_table_downloads" class="row">
1250                                 <tbody></tbody>
1251                         </table>
1252                 </div>
1253         </div>
1254 </main>
1255
1256 <div class="fixed-action-btn" id="btn_scrollToTop" style="bottom: 45px; right: 24px;">
1257         <a class="btn-floating btn-large deezloader-primary scale-transition scale-out">
1258                 <i class="large material-icons">keyboard_arrow_up</i>
1259         </a>
1260 </div>
1261 <audio id="preview-track">
1262         <source id="preview-track_source" src="" type="audio/mpeg">
1263 </audio>
1264
1265 <div id="modal_quality" class="smallmodal">
1266         <!-- Modal content -->
1267         <div class="smallmodal-content">
1268                 <button onclick="modalQualityButton(9)" class="btn btn-flat waves-effect waves-light deezloader-primary white-text"><%= __('Download {{ type }}', {type: 'FLAC'})%></button><br>
1269                 <button onclick="modalQualityButton(3)" class="btn btn-flat waves-effect waves-light deezloader-primary white-text"><%= __('Download {{ type }}', {type: 'MP3 320kbps'})%></button><br>
1270                 <button onclick="modalQualityButton(1)" class="btn btn-flat waves-effect waves-light deezloader-primary white-text"><%= __('Download {{ type }}', {type: 'MP3 128kbps'})%></button><br>
1271                 <button onclick="modalQualityButton(15)" class="btn btn-flat waves-effect waves-light deezloader-primary white-text"><%= __('Download {{ type }}', {type: '360 Reality Audio [HQ]'})%></button><br>
1272                 <button onclick="modalQualityButton(14)" class="btn btn-flat waves-effect waves-light deezloader-primary white-text"><%= __('Download {{ type }}', {type: '360 Reality Audio [MQ]'})%></button><br>
1273                 <button onclick="modalQualityButton(13)" class="btn btn-flat waves-effect waves-light deezloader-primary white-text"><%= __('Download {{ type }}', {type: '360 Reality Audio [LQ]'})%></button><br>
1274         </div>
1275 </div>
1276
1277 <footer id="page_footer" class="darken-1 left page-footer hide-on-med-and-down valign-wrapper">
1278                         <p><span style="position: relative;display: inline-block;transform: rotateY(180deg);">&copy;</span> Deezloader <%= __('original code by ZzMTV')%>.</p>
1279 </footer>
1280
1281 <script>if (typeof module === 'object') {
1282         window.module = module;
1283         module = undefined;
1284 }</script>
1285
1286 <script type="text/javascript" src="js/socket.io.js"></script>
1287 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
1288 <script type="text/javascript" src="js/materialize.min.js"></script>
1289 <script type="text/javascript" src="js/i18n.min.js"></script>
1290 <script type="text/javascript" src="js/vue.min.js"></script>
1291 <script type="text/javascript" src="js/appBase.js"></script>
1292 <script type="text/javascript" src="js/frontend.js"></script>
1293 <script>if (window.module) module = window.module;</script>
1294 <script>
1295 if('serviceWorker' in navigator) {
1296   navigator.serviceWorker
1297            .register('/js/sw.js')
1298            .then(function() { console.log("Service Worker Registered"); });
1299 }
1300 </script>
1301 </body>
1302 </html>