quick media viewer (using new hmac read-file urls)

* checkpoint on pdf viewer

* implement a pdf renderer (fix emain shFrameNavHandler to allow it)

assets/default-keybindings.json

@@ -3,6 +3,10 @@
       "command": "system:toggleDeveloperTools",
       "keys": ["Cmd:Option:i"]
     },
+    {
+      "command": "system:hideWindow",
+      "keys": ["Cmd:m"]
+    },
     {
       "command": "generic:cancel",
       "keys": ["Escape"]
@@ -32,7 +36,7 @@
       "keys": ["PageDown"]
     },
     {
-      "command": "app:openHistory",
+      "command": "app:openHistoryView",
       "keys": ["Cmd:h"]
     },
     {
@@ -41,11 +45,13 @@
     },
     {
       "command": "app:openConnectionsView", 
-      "keys": []
+      "keys": [],
+      "commandStr": "/mainview connections"
     },
     {
       "command": "app:openSettingsView", 
-      "keys": []
+      "keys": [],
+      "commandStr": "/mainview clientsettings"
     },
     {
       "command": "app:newTab",
@@ -125,39 +131,48 @@
     },
     {
       "command": "app:selectWorkspace-1",
-      "keys": ["Cmd:Ctrl:1"]
+      "keys": ["Cmd:Ctrl:1"],
+      "commandStr": "/session 1"
     },
     {
       "command": "app:selectWorkspace-2",
-      "keys": ["Cmd:Ctrl:2"]
+      "keys": ["Cmd:Ctrl:2"],
+      "commandStr": "/session 2"
     },
     {
       "command": "app:selectWorkspace-3",
-      "keys": ["Cmd:Ctrl:3"]
+      "keys": ["Cmd:Ctrl:3"],
+      "commandStr": "/session 3"
     },
     {
       "command": "app:selectWorkspace-4",
-      "keys": ["Cmd:Ctrl:4"]
+      "keys": ["Cmd:Ctrl:4"],
+      "commandStr": "/session 4"
     },
     {
       "command": "app:selectWorkspace-5",
-      "keys": ["Cmd:Ctrl:5"]
+      "keys": ["Cmd:Ctrl:5"],
+      "commandStr": "/session 5"
     },
     {
       "command": "app:selectWorkspace-6",
-      "keys": ["Cmd:Ctrl:6"]
+      "keys": ["Cmd:Ctrl:6"],
+      "commandStr": "/session 6"
     },
     {
       "command": "app:selectWorkspace-7",
-      "keys": ["Cmd:Ctrl:7"]
+      "keys": ["Cmd:Ctrl:7"],
+      "commandStr": "/session 7"
     },
     {
       "command": "app:selectWorkspace-8",
-      "keys": ["Cmd:Ctrl:8"]
+      "keys": ["Cmd:Ctrl:8"],
+      "commandStr": "/session 8"
     },
     {
       "command": "app:selectWorkspace-9",
-      "keys": ["Cmd:Ctrl:9"]
+      "keys": ["Cmd:Ctrl:9"],
+      "commandStr": "/session 9"
     },
     {
       "command": "app:toggleSidebar",
@@ -168,8 +183,9 @@
       "keys": ["Cmd:d"]
     },
     {
-      "command": "app:bookmarkActiveLine",
-      "keys": ["Cmd:b"]
+      "command": "app:openBookmarksView",
+      "keys": ["Cmd:b"],
+      "commandStr": "/bookmarks:show"
     },
     {
       "command": "bookmarks:edit",
@@ -213,7 +229,8 @@
     },
     {
       "command": "cmdinput:openHistory",
-      "keys": ["Ctrl:r"]
+      "keys": ["Ctrl:r"],
+      "commandStr": "/history"
     },
     {
       "command": "cmdinput:openAIChat",

public/themes/term-default.css

@@ -3,7 +3,7 @@
 
 :root {
     /* 
-     * term colors (16 + 5) form the base terminal theme 
+     * term colors (16 + 6) form the base terminal theme 
      * for consistency these colors should be used by plugins/applications
      */
     --term-black: #000000;
@@ -27,5 +27,6 @@
     --term-cmdtext: #ffffff;
     --term-foreground: #d3d7cf;
     --term-background: #000000;
-    --term-selection-background: #ffffff40;
+    --term-selection-background: #ffffff90;
+    --term-cursor-accent: #000000;
 }

public/themes/term-light.css

@@ -6,5 +6,6 @@
     --term-foreground: #000000;
     --term-background: #fefefe;
     --term-cmdtext: #000000;
-    --term-selection-background: #00000018;
+    --term-selection-background: #00000040;
+    --term-cursor-accent: #000000;
 }

src/app/bookmarks/bookmarks.tsx

@@ -193,7 +193,7 @@ class BookmarksView extends React.Component<{}, {}> {
         let bookmarks = GlobalModel.bookmarksModel.bookmarks;
         let bookmark: BookmarkType = null;
         return (
-            <MainView viewName="bookmarks" title="Bookmarks" onClose={this.handleClose}>
+            <MainView className="bookmarks-view" title="Bookmarks" onClose={this.handleClose}>
                 <div className="bookmarks-list">
                     <For index="idx" each="bookmark" of={bookmarks}>
                         <Bookmark key={bookmark.bookmarkid} bookmark={bookmark} />

src/app/clientsettings/clientsettings.tsx

@@ -87,6 +87,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const availableFontFamilies: DropdownItem[] = [];
         availableFontFamilies.push({ label: "JetBrains Mono", value: "JetBrains Mono" });
         availableFontFamilies.push({ label: "Hack", value: "Hack" });
+        availableFontFamilies.push({ label: "Fira Code", value: "Fira Code" });
         return availableFontFamilies;
     }
 

src/app/common/modals/alert.tsx

@@ -44,7 +44,7 @@ class AlertModal extends React.Component<{}, {}> {
                         <Markdown text={message?.message ?? ""} extraClassName="bottom-margin" />
                     </If>
                     <If condition={!message?.markdown}>{message?.message}</If>
-                    <If condition={message.confirmflag}>
+                    <If condition={message?.confirmflag}>
                         <Checkbox
                             onChange={this.handleDontShowAgain}
                             label={"Don't show me this again"}

src/electron/emain.ts

@@ -263,7 +263,12 @@ const menuTemplate: Electron.MenuItemConstructorOptions[] = [
             { type: "separator" },
             { role: "services" },
             { type: "separator" },
-            { role: "hide" },
+            {
+                label: "Hide",
+                click: () => {
+                    app.hide();
+                },
+            },
             { role: "hideOthers" },
             { type: "separator" },
             { role: "quit" },
@@ -518,6 +523,13 @@ electron.ipcMain.on("toggle-developer-tools", (event) => {
     event.returnValue = true;
 });
 
+electron.ipcMain.on("hide-window", (event) => {
+    if (MainWindow != null) {
+        MainWindow.hide();
+    }
+    event.returnValue = true;
+});
+
 electron.ipcMain.on("get-id", (event) => {
     event.returnValue = instanceId + ":" + event.processId;
 });

src/electron/preload.js

@@ -1,6 +1,7 @@
 let { contextBridge, ipcRenderer } = require("electron");
 
 contextBridge.exposeInMainWorld("api", {
+    hideWindow: () => ipc.Renderer.send("hide-window"),
     toggleDeveloperTools: () => ipcRenderer.send("toggle-developer-tools"),
     getId: () => ipcRenderer.sendSync("get-id"),
     getPlatform: () => ipcRenderer.sendSync("get-platform"),

src/models/bookmarks.ts

@@ -206,7 +206,7 @@ class BookmarksModel {
     }
 
     handleDocKeyDown(e: any): void {
-        let waveEvent = adaptFromReactOrNativeKeyEvent(e);
+        const waveEvent = adaptFromReactOrNativeKeyEvent(e);
         if (checkKeyPressed(waveEvent, "Escape")) {
             e.preventDefault();
             if (this.editingBookmark.get() != null) {

src/models/clientsettingsview.ts

@@ -3,6 +3,7 @@
 
 import * as mobx from "mobx";
 import { Model } from "./model";
+import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
 
 class ClientSettingsViewModel {
     globalModel: Model;
@@ -21,6 +22,15 @@ class ClientSettingsViewModel {
             this.globalModel.activeMainView.set("clientsettings");
         })();
     }
+
+    handleDocKeyDown(e: any): void {
+        const waveEvent = adaptFromReactOrNativeKeyEvent(e);
+        if (checkKeyPressed(waveEvent, "Escape")) {
+            e.preventDefault();
+            this.closeView();
+            return;
+        }
+    }
 }
 
 export { ClientSettingsViewModel };

src/models/commandrunner.ts

@@ -304,6 +304,10 @@ class CommandRunner {
         GlobalModel.clientSettingsViewModel.showClientSettingsView();
     }
 
+    syncShellState() {
+        GlobalModel.submitCommand("sync", null, null, { nohist: "1" }, false);
+    }
+
     historyView(params: HistorySearchParams) {
         let kwargs = { nohist: "1" };
         kwargs["offset"] = String(params.offset);

src/models/connectionsview.ts

@@ -3,6 +3,7 @@
 
 import * as mobx from "mobx";
 import { Model } from "./model";
+import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
 
 class ConnectionsViewModel {
     globalModel: Model;
@@ -21,6 +22,15 @@ class ConnectionsViewModel {
             this.globalModel.activeMainView.set("connections");
         })();
     }
+
+    handleDocKeyDown(e: any): void {
+        const waveEvent = adaptFromReactOrNativeKeyEvent(e);
+        if (checkKeyPressed(waveEvent, "Escape")) {
+            e.preventDefault();
+            this.closeView();
+            return;
+        }
+    }
 }
 
 export { ConnectionsViewModel };

src/models/historyview.ts

@@ -291,7 +291,7 @@ class HistoryViewModel {
     }
 
     handleDocKeyDown(e: any): void {
-        let waveEvent = adaptFromReactOrNativeKeyEvent(e);
+        const waveEvent = adaptFromReactOrNativeKeyEvent(e);
         if (checkKeyPressed(waveEvent, "Escape")) {
             e.preventDefault();
             this.closeView();

src/models/modals.ts

@@ -18,10 +18,11 @@ class ModalsModel {
         }
     }
 
-    popModal() {
+    popModal(callback?: () => void) {
         mobx.action(() => {
             this.store.pop();
         })();
+        callback && callback();
     }
 }
 

src/models/model.ts

@@ -143,7 +143,7 @@ class Model {
             this.runUpdate(message, interactive);
         });
         this.ws.reconnect();
-        this.keybindManager = new KeybindManager();
+        this.keybindManager = new KeybindManager(this);
         this.readConfigKeybindings();
         this.initSystemKeybindings();
         this.initAppKeybindings();
@@ -222,46 +222,31 @@ class Model {
             getApi().toggleDeveloperTools();
             return true;
         });
+        this.keybindManager.registerKeybinding("system", "electron", "system:minimizeWindow", (waveEvent) => {
+            getApi().hideWindow();
+            return true;
+        });
     }
 
     initAppKeybindings() {
         for (let index = 1; index <= 9; index++) {
-            this.keybindManager.registerKeybinding("app", "model", "app:selectWorkspace-" + index, (waveEvent) => {
-                this.onSwitchSessionCmd(index);
-                return true;
-            });
+            this.keybindManager.registerKeybinding("app", "model", "app:selectWorkspace-" + index, null);
         }
-
         this.keybindManager.registerKeybinding("app", "model", "app:focusCmdInput", (waveEvent) => {
-            console.log("focus cmd input callback");
             this.onFocusCmdInputPressed();
             return true;
         });
-
-        this.keybindManager.registerKeybinding("app", "model", "app:bookmarkActiveLine", (waveEvent) => {
-            this.onBookmarkViewPressed();
-            return true;
-        });
-
-        this.keybindManager.registerKeybinding("app", "model", "app:openHistory", (waveEvent) => {
+        this.keybindManager.registerKeybinding("app", "model", "app:openBookmarksView", null);
+        this.keybindManager.registerKeybinding("app", "model", "app:openHistoryView", (waveEvent) => {
             this.onOpenHistoryPressed();
             return true;
         });
-
         this.keybindManager.registerKeybinding("app", "model", "app:openTabSearchModal", (waveEvent) => {
             this.onOpenTabSearchModalPressed();
             return true;
         });
-
-        this.keybindManager.registerKeybinding("app", "model", "app:openConnectionsView", (waveEvent) => {
-            this.onOpenConnectionsViewPressed();
-            return true;
-        });
-
-        this.keybindManager.registerKeybinding("app", "model", "app:openSettingsView", (waveEvent) => {
-            this.onOpenSettingsViewPressed();
-            return true;
-        });
+        this.keybindManager.registerKeybinding("app", "model", "app:openConnectionsView", null);
+        this.keybindManager.registerKeybinding("app", "model", "app:openSettingsView", null);
     }
 
     static getInstance(): Model {
@@ -372,7 +357,6 @@ class Model {
     cancelAlert(): void {
         mobx.action(() => {
             this.alertMessage.set(null);
-            this.modalsModel.popModal();
         })();
         if (this.alertPromiseResolver != null) {
             this.alertPromiseResolver(false);
@@ -493,7 +477,7 @@ class Model {
         if (this.alertMessage.get() != null) {
             if (checkKeyPressed(waveEvent, "Escape")) {
                 e.preventDefault();
-                this.cancelAlert();
+                this.modalsModel.popModal(() => this.cancelAlert());
                 return;
             }
             if (checkKeyPressed(waveEvent, "Enter")) {
@@ -503,6 +487,10 @@ class Model {
             }
             return;
         }
+        if (checkKeyPressed(waveEvent, "Escape") && this.modalsModel.store.length > 0) {
+            this.modalsModel.popModal();
+            return;
+        }
         if (this.activeMainView.get() == "bookmarks") {
             this.bookmarksModel.handleDocKeyDown(e);
         }
@@ -510,10 +498,10 @@ class Model {
             this.historyViewModel.handleDocKeyDown(e);
         }
         if (this.activeMainView.get() == "connections") {
-            this.historyViewModel.handleDocKeyDown(e);
+            this.connectionViewModel.handleDocKeyDown(e);
         }
         if (this.activeMainView.get() == "clientsettings") {
-            this.historyViewModel.handleDocKeyDown(e);
+            this.clientSettingsViewModel.handleDocKeyDown(e);
         } else {
             if (checkKeyPressed(waveEvent, "Escape")) {
                 e.preventDefault();
@@ -521,9 +509,6 @@ class Model {
                     this.showSessionView();
                     return;
                 }
-                if (this.clearModals()) {
-                    return;
-                }
                 const inputModel = this.inputModel;
                 inputModel.toggleInfoMsg();
                 if (inputModel.inputMode.get() != null) {
@@ -643,33 +628,6 @@ class Model {
         return screen.getTermWrap(line.lineid);
     }
 
-    clearModals(): boolean {
-        let didSomething = false;
-        mobx.action(() => {
-            if (this.screenSettingsModal.get()) {
-                this.screenSettingsModal.set(null);
-                didSomething = true;
-            }
-            if (this.sessionSettingsModal.get()) {
-                this.sessionSettingsModal.set(null);
-                didSomething = true;
-            }
-            if (this.screenSettingsModal.get()) {
-                this.screenSettingsModal.set(null);
-                didSomething = true;
-            }
-            if (this.clientSettingsModal.get()) {
-                this.clientSettingsModal.set(false);
-                didSomething = true;
-            }
-            if (this.lineSettingsModal.get()) {
-                this.lineSettingsModal.set(null);
-                didSomething = true;
-            }
-        })();
-        return didSomething;
-    }
-
     restartWaveSrv(): void {
         getApi().restartWaveSrv();
     }
@@ -1023,6 +981,12 @@ class Model {
                                 console.warn("invalid bookmarksview in update:", update.mainview);
                             }
                             break;
+                        case "clientsettings":
+                            this.activeMainView.set("clientsettings");
+                            break;
+                        case "connections":
+                            this.activeMainView.set("connections");
+                            break;
                         case "plugins":
                             this.pluginsModel.showPluginsView();
                             break;
@@ -1086,6 +1050,9 @@ class Model {
                 this.activeMainView.set("session");
                 this.deactivateScreenLines();
                 this.ws.watchScreen(newActiveSessionId, newActiveScreenId);
+                setTimeout(() => {
+                    GlobalCommandRunner.syncShellState();
+                }, 100);
             }
         } else {
             console.warn("unknown update", genUpdate);

src/plugins/image/image.less

@@ -1,4 +1,10 @@
 .image-renderer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--termpad);
+
     img {
         display: block;
     }

src/plugins/media/media.less

@@ -0,0 +1,7 @@
+.media-renderer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--termpad);
+}

src/plugins/media/media.tsx

@@ -0,0 +1,49 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import * as mobx from "mobx";
+import * as mobxReact from "mobx-react";
+import { GlobalModel } from "@/models";
+
+import "./media.less";
+
+@mobxReact.observer
+class SimpleMediaRenderer extends React.Component<
+    { data: ExtBlob; context: RendererContext; opts: RendererOpts; savedHeight: number; lineState: LineStateType },
+    {}
+> {
+    objUrl: string = null;
+
+    componentWillUnmount() {
+        if (this.objUrl != null) {
+            URL.revokeObjectURL(this.objUrl);
+        }
+    }
+
+    render() {
+        let dataBlob = this.props.data;
+        if (dataBlob == null || dataBlob.notFound) {
+            return (
+                <div className="media-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
+                    <div className="load-error-text">
+                        ERROR: file {dataBlob && dataBlob.name ? JSON.stringify(dataBlob.name) : ""} not found
+                    </div>
+                </div>
+            );
+        }
+        let videoUrl = GlobalModel.getBaseHostPort() + this.props.lineState["wave:fileurl"];
+        const opts = this.props.opts;
+        const maxHeight = opts.maxSize.height - 10;
+        const maxWidth = opts.maxSize.width - 10;
+        return (
+            <div className="media-renderer">
+                <video width="320" height="240" controls>
+                    <source src={videoUrl} />
+                </video>
+            </div>
+        );
+    }
+}
+
+export { SimpleMediaRenderer };