TT-7300 Align Mark Verses with mobile design

- Improved segment matching logic in usePlayerLogic for better accuracy.
- Updated WSAudioPlayer to support new markVersesTailOpenRef prop for managing verse states.
- Enhanced PassageDetailMarkVerses to handle incomplete verse rows and apply region colors dynamically.
- Refactored EditReferenceDropdown to manage end verse options and suffix handling more effectively.
- Improved MarkVersesTableIsMobile to allow for better interaction and visual feedback based on segment states.
- Added tests to ensure correct behavior of new features and UI changes.

Enhance PassageDetailMarkVersesIsMobile tests

- Updated existing test to verify that the reference input is not read-only when editable.
- Added new test to ensure the reference input remains read-only and disabled when the row lacks timestamps.
- Improved interaction feedback for better user experience in mobile view.

Recomendations from UX (AI 2nd draft)

- Clicking + to add segment while playing should not stop playing but it does.
- Marking verses should autosave (remove Save button)
- After adding segment, the position is set to the beginning of the preceeding segment instead of the new segment. I think this used to work better. Also the second segment is yellow for active even though the position is in the first segment which is shown as completed.
- When you click in a segment region (except the first) you have to press Play twice to play.
- When you click add a segment boundary and click play, it plays the segment before. I think this used to work better on the last commit.
- When undoing a boundary deletion. the table correctly shows the segment boundaries but the boundary does not show on the wave form.
- We can mark a verse to be 1:11a but then the following verse should start with 1:11b (instead of 12)
- The reset button still shows after the Mark Verses wave form and table are reset and there is nothing more to reset.

Recomendations from UX (AI 1st draft)

- Add segment while playing should not stop playing
- Marking verses should autosave (remove Save button)
- After adding segment, you have to tap Play twice to resume
- Related: The design shows that the succeeding segment should be selected after adding, not the preceding. This was a specific request from you, so I'm wondering if you're unaware that this is not working?
- The rows should not be editable. Please also remove the textfield-style underline for the Reference cells. I do see some merit to this for the desktop, but on mobile devices, showing the keyboard every tap is very distracting. (I did not run this local branch on my mobile device.)
- The rows should be in a scrollable area, not the whole page. Moving to a scrollable table will reduce the scrollable space, so you'll at that point really need to focus on minimizing the vertical space consumed by the rest of the page. For example, the Plus/Minus row consumes a lot of height. Same for the Play/Duration row.
- After you do this comment, the next important thing to do is to scroll to the row when selecting a segment in the waveform. (Right now it's a little frustrating that all the later rows are highlighted offscreen.)
- The Edit Reference doesn't appear to support spanning chapters. This was a request during the design phase. Maybe it's not MVP?
- The Edit Reference dropdown numbers look really large. Maybe Jiho can help with general styling and spacing these new pages.
- When deleting a boundary, the waveform and table highlights get out of sync, and it appears to select the segment after where the cursor is.
- I like the way the Minus button works with segment selection, even though it doesn't match the design.
- Undo seems broken. It's more of a question in the design whether or not we need it, but in its current state it is not very useful.
- Undo seems to undo more than the previous action.
- Undo seems to not appear many times, e.g. add, delete, etc.
- Undo also seems to disappear after one undo operation. Is it just saving the most recent action? It's pretty difficult to test in its current state.
- Save navigates away from the page? It appears to also do a Step Complete, which should not be happening either. These issues should go away if you can accomplish autosave for this step.
- I'm not really sure how to mark something as just a partial verse, e.g. 1:11a. This may be a flaw in the design. Do you know how to do this in the app? (other than manual entry in the row)
- Reset does not remove the table row highlight (visual quirk)
- Reset is not recoverable. Either do a confirmation dialog or make it undo-able.

feat: enhance verse marking functionality with letter suffix handling and autosave improvements

feat: improve playback handling during region splits to prevent unwanted seeks

feat: enhance verse parsing and suffix handling in mark verses functionality

Fix static reported issues.

Enhance refMatch functionality to support same verse letter ranges and improve test coverage for edge cases. Added tests for valid and invalid letter suffix scenarios.

Enhance PassageDetailMarkVersesIsMobile test by adding isPlaying mock function to improve playback state handling during tests.

Refactor PassageDetailMarkVersesIsMobile by removing unused cell change handling and clipboard parsing functions. Updated MarkVersesTableIsMobile props to streamline verse marking functionality.

Update PassageDetailMarkVerses to use dynamic RGBA values for completed and current verse backgrounds, enhancing visual feedback for verse marking functionality.

Refactor PassageDetailMarkVerses to simplify row highlighting logic by utilizing applyRowHighlight function, improving code readability and maintainability.

Author: Greg Trihus

.hintrc

@@ -11,6 +11,12 @@
     ],
     "compat-api/html": "off",
     "no-inline-styles": "off",
-    "compat-api/css": "off"
+    "compat-api/css": "off",
+    "axe/forms": [
+      "default",
+      {
+        "select-name": "off"
+      }
+    ]
   }
 }

localization/TranscriberAdmin-en-1.2.xliff

@@ -10633,6 +10633,13 @@
                <context context-type="sourcefile">UserTable.tsx</context>
             </context-group>
          </trans-unit>
+         <trans-unit id="verse.autosaveSkipped">
+            <source>Autosave skipped: {0} issue(s) found.</source>
+            <target/>
+            <context-group>
+               <context context-type="sourcefile">PassageDetailMarkVerses.tsx</context>
+            </context-group>
+         </trans-unit>
          <trans-unit id="verse.badReferences">
             <source>ERROR: Markup contains bad references</source>
             <target/>
@@ -10689,6 +10696,13 @@
                <context context-type="sourcefile">PassageDetailMarkVerse.tsx</context>
             </context-group>
          </trans-unit>
+         <trans-unit id="verse.markupIssuesTitle">
+            <source>Verse markup issues</source>
+            <target/>
+            <context-group>
+               <context context-type="sourcefile">PassageDetailMarkVerses.tsx</context>
+            </context-group>
+         </trans-unit>
          <trans-unit id="verse.missingReferences">
             <source>Warning: Verses in passage not included: ({0})</source>
             <target/>
@@ -10759,6 +10773,13 @@
                <context context-type="sourcefile">PassageDetailMarkVerse.tsx</context>
             </context-group>
          </trans-unit>
+         <trans-unit id="verse.viewIssues">
+            <source>View issues</source>
+            <target/>
+            <context-group>
+               <context context-type="sourcefile">PassageDetailMarkVerses.tsx</context>
+            </context-group>
+         </trans-unit>
          <trans-unit id="viewMode.audioProject">
             <source>Audio Project Setup</source>
             <target/>

localization/TranscriberAdmin-en.xlf

@@ -9112,6 +9112,12 @@
             <target/>
          </segment>
       </unit>
+      <unit id="verse.autosaveSkipped">
+         <segment>
+            <source>Autosave skipped: {0} issue(s) found.</source>
+            <target/>
+         </segment>
+      </unit>
       <unit id="verse.badReferences">
          <segment>
             <source>ERROR: Markup contains bad references</source>
@@ -9160,6 +9166,12 @@
             <target/>
          </segment>
       </unit>
+      <unit id="verse.markupIssuesTitle">
+         <segment>
+            <source>Verse markup issues</source>
+            <target/>
+         </segment>
+      </unit>
       <unit id="verse.missingReferences">
          <segment>
             <source>Warning: Verses in passage not included: ({0})</source>
@@ -9220,6 +9232,12 @@
             <target/>
          </segment>
       </unit>
+      <unit id="verse.viewIssues">
+         <segment>
+            <source>View issues</source>
+            <target/>
+         </segment>
+      </unit>
       <unit id="viewMode.audioProject">
          <segment>
             <source>Audio Project Setup</source>

src/renderer/public/localization/strings78399311.json

@@ -79,8 +79,16 @@ test('shoulc fail with beg with letter < end with letter, 1:1b-1a', () => {
   expect(refMatch('1:1b-1a')).toBeNull();
 });
 
-test('should fail with beg with letter < end as letter, 1:1b-c', () => {
-  expect(refMatch('1:1b-c')).toBeNull();
+test('same verse letter range 1:22a-b', () => {
+  expect(refMatch('1:22a-b')).not.toBeNull();
+});
+
+test('same verse letter range 1:1b-c', () => {
+  expect(refMatch('1:1b-c')).not.toBeNull();
+});
+
+test('should fail same verse letter range when end is before start, 1:1c-b', () => {
+  expect(refMatch('1:1c-b')).toBeNull();
 });
 
 test('should fail with beg as letter < end with letter, 1:b-2c', () => {

src/renderer/public/localization/stringsf3868377.json

@@ -105,13 +105,26 @@ export const usePlayerLogic = (props: PlayerLogicProps) => {
   const onCurrentSegment = (segment: IRegion | undefined) => {
     let index = 0;
     if (segment && segmentsRef.current) {
-      const segs = parseRegions(segmentsRef.current);
+      const sorted = parseRegions(segmentsRef.current).regions.sort(
+        (a: IRegion, b: IRegion) => a.start - b.start
+      );
+      const matchTol = 0.6;
       index =
-        segs.regions
-          .sort((a: IRegion, b: IRegion) => a.start - b.start)
-          .findIndex(
-            (r: IRegion) => r.start <= segment?.start && r.end >= segment?.end
+        sorted.findIndex(
+          (r: IRegion) =>
+            Math.abs(r.start - segment.start) <= matchTol &&
+            Math.abs(r.end - segment.end) <= matchTol
+        ) + 1;
+      if (index <= 0) {
+        index =
+          sorted.findIndex(
+            (r: IRegion, i: number) =>
+              segment.start >= r.start - 0.01 &&
+              (i === sorted.length - 1
+                ? segment.start <= r.end + 0.01
+                : segment.start < r.end - 0.01)
           ) + 1;
+      }
     } else {
       if (setSegmentToWhole()) return;
     }

src/renderer/src/__tests__/refMatch.test.ts

@@ -56,6 +56,8 @@ const mockCurrentStep = 'step1';
 const mockSetCurrentStep = jest.fn();
 let mockPlayerAction: ((segment: string, init: boolean) => void) | undefined;
 const mockRowData: IRow[] = [];
+const mockShowMessage = jest.fn();
+const mockProjectSegmentSave = jest.fn().mockResolvedValue(undefined);
 
 const passageAttributes = {
   sequencenum: 1,
@@ -128,6 +130,29 @@ jest.mock('./PassageDetailPlayer', () => {
 //   }),
 // }));
 jest.mock('../../utils/logErrorService', () => jest.fn());
+jest.mock('../../hoc/SnackBar', () => {
+  const actual = jest.requireActual('../../hoc/SnackBar');
+  return {
+    ...actual,
+    useSnackBar: () => ({
+      showMessage: mockShowMessage,
+      showTitledMessage: jest.fn(),
+      messageReset: jest.fn(),
+    }),
+  };
+});
+jest.mock('./Internalization/useProjectSegmentSave', () => ({
+  useProjectSegmentSave: () => mockProjectSegmentSave,
+}));
+jest.mock('../AlertDialog', () => ({
+  __esModule: true,
+  default: ({ jsx, title }: { jsx?: React.ReactNode; title?: string }) => (
+    <div data-testid="issues-dialog">
+      <h2>{title}</h2>
+      {jsx}
+    </div>
+  ),
+}));
 jest.mock('../../context/GlobalContext', () => ({
   useGlobal: (arg: string) =>
     arg === 'memory' ? [mockMemory, jest.fn()] : [{}, jest.fn()],
@@ -147,14 +172,18 @@ jest.mock('react-redux', () => ({
     reference: 'Reference',
     saveVerseMarkup: 'Save Verse Markup',
     startStop: 'Start --> Stop',
+    autosaveSkipped: 'Autosave skipped: {0} issue(s) found.',
     badReferences: 'ERROR: Markup contains bad references',
     btNotUpdated:
       'WARNING: Since back translation recordings already exist, back translation segments will not be updated to line up with verse changes.',
     issues: 'The verse markup has issues. Do you want to continue?',
+    markupIssuesTitle: 'Verse markup issues',
     missingReferences: 'Warning: Verses in passage not included: ({0})',
     noReferences: 'Warning: Some audio segments will not be included in verses',
     noSegments: 'ERROR: Some verses have no segment: ({0})',
     outsideReferences: 'ERROR: Some verses are outside passage: ({0})',
+    viewIssues: 'View issues',
+    close: 'Close',
   }),
   shallowEqual: jest.fn(),
 }));
@@ -463,3 +492,40 @@ test('should not add rows including refs already in table', async () => {
   // Assert
   expect(tbody.children.length).toBe(4); // 3 limits (with 3 verse refs) + 1 header
 });
+
+test('shows warning snackbar and blocks autosave when checkRefs has issues', async () => {
+  jest.useFakeTimers();
+  runTest({ width: 1000 });
+  const tbody = screen.getByTestId('verse-sheet')?.firstChild?.firstChild
+    ?.firstChild as HTMLElement;
+  await waitFor(() => expect(tbody.children.length).toBeTruthy());
+
+  act(() => {
+    if (mockPlayerAction) {
+      mockPlayerAction(
+        '{"regions":"[{\\"start\\":0,\\"end\\":5},{\\"start\\":5,\\"end\\":9}]"}',
+        false
+      );
+    }
+  });
+
+  await waitFor(() => {
+    expect(mockShowMessage).toHaveBeenCalledWith(
+      expect.anything(),
+      AlertSeverity.Warning
+    );
+  });
+
+  const messageArg = mockShowMessage.mock.calls[0][0] as {
+    props: { children: unknown[] };
+  };
+  const messageText = JSON.stringify(messageArg);
+  expect(messageText).toMatch(/Autosave skipped: \d+ issue\(s\) found\./);
+
+  act(() => {
+    jest.advanceTimersByTime(2000);
+  });
+  expect(mockProjectSegmentSave).not.toHaveBeenCalled();
+
+  jest.useRealTimers();
+});