add webshare into settings

scripthaus.md

@@ -49,6 +49,12 @@ node_modules/.bin/webpack-dev-server --config webpack.dev.js --host 0.0.0.0
 node_modules/.bin/webpack-dev-server --config webpack.share.dev.js --host 127.0.0.1
 ```
 
+```bash
+# @scripthaus command webshare-build
+# @scripthaus cd :playbook
+node_modules/.bin/webpack --config webpack.share.dev.js
+```
+
 ```bash
 # @scripthaus command typecheck
 # @scripthaus cd :playbook
@@ -121,3 +127,11 @@ rm *.dmg
   $DMG_NAME \
   "out/Prompt-darwin-arm64/Prompt.app"
 ```
+
+```bash
+# @scripthaus command sync-webshare-dev
+# @scripthaus cd :playbook
+aws --profile prompt-s3 s3 cp webshare/static/index.html s3://prompt-devshare-static/ --cache-control 'public, max-age=600, s-maxage=300, stale-if-error=60'
+aws --profile prompt-s3 s3 sync webshare/static s3://prompt-devshare-static/static --cache-control 'public, max-age=600, s-maxage=300, stale-if-error=60'
+aws --profile prompt-s3 s3 sync webshare/dist-dev s3://prompt-devshare-static/ --cache-control 'public, max-age=600, s-maxage=300, stale-if-error=60'
+```

src/main.tsx

@@ -1830,7 +1830,7 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
                         </If>
                     </div>
                 </div>
-                <If condition={screen.isWebShare()}>
+                <If condition={screen.isWebShared()}>
                     <div key="share-tag" className="share-tag">
                         <If condition={this.shareCopied.get()}>
                             <div className="copied-indicator"/>
@@ -1987,7 +1987,7 @@ class ScreenTabs extends React.Component<{session : Session}, {}> {
                     <For each="screen" index="index" of={showingScreens}>
                         <div key={screen.screenId} data-screenid={screen.screenId} className={cn("screen-tab", {"is-active": activeScreenId == screen.screenId, "is-archived": screen.archived.get()}, "color-" + screen.getTabColor())} onClick={() => this.handleSwitchScreen(screen.screenId)} onContextMenu={(event) => this.openScreenSettings(event, screen)}>
                             <If condition={screen.archived.get()}><i title="archived" className="fa-sharp fa-solid fa-box-archive"/></If>
-                            <If condition={screen.isWebShare()}><i title="archived" className="fa-sharp fa-solid fa-share-nodes web-share-icon"/></If>
+                            <If condition={screen.isWebShared()}><i title="archived" className="fa-sharp fa-solid fa-share-nodes web-share-icon"/></If>
                             {screen.name.get()}
                             <If condition={index+1 <= 9}>
                                 <div className="tab-index">{renderCmdText(String(index+1))}</div>

src/model.ts

@@ -259,7 +259,7 @@ class Screen {
     dispose() {
     }
 
-    isWebShare() : boolean {
+    isWebShared() : boolean {
         return (this.shareMode.get() == "web") && (this.webShareOpts.get() != null);
     }
 
@@ -3202,6 +3202,12 @@ class CommandRunner {
         GlobalModel.submitCommand("screen", "archive", [screenId, (shouldArchive ? "1" : "0")], {"nohist": "1"}, false);
     }
 
+    screenWebShare(screenId : string, shouldShare : boolean) {
+        let kwargs : Record<string, string> = {"nohist": "1"};
+        kwargs["screen"] = screenId;
+        GlobalModel.submitCommand("screen", "webshare", [(shouldShare ? "1" : "0")], kwargs, true);
+    }
+
     showRemote(remoteid : string) {
         GlobalModel.submitCommand("remote", "show", null, {"nohist": "1", "remote": remoteid}, true);
     }

src/settings.tsx

@@ -25,6 +25,8 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
     tempName : OV<string>;
     tempTabColor : OV<string>;
     tempArchived : OV<boolean>;
+    tempWebShared : OV<boolean>;
+    shareCopied : OV<boolean> = mobx.observable.box(false, {name: "sw-shareCopied"});
 
     constructor(props : any) {
         super(props);
@@ -36,6 +38,7 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
         this.tempName = mobx.observable.box(screen.name.get(), {name: "screenSettings-tempName"});
         this.tempTabColor = mobx.observable.box(screen.getTabColor(), {name: "screenSettings-tempTabColor"});
         this.tempArchived = mobx.observable.box(screen.archived.get(), {name: "screenSettings-tempArchived"});
+        this.tempWebShared = mobx.observable.box(screen.isWebShared(), {name: "screenSettings-tempWebShare"});
     }
     
     @boundMethod
@@ -67,6 +70,9 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
         if (this.tempArchived.get() != screen.archived.get()) {
             GlobalCommandRunner.screenArchive(screen.screenId, this.tempArchived.get());
         }
+        if (this.tempWebShared.get() != screen.isWebShared()) {
+            GlobalCommandRunner.screenWebShare(screen.screenId, this.tempWebShared.get());
+        }
     }
 
     @boundMethod
@@ -90,6 +96,44 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
         })();
     }
 
+    @boundMethod
+    handleChangeWebShare(val : boolean) : void {
+        mobx.action(() => {
+            this.tempWebShared.set(val);
+        })();
+    }
+
+    @boundMethod
+    copyShareLink() : void {
+        let {sessionId, screenId} = this.props;
+        let screen = GlobalModel.getScreenById(sessionId, screenId);
+        if (screen == null) {
+            return null;
+        }
+        let shareLink = screen.getWebShareUrl();
+        if (shareLink == null) {
+            return;
+        }
+        navigator.clipboard.writeText(shareLink);
+        mobx.action(() => {
+            this.shareCopied.set(true);
+        })();
+        setTimeout(() => {
+            mobx.action(() => {
+                this.shareCopied.set(false);
+            })();
+        }, 600)
+    }
+
+    webSharedUpdated() : boolean {
+        let {sessionId, screenId} = this.props;
+        let screen = GlobalModel.getScreenById(sessionId, screenId);
+        if (screen == null) {
+            return null;
+        }
+        return screen.isWebShared() != this.tempWebShared.get();
+    }
+
     render() {
         let {sessionId, screenId} = this.props;
         let screen = GlobalModel.getScreenById(sessionId, screenId);
@@ -101,6 +145,9 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
             <div className={cn("modal screen-settings-modal settings-modal prompt-modal is-active")}>
                 <div className="modal-background"/>
                 <div className="modal-content">
+                    <If condition={this.shareCopied.get()}>
+                        <div className="copied-indicator"/>
+                    </If>
                     <header>
                         <div className="modal-title">screen settings ({screen.name.get()})</div>
                         <div className="close-icon">
@@ -159,6 +206,27 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
                                 </div>
                             </div>
                         </div>
+                        <div className="settings-field">
+                            <div className="settings-label">
+                                Web Shared
+                            </div>
+                            <div className="settings-input">
+                                <Toggle checked={this.tempWebShared.get()} onChange={this.handleChangeWebShare}/>
+                                <div className="action-text">
+                                    <If condition={this.tempWebShared.get() && this.webSharedUpdated()}>will be web-shared</If>
+                                    <If condition={!this.tempWebShared.get() && this.webSharedUpdated()}>will stop being web-shared</If>
+                                    <If condition={screen.isWebShared() && !this.webSharedUpdated()}>
+                                        <div className="button settings-share-link is-prompt-green is-outlined is-small" onClick={this.copyShareLink}>
+                                            <span>copy share link</span>
+                                            <span className="icon">
+                                                <i className="fa-sharp fa-solid fa-copy"/>
+                                            </span>
+                                        </div>
+                                    </If>
+                                </div>
+                                
+                            </div>
+                        </div>
                     </div>
                     <footer>
                         <div onClick={this.closeModal} className="button is-prompt-cancel is-outlined is-small">Cancel</div>

src/sh2.less

@@ -2947,6 +2947,10 @@ input[type=checkbox] {
             font-size: 12px;
             color: @term-red;
         }
+
+        .settings-share-link {
+            width: 160px;
+        }
     }
 
     &:not(:first-child) {

src/webshare-elems.tsx

@@ -24,6 +24,7 @@ type OMap<K,V> = mobx.ObservableMap<K,V>;
 let foo = LinesView;
 
 // TODO reshare
+// TODO document.visibility API to disconnect websocket: document.addEventListener("visibilitychange", () => { document.hidden });
 
 function makeFullRemoteRef(ownerName : string, remoteRef : string, name : string) : string {
     if (isBlank(ownerName) && isBlank(name)) {