diff --git a/assets/app.js b/assets/app.js
index 2e92cc03b6585d39eabc87b072e97aee1b659ba9..b05496069408af3155a31b13b557810599146efb 100644
--- a/assets/app.js
+++ b/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();
diff --git a/src/Controller/PlaylistController.php b/src/Controller/PlaylistController.php
index 64a03cfc94af637b5e59c6a26ee4ae7c33b5da85..d5cce8dc501df14162509dbb2ccc74024567ca7e 100644
--- a/src/Controller/PlaylistController.php
+++ b/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);
}
/**
diff --git a/templates/playlist-generator/index.html.twig b/templates/playlist-generator/index.html.twig
index bc37637cd384b385ad32937f8bc684059e29cb36..d15064b0d8707c1cb522896a2c2abb6de81998e2 100644
--- a/templates/playlist-generator/index.html.twig
+++ b/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 %}