mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-01 05:49:54 +00:00
[backport core/1.37] fix: prevent Record Audio waveform from overflowing node bounds (#8081)
Backport of #8070 to `core/1.37` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8081-backport-core-1-37-fix-prevent-Record-Audio-waveform-from-overflowing-node-bounds-2e96d73d365081fc85eddf301c4624e1) by [Unito](https://www.unito.io) Co-authored-by: Terry Jia <terryjia88@gmail.com>
This commit is contained in:
@@ -12,11 +12,11 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="isRecording || isPlaying || recordedURL"
|
||||
class="flex h-14 w-full items-center gap-4 rounded-lg px-4 bg-node-component-surface text-text-secondary"
|
||||
class="flex h-14 w-full min-w-0 items-center gap-2 rounded-lg px-3 bg-node-component-surface text-text-secondary"
|
||||
>
|
||||
<!-- Recording Status -->
|
||||
<div class="flex min-w-30 items-center gap-2">
|
||||
<span class="min-w-20 text-xs">
|
||||
<div class="flex shrink-0 items-center gap-1">
|
||||
<span class="text-xs">
|
||||
{{
|
||||
isRecording
|
||||
? t('g.listening', 'Listening...')
|
||||
@@ -27,11 +27,11 @@
|
||||
: ''
|
||||
}}
|
||||
</span>
|
||||
<span class="min-w-10 text-sm">{{ formatTime(timer) }}</span>
|
||||
<span class="text-sm">{{ formatTime(timer) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Waveform Visualization -->
|
||||
<div class="flex h-8 flex-1 items-center gap-2 overflow-x-clip">
|
||||
<div class="flex h-8 min-w-0 flex-1 items-center gap-2 overflow-hidden">
|
||||
<div
|
||||
v-for="(bar, index) in waveformBars"
|
||||
:key="index"
|
||||
@@ -45,7 +45,7 @@
|
||||
<button
|
||||
v-if="isRecording"
|
||||
:title="t('g.stopRecording', 'Stop Recording')"
|
||||
class="flex size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
|
||||
class="flex shrink-0 size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
|
||||
@click="handleStopRecording"
|
||||
>
|
||||
<div class="size-2.5 rounded-sm bg-danger-100" />
|
||||
@@ -54,7 +54,7 @@
|
||||
<button
|
||||
v-else-if="!isRecording && recordedURL && !isPlaying"
|
||||
:title="t('g.playRecording') || 'Play Recording'"
|
||||
class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
|
||||
class="flex shrink-0 size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
|
||||
@click="handlePlayRecording"
|
||||
>
|
||||
<i class="text-text-secondary icon-[lucide--play] size-4" />
|
||||
@@ -63,7 +63,7 @@
|
||||
<button
|
||||
v-else-if="isPlaying"
|
||||
:title="t('g.stopPlayback') || 'Stop Playback'"
|
||||
class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
|
||||
class="flex shrink-0 size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
|
||||
@click="handleStopPlayback"
|
||||
>
|
||||
<i class="text-text-secondary icon-[lucide--square] size-4" />
|
||||
|
||||
Reference in New Issue
Block a user