Compare commits
38 Commits
39042865c1
...
6dba5631b4
Author | SHA1 | Date |
---|---|---|
|
6dba5631b4 | 1 year ago |
|
8e71f0a093 | 1 year ago |
|
3f113d3a69 | 1 year ago |
|
ef7c024b84 | 1 year ago |
|
325aab5e2a | 1 year ago |
|
182fcca5da | 1 year ago |
|
6509542dbd | 1 year ago |
|
2ac78219ee | 1 year ago |
|
756f7bf7c2 | 1 year ago |
|
4cd27acf7f | 1 year ago |
|
030c374def | 1 year ago |
|
056f5f547a | 1 year ago |
|
d22e04eaf6 | 1 year ago |
|
459e047419 | 1 year ago |
|
462f50e9db | 1 year ago |
|
4587f37dd7 | 1 year ago |
|
86fee257a2 | 1 year ago |
|
55686addf1 | 1 year ago |
|
a20f1794d0 | 1 year ago |
|
b4cfda4a20 | 1 year ago |
|
56f0c66f78 | 1 year ago |
|
574d5d2897 | 1 year ago |
|
132db595f4 | 1 year ago |
|
5333a6b6f2 | 1 year ago |
|
25f124bade | 1 year ago |
|
d21a9c8d15 | 1 year ago |
|
a46c02ecf5 | 1 year ago |
|
d2730d5bad | 1 year ago |
|
1c75c74c91 | 1 year ago |
|
ef684dff61 | 1 year ago |
|
241b4957e1 | 1 year ago |
|
45eda03d1c | 1 year ago |
|
1d0e4bada8 | 1 year ago |
|
3c8ced53b9 | 1 year ago |
|
80dd6b2500 | 1 year ago |
|
ad64b91d66 | 1 year ago |
|
4988268f5f | 1 year ago |
|
50adf0ddf2 | 1 year ago |
Before Width: | Height: | Size: 7.7 MiB After Width: | Height: | Size: 1.2 MiB |
@ -1,52 +0,0 @@
|
||||
import RuffleService from '../../services/ruffle_service/ruffle_service.js'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faStop,
|
||||
faExclamationTriangle
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faStop,
|
||||
faExclamationTriangle
|
||||
)
|
||||
|
||||
const Flash = {
|
||||
props: [ 'src' ],
|
||||
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, or re-loading on failure
|
||||
this.player = 'hidden'
|
||||
RuffleService.getRuffle().then((ruffle) => {
|
||||
const player = ruffle.newest().createPlayer()
|
||||
player.config = {
|
||||
letterbox: 'on'
|
||||
}
|
||||
const container = this.$refs.container
|
||||
container.appendChild(player)
|
||||
player.style.width = '100%'
|
||||
player.style.height = '100%'
|
||||
player.load(this.src).then(() => {
|
||||
this.player = true
|
||||
}).catch((e) => {
|
||||
console.error('Error loading ruffle', e)
|
||||
this.player = 'error'
|
||||
})
|
||||
this.ruffleInstance = player
|
||||
})
|
||||
},
|
||||
closePlayer () {
|
||||
console.log(this.ruffleInstance)
|
||||
this.ruffleInstance.remove()
|
||||
this.player = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Flash
|
@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div class="Flash">
|
||||
<div
|
||||
v-if="player === true || player === 'hidden'"
|
||||
ref="container"
|
||||
class="player"
|
||||
:class="{ hidden: player === 'hidden' }"
|
||||
/>
|
||||
<button
|
||||
v-if="player !== true"
|
||||
class="button-unstyled placeholder"
|
||||
@click="openPlayer"
|
||||
>
|
||||
<span
|
||||
v-if="player === 'hidden'"
|
||||
class="label"
|
||||
>
|
||||
{{ $t('general.loading') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="player === 'error'"
|
||||
class="label"
|
||||
>
|
||||
{{ $t('general.flash_fail') }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="label"
|
||||
>
|
||||
<p>
|
||||
{{ $t('general.flash_content') }}
|
||||
</p>
|
||||
<p>
|
||||
<FAIcon icon="exclamation-triangle" />
|
||||
{{ $t('general.flash_security') }}
|
||||
</p>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="player"
|
||||
class="button-unstyled hider"
|
||||
@click="closePlayer"
|
||||
>
|
||||
<FAIcon icon="stop" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./flash.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
.Flash {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
position: relative;
|
||||
|
||||
.player {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hider {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: center;
|
||||
flex: 1 1 0;
|
||||
line-height: 1.2;
|
||||
white-space: normal;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: 'hidden';
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|