templates/index.html

{% extends "layout.html" %}

{% block content %}
<div id="loader" class="loader-container">
    <div class="loader"></div>
</div>
<div class="container-fluid">
    <div class="row row justify-content-center">
        <div class="col-8 col-lg-6">
            <div class="video-container">
                <video 
                    id="video-player" 
                    class="video-js vjs-default-skin vjs-big-play-centered" 
                    controls
                    preload="auto"
                    width="640"
                    height="360"
                    data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'>
                    {% if video_path %}
                    <source src="{{ video_path }}" type="video/mp4">
                    {% endif %}
                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, or consider upgrading to a
                        web browser that supports HTML5 video
                    </p>
                </video>
            </div>
            <div class="timeline-container">
                <div id="timeline" class="provereni">
                    {% if subtitle_content %}
                    <script id="initial-subtitles" type="text/plain">{{ subtitle_content | safe }}</script>
                    {% else %}
                    <script>
                        // Refresh stránky po 2 sekundách (můžeš změnit čas)
                        setTimeout(() => {
                            location.reload();
                        }, 2000);
                    </script>
              
                    {% endif %}
                    <div id="timeline-content"></div>
                </div>
                
            </div>
            <div id="timeline-controls">
                <button class="btn btn-sm btn-primary" id="zoom-in">
                    <i class="fas fa-search-minus"></i>
                </button>
                <button class="btn btn-sm btn-primary" id="zoom-out">
                    <i class="fas fa-search-plus"></i>
                </button>
                <button class="btn btn-sm btn-success" id="exportTranslation">
                    <i class="fas fa-save"></i> Aktualizovat překlad
                </button>
                <button style="display:none;"class="btn btn-sm btn-primary" id="createDubbing">
                    <i class="fas fa-microphone"></i> Vytvořit dabing z titulků
                </button>
            </div>
        </div>
        <div class="col-12 col-lg-4">
            <div class="editor-panel">
                <div class="card">
                    <div class="card-header">
                        <h5>Upload Files</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Video File</label>
                            <input type="file" class="form-control" id="video-upload" accept="video/*">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Subtitle File</label>
                            <input type="file" class="form-control" id="subtitle-upload" accept=".srt,.vtt">
                        </div>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="card-header">
                        <h5>Subtitle Editor</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <button class="btn btn-primary" id="add-subtitle">
                                <i class="fas fa-plus"></i> Add Subtitle
                            </button>
                            <button class="btn btn-success" id="generate-subtitles">
                                <i class="fas fa-magic"></i> Generate Subtitles
                            </button>
                        </div>
                        <div class="subtitle-list" id="subtitle-list">
                            <!-- Subtitles will be listed here -->
                        </div>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        <h5>Export</h5>
                    </div>
                    <div class="card-body">
                        <button class="btn btn-success" id="export-vtt">
                            <i class="fas fa-download"></i> Export VTT
                        </button>
                        <button class="btn btn-success" id="export-srt">
                            <i class="fas fa-download"></i> Export SRT
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pro editaci titulku -->
<div class="modal fade" id="editSubtitleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <textarea class="form-control" id="subtitleText" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="deleteSubtitle"><i class="fa-solid fa-xmark"></i></button>
                <button type="button" class="btn btn-success" id="saveSubtitle"><i class="fa-solid fa-check"></i></button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/subtitle.js') }}"></script>
<script src="{{ url_for('static', filename='js/timeline.js') }}"></script>
<script src="{{ url_for('static', filename='js/editor.js') }}"></script>
{% endblock %}