zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(packages): make tooltips visual-only and auto-forward media button labels (#1174)

Browse Source 
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
rahim
2026-04-02 14:20:01 -07:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 341b405a21
commit 86cf3e8977
52 changed files with 242 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/minimal-skin.tailwind.ts
+1 -8
View File
@@ -14,7 +14,6 @@ import {
seek,
slider,
time,
tooltipState,
} from '@videojs/skins/minimal/tailwind/audio.tailwind';
import { createTemplate } from '@videojs/utils/dom';
import { cn } from '@videojs/utils/style';
@@ -59,18 +58,12 @@ function getTemplateHTML() {
<div class="${controls}">
<media-tooltip-group>
<div class="${buttonGroup}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.play.replay}">Replay</span>
<span class="${tooltipState.play.play}">Play</span>
<span class="${tooltipState.play.pause}">Pause</span>
</media-tooltip>
</span>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
packages/html/src/define/audio/minimal-skin.ts
+1 -5
View File
@@ -47,11 +47,7 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="media-tooltip">
<span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
<span class="media-tooltip-label media-tooltip-label--play">Play</span>
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
</media-tooltip>
<media-tooltip id="play-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
packages/html/src/define/audio/skin.tailwind.ts
+1 -8
View File
@@ -14,7 +14,6 @@ import {
seek,
slider,
time,
tooltipState,
} from '@videojs/skins/default/tailwind/audio.tailwind';
import { createTemplate } from '@videojs/utils/dom';
import { cn } from '@videojs/utils/style';
@@ -59,18 +58,12 @@ function getTemplateHTML() {
<div class="${controls}">
<media-tooltip-group>
<div class="${buttonGroup}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.play.replay}">Replay</span>
<span class="${tooltipState.play.play}">Play</span>
<span class="${tooltipState.play.pause}">Pause</span>
</media-tooltip>
</span>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
packages/html/src/define/audio/skin.ts
+1 -5
View File
@@ -47,11 +47,7 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
<span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
<span class="media-tooltip-label media-tooltip-label--play">Play</span>
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
</media-tooltip>
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
packages/html/src/define/video/minimal-skin.tailwind.ts
+4 -29
View File
@@ -19,7 +19,6 @@ import {
seek,
slider,
time,
tooltipState,
} from '@videojs/skins/minimal/tailwind/video.tailwind';
import { createTemplate } from '@videojs/utils/dom';
import { cn } from '@videojs/utils/style';
@@ -78,18 +77,12 @@ function getTemplateHTML() {
<media-controls data-controls="" class="${controls}">
<media-tooltip-group>
<div class="${buttonGroupStart}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.play.replay}">Replay</span>
<span class="${tooltipState.play.play}">Play</span>
<span class="${tooltipState.play.pause}">Pause</span>
</media-tooltip>
</span>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -157,39 +150,21 @@ function getTemplateHTML() {
<media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<span class="${tooltipState.captions.wrapper}">
<media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
</media-captions-button>
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.captions.enable}">Enable captions</span>
<span class="${tooltipState.captions.disable}">Disable captions</span>
</media-tooltip>
</span>
<span class="${tooltipState.pip.wrapper}">
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
<span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
</media-tooltip>
</span>
<span class="${tooltipState.fullscreen.wrapper}">
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
<span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
</media-tooltip>
</span>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
</div>
</media-tooltip-group>
</media-controls>
packages/html/src/define/video/minimal-skin.ts
+3 -13
View File
@@ -60,11 +60,7 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="media-tooltip">
<span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
<span class="media-tooltip-label media-tooltip-label--play">Play</span>
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
</media-tooltip>
<media-tooltip id="play-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -144,19 +140,13 @@ function getTemplateHTML() {
${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="media-tooltip">
<span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
<span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
</media-tooltip>
<media-tooltip id="pip-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip">
<span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
<span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
</media-tooltip>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip"></media-tooltip>
</div>
</media-tooltip-group>
</media-controls>
packages/html/src/define/video/skin.tailwind.ts
+4 -29
View File
@@ -19,7 +19,6 @@ import {
seek,
slider,
time,
tooltipState,
} from '@videojs/skins/default/tailwind/video.tailwind';
import { createTemplate } from '@videojs/utils/dom';
import { cn } from '@videojs/utils/style';
@@ -80,18 +79,12 @@ function getTemplateHTML() {
<media-controls data-controls="" class="${controls}">
<media-tooltip-group>
<div class="${buttonGroupStart}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.play.replay}">Replay</span>
<span class="${tooltipState.play.play}">Play</span>
<span class="${tooltipState.play.pause}">Pause</span>
</media-tooltip>
</span>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -152,39 +145,21 @@ function getTemplateHTML() {
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<span class="${tooltipState.captions.wrapper}">
<media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
</media-captions-button>
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.captions.enable}">Enable captions</span>
<span class="${tooltipState.captions.disable}">Disable captions</span>
</media-tooltip>
</span>
<span class="${tooltipState.pip.wrapper}">
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
<span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
</media-tooltip>
</span>
<span class="${tooltipState.fullscreen.wrapper}">
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
<span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
</media-tooltip>
</span>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
</div>
</media-tooltip-group>
</media-controls>
packages/html/src/define/video/skin.ts
+4 -17
View File
@@ -63,11 +63,7 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
<span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
<span class="media-tooltip-label media-tooltip-label--play">Play</span>
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
</media-tooltip>
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -133,28 +129,19 @@ function getTemplateHTML() {
${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}
${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}
</media-captions-button>
<media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
<span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span>
<span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
</media-tooltip>
<media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
<span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
<span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
</media-tooltip>
<media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
<span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
<span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
</media-tooltip>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
</div>
</media-tooltip-group>
</media-controls>
packages/html/src/ui/media-button-element.ts
+18 -2
View File
@@ -1,12 +1,19 @@
import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';
import type {
ButtonState,
InferComponentState,
InferMediaState,
MediaButtonComponent,
StateAttrMap,
} from '@videojs/core';
import { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature } from '@videojs/core/dom';
import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';
import type { State } from '@videojs/store';
import type { PlayerController } from '../player/player-controller';
import { MediaElement } from './media-element';
/** Abstract base for HTML custom elements that render a media-control button. */
export abstract class MediaButtonElement<Core extends MediaUIComponent> extends MediaElement {
export abstract class MediaButtonElement<Core extends MediaButtonComponent> extends MediaElement {
static override properties: PropertyDeclarationMap = {
label: { type: String },
disabled: { type: Boolean },
@@ -21,6 +28,10 @@ export abstract class MediaButtonElement<Core extends MediaUIComponent> extends
protected abstract activate(state: InferMediaState<Core>): void;
get $state(): State<ButtonState> {
return this.core.state;
}
#disconnect: AbortController | null = null;
override connectedCallback(): void {
@@ -46,6 +57,11 @@ export abstract class MediaButtonElement<Core extends MediaUIComponent> extends
this.#disconnect = null;
}
/** Returns the button's current label derived from media state. */
getLabel(): string | undefined {
return this.core.state.current.label || undefined;
}
protected override willUpdate(changed: PropertyValues): void {
super.willUpdate(changed);
this.core.setProps?.(this);
packages/html/src/ui/tooltip/tooltip-element.ts
+23 -7
View File
@@ -1,4 +1,4 @@
import { TooltipCore, TooltipCSSVars, TooltipDataAttrs, type TooltipInput } from '@videojs/core';
import { type ButtonState, TooltipCore, TooltipCSSVars, TooltipDataAttrs, type TooltipInput } from '@videojs/core';
import {
applyElementProps,
applyStateDataAttrs,
@@ -13,12 +13,22 @@ import {
} from '@videojs/core/dom';
import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';
import { ContextConsumer } from '@videojs/element/context';
import type { State } from '@videojs/store';
import { SnapshotController } from '@videojs/store/html';
import { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';
import { MediaElement } from '../media-element';
import { tooltipGroupContext } from './context';
type TriggerElement = HTMLElement & {
getLabel(): string | undefined;
$state: State<ButtonState>;
};
function isLabelTrigger(el: HTMLElement): el is TriggerElement {
return '$state' in el;
}
export class TooltipElement extends MediaElement {
static readonly tagName = 'media-tooltip';
@@ -150,9 +160,8 @@ export class TooltipElement extends MediaElement {
tryHidePopover(this);
}
// Apply trigger ARIA and anchor-name to the discovered trigger.
// Apply anchor-name to the discovered trigger for CSS positioning.
if (this.#currentTrigger) {
applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));
applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));
}
@@ -205,15 +214,22 @@ export class TooltipElement extends MediaElement {
if (triggerEl && this.#tooltip) {
this.#triggerAbort = new AbortController();
applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });
if (isLabelTrigger(triggerEl)) {
this.#syncContent(triggerEl);
triggerEl.$state.subscribe(() => this.#syncContent(triggerEl), {
signal: this.#triggerAbort.signal,
});
}
}
}
#syncContent(triggerEl: TriggerElement): void {
this.textContent = triggerEl.getLabel() ?? '';
}
#cleanupTrigger(): void {
if (this.#currentTrigger) {
// Remove ARIA attributes and anchor-name style from the old trigger.
applyElementProps(this.#currentTrigger, {
'aria-describedby': undefined,
});
this.#currentTrigger.style.removeProperty('anchor-name');
}