feat(Images & Media): add condensed view for AudioPlayer, AudioRecorder, DocumentScanner, FileManager, RecordButton#153
Merged
Conversation
- Add 9 data-slots to AudioPlayer component (audio-player, play-btn, title, duration, time, progress, waveform, controls, rate) - Add condensed CSS for all 3 variants (inline, compact, waveform) - Scale waveform proportionally with scaleY(0.625) - Add podcast-cover and podcast-header data-slots to PodcastPlayer story - Shrink podcast cover art from 96px to 56px in condensed mode
Deploying ui with
|
| Latest commit: |
0809457
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3c898662.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-condensed-view-image.ui-6d0.pages.dev |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds condensed-density styling hooks and overrides for the AudioPlayer component so it can be consistently rendered in “condensed” mode across its inline, compact, and waveform variants.
Changes:
- Added
data-slothooks across AudioPlayer internals (container, play button, title, time/duration, progress, waveform, controls, rate). - Added condensed-mode CSS overrides for AudioPlayer and for the PodcastPlayer story composition (cover/header).
- Updated the PodcastPlayer story markup to include
data-slothooks used by condensed CSS.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/styles/condensed-view.css | Adds condensed overrides for AudioPlayer + PodcastPlayer story layout. |
| src/components/AudioPlayer/AudioPlayer.tsx | Adds data-slot attributes to AudioPlayer sub-elements to support condensed styling hooks. |
| src/components/AudioPlayer/AudioPlayer.stories.tsx | Adds data-slot hooks for podcast cover/header in the story. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Reduce play button from 1.75rem to 1.25rem with proportional SVG - Add margin-right to prevent play button touching slider thumb
- Use data-variant attribute selectors instead of .p-3/.p-4 classes to avoid cross-matching between compact/waveform size combos - Remove height:auto override on waveform container to preserve loading skeleton visibility before WaveSurfer initializes - Keep progress thumb at 0.75rem (12px) to stay compatible with existing left:calc positioning math
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…book - Scope play button margin-right to compact variant only so it doesn't stack with gap in waveform controls row - Scope podcast-cover/podcast-header selectors to body.sb-show-main since they're Storybook story composition, not library components
- Add 6 data-slots: audio-recorder (container), audio-recorder-waveform, audio-recorder-status, audio-recorder-indicator, audio-recorder-time, audio-recorder-controls - Add condensed CSS: tighter padding/gap, shorter waveform, smaller indicator dot/text, smaller time font, compact control buttons (2rem)
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…nsed sizing - Both waveforms: height 2.5rem (40px) + scaleY(0.5), smaller than sm variant - AudioRecorder: tighter padding (0.375rem), smaller buttons (1.5rem), smaller indicator dot (0.375rem), smaller text (0.5625rem)
garrity-miepub
changed the title
- Add 8 data-slots across 3 files: doc-scanner (container), doc-scanner-header, doc-scanner-dropzone, doc-scanner-dropzone-content, doc-scanner-upload-icon, doc-scanner-preview (grid), doc-scanner-preview-item, doc-scanner-preview-info, doc-scanner-actions - Condensed CSS: tighter padding (0.75rem), shorter dropzone (120px min), smaller upload icon (2.25rem), smaller preview info text, tighter gaps
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Shrink all Text components inside dropzone to 0.75rem - Shrink secondary text (drag hint, format info) to 0.6875rem
- Root: file-manager - Dropzone: file-manager-dropzone, file-manager-dropzone-content, file-manager-upload-icon - Feedback: file-manager-progress, file-manager-error, file-manager-storage - Table: file-manager-table, file-manager-row, file-manager-actions - Empty state: file-manager-empty - Condensed CSS: tighter padding, smaller icons/text, compact table rows
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 out of 8 changed files in this pull request and generated 8 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Replace raw <table> with Table/TableHeader/TableBody/TableRow/TableCell - Replace inline SVG action buttons with FileRowActionMenu (portal-based) - 3-dot menu shows Preview, Download, Delete based on available handlers - Import lucide-react icons: EyeIcon, DownloadIcon, TrashIcon, MoreHorizontalIcon - Conditionally hide Actions column when no handlers provided - Update condensed CSS to target new menu button pattern
- Wrapper: record-button - Trigger: record-button-trigger (1.75rem, down from sm=2.5rem) - Icon: record-button-icon (0.875rem) - Pulse rings: record-button-pulse (×2, animations preserved) - Waveform: record-button-waveform (bar height 0.375rem) - Duration: record-button-duration (0.625rem text) - Transcription label: record-button-transcription (0.625rem text) All 4 animations untouched: animate-ping (pulse rings), animate-waveform (5 staggered bars), animate-spin (processing), transition-all (state changes). All 24 variant×state combos preserved.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Scope compact play-btn margin to [data-slot='audio-player'] root - Fix space-y-1 override: gap (no-op) → child margin-top - Fix DocumentScanner text selectors: [data-slot='text'] → p elements - Run prettier on FileManager, RecordButton, condensed-view.css
garrity-miepub
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add height: 2rem override for table header (TableHead sets h-12) - Reposition portal menu on scroll/resize to prevent desync - Use filename in aria-label instead of row index - Remove unused rowIndex prop from FileRowActionMenu
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
feat(Images & Media): add condensed view for all components
Adds
data-slotattributes and condensed CSS overrides for all 5 Images & Media components:Components
data-variantscaleY(0.5)+ 2.5rem cap, progress thumb 0.75remTablecomponent, 3-dotFileRowActionMenu(portal-based), compact table rowsArchitecture
data-slot="component-part"on JSX elements +body.condensed [data-slot='x'] { ... !important; }incondensed-view.cssbody.sb-show-main.condensed<table>→Tablecomponent, inline action SVGs → 3-dot overflow menu