feat(player): new noGestures default layout prop

vidstack · Dec 24, 2023 · 2fff957 · 2fff957
1 parent 219b90e
commit 2fff957
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/packages/react/src/components/layouts/default/context.ts b/packages/react/src/components/layouts/default/context.ts
@@ -20,6 +20,7 @@ interface DefaultLayoutContext {
   slots?: unknown;
   sliderChaptersMinWidth: number;
   disableTimeSlider: boolean;
+  noGestures?: boolean;
 }
 
 export function useDefaultLayoutLang(word: keyof DefaultLayoutTranslations) {

diff --git a/packages/react/src/components/layouts/default/shared-layout.tsx b/packages/react/src/components/layouts/default/shared-layout.tsx
@@ -128,6 +128,10 @@ export interface DefaultMediaLayoutProps<Slots = unknown> extends PrimitiveProps
    * Whether the time slider should be disabled.
    */
   disableTimeSlider?: boolean;
+  /**
+   * Whether all gestures such as pressing to play or seek should not be active.
+   */
+  noGestures?: boolean;
 }
 
 export interface CreateDefaultMediaLayout {
@@ -162,6 +166,7 @@ export function createDefaultMediaLayout({
         hideQualityBitrate = false,
         sliderChaptersMinWidth = 600,
         disableTimeSlider = false,
+        noGestures = false,
         slots,
         children,
         ...props
@@ -202,6 +207,7 @@ export function createDefaultMediaLayout({
                 slots,
                 sliderChaptersMinWidth,
                 disableTimeSlider,
+                noGestures,
                 Icons: icons,
               }}
             >

diff --git a/packages/react/src/components/layouts/default/video-layout.tsx b/packages/react/src/components/layouts/default/video-layout.tsx
@@ -170,6 +170,10 @@ DefaultVideoStartDuration.displayName = 'DefaultVideoStartDuration';
  * -----------------------------------------------------------------------------------------------*/
 
 function DefaultVideoGestures() {
+  const { noGestures } = React.useContext(DefaultLayoutContext);
+
+  if (noGestures) return null;
+
   return (
     <div className="vds-gestures">
       <Gesture className="vds-gesture" event="pointerup" action="toggle:paused" />

diff --git a/packages/vidstack/src/components/layouts/default-layout.ts b/packages/vidstack/src/components/layouts/default-layout.ts
@@ -20,6 +20,7 @@ export class DefaultLayout extends Component<DefaultLayoutProps> {
     noModal: false,
     sliderChaptersMinWidth: 600,
     disableTimeSlider: false,
+    noGestures: false,
   };
 
   // slider-chapters-min-width
@@ -50,6 +51,7 @@ export class DefaultLayout extends Component<DefaultLayoutProps> {
       noModal,
       sliderChaptersMinWidth,
       disableTimeSlider,
+      noGestures,
     } = this.$props;
 
     this._whenQueryList = PlayerQueryList.create(when);
@@ -69,6 +71,7 @@ export class DefaultLayout extends Component<DefaultLayoutProps> {
       noModal,
       sliderChaptersMinWidth,
       disableTimeSlider,
+      noGestures,
       get menuContainer() {
         return self.menuContainer;
       },
@@ -154,6 +157,10 @@ export interface DefaultLayoutProps {
    * Whether the time slider should be disabled.
    */
   disableTimeSlider?: boolean;
+  /**
+   * Whether all gestures such as press to play or seek should not be active.
+   */
+  noGestures?: boolean;
 }
 
 export interface DefaultLayoutContext {
@@ -165,6 +172,7 @@ export interface DefaultLayoutContext {
   sliderChaptersMinWidth: ReadSignal<DefaultLayoutProps['sliderChaptersMinWidth']>;
   menuContainer: HTMLElement | null;
   disableTimeSlider: ReadSignal<boolean>;
+  noGestures: ReadSignal<boolean>;
 }
 
 export interface DefaultLayoutTranslations {

diff --git a/packages/vidstack/src/elements/define/layouts/default/video-layout.ts b/packages/vidstack/src/elements/define/layouts/default/video-layout.ts
@@ -19,7 +19,7 @@ import {
 
 export function DefaultVideoLayoutLarge() {
   return html`
-    ${DefaultVideoGestures()}${DefaultBufferingIndicator()}
+    ${$computed(DefaultVideoGestures)}${DefaultBufferingIndicator()}
     <media-captions class="vds-captions"></media-captions>
 
     <div class="vds-scrim"></div>
@@ -131,7 +131,9 @@ function DefaultVideoMenus() {
 }
 
 function DefaultVideoGestures() {
-  return html`
+  const { noGestures } = useDefaultLayoutContext();
+
+  const Gestures = html`
     <div class="vds-gestures">
       <media-gesture class="vds-gesture" event="pointerup" action="toggle:paused"></media-gesture>
       <media-gesture class="vds-gesture" event="pointerup" action="toggle:controls"></media-gesture>
@@ -144,4 +146,6 @@ function DefaultVideoGestures() {
       <media-gesture class="vds-gesture" event="dblpointerup" action="seek:10"></media-gesture>
     </div>
   `;
+
+  return noGestures() ? null : Gestures;
 }