Fix vtt for chapter display in scene players (#263)

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")

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
 }

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>