feat: add configurable slideshow duration with hover slider#1363
Open
siddharthsai218 wants to merge 2 commits into
Open
feat: add configurable slideshow duration with hover slider#1363siddharthsai218 wants to merge 2 commits into
siddharthsai218 wants to merge 2 commits into
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
WalkthroughThe slideshow hook now tracks a configurable duration, MediaView passes it through to the controls, and MediaViewControls renders a hover-triggered duration slider for image slideshows. ChangesConfigurable Slideshow Duration
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ 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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
frontend/src/components/Media/MediaViewControls.tsx (1)
110-121: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winRange input missing an accessible label.
The
<input type="range">has noaria-label/aria-labelledby, so screen readers announce it without context.♿ Proposed fix
<input type="range" + aria-label="Slideshow duration per image" min={0} max={2}🤖 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/src/components/Media/MediaViewControls.tsx` around lines 110 - 121, The range control in MediaViewControls lacks an accessible name, so add an aria-label or aria-labelledby to the <input type="range"> used for the slider. Update the slider element in the MediaViewControls component so screen readers can announce its purpose clearly, keeping the existing handleSliderChange, sliderValue, and styling behavior unchanged.
🤖 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.
Inline comments:
In `@frontend/src/components/Media/MediaViewControls.tsx`:
- Around line 82-129: The slideshow settings panel in MediaViewControls is only
controlled by mouse hover, so keyboard and touch users cannot reach the duration
slider. Update the wrapper around the Slideshow button to open/close
showSettings on focus and blur in addition to onMouseEnter/onMouseLeave, using
the existing setShowSettings state logic. Also add a tap/click fallback for
touch devices so the dropdown can be toggled without hover, while keeping the
current button and slider behavior intact.
In `@frontend/src/hooks/useSlideshow.ts`:
- Line 10: The slideshow duration state starts at a value that is not one of the
allowed UI snap points, causing `useSlideshow` and `MediaViewControls` to
disagree about the active interval. Update the initial `duration` in
`useSlideshow` to one of the values from `DURATION_STEPS` used by
`MediaViewControls` (for example, 2000) and make sure any related default/reset
logic also uses that same snap value so the hook state and slider stay aligned.
---
Nitpick comments:
In `@frontend/src/components/Media/MediaViewControls.tsx`:
- Around line 110-121: The range control in MediaViewControls lacks an
accessible name, so add an aria-label or aria-labelledby to the <input
type="range"> used for the slider. Update the slider element in the
MediaViewControls component so screen readers can announce its purpose clearly,
keeping the existing handleSliderChange, sliderValue, and styling behavior
unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9b62bec8-8470-4e27-9e33-9e774b74020b
📒 Files selected for processing (3)
frontend/src/components/Media/MediaView.tsxfrontend/src/components/Media/MediaViewControls.tsxfrontend/src/hooks/useSlideshow.ts
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
1 participant
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.
Addressed Issues:
Fixes #1350
Summary
The Slideshow feature previously auto-advanced images at a fixed 3-second interval with no way for users to control the pace. This PR adds a duration control, per feedback from the maintainer on the original issue.
Behavior:
Implementation:
useSlideshow.ts: duration is now stored in state (default 3000ms) instead of hardcoded, and exposed from the hook along with a setterMediaView.tsx: pulls the duration state from the hook and passes it down to the controls componentMediaViewControls.tsx: replaces the old single-click toggle with a hover-triggered settings panel containing the duration slider; clicking the button still starts/pauses the slideshow directlyScreenshots/Recordings:
BEFORE:
AFTER:
Additional Notes:
AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools: Claude
Checklist
Summary by CodeRabbit