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.
This commit is contained in:
Lynne
Absturztaube
parent
12db1d8719
commit
1b712bc1a0
11 changed files with 202 additions and 819 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
})
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Loading…
Reference in a new issue