Skip to content

Amar1921/Podcast_lecteur

BranchesTags

Repository files navigation

🎙️ Serigne Sam Mbaye — Podcast Player

Plateforme de podcasts islamiques dédiée aux enseignements de Serigne Sam Mbaye.
Interface moderne, lecture audio avancée, gestion de playlists et authentification sécurisée.

✨ Fonctionnalités

  • 🎧 Lecteur audio complet — lecture, pause, suivant, précédent, shuffle, repeat, vitesse variable
  • 📊 Visualiseur de spectre — animation canvas temps réel synchronisée à l'audio
  • 📋 Playlists personnalisées — créer, modifier, supprimer, ajouter des podcasts
  • ❤️ Favoris — marquer et retrouver ses épisodes préférés
  • 🕐 Historique — reprendre là où vous vous êtes arrêté, persisté en localStorage
  • 🔐 Authentification sécurisée — JWT + refresh automatique + Google OAuth
  • 🛡️ Routes protégées — accès conditionnel selon le rôle (utilisateur / admin)
  • 📱 Responsive — expérience optimisée mobile et desktop
  • 🌙 Dark mode — thème sombre natif

🛠️ Stack technique

Couche Technologies
Framework React 19, Vite 6
UI Material UI 7, Tailwind CSS 4
État Redux Toolkit, Redux Persist
Routing React Router 7
Auth JWT, Google OAuth (@react-oauth/google)
HTTP Axios
Utilitaires Lodash, Day.js, Lucide React
Charts Chart.js, React-Chartjs-2
Fonts Orbitron, Rajdhani (@fontsource)

🎵 Format des données audio

Chaque piste audio retournée par l'API respecte la structure suivante :

{
  "id": 1,
  "title": "Alkhourane1",
  "duree": "3602",
  "duree_format": "01:00:02",
  "views": 16,
  "auteur": "Bay sam mbaye - www.serignesam.com - mbaye@serignesam.com",
  "audioFile": null,
  "audioName": "01 - Alkhourane1.mp3",
  "lieu": null,
  "theme": null
}
Champ Type Description
id number Identifiant unique de la piste
title string Titre de l'enregistrement
duree string Durée en secondes (format brut)
duree_format string Durée formatée HH:mm:ss
views number Nombre d'écoutes
auteur string Auteur avec site et email de contact
audioFile string | null Fichier audio (si upload direct)
audioName string Nom du fichier MP3 sur le serveur
lieu string | null Lieu de l'enregistrement
theme string | null Thème / catégorie de l'épisode

📁 Les fichiers audio sont servis depuis :
{VITE_BASE_URL}/conferences/{audioName}
Exemple : https://api.serignesam.com/conferences/01%20-%20Alkhourane1.mp3

🚀 Démarrage rapide

Prérequis

  • Node.js ≥ 18
  • Yarn ou npm
  • Un backend Symfony en cours d'exécution (API)

Installation

# Cloner le dépôt
git clone https://github.com/ton-user/serigne-sam-mbaye-podcast.git
cd serigne-sam-mbaye-podcast

# Installer les dépendances
yarn install
# ou
npm install

Configuration des variables d'environnement

Copier le fichier d'exemple et remplir les valeurs :

cp .env.example .env.development
# .env.development
VITE_BASE_URL=http://localhost:8000
VITE_GOOGLE_CLIENT_ID=your_google_client_id_here

Lancer en développement

yarn dev

L'application sera disponible sur http://localhost:5173

📦 Scripts disponibles

yarn dev              # Serveur de développement
yarn build            # Build production
yarn build:staging    # Build staging
yarn build:analyze    # Build avec analyse du bundle
yarn preview          # Prévisualiser le build production
yarn preview:staging  # Prévisualiser le build staging

📁 Structure du projet

src/
├── auth/                  # Authentification (login, register, profil)
│   ├── profile/
│   ├── AuthModal.jsx
│   └── router.jsx
├── components/
│   ├── auth/
│   │   ├── AuthInitializer.jsx   # Boot session au démarrage
│   │   └── ProtectedRoute.jsx    # Guard de routes
│   ├── Player/
│   │   ├── AudioEngine.jsx       # Contrôleur audio unique
│   │   ├── MiniPlayer.jsx        # Lecteur flottant (hors page d'accueil)
│   │   ├── musicPlayer.jsx       # Lecteur principal
│   │   ├── SpectrumVisualizer.jsx
│   │   └── paylist/
│   │       ├── playlist.jsx
│   │       ├── TrackList.jsx
│   │       └── ModalAddToPlaylist.jsx
│   ├── ErrorBoundary.jsx         # Capture d'erreurs React
│   ├── about.jsx
│   ├── contact.jsx
│   ├── favoris.jsx
│   ├── HistoryPanel.jsx
│   └── podcast.jsx
├── redux/
│   ├── features/
│   │   ├── auth/
│   │   │   ├── authSlice.js
│   │   │   ├── apiAuth.js
│   │   │   └── googleAuthSlice.js
│   │   ├── podcastSlice.js
│   │   ├── playlistSlice.js
│   │   └── uiSlice.js
│   └── stores.js
├── ui/                    # Composants UI globaux
│   ├── navbar.jsx
│   ├── footer.jsx
│   ├── NotFoundPage.jsx
│   └── PageEnConstruction.jsx
├── utils/
│   └── index.js
├── globalErrorCatcher.js  # Capture pré-React (window.onerror)
├── App.jsx
└── main.jsx

🔐 Variables d'environnement

Créer un fichier .env.example (à commiter, sans valeurs) :

VITE_BASE_URL=
VITE_GOOGLE_CLIENT_ID=

⚠️ Ne jamais commiter .env, .env.development ou .env.production — ils sont dans .gitignore.

🏗️ Architecture audio

L'audio est géré par un composant singleton AudioEngine monté une seule fois dans main.jsx. Il écoute le state Redux et pilote l'élément <audio> natif. Aucun autre composant ne touche directement l'audio.

Redux State (podcastSlice)
        ↕
   AudioEngine.jsx          ← unique, dans main.jsx
        ↕
   <audio> natif            ← un seul élément dans le DOM
        ↕
  MusicPlayer / MiniPlayer  ← UI seulement, dispatch des actions

Résolution de l'URL audio

// utils/index.js
export const getTrackSrc = (track) =>
    encodeURIComponent(track?.audioName ?? "");

// Utilisation dans AudioEngine
const src = `${VITE_BASE_URL}/conferences/${getTrackSrc(currentTrack)}`;
// → https://api.serignesam.com/conferences/01%20-%20Alkhourane1.mp3

🔒 Sécurité de session

  • AuthInitializer monte au démarrage et hydrate Redux depuis le token localStorage sans appel réseau si le token est encore valide
  • Si le token expire dans moins de 8 minutes → revalidation serveur automatique
  • Refresh silencieux toutes les 4 minutes si l'onglet est actif
  • Sync multi-onglet via window.addEventListener("storage")
  • Routes protégées via ProtectedRoute : non connecté → modal login + redirect /

🛣️ Routes

Route Accès Description
/ Public Lecteur principal + liste des podcasts
/about Public Page à propos
/contact Public Page de contact
/themes/* Public Pages thèmes (en construction)
/playlist 🔐 Connecté Playlists personnalisées
/favorites 🔐 Connecté Épisodes favoris
/profile 🔐 Connecté Profil utilisateur
/settings 🔐 Connecté Paramètres
/visite 🔐 Admin Statistiques de visites

🤝 Contribution

Ce projet est à but non lucratif, dédié à la diffusion des enseignements de Serigne Sam Mbaye.

Les contributions sont les bienvenues :

  1. Fork le dépôt
  2. Crée une branche : git checkout -b feature/ma-feature
  3. Commit : git commit -m 'feat: ajout de ma feature'
  4. Push : git push origin feature/ma-feature
  5. Ouvre une Pull Request

📄 Licence

Ce projet est distribué sous licence MIT.
Tous les contenus audio sont la propriété intellectuelle de Serigne Sam Mbaye et/ou de ses ayants droit.
Voir le fichier LICENSE pour plus de détails.

📬 Contact

Plateforme à but non lucratif — Partage de connaissances islamiques

About

Podcast SSM

Resources

Readme

License

View license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages