⬅️ Back to Table of Contents

📄 watchExtractedObservable/_demo

📊 Analysis Summary

Metric	Count
🔧 Functions	4
🧱 Classes	1
📦 Imports	9
🟢 Vue Composition API	2

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Classes

🛠️ File Location:

📂 packages/rxjs/watchExtractedObservable/_demo.vue

📦 Imports

Name	Source
Observable	rxjs
watchExtractedObservable	@vueuse/rxjs
fromEvent	rxjs
map	rxjs/operators
skip	rxjs/operators
tap	rxjs/operators
computed	vue
reactive	vue
useTemplateRef	vue

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none
reactive	reactive	none	none

---

Functions

AudioPlayer.togglePlay(): Promise<void>

Returns: Promise<void>

Calls:

• this.play
• this.pause

Code

async togglePlay() {
    if (this.audio.paused)
      return this.play()
    else
      return this.pause()
  }

AudioPlayer.play(): Promise<void>

Returns: Promise<void>

Calls:

• this.audio.play

Code

async play(): Promise<void> {
    if (!this.audio.paused)
      return

    return this.audio.play()
  }

AudioPlayer.pause(): Promise<void>

Returns: Promise<void>

Calls:

• this.audio.pause

Code

async pause(): Promise<void> {
    if (this.audio.paused)
      return

    return this.audio.pause()
  }

AudioPlayer.seek(percentage: number): void

Parameters:

• percentage any: A number in the range [0;1]

Raw JSDoc

/**
   * @param percentage - A number in the range [0;1]
   */

Code

seek(percentage: number) {
    this.audio.currentTime = percentage * this.audio.duration
  }

---

Classes

AudioPlayer

Class Code

class AudioPlayer {
  public readonly reachEnd$: Observable<unknown>

  /**
   * Player progress as a number within [0;1]
   */
  public readonly progress$: Observable<number>

  constructor(
    public readonly audio: HTMLAudioElement,
  ) {
    let _magic = false
    this.reachEnd$ = fromEvent(this.audio, 'ended')
      .pipe(
        tap(() => {
          _magic = !_magic
        }),
        map(() => _magic),
      )

    this.progress$ = fromEvent(this.audio, 'timeupdate')
      .pipe(
        skip(1),
        map(() => this.audio.currentTime / this.audio.duration),
      )
  }

  async togglePlay() {
    if (this.audio.paused)
      return this.play()
    else
      return this.pause()
  }

  async play(): Promise<void> {
    if (!this.audio.paused)
      return

    return this.audio.play()
  }

  async pause(): Promise<void> {
    if (this.audio.paused)
      return

    return this.audio.pause()
  }

  /**
   * @param percentage - A number in the range [0;1]
   */
  seek(percentage: number) {
    this.audio.currentTime = percentage * this.audio.duration
  }
}

Methods (4) — full entries under Functions

Method	Signature
togglePlay	(): Promise<void>
play	(): Promise<void>
pause	(): Promise<void>
seek	(percentage: number): void

---

Generated by Syntax Scribe