forked from AkkomaGang/akkoma-fe
Play-on-click, layout improvements.
This commit is contained in:
parent
2f549774ab
commit
adafae977a
4 changed files with 87 additions and 10 deletions
|
@ -174,6 +174,7 @@
|
|||
}
|
||||
|
||||
.non-gallery.attachment {
|
||||
&.flash,
|
||||
&.video {
|
||||
flex: 1 0 40%;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue