900 lines
28 KiB
JavaScript
900 lines
28 KiB
JavaScript
/**
|
|
* Audiobook Maker Pro v3.1 - Main Application
|
|
* UPDATED: Dynamic header help button, floating guide panel, no hint bar
|
|
* UPDATED: Hide guide panel by default when Interactive Reader tab is active
|
|
*/
|
|
|
|
// ============================================
|
|
// Global State
|
|
// ============================================
|
|
|
|
let currentProject = {
|
|
id: null,
|
|
name: 'My Audiobook',
|
|
chapters: []
|
|
};
|
|
|
|
let voices = [];
|
|
let archiveModal = null;
|
|
let ttsEditModal = null;
|
|
let currentWorkflowStage = 'upload';
|
|
|
|
// ============================================
|
|
// Initialization
|
|
// ============================================
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('🎧 Audiobook Maker Pro v3.1 initializing...');
|
|
|
|
archiveModal = new bootstrap.Modal(document.getElementById('archiveModal'));
|
|
ttsEditModal = new bootstrap.Modal(document.getElementById('ttsEditModal'));
|
|
|
|
loadVoices();
|
|
initPdfHandler();
|
|
initMarkdownEditor();
|
|
setupEventListeners();
|
|
|
|
// Show welcome overlay for first-time users
|
|
initWelcomeOverlay();
|
|
|
|
// Initialize workflow progress
|
|
updateWorkflowProgress('upload');
|
|
|
|
// Initialize floating guide panel
|
|
initFloatingGuidePanel();
|
|
|
|
// Load current user info
|
|
loadCurrentUser();
|
|
|
|
// Ensure reader UI is hidden on startup
|
|
if (typeof hideReaderUI === 'function') {
|
|
hideReaderUI();
|
|
}
|
|
|
|
console.log('✅ Application initialized');
|
|
});
|
|
|
|
function setupEventListeners() {
|
|
document.getElementById('projectName').addEventListener('change', function() {
|
|
currentProject.name = this.value;
|
|
});
|
|
|
|
document.getElementById('reader-tab').addEventListener('shown.bs.tab', function() {
|
|
renderInteractiveReader();
|
|
if (typeof showReaderUI === 'function') {
|
|
showReaderUI();
|
|
}
|
|
// Hide the guide panel when entering the reader
|
|
hideGuidePanelForReader();
|
|
});
|
|
|
|
document.getElementById('editor-tab').addEventListener('shown.bs.tab', function() {
|
|
if (typeof hideReaderUI === 'function') {
|
|
hideReaderUI();
|
|
}
|
|
// Restore the guide panel when returning to the editor
|
|
restoreGuidePanelForEditor();
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// Welcome Overlay
|
|
// ============================================
|
|
|
|
function initWelcomeOverlay() {
|
|
const dontShow = localStorage.getItem('audiobookMakerHideWelcome');
|
|
if (dontShow === 'true') {
|
|
document.getElementById('welcomeOverlay').style.display = 'none';
|
|
} else {
|
|
document.getElementById('welcomeOverlay').style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
function dismissWelcome() {
|
|
const dontShowCheckbox = document.getElementById('welcomeDontShow');
|
|
if (dontShowCheckbox && dontShowCheckbox.checked) {
|
|
localStorage.setItem('audiobookMakerHideWelcome', 'true');
|
|
}
|
|
document.getElementById('welcomeOverlay').style.display = 'none';
|
|
}
|
|
|
|
function showWelcome() {
|
|
document.getElementById('welcomeOverlay').style.display = 'flex';
|
|
}
|
|
|
|
// ============================================
|
|
// Dynamic Header Help Button
|
|
// ============================================
|
|
|
|
function handleHeaderHelp() {
|
|
if (currentWorkflowStage === 'upload') {
|
|
showWelcome();
|
|
} else {
|
|
showGuidePanel();
|
|
}
|
|
}
|
|
|
|
function updateHeaderHelpButton(stage) {
|
|
const label = document.getElementById('headerHelpLabel');
|
|
const btn = document.getElementById('headerHelpBtn');
|
|
|
|
if (!label || !btn) return;
|
|
|
|
if (stage === 'upload') {
|
|
label.textContent = 'Quick Start';
|
|
btn.title = 'Show quick start guide';
|
|
} else {
|
|
label.textContent = 'Quick Guide';
|
|
btn.title = 'Show editor quick guide';
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Floating Guide Panel
|
|
// ============================================
|
|
|
|
let guidePanelDragState = {
|
|
isDragging: false,
|
|
startX: 0,
|
|
startY: 0,
|
|
offsetX: 0,
|
|
offsetY: 0
|
|
};
|
|
|
|
function initFloatingGuidePanel() {
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
const header = document.getElementById('guidePanelHeader');
|
|
const toggle = document.getElementById('floatingGuideToggle');
|
|
|
|
if (!panel || !header) return;
|
|
|
|
// Check if user previously hid the panel permanently
|
|
const hideGuide = localStorage.getItem('audiobookMakerHideGuide');
|
|
if (hideGuide === 'true') {
|
|
panel.classList.remove('visible');
|
|
if (toggle) toggle.classList.add('visible');
|
|
return;
|
|
}
|
|
|
|
// Check if user previously collapsed
|
|
const collapsed = localStorage.getItem('audiobookMakerGuideCollapsed');
|
|
if (collapsed === 'true') {
|
|
panel.classList.add('collapsed');
|
|
const icon = document.getElementById('guideCollapseIcon');
|
|
if (icon) {
|
|
icon.classList.remove('bi-chevron-up');
|
|
icon.classList.add('bi-chevron-down');
|
|
}
|
|
}
|
|
|
|
// Restore saved position
|
|
const savedPos = localStorage.getItem('audiobookMakerGuidePos');
|
|
if (savedPos) {
|
|
try {
|
|
const pos = JSON.parse(savedPos);
|
|
const maxX = window.innerWidth - 100;
|
|
const maxY = window.innerHeight - 50;
|
|
if (pos.x >= 0 && pos.x <= maxX && pos.y >= 0 && pos.y <= maxY) {
|
|
panel.style.right = 'auto';
|
|
panel.style.left = pos.x + 'px';
|
|
panel.style.top = pos.y + 'px';
|
|
}
|
|
} catch(e) { /* ignore */ }
|
|
}
|
|
|
|
// Setup drag events (mouse)
|
|
header.addEventListener('mousedown', onGuideDragStart);
|
|
document.addEventListener('mousemove', onGuideDragMove);
|
|
document.addEventListener('mouseup', onGuideDragEnd);
|
|
|
|
// Touch support
|
|
header.addEventListener('touchstart', onGuideTouchStart, { passive: false });
|
|
document.addEventListener('touchmove', onGuideTouchMove, { passive: false });
|
|
document.addEventListener('touchend', onGuideTouchEnd);
|
|
}
|
|
|
|
function showGuidePanelOnEditor() {
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
const toggle = document.getElementById('floatingGuideToggle');
|
|
const hideGuide = localStorage.getItem('audiobookMakerHideGuide');
|
|
|
|
if (hideGuide === 'true') {
|
|
if (toggle) toggle.classList.add('visible');
|
|
return;
|
|
}
|
|
|
|
if (panel) panel.classList.add('visible');
|
|
if (toggle) toggle.classList.remove('visible');
|
|
}
|
|
|
|
function showGuidePanel() {
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
const toggle = document.getElementById('floatingGuideToggle');
|
|
|
|
if (panel) panel.classList.add('visible');
|
|
if (toggle) toggle.classList.remove('visible');
|
|
|
|
localStorage.removeItem('audiobookMakerHideGuide');
|
|
}
|
|
|
|
function hideGuidePanel() {
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
const toggle = document.getElementById('floatingGuideToggle');
|
|
|
|
if (panel) panel.classList.remove('visible');
|
|
if (toggle) toggle.classList.add('visible');
|
|
}
|
|
|
|
function toggleGuideCollapse() {
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
const icon = document.getElementById('guideCollapseIcon');
|
|
|
|
if (!panel) return;
|
|
|
|
const isCollapsed = panel.classList.toggle('collapsed');
|
|
|
|
if (icon) {
|
|
if (isCollapsed) {
|
|
icon.classList.remove('bi-chevron-up');
|
|
icon.classList.add('bi-chevron-down');
|
|
} else {
|
|
icon.classList.remove('bi-chevron-down');
|
|
icon.classList.add('bi-chevron-up');
|
|
}
|
|
}
|
|
|
|
localStorage.setItem('audiobookMakerGuideCollapsed', isCollapsed ? 'true' : 'false');
|
|
}
|
|
|
|
function handleGuideDontShow() {
|
|
const checkbox = document.getElementById('guidePanelDontShow');
|
|
if (checkbox && checkbox.checked) {
|
|
localStorage.setItem('audiobookMakerHideGuide', 'true');
|
|
hideGuidePanel();
|
|
} else {
|
|
localStorage.removeItem('audiobookMakerHideGuide');
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Guide Panel: Reader Tab Visibility
|
|
// ============================================
|
|
|
|
let guidePanelHiddenByReader = false;
|
|
|
|
function hideGuidePanelForReader() {
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
const toggle = document.getElementById('floatingGuideToggle');
|
|
|
|
// If the panel is currently visible, hide it and remember we did so
|
|
if (panel && panel.classList.contains('visible')) {
|
|
panel.classList.remove('visible');
|
|
guidePanelHiddenByReader = true;
|
|
} else {
|
|
guidePanelHiddenByReader = false;
|
|
}
|
|
|
|
// Always show the toggle button so the user CAN show it manually if they want
|
|
if (toggle) toggle.classList.add('visible');
|
|
}
|
|
|
|
function restoreGuidePanelForEditor() {
|
|
// Only restore if we were the ones who hid it
|
|
if (guidePanelHiddenByReader) {
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
const toggle = document.getElementById('floatingGuideToggle');
|
|
const hideGuide = localStorage.getItem('audiobookMakerHideGuide');
|
|
|
|
if (hideGuide !== 'true' && panel) {
|
|
panel.classList.add('visible');
|
|
if (toggle) toggle.classList.remove('visible');
|
|
}
|
|
guidePanelHiddenByReader = false;
|
|
}
|
|
}
|
|
|
|
// --- Drag Logic (Mouse) ---
|
|
|
|
function onGuideDragStart(e) {
|
|
if (e.target.closest('.guide-panel-btn') || e.target.closest('button')) return;
|
|
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
if (!panel) return;
|
|
|
|
guidePanelDragState.isDragging = true;
|
|
|
|
const rect = panel.getBoundingClientRect();
|
|
guidePanelDragState.offsetX = e.clientX - rect.left;
|
|
guidePanelDragState.offsetY = e.clientY - rect.top;
|
|
|
|
panel.style.transition = 'none';
|
|
e.preventDefault();
|
|
}
|
|
|
|
function onGuideDragMove(e) {
|
|
if (!guidePanelDragState.isDragging) return;
|
|
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
if (!panel) return;
|
|
|
|
let newX = e.clientX - guidePanelDragState.offsetX;
|
|
let newY = e.clientY - guidePanelDragState.offsetY;
|
|
|
|
const panelWidth = panel.offsetWidth;
|
|
const panelHeight = panel.offsetHeight;
|
|
newX = Math.max(0, Math.min(newX, window.innerWidth - panelWidth));
|
|
newY = Math.max(0, Math.min(newY, window.innerHeight - panelHeight));
|
|
|
|
panel.style.right = 'auto';
|
|
panel.style.left = newX + 'px';
|
|
panel.style.top = newY + 'px';
|
|
|
|
e.preventDefault();
|
|
}
|
|
|
|
function onGuideDragEnd(e) {
|
|
if (!guidePanelDragState.isDragging) return;
|
|
|
|
guidePanelDragState.isDragging = false;
|
|
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
if (panel) {
|
|
panel.style.transition = '';
|
|
localStorage.setItem('audiobookMakerGuidePos', JSON.stringify({
|
|
x: parseInt(panel.style.left) || 0,
|
|
y: parseInt(panel.style.top) || 0
|
|
}));
|
|
}
|
|
}
|
|
|
|
// --- Drag Logic (Touch) ---
|
|
|
|
function onGuideTouchStart(e) {
|
|
if (e.target.closest('.guide-panel-btn') || e.target.closest('button')) return;
|
|
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
if (!panel) return;
|
|
|
|
const touch = e.touches[0];
|
|
guidePanelDragState.isDragging = true;
|
|
|
|
const rect = panel.getBoundingClientRect();
|
|
guidePanelDragState.offsetX = touch.clientX - rect.left;
|
|
guidePanelDragState.offsetY = touch.clientY - rect.top;
|
|
|
|
panel.style.transition = 'none';
|
|
e.preventDefault();
|
|
}
|
|
|
|
function onGuideTouchMove(e) {
|
|
if (!guidePanelDragState.isDragging) return;
|
|
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
if (!panel) return;
|
|
|
|
const touch = e.touches[0];
|
|
let newX = touch.clientX - guidePanelDragState.offsetX;
|
|
let newY = touch.clientY - guidePanelDragState.offsetY;
|
|
|
|
const panelWidth = panel.offsetWidth;
|
|
const panelHeight = panel.offsetHeight;
|
|
newX = Math.max(0, Math.min(newX, window.innerWidth - panelWidth));
|
|
newY = Math.max(0, Math.min(newY, window.innerHeight - panelHeight));
|
|
|
|
panel.style.right = 'auto';
|
|
panel.style.left = newX + 'px';
|
|
panel.style.top = newY + 'px';
|
|
|
|
e.preventDefault();
|
|
}
|
|
|
|
function onGuideTouchEnd(e) {
|
|
if (!guidePanelDragState.isDragging) return;
|
|
|
|
guidePanelDragState.isDragging = false;
|
|
|
|
const panel = document.getElementById('floatingGuidePanel');
|
|
if (panel) {
|
|
panel.style.transition = '';
|
|
localStorage.setItem('audiobookMakerGuidePos', JSON.stringify({
|
|
x: parseInt(panel.style.left) || 0,
|
|
y: parseInt(panel.style.top) || 0
|
|
}));
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Workflow Progress Bar
|
|
// ============================================
|
|
|
|
function updateWorkflowProgress(stage) {
|
|
const step1 = document.getElementById('wpStep1');
|
|
const step2 = document.getElementById('wpStep2');
|
|
const step3 = document.getElementById('wpStep3');
|
|
const conn1 = document.getElementById('wpConn1');
|
|
const conn2 = document.getElementById('wpConn2');
|
|
|
|
if (!step1) return;
|
|
|
|
// Track current stage for help button
|
|
currentWorkflowStage = stage;
|
|
updateHeaderHelpButton(stage);
|
|
|
|
// Reset all
|
|
[step1, step2, step3].forEach(s => {
|
|
s.classList.remove('completed', 'active');
|
|
});
|
|
[conn1, conn2].forEach(c => {
|
|
c.classList.remove('active');
|
|
});
|
|
|
|
switch (stage) {
|
|
case 'upload':
|
|
step1.classList.add('active');
|
|
break;
|
|
case 'edit':
|
|
step1.classList.add('completed');
|
|
conn1.classList.add('active');
|
|
step2.classList.add('active');
|
|
// Show the floating guide when entering editor
|
|
showGuidePanelOnEditor();
|
|
break;
|
|
case 'audio-ready':
|
|
step1.classList.add('completed');
|
|
conn1.classList.add('active');
|
|
step2.classList.add('completed');
|
|
conn2.classList.add('active');
|
|
step3.classList.add('active');
|
|
// Show badge on reader tab
|
|
const badge = document.getElementById('readerTabBadge');
|
|
if (badge) badge.style.display = 'inline';
|
|
break;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Helper: Switch to Editor Tab
|
|
// ============================================
|
|
|
|
function switchToEditorTab() {
|
|
const editorTab = document.getElementById('editor-tab');
|
|
if (editorTab) {
|
|
const tab = new bootstrap.Tab(editorTab);
|
|
tab.show();
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Helper: Start from scratch
|
|
// ============================================
|
|
|
|
function startFromScratch() {
|
|
document.getElementById('uploadSection').style.display = 'none';
|
|
document.getElementById('editorSection').style.display = 'block';
|
|
updateWorkflowProgress('edit');
|
|
|
|
// Click the editor to trigger first chapter creation
|
|
const editor = document.getElementById('markdownEditor');
|
|
if (editor && editorBlocks.length === 0) {
|
|
addChapterMarker(1);
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Loading Overlay
|
|
// ============================================
|
|
|
|
function showLoader(text = 'Processing...', subtext = 'Please wait') {
|
|
const overlay = document.getElementById('loadingOverlay');
|
|
document.getElementById('loadingText').textContent = text;
|
|
document.getElementById('loadingSubtext').textContent = subtext;
|
|
overlay.classList.add('active');
|
|
}
|
|
|
|
function hideLoader() {
|
|
document.getElementById('loadingOverlay').classList.remove('active');
|
|
}
|
|
|
|
// ============================================
|
|
// Voice Management
|
|
// ============================================
|
|
|
|
async function loadVoices() {
|
|
try {
|
|
const response = await fetch('/api/voices');
|
|
const data = await response.json();
|
|
voices = data.voices || [];
|
|
console.log(`📢 Loaded ${voices.length} voices`);
|
|
} catch (error) {
|
|
console.error('Failed to load voices:', error);
|
|
voices = [
|
|
{ id: 'af_heart', name: 'Heart (US Female)' },
|
|
{ id: 'am_adam', name: 'Adam (US Male)' }
|
|
];
|
|
}
|
|
}
|
|
|
|
function getVoiceOptions(selectedVoice = 'af_heart') {
|
|
return voices.map(v =>
|
|
`<option value="${v.id}" ${v.id === selectedVoice ? 'selected' : ''}>${v.name}</option>`
|
|
).join('');
|
|
}
|
|
|
|
// ============================================
|
|
// Project Management
|
|
// ============================================
|
|
|
|
async function saveProject() {
|
|
const projectName = document.getElementById('projectName').value.trim();
|
|
|
|
if (!projectName) {
|
|
alert('Please enter a project name');
|
|
return;
|
|
}
|
|
|
|
currentProject.name = projectName;
|
|
const chapters = collectEditorContent();
|
|
|
|
if (chapters.length === 0) {
|
|
alert('No content to save. Add some chapters and blocks first.');
|
|
return;
|
|
}
|
|
|
|
showLoader('Saving Project...', 'Please wait');
|
|
|
|
try {
|
|
let projectId = currentProject.id;
|
|
|
|
if (!projectId) {
|
|
const createResponse = await fetch('/api/projects', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name: projectName })
|
|
});
|
|
|
|
const createData = await createResponse.json();
|
|
|
|
if (createData.error) {
|
|
const listResponse = await fetch('/api/projects');
|
|
const listData = await listResponse.json();
|
|
const existing = listData.projects.find(p => p.name === projectName);
|
|
|
|
if (existing) {
|
|
projectId = existing.id;
|
|
} else {
|
|
throw new Error(createData.error);
|
|
}
|
|
} else {
|
|
projectId = createData.project_id;
|
|
}
|
|
|
|
currentProject.id = projectId;
|
|
}
|
|
|
|
const saveResponse = await fetch(`/api/projects/${projectId}/save`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ chapters })
|
|
});
|
|
|
|
const saveData = await saveResponse.json();
|
|
|
|
if (saveData.error) {
|
|
throw new Error(saveData.error);
|
|
}
|
|
|
|
hideLoader();
|
|
showNotification('Project saved successfully!', 'success');
|
|
|
|
} catch (error) {
|
|
hideLoader();
|
|
console.error('Save error:', error);
|
|
alert('Failed to save project: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async function exportProject() {
|
|
if (!currentProject.id) {
|
|
await saveProject();
|
|
if (!currentProject.id) return;
|
|
}
|
|
|
|
showLoader('Exporting...', 'Creating ZIP file');
|
|
|
|
try {
|
|
window.location.href = `/api/export/${currentProject.id}`;
|
|
setTimeout(() => { hideLoader(); }, 2000);
|
|
} catch (error) {
|
|
hideLoader();
|
|
alert('Export failed: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async function openProjectArchive() {
|
|
showLoader('Loading projects...');
|
|
|
|
try {
|
|
const response = await fetch('/api/projects');
|
|
const data = await response.json();
|
|
|
|
const container = document.getElementById('projectList');
|
|
|
|
if (data.projects.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="text-center text-muted py-5">
|
|
<i class="bi bi-folder2-open" style="font-size: 3rem;"></i>
|
|
<p class="mt-3">No saved projects yet</p>
|
|
</div>
|
|
`;
|
|
} else {
|
|
container.innerHTML = data.projects.map(project => `
|
|
<div class="project-item">
|
|
<div class="project-info">
|
|
<h6>${escapeHtml(project.name)}</h6>
|
|
<div class="project-meta">
|
|
${project.chapter_count} chapters • ${project.block_count} blocks •
|
|
Updated ${formatDate(project.updated_at)}
|
|
</div>
|
|
</div>
|
|
<div class="project-actions">
|
|
<button class="btn btn-sm btn-primary" onclick="loadProject(${project.id})">
|
|
<i class="bi bi-folder2-open"></i> Load
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="deleteProject(${project.id})">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
hideLoader();
|
|
archiveModal.show();
|
|
|
|
} catch (error) {
|
|
hideLoader();
|
|
alert('Failed to load projects: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async function loadProject(projectId) {
|
|
showLoader('Loading project...');
|
|
archiveModal.hide();
|
|
|
|
try {
|
|
const response = await fetch(`/api/projects/${projectId}`);
|
|
const data = await response.json();
|
|
|
|
if (data.error) throw new Error(data.error);
|
|
|
|
currentProject = { id: data.id, name: data.name, chapters: data.chapters };
|
|
document.getElementById('projectName').value = data.name;
|
|
|
|
// Hide upload, show editor
|
|
document.getElementById('uploadSection').style.display = 'none';
|
|
document.getElementById('editorSection').style.display = 'block';
|
|
|
|
renderProjectInEditor(data);
|
|
|
|
// Check if project has audio and update workflow
|
|
let hasAudio = false;
|
|
for (const ch of data.chapters) {
|
|
for (const bl of ch.blocks) {
|
|
if (bl.audio_data && bl.block_type !== 'image') {
|
|
hasAudio = true;
|
|
break;
|
|
}
|
|
}
|
|
if (hasAudio) break;
|
|
}
|
|
updateWorkflowProgress(hasAudio ? 'audio-ready' : 'edit');
|
|
|
|
hideLoader();
|
|
showNotification('Project loaded successfully!', 'success');
|
|
|
|
} catch (error) {
|
|
hideLoader();
|
|
alert('Failed to load project: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async function deleteProject(projectId) {
|
|
if (!confirm('Are you sure you want to delete this project? This action cannot be undone.')) return;
|
|
|
|
showLoader('Deleting...');
|
|
|
|
try {
|
|
const response = await fetch(`/api/projects/${projectId}`, { method: 'DELETE' });
|
|
const data = await response.json();
|
|
if (data.error) throw new Error(data.error);
|
|
|
|
await openProjectArchive();
|
|
showNotification('Project deleted', 'success');
|
|
|
|
} catch (error) {
|
|
hideLoader();
|
|
alert('Failed to delete project: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// TTS Text Editing
|
|
// ============================================
|
|
|
|
function openTtsEditor(blockId, currentContent) {
|
|
const plainText = stripMarkdown(currentContent);
|
|
document.getElementById('ttsTextInput').value = plainText;
|
|
document.getElementById('ttsBlockId').value = blockId;
|
|
ttsEditModal.show();
|
|
}
|
|
|
|
function saveTtsText() {
|
|
const blockId = document.getElementById('ttsBlockId').value;
|
|
const ttsText = document.getElementById('ttsTextInput').value;
|
|
|
|
const block = document.querySelector(`[data-block-id="${blockId}"]`);
|
|
if (block) {
|
|
block.dataset.ttsText = ttsText;
|
|
}
|
|
|
|
ttsEditModal.hide();
|
|
showNotification('TTS text saved', 'success');
|
|
}
|
|
|
|
// ============================================
|
|
// Utility Functions
|
|
// ============================================
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function formatDate(dateStr) {
|
|
if (!dateStr) return '';
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
|
|
function stripMarkdown(text) {
|
|
if (!text) return '';
|
|
|
|
let result = text;
|
|
result = result.replace(/^#{1,6}\s*/gm, '');
|
|
result = result.replace(/\*\*(.+?)\*\*/g, '$1');
|
|
result = result.replace(/\*(.+?)\*/g, '$1');
|
|
result = result.replace(/__(.+?)__/g, '$1');
|
|
result = result.replace(/_(.+?)_/g, '$1');
|
|
result = result.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
|
|
result = result.replace(/!\[([^\]]*)\]\([^)]+\)/g, '');
|
|
result = result.replace(/^>\s*/gm, '');
|
|
result = result.replace(/^\s*[-*+]\s+/gm, '');
|
|
result = result.replace(/^\s*\d+\.\s+/gm, '');
|
|
|
|
return result.trim();
|
|
}
|
|
|
|
function showNotification(message, type = 'info') {
|
|
const notification = document.createElement('div');
|
|
notification.className = `alert alert-${type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'} notification-toast`;
|
|
notification.innerHTML = `
|
|
<i class="bi bi-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} me-2"></i>
|
|
${message}
|
|
`;
|
|
notification.style.cssText = `
|
|
position: fixed; top: 20px; right: 20px; z-index: 9999;
|
|
min-width: 250px; animation: slideIn 0.3s ease;
|
|
`;
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
setTimeout(() => {
|
|
notification.style.animation = 'slideOut 0.3s ease';
|
|
setTimeout(() => notification.remove(), 300);
|
|
}, 3000);
|
|
}
|
|
|
|
// ============================================
|
|
// Authentication
|
|
// ============================================
|
|
|
|
let changePasswordModal = null;
|
|
|
|
async function loadCurrentUser() {
|
|
try {
|
|
const response = await fetch('/api/auth/me');
|
|
const data = await response.json();
|
|
|
|
if (data.user) {
|
|
const usernameEl = document.getElementById('headerUsername');
|
|
if (usernameEl) usernameEl.textContent = data.user.username;
|
|
|
|
// Show admin menu item if admin
|
|
if (data.user.role === 'admin') {
|
|
const adminItem = document.getElementById('adminMenuItem');
|
|
const adminDivider = document.getElementById('adminDivider');
|
|
if (adminItem) adminItem.style.display = 'block';
|
|
if (adminDivider) adminDivider.style.display = 'block';
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load user info:', error);
|
|
}
|
|
}
|
|
|
|
async function handleLogout() {
|
|
try {
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
|
} catch(e) { /* ignore */ }
|
|
window.location.href = '/login';
|
|
}
|
|
|
|
function openChangePassword() {
|
|
if (!changePasswordModal) {
|
|
changePasswordModal = new bootstrap.Modal(document.getElementById('changePasswordModal'));
|
|
}
|
|
document.getElementById('currentPassword').value = '';
|
|
document.getElementById('newPassword').value = '';
|
|
document.getElementById('confirmPassword').value = '';
|
|
document.getElementById('changePasswordError').style.display = 'none';
|
|
changePasswordModal.show();
|
|
}
|
|
|
|
async function submitChangePassword() {
|
|
const currentPassword = document.getElementById('currentPassword').value;
|
|
const newPassword = document.getElementById('newPassword').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
const errorDiv = document.getElementById('changePasswordError');
|
|
|
|
errorDiv.style.display = 'none';
|
|
|
|
if (!currentPassword || !newPassword) {
|
|
errorDiv.textContent = 'All fields are required';
|
|
errorDiv.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
errorDiv.textContent = 'New passwords do not match';
|
|
errorDiv.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
if (newPassword.length < 4) {
|
|
errorDiv.textContent = 'New password must be at least 4 characters';
|
|
errorDiv.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/auth/change-password', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ current_password: currentPassword, new_password: newPassword })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
errorDiv.textContent = data.error;
|
|
errorDiv.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
changePasswordModal.hide();
|
|
showNotification('Password changed successfully!', 'success');
|
|
} catch(e) {
|
|
errorDiv.textContent = 'Network error. Please try again.';
|
|
errorDiv.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
|
|
const notifStyle = document.createElement('style');
|
|
notifStyle.textContent = `
|
|
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
|
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
|
|
`;
|
|
document.head.appendChild(notifStyle);
|