Show funscript heatmaps in player (#3374)

* Make the indicator transparent and add a background-size class
* Show the heatmap if available
* Styling tweaks

---------
Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

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

@@ -350,6 +350,14 @@ export const ScenePlayerScrubber: React.FC<IScenePlayerScrubberProps> = ({
       </Button>
       <div ref={contentEl} className="scrubber-content">
         <div className="scrubber-tags-background" />
+        <div
+          className="scrubber-heatmap"
+          style={{
+            backgroundImage: scene.paths.interactive_heatmap
+              ? `url(${scene.paths.interactive_heatmap})`
+              : undefined,
+          }}
+        />
         <div ref={indicatorEl} id="scrubber-position-indicator" />
         <div id="scrubber-current-position" />
         <div className="scrubber-viewport">

ui/v2.5/src/components/ScenePlayer/styles.scss

@@ -382,7 +382,7 @@ $sceneTabWidth: 450px;
 }
 
 #scrubber-position-indicator {
-  background-color: #ccc;
+  background-color: rgba(255, 255, 255, 0.7);
   height: 20px;
   left: -100%;
   position: absolute;
@@ -426,6 +426,14 @@ $sceneTabWidth: 450px;
   }
 }
 
+.scrubber-heatmap {
+  background-size: 100% 100%;
+  height: 20px;
+  left: 0;
+  position: absolute;
+  right: 0;
+}
+
 .scrubber-tag {
   background-color: #000;
   cursor: pointer;

ui/v2.5/src/docs/en/Changelog/v0200.md

@@ -1,4 +1,5 @@
 ### ✨ New Features
+* Show funscript heatmaps in scene player scrubber. ([#3374](https://github.com/stashapp/stash/pull/3374))
 * Support customising the filename regex used for determining the gallery cover image. ([#3391](https://github.com/stashapp/stash/pull/3391))
 * Added tenth-place rating precision option. ([#3343](https://github.com/stashapp/stash/pull/3343))
 * Added toggleable favorite button to Performer cards. ([#3369](https://github.com/stashapp/stash/pull/3369))