Skip to content
Snippets Groups Projects
Commit 1207bd25 authored by Benoît Harrault's avatar Benoît Harrault
Browse files

Get user playlists from API

parent 4e228ec8
No related branches found
No related tags found
1 merge request!44Resolve "Get existing playlists from api"
Hide whitespace changes
Inline Side-by-side
assets/app.js
+ 49
− 0
View file @ 1207bd25
......@@ -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
+ 26
− 6
View file @ 1207bd25
......@@ -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
+ 34
− 57
View file @ 1207bd25
......@@ -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 %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment