Class MediaTimer

src/Timer.ts:234–336

}

export class MediaTimer implements ITimer {
  private _ready: boolean = false
  private _state: ITimerState = 'Paused'
  private _onReadyCb: ITimerReadyCallback = NULL_FN
  private _onTickCb: ITimerTickCallback = NULL_FN
  private _onStateChangeCb: ITimerStateChangeCallback = NULL_FN

  private _disposes: IDisposable[] = []

  constructor(
    private _media: HTMLMediaElement,
    private _ticker: ITicker = new AnimationFrameTicker()
  ) {
    this._disposes = [
      addDisposableDomListener(_media, 'error', () => { console.error('error') }),
      addDisposableDomListener(_media, 'waiting', () => { console.log('waiting') }),
      addDisposableDomListener(_media, 'durationchange', () => { console.log('durationchange') }),
      addDisposableDomListener(_media, 'canplay', () => { this._ready = true; this._onReadyCb() }),
      addDisposableDomListener(_media, 'play', () => { this._setState('Running') }),
      addDisposableDomListener(_media, 'pause', () => { this._setState('Paused') }),
      addDisposableDomListener(_media, 'ended', () => {
        this.stop()
        this._onTickCb(this.time)
      }),
      addDisposableDomListener(_media, 'seeking', () => {
        if (this.isRunning()) {
          this._ticker.stop()
        }
      }),
      addDisposableDomListener(_media, 'seeked', () => {
        if (this.isRunning()) {
          this._ticker.start(this._tick.bind(this))
        }
      }),
    ]
  }

  public get ready(): boolean { return this._ready }
  public get progress(): number { return this._media.currentTime / this._media.duration }
  public get duration(): number { return this._media.duration * 1000 }
  public get state(): ITimerState { return this._state }
  public get time(): number { return this._media.currentTime * 1000 }
  public set time(t: number) { if (this._ready) { this._media.currentTime = t / 1000 } }
  public get timescale(): number { return this._media.playbackRate }
  public set timescale(s: number) { this._media.playbackRate = s }

  private _setState(state: ITimerState) {
    if (this._state !== state) {
      this._state = state
      this._onStateChangeCb(this._state)
    }
  }

  private _tick() {
    // In Safari, the audio currentTime may exceed it's duration,
    // or a little bit less than the duration
    if (this.isStopped() && this._ticker.running) {
      this.stop()