Skip to content

Commit

Permalink
much improved manual zoom
Browse files Browse the repository at this point in the history
  • Loading branch information
@Brendonovich
Brendonovich committed Dec 17, 2024
1 parent 1e011eb commit 753316a
Show file tree
Hide file tree
Showing 7 changed files with 423 additions and 84 deletions.
2 changes: 1 addition & 1 deletion apps/desktop/src-tauri/src/recording.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ use cap_project::{
Content, ProjectConfiguration, TimelineConfiguration, TimelineSegment, ZoomSegment,
};
use cap_recording::CompletedRecording;
use cap_rendering::{ProjectRecordings, ZOOM_DURATION};
use cap_rendering::ProjectRecordings;
use clipboard_rs::{Clipboard, ClipboardContext};
use tauri::{AppHandle, Manager};
use tauri_specta::Event;
Expand Down
12 changes: 10 additions & 2 deletions apps/desktop/src/routes/editor/ConfigSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -447,7 +447,11 @@ export function ConfigSidebar() {
</div>
</div>
</Field>
<Field name="Size" icon={<IconCapEnlarge />}>
<Field
name="Size"
icon={<IconCapEnlarge />}
value={`${project.camera.size ?? 30}%`}
>
<Slider
value={[project.camera.size ?? 30]}
onChange={(v) => setProject("camera", "size", v[0])}
Expand All @@ -457,7 +461,11 @@ export function ConfigSidebar() {
/>
</Field>
{window.FLAGS.zoom && (
<Field name="Size During Zoom" icon={<IconCapEnlarge />}>
<Field
name="Size During Zoom"
icon={<IconCapEnlarge />}
value={`${project.camera.zoom_size ?? 20}%`}
>
<Slider
value={[project.camera.zoom_size ?? 20]}
onChange={(v) => setProject("camera", "zoom_size", v[0])}
Expand Down
59 changes: 33 additions & 26 deletions apps/desktop/src/routes/editor/Timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,10 @@ import {
ComponentProps,
For,
Show,
createContext,
batch,
createRoot,
createSignal,
onMount,
useContext,
} from "solid-js";
import { createEventListenerMap } from "@solid-primitives/event-listener";
import { cx } from "cva";
Expand Down Expand Up @@ -459,6 +457,9 @@ export function Timeline() {
return `${amount.toFixed(1)}x`;
};

const zoomSegments = () =>
project.timeline!.zoomSegments!;

return (
<SegmentRoot
class="border-red-300 group"
Expand All @@ -476,17 +477,21 @@ export function Timeline() {
onMouseDown={(downEvent) => {
const start = segment.start;

const maxDuration =
editorInstance.recordingDuration -
segments().reduce(
(acc, segment, segmentI) =>
segmentI === i()
? acc
: acc +
(segment.end - segment.start) /
segment.timescale,
0
);
let minValue = 0;

for (
let i = zoomSegments().length - 1;
i >= 0;
i--
) {
const segment = zoomSegments()[i]!;
if (segment.end <= start) {
minValue = segment.end;
break;
}
}

let maxValue = segment.end - 1;

function update(event: MouseEvent) {
const { width } = timelineBounds;
Expand All @@ -503,12 +508,8 @@ export function Timeline() {
i(),
"start",
Math.min(
Math.max(
newStart,
// Math.max(newStart, 0),
segment.end - maxDuration
),
segment.end - 1
maxValue,
Math.max(minValue, newStart)
)
);
}
Expand Down Expand Up @@ -554,6 +555,18 @@ export function Timeline() {
onMouseDown={(downEvent) => {
const end = segment.end;

const minValue = segment.start + 1;

let maxValue = duration();

for (let i = 0; i > zoomSegments().length; i++) {
const segment = zoomSegments()[i]!;
if (segment.start > end) {
maxValue = segment.end;
break;
}
}

const maxDuration =
editorInstance.recordingDuration -
segments().reduce(
Expand All @@ -580,13 +593,7 @@ export function Timeline() {
"zoomSegments",
i(),
"end",
Math.max(
Math.min(
newEnd,
segment.start + maxDuration
),
segment.start + 1
)
Math.min(maxValue, Math.max(minValue, newEnd))
);
}

Expand Down
4 changes: 3 additions & 1 deletion apps/desktop/src/routes/editor/ui.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,15 @@ import {
import { useEditorContext } from "./context";

export function Field(
props: ParentProps<{ name: string; icon?: JSX.Element }>
props: ParentProps<{ name: string; icon?: JSX.Element; value?: string }>
) {
return (
<div class="flex flex-col gap-[0.75rem]">
<span class="flex flex-row items-center gap-[0.375rem] text-gray-500 text-[0.875rem]">
{props.icon}
{props.name}

{props.value && <div class="ml-auto">{props.value}</div>}
</span>
{props.children}
</div>
Expand Down
2 changes: 0 additions & 2 deletions apps/desktop/src/utils/socket.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,6 @@ export function createImageDataWS(
(strideArr[3] << 24)) /
4;

console.log({ width, height, stride });

const imageData = new ImageData(
clamped.slice(0, clamped.length - 12),
stride,
Expand Down
2 changes: 1 addition & 1 deletion crates/flags/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@ pub const FLAGS: Flags = Flags {
record_mouse: false, // cfg!(debug_assertions),
split: false, // cfg!(debug_assertions),
pause_resume: false, // cfg!(debug_assertions),
zoom: false, // cfg!(debug_assertions),
zoom: false, // false, // false, // cfg!(debug_assertions),
custom_s3: true,
};
Loading

1 comment on commit 753316a

@vercel
Copy link

@vercel vercel bot commented on 753316a Dec 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

cap-web – ./

www.cap.so
cap-web-mc-ilroy.vercel.app
cap-web-nu.vercel.app
cap-web-git-main-mc-ilroy.vercel.app
cap.so

Please sign in to comment.