rsvp-reader/components/rsvp-reader.js

import './rsvp-word.js'
import './rsvp-controls.js'

import { Chapter } from '../src/Chapter.js'
import { Player } from '../src/Player.js'

class RSVPReader extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })
    const word = document.createElement('rsvp-word')
    const controls = document.createElement('rsvp-controls')

    shadow.appendChild(word)
    shadow.appendChild(controls)

    this._root = shadow
    this._rsvpWord = word
    this._rsvpControls = controls

    this.player = new Player()
    this.player.subscribe('main', this.tick.bind(this))
    this.setText('Sample Text. Easy there.')

    this._rsvpControls.addEventListener(
      'control-event',
      this.handleControlEvent.bind(this)
    )
  }

  setText(text) {
    this.chapter = new Chapter(text, 10)
    this.updateChildrenUI()
  }

  tick() {
    if (!this.chapter.hasNext()) {
      this.player.stop()
    } else {
      this.chapter.next()
    }
    this.updateChildrenUI()
  }

  updateChildrenUI() {
    this._rsvpWord.setAttribute('word', this.chapter.currentSegment)
    this._rsvpControls.updateUI(this.chapter, this.player)
  }

  handleControlEvent(e) {
    switch (e.detail.action) {
      case 'prevSentence':
        this.chapter.prevSentence()
        break
      case 'nextSentence':
        this.chapter.nextSentence()
        break
      case 'prevWord':
        this.chapter.prevWord()
        break
      case 'nextWord':
        this.chapter.nextWord()
        break
      case 'playpause':
        this.player.toggle()
        break
      case 'stop':
        this.player.stop()
        this.chapter.reset()
        break
    }
    this.updateChildrenUI()
  }
}

window.customElements.define('rsvp-reader', RSVPReader)