fix: UX quirks in fullscreen on inactivity

Author: peterpeterparker

studio/src/app/pages/editor/app-editor/app-editor.tsx

@@ -244,7 +244,9 @@ export class AppEditor {
     async inactivity($event: CustomEvent) {
         this.presenting = !$event.detail;
 
-        await this.editorEventsHandler.selectDeck();
+        if (!this.presenting) {
+            await this.hideToolbar();
+        }
 
         // Wait a bit for the display/repaint of the footer
         setTimeout(async () => {
@@ -315,6 +317,21 @@ export class AppEditor {
     }
 
     private hideToolbar(): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            const toolbar: HTMLAppEditorToolbarElement = this.el.querySelector('app-editor-toolbar');
+
+            if (!toolbar) {
+                resolve();
+                return;
+            }
+
+            await toolbar.hideToolbar();
+
+            resolve();
+        });
+    }
+
+    private onSlideChangeHideToolbar(): Promise<void> {
         return new Promise<void>(async (resolve) => {
             const toolbar: HTMLAppEditorToolbarElement = this.el.querySelector('app-editor-toolbar');
 
@@ -367,6 +384,12 @@ export class AppEditor {
                 return;
             }
 
+            // Need to move a bit the mouse first to detect that we want to edit, otherwise we might select the deck with a click without displaying the toolbar footer
+            if (this.fullscreen && this.presenting) {
+                resolve();
+                return;
+            }
+
             const element: HTMLElement = $event.target as HTMLElement;
 
             await this.touchToolbar(element);
@@ -467,9 +490,9 @@ export class AppEditor {
                     <deckgo-deck embedded={true} style={this.style}
                                  onMouseDown={(e: MouseEvent) => this.deckTouched(e)}
                                  onTouchStart={(e: TouchEvent) => this.deckTouched(e)}
-                                 onSlideNextDidChange={() => this.hideToolbar()}
-                                 onSlidePrevDidChange={() => this.hideToolbar()}
-                                 onSlideToChange={() => this.hideToolbar()}
+                                 onSlideNextDidChange={() => this.onSlideChangeHideToolbar()}
+                                 onSlidePrevDidChange={() => this.onSlideChangeHideToolbar()}
+                                 onSlideToChange={() => this.onSlideChangeHideToolbar()}
                                  onMouseInactivity={($event: CustomEvent) => this.inactivity($event)}>
                         {this.slides}
                         {this.background}