fix(ux): implement auto-pause audio playback interceptor #531#541
fix(ux): implement auto-pause audio playback interceptor #531#541sanikatavate wants to merge 1 commit into
Conversation
|
Warning Review limit reached
More reviews will be available in 33 minutes and 45 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis PR implements coordinated voice note playback across chat message bubbles. The chat store now tracks which message's audio is currently playing, and MessageBubble components use a ChangesAudio playback coordination
Sequence DiagramsequenceDiagram
participant User
participant Bubble1 as MessageBubble<br/>(message A)
participant Bubble2 as MessageBubble<br/>(message B)
participant Store as useChatStore<br/>(activeAudioId)
User->>Bubble1: Play audio
Bubble1->>Store: setActiveAudioId(messageA_id)
Store-->>Bubble2: activeAudioId changed
Bubble2->>Bubble2: useEffect pauses own audio
Note over Store: activeAudioId = messageA_id
User->>Bubble2: Play audio
Bubble2->>Store: setActiveAudioId(messageB_id)
Store-->>Bubble1: activeAudioId changed
Bubble1->>Bubble1: useEffect pauses own audio
Note over Store: activeAudioId = messageB_id
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/components/chat/MessageBubble.jsx (1)
106-106:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winCritical:
setSelectedImageis undefined.The
onClickhandler callssetSelectedImage(msg.image), butsetSelectedImageis not defined in this component. This will cause a runtime error when users click on message images.🔧 Possible fixes
Option 1: Add missing state
const [showTranslation, setShowTranslation] = useState(false) const [isSelected, setIsSelected] = useState(false) +const [selectedImage, setSelectedImage] = useState(null)Then add an image modal/viewer component that uses
selectedImageto display the full image.Option 2: Accept as prop if parent should handle
-export default function MessageBubble({ msg, isMine, showTime, selectedUser, isOnline, authUser, onContextMenu, onTouchStart, onTouchEnd, onReact }) { +export default function MessageBubble({ msg, isMine, showTime, selectedUser, isOnline, authUser, onContextMenu, onTouchStart, onTouchEnd, onReact, onImageClick }) {- onClick={() => setSelectedImage(msg.image)} + onClick={() => onImageClick?.(msg.image)}Option 3: Remove if functionality not needed
- onClick={() => setSelectedImage(msg.image)}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/components/chat/MessageBubble.jsx` at line 106, The onClick handler in MessageBubble.jsx calls setSelectedImage(msg.image) but that setter is undefined; fix by either (A) adding local state const [selectedImage, setSelectedImage] = useState(null) in the MessageBubble component and wiring an ImageModal/ImageViewer that consumes selectedImage and a close to setSelectedImage(null), (B) accept setSelectedImage (and optionally selectedImage) as props on the MessageBubble component and use the passed-in setter instead, or (C) remove the onClick and any references to selectedImage if image-previewing is not required; update the component signature and any parent usage accordingly so setSelectedImage is always defined when referenced.
🧹 Nitpick comments (1)
frontend/components/chat/MessageBubble.jsx (1)
118-123: ⚡ Quick winConsider adding cleanup handlers for audio lifecycle.
The current implementation correctly sets
activeAudioIdwhen audio starts playing, but doesn't clear it when audio naturally finishes or is manually paused. This leaves stale state whereactiveAudioIdpoints to a message that isn't actually playing.🎵 Add onEnded and onPause handlers to clear state
<audio ref={audioRef} src={msg.audio} controls className="max-w-full h-10 mb-1" onPlay={() => setActiveAudioId(msg._id)} + onEnded={() => setActiveAudioId(null)} + onPause={() => setActiveAudioId(null)} />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/components/chat/MessageBubble.jsx` around lines 118 - 123, The audio element sets activeAudioId in onPlay but never clears it; update the element using audioRef/on* props to add onEnded and onPause handlers (or attach 'ended'/'pause' event listeners) that call setActiveAudioId(null) when the currently playing id (msg._id) stops, and ensure any event listeners are removed in cleanup to avoid leaks; reference audioRef, setActiveAudioId, onPlay and msg._id when locating the code.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@frontend/components/chat/MessageBubble.jsx`:
- Line 106: The onClick handler in MessageBubble.jsx calls
setSelectedImage(msg.image) but that setter is undefined; fix by either (A)
adding local state const [selectedImage, setSelectedImage] = useState(null) in
the MessageBubble component and wiring an ImageModal/ImageViewer that consumes
selectedImage and a close to setSelectedImage(null), (B) accept setSelectedImage
(and optionally selectedImage) as props on the MessageBubble component and use
the passed-in setter instead, or (C) remove the onClick and any references to
selectedImage if image-previewing is not required; update the component
signature and any parent usage accordingly so setSelectedImage is always defined
when referenced.
---
Nitpick comments:
In `@frontend/components/chat/MessageBubble.jsx`:
- Around line 118-123: The audio element sets activeAudioId in onPlay but never
clears it; update the element using audioRef/on* props to add onEnded and
onPause handlers (or attach 'ended'/'pause' event listeners) that call
setActiveAudioId(null) when the currently playing id (msg._id) stops, and ensure
any event listeners are removed in cleanup to avoid leaks; reference audioRef,
setActiveAudioId, onPlay and msg._id when locating the code.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 633b2b22-a48d-4cde-94ce-11327ded81be
📒 Files selected for processing (2)
frontend/components/chat/MessageBubble.jsxfrontend/src/store/useChatStore.js
sanikatavate
force-pushed
the
fix-audio-playback-531
branch
from
01b661a to
67ab6f5
Compare
1 participant
Summary by CodeRabbit
New Features
Bug Fixes