allow change of blend-mode for ambient bg

Geoxor · Jan 29, 2023 · 103d3a8 · 103d3a8
1 parent 8341e61
commit 103d3a8
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 5 deletions.
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -61,8 +61,9 @@ onUnmounted(() => {
       v-if="state.settings.showAmbientBackground"
       :style="`
         transform: translate(-50%, -50%) scale(${state.settings.ambientBackgroundZoom}%);
+        mix-blend-mode: ${state.settings.ambientBackgroundBlendMode};
       `"
-      class="absolute z-1000 select-none mix-blend-soft-light pointer-events-none top-1/2 transform-gpu -translate-y-1/2 left-1/2 -translate-x-1/2 w-full"
+      class="absolute z-1000 select-none pointer-events-none top-1/2 transform-gpu -translate-y-1/2 left-1/2 -translate-x-1/2 w-full"
     >
       <cover-art 
         class="w-full h-full" 

diff --git a/src/renderer/components/visualizers/LoudnessMeter.vue b/src/renderer/components/visualizers/LoudnessMeter.vue
@@ -25,7 +25,7 @@ onMounted(() => {
     workerUri: new URL("../../workers/needlesWorker.js", import.meta.url).toString()
   });
 
-  loudnessMeter.on("dataavailable", function (event) {
+  loudnessMeter.on("dataavailable", function (event: { data: { mode: any; value: any; }; }) {
     let {mode, value} = event.data; // momentary | short-term | integrated
 
     value = infinityClamp(value, MINIMUM_LUFS);

diff --git a/src/renderer/state.ts b/src/renderer/state.ts
@@ -36,12 +36,13 @@ export class Store {
 		showAmbientBackground: false,
 		ambientBackgroundOpacity: 32,
 		ambientBackgroundSpin: true,
-		abmientBackgroundBlurStrength: 32,
-		spectrumVerticalZoom: 1.4,
+		ambientBackgroundBlurStrength: 0,
+		ambientBackgroundSpinSpeed: 32,
 		ambientBackgroundZoom: 125,
+		ambientBackgroundBlendMode: "screen",
+		spectrumVerticalZoom: 1.4,
 		spectrumFftSize: 8192,
 		spectrumSmoothing: 0.7,
-		ambientBackgroundSpinSpeed: 24,
 		vectorscopeLineThickness: 1,
 		showPlaybackControls: true,
 		followQueue: false,

diff --git a/src/renderer/views/Settings/AppearanceSettings.vue b/src/renderer/views/Settings/AppearanceSettings.vue
@@ -4,6 +4,27 @@ import SettingsBinarySwitch from "@/components/settings/SettingsBinarySwitch.vue
 import SettingsCategorySplitter from "@/components/settings/SettingsCategorySplitter.vue";
 import SettingsModifier from "@/components/settings/SettingsModifier.vue";
 const state = useState();
+
+const BLEND_MODES = [
+  "normal",
+  "multiply",
+  "screen",
+  "overlay",
+  "darken",
+  "lighten",
+  "color-dodge",
+  "color-burn",
+  "hard-light",
+  "soft-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity",
+
+];
+
 </script>
 
 <template>
@@ -32,6 +53,23 @@ const state = useState();
     :step="1"
     :def="state.defaultSettings.ambientBackgroundBlurStrength"
   />
+
+  Mix Blend Mode
+  <select
+    v-model="state.settings.ambientBackgroundBlendMode"
+    class="bg-surface-600 w-full font-aseprite font-thin py-2"
+    @keydown.stop
+  >
+    <option
+      v-for="mode of BLEND_MODES"
+      :key="mode"
+      class="text-10px"
+      :value="mode"
+    >
+      {{ mode }}
+    </option>
+  </select>
+
   <settings-modifier
     v-model="state.settings.ambientBackgroundOpacity"
     text="Opacity"