Create editor.js

static/js/editor.js

@@ -0,0 +1,308 @@
+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();
+    });
+});