Skip to content

fix(linux) + feat(ui): fix video export crash on Linux and improve editor UI polish #999

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Rajanvik wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(linux) + feat(ui): fix video export crash on Linux and improve editor UI polish #999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/ui/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"flex h-10 w-full items-center justify-between rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className,
)}
{...props}
Expand Down
4 changes: 2 additions & 2 deletions src/components/ui/switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Switch = React.forwardRef<
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
"data-[state=checked]:bg-[#2563EB] data-[state=unchecked]:bg-muted",
"data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
className,
)}
{...props}
Expand All @@ -19,7 +19,7 @@ const Switch = React.forwardRef<
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform",
"bg-background",
"bg-primary-foreground",
"data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
)}
/>
Expand Down
10 changes: 5 additions & 5 deletions src/components/video-editor/AnnotationOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ export function AnnotationOverlay({
bounds="parent"
className={cn(
"cursor-move transition-all",
isSelected && "ring-2 ring-[#2563EB] ring-offset-2 ring-offset-transparent",
isSelected && "ring-2 ring-primary ring-offset-2 ring-offset-transparent",
)}
style={{
zIndex: isSelectedBoost ? zIndex + 1000 : zIndex, // Boost selected annotation to ensure it's on top
Expand All @@ -256,7 +256,7 @@ export function AnnotationOverlay({
width: "12px",
height: "12px",
backgroundColor: isSelected ? "white" : "transparent",
border: isSelected ? "2px solid #2563EB" : "none",
border: isSelected ? "2px solid hsl(var(--primary))" : "none",
borderRadius: "50%",
left: "-6px",
top: "-6px",
Expand All @@ -266,7 +266,7 @@ export function AnnotationOverlay({
width: "12px",
height: "12px",
backgroundColor: isSelected ? "white" : "transparent",
border: isSelected ? "2px solid #2563EB" : "none",
border: isSelected ? "2px solid hsl(var(--primary))" : "none",
borderRadius: "50%",
right: "-6px",
top: "-6px",
Expand All @@ -276,7 +276,7 @@ export function AnnotationOverlay({
width: "12px",
height: "12px",
backgroundColor: isSelected ? "white" : "transparent",
border: isSelected ? "2px solid #2563EB" : "none",
border: isSelected ? "2px solid hsl(var(--primary))" : "none",
borderRadius: "50%",
left: "-6px",
bottom: "-6px",
Expand All @@ -286,7 +286,7 @@ export function AnnotationOverlay({
width: "12px",
height: "12px",
backgroundColor: isSelected ? "white" : "transparent",
border: isSelected ? "2px solid #2563EB" : "none",
border: isSelected ? "2px solid hsl(var(--primary))" : "none",
borderRadius: "50%",
right: "-6px",
bottom: "-6px",
Expand Down
36 changes: 18 additions & 18 deletions src/components/video-editor/AnnotationSettingsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export function AnnotationSettingsPanel({
<span className="text-sm font-medium text-foreground">
{t("annotations.settings")}
</span>
<span className="text-[10px] uppercase tracking-wider font-medium text-[#2563EB] bg-[#2563EB]/10 px-2 py-1 rounded-full">
<span className="text-[10px] uppercase tracking-wider font-medium text-primary bg-primary/10 px-2 py-1 rounded-full">
{t("annotations.active")}
</span>
</div>
Expand All @@ -160,21 +160,21 @@ export function AnnotationSettingsPanel({
<TabsList className="mb-4 bg-foreground/5 border border-foreground/5 p-1 w-full grid grid-cols-4 h-auto rounded-xl">
<TabsTrigger
value="text"
className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-muted-foreground py-2 rounded-lg transition-all gap-2"
className="data-[state=active]:bg-primary data-[state=active]:text-white text-muted-foreground py-2 rounded-lg transition-all gap-2"
>
<Type className="w-4 h-4" />
{t("annotations.text")}
</TabsTrigger>
<TabsTrigger
value="image"
className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-muted-foreground py-2 rounded-lg transition-all gap-2"
className="data-[state=active]:bg-primary data-[state=active]:text-white text-muted-foreground py-2 rounded-lg transition-all gap-2"
>
<ImageIcon className="w-4 h-4" />
{t("annotations.image")}
</TabsTrigger>
<TabsTrigger
value="figure"
className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-muted-foreground py-2 rounded-lg transition-all gap-2"
className="data-[state=active]:bg-primary data-[state=active]:text-white text-muted-foreground py-2 rounded-lg transition-all gap-2"
>
<svg
className="w-4 h-4"
Expand All @@ -193,7 +193,7 @@ export function AnnotationSettingsPanel({
</TabsTrigger>
<TabsTrigger
value="blur"
className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-muted-foreground py-2 rounded-lg transition-all gap-2"
className="data-[state=active]:bg-primary data-[state=active]:text-white text-muted-foreground py-2 rounded-lg transition-all gap-2"
>
<SquareDashed className="w-4 h-4" />
{t("annotations.blur")}
Expand All @@ -211,7 +211,7 @@ export function AnnotationSettingsPanel({
onChange={(e) => onContentChange(e.target.value)}
placeholder={t("annotations.textPlaceholder")}
rows={5}
className="w-full px-3 py-2 bg-foreground/5 border border-foreground/10 rounded-lg text-foreground text-sm placeholder:text-muted-foreground/70 focus:outline-none focus:ring-2 focus:ring-[#2563EB] focus:border-transparent resize-none"
className="w-full px-3 py-2 bg-foreground/5 border border-foreground/10 rounded-lg text-foreground text-sm placeholder:text-muted-foreground/70 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
/>
</div>

Expand Down Expand Up @@ -321,7 +321,7 @@ export function AnnotationSettingsPanel({
: "bold",
})
}
className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
className="h-8 w-8 data-[state=on]:bg-primary data-[state=on]:text-white text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
>
<Bold className="h-4 w-4" />
</ToggleGroupItem>
Expand All @@ -341,7 +341,7 @@ export function AnnotationSettingsPanel({
: "italic",
})
}
className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
className="h-8 w-8 data-[state=on]:bg-primary data-[state=on]:text-white text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
>
<Italic className="h-4 w-4" />
</ToggleGroupItem>
Expand All @@ -362,7 +362,7 @@ export function AnnotationSettingsPanel({
: "underline",
})
}
className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
className="h-8 w-8 data-[state=on]:bg-primary data-[state=on]:text-white text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
>
<Underline className="h-4 w-4" />
</ToggleGroupItem>
Expand All @@ -377,23 +377,23 @@ export function AnnotationSettingsPanel({
value="left"
aria-label={t("annotations.alignLeft")}
onClick={() => onStyleChange({ textAlign: "left" })}
className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
className="h-8 w-8 data-[state=on]:bg-primary data-[state=on]:text-white text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
>
<AlignLeft className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem
value="center"
aria-label={t("annotations.alignCenter")}
onClick={() => onStyleChange({ textAlign: "center" })}
className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
className="h-8 w-8 data-[state=on]:bg-primary data-[state=on]:text-white text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
>
<AlignCenter className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem
value="right"
aria-label={t("annotations.alignRight")}
onClick={() => onStyleChange({ textAlign: "right" })}
className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
className="h-8 w-8 data-[state=on]:bg-primary data-[state=on]:text-white text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
>
<AlignRight className="h-4 w-4" />
</ToggleGroupItem>
Expand Down Expand Up @@ -517,7 +517,7 @@ export function AnnotationSettingsPanel({
<Button
onClick={() => fileInputRef.current?.click()}
variant="outline"
className="w-full gap-2 bg-foreground/5 text-foreground border-foreground/10 hover:bg-[#2563EB] hover:text-white hover:border-[#2563EB] transition-all py-8"
className="w-full gap-2 bg-foreground/5 text-foreground border-foreground/10 hover:bg-primary hover:text-white hover:border-primary transition-all py-8"
>
<Upload className="w-5 h-5" />
{t("annotations.uploadImage")}
Expand Down Expand Up @@ -576,7 +576,7 @@ export function AnnotationSettingsPanel({
"h-16 rounded-lg border flex items-center justify-center transition-all p-2",
annotation.figureData?.arrowDirection ===
direction
? "bg-[#2563EB] border-[#2563EB]"
? "bg-primary border-primary"
: "bg-foreground/5 border-foreground/10 hover:bg-foreground/10 hover:border-foreground/20",
)}
>
Expand Down Expand Up @@ -696,7 +696,7 @@ export function AnnotationSettingsPanel({
"w-8 h-8 rounded-full border-2 flex items-center justify-center transition-all",
!annotation.blurColor ||
annotation.blurColor === "transparent"
? "border-[#2563EB] scale-110"
? "border-primary scale-110"
: "border-transparent hover:border-foreground/20",
)}
title={t("annotations.none", "None")}
Expand All @@ -710,7 +710,7 @@ export function AnnotationSettingsPanel({
className={cn(
"w-8 h-8 rounded-full border-2 transition-all bg-black",
annotation.blurColor === "#000000"
? "border-[#2563EB] scale-110"
? "border-primary scale-110"
: "border-transparent hover:border-foreground/20",
)}
title="Black"
Expand All @@ -720,7 +720,7 @@ export function AnnotationSettingsPanel({
className={cn(
"w-8 h-8 rounded-full border-2 transition-all bg-white",
annotation.blurColor === "#FFFFFF"
? "border-[#2563EB] scale-110"
? "border-primary scale-110"
: "border-transparent hover:border-foreground/20",
)}
title="White"
Expand All @@ -738,7 +738,7 @@ export function AnnotationSettingsPanel({
"transparent",
"",
].includes(annotation.blurColor)
? "border-[#2563EB] scale-110"
? "border-primary scale-110"
: "border-transparent hover:border-foreground/20",
)}
style={{
Expand Down
6 changes: 3 additions & 3 deletions src/components/video-editor/CaptionListPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ function CaptionEditor({
event.currentTarget.blur();
}
}}
className="min-h-[4.5rem] w-full resize-none rounded-md border border-foreground/10 bg-background/60 px-2 py-1.5 text-sm text-foreground outline-none focus-visible:border-[#2563EB] focus-visible:ring-1 focus-visible:ring-[#2563EB]"
className="min-h-[4.5rem] w-full resize-none rounded-md border border-foreground/10 bg-background/60 px-2 py-1.5 text-sm text-foreground outline-none focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-primary"
/>
</label>

Expand All @@ -149,7 +149,7 @@ function CaptionEditor({
event.currentTarget.blur();
}
}}
className="w-full rounded-md border border-foreground/10 bg-background/60 px-2 py-1 font-mono text-xs tabular-nums text-foreground outline-none focus-visible:border-[#2563EB] focus-visible:ring-1 focus-visible:ring-[#2563EB]"
className="w-full rounded-md border border-foreground/10 bg-background/60 px-2 py-1 font-mono text-xs tabular-nums text-foreground outline-none focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-primary"
/>
</label>
<label className="flex flex-1 flex-col gap-1">
Expand All @@ -165,7 +165,7 @@ function CaptionEditor({
event.currentTarget.blur();
}
}}
className="w-full rounded-md border border-foreground/10 bg-background/60 px-2 py-1 font-mono text-xs tabular-nums text-foreground outline-none focus-visible:border-[#2563EB] focus-visible:ring-1 focus-visible:ring-[#2563EB]"
className="w-full rounded-md border border-foreground/10 bg-background/60 px-2 py-1 font-mono text-xs tabular-nums text-foreground outline-none focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-primary"
/>
</label>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/video-editor/CropControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ export function CropControl({ videoElement, cropRegion, onCropChange }: CropCont

<div
className={cn(
"absolute h-[3px] cursor-ns-resize z-20 pointer-events-auto bg-[#2563EB]",
"absolute h-[3px] cursor-ns-resize z-20 pointer-events-auto bg-primary",
)}
style={{
left: `${cropPixelX}%`,
Expand All @@ -227,7 +227,7 @@ export function CropControl({ videoElement, cropRegion, onCropChange }: CropCont

<div
className={cn(
"absolute h-[3px] cursor-ns-resize z-20 pointer-events-auto bg-[#2563EB]",
"absolute h-[3px] cursor-ns-resize z-20 pointer-events-auto bg-primary",
)}
style={{
left: `${cropPixelX}%`,
Expand All @@ -242,7 +242,7 @@ export function CropControl({ videoElement, cropRegion, onCropChange }: CropCont

<div
className={cn(
"absolute w-[3px] cursor-ew-resize z-20 pointer-events-auto bg-[#2563EB]",
"absolute w-[3px] cursor-ew-resize z-20 pointer-events-auto bg-primary",
)}
style={{
left: `${cropPixelX}%`,
Expand All @@ -257,7 +257,7 @@ export function CropControl({ videoElement, cropRegion, onCropChange }: CropCont

<div
className={cn(
"absolute w-[3px] cursor-ew-resize z-20 pointer-events-auto bg-[#2563EB]",
"absolute w-[3px] cursor-ew-resize z-20 pointer-events-auto bg-primary",
)}
style={{
left: `${cropPixelX + cropPixelWidth}%`,
Expand Down
16 changes: 8 additions & 8 deletions src/components/video-editor/ExportSettingsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,14 +105,14 @@ export function ExportSettingsMenu({
className={cn(
"relative flex-1 overflow-hidden rounded-xl border py-2 text-xs font-medium transition-colors",
isActive
? "border-[#2563EB]/50 text-[#2563EB] dark:text-white"
? "border-primary/50 text-primary dark:text-white"
: "border-foreground/10 bg-foreground/5 text-muted-foreground hover:bg-foreground/10 hover:text-foreground",
)}
>
{isActive ? (
<motion.span
layoutId="header-export-format-pill"
className="absolute inset-0 rounded-xl bg-[#2563EB]/10"
className="absolute inset-0 rounded-xl bg-primary/10"
transition={{ type: "spring", stiffness: 380, damping: 32 }}
/>
) : null}
Expand Down Expand Up @@ -280,13 +280,13 @@ export function ExportSettingsMenu({
})}
</div>
{!isLegacyModel && nvidiaCudaExportAvailable ? (
<div className="mb-3 flex min-h-12 items-center justify-between gap-3 rounded-lg border border-[#2563EB]/20 bg-[#2563EB]/5 px-3 py-2">
<div className="mb-3 flex min-h-12 items-center justify-between gap-3 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2">
<div className="min-w-0">
<div className="flex items-center gap-1.5">
<span className="text-[11px] font-semibold text-foreground">
{tSettings("export.nvidiaCuda.title", "NVIDIA CUDA")}
</span>
<span className="rounded bg-[#2563EB]/10 px-1.5 py-0.5 text-[9px] font-semibold uppercase text-[#2563EB]">
<span className="rounded bg-primary/10 px-1.5 py-0.5 text-[9px] font-semibold uppercase text-primary">
{tSettings("export.nvidiaCuda.badge", "Experimental")}
</span>
</div>
Expand All @@ -304,7 +304,7 @@ export function ExportSettingsMenu({
"export.nvidiaCuda.toggle",
"Enable experimental NVIDIA CUDA export",
)}
className="shrink-0 scale-75 data-[state=checked]:bg-[#2563EB]"
className="shrink-0 scale-75 data-[state=checked]:bg-primary"
/>
</div>
) : null}
Expand All @@ -331,7 +331,7 @@ export function ExportSettingsMenu({
"export.captionSidecar.toggle",
"Export captions sidecar files",
)}
className="shrink-0 scale-75 data-[state=checked]:bg-[#2563EB]"
className="shrink-0 scale-75 data-[state=checked]:bg-primary"
/>
</div>
) : null}
Expand Down Expand Up @@ -442,7 +442,7 @@ export function ExportSettingsMenu({
<Switch
checked={gifLoop}
onCheckedChange={onGifLoopChange}
className="scale-75 data-[state=checked]:bg-[#2563EB]"
className="scale-75 data-[state=checked]:bg-primary"
/>
</div>
</div>
Expand All @@ -453,7 +453,7 @@ export function ExportSettingsMenu({
type="button"
size="lg"
onClick={onExport}
className="h-11 w-full gap-2 rounded-lg bg-[#2563EB] text-sm font-semibold text-white transition-colors duration-200 hover:bg-[#2563EB]/90"
className="h-11 w-full gap-2 rounded-lg bg-primary text-sm font-semibold text-white transition-colors duration-200 hover:bg-primary/90"
>
<Download className="h-4 w-4" />
{tSettings("export.exportVideo", undefined, {
Expand Down
4 changes: 2 additions & 2 deletions src/components/video-editor/ExtensionManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { PuzzlePiece } from "@phosphor-icons/react";

export default function ExtensionManager() {
return (
<div className="flex h-full w-[332px] min-w-[280px] max-w-[332px] flex-[2] flex-col overflow-hidden rounded-2xl border border-foreground/10 bg-editor-panel shadow-xl">
<div className="flex h-12 shrink-0 items-center border-b border-foreground/10 px-4">
<div className="flex-[2] w-[332px] min-w-[280px] max-w-[332px] bg-editor-panel rounded-xl flex flex-col shadow-xl h-full overflow-hidden">
<div className="flex h-12 shrink-0 items-center px-4">
<h2 className="text-sm font-semibold text-foreground">Extensions</h2>
</div>

Expand Down
Loading