better label, better error handling

src/components/flash/flash.js

@@ -1,9 +1,13 @@
 import RuffleService from '../../services/ruffle_service/ruffle_service.js'
 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(
-  faStop
+  faStop,
+  faExclamationTriangle
 )
 
 const Flash = {
@@ -17,7 +21,7 @@ const Flash = {
   },
   methods: {
     openPlayer () {
-      if (this.player) return // prevent double-loading
+      if (this.player) return // prevent double-loading, or re-loading on failure
       this.player = 'hidden'
       RuffleService.getRuffle().then((ruffle) => {
         const player = ruffle.newest().createPlayer()
@@ -30,6 +34,9 @@ const Flash = {
         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
       })

src/components/flash/flash.vue

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

src/i18n/en.json

@@ -80,7 +80,9 @@
       "admin": "Admin",
       "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": {
     "crop_picture": "Crop picture",