Merge branch 'flash-support' into 'develop'

Flash support

See merge request pleroma/pleroma-fe!1380

src/components/attachment/attachment.js

@@ -1,4 +1,5 @@
 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'
@@ -43,6 +44,7 @@ const Attachment = {
     }
   },
   components: {
+    Flash,
     StillImage,
     VideoAttachment
   },

src/components/attachment/attachment.vue

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

src/components/flash/flash.js

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,88 @@
+<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>