Iphone & Ipad mute functionality is not working

[sureshdotariya]

Description

We have integrated Videogular2 library into our Angular 7 Project. Everything works fine in Desktop for both Chrome and Safari. But when i tested the same in Iphone and iPad, Mute functionality is not working. It's working fine in Android Device.

After video start playing, if i click mute icon, i am still hearing Volume sound and icon is still showing as unmuted in UI.

<vg-player (onPlayerReady)="onPlayerReady($event)">
          <vg-overlay-play></vg-overlay-play>
          <vg-buffering></vg-buffering>
          <vg-controls>
            <vg-play-pause></vg-play-pause>
            <vg-playback-button></vg-playback-button>
            <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
            <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
            <vg-mute vgFor="singleVideo" (click)="betterMute(media)"></vg-mute>
            <vg-fullscreen></vg-fullscreen>
          </vg-controls>
          <video #media [vgMedia]="media" id="singleVideo" preload="auto" playsinline>
            <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
          </video>
        </vg-player>

I also tried attaching click event to the vg-mute component.By setting volume to '0' I can't able to hear sound, but still icon is showing as 'unmuted' in UI.

betterMute(media) {
    console.log(this.api);
    console.log(this.target);
    if (typeof this.target['muted'] === 'undefined' || this.target['muted'] === false) {
      this.target['muted'] = true;
      this.target.elem.muted = true;
      this.api.volume = 0;
      this.target.volume = 0;
    } else {
      this.target['muted'] = false;
      this.target.elem.muted = false;
      this.api.volume = 1;
      this.target.volume = 1;
    }
  }

Expected Behavior

By clicking 'mute' icon, the icon should update to 'muted' in UI and volume sound also muted.

Actual Behavior

After video start playing, if i click mute icon, i am still hearing Volume sound and icon is still showing as unmuted in UI.

Attachments

Try to include screenshots for bugs or design assets for enhancements

Version

Videogular2 - 6.4.0 Angular 7 Safari - 12 Mac OS - 10

[Brhav]

The problem is probably related to https://stackoverflow.com/a/4816050/11701481. The icon of vg-mute is set with a class (see vg-mute.ts). The condition for this class is the volume of the video element, which is readonly in Safari, so the value will always be the same.

[Brhav]

Workaround for correct mute icon:

Add following classes

vg-mute.volume_off {
   ::ng-deep .icon:before {
     content: "\e032";
   }
 }
 vg-mute.volume_up {
   ::ng-deep .icon:before {
     content: "\e033";
   }
 }

Use following code:

<vg-mute [class.volume_up]="!video.muted" [class.volume_off]="video.muted" ...
<video #video ...