From 848f4ff3a8d5e8165c719a2c7facf2bf800e8991 Mon Sep 17 00:00:00 2001
From: peter23231 <148326204+peter23231@users.noreply.github.com>
Date: Thu, 2 Nov 2023 21:40:24 +0100
Subject: [PATCH] feat: Add option to show heatmaps in the scene list (#1461)

* Add script heatmap to scene list as toggleable option (#1)

* 'Improve' CSS

* Actually 'improved' CSS

* fix for some funscripts which fail to generate a heatmap
---
 pkg/api/options.go                            |  2 ++
 pkg/config/config.go                          |  1 +
 pkg/config/state.go                           |  1 +
 ui/src/store/optionsWeb.js                    |  3 +++
 .../views/options/sections/InterfaceWeb.vue   | 13 ++++++++++
 ui/src/views/scenes/SceneCard.vue             | 25 +++++++++++++++++++
 6 files changed, 45 insertions(+)

diff --git a/pkg/api/options.go b/pkg/api/options.go
index eef169b24..20d55de85 100644
--- a/pkg/api/options.go
+++ b/pkg/api/options.go
@@ -56,6 +56,7 @@ type RequestSaveOptionsWeb struct {
 	ShowHspFile       bool   `json:"showHspFile"`
 	ShowSubtitlesFile bool   `json:"showSubtitlesFile"`
 	SceneTrailerlist  bool   `json:"sceneTrailerlist"`
+	ShowScriptHeatmap bool   `json:"showScriptHeatmap"`
 	UpdateCheck       bool   `json:"updateCheck"`
 }
 
@@ -379,6 +380,7 @@ func (i ConfigResource) saveOptionsWeb(req *restful.Request, resp *restful.Respo
 	config.Config.Web.ShowHspFile = r.ShowHspFile
 	config.Config.Web.ShowSubtitlesFile = r.ShowSubtitlesFile
 	config.Config.Web.SceneTrailerlist = r.SceneTrailerlist
+	config.Config.Web.ShowScriptHeatmap = r.ShowScriptHeatmap
 	config.Config.Web.UpdateCheck = r.UpdateCheck
 	config.SaveConfig()
 
diff --git a/pkg/config/config.go b/pkg/config/config.go
index 09b699d36..6ee6482b3 100644
--- a/pkg/config/config.go
+++ b/pkg/config/config.go
@@ -41,6 +41,7 @@ type ObjectConfig struct {
 		ShowHspFile       bool   `default:"true" json:"showHspFile"`
 		ShowSubtitlesFile bool   `default:"true" json:"showSubtitlesFile"`
 		SceneTrailerlist  bool   `default:"true" json:"sceneTrailerlist"`
+		ShowScriptHeatmap bool   `default:"true" json:"showScriptHeatmap"`
 		UpdateCheck       bool   `default:"true" json:"updateCheck"`
 	} `json:"web"`
 	Advanced struct {
diff --git a/pkg/config/state.go b/pkg/config/state.go
index 72814da39..4620527f6 100644
--- a/pkg/config/state.go
+++ b/pkg/config/state.go
@@ -24,6 +24,7 @@ type ObjectState struct {
 		ShowHspFile       bool   `json:"showHspFile"`
 		ShowSubtitlesFile bool   `json:"showSubtitlesFile"`
 		SceneTrailerlist  bool   `json:"sceneTrailerlist"`
+		ShowScriptHeatmap bool   `json:"showScriptHeatmap"`
 		UpdateCheck       bool   `json:"updateCheck"`
 	} `json:"web"`
 	DLNA struct {
diff --git a/ui/src/store/optionsWeb.js b/ui/src/store/optionsWeb.js
index 6aa91a99a..862ed23cf 100644
--- a/ui/src/store/optionsWeb.js
+++ b/ui/src/store/optionsWeb.js
@@ -15,6 +15,7 @@ const state = {
     showHspFile: true,
     showSubtitlesFile: true,
     sceneTrailerlist: true,
+    showScriptHeatmap: false,
     updateCheck: true
   }
 }
@@ -39,6 +40,7 @@ const actions = {
         state.web.showHspFile = data.config.web.showHspFile
         state.web.showSubtitlesFile = data.config.web.showSubtitlesFile
         state.web.sceneTrailerlist = data.config.web.sceneTrailerlist
+        state.web.showScriptHeatmap = data.config.web.showScriptHeatmap
         state.web.updateCheck = data.config.web.updateCheck
         state.loading = false
       })
@@ -60,6 +62,7 @@ const actions = {
         state.web.showHspFile = data.showHspFile
         state.web.showSubtitlesFile = data.showSubtitlesFile
         state.web.sceneTrailerlist = data.sceneTrailerlist
+        state.web.showScriptHeatmap = data.showScriptHeatmap
         state.web.updateCheck = data.updateCheck
         state.loading = false
       })
diff --git a/ui/src/views/options/sections/InterfaceWeb.vue b/ui/src/views/options/sections/InterfaceWeb.vue
index 9c8868a5a..55139db31 100644
--- a/ui/src/views/options/sections/InterfaceWeb.vue
+++ b/ui/src/views/options/sections/InterfaceWeb.vue
@@ -75,6 +75,11 @@
                 show subtitles File button
               </b-switch>
             </b-field>
+            <b-field>
+              <b-switch v-model="ScriptHeatmap" type="is-dark">
+                show Script Heatmap
+              </b-switch>
+            </b-field>
 
             <b-field label="Automatically Check for Updates">
               <b-switch v-model="updateCheck">
@@ -168,6 +173,14 @@ export default {
         this.$store.state.optionsWeb.web.sceneEdit = value
       }
     },
+    ScriptHeatmap: {
+      get () {
+        return this.$store.state.optionsWeb.web.showScriptHeatmap
+      },
+      set (value) {
+        this.$store.state.optionsWeb.web.showScriptHeatmap = value
+      }
+    },
     updateCheck: {
       get () {
         return this.$store.state.optionsWeb.web.updateCheck
diff --git a/ui/src/views/scenes/SceneCard.vue b/ui/src/views/scenes/SceneCard.vue
index 4b4066670..068a5402e 100644
--- a/ui/src/views/scenes/SceneCard.vue
+++ b/ui/src/views/scenes/SceneCard.vue
@@ -41,6 +41,11 @@
               {{item.duration}}m
             </b-tag>
           </div>
+          <div v-if="this.$store.state.optionsWeb.web.showScriptHeatmap && (f = getFunscript())" style="padding: 0px 5px 5px">
+            <div v-if="f.has_heatmap" class="heatmapFunscript">
+              <img :src="getHeatmapURL(f.id)"/>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -153,6 +158,12 @@ export default {
         this.$store.commit('overlay/showDetails', { scene: scene })
       }
       this.$store.commit('overlay/hideActorDetails')
+    },
+    getHeatmapURL (fileId) {
+      return `/api/dms/heatmap/${fileId}`
+    },
+    getFunscript () {
+      return this.item.file !== null && this.item.file.find(a => a.type === 'script' && a.has_heatmap);
     }
   }
 }
@@ -204,6 +215,8 @@ export default {
   .align-bottom-left {
     align-items: flex-end;
     justify-content: flex-end;
+    flex-wrap: wrap;
+    flex-direction: column
   }
 
   .bbox:after {
@@ -223,4 +236,16 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+.heatmapFunscript {
+  width: auto;
+}
+
+.heatmapFunscript img {
+  border: 1px #888 solid;
+  width: 100%;
+  height: 15px;
+  border-radius: 0.25rem;
+}
+
 </style>