Add interface option to show range markers

graphql/schema/types/config.graphql

@@ -355,6 +355,9 @@ input ConfigInterfaceInput {
   "Show scene scrubber by default"
   showScrubber: Boolean
 
+  "Show scene range markers by default"
+  showRangeMarkers: Boolean
+
   "Maximum duration (in seconds) in which a scene video will loop in the scene player"
   maximumLoopDuration: Int
   "If true, video will autostart on load in the scene player"
@@ -421,6 +424,9 @@ type ConfigInterfaceResult {
   "Show scene scrubber by default"
   showScrubber: Boolean
 
+  "Show scene range markers by default"
+  showRangeMarkers: Boolean
+
   "Maximum duration (in seconds) in which a scene video will loop in the scene player"
   maximumLoopDuration: Int
   "True if we should not auto-open a browser window on startup"

internal/api/resolver_mutation_configure.go

@@ -457,6 +457,7 @@ func (r *mutationResolver) ConfigureInterface(ctx context.Context, input ConfigI
 	r.setConfigBool(config.NotificationsEnabled, input.NotificationsEnabled)
 
 	r.setConfigBool(config.ShowScrubber, input.ShowScrubber)
+	r.setConfigBool(config.ShowRangeMarkers, input.ShowRangeMarkers)
 
 	r.setConfigString(config.WallPlayback, input.WallPlayback)
 	r.setConfigInt(config.MaximumLoopDuration, input.MaximumLoopDuration)

internal/api/resolver_query_configuration.go

@@ -141,6 +141,7 @@ func makeConfigInterfaceResult() *ConfigInterfaceResult {
 	soundOnPreview := config.GetSoundOnPreview()
 	wallShowTitle := config.GetWallShowTitle()
 	showScrubber := config.GetShowScrubber()
+	showRangeMarkers := config.GetShowRangeMarkers()
 	wallPlayback := config.GetWallPlayback()
 	noBrowser := config.GetNoBrowser()
 	notificationsEnabled := config.GetNotificationsEnabled()
@@ -168,6 +169,7 @@ func makeConfigInterfaceResult() *ConfigInterfaceResult {
 		WallShowTitle:                &wallShowTitle,
 		WallPlayback:                 &wallPlayback,
 		ShowScrubber:                 &showScrubber,
+		ShowRangeMarkers:             &showRangeMarkers,
 		MaximumLoopDuration:          &maximumLoopDuration,
 		NoBrowser:                    &noBrowser,
 		NotificationsEnabled:         &notificationsEnabled,

internal/manager/config/config.go

@@ -195,6 +195,9 @@ const (
 	ShowScrubber        = "show_scrubber"
 	showScrubberDefault = true
 
+	ShowRangeMarkers    = "show_rangemarkers"
+	showRangeMarkersDef = true
+
 	WallPlayback        = "wall_playback"
 	defaultWallPlayback = "video"
 
@@ -1212,6 +1215,10 @@ func (i *Config) GetShowScrubber() bool {
 	return i.getBoolDefault(ShowScrubber, showScrubberDefault)
 }
 
+func (i *Config) GetShowRangeMarkers() bool {
+	return i.getBoolDefault(ShowRangeMarkers, showRangeMarkersDef)
+}
+
 func (i *Config) GetMaximumLoopDuration() int {
 	return i.getInt(MaximumLoopDuration)
 }

ui/v2.5/graphql/data/config.graphql

@@ -75,6 +75,7 @@ fragment ConfigInterfaceData on ConfigInterfaceResult {
   wallShowTitle
   wallPlayback
   showScrubber
+  showRangeMarkers
   maximumLoopDuration
   noBrowser
   notificationsEnabled

ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx

@@ -718,13 +718,21 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
         // Wait for colors
         await markers.findColors(uniqueTagNames);
 
+        const showRangeTags = interfaceConfig?.showRangeMarkers ?? true;
         const timestampMarkers: IMarker[] = [];
         const rangeMarkers: IMarker[] = [];
-        for (const marker of markerData) {
-          if (marker.end_seconds === null) {
+
+        if (!showRangeTags) {
+          for (const marker of markerData) {
             timestampMarkers.push(marker);
-          } else {
-            rangeMarkers.push(marker);
+          }
+        } else {
+          for (const marker of markerData) {
+            if (marker.end_seconds === null) {
+              timestampMarkers.push(marker);
+            } else {
+              rangeMarkers.push(marker);
+            }
           }
         }
 

ui/v2.5/src/components/ScenePlayer/markers.ts

@@ -68,9 +68,7 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
       range?: HTMLDivElement;
     } = {};
     const seekBar = this.player.el().querySelector(".vjs-progress-control");
-    if (marker.end_seconds) {
-      throw new Error("Cannot add range marker with addDotMarker");
-    }
+
     markerSet.dot = videojs.dom.createEl("div") as HTMLDivElement;
     markerSet.dot.className = "vjs-marker-dot";
     if (duration) {

ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx

@@ -351,6 +351,12 @@ export const SettingsInterfacePanel: React.FC = PatchComponent(
             checked={iface.showScrubber ?? undefined}
             onChange={(v) => saveInterface({ showScrubber: v })}
           />
+          <BooleanSetting
+            id="show-rangemarkers"
+            headingID="config.ui.scene_player.options.show_rangemarkers"
+            checked={iface.showRangeMarkers ?? undefined}
+            onChange={(v) => saveInterface({ showRangeMarkers: v })}
+          />
           <BooleanSetting
             id="always-start-from-beginning"
             headingID="config.ui.scene_player.options.always_start_from_beginning"

ui/v2.5/src/locales/en-GB.json

@@ -750,6 +750,7 @@
           "enable_chromecast": "Enable Chromecast",
           "show_ab_loop_controls": "Show AB Loop plugin controls",
           "show_scrubber": "Show Scrubber",
+          "show_rangemarkers": "Show Range Markers",
           "track_activity": "Enable Scene Play history",
           "vr_tag": {
             "description": "The VR button will only be displayed for scenes with this tag.",