Open Source LoFi Streaming for Web and Desktop App
Home Page: https://loofi.netlify.app
License: MIT License
I'm Stanley Owen from Indonesia, a junior high school student passionates about programming and loves building awesome projects. Any Questions? Let's get in touch here.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Is your feature request related to a problem? Please describe.
While people tend to be more good in memorizing the title of the music, however when someone tries to search the entire gallery of a specific author, it won't work.
Describe the solution you'd like
Allow users to search music both for title and author.
Scope
| Capability | Priority |
|---|---|
| Expand Search Feature Configuration for Author | Must |
Desktop (please complete the following information):
Describe the bug
When I tried to set the device width to 702px, the music UI seems unresponsive.
To Reproduce
Steps to reproduce the behavior:
702pxExpected behavior
The smaller card should have a 100% width instead of 50% 50% and the larger card should have 50% 50% instead of 33.3% 33.3% 33.3%
Screenshots
Desktop (please complete the following information):
Describe the bug
Unsynchronized button on home and album component which cause some UI error.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
When the music is paused or resumed from the control component, the data should be synchronized.
Screenshots
Desktop (please complete the following information):
Describe the bug
Based on CVE-2021-23364, browserslist dependency version is vulnerable to regular expression denial of service (ReDoS) during parsing of queries. This issue is patched on version 4.16.5, and it would be great to update the dependency to a more recent version to prevent this vulnerability.
Describe the bug
Based on CVE-2021-23440, set-value dependency version is vulnerable to a bypass of CVE-2019-10747 when the user-provided keys used in the path parameter are arrays. This issue is patched on version 4.0.1, and it would be great to update the dependency to a more recent version to prevent this vulnerability.
Is your feature request related to a problem? Please describe.
In production, keys are stored on the server side which can be accessed without using dotenv. Since we didn't use dotenv dependency as production, it is recommended to migrate it from dependency to dev dependency.
Describe the solution you'd like
Migrate dotenv from dependency to dev dependency.
Scope
| Capability | Priority |
|---|---|
Migrate dotenv to Dev Dependency |
Should |
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
As there is limited features provided by another cloud provider such as Firebase, Google Cloud, etc. It is recommended to host image on GitHub Server since it will be more efficient and effective.
Scope
| Capability | Priority |
|---|---|
| Host Assets on GitHub Server | Should |
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
Open source application will have their link which redirects users to their GitHub Repository. But users will face difficulties when trying to visit this repository on GitHub since there isn't any link.
Describe the solution you'd like
Add button which will redirect user to GitHub repository.
Scope
| Capability | Priority |
|---|---|
| Add Button which Link to GitHub Code | Must |
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
As described here, a good readme.md needs to provide instructions to graders about what you did in your homework and which files to open or run. In group projects, a good readme would have who worked on what part of the project, what the project is about, what technology was used and links to any live pages. The best readme files are creative guides that allow a reviewer to understand everything your project is about, who, what, when and how.
Describe the solution you'd like
So instead of using readme.md template project provided by react, try to redesign it.
Scope
| Capability | Priority |
|---|---|
Update README.md File |
Must |
Desktop (please complete the following information):
Describe the bug
It seems like overflow-x is present on the footer component which may highly affect ui/ux in most screen.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
Desktop (please complete the following information):
Describe the bug
The navbar design seem not really responsive as margin-left and width: 100% are used for its style, which may cause overflow.
Expected behavior
Instead of using 100% as its width in navbar, try using another method of calculation to calculate its width to avoid overflow.
Screenshots
Saw:
Expected:
Desktop (please complete the following information):
Describe the bug
Based on CVE-2020-28469, glob-parent dependency version is vulnerable to regular expression denial of service (ReDoS). This issue is patched on version 5.1.2, it would be great to update the dependency to a more recent version to prevent this.
Is your feature request related to a problem? Please describe.
Feature request template is basically provided by GitHub, however there are some limitation, which we can't ask for additional scope or opinion, what should or shouldn't we do, etc.
Describe the solution you'd like
Try redesigning the feature request template for optimal user experience.
Is your feature request related to a problem? Please describe.
While algolia has it's own advantages, where users can easily integrate them without using any codes, however it isn't as effective as building our own code in client side since it will be faster and cleaner than using alogolia dependency.
Describe the solution you'd like
Build custom algorithm which is processed directly in client side instead of requesting from the server as this method will be more effective and faster.
Scope
| Capability | Priority |
|---|---|
Using Custom Search Algorithm instead of Using Algolia |
Should |
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
Beta preview helps simulate real-time user environment before the software is sent for production state which helps shape a more stable software and tracking further issues/bug.
Describe the solution you'd like
Deploy a beta version preview which allow users to access it if necessary.
Scope
| Capability | Priority |
|---|---|
| Deploy beta preview to a unique URL | Should |
| Provide beta link url in production state | Could |
Desktop (please complete the following information):
Describe the bug
Based on CVE-2021-23436, immer dependency version can lead to a bypass of CVE-2020-28477 when the user-provided keys used in the path parameter are arrays. In particular, this bypass is possible because the condition (p === "proto" || p === "constructor") in applyPatches_ returns false if p is ['proto'] (or ['constructor']). The === operator (strict equality operator) returns false if the operands have different type. This issue is patched on version 9.0.6, it would be great to update the dependency to a more recent version to prevent this vulnerability.
Describe the bug
Scrollbar is located behind navbar causing users' unable to scroll by clicking the thumb bar.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Scrollbar should located in front of the navbar.
Screenshots
Desktop (please complete the following information):
Describe the bug
After the latest pull request (#26) was merged in the master branch, no data was rendered in the frontend app. Only a background and some menus.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The playlist should be rendered correctly.
Screenshots
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
This release v5 is out! Where they migrated from @material-ui to @mui Dependency. This release get the benefits of bug fixes and a lot of improvements such as the new styling engine, modular API, which enables tree-shaking, bundle size reduction, and other benefits. However it has a redesigned API, so it is expected that we will need to make some changes to upgrade it. For more information about how to migrate to v5 of @mui, please follow the following link here.
Scope
| Capability | Priority |
|---|---|
Migrate @material-ui to @mui Dependency for v5 |
Could |
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
Since the beta and the production page has similarities in the URL, however it will be difficult for another early dev to cope with these issue.
Describe the solution you'd like
Placing the beta link and the production link in the environment variable and only shows the beta access section when there are beta environment.
Scope
| Capability | Priority |
|---|---|
Only shows the beta access section when there REACT_APP_ALLOW_BETA is set to true |
Must |
| Improve Beta Redirection Settings | Should |
Desktop (please complete the following information):
Describe the bug
The progress time is mixed up when opening another music.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Stop the progress of the first played music and run the other music
Additional context
I think we could just stop all progress of playing music when user decided to play another music.
Is your feature request related to a problem? Please describe.
It seems like the progress bar and volume slider is bad for some reasons, such as it is too static, no animation, etc.
Describe the solution you'd like
The slider must have a smooth animation and easy for users to use it.
Scope
| Capability | Priority |
|---|---|
| Improve the Design of the Progress Bar | Must |
| Make it simple but also great | Should |
| Add a smooth animation when users scroll on it | Could |
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
As described here:
You're under no obligation to choose a license. However, without a license, the default copyright laws apply, meaning that you retain all rights to your source code and no one may reproduce, distribute, or create derivative works from your work. If you're creating an open source project, we strongly encourage you to include an open source license. The Open Source Guide provides additional guidance on choosing the correct license for your project.
While LoFi Player is an open-source program where everyone is allowed to reproduce, distribute, etc. It's necessary to provide a LICENSE file.
Scope
| Capability | Priority |
|---|---|
| Issue a License for LoFi Player | Must |
Describe the bug
While by default the tooltip feature will show up on 500ms, however it becomes inconsistent (immediately showed up instead of having a 500ms delay) after users have hovered it.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Every tab should have a consistent delay in showing up tooltips.
Screenshots
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
Google Search Console is a free service offered by Google that helps us monitor, maintain, and troubleshoot your site's presence in Google Search results which could improve the SEO in Google.
Describe the solution you'd like
Include LoFi Player to Google Search Console
Scope
| Capability | Priority |
|---|---|
| Include LoFi Player to Google Search Console | Must |
Desktop (please complete the following information):
Describe the bug
While trying to play music through album and music, it doesn't seem to work. Additionally, it returns the following error message:
2.fe88597d.chunk.js:sourcemap:2 Uncaught TypeError: e.audio.getAttribute is not a function
at app.component.tsx:17
at m (home.component.tsx:10)
at onClick (home.component.tsx:38)
at Object.Be (2.fe88597d.chunk.js:sourcemap:2)
at Ye (2.fe88597d.chunk.js:sourcemap:2)
at 2.fe88597d.chunk.js:sourcemap:2
at kr (2.fe88597d.chunk.js:sourcemap:2)
at xr (2.fe88597d.chunk.js:sourcemap:2)
at 2.fe88597d.chunk.js:sourcemap:2
at Me (2.fe88597d.chunk.js:sourcemap:2)To Reproduce
Steps to reproduce the behavior:
home componentExpected behavior
No error was thrown and users are able to stream music.
Screenshots
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
Code scanning is a feature that you use to analyze the code in a GitHub repository to find security vulnerabilities and coding errors. Any problems identified by the analysis are shown in GitHub.
You can use code scanning to find, triage, and prioritize fixes for existing problems in your code. Code scanning also prevents developers from introducing new problems. You can schedule scans for specific days and times, or trigger scans when a specific event occurs in the repository, such as a push.
Scope
| Capability | Priority |
|---|---|
| Add Third Party License(s) | Could |
Desktop (please complete the following information):
Describe the bug
I tried to compile the main branch after pulling #9 PR, however it failed in compiling it and return the following error message:
Failed to compile.
src\components\app.component.tsx
Line 11:18: 'Base' is not defined react/jsx-no-undef
src\components\sidebar.component.tsx
TypeScript error in /src/components/sidther with meaningful text, or an empty string for decorative images jsxebar.component.tsx(6,33):
Cannot find name 'useState'. TS2304
Search for the keywords to learn more about each error.
To Reproduce
Steps to reproduce the behavior:
main branchyarn startExpected behavior
No error in compiling main branch.
Screenshots
Desktop (please complete the following information):
Describe the bug
While the algorithm is supposed to only randomize the song on every user reloads, however I notice that the song is randomized every time I switched the tab.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Song should only be randomized when users reloads the browser, not switching tabs.
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
Firebase applications work even if your app loses its network connection temporarily. They provide several tools for monitoring presence and synchronizing local state with server state. Because of that, it will be great to cache the data instead of returning error users get disconnected.
Describe the solution you'd like
Enable offline cache for the database data as described here.
Scope
| Capability | Priority |
|---|---|
| Enable Offline Cache | Must |
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
This release v9 of Firebase introduces the new modular API, which enables tree-shaking, bundle size reduction, and other benefits. However v9 has a redesigned API, so it is expected that we will need to make some changes to upgrade it. For more information about how to migrate to v9 of Firebase, please follow the following link here.
Scope
| Capability | Priority |
|---|---|
Migrate firebase Dependency to v9 |
Could |
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
Further using skeleton screen with progressive loading is thought of benefit for the user. In progressive loading individual element becomes visible as soon as it is loaded, it helps in displaying the content that is exactly loaded and what is yet to be loaded.
Describe the solution you'd like
Implement skeleton structures.
Scope
| Capability | Priority |
|---|---|
| Implement skeleton structures. | Should |
Desktop (please complete the following information):
Describe the bug
When comes to the app bundle size, I think it was too big for a simple app which has ~170mb bundle size.
To Reproduce
Steps to reproduce the behavior:
yarn build:electronExpected behavior
App should be minimized if possible.
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
Their main purpose is to run continually and listen to requests, and then serve back content depending on the type of request. One type of content that a server might provide is dynamic assets.
Describe the solution you'd like
Serves content dynamically via server.
Scope
| Capability | Priority |
|---|---|
| Serves content dynamically via server | Must |
Desktop (please complete the following information):
Describe the bug
In local development, react will automatically reload its files when any changes were made and the files are saved. However, after the auto reloading, the following error message will be thrown:
Uncaught FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
at initializeApp (firebaseNamespaceCore.ts:153)
at Object.push../node_modules/@firebase/app/dist/index.esm.js.firebase$1.initializeApp (index.ts:66)
at home.component.tsx:23
at invokePassiveEffectCreate (react-dom.development.js:23487)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at flushPassiveEffectsImpl (react-dom.development.js:23574)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at flushPassiveEffects (react-dom.development.js:23447)
at react-dom.development.js:23324
at workLoop (scheduler.development.js:417)
at flushWork (scheduler.development.js:390)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)To Reproduce
Steps to reproduce the behavior:
Expected behavior
No error was thrown.
Screenshots
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
Although the data are fetched from server, however it will affect the UX due to displaying the same context of playlist on every reload.
Describe the solution you'd like
Randomize the playlist on every reload.
Scope
| Capability | Priority |
|---|---|
| Randomize the playlist on every reload | Should |
Desktop (please complete the following information):
Describe the bug
Based on CVE-2021-32803, tar dependency version is vulnerable to Arbitrary File Overwrite. This issue only affects tar <4.4.2, it would be great to update the dependency to a more recent version to prevent this.
Is your feature request related to a problem? Please describe.
Most apps allow users to search app content. For example, you may want to search for posts containing a certain word or notes you've written about a specific topic. However Firebase doesn't support native indexing or search for text fields in documents. Additionally, downloading an entire collection to search for fields client-side isn't practical.
Describe alternatives you've considered
To enable full text search of for Firebase data, as recommended by Firebase, use a dedicated third-party search service. These services provide advanced indexing and search capabilities far beyond what any simple database query can offer.
Scope
| Capability | Priority |
|---|---|
| Use Algolia as third party service | Could |
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
Till now, the skip and previous buttons are still unimplemented, which will be difficult for users to change from one music to another.
Describe the solution you'd like
Implement Skip and Previous Buttons for Music.
Scope
| Capability | Priority |
|---|---|
| Implement Skip and Previous Buttons for Music | Must |
Desktop (please complete the following information):
Describe the bug
If you click the beta version button of the beta version webpage(https://next--lofi-players.netlify.app/), it redirects the user to an unknown page(https://next--next--lofi-players.netlify.app/).
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Erm, just disable the button or change it to redirect user to the stable version site
Desktop (please complete the following information):
Describe the bug
When clicking the side bar area which has no child element will return error in the console with the following message:
Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')
at onClick (7547eacd0da2d316ddf37e515cf466cf17ef4608.js:1)
at Object.qe (7547eacd0da2d316ddf37e515cf466cf17ef4608.js:1)
at Ge (7547eacd0da2d316ddf37e515cf466cf17ef4608.js:1)
at 7547eacd0da2d316ddf37e515cf466cf17ef4608.js:1
at Cr (7547eacd0da2d316ddf37e515cf466cf17ef4608.js:1)
at xr (7547eacd0da2d316ddf37e515cf466cf17ef4608.js:1)
at 7547eacd0da2d316ddf37e515cf466cf17ef4608.js:1
at Le (7547eacd0da2d316ddf37e515cf466cf17ef4608.js:1)
at 7547eacd0da2d316ddf37e515cf466cf17ef4608.js:1
at Nr (7547eacd0da2d316ddf37e515cf466cf17ef4608.js:1)
To Reproduce
Steps to reproduce the behavior:
Expected behavior
No error was returned from console.
Screenshots
Desktop (please complete the following information):
Describe the bug
Card feature doesn't seem to be responsive in device width between 701px x 609px to 860px x 609px. Height of the card in the grid aren't same and some doesn't have the square size (a x a).
To Reproduce
Steps to reproduce the behavior:
701px x 609px to 860px x 609px.Expected behavior
Height of the card in the grid must have the exact size and all images must have the square size (a x a).
Screenshots
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
When I had low traffic, the website just not functioning, and after opening the devtool, it showed up that there's an error because of low traffic, so why not just give the user a notification
Describe the solution you'd like
A popup perhaps, saying that the user's traffic is low.
Desktop (please complete the following information):
Describe the bug
It seems like there is a missing padding on volume slider which cause it looks odd in progress bar of the volume
To Reproduce
Steps to reproduce the behavior:
Expected behavior
There should be a padding or space between the duration indicator and progress bar.
Screenshots
Desktop (please complete the following information):
Describe the bug
On the beta page, I notice that the active property on the tab is missing / no effect.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The active property should appear on active tab.
Screenshots
Saw:
Expected:
Desktop (please complete the following information):
Scope
| Capability | Priority |
|---|---|
Add Privacy.md |
Must |
Desktop (please complete the following information):
Describe the bug
Missing active property when SVG inside tab is clicked.
To Reproduce
Steps to reproduce the behavior:
svg on any tabsExpected behavior
Tab must be set as active when any children elements inside the tab are clicked.
Screenshots
Desktop (please complete the following information):
Scope
| Capability | Priority |
|---|---|
| Add Info Section which Describes More About the App | Could |
Desktop (please complete the following information):
Describe the bug
While the search bar located in the search tab is completed with autocomplete: true, the suggestion context still appears while users scroll down.
To Reproduce
Steps to reproduce the behavior:
a keywordExpected behavior
The suggestion context shouldn't have a fixed position or simply set autocomplete to off.
Screenshots
Desktop (please complete the following information):
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.