From f79098a40a031b98913c5bbe1caa99dd26b7ee8a Mon Sep 17 00:00:00 2001
From: George Tsotsos <34042825+Geoxor@users.noreply.github.com>
Date: Fri, 27 Jan 2023 18:25:31 +0200
Subject: [PATCH] improved luf meter animations

---
 src/renderer/components/visualizers/DbMeter.vue       | 5 ++++-
 src/renderer/components/visualizers/LoudnessMeter.vue | 7 ++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/visualizers/DbMeter.vue b/src/renderer/components/visualizers/DbMeter.vue
index 9650a062..78dee68e 100644
--- a/src/renderer/components/visualizers/DbMeter.vue
+++ b/src/renderer/components/visualizers/DbMeter.vue
@@ -81,7 +81,10 @@ onUnmounted(() => shouldStopRendering = true);
 <template>
   <div
     class="relative h-full"
-    :style="`width: ${(width + (width / 2)) * nChannels + 6}px`"
+    :style="`
+			width: ${(width + (width / 2)) * nChannels + 2}px;
+			min-width: ${(width + (width / 2)) * nChannels + 2}px;
+		`"
   >
     <div
       v-for="i of nChannels"
diff --git a/src/renderer/components/visualizers/LoudnessMeter.vue b/src/renderer/components/visualizers/LoudnessMeter.vue
index 60f397b0..71db7609 100644
--- a/src/renderer/components/visualizers/LoudnessMeter.vue
+++ b/src/renderer/components/visualizers/LoudnessMeter.vue
@@ -6,7 +6,7 @@ import { player } from "@/logic/player";
 
 const props = defineProps<{ node: AudioNode }>();
 
-const MINIMUM_LUFS = -64;
+const MINIMUM_LUFS = -20;
 
 const shortTerm = ref(MINIMUM_LUFS);
 const momentary = ref(MINIMUM_LUFS);
@@ -65,6 +65,7 @@ onMounted(() => {
 const computeWidth = (value: number): number => {
   const MAX = 0;
   const MIN = MINIMUM_LUFS;
+  if (value < MINIMUM_LUFS) return 0; // if below threashold don't default to 100
   return ((value - MIN) / (MAX - MIN)) * 100;
 };
 
@@ -129,10 +130,10 @@ const computeWidth = (value: number): number => {
   @apply flex flex-col gap-1.5;
 }
 .barBg {
-  @apply bg-surface-600 w-full rounded-2px;
+  @apply bg-surface-600 w-full overflow-hidden rounded-2px;
 }
 .bar {
-  @apply h-1 duration-500 rounded-2px p-0.5 bg-cyan-400;
+  @apply h-1 duration-250 rounded-2px bg-cyan-400;
 }
 
 </style>
\ No newline at end of file