Skip to content

TT 7028 transcribe - #556

Draft
gtryus wants to merge 22 commits into
developfrom
TT-7028-transcribe
Draft

TT 7028 transcribe#556
gtryus wants to merge 22 commits into
developfrom
TT-7028-transcribe

Conversation

@gtryus

@gtryus gtryus commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

This PR adds a mobile transcription workflow (PassageDetailTranscribeMobile) with supporting infrastructure:

  1. Shared hooks — useTranscribeActions (save/submit/reject/reopen state machine) and useTranscribeAsr (ASR trigger, language selection, progress modal) extracted for reuse.
  2. Mobile transcribe component — Full-featured transcription UI with player, ASR button, textarea with project font/RTL, state badge, and action buttons.
  3. Player layoutMode — WSAudioPlayer and PassageDetailPlayer gain layoutMode='mobileTranscribe' to rearrange toolbar controls (play/loop/position/rate on top, segment controls below waveform).
  4. Focus-aware header hiding — New hideMobileHeader context state lets the textarea hide MobileWorkflowSteps on focus for vertical space.
  5. Route wiring — ToolSlug.Transcribe now renders PassageDetailTranscribeMobile instead of a placeholder.
  6. Height fix — Transcriber.tsx corrects the text box height calculation to account for player toolbars, action row, and enforce a minimum.
    Unit tests for useTranscribeActions and Cypress component tests for the mobile transcribe component are included.

@gtryus
gtryus marked this pull request as draft August 28, 2026 20:51
Greg Trihus added 2 commits August 28, 2026 15:54
- Introduced `layoutMode` prop to WSAudioPlayer and PassageDetailPlayer for better mobile responsiveness.
- Updated WSAudioPlayer to conditionally render toolbar and controls based on `layoutMode`.
- Enhanced PassageDetailMobileDetail to conditionally hide the mobile header based on `hideMobileHeader` prop.
- Added new PassageDetailTranscribeMobile component for mobile transcription functionality.
- Implemented tests for new transcription actions and components to ensure functionality and reliability.
- Introduced constants for extra height and minimum text box height to enhance readability and maintainability.
- Updated box height calculation in state initialization and useEffect to ensure it respects the new constants.
- Ensured that the box height does not fall below the minimum threshold, improving the user interface experience.
@gtryus
gtryus force-pushed the TT-7028-transcribe branch from d0b55d6 to 52650ac Compare August 28, 2026 20:55
Greg Trihus added 20 commits August 28, 2026 17:28
… based on allowAutoSegment prop

- Modified loop, previous region, and next region nodes to only render when allowAutoSegment is true.
- Enhanced tooltip titles to handle potential null values for improved localization support.
- Updated segmentsRef to initialize as undefined instead of relying on mediafile attributes.
- Adjusted useEffect to set segmentsRef.current to undefined, improving clarity and reducing unnecessary dependencies.
…anscription updates

- Added a confirmation dialog to notify users when the transcription has been updated by another user.
- Implemented state management for handling incoming transcription changes and user confirmations.
- Improved user experience by allowing users to accept or refuse updates to their local transcription changes.
…tions

- Moved transcription action callbacks into useTranscribeActions for better organization and clarity.
- Updated useEffect dependencies to ensure proper handling of media file changes and transcription updates.
- Removed redundant callback definitions to enhance code readability and maintainability.
…and segment handling

- Integrated PlayInPlayer context for better media file management.
- Updated createMockMemory to accept memoryUpdate for dynamic testing.
- Refined segment handling logic to ensure accurate updates and error logging.
- Enhanced useEffect hooks to manage media file changes and transcription updates more effectively.
…tifications

- Updated createMockMemory to accept an optional memoryUpdate parameter for dynamic testing.
- Added onSaveCompleted callback to handle save success and failure notifications.
- Improved segment change handling to log errors and ensure proper state management during updates.
- Enhanced tests to verify error forwarding and save completion behavior in transcription actions.
… media selection improvements

- Integrated artifact type handling to resolve media files based on selected artifact types.
- Updated media selection logic to prioritize selected media rows for transcription actions.
- Improved state management for media files and workflow steps to enhance user experience.
- Refactored useEffect hooks to ensure accurate media file updates and player interactions.
…d state management

- Added error handling for save failures in transcription actions to prevent unintended state changes.
- Updated `handleComplete` to ensure navigation only occurs on successful saves.
- Enhanced tests to verify behavior when save operations fail, ensuring proper handling of step completion and navigation.
- Refactored `useTranscribeActions` to throw errors on save failures, allowing callers to manage error states effectively.
…ontrols

- Introduced permission checks to disable editing features when the user lacks edit permissions.
- Updated text handling functions to prevent changes if the user does not have permission.
- Enhanced component rendering logic to conditionally display editing options based on user permissions.
- Added tests to verify that editing features are correctly disabled for users without permissions.
…r unsaved changes

- Introduced a NavigationTrigger component to handle navigation confirmation when there are unsaved changes.
- Updated the UnsavedContext to include new state properties for managing save requests and tool changes.
- Enhanced tests to verify the behavior of saving or discarding changes based on user confirmation during navigation.
- Refactored component rendering logic to conditionally display navigation prompts based on unsaved changes.
…nd transcription state management

- Added support for project type handling in transcription actions, allowing differentiation between Scripture and General projects.
- Implemented logic to advance transcription states based on project type and workflow steps, improving user experience during transcription submissions.
- Enhanced tests to verify correct state transitions for various project types and workflow scenarios.
- Refactored component logic to utilize new project type context and improve state management for transcription actions.
…dleRejectCallback

- Modified the handleRejectCallback function to await the uncompletedSteps call, ensuring proper asynchronous handling of transcription state updates.
- This change improves the reliability of the rejection process by ensuring that all steps are completed before proceeding with further logic.
…ction button controls

- Added checks to disable action buttons and make the textarea readonly when no mediafile exists, improving user experience during transcription.
- Updated text handling functions to ensure actions are only permitted when a mediafile is available.
- Enhanced tests to verify the behavior of action buttons and submission processes when mediafile is undefined, ensuring robust error handling and state management.
…logic

- Introduced a new test file for the `useProjectSegmentSave` hook, validating that segments are updated using attribute-scoped operations instead of full record updates.
- Refactored the `useProjectSegmentSave` function to utilize `UpdateAttribute` for segment updates, improving performance and clarity.
- Enhanced `PassageDetailTranscribeMobile` to manage pending segment saves more effectively, ensuring that concurrent updates do not overwrite stale data.
- Updated `useTranscribeActions` to read the latest attributes from memory, preventing stale mediafile snapshots from affecting segment persistence.
- Added tests to ensure that the latest attributes are correctly utilized during concurrent saves, enhancing reliability in the transcription process.
…role-based rendering

- Added unit tests to verify the rendering of the Reopen button, readonly textarea, and disabled ASR for Approved and Done media states with appropriate permissions.
- Improved role-based rendering logic to ensure correct access and visibility of UI elements based on user permissions and media states.
- Refactored media selection logic to handle artifact types and roles more effectively, enhancing user experience during transcription tasks.
- Updated state management to ensure accurate handling of mediafile attributes and transcription states.
…n useTranscribeActions

- Added tests to handle cases where transcription save succeeds but assignment fails, ensuring that save notifications are correctly reported without assignment errors.
- Refactored the useTranscribeActions function to improve error handling during assignment, logging errors without disrupting the save process.
- Enhanced mock functions to simulate unassigned transcriber scenarios and transcription save failures, improving test coverage and reliability.
…nd offline handling

- Added support for AI transcription feature with conditional rendering of the ASR button based on team settings and offline status.
- Implemented unit tests to verify the visibility of the ASR button under different scenarios, ensuring correct behavior when AI transcription is enabled or disabled.
- Refactored component logic to incorporate new props for AI transcription and offline state management, improving user experience during transcription tasks.
… handling

- Enhanced the component to resolve transcription language and typography settings from step attributes, falling back to project attributes when necessary.
- Updated the useEffect hook to include stepSettings and artifactTypeSlug as dependencies, ensuring accurate font data retrieval.
- Refactored font data loading logic to improve clarity and maintainability, enhancing the overall user experience during transcription tasks.
…saved state management

- Introduced new tests to verify segment persistence and unsaved coordination, ensuring that segment edits are correctly registered and handled during transcription.
- Implemented logic to manage segment save failures, including reporting errors and blocking navigation when unsaved changes exist.
- Refactored the handling of segment updates to improve clarity and maintainability, enhancing the overall user experience during transcription tasks.
…error handling

- Replaced direct use of cy.stub().rejects() with a custom createRejectingStub function to avoid unhandled test-code rejections in CI.
- Updated multiple test cases to utilize the new stub for simulating save failures, improving test reliability and clarity.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds a new mobile transcription experience to the renderer, including reusable transcription hooks, a dedicated mobile transcribe UI, and player/layout/context updates to support the workflow (including header-hiding on focus and improved text-area sizing).

Changes:

  • Wire ToolSlug.Transcribe on mobile to a full PassageDetailTranscribeMobile implementation (UI + actions + ASR + segmentation).
  • Extract shared transcription hooks (useTranscribeActions, useTranscribeAsr) and add unit/component tests around the new behavior.
  • Extend audio player layout options and adjust supporting infra (header hiding state, region styling fallback, segment-save behavior, Transcriber height calculation).

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/renderer/src/routes/PassageDetail.tsx Routes mobile “Transcribe” step to the new mobile transcribe screen.
src/renderer/src/crud/useWavesurferRegions.tsx Adds a safe fallback for current-region border color when theme custom palette is missing.
src/renderer/src/context/PassageDetailContext.tsx Introduces hideMobileHeader state + setter for focus-driven header hiding.
src/renderer/src/components/WSAudioPlayer.tsx Adds layoutMode and mobile-transcribe toolbar/control layout variants.
src/renderer/src/components/Transcriber.tsx Fixes/guards textarea height calculation and cleans up formatting.
src/renderer/src/components/PassageDetail/transcribe/useTranscribeAsr.ts New shared ASR hook for transcribe screens (settings + language selection + progress + text insertion).
src/renderer/src/components/PassageDetail/transcribe/useTranscribeActions.ts New shared hook implementing save/submit/reject/reopen transcription state transitions.
src/renderer/src/components/PassageDetail/transcribe/useTranscribeActions.test.ts Unit tests for useTranscribeActions state machine and error paths.
src/renderer/src/components/PassageDetail/PassageDetailPlayer.tsx Passes through layoutMode to WSAudioPlayer.
src/renderer/src/components/PassageDetail/PassageDetailMobileDetail.tsx Conditionally hides the mobile header when hideMobileHeader is true.
src/renderer/src/components/PassageDetail/mobile/transcribe/PassageDetailTranscribeMobile.tsx New mobile transcription UI + wiring for permissions, ASR, segmentation, and action buttons.
src/renderer/src/components/PassageDetail/mobile/transcribe/PassageDetailTranscribeMobile.cy.tsx Cypress component tests covering the mobile transcription screen behavior.
src/renderer/src/components/PassageDetail/Internalization/useProjectSegmentSave.ts Switches segment persistence to attribute-scoped updates to avoid overwriting other media attributes.
src/renderer/src/components/PassageDetail/Internalization/useProjectSegmentSave.test.ts Unit test ensuring segment saves use replaceAttribute (not full updateRecord).

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment on lines +811 to +832
<StyledTextAreaAutosize
id="transcriptionText"
ref={textareaRef}
value={textValue}
family={fontStyle.fontFamily}
onChange={handleTextChange}
onFocus={handleFocus}
onBlur={handleBlur}
readOnly={isReadOnly}
placeholder={t.transcriptionType ?? 'Transcription'}
style={{
...fontStyle,
width: '100%',
minHeight: 120,
boxSizing: 'border-box',
padding: '8px 12px',
border: '1px solid #ccc',
borderRadius: '4px',
resize: 'vertical',
outline: 'none',
}}
/>
Comment on lines +742 to +746
return {
fontFamily: projData?.fontFamily || 'inherit',
fontSize: projData?.fontSize || 'inherit',
direction: projData?.fontDir ? ('rtl' as const) : ('ltr' as const),
};
Comment on lines +124 to +133
const { waitForSave } = useContext(UnsavedContext).state;
const {
toolChanged,
isChanged,
saveCompleted,
clearCompleted,
saveRequested,
clearRequested,
toolsChanged,
} = useContext(UnsavedContext).state;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants