/**
 * On the player is ready
 */
onReady() {
  this.options.muted && this.mute()
  this.media.classList.add('v-media')

  // The iframe needs to be ignored by the focus
  this.media.setAttribute('tabindex', '-1')

  // If player has autoplay option, play now
  if (this.options.autoplay) {
    // Autoplay on video is authorize only when the media element is muted
    !this.media.muted && this.mute()

    this.play()
  }

  this.Vlitejs.onReady instanceof Function && this.Vlitejs.onReady.call(this, this)

  if (this.media.preload === 'none' && this.Vlitejs.provider === 'html5') {
    this.media.addEventListener('loadedmetadata', () => this.triggerOnReady())
  } else {
    this.triggerOnReady()
  }
  this.loading(false)

+  this.elements.volume!.addEventListener('volumechange', (event: Event) => {
+    const iconVolume = document.querySelector('.iconVolume')!
+    iconVolume.classList.remove('v-vol-0', 'v-vol-1', 'v-vol-2', 'v-vol-3')
+    const { volume } = event as unknown as { volume: number }
+    if (volume === 0) {
+      iconVolume?.classList.add('v-vol-0')  // Mute icon
+    } else if (volume < 0.3) {
+      iconVolume?.classList.add('v-vol-1')  // Low volume icon
+    } else if (volume > 0.7) {
+      iconVolume?.classList.add('v-vol-3')  // High volume icon
+    } else {
+      iconVolume?.classList.add('v-vol-2')  // Mid volume icon
+    }
+  })
}

// ...

/**
 * Unmute the volume on the media element
 */
unMute() {
  this.methodUnMute()
  this.isMuted = false

  if (this.elements.volume) {
    this.elements.volume.classList.remove('v-controlPressed')
    this.elements.volume.setAttribute('aria-label', 'Mute')
  }

-    this.dispatchEvent('volumechange')
+  this.dispatchEvent('volumechange', {
+    volume: this.getVolume().then((volume: number) => volume)  // pass the volume value to change into the related volume icon
+  })
}