Select Template
${templates
.map(
(t) => `
`
)
.join("")}
`;
document.body.appendChild(modal);
// Wait for user selection
await new Promise((resolve) => {
modal.querySelectorAll(".template-option").forEach((btn) => {
btn.addEventListener("click", () => {
templateId = btn.dataset.templateId;
modal.remove();
resolve();
});
});
modal
.querySelector(".cancel-btn")
.addEventListener("click", () => {
templateId = "cancelled"; // Mark as cancelled
modal.remove();
resolve();
});
modal
.querySelector(".download-without-template-btn")
.addEventListener("click", () => {
templateId = "none"; // Use 'none' to indicate no template
modal.remove();
resolve();
});
modal.addEventListener("click", (e) => {
if (e.target === modal) {
templateId = "cancelled"; // Mark as cancelled when clicking outside
modal.remove();
resolve();
}
});
});
if (
templateId === null ||
templateId === undefined ||
templateId === "cancelled"
) {
// User cancelled
return;
}
}
// Download the transcript with the selected template
const url = templateId && templateId !== "none"
? `/tool/speakr/recording/${selectedRecording.value.id}/download/transcript?template_id=${templateId}`
: `/tool/speakr/recording/${selectedRecording.value.id}/download/transcript?template_id=none`;
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to download transcript");
}
const blob = await response.blob();
const contentDisposition = response.headers.get(
"content-disposition"
);
const filename = getDownloadFilenameFromHeaders(
contentDisposition,
"转录稿.docx"
);
// Create download link
const downloadUrl = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(downloadUrl);
showToast("Transcript downloaded successfully!");
} catch (error) {
console.error("Error downloading transcript:", error);
showToast("Failed to download transcript", "fa-exclamation-circle");
}
};
const downloadNotes = async () => {
if (!selectedRecording.value || !selectedRecording.value.notes) {
showToast("No notes available to download.", "fa-exclamation-circle");
return;
}
try {
const response = await fetch(
`/tool/speakr/recording/${selectedRecording.value.id}/download/notes`
);
if (!response.ok) {
const error = await response.json();
showToast(
error.error || "Failed to download notes",
"fa-exclamation-circle"
);
return;
}
// Create blob and download
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
// Get filename from response headers or use default
const contentDisposition = response.headers.get(
"Content-Disposition"
);
const filename = getDownloadFilenameFromHeaders(
contentDisposition,
"笔记.docx"
);
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
showToast("Notes downloaded successfully!", "fa-check-circle");
} catch (error) {
console.error("Download failed:", error);
showToast("Failed to download notes", "fa-exclamation-circle");
}
};
const downloadEventICS = async (event) => {
if (!event || !event.id) {
showToast("Invalid event data", "fa-exclamation-circle");
return;
}
try {
const response = await fetch(
`/tool/speakr/api/event/${event.id}/ics`
);
if (!response.ok) {
const error = await response.json();
showToast(
error.error || "Failed to download event",
"fa-exclamation-circle"
);
return;
}
// Create blob and download
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
a.download = `${event.title || "event"}.ics`;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
showToast(
`Event "${event.title}" downloaded. Open the file to add to your calendar.`,
"fa-calendar-check",
3000
);
} catch (error) {
console.error("Download failed:", error);
showToast("Failed to download event", "fa-exclamation-circle");
}
};
const downloadICS = async () => {
if (
!selectedRecording.value ||
!selectedRecording.value.events ||
selectedRecording.value.events.length === 0
) {
showToast("No events to export", "fa-exclamation-circle");
return;
}
try {
const response = await fetch(
`/tool/speakr/api/recording/${selectedRecording.value.id}/events/ics`
);
if (!response.ok) {
const error = await response.json();
showToast(
error.error || "Failed to export events",
"fa-exclamation-circle"
);
return;
}
// Create blob and download
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
a.download = `events-${
selectedRecording.value.title || selectedRecording.value.id
}.ics`;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
showToast(
`Exported ${selectedRecording.value.events.length} events`,
"fa-calendar-check"
);
} catch (error) {
console.error("Download all events ICS error:", error);
showToast("Failed to export events", "fa-exclamation-circle");
}
};
const formatEventDateTime = (dateTimeStr) => {
if (!dateTimeStr) return "";
try {
const date = new Date(dateTimeStr);
const options = {
weekday: "short",
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
};
return date.toLocaleString(undefined, options);
} catch (e) {
return dateTimeStr;
}
};
const downloadChat = async () => {
if (!selectedRecording.value || chatMessages.value.length === 0) {
showToast("No chat messages to download.", "fa-exclamation-circle");
return;
}
try {
const response = await fetch(
`/tool/speakr/recording/${selectedRecording.value.id}/download/chat`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": csrfToken.value,
},
body: JSON.stringify({
messages: chatMessages.value,
}),
}
);
if (!response.ok) {
const error = await response.json();
showToast(
error.error || "Failed to download chat",
"fa-exclamation-circle"
);
return;
}
// Create blob and download
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
// Get filename from response headers or use default
const contentDisposition = response.headers.get(
"Content-Disposition"
);
const filename = getDownloadFilenameFromHeaders(
contentDisposition,
"对话记录.docx"
);
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
showToast("Notes downloaded successfully!");
} catch (error) {
console.error("Download failed:", error);
showToast("Failed to download notes", "fa-exclamation-circle");
}
};
const clearChat = () => {
if (chatMessages.value.length > 0) {
chatMessages.value = [];
showToast("Chat cleared", "fa-broom");
}
};
const openShareModal = async (recording) => {
recordingToShare.value = recording;
shareOptions.share_summary = true;
shareOptions.share_notes = true;
generatedShareLink.value = "";
existingShareDetected.value = false;
showShareModal.value = true;
// Check for existing share
try {
const response = await fetch(
`/tool/speakr/api/recording/${recording.id}/share`,
{
method: "GET",
}
);
const data = await response.json();
if (response.ok && data.exists) {
generatedShareLink.value = data.share_url;
existingShareDetected.value = true;
shareOptions.share_summary = data.share.share_summary;
shareOptions.share_notes = data.share.share_notes;
}
} catch (error) {
console.error("Error checking for existing share:", error);
}
};
const closeShareModal = () => {
showShareModal.value = false;
recordingToShare.value = null;
existingShareDetected.value = false;
};
const createShare = async (forceNew = false) => {
if (!recordingToShare.value) return;
try {
const response = await fetch(
`/tool/speakr/api/recording/${recordingToShare.value.id}/share`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
...shareOptions,
force_new: forceNew,
}),
}
);
const data = await response.json();
if (!response.ok)
throw new Error(data.error || "Failed to create share link");
generatedShareLink.value = data.share_url;
existingShareDetected.value = data.existing && !forceNew;
if (data.existing && !forceNew) {
// Show that we're using an existing share
showToast("Using existing share link", "fa-link");
} else {
showToast("Share link created successfully!", "fa-check-circle");
}
} catch (error) {
setGlobalError(`Failed to create share link: ${error.message}`);
}
};
const copyShareLink = () => {
if (!generatedShareLink.value) return;
navigator.clipboard.writeText(generatedShareLink.value).then(() => {
showToast("Share link copied to clipboard!");
});
};
const openSharesList = async () => {
isLoadingShares.value = true;
showSharesListModal.value = true;
try {
const response = await fetch("/tool/speakr/api/shares");
const data = await response.json();
if (!response.ok)
throw new Error(data.error || "Failed to load shared items");
userShares.value = data;
} catch (error) {
setGlobalError(`Failed to load shared items: ${error.message}`);
} finally {
isLoadingShares.value = false;
}
};
const closeSharesList = () => {
showSharesListModal.value = false;
userShares.value = [];
};
const updateShare = async (share) => {
try {
const response = await fetch(`/tool/speakr/api/share/${share.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
share_summary: share.share_summary,
share_notes: share.share_notes,
}),
});
const data = await response.json();
if (!response.ok)
throw new Error(data.error || "Failed to update share");
showToast("Share permissions updated.", "fa-check-circle");
} catch (error) {
setGlobalError(`Failed to update share: ${error.message}`);
}
};
const confirmDeleteShare = (share) => {
shareToDelete.value = share;
showShareDeleteModal.value = true;
};
const cancelDeleteShare = () => {
shareToDelete.value = null;
showShareDeleteModal.value = false;
};
const deleteShare = async () => {
if (!shareToDelete.value) return;
const shareId = shareToDelete.value.id;
try {
const response = await fetch(`/tool/speakr/api/share/${shareId}`, {
method: "DELETE",
});
const data = await response.json();
if (!response.ok)
throw new Error(data.error || "Failed to delete share");
userShares.value = userShares.value.filter((s) => s.id !== shareId);
showToast("Share link deleted successfully.", "fa-check-circle");
showShareDeleteModal.value = false;
shareToDelete.value = null;
} catch (error) {
setGlobalError(`Failed to delete share: ${error.message}`);
}
};
//--------------------Toast 提示与复制下载反馈 end------------------
//------------------- 响应式监听与界面联动 start------------------
// --- Watchers ---
watch(
uploadQueue,
(newQueue, oldQueue) => {
if (
newQueue.length === 0 &&
oldQueue.length > 0 &&
!isProcessingActive.value
) {
console.log("Upload queue processing finished.");
setTimeout(() => (progressPopupMinimized.value = true), 500);
setTimeout(() => {
if (
completedInQueue.value === totalInQueue.value &&
!isProcessingActive.value
) {
progressPopupClosed.value = true;
}
}, 2000);
}
},
{ deep: true }
);
// Watch for changes to speakerMap to handle "This is Me" functionality
watch(
speakerMap,
(newSpeakerMap) => {
if (!newSpeakerMap) return;
Object.keys(newSpeakerMap).forEach((speakerId) => {
const speakerData = newSpeakerMap[speakerId];
if (
speakerData.isMe &&
currentUserName.value &&
!speakerData.name
) {
// Automatically fill in the user's name when "This is Me" is checked
speakerData.name = currentUserName.value;
} else if (
!speakerData.isMe &&
speakerData.name === currentUserName.value
) {
// Clear the name if "This is Me" is unchecked and the name matches the current user
speakerData.name = "";
}
});
},
{ deep: true }
);
// Watch for tab changes to save content properly
watch(selectedTab, (newTab, oldTab) => {
// Close maximized chat when switching tabs
if (isChatMaximized.value) {
isChatMaximized.value = false;
}
// Save content when switching away from notes tab but keep editor open
if (
oldTab === "notes" &&
editingNotes.value &&
markdownEditorInstance.value
) {
// Save the current content from the editor
const currentContent = markdownEditorInstance.value.value();
selectedRecording.value.notes = currentContent;
// Call auto-save instead of saveInlineEdit to keep editor open
autoSaveNotes();
// Store that we need to recreate the editor when coming back
tempNotesContent.value = currentContent;
}
// Save content when switching away from summary tab but keep editor open
if (
oldTab === "summary" &&
editingSummary.value &&
summaryMarkdownEditorInstance.value
) {
// Save the current content from the editor
const currentContent = summaryMarkdownEditorInstance.value.value();
selectedRecording.value.summary = currentContent;
// Call auto-save instead of saveInlineEdit to keep editor open
autoSaveSummary();
// Store that we need to recreate the editor when coming back
tempSummaryContent.value = currentContent;
}
// Re-initialize editors when switching back to tabs
if (newTab === "notes" && editingNotes.value) {
// Destroy old instance if exists
if (markdownEditorInstance.value) {
markdownEditorInstance.value.toTextArea();
markdownEditorInstance.value = null;
}
// Re-initialize the editor in next tick
nextTick(() => {
initializeMarkdownEditor();
});
}
if (newTab === "summary" && editingSummary.value) {
// Destroy old instance if exists
if (summaryMarkdownEditorInstance.value) {
summaryMarkdownEditorInstance.value.toTextArea();
summaryMarkdownEditorInstance.value = null;
}
// Re-initialize the editor in next tick
nextTick(() => {
initializeSummaryMarkdownEditor();
});
}
});
// Watch for mobile tab changes similarly
watch(mobileTab, (newTab, oldTab) => {
// Save content when switching away from notes tab but keep editor open
if (
oldTab === "notes" &&
editingNotes.value &&
markdownEditorInstance.value
) {
const currentContent = markdownEditorInstance.value.value();
selectedRecording.value.notes = currentContent;
autoSaveNotes(); // Use auto-save instead
tempNotesContent.value = currentContent;
}
// Save content when switching away from summary tab but keep editor open
if (
oldTab === "summary" &&
editingSummary.value &&
summaryMarkdownEditorInstance.value
) {
const currentContent = summaryMarkdownEditorInstance.value.value();
selectedRecording.value.summary = currentContent;
autoSaveSummary(); // Use auto-save instead
tempSummaryContent.value = currentContent;
}
// Re-initialize editors when switching back to tabs on mobile
if (newTab === "notes" && editingNotes.value) {
if (markdownEditorInstance.value) {
markdownEditorInstance.value.toTextArea();
markdownEditorInstance.value = null;
}
nextTick(() => {
initializeMarkdownEditor();
});
}
if (newTab === "summary" && editingSummary.value) {
if (summaryMarkdownEditorInstance.value) {
summaryMarkdownEditorInstance.value.toTextArea();
summaryMarkdownEditorInstance.value = null;
}
nextTick(() => {
initializeSummaryMarkdownEditor();
});
}
});
watch(selectedRecording, (newVal, oldVal) => {
if (newVal?.id !== oldVal?.id) {
// Save any pending edits before switching recordings
if (
editingNotes.value &&
markdownEditorInstance.value &&
oldVal?.id
) {
selectedRecording.value = oldVal; // Temporarily restore old recording
saveEditNotes(); // This will save and cleanup
selectedRecording.value = newVal; // Switch back to new recording
}
if (
editingSummary.value &&
summaryMarkdownEditorInstance.value &&
oldVal?.id
) {
selectedRecording.value = oldVal; // Temporarily restore old recording
saveEditSummary(); // This will save and cleanup
selectedRecording.value = newVal; // Switch back to new recording
}
chatMessages.value = [];
showChat.value = false;
selectedTab.value = "summary";
editingParticipants.value = false;
editingMeetingDate.value = false;
editingSummary.value = false;
editingNotes.value = false;
// Fix WebM duration issue by forcing metadata load
if (newVal?.id) {
nextTick(() => {
const audioElements = document.querySelectorAll("audio");
audioElements.forEach((audio) => {
if (
audio.src &&
audio.src.includes(`tool/speakr/audio/${newVal.id}`)
) {
// For WebM files, we need to seek to end to get duration
const fixDuration = () => {
if (!isFinite(audio.duration) || audio.duration === 0) {
audio.currentTime = 1e101; // Seek to "infinity" to load duration
audio.addEventListener(
"timeupdate",
function resetTime() {
audio.currentTime = 0;
audio.removeEventListener("timeupdate", resetTime);
},
{ once: true }
);
}
};
// Try to fix duration when metadata loads
audio.addEventListener("loadedmetadata", fixDuration, {
once: true,
});
// Also try immediately in case metadata is already loaded
if (audio.readyState >= 1) {
fixDuration();
}
}
});
});
}
}
});
// 会议记录页面
//------------------- Realtime ASR session bridge start------------------
const createRealtimeAsrSession = () => {
if (!window.Speakr || !window.Speakr.createRealtimeAsrSession) {
throw new Error("Realtime ASR session module is not loaded");
}
return window.Speakr.createRealtimeAsrSession({
Recorder,
WebSocketConnectMethod,
getMicStream: () => micStream,
getSystemStream: () => systemStream,
getPausedTranscription: () => pausedTranscription.value || "",
setMainText: (text) => {
asrResult.value = text;
},
setPreviewText: (text) => {
asrResultOnline.value = text;
},
setOfflineText: (text) => {
asrResultOffline.value = text;
},
getLastTimer: () => lastTimer.value,
setLastTimer: (value) => {
lastTimer.value = value;
},
getConfigWords: () => configwords,
shouldShowSpeaker: () => showSpeaker.value,
getSegments: () => segmentList,
setSegments: (segments) => {
segmentList = segments;
},
getSegmentRenderStartIndex: () => segmentRenderStartIndex,
getRealtimeEpoch: () => liveTranscriptionEpoch,
getTimestampBarrier: () => realtimeTimestampBarrierMs,
setTimestampBarrier: (value) => {
realtimeTimestampBarrierMs = value;
},
getEditCarryover: () => realtimeEditCarryover,
setEditCarryover: (value) => {
realtimeEditCarryover = value;
},
setPendingCorrectionCount: (count) => {
pendingCorrectionCount = count;
},
onActiveChange: (active) => {
isRec = active;
},
});
};
const bindRealtimeAsrRefs = () => {
clearRealtimePipelineRef = realtimeAsrSession
? realtimeAsrSession.clearRealtimePipeline
: null;
getLatestRealtimeTimestampRef = realtimeAsrSession
? realtimeAsrSession.getLatestRealtimeTimestamp
: null;
buildRealtimeEditCarryoverRef = realtimeAsrSession
? realtimeAsrSession.buildRealtimeEditCarryover
: null;
renderFullTextRef = realtimeAsrSession
? realtimeAsrSession.renderFullText
: null;
};
const cleanupRealtimeAsrSession = () => {
if (realtimeAsrSession) {
realtimeAsrSession.cleanup();
realtimeAsrSession = null;
}
bindRealtimeAsrRefs();
isRec = false;
};
const fixRecordedAudioDuration = () => {
if (!audioBlobURL.value) return;
const recordingAudio = document.querySelector('audio[src*="blob:"]');
if (!recordingAudio) return;
const fixDuration = () => {
if (!isFinite(recordingAudio.duration) || recordingAudio.duration === 0) {
const originalTime = recordingAudio.currentTime;
recordingAudio.currentTime = 1e101;
recordingAudio.addEventListener(
"timeupdate",
function resetTime() {
recordingAudio.currentTime = originalTime;
recordingAudio.removeEventListener("timeupdate", resetTime);
},
{ once: true }
);
}
};
recordingAudio.addEventListener("loadedmetadata", fixDuration, {
once: true,
});
recordingAudio.addEventListener("canplay", fixDuration, {
once: true,
});
if (recordingAudio.readyState >= 1) {
setTimeout(fixDuration, 100);
}
};
watch(currentView, (newView) => {
if (newView === "recording") {
nextTick(() => {
initializeRecordingMarkdownEditor();
getBaseInfo();
is_final.value = false;
asrResultOnline.value = "";
cleanupRealtimeAsrSession();
try {
realtimeAsrSession = createRealtimeAsrSession();
bindRealtimeAsrRefs();
if (!isPaused.value) {
realtimeAsrSession.start();
}
} catch (error) {
console.error("Failed to initialize realtime ASR session:", error);
setGlobalError(error.message);
}
fixRecordedAudioDuration();
});
} else {
liveTranscriptionEpoch += 1;
realtimeTimestampBarrierMs = -1;
cleanupRealtimeAsrSession();
pendingCorrectionCount = 0;
analysisResult.value = "";
asrResult.value = "";
segmentList = [];
segmentRenderStartIndex = 0;
isEditingTranscription.value = false;
is_final.value = false;
if (recordingMarkdownEditorInstance.value) {
recordingMarkdownEditorInstance.value.toTextArea();
recordingMarkdownEditorInstance.value = null;
}
}
});
//--------------------Realtime ASR session bridge end------------------
// 监听内容变化
watch(asrResult, async () => {
await nextTick(); // 等 DOM 更新完再操作
if (asrTextarea.value) {
// console.log(asrTextarea.value.scrollHeight,'asrTextarea.value.scrollHeight');
asrTextarea.value.scrollTop = asrTextarea.value.scrollHeight;
}
if (asrResultTextarea.value) {
asrResultTextarea.value.scrollTop =
asrResultTextarea.value.scrollHeight;
}
});
// 监听内容变化
watch(asrResultOnline, async () => {
await nextTick(); // 等 DOM 更新完再操作
if (asrResultTextareaOnline.value) {
asrResultTextareaOnline.value.scrollTop =
asrResultTextareaOnline.value.scrollHeight;
}
});
watch(asrResultOffline, async () => {
await nextTick(); // 等 DOM 更新完再操作
if (asrResultTextareaOnline.value) {
asrResultTextareaOnline.value.scrollTop =
asrResultTextareaOnline.value.scrollHeight;
}
});
let realtimeAutoScrollFrame = null;
const scrollRealtimeTextareaToBottom = (textarea) => {
if (!textarea) return;
textarea.scrollTop = textarea.scrollHeight;
};
const scrollVisibleRealtimeTextareas = () => {
[
asrTextarea.value,
asrResultTextarea.value,
asrResultTextareaOnline.value,
].forEach(scrollRealtimeTextareaToBottom);
};
const scheduleRealtimeAutoScroll = async (force = false) => {
if (isEditingTranscription.value && !force) {
return;
}
await nextTick();
scrollVisibleRealtimeTextareas();
if (
typeof window === "undefined" ||
typeof window.requestAnimationFrame !== "function"
) {
return;
}
if (realtimeAutoScrollFrame !== null) {
window.cancelAnimationFrame(realtimeAutoScrollFrame);
realtimeAutoScrollFrame = null;
}
realtimeAutoScrollFrame = window.requestAnimationFrame(() => {
scrollVisibleRealtimeTextareas();
realtimeAutoScrollFrame = window.requestAnimationFrame(() => {
scrollVisibleRealtimeTextareas();
realtimeAutoScrollFrame = null;
});
});
};
watch(fullRealtimeTranscription, () => {
scheduleRealtimeAutoScroll();
});
watch(isEditingTranscription, () => {
scheduleRealtimeAutoScroll(true);
});
watch(isyjDialogVisible, (visible) => {
if (visible) {
scheduleRealtimeAutoScroll(true);
}
});
watch(analysisResult, async () => {
await nextTick(); // 等 DOM 更新完再操作
if (sumupResultTextarea.value) {
sumupResultTextarea.value.scrollTop =
sumupResultTextarea.value.scrollHeight;
}
});
watch(audioBlobURL, (newURL) => {
if (newURL) {
nextTick(() => {
const recordingAudio = document.querySelector(
'audio[src*="blob:"]'
);
if (recordingAudio) {
const fixDuration = () => {
if (
!isFinite(recordingAudio.duration) ||
recordingAudio.duration === 0
) {
const originalTime = recordingAudio.currentTime;
// recordingAudio.currentTime = 1e101;
recordingAudio.currentTime = originalTime + 0.01
recordingAudio.addEventListener(
"timeupdate",
function resetTime() {
recordingAudio.currentTime = originalTime;
recordingAudio.removeEventListener(
"timeupdate",
resetTime
);
},
{ once: true }
);
}
};
// Multiple events to ensure we catch the duration
recordingAudio.addEventListener("loadedmetadata", fixDuration, {
once: true,
});
recordingAudio.addEventListener("loadeddata", fixDuration, {
once: true,
});
recordingAudio.addEventListener("canplay", fixDuration, {
once: true,
});
// Also try after a delay
if (recordingAudio.readyState >= 1) {
setTimeout(fixDuration, 100);
}
}
});
}
});
watch(playerVolume, (newVolume) => {
const audioElements = document.querySelectorAll("audio");
audioElements.forEach((audio) => {
if (audio.volume !== newVolume) {
audio.volume = newVolume;
}
});
});
// Watch for search query changes
watch(searchQuery, (newQuery) => {
debouncedSearch(newQuery);
});
// Auto-apply filters when they change (except text query which is debounced)
watch(
filterTags,
() => {
applyAdvancedFilters();
},
{ deep: true }
);
watch(filterDatePreset, () => {
applyAdvancedFilters();
});
watch(
filterDateRange,
() => {
applyAdvancedFilters();
},
{ deep: true }
);
// Debounce text query changes
watch(filterTextQuery, (newValue) => {
clearTimeout(searchDebounceTimer.value);
searchDebounceTimer.value = setTimeout(() => {
applyAdvancedFilters();
}, 300);
});
//--------------------响应式监听与界面联动 end------------------
//------------------- 运行时配置加载 start------------------
// --- Configuration Loading ---
const loadConfiguration = async () => {
try {
const response = await fetch("/tool/speakr/api/config");
if (response.ok) {
const config = await response.json();
maxFileSizeMB.value = config.max_file_size_mb || 250;
chunkingEnabled.value =
config.chunking_enabled !== undefined
? config.chunking_enabled
: true;
chunkingMode.value = config.chunking_mode || "size";
chunkingLimit.value = config.chunking_limit || 20;
chunkingLimitDisplay.value =
config.chunking_limit_display || "20MB";
recordingDisclaimer.value = config.recording_disclaimer || "";
console.log(
`Loaded configuration: max size ${
maxFileSizeMB.value
}MB, chunking ${
chunkingEnabled.value ? "enabled" : "disabled"
} (${chunkingLimitDisplay.value})`
);
} else {
console.warn("Failed to load configuration, using default values");
}
} catch (error) {
console.error("Error loading configuration:", error);
// Keep default values on error
}
};
const initializeSummaryMarkdownEditor = () => {
if (!summaryMarkdownEditor.value) return;
try {
summaryMarkdownEditorInstance.value = new EasyMDE({
element: summaryMarkdownEditor.value,
spellChecker: false,
autofocus: true,
placeholder: "Enter summary in Markdown format...",
initialValue: selectedRecording.value?.summary || "",
status: false,
toolbar: [
"bold",
"italic",
"heading",
"|",
"quote",
"unordered-list",
"ordered-list",
"|",
"link",
"image",
"|",
"preview",
"side-by-side",
"fullscreen",
"|",
"guide",
],
previewClass: ["editor-preview", "notes-preview"],
theme: isDarkMode.value ? "dark" : "light",
});
// Add auto-save functionality
summaryMarkdownEditorInstance.value.codemirror.on("change", () => {
if (autoSaveTimer.value) {
clearTimeout(autoSaveTimer.value);
}
autoSaveTimer.value = setTimeout(() => {
autoSaveSummary();
}, autoSaveDelay);
});
} catch (error) {
console.error("Failed to initialize summary markdown editor:", error);
editingSummary.value = true;
}
};
const pollInboxRecordings = async () => {
try {
const response = await fetch("/tool/speakr/api/inbox_recordings");
if (!response.ok) {
// Silently fail, as this is a background task
return;
}
const inboxRecordings = await response.json();
if (inboxRecordings && inboxRecordings.length > 0) {
inboxRecordings.forEach((recording) => {
// Add to main recordings list if it's not there already
const existingRecording = recordings.value.find(
(r) => r.id === recording.id
);
if (!existingRecording) {
recordings.value.unshift(recording);
totalRecordings.value++; // Update total count
}
// Check if this recording is already in the upload queue or currently being processed
const existingItem = uploadQueue.value.find(
(item) => item.recordingId === recording.id
);
const isCurrentlyProcessing =
currentlyProcessingFile.value &&
currentlyProcessingFile.value.recordingId === recording.id;
// Don't add if it's already in queue or being processed
if (existingItem || isCurrentlyProcessing) {
// Update status if the existing item status has changed
if (existingItem && existingItem.status !== recording.status) {
console.log(
`Updating status for existing recording ${recording.original_filename}: ${existingItem.status} -> ${recording.status}`
);
}
return;
}
// Only add recordings that are still processing (not completed)
if (recording.status === "COMPLETED") {
console.log(
`Skipping completed inbox recording: ${recording.original_filename}`
);
return;
}
console.log(
`Found new inbox recording: ${recording.original_filename} (status: ${recording.status})`
);
// Don't add recordings that are already being handled by main processing
if (
recording.status === "SUMMARIZING" &&
isProcessingActive.value
) {
console.log(
`Skipping ${recording.original_filename} - already in summarization phase of main processing`
);
return;
}
// Add it to the queue to be displayed in the progress modal
const inboxItem = {
file: {
name:
recording.original_filename || `Recording ${recording.id}`,
size: recording.file_size || 0,
},
status: "pending", // It's already being processed on backend
recordingId: recording.id,
clientId: `inbox-${recording.id}-${Date.now()}`,
error: null,
isReprocessing: true, // Use reprocessing logic to poll for status
reprocessType: "transcription",
};
uploadQueue.value.unshift(inboxItem);
// If nothing is currently being processed, make this the active item for the main progress bar
if (!isProcessingActive.value && !currentlyProcessingFile.value) {
currentlyProcessingFile.value = inboxItem;
}
// Show progress modal if it's hidden
progressPopupMinimized.value = false;
progressPopupClosed.value = false;
// Start polling its status
startReprocessingPoll(recording.id);
});
}
} catch (error) {
console.error("Error polling for inbox recordings:", error);
}
};
//--------------------运行时配置加载 end------------------
//------------------- 录音格式兼容检测 start------------------
// --- Audio Format Detection ---
const detectSupportedAudioFormats = () => {
const formats = [
"audio/webm;codecs=opus",
"audio/webm;codecs=vp9",
"audio/webm",
"audio/mp4;codecs=mp4a.40.2",
"audio/mp4",
"audio/ogg;codecs=opus",
"audio/wav",
];
const supportedFormats = formats.filter((format) =>
MediaRecorder.isTypeSupported(format)
);
console.log("Supported audio recording formats:", supportedFormats);
if (supportedFormats.length === 0) {
console.warn(
"No optimized audio formats supported, will use browser default"
);
}
return supportedFormats;
};
//--------------------录音格式兼容检测 end------------------
//------------------- 系统音频能力检测 start------------------
// --- System Audio Detection ---
const detectSystemAudioCapabilities = async () => {
systemAudioSupported.value = false;
canRecordSystemAudio.value = false;
systemAudioError.value = "";
// Check if getDisplayMedia is available
if (
!navigator.mediaDevices ||
!navigator.mediaDevices.getDisplayMedia
) {
systemAudioError.value = "getDisplayMedia API not supported";
return;
}
try {
// Test if we can request system audio (this will prompt user)
// We'll do this only when user actually tries to record
systemAudioSupported.value = true;
canRecordSystemAudio.value = true;
systemAudioError.value = "";
} catch (error) {
systemAudioError.value = error.message;
console.warn("System audio detection failed:", error);
}
};
const detectBrowser = () => {
const userAgent = navigator.userAgent;
if (userAgent.includes("Firefox")) {
browser.value = "firefox";
} else if (userAgent.includes("Chrome")) {
browser.value = "chrome";
} else if (userAgent.includes("Safari")) {
browser.value = "safari";
} else if (
userAgent.includes("MSIE") ||
userAgent.includes("Trident/")
) {
browser.value = "ie";
} else {
browser.value = "unknown";
}
};
//--------------------系统音频能力检测 end------------------
//------------------- 生命周期初始化 start------------------
// --- Lifecycle ---
onMounted(async () => {
const loader = document.getElementById("loader");
const app = document.getElementById("app");
if (loader) {
loader.style.opacity = "0";
setTimeout(() => {
loader.style.display = "none";
}, 500);
}
if (app) {
app.style.opacity = "1";
}
const appDiv = document.getElementById("app");
if (appDiv) {
const asrFlag = appDiv.dataset.useAsrEndpoint;
useAsrEndpoint.value = asrFlag === "True" || asrFlag === "true";
currentUserName.value = appDiv.dataset.currentUserName || "";
}
// Load configuration first
await loadConfiguration();
// Detect system audio capabilities
await detectSystemAudioCapabilities();
detectBrowser();
// Check if language was changed in account settings
if (localStorage.getItem("ui_language_changed") === "true") {
localStorage.removeItem("ui_language_changed");
// Force reload to apply new language
window.location.reload();
return;
}
// i18n is already initialized before Vue app creation
if (window.i18n) {
currentLanguage.value = window.i18n.getLocale();
availableLanguages.value = window.i18n.getAvailableLocales();
const lang = availableLanguages.value.find(
(l) => l.code === currentLanguage.value
);
currentLanguageName.value = lang ? lang.nativeName : "English";
// Listen for locale changes
window.addEventListener("localeChanged", (event) => {
currentLanguage.value = event.detail.locale;
const lang = availableLanguages.value.find(
(l) => l.code === currentLanguage.value
);
currentLanguageName.value = lang ? lang.nativeName : "English";
});
}
loadRecordings();
loadTags();
loadDrafts(); // 加载草稿列表
initializeDarkMode();
initializeColorScheme();
const savedVolume = localStorage.getItem("playerVolume");
if (savedVolume !== null) {
playerVolume.value = parseFloat(savedVolume);
}
const savedTranscriptionViewMode = localStorage.getItem(
"transcriptionViewMode"
);
if (savedTranscriptionViewMode) {
transcriptionViewMode.value = savedTranscriptionViewMode;
}
// Load saved column widths
const savedLeftWidth = localStorage.getItem("transcriptColumnWidth");
const savedRightWidth = localStorage.getItem("summaryColumnWidth");
if (savedLeftWidth && savedRightWidth) {
leftColumnWidth.value = parseFloat(savedLeftWidth);
rightColumnWidth.value = parseFloat(savedRightWidth);
}
const updateMobileStatus = () => {
windowWidth.value = window.innerWidth;
};
window.addEventListener("resize", updateMobileStatus);
updateMobileStatus();
// Start polling for inbox recordings
setInterval(pollInboxRecordings, 10000);
const handleEsc = (e) => {
if (e.key === "Escape") {
if (showColorSchemeModal.value) {
closeColorSchemeModal();
}
if (showEditModal.value) {
cancelEdit();
}
if (showDeleteModal.value) {
cancelDelete();
}
if (showSortOptions.value) {
showSortOptions.value = false;
}
}
};
document.addEventListener("keydown", handleEsc);
// Click away handler for dropdowns
const handleClickAway = (e) => {
// Close user menu if clicking outside
if (isUserMenuOpen.value) {
// Check if we clicked within the user menu area (button or dropdown)
const userMenuButton = e.target.closest(
'button[class*="flex items-center gap"]'
);
const userMenuDropdown = e.target.closest(
'div[class*="absolute right-0"]'
);
// Check if the click was on the user menu button specifically
const isUserMenuButtonClick =
userMenuButton &&
userMenuButton.querySelector("i.fa-user-circle");
// If we didn't click on the user menu button or dropdown, close it
if (!isUserMenuButtonClick && !userMenuDropdown) {
isUserMenuOpen.value = false;
}
}
// Close speaker suggestions if clicking outside in the modal
if (showSpeakerModal.value) {
// If not clicking on an input field or suggestion dropdown
const clickedOnInput = e.target.closest('input[type="text"]');
const clickedOnSuggestion = e.target.closest(
'[class*="absolute z-10"]'
);
if (!clickedOnInput && !clickedOnSuggestion) {
// Close all suggestion dropdowns
Object.keys(speakerSuggestions.value).forEach((speakerId) => {
speakerSuggestions.value[speakerId] = [];
});
}
}
};
document.addEventListener("click", handleClickAway);
});
//--------------------生命周期初始化 end------------------
//------------------- 实时转写手动编辑模式 start------------------
// --- 转录文本编辑功能 ---
// 用户手动编辑后，以编辑结果为准，旧的实时结果不再回灌。
let editModeOriginalText = "";
function enterEditMode() {
editModeOriginalText = fullRealtimeTranscription.value || "";
editableText.value = editModeOriginalText;
editModeBufferStartIndex = segmentList.length;
const barrierTimestampMs = getLatestRealtimeTimestampRef
? getLatestRealtimeTimestampRef()
: null;
startNewRealtimeEpoch({
barrierTimestampMs,
clearEditCarryover: false,
});
realtimeEditCarryover = buildRealtimeEditCarryoverRef
? buildRealtimeEditCarryoverRef(editModeOriginalText)
: null;
isEditingTranscription.value = true;
}
function exitEditMode() {
const nextText = editableText.value ?? "";
isEditingTranscription.value = false;
pausedTranscription.value = nextText;
asrResult.value = nextText;
asrResultOnline.value = "";
asrResultOffline.value = "";
segmentRenderStartIndex = editModeBufferStartIndex;
editModeOriginalText = nextText;
if (renderFullTextRef) {
renderFullTextRef();
}
}
//--------------------实时转写手动编辑模式 end------------------
//------------------- 模板暴露与事件出口 start------------------
return {
// Core State
currentView,
dragover,
recordings,
selectedRecording,
selectedTab,
searchQuery,
isLoadingRecordings,
globalError,
maxFileSizeMB,
chunkingEnabled,
chunkingMode,
chunkingLimit,
chunkingLimitDisplay,
sortBy,
showAdvancedFilters,
filterTags,
filterDateRange,
filterDatePreset,
filterTextQuery,
// Pagination State
currentPage,
perPage,
totalRecordings,
totalPages,
hasNextPage,
hasPrevPage,
isLoadingMore,
// UI State
browser,
isSidebarCollapsed,
searchTipsExpanded,
isUserMenuOpen,
isDarkMode,
currentColorScheme,
showColorSchemeModal,
windowWidth,
isMobileScreen,
mobileTab,
isMetadataExpanded,
// i18n State
currentLanguage,
currentLanguageName,
availableLanguages,
showLanguageMenu,
// Upload State
uploadQueue,
currentlyProcessingFile,
processingProgress,
processingMessage,
isProcessingActive,
progressPopupMinimized,
progressPopupClosed,
totalInQueue,
completedInQueue,
finishedFilesInQueue,
clearCompletedUploads,
// Audio Recording
editingDraftId,
editingDraftName,
isRecording,
canRecordAudio,
canRecordSystemAudio,
systemAudioSupported,
systemAudioError,
audioBlobURL,
recordingTime,
recordingNotes,
visualizer,
micVisualizer,
systemVisualizer,
recordingMode,
recordingDisclaimer,
showRecordingDisclaimerModal,
acceptRecordingDisclaimer,
cancelRecordingDisclaimer,
showAdvancedOptions,
uploadLanguage,
uploadMinSpeakers,
uploadMaxSpeakers,
asrLanguage,
asrMinSpeakers,
asrMaxSpeakers,
availableTags,
selectedTagIds,
selectedTags,
uploadTagSearchFilter,
filteredAvailableTagsForUpload,
onTagSelected,
addTagToSelection,
removeTagFromSelection,
showSystemAudioHelp,
// Draft/Pause Recording
isPaused,
isStoppingRecording,
currentDraftId,
showRecordingControls,
pausedDuration,
pausedTranscription,
draftRecordings,
draftsExpanded,
pauseRecording,
resumeRecording,
loadDrafts,
continueDraftRecording,
deleteDraft,
// Modal State
showEditModal,
showDeleteModal,
showResetModal,
editingRecording,
recordingToDelete,
showEditTagsModal,
selectedNewTagId,
tagSearchFilter,
filteredAvailableTagsForModal,
editRecordingTags,
closeEditTagsModal,
addTagToRecording,
removeTagFromRecording,
getRecordingTags,
getAvailableTagsForRecording,
filterByTag,
clearTagFilter,
applyAdvancedFilters,
clearAllFilters,
showTextEditorModal,
showAsrEditorModal,
editingTranscriptionContent,
editingSegments,
availableSpeakers,
// Inline Editing
editingParticipants,
editingMeetingDate,
editingSummary,
editingNotes,
// Markdown Editor
notesMarkdownEditor,
markdownEditorInstance,
summaryMarkdownEditor,
summaryMarkdownEditorInstance,
recordingNotesEditor,
// Transcription
transcriptionViewMode,
legendExpanded,
highlightedSpeaker,
processedTranscription,
// Chat
showChat,
isChatMaximized,
toggleChatMaximize,
chatMessages,
chatInput,
isChatLoading,
chatMessagesRef,
// Audio Player
playerVolume,
// Column Resizing
leftColumnWidth,
rightColumnWidth,
isResizing,
// App Configuration
useAsrEndpoint,
currentUserName,
// Computed
filteredRecordings,
groupedRecordings,
activeRecordingMetadata,
datePresetOptions,
languageOptions,
// Color Schemes
colorSchemes,
asrResult,
asrResultOnline,
asrResultOffline,
fullRealtimeTranscription,
asrTextarea,
asrResultTextarea,
asrResultTextareaOnline,
analysisResult,
sumupResultTextarea,
isDialogVisible,
isyjDialogVisible,
baseInfo,
isModalOpen,
urlinfo,
urlmsg,
zjloding,
// Methods
openmodel,
openzjmodel,
closeModal,
setGlobalError,
formatFileSize,
formatDisplayDate,
formatStatus,
getStatusClass,
formatTime,
t,
tc,
changeLanguage,
toggleDarkMode,
applyColorScheme,
initializeColorScheme,
openColorSchemeModal,
closeColorSchemeModal,
selectColorScheme,
resetColorScheme,
toggleSidebar,
switchToUploadView,
selectRecording,
handleDragOver,
handleDragLeave,
handleDrop,
handleFileSelect,
addFilesToQueue,
startRecording,
stopRecording,
uploadRecordedAudio,
discardRecording,
downloadRecordedAudio,
loadRecordings,
loadMoreRecordings,
performSearch,
debouncedSearch,
saveMetadata,
editRecording,
cancelEdit,
saveEdit,
confirmDelete,
cancelDelete,
deleteRecording,
toggleEditParticipants,
toggleEditMeetingDate,
toggleEditSummary,
cancelEditSummary,
saveEditSummary,
toggleEditNotes,
cancelEditNotes,
saveEditNotes,
initializeMarkdownEditor,
saveInlineEdit,
clickToEditNotes,
clickToEditSummary,
autoSaveNotes,
autoSaveSummary,
sendChatMessage,
isChatScrolledToBottom,
scrollChatToBottom,
startColumnResize,
handleChatKeydown,
seekAudio,
seekAudioFromEvent,
onPlayerVolumeChange,
showToast,
copyMessage,
copyTranscription,
copySummary,
copyNotes,
downloadSummary,
downloadTranscript,
downloadNotes,
downloadChat,
clearChat,
downloadEventICS,
downloadICS,
formatEventDateTime,
toggleInbox,
toggleHighlight,
toggleTranscriptionViewMode,
reprocessTranscription,
reprocessSummary,
generateSummary,
resetRecordingStatus,
confirmReset,
cancelReset,
executeReset,
openTranscriptionEditor,
openTextEditorModal,
closeTextEditorModal,
saveTranscription,
openAsrEditorModal,
closeAsrEditorModal,
saveAsrTranscription,
adjustTime,
filterSpeakers,
openSpeakerSuggestions,
closeSpeakerSuggestions,
selectSpeaker,
addSegment,
removeSegment,
showReprocessModal,
reprocessType,
reprocessRecording,
cancelReprocess,
executeReprocess,
asrReprocessOptions,
showSpeakerModal,
showShareModal,
recordingToShare,
shareOptions,
generatedShareLink,
existingShareDetected,
userShares,
isLoadingShares,
showSharesListModal,
shareToDelete,
showShareDeleteModal,
confirmDeleteShare,
cancelDeleteShare,
speakerMap,
speakerDisplayMap,
modalSpeakers,
regenerateSummaryAfterSpeakerUpdate,
identifiedSpeakers,
identifiedSpeakersInOrder,
hasSpeakerNames,
openSpeakerModal,
closeSpeakerModal,
saveSpeakerNames,
highlightedTranscript,
highlightedSpeaker,
highlightSpeakerInTranscript,
focusSpeaker,
blurSpeaker,
clearSpeakerHighlight,
currentSpeakerGroupIndex,
speakerGroups,
navigateToNextSpeakerGroup,
navigateToPrevSpeakerGroup,
speakerSuggestions,
loadingSuggestions,
activeSpeakerInput,
searchSpeakers,
selectSpeakerSuggestion,
closeSpeakerSuggestionsOnClick,
autoIdentifySpeakers,
isAutoIdentifying,
formatDuration,
openShareModal,
closeShareModal,
createShare,
openSharesList,
closeSharesList,
updateShare,
deleteShare,
copyShareLink,
startDraftRename,
saveDraftRename,
editingDraftId,
editingDraftName,
draftNameInput,
draftRecordings,
deleteDraft,
continueDraftRecording,
loadDrafts,
// Recording Size Monitoring
estimatedFileSize,
fileSizeWarningShown,
recordingQuality,
actualBitrate,
maxRecordingMB,
sizeCheckInterval,
updateFileSizeEstimate,
startSizeMonitoring,
stopSizeMonitoring,
sumupResult,
lastTimer,
promptVisible,
promptList,
openPromptModal,
closePromptModal,
confirmPromptSelection,
selectedPromptId,
recommendPromptId,
recommendPromptName,
isMarkdown,
renderedMarkdown,
recommendPromptReason,
showSpeaker,
isEditingTranscription,
editableText,
enterEditMode,
exitEditMode,
};
},
delimiters: ["${", "}"],
});
//--------------------模板暴露与事件出口 end------------------
//--------------------Vue 应用主体定义 end------------------
//------------------- Vue 全局注入与挂载 start------------------
// Add t function as a global property BEFORE mounting so it's available in templates immediately
app.config.globalProperties.t = safeT;
// Also add tc for pluralization
app.config.globalProperties.tc = (key, count, params = {}) => {
if (!window.i18n || !window.i18n.tc) {
return key;
}
return window.i18n.tc(key, count, params);
};
// Provide t and tc to the app
app.provide("t", safeT);
app.provide("tc", (key, count, params = {}) => {
if (!window.i18n || !window.i18n.tc) {
return key;
}
return window.i18n.tc(key, count, params);
});
// Mount the app
app.mount("#app");
// Hide loading overlay after Vue is mounted and ready
Vue.nextTick(() => {
const overlay = document.querySelector(".app-loading-overlay");
if (overlay) {
// Small delay to ensure everything is rendered
setTimeout(() => {
overlay.classList.add("fade-out");
setTimeout(() => {
overlay.remove();
document.body.classList.remove("app-loading");
}, 300);
}, 100);
} else {
document.body.classList.remove("app-loading");
}
});
//--------------------Vue 全局注入与挂载 end------------------
});