227 lines
10 KiB
HTML
227 lines
10 KiB
HTML
{% 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 %}
|