export default {
  data: () => ({
    videoHeight: 0
  }),

  mounted () {
    this.setHeight()

    window.addEventListener('resize', this.setHeight)
  },

  beforeDestroy () {
    window.removeEventListener('resize', this.setHeight)
  },

  methods: {
    getHeight () {
      return document.getElementsByTagName('video')[0].clientHeight
    },
    setHeight () {
      this.videoHeight = this.getHeight()
    },
    getStyle (cue) {
      return {
        [cue.vert]: cue.line + '%',
        left: cue.position + '%',
        transform: `translate(${cue.align}%, 0)${cue.rotate || ''}`,
        'text-align': cue.textAlign,
        'font-size': Math.round(cue.fontSize * this.videoHeight) + 'px'
      }
    }
  }
}

export default {
  data: () => ({
    videoHeight: 0
  }),

  mounted () {
    this.setHeight()

    window.addEventListener('resize', this.setHeight)
  },

  beforeDestroy () {
    window.removeEventListener('resize', this.setHeight)
  },

  methods: {
    getHeight () {
      return document.getElementsByTagName('video')[0].clientHeight
    },
    setHeight () {
      this.videoHeight = this.getHeight()
    },
    getStyle (cue) {
      return {
        [cue.vert]: cue.line + '%',
        left: cue.position + '%',
        transform: `translate(${cue.align}%, 0)${cue.rotate || ''}`,
        'text-align': cue.textAlign,
        // We reduce the size a bit so that it's not too big on the screen :<
        'font-size': Math.round(0.90 * cue.fontSize * this.videoHeight) + 'px'
      }
    }
  }
}

Reduce fontSize so that it's not too big..
Reduce fontSize so that it's not too big..
