godot-showreel-voting/templates/submit.html

<main id="submission-form">
    <div>
        <h1>Showreel Submission</h1>
        <p>Fill in the form to submit your video for the Godot Showreel.</p>
    </div>
    <hr>
    <form method="POST" enctype="multipart/form-data" hx-post="{{ url_for("votes.post_submit", _method='POST') }}" hx-target='#submission-form' hx-swap='outerHTML'>
        {{ form.csrf_token }}

        {{ form.game.label }}<br>
        {{ form.game(size=100) }}<br>
        {% for error in form.game.errors %}
            <p class="error">{{ error }}</p>
        {% endfor %}<br>

        {{ form.author_name.label }}<br>
        {{ form.author_name(size=100) }}<br>
        {% for error in form.author_name.errors %}
            <p class="error">{{ error }}</p>
        {% endfor %}<br>

        {{ form.contact_email.label }}<br>
        {{ form.contact_email(size=100) }}<br>
        {% for error in form.contact_email.errors %}
            <p class="error">{{ error }}</p>
        {% endfor %}<br>

        {{ form.video_link.label }}<br>
        {{ form.video_link(size=100) }}
        <button type="button" class="button secondary" id="preview-btn">Preview</button><br>
        {% for error in form.video_link.errors %}
            <p class="error">{{ error }}</p>
        {% endfor %}
        
        <div id="preview-container" style="display: none;">
            <iframe width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        </div>
        <br>
        
        {{ form.video_download_link.label }}<br>
        {{ form.video_download_link(size=100) }}<br>
        {% for error in form.video_download_link.errors %}
            <p class="error">{{ error }}</p>
        {% endfor %}<br>

        {{ form.follow_me_link.label }}<br>
        {{ form.follow_me_link(size=100) }}<br>
        {% for error in form.follow_me_link.errors %}
            <p class="error">{{ error }}</p>
        {% endfor %}<br>

        {{ form.store_link.label }}
        <p class="info">We will use this to promote your game in future events and showcase pages.</p>
        {{ form.store_link(size=100) }}<br>
        {% for error in form.store_link.errors %}
            <p class="error">{{ error }}</p>
        {% endfor %}<br>

        <button type="submit" class="button secondary">Submit</button>
    </form>
    
</main>

<script>
    // Render video preview
    function parseVideoID(videoLink) {
        const videoUrl = new URL(videoLink);
        console.log(videoUrl.hostname);
        const hostname = videoUrl.hostname
        if (hostname == 'youtu.be') {
            return videoUrl.pathname.slice(1);
        }
        else if (hostname === 'www.youtube.com' || hostname === 'youtube.com' || hostname === 'm.youtube.com') {
            if (videoUrl.pathname == '/watch') {
                return videoUrl.searchParams.get('v');
            }
            else if (videoUrl.pathname.startsWith('/embed/')) {
                return videoUrl.pathname.split('/')[2];
            }
            else if (videoUrl.pathname.startsWith('/v/')) {
                return videoUrl.pathname.split('/')[2];
            }
        }
        return null;
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('preview-btn').addEventListener('click', function() {
            const originalForm = document.querySelector("#submission-form form");
            const previewContainer = document.getElementById('preview-container');
            let videoID = parseVideoID(originalForm.querySelector("input[name='video_link']").value);
            if (!videoID) {
                previewContainer.innerHTML = '<p class="error">Invalid video link provided.</p>';
                previewContainer.style.display = 'block';
                return;
            }
            videoID = 'https://www.youtube.com/embed/' + videoID + '?rel=0&autoplay=1';
            
            previewContainer.querySelector('iframe').src = videoID;
            previewContainer.style.display = 'block';
        });
    })
</script>