From b34d38bfac6cd09e90da47c9d4ba01743c6a38f8 Mon Sep 17 00:00:00 2001 From: Eva Date: Fri, 19 May 2023 12:10:04 +0200 Subject: [PATCH 1/6] server/images: use ruffle exporter for swf thumbnails Works with far more SWFs than ffmpeg. Using OpenGL backend. --- server/szurubooru/func/images.py | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/server/szurubooru/func/images.py b/server/szurubooru/func/images.py index e135d182..602f3bd0 100644 --- a/server/szurubooru/func/images.py +++ b/server/szurubooru/func/images.py @@ -28,6 +28,9 @@ class Image: def __init__(self, content: bytes) -> None: self.content = content self._reload_info() + if self.info["format"]["format_name"] == "swf": + self.content = self.swf_to_png() + self._reload_info() @property def width(self) -> int: @@ -60,10 +63,7 @@ class Image: "png", "-", ] - if ( - "duration" in self.info["format"] - and self.info["format"]["format_name"] != "swf" - ): + if "duration" in self.info["format"]: duration = float(self.info["format"]["duration"]) if duration > 3: cli = [ @@ -76,6 +76,19 @@ class Image: self.content = content self._reload_info() + def swf_to_png(self) -> bytes: + return self._execute( + [ + "--silent", + "-g", + "gl", + "--", + "{path}", + "-", + ], + program="exporter", + ) + def to_png(self) -> bytes: return self._execute( [ @@ -315,7 +328,7 @@ class Image: ) assert "format" in self.info assert "streams" in self.info - if len(self.info["streams"]) < 1: + if len(self.info["streams"]) < 1 and self.info["format"]["format_name"] != "swf": logger.warning("The video contains no video streams.") raise errors.ProcessingError( "The video contains no video streams." From 3079b86b80beab013e342ebac6e9de767f7ec4cb Mon Sep 17 00:00:00 2001 From: Eva Date: Fri, 19 May 2023 13:13:45 +0200 Subject: [PATCH 2/6] client/posts: use ruffle polyfill for swf playback in modern browsers --- client/html/index.htm | 1 + client/js/main.js | 15 +++++++++++++++ client/js/views/settings_view.js | 1 + 3 files changed, 17 insertions(+) diff --git a/client/html/index.htm b/client/html/index.htm index 00728903..781b4521 100644 --- a/client/html/index.htm +++ b/client/html/index.htm @@ -28,5 +28,6 @@
+ diff --git a/client/js/main.js b/client/js/main.js index c5bdc537..cb37fb42 100644 --- a/client/js/main.js +++ b/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( diff --git a/client/js/views/settings_view.js b/client/js/views/settings_view.js index b7f69d55..0a4e34dc 100644 --- a/client/js/views/settings_view.js +++ b/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: { From 9c70202322e0b80e38b4758e2793c0b04e98270b Mon Sep 17 00:00:00 2001 From: Eva Date: Sat, 20 May 2023 19:49:11 +0200 Subject: [PATCH 3/6] client/posts: use flash thumbnail as a preroll --- client/css/post-main-view.styl | 2 ++ client/html/post_content.tpl | 4 ++-- client/js/main.js | 3 --- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/client/css/post-main-view.styl b/client/css/post-main-view.styl index e643dfbd..33529009 100644 --- a/client/css/post-main-view.styl +++ b/client/css/post-main-view.styl @@ -44,6 +44,8 @@ .post-content margin: 0 + background-size: cover + background-repeat: no-repeat .darktheme .post-view >.sidebar diff --git a/client/html/post_content.tpl b/client/html/post_content.tpl index fd5b094c..1fb232d6 100644 --- a/client/html/post_content.tpl +++ b/client/html/post_content.tpl @@ -1,4 +1,4 @@ -
+
style='background-image: url(<%- ctx.post.thumbnailUrl %>)'<% } %>> <% if (['image', 'animation'].includes(ctx.post.type)) { %> @@ -6,7 +6,7 @@ <% } else if (ctx.post.type === 'flash') { %> - + diff --git a/client/js/main.js b/client/js/main.js index cb37fb42..294e0dcd 100644 --- a/client/js/main.js +++ b/client/js/main.js @@ -48,7 +48,6 @@ window.RufflePlayer = window.RufflePlayer || {}; window.RufflePlayer.config = { "polyfills": true, "autoplay": "off", - "backgroundColor": rgb2hex(window.getComputedStyle(document.body).backgroundColor), "warnOnUnsupportedContent": false, "splashScreen": false, }; @@ -112,8 +111,6 @@ Promise.resolve() } 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( From dd56a3b529ea5b5a07b158628ba51f9122a06b80 Mon Sep 17 00:00:00 2001 From: Eva Date: Sat, 20 May 2023 19:53:24 +0200 Subject: [PATCH 4/6] client/posts: warning on ruffle load failure and browsers without flash --- client/html/post_content.tpl | 1 + 1 file changed, 1 insertion(+) diff --git a/client/html/post_content.tpl b/client/html/post_content.tpl index 1fb232d6..f74a3bb0 100644 --- a/client/html/post_content.tpl +++ b/client/html/post_content.tpl @@ -8,6 +8,7 @@ +
Your browser does not support Flash.
 <% } else if (ctx.post.type === 'video') { %> From 8f0981a3f3bda14280bb350885ddbd183ab8d84b Mon Sep 17 00:00:00 2001 From: Eva Date: Sat, 20 May 2023 20:33:02 +0200 Subject: [PATCH 5/6] client/posts: different approach for flash background Something weird was happening during templating, it worked but would surround the style attribute with %%%template1 and %%%template3 --- client/html/post_content.tpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/html/post_content.tpl b/client/html/post_content.tpl index f74a3bb0..aaecdf24 100644 --- a/client/html/post_content.tpl +++ b/client/html/post_content.tpl @@ -1,4 +1,4 @@ -
style='background-image: url(<%- ctx.post.thumbnailUrl %>)'<% } %>> +
'> <% if (['image', 'animation'].includes(ctx.post.type)) { %> From 4dd445e0f09fcdc129f92354e28abce3c0c2217c Mon Sep 17 00:00:00 2001 From: Eva Date: Sat, 20 May 2023 21:20:16 +0200 Subject: [PATCH 6/6] client/posts: allow downloading swf file from right click menu --- client/js/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/js/main.js b/client/js/main.js index 294e0dcd..aaa41ee2 100644 --- a/client/js/main.js +++ b/client/js/main.js @@ -49,6 +49,7 @@ window.RufflePlayer.config = { "polyfills": true, "autoplay": "off", "warnOnUnsupportedContent": false, + "showSwfDownload": true, "splashScreen": false, };