improved luf meter animations

Geoxor · Jan 27, 2023 · f79098a · f79098a
1 parent 1333a1f
commit f79098a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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>