[mirotalksfu] - improve real-time polls

miroslavpejic85 · Jul 19, 2024 · 9006ec9 · 9006ec9
1 parent 48106e5
commit 9006ec9
Show file tree

Hide file tree

Showing 8 changed files with 390 additions and 287 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.5.15
+ * @version 1.5.16
  *
  */
 

diff --git a/app/src/config.template.js b/app/src/config.template.js
@@ -418,6 +418,11 @@ module.exports = {
                 chatSpeechStartButton: true,
                 chatGPT: true,
             },
+            poll: {
+                pollPinButton: true,
+                pollMaxButton: true,
+                pollSaveButton: true,
+            },
             participantsList: {
                 saveInfoButton: true, // presenter
                 sendFileAllButton: true, // presenter

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.5.15",
+    "version": "1.5.16",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {

diff --git a/public/css/Polls.css b/public/css/Polls.css
@@ -3,7 +3,7 @@
     position: absolute;
     background: var(--body-bg);
     padding: 20px;
-    border-radius: var(--border-radius);
+    border-radius: 10px;
     border: var(--border);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     width: 100%;
@@ -41,6 +41,10 @@
     color: #fff !important;
 }
 
+.poll-question {
+    font-weight: bold;
+}
+
 .form {
     display: flex;
     flex-direction: column;
@@ -73,8 +77,6 @@
 .poll-btns {
     display: flex;
     gap: 10px;
-    margin-top: 15px;
-    margin-bottom: 15px;
 }
 
 .poll-btn {
@@ -174,10 +176,7 @@
 .poll-header-btns {
     display: flex;
     gap: 10px;
-    margin-top: 15px;
-    margin-bottom: 15px;
     position: absolute;
     float: right;
     right: 20px;
-    font-size: 1.3rem;
 }
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.5.15
+ * @version 1.5.16
  *
  */
 
@@ -176,19 +176,6 @@ const initMicrophoneSelect = getId('initMicrophoneSelect');
 const speakerSelect = getId('speakerSelect');
 const initSpeakerSelect = getId('initSpeakerSelect');
 
-// ####################################################
-// POLLS
-// ####################################################
-
-const createPollForm = getId('createPollForm');
-const pollsContainer = getId('pollsContainer');
-const addOptionButton = getId('addOptionButton');
-const delOptionButton = getId('delOptionButton');
-const optionsContainer = getId('optionsContainer');
-const pollSaveResultsButton = getId('pollSaveResultsButton');
-const selectedOptions = {};
-let pollOpen = false;
-
 // ####################################################
 // DYNAMIC SETTINGS
 // ####################################################
@@ -346,10 +333,11 @@ function initClient() {
         setTippy('chatShowParticipantsList', 'Toggle participants list', 'bottom');
         setTippy('chatMaxButton', 'Maximize', 'bottom');
         setTippy('chatMinButton', 'Minimize', 'bottom');
-        setTippy('pollSaveResultsButton', 'Save results', 'left');
+        setTippy('pollTogglePin', 'Toggle pin', 'bottom');
+        setTippy('pollSaveButton', 'Save results', 'left');
         setTippy('pollCloseBtn', 'Close', 'bottom');
-        setTippy('addOptionButton', 'Add option', 'top');
-        setTippy('delOptionButton', 'Delete option', 'top');
+        setTippy('pollAddOptionBtn', 'Add option', 'top');
+        setTippy('pollDelOptionBtn', 'Delete option', 'top');
         setTippy('participantsSaveBtn', 'Save participants info', 'bottom');
         setTippy('participantsRaiseHandBtn', 'Toggle raise hands', 'bottom');
         setTippy('participantsUnreadMessagesBtn', 'Toggle unread messages', 'bottom');
@@ -1292,6 +1280,8 @@ function roomIsReady() {
     BUTTONS.chat.chatEmojiButton && show(chatEmojiButton);
     BUTTONS.chat.chatMarkdownButton && show(chatMarkdownButton);
 
+    !BUTTONS.poll.pollSaveButton && hide(pollSaveButton);
+
     isWebkitSpeechRecognitionSupported && BUTTONS.chat.chatSpeechStartButton
         ? show(chatSpeechStartButton)
         : (BUTTONS.chat.chatSpeechStartButton = false);
@@ -1315,11 +1305,14 @@ function roomIsReady() {
         hide(chatTogglePin);
         hide(chatMaxButton);
         hide(chatMinButton);
+        rc.pollMaximize();
+        hide(pollTogglePin);
+        hide(pollMaxButton);
+        hide(pollMinButton);
         transcription.maximize();
         hide(transcriptionTogglePinBtn);
         hide(transcriptionMaxBtn);
         hide(transcriptionMinBtn);
-        rc.pollMaximize();
     } else {
         rc.makeDraggable(emojiPickerContainer, emojiPickerHeader);
         rc.makeDraggable(chatRoom, chatHeader);
@@ -1338,6 +1331,8 @@ function roomIsReady() {
         }
         BUTTONS.chat.chatPinButton && show(chatTogglePin);
         BUTTONS.chat.chatMaxButton && show(chatMaxButton);
+        BUTTONS.poll.pollPinButton && show(pollTogglePin);
+        BUTTONS.poll.pollMaxButton && show(pollMaxButton);
         BUTTONS.settings.pushToTalk && show(pushToTalkDiv);
         BUTTONS.settings.tabRTMPStreamingBtn &&
             show(tabRTMPStreamingBtn) &&
@@ -1580,20 +1575,29 @@ function handleButtons() {
     pollButton.onclick = () => {
         rc.togglePoll();
     };
+    pollMaxButton.onclick = () => {
+        rc.pollMaximize();
+    };
+    pollMinButton.onclick = () => {
+        rc.pollMinimize();
+    };
     pollCloseBtn.onclick = () => {
         rc.togglePoll();
     };
-    pollSaveResultsButton.onclick = () => {
+    pollTogglePin.onclick = () => {
+        rc.togglePollPin();
+    };
+    pollSaveButton.onclick = () => {
         rc.pollSaveResults();
     };
-    addOptionButton.onclick = () => {
+    pollAddOptionBtn.onclick = () => {
         rc.pollAddOptions();
     };
-    delOptionButton.onclick = () => {
+    pollDelOptionBtn.onclick = () => {
         rc.pollDeleteOptions();
     };
-    createPollForm.onsubmit = (e) => {
-        rc.pollCreateForm(e);
+    pollCreateForm.onsubmit = (e) => {
+        rc.pollCreateNewForm(e);
     };
     transcriptionButton.onclick = () => {
         transcription.toggle();