From be94f72156d40f2d0dbe78ab3e3dee2e46db8328 Mon Sep 17 00:00:00 2001
From: carl-pki <85552832+carl-pki@users.noreply.github.com>
Date: Mon, 10 Oct 2022 17:13:20 +0800
Subject: [PATCH] feat: add two functions about copy and paste (#494)

* feat: add two functions
    1. copy from selenoid clipboard to local
    2. paste to selenoid from local clipboard

* feat: add two functions
    1. copy from selenoid clipboard to local
    2. paste to selenoid from local clipboard

* feat: add two functions
    1. copy from selenoid clipboard to local
    2. paste to selenoid from local clipboard

* feat: add two functions
    1. copy from selenoid clipboard to local
    2. paste to selenoid from local clipboard

* feat: add two functions
    1. copy from selenoid clipboard to local
    2. paste to selenoid from local clipboard
---
 ui/src/components/VncCard/index.js     | 62 ++++++++++++++++++++++++--
 ui/src/components/VncCard/style.css.js | 23 ++++++++++
 ui/src/setupProxy.js                   |  1 +
 3 files changed, 82 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/VncCard/index.js b/ui/src/components/VncCard/index.js
index 8021b12f..f7d0d729 100644
--- a/ui/src/components/VncCard/index.js
+++ b/ui/src/components/VncCard/index.js
@@ -3,11 +3,12 @@ import { Link } from "react-router-dom";
 
 import VncScreen from "./VncScreen";
 import { StyledVNC } from "./style.css";
+import { ajax } from "rxjs/ajax";
 
 export default class VncCard extends Component {
     state = { connection: "connecting" };
 
-    connection = connection => {
+    connection = (connection) => {
         this.setState({ connection: connection });
     };
 
@@ -38,16 +39,32 @@ export default class VncCard extends Component {
                         <Connection connection={connection} />
                         {connected && <Lock locked={!unlocked} handleLock={this.handleLock} />}
                         {connected && <Fullscreen handleFullscreen={this.handleFullscreen} fullscreen={fullscreen} />}
+                        {connected && (
+                            <Clipboard
+                                upload={copyFromDocker}
+                                session={session}
+                                title={"copyFromSelenoid"}
+                                operator={"copy"}
+                            />
+                        )}
+                        {connected && (
+                            <Clipboard
+                                upload={pasteToDocker}
+                                session={session}
+                                title={"pasteToSelenoid"}
+                                operator={"upload"}
+                            />
+                        )}
                     </div>
 
                     <div className="vnc-card__content">
                         <VncScreen
-                            ref={instance => {
+                            ref={(instance) => {
                                 this.screen = instance;
                             }}
                             session={session}
                             origin={origin}
-                            onUpdateState={state => this.connection(state)}
+                            onUpdateState={(state) => this.connection(state)}
                         />
                     </div>
                 </div>
@@ -59,6 +76,34 @@ export default class VncCard extends Component {
         );
     }
 }
+function copyFromDocker(sessionId) {
+    const request = {
+        url: "/clipboard/" + sessionId,
+        method: "GET",
+        async: false,
+        responseType: "text",
+    };
+    ajax(request).subscribe((x) => {
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(x.response);
+        }
+    });
+}
+
+function pasteToDocker(sessionId) {
+    if (navigator.clipboard) {
+        navigator.clipboard.readText().then((text) => {
+            let request = {
+                url: "/clipboard/" + sessionId,
+                method: "POST",
+                body: text,
+                async: false,
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+            };
+            ajax(request).subscribe((msg) => msg);
+        });
+    }
+}
 
 function Back() {
     return (
@@ -70,7 +115,7 @@ function Back() {
 
 function Connection(props) {
     const { connection } = props;
-    const icon = function(connection) {
+    const icon = function (connection) {
         switch (connection) {
             default:
             case "disconnected": {
@@ -99,6 +144,15 @@ function Fullscreen(props) {
     );
 }
 
+function Clipboard(props) {
+    const { upload, session, title, operator } = props;
+    return (
+        <div className={`control control_${operator}`}>
+            <div title={title} className={"icon dripicons-" + operator} onClick={() => upload(session)}></div>
+        </div>
+    );
+}
+
 function Lock(props) {
     const { locked, handleLock } = props;
     return (
diff --git a/ui/src/components/VncCard/style.css.js b/ui/src/components/VncCard/style.css.js
index b9e26be7..acc6c7ba 100644
--- a/ui/src/components/VncCard/style.css.js
+++ b/ui/src/components/VncCard/style.css.js
@@ -5,6 +5,7 @@ const colorConnecting = "#6883d3";
 const colorDisconnecting = " #ca9eff";
 const colorFullscreen = "#59a781";
 const backgroundColorLighter = "#3d444c";
+const copyAndPaste = "#405048";
 
 export const StyledVNC = styled.div`
     display: flex;
@@ -146,6 +147,28 @@ export const StyledVNC = styled.div`
                 &_disconnecting {
                     background-color: ${colorDisconnecting};
                 }
+
+                &_copy {
+                    cursor: pointer;
+                    background-color: ${copyAndPaste};
+                    color: ${colorFullscreen};
+                    margin-left: auto;
+
+                    &:hover {
+                        color: #fff;
+                    }
+                }
+
+                &_upload {
+                    cursor: pointer;
+                    background-color: ${copyAndPaste};
+                    color: ${colorFullscreen};
+                    margin-right: 10px;
+
+                    &:hover {
+                        color: #fff;
+                    }
+                }
             }
         }
 
diff --git a/ui/src/setupProxy.js b/ui/src/setupProxy.js
index 23891669..a34bfb9e 100644
--- a/ui/src/setupProxy.js
+++ b/ui/src/setupProxy.js
@@ -15,6 +15,7 @@ module.exports = function (app) {
             agent: agent,
         })
     );
+    app.use(createProxyMiddleware("/clipboard", { target: "http://localhost:4444" }));
     app.use(createProxyMiddleware("/status", { target: "http://localhost:8080" }));
     app.use(createProxyMiddleware("/video/", { target: "http://localhost:8080" }));
     app.use(createProxyMiddleware("/wd/hub/", { target: "http://localhost:8080" }));