huanld/openscreen
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases 2 Wiki Activity

Merge remote-tracking branch 'origin/main' into feat/zoom-hold-preview

Browse Source 
# Conflicts:
#	src/components/video-editor/VideoPlayback.tsx
This commit is contained in:
Siddharth
2026-05-22 20:15:00 -07:00
parent 259bfa9097 b6b37e3718
commit 85d0dea9fc
18 changed files with 564 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
electron/electron-env.d.ts
Vendored
+8
View File
@@ -117,6 +117,14 @@ interface Window {
discarded?: boolean;
error?: string;
}>;
pauseNativeWindowsRecording: () => Promise<{
success: boolean;
error?: string;
}>;
resumeNativeWindowsRecording: () => Promise<{
success: boolean;
error?: string;
}>;
startNativeMacRecording: (
request: import("../src/lib/nativeMacRecording").NativeMacRecordingRequest,
) => Promise<import("../src/lib/nativeMacRecording").NativeMacRecordingStartResult>;
electron/ipc/handlers.ts
+75
View File
@@ -384,6 +384,10 @@ let nativeWindowsCaptureWebcamTargetPath: string | null = null;
let nativeWindowsCaptureRecordingId: number | null = null;
let nativeWindowsCursorOffsetMs = 0;
let nativeWindowsCursorCaptureMode: CursorCaptureMode = "editable-overlay";
let nativeWindowsCursorRecordingStartMs = 0;
let nativeWindowsPauseStartedAtMs: number | null = null;
let nativeWindowsPauseRanges: Array<{ startMs: number; endMs: number }> = [];
let nativeWindowsIsPaused = false;
const NATIVE_WINDOWS_CAPTURE_STOP_TIMEOUT_MS = 15_000;
let nativeMacCaptureProcess: ChildProcessWithoutNullStreams | null = null;
let nativeMacCaptureOutput = "";
@@ -873,6 +877,18 @@ function completeNativeMacCursorPauseRange(endMs = Date.now()) {
nativeMacPauseStartedAtMs = null;
}
function completeNativeWindowsCursorPauseRange(endMs = Date.now()) {
if (nativeWindowsPauseStartedAtMs === null || nativeWindowsCursorRecordingStartMs <= 0) {
return;
}
nativeWindowsPauseRanges.push({
startMs: Math.max(0, nativeWindowsPauseStartedAtMs - nativeWindowsCursorRecordingStartMs),
endMs: Math.max(0, endMs - nativeWindowsCursorRecordingStartMs),
});
nativeWindowsPauseStartedAtMs = null;
}
function waitForNativeWindowsCaptureStart(proc: ChildProcessWithoutNullStreams) {
return new Promise<void>((resolve, reject) => {
const timer = setTimeout(() => {
@@ -1583,9 +1599,14 @@ export function registerIpcHandlers(
nativeWindowsCaptureRecordingId = recordingId;
nativeWindowsCursorOffsetMs = 0;
nativeWindowsCursorCaptureMode = cursorCaptureMode;
nativeWindowsCursorRecordingStartMs = 0;
nativeWindowsPauseStartedAtMs = null;
nativeWindowsPauseRanges = [];
nativeWindowsIsPaused = false;
const cursorStartTimeMs = Date.now();
if (cursorCaptureMode === "editable-overlay") {
nativeWindowsCursorRecordingStartMs = cursorStartTimeMs;
await startCursorRecording(cursorStartTimeMs);
console.info("[native-wgc] cursor sampler ready", {
cursorStartTimeMs,
@@ -1635,6 +1656,10 @@ export function registerIpcHandlers(
nativeWindowsCaptureRecordingId = null;
nativeWindowsCursorOffsetMs = 0;
nativeWindowsCursorCaptureMode = "editable-overlay";
nativeWindowsCursorRecordingStartMs = 0;
nativeWindowsPauseStartedAtMs = null;
nativeWindowsPauseRanges = [];
nativeWindowsIsPaused = false;
await stopCursorRecording();
return { success: false, error: String(error) };
}
@@ -1836,6 +1861,50 @@ export function registerIpcHandlers(
}
});
ipcMain.handle("pause-native-windows-recording", async () => {
const proc = nativeWindowsCaptureProcess;
if (!proc) {
return { success: false, error: "Native Windows capture is not running." };
}
if (nativeWindowsIsPaused) {
return { success: true };
}
if (!proc.stdin.writable) {
return { success: false, error: "Native Windows capture command channel is closed." };
}
try {
proc.stdin.write("pause\n");
nativeWindowsIsPaused = true;
nativeWindowsPauseStartedAtMs = Date.now();
return { success: true };
} catch (error) {
return { success: false, error: error instanceof Error ? error.message : String(error) };
}
});
ipcMain.handle("resume-native-windows-recording", async () => {
const proc = nativeWindowsCaptureProcess;
if (!proc) {
return { success: false, error: "Native Windows capture is not running." };
}
if (!nativeWindowsIsPaused) {
return { success: true };
}
if (!proc.stdin.writable) {
return { success: false, error: "Native Windows capture command channel is closed." };
}
try {
proc.stdin.write("resume\n");
completeNativeWindowsCursorPauseRange();
nativeWindowsIsPaused = false;
return { success: true };
} catch (error) {
return { success: false, error: error instanceof Error ? error.message : String(error) };
}
});
ipcMain.handle("stop-native-windows-recording", async (_, discard?: boolean) => {
const proc = nativeWindowsCaptureProcess;
const preferredPath = nativeWindowsCaptureTargetPath;
@@ -1848,6 +1917,7 @@ export function registerIpcHandlers(
}
try {
completeNativeWindowsCursorPauseRange();
const stoppedPathPromise = waitForNativeWindowsCaptureStop(proc);
proc.stdin.write("stop\n");
const stoppedPath = await stoppedPathPromise;
@@ -1872,6 +1942,7 @@ export function registerIpcHandlers(
}
if (cursorCaptureMode === "editable-overlay") {
compactPendingCursorTelemetryPauseRanges(nativeWindowsPauseRanges);
shiftPendingCursorTelemetry(nativeWindowsCursorOffsetMs);
await writePendingCursorTelemetry(screenVideoPath);
}
@@ -1913,6 +1984,10 @@ export function registerIpcHandlers(
nativeWindowsCaptureRecordingId = null;
nativeWindowsCursorOffsetMs = 0;
nativeWindowsCursorCaptureMode = "editable-overlay";
nativeWindowsCursorRecordingStartMs = 0;
nativeWindowsPauseStartedAtMs = null;
nativeWindowsPauseRanges = [];
nativeWindowsIsPaused = false;
const source = selectedSource || { name: "Screen" };
if (onRecordingStateChange) {
onRecordingStateChange(false, source.name);
electron/native/wgc-capture/src/audio_sample_utils.cpp
+21 -2
View File
@@ -279,6 +279,7 @@ bool AudioMixer::start() {
stopRequested_ = false;
emittedFrames_ = 0;
timelineStarted_ = false;
paused_ = false;
thread_ = std::thread([this] {
mixLoop();
});
@@ -296,6 +297,18 @@ void AudioMixer::beginTimeline() {
cv_.notify_all();
}
void AudioMixer::setPaused(bool paused) {
{
std::scoped_lock lock(mutex_);
paused_ = paused;
if (paused_) {
systemQueue_.clear();
microphoneQueue_.clear();
}
}
cv_.notify_all();
}
void AudioMixer::stop() {
stopRequested_ = true;
cv_.notify_all();
@@ -311,6 +324,9 @@ void AudioMixer::pushSystem(const BYTE* data, DWORD byteCount) {
{
std::scoped_lock lock(mutex_);
if (paused_) {
return;
}
append(systemQueue_, data, byteCount, systemFormat_, 1.0);
}
cv_.notify_all();
@@ -323,6 +339,9 @@ void AudioMixer::pushMicrophone(const BYTE* data, DWORD byteCount) {
{
std::scoped_lock lock(mutex_);
if (paused_) {
return;
}
append(microphoneQueue_, data, byteCount, microphoneFormat_, microphoneGain_);
}
cv_.notify_all();
@@ -371,13 +390,13 @@ void AudioMixer::mixLoop() {
const bool hasMicrophone = !includeMicrophone_ || microphoneQueue_.size() >= chunkBytes;
const bool hasAnySource = !systemQueue_.empty() || !microphoneQueue_.empty();
return stopRequested_.load() ||
(timelineStarted_ && (hasSystem || hasMicrophone) && hasAnySource);
(timelineStarted_ && !paused_ && (hasSystem || hasMicrophone) && hasAnySource);
});
if (stopRequested_) {
break;
}
if (!timelineStarted_) {
if (!timelineStarted_ || paused_) {
continue;
}
electron/native/wgc-capture/src/audio_sample_utils.h
+2
View File
@@ -52,6 +52,7 @@ public:
bool start();
void beginTimeline();
void setPaused(bool paused);
void stop();
void pushSystem(const BYTE* data, DWORD byteCount);
void pushMicrophone(const BYTE* data, DWORD byteCount);
@@ -81,5 +82,6 @@ private:
std::thread thread_;
std::atomic<bool> stopRequested_ = false;
bool timelineStarted_ = false;
bool paused_ = false;
uint64_t emittedFrames_ = 0;
};
electron/native/wgc-capture/src/main.cpp
+89 -32
View File
@@ -13,6 +13,7 @@
#include <condition_variable>
#include <cctype>
#include <cstdint>
#include <functional>
#include <iostream>
#include <memory>
#include <mutex>
@@ -50,6 +51,37 @@ struct CaptureConfig {
int webcamFps = 0;
};
struct CaptureControl {
std::atomic<bool> stopRequested = false;
std::atomic<bool> paused = false;
std::mutex mutex;
std::condition_variable cv;
std::chrono::steady_clock::time_point pauseStartedAt;
std::chrono::steady_clock::duration totalPausedDuration{};
int64_t pausedDurationHns() {
std::scoped_lock lock(mutex);
auto total = totalPausedDuration;
if (paused.load()) {
total += std::chrono::steady_clock::now() - pauseStartedAt;
}
return std::chrono::duration_cast<std::chrono::nanoseconds>(total).count() / 100;
}
void setPaused(bool nextPaused) {
std::scoped_lock lock(mutex);
if (nextPaused == paused.load()) {
return;
}
if (nextPaused) {
pauseStartedAt = std::chrono::steady_clock::now();
} else {
totalPausedDuration += std::chrono::steady_clock::now() - pauseStartedAt;
}
paused = nextPaused;
}
};
std::wstring utf8ToWide(const std::string& value) {
if (value.empty()) {
return {};
@@ -319,17 +351,31 @@ bool parseConfig(const std::string& json, CaptureConfig& config) {
return true;
}
void readStopCommands(std::atomic<bool>& stopRequested, std::condition_variable& cv) {
void readCaptureCommands(CaptureControl& control, const std::function<void(bool)>& onPauseChanged) {
std::string line;
while (std::getline(std::cin, line)) {
if (line == "stop" || line == "q" || line == "quit") {
stopRequested = true;
cv.notify_all();
control.stopRequested = true;
control.cv.notify_all();
return;
}
if (line == "pause") {
control.setPaused(true);
onPauseChanged(true);
std::cout << "{\"event\":\"recording-paused\",\"schemaVersion\":2}" << std::endl;
control.cv.notify_all();
continue;
}
if (line == "resume") {
control.setPaused(false);
onPauseChanged(false);
std::cout << "{\"event\":\"recording-resumed\",\"schemaVersion\":2}" << std::endl;
control.cv.notify_all();
continue;
}
}
stopRequested = true;
cv.notify_all();
control.stopRequested = true;
control.cv.notify_all();
}
} // namespace
@@ -489,8 +535,7 @@ int main(int argc, char* argv[]) {
}
std::mutex mutex;
std::condition_variable cv;
std::atomic<bool> stopRequested = false;
CaptureControl control;
std::atomic<bool> firstFrameWritten = false;
std::atomic<bool> encodeFailed = false;
Microsoft::WRL::ComPtr<ID3D11Texture2D> latestFrameTexture;
@@ -503,7 +548,7 @@ int main(int argc, char* argv[]) {
bool hasVisibleWebcamFrame = false;
session.setFrameCallback([&](ID3D11Texture2D* texture, int64_t timestampHns) {
if (stopRequested) {
if (control.stopRequested || control.paused) {
return;
}
@@ -516,8 +561,8 @@ int main(int argc, char* argv[]) {
desc.MiscFlags = 0;
if (FAILED(session.device()->CreateTexture2D(&desc, nullptr, &latestFrameTexture))) {
encodeFailed = true;
stopRequested = true;
cv.notify_all();
control.stopRequested = true;
control.cv.notify_all();
return;
}
}
@@ -525,20 +570,29 @@ int main(int argc, char* argv[]) {
session.context()->CopyResource(latestFrameTexture.Get(), texture);
latestFrameTimestampHns = timestampHns;
if (!firstFrameWritten.exchange(true)) {
cv.notify_all();
control.cv.notify_all();
}
});
auto writeVideoFrames = [&]() {
const auto startedAt = std::chrono::steady_clock::now();
const auto frameDuration = std::chrono::duration_cast<std::chrono::steady_clock::duration>(
std::chrono::duration<double>(1.0 / config.fps));
uint64_t frameIndex = 0;
uint64_t lastWrittenWebcamSequence = 0;
uint64_t webcamOutputFrameIndex = 0;
int64_t lastEncodedVideoTimestampHns = -1;
while (!stopRequested && !encodeFailed) {
while (!control.stopRequested && !encodeFailed) {
{
std::scoped_lock lock(mutex);
std::unique_lock lock(mutex);
control.cv.wait(lock, [&] {
return control.stopRequested.load() ||
encodeFailed.load() ||
(!control.paused.load() && latestFrameTexture);
});
if (control.stopRequested || encodeFailed) {
break;
}
if (webcamActive) {
WebcamFrameSnapshot candidateWebcamFrame;
if (webcamCapture.copyLatestFrame(candidateWebcamFrame) &&
@@ -564,7 +618,9 @@ int main(int argc, char* argv[]) {
firstFrameTimestampHns = sourceTimestampHns;
}
int64_t frameTimestampHns =
std::max<int64_t>(0, sourceTimestampHns - firstFrameTimestampHns);
std::max<int64_t>(
0,
sourceTimestampHns - firstFrameTimestampHns - control.pausedDurationHns());
if (lastEncodedVideoTimestampHns >= 0 &&
frameTimestampHns <= lastEncodedVideoTimestampHns) {
frameTimestampHns =
@@ -588,8 +644,8 @@ int main(int argc, char* argv[]) {
frameTimestampHns,
!writeSeparateWebcam && webcamFrame.data ? &webcamFrame : nullptr)) {
encodeFailed = true;
stopRequested = true;
cv.notify_all();
control.stopRequested = true;
control.cv.notify_all();
return;
}
if (latestFrameTexture) {
@@ -598,10 +654,7 @@ int main(int argc, char* argv[]) {
}
frameIndex += 1;
const auto nextDeadline = startedAt +
std::chrono::duration_cast<std::chrono::steady_clock::duration>(
std::chrono::duration<double>(static_cast<double>(frameIndex) / config.fps));
std::this_thread::sleep_until(nextDeadline);
std::this_thread::sleep_for(frameDuration);
}
};
@@ -633,8 +686,8 @@ int main(int argc, char* argv[]) {
[&](const BYTE* data, DWORD byteCount, int64_t timestampHns, int64_t durationHns) {
if (!encoder.writeAudio(data, byteCount, timestampHns, durationHns)) {
encodeFailed = true;
stopRequested = true;
cv.notify_all();
control.stopRequested = true;
control.cv.notify_all();
return false;
}
return true;
@@ -649,7 +702,7 @@ int main(int argc, char* argv[]) {
if (!microphoneCapture.start([&](const BYTE* data, DWORD byteCount, int64_t timestampHns, int64_t durationHns) {
(void)timestampHns;
(void)durationHns;
if (stopRequested || !audioMixer) {
if (control.stopRequested || !audioMixer) {
return;
}
@@ -665,7 +718,7 @@ int main(int argc, char* argv[]) {
if (!loopbackCapture.start([&](const BYTE* data, DWORD byteCount, int64_t timestampHns, int64_t durationHns) {
(void)timestampHns;
(void)durationHns;
if (stopRequested || !audioMixer) {
if (control.stopRequested || !audioMixer) {
return;
}
@@ -726,16 +779,20 @@ int main(int argc, char* argv[]) {
return 1;
}
std::thread stdinThread(readStopCommands, std::ref(stopRequested), std::ref(cv));
std::thread stdinThread(readCaptureCommands, std::ref(control), [&](bool isPaused) {
if (audioMixer) {
audioMixer->setPaused(isPaused);
}
});
{
std::unique_lock lock(mutex);
const bool started = cv.wait_for(lock, std::chrono::seconds(10), [&] {
return firstFrameWritten.load() || stopRequested.load();
const bool started = control.cv.wait_for(lock, std::chrono::seconds(10), [&] {
return firstFrameWritten.load() || control.stopRequested.load();
});
if (!started || !firstFrameWritten) {
stopRequested = true;
cv.notify_all();
control.stopRequested = true;
control.cv.notify_all();
if (stdinThread.joinable()) {
stdinThread.detach();
}
@@ -761,8 +818,8 @@ int main(int argc, char* argv[]) {
{
std::unique_lock lock(mutex);
cv.wait(lock, [&] {
return stopRequested.load();
control.cv.wait(lock, [&] {
return control.stopRequested.load();
});
}
electron/preload.ts
+6
View File
@@ -87,6 +87,12 @@ contextBridge.exposeInMainWorld("electronAPI", {
stopNativeWindowsRecording: (discard?: boolean) => {
return ipcRenderer.invoke("stop-native-windows-recording", discard);
},
pauseNativeWindowsRecording: () => {
return ipcRenderer.invoke("pause-native-windows-recording");
},
resumeNativeWindowsRecording: () => {
return ipcRenderer.invoke("resume-native-windows-recording");
},
startNativeMacRecording: (request: NativeMacRecordingRequest) => {
return ipcRenderer.invoke("start-native-mac-recording", request);
},
scripts/build-windows-wgc-helper.mjs
+19 -2
View File
@@ -37,6 +37,21 @@ function findVcVarsAll() {
return null;
}
function findWindowsSdkUmLibDir() {
const sdkLibRoot = "C:\\Program Files (x86)\\Windows Kits\\10\\Lib";
if (!fs.existsSync(sdkLibRoot)) {
return null;
}
return fs
.readdirSync(sdkLibRoot, { withFileTypes: true })
.filter((entry) => entry.isDirectory())
.map((entry) => path.join(sdkLibRoot, entry.name, "um", "x64"))
.filter((candidate) => fs.existsSync(path.join(candidate, "kernel32.lib")))
.sort()
.at(-1);
}
function run(command, args, options = {}) {
return new Promise((resolve, reject) => {
const child = spawn(command, args, {
@@ -64,6 +79,8 @@ async function runInVsEnv(command) {
);
}
const sdkUmLibDir = findWindowsSdkUmLibDir();
const cmdPath = path.join(os.tmpdir(), `openscreen-build-wgc-${process.pid}-${Date.now()}.cmd`);
fs.writeFileSync(
cmdPath,
@@ -72,9 +89,9 @@ async function runInVsEnv(command) {
`call "${vcvarsAll}" x64`,
"if errorlevel 1 exit /b %errorlevel%",
`if not exist "${COMPAT_LIB_DIR}" mkdir "${COMPAT_LIB_DIR}"`,
`for %%L in (gdi32.lib winspool.lib shell32.lib oleaut32.lib uuid.lib comdlg32.lib advapi32.lib) do if not exist "%WindowsSdkDir%Lib\\%WindowsSDKLibVersion%um\\x64\\%%L" copy /Y "%WindowsSdkDir%Lib\\%WindowsSDKLibVersion%um\\x64\\kernel32.Lib" "${COMPAT_LIB_DIR}\\%%L" >nul`,
`for %%L in (gdi32.lib gdiplus.lib winspool.lib shell32.lib oleaut32.lib uuid.lib comdlg32.lib advapi32.lib) do if not exist "%WindowsSdkDir%Lib\\%WindowsSDKLibVersion%um\\x64\\%%L" copy /Y "%WindowsSdkDir%Lib\\%WindowsSDKLibVersion%um\\x64\\kernel32.Lib" "${COMPAT_LIB_DIR}\\%%L" >nul`,
"if errorlevel 1 exit /b %errorlevel%",
`set "LIB=${COMPAT_LIB_DIR};%LIB%"`,
`set "LIB=${sdkUmLibDir ? `${sdkUmLibDir};` : ""}%LIB%;${COMPAT_LIB_DIR}"`,
command,
"exit /b %errorlevel%",
"",
src/components/video-editor/CropControl.tsx
+3 -2
View File
@@ -1,6 +1,7 @@
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { type AspectRatio } from "@/utils/aspectRatioUtils";
import { DEFAULT_SOURCE_DIMENSIONS } from "./editorDefaults";
interface CropRegion {
x: number; // 0-1 normalized
@@ -32,8 +33,8 @@ export function CropControl({ videoElement, cropRegion, onCropChange }: CropCont
const ctx = canvas.getContext("2d", { alpha: false });
if (!ctx) return;
canvas.width = videoElement.videoWidth || 1920;
canvas.height = videoElement.videoHeight || 1080;
canvas.width = videoElement.videoWidth || DEFAULT_SOURCE_DIMENSIONS.width;
canvas.height = videoElement.videoHeight || DEFAULT_SOURCE_DIMENSIONS.height;
const draw = () => {
if (videoElement.readyState >= 2) {
src/components/video-editor/SettingsPanel.tsx
+26 -19
View File
@@ -54,6 +54,14 @@ import { AnnotationSettingsPanel } from "./AnnotationSettingsPanel";
import { BlurSettingsPanel } from "./BlurSettingsPanel";
import { CropControl } from "./CropControl";
import { parseCustomPlaybackSpeedInput } from "./customPlaybackSpeed";
import {
DEFAULT_CURSOR_SETTINGS,
DEFAULT_EDITOR_LAYOUT_SETTINGS,
DEFAULT_EXPORT_SETTINGS,
DEFAULT_GIF_SETTINGS,
DEFAULT_SOURCE_DIMENSIONS,
DEFAULT_WEBCAM_SETTINGS,
} from "./editorDefaults";
import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp";
import type {
AnnotationRegion,
@@ -71,7 +79,6 @@ import type {
ZoomFocusMode,
} from "./types";
import {
DEFAULT_WEBCAM_SIZE_PRESET,
MAX_ZOOM_SCALE,
MIN_ZOOM_SCALE,
ROTATION_3D_PRESET_ORDER,
@@ -387,24 +394,24 @@ export function SettingsPanel({
borderRadius = 0,
onBorderRadiusChange,
onBorderRadiusCommit,
padding = 50,
padding = DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
onPaddingChange,
onPaddingCommit,
cropRegion,
onCropChange,
aspectRatio,
videoElement,
exportQuality = "good",
exportQuality = DEFAULT_EXPORT_SETTINGS.quality,
onExportQualityChange,
exportFormat = "mp4",
exportFormat = DEFAULT_EXPORT_SETTINGS.format,
onExportFormatChange,
gifFrameRate = 15,
gifFrameRate = DEFAULT_GIF_SETTINGS.frameRate,
onGifFrameRateChange,
gifLoop = true,
gifLoop = DEFAULT_GIF_SETTINGS.loop,
onGifLoopChange,
gifSizePreset = "medium",
gifSizePreset = DEFAULT_GIF_SETTINGS.sizePreset,
onGifSizePresetChange,
gifOutputDimensions = { width: 1280, height: 720 },
gifOutputDimensions = DEFAULT_GIF_SETTINGS.outputDimensions,
onExport,
unsavedExport,
onSaveUnsavedExport,
@@ -426,25 +433,25 @@ export function SettingsPanel({
onSpeedChange,
onSpeedDelete,
hasWebcam = false,
webcamLayoutPreset = "picture-in-picture",
webcamLayoutPreset = DEFAULT_WEBCAM_SETTINGS.layoutPreset,
onWebcamLayoutPresetChange,
webcamMaskShape = "rectangle",
webcamMaskShape = DEFAULT_WEBCAM_SETTINGS.maskShape,
onWebcamMaskShapeChange,
webcamSizePreset = DEFAULT_WEBCAM_SIZE_PRESET,
webcamSizePreset = DEFAULT_WEBCAM_SETTINGS.sizePreset,
onWebcamSizePresetChange,
onWebcamSizePresetCommit,
onSaveDiagnostic,
showCursor = true,
showCursor = DEFAULT_CURSOR_SETTINGS.show,
onShowCursorChange,
cursorSize = 3.0,
cursorSize = DEFAULT_CURSOR_SETTINGS.size,
onCursorSizeChange,
cursorSmoothing = 0.67,
cursorSmoothing = DEFAULT_CURSOR_SETTINGS.smoothing,
onCursorSmoothingChange,
cursorMotionBlur = 0.35,
cursorMotionBlur = DEFAULT_CURSOR_SETTINGS.motionBlur,
onCursorMotionBlurChange,
cursorClickBounce = 2.5,
cursorClickBounce = DEFAULT_CURSOR_SETTINGS.clickBounce,
onCursorClickBounceChange,
cursorClipToBounds = false,
cursorClipToBounds = DEFAULT_CURSOR_SETTINGS.clipToBounds,
onCursorClipToBoundsChange,
hasCursorData = false,
showCursorSettings = true,
@@ -483,8 +490,8 @@ export function SettingsPanel({
const [cropAspectRatio, setCropAspectRatio] = useState("");
const isPortraitCanvas = isPortraitAspectRatio(aspectRatio);
const videoWidth = videoElement?.videoWidth || 1920;
const videoHeight = videoElement?.videoHeight || 1080;
const videoWidth = videoElement?.videoWidth || DEFAULT_SOURCE_DIMENSIONS.width;
const videoHeight = videoElement?.videoHeight || DEFAULT_SOURCE_DIMENSIONS.height;
const handleCropNumericChange = useCallback(
(field: "x" | "y" | "width" | "height", pixelValue: number) => {
src/components/video-editor/VideoEditor.tsx
+45 -30
View File
@@ -49,6 +49,12 @@ import {
isPortraitAspectRatio,
} from "@/utils/aspectRatioUtils";
import { ExportDialog } from "./ExportDialog";
import {
DEFAULT_CURSOR_SETTINGS,
DEFAULT_EXPORT_SETTINGS,
DEFAULT_GIF_SETTINGS,
DEFAULT_SOURCE_DIMENSIONS,
} from "./editorDefaults";
import PlaybackControls from "./PlaybackControls";
import {
createProjectData,
@@ -71,11 +77,6 @@ import {
DEFAULT_ANNOTATION_SIZE,
DEFAULT_ANNOTATION_STYLE,
DEFAULT_BLUR_DATA,
DEFAULT_CURSOR_CLICK_BOUNCE,
DEFAULT_CURSOR_CLIP_TO_BOUNDS,
DEFAULT_CURSOR_MOTION_BLUR,
DEFAULT_CURSOR_SIZE,
DEFAULT_CURSOR_SMOOTHING,
DEFAULT_FIGURE_DATA,
DEFAULT_PLAYBACK_SPEED,
DEFAULT_ZOOM_DEPTH,
@@ -204,11 +205,15 @@ export default function VideoEditor() {
const [exportError, setExportError] = useState<string | null>(null);
const [showExportDialog, setShowExportDialog] = useState(false);
const [showNewRecordingDialog, setShowNewRecordingDialog] = useState(false);
const [exportQuality, setExportQuality] = useState<ExportQuality>("good");
const [exportFormat, setExportFormat] = useState<ExportFormat>("mp4");
const [gifFrameRate, setGifFrameRate] = useState<GifFrameRate>(15);
const [gifLoop, setGifLoop] = useState(true);
const [gifSizePreset, setGifSizePreset] = useState<GifSizePreset>("medium");
const [exportQuality, setExportQuality] = useState<ExportQuality>(
DEFAULT_EXPORT_SETTINGS.quality,
);
const [exportFormat, setExportFormat] = useState<ExportFormat>(DEFAULT_EXPORT_SETTINGS.format);
const [gifFrameRate, setGifFrameRate] = useState<GifFrameRate>(DEFAULT_GIF_SETTINGS.frameRate);
const [gifLoop, setGifLoop] = useState(DEFAULT_GIF_SETTINGS.loop);
const [gifSizePreset, setGifSizePreset] = useState<GifSizePreset>(
DEFAULT_GIF_SETTINGS.sizePreset,
);
const [exportedFilePath, setExportedFilePath] = useState<string | null>(null);
const [lastSavedSnapshot, setLastSavedSnapshot] = useState<string | null>(null);
const [unsavedExport, setUnsavedExport] = useState<{
@@ -239,12 +244,14 @@ export default function VideoEditor() {
}, [cursorRecordingData, cursorTelemetry]);
// Cursor & motion blur visual settings (non-undoable preferences)
const [showCursor, setShowCursor] = useState(true);
const [cursorSize, setCursorSize] = useState(DEFAULT_CURSOR_SIZE);
const [cursorSmoothing, setCursorSmoothing] = useState(DEFAULT_CURSOR_SMOOTHING);
const [cursorMotionBlur, setCursorMotionBlur] = useState(DEFAULT_CURSOR_MOTION_BLUR);
const [cursorClickBounce, setCursorClickBounce] = useState(DEFAULT_CURSOR_CLICK_BOUNCE);
const [cursorClipToBounds, setCursorClipToBounds] = useState(DEFAULT_CURSOR_CLIP_TO_BOUNDS);
const [showCursor, setShowCursor] = useState(DEFAULT_CURSOR_SETTINGS.show);
const [cursorSize, setCursorSize] = useState(DEFAULT_CURSOR_SETTINGS.size);
const [cursorSmoothing, setCursorSmoothing] = useState(DEFAULT_CURSOR_SETTINGS.smoothing);
const [cursorMotionBlur, setCursorMotionBlur] = useState(DEFAULT_CURSOR_SETTINGS.motionBlur);
const [cursorClickBounce, setCursorClickBounce] = useState(DEFAULT_CURSOR_SETTINGS.clickBounce);
const [cursorClipToBounds, setCursorClipToBounds] = useState(
DEFAULT_CURSOR_SETTINGS.clipToBounds,
);
const [nativePlatform, setNativePlatform] = useState<NativePlatform | null>(null);
const [recordingCursorCaptureMode, setRecordingCursorCaptureMode] =
useState<CursorCaptureMode | null>(null);
@@ -1576,8 +1583,8 @@ export default function VideoEditor() {
videoPlaybackRef.current?.pause();
}
const sourceWidth = video.videoWidth || 1920;
const sourceHeight = video.videoHeight || 1080;
const sourceWidth = video.videoWidth || DEFAULT_SOURCE_DIMENSIONS.width;
const sourceHeight = video.videoHeight || DEFAULT_SOURCE_DIMENSIONS.height;
const effectiveSourceDimensions = calculateEffectiveSourceDimensions(
sourceWidth,
sourceHeight,
@@ -1591,8 +1598,8 @@ export default function VideoEditor() {
// Get preview CONTAINER dimensions for scaling
const playbackRef = videoPlaybackRef.current;
const containerElement = playbackRef?.containerRef?.current;
const previewWidth = containerElement?.clientWidth || 1920;
const previewHeight = containerElement?.clientHeight || 1080;
const previewWidth = containerElement?.clientWidth || DEFAULT_SOURCE_DIMENSIONS.width;
const previewHeight = containerElement?.clientHeight || DEFAULT_SOURCE_DIMENSIONS.height;
if (settings.format === "gif" && settings.gifConfig) {
// GIF Export
@@ -1846,8 +1853,8 @@ export default function VideoEditor() {
}
// Build export settings from current state
const sourceWidth = video.videoWidth || 1920;
const sourceHeight = video.videoHeight || 1080;
const sourceWidth = video.videoWidth || DEFAULT_SOURCE_DIMENSIONS.width;
const sourceHeight = video.videoHeight || DEFAULT_SOURCE_DIMENSIONS.height;
const effectiveSourceDimensions = calculateEffectiveSourceDimensions(
sourceWidth,
sourceHeight,
@@ -2051,8 +2058,10 @@ export default function VideoEditor() {
aspectRatio:
aspectRatio === "native"
? getNativeAspectRatioValue(
videoPlaybackRef.current?.video?.videoWidth || 1920,
videoPlaybackRef.current?.video?.videoHeight || 1080,
videoPlaybackRef.current?.video?.videoWidth ||
DEFAULT_SOURCE_DIMENSIONS.width,
videoPlaybackRef.current?.video?.videoHeight ||
DEFAULT_SOURCE_DIMENSIONS.height,
cropRegion,
)
: getAspectRatioValue(aspectRatio),
@@ -2221,21 +2230,27 @@ export default function VideoEditor() {
onGifSizePresetChange={setGifSizePreset}
gifOutputDimensions={calculateOutputDimensions(
calculateEffectiveSourceDimensions(
videoPlaybackRef.current?.video?.videoWidth || 1920,
videoPlaybackRef.current?.video?.videoHeight || 1080,
videoPlaybackRef.current?.video?.videoWidth ||
DEFAULT_SOURCE_DIMENSIONS.width,
videoPlaybackRef.current?.video?.videoHeight ||
DEFAULT_SOURCE_DIMENSIONS.height,
cropRegion,
).width,
calculateEffectiveSourceDimensions(
videoPlaybackRef.current?.video?.videoWidth || 1920,
videoPlaybackRef.current?.video?.videoHeight || 1080,
videoPlaybackRef.current?.video?.videoWidth ||
DEFAULT_SOURCE_DIMENSIONS.width,
videoPlaybackRef.current?.video?.videoHeight ||
DEFAULT_SOURCE_DIMENSIONS.height,
cropRegion,
).height,
gifSizePreset,
GIF_SIZE_PRESETS,
aspectRatio === "native"
? getNativeAspectRatioValue(
videoPlaybackRef.current?.video?.videoWidth || 1920,
videoPlaybackRef.current?.video?.videoHeight || 1080,
videoPlaybackRef.current?.video?.videoWidth ||
DEFAULT_SOURCE_DIMENSIONS.width,
videoPlaybackRef.current?.video?.videoHeight ||
DEFAULT_SOURCE_DIMENSIONS.height,
cropRegion,
)
: getAspectRatioValue(aspectRatio),
src/components/video-editor/VideoPlayback.tsx
+13 -12
View File
@@ -49,15 +49,16 @@ import {
getNativeAspectRatioValue,
} from "@/utils/aspectRatioUtils";
import { AnnotationOverlay } from "./AnnotationOverlay";
import {
DEFAULT_CURSOR_SETTINGS,
DEFAULT_EDITOR_LAYOUT_SETTINGS,
DEFAULT_SOURCE_DIMENSIONS,
} from "./editorDefaults";
import {
type AnnotationRegion,
type BlurData,
type CursorTelemetryPoint,
computeRotation3DContainScale,
DEFAULT_CURSOR_CLICK_BOUNCE,
DEFAULT_CURSOR_MOTION_BLUR,
DEFAULT_CURSOR_SIZE,
DEFAULT_CURSOR_SMOOTHING,
DEFAULT_ROTATION_3D,
isRotation3DIdentity,
lerpRotation3D,
@@ -247,7 +248,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
showBlur,
motionBlurAmount = 0,
borderRadius = 0,
padding = 50,
padding = DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
cropRegion,
trimRegions = [],
speedRegions = [],
@@ -268,11 +269,11 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
cursorTelemetry = [],
cursorClickTimestamps = [],
showCursor = false,
cursorSize = DEFAULT_CURSOR_SIZE,
cursorSmoothing = DEFAULT_CURSOR_SMOOTHING,
cursorMotionBlur = DEFAULT_CURSOR_MOTION_BLUR,
cursorClickBounce = DEFAULT_CURSOR_CLICK_BOUNCE,
cursorClipToBounds = false,
cursorSize = DEFAULT_CURSOR_SETTINGS.size,
cursorSmoothing = DEFAULT_CURSOR_SETTINGS.smoothing,
cursorMotionBlur = DEFAULT_CURSOR_SETTINGS.motionBlur,
cursorClickBounce = DEFAULT_CURSOR_SETTINGS.clickBounce,
cursorClipToBounds = DEFAULT_CURSOR_SETTINGS.clipToBounds,
isPreviewingZoom = false,
},
ref,
@@ -1834,8 +1835,8 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
aspectRatio,
aspectRatio === "native"
? getNativeAspectRatioValue(
lockedVideoDimensionsRef.current?.width || 1920,
lockedVideoDimensionsRef.current?.height || 1080,
lockedVideoDimensionsRef.current?.width || DEFAULT_SOURCE_DIMENSIONS.width,
lockedVideoDimensionsRef.current?.height || DEFAULT_SOURCE_DIMENSIONS.height,
cropRegion,
)
: undefined,
src/components/video-editor/editorDefaults.test.ts
+55
View File
@@ -0,0 +1,55 @@
import { describe, expect, it } from "vitest";
import { INITIAL_EDITOR_STATE } from "@/hooks/useEditorHistory";
import { DEFAULT_PREFS } from "@/lib/userPreferences";
import {
DEFAULT_EDITOR_APPEARANCE_SETTINGS,
DEFAULT_EDITOR_LAYOUT_SETTINGS,
DEFAULT_EXPORT_SETTINGS,
DEFAULT_GIF_SETTINGS,
DEFAULT_WEBCAM_SETTINGS,
} from "./editorDefaults";
import { normalizeProjectEditor } from "./projectPersistence";
describe("editor defaults SSOT", () => {
it("keeps history defaults aligned with editor defaults", () => {
expect(INITIAL_EDITOR_STATE).toMatchObject({
...DEFAULT_EDITOR_APPEARANCE_SETTINGS,
padding: DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
aspectRatio: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio,
cropRegion: DEFAULT_EDITOR_LAYOUT_SETTINGS.cropRegion,
wallpaper: DEFAULT_EDITOR_LAYOUT_SETTINGS.wallpaper,
webcamLayoutPreset: DEFAULT_WEBCAM_SETTINGS.layoutPreset,
webcamMaskShape: DEFAULT_WEBCAM_SETTINGS.maskShape,
webcamSizePreset: DEFAULT_WEBCAM_SETTINGS.sizePreset,
webcamPosition: DEFAULT_WEBCAM_SETTINGS.position,
});
});
it("keeps user preference defaults aligned with editor and export defaults", () => {
expect(DEFAULT_PREFS).toMatchObject({
padding: DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
aspectRatio: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio,
exportQuality: DEFAULT_EXPORT_SETTINGS.quality,
exportFormat: DEFAULT_EXPORT_SETTINGS.format,
});
});
it("keeps project fallback normalization aligned with editor defaults", () => {
expect(normalizeProjectEditor({})).toMatchObject({
...DEFAULT_EDITOR_APPEARANCE_SETTINGS,
padding: DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
cropRegion: DEFAULT_EDITOR_LAYOUT_SETTINGS.cropRegion,
wallpaper: DEFAULT_EDITOR_LAYOUT_SETTINGS.wallpaper,
aspectRatio: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio,
webcamLayoutPreset: DEFAULT_WEBCAM_SETTINGS.layoutPreset,
webcamMaskShape: DEFAULT_WEBCAM_SETTINGS.maskShape,
webcamSizePreset: DEFAULT_WEBCAM_SETTINGS.sizePreset,
webcamPosition: DEFAULT_WEBCAM_SETTINGS.position,
exportQuality: DEFAULT_EXPORT_SETTINGS.quality,
exportFormat: DEFAULT_EXPORT_SETTINGS.format,
gifFrameRate: DEFAULT_GIF_SETTINGS.frameRate,
gifLoop: DEFAULT_GIF_SETTINGS.loop,
gifSizePreset: DEFAULT_GIF_SETTINGS.sizePreset,
});
});
});
src/components/video-editor/editorDefaults.ts
+95
View File
@@ -0,0 +1,95 @@
import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@/lib/exporter";
import { DEFAULT_WALLPAPER } from "@/lib/wallpaper";
import type { AspectRatio } from "@/utils/aspectRatioUtils";
import {
type CursorVisualSettings,
DEFAULT_CROP_REGION,
DEFAULT_CURSOR_CLICK_BOUNCE,
DEFAULT_CURSOR_CLIP_TO_BOUNDS,
DEFAULT_CURSOR_MOTION_BLUR,
DEFAULT_CURSOR_SIZE,
DEFAULT_CURSOR_SMOOTHING,
DEFAULT_WEBCAM_LAYOUT_PRESET,
DEFAULT_WEBCAM_MASK_SHAPE,
DEFAULT_WEBCAM_POSITION,
DEFAULT_WEBCAM_SIZE_PRESET,
type WebcamLayoutPreset,
type WebcamMaskShape,
type WebcamPosition,
type WebcamSizePreset,
} from "./types";
export const DEFAULT_SOURCE_DIMENSIONS = {
width: 1920,
height: 1080,
} as const;
export const DEFAULT_GIF_OUTPUT_DIMENSIONS = {
width: 1280,
height: 720,
} as const;
export const DEFAULT_EDITOR_APPEARANCE_SETTINGS: {
shadowIntensity: number;
showBlur: boolean;
motionBlurAmount: number;
borderRadius: number;
} = {
shadowIntensity: 0,
showBlur: false,
motionBlurAmount: 0,
borderRadius: 0,
};
export const DEFAULT_EDITOR_LAYOUT_SETTINGS: {
padding: number;
aspectRatio: AspectRatio;
cropRegion: typeof DEFAULT_CROP_REGION;
wallpaper: string;
} = {
padding: 50,
aspectRatio: "16:9",
cropRegion: DEFAULT_CROP_REGION,
wallpaper: DEFAULT_WALLPAPER,
};
export const DEFAULT_WEBCAM_SETTINGS = {
layoutPreset: DEFAULT_WEBCAM_LAYOUT_PRESET,
maskShape: DEFAULT_WEBCAM_MASK_SHAPE,
sizePreset: DEFAULT_WEBCAM_SIZE_PRESET,
position: DEFAULT_WEBCAM_POSITION,
} as const satisfies {
layoutPreset: WebcamLayoutPreset;
maskShape: WebcamMaskShape;
sizePreset: WebcamSizePreset;
position: WebcamPosition | null;
};
export const DEFAULT_CURSOR_SETTINGS: CursorVisualSettings & { show: boolean } = {
show: true,
size: DEFAULT_CURSOR_SIZE,
smoothing: DEFAULT_CURSOR_SMOOTHING,
motionBlur: DEFAULT_CURSOR_MOTION_BLUR,
clickBounce: DEFAULT_CURSOR_CLICK_BOUNCE,
clipToBounds: DEFAULT_CURSOR_CLIP_TO_BOUNDS,
};
export const DEFAULT_EXPORT_SETTINGS: {
quality: ExportQuality;
format: ExportFormat;
} = {
quality: "good",
format: "mp4",
};
export const DEFAULT_GIF_SETTINGS: {
frameRate: GifFrameRate;
loop: boolean;
sizePreset: GifSizePreset;
outputDimensions: typeof DEFAULT_GIF_OUTPUT_DIMENSIONS;
} = {
frameRate: 15,
loop: true,
sizePreset: "medium",
outputDimensions: DEFAULT_GIF_OUTPUT_DIMENSIONS,
};
src/components/video-editor/projectPersistence.ts
+43 -29
View File
@@ -4,6 +4,13 @@ import type { ProjectMedia } from "@/lib/recordingSession";
import { normalizeProjectMedia } from "@/lib/recordingSession";
import { DEFAULT_WALLPAPER, WALLPAPER_PATHS } from "@/lib/wallpaper";
import { ASPECT_RATIOS, type AspectRatio, isPortraitAspectRatio } from "@/utils/aspectRatioUtils";
import {
DEFAULT_EDITOR_APPEARANCE_SETTINGS,
DEFAULT_EDITOR_LAYOUT_SETTINGS,
DEFAULT_EXPORT_SETTINGS,
DEFAULT_GIF_SETTINGS,
DEFAULT_WEBCAM_SETTINGS,
} from "./editorDefaults";
import {
type AnnotationRegion,
type CropRegion,
@@ -15,14 +22,10 @@ import {
DEFAULT_BLUR_DATA,
DEFAULT_BLUR_FREEHAND_POINTS,
DEFAULT_BLUR_INTENSITY,
DEFAULT_CROP_REGION,
DEFAULT_FIGURE_DATA,
DEFAULT_PLAYBACK_SPEED,
DEFAULT_WEBCAM_LAYOUT_PRESET,
DEFAULT_WEBCAM_MASK_SHAPE,
DEFAULT_WEBCAM_POSITION,
DEFAULT_WEBCAM_SIZE_PRESET,
DEFAULT_ZOOM_DEPTH,
DEFAULT_ZOOM_MOTION_BLUR,
MAX_BLUR_BLOCK_SIZE,
MAX_BLUR_INTENSITY,
MAX_PLAYBACK_SPEED,
@@ -104,13 +107,13 @@ function computeNormalizedWebcamLayoutPreset(
case "vertical-stack":
return isPortraitAspectRatio(normalizedAspectRatio)
? webcamLayoutPreset
: DEFAULT_WEBCAM_LAYOUT_PRESET;
: DEFAULT_WEBCAM_SETTINGS.layoutPreset;
case "dual-frame":
return isPortraitAspectRatio(normalizedAspectRatio)
? DEFAULT_WEBCAM_LAYOUT_PRESET
? DEFAULT_WEBCAM_SETTINGS.layoutPreset
: webcamLayoutPreset;
default:
return DEFAULT_WEBCAM_LAYOUT_PRESET;
return DEFAULT_WEBCAM_SETTINGS.layoutPreset;
}
}
@@ -211,7 +214,7 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
editor.aspectRatio as AspectRatio,
)
? (editor.aspectRatio as AspectRatio)
: "16:9";
: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio;
const normalizedWebcamLayoutPreset = computeNormalizedWebcamLayoutPreset(
editor.webcamLayoutPreset,
normalizedAspectRatio,
@@ -226,7 +229,7 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
cx: clamp((editor.webcamPosition as WebcamPosition).cx, 0, 1),
cy: clamp((editor.webcamPosition as WebcamPosition).cy, 0, 1),
}
: DEFAULT_WEBCAM_POSITION;
: DEFAULT_WEBCAM_SETTINGS.position;
const normalizedZoomRegions: ZoomRegion[] = Array.isArray(editor.zoomRegions)
? editor.zoomRegions
@@ -413,16 +416,16 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
const rawCropX = isFiniteNumber(editor.cropRegion?.x)
? editor.cropRegion.x
: DEFAULT_CROP_REGION.x;
: DEFAULT_EDITOR_LAYOUT_SETTINGS.cropRegion.x;
const rawCropY = isFiniteNumber(editor.cropRegion?.y)
? editor.cropRegion.y
: DEFAULT_CROP_REGION.y;
: DEFAULT_EDITOR_LAYOUT_SETTINGS.cropRegion.y;
const rawCropWidth = isFiniteNumber(editor.cropRegion?.width)
? editor.cropRegion.width
: DEFAULT_CROP_REGION.width;
: DEFAULT_EDITOR_LAYOUT_SETTINGS.cropRegion.width;
const rawCropHeight = isFiniteNumber(editor.cropRegion?.height)
? editor.cropRegion.height
: DEFAULT_CROP_REGION.height;
: DEFAULT_EDITOR_LAYOUT_SETTINGS.cropRegion.height;
const cropX = clamp(rawCropX, 0, 1);
const cropY = clamp(rawCropY, 0, 1);
@@ -433,18 +436,29 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
wallpaper:
typeof editor.wallpaper === "string"
? normalizeWallpaperValue(editor.wallpaper)
: DEFAULT_WALLPAPER,
shadowIntensity: typeof editor.shadowIntensity === "number" ? editor.shadowIntensity : 0,
showBlur: typeof editor.showBlur === "boolean" ? editor.showBlur : false,
: DEFAULT_EDITOR_LAYOUT_SETTINGS.wallpaper,
shadowIntensity:
typeof editor.shadowIntensity === "number"
? editor.shadowIntensity
: DEFAULT_EDITOR_APPEARANCE_SETTINGS.shadowIntensity,
showBlur:
typeof editor.showBlur === "boolean"
? editor.showBlur
: DEFAULT_EDITOR_APPEARANCE_SETTINGS.showBlur,
motionBlurAmount: isFiniteNumber(editor.motionBlurAmount)
? clamp(editor.motionBlurAmount, 0, 1)
: typeof (editor as { motionBlurEnabled?: unknown }).motionBlurEnabled === "boolean"
? (editor as { motionBlurEnabled?: boolean }).motionBlurEnabled
? 0.35
: 0
: 0,
borderRadius: typeof editor.borderRadius === "number" ? editor.borderRadius : 0,
padding: isFiniteNumber(editor.padding) ? clamp(editor.padding, 0, 100) : 50,
? DEFAULT_ZOOM_MOTION_BLUR
: DEFAULT_EDITOR_APPEARANCE_SETTINGS.motionBlurAmount
: DEFAULT_EDITOR_APPEARANCE_SETTINGS.motionBlurAmount,
borderRadius:
typeof editor.borderRadius === "number"
? editor.borderRadius
: DEFAULT_EDITOR_APPEARANCE_SETTINGS.borderRadius,
padding: isFiniteNumber(editor.padding)
? clamp(editor.padding, 0, 100)
: DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
cropRegion: {
x: cropX,
y: cropY,
@@ -463,31 +477,31 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
editor.webcamMaskShape === "square" ||
editor.webcamMaskShape === "rounded"
? editor.webcamMaskShape
: DEFAULT_WEBCAM_MASK_SHAPE,
: DEFAULT_WEBCAM_SETTINGS.maskShape,
webcamSizePreset:
typeof editor.webcamSizePreset === "number" && isFiniteNumber(editor.webcamSizePreset)
? Math.max(10, Math.min(50, editor.webcamSizePreset))
: DEFAULT_WEBCAM_SIZE_PRESET,
: DEFAULT_WEBCAM_SETTINGS.sizePreset,
webcamPosition: normalizedWebcamPosition,
exportQuality:
editor.exportQuality === "medium" || editor.exportQuality === "source"
? editor.exportQuality
: "good",
exportFormat: editor.exportFormat === "gif" ? "gif" : "mp4",
: DEFAULT_EXPORT_SETTINGS.quality,
exportFormat: editor.exportFormat === "gif" ? "gif" : DEFAULT_EXPORT_SETTINGS.format,
gifFrameRate:
editor.gifFrameRate === 15 ||
editor.gifFrameRate === 20 ||
editor.gifFrameRate === 25 ||
editor.gifFrameRate === 30
? editor.gifFrameRate
: 15,
gifLoop: typeof editor.gifLoop === "boolean" ? editor.gifLoop : true,
: DEFAULT_GIF_SETTINGS.frameRate,
gifLoop: typeof editor.gifLoop === "boolean" ? editor.gifLoop : DEFAULT_GIF_SETTINGS.loop,
gifSizePreset:
editor.gifSizePreset === "medium" ||
editor.gifSizePreset === "large" ||
editor.gifSizePreset === "original"
? editor.gifSizePreset
: "medium",
: DEFAULT_GIF_SETTINGS.sizePreset,
};
}
src/components/video-editor/types.ts
+1
View File
@@ -188,6 +188,7 @@ export interface CursorVisualSettings {
smoothing: number;
motionBlur: number;
clickBounce: number;
clipToBounds: boolean;
}
export const DEFAULT_CURSOR_SIZE = 3.0;
src/hooks/useEditorHistory.ts
+17 -19
View File
@@ -1,4 +1,9 @@
import { useCallback, useRef, useState } from "react";
import {
DEFAULT_EDITOR_APPEARANCE_SETTINGS,
DEFAULT_EDITOR_LAYOUT_SETTINGS,
DEFAULT_WEBCAM_SETTINGS,
} from "@/components/video-editor/editorDefaults";
import type {
AnnotationRegion,
CropRegion,
@@ -10,14 +15,7 @@ import type {
WebcamSizePreset,
ZoomRegion,
} from "@/components/video-editor/types";
import {
DEFAULT_CROP_REGION,
DEFAULT_WEBCAM_LAYOUT_PRESET,
DEFAULT_WEBCAM_MASK_SHAPE,
DEFAULT_WEBCAM_POSITION,
DEFAULT_WEBCAM_SIZE_PRESET,
} from "@/components/video-editor/types";
import { DEFAULT_WALLPAPER } from "@/lib/wallpaper";
import { DEFAULT_CROP_REGION } from "@/components/video-editor/types";
import type { AspectRatio } from "@/utils/aspectRatioUtils";
// Undoable state — selection IDs are intentionally excluded (undoing a
@@ -47,17 +45,17 @@ export const INITIAL_EDITOR_STATE: EditorState = {
speedRegions: [],
annotationRegions: [],
cropRegion: DEFAULT_CROP_REGION,
wallpaper: DEFAULT_WALLPAPER,
shadowIntensity: 0,
showBlur: false,
motionBlurAmount: 0,
borderRadius: 0,
padding: 50,
aspectRatio: "16:9",
webcamLayoutPreset: DEFAULT_WEBCAM_LAYOUT_PRESET,
webcamMaskShape: DEFAULT_WEBCAM_MASK_SHAPE,
webcamSizePreset: DEFAULT_WEBCAM_SIZE_PRESET,
webcamPosition: DEFAULT_WEBCAM_POSITION,
wallpaper: DEFAULT_EDITOR_LAYOUT_SETTINGS.wallpaper,
shadowIntensity: DEFAULT_EDITOR_APPEARANCE_SETTINGS.shadowIntensity,
showBlur: DEFAULT_EDITOR_APPEARANCE_SETTINGS.showBlur,
motionBlurAmount: DEFAULT_EDITOR_APPEARANCE_SETTINGS.motionBlurAmount,
borderRadius: DEFAULT_EDITOR_APPEARANCE_SETTINGS.borderRadius,
padding: DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
aspectRatio: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio,
webcamLayoutPreset: DEFAULT_WEBCAM_SETTINGS.layoutPreset,
webcamMaskShape: DEFAULT_WEBCAM_SETTINGS.maskShape,
webcamSizePreset: DEFAULT_WEBCAM_SETTINGS.sizePreset,
webcamPosition: DEFAULT_WEBCAM_SETTINGS.position,
};
type StateUpdate = Partial<EditorState> | ((prev: EditorState) => Partial<EditorState>);
src/hooks/useScreenRecorder.ts
+37 -2
View File
@@ -82,6 +82,7 @@ type RecorderHandle = {
type NativeWindowsRecordingHandle = {
recordingId: number;
finalizing: boolean;
paused: boolean;
webcamRecorder: RecorderHandle | null;
};
@@ -148,9 +149,9 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
const webcamAcquireId = useRef(0);
const canPauseRecording =
recording &&
!nativeWindowsRecording.current &&
Boolean(
(nativeMacRecording.current && !nativeMacRecording.current.finalizing) ||
(nativeWindowsRecording.current && !nativeWindowsRecording.current.finalizing) ||
(nativeMacRecording.current && !nativeMacRecording.current.finalizing) ||
(screenRecorder.current && screenRecorder.current.recorder.state !== "inactive"),
);
@@ -875,6 +876,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
nativeWindowsRecording.current = {
recordingId: result.recordingId,
finalizing: false,
paused: false,
webcamRecorder: browserWebcamRecorder,
};
webcamRecorder.current = browserWebcamRecorder;
@@ -1403,6 +1405,39 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
};
const togglePaused = () => {
const activeNativeWindowsRecording = nativeWindowsRecording.current;
if (activeNativeWindowsRecording && !activeNativeWindowsRecording.finalizing) {
void (async () => {
try {
if (activeNativeWindowsRecording.paused) {
const result = await window.electronAPI.resumeNativeWindowsRecording();
if (!result.success) {
throw new Error(result.error ?? "Failed to resume native Windows recording");
}
activeNativeWindowsRecording.paused = false;
segmentStartedAt.current = Date.now();
setPaused(false);
return;
}
const pausedAtMs = getRecordingDurationMs();
const result = await window.electronAPI.pauseNativeWindowsRecording();
if (!result.success) {
throw new Error(result.error ?? "Failed to pause native Windows recording");
}
activeNativeWindowsRecording.paused = true;
accumulatedDurationMs.current = pausedAtMs;
segmentStartedAt.current = null;
setElapsedSeconds(Math.floor(accumulatedDurationMs.current / 1000));
setPaused(true);
} catch (error) {
console.error("Failed to toggle native Windows pause state:", error);
toast.error(error instanceof Error ? error.message : "Failed to toggle pause state");
}
})();
return;
}
const activeNativeMacRecording = nativeMacRecording.current;
if (activeNativeMacRecording && !activeNativeMacRecording.finalizing) {
void (async () => {
src/lib/userPreferences.ts
+9 -5
View File
@@ -1,3 +1,7 @@
import {
DEFAULT_EDITOR_LAYOUT_SETTINGS,
DEFAULT_EXPORT_SETTINGS,
} from "@/components/video-editor/editorDefaults";
import type { ExportFormat, ExportQuality } from "@/lib/exporter";
import type { AspectRatio } from "@/utils/aspectRatioUtils";
@@ -27,11 +31,11 @@ export interface UserPreferences {
exportFolder: string | null;
}
const DEFAULT_PREFS: UserPreferences = {
padding: 50,
aspectRatio: "16:9",
exportQuality: "good",
exportFormat: "mp4",
export const DEFAULT_PREFS: UserPreferences = {
padding: DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
aspectRatio: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio,
exportQuality: DEFAULT_EXPORT_SETTINGS.quality,
exportFormat: DEFAULT_EXPORT_SETTINGS.format,
exportFolder: null,
};