From 55980c6fbf1d38dcb33e91c1b55380d72a8b6f2e Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Wed, 31 Mar 2021 20:20:22 -0500
Subject: [PATCH] Add Ruffle support for Flash files.

Allow viewing Flash posts with the Ruffle emulator.

Known issues:

* Many flash files aren't fully supported.
* In development it sometimes spazzes out and starts triggering random
  keyboard shortcuts when you press any key. This doesn't happen with
  the browser extension.
* We have to put the .wasm file in the public/packs/js directory because
  Ruffle is hardcoded to search for it there.
* If you're running Nginx, you need to make sure you're serving the
  right MIME type for .wasm files or it won't work.
* We're using Some Random Guy's unofficial NPM package for Ruffle, since the
  Ruffle project doesn't publish an official package themselves. We
  should build our own package.

References:

* https://github.com/ruffle-rs/ruffle
* https://github.com/ruffle-rs/ruffle/wiki/Using-Ruffle#configure-webassembly-mime-type
* https://www.npmjs.com/package/ruffle-mirror
---
 app/javascript/packs/flash.js                 | 2 ++
 app/views/posts/partials/show/_flash.html.erb | 2 ++
 config/webpack/base.js                        | 6 ++++++
 package.json                                  | 1 +
 yarn.lock                                     | 8 ++++++++
 5 files changed, 19 insertions(+)
 create mode 100644 app/javascript/packs/flash.js

diff --git a/app/javascript/packs/flash.js b/app/javascript/packs/flash.js
new file mode 100644
index 000000000..5e86830c9
--- /dev/null
+++ b/app/javascript/packs/flash.js
@@ -0,0 +1,2 @@
+import "../../../node_modules/ruffle-mirror/ruffle.js";
+import "../../../node_modules/ruffle-mirror/ea72e7bd92c6a211ab42071518cef232.wasm";
diff --git a/app/views/posts/partials/show/_flash.html.erb b/app/views/posts/partials/show/_flash.html.erb
index a54976ecf..4b5006197 100644
--- a/app/views/posts/partials/show/_flash.html.erb
+++ b/app/views/posts/partials/show/_flash.html.erb
@@ -4,3 +4,5 @@
 <% end %>
 
 <p><%= link_to "Save this flash (right click and save)", post.tagged_file_url %></p>
+
+<%= javascript_pack_tag "flash" %>
diff --git a/config/webpack/base.js b/config/webpack/base.js
index 628467844..fe801b394 100644
--- a/config/webpack/base.js
+++ b/config/webpack/base.js
@@ -20,6 +20,12 @@ module.exports = merge(webpackConfig, {
       options: {
         runner: "bin/rails runner"
       }
+    }, {
+      test: /\.wasm$/,
+      type: 'asset/resource',
+      generator: {
+        filename: 'js/[name][ext]'
+      }
     }]
   },
 });
diff --git a/package.json b/package.json
index 68c02eaa5..04b4dc512 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "postcss-loader": "^5.0.0",
     "postcss-preset-env": "^6.7.0",
     "rails-erb-loader": "^5.5.0",
+    "ruffle-mirror": "^2021.3.31",
     "sass": "^1.32.5",
     "sass-loader": "^11.0.0",
     "spark-md5": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 5f4d49714..9edbcded3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8340,6 +8340,7 @@ fsevents@~2.3.1:
     postcss-loader: ^5.0.0
     postcss-preset-env: ^6.7.0
     rails-erb-loader: ^5.5.0
+    ruffle-mirror: ^2021.3.31
     sass: ^1.32.5
     sass-loader: ^11.0.0
     spark-md5: ^3.0.0
@@ -8353,6 +8354,13 @@ fsevents@~2.3.1:
   languageName: unknown
   linkType: soft
 
+"ruffle-mirror@npm:^2021.3.31":
+  version: 2021.3.31
+  resolution: "ruffle-mirror@npm:2021.3.31"
+  checksum: 2247ab90331e9e9a6c532a576ef04f31ecde95fe246b83f96f3af1facd4ab566e99e7834ddfbe8ea5932594e187c78515bac174382c630e34a7ac72b7d6bbb8e
+  languageName: node
+  linkType: hard
+
 "run-parallel@npm:^1.1.9":
   version: 1.2.0
   resolution: "run-parallel@npm:1.2.0"