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

Merge branch '51-get-existing-playlists-from-api' into 'master' 

Resolve "Get existing playlists from api"

Closes #51

See merge request !44
parents 4e228ec8 1207bd25
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 @ 20b37e24
......@@ -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 @ 20b37e24
......@@ -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 @ 20b37e24
......@@ -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.
Finish editing this message first!
Please register or to comment