shadcn.io is not affiliated with official shadcn/ui
Podcast Subscription Music Block for Svelte
A podcast subscriptions manager with six show rows, each with Auto-download and Notify switches, a Keep-latest menu and Unsubscribe with Undo, over a storage band that works out the space used against a 3 GB allowance.
Installation
Overview
Show listeners what their shows cost in space, with this podcast subscriptions manager for Svelte with Ark UI. It opens a hairline frame with a plus mark on each corner and a storage band: the megabytes the kept episodes take, drawn on a Progress bar against a 3 GB allowance and said in words, with "Over by 0.4 GB: lower a Keep value" when they do not fit. Under it six ruled rows each hold a drawn cover, the show with how many episodes are new, an Auto-download Switch, a Keep-latest menu of 3, 5 or 10 episodes, a Notify switch and a ghost Unsubscribe button that puts the row away in place with an Undo. Space is worked out from the number kept times the show's typed average episode size, only for shows that auto-download, and the queue count in the header follows the shows you still have. On a phone the controls drop under the name in two rows. It's built from Switch, Progress, Native Select, Button and Guides, with a CSS entrance only. For podcast apps, offline libraries and any device with a storage budget.
FAQ
How do I fill it with my shows?
Edit SHOWS (an id, a title, a drawn cover, the typical episode size in megabytes and how many episodes are new) and START (each show's starting Auto-download, Keep, Notify state). CAPACITY_MB is the allowance. The storage band, the free space and the queue count are all worked out from those, so nothing is typed twice.
How is the space worked out?
For every show that is not removed and has Auto-download on, the number of episodes it keeps is multiplied by its average size, and the products are added up. Shows with Auto-download off stream and take nothing. The total is shown in gigabytes to one decimal, the bar is capped at full, and the line under it says how much is free, or by how much it is over and what to do about it.
What does Unsubscribe do, and can I take it back?
It swaps the row, in place, for "removed in this demo" with an Undo button, so the list does not jump and focus is not lost. The removed show stops counting towards the storage and the queue, and Undo brings it back with its switches as they were. Nothing is sent or saved.
Does it really download or notify?
No. Every control is local state and the status line says so. To make it real, send each switch and menu change to your subscription API, download with your own background job and read the sizes from the feed's enclosures instead of the typed averages.
How do I use it from the keyboard?
Tab runs each row in order: the two switches and the Keep menu (arrow keys change the value), then Unsubscribe. Every control is named with its show, such as "Auto-download Pocket Atlas", and a polite status line announces each change, including when the storage goes over.