Currently there is nothing in terms of documentation for this project.
Even the Readme is empty.

Add basic documentation for a start with description/usage of custom elements and components.

The feed serves as the replica of the feed of Facebook group. Currently it doesn't have any filters to sort and browse the posts. The following filters need to be added:

• Like Count
• Date interval
• Genres

These filters will also be replicated in the search page when it is added.

General Keyboard shortcuts

Static data since the API layer isn't ready yet

When there is nothing to scroll in List component in home, arrows stay there unfunctionally.

In List in home view:

On a sidenote, we may want to animate the arrows immediately after the scroll is performed. Currently there is a slight delay in the arrows coming up.

Originally posted by @xypnox in #75 (comment)

This is useful to find + like the original post on the group or see who posted the song (since we don't have this information).

Here is a short video depicting unexpected behaviour of Back button. Here is a long video depicting the same issue. In both the videos one can see that the back button works occasionally.

I am facing the same problem in another project. If you know how to fix it, please let me know in the comments. It seems, Reacts router doesn't re-render the component when the query string changes.(ref)

The state should be either a redux store or a context store.

It will save

• the current queue and
• the current playing song

and should expose functions to

• change the currently playing song
• load next set of songs
• Shuffle the queue and move the currently playing song to the top
• optional
  • filter queue
  • load history
    • queue history can be stored in localstorage

The state will be necessary in various operations:

• Load more videos when the end of the queue is reached #50
• Populate queue when only ID is passed in /video route #51
• Load next videos in the queue #57
• Updating the video and queue and automatically handling change of URL. #72
  

  falcon/src/components/video.tsx

  Lines 33 to 40 in 603be5e

  	let changeURLid = (id: string) => {
  	if (window !== undefined) {
  	if (window.history.pushState) {
  	var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + "?=" + id;
  	window.history.pushState({ path: newurl }, "", newurl);
  	}
  	}
  	};

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Add an about page to the site to list:

• About LTTKGP
• Features
• FAQs
• GitHub Org and Slack Workspace links
• Change-log/Link to a changelog elsewhere

The About page can be added as an info icon above the theme switcher.

The design of the about page should be attractive as it will be the primary source for users to know about LTTKGP.

https://api.lttkgp.com

Currently when the end of the queue is reached the player stops.

Fetch next songs from the API and add them to the queue when the end of the queue is reached.

There are few parameters which are still not displayed in the description, the following need to be added:

• Artist Image
• Song Art
• Post data
• Link to post on FB

The backend is giving some errors currently.

Error 1016
Origin DNS error

When the backend fails, the frontend should show some error or info like "check back later." The loading message is misleading.

When a /video route is shared with id set for example https://lttkgp.com/video?=RnBT9uUYb1w the behavior is to only show that video. It would be ideal to ping the server and fill the queue with other videos in the queue.

This will make sharing the /video links much more user friendly.

I like this in general! IMO, we should also persist the user preference in localstorage. In cases where I'm someone who uses the OS light mode because it feels better, but would prefer dark mode for websites and specifically, LTTKGP. ( I don't think anyone goes the other way round though 😆 )
- @ghostwriternr

As requested here

Now, popular endpoint is giving empty list. Hiding empty lists would be a better experiecne to the users rather than displaying empty space with shuffle button which throws error in console on click.

Currently the site has a static title when a song is being played. It will be helpful to have the title set to a song currently being played.

The /random endpoint returns random songs from the DB. We can create a 'Surprise Me' type of list where the user can listen to random songs that were posted before.

As the content and the features of the app have increased, the space in the UI has started cramming up. For example consider the #62 About page PR. This will add another button besides the theme switcher to the interface.

As we grow further we may need more pages and configurations. Sticking them to the sidebar will only clutter the interface further. Therefore we need a solution to organize existing configs and links, and have flexibility to add any configs in the future; Without sacrificing the minimal feel of the interface.

One of the solutions is a modal shown on hover located at the bottom of the sidebar:

This modal is designed to take minimal space. We can extend it both horizontally and vertically to add future elements.

The button for the modal is located at the same place as the previous theme switcher thus making it familiar to the older users. It has been moved inside the modal because people don't switch themes regularly, they choose one theme and stick to it throughout.

On mobile this will be a full width and height modal with a close icon to close it. The button to launch it will be at the same place as the theme switcher, beside the page titles.

This modal will also include the post stale status provided by the backend.

I didn't prefer a centered modal. I wanted it to take only as much visual space as it required. Putting it in the center would cover the video lists and the hover to show interaction would not be feasible with this approach.

We will need to test the accessibility of such a modal as this will have to be implemented by hand.

I am also open to other ideas to fit the configs and links in one place/other places.

Currently the queue opens at the top even when a song lower in the queue is selected in the list.

Fix the error by adding the scroll if the current index is not the first video.

Have tried in multiple browsers. App runs locally but not on Netlify.

When the LTTKGP tab is unattended and the player moves to the next link, the title updates to the name of the next song only on switching to that tab.

The search feature is intended for a later version. Thus, the placeholder should be hidden for now.

Currently the Description transitions work as intended in chrome's and firefox's respective rendering engines and this is the correct behavior:

The error is iOS can be understood in this screen grab

Currently every time a view is visited after the site has loaded calls the API again to fetch the posts. It would be better to store the result of the API calls in the redux store and use those values instead.

If a user wants to fetch the new posts he/she just needs to refresh the page and it will clear the redux store and refresh the posts, thus there is no need to add an auto-refresh.

Artist name and some genres are hidden when the song name crosses into the next line or the viewport dimensions are not large enough.

Screenshot & reported by @thescriptninja