mathkruger / litefy

a lightweight spotify client

Matheus Kruger

ℹ About

• 🔭 Currently working at CI&T
• 🏠 Living in Itu, SP - Brazil 🇧🇷
• 🖥 Fullstack Web developer for 6 years.
• Me 🤝 Typescript

📞 Contact

• 📧 [email protected]

🌐 Social

✨ Tech Skills

                         

👨‍💻 Statistics

litefy's Issues

Country icons/pictures on the page's header not displaying

Pictures showing the issue on Safari/Chrome are attached below:

Player is not working

Spotify is blocking the music player sometimes.

Create pagination for component that lists content (albums, tracks, playlists, etc)

it may be a infinite scroll, I think that's sounds cool

Bug - Logo on navbar doesn't working as expected

Not a critical bug but I found that when clicking on the center of the logo on navbar it doesn't work as expected.

Fixing the Flag tag on Georgian Language

Fixing the Flag tag on Georgian Language

Spanish language variation flags are switched

As you may notice here, the Latin Spanish version is currently having the Spanish flag, while the Spanish version has the Mexican flag. This should be switched around.

issue reagrding default language

hey @mathkruger

it seems like u did fixed on #55 (commit)

this.translate.setDefaultLang(languages.includes(navigator.language) ? navigator.language : "en");

1. it still loads a "ukraine" language on the first start rather than "EN" a global language even tho in language picker it is set to English.
   showing the problem

NOTE: it seems to be like if you remove the ua.json the default goes back to en

just wanted to create the issue to make sure it is not intended before I make a pull request

also regarding the push the update of .gitignore to add these two files because it wasn't before :
package-lock.json
yarn.lock

Translate the application to French

@mathkruger
hello, Are you interested in adding French as a language to the application?

Add shuffle button

Add shuffle button to the player

Feature Type: Create/Edit playlist and add track action

Spotify API supports creating and editing playlists. There are many places where the action can happen. For example: The Create Playlist feature can be a button above the list of playlists on the LIbrary page. The Edit Playlist feature can be a button next to the follower/tracks text on the individual playlist's page. The individual tracks should also be able to be added to playlists. The feature would involved new components and changes to existing components. Any ideas on these features?

Errorhandling when not premium

I am getting errors because I am not premium.

I can add error-handling. I imagine the api provides some info if the user is prem or not. So could either check that before making the request. Or handle the error after the request. I suggest the latter (handling the error). Easier to get started with and probably good to get add some error-handling in the services anyways?
What do you think?

Add support for podcasts

At this point, podcasts are not available on Litefy, it would be nice to have it.

Make page accessible

I ran an accessibility audit on the page and found accessibility issues like:

• Missing form labels
• Missing alternative text
• Language missing/invalid
• Redundant links
• Broken ARIA reference etc

🐛 Bug: Profile picture not showing properly

Subject of the issue 📝

Hi there 👋
Hope everyone is having an amazing day 🌞
This is the first time im using Litefy 💚

After I have installed everything and loged in I saw that the profile picture of my user account wasn't showing properly 🤔

Environment 💻

Angular CLI: 10.2.1
Node: 12.18.1
OS: win32 x64
Crhome: 94.0.4606.71
Angular: 10.2.4

Screenshot 📸

Fail to load PT-eu language

I've noticed an error to get the PT translations.

Error cause:

Update Angular version to latest

Store state of volume and shuffle mode in localstorage

This is needed because when the page is refreshed, the volume and the shuffle mode are the last one saved in spotify servers

Feature: Add country flags for the languages

Would be nice to have little icons with a flag representing the language. Maybe using the most relevant country that speaks that language. I don't know if this would bother someone, but I'll try to do my best lol

Add support for more languages

I think it would be a good idea to add support for other common languages by extending the existing language switching feature.

type in folder name

there is typo in folder name of shearch-box which should search-box

Refactor function/variable naming

Description

In some parts of code functions and variables are being named in Spanish. That makes it harder for developers to read the code (especially when they don't speak Spanish). It also makes the code less consistent and thus harms future maintainability.

Example of problem
in file search.component.ts:

obterResultados(items) {
    this.resultadosTracks = items.tracks.items;
    this.resultadosPlaylists = items.playlists.items;
    this.resultadosAlbums = items.albums.items;
    this.resultadosArtistas = items.artists.items;
  }

Suggested solution

It might be a good idea to refactor the current code and rename functions and variables from Spanish to English. Doing so would also make it easier for new contributors to understand the code faster.

Any Planning to update the angular 10v to 13v

Hi @mathkruger are you planning to update the angular from 10v to 13v, do you let me know i can do that.
Thank you :)

Could you develop a feature to see who follows my playlists?

It'd be nice to know about the people who follow my playlists

Translate the application to more languages

spotify player seek bar not working when using hebrew language

Create a more clear home page with User Profile, User top charts, filters by dates and most recently played tracks

At the moment the home page is very messy and hard to ready. It has some CSS mistakes also on getting behind the navbar and not being aligned on some resolutions.
With this I purpose to have a home page with a short user info and all his inside music/podcast info with filters.

User profile screen

Create a screen for user profile informations.

I am facing a issue when i try to run the application. Kindly help me to resolve

Hi thanks in advance.I followed the steps which was given in the "Running the Application" section
https://github.com/inspiremithun/litefy#running-the-application-

After giving npm install command i got the error as like below

then i try to run ng serve i got the below error

Keep language choice in localStorage

Persist language choice on localstorage for future uses

Convert application to PWA

Progressive Web Apps (PWAs) are applications that you build by using web technologies, and that can be installed and can run on all devices, from one codebase.

PWAs provide native-like experiences to your users on supporting devices. They adapt to the capabilities supported by each device and they can also run in web browsers, like websites.

Does the project use a code formatter?

Does the project have a formatter (i.e prettier)? I know that we have an eslint config but it does not provide formatting.

Code formatter could serve as a coding style guideline for future contributions.

Edit: I could take this on

Refactor player layout

Just a redesign, css work.

Create tests cases for every component

yes. we need this.

Execução de resultados de busca

Ao adicionar um album ou playlist na fila de reprodução, somente a primeira música é executada.

Improve login page

create a landing page for the login page, showing informations about the project. It may have a link to the github project.

Bug in the language switcher and the language itself

When i first entered the website, i noticed that the page was all in English, but the language switch was showing Portuguese Brazil. It started working properly after i changed it. Nothing serious, but i guess i should point that.

The toolbar overlays the wording with the title.

The attached images perfectly describe what happens, in the second is I deleted the toolbar via the console

Enhancement: The Settings drop-down menu should disappear when user clicks away

Currently, the drop-down menu (to see the profile and settings) stays dropped down after it is trigger. The drop-down menu feature on Spotify (and Github too) disappears when the user clicks elsewhere, so that the menu doesn't partially block the screen. I think this would sense too, since the language switching feature (which is beside it) also disappears when the user triggers something else.

UI/UX improvements

Hey!
Great project you have there but the UI can have some love as well.

Do you mind If i do some improvements like consistent, responsive UI and UI elements?

Add youtube playback for non premium users

If the account type is not premium, search the track in youtube and play it in the player.

Translate the application to Hebrew & RTL support

hi @mathkruger
Are you interested in adding Hebrew language to the application?

just keep in mind that Hebrew is a right aligned language.

Add support for navigating with keyboard

This feature is important for integration with KaiOS, a platform that does not have a Spotify client.