From f8a760d729d3464137f6f8dbc23b5bad4ed5de09 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Sat, 14 Dec 2019 07:41:46 +1100
Subject: [PATCH] Fix vtt for chapter display in scene players (#263)

---
 pkg/api/routes_scene.go                       | 32 +++++++++++++++++--
 pkg/utils/vtt.go                              |  5 ++-
 .../scenes/ScenePlayer/ScenePlayer.tsx        |  1 +
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/pkg/api/routes_scene.go b/pkg/api/routes_scene.go
index df7be0092..b5cf8827e 100644
--- a/pkg/api/routes_scene.go
+++ b/pkg/api/routes_scene.go
@@ -112,6 +112,33 @@ func (rs sceneRoutes) Webp(w http.ResponseWriter, r *http.Request) {
 	http.ServeFile(w, r, filepath)
 }
 
+func getChapterVttTitle(marker *models.SceneMarker) string {
+	if marker.Title != "" {
+		return marker.Title
+	}
+
+	qb := models.NewTagQueryBuilder()
+	primaryTag, err := qb.Find(marker.PrimaryTagID, nil)
+	if err != nil {
+		// should not happen
+		panic(err)
+	}
+
+	ret := primaryTag.Name
+
+	tags, err := qb.FindBySceneMarkerID(marker.ID, nil)
+	if err != nil {
+		// should not happen
+		panic(err)
+	}
+
+	for _, t := range tags {
+		ret += ", " + t.Name
+	}
+
+	return ret
+}
+
 func (rs sceneRoutes) ChapterVtt(w http.ResponseWriter, r *http.Request) {
 	scene := r.Context().Value(sceneKey).(*models.Scene)
 	qb := models.NewSceneMarkerQueryBuilder()
@@ -121,10 +148,11 @@ func (rs sceneRoutes) ChapterVtt(w http.ResponseWriter, r *http.Request) {
 	}
 
 	vttLines := []string{"WEBVTT", ""}
-	for _, marker := range sceneMarkers {
+	for i, marker := range sceneMarkers {
+		vttLines = append(vttLines, strconv.Itoa(i+1))
 		time := utils.GetVTTTime(marker.Seconds)
 		vttLines = append(vttLines, time+" --> "+time)
-		vttLines = append(vttLines, marker.Title)
+		vttLines = append(vttLines, getChapterVttTitle(marker))
 		vttLines = append(vttLines, "")
 	}
 	vtt := strings.Join(vttLines, "\n")
diff --git a/pkg/utils/vtt.go b/pkg/utils/vtt.go
index f80ef6f7b..af07a3801 100644
--- a/pkg/utils/vtt.go
+++ b/pkg/utils/vtt.go
@@ -5,7 +5,7 @@ import (
 	"time"
 )
 
-// GetVTTTime returns a timestamp appropriate for VTT files (hh:mm:ss)
+// GetVTTTime returns a timestamp appropriate for VTT files (hh:mm:ss.mmm)
 func GetVTTTime(totalSeconds float64) (s string) {
 	totalSecondsString := strconv.FormatFloat(totalSeconds, 'f', -1, 64)
 	secondsDuration, _ := time.ParseDuration(totalSecondsString + "s")
@@ -34,5 +34,8 @@ func GetVTTTime(totalSeconds float64) (s string) {
 	}
 	s += strconv.Itoa(seconds)
 
+	// videojs requires milliseconds
+	s += ".000"
+
 	return
 }
diff --git a/ui/v2/src/components/scenes/ScenePlayer/ScenePlayer.tsx b/ui/v2/src/components/scenes/ScenePlayer/ScenePlayer.tsx
index 80c2a4a39..7b84e99c6 100644
--- a/ui/v2/src/components/scenes/ScenePlayer/ScenePlayer.tsx
+++ b/ui/v2/src/components/scenes/ScenePlayer/ScenePlayer.tsx
@@ -91,6 +91,7 @@ export class VideoJSPlayer extends React.Component<IVideoJSPlayerProps> {
               poster={this.props.scene.paths.screenshot}
               controls 
               preload="auto">
+            <track kind="chapters" label="Markers" src={this.props.scene.paths.chapters_vtt} default></track>
           </video>
         </div>
       </div>