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 {
&.flash,
&.video {
flex: 1 0 40%;
}

View file

@ -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
}
}
}

View file

@ -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>

View file

@ -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",