Add video playback quality selector - #305
Open
Idahjnr007 wants to merge 4 commits into
Open
Conversation
Added Autoplay Next Lecture Toggle in Video Player. Implemented an autoplay next lecture toggle in the video player so students can choose whether the next lecture starts automatically after the current one ends. 📋 Requirements Added an "Autoplay" toggle switch in VideoControls.tsx Default: on Persist preference in localStorage per user When lecture ends and autoplay is on: 5-second countdown overlay showing "Next: [lecture title]", then auto-navigate Cancel button during countdown cancels autoplay When autoplay is off: show "Next lecture" button on video end
https://github.com/Idahjnr007/Hamplard-frontend into Build-Course-Completion-Modal-with-Confetti-Animation
Added Video Playback Quality Selector Built a video playback quality selector so students on slower connections can reduce video quality to prevent buffering. 📋 Requirements Add quality selector button to VideoControls.tsx: Auto, 1080p, 720p, 480p, 360p When a quality is selected, switch the video src to the matching resolution URL Maintain current playback position when switching quality Show current quality label in button when not Auto "Auto" uses the browser's adaptive bitrate streaming 🔧 Technical Scope HTML5 video src switching src/components/learn/VideoControls.tsx 📂 Affected Path src/components/learn/VideoControls.tsx
|
@Idahjnr007 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
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.
Closes #186
Added VideoQualityLevel type: 'auto' | '1080p' | '720p' | '480p' | '360p'
Added VideoQualities interface with optional URL fields per resolution
Added optional videoQualities?: VideoQualities to the Lesson interface
VideoControls.tsx
Added quality, videoQualities, onQualityChange to props
The dropdown is only rendered when videoQualities has at least one URL (so lessons without quality variants show nothing)
Dropdown opens upward above the controls bar to avoid clipping
Selected quality gets a saffron dot indicator; the button label shows the active resolution (or "Quality" for Auto)
Click-outside handler closes the menu cleanly
Used a custom
instead of a native so it can be styled to match the dark player chrome VideoPlayer.tsx Added videoQualities prop Added quality + activeSrc state; activeSrc is what the actually reads Added pendingSeekRef and pendingPlayRef refs to stash position and play-state before the src swap handleQualityChange — captures current time and play state, then updates activeSrc handleCanPlay — fires after the new source is ready, seeks to the saved position and resumes playback if it was playing useEffect on src resets everything back to Auto when the lesson changes onCanPlay wired to the element src/app/dashboard/courses/[id]/learn/page.tsx Passes videoQualities={activeLesson.videoQualities} to Closes #186