This commit is contained in:
Maze Winther
2025-07-26 11:35:52 +02:00
parent c51e82db9b
commit a4f1a02cea
2 changed files with 17 additions and 15 deletions
+4 -4
View File
@@ -23,7 +23,7 @@ export function EditorHeader() {
// TODO: Implement export functionality // TODO: Implement export functionality
// NOTE: This is already being worked on // NOTE: This is already being worked on
console.log("Export project"); console.log("Export project");
window.open('https://youtube.com/watch?v=dQw4w9WgXcQ', '_blank'); window.open("https://youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
}; };
const handleNameClick = () => { const handleNameClick = () => {
@@ -57,11 +57,11 @@ export function EditorHeader() {
> >
<ChevronLeft className="h-4 w-4" /> <ChevronLeft className="h-4 w-4" />
</Link> </Link>
<div className="w-[14rem] h-9 flex items-center"> <div className="w-40 xl:w-60 h-9 flex items-center">
{isEditing ? ( {isEditing ? (
<Input <Input
ref={inputRef} ref={inputRef}
className="text-sm font-medium px-2 py-1 h-9 truncate" className="text-sm font-medium w-full px-2 py-1 h-9 truncate"
value={newName} value={newName}
onChange={(e) => setNewName(e.target.value)} onChange={(e) => setNewName(e.target.value)}
onBlur={handleNameSave} onBlur={handleNameSave}
@@ -80,7 +80,7 @@ export function EditorHeader() {
onClick={handleNameClick} onClick={handleNameClick}
onKeyDown={(e) => e.key === "Enter" && handleNameClick()} onKeyDown={(e) => e.key === "Enter" && handleNameClick()}
> >
<div className="truncate text-ellipsis overflow-clip w-40"> <div className="truncate text-ellipsis overflow-clip max-w-40 xl:max-w-60">
{activeProject?.name} {activeProject?.name}
</div> </div>
</span> </span>
@@ -1,14 +1,12 @@
"use client"; "use client";
import { useProjectStore } from "@/stores/project-store"; import { FPS_PRESETS } from "@/constants/timeline-constants";
import { useAspectRatio } from "@/hooks/use-aspect-ratio"; import { useAspectRatio } from "@/hooks/use-aspect-ratio";
import { useMediaStore } from "@/stores/media-store";
import { useProjectStore } from "@/stores/project-store";
import { useTimelineStore } from "@/stores/timeline-store";
import { Label } from "../../ui/label"; import { Label } from "../../ui/label";
import { ScrollArea } from "../../ui/scroll-area"; import { ScrollArea } from "../../ui/scroll-area";
import { useTimelineStore } from "@/stores/timeline-store";
import { useMediaStore } from "@/stores/media-store";
import { AudioProperties } from "./audio-properties";
import { MediaProperties } from "./media-properties";
import { TextProperties } from "./text-properties";
import { import {
Select, Select,
SelectContent, SelectContent,
@@ -16,7 +14,9 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "../../ui/select"; } from "../../ui/select";
import { FPS_PRESETS } from "@/constants/timeline-constants"; import { AudioProperties } from "./audio-properties";
import { MediaProperties } from "./media-properties";
import { TextProperties } from "./text-properties";
export function PropertiesPanel() { export function PropertiesPanel() {
const { activeProject, updateProjectFps } = useProjectStore(); const { activeProject, updateProjectFps } = useProjectStore();
@@ -83,7 +83,7 @@ export function PropertiesPanel() {
); );
if (mediaItem?.type === "audio") { if (mediaItem?.type === "audio") {
return <AudioProperties element={element} />; return <AudioProperties key={elementId} element={element} />;
} }
return ( return (
@@ -101,9 +101,11 @@ export function PropertiesPanel() {
function PropertyItem({ label, value }: { label: string; value: string }) { function PropertyItem({ label, value }: { label: string; value: string }) {
return ( return (
<div className="flex flex-col gap-1"> <div className="grid justify-between grid-cols-6">
<Label className="text-xs text-muted-foreground">{label}</Label> <Label className="text-xs text-muted-foreground col-span-2">
<span className="text-xs break-words" title={value}> {label}
</Label>
<span className="text-xs text-right col-span-4 truncate" title={value}>
{value} {value}
</span> </span>
</div> </div>