ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-11-15 13:49:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(studio): add tooltips to studio controls and tabs

Browse Source 
Add title attributes to interactive elements that were missing them:
- PlayerControls: Play/Pause, playback speed, shortcuts panel, clear
  in/out-point buttons, and jump-to-frame Go button
- StudioRightPanel: Design, Layers, Motion, and Renders tab buttons
This commit is contained in:
Miguel Ángel
2026-05-21 21:34:35 -04:00
parent 3e7b464b3b
commit 850ff9301f
2 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/StudioRightPanel.tsx
+4
View File
@@ -109,6 +109,7 @@ export function StudioRightPanel({
<button
type="button"
onClick={() => setRightPanelTab("design")}
title="Design"
className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
rightPanelTab === "design"
? "bg-neutral-800 text-white"
@@ -120,6 +121,7 @@ export function StudioRightPanel({
<button
type="button"
onClick={() => setRightPanelTab("layers")}
title="Layers"
className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
rightPanelTab === "layers"
? "bg-neutral-800 text-white"
@@ -132,6 +134,7 @@ export function StudioRightPanel({
<button
type="button"
onClick={() => setRightPanelTab("motion")}
title="Motion"
className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
rightPanelTab === "motion"
? "bg-neutral-800 text-white"
@@ -146,6 +149,7 @@ export function StudioRightPanel({
<button
type="button"
onClick={() => setRightPanelTab("renders")}
title="Renders"
className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
rightPanelTab === "renders"
? "bg-neutral-800 text-white"
packages/studio/src/player/components/PlayerControls.tsx
+6
View File
@@ -342,6 +342,7 @@ export const PlayerControls = memo(function PlayerControls({
{/* Play/Pause button */}
<button
type="button"
title={isPlaying ? "Pause" : "Play"}
aria-label={isPlaying ? "Pause" : "Play"}
onClick={() => {
trackStudioEvent("playback", { action: isPlaying ? "pause" : "play" });
@@ -528,6 +529,7 @@ export const PlayerControls = memo(function PlayerControls({
type="button"
onClick={() => setShowSpeedMenu((v) => !v)}
disabled={disabled}
title="Playback speed"
className="w-10 px-2 py-1 rounded-md text-[10px] font-mono tabular-nums transition-colors"
style={{ color: "#71717A", background: "rgba(255,255,255,0.04)" }}
>
@@ -664,6 +666,7 @@ export const PlayerControls = memo(function PlayerControls({
? "border-neutral-600 text-neutral-200 bg-neutral-800"
: "border-neutral-800 text-neutral-600 hover:text-neutral-300 hover:border-neutral-600"
}`}
title="Shortcuts and tools"
aria-label="Shortcuts and tools"
aria-expanded={showShortcuts}
>
@@ -712,6 +715,7 @@ export const PlayerControls = memo(function PlayerControls({
<button
type="submit"
disabled={disabled}
title="Jump to frame"
className="h-6 px-2 rounded border border-neutral-700 text-[10px] text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800 disabled:opacity-40"
>
Go
@@ -745,6 +749,7 @@ export const PlayerControls = memo(function PlayerControls({
type="button"
onClick={() => setInPoint(null)}
className="w-4 h-4 flex items-center justify-center rounded text-neutral-500 hover:text-neutral-200 transition-colors"
title="Clear in-point"
aria-label="Clear in-point"
>
<svg
@@ -784,6 +789,7 @@ export const PlayerControls = memo(function PlayerControls({
type="button"
onClick={() => setOutPoint(null)}
className="w-4 h-4 flex items-center justify-center rounded text-neutral-500 hover:text-neutral-200 transition-colors"
title="Clear out-point"
aria-label="Clear out-point"
>
<svg