feat: FIT-173: Audio spectrograms (#7400)

Co-authored-by: robot-ci-heartex <[email protected]>
Co-authored-by: Nikita Belonogov <[email protected]>
Co-authored-by: Brandon Martel <[email protected]>
Co-authored-by: makseq <[email protected]>
Co-authored-by: bmartel <[email protected]>

Author: 5 people

web/libs/editor/package.json

@@ -39,7 +39,9 @@
     "sanitize-html": "^2.12.1",
     "strman": "^2.0.1",
     "wavesurfer.js": "^6.0.1",
-    "xpath-range": "^1.1.1"
+    "xpath-range": "^1.1.1",
+    "colormap": "^2.3.2",
+    "webfft": "^1.0.3"
   },
   "main": "src/index.js"
 }

web/libs/editor/src/components/Timeline/Controls.tsx

@@ -120,6 +120,10 @@ export const Controls: FC<TimelineControlsProps> = memo(
           <ConfigControl
             onSetModal={onSetConfigModal}
             onAmpChange={props.onAmpChange}
+            onSpectrogramFftSamplesChange={props.onSpectrogramFftSamplesChange}
+            onNumberOfMelBandsChange={props.onNumberOfMelBandsChange}
+            onSpectrogramWindowingFunctionChange={props.onSpectrogramWindowingFunctionChange}
+            onSpectrogramColorSchemeChange={props.onSpectrogramColorSchemeChange}
             configModal={configModal}
             onSpeedChange={(speed: number) => onSpeedChange?.(speed)}
             speed={props.speed || 0}

web/libs/editor/src/components/Timeline/Controls/ConfigControl.scss

@@ -2,34 +2,97 @@
   position: relative;
 
   &__modal {
-    left: 0;
-    top: 36px;
-    position: absolute;
-    width: 260px;
+    position: fixed;
+    width: 360px;
+    max-height: 500px;
     background: var(--color-neutral-background);
     box-shadow: 0 4px 10px 0 rgba(var(--color-neutral-shadow-raw) / 30%);
     border-radius: 4px;
-    padding: 12px 0 0;
-    z-index: 10;
+    padding: 0;
+    z-index: 102;
+    display: flex;
+    flex-direction: column;
+    opacity: 1;
+    transition: opacity 0.15s ease-in-out;
+
+    &__toggle {
+      padding-block: var(--spacing-tight);
+      margin-bottom: 5px;
+    }
+
+    .audio-config__slider-container {
+      padding: 28px 16px 0;
+
+      .ant-slider {
+        margin-left: 10px;
+        margin-right: 20px;
+        margin-bottom: 5px;
+
+        .ant-slider-mark {
+          .ant-slider-mark-text {
+            top: auto;
+            bottom: 20px;
+            font-size: 12px;
+            transform: none;
+            color: var(--color-neutral-content);
+          }
+        }
+      }
+
+      .audio-config__control {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 8px;
+
+        .audio-config__input {
+          width: 40px;
+          height: 24px;
+          border-radius: 2px;
+          background: var(--color-neutral-surface);
+          border: 1px solid var(--color-neutral-border);
+          line-height: 24px;
+          padding: 0;
+          text-align: center;
+          outline: none;
+          margin-left: 10px;
+
+          &--error {
+            color: var(--color-negative-content);
+            border: 1px solid var(--color-negative-border);
+          }
+        }
+      }
+    }
   }
 
-  &__toggle {
-    padding: 8px 16px;
-    font-size: 12px;
+  &__range-handle {
+    &::before {
+      width: 14px !important;
+      height: 14px !important;
+      box-shadow: none;
+    }
   }
 
-  &__range {
-    margin: 0 20px;
-    width: calc(100% - 40px);
+  &__scroll-content {
+    flex-grow: 1;
+    overflow-y: auto;
     padding: 0;
+
+    >.audio-config__slider-container,
+    >.audio-config__toggle {
+      padding: 8px 16px;
+    }
   }
 
   &__buttons {
-    margin-top: 10px;
+    margin-top: 0;
     padding: 2px 0;
     border-top: 1px solid var(--color-neutral-border);
     font-size: 14px;
     cursor: pointer;
+    flex-shrink: 0;
+    background: var(--color-neutral-background);
   }
 
   &__menu-button {
@@ -42,4 +105,26 @@
       background: var(--color-primary-emphasis-subtle);
     }
   }
+
+
+  &__section-header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--color-neutral-background);
+    color: var(--color-neutral-content-subtler);
+    font-size: 11px;
+    font-weight: 500;
+    text-transform: uppercase;
+    padding: 6px 16px;
+    border-top: 1px solid var(--color-neutral-border);
+    border-bottom: 1px solid var(--color-neutral-border);
+    margin: 0 0 8px;
+
+    &:first-child {
+      border-top: none;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+  }
 }