feat: add Option to set opacity of not available scenes in scene list (…

…xbapps#1453)

Co-authored-by: crwxaj <52156245+crwxaj@users.noreply.github.com>

pkg/api/options.go

@@ -58,6 +58,7 @@ type RequestSaveOptionsWeb struct {
 	SceneTrailerlist  bool   `json:"sceneTrailerlist"`
 	ShowScriptHeatmap bool   `json:"showScriptHeatmap"`
 	UpdateCheck       bool   `json:"updateCheck"`
+	IsAvailOpacity    int    `json:"isAvailOpacity"`
 }
 
 type RequestSaveOptionsAdvanced struct {
@@ -382,6 +383,7 @@ func (i ConfigResource) saveOptionsWeb(req *restful.Request, resp *restful.Respo
 	config.Config.Web.SceneTrailerlist = r.SceneTrailerlist
 	config.Config.Web.ShowScriptHeatmap = r.ShowScriptHeatmap
 	config.Config.Web.UpdateCheck = r.UpdateCheck
+	config.Config.Web.IsAvailOpacity = r.IsAvailOpacity
 	config.SaveConfig()
 
 	resp.WriteHeaderAndEntity(http.StatusOK, r)

pkg/config/config.go

@@ -43,6 +43,7 @@ type ObjectConfig struct {
 		SceneTrailerlist  bool   `default:"true" json:"sceneTrailerlist"`
 		ShowScriptHeatmap bool   `default:"true" json:"showScriptHeatmap"`
 		UpdateCheck       bool   `default:"true" json:"updateCheck"`
+		IsAvailOpacity    int    `default:"40" json:"isAvailOpacity"`
 	} `json:"web"`
 	Advanced struct {
 		ShowInternalSceneId   bool   `default:"false" json:"showInternalSceneId"`

pkg/config/state.go

@@ -26,6 +26,7 @@ type ObjectState struct {
 		SceneTrailerlist  bool   `json:"sceneTrailerlist"`
 		ShowScriptHeatmap bool   `json:"showScriptHeatmap"`
 		UpdateCheck       bool   `json:"updateCheck"`
+		IsAvailOpacity    int    `json:"isAvailOpacity"`
 	} `json:"web"`
 	DLNA struct {
 		Running  bool     `json:"running"`

ui/src/store/optionsWeb.js

@@ -15,6 +15,8 @@ const state = {
     showHspFile: true,
     showSubtitlesFile: true,
     sceneTrailerlist: true,
+    updateCheck: true,
+    isAvailOpacity: 40,
     showScriptHeatmap: false,
     updateCheck: true
   }
@@ -42,6 +44,7 @@ const actions = {
         state.web.sceneTrailerlist = data.config.web.sceneTrailerlist
         state.web.showScriptHeatmap = data.config.web.showScriptHeatmap
         state.web.updateCheck = data.config.web.updateCheck
+        state.web.isAvailOpacity = data.config.web.isAvailOpacity        
         state.loading = false
       })
   },
@@ -64,6 +67,7 @@ const actions = {
         state.web.sceneTrailerlist = data.sceneTrailerlist
         state.web.showScriptHeatmap = data.showScriptHeatmap
         state.web.updateCheck = data.updateCheck
+        state.web.isAvailOpacity = data.isAvailOpacity        
         state.loading = false
       })
   }

ui/src/views/actors/ActorCard.vue

@@ -2,7 +2,7 @@
   <div class="card is-shadowless">
     <div class="card-image">
       <div class="bbox"
-           v-bind:style="{backgroundImage: `url(${getImageURL(actor.image_url)})`, backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', opacity:isAvailable(actor) ? 1.0 : 0.4}"
+           v-bind:style="{backgroundImage: `url(${getImageURL(actor.image_url)})`, backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', opacity:isAvailable(actor) ? 1.0 : isAvailOpactiy}"
            @click="showDetails(actor)"
            @mouseover="preview = true"
            @mouseleave="preview = false">
@@ -69,6 +69,12 @@ export default {
     }
   },
   computed: {
+      isAvailOpactiy () {      
+      if (this.$store.state.optionsWeb.web.isAvailOpacity == undefined) {
+        return .4
+      }
+      return this.$store.state.optionsWeb.web.isAvailOpacity / 100
+    },
   },
   methods: {
     getImageURL (u) {

ui/src/views/options/sections/InterfaceWeb.vue

@@ -75,6 +75,12 @@
                 show subtitles File button
               </b-switch>
             </b-field>
+            <b-field label="Opacity of unavailable scenes">
+              <div class="columns">
+                <div class="column is-two-thirds">
+                  <b-slider :min="0" :max="100" :step="10" :tooltip="false" v-model="isAvailOpacity" opacity:isAvailOpacity></b-slider>
+                </div>
+              </div>
             <b-field>
               <b-switch v-model="ScriptHeatmap" type="is-dark">
                 show Script Heatmap
@@ -221,9 +227,20 @@ export default {
         this.$store.state.optionsWeb.web.showSubtitlesFile = value
       }
     },
+    isAvailOpacity: {
+      get () {
+        if  (this.$store.state.optionsWeb.web.isAvailOpacity == undefined) {
+          return 40
+        }
+        return this.$store.state.optionsWeb.web.isAvailOpacity
+      },
+      set (value) {
+        this.$store.state.optionsWeb.web.isAvailOpacity = value
+      }
+    },
     isLoading: function () {
       return this.$store.state.optionsWeb.loading
-    }
+    }    
   }
 }
 </script>

ui/src/views/scenes/SceneCard.vue

@@ -2,7 +2,7 @@
   <div class="card is-shadowless">
     <div class="card-image">
       <div class="bbox"
-           v-bind:style="{backgroundImage: `url(${getImageURL(item.cover_url)})`, backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', opacity:item.is_available ? 1.0 : 0.4}"
+           v-bind:style="{backgroundImage: `url(${getImageURL(item.cover_url)})`, backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', opacity:item.is_available ? 1.0 : this.isAvailOpactiy}"
            @click="showDetails(item)"
            @mouseover="preview = true"
            @mouseleave="preview = false">
@@ -134,7 +134,13 @@ export default {
         }
       })
       return count
-    }
+    },
+    isAvailOpactiy () {
+      if (this.$store.state.optionsWeb.web.isAvailOpacity == undefined) {
+        return .4
+      }
+      return this.$store.state.optionsWeb.web.isAvailOpacity / 100
+    },
   },
   methods: {
     getImageURL (u) {