victoralvesf / aonsoku Goto Github PK

Steps:

1. Add new parameter to columns function:

   • Receive the desired size in both percentage and pixels.

2. Change table to divs.

3. Content:

   • The index/play button should have a width of 40px.
   • The title (or main info to show) should be a div with flex 1. The text should have the ellipsis property (...) if it is too long.
   • Like and Actions buttons should be in the same column.
   • Artist and Album columns should have a width of 15%.
   • Duration should have a width of 40px.
   • Plays should display a play icon as the title, and its width should be 40px.
   • Last Played should have a width of 10%. (Check during implementation if it's worth adding to the final table, same with bitrate and quality).

4. Filters:

   • Change the filter dropdown menu to a simple click on the column name.
   • Steps: start with reset state, first click == asc, second click == desc, third click == reset state.
   • Icons: (reset == ArrowUpDown, asc == ArrowUp, desc == ArrowDown).
   • Enable filtering for Title, Artist, Album, and Duration columns.

5. Enable row selection.

Pages:

Album

Columns to show:

1. Index (should display album track number)
2. Title
3. Duration
4. Plays
5. Last Played
6. Like and Actions button
7. Row selection

Artist Top Songs

Columns to show:

1. Index
2. Title
3. Album
4. Duration
5. Plays
6. Last Played
7. Year
8. Like and Actions button
9. Row selection

Playlist and Songs

Columns to show:

1. Index
2. Title
3. Artist
4. Album
5. Duration
6. Plays
7. Last Played
8. Like and Actions button
9. Row selection

Artists

Columns to show:

1. Index
2. Name
3. Album count
4. Actions button

Playlists

Columns to show:

1. Index
2. Name
3. Comment
4. Song count
5. Duration
6. Public
7. Actions button

Radios

Columns to show:

1. Index
2. Name
3. Homepage URL (15%)
4. Stream URL (15%)
5. Actions button

• Fix song's cover art on full screen player
• Fix table's play button that was flicking scroll position on hover
• Improve album and playlist duration badge to a better localization info.