|
|
|
import './rsvp-word.js'
|
|
|
|
import './rsvp-controls.js'
|
|
|
|
import './rsvp-word-markers.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 marker = document.createElement('rsvp-border-marker')
|
|
|
|
const word = document.createElement('rsvp-word')
|
|
|
|
const controls = document.createElement('rsvp-controls')
|
|
|
|
|
|
|
|
shadow.appendChild(marker)
|
|
|
|
marker.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)
|