lttkgp / falcon Goto Github PK
View Code? Open in Web Editor NEWThe frontend of LTTKGP web app
Home Page: https://lttkgp.com/
License: MIT License
The frontend of LTTKGP web app
Home Page: https://lttkgp.com/
License: MIT License
The state should be either a redux store or a context store.
It will save
and should expose functions to
The state will be necessary in various operations:
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.
Add an about page to the site to list:
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.
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).
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.
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.
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.
Static data since the API layer isn't ready yet
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)
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
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:
These filters will also be replicated in the search page when it is added.
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.
General Keyboard shortcuts
Shortcut | Function |
---|---|
Shift+n | Next song in queue |
Shift+p | Previous song in queue |
The search feature is intended for a later version. Thus, the placeholder should be hidden for now.
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.
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.
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.
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 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.
There are few parameters which are still not displayed in the description, the following need to be added:
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.