custom css

deezer_downloader/web/app.py

@@ -86,14 +86,6 @@ def index():
                            static_root=config["http"]["static_root"],
                            use_mpd=str(config['mpd'].getboolean('use_mpd')).lower())
 
-@app.route("/save_config", methods=['POST'])
-@validate_schema("login", "password", "dirPath")
-def parameters():
-    user_input = request.get_json(force=True)
-    dir = user_input['dirPath']
-    
-    #return jsonify({'error': 'Champs requis manquants'}), 400
-    return jsonify()
 
 @app.route("/debug")
 def show_debug():

deezer_downloader/web/static/css/custom.css

@@ -2,6 +2,7 @@
   display: flex;
   height: 38px;
   border: 1px solid #ced4da;
+  background-color: white;
   border-radius: 7px;
   padding: 0 8px;
 }
@@ -13,12 +14,12 @@ input.search {
   border: none;
   outline: none;
   background-color: transparent;
-  color: white !important;
+  color: black !important;
 }
 
 button.search {
   height: 100%;
-  color: white;
+  color: #6c757d;
   font-size: 14px;
   border: none;
   background-color: transparent;

deezer_downloader/web/static/js/custom.js

@@ -306,25 +306,6 @@ $(document).ready(function() {
     });
     // END DEEZER FAVORITE SONGS
 
-    $('#paramters').on('submit', function(e) {
-        e.preventDefault();
-         $.ajax({
-            url: deezer_downloader_api_root + '/save_config',
-            type: 'POST',
-            contentType: 'application/json', // essentiel pour Flask.get_json()
-            data: JSON.stringify({ dirPath: $('#param-directry-path').val(),
-                             login: $('#param-login').val(),
-                             password: $('#param-password').val()}),
-            success: function(response) {
-                $.jGrowl("Sauvegarder avec succès", { life: 4000 });
-            },
-            error: function(xhr) {
-                const err = xhr.responseJSON?.error || 'Erreur inconnue';
-                $('#result').css('color', 'red').text(err);
-            }
-        });
-      });
-
 
     function show_tab(id_nav, id_content) {
     // nav 
@@ -338,6 +319,14 @@ $(document).ready(function() {
     $("#" + id_content).addClass("active show")
     }
 
+    $('#youtubedl-query-video').on('keypress', function(e) {
+        if (e.which === 13) { 
+            e.preventDefault(); 
+            $('#yt_download_video').click(); 
+        }
+    });
+
+
 
     var bbody = document.getElementById('body');
     bbody.onkeydown = function (event) {

deezer_downloader/web/templates/index.html

@@ -57,9 +57,6 @@
     <li class="nav-item">
       <a class="nav-link" id="nav-task-queue" data-toggle="tab" href="#queue">Queue (5)</a>
     </li>
-    <li class="nav-item">
-      <a class="nav-link" id="nav-task-param" data-toggle="tab" href="#param">Parameter (6)</a>
-    </li>
   </ul>
   </div>   <!-- end row -->
 
@@ -109,27 +106,37 @@
          <h3>Download audio files via youtube-dl</h3>
          <div class="input-group">
             <input type="text" class="form-control" id="youtubedl-query" placeholder="Download audio from YouTube, Invidious, Vimeo, Soundcloud, ... " />
-                &nbsp;
         </div>
          <br>
         <span class="input-group-btn">
-            <button type="button" class="btn btn-info" id="yt_download_play">Download & Play</button>
+          <button type="button" class="btn btn-info" id="yt_download_play" title="Download & Play Audio">
-            <button type="button" class="btn btn-info" id="yt_download">Download</button>
+              <i class="fa fa-play"></i> Download & Play
-            <button type="button" class="btn btn-info" onclick="$('#youtubedl-query').val('')" >Clear</button>
+          </button>
+          <button type="button" class="btn btn-info" id="yt_download" title="Download Audio">
+              <i class="fa fa-download"></i> Download Audio
+          </button>
+          <button type="button" class="btn btn-info" onclick="$('#youtubedl-query').val('')" title="Clear">
+              <i class="fa fa-times"></i> Clear
+          </button>
         </span>
         <br/>
         <br/>
          <h3>Download video files via youtube-dl</h3>
+
         <div class="input-group">
             <input type="text" class="form-control" id="youtubedl-query-video" placeholder="Download video from YouTube, Invidious, Vimeo, Soundcloud, ... " />
-                &nbsp;
         </div>
          <br>
         <span class="input-group-btn">
-            <button type="button" class="btn btn-info" id="yt_download_video">Download</button>
+          <button type="button" class="btn btn-info" id="yt_download_video" title="Download Video">
-            <button type="button" class="btn btn-info" onclick="$('#youtubedl-query-video').val('')" >Clear</button>
+              <i class="fa fa-download"></i> Download Video
+          </button>
+          <button type="button" class="btn btn-info" onclick="$('#youtubedl-query-video').val('')" title="Clear">
+              <i class="fa fa-times"></i> Clear
+          </button>
         </span>
-     </div> <!-- end div tab youtube-dl -->
+     </div> 
+     <!-- end div tab youtube-dl -->
     
      <div id="spotify-playlists" class="container tab-pane fade">
        <br>
@@ -143,10 +150,18 @@
        <br>
        <div class="input-group">
                <span class="input-group-btn">
-                   <button type="button" class="btn btn-info" id="spotify_download_play">Download & Play</button>
+                  <button type="button" class="btn btn-info" id="spotify_download_play" title="Download & Play">
-                   <button type="button" class="btn btn-info" id="spotify_download">Download</button>
+                      <i class="fa fa-play"></i> Download & Play
-                   <button type="button" class="btn btn-info" id="spotify_zip">Give me a zip</button>
+                  </button>
-                   <button type="button" class="btn btn-info" onclick="$('input[id^=\'spotify\']').val('')" >Clear</button>
+                  <button type="button" class="btn btn-info" id="spotify_download" title="Download">
+                      <i class="fa fa-download"></i> Download
+                  </button>
+                  <button type="button" class="btn btn-info" id="spotify_zip" title="Give me a zip">
+                      <i class="fa fa-file-archive-o"></i> Give me a zip
+                  </button>
+                  <button type="button" class="btn btn-info" onclick="$('input[id^=\'spotify\']').val('')" title="Clear">
+                      <i class="fa fa-times"></i> Clear
+                  </button>
                </span>
        </div>
      </div> <!-- end div tab spotify playlists -->
@@ -161,10 +176,18 @@
        <br>
        <div class="input-group">
                <span class="input-group-btn">
-                   <button type="button" class="btn btn-info" id="deezer_playlist_download_play">Download & Play</button>
+                <button type="button" class="btn btn-info" id="deezer_playlist_download_play" title="Download & Play">
-                   <button type="button" class="btn btn-info" id="deezer_playlist_download">Download</button>
+                      <i class="fa fa-play"></i> Download & Play
-                   <button type="button" class="btn btn-info" id="deezer_playlist_zip">Give me a zip</button>
+                  </button>
-                   <button type="button" class="btn btn-info" onclick="$('#deezer-playlist-url').val('')" >Clear</button>
+                  <button type="button" class="btn btn-info" id="deezer_playlist_download" title="Download">
+                      <i class="fa fa-download"></i> Download
+                  </button>
+                  <button type="button" class="btn btn-info" id="deezer_playlist_zip" title="Give me a zip">
+                      <i class="fa fa-file-archive-o"></i> Give me a zip
+                  </button>
+                  <button type="button" class="btn btn-info" onclick="$('#deezer-playlist-url').val('')" title="Clear">
+                      <i class="fa fa-times"></i> Clear
+                  </button>
                </span>
        </div>
        
@@ -177,10 +200,18 @@
        <br>
        <div class="input-group">
                <span class="input-group-btn">
-                   <button type="button" class="btn btn-info" id="deezer_favorites_download_play">Download & Play</button>
+                <button type="button" class="btn btn-info" id="deezer_favorites_download_play" title="Download & Play">
-                   <button type="button" class="btn btn-info" id="deezer_favorites_download">Download</button>
+                      <i class="fa fa-play"></i> Download & Play
-                   <button type="button" class="btn btn-info" id="deezer_favorites_zip">Give me a zip</button>
+                  </button>
-                   <button type="button" class="btn btn-info" onclick="$('#deezer-favorites-userid').val('')" >Clear</button>
+                  <button type="button" class="btn btn-info" id="deezer_favorites_download" title="Download">
+                      <i class="fa fa-download"></i> Download
+                  </button>
+                  <button type="button" class="btn btn-info" id="deezer_favorites_zip" title="Give me a zip">
+                      <i class="fa fa-file-archive-o"></i> Give me a zip
+                  </button>
+                  <button type="button" class="btn btn-info" onclick="$('#deezer-favorites-userid').val('')" title="Clear">
+                      <i class="fa fa-times"></i> Clear
+                  </button>
                </span>
        </div>
      
@@ -203,30 +234,6 @@
      </table>
     </div> <!-- end div tab queue -->
      
-    <div id="param" class="container tab-pane fade">
-         <br>
-         <h3 class="mb-4 text-center">Configuration</h3>
-
-    <form class="p-4 rounded" id="paramters" >
-      <div class="form-group">
-        <label for="directory-path">Directory Path</label>
-        <input type="text" class="form-control" id="param-directry-path" name="directory_path" placeholder="/path/to/folder" required>
-      </div>
-
-      <div class="form-group">
-        <label for="login">Login</label>
-        <input type="text" class="form-control" id="param-login" name="login" placeholder="Username" required>
-      </div>
-
-      <div class="form-group">
-        <label for="password">Password</label>
-        <input type="password" class="form-control" id="param-password" name="password" placeholder="••••••" required>
-      </div>
-
-      <button type="submit" class="btn btn-info btn-block font-weight-bold">Save</button>
-     </div> 
-     
-     <!-- end div tab parameters -->
 
     <footer class="footer">
       <div class="container">