feat: transformation en application Radyobòkaz Player (WIP sécurisé)
Fork de la librairie headless svelte-podcast transformé en lecteur : radio Funkwhale mizik.o-k-i.net (~2000 titres), page démo RSS Syntax.fm, file de lecture, préférences et progression persistées. État avant refonte playbook OKI (bugs connus : volume inerte, bouton démo RSS cassé en navigation client, cibles tactiles mobiles).
This commit is contained in:
sucupira
@@ -1,83 +1,73 @@
|
||||
<!--
|
||||
41.9 kB
|
||||
# Radyobòkaz Player
|
||||
|
||||
First make this easier to understand. Next convert comments to JSDOC comments, then add additional JSDOC comments where needed. JSDOC comments should not include types that conflict with existing Typescript types. Finally make sure variables are snake_case and not cammalCase, and that types are in PascalCase.
|
||||
Lecteur audio web pour la radio **Radyobòkaz**, hébergée sur l'instance Funkwhale
|
||||
[mizik.o-k-i.net](https://mizik.o-k-i.net/library/radios/7) (~2000 titres).
|
||||
|
||||
Convert typescrtipt types to JSDOC types, object types should be extracted into an explicit typedef with descriptions for each property. Add JSDOC comments to explain anything that is exported. Make sure variables are snake_case and not cammalCase.
|
||||
-->
|
||||
Construit sur une version modifiée de [svelte-podcast](https://github.com/OllieJT/svelte-podcast)
|
||||
(librairie headless de lecteur audio, voir `src/lib`).
|
||||
|
||||
# Svelte Podcast
|
||||
## Utilitaires RSS (SSR)
|
||||
|
||||
Svelte-Podcast streamlines the creation of custom audio players and simplifies state management in Svelte apps.
|
||||
La librairie inclut des utilitaires pour consommer des flux RSS de podcasts,
|
||||
compatibles SSR (pas de `DOMParser`, parsing via `fast-xml-parser`) :
|
||||
|
||||
| Version | License | Status |
|
||||
| :-------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: |
|
||||
| [](https://www.npmjs.com/package/svelte-podcast) | [](https://www.npmjs.com/package/svelte-podcast) |  |
|
||||
```ts
|
||||
// src/routes/podcast/+page.ts
|
||||
import { fetch_podcast_feed } from '$lib/rss';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
## What's inside?
|
||||
|
||||
### Build custom Audio Player UI
|
||||
|
||||
Simplify the creation of custom audio players with a set of headless components that keep out of your way and take care of core functionality.
|
||||
|
||||
### Easily manage Audio State
|
||||
|
||||
Loading, controlling, and keeping track of multiple audio sources is a pain. svelte-podcast abstracts this away and provides a simple interface to manage audio state.
|
||||
|
||||
### Track user preferences
|
||||
|
||||
Users expect a lot from media players. It should remember their preferences like playback speed, and it should remember where they were in an episode even after reloading the page. svelte-podcast takes care of this for you, and provides you with access to extend this with your own database.
|
||||
|
||||
### Features
|
||||
|
||||
- 🔊 Load and play audio files via URL or local files
|
||||
- 🔃 Navigate via client-side routing while audio continues to play
|
||||
- 🎛️ Simpler control over audio playback:
|
||||
- Seek to a specific time
|
||||
- skip forward ﹢ backward
|
||||
- play ﹢ pause
|
||||
- mute ﹢ unmute
|
||||
- 🛟 Save and load a users progress for each episode in localStorage
|
||||
- 💾 Save and load a users preferences (like playback speed) in localStorage
|
||||
- ﹢ volume
|
||||
- ﹢ playback speed
|
||||
- 🖼️ Inject episode metadata into the audio store for ea
|
||||
|
||||
**Roadmap**
|
||||
In no particular order, here are some of the things I'm confident will be added to this library:
|
||||
|
||||
- [ ] Podcast player component utilities
|
||||
- [ ] Pre-built player components
|
||||
- [ ] RSS Feed parsing
|
||||
- [ ] Looping segments of an episode
|
||||
|
||||
[And more ideas being discussed](https://github.com/OllieJT/svelte-podcast/labels/feature)
|
||||
|
||||
## Docs
|
||||
|
||||
> **Warning**
|
||||
> We're getting close to v1, but this project is stil pre v1.0.0. Braking changes are still possible.
|
||||
|
||||
> **Note**
|
||||
> Contributions are welcome but I do not plan to provide guides for contributing until the project is more stable.
|
||||
|
||||
#### Install
|
||||
|
||||
```bash
|
||||
# with npm
|
||||
npm install svelte-podcast@latest
|
||||
|
||||
# with yarn
|
||||
yarn add svelte-podcast@latest
|
||||
|
||||
# with pnpm
|
||||
pnpm add svelte-podcast@latest
|
||||
export const load: PageLoad = async ({ fetch }) => ({
|
||||
// passer le `fetch` de SvelteKit : SSR, cache et hydration
|
||||
feed: await fetch_podcast_feed('https://feed.syntax.fm/rss', fetch),
|
||||
});
|
||||
```
|
||||
|
||||
You can find docs and guides for getting started on [svelte-podcast.com](https://svelte-podcast.com/)
|
||||
- `fetch_podcast_feed(url, fetcher?)` — télécharge et parse un flux (RSS 2.0 + tags iTunes)
|
||||
- `parse_podcast_feed(xml)` — parse une chaîne XML déjà récupérée
|
||||
- Types exportés : `PodcastFeed`, `PodcastEpisode` (titre, guid, date ISO, durée en
|
||||
secondes, enclosure, pochette, numéros d'épisode/saison, explicit…)
|
||||
|
||||
| Resource | Link |
|
||||
| ----------------------------------------------------------------- | ------------------------------------------------------------- |
|
||||
| Provides guidance on Installation, Audio Sources, and Type Safety | [Getting Started](https://svelte-podcast.com/getting-started) |
|
||||
| Covers API methods for audio, user preferences, and user progress | [API](https://svelte-podcast.com/api) |
|
||||
| Offers examples of Headless UI, Tailwind, and CSS players | [Examples](https://svelte-podcast.com/examples) |
|
||||
Les durées `itunes:duration` sont acceptées aux formats `3723`, `62:03` et `1:02:03`.
|
||||
Les épisodes sans enclosure audio sont ignorés. Voir la route `/podcast` pour un
|
||||
exemple complet (flux chargé côté serveur, épisodes joués dans le lecteur).
|
||||
|
||||
## Fonctionnalités
|
||||
|
||||
- 📻 **Mode radio aléatoire** : file de lecture infinie de titres piochés au hasard
|
||||
- 🎵 **Écoute à la carte** : liste complète des titres avec recherche (titre, artiste, album)
|
||||
- 🎙️ **Flux RSS de podcasts** : parsing SSR + lecture des épisodes (démo sur `/podcast`)
|
||||
- ⏭️ Passage automatique au titre suivant en fin de piste
|
||||
- 🎛️ Contrôles : lecture/pause, précédent/suivant, volume, mute, seek
|
||||
- 🖼️ Pochette, titre, artiste et album du morceau en cours
|
||||
- 🔃 L'audio continue de jouer lors de la navigation entre pages
|
||||
|
||||
## Développement
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
yarn dev # serveur de dev
|
||||
yarn build # build statique (adapter-static) dans build/
|
||||
yarn run check # svelte-check
|
||||
```
|
||||
|
||||
## Comment ça marche
|
||||
|
||||
L'API publique de Funkwhale est utilisée côté client, sans authentification :
|
||||
|
||||
- `GET /api/v1/radios/radios/7/tracks/?page=N&page_size=50` — liste des titres de la radio
|
||||
- `GET /api/v1/listen/<uuid>/` — flux audio du titre (CORS ouvert, supporte `Range`)
|
||||
|
||||
Structure du code :
|
||||
|
||||
| Fichier | Rôle |
|
||||
| ------------------------------- | ----------------------------------------------------------------- |
|
||||
| `src/lib/` | Librairie svelte-podcast (store audio, composants headless) |
|
||||
| `src/lib/rss.ts` | Utilitaires SSR pour flux RSS de podcasts (parse + fetch) |
|
||||
| `src/radio/funkwhale.ts` | Client de l'API Funkwhale |
|
||||
| `src/radio/playable.ts` | Type `PlayableTrack` (titre jouable, quelle que soit la source) |
|
||||
| `src/radio/radio-store.ts` | File de lecture : mode radio aléatoire / liste, suivant/précédent |
|
||||
| `src/radio/library-store.ts` | Chargement progressif de la liste complète des titres |
|
||||
| `src/radio/radio-player.svelte` | Barre de lecture (pochette, contrôles, progression) |
|
||||
| `src/radio/track-list.svelte` | Liste des titres avec recherche |
|
||||
| `src/routes/+page.svelte` | Page radio Radyobòkaz |
|
||||
| `src/routes/podcast/` | Démo des utilitaires RSS (flux chargé en SSR, épisodes jouables) |
|
||||
|
||||
Reference in New Issue
Block a user