Get user playlists from API

assets/app.js

@@ -14,3 +14,52 @@ window.pickRandomArtists = function () {
         artistElements[random].click();
     }
 };
+
+/* get playlists and update form */
+window.getPlaylists = function () {
+    var containerElement = document.getElementById("user-playlists");
+    if (containerElement) {
+        var htmlContent = "";
+
+        var apiUrl = "playlists/user";
+        fetch(apiUrl)
+            .then(function (response) {
+                return response.json();
+            })
+            .then(function (data) {
+                const htmlTemplate = `
+                    <li class="col">
+                        <div class="custom-control custom-checkbox">
+                        <input
+                            type="checkbox"
+                            class="custom-control-input"
+                            id="check-playlist-PLAYLIST_ID"
+                            name="selected-playlist[]"
+                            value="PLAYLIST_ID"
+                        >
+                        <label class="custom-control-label" for="check-playlist-PLAYLIST_ID">
+                            <span class="spotify-image"><img src="PLAYLIST_IMAGE_URL" style="max-height: 1rem; max-width: 1rem;" /></span>
+                            PLAYLIST_NAME
+                        </label>
+                        </div>
+                    </li>
+                `;
+
+                data.forEach((playlist) => {
+                    htmlContent += htmlTemplate
+                        .replace(/PLAYLIST_ID/g, playlist["id"])
+                        .replace(/PLAYLIST_NAME/g, playlist["name"])
+                        .replace(/PLAYLIST_IMAGE_URL/g, playlist["imageUrl"]);
+                });
+                containerElement.innerHTML = htmlContent;
+            })
+            .catch(function (err) {
+                console.warn("Something went wrong.", err);
+                htmlContent =
+                    '<div class="alert alert-warning">Error fetching API data.</div>';
+                containerElement.innerHTML = htmlContent;
+            });
+    }
+};
+
+getPlaylists();

src/Controller/PlaylistController.php

@@ -5,6 +5,7 @@ namespace App\Controller;
 use App\Service\SpotifyApiService;
 use App\Service\SpotifyPlaylistService;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -44,18 +45,37 @@ class PlaylistController extends AbstractController
             ]
         )->items;
 
-        $playlists = $this->spotifyApi->getUserPlaylists(
+        return $this->render('playlist-generator/index.html.twig', [
+            'user' => $me,
+            'topArtists' => $topArtists,
+        ]);
+    }
+
+    /**
+     * @Route("/playlists/user", name="get-user-playlists")
+     *
+     * @return Response
+     */
+    public function getPlaylists(): Response
+    {
+        $me = $this->spotifyApi->me();
+        $rawPlaylists = $this->spotifyApi->getUserPlaylists(
             $me->id,
             [
                 'limit' => SpotifyPlaylistService::PLAYLISTS_COUNT,
             ]
         )->items;
 
-        return $this->render('playlist-generator/index.html.twig', [
-            'user' => $me,
-            'topArtists' => $topArtists,
-            'playlists' => $playlists,
-        ]);
+        $playlists = [];
+        foreach ($rawPlaylists as $playlist) {
+            $playlists[] = [
+                'id' => $playlist->id,
+                'name' => $playlist->name,
+                'imageUrl' => $playlist->images[\count($playlist->images) - 1]->url,
+            ];
+        }
+
+        return new JsonResponse($playlists);
     }
 
     /**

templates/playlist-generator/index.html.twig

@@ -107,65 +107,42 @@
       </form>
     {% endif %}
 
-    {% if playlists is defined %}
-      <form class="clearfix" action="{{ path('generate-playlist-from-playlists') }}">
-        <legend>Generate playlist from tracks in existing playlist:</legend>
-        <ul class="list-unstyled row row-cols-md-2 row-cols-1">
-          {% for playlist in playlists %}
-            <li class="col">
-              <div class="custom-control custom-checkbox">
-                <input
-                  type="checkbox"
-                  class="custom-control-input"
-                  id="check-playlist-{{ playlist.id }}"
-                  name="selected-playlist[]"
-                  value="{{ playlist.id }}"
-                >
-                <label class="custom-control-label" for="check-playlist-{{ playlist.id }}">
-                  {% if playlist.images is defined %}
-                  {% set playlistLastImage = playlist.images|last %}
-                    <span class="spotify-image"><img src="{{ playlistLastImage.url }}" style="max-height: 1rem; max-width: 1rem;" /></span>
-                  {% endif %}
-                  {{ playlist.name }}
-                </label>
-              </div>
-            </li>
-          {% endfor %}
-        </ul>
-        <div class="row">
-          <div class="col-md-8 col-sm-12">
-            <div>
-              <input
-                type="checkbox"
-                class="custom-control-input"
-                id="check-playlist-filter-artists"
-                name="check-playlist-filter-artists"
-                value="filter-artists"
-                checked
-              >
-              <label class="custom-control-label" for="check-playlist-filter-artists">
-                Allow only artists in selected playlists in recommendations
-              </label>
-            </div>
-            <div>
-              <input
-                type="checkbox"
-                class="custom-control-input"
-                id="check-playlist-long-playlist"
-                name="check-playlist-long-playlist"
-                value="long-playlist"
-              >
-              <label class="custom-control-label" for="check-playlist-long-playlist">
-                Generate a long playlist (x2)
-              </label>
-            </div>
+    <form class="clearfix" action="{{ path('generate-playlist-from-playlists') }}">
+      <legend>Generate playlist from tracks in existing playlist:</legend>
+      <ul class="list-unstyled row row-cols-md-2 row-cols-1" id="user-playlists">
+      </ul>
+      <div class="row">
+        <div class="col-md-8 col-sm-12">
+          <div>
+            <input
+              type="checkbox"
+              class="custom-control-input"
+              id="check-playlist-filter-artists"
+              name="check-playlist-filter-artists"
+              value="filter-artists"
+              checked
+            >
+            <label class="custom-control-label" for="check-playlist-filter-artists">
+              Allow only artists in selected playlists in recommendations
+            </label>
           </div>
-          <div class="col-md-4 col-sm-12">
-            <button name="generate-playlist-from-playlist" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button>
+          <div>
+            <input
+              type="checkbox"
+              class="custom-control-input"
+              id="check-playlist-long-playlist"
+              name="check-playlist-long-playlist"
+              value="long-playlist"
+            >
+            <label class="custom-control-label" for="check-playlist-long-playlist">
+              Generate a long playlist (x2)
+            </label>
           </div>
         </div>
-      </form>
-    {% endif %}
-
+        <div class="col-md-4 col-sm-12">
+          <button name="generate-playlist-from-playlist" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button>
+        </div>
+      </div>
+    </form>
 
 {% endblock %}