Youtube audio player

My lovely Spotify has gone from Russia and grab playlist itself.
So I decided to make my own player app that can convert youtube music videos to audio tracks that I can listen to! 🥰

To Do List

Interface functionality:

• play tracks
• skip tracks
• volume changer (drag n drop desktop and mute on mobile)
• autoplay next track after ending of a current track
• progressbar
• drag n drop rewinding track (desktop via mouse events)
• drag n drop rewinding track (mobile via touch API)
• loop track button
• random order button

Playlist functionality:

• input for youtube videos links
• video to audio converter
• playlist storage (localStorage or Firebase)

Styles:

• good-looking styles
• cross-browser and adaptive layouts

Bugs to solve:

• Safari block playing after skip track (but autoplay policy error is instead but with no valuent effect)
• progressbar freezes and may get left >100% and fly beyond the borders of its block
• prevent the ability of pushing skip track buttons from uncountable pushing after pushing to keep better UX

Dependencies

• ESlint and airbnb style-guide
• SASS and CSS Modules
• classnames for classes
• Redux for state management

Libs

• fontawesome for player icons
• classnames
• ytdl-core for video to audio converting (backend)

References

• Figma layout 1
• Figma layout 2
• Spotify UI Kit

You can run this project locally:

• clone branch with git clone [email protected]:proehavshiy/movies-explorer-frontend.git
• npm run start - run the project
• npm run build - build final version
• npm run lint - check linter errors
• npm run deploy - build and deploy