fix(player): hide tooltips on mobile

vidstack · Oct 3, 2023 · e635ad0 · e635ad0
1 parent 67fadf6
commit e635ad0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 25 deletions.
diff --git a/packages/vidstack/player/styles/default/layouts/video.css b/packages/vidstack/player/styles/default/layouts/video.css
@@ -435,35 +435,14 @@
 }
 
 @media (orientation: portrait) {
-  :where([data-iphone][data-fullscreen] .vds-video-layout .vds-controls-group:first-child) {
-    margin-top: 48px;
-    padding-inline: 4px;
-  }
-
-  :where([data-iphone][data-fullscreen] .vds-video-layout .vds-controls-group:nth-last-child(2)) {
-    padding-inline: 8px;
-  }
-
-  :where([data-iphone][data-fullscreen] .vds-video-layout .vds-controls-group:last-child) {
-    margin-inline: 8px;
-    margin-bottom: 52px;
-  }
-
   :where([data-fullscreen] .vds-video-layout .vds-captions) {
-    bottom: 30vh;
+    bottom: 30lvh;
+    bottom: 10dvh;
   }
 }
 
 @media (orientation: landscape) {
-  :where([data-iphone][data-fullscreen]:not([data-controls]) .vds-video-layout .vds-captions) {
-    bottom: 32px;
-  }
-
   :where([data-fullscreen] .vds-video-layout .vds-controls-group:nth-last-child(2)) {
     margin-bottom: -12px;
   }
-
-  :where([data-iphone][data-fullscreen] .vds-video-layout .vds-controls-group:last-child) {
-    margin-bottom: 12px;
-  }
 }
diff --git a/packages/vidstack/src/components/ui/tooltip/tooltip.ts b/packages/vidstack/src/components/ui/tooltip/tooltip.ts
@@ -37,10 +37,13 @@ export class Tooltip extends Component<TooltipProps> {
       _content: this._content,
       _showDelay: showDelay,
       _listen(trigger, show, hide) {
+        listenEvent(trigger, 'touchstart', (e) => e.preventDefault());
+
         listenEvent(trigger, 'focus', show);
-        listenEvent(trigger, 'pointerenter', show);
         listenEvent(trigger, 'blur', hide);
-        listenEvent(trigger, 'pointerleave', hide);
+
+        listenEvent(trigger, 'mouseenter', show);
+        listenEvent(trigger, 'mouseleave', hide);
       },
       _onChange: this._onShowingChange.bind(this),
     });