From 0fbe9b1005962feeed95162a569a63218484b13f Mon Sep 17 00:00:00 2001 From: hlomzik Date: Tue, 4 Mar 2025 20:38:49 +0000 Subject: [PATCH 1/6] feat: LEAP-1893: Add setting to toggle region looping Default value is changed to false to not annoy users. In order to do so AudioUltra view was changed to move provider with settings higher. --- .../Timeline/Controls/ConfigControl.scss | 5 + .../Timeline/Controls/ConfigControl.tsx | 14 +- .../editor/src/components/Timeline/Types.ts | 2 + .../src/lib/AudioUltra/Controls/Player.ts | 10 +- .../editor/src/lib/AudioUltra/Waveform.ts | 4 + .../editor/src/lib/AudioUltra/react/index.ts | 9 +- .../src/tags/object/AudioUltra/view.tsx | 130 ++++++++++-------- web/libs/ui/src/lib/toggle/toggle.tsx | 4 +- 8 files changed, 112 insertions(+), 66 deletions(-) diff --git a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.scss b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.scss index 913ebf593589..cc4f17978e59 100644 --- a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.scss +++ b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.scss @@ -13,6 +13,11 @@ z-index: 10; } + &__toggle { + padding: 16px; + font-size: 12px; + } + &__range { margin: 0 20px; width: calc(100% - 40px); diff --git a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx index 1f3aae1ed1fd..3fb71d50f175 100644 --- a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx +++ b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx @@ -1,11 +1,13 @@ import type React from "react"; -import { type FC, type MouseEvent, useEffect, useState } from "react"; +import { type FC, type MouseEvent, useContext, useEffect, useState } from "react"; +import { Toggle } from "@humansignal/ui"; import { Block, Elem } from "../../../utils/bem"; -import "./ConfigControl.scss"; import { IconConfig } from "../../../assets/icons/timeline"; +import { TimelineContext } from "../Context"; import { ControlButton } from "../Controls"; import { Slider } from "./Slider"; +import "./ConfigControl.scss"; const MAX_SPEED = 2.5; const MAX_ZOOM = 150; @@ -36,6 +38,7 @@ export const ConfigControl: FC = ({ const playbackSpeed = speed ?? 1; const [isTimeline, setTimeline] = useState(true); const [isAudioWave, setAudioWave] = useState(true); + const { settings, changeSetting } = useContext(TimelineContext); useEffect(() => { if (layerVisibility) { @@ -105,6 +108,13 @@ export const ConfigControl: FC = ({ info={"Increase or decrease the appearance of amplitude"} onChange={handleChangeAmp} /> + + changeSetting?.("loopRegion", e.target.checked)} + label="Loop Regions" + /> + {renderLayerToggles()} ); diff --git a/web/libs/editor/src/components/Timeline/Types.ts b/web/libs/editor/src/components/Timeline/Types.ts index 5f77363db433..aedd7397b335 100644 --- a/web/libs/editor/src/components/Timeline/Types.ts +++ b/web/libs/editor/src/components/Timeline/Types.ts @@ -109,6 +109,7 @@ export interface TimelineContextValue { visibleWidth: number; seekOffset: number; settings?: TimelineSettings; + changeSetting?: (key: string, value: any) => void; data?: any; } @@ -131,6 +132,7 @@ export type TimelineSettings = { fastTravelSize?: TimelineStepFunction; stepSize?: TimelineStepFunction; leftOffset?: number; + loopRegion?: boolean; }; export type TimelineStepFunction = ( diff --git a/web/libs/editor/src/lib/AudioUltra/Controls/Player.ts b/web/libs/editor/src/lib/AudioUltra/Controls/Player.ts index 0e04d23f1505..8256adde0955 100644 --- a/web/libs/editor/src/lib/AudioUltra/Controls/Player.ts +++ b/web/libs/editor/src/lib/AudioUltra/Controls/Player.ts @@ -320,9 +320,13 @@ export abstract class Player extends Destructable { protected updateLoop(time: number) { if (this.isDestroyed || !this.loop) return; if (time >= this.loop.end) { - this.currentTime = this.loop.start; - this.playing = false; - this.play(); + if (this.wf.settings.loopRegion) { + this.currentTime = this.loop.start; + this.playing = false; + this.play(); + } else { + this.pause(); + } } } diff --git a/web/libs/editor/src/lib/AudioUltra/Waveform.ts b/web/libs/editor/src/lib/AudioUltra/Waveform.ts index 410bbaa14fd8..cea385216d45 100644 --- a/web/libs/editor/src/lib/AudioUltra/Waveform.ts +++ b/web/libs/editor/src/lib/AudioUltra/Waveform.ts @@ -1,3 +1,4 @@ +import type { TimelineSettings } from "../../components/Timeline/Types"; import { Events } from "./Common/Events"; import { MediaLoader } from "./Media/MediaLoader"; import type { Player } from "./Controls/Player"; @@ -202,6 +203,9 @@ export class Waveform extends Events { loaded = false; renderedChannels = false; autoPlayNewSegments = false; + // for now that's just an object to store setting and access them when needed; + // but if we need to react on changes we can convert it into getter/setter. + settings: TimelineSettings = {}; constructor(params: WaveformOptions) { super(); diff --git a/web/libs/editor/src/lib/AudioUltra/react/index.ts b/web/libs/editor/src/lib/AudioUltra/react/index.ts index 4bbee27929fa..516355bdd6a6 100644 --- a/web/libs/editor/src/lib/AudioUltra/react/index.ts +++ b/web/libs/editor/src/lib/AudioUltra/react/index.ts @@ -1,5 +1,6 @@ -import { type MutableRefObject, useEffect, useMemo, useRef, useState } from "react"; +import { type MutableRefObject, useContext, useEffect, useMemo, useRef, useState } from "react"; +import { TimelineContext } from "../../../components/Timeline/Context"; import { isTimeRelativelySimilar } from "../Common/Utils"; import type { Layer } from "../Visual/Layer"; import { Waveform, type WaveformFrameState, type WaveformOptions } from "../Waveform"; @@ -30,6 +31,12 @@ export const useWaveform = ( const [layers, setLayers] = useState([]); const [layerVisibility, setLayerVisibility] = useState(new Map()); + const { settings } = useContext(TimelineContext); + useEffect(() => { + if (!waveform.current || !settings) return; + waveform.current.settings = settings; + }, [settings]); + const onFrameChangedRef = useRef(options?.onFrameChanged); onFrameChangedRef.current = options?.onFrameChanged; diff --git a/web/libs/editor/src/tags/object/AudioUltra/view.tsx b/web/libs/editor/src/tags/object/AudioUltra/view.tsx index 7d86fdd6eade..e234f75988ae 100644 --- a/web/libs/editor/src/tags/object/AudioUltra/view.tsx +++ b/web/libs/editor/src/tags/object/AudioUltra/view.tsx @@ -1,5 +1,5 @@ import { observer } from "mobx-react"; -import { type FC, useEffect, useMemo, useRef } from "react"; +import { type FC, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { TimelineContextProvider } from "../../../components/Timeline/Context"; import { Hotkey } from "../../../core/Hotkey"; import { useWaveform } from "../../../lib/AudioUltra/react"; @@ -153,22 +153,6 @@ const AudioUltraView: FC = ({ item }) => { }; }, []); - const contextValue = useMemo(() => { - return { - position: 0, - length: 0, - regions: [], - step: 10, - playing: false, - visibleWidth: 0, - seekOffset: 0, - data: undefined, - settings: { - playpauseHotkey: "audio:playpause", - }, - }; - }, []); - return ( {item.errors?.map((error: any, i: any) => ( @@ -180,49 +164,79 @@ const AudioUltraView: FC = ({ item }) => { item.stageRef.current = el; }} /> - - controls.setPlaying(true)} - onPause={() => controls.setPlaying(false)} - allowFullscreen={false} - onVolumeChange={(vol) => controls.setVolume(vol)} - onStepBackward={() => { - waveform.current?.seekBackward(NORMALIZED_STEP); - waveform.current?.syncCursor(); - }} - onStepForward={() => { - waveform.current?.seekForward(NORMALIZED_STEP); - waveform.current?.syncCursor(); - }} - onPositionChange={(pos) => { - waveform.current?.seek(pos); - waveform.current?.syncCursor(); - }} - onSpeedChange={(speed) => controls.setRate(speed)} - onZoom={(zoom) => controls.setZoom(zoom)} - amp={controls.amp} - onAmpChange={(amp) => controls.setAmp(amp)} - mediaType="audio" - toggleVisibility={(layerName: string, isVisible: boolean) => { - if (waveform.current) { - const layer = waveform.current?.getLayer(layerName); - - if (layer) { - layer.setVisibility(isVisible); - } + controls.setPlaying(true)} + onPause={() => controls.setPlaying(false)} + allowFullscreen={false} + onVolumeChange={(vol) => controls.setVolume(vol)} + onStepBackward={() => { + waveform.current?.seekBackward(NORMALIZED_STEP); + waveform.current?.syncCursor(); + }} + onStepForward={() => { + waveform.current?.seekForward(NORMALIZED_STEP); + waveform.current?.syncCursor(); + }} + onPositionChange={(pos) => { + waveform.current?.seek(pos); + waveform.current?.syncCursor(); + }} + onSpeedChange={(speed) => controls.setRate(speed)} + onZoom={(zoom) => controls.setZoom(zoom)} + amp={controls.amp} + onAmpChange={(amp) => controls.setAmp(amp)} + mediaType="audio" + toggleVisibility={(layerName: string, isVisible: boolean) => { + if (waveform.current) { + const layer = waveform.current?.getLayer(layerName); + + if (layer) { + layer.setVisibility(isVisible); } - }} - layerVisibility={controls.layerVisibility} - /> - + } + }} + layerVisibility={controls.layerVisibility} + /> ); }; -export const AudioUltra = observer(AudioUltraView); +const AudioUltraWithSettings: FC = ({ item }) => { + const [settings, setSettings] = useState({ + playpauseHotkey: "audio:playpause", + loopRegion: false, + }); + const changeSetting = useCallback((key: string, value: any) => { + setSettings((prev) => ({ ...prev, [key]: value })); + }, []); + + // @todo seems like this context is not used at all; and its values are static; better to check and remove + const contextValue = useMemo(() => { + return { + position: 0, + length: 0, + regions: [], + step: 10, + playing: false, + visibleWidth: 0, + seekOffset: 0, + data: undefined, + settings, + changeSetting, + }; + }, [settings]); + + return ( + + + + ); +}; + +export const AudioUltra = observer(AudioUltraWithSettings); diff --git a/web/libs/ui/src/lib/toggle/toggle.tsx b/web/libs/ui/src/lib/toggle/toggle.tsx index a7fa8bfa9501..8f39899ff5b5 100644 --- a/web/libs/ui/src/lib/toggle/toggle.tsx +++ b/web/libs/ui/src/lib/toggle/toggle.tsx @@ -6,13 +6,13 @@ import styles from "./toggle.module.scss"; type ToggleProps = { className?: string; label?: string; - labelProps: any; + labelProps?: any; description?: string; checked?: boolean; defaultChecked?: boolean; onChange: (e: React.ChangeEvent) => void; required?: boolean; - style: any; + style?: any; disabled?: boolean; alwaysBlue?: boolean; }; From 0d091669ecc925f3ddfcaadf588c68772cdad9a5 Mon Sep 17 00:00:00 2001 From: hlomzik Date: Wed, 5 Mar 2025 16:10:59 +0000 Subject: [PATCH 2/6] Fix playing when cursor is outside of selected region Previously if it was after the region or just at the end of it, the cursor was moved to the end of the region, which stops playing if looping is disabled. Now it's always moved to the beginning of the region. --- web/libs/editor/src/lib/AudioUltra/Controls/Player.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/web/libs/editor/src/lib/AudioUltra/Controls/Player.ts b/web/libs/editor/src/lib/AudioUltra/Controls/Player.ts index 8256adde0955..8eca2a208e12 100644 --- a/web/libs/editor/src/lib/AudioUltra/Controls/Player.ts +++ b/web/libs/editor/src/lib/AudioUltra/Controls/Player.ts @@ -253,6 +253,7 @@ export abstract class Player extends Destructable { protected abstract playAudio(start?: number, duration?: number): void; + // This function just sets up the playing, but doesn't actually play protected playSelection(from?: number, to?: number) { const selected = this.wf.regions.selected; @@ -262,7 +263,11 @@ export abstract class Player extends Destructable { const regionsStart = Math.min(...selected.map((r) => r.start)); const regionsEnd = Math.max(...selected.map((r) => r.end)); - const start = clamp(this.currentTime, regionsStart, regionsEnd); + // if we are outside of the selected region, start at the beginning + let start = this.currentTime; + if (start < regionsStart || start >= regionsEnd) { + start = regionsStart; + } this.loop = { start: regionsStart, end: regionsEnd }; From 71b04338adaeb55d6a57750bbd51734b0323d3aa Mon Sep 17 00:00:00 2001 From: hlomzik Date: Wed, 5 Mar 2025 17:14:42 +0000 Subject: [PATCH 3/6] feat: LEAP-1900: Add setting to disable autoplaying of new audio regions --- .../src/components/Timeline/Controls/ConfigControl.tsx | 7 +++++++ web/libs/editor/src/components/Timeline/Types.ts | 1 + web/libs/editor/src/lib/AudioUltra/Regions/Regions.ts | 4 ++-- web/libs/editor/src/lib/AudioUltra/Waveform.ts | 5 ----- web/libs/editor/src/tags/object/AudioUltra/view.tsx | 2 +- 5 files changed, 11 insertions(+), 8 deletions(-) diff --git a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx index 3fb71d50f175..85e5d799e0c3 100644 --- a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx +++ b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx @@ -115,6 +115,13 @@ export const ConfigControl: FC = ({ label="Loop Regions" /> + + changeSetting?.("autoPlayNewSegments", e.target.checked)} + label="Auto-play New Regions" + /> + {renderLayerToggles()} ); diff --git a/web/libs/editor/src/components/Timeline/Types.ts b/web/libs/editor/src/components/Timeline/Types.ts index aedd7397b335..e5719992b704 100644 --- a/web/libs/editor/src/components/Timeline/Types.ts +++ b/web/libs/editor/src/components/Timeline/Types.ts @@ -133,6 +133,7 @@ export type TimelineSettings = { stepSize?: TimelineStepFunction; leftOffset?: number; loopRegion?: boolean; + autoPlayNewSegments?: boolean; }; export type TimelineStepFunction = ( diff --git a/web/libs/editor/src/lib/AudioUltra/Regions/Regions.ts b/web/libs/editor/src/lib/AudioUltra/Regions/Regions.ts index fb01e21f5223..5086c0893396 100644 --- a/web/libs/editor/src/lib/AudioUltra/Regions/Regions.ts +++ b/web/libs/editor/src/lib/AudioUltra/Regions/Regions.ts @@ -309,7 +309,7 @@ export class Regions { const addRegion = () => { const { container, zoomedWidth, fullWidth } = this.visualizer; - const { autoPlayNewSegments, duration } = this.waveform; + const { settings: { autoPlayNewSegments }, duration } = this.waveform; const scrollLeft = this.visualizer.getScrollLeftPx(); startX = clamp(getCursorPositionX(e, container) + scrollLeft, 0, fullWidth); @@ -352,7 +352,7 @@ export class Regions { }; const handleMouseUp = () => { - const { player, autoPlayNewSegments } = this.waveform; + const { player, settings: { autoPlayNewSegments } } = this.waveform; document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); diff --git a/web/libs/editor/src/lib/AudioUltra/Waveform.ts b/web/libs/editor/src/lib/AudioUltra/Waveform.ts index cea385216d45..960cc00a1e32 100644 --- a/web/libs/editor/src/lib/AudioUltra/Waveform.ts +++ b/web/libs/editor/src/lib/AudioUltra/Waveform.ts @@ -139,8 +139,6 @@ export interface WaveformOptions { padding?: Padding; - autoPlayNewSegments?: boolean; - // Cursor options cursor?: CursorOptions; @@ -202,7 +200,6 @@ export class Waveform extends Events { regions!: Regions; loaded = false; renderedChannels = false; - autoPlayNewSegments = false; // for now that's just an object to store setting and access them when needed; // but if we need to react on changes we can convert it into getter/setter. settings: TimelineSettings = {}; @@ -258,8 +255,6 @@ export class Waveform extends Events { this.visualizer, ); - this.autoPlayNewSegments = this.params.autoPlayNewSegments ?? this.autoPlayNewSegments; - this.player = this.params.playerType === "html5" ? new Html5Player(this) : new WebAudioPlayer(this); this.initEvents(); diff --git a/web/libs/editor/src/tags/object/AudioUltra/view.tsx b/web/libs/editor/src/tags/object/AudioUltra/view.tsx index e234f75988ae..76407ba3e609 100644 --- a/web/libs/editor/src/tags/object/AudioUltra/view.tsx +++ b/web/libs/editor/src/tags/object/AudioUltra/view.tsx @@ -58,7 +58,6 @@ const AudioUltraView: FC = ({ item }) => { backgroundCompute: true, denoize: true, }, - autoPlayNewSegments: true, onFrameChanged: (frameState) => { item.setWFFrame(frameState); }, @@ -211,6 +210,7 @@ const AudioUltraWithSettings: FC = ({ item }) => { const [settings, setSettings] = useState({ playpauseHotkey: "audio:playpause", loopRegion: false, + autoPlayNewSegments: true, }); const changeSetting = useCallback((key: string, value: any) => { setSettings((prev) => ({ ...prev, [key]: value })); From 8367e48d7f48a18fceedb56170a5a46f5e274a25 Mon Sep 17 00:00:00 2001 From: hlomzik Date: Thu, 6 Mar 2025 13:47:06 +0000 Subject: [PATCH 4/6] Improve styles for audio controls - uniform font size for all controls - increase modal width to fit new settings - adjust paddings for better apearance - use our common tooltips for info icon --- .../Timeline/Controls/AudioControl.scss | 2 +- .../Timeline/Controls/ConfigControl.scss | 8 +++--- .../Timeline/Controls/ConfigControl.tsx | 4 +++ .../components/Timeline/Controls/Info.scss | 28 ------------------- .../src/components/Timeline/Controls/Info.tsx | 18 ------------ .../components/Timeline/Controls/Slider.scss | 11 ++++++-- .../components/Timeline/Controls/Slider.tsx | 6 ++-- 7 files changed, 20 insertions(+), 57 deletions(-) delete mode 100644 web/libs/editor/src/components/Timeline/Controls/Info.scss delete mode 100644 web/libs/editor/src/components/Timeline/Controls/Info.tsx diff --git a/web/libs/editor/src/components/Timeline/Controls/AudioControl.scss b/web/libs/editor/src/components/Timeline/Controls/AudioControl.scss index d7b863036efe..36a8c2f0cb9a 100644 --- a/web/libs/editor/src/components/Timeline/Controls/AudioControl.scss +++ b/web/libs/editor/src/components/Timeline/Controls/AudioControl.scss @@ -23,7 +23,7 @@ margin-top: 10px; padding: 2px 0; border-top: 1px solid var(--sand_200); - font-size: 16px; + font-size: 14px; cursor: pointer; } diff --git a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.scss b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.scss index cc4f17978e59..0002257a9ca8 100644 --- a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.scss +++ b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.scss @@ -5,16 +5,16 @@ left: 0; top: 36px; position: absolute; - width: 232px; + width: 260px; background: var(--sand_0); border-radius: 4px; - padding: 22px 0 0; + padding: 12px 0 0; box-shadow: 0 4px 10px 0 var(--sand_300); z-index: 10; } &__toggle { - padding: 16px; + padding: 8px 16px; font-size: 12px; } @@ -28,7 +28,7 @@ margin-top: 10px; padding: 2px 0; border-top: 1px solid var(--sand_200); - font-size: 16px; + font-size: 14px; cursor: pointer; } diff --git a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx index 85e5d799e0c3..11efb9cf98e2 100644 --- a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx +++ b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx @@ -113,6 +113,8 @@ export const ConfigControl: FC = ({ checked={settings?.loopRegion} onChange={(e) => changeSetting?.("loopRegion", e.target.checked)} label="Loop Regions" + // there are no "normal" size, so that's the hack to reset size + labelProps={{ size: "normal" }} /> @@ -120,6 +122,8 @@ export const ConfigControl: FC = ({ checked={settings?.autoPlayNewSegments} onChange={(e) => changeSetting?.("autoPlayNewSegments", e.target.checked)} label="Auto-play New Regions" + // there are no "normal" size, so that's the hack to reset size + labelProps={{ size: "normal" }} /> {renderLayerToggles()} diff --git a/web/libs/editor/src/components/Timeline/Controls/Info.scss b/web/libs/editor/src/components/Timeline/Controls/Info.scss deleted file mode 100644 index 0b9b20f36e59..000000000000 --- a/web/libs/editor/src/components/Timeline/Controls/Info.scss +++ /dev/null @@ -1,28 +0,0 @@ -.control-info { - position: relative; - margin-left: 7px; - height: 14px; - width: 14px; - - &__tooltip { - transition: opacity 0.2s ease-out; - background: var(--sand_900); - padding: 4px 16px; - width: 220px; - height: auto; - border-radius: 4px; - color: var(--sand_0); - font-size: 16px; - position: absolute; - left: 50%; - transform: translateX(-50%); - visibility: hidden; - opacity: 0; - z-index: 2; - } - - &:hover &__tooltip { - visibility: visible; - opacity: 1; - } -} \ No newline at end of file diff --git a/web/libs/editor/src/components/Timeline/Controls/Info.tsx b/web/libs/editor/src/components/Timeline/Controls/Info.tsx deleted file mode 100644 index 36e1323fd5da..000000000000 --- a/web/libs/editor/src/components/Timeline/Controls/Info.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { FC } from "react"; -import { Block, Elem } from "../../../utils/bem"; - -import "./Info.scss"; -import { IconInfoConfig } from "../../../assets/icons/timeline"; - -export interface InfoProps { - text: string; -} - -export const Info: FC = ({ text }) => { - return ( - - - {text} - - ); -}; diff --git a/web/libs/editor/src/components/Timeline/Controls/Slider.scss b/web/libs/editor/src/components/Timeline/Controls/Slider.scss index 41d8be5551ad..a52085372297 100644 --- a/web/libs/editor/src/components/Timeline/Controls/Slider.scss +++ b/web/libs/editor/src/components/Timeline/Controls/Slider.scss @@ -19,17 +19,22 @@ } &__control { - padding: 0 16px; - margin-top: 10px; + padding: 4px 16px 8px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; - font-size: 11px; + font-size: 14px; } &__info { display: flex; + align-items: center; + gap: 8px; + + svg { + display: block; + } } &__input { diff --git a/web/libs/editor/src/components/Timeline/Controls/Slider.tsx b/web/libs/editor/src/components/Timeline/Controls/Slider.tsx index d2b4e93f1885..bf44b362f4aa 100644 --- a/web/libs/editor/src/components/Timeline/Controls/Slider.tsx +++ b/web/libs/editor/src/components/Timeline/Controls/Slider.tsx @@ -1,10 +1,10 @@ import type React from "react"; import { type FC, useEffect, useRef, useState } from "react"; +import { IconInfoConfig } from "../../../assets/icons/timeline"; +import { Tooltip } from "../../../common/Tooltip/Tooltip"; import { Block, Elem } from "../../../utils/bem"; import "./Slider.scss"; -import { Info } from "./Info"; - export interface SliderProps { description?: string; info?: string; @@ -59,7 +59,7 @@ export const Slider: FC = ({ description, info, max, min, value, st {description} - {info && } + {info && } Date: Thu, 6 Mar 2025 13:50:33 +0000 Subject: [PATCH 5/6] Fix styles and types for uikit's toggle and label - proper ref typing - fix issues - remove font-size from a wrong place - it was overriding sizing params --- web/libs/ui/src/lib/label/label.module.scss | 1 - web/libs/ui/src/lib/label/label.tsx | 2 +- web/libs/ui/src/lib/toggle/toggle.tsx | 8 ++++---- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/web/libs/ui/src/lib/label/label.module.scss b/web/libs/ui/src/lib/label/label.module.scss index dc9a6bb15196..63c8ed20f316 100644 --- a/web/libs/ui/src/lib/label/label.module.scss +++ b/web/libs/ui/src/lib/label/label.module.scss @@ -67,7 +67,6 @@ &_placement_right &__text, &_placement_left &__text { margin-bottom: 0; - font-size: 16px; line-height: 22px; height: auto; align-items: center; diff --git a/web/libs/ui/src/lib/label/label.tsx b/web/libs/ui/src/lib/label/label.tsx index 013cf840a420..1ccce9bed380 100644 --- a/web/libs/ui/src/lib/label/label.tsx +++ b/web/libs/ui/src/lib/label/label.tsx @@ -3,7 +3,7 @@ import clsx from "clsx"; import styles from "./label.module.scss"; type LabelProps = PropsWithChildren<{ text: string; - required?: false; + required?: boolean; placement?: "right" | "left"; description?: string; size?: "large" | "small"; diff --git a/web/libs/ui/src/lib/toggle/toggle.tsx b/web/libs/ui/src/lib/toggle/toggle.tsx index 8f39899ff5b5..c3d1b5a90cb3 100644 --- a/web/libs/ui/src/lib/toggle/toggle.tsx +++ b/web/libs/ui/src/lib/toggle/toggle.tsx @@ -6,18 +6,18 @@ import styles from "./toggle.module.scss"; type ToggleProps = { className?: string; label?: string; - labelProps?: any; + labelProps?: Partial>; description?: string; checked?: boolean; defaultChecked?: boolean; onChange: (e: React.ChangeEvent) => void; required?: boolean; - style?: any; + style?: React.CSSProperties; disabled?: boolean; alwaysBlue?: boolean; }; -export const Toggle = forwardRef( +export const Toggle = forwardRef( ( { className, @@ -31,7 +31,7 @@ export const Toggle = forwardRef( style, alwaysBlue, ...props - }: ToggleProps, + }, ref, ) => { const initialChecked = useMemo(() => defaultChecked ?? checked ?? false, [defaultChecked, checked]); From 11d58e54fc8b84022941518901c435362c694099 Mon Sep 17 00:00:00 2001 From: hlomzik Date: Thu, 6 Mar 2025 14:57:10 +0000 Subject: [PATCH 6/6] Fix linting --- .../editor/src/components/Timeline/Controls/Slider.tsx | 7 ++++++- web/libs/editor/src/lib/AudioUltra/Regions/Regions.ts | 10 ++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/web/libs/editor/src/components/Timeline/Controls/Slider.tsx b/web/libs/editor/src/components/Timeline/Controls/Slider.tsx index bf44b362f4aa..c1db9fb7c640 100644 --- a/web/libs/editor/src/components/Timeline/Controls/Slider.tsx +++ b/web/libs/editor/src/components/Timeline/Controls/Slider.tsx @@ -5,6 +5,7 @@ import { Tooltip } from "../../../common/Tooltip/Tooltip"; import { Block, Elem } from "../../../utils/bem"; import "./Slider.scss"; + export interface SliderProps { description?: string; info?: string; @@ -59,7 +60,11 @@ export const Slider: FC = ({ description, info, max, min, value, st {description} - {info && } + {info && ( + + + + )} { const { container, zoomedWidth, fullWidth } = this.visualizer; - const { settings: { autoPlayNewSegments }, duration } = this.waveform; + const { + settings: { autoPlayNewSegments }, + duration, + } = this.waveform; const scrollLeft = this.visualizer.getScrollLeftPx(); startX = clamp(getCursorPositionX(e, container) + scrollLeft, 0, fullWidth); @@ -352,7 +355,10 @@ export class Regions { }; const handleMouseUp = () => { - const { player, settings: { autoPlayNewSegments } } = this.waveform; + const { + player, + settings: { autoPlayNewSegments }, + } = this.waveform; document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp);