<!-- 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 %}