aboutsummaryrefslogtreecommitdiff
path: root/src/components/flash/flash.js
blob: 87f940a71dfa3d02641efe01e4b391b4f6b99ae6 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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
        this.$emit('playerOpened')
      })
    },
    closePlayer () {
      this.ruffleInstance && this.ruffleInstance.remove()
      this.player = false
      this.$emit('playerClosed')
    }
  }
}

export default Flash