krr0ption / musica

Personal open source music player spotify alternative.

About me

• Freelancer
• Full-stack developer

Projects

• Marzneshin
• Goran

Open Source Contribution

• Well, we will see

Contacts

• Website
• [email protected]

musica's Issues

Develop backend APIs to fetch user-specific music, album, and playlist data.

[FEAT] Music Player Progress Bar update as the music plays

[FEAT] Music Player Progress Bar update as the music plays

Summary:
The Music Player Progress Bar needs an update to reflect real-time progress as the music plays.

As a music enthusiast, I want the music player progress bar to dynamically update as the music plays, providing me with a visual representation of the current playback position. This enhances the user experience, making it easier for me to track the progress of the song and navigate through different parts effortlessly.

Acceptance Criteria:

1. The Music Player Progress Bar visually updates in real-time according to the progress of the playing music.
2. The update is smooth and reflects the accurate position of the playback.
3. The progress bar should include relevant information such as elapsed time and total duration.
4. Users can interact with the progress bar to navigate to different parts of the song by clicking on specific positions.

Additional Details:

UI Specification:

• The progress bar should be prominently displayed and easily visible to the user.
• Include relevant labels for elapsed time and total duration.
• Ensure the progress bar responds to user interactions accurately.

Technical Interface Specification:

• Utilize the music player's API to obtain real-time playback progress.
• Implement a mechanism to update the UI at regular intervals to reflect the progress changes.

System level Specification:

• Ensure the update does not impact the overall performance of the music player.
• Compatibility with various audio file formats and streaming services.

Tasks:

• Implement real-time progress update in the Music Player UI.
• Integrate with the music player API to obtain playback progress.
• Create a mechanism for user interaction with the progress bar.
• Test the feature with various audio sources and file formats.

Quality Assurance

• Unit tests are created/updated to validate the functionality.
• Integration tests are performed to ensure seamless interaction with the Music Player.
• Documentation is updated to reflect the changes made to the Music Player Progress Bar.

Notes

Consideration: Ensure backward compatibility with previous versions of the Music Player.

[BUG] Internal server error: postcss Unexpected token

Internal server error: [postcss] Unexpected token

Error:

[vite] Internal server error: [postcss] Unexpected token (11:4)
  Plugin: vite:css
  File: musica/apps/frontend/src/assets/style.css:undefined:NaN
  15 |    }
  16 |
  17 |    .slider::-webkit-slider-thumb {
     |                 ^
  18 |      -webkit-appearance: none;
  19 |      appearance: none;

[FEAT] User by default should not face the necessity to add lyrics of the music by hand, instead automatically available and grabbed by Musica from internet.

[TASK] Create frontend views for "Musics," "Albums," and "Playlists."

[REFACTOR] Disect the Unit testing file for Musics Module into a more behavioral structure

[REFACTOR] Improve Behavioral Structure of Music Module Unit Tests

Summary:
Refactor the existing unit testing file for the Music Module to enhance its behavioral structure for better organization and readability. Disect it into smaller files.

Tasks:

1. Analyze current unit testing file.
2. Identify behavioral aspects for grouping tests.
3. Reorganize tests based on behavioral context.
4. Update documentation to reflect changes.

Quality Assurance:

• Review and confirm the clarity of the updated file.
• Ensure each test focuses on specific behaviors.
• Verify no regression in test coverage.

Notes

• Maintain compatibility with existing testing tools.
• Align with the overall testing strategy for the project.

[FEAT] Integrate Storybook into Frontend

[FEATURE] Integrate Storybook into Frontend

Summary:
As a developer, I want to integrate Storybook into the frontend of the project to facilitate better component development, testing, and documentation.

Acceptance Criteria:

1. Storybook should be integrated as a development dependency.
2. A basic setup should include main configuration files.
3. At least one component should be added to Storybook for demonstration.
4. Documentation should be updated to guide developers on using Storybook.

Additional Details:

Technical Interface Specification:

• Use the latest stable version of Storybook.
• Ensure compatibility with existing frontend tools and libraries.
• Migrate components to a shared library
• Beside stories, write unit test for each component

Tasks:

• #28
• #29
• #30
• #31

Notes

• Collaborate with the frontend development team for any specific considerations.
• Consider adding additional Storybook addons if deemed beneficial for the project.

Logo Design

[REFACTOR] Use Patch instead of Post for document minor manipulation more RESTful standard practice

Example

Suggested change

 - @Post(':id/cover/upload')
 + @Patch(':id/cover')

Related links

• #16 (comment)

[FEAT] User wants to be able to create and add new musics to the Musica through a form by clicking a [ + ] add button.

User Story/Feature Description

Summary:
Just below the sidebar there is a button where user click and a new form pop up, which enables the user to add new music with related information.

Tasks:

• Drop down component
• Search field component
• Form widget
• Converting the widgets and components to a library in nx.
• Caching the files initally for Redux instead of retrieving them back from the server after the creation.

Quality Assurance

• Unit tests are created/updated.
• Integration tests (if applicable) are performed.
• Documentation (if applicable) is updated.

Details

Additional Details:

UI Specification:

• The form must not fill all of the screen and the background must be blurred.
• The add button attracts attention convey its role as the user sees it.
• The playlist, album, are selected through a drop down component while the artist throw a search field component.

Technical Interface Specification:

• OPTIM When the application was successfully created, add the music cover and file to the Redux locally instead of the retrieving it from the server.

Related Links/Dependencies:

• This issue has to be completed before the #14

[QA] Performance Testing and consider using CDN

Performance Testing and Consider Using CDN or Any Server-Side Caching Mechanism After Measuring the Performance

Summary:
As a website visitor, I want faster loading times for web pages, so that I can have a seamless and efficient browsing experience.

Acceptance Criteria:

1. The average page load time should be reduced by at least 20%.
2. Performance tests must be conducted on various devices and network conditions.
3. CDN integration or server-side caching should be implemented based on performance test results.

Additional Details:

UI Specification:

• No specific UI changes are expected. Focus is on backend optimization.

Technical Interface Specification:

• Integrate performance testing tools such as Lighthouse or Google PageSpeed Insights into the continuous integration pipeline.
• CDN integration or server-side caching mechanisms should be compatible with the existing web infrastructure.

System Level Specification:

• Performance tests should cover both static and dynamic content.
• CDN or caching mechanisms should be configured to serve static assets efficiently.

Tasks:

• Conduct baseline performance tests on the current web application.
• Identify bottlenecks and areas for improvement based on test results.
• Explore and implement CDN integration options.
• Explore and implement server-side caching mechanisms.
• Run post-implementation performance tests to validate improvements.

Related Links/Dependencies:

• Originally posted by @code-by-sia in #16 (comment)

Quality Assurance

• Unit tests are created/updated to ensure new implementations do not introduce regressions.
• Integration tests (if applicable) are performed to validate the overall system functionality.
• Documentation (if applicable) is updated to reflect any changes related to CDN integration or caching mechanisms.

Notes

• Consideration should be given to the choice of CDN provider and its impact on global users.
• Collaborate with DevOps or infrastructure teams for seamless integration.

[FEAT] User want's to see the lyric of the music side by side while playing the music

Setup CI/CD for API

[TASK] Update documentation with instructions for using Storybook.

[FEAT] User must be able to see the music author profile and find the published albums, playlists, and musics by that artist

[FEAT] User want's to access it's musics, album, and playlists from right tabbed sidebar and choose to what to play.

User want's to access it's musics, album, and playlists from right tabbed sidebar and choose to what to play

Summary:
As a user, I want access to my music library, albums, and playlists via the right tabbed sidebar, allowing me to select what I want to play.

Acceptance Criteria:

1. The right tabbed sidebar contains clear and accessible options for "Musics," "Albums," and "Playlists."
2. Upon selecting each option, the respective content (music list, album details, playlist tracks) is displayed in a user-friendly manner.
3. Users can easily navigate between "Musics," "Albums," and "Playlists," and select specific items to play or view detailed information.

Additional Details:

UI Specification:

• Implement a right tabbed sidebar component.
• Design an intuitive interface for displaying content upon selection of each option.
• Include interactive elements to play or view details of the chosen items.

Technical Interface Specification:

• Develop backend endpoints/APIs to fetch user-specific music, album, and playlist data.
• Integrate frontend components with backend services to retrieve and display the requested content.
• Ensure smooth interaction between the sidebar and content display components.

Tasks:

• #40
• #41
• #42
• #43

Quality Assurance

• Unit tests are created/updated to cover frontend and backend functionalities.
• Integration tests (if applicable) are performed to validate the interaction between frontend and backend.
• Documentation (if applicable) is updated to reflect changes and provide guidance for users.

[TASK] Implement the right tabbed sidebar component.

Migrating to Mongoose from Prisma

[TASK] Install and configure Storybook as a development dependency.

[FEAT] Add Sonar Qube

Sonar Cloud - Continuous Code Inspection

• Add the Sonar Cloud to CI workflow.

[REFACTOR] Return Message Key instead of raw text message in API response

Return Message Key instead of raw text message in API response

Summary:

Instead of return raw text message such as

class Controller {
    create(){
        return {
           success: true,
           message: "Create object was sucessful ..."
        }
    }
}

We can utilize messageKey which can be documented, generalized and internationalized.

class Controller {
    create(){
        return {
           success: true,
           messageKey: "CREATE_OBJECT"
        }
    }
}

Tasks:

• Central document as single source of truth.
• Collect a list of messages by following CQRS design pattern
• Create document complication and deployment for documentation app
• Provide the means of internalization for translators

Related Links/Dependencies:

• [Link to related issues, pull requests, or documents]
• [Any dependencies that need to be resolved before starting this]

Quality Assurance

• Documentation (if applicable) is updated.

[FEAT] Show a default music logo and loading or waiting while no music is selected to be played

Summary:
Introduce a default music logo and loading indicator to be displayed when no specific music is selected for playback.

As a user exploring the music player interface, I want to see a default music logo and a loading/waiting indicator when no music is selected. This provides visual feedback, indicating the absence of selected music and assures me that the application is ready for interaction.

Acceptance Criteria:

1. A default music logo is displayed when no specific music is selected.
2. A loading or waiting indicator is shown to indicate the system's readiness for user interaction.
3. The default music logo and loading indicator disappear upon selecting and loading a music track.

Additional Details:

UI Specification:

• The default music logo should be visually appealing and identifiable.
• The loading indicator should be clear and unobtrusive.
• Ensure smooth transition between the default music logo, loading state, and actual music playback.

Technical Interface Specification:

• Implement logic to detect the absence of selected music and trigger the display of default visuals.
• Utilize appropriate loading mechanisms to maintain a responsive user experience.

  return (
    <div className="flex flex-col justify-between items-center rounded-xl sm:w-2/4 shadow-glass h-[30rem] bg-primary md:w-[390px]">
        // TODO: [FEAT] Show a default music logo and loading
        // or waiting while no music is selected to be played #33
        // TEST: The scenario where user selected no music so
        // it should face a loading state.
      <MusicPlayerCover src={playingMusic?.coverImageFileName} />
      {playingMusic ? (
        <MusicPlayerTitle
          name={playingMusic.name}
          artists={playingMusic.artists}
        />
      ) : (
        <MusicPlayerTitle
          name="Kill me right now"
          artists={['System of the Dawn']}
        />
      )}

System level Specification:

• Minimize resource usage during the loading state to ensure optimal system performance.
• Compatibility with various screen sizes and resolutions.

Tasks:

• Design and implement the default music logo component.
• Integrate a loading or waiting indicator into the user interface.
• Implement logic to trigger the default visuals when no music is selected.

Quality Assurance

• Unit tests are created/updated to validate the display of default visuals.
• Integration tests are performed to ensure smooth transitions and responsiveness.
• Documentation is updated to reflect the changes made to the Music Player UI.

Notes

Consideration: User feedback on the visual appeal of the default music logo should be gathered during testing.

Readme documentation

[TASK] Write unit test for each component and widget

[DEV] Installer and setup script

Installer and setup script

Summary:
A software developer or someone who want's to setup this application, I want to have a script to automate setting up the app, configuring (env variables), and bootstrapping with different methods (docker, cloud, native, ...), so I have an easy time and standard steps of procedures while trying run this application.

Acceptance Criteria:

1. Interactive TUI and CLI interface
2. Configure the .env file
3. Provide scripts to start, stop, restart, and backup the application.

Additional Details:

UX Specification:

• Use inquirer to provide a smooth and interactive experience for the developer

Technical Interface Specification:

• Use nestjs comandline application API and inquirer to interact with user.
• Provide range of options for deployment and execution

Tasks:

• Designing the steps of script
• Developing the TUI interface using Inquirer
• Developing the CLI interface
• Module for setting up the application for native running
• Module for setting up the application for docker container running
• Deployment automation
• Backup automation using the provided API by apps/api

Quality Assurance

• Manual Testing for features
• Documentation for usage of the script and it's options

[BUG] Media elements such as <audio> and <video> must have a <track> for captions.

User Story/Feature Description

Captions in HTML media elements are text versions of the audio content, synchronized with the video. They are essential for individuals who are deaf or hard of hearing, as they provide a text alternative for the audio information. They can also be beneficial for individuals who are not native speakers of the language of the video, or for situations where the audio cannot be heard.

In the context of accessibility, providing captions for media elements is a requirement under the Web Content Accessibility Guidelines (WCAG). Without captions, you are excluding a portion of your audience who rely on them to understand the content of your media.

Noncompliant code example

<audio {...props} />; // Noncompliant
<video {...props} />; // Noncompliant

Compliant solution

If captions are missing from your media elements, you can fix this by adding a element with the kind="captions" attribute inside your or

<audio><track kind="captions" {...props} /></audio>
<video><track kind="captions" {...props} /></video>
<video muted {...props} ></video>

[FEAT] User must be able to get, update, and add music cover as they add a new music.

Feature Description

Summary:
User will be able to see the cover of the musics, and while adding new music he can provide cover if in case s/he wanted to change the music cover.

Acceptance Criteria:

1. The music cover in music player must change while playing another music.
2. The music player should use a default music cover if the music lack cover.
3. The music cover must stay constant as other the properties the music object unless the user aim to change the music properties.

Details

Additional Details:

UI Specification:

• UI components are already built
• Redux frontend storage lib must be updated to support music cover as state for music

Technical Interface Specification:

• POST /music/ must be handle another file in case it is provided as cover.
• New file storage directory must be created and handled
• A new endpoint for retrieving the music cover file.

Tasks:

• POST /music/ must be handle another file in case it is provided as cover.
• New file storage directory must be created and handled
• A new endpoint for retrieving the music cover file.
• Redux frontend storage lib must be updated to support music cover as state for music

Related Links/Dependencies:

• #14
  • Consider that later the covers must be retrievable by other component such as tabbed sidebar while preseting the list view of musics.
• #15
  • User the form will utilize the create endpoint to add music cover.

Quality Assurance

• Unit tests are created/updated.
• Integration tests (if applicable) are performed.
• API end points are documented

Unit Test over the network with real DB for Music API

[REFACTOR] Extract the whole file management into a separate module

Refactoring File management and Storage management

• Using an entirely independent to module to manage file storage.
• This should allow all other modules to use single module to mitigate their asset management

[TASK] Redux: Integrate frontend with backend services to display the retrieved content.

[TASK] Migrate the components, widgets, etc to a shared UI library