Skip to content

feat: Link local MP3 files to meditation cards with Coming Soon overlay for unassigned cards#47

Merged
JustinhSE merged 2 commits intomainfrom
copilot/add-audio-to-meditations
Feb 25, 2026
Merged

feat: Link local MP3 files to meditation cards with Coming Soon overlay for unassigned cards#47
JustinhSE merged 2 commits intomainfrom
copilot/add-audio-to-meditations

Conversation

Copy link
Contributor

Copilot AI commented Feb 25, 2026

The 4 uploaded MP3 files in src/meditations/ were never wired up — all cards used unreliable external CDN URLs. This replaces those with the local assets for the 4 cards that have audio, and adds a blurred "Coming Soon" overlay to the remaining 8 cards.

Audio assignment

Card File
Urge Surfing piano-meditation.mp3
Morning Clarity calm-work.mp3
Body Scan For Relaxation ambient.mp3
Before Sleep Relaxation relaxing-breathmusic.mp3

Changes

  • vite-env.d.ts — added declare module '*.mp3' for TypeScript to accept MP3 static asset imports
  • Meditations.tsx — imports the 4 local MP3s via Vite asset imports; assigns them to the above cards; adds comingSoon: true to IDs 4, 5, 7–12
  • MeditationCard.tsx / BreathingExerciseCard.tsx — new comingSoon?: boolean prop; when true, blurs the card and renders a non-interactive "🔒 Coming Soon" badge overlay with aria-hidden on the underlying card
// comingSoon cards: card is blurred + non-interactive, overlay badge floats on top
<div className="relative">
  <Card className={cn(..., comingSoon && "blur-sm pointer-events-none select-none")} aria-hidden={comingSoon || undefined}>
    ...
  </Card>
  {comingSoon && (
    <div className="absolute inset-0 flex items-center justify-center z-10" role="status" aria-label="Coming soon">
      <Badge>🔒 Coming Soon</Badge>
    </div>
  )}
</div>
Original prompt

This section details on the original issue you should resolve

<issue_title>feat: Add audio to meditations 🎧</issue_title>
<issue_description>

Overview

Enhance the meditation functionality by adding audio playback support. Meditations are currently displayed as cards grouped by categories, with their data stored directly in the code (e.g., as a local array or object). This enhancement will allow users to listen to guided audio for each meditation.

  • Meditation Model and UI: Located in src/pages/Meditations.tsx.

Update:
src/meditations, we want to have the audio tab now functioning. We are focusing on the meditation section of the audio tab using the uploaded meditations. Link the mp3 files to the meditations so the playback, start, end and pause buttons all work holistically. For any cards not used, have a blurred coming soon sign on them. </issue_description>

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

…ed cards

Co-authored-by: JustinhSE <84724234+JustinhSE@users.noreply.github.com>
Copilot AI changed the title [WIP] Add audio playback support to meditations feat: Link local MP3 files to meditation cards with Coming Soon overlay for unassigned cards Feb 25, 2026
@JustinhSE JustinhSE self-requested a review February 25, 2026 21:47
@JustinhSE JustinhSE marked this pull request as ready for review February 25, 2026 21:48
@JustinhSE JustinhSE merged commit b9ee614 into main Feb 25, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Add audio to meditations 🎧

2 participants