fix(player): avoid double controls on iphone

closes #964

Author: mihar-22

packages/vidstack/src/components/ui/controls.ts

@@ -1,5 +1,5 @@
 import { Component, effect } from 'maverick.js';
-import { DOMEvent, setStyle } from 'maverick.js/std';
+import { DOMEvent, setAttribute, setStyle } from 'maverick.js/std';
 
 import { useMediaContext, type MediaContext } from '../../core/api/media-context';
 import { setAttributeIfEmpty } from '../../utils/dom';
@@ -40,6 +40,8 @@ export class Controls extends Component<ControlsProps, {}, ControlsEvents> {
       this.dispatch('change', { detail: this._isShowing() });
     });
 
+    effect(this._hideControls.bind(this));
+
     effect(() => {
       const isFullscreen = fullscreen();
       for (const side of ['top', 'right', 'bottom', 'left']) {
@@ -48,6 +50,16 @@ export class Controls extends Component<ControlsProps, {}, ControlsEvents> {
     });
   }
 
+  private _hideControls() {
+    if (!this.el) return;
+
+    const { controls } = this._media.$state,
+      isHidden = controls() || this._media.$iosControls();
+
+    setAttribute(this.el, 'aria-hidden', isHidden ? 'true' : null);
+    setStyle(this.el, 'display', isHidden ? 'none' : null);
+  }
+
   private _watchHideDelay() {
     const { controls } = this._media.player,
       { hideDelay } = this.$props;