lttkgp/falcon

The frontend of LTTKGP web app

falcon's Issues

Add keyboard shortcuts for next/previous video in queue

General Keyboard shortcuts

Shortcut	Function
Shift+n	Next song in queue
Shift+p	Previous song in queue

Create XD for how search results are rendered

Fix the Description Video animation for iOS/Webkit

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

Back button working unexpectedly

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)

Organize additional information and settings

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.

Application not working in Netlify https://beta.lttkgp.com/

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

Create sidebar and corresponding routes

Add About page

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.

Change title of the webpage to the Song being played

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.

Populate queue when only ID is passed in /video route

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.

Create the feed page

Add basic documentation

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.

Detect default system theme preference and set the theme automatically to match

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

Add filters in feed

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.

Reset the code in this repository with latest create-react-app

Remove search input placeholder

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

Create list view with static data

Static data since the API layer isn't ready yet

Load more videos when the end of the queue is reached

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.

Video page renders well on chrome but some issues on firefox. Screenshot1[Firefox] , Screenshot2[Chrome]. Control bar is kind of half hidden in firefox

empty `List` in Home

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.

Add a link to original Facebook post underneath the song's player

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

Scroll arrows stay when there is nothing to scroll

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

Add additional info in video description

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

Store the result of API calls in redux store

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.

Scroll to the video if lower in queue

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.

Create view for video page and add corresponding routing for it

Create a list for random songs

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.

Integrate with the /feed API

https://api.lttkgp.com

Artist name and some genres are hidden

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

Add a global state for the queue of the current player

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

Add view-only copy of the XD document to Wiki

Shows "Loading" when its not loading

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.

Update title when player moves to the next link

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.

Persist user's theme preference through local storage

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

Finalise the design for v1 of the frontend

Delay in scroll buttons animation

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)