From 7ef5eacfaeb8ecf4ed45c7bd5edeeb14a0c1bb0b Mon Sep 17 00:00:00 2001
From: shadowcz007 <chizhiwei007@163.com>
Date: Wed, 29 Nov 2023 17:22:24 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E5=8C=BA=E5=8C=BA=E5=9F=9F=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/javascript/main.js | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/web/javascript/main.js b/web/javascript/main.js
index 6c6564a..0c55e3f 100644
--- a/web/javascript/main.js
+++ b/web/javascript/main.js
@@ -296,13 +296,6 @@ const base64Df =
 app.registerExtension({
   name: 'Mixlab.image.ScreenShareNode',
   async getCustomWidgets (app) {
-    //     position: absolute;
-    //     background: red;
-    //     width:100*(_mixlab_screen_width/_mixlab_screen_webcamVideo.videoWidth)+'%';
-    // height:100*(_mixlab_screen_height/_mixlab_screen_webcamVideo.videoWidth)+'%';
-    // left:100*(_mixlab_screen_x/_mixlab_screen_webcamVideo.videoWidth)+'%';
-    // top:100*(_mixlab_screen_y/_mixlab_screen_webcamVideo.videoHeight)+'%';
-
     return {
       CHEESE (node, inputName, inputData, app) {
         // We return an object containing a field CHEESE which has a function (taking node, name, data, app)
@@ -578,6 +571,24 @@ function setArea (src) {
       window._mixlab_screen_y = top
       window._mixlab_screen_width = width
       window._mixlab_screen_height = height
+
+      try {
+        let area = graph._nodes
+          .filter(n => n.type === 'ScreenShare')[0]
+          .widgets.filter(w => w.name == 'sreen_share')[0].previewArea
+        area.style = `
+        position: absolute;
+        background: red;
+        width:${
+          100 * (_mixlab_screen_width / _mixlab_screen_webcamVideo.videoWidth)
+        }%;
+    height:${
+      100 * (_mixlab_screen_height / _mixlab_screen_webcamVideo.videoWidth)
+    }%;
+    left:${100 * (_mixlab_screen_x / _mixlab_screen_webcamVideo.videoWidth)}%;
+    top:${100 * (_mixlab_screen_y / _mixlab_screen_webcamVideo.videoHeight)}%;
+        `
+      } catch (error) {}
     }
   }
 
@@ -662,11 +673,15 @@ app.registerExtension({
         widget.PictureInPicture.addEventListener('click', async () => {
           if (window.location.protocol != 'https:') {
             window.alert(
-              `About to redirect to HTTPS access.https://${window.location.hostname}:${
+              `About to redirect to HTTPS access.https://${
+                window.location.hostname
+              }:${~~window.location.port + 1}`
+            )
+            window.open(
+              `https://${window.location.hostname}:${
                 ~~window.location.port + 1
               }`
             )
-            window.open(`https://${window.location.hostname}:${~~window.location.port + 1}`)
           }
           // Open a Picture-in-Picture window.
           let w = 360,