Skip to content

⬅️ Back to Table of Contents

📄 _demo.vue

📊 Analysis Summary

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

📚 Table of Contents

🛠️ 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
deepRef vue
reactive vue

Variables & Constants

Name Type Kind Value Exported
_magic boolean let/var false ✗
audio boolean let/var deepRef<HTMLAudioElement>() ✗

Vue Composition API

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

Functions

AudioPlayer.togglePlay(): Promise<void>

Code 
async togglePlay() {
    if (this.audio.paused)
      return this.play()
    else
      return this.pause()
  }
  • Return Type: Promise<void>
  • Calls:
  • this.play
  • this.pause

AudioPlayer.play(): Promise<void>

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

    return this.audio.play()
  }
  • Return Type: Promise<void>
  • Calls:
  • this.audio.play

AudioPlayer.pause(): Promise<void>

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

    return this.audio.pause()
  }
  • Return Type: Promise<void>
  • Calls:
  • this.audio.pause

AudioPlayer.seek(percentage: number): void

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

  • JSDoc: 

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

  • Parameters:

  • percentage: number
  • Return Type: void

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

togglePlay(): Promise<void>
Code 
async togglePlay() {
    if (this.audio.paused)
      return this.play()
    else
      return this.pause()
  }
play(): Promise<void>
Code 
async play(): Promise<void> {
    if (!this.audio.paused)
      return

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

    return this.audio.pause()
  }
seek(percentage: number): void
Code 
seek(percentage: number) {
    this.audio.currentTime = percentage * this.audio.duration
  }