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

feat(studio): add Tooltip to player and timeline controls

Browse Source
This commit is contained in:
Miguel Ángel
2026-05-21 21:55:13 -04:00
parent 8ffa2eb8c1
commit 2483ab5446
2 changed files with 316 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/TimelineToolbar.tsx
+62 -55
View File
@@ -4,6 +4,7 @@ import {
} from "../player/components/timelineZoom";
import { getTimelineToggleTitle } from "../utils/timelineDiscovery";
import { usePlayerStore } from "../player";
import { Tooltip } from "./ui";
interface TimelineToolbarProps {
toggleTimelineVisibility: () => void;
@@ -23,65 +24,71 @@ export function TimelineToolbar({ toggleTimelineVisibility }: TimelineToolbarPro
Timeline
</div>
<div className="flex items-center gap-1">
<button
type="button"
onClick={() => setZoomMode("fit")}
className={`h-7 px-2.5 rounded-md border text-[11px] font-medium transition-colors ${
zoomMode === "fit"
? "border-studio-accent/30 bg-studio-accent/10 text-studio-accent"
: "border-neutral-800 text-neutral-400 hover:border-neutral-700 hover:text-neutral-200"
}`}
title="Fit timeline to width"
>
Fit
</button>
<button
type="button"
onClick={() => {
setZoomMode("manual");
setManualZoomPercent(getNextTimelineZoomPercent("out", zoomMode, manualZoomPercent));
}}
className="h-7 w-7 rounded-md border border-neutral-800 text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"
title="Zoom out"
>
-
</button>
<Tooltip label="Fit timeline to width">
<button
type="button"
onClick={() => setZoomMode("fit")}
className={`h-7 px-2.5 rounded-md border text-[11px] font-medium transition-colors ${
zoomMode === "fit"
? "border-studio-accent/30 bg-studio-accent/10 text-studio-accent"
: "border-neutral-800 text-neutral-400 hover:border-neutral-700 hover:text-neutral-200"
}`}
>
Fit
</button>
</Tooltip>
<Tooltip label="Zoom out">
<button
type="button"
onClick={() => {
setZoomMode("manual");
setManualZoomPercent(
getNextTimelineZoomPercent("out", zoomMode, manualZoomPercent),
);
}}
className="h-7 w-7 rounded-md border border-neutral-800 text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"
>
-
</button>
</Tooltip>
<div className="min-w-[58px] text-center text-[10px] font-medium tabular-nums text-neutral-500">
{`${displayedTimelineZoomPercent}%`}
</div>
<button
type="button"
onClick={() => {
setZoomMode("manual");
setManualZoomPercent(getNextTimelineZoomPercent("in", zoomMode, manualZoomPercent));
}}
className="h-7 w-7 rounded-md border border-neutral-800 text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"
title="Zoom in"
>
+
</button>
<button
type="button"
onClick={toggleTimelineVisibility}
className="ml-1 flex h-7 w-7 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-neutral-900 hover:text-neutral-200"
title={getTimelineToggleTitle(true)}
aria-label="Hide timeline editor"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
<Tooltip label="Zoom in">
<button
type="button"
onClick={() => {
setZoomMode("manual");
setManualZoomPercent(getNextTimelineZoomPercent("in", zoomMode, manualZoomPercent));
}}
className="h-7 w-7 rounded-md border border-neutral-800 text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"
>
<path d="M5 7h14" />
<path d="m8 11 4 4 4-4" />
</svg>
</button>
+
</button>
</Tooltip>
<Tooltip label={getTimelineToggleTitle(true)}>
<button
type="button"
onClick={toggleTimelineVisibility}
className="ml-1 flex h-7 w-7 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-neutral-900 hover:text-neutral-200"
aria-label="Hide timeline editor"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<path d="M5 7h14" />
<path d="m8 11 4 4 4-4" />
</svg>
</button>
</Tooltip>
</div>
</div>
</div>