ODe - Music Cards from YTMusic

DEMO IS AVAILABLE!!!
https://ode-alpha.vercel.app

I hosted it using Vercel (they're very fast), try it now!
Wanna watch the demo??? https://www.youtube.com/watch?v=yz4N4c0Sx0U

(Update 15)
YOU CAN NOW CREATE YOUR OWN CARDS! (Web2 vibe!)
Introducing: CardCrafter

In this update, I’ve implemented the Card Creation session. More details in the video!

Features:
– A beautiful and highly functional Card Creation section
(It’s packed with features--go check them out in the video!)

(Update14)
THE BEST UPDATE EVER!!!
Now featuring a beautiful Card Preview... and yes, you can fold it if you want. Satisfying animations? mmmm… yes please!

Features:
-- A brand-new Music Visualizer
-- The Antenna now shows when the music is buffering
-- Card Preview Section, See your card in style!
---- You can switch songs directly in the preview
---- Each card gets a unique color (cool, right?)

BUG FIX: Fixed the issue where the next song wouldn’t play automatically

NEXT: Implementing the ultimate CardCrafter!, be ready to create your own .card files!

Stay Tuned! :)

(Update13)
I Created the card preview thing using Figma. It's cool isn't it? nothing much!

(Update12)
The CD Plate is now working! you can insert your .card files (yes, I literally made a file extension) into the player and play them right away!
Let’s get our favorite music into .card files soon! (I promise it’ll take less than 1 MB of storage—even for 100 songs!) :yay:
-- The Card Inserter now working
-- The next and previous button had a bug and fixed it
-- The Signal antenna is under construction

Next up: I’m going to add a Card Crafting section inside the app, where you can create and download your own .card files. stay tuned!

(Update11)
The Next and Previous buttons are finally working!!! it was a total headache to implement them — the whole player almost broke in the process, lol

(Update10)
The UI is now more polished! Everything looks smoother and more realistic.
New Additions:
–- The display now has a slight glow
–- Buttons have a premium look (no more cheap-looking ones!)
–- The radio signal now glows
–- The card inserting plate looks much smoother

Next: I’m going to add a feature where users can see the songs they have, along with skip and previous button functionality.

(Update9)
A small but exciting update: I’ve just added a CD drive inspired file (call it cards!!) dropping interface, along with an antenna that shows internet status and buffering. Cool, huh?

(Update8)
An overall UI Improvement!

-- Added better icons for Play Button (Buffering and stuff)
-- Made the Play Button Dynamic (when paused by the OS)

-- Aligned the skip buttons

-- Made the Display better and added timestamps to it.

(Update7)
This is a major update! The UI Looks more RETRO! (you'll love it)
In last update, I spent hours working to get the music progress of youtube iframe.
Now, i got it! it's working like a charm!
-- Added interactive music progress bar
-- added a retro display
-- added 10s skip buttons
-- killed the volume bar and its ball (ugly af!)
-- made a retro red volume knob

(Update6)
Ye, it's been almost 4 hours. I can't get this Youtube Iframe Player state to work... I'm dying!!! :heaviersob:
I am pushing this update just because it's been 4 hours...

(Update5)
GUYS!! The Youtube Playback is working! You know what that means? We're very close to our goal!! Vamos!!!
Get ready to pack your tunes to a card!

(Update4)
Added an amazing Volume bar, In the next update i will make it draggable.
I did a lot of math and played with translate property. And it was a mess, tommorow, i will refactor the code and implement the draggable behavior of the White Volume Ball

(Update3)
Made an amazing Button interaction and a very modular React Button component, styled with tailwind. The Design is going to be inspired by Retro Apple neomorphism. :)

(Update2)
Added an amazing player component with buttons in React. I used Lucide React Icons for this.

(Update1)
I created the Logo, The Banner Image, and a bit of UI in Figma