Play-on-click, layout improvements.

This commit is contained in:
Henry Jameson 2021-04-12 00:00:23 +03:00
parent 2f549774ab
commit adafae977a
4 changed files with 87 additions and 10 deletions

View file

@ -174,6 +174,7 @@
} }
.non-gallery.attachment { .non-gallery.attachment {
&.flash,
&.video { &.video {
flex: 1 0 40%; flex: 1 0 40%;
} }

View file

@ -1,16 +1,44 @@
import RuffleService from '../../services/ruffle_service/ruffle_service.js' 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 = { const Flash = {
props: [ 'src' ], props: [ 'src' ],
created () { data () {
this.$nextTick(function () { 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) => { RuffleService.getRuffle().then((ruffle) => {
const player = ruffle.newest().createPlayer() const player = ruffle.newest().createPlayer()
player.config = {
letterbox: 'on'
}
const container = this.$refs.cunt const container = this.$refs.cunt
container.appendChild(player) 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
}
} }
} }

View file

@ -1,8 +1,31 @@
<template> <template>
<div class="Flash">
<div <div
class="Flash" v-if="player"
ref="cunt" 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> </template>
<script src="./flash.js"></script> <script src="./flash.js"></script>
@ -10,6 +33,30 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.Flash { .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> </style>

View file

@ -79,7 +79,8 @@
"role": { "role": {
"admin": "Admin", "admin": "Admin",
"moderator": "Moderator" "moderator": "Moderator"
} },
"flash_content": "Click to show Flash content using Ruffle (Experimental)"
}, },
"image_cropper": { "image_cropper": {
"crop_picture": "Crop picture", "crop_picture": "Crop picture",