Merge pull request #1726 from MinitJain/fix/captions-trim-overflow

fix(editor): clamp captions and hide keyboard segments past trim boundary

Author: richiemcilroy

apps/desktop/src-tauri/src/permissions.rs

@@ -211,6 +211,14 @@ pub(crate) fn schedule_macos_dock_visibility_sync(app: &tauri::AppHandle) {
 
 #[cfg(target_os = "macos")]
 fn macos_permission_status(permission: &OSPermission, initial_check: bool) -> OSPermissionStatus {
+    #[cfg(debug_assertions)]
+    if matches!(
+        permission,
+        OSPermission::ScreenRecording | OSPermission::Accessibility
+    ) {
+        return OSPermissionStatus::Granted;
+    }
+
     match permission {
         OSPermission::ScreenRecording => {
             let granted = scap_screencapturekit::has_permission();

apps/desktop/src/routes/editor/Timeline/CaptionsTrack.tsx

@@ -34,7 +34,11 @@ export function CaptionsTrack(props: {
 	const minDuration = () =>
 		Math.max(MIN_SEGMENT_SECS, secsPerPixel() * MIN_SEGMENT_PIXELS);
 
-	const captionSegments = () => project.timeline?.captionSegments ?? [];
+	const captionSegments = createMemo(() =>
+		(project.timeline?.captionSegments ?? []).filter(
+			(s) => s.start < totalDuration(),
+		),
+	);
 	const selectedCaptionIndices = createMemo(() => {
 		const selection = editorState.timeline.selection;
 		if (!selection || selection.type !== "caption") return null;
@@ -157,7 +161,8 @@ export function CaptionsTrack(props: {
 						return indices.has(i());
 					});
 
-					const segmentWidth = () => segment.end - segment.start;
+					const segmentWidth = () =>
+						Math.min(segment.end, totalDuration()) - segment.start;
 
 					return (
 						<SegmentRoot
@@ -169,7 +174,10 @@ export function CaptionsTrack(props: {
 								isSelected() ? "border-green-7" : "border-transparent",
 							)}
 							innerClass="ring-green-6"
-							segment={segment}
+							segment={{
+								start: segment.start,
+								end: Math.min(segment.end, totalDuration()),
+							}}
 							onMouseDown={(e) => {
 								e.stopPropagation();
 								if (editorState.timeline.interactMode === "split") {

apps/desktop/src/routes/editor/Timeline/KeyboardTrack.tsx

@@ -32,7 +32,11 @@ export function KeyboardTrack(props: {
 	const minDuration = () =>
 		Math.max(MIN_SEGMENT_SECS, secsPerPixel() * MIN_SEGMENT_PIXELS);
 
-	const keyboardSegments = () => project.timeline?.keyboardSegments ?? [];
+	const keyboardSegments = createMemo(() =>
+		(project.timeline?.keyboardSegments ?? []).filter(
+			(s) => s.start < totalDuration(),
+		),
+	);
 	const selectedKeyboardIndices = createMemo(() => {
 		const selection = editorState.timeline.selection;
 		if (!selection || selection.type !== "keyboard") return null;
@@ -149,7 +153,8 @@ export function KeyboardTrack(props: {
 						return indices.has(i());
 					});
 
-					const segmentWidth = () => segment.end - segment.start;
+					const segmentWidth = () =>
+						Math.min(segment.end, totalDuration()) - segment.start;
 
 					return (
 						<SegmentRoot
@@ -161,7 +166,10 @@ export function KeyboardTrack(props: {
 								isSelected() ? "border-sky-7" : "border-transparent",
 							)}
 							innerClass="ring-sky-6"
-							segment={segment}
+							segment={{
+								start: segment.start,
+								end: Math.min(segment.end, totalDuration()),
+							}}
 							onMouseDown={(e) => {
 								e.stopPropagation();
 								if (editorState.timeline.interactMode === "split") {