amreshsinha / spotify-cards-api Goto Github PK
View Code? Open in Web Editor NEW๐ Unofficial Spotify PromoCards API
Home Page: https://spotify-cards.fossian.com/
License: MIT License
๐ Unofficial Spotify PromoCards API
Home Page: https://spotify-cards.fossian.com/
License: MIT License
Right now the docs page has a normal UI, nothing fancy.
Redesign it to something eye-catchy using some template.
Here is what I have made: https://vimeo.com/661411787
Hi! I have some ideas about the project:
If you want, I can do that things
v16.13.1
No response
/api?name=Silver%20Lining&color=000
This request should get black background color, but that's not the case.
Every time 000 is used for hex, if one uses 000000, it works fine.
No response
No response
No response
let imageColor = '#000';
Instead of using #000
as a flag to determine if the user has specified the value of color, a boolean variable should be used.
Is your feature request related to a problem? Please describe.
The HOSTING.md
does not have steps for hosting with docker under the host on your own server section.
Describe the solution you'd like
Add steps for hosting with docker and reverse proxying it with Traefik. Make sure you add a reference to installing Traefik, which can be found here: https://fossian.com/simplify-deployment-traefik-walk-through/ .
Make sure you verify the steps by trying it on an actual virtual server and attaching a subdomain or domain to it.
You can get a virtual server for free on the oracle cloud free tier or digitalocean trial.
And for a subdomain, you can get one for free on afraid DNS or any other provider.
You can also add images for the steps.
DISCUSSION NEEDED
So the official Spotify promo cards website has a feature where you can select the size.
I think we could do something like this.
We would need to add a total of 2 styles:
What do you think?
(Don't assign me just yet, if after the discussion we agree on adding this, I can experiment with something like this)
Is your feature request related to a problem? Please describe.
Currently, there are no CONTRIBUTING guidelines for newcomers.
Describe the solution you'd like
Add a CONTRIBUTING.md
file listing all the rules and guidelines which should be followed while contributing to the repo.
Anything extra you want to add?
Make sure it at least follows the general rules of creating a new branch and how to name PRs.
References
You are free to see any references and examples. Just don't copy them straightforwardly.
Some examples:
https://github.com/AmreshSinha/sshot/blob/main/CONTRIBUTING.md
https://github.com/appwrite/appwrite/blob/master/CONTRIBUTING.md
https://reactjs.org/docs/how-to-contribute.html
https://github.com/vercel/next.js/blob/canary/contributing.md
I entered a random name "SomeoneNoone", after which the server is not responding :/
Not sure if you stopped the server ๐ or it was due to this
(Discussion needed first)
When searching by name, the 6th result of the search will be omitted due to this line:
await spotifyApi.searchTracks(name, {market:'US', limit:1, offset:5})
In my opinion, we should remove the offset and show the 1st result instead. This will result in the most popular song being omitted which statistically speaking should be what the user was searching for.
Examples:
Query: the%20nights (the nights)
Offset 5:
No offset:
Very simple issue to fix, literally just removing a few characters from the line mentioned above in /index.js
v16.13.0
Microsoft Windows NT 10.0.22621.0 x64
Running the program locally and testing the portrait and landscape examples with different song IDs.
Every time, no matter the song ID.
No response
I'm not too sure what the expected behavior is. Either the 'song' label sits above the song name or the label shouldn't be there at all.
"Song" label overlaps the song name.
Just came across this while messing around with the examples on my local machine. Not sure if this is a known issue. I can try to fix it if you want to label this under "hacktoberfest"?.
The codebase is pretty messy right now, this issue suggests what to fix to change that.
const fetch = require('cross-fetch') // Not Used
const path = require("path")
const express = require('express')
const bodyParser = require('body-parser') // Not Used
const url = require('url') // Not Used
const querystring = require('querystring') // Not Used
const fs = require('fs') // Not Used
const SpotifyWebApi = require('spotify-web-api-node')
const cors = require('cors');
let songName, songArtist, songImageURL; // Not Used
newToken
function instead of the current then method:searchTracksByName
and searchTracksById
functionsjoin
instead of this: for (let i = 0; i < artistList.length; i++) {
if (i==artistList.length-1) {
artistString += artistList[i]
}
else {
artistString += artistList[i] + ", "
}
}
searchTracksByName
and searchTracksById
functions. I suggest to provide the function with a string called searchType
using which the function decides whether to call the spotify API for song data like in the searchTracksByName
function or like in the searchTracksById
function. // const spotifyCard = {
// spotifyCardURL: cardURL
// }
// res.render('api', spotifyCard)
// res.send(cardURL)
// res.write('<img src = "'+cardURL+'">');
// console.log(cardURL) // Image which we want
// fs.writeFileSync('./test.png', buffer)
These are all of my suggestions for now, I can do all of them, let me know if I should do this and which ones.
Is your feature request related to a problem? Please describe.
Currently, there is no input or create card button option in the page. User has to copy the API link and hit the end points after entering the data in the url to get the result.
Describe the solution you'd like
A feature can be implemented for the user. So that the user can type the song name and color code as desired and the result will be show on the same or new page. Similarly, for other option like for song id the input can be changed depending on the option chosen by the user. This will result in more user friendly UI.
Just a simple representation of the proposed feature.
Describe alternatives you've considered
No alternatives right now.
All the songs' names I have come across on Spotify use brackets to add their artist's name.
I think we should remove the bracketed text from the song name before displaying it on the card because it is just noise as we have artists' names in another field anyways.
Removing the bracketed text will make the card more minimal and less congested.
Is your feature request related to a problem? Please describe.
Currently, if a song has a big name then it's full name crosses the canvas instead of wrapping into new line
Describe the solution you'd like
Implementing Text Wrap with which longer names can automatically wrap into next line and also the font size of the name should decrease dynamically.
This might help: http://jsfiddle.net/mg9jxhbn/1/
Describe alternatives you've considered
No Alternatives right now.
Is your feature request related to a problem? Please describe.
Currently, it does not support many other languages out there like Japanese.
Spotify Song ID: 51oc6MEsXTpnPn6GOw5VuP
Spotify Track Link: https://open.spotify.com/track/51oc6MEsXTpnPn6GOw5VuP?si=815531d53b484cae
Name: ใใใ by Fujii Kaze
Image:
Describe the solution you'd like
Needs more investigation. Will do it in my free time. Up for grabs if anyone wants to resolve it.
Implement portrait orientation, apply text wrap for song name and artist name, and add the respective information in docs.
v17.3.0
OS: Garuda Linux
It happens whenever the site is opened in localhost.
No. As per my knowledge there is no issue for package conflicting.
The landscape image should show up just like the square image.
Provided in the screenshot above.
No response
Text is not visible when the chosen background color is similar to white, as here:
I think the text color should be changed depending on the background color.
This answer can be super useful.
IMO, text color should be changed when delta E <= 2
.
Right now, I am thinking of using the average color of img as the text color, in case the background color is similar to white.
But if the average color is also similar to the background color, I haven't figured that out. WDYT?
Well sharing the code for merging the functions in a code block in this issue would not be optimal. I'm not sure we're on the same page here. Let me know if later on you want to save time and let me create the PR for merging the functions.
Will open a PR for this issue (Theme Color Extraction) in a few minutes.
On another note, is it just me or does the image sometimes contain the album name instead of the actual song name?
Album Name: Somewhere New
Link to Album: https://open.spotify.com/album/2tYcFWd25g2Y69VQHiNJwD?si=kpz0IFRgQtqpKUDSKDXTew&dl_branch=1
Song Name: Your Spell
Link to Song: https://open.spotify.com/track/1y6ZCzDYOkXXq5o7BUkbIi?si=a1f1311e917542d9
ID: 1y6ZCzDYOkXXq5o7BUkbIi
Spotify Card for that image:
@delivey thanks for pointing it out. I will open an issue for it. If you wanna work on that too you are welcome ๐
Originally posted by @AmreshSinha in #3 (comment)
<--BUG-->
<--NO-->
It should have shown the song name instead of the parent album's name.
A card with its parent album's name.
For info, you can test it out yourself by using the reproducing step.
Also,
Issue #3
Is your feature request related to a problem? Please describe.
By default the color for the background is black. So, if in the request, color is not provided the client will get an image with Black background.
Describe the solution you'd like
Instead of Black Color, we can extract the Dominant or Average color from the image and can set the background for that Song Card with that color code.
Describe alternatives you've considered
You can either code your own script for this or use already available packages like Vibrant.
โ๏ธ Ideas for the project - #54
References:
https://prettier.io/docs/en/precommit.html
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.