@@ -51,7 +51,7 @@ export function PlaybackControls({ project, playerRef }: PlaybackControlsProps)
size="sm"
variant="default"
onClick={togglePlay}
- className="w-12 h-12 rounded-full"
+ className="w-12 h-12 rounded-full bg-blue-600 hover:bg-blue-700"
>
{isPlaying ? (
@@ -65,20 +65,20 @@ export function PlaybackControls({ project, playerRef }: PlaybackControlsProps)
variant="ghost"
onClick={() => skipForward(30)}
title="Go forward 1 second"
- className="h-10 w-10"
+ className="h-10 w-10 text-white hover:bg-slate-800"
>
- {formatTime(currentFrame)}
- /
- {formatTime(totalFrames)}
+ {formatTime(currentFrame)}
+ /
+ {formatTime(totalFrames)}
-
- Frame:
{currentFrame} / {totalFrames}
+
+ Frame: {currentFrame} / {totalFrames}
);
diff --git a/MyApp.Client/components/editor/canvas/preview-canvas.tsx b/MyApp.Client/components/editor/canvas/preview-canvas.tsx
index 7a10162..2218c3e 100644
--- a/MyApp.Client/components/editor/canvas/preview-canvas.tsx
+++ b/MyApp.Client/components/editor/canvas/preview-canvas.tsx
@@ -1,6 +1,6 @@
'use client';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
import { Player, PlayerRef } from '@remotion/player';
import { Project } from '@/lib/types/project';
import { useAssetStore } from '@/lib/stores/asset-store';
@@ -19,17 +19,37 @@ export function PreviewCanvas({ project }: PreviewCanvasProps) {
const { isPlaying, pause } = usePlaybackStore();
const { getTimeline, setCurrentFrame } = useTimelineStore();
const timeline = getTimeline();
+ const [isPlayerReady, setIsPlayerReady] = useState(false);
+
+ // Wait for player to be ready
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ if (playerRef.current) {
+ setIsPlayerReady(true);
+ }
+ }, 100);
+ return () => clearTimeout(timer);
+ }, []);
// Sync player playback state
useEffect(() => {
- if (!playerRef.current) return;
+ if (!playerRef.current || !isPlayerReady) {
+ console.log('Player not ready yet');
+ return;
+ }
- if (isPlaying) {
- playerRef.current.play();
- } else {
- playerRef.current.pause();
+ try {
+ if (isPlaying) {
+ console.log('Starting playback');
+ playerRef.current.play();
+ } else {
+ console.log('Pausing playback');
+ playerRef.current.pause();
+ }
+ } catch (error) {
+ console.error('Error controlling playback:', error);
}
- }, [isPlaying]);
+ }, [isPlaying, isPlayerReady]);
// Handle frame updates from player
const handleFrameUpdate = useCallback(
@@ -49,7 +69,7 @@ export function PreviewCanvas({ project }: PreviewCanvasProps) {
if (!timeline) return null;
return (
-
+
diff --git a/MyApp.Client/components/editor/editor-layout.tsx b/MyApp.Client/components/editor/editor-layout.tsx
index 209f629..0d1f8fd 100644
--- a/MyApp.Client/components/editor/editor-layout.tsx
+++ b/MyApp.Client/components/editor/editor-layout.tsx
@@ -12,12 +12,12 @@ interface EditorLayoutProps {
export function EditorLayout({ project }: EditorLayoutProps) {
return (
-
+
{/* Header */}
-
-
{project.name}
+
+
{project.name}
-
+
{project.settings.width}x{project.settings.height} • {project.settings.fps}fps
@@ -26,7 +26,7 @@ export function EditorLayout({ project }: EditorLayoutProps) {
{/* Main Content */}
{/* Left Sidebar - Asset Library */}
-
+
@@ -36,10 +36,10 @@ export function EditorLayout({ project }: EditorLayoutProps) {
-
+
{/* Timeline */}
-
diff --git a/MyApp.Client/components/editor/timeline/timeline-container.tsx b/MyApp.Client/components/editor/timeline/timeline-container.tsx
index f9bafc0..a7054f5 100644
--- a/MyApp.Client/components/editor/timeline/timeline-container.tsx
+++ b/MyApp.Client/components/editor/timeline/timeline-container.tsx
@@ -50,18 +50,18 @@ export function TimelineContainer({ project }: TimelineContainerProps) {
};
return (
-
+
{/* Toolbar */}
-
-