TT-7263 Mobile Team Check component#281
Conversation
- Added IPlayerState interface to manage player state in PassageDetailPlayer. - Integrated playerState prop to allow external control of player state. - Updated SelectMyResource to adjust TextField styling based on mobile detection, improving responsiveness on smaller screens.
- Changed MobileGrid width from 80% to 100% for better responsiveness. - Added maxWidth and adjusted width styling for the inner MobileGrid to maintain layout consistency.
There was a problem hiding this comment.
Pull request overview
Adds a mobile implementation for the Team Check step in Passage Detail, and introduces an optional way to externally drive PassageDetailPlayer state (used by the new mobile Team Check UI).
Changes:
- Route mobile Team Check tool (
ToolSlug.TeamCheck) to a newTeamCheckReferenceMobilecomponent. - Add
playerStateoverride support toPassageDetailPlayervia newIPlayerState. - Adjust
SelectMyResourcestyling on mobile to allow full-width, responsive layout.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
| src/renderer/src/routes/PassageDetail.tsx | Adds Team Check mobile step rendering (TeamCheckReferenceMobile) when the current tool is ToolSlug.TeamCheck. |
| src/renderer/src/components/PassageDetail/mobile/TeamCheckReferenceMobile.tsx | New mobile Team Check UI component (resource selection + player/chooser layout). |
| src/renderer/src/components/PassageDetail/PassageDetailPlayer.tsx | Adds playerState prop + override logic to support externally-supplied player state and callbacks. |
| src/renderer/src/components/PassageDetail/Internalization/SelectMyResource.tsx | Uses useMobile() to switch TextField styling for better mobile responsiveness. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -91,6 +107,7 @@ export interface DetailPlayerProps { | |||
| metaData?: React.ReactNode; | |||
| /** When set, exposes waveform imperative controls (e.g. add segment at playhead). */ | |||
| controlsRef?: RefObject<WSAudioPlayerControls | null>; | |||
| playerState?: IPlayerState; | |||
| } | |||
There was a problem hiding this comment.
PR description only mentions MobileGrid width tweaks, but this PR also introduces a new playerState API surface on PassageDetailPlayer and new TeamCheck mobile routing. Please update the PR description to reflect these functional/API changes so reviewers know to focus on them (and downstream consumers can be assessed).
| const forceRefresh = () => { | ||
| console.log('forceRefresh called'); | ||
| }; | ||
| const setupLocate = () => { | ||
| console.log('setupLocate called'); | ||
| }; | ||
| const setCurrentSegment = (region: IRegion | undefined, index: number) => { | ||
| console.log('setCurrentSegment called with index', index); | ||
| setCurrentSegmentIndex(index); | ||
| }; | ||
|
|
||
| const [resource, setResource] = useState(''); | ||
| const { removeStoredKeys, saveKey, storeKey, SecSlug } = storedCompareKey( | ||
| passage, | ||
| section | ||
| ); | ||
|
|
||
| const handleHighlightDiscussion = (time: number | undefined) => { | ||
| console.log('handleHighlightDiscussion called with time', time); | ||
| }; |
There was a problem hiding this comment.
This file contains several debug console.log statements and placeholder handlers (e.g., forceRefresh, setupLocate, handleHighlightDiscussion) that currently do nothing except log. These will pollute logs in production and can break expected player behavior (e.g., setupLocate is used by PassageDetailPlayer to load/update segments). Remove the debug logging and wire these callbacks to the real PassageDetail context logic (or avoid overriding by not passing a custom playerState).
…renceMobile.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
- Updated import path for IMarker to ensure correct module resolution. - Added optional width prop to TeamCheckReferenceMobile for better layout control. - Adjusted paneWidth calculation to utilize the new width prop, enhancing responsiveness. - Improved ResizeObserver implementation for dynamic width updates.
…sdev/apm into feature/mobile-compare-step
- Updated conditional checks for currentstep and currentSegmentIndex to ensure they are only assigned when defined, enhancing code robustness.
responsiveness.
MobileGrid to maintain layout consistency.