static/js/editor.js

document.addEventListener('DOMContentLoaded', function() {
    const loader = document.getElementById('loader');
    // Debug URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    console.log("URL parameters:", Object.fromEntries(urlParams));
    
    const folderId = urlParams.get('folder_id');
    if (folderId) {
        //console.log("Folder ID:", folderId);
        //console.log("Expected video path:", `/static/uploads/${folderId}/video.mp4`);
        //console.log("Expected subtitle path:", `/static/uploads/${folderId}/titulky.srt`);
    }

    const player = videojs('video-player', {
        controls: true,
        fluid: true,
        autoplay: false,
        preload: 'auto',
        playbackRates: [0.5, 1, 1.5, 2],
        html5: {
            vhs: {
                enableLowInitialPlaylist: true
            }
        }
    });
    console.log("Video.js player initialized");
    
    player.ready(() => {
        console.log("Video.js player is ready");
    
        // Funkce pro kontrolu a načítání titulků
        function checkAndLoadSubtitles() {
            //console.log("Hledám titulky v elementu 'initial-subtitles' v HTML...");
            const initialSubtitles = document.getElementById('initial-subtitles');
            if (initialSubtitles) {
                console.log("Nalezen element s titulky v HTML šabloně");
                const content = initialSubtitles.textContent;
                console.log("Obsah titulků:", content ? `Nalezen (délka: ${content.length} znaků)` : "Prázdný");
    
                if (content && content.trim()) {
                    console.log("Načítám nalezené titulky do editoru");
                    try {
                        SubtitleManager.loadSubtitles(content.trim());
                        console.log("Titulky úspěšně načteny do editoru");
                        
                        // Skryj loader, pokud video a titulky jsou připravené
                        if (loader) {
                            loader.classList.add('loader-hidden');
                        }
    
                        // Zastav interval, protože titulky byly úspěšně načteny
                        clearInterval(subtitleCheckInterval);
                    } catch (error) {
                        console.error("Chyba při načítání titulků:", error);
                    }
                } else {
                    console.warn("Element s titulky byl nalezen, ale je prázdný");
                }
            } else {
                //console.log("Titulky nebyly nalezeny v HTML elementu 'initial-subtitles'. Cesta v šabloně: {{ subtitle_content | safe }}");
            }
        }
    
        // Opakovaná kontrola titulků každých 2 sekundy
        const subtitleCheckInterval = setInterval(checkAndLoadSubtitles, 2000);
    
        // Kontrola i při načtení videa
        checkAndLoadSubtitles();
    
        // Inicializace Timeline Manageru
        TimelineManager.init(player);
    
        // Skrytí loaderu, pokud je video načteno a titulky jsou přítomné
        const videoSource = player.currentSrc();
        if (loader && videoSource) {
            console.log("Loader hidden as video source is loaded");
        }
    });
    

    const videoUpload = document.getElementById('video-upload');
    const subtitleUpload = document.getElementById('subtitle-upload');
    const exportVttBtn = document.getElementById('export-vtt');
    const exportSrtBtn = document.getElementById('export-srt');

    videoUpload.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const formData = new FormData();
            formData.append('video', file);

            fetch('/upload_video', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    player.src({
                        type: 'video/mp4',
                        src: data.filepath
                    });
                    player.load();
                }
            })
            .catch(error => console.error('Error:', error));
        }
    });

    subtitleUpload.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const formData = new FormData();
            formData.append('subtitle', file);

            fetch('/upload_subtitle', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    SubtitleManager.loadSubtitles(data.content);
                    TimelineManager.render();
                }
            })
            .catch(error => console.error('Error:', error));
        }
    });

    

    exportVttBtn.addEventListener('click', function() {
        const vtt = SubtitleManager.exportVTT();
        downloadFile(vtt, 'subtitles.vtt', 'text/vtt');
    });

    exportSrtBtn.addEventListener('click', function() {
        const srt = SubtitleManager.exportSRT();
        downloadFile(srt, 'subtitles.srt', 'text/plain');
    });

    document.getElementById('generate-subtitles').addEventListener('click', function() {
        const videoFile = videoUpload.files[0];
        if (!videoFile) {
            alert('Please upload a video file first');
            return;
        }

        const formData = new FormData();
        formData.append('video', videoFile);

        this.disabled = true;
        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';

        fetch('/generate_subtitles', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                SubtitleManager.subtitles = [];
                data.subtitles.forEach(subtitle => {
                    SubtitleManager.addSubtitle(subtitle.start, subtitle.end, subtitle.text);
                });
                TimelineManager.render();
            } else {
                alert('Error generating subtitles: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error generating subtitles');
        })
        .finally(() => {
            this.disabled = false;
            this.innerHTML = '<i class="fas fa-magic"></i> Generate Subtitles';
        });
    });

    

    function downloadFile(content, filename, type) {
        const blob = new Blob([content], { type: type });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
    }

    // Add subtitle button functionality
    document.getElementById('add-subtitle').addEventListener('click', function() {
        const currentTime = player.currentTime();
        SubtitleManager.addSubtitle(currentTime, currentTime + 2, 'New subtitle');
        TimelineManager.render();
    });

    // Save subtitle button functionality
    document.getElementById('saveSubtitle').addEventListener('click', function() {
        SubtitleManager.updateParentEditor();
    });

    // Export translation button functionality
    document.getElementById('exportTranslation').addEventListener('click', function() {
        const srt = SubtitleManager.exportSRT();
        
        // Aktualizace session storage
        window.parent.sessionStorage.setItem('subtitles', srt);
        
        console.log('Exportovaný překlad (SRT formát):');
        console.log('----------------------------------------');
        console.log(srt);
        console.log('----------------------------------------');
        console.log('Session storage "subtitles" byl aktualizován');
        console.log("Všechny session:");
        for (let i = 0; i < sessionStorage.length; i++) {
            const key = sessionStorage.key(i);
            const value = sessionStorage.getItem(key);
            console.log(`${key}: ${value}`);
        }
        // Odeslání zprávy o změně titulků do rodičovské stránky
        window.parent.postMessage({
            type: 'subtitlesChanged',
            data: srt
        }, '*');
        // Notifikace uživateli
        if (window.parent.showToast) {
            window.parent.showToast('Překlad byl úspěšně aktualizován', false);
        }
    
    });
    // Funkce pro odeslání zprávy o změně titulků do rodičovské stránky
    function notifySubtitlesChange(subtitlesContent) {
        window.parent.postMessage({
            type: 'subtitlesChanged',
            data: subtitlesContent
        }, '*');
    }

    // Handler pro tlačítko vytvoření dabingu
    document.getElementById('createDubbing').addEventListener('click', async function() {
        try {
            // Získat titulky ze session storage
            const subtitles = SubtitleManager.getSubtitles();
            if (!subtitles || subtitles.length === 0) {
                alert('Nejprve musíte upravit titulky!');
                return;
            }

            // Převést titulky na JSON ve správném formátu pro backend
            const formattedSubtitles = subtitles.map((sub, index) => ({
                id: index + 1,
                start: sub.start,
                end: sub.end,
                text: sub.text,
                translation: sub.text // Text je už přeložený
            }));
            const subtitlesJson = JSON.stringify(formattedSubtitles);

            // Získat formulář z hlavní stránky
            const mainForm = window.parent.document.getElementById('translateForm');
            const formData = new FormData(mainForm);

            // Přidat titulky jako JSON
            formData.append('edited_subtitles', subtitlesJson);
            
            // Přidat cestu k videu ze session
            const videoPath = sessionStorage.getItem('video_path');
            if (videoPath) {
                formData.append('downloaded_video_path', videoPath);
            }

            // Odeslat požadavek na vytvoření dabingu
            const response = await fetch('/translate', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();
            
            if (result.success) {
                // Přehrát výsledné video
                if (result.video) {
                    const videoPlayer = document.getElementById('video-player');
                    if (videoPlayer) {
                        videoPlayer.src = result.video;
                        videoPlayer.load();
                    }
                }
                alert('Dabing byl úspěšně vytvořen!');
            } else {
                alert('Chyba při vytváření dabingu: ' + result.error);
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Chyba při vytváření dabingu: ' + error.message);
        }
    });

    // Update timeline when video metadata is loaded
    player.on('loadedmetadata', function() {
        console.log("Video metadata loaded, duration:", player.duration());
        TimelineManager.render();
    });
});