Gallery-Archivist/archivist/sites/templates/fa/submission_detail.html

<!-- submission_detail.html -->

{% extends "base.html" %}

{% block title %}{{submission.title}} by {{submission.artist.artist}} | Submission Detail | Gallery-Archivist{% endblock %}

{% load custom_filters %}

{% load static %}

{% block content %}
<div class="row">
    <div class="col-xl-9">
        <h1 class="mt-2">{{ submission.title }}</h1>
        <div id="submission_container">
            {% if file_url %}
                {% if file_url|is_image %}
                    <img src="{{ file_url }}" alt="Image" width="100%" height="auto">
                {% elif submission.file.file.url|is_flash %}
                    <div id="flash_embed"></div>
                {% elif submission.file.file.url|is_pdf %}
                    <object data="{{ submission.file.file.url }}" type="application/pdf" width="100%" height="600px">
                        <iframe src="{{ submission.file.file.url }}" width="100%" height="100%">
                            This browser does not support PDFs. Please download the PDF to view it: 
                            <a href="{{ submission.file.file.url }}">Download PDF</a>
                        </iframe>
                    </object>
                {% else %}
                    <div class="my-4 justify-content-center text-center">
                        <p>No preview avilable of file.</p>
                        <a class="btn btn-outline-primary" href="{{ file_url }}">Download File</a>
                    </div>
                {% endif %}
            {% else %}
                <p>No file attached.</p>
            {% endif %}
        </div>
        <div class="my-2 px-2 border border-2 overflow-y-scroll">
            {{ submission.description|stylizeDescription|safe }}
        </div>
    </div>

    <div class="col-xl-3 bg-secondary-subtle border border-2">
        <div class="mt-2">
            <div class="row-cols-auto">
                <a class="btn btn-outline-secondary" href="{% url 'fa:user_page' fa_user=submission.artist.artist_url %}">User Page</a>
                <a class="btn btn-outline-secondary" href="{{ file_url }}">Download File</a>
            </div>
            <div class="m-2 overflow-hidden">
                <strong>Tags: </strong>
                {% if submission.tags.exists %}
                    {% for tag in submission.tags.all %}
                        <span class="">
                            <a class="badge bg-primary tag" href="{% url 'fa:tag_details' tag.tag_slug %}">{{ tag.tag|capfirst }}</a>
                        </span>
                    {% endfor %}
                {% else %}
                    <span class="badge bg-secondary">This submission has no tags</span>
                {% endif %}
            </div>
            <div class="">
                <div>
                    <strong class="text-info">Category:</strong>
                    <span class="">{{ submission.fa_category }}</span>
                </div>
                <div>
                    <strong class="text-info">Species:</strong>
                    <span class="">{{ submission.species }}</span>
                </div>
                <div>
                    <strong class="text-info">Gender:</strong>
                    <span class="">{{ submission.gender }}</span>
                </div>
                <div>
                    <strong class="text-info">Size:</strong>
                    <span class="">{{ submission.image_width }} x {{ submission.image_height }}</span>
                </div>
                <div class="separator"></div>
                <div>
                    <strong class="text-info">Mature Rating:</strong>
                    <span class="badge bg-secondary text-2xl">{{ submission.mature_rating.mature }}</span>
                </div>
                <div>
                    <strong class="text-info">Orginal Date:</strong>
                    <span class="">{{ submission.date |date:'Y-m-d H:i:s' }}</span>
                </div>
                <div>
                    <strong class="text-info">Archive date:</strong>
                    <span class="">{{ submission.date_added |date:'Y-m-d H:i:s' }}</span>
                </div>

            </div>
            <a class="btn btn-outline-danger" href="https://www.furaffinity.net/view/{{submission.submission_id}}" target="_blank" rel="noopener noreferrer">View on Furaffinity...</a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>

    var flash_embed = document.getElementById('flash_embed');

    if (flash_embed) {
        window.RufflePlayer = window.RufflePlayer || {};
        window.RufflePlayer.config = {
            "wmode": "direct",
            "quality": "high",
        }
        window.addEventListener("load", (event) => {
            const ruffle = window.RufflePlayer.newest();
            const player = ruffle.createPlayer();
            const container = document.getElementById("flash_embed");
            container.appendChild(player);
            //player.style.width = "auto";
            player.style.width = "{{ submission.image_width }}px";
            player.style.height = "{{ submission.image_height }}px";
            player.load("{{ submission.file.file.url }}").then(() => {
                console.info("Ruffle successfully loaded the file");
            }).catch((e) => {
                console.error(`Ruffle failed to load the file: ${e}`);
            });
            /* player.addEventListener('loadedmetadata', () => {
                console.info(player.metadata.isActionScript3);
                console.info(player.metadata.isPlaying);
            }); */
        });
    
    
        function resizeFlashEmbed() {
            var submission_container = document.getElementById("submission_container");
            var flash_embed = document.getElementById('flash_embed');
            var flash_embed_player = flash_embed.firstChild
        
            var flash_width  = parseInt("{{ submission.image_width }}");
            var flash_height = parseInt("{{ submission.image_height }}");
        
            var container_width = submission_container.offsetWidth;
            var container_height = submission_container.offsetHeight;
        
            if (flash_width < flash_height) {
                var originalAspectRatio = flash_height / flash_width;
            } else {
                var originalAspectRatio = flash_width / flash_height;
            };
        
            flash_embed_player.style.width = container_width + 'px';
            flash_embed_player.style.height = (container_width * originalAspectRatio) + 'px';
        }
    
        // Call the function on page load and window resize
        window.addEventListener('load', resizeFlashEmbed);
        window.addEventListener('resize', resizeFlashEmbed);

    }

    
</script>
<script src="{% static 'libs/ruffle-nightly-2023_05_04-web-selfhosted/ruffle.js' %}"></script>
{% endblock %}