✔️ Ideas for the project - #54

References:
https://prettier.io/docs/en/precommit.html

Version

v17.3.0

Platform

OS: Garuda Linux

What steps will reproduce the bug?

• Start the server in localhost & open docs-page.html in live server.
• You'll see the landscape image is not getting fetched. It looks like as shown in the given picture
  
  .

How often does it reproduce? Is there a required condition?

It happens whenever the site is opened in localhost.

Is there any Package conflicting with other packages?

No. As per my knowledge there is no issue for package conflicting.

What is the expected behavior?

The landscape image should show up just like the square image.

What do you see instead?

Provided in the screenshot above.

Additional information

No response

Version

v16.13.0

Platform

Microsoft Windows NT 10.0.22621.0 x64

What steps will reproduce the bug?

Running the program locally and testing the portrait and landscape examples with different song IDs.

How often does it reproduce? Is there a required condition?

Every time, no matter the song ID.

Is there any Package conflicting with other packages?

No response

What is the expected behavior?

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.

What do you see instead?

"Song" label overlaps the song name.

Additional information

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"?.

Implement portrait orientation, apply text wrap for song name and artist name, and add the respective information in docs.

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/

• Font size should decrease dynamically too
• Space between "S O N G" and song name, and song name and the artist name should decrease too
• This wrapping is also needed for artists name section too

Describe alternatives you've considered
No Alternatives right now.

Hi! I have some ideas about the project:

• Text color (same a background color but with the text)
• Sort the files of the project
• Use prettier and huskyjs (to format the code and get a standard codelines)
• Use Vuejs and Vite or Webpack (That depends is you want)

If you want, I can do that things

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:

• Square
• Portrait

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)

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, 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.

Version

v16.13.1

Platform

No response

What steps will reproduce the bug?

/api?name=Silver%20Lining&color=000

This request should get black background color, but that's not the case.

How often does it reproduce? Is there a required condition?

Every time 000 is used for hex, if one uses 000000, it works fine.

Is there any Package conflicting with other packages?

No response

What is the expected behavior?

No response

What do you see instead?

No response

Additional information

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.

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.

Describe alternatives you've considered

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

(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

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.

What steps will reproduce the bug?

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)

How often does it reproduce? Is there a required condition?

<--BUG-->

Is there any Package conflicting with other packages?

<--NO-->

What is the expected behavior?

It should have shown the song name instead of the parent album's name.

What do you see instead?

A card with its parent album's name.

Additional information

For info, you can test it out yourself by using the reproducing step.
Also,
Issue #3

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

The codebase is pretty messy right now, this issue suggests what to fix to change that.

1. Remove unused imports like this:

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');

2. Remove unused vars, for example:

let songName, songArtist, songImageURL; // Not Used

3. Use await for the newToken function instead of the current then method:
4. Use awaits instead of thens in the searchTracksByName and searchTracksById functions
5. Use a join instead of this:

    for (let i = 0; i < artistList.length; i++) {
        if (i==artistList.length-1) {
            artistString += artistList[i]
        }
        else {
            artistString += artistList[i] + ", "
        }
    }

6. Merge the 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.
7. Remove unused comments, for example:

            // 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.

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

Here are some screenshots:

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?