Add flash emulation with ruffle

archivist/apps/templates/sites/submission.html

@@ -41,6 +41,8 @@
 
                             {% 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" 
@@ -156,3 +158,70 @@
     </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 %}