155 lines
13 KiB
HTML
155 lines
13 KiB
HTML
<!-- ASR Editor Modal -->
|
|
<div v-if="showAsrEditorModal" @click.self="closeAsrEditorModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
|
|
<div @click="closeAllSpeakerSuggestions" class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-6xl flex flex-col max-h-[90vh]">
|
|
<div class="p-5 border-b border-[var(--border-primary)] flex-shrink-0 flex justify-between items-center">
|
|
<h3 class="text-xl font-bold text-[var(--text-primary)]" v-text="t('modal.editAsrTranscription')"></h3>
|
|
<button @click="closeAsrEditorModal" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Audio Player Section -->
|
|
<div class="px-6 py-4 border-b border-[var(--border-primary)] flex-shrink-0">
|
|
<!-- Show message if audio has been deleted -->
|
|
<div v-if="selectedRecording.audio_deleted_at"
|
|
class="bg-[var(--bg-tertiary)] border border-[var(--border-primary)] text-[var(--text-secondary)] px-4 py-3 rounded-lg flex items-center gap-2 text-sm">
|
|
<i class="fas fa-info-circle"></i>
|
|
<span v-text="t('help.audioDeletedMessage')"></span>
|
|
</div>
|
|
<!-- Show message for incognito recordings -->
|
|
<div v-else-if="selectedRecording.incognito"
|
|
class="bg-[var(--bg-tertiary)] border border-[var(--border-primary)] text-[var(--text-secondary)] px-4 py-3 rounded-lg flex items-center gap-2 text-sm">
|
|
<i class="fas fa-user-secret"></i>
|
|
<span>Audio not stored in incognito mode</span>
|
|
</div>
|
|
<!-- Custom Audio Player (Independent from main player) -->
|
|
<div v-else class="flex items-center gap-3">
|
|
<audio ref="asrEditorAudioRef" class="hidden"
|
|
:key="'asr-editor-' + selectedRecording.id"
|
|
:src="'/audio/' + selectedRecording.id"
|
|
:volume="playerVolume"
|
|
@play="handleModalAudioPlayPause"
|
|
@pause="handleModalAudioPlayPause"
|
|
@timeupdate="handleModalAudioTimeUpdate"
|
|
@loadedmetadata="handleModalAudioLoadedMetadata"
|
|
@ended="modalAudioIsPlaying = false">
|
|
</audio>
|
|
<!-- Play/Pause -->
|
|
<button @click="$refs.asrEditorAudioRef?.paused ? $refs.asrEditorAudioRef.play() : $refs.asrEditorAudioRef.pause()"
|
|
class="w-10 h-10 flex items-center justify-center rounded-full bg-[var(--bg-accent)] hover:bg-[var(--bg-accent-hover)] text-white transition-all flex-shrink-0 shadow-sm"
|
|
:title="modalAudioIsPlaying ? 'Pause' : 'Play'">
|
|
<i :class="modalAudioIsPlaying ? 'fas fa-pause' : 'fas fa-play'" class="text-sm" :style="!modalAudioIsPlaying ? 'margin-left: 2px' : ''"></i>
|
|
</button>
|
|
<!-- Time -->
|
|
<div class="flex flex-col items-end flex-shrink-0 leading-none">
|
|
<span class="text-sm text-[var(--text-primary)] font-mono">${ formatAudioTime(modalAudioCurrentTime) }</span>
|
|
<span class="text-xs text-[var(--text-muted)] font-mono">${ formatAudioTime(modalAudioDuration) }</span>
|
|
</div>
|
|
<!-- Progress Bar -->
|
|
<div class="flex-1 h-2 bg-[var(--bg-tertiary)] rounded-full cursor-pointer group relative"
|
|
@click="(e) => { const rect = e.currentTarget.getBoundingClientRect(); const pct = (e.clientX - rect.left) / rect.width; if ($refs.asrEditorAudioRef) $refs.asrEditorAudioRef.currentTime = pct * modalAudioDuration; }">
|
|
<div class="h-full bg-[var(--bg-accent)] rounded-full transition-all duration-100"
|
|
:style="{ width: modalAudioProgressPercent + '%' }">
|
|
</div>
|
|
</div>
|
|
<!-- Volume -->
|
|
<div class="flex items-center gap-2 flex-shrink-0">
|
|
<button @click="$refs.asrEditorAudioRef && ($refs.asrEditorAudioRef.muted = !$refs.asrEditorAudioRef.muted)"
|
|
class="w-8 h-8 flex items-center justify-center rounded hover:bg-[var(--bg-tertiary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all">
|
|
<i :class="playerVolume === 0 ? 'fas fa-volume-mute' : 'fas fa-volume-up'" class="text-sm"></i>
|
|
</button>
|
|
<input type="range" min="0" max="1" step="0.05" :value="playerVolume"
|
|
@input="(e) => { if ($refs.asrEditorAudioRef) $refs.asrEditorAudioRef.volume = parseFloat(e.target.value); }"
|
|
class="volume-slider w-20 h-1.5 rounded-full cursor-pointer">
|
|
</div>
|
|
<!-- Speed Control (compact - tap to cycle) -->
|
|
<button @click="cycleModalPlaybackRate(); if ($refs.asrEditorAudioRef) $refs.asrEditorAudioRef.playbackRate = modalPlaybackRate"
|
|
class="w-8 h-8 flex items-center justify-center rounded hover:bg-[var(--bg-tertiary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all flex-shrink-0"
|
|
title="Playback speed (tap to change)">
|
|
<span class="text-xs font-semibold font-mono">${ formatPlaybackRate(modalPlaybackRate) }</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div ref="asrEditorRef" class="flex-grow overflow-y-auto custom-scrollbar" @scroll="closeAllSpeakerSuggestions(); onAsrEditorScroll($event)">
|
|
<table class="min-w-full asr-editor-table border border-[var(--border-primary)]">
|
|
<thead class="sticky top-0 z-10">
|
|
<tr class="text-xs uppercase text-[var(--text-muted)]">
|
|
<th class="w-40 text-left py-2 px-3 font-medium border border-[var(--border-primary)] bg-[var(--bg-tertiary)]" v-text="t('help.speakerCount')"></th>
|
|
<th class="w-20 text-left py-2 px-3 font-medium border border-[var(--border-primary)] bg-[var(--bg-tertiary)]" v-text="t('help.startTime')"></th>
|
|
<th class="w-20 text-left py-2 px-3 font-medium border border-[var(--border-primary)] bg-[var(--bg-tertiary)]" v-text="t('help.endTime')"></th>
|
|
<th class="text-left py-2 px-3 font-medium border border-[var(--border-primary)] bg-[var(--bg-tertiary)]" v-text="t('help.sentence')"></th>
|
|
<th class="w-24 text-center py-2 px-1 font-medium border border-[var(--border-primary)] bg-[var(--bg-tertiary)]"><span class="sr-only" v-text="t('help.actions')"></span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Virtual scroll spacer (top) -->
|
|
<tr v-if="asrEditorSpacerBefore > 0"><td colspan="5" :style="{ height: asrEditorSpacerBefore + 'px', padding: 0 }"></td></tr>
|
|
|
|
<tr v-for="segment in asrEditorVisibleSegments" :key="`asr-${segment._originalIndex}-${segment.start_time}`" :data-segment-index="segment._originalIndex" class="hover:bg-[var(--bg-tertiary)] transition-colors border-b border-[var(--border-primary)]">
|
|
<td class="border-r border-[var(--border-primary)] align-middle">
|
|
<div class="relative h-full">
|
|
<div class="flex items-center h-full">
|
|
<input type="text" v-model="editingSegments[segment._originalIndex].speaker"
|
|
@input="filterSpeakerSuggestions(segment._originalIndex); openSpeakerSuggestions(segment._originalIndex)"
|
|
@focus="openSpeakerSuggestions(segment._originalIndex)"
|
|
class="w-full h-full px-3 py-2.5 pr-7 bg-transparent border-0 focus:outline-none text-sm text-[var(--text-primary)]" />
|
|
<button type="button" @click.stop="openSpeakerSuggestions(segment._originalIndex)"
|
|
class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] cursor-pointer">
|
|
<i class="fas fa-chevron-down text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Fixed position dropdown -->
|
|
<teleport to="body">
|
|
<div v-if="isDropdownOpen(segment._originalIndex)"
|
|
class="fixed z-[100] w-40 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-md shadow-lg max-h-48 overflow-y-auto"
|
|
:style="getDropdownPosition(segment._originalIndex)">
|
|
<div v-for="speaker in editingSegments[segment._originalIndex].filteredSpeakers" :key="speaker" @mousedown.prevent="selectSpeaker(segment._originalIndex, speaker)" class="px-3 py-2 cursor-pointer hover:bg-[var(--bg-tertiary)] text-sm">${speaker}</div>
|
|
<div @mousedown.prevent="openEditSpeakersModal" class="px-3 py-2 cursor-pointer hover:bg-[var(--bg-accent)] text-sm text-[var(--text-accent)] border-t border-[var(--border-primary)] flex items-center">
|
|
<i class="fas fa-user-edit mr-2"></i> <span v-text="t('buttons.editSpeakers')"></span>
|
|
</div>
|
|
</div>
|
|
</teleport>
|
|
</td>
|
|
<td class="border-r border-[var(--border-primary)] align-middle">
|
|
<input type="number" step="0.01" v-model.number="editingSegments[segment._originalIndex].start_time" class="w-full px-3 py-2.5 bg-transparent border-0 focus:outline-none text-sm text-[var(--text-primary)] text-center" />
|
|
</td>
|
|
<td class="border-r border-[var(--border-primary)] align-middle">
|
|
<input type="number" step="0.01" v-model.number="editingSegments[segment._originalIndex].end_time" class="w-full px-3 py-2.5 bg-transparent border-0 focus:outline-none text-sm text-[var(--text-primary)] text-center" />
|
|
</td>
|
|
<td class="border-r border-[var(--border-primary)] align-top">
|
|
<textarea v-model="editingSegments[segment._originalIndex].sentence" rows="1" class="w-full px-3 py-2.5 bg-transparent border-0 focus:outline-none text-sm text-[var(--text-primary)] resize-none max-h-20 overflow-y-auto custom-scrollbar block" @input="autoResizeTextarea($event)"></textarea>
|
|
</td>
|
|
<td class="px-1 text-center align-middle">
|
|
<div class="flex items-center justify-center gap-1">
|
|
<button @click="$refs.asrEditorAudioRef && ($refs.asrEditorAudioRef.currentTime = segment.start_time, $refs.asrEditorAudioRef.play())" class="p-1.5 rounded hover:bg-[var(--bg-accent)] text-[var(--text-muted)] hover:text-[var(--text-accent)] transition-colors" :title="t('help.playFromHere')">
|
|
<i class="fas fa-play text-xs"></i>
|
|
</button>
|
|
<button @click="addSegmentBelow(segment._originalIndex)" class="p-1.5 rounded hover:bg-green-600/20 text-[var(--text-muted)] hover:text-green-500 transition-colors" :title="t('help.addSegmentBelow')">
|
|
<i class="fas fa-plus text-xs"></i>
|
|
</button>
|
|
<button @click="removeSegment(segment._originalIndex)" class="p-1.5 rounded hover:bg-red-600/20 text-[var(--text-muted)] hover:text-red-500 transition-colors" :title="t('help.deleteSegment')">
|
|
<i class="fas fa-trash text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Virtual scroll spacer (bottom) -->
|
|
<tr v-if="asrEditorSpacerAfter > 0"><td colspan="5" :style="{ height: asrEditorSpacerAfter + 'px', padding: 0 }"></td></tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="py-4 flex justify-center">
|
|
<button @click="addSegment" class="px-4 py-2 bg-[var(--bg-accent)] text-[var(--text-accent)] rounded-lg hover:bg-[var(--bg-accent-hover)] flex items-center text-sm">
|
|
<i class="fas fa-plus mr-2"></i> <span v-text="t('buttons.addSegment')"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="bg-[var(--bg-tertiary)] px-6 py-4 flex justify-end space-x-3 border-t border-[var(--border-primary)] flex-shrink-0 rounded-b-xl">
|
|
<button @click="closeAsrEditorModal" class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)]" v-text="t('common.cancel')"></button>
|
|
<button @click="saveAsrTranscription" class="px-4 py-2 bg-[var(--bg-accent)] text-[var(--text-accent)] rounded-lg hover:bg-[var(--bg-accent-hover)]" v-text="t('buttons.saveChanges')"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|