{% extends "layouts/base-electric.html" %}
{% load static %}
{% load media_filters %}
{% load string_helper %}
{% block title %}
{% if submission.content_object.title %}
{{ submission.content_object.title }}
{% else %}
{% if submission.content_object.description|length > 16 %}
{{ submission.content_object.description|slice:"0:16"|add:"..." }}
{% else %}
{{ submission.content_object.description }}
{% endif %}
{% endif %}
by {{ submission.content_object.author.artist }}
{% if submission.category.name == "twitter" %}
(@{{ submission.content_object.author.artist_url }}) from Twitter
{% elif submission.category.name == "furaffinity" %}
{{ submission.content_object.artist }} from FurAffinity
{% endif %}
{% endblock title %}
{% block content %}
{% include "includes/navigation-transparent.html" %}
<div class="container-fluid">
<div class="row row-gap-3 column-gap-0">
<div class="col-xl-9 col-lg-8 pe-lg-0">
<div class="e-container-border e-container-radius">
<div id="submission_container" class="e-container e-container-radius bg-black d-flex justify-content-center align-items-center overflow-hidden">
{% if submission.content_object.files.exists %}
{% if submission.content_object.files.all|length == 1 %}
{% if submission.content_object.files.first.file_mime|is_flash %}
<div id="flash_embed"></div>
{% elif submission.content_object.files.first.file_mime|is_image %}
<img class="img-fluid" width="100%" height="auto"
src="{% url 'files:serve_content_file' 'submission' submission.content_object.files.first.file_hash %}"
alt="{{ submission.content_object.title }}"/>
{% elif submission.content_object.files.first.file_mime|is_pdf %}
<!-- Embed the full PDF.js viewer here -->
<iframe id="pdf-js-viewer"
src="{% static 'libs/pdfjs-4.7.76-dist/web/viewer.html' %}?file={% url 'files:serve_content_file' 'submission' submission.content_object.files.first.file_hash %}"
width="100%" height="100%"
class="border-0 m-auto flex-grow-1 p-0">
</iframe>
<!-- Scripts required for PDF.js -->
<script src="{% static 'libs/pdfjs-4.7.76-dist/build/pdf.js' %}"></script>
<script src="{% static 'libs/pdfjs-4.7.76-dist/web/viewer.js' %}"></script>
{% endif %}
{% endif %}
{% else %}
<div class="m-auto center-block bg-body-secondary p-4 rounded-2 border border-3">
<h3 class="text-center"><i class="nf nf-md-image_broken p-2 me-2 mb-1"></i>No content</h3>
<hr>
<p class="text-center">This submission has no media or is missing media.</p>
</div>
{% endif %}
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4">
<div class="d-none d-sm-none d-md-none d-lg-block e-container-border e-container-radius">
<div class="e-container e-container-radius p-2">
{% include "sites/partials/post-info.html" with submission=submission %}
</div>
</div>
</div>
</div>
<div class="e-container-border e-container-radius row my-3 mt-lg-3 mt-0" tabindex="1">
<div class="e-container e-container-radius p-4">
{% if submission.content_object.title %}
<h3 class="bg-body-tertiary p-2 rounded">{{ submission.content_object.title }}</h3>
<hr>
{% endif %}
<div class="d-flex flex-wrap justify-content-center gap-2">
{% if next_submission %}
<a class="btn btn-primary" href="{% url 'sites:submission' next_submission %}">Next</a>
{% else %}
<span class="btn btn-outline-primary disabled text-decoration-line-through">Next</span>
{% endif %}
<a class="btn btn-secondary" href="{% url 'sites:artist_profile' submission.author.user_hash %}">View Artist</a>
{% if prev_submission %}
<a class="btn btn-primary" href="{% url 'sites:submission' prev_submission %}">Prev</a>
{% else %}
<span class="btn btn-outline-primary disabled text-decoration-line-through">Prev</span>
{% endif %}
{% if submission.category.name == "twitter" %}
<a class="btn btn-outline-secondary ms-auto"
href="https://twitter.com/{{ submission.content_object.author.artist_url }}/status/{{submission.content_object.submission_id}}"
target="_blank">
View Source
</a>
{% elif submission.category.name == "furaffinity" %}
<a class="btn btn-outline-secondary ms-auto"
href="https://www.furaffinity.net/view/{{submission.content_object.submission_id}}"
target="_blank">
View Source
</a>
{% endif %}
{% if request.user.is_staff or request.user.is_superuser %}
<button type="button" class="btn btn-danger"
hx-delete="{% url 'sites:submission' submission.submission_hash %}"
hx-confirm="Are you sure you want to delete this post?"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
Delete Post
</button>
{% endif %}
</div>
<hr>
{% if submission.content_object.description %}
{% if submission.category.name == "twitter" %}
<p class="lg-px-12">{{ submission.content_object.description|clickable_urls|get_twitter_username_from_str|get_tags_from_str|safe }}</p>
{% else %}
<p>{{ submission.content_object.description|stylizeDescription|clickable_urls|safe }}</p>
{% endif %}
{% else %}
<p>No description</p>
{% endif %}
<hr>
</div>
</div>
<div class="d-md-block d-lg-none e-container-border e-container-radius row my-3" tabindex="1">
<div class="e-container e-container-radius p-4">
{% include "sites/partials/post-info.html" with submission=submission %}
</div>
</div>
</div>
{% endblock content %}
{% block scripts %}
{% if submission.content_object.files.first.file_mime|is_flash or submission.content_object.file != None %}
<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 submission_container = document.getElementById("submission_container");
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("flash_embed");
container.appendChild(player);
// Set initial dimensions
const flash_width = parseInt("{{ submission.content_object.image_width }}");
const flash_height = parseInt("{{ submission.content_object.image_height }}");
const aspectRatio = flash_width / flash_height;
resizeFlashEmbed();
player.load("{% url 'files:serve_content_file' 'submission' submission.content_object.files.first.file_hash %}")
.then(() => {
console.info("Ruffle successfully loaded the file");
})
.catch((e) => {
console.error(`Ruffle failed to load the file: ${e}`);
});
function resizeFlashEmbed() {
const flash_embed_player = flash_embed.firstChild;
const container_width = submission_container.offsetWidth;
const container_height = submission_container.offsetHeight;
// Adjust width and height based on container while keeping aspect ratio
let new_width = container_width;
let new_height = new_width / aspectRatio;
// If the height exceeds the container's height, adjust using height
if (new_height > container_height) {
new_height = container_height;
new_width = new_height * aspectRatio;
}
flash_embed_player.style.width = new_width + 'px';
flash_embed_player.style.height = new_height + 'px';
}
// Call the function on window resize as well
window.addEventListener('resize', resizeFlashEmbed);
window.addEventListener('load', resizeFlashEmbed);
});
}
</script>
{% endif %}
<script src="{% static 'libs/ruffle-nightly-2023_05_04-web-selfhosted/ruffle.js' %}"></script>
{% endblock scripts %}