[mirotalksfu] - improve whiteboard UI, update dep

miroslavpejic85 · Jul 3, 2024 · 06e62d4 · 06e62d4
1 parent 46c0f46
commit 06e62d4
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 33 deletions.
diff --git a/app/src/Server.js b/app/src/Server.js
@@ -44,7 +44,7 @@ dependencies: {
  * @license For commercial or closed source, contact us at [email protected] or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - [email protected]
- * @version 1.4.80
+ * @version 1.4.81
  *
  */
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.4.80",
+    "version": "1.4.81",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
@@ -56,7 +56,7 @@
     },
     "dependencies": {
         "@sentry/integrations": "7.114.0",
-        "@sentry/node": "7.114.0",
+        "@sentry/node": "8.13.0",
         "axios": "^1.7.2",
         "body-parser": "1.20.2",
         "colors": "1.4.0",
@@ -73,7 +73,7 @@
         "mediasoup-client": "3.7.12",
         "ngrok": "^5.0.0-beta.2",
         "nodemailer": "^6.9.14",
-        "openai": "^4.52.2",
+        "openai": "^4.52.3",
         "qs": "6.12.2",
         "socket.io": "4.7.5",
         "swagger-ui-express": "5.0.1",

diff --git a/public/css/Room.css b/public/css/Room.css
@@ -1178,14 +1178,25 @@ progress {
 }
 
 .whiteboard-header-options .dropdown-menu {
-    display: none;
-    width: 100vw;
-    padding: 10px;
     background: var(--body-bg);
+    border: none;
+    max-height: calc(var(--wb-height) * 1px); /* Set a maximum height */
+    overflow-y: auto; /* Enable vertical scrolling */
 }
 
 .whiteboard-header-options .dropdown-menu button {
-    display: inline-flex;
+    background: none;
+    border: none;
+    color: #ffffff;
+    width: 100%;
+    text-align: left;
+    padding: 10px;
+    font-size: 0.8em;
+    cursor: pointer;
+}
+
+.whiteboard-header-options .dropdown-menu button:hover {
+    background: var(--select-bg);
 }
 
 .whiteboardColorPicker {

diff --git a/public/js/Room.js b/public/js/Room.js
@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at [email protected] or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - [email protected]
- * @version 1.4.80
+ * @version 1.4.81
  *
  */
 
@@ -309,17 +309,6 @@ function initClient() {
         setTippy('whiteboardObjectBtn', 'Object mode', 'bottom');
         setTippy('whiteboardUndoBtn', 'Undo', 'bottom');
         setTippy('whiteboardRedoBtn', 'Redo', 'bottom');
-        setTippy('whiteboardImgFileBtn', 'Add image file', 'bottom');
-        setTippy('whiteboardPdfFileBtn', 'Add pdf file', 'bottom');
-        setTippy('whiteboardImgUrlBtn', 'Add image url', 'bottom');
-        setTippy('whiteboardTextBtn', 'Add text', 'bottom');
-        setTippy('whiteboardLineBtn', 'Add line', 'bottom');
-        setTippy('whiteboardRectBtn', 'Add rectangle', 'bottom');
-        setTippy('whiteboardTriangleBtn', 'Add triangle', 'bottom');
-        setTippy('whiteboardCircleBtn', 'Add circle', 'bottom');
-        setTippy('whiteboardSaveBtn', 'Save', 'bottom');
-        setTippy('whiteboardEraserBtn', 'Eraser', 'bottom');
-        setTippy('whiteboardCleanBtn', 'Clean', 'bottom');
         setTippy('whiteboardLockButton', 'If enabled, participants cannot interact', 'right');
         setTippy('whiteboardCloseBtn', 'Close', 'right');
         setTippy('chatCleanTextButton', 'Clean', 'top');
@@ -4076,7 +4065,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.4.80',
+        title: 'WebRTC SFU v1.4.81',
         html: `
         <br />
         <div id="about">

diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at [email protected] or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - [email protected]
- * @version 1.4.80
+ * @version 1.4.81
  *
  */
 

diff --git a/public/views/Room.html b/public/views/Room.html
@@ -1210,13 +1210,13 @@ <h1>Loading</h1>
                             <i class="fas fa-ellipsis-vertical"></i>
                         </button>
                         <div class="dropdown-menu text-start" aria-labelledby="whiteboardDropDownMenu">
-                            <button id="whiteboardImgFileBtn" class="far fa-image"></button>
-                            <button id="whiteboardPdfFileBtn" class="far fa-file-pdf"></button>
-                            <button id="whiteboardImgUrlBtn" class="fas fa-link"></button>
-                            <button id="whiteboardTextBtn" class="fas fa-spell-check"></button>
-                            <button id="whiteboardLineBtn" class="fas fa-slash"></button>
-                            <button id="whiteboardRectBtn" class="far fa-square"></button>
-                            <button id="whiteboardTriangleBtn" class="fas">
+                            <button id="whiteboardImgFileBtn"><i class="far fa-image"></i> Add image file</button>
+                            <button id="whiteboardPdfFileBtn"><i class="far fa-file-pdf"></i> Add pdf file</button>
+                            <button id="whiteboardImgUrlBtn"><i class="fas fa-link"></i> Add image URL</button>
+                            <button id="whiteboardTextBtn"><i class="fas fa-spell-check"></i> Add text</button>
+                            <button id="whiteboardLineBtn"><i class="fas fa-slash"></i> Add line</button>
+                            <button id="whiteboardRectBtn"><i class="far fa-square"></i> Add rectangle</button>
+                            <button id="whiteboardTriangleBtn">
                                 <svg
                                     xmlns="http://www.w3.org/2000/svg"
                                     width="1em"
@@ -1226,11 +1226,12 @@ <h1>Loading</h1>
                                 >
                                     <path d="M12 5.887l8.468 14.113h-16.936l8.468-14.113zm0-3.887l-12 20h24l-12-20z" />
                                 </svg>
+                                Add triangle
                             </button>
-                            <button id="whiteboardCircleBtn" class="far fa-circle"></button>
-                            <button id="whiteboardSaveBtn" class="fas fa-save"></button>
-                            <button id="whiteboardEraserBtn" class="fas fa-eraser"></button>
-                            <button id="whiteboardCleanBtn" class="fas fa-trash"></button>
+                            <button id="whiteboardCircleBtn"><i class="far fa-circle"></i> Add circle</button>
+                            <button id="whiteboardSaveBtn"><i class="fas fa-save"></i> Save</button>
+                            <button id="whiteboardEraserBtn"><i class="fas fa-eraser"></i> Eraser</button>
+                            <button id="whiteboardCleanBtn"><i class="fas fa-trash"></i> Clean</button>
                         </div>
                     </div>
                 </div>