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

Get top artists from API

parent 20b37e24
No related branches found
No related tags found
1 merge request!45Resolve "Get top artists from API"
Hide whitespace changes
Inline Side-by-side
assets/app.js
+ 48
− 0
View file @ 2e3af5bb
......@@ -62,4 +62,52 @@ window.getPlaylists = function () {
}
};
/* get artists and update form */
window.getTopArtists = function () {
var containerElement = document.getElementById("user-top-artists");
if (containerElement) {
var htmlContent = "";
var apiUrl = "artists/top";
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 checkbox-artist"
id="check-top-artist-ARTIST_ID"
name="selected-artist[]"
value="ARTIST_ID"
>
<label class="custom-control-label" for="check-top-artist-ARTIST_ID">
<span class="spotify-image"><img src="ARTIST_IMAGE_URL" style="max-height: 1rem; max-width: 1rem;" /></span>
ARTIST_NAME
</label>
</div>
</li>
`;
data.forEach((artist) => {
htmlContent += htmlTemplate
.replace(/ARTIST_ID/g, artist["id"])
.replace(/ARTIST_NAME/g, artist["name"])
.replace(/ARTIST_IMAGE_URL/g, artist["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();
getTopArtists();
src/Controller/ArtistController.php 0 → 100644
+ 51
− 0
View file @ 2e3af5bb
<?php
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\Response;
use Symfony\Component\Routing\Annotation\Route;
class ArtistController extends AbstractController
{
/** @var SpotifyWebAPI */
private $spotifyApi;
public function __construct(SpotifyApiService $spotifyApiService)
{
// increase timeout limit
set_time_limit(60);
$this->spotifyApi = $spotifyApiService->createApi();
}
/**
* @Route("/artists/top", name="get-artists-top")
*
* @return Response
*/
public function getArtists(): Response
{
$rawTopArtists = $this->spotifyApi->getMyTop(
'artists',
[
'limit' => SpotifyPlaylistService::TOP_ARTISTS_COUNT,
'time_range' => 'short_term'
]
)->items;
$artists = [];
foreach ($rawTopArtists as $artist) {
$artists[] = [
'id' => $artist->id,
'name' => $artist->name,
'imageUrl' => $artist->images[\count($artist->images) - 1]->url,
];
}
return new JsonResponse($artists);
}
}
src/Controller/PlaylistController.php
+ 0
− 9
View file @ 2e3af5bb
......@@ -37,17 +37,8 @@ class PlaylistController extends AbstractController
{
$me = $this->spotifyApi->me();
$topArtists = $this->spotifyApi->getMyTop(
'artists',
[
'limit' => SpotifyPlaylistService::TOP_ARTISTS_COUNT,
'time_range' => 'short_term'
]
)->items;
return $this->render('playlist-generator/index.html.twig', [
'user' => $me,
'topArtists' => $topArtists,
]);
}
......
templates/playlist-generator/index.html.twig
+ 70
− 91
View file @ 2e3af5bb
......@@ -4,108 +4,87 @@
{% block content %}
{% if topArtists is defined %}
<form class="clearfix mt-2" action="{{ path('generate-quick-playlist') }}">
<div class="row">
<div class="col-md-12">
<legend>Quick playlist generator:</legend>
<form class="clearfix mt-2" action="{{ path('generate-quick-playlist') }}">
<div class="row">
<div class="col-md-12">
<legend>Quick playlist generator:</legend>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div>
<input
type="checkbox"
class="custom-control-input"
id="check-quick-create-long-playlist"
name="check-quick-create-long-playlist"
value="long-playlist"
checked
>
<label class="custom-control-label" for="check-quick-create-long-playlist">
Generate a long playlist (x2)
</label>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div>
<input
type="checkbox"
class="custom-control-input"
id="check-quick-create-long-playlist"
name="check-quick-create-long-playlist"
value="long-playlist"
checked
>
<label class="custom-control-label" for="check-quick-create-long-playlist">
Generate a long playlist (x2)
</label>
</div>
<div class="col-md-6 col-sm-12">
<div class="btn-group float-end" role="group" aria-label="Action buttons">
<button name="generate-quick-playlist-from-daily-mixes" type="submit" class="btn btn-secondary">🎶 Mix daily mixes!</button>
<button name="generate-quick-playlist-tambouille-mix" type="submit" class="btn btn-primary">🎶 Pick nice tracks!</button>
</div>
<div class="col-md-6 col-sm-12">
<div class="btn-group float-end" role="group" aria-label="Action buttons">
<button name="generate-quick-playlist-from-daily-mixes" type="submit" class="btn btn-secondary">🎶 Mix daily mixes!</button>
<button name="generate-quick-playlist-tambouille-mix" type="submit" class="btn btn-primary">🎶 Pick nice tracks!</button>
</div>
</div>
</div>
</form>
<form class="clearfix mt-2" action="{{ path('generate-playlist-from-top-artists') }}">
<div class="row">
<div class="col-md-8 col-sm-12">
<legend>Generate playlist from artists:</legend>
</div>
<div class="col-md-4 col-sm-12">
<div class="btn-group float-end" role="group" aria-label="Action buttons">
<button name="pick-random-artist" type="button" class="btn btn-link" onclick="window.pickRandomArtists()">🎲 Pick random artists</button>
</div>
</div>
</form>
</div>
<ul class="list-unstyled row row-cols-md-4 row-cols-2" id="user-top-artists">
<form class="clearfix mt-2" action="{{ path('generate-playlist-from-top-artists') }}">
<div class="row">
<div class="col-md-8 col-sm-12">
<legend>Generate playlist from artists:</legend>
</ul>
<div class="row">
<div class="col-md-8 col-sm-12">
<div>
<input
type="checkbox"
class="custom-control-input"
id="check-top-artist-filter-artists"
name="check-top-artist-filter-artists"
value="filter-artists"
checked
>
<label class="custom-control-label" for="check-top-artist-filter-artists">
Allow only selected artists in recommendations
</label>
</div>
<div class="col-md-4 col-sm-12">
<div class="btn-group float-end" role="group" aria-label="Action buttons">
<button name="pick-random-artist" type="button" class="btn btn-link" onclick="window.pickRandomArtists()">🎲 Pick random artists</button>
</div>
<div>
<input
type="checkbox"
class="custom-control-input"
id="check-top-artist-long-playlist"
name="check-top-artist-long-playlist"
value="long-playlist"
>
<label class="custom-control-label" for="check-top-artist-long-playlist">
Generate a long playlist (x2)
</label>
</div>
</div>
<ul class="list-unstyled row row-cols-md-4 row-cols-2">
{% for artist in topArtists %}
<li class="col">
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input checkbox-artist"
id="check-top-artist-{{ artist.id }}"
name="selected-artist[]"
value="{{ artist.id }}"
>
<label class="custom-control-label" for="check-top-artist-{{ artist.id }}">
{% if artist.images is defined %}
{% set artistLastImage = artist.images|last %}
<span class="spotify-image"><img src="{{ artistLastImage.url }}" style="max-height: 1rem; max-width: 1rem;" /></span>
{% endif %}
{{ artist.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-top-artist-filter-artists"
name="check-top-artist-filter-artists"
value="filter-artists"
checked
>
<label class="custom-control-label" for="check-top-artist-filter-artists">
Allow only selected artists in recommendations
</label>
</div>
<div>
<input
type="checkbox"
class="custom-control-input"
id="check-top-artist-long-playlist"
name="check-top-artist-long-playlist"
value="long-playlist"
>
<label class="custom-control-label" for="check-top-artist-long-playlist">
Generate a long playlist (x2)
</label>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="btn-group float-end" role="group" aria-label="Action buttons">
<button name="generate-playlist-random-top-artists" type="submit" class="btn btn-secondary">🎲 Random!</button>
<button name="generate-playlist-top-artists" type="submit" class="btn btn-primary">🎶 Generate!</button>
</div>
<div class="col-md-4 col-sm-12">
<div class="btn-group float-end" role="group" aria-label="Action buttons">
<button name="generate-playlist-random-top-artists" type="submit" class="btn btn-secondary">🎲 Random!</button>
<button name="generate-playlist-top-artists" type="submit" class="btn btn-primary">🎶 Generate!</button>
</div>
</div>
</form>
{% endif %}
</div>
</form>
<form class="clearfix" action="{{ path('generate-playlist-from-playlists') }}">
<legend>Generate playlist from tracks in existing playlist:</legend>
......
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