Remove ruffle

This patch removes Ruffle completely, significantly speeding up the
loading of the frontend, making it a little more responsive,
and reducing its compressed size.

build/dev-server.js

@@ -21,7 +21,6 @@ var compiler = webpack(webpackConfig)
 
 var devMiddleware = require('webpack-dev-middleware')(compiler, {
   publicPath: webpackConfig.output.publicPath,
-  writeToDisk: true,
   stats: {
     colors: true,
     chunks: false

build/webpack.base.conf.js

@@ -3,7 +3,6 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
-var CopyPlugin = require('copy-webpack-plugin');
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -94,19 +93,6 @@ module.exports = {
     new ServiceWorkerWebpackPlugin({
       entry: path.join(__dirname, '..', 'src/sw.js'),
       filename: 'sw-pleroma.js'
-    }),
-    // This copies Ruffle's WASM to a directory so that JS side can access it
-    new CopyPlugin({
-      patterns: [
-        {
-          from: "node_modules/ruffle-mirror/*",
-          to: "static/ruffle",
-          flatten: true
-        },
-      ],
-      options: {
-        concurrency: 100,
-      },
     })
   ]
 }

package.json

@@ -33,7 +33,6 @@
     "phoenix": "^1.3.0",
     "portal-vue": "^2.1.4",
     "punycode.js": "^2.1.0",
-    "ruffle-mirror": "^2021.4.10",
     "v-click-outside": "^2.1.1",
     "vue": "^2.6.11",
     "vue-i18n": "^7.3.2",
@@ -59,7 +58,6 @@
     "chalk": "^1.1.3",
     "chromedriver": "^87.0.1",
     "connect-history-api-fallback": "^1.1.0",
-    "copy-webpack-plugin": "^6.4.1",
     "cross-spawn": "^4.0.2",
     "css-loader": "^0.28.0",
     "custom-event-polyfill": "^1.0.7",
@@ -114,7 +112,7 @@
     "url-loader": "^1.1.2",
     "vue-loader": "^14.0.0",
     "vue-style-loader": "^4.0.0",
-    "webpack": "^4.44.0",
+    "webpack": "^4.0.0",
     "webpack-dev-middleware": "^3.6.0",
     "webpack-hot-middleware": "^2.12.2",
     "webpack-merge": "^0.14.1"

src/components/attachment/attachment.js

@@ -1,5 +1,4 @@
 import StillImage from '../still-image/still-image.vue'
-import Flash from '../flash/flash.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
@@ -44,7 +43,6 @@ const Attachment = {
     }
   },
   components: {
-    Flash,
     StillImage,
     VideoAttachment
   },

src/components/attachment/attachment.vue

@@ -117,11 +117,6 @@
         <!-- eslint-enable vue/no-v-html -->
       </div>
     </div>
-
-    <Flash
-      v-if="type === 'flash'"
-      :src="attachment.large_thumb_url || attachment.url"
-    />
   </div>
 </template>
 
@@ -177,7 +172,6 @@
   }
 
   .non-gallery.attachment {
-    &.flash,
     &.video {
       flex: 1 0 40%;
     }

src/components/flash/flash.js

@@ -1,52 +0,0 @@
-import RuffleService from '../../services/ruffle_service/ruffle_service.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faStop,
-  faExclamationTriangle
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faStop,
-  faExclamationTriangle
-)
-
-const Flash = {
-  props: [ 'src' ],
-  data () {
-    return {
-      player: false, // can be true, "hidden", false. hidden = element exists
-      loaded: false,
-      ruffleInstance: null
-    }
-  },
-  methods: {
-    openPlayer () {
-      if (this.player) return // prevent double-loading, or re-loading on failure
-      this.player = 'hidden'
-      RuffleService.getRuffle().then((ruffle) => {
-        const player = ruffle.newest().createPlayer()
-        player.config = {
-          letterbox: 'on'
-        }
-        const container = this.$refs.container
-        container.appendChild(player)
-        player.style.width = '100%'
-        player.style.height = '100%'
-        player.load(this.src).then(() => {
-          this.player = true
-        }).catch((e) => {
-          console.error('Error loading ruffle', e)
-          this.player = 'error'
-        })
-        this.ruffleInstance = player
-      })
-    },
-    closePlayer () {
-      console.log(this.ruffleInstance)
-      this.ruffleInstance.remove()
-      this.player = false
-    }
-  }
-}
-
-export default Flash

src/components/flash/flash.vue

@@ -1,88 +0,0 @@
-<template>
-  <div class="Flash">
-    <div
-      v-if="player === true || player === 'hidden'"
-      ref="container"
-      class="player"
-      :class="{ hidden: player === 'hidden' }"
-    />
-    <button
-      v-if="player !== true"
-      class="button-unstyled placeholder"
-      @click="openPlayer"
-    >
-      <span
-        v-if="player === 'hidden'"
-        class="label"
-      >
-        {{ $t('general.loading') }}
-      </span>
-      <span
-        v-if="player === 'error'"
-        class="label"
-      >
-        {{ $t('general.flash_fail') }}
-      </span>
-      <span
-        v-else
-        class="label"
-      >
-        <p>
-          {{ $t('general.flash_content') }}
-        </p>
-        <p>
-          <FAIcon icon="exclamation-triangle" />
-          {{ $t('general.flash_security') }}
-        </p>
-      </span>
-    </button>
-    <button
-      v-if="player"
-      class="button-unstyled hider"
-      @click="closePlayer"
-    >
-      <FAIcon icon="stop" />
-    </button>
-  </div>
-</template>
-
-<script src="./flash.js"></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-.Flash {
-  width: 100%;
-  height: 260px;
-  position: relative;
-
-  .player {
-    height: 100%;
-    width: 100%;
-  }
-
-  .hider {
-    top: 0;
-  }
-
-  .label {
-    text-align: center;
-    flex: 1 1 0;
-    line-height: 1.2;
-    white-space: normal;
-    word-wrap: normal;
-  }
-
-  .hidden {
-    display: none;
-    visibility: 'hidden';
-  }
-
-  .placeholder {
-    height: 100%;
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-</style>

src/i18n/en.json

@@ -82,10 +82,7 @@
     "role": {
       "admin": "Admin",
       "moderator": "Moderator"
-    },
+    }
-    "flash_content": "Click to show Flash content using Ruffle (Experimental, may not work).",
-    "flash_security": "Note that this can be potentially dangerous since Flash content is still arbitrary code.",
-    "flash_fail": "Failed to load flash content, see console for details."
   },
   "image_cropper": {
     "crop_picture": "Crop picture",

src/services/file_type/file_type.service.js

@@ -2,10 +2,6 @@
 // or the entire service could be just mimetype service that only operates
 // on mimetypes and not files. Currently the naming is confusing.
 const fileType = mimetype => {
-  if (mimetype.match(/flash/)) {
-    return 'flash'
-  }
-
   if (mimetype.match(/text\/html/)) {
     return 'html'
   }

src/services/ruffle_service/ruffle_service.js

@@ -1,40 +0,0 @@
-const createRuffleService = () => {
-  let ruffleInstance = null
-
-  const getRuffle = () => new Promise((resolve, reject) => {
-    if (ruffleInstance) {
-      resolve(ruffleInstance)
-      return
-    }
-    // Ruffle needs these to be set before it's loaded
-    // https://github.com/ruffle-rs/ruffle/issues/3952
-    window.RufflePlayer = {}
-    window.RufflePlayer.config = {
-      polyfills: false,
-      publicPath: '/static/ruffle'
-    }
-
-    // Currently it's seems like a better way of loading ruffle
-    // because it needs the wasm publically accessible, but it needs path to it
-    // and filename of wasm seems to be pseudo-randomly generated (is it a hash?)
-    const script = document.createElement('script')
-    // see webpack config, using CopyPlugin to copy it from node_modules
-    // provided via ruffle-mirror
-    script.src = '/static/ruffle/ruffle.js'
-    script.type = 'text/javascript'
-    script.onerror = (e) => { reject(e) }
-    script.onabort = (e) => { reject(e) }
-    script.oncancel = (e) => { reject(e) }
-    script.onload = () => {
-      ruffleInstance = window.RufflePlayer
-      resolve(ruffleInstance)
-    }
-    document.body.appendChild(script)
-  })
-
-  return { getRuffle }
-}
-
-const RuffleService = createRuffleService()
-
-export default RuffleService