commit: adafae977a5cc2b5ce1e3ab044bc17c4d4f11a4e
parent 2f549774ab6f7dae08ad1cc5977cbf74b86e6d78
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Apr 2021 00:00:23 +0300
Play-on-click, layout improvements.
Diffstat:
4 files changed, 87 insertions(+), 10 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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",