better label, better error handling

This commit is contained in:
Henry Jameson 2021-04-13 00:08:17 +03:00
parent 87903fbf6d
commit 09ef284af7
3 changed files with 37 additions and 8 deletions

View file

@ -1,9 +1,13 @@
import RuffleService from '../../services/ruffle_service/ruffle_service.js' import RuffleService from '../../services/ruffle_service/ruffle_service.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { faStop } from '@fortawesome/free-solid-svg-icons' import {
faStop,
faExclamationTriangle
} from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faStop faStop,
faExclamationTriangle
) )
const Flash = { const Flash = {
@ -17,7 +21,7 @@ const Flash = {
}, },
methods: { methods: {
openPlayer () { openPlayer () {
if (this.player) return // prevent double-loading if (this.player) return // prevent double-loading, or re-loading on failure
this.player = 'hidden' this.player = 'hidden'
RuffleService.getRuffle().then((ruffle) => { RuffleService.getRuffle().then((ruffle) => {
const player = ruffle.newest().createPlayer() const player = ruffle.newest().createPlayer()
@ -30,6 +34,9 @@ const Flash = {
player.style.height = '100%' player.style.height = '100%'
player.load(this.src).then(() => { player.load(this.src).then(() => {
this.player = true this.player = true
}).catch((e) => {
console.error('Error loading ruffle', e)
this.player = 'error'
}) })
this.ruffleInstance = player this.ruffleInstance = player
}) })

View file

@ -1,13 +1,13 @@
<template> <template>
<div class="Flash"> <div class="Flash">
<div <div
v-if="player" v-if="player === true || player === 'hidden'"
ref="container" ref="container"
class="player" class="player"
:class="{ hidden: player === 'hidden' }" :class="{ hidden: player === 'hidden' }"
/> />
<button <button
v-if="player === false || player === 'hidden'" v-if="player !== true"
class="button-unstyled placeholder" class="button-unstyled placeholder"
@click="openPlayer" @click="openPlayer"
> >
@ -17,11 +17,23 @@
> >
{{ $t('general.loading') }} {{ $t('general.loading') }}
</span> </span>
<span
v-if="player === 'error'"
class="label"
>
{{ $t('general.flash_fail') }}
</span>
<span <span
v-else v-else
class="label" class="label"
> >
<p>
{{ $t('general.flash_content') }} {{ $t('general.flash_content') }}
</p>
<p>
<FAIcon icon="exclamation-triangle" />
{{ $t('general.flash_security') }}
</p>
</span> </span>
</button> </button>
<button <button
@ -52,6 +64,14 @@
top: 0; top: 0;
} }
.label {
text-align: center;
flex: 1 1 0;
line-height: 1.2;
white-space: normal;
word-wrap: normal;
}
.hidden { .hidden {
display: none; display: none;
visibility: 'hidden'; visibility: 'hidden';
@ -59,7 +79,7 @@
.placeholder { .placeholder {
height: 100%; height: 100%;
width: 100%; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

View file

@ -80,7 +80,9 @@
"admin": "Admin", "admin": "Admin",
"moderator": "Moderator" "moderator": "Moderator"
}, },
"flash_content": "Click to show Flash content using Ruffle (Experimental)" "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, it might leak your cookies.",
"flash_fail": "Failed to load flash content, see console for details."
}, },
"image_cropper": { "image_cropper": {
"crop_picture": "Crop picture", "crop_picture": "Crop picture",