From d695dcaff91ce616549dc54c02b8bf9167f2be58 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 9 Apr 2021 19:09:22 +0300
Subject: experimental flash support through ruffle

---
 src/components/flash/flash.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/components/flash/flash.vue

(limited to 'src/components/flash/flash.vue')

diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
new file mode 100644
index 00000000..510fe6d2
--- /dev/null
+++ b/src/components/flash/flash.vue
@@ -0,0 +1,15 @@
+<template>
+  <div
+    class="Flash"
+    ref="cunt"
+  />
+</template>
+
+<script src="./flash.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+.Flash {
+  display: block;
+}
+</style>
-- 
cgit v1.2.3-70-g09d2


From adafae977a5cc2b5ce1e3ab044bc17c4d4f11a4e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Apr 2021 00:00:23 +0300
Subject: Play-on-click, layout improvements.

---
 src/components/attachment/attachment.vue |  1 +
 src/components/flash/flash.js            | 36 +++++++++++++++++---
 src/components/flash/flash.vue           | 57 +++++++++++++++++++++++++++++---
 src/i18n/en.json                         |  3 +-
 4 files changed, 87 insertions(+), 10 deletions(-)

(limited to 'src/components/flash/flash.vue')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 2102127d..9bb0d0be 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -174,6 +174,7 @@
   }
 
   .non-gallery.attachment {
+    &.flash,
     &.video {
       flex: 1 0 40%;
     }
diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js
index e707a4c4..832705a2 100644
--- a/src/components/flash/flash.js
+++ b/src/components/flash/flash.js
@@ -1,16 +1,44 @@
 import RuffleService from '../../services/ruffle_service/ruffle_service.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faStop } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faStop,
+)
 
 const Flash = {
   props: [ 'src' ],
-  created () {
-    this.$nextTick(function () {
+  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
+      this.player = 'hidden'
       RuffleService.getRuffle().then((ruffle) => {
         const player = ruffle.newest().createPlayer()
+        player.config = {
+          letterbox: 'on'
+        }
         const container = this.$refs.cunt
         container.appendChild(player)
-        player.load(this.src)
+        player.style.width = '100%'
+        player.style.height = '100%'
+        player.load(this.src).then(() => {
+          this.player = true
+        })
+        this.ruffleInstance = player
       })
-    })
+    },
+    closePlayer () {
+      console.log(this.ruffleInstance)
+      this.ruffleInstance.remove()
+      this.player = false
+    }
   }
 }
 
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index 510fe6d2..adef67ff 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -1,8 +1,31 @@
 <template>
-  <div
-    class="Flash"
-    ref="cunt"
-  />
+  <div class="Flash">
+    <div
+      v-if="player"
+      ref="cunt"
+      class="player"
+      :class="{ hidden: player === 'hidden' }"
+    />
+    <button
+      v-if="player === false || player === 'hidden'"
+      @click="openPlayer"
+      class="button-unstyled placeholder"
+    >
+      <span v-if="player === 'hidden'" class="label">
+        {{ $t('general.loading') }}
+      </span>
+      <span v-else class="label">
+        {{ $t('general.flash_content') }}
+      </span>
+    </button>
+    <button
+      v-if="player"
+      class="button-unstyled hider"
+      @click="closePlayer"
+    >
+      <FAIcon icon="stop" />
+  </button>
+</div>
 </template>
 
 <script src="./flash.js"></script>
@@ -10,6 +33,30 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .Flash {
-  display: block;
+  width: 100%;
+  height: 260px;
+  position: relative;
+
+  .player {
+    height: 100%;
+    width: 100%;
+  }
+
+  .hider {
+    top: 0;
+  }
+
+  .hidden {
+    display: none;
+    visibility: 'hidden';
+  }
+
+  .placeholder {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d6138482..90cbbf0f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -79,7 +79,8 @@
     "role": {
       "admin": "Admin",
       "moderator": "Moderator"
-    }
+    },
+    "flash_content": "Click to show Flash content using Ruffle (Experimental)"
   },
   "image_cropper": {
     "crop_picture": "Crop picture",
-- 
cgit v1.2.3-70-g09d2


From f0641d05dffe627abd093c296a8cf9e5296b3098 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Apr 2021 00:07:28 +0300
Subject: linting

---
 src/components/attachment/attachment.vue |  5 ++++-
 src/components/flash/flash.js            |  2 +-
 src/components/flash/flash.vue           | 16 +++++++++++-----
 3 files changed, 16 insertions(+), 7 deletions(-)

(limited to 'src/components/flash/flash.vue')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 9bb0d0be..f80badfd 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -118,7 +118,10 @@
       </div>
     </div>
 
-    <Flash v-if="type === 'flash'" :src="attachment.large_thumb_url || attachment.url" />
+    <Flash
+      v-if="type === 'flash'"
+      :src="attachment.large_thumb_url || attachment.url"
+    />
   </div>
 </template>
 
diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js
index 832705a2..17a52747 100644
--- a/src/components/flash/flash.js
+++ b/src/components/flash/flash.js
@@ -3,7 +3,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { faStop } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faStop,
+  faStop
 )
 
 const Flash = {
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index adef67ff..a27d3930 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -8,13 +8,19 @@
     />
     <button
       v-if="player === false || player === 'hidden'"
-      @click="openPlayer"
       class="button-unstyled placeholder"
+      @click="openPlayer"
     >
-      <span v-if="player === 'hidden'" class="label">
+      <span
+        v-if="player === 'hidden'"
+        class="label"
+      >
         {{ $t('general.loading') }}
       </span>
-      <span v-else class="label">
+      <span
+        v-else
+        class="label"
+      >
         {{ $t('general.flash_content') }}
       </span>
     </button>
@@ -24,8 +30,8 @@
       @click="closePlayer"
     >
       <FAIcon icon="stop" />
-  </button>
-</div>
+    </button>
+  </div>
 </template>
 
 <script src="./flash.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 6b250762f0fbbb7883716e072b086fb55d92218c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Apr 2021 00:52:16 +0300
Subject: translate a variable name to American English from Australian English

---
 src/components/flash/flash.js  | 2 +-
 src/components/flash/flash.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/flash/flash.vue')

diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js
index 17a52747..74ea3400 100644
--- a/src/components/flash/flash.js
+++ b/src/components/flash/flash.js
@@ -24,7 +24,7 @@ const Flash = {
         player.config = {
           letterbox: 'on'
         }
-        const container = this.$refs.cunt
+        const container = this.$refs.container
         container.appendChild(player)
         player.style.width = '100%'
         player.style.height = '100%'
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index a27d3930..fb8981e1 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -2,7 +2,7 @@
   <div class="Flash">
     <div
       v-if="player"
-      ref="cunt"
+      ref="container"
       class="player"
       :class="{ hidden: player === 'hidden' }"
     />
-- 
cgit v1.2.3-70-g09d2


From 09ef284af7e0c9312cf9968deefe8fe701387689 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 13 Apr 2021 00:08:17 +0300
Subject: better label, better error handling

---
 src/components/flash/flash.js  | 13 ++++++++++---
 src/components/flash/flash.vue | 28 ++++++++++++++++++++++++----
 src/i18n/en.json               |  4 +++-
 3 files changed, 37 insertions(+), 8 deletions(-)

(limited to 'src/components/flash/flash.vue')

diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js
index 74ea3400..d03384c7 100644
--- a/src/components/flash/flash.js
+++ b/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
       })
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index fb8981e1..d20d037b 100644
--- a/src/components/flash/flash.vue
+++ b/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;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 90cbbf0f..61d88cb3 100644
--- a/src/i18n/en.json
+++ b/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",
-- 
cgit v1.2.3-70-g09d2