From 7eeabddbd28f7e114a57ebea7d2a627adc8ad430 Mon Sep 17 00:00:00 2001
From: Rahim Alwer <rahim.alwer@gmail.com>
Date: Sat, 2 Dec 2023 17:10:26 +1100
Subject: [PATCH] feat(player): expose `hideOnMouseLeave` prop on controls
 component

---
 packages/vidstack/src/components/ui/controls.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/vidstack/src/components/ui/controls.ts b/packages/vidstack/src/components/ui/controls.ts
index 6f4a53743..7d58ec516 100644
--- a/packages/vidstack/src/components/ui/controls.ts
+++ b/packages/vidstack/src/components/ui/controls.ts
@@ -15,13 +15,14 @@ import { setAttributeIfEmpty } from '../../utils/dom';
 export class Controls extends Component<ControlsProps, {}, ControlsEvents> {
   static props: ControlsProps = {
     hideDelay: 2000,
+    hideOnMouseLeave: false,
   };
 
   private _media!: MediaContext;
 
   protected override onSetup(): void {
     this._media = useMediaContext();
-    effect(this._watchHideDelay.bind(this));
+    effect(this._watchProps.bind(this));
   }
 
   protected override onAttach(el: HTMLElement): void {
@@ -61,12 +62,13 @@ export class Controls extends Component<ControlsProps, {}, ControlsEvents> {
     setStyle(this.el, 'display', isHidden ? 'none' : null);
   }
 
-  private _watchHideDelay() {
+  private _watchProps() {
     const { controls } = this._media.player,
-      { hideDelay } = this.$props;
+      { hideDelay, hideOnMouseLeave } = this.$props;
 
     // Use controls delay prop on player if this is the default value.
     controls.defaultDelay = hideDelay() === 2000 ? this._media.$props.controlsDelay() : hideDelay();
+    controls.hideOnMouseLeave = hideOnMouseLeave();
   }
 
   private _isShowing() {
@@ -81,6 +83,11 @@ export interface ControlsProps {
    * activity to hide the controls.
    */
   hideDelay: number;
+  /**
+   * Whether controls visibility should be toggled when the mouse enters and leaves the player
+   * container.
+   */
+  hideOnMouseLeave: boolean;
 }
 
 export interface ControlsEvents {