summaryrefslogtreecommitdiff
path: root/apps/web/src/components/editor
diff options
context:
space:
mode:
authorHyteq <DerpsDer.es@gmail.com>2025-06-24 07:55:02 +0300
committerHyteq <DerpsDer.es@gmail.com>2025-06-24 07:55:02 +0300
commitad0476e78f6e5afa93a14cba563c229a5a198b62 (patch)
treee8bce314b6c2fbdee5358487354afe0353b8dff2 /apps/web/src/components/editor
parentf959ba87e20aaae42bc270edc127ae89b97241cb (diff)
parent326da414d21026bad635cdaca05bf534ecf545cf (diff)
downloadopencut-ad0476e78f6e5afa93a14cba563c229a5a198b62.tar.gz
fix: merge conflicts & updated more URLs following our new path
Diffstat (limited to 'apps/web/src/components/editor')
-rw-r--r--apps/web/src/components/editor/properties-panel.tsx1
-rw-r--r--apps/web/src/components/editor/timeline.tsx24
2 files changed, 21 insertions, 4 deletions
diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx
index 2b211c21..c784dab8 100644
--- a/apps/web/src/components/editor/properties-panel.tsx
+++ b/apps/web/src/components/editor/properties-panel.tsx
@@ -38,7 +38,6 @@ export function PropertiesPanel() {
? mediaItems.find((item) => item.id === firstVideoClip.mediaId)
: null;
- // Get the first image clip for preview (simplified)
const firstImageClip = tracks
.flatMap((track) => track.clips)
.find((clip) => {
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 675b398c..9af7a204 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -557,8 +557,26 @@ export function Timeline() {
{/* Playhead in ruler */}
<div
- className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-none z-10"
+ className="absolute top-0 bottom-0 w-0.5 bg-red-500 cursor-ew-resize z-1000" // Remove pointer-events-none to allow dragging
style={{ left: `${currentTime * 50 * zoomLevel}px` }}
+ onMouseDown={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ const handleMouseMove = (e: MouseEvent) => {
+ const timeline = timelineRef.current; // Get timeline element ref to track the position
+ if (!timeline) return; // If no timeline element, exit
+ const rect = timeline.getBoundingClientRect(); // Get the bounding rect of the timeline element
+ const mouseX = Math.max(0, e.clientX - rect.left); // Calculate the mouse position relative to the timeline element
+ const newTime = mouseX / (50 * zoomLevel); // Calculate the time based on the mouse position
+ seek(newTime); // Set the current time
+ };
+ const handleMouseUp = () => {
+ window.removeEventListener("mousemove", handleMouseMove); // Remove the mousemove event listener
+ window.removeEventListener("mouseup", handleMouseUp); // Remove the mouseup event listener
+ };
+ window.addEventListener("mousemove", handleMouseMove); // Add the mousemove event listener
+ window.addEventListener("mouseup", handleMouseUp); // Add the mouseup event listener
+ }}
>
<div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-red-500 rounded-full border-2 border-white shadow-sm" />
</div>
@@ -670,7 +688,7 @@ export function Timeline() {
{/* Playhead for tracks area */}
<div
- className="absolute top-0 w-0.5 bg-red-500 pointer-events-none z-20"
+ className="absolute top-0 w-0.5 bg-red-500 cursor-ew-resize z-20"
style={{
left: `${currentTime * 50 * zoomLevel}px`,
height: `${tracks.length * 60}px`,
@@ -1510,4 +1528,4 @@ function TimelineTrackContent({
</div>
</div>
);
-} \ No newline at end of file
+}