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/react/src/presets/audio/minimal-skin.tailwind.tsx
+1 -10
View File
@@ -89,13 +89,6 @@ const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persist
);
});
function PlayLabel(): string {
const paused = usePlayer((s) => Boolean(s.paused));
const ended = usePlayer((s) => Boolean(s.ended));
if (ended) return 'Replay';
return paused ? 'Play' : 'Pause';
}
function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
@@ -160,9 +153,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
</PlayButton>
}
/>
<Tooltip.Popup className={cn(popup.tooltip)}>
<PlayLabel />
</Tooltip.Popup>
<Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
</Tooltip.Root>
<Tooltip.Root side="top">
packages/react/src/presets/audio/minimal-skin.tsx
+1 -10
View File
@@ -37,13 +37,6 @@ const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function
);
});
function PlayLabel(): string {
const paused = usePlayer((s) => Boolean(s.paused));
const ended = usePlayer((s) => Boolean(s.ended));
if (ended) return 'Replay';
return paused ? 'Play' : 'Pause';
}
function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
@@ -106,9 +99,7 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {
</PlayButton>
}
/>
<Tooltip.Popup className="media-tooltip">
<PlayLabel />
</Tooltip.Popup>
<Tooltip.Popup className="media-tooltip" />
</Tooltip.Root>
<Tooltip.Root side="top">
packages/react/src/presets/audio/skin.tailwind.tsx
+1 -10
View File
@@ -89,13 +89,6 @@ const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persist
);
});
function PlayLabel(): string {
const paused = usePlayer((s) => Boolean(s.paused));
const ended = usePlayer((s) => Boolean(s.ended));
if (ended) return 'Replay';
return paused ? 'Play' : 'Pause';
}
function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
@@ -160,9 +153,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
</PlayButton>
}
/>
<Tooltip.Popup className={cn(popup.tooltip)}>
<PlayLabel />
</Tooltip.Popup>
<Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
</Tooltip.Root>
<Tooltip.Root side="top">
packages/react/src/presets/audio/skin.tsx
+1 -10
View File
@@ -37,13 +37,6 @@ const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function
);
});
function PlayLabel(): string {
const paused = usePlayer((s) => Boolean(s.paused));
const ended = usePlayer((s) => Boolean(s.ended));
if (ended) return 'Replay';
return paused ? 'Play' : 'Pause';
}
function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
@@ -106,9 +99,7 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
</PlayButton>
}
/>
<Tooltip.Popup className="media-surface media-tooltip">
<PlayLabel />
</Tooltip.Popup>
<Tooltip.Popup className="media-surface media-tooltip" />
</Tooltip.Root>
<Tooltip.Root side="top">
packages/react/src/presets/video/minimal-skin.tailwind.tsx
+4 -34
View File
@@ -110,28 +110,6 @@ const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persist
);
});
function PlayLabel(): string {
const paused = usePlayer((s) => Boolean(s.paused));
const ended = usePlayer((s) => Boolean(s.ended));
if (ended) return 'Replay';
return paused ? 'Play' : 'Pause';
}
function CaptionsLabel(): string {
const active = usePlayer((s) => Boolean(s.subtitlesShowing));
return active ? 'Disable captions' : 'Enable captions';
}
function PiPLabel(): string {
const pip = usePlayer((s) => Boolean(s.pip));
return pip ? 'Exit picture-in-picture' : 'Enter picture-in-picture';
}
function FullscreenLabel(): string {
const fullscreen = usePlayer((s) => Boolean(s.fullscreen));
return fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';
}
function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
@@ -215,9 +193,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
</PlayButton>
}
/>
<Tooltip.Popup className={cn(popup.tooltip)}>
<PlayLabel />
</Tooltip.Popup>
<Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
</Tooltip.Root>
<Tooltip.Root side="top">
@@ -289,9 +265,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
</CaptionsButton>
}
/>
<Tooltip.Popup className={cn(popup.tooltip)}>
<CaptionsLabel />
</Tooltip.Popup>
<Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
</Tooltip.Root>
<Tooltip.Root side="top">
@@ -303,9 +277,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
</PiPButton>
}
/>
<Tooltip.Popup className={cn(popup.tooltip)}>
<PiPLabel />
</Tooltip.Popup>
<Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
</Tooltip.Root>
<Tooltip.Root side="top">
@@ -317,9 +289,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
</FullscreenButton>
}
/>
<Tooltip.Popup className={cn(popup.tooltip)}>
<FullscreenLabel />
</Tooltip.Popup>
<Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
</Tooltip.Root>
</div>
</Tooltip.Provider>
packages/react/src/presets/video/minimal-skin.tsx
+4 -34
View File
@@ -53,28 +53,6 @@ const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function
);
});
function PlayLabel(): string {
const paused = usePlayer((s) => Boolean(s.paused));
const ended = usePlayer((s) => Boolean(s.ended));
if (ended) return 'Replay';
return paused ? 'Play' : 'Pause';
}
function CaptionsLabel(): string {
const active = usePlayer((s) => Boolean(s.subtitlesShowing));
return active ? 'Disable captions' : 'Enable captions';
}
function PiPLabel(): string {
const pip = usePlayer((s) => Boolean(s.pip));
return pip ? 'Exit picture-in-picture' : 'Enter picture-in-picture';
}
function FullscreenLabel(): string {
const fullscreen = usePlayer((s) => Boolean(s.fullscreen));
return fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';
}
function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
@@ -149,9 +127,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
</PlayButton>
}
/>
<Tooltip.Popup className="media-tooltip">
<PlayLabel />
</Tooltip.Popup>
<Tooltip.Popup className="media-tooltip" />
</Tooltip.Root>
<Tooltip.Root side="top">
@@ -226,9 +202,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
</CaptionsButton>
}
/>
<Tooltip.Popup className="media-tooltip">
<CaptionsLabel />
</Tooltip.Popup>
<Tooltip.Popup className="media-tooltip" />
</Tooltip.Root>
<Tooltip.Root side="top">
@@ -240,9 +214,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
</PiPButton>
}
/>
<Tooltip.Popup className="media-tooltip">
<PiPLabel />
</Tooltip.Popup>
<Tooltip.Popup className="media-tooltip" />
</Tooltip.Root>
<Tooltip.Root side="top">
@@ -254,9 +226,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
</FullscreenButton>
}
/>
<Tooltip.Popup className="media-tooltip">
<FullscreenLabel />
</Tooltip.Popup>
<Tooltip.Popup className="media-tooltip" />
</Tooltip.Root>
</div>
</Tooltip.Provider>
packages/react/src/presets/video/skin.tailwind.tsx
+4 -34
View File
@@ -110,28 +110,6 @@ const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persist
);
});
function PlayLabel(): string {
const paused = usePlayer((s) => Boolean(s.paused));
const ended = usePlayer((s) => Boolean(s.ended));
if (ended) return 'Replay';
return paused ? 'Play' : 'Pause';
}
function CaptionsLabel(): string {
const active = usePlayer((s) => Boolean(s.subtitlesShowing));
return active ? 'Disable captions' : 'Enable captions';
}
function PiPLabel(): string {
const pip = usePlayer((s) => Boolean(s.pip));
return pip ? 'Exit picture-in-picture' : 'Enter picture-in-picture';
}
function FullscreenLabel(): string {
const fullscreen = usePlayer((s) => Boolean(s.fullscreen));
return fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';
}
function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
@@ -217,9 +195,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
</PlayButton>
}
/>
<Tooltip.Popup className={cn(popup.tooltip)}>
<PlayLabel />
</Tooltip.Popup>
<Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
</Tooltip.Root>
<Tooltip.Root side="top">
@@ -285,9 +261,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
</CaptionsButton>
}
/>
<Tooltip.Popup className={cn(popup.tooltip)}>
<CaptionsLabel />
</Tooltip.Popup>
<Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
</Tooltip.Root>
<Tooltip.Root side="top">
@@ -299,9 +273,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
</PiPButton>
}
/>
<Tooltip.Popup className={cn(popup.tooltip)}>
<PiPLabel />
</Tooltip.Popup>
<Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
</Tooltip.Root>
<Tooltip.Root side="top">
@@ -313,9 +285,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
</FullscreenButton>
}
/>
<Tooltip.Popup className={cn(popup.tooltip)}>
<FullscreenLabel />
</Tooltip.Popup>
<Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
</Tooltip.Root>
</div>
</Tooltip.Provider>
packages/react/src/presets/video/skin.tsx
+4 -34
View File
@@ -53,28 +53,6 @@ const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function
);
});
function PlayLabel(): string {
const paused = usePlayer((s) => Boolean(s.paused));
const ended = usePlayer((s) => Boolean(s.ended));
if (ended) return 'Replay';
return paused ? 'Play' : 'Pause';
}
function CaptionsLabel(): string {
const active = usePlayer((s) => Boolean(s.subtitlesShowing));
return active ? 'Disable captions' : 'Enable captions';
}
function PiPLabel(): string {
const pip = usePlayer((s) => Boolean(s.pip));
return pip ? 'Exit picture-in-picture' : 'Enter picture-in-picture';
}
function FullscreenLabel(): string {
const fullscreen = usePlayer((s) => Boolean(s.fullscreen));
return fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';
}
function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
@@ -151,9 +129,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
</PlayButton>
}
/>
<Tooltip.Popup className="media-surface media-tooltip">
<PlayLabel />
</Tooltip.Popup>
<Tooltip.Popup className="media-surface media-tooltip" />
</Tooltip.Root>
<Tooltip.Root side="top">
@@ -222,9 +198,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
</CaptionsButton>
}
/>
<Tooltip.Popup className="media-surface media-tooltip">
<CaptionsLabel />
</Tooltip.Popup>
<Tooltip.Popup className="media-surface media-tooltip" />
</Tooltip.Root>
<Tooltip.Root side="top">
@@ -236,9 +210,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
</PiPButton>
}
/>
<Tooltip.Popup className="media-surface media-tooltip">
<PiPLabel />
</Tooltip.Popup>
<Tooltip.Popup className="media-surface media-tooltip" />
</Tooltip.Root>
<Tooltip.Root side="top">
@@ -250,9 +222,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
</FullscreenButton>
}
/>
<Tooltip.Popup className="media-surface media-tooltip">
<FullscreenLabel />
</Tooltip.Popup>
<Tooltip.Popup className="media-surface media-tooltip" />
</Tooltip.Root>
</div>
</Tooltip.Provider>