Create View Chapter page

[chadw-eten]

This is the MVP version of the View Chapter page. There is just enough functionality to show recording and playback functionality.

Functional Requirements

• Title: Book Chapter

• Show a back caret/arrow which when tapped should take the user back to the View Project page.

• Source Card

  • Title: [Source Bible] - Verse [#]
  • If there is source audio, show a play bar.
  • Note: For this MVP the styling of the media player can be the default. Don't spend time on it.
  • If there is textual source, show an accordion with the title "Show Source Text".
    • It should default to closed.
    • When it is open the title should be "Hide Source Text".
    • When it is open it should show 3 lines of source text and then scroll after that. This will keep the Target/Record card below the source card on the same screen.

• Target/Record Card

  • Title: [Language name] - Verse [#]
  • When there is no draft recording yet, show a record icon (left mockup).
  • Tapping on the icon should start recording and the icon should change to a square stop icon with the same red circle background.
  • When a draft recording does exist, show the play bar to listen to the recording (right mockup).
  • Show a delete icon below the play bar.
  • When a user taps on the delete icon, it should delete the recording and revert back to the state in the left mockup.

• Verse Navigation Chips

  • Show a row of chips with verse numbers in them, one for each verse in the chapter.
  • Tapping on a chip should select that verse and populate it in the body above.
  • When a verse has a recording done, show the mic icon in the upper right corner of the chip for that verse.
  • The chips should scroll horizontally when needed.

• Note: This only addresses the happy path. We will address errors like failure to load data in the next iteration.

[B3RN153]

SP3

1. Create view chapter page - (ET 2hr)