3 files changed, 28 insertions, 6 deletions

diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index e4f723079..78c5e5592 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -195,10 +195,11 @@ export class PeerTubeEmbed {
       const {
         videoResponse,
         captionsPromise,
+        chaptersPromise,
         storyboardsPromise
       } = await this.videoFetcher.loadVideo({ videoId: uuid, videoPassword: this.videoPassword })
 
-      return this.buildVideoPlayer({ videoResponse, captionsPromise, storyboardsPromise, forceAutoplay })
+      return this.buildVideoPlayer({ videoResponse, captionsPromise, chaptersPromise, storyboardsPromise, forceAutoplay })
     } catch (err) {
 
       if (await this.handlePasswordError(err)) this.loadVideoAndBuildPlayer({ ...options })
@@ -210,9 +211,10 @@ export class PeerTubeEmbed {
     videoResponse: Response
     storyboardsPromise: Promise<Response>
     captionsPromise: Promise<Response>
+    chaptersPromise: Promise<Response>
     forceAutoplay: boolean
   }) {
-    const { videoResponse, captionsPromise, storyboardsPromise, forceAutoplay } = options
+    const { videoResponse, captionsPromise, chaptersPromise, storyboardsPromise, forceAutoplay } = options
 
     const videoInfoPromise = videoResponse.json()
       .then(async (videoInfo: VideoDetails) => {
@@ -233,11 +235,13 @@ export class PeerTubeEmbed {
       { video, live, videoFileToken },
       translations,
       captionsResponse,
+      chaptersResponse,
       storyboardsResponse
     ] = await Promise.all([
       videoInfoPromise,
       this.translationsPromise,
       captionsPromise,
+      chaptersPromise,
       storyboardsPromise,
       this.buildPlayerIfNeeded()
     ])
@@ -260,6 +264,7 @@ export class PeerTubeEmbed {
     const loadOptions = await this.playerOptionsBuilder.getPlayerLoadOptions({
       video,
       captionsResponse,
+      chaptersResponse,
       translations,
 
       storyboardsResponse,
diff --git a/client/src/standalone/videos/shared/player-options-builder.ts b/client/src/standalone/videos/shared/player-options-builder.ts
index 3437ef421..dec859409 100644
--- a/client/src/standalone/videos/shared/player-options-builder.ts
+++ b/client/src/standalone/videos/shared/player-options-builder.ts
@@ -5,6 +5,7 @@ import {
   Storyboard,
   Video,
   VideoCaption,
+  VideoChapter,
   VideoDetails,
   VideoPlaylistElement,
   VideoState,
@@ -199,6 +200,8 @@ export class PlayerOptionsBuilder {
 
     storyboardsResponse: Response
 
+    chaptersResponse: Response
+
     live?: LiveVideo
 
     alreadyPlayed: boolean
@@ -229,12 +232,14 @@ export class PlayerOptionsBuilder {
       forceAutoplay,
       playlist,
       live,
-      storyboardsResponse
+      storyboardsResponse,
+      chaptersResponse
     } = options
 
-    const [ videoCaptions, storyboard ] = await Promise.all([
+    const [ videoCaptions, storyboard, chapters ] = await Promise.all([
       this.buildCaptions(captionsResponse, translations),
-      this.buildStoryboard(storyboardsResponse)
+      this.buildStoryboard(storyboardsResponse),
+      this.buildChapters(chaptersResponse)
     ])
 
     return {
@@ -248,6 +253,7 @@ export class PlayerOptionsBuilder {
       subtitle: this.subtitle,
 
       storyboard,
+      videoChapters: chapters,
 
       startTime: playlist
         ? playlist.playlistTracker.getCurrentElement().startTimestamp
@@ -312,6 +318,12 @@ export class PlayerOptionsBuilder {
     }
   }
 
+  private async buildChapters (chaptersResponse: Response) {
+    const { chapters } = await chaptersResponse.json() as { chapters: VideoChapter[] }
+
+    return chapters
+  }
+
   private buildPlaylistOptions (options?: {
     playlistTracker: PlaylistTracker
     playNext: () => any
diff --git a/client/src/standalone/videos/shared/video-fetcher.ts b/client/src/standalone/videos/shared/video-fetcher.ts
index 9149d946e..c52861189 100644
--- a/client/src/standalone/videos/shared/video-fetcher.ts
+++ b/client/src/standalone/videos/shared/video-fetcher.ts
@@ -36,9 +36,10 @@ export class VideoFetcher {
     }
 
     const captionsPromise = this.loadVideoCaptions({ videoId, videoPassword })
+    const chaptersPromise = this.loadVideoChapters({ videoId, videoPassword })
     const storyboardsPromise = this.loadStoryboards(videoId)
 
-    return { captionsPromise, storyboardsPromise, videoResponse }
+    return { captionsPromise, chaptersPromise, storyboardsPromise, videoResponse }
   }
 
   loadLive (video: VideoDetails) {
@@ -64,6 +65,10 @@ export class VideoFetcher {
     return this.http.fetch(this.getVideoUrl(videoId) + '/captions', { optionalAuth: true }, videoPassword)
   }
 
+  private loadVideoChapters ({ videoId, videoPassword }: { videoId: string, videoPassword?: string }): Promise<Response> {
+    return this.http.fetch(this.getVideoUrl(videoId) + '/chapters', { optionalAuth: true }, videoPassword)
+  }
+
   private getVideoUrl (id: string) {
     return window.location.origin + '/api/v1/videos/' + id
   }