fix(player): better handle ios controls

vidstack · Nov 6, 2023 · 5820094 · 5820094
1 parent f1837ad
commit 5820094
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git a/packages/react/src/components/provider.tsx b/packages/react/src/components/provider.tsx
@@ -2,11 +2,12 @@ import * as React from 'react';
 
 import {
   createReactComponent,
+  useReactContext,
   useSignal,
   useStateContext,
   type ReactElementProps,
 } from 'maverick.js/react';
-import { mediaState } from 'vidstack';
+import { mediaContext, mediaState } from 'vidstack';
 
 import { MediaProviderInstance } from './primitives/instances';
 
@@ -62,7 +63,9 @@ interface MediaOutletProps extends React.HTMLAttributes<HTMLMediaElement> {
 function MediaOutlet({ provider, ...props }: MediaOutletProps) {
   const { controls, crossorigin, poster } = useStateContext(mediaState),
     { loader } = provider.$state,
+    { $iosControls: iosControls } = useReactContext(mediaContext)!,
     $controls = useSignal(controls),
+    $iosControls = useSignal(iosControls),
     $crossorigin = useSignal(crossorigin),
     $poster = useSignal(poster),
     $loader = useSignal(loader),
@@ -71,7 +74,7 @@ function MediaOutlet({ provider, ...props }: MediaOutletProps) {
   return $mediaType
     ? React.createElement($mediaType === 'audio' ? 'audio' : 'video', {
         ...props,
-        controls: $controls,
+        controls: $controls || $iosControls,
         crossOrigin: typeof $crossorigin === 'boolean' ? '' : $crossorigin,
         poster: $mediaType === 'video' && $controls && $poster ? $poster : null,
         preload: 'none',

diff --git a/packages/vidstack/src/components/player.ts b/packages/vidstack/src/components/player.ts
@@ -368,12 +368,12 @@ export class MediaPlayer
   }
 
   private _isIOSControls() {
-    const { controls, playsinline, started, fullscreen } = this.$state;
+    const { playsinline, fullscreen } = this.$state;
     return (
       IS_IPHONE &&
       !canFullscreen() &&
       this.$state.mediaType() === 'video' &&
-      ((controls() && !playsinline()) || (!playsinline() && started()) || fullscreen())
+      (!playsinline() || fullscreen())
     );
   }
 

diff --git a/packages/vidstack/src/components/ui/controls.ts b/packages/vidstack/src/components/ui/controls.ts
@@ -53,8 +53,9 @@ export class Controls extends Component<ControlsProps, {}, ControlsEvents> {
   private _hideControls() {
     if (!this.el) return;
 
-    const { controls } = this._media.$state,
-      isHidden = controls() || this._media.$iosControls();
+    const { $iosControls } = this._media,
+      { controls } = this._media.$state,
+      isHidden = controls() || $iosControls();
 
     setAttribute(this.el, 'aria-hidden', isHidden ? 'true' : null);
     setStyle(this.el, 'display', isHidden ? 'none' : null);

diff --git a/packages/vidstack/src/core/state/media-state-sync.ts b/packages/vidstack/src/core/state/media-state-sync.ts
@@ -1,4 +1,5 @@
 import { effect } from 'maverick.js';
+
 import { MediaPlayerController } from '../api/player-controller';
 
 /**

diff --git a/packages/vidstack/src/elements/define/provider-element.ts b/packages/vidstack/src/elements/define/provider-element.ts
@@ -77,10 +77,11 @@ export class MediaProviderElement extends Host(HTMLElement, MediaProvider) {
         : document.createElement('video');
 
     const { controls, crossorigin, poster } = this._media.$state,
+      { $iosControls } = this._media,
       $poster = computed(() => (poster() && controls() ? poster() : null));
 
     effect(() => {
-      setAttribute(video, 'controls', controls());
+      setAttribute(video, 'controls', controls() || $iosControls());
       setAttribute(video, 'crossorigin', crossorigin());
       setAttribute(video, 'poster', $poster());
     });