Thumbnails: Add supplementary metadata to getAvailableThumbnailTracks

Based on #1496

Problem
-------

We're currently trying to provide a complete[1] and easy to-use API for
DASH thumbnail tracks in the RxPlayer.

Today the proposal is to have an API called `renderThumbnail`, to which
an application would just provide an HTML element and a timestamp, and
the RxPlayer would do all that's necessary to fetch the corresponding
thumbnail and display it in the corresponding element.

The API is like so:
```js
rxPlayer.renderThumbnail({ element, time })
  .then(() => console.log("The thumbnail is now rendered in the element"));
```

This works and seems to me very simple to understand.

Yet, we've known of advanced use cases where an application might not
just want to display a single thumbnail for a single position. For
example, there's very known examples where an application displays a
window of multiple thumbnails at once on the player's UI to facilitate
navigation inside the content.

To do that under the solution proposed in #1496, an application could
just call `renderThumbnail` with several `element` and `time` values.

Yet for this type of feature, what the interface would want is not really
to indicate a `time` values, it actually wants basically a list of
distinct thumbnails around/before/after a given position.

By just being able to set a `time` value, an application is blind on
which `time` value is going to lead to a different timestamp (i.e. is
the thumbnail for the `time` `11` different than the thumbnail for the
`time` `12`? Nobody - but the RxPlayer - knows).

So we have to find a solution for this

[1] By complete, I here mean that we want to be able to handle its
complexities inside the RxPlayer, to ensure complex DASH situations like
multi-CDN, retry settings for requests and so on while still allowing
all potential use cases for an application.

Solution
--------

In this solution, I experiment with a second thumbnail API,
`getAvailableThumbnailTracks` (it already exists in #1496, but its role
there was only to list the various thumbnail qualities, if there are
several size for example). As this solution build upon yet stays
compatible to #1496, I chose to open this second PR on top of that
previous one.

I profit from the fact that most standardized thumbnail implementations I
know of (BIF, DASH) seem follow the principle of having evenly-spaced
(in terms of time) thumbnails (though I do see a possibility
for that to change, e.g. to have thumbnails corresponding to "important"
scenes instead, so our implementation has to be resilient).

So here, what this commit does is to add the following properties (all
optional) to a track returned by the `getAvailableThumbnailTracks` API:

  - `start`: The initial `time` the first thumbnail of that track will
    apply to

  - `end`: The last `time` the last thumbnail of that track will
    apply to

  - thumbnailsPerSegment: Individual thumbnails may be technically part of
    "segments" containing multiple consecutive thumbnails each.

    `thumbnailsPerSegment` is the number of thumbnails each of those
    segments contain.

    For example you could have stored on the server a segment which is a
    grid of 2 x 3 (2 horizontal rows and * 3 vertical columns)
    thumbnails, which the RxPlayer will load at once then "cut" the right
    way when calling `renderThumbnail`. In that example,
    `thumbnailsPerSegment` would be set to `6` (2*3).

    Note that the last segment of a content may contain less thumbnails as
    anounced here depending on the duration of the content.

  - `segmentDuration`: The "duration" (in seconds) each segments of
    thumbnails applies to (with the exception of the last thumbnail,
    which just fills until `end`)

Then, an application should have all information needed to calculate a
`time` which correspond to a different thumbnail.

Though this solution lead to a minor issue: by letting application make
the `time` operation themselves with `start`, `end`, `segmentDuration`
and so on, there's a risk of rounding errors leading to a `time`
which does not correspond to the thumbnail wanted but the one before or
after. To me, we could just indicate in our API documentation to
application developers that they should be extra careful and may add an
epsilon (or even choose a `time` in the "middle" of thumbnails each time)
if they want that type of thumbnail list feature.

Thoughts?

Author: peaBerberian

src/main_thread/api/public_api.ts

@@ -856,6 +856,10 @@ class Player extends EventEmitter<IPublicAPIEvent> {
         width: Math.floor(t.width / t.horizontalTiles),
         height: Math.floor(t.height / t.verticalTiles),
         mimeType: t.mimeType,
+        start: t.start,
+        end: t.end,
+        thumbnailDuration: t.tileDuration,
+        thumbnailsPerSegment: t.horizontalTiles * t.verticalTiles,
       };
     });
   }

src/public_types.ts

@@ -1395,6 +1395,59 @@ export interface IThumbnailTrackInfo {
    * `image/jpeg` or `image/png`.
    */
   mimeType: string | undefined;
+  /**
+   * Starting `position` the first thumbnail of this thumbnail track applies to,
+   * if known.
+   */
+  start: number | undefined;
+  /**
+   * Ending `position` the last thumbnail of this thumbnail track applies to,
+   * if known.
+   */
+  end: number | undefined;
+  /**
+   * Individual thumbnails may be technically part of "segments" containing
+   * multiple consecutive thumbnails each.
+   *
+   * `thumbnailsPerSegment` is the number of `thumbnails` each segments have.
+   *
+   * For example you could have stored on the server a segment which is a grid
+   * of 2 x 3 (2 horizontal rows and 3 vertical columns) thumbnails, which the
+   * RxPlayer will load at once then "cut" the right way when calling
+   * `renderThumbnail`. In that example, `thumbnailsPerSegment` would be set to
+   * `6` (2*3).
+   *
+   * Note that the last segment of a content may contain less thumbnails as
+   * anounced here depending on the duration of the content.
+   *
+   * You may want to rely on this information alongside `thumbnailDuration` to
+   * construct a list of available thumbnails and/or of available segments of
+   * thumbnails.
+   */
+  thumbnailsPerSegment: number | undefined;
+  /**
+   * When loaded, thumbnails are part of so-called "segments" which may contain
+   * either a single thumbnail or a grid of them (@see `thumbnailsPerSegment`).
+   *
+   * This `thumbnail` property indicates a duration in seconds each thumbnail
+   * apply to.
+   * You can multiply that value with `thumbnailsPerSegment` to get the amount
+   * of time each segment applies to.
+   *
+   * Set to `undefined` either the duration is unknown or if the duration
+   * depends from segment to segments.
+   *
+   * For example, with a `start` set to `10`, an `end` set to `26`, a
+   * `thumbnailsPerSegment` set to `2` and a `tileDuration` set to
+   * `3`, there should be 3 segments, each with 2 thumbnails of 3 seconds each:
+   * 1. A segment of 2 thumbnails for the seconds: 10-16
+   *    (The first thumbnail in that segment for 10-13, the second for 13-16)
+   * 2. A segment of 2 thumbnails for the seconds: 16-22
+   *    (The first thumbnail in that segment for 16-19, the second for 19-22)
+   * 3. A segment of 2 thumbnails for the seconds: 22-26 (the end)
+   *    (The first thumbnail in that segment for 22-25, the second for 25-26)
+   */
+  thumbnailDuration: number | undefined;
 }
 
 /**