client/posts: use ruffle polyfill for swf playback in modern browsers

client/html/index.htm

@@ -28,5 +28,6 @@
     <div id='content-holder'></div>
     <script type='text/javascript' src='js/vendor.min.js'></script>
     <script type='text/javascript' src='js/app.min.js'></script>
+    <script type='text/javascript' src='https://unpkg.com/@ruffle-rs/ruffle' async></script>
 </body>
 </html>

client/js/main.js

@@ -42,6 +42,17 @@ const pools = require("./pools.js");
 const api = require("./api.js");
 const settings = require("./models/settings.js");
 
+const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`
+
+window.RufflePlayer = window.RufflePlayer || {};
+window.RufflePlayer.config = {
+    "polyfills": true,
+    "autoplay": "off",
+    "backgroundColor": rgb2hex(window.getComputedStyle(document.body).backgroundColor),
+    "warnOnUnsupportedContent": false,
+    "splashScreen": false,
+};
+
 Promise.resolve()
     .then(() => api.fetchConfig())
     .then(
@@ -99,6 +110,10 @@ Promise.resolve()
         if (settings.get().darkTheme) {
             document.body.classList.add("darktheme");
         }
+
+        window.RufflePlayer.config.autoplay = settings.get().autoplayVideos ? "auto" : "off"
+        const topNav = document.getElementById("top-navigation")
+        if (topNav) window.RufflePlayer.config.backgroundColor = rgb2hex(window.getComputedStyle(topNav).backgroundColor)
     })
     .then(() => api.loginFromCookies())
     .then(

client/js/views/settings_view.js

@@ -30,6 +30,7 @@ class SettingsView extends events.EventTarget {
 
     _evtSubmit(e) {
         e.preventDefault();
+        window.RufflePlayer.config.autoplay = this._find("autoplay-videos").checked ? "auto" : "off"
         this.dispatchEvent(
             new CustomEvent("submit", {
                 detail: {