From 90c3c4bf7f4d932c67c2a272577ee8a122b195f0 Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Wed, 2 Apr 2025 14:17:52 +0000
Subject: [PATCH] feat(electron): recording popup ux (#11403)

fix AF-2444, AF-2443
---
 .../electron-renderer/src/popup/recording/styles.css.ts   | 1 +
 .../apps/electron/src/main/windows-manager/popup.ts       | 7 +++++--
 .../apps/electron/src/main/windows-manager/tab-views.ts   | 2 +-
 .../component/src/ui/lottie/animated-play-icon.tsx        | 8 ++++++++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/apps/electron-renderer/src/popup/recording/styles.css.ts b/packages/frontend/apps/electron-renderer/src/popup/recording/styles.css.ts
index 1315337a73..b9a905a447 100644
--- a/packages/frontend/apps/electron-renderer/src/popup/recording/styles.css.ts
+++ b/packages/frontend/apps/electron-renderer/src/popup/recording/styles.css.ts
@@ -9,6 +9,7 @@ export const root = style({
   display: 'flex',
   gap: 4,
   alignItems: 'center',
+  ['WebkitAppRegion' as string]: 'drag',
 });
 
 export const affineIcon = style({
diff --git a/packages/frontend/apps/electron/src/main/windows-manager/popup.ts b/packages/frontend/apps/electron/src/main/windows-manager/popup.ts
index b026588bfe..a9cf23399c 100644
--- a/packages/frontend/apps/electron/src/main/windows-manager/popup.ts
+++ b/packages/frontend/apps/electron/src/main/windows-manager/popup.ts
@@ -70,13 +70,11 @@ abstract class PopupWindow {
 
   async build(): Promise<BrowserWindow> {
     const browserWindow = new BrowserWindow({
-      ...this.windowOptions,
       resizable: false,
       minimizable: false,
       maximizable: false,
       closable: false,
       alwaysOnTop: true,
-      focusable: false,
       hiddenInMissionControl: true,
       movable: false,
       titleBarStyle: 'hidden',
@@ -84,6 +82,7 @@ abstract class PopupWindow {
       backgroundColor: 'transparent',
       visualEffectState: 'active',
       vibrancy: 'under-window',
+      ...this.windowOptions,
       webPreferences: {
         ...this.windowOptions.webPreferences,
         webgl: true,
@@ -99,6 +98,9 @@ abstract class PopupWindow {
 
     // required to make the window transparent
     browserWindow.setBackgroundColor('#00000000');
+    browserWindow.setVisibleOnAllWorkspaces(true, {
+      visibleOnFullScreen: true,
+    });
 
     browserWindow.loadURL(popupViewUrl).catch(err => logger.error(err));
     browserWindow.on('ready-to-show', () => {
@@ -199,6 +201,7 @@ class RecordingPopupWindow extends PopupWindow {
   windowOptions: Partial<BrowserWindowConstructorOptions> = {
     width: RECORDING_SIZE[0],
     height: RECORDING_SIZE[1],
+    movable: true,
   };
 }
 
diff --git a/packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts b/packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts
index 8015e11e43..750f7ad892 100644
--- a/packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts
+++ b/packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts
@@ -756,7 +756,7 @@ export class WebContentViewsManager {
       }, 100);
     };
 
-    app.on('browser-window-focus', () => {
+    this.mainWindow?.on('focus', () => {
       focusActiveView();
     });
 
diff --git a/packages/frontend/component/src/ui/lottie/animated-play-icon.tsx b/packages/frontend/component/src/ui/lottie/animated-play-icon.tsx
index bd455e0b5d..ec19d918e2 100644
--- a/packages/frontend/component/src/ui/lottie/animated-play-icon.tsx
+++ b/packages/frontend/component/src/ui/lottie/animated-play-icon.tsx
@@ -25,6 +25,14 @@ const PlayAndPauseIcon = ({
   const lottieRef: LottieRef = useRef(null);
   const prevStateRef = useRef(state);
 
+  useEffect(() => {
+    if (!lottieRef.current) return;
+    const lottie = lottieRef.current;
+    if (prevStateRef.current === 'pause') {
+      lottie.goToAndStop(100, true);
+    }
+  }, []);
+
   useEffect(() => {
     if (!lottieRef.current) return;
     const lottie = lottieRef.current;