From 2b84392df744853cf7aa44bdedba840626e98455 Mon Sep 17 00:00:00 2001
From: pornstasche <123502956+pornstasche@users.noreply.github.com>
Date: Wed, 22 Feb 2023 23:38:14 +0100
Subject: [PATCH] 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>
---
 .../src/components/ScenePlayer/ScenePlayerScrubber.tsx |  8 ++++++++
 ui/v2.5/src/components/ScenePlayer/styles.scss         | 10 +++++++++-
 ui/v2.5/src/docs/en/Changelog/v0200.md                 |  1 +
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayerScrubber.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayerScrubber.tsx
index 9c7b92f97..565005cf8 100644
--- a/ui/v2.5/src/components/ScenePlayer/ScenePlayerScrubber.tsx
+++ b/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">
diff --git a/ui/v2.5/src/components/ScenePlayer/styles.scss b/ui/v2.5/src/components/ScenePlayer/styles.scss
index 76a8ba73e..8e717892f 100644
--- a/ui/v2.5/src/components/ScenePlayer/styles.scss
+++ b/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;
diff --git a/ui/v2.5/src/docs/en/Changelog/v0200.md b/ui/v2.5/src/docs/en/Changelog/v0200.md
index 874b842d1..329714a9c 100644
--- a/ui/v2.5/src/docs/en/Changelog/v0200.md
+++ b/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))