From bc54b2a8c9ebefe4c6aaf9de69b4e16e6aa97a2c Mon Sep 17 00:00:00 2001 From: webadderall <131426131+webadderall@users.noreply.github.com> Date: Sat, 28 Mar 2026 23:21:53 +1100 Subject: [PATCH] fix(desktop): polish editor chrome --- electron/main.ts | 36 +++++++------- electron/native/wgc-capture/src/mf_encoder.h | 2 + electron/windows.ts | 13 +++-- src/components/video-editor/TutorialHelp.tsx | 11 +++-- src/components/video-editor/VideoEditor.tsx | 50 ++++++++++++-------- 5 files changed, 68 insertions(+), 44 deletions(-) diff --git a/electron/main.ts b/electron/main.ts index 1beaac80..7e9ce79e 100644 --- a/electron/main.ts +++ b/electron/main.ts @@ -179,25 +179,27 @@ function sendEditorMenuAction( function setupApplicationMenu() { const isMac = process.platform === "darwin"; - const template: Electron.MenuItemConstructorOptions[] = []; - - if (isMac) { - template.push({ - label: app.name, - submenu: [ - { role: "about" }, - { type: "separator" }, - { role: "services" }, - { type: "separator" }, - { role: "hide" }, - { role: "hideOthers" }, - { role: "unhide" }, - { type: "separator" }, - { role: "quit" }, - ], - }); + if (!isMac) { + Menu.setApplicationMenu(null); + return; } + const template: Electron.MenuItemConstructorOptions[] = []; + template.push({ + label: app.name, + submenu: [ + { role: "about" }, + { type: "separator" }, + { role: "services" }, + { type: "separator" }, + { role: "hide" }, + { role: "hideOthers" }, + { role: "unhide" }, + { type: "separator" }, + { role: "quit" }, + ], + }); + template.push( { label: "File", diff --git a/electron/native/wgc-capture/src/mf_encoder.h b/electron/native/wgc-capture/src/mf_encoder.h index 7eb8e642..c0855713 100644 --- a/electron/native/wgc-capture/src/mf_encoder.h +++ b/electron/native/wgc-capture/src/mf_encoder.h @@ -6,6 +6,7 @@ #include #include #include +#include #include #include @@ -32,4 +33,5 @@ private: int height_ = 0; int fps_ = 60; bool initialized_ = false; + std::mutex mutex_; }; diff --git a/electron/windows.ts b/electron/windows.ts index c68fc5bc..16a619da 100644 --- a/electron/windows.ts +++ b/electron/windows.ts @@ -397,11 +397,17 @@ export function hideUpdateToastWindow(): void { export function createEditorWindow(): BrowserWindow { const isMac = process.platform === "darwin"; - const { width, height } = getScreen().getPrimaryDisplay().workAreaSize; + const { workArea, workAreaSize } = getScreen().getPrimaryDisplay(); + const initialWidth = isMac ? Math.round(workAreaSize.width * 0.85) : workArea.width; + const initialHeight = isMac ? Math.round(workAreaSize.height * 0.85) : workArea.height; const win = new BrowserWindow({ - width: Math.round(width * 0.85), - height: Math.round(height * 0.85), + width: initialWidth, + height: initialHeight, + ...(!isMac && { + x: workArea.x, + y: workArea.y, + }), minWidth: 800, minHeight: 600, ...(process.platform !== "darwin" && { @@ -411,6 +417,7 @@ export function createEditorWindow(): BrowserWindow { titleBarStyle: "hiddenInset", trafficLightPosition: { x: 12, y: 12 }, }), + autoHideMenuBar: !isMac, transparent: false, resizable: true, alwaysOnTop: false, diff --git a/src/components/video-editor/TutorialHelp.tsx b/src/components/video-editor/TutorialHelp.tsx index 94ad1b3c..c69c26f4 100644 --- a/src/components/video-editor/TutorialHelp.tsx +++ b/src/components/video-editor/TutorialHelp.tsx @@ -19,6 +19,7 @@ const RECORDLY_ISSUES_URL = "https://github.com/webadderall/Recordly/issues"; const RECORDLY_X_URL = "https://x.com/webadderall"; const CONTACT_EMAIL = "youngchen3442@gmail.com"; export const APP_HEADER_ACTION_BUTTON_CLASS = "h-7 px-2 text-xs text-slate-400 hover:bg-white/10 hover:text-slate-200 transition-all gap-1.5"; +export const APP_HEADER_ICON_BUTTON_CLASS = "h-7 w-7 p-0 text-slate-400 hover:bg-white/10 hover:text-slate-200 transition-all"; async function openExternalLink(url: string, errorMessage: string) { try { @@ -40,10 +41,11 @@ export function FeedbackDialog() { @@ -129,10 +131,11 @@ export function KeyboardShortcutsDialog() { diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx index 3c4d329b..c5bac10f 100644 --- a/src/components/video-editor/VideoEditor.tsx +++ b/src/components/video-editor/VideoEditor.tsx @@ -4,7 +4,6 @@ import { Captions, Download, FolderOpen, - Languages, MousePointer2, Redo2, Save, @@ -62,7 +61,7 @@ import { } from "./projectPersistence"; import { type EditorEffectSection, SettingsPanel } from "./SettingsPanel"; import { - APP_HEADER_ACTION_BUTTON_CLASS, + APP_HEADER_ICON_BUTTON_CLASS, FeedbackDialog, KeyboardShortcutsDialog, } from "./TutorialHelp"; @@ -289,18 +288,20 @@ function LanguageSwitcher() { variant="ghost" size="sm" onClick={() => setLocale(next)} - className={APP_HEADER_ACTION_BUTTON_CLASS} + className="h-7 rounded-[5px] px-2 text-[11px] font-semibold leading-none text-slate-300 hover:bg-white/10 hover:text-white transition-all" title={t("common.app.language", "Language")} aria-label={t("common.app.language", "Language")} > - - {labels[locale] ?? locale.toUpperCase()} + {labels[locale] ?? locale.toUpperCase()} ); } export default function VideoEditor() { const { t } = useI18n(); + const [appPlatform, setAppPlatform] = useState( + typeof navigator !== "undefined" && /Mac/i.test(navigator.platform) ? "darwin" : "", + ); const initialEditorPreferences = useMemo(() => loadEditorPreferences(), []); const [videoPath, setVideoPath] = useState(null); const [videoSourcePath, setVideoSourcePath] = useState(null); @@ -416,6 +417,7 @@ export default function VideoEditor() { const [lastSavedSnapshot, setLastSavedSnapshot] = useState(null); const [showCropModal, setShowCropModal] = useState(false); const [previewVersion, setPreviewVersion] = useState(0); + const headerLeftControlsPaddingClass = appPlatform === "darwin" ? "pl-[76px]" : ""; const videoPlaybackRef = useRef(null); const projectBrowserTriggerRef = useRef(null); @@ -438,6 +440,12 @@ export default function VideoEditor() { const cropSnapshotRef = useRef(null); const mp4SupportRequestRef = useRef(0); const [historyVersion, setHistoryVersion] = useState(0); + + useEffect(() => { + void window.electronAPI.getPlatform().then((platform) => { + setAppPlatform(platform); + }); + }, []); const [supportedMp4SourceDimensions, setSupportedMp4SourceDimensions] = useState({ width: 1920, @@ -2949,17 +2957,11 @@ export default function VideoEditor() { return (
-
- - {projectDisplayName} - - .recordly -
@@ -2968,7 +2970,7 @@ export default function VideoEditor() { variant="ghost" size="sm" onClick={() => void openRecordingsFolder()} - className={`${APP_HEADER_ACTION_BUTTON_CLASS} px-2.5`} + className={APP_HEADER_ICON_BUTTON_CLASS} title={t("common.app.manageRecordings", "Open recordings folder")} aria-label={t("common.app.manageRecordings", "Open recordings folder")} > @@ -2977,11 +2979,6 @@ export default function VideoEditor() {
-
-
-
+
+
+ + {projectDisplayName} + + .recordly +
+