fix(player): do not show volume slider when play button is interacted…

… with
vidstack · Oct 1, 2023 · 757841d · 757841d
1 parent cf29880
commit 757841d
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 3 deletions.
diff --git a/packages/vidstack/player/styles/default/layouts/video.css b/packages/vidstack/player/styles/default/layouts/video.css
@@ -160,8 +160,14 @@
   transform: translateX(-2px);
 }
 
-.vds-video-layout :where(*[data-hocus], *:focus-within) + .vds-volume-slider,
-.vds-video-layout :where(*[data-hocus], *:focus-within) + * + .vds-volume-slider,
+:where(.vds-video-layout [data-media-mute-button][data-hocus] + .vds-volume-slider),
+:where(
+    .vds-video-layout
+      [data-media-mute-button][data-hocus]
+      + .vds-tooltip-content
+      + .vds-volume-slider
+  ),
+:where(.vds-video-layout [data-media-mute-tooltip][data-hocus] + .vds-volume-slider),
 :where(.vds-video-layout .vds-volume-slider[data-active]) {
   margin-left: 9px;
   max-width: var(--video-volume-slider-max-width, 72px);

diff --git a/packages/vidstack/src/components/ui/buttons/caption-button.ts b/packages/vidstack/src/components/ui/buttons/caption-button.ts
@@ -43,6 +43,7 @@ export class CaptionButton extends Component<CaptionButtonProps> {
   }
 
   protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-tooltip', 'caption');
     setARIALabel(el, this._getLabel.bind(this));
   }
 

diff --git a/packages/vidstack/src/components/ui/buttons/fullscreen-button.ts b/packages/vidstack/src/components/ui/buttons/fullscreen-button.ts
@@ -57,6 +57,7 @@ export class FullscreenButton extends Component<FullscreenButtonProps> {
   }
 
   protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-tooltip', 'fullscreen');
     setARIALabel(el, this._getLabel.bind(this));
   }
 

diff --git a/packages/vidstack/src/components/ui/buttons/live-button.ts b/packages/vidstack/src/components/ui/buttons/live-button.ts
@@ -50,6 +50,7 @@ export class LiveButton extends Component<LiveIndicatorProps> {
   protected override onAttach(el: HTMLElement): void {
     setAttributeIfEmpty(el, 'tabindex', '0');
     setAttributeIfEmpty(el, 'role', 'button');
+    el.setAttribute('data-media-tooltip', 'live');
   }
 
   protected override onConnect(el: HTMLElement) {

diff --git a/packages/vidstack/src/components/ui/buttons/mute-button.ts b/packages/vidstack/src/components/ui/buttons/mute-button.ts
@@ -40,6 +40,8 @@ export class MuteButton extends Component<MuteButtonProps> {
   }
 
   protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-mute-button', '');
+    el.setAttribute('data-media-tooltip', 'mute');
     setARIALabel(el, this._getLabel.bind(this));
   }
 

diff --git a/packages/vidstack/src/components/ui/buttons/pip-button.ts b/packages/vidstack/src/components/ui/buttons/pip-button.ts
@@ -46,6 +46,7 @@ export class PIPButton extends Component<PIPButtonProps> {
   }
 
   protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-tooltip', 'pip');
     setARIALabel(el, this._getLabel.bind(this));
   }
 

diff --git a/packages/vidstack/src/components/ui/buttons/play-button.ts b/packages/vidstack/src/components/ui/buttons/play-button.ts
@@ -42,6 +42,7 @@ export class PlayButton extends Component<PlayButtonProps> {
   }
 
   protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-tooltip', 'play');
     setARIALabel(el, this._getLabel.bind(this));
   }
 

diff --git a/packages/vidstack/src/components/ui/buttons/seek-button.ts b/packages/vidstack/src/components/ui/buttons/seek-button.ts
@@ -57,6 +57,7 @@ export class SeekButton extends Component<SeekButtonProps> {
   protected override onAttach(el: HTMLElement) {
     setAttributeIfEmpty(el, 'tabindex', '0');
     setAttributeIfEmpty(el, 'role', 'button');
+    el.setAttribute('data-media-tooltip', 'seek');
     setARIALabel(el, this._getLabel.bind(this));
   }
 

diff --git a/packages/vidstack/src/components/ui/tooltip/tooltip.ts b/packages/vidstack/src/components/ui/tooltip/tooltip.ts
@@ -64,6 +64,12 @@ export class Tooltip extends Component<TooltipProps> {
   private _attachTrigger(el: HTMLElement) {
     this._trigger.set(el);
     el.removeAttribute('aria-label');
+
+    let tooltipName = el.getAttribute('data-media-tooltip');
+    if (tooltipName) {
+      this.el?.setAttribute(`data-media-${tooltipName}-tooltip`, '');
+    }
+
     setAttribute(el, 'data-describedby', this._id);
   }
 

diff --git a/packages/vidstack/src/providers/video/presentation/video-presentation.ts b/packages/vidstack/src/providers/video/presentation/video-presentation.ts
@@ -13,7 +13,10 @@ declare global {
 export class VideoPresentation {
   _mode: WebKitPresentationMode = 'inline';
 
-  constructor(protected _video: HTMLVideoElement, private _media: MediaContext) {
+  constructor(
+    protected _video: HTMLVideoElement,
+    private _media: MediaContext,
+  ) {
     listenEvent(this._video, 'webkitpresentationmodechanged', this._onModeChange.bind(this));
   }
-Original file line number
+Diff line change
@@ Expand Up @@
       }
       protected override onAttach(el: HTMLElement): void {
+        el.setAttribute('data-media-tooltip', 'caption');
         setARIALabel(el, this._getLabel.bind(this));
       }
@@ Expand Down @@