Progression component and its variants

[JayPanoz]

There are different ways to express progression in a UI, and options are not exclusive as can be seen in Thorium for instance, but also other Reading Apps.

While implementing a first iteration of progression as X of Y pattern, the need for fallbacks led to a progression object with the following:

interface Progression {
  totalPositions?: number; // total from PositionsList
  currentPositions?: number[]; // current position numbers from EPUBNavigator
  relativeProgression?: number; // progression from Locator.locations
  currentChapter?: string; // title of the current chapter if any
  totalProgression?: number; // totalProgression from Locator.locations
  currentPublication?: string; // title of the current publication
}

Then you can build the following expressions from it, in this order of priority:

1. currentNumbers of total e.g. “20–21 of 494”;
2. totalProgression of currentPublication e.g. “20% of Moby-Dick”;
3. relativeProgression of currentChapter e.g. “20% of Chapter 1”.

In upcoming iterations, this could become a lot more complex. For instance:

• it could be a Reading System Preference developers can set;
• it could also change dynamically if the user clicked on progression;
• it could be implemented as what Thorium does, presenting information contextually with hover state for chapters on a progress bar for the entire publication;
• it could be abstracted e.g. “5 pages left in this chapter”, etc.

It’s important we identify possible variants to design and build this component.

[llemeurfr]

Just a remark on "currentNumbers". This name a bit odd (even if "page number" is not) and would be more comfortable with "currentPositions". "total" could also be clarified as "totalPositions".

To replicate a navigation bar like the one in Thorium, the app would need an additional array of structures, one per resource, each one with the count of existing positions in the resource, and the title of the resource.

[JayPanoz]

Just a remark on "currentNumbers". This name a bit odd (even if "page number" is not) and would be more comfortable with "currentPositions". "total" could also be clarified as "totalPositions".

Ah yes good point, they are currently mapped to the props in PositionsList and EPUBNavigator but they don’t need to be. Will change their name.

To replicate a navigation bar like the one in Thorium, the app would need an additional array of structures, one per resource, each one with the count of existing positions in the resource, and the title of the resource.

Thanks for the details. It may well be relevant for ts-toolkit as well as it looks like returning a range for the current positions was probably just a start.