Chapter Editor redesign

[nichwall]

In trying to figure out the best way to show the Lookup chapters next to the existing chapters (mentioned in #2640), I spent some time trying to redesign the Chapter page. Afterwards, I found some similar requests which touch on some of the same points.

• [Enhancement]: Chapter editor "Set chapters from tracks" button to use ID3 title tags instead of filename #2816
• [Enhancement]: Rescan file for chapter markers via edit chapters dialog #2225

The main things to change in the layout:

• Move the book duration to just below the title.
• Keep the "use seconds instead of timestamps" checkbox, but also add "use duration instead of start time" and have those apply to all of the time related displays.
• Make sure the titles of the left and right halves are aligned.
• Left half:
  • In the left half, make the "Remove All" instead just clear the left side and not remove all chapters from the library item. This way users can still "Revert" or do some more manual edits before the chapters are deleted from the item.
  • Redesign the "shift times" and not have it be collapsible so both sides stay in alignment.
    • This could be by having a text field and a plus/minus on either side to automatically apply the seconds difference. Or, having 4 buttons, -6 -1 +1 +6. 6 was chosen because that is the length of the Audible intro.
  • Move the "add, remove, play" chapter buttons to the left? Not really sure where to put those.
  • The timestamp of the very first chapter is greyed out and cannot be changed from 00:00:00. This makes it visually distinct and helps users to see that the start time will not change by using the "shift times"
  • It might be nice if the chapters are draggable to more easily reorder, but that would make the "start times" a bit annoying to clean up.
• Right half:
  • Make the right side have 3 tabs: Tracks, ID3 Chapters, Lookup and make the rows align with the left side so it's easier to visually compare them. The right side is not editable and is used for information purposes only. Each one of the 3 tabs has a "set chapters" button that removes all chapters from the left and copies data from the right to the left like it currently does for filenames.
    • Tracks: remove the "Chapters" checkbox column and move the "time" column to the left of the filename so all 3 tabs have the same layout. By default the time column is "start time".
    • ID3 Chapters: add a "probe audio files" button that gets the chapters and builds the list on the right side. If no embedded tracks are found, then display a message.
    • Lookup: move the current Audible chapter lookup out of the modal and put it in this main tab. Have the ASIN, Region, and search buttons in the top so it is easier to search again with different criteria.
• Add a "copy arrow" between the columns on the left and right to make updating individual chapters easier. This arrow would not appear on narrow screens because the "right" becomes the "top"
• It would be nice if chapters in the left side could be draggable like in the Track Editor, but not sure how hard that would be to add.

I spent some time trying to figure out how to make this intuitive on a mobile device or smaller screen, and my conclusion is "this should really be done with an actual monitor, but the new layout does not make the mobile experience worse." This should also be manageable with screen readers, but not sure how well the "copy arrow" functionality would work for that.

Narrow Screen behavior

[advplyr]

I like the idea of having tabs and showing chapters side-by-side for comparison.

I'm not sure how dragging would work with regard to the start time. I think the start times should stay ascending. I only had one case just yesterday where I wanted to drag a chapter and it was due to a bug that I just fixed. Other than that I can't think of why I'm dragging.

I like the option to re-probe audio files for embedded chapters. I have to think about this tab some more because one thing that was useful was being able to tell quickly if a book had multiple files with embedded chapters or one when debugging issues. If there are multiple files with embedded chapters they might be merged.

For #2816 I think we would have to show this on the tracks tab. A toggle between filename and ID3 title if it is present or something like that.

I can't think of a scenario where the arrow between each chapter row would be useful. Each tab would need similar buttons that are now on the lookup modal, "Apply Chapters" and "Map Chapters".

One thing I've been wanting to update on the chapter editor probably the most of all is the sample audio feature. I think when sampling the chapter this needs to show a separate audio player somewhere that allows seeking and showing the timestamp. I haven't thought of a good way to implement that yet but I use the sample feature the most when checking if times match up to the audio.

[nichwall]

Yeah, dragging doesn't really fit. The main use case I was thinking of is if you want to drag say "chapter 5" from the right to be after "chapter 7" because there are extra introduction chapters, but adding a row then copy/pasting should be good enough for that. This logic also applies to the arrows so they could be removed.

A toggle between the tracks and ID3 tabs would work. I was thinking that separating them out a bit would make it easier to see where the chapters on the left came from. Maybe having something like the file name be small above the first chapter that is in the track. This would be difficult for chapters that span multiple tracks.

File names above ID3 chapter titles

Yes, each tab would need the "Apply Chapters" and "Map Chapters" button.

Maybe it could just be a little player box that appears at the top of the left column? All it would really need is the "play/pause" button, a "forward/backward" button, and a timestamp display. It could show a track bar like in the normal web player, but be zoomed it to 5 minutes in both directions or something instead of showing the entire book.

[advplyr]

A toggle between the tracks and ID3 tabs would work. I was thinking that separating them out a bit would make it easier to see where the chapters on the left came from. Maybe having something like the file name be small above the first chapter that is in the track. This would be difficult for chapters that span multiple tracks.

I misunderstood what you originally meant by the ID3 Chapters tab. I was thinking this would be the tab that shows the embedded chapters and allow for re-probing that info.
The 2 ways chapters are set are either using the tracks or using embedded chapter markers. When using tracks for chapters there is a check to see if the ID3 title tags meet a criteria.

audiobookshelf/server/scanner/AudioFileScanner.js

Lines 492 to 498 in 6fa49e0

	} else if (audioFiles.length > 1) {
	// In some cases the ID3 title tag for each file is the chapter title, the criteria to determine if this will be used
	// 1. Every audio file has an ID3 title tag set
	// 2. None of the title tags are the same as the book title
	// 3. Every ID3 title tag is unique
	const metaTagTitlesFound = [...new Set(audioFiles.map((af) => af.metaTags?.tagTitle).filter((tagTitle) => !!tagTitle && tagTitle !== bookTitle))]
	const useMetaTagAsTitle = metaTagTitlesFound.length === audioFiles.length

[nichwall]

Oh, yes I was thinking the ID3 Chapters tab would probe that info like you said with the embedded chapter markers. I was thinking the user can still have the option for which ones to apply in ABS and just include them all in this tab. I don't really use embedded chapters so I am probably mixing things up with them.

[advplyr]

Okay yeah the ID3 chapter titles are just for when using tracks to make chapters so that is why I was thinking they should be shown in the tracks tab somehow.

[advplyr]

The ID3 Chapters tab would be named Embedded Chapters or something like that, since it's not ID3. Although it could be ID3 if they have Overdrive Chapter markers set.

[ZLoth]

First off, I love the book "Match" feature that pulls the data from a data source (usually Audible) and updates the information displayed in both the Details and Cover tab. I think the same principal should apply to editing chapters.

The challenge is that while Audible does a good job of dividing a book into time-stamped chapters, a significant number of titles have just the numbered chapters without actually adding the chapter labels including Prologue, Epilogue, Epigraph, and what have you. I end up taking the converted MP3 files and adding my own ID3 labels (embedded chapters) for each chapter after doing research (looking up the Kindle version of the book and pulling those chapter titles). So, that gives up several possibilities of importing the chapter data:

• Metadata from Amazon (if ASIN is available)
• Filenames (which is present)
• Embedded chapters (ID3 tags)
• Export/import as Comma-separated or tab-separated file (possible future functionality)

The left-most tab would be the existing chapter editor. The other tabs are import functions so that a administrator can preview the timestamp and chapter title, then click the "Set chapters from tracks" to update the Chapter Editor. That data would not be saved until the "Save" button is clicked in the chapter editor.

Having it as tabs would provide possible future import options while keeping the interface clean.

Here are some rough visualizations based upon the existing design:

Metadata and Embedded Chapters would follow the same design.

[ZLoth]

Following up on the status of this issue.

[nichwall]

I haven't worked on this at all since the initial discussion

[ZLoth]

Acknowledged. This is something that I really need in organizing my book collection. :D

[ZLoth]

Following up on the status of this feature request. Yes, I'm very much interested in the import from metadata function to clean up the chapters in my library.