experimental flash support through ruffle

2021-04-09 19:09:22 +03:00 · 2021-04-09 19:09:22 +03:00 · d695dcaff9
parent 8b96ea9377
commit d695dcaff9
9 changed files with 43 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -5,6 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <!--server-generated-meta-->
    <link rel="icon" type="image/png" href="/favicon.png">
+    <script src="/static/js/ruffle.js"></script>
  </head>
  <body class="hidden">
    <noscript>To use Pleroma, please enable JavaScript.</noscript>
--- a/src/components/attachment/attachment.js
+++ b/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
  },
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@ -117,6 +117,8 @@
        <!-- eslint-enable vue/no-v-html -->
      </div>
    </div>
+
+    <Flash v-if="type === 'flash'" :src="attachment.large_thumb_url || attachment.url" />
  </div>
 </template>

--- a/src/components/flash/flash.js
+++ b/src/components/flash/flash.js
@ -0,0 +1,16 @@
+const Flash = {
+  props: [
+    'src'
+  ],
+  created: function () {
+    this.$nextTick(function () {
+      const ruffle = window.RufflePlayer.newest()
+      const player = ruffle.createPlayer()
+      const container = this.$refs.cunt
+      container.appendChild(player)
+      player.load(this.src)
+    })
+  }
+}
+
+export default Flash
--- a/src/components/flash/flash.vue
+++ 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>
--- a/src/services/file_type/file_type.service.js
+++ b/src/services/file_type/file_type.service.js
@ -2,6 +2,10 @@
 // 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'
  }
--- a/static/js/3fcb75a862dab7eab72ad475f7480344.wasm
+++ b/static/js/3fcb75a862dab7eab72ad475f7480344.wasm
--- a/static/js/ruffle.js
+++ b/static/js/ruffle.js
--- a/static/js/ruffle.js.map
+++ b/static/js/ruffle.js.map