update extras_node

Update deisgn settings Speech & Recognition and save recording audio Add button abort, chancel recognition and save recod audio Button stop, stoped recognation and get result and save recod audio Small fix global utils.js Updates REAMDE's Other small fixes...
AlekPet · Nov 24, 2024 · 588ba72 · 588ba72
1 parent 17e57f2
commit 588ba72
Show file tree

Hide file tree

Showing 7 changed files with 301 additions and 136 deletions.
diff --git a/ExtrasNode/README.md b/ExtrasNode/README.md
@@ -18,7 +18,7 @@
 
 - Dispaly image size node "Preview Image"
 
-- Speech & Recognition speech
+- Speech & Recognition speech and save reocording audio
 
 - Preview image, video and sound select list combo
 

diff --git a/ExtrasNode/css/extras_node_styles.css b/ExtrasNode/css/extras_node_styles.css
@@ -11,6 +11,7 @@
   width: 45px;
   font-family: monospace;
   align-items: center;
+  margin-top: 3px;
 }
 
 .alekpet_extras_node_speechrecognition_row {
@@ -41,10 +42,10 @@
 .alekpet_extras_node_recognition_icon_box {
   display: flex;
   justify-content: center;
-  align-items: center;
-  line-height: 1;
+  align-items: baseline;
   gap: 3px;
   transition: all 0.7s;
+  margin-top: 2px;
 }
 
 .alekpet_extras_node_recognition_icon:hover {
@@ -82,8 +83,10 @@
 }
 
 .alekpet_extras_node_speech_icon {
-  font-size: 0.7em;
+  font-size: 0.6em;
   opacity: 1;
+  line-height: 1;
+  margin-top: 2px;
 }
 
 .alekpet_extras_node_speech_icon_playing {
@@ -96,3 +99,32 @@
   right: 3px;
   color: var(--error-text);
 }
+
+/* Settings */
+.alekpet_extras_node_speech_recognition_settings_props_label {
+  background: #646363;
+  color: #cdcbcb;
+  border-radius: 5px;
+  padding: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+}
+
+.alekpet_extras_node_speech_recognition_settings_props_label:hover {
+  background: darkgrey;
+  color: white;
+}
+
+.alekpet_extras_node_speech_recognition_settings_props_input {
+  max-width: 10px;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+}
+
+.alekpet_extras_node_speech_recognition_settings_button {
+  display: flex;
+  font-size: 0.6rem;
+}
diff --git a/ExtrasNode/js/extras_node.js b/ExtrasNode/js/extras_node.js
@@ -16,6 +16,7 @@ import {
   createPreiviewSize,
   speechRect,
   SpeechSynthesis,
+  checkboxLSCheckedByKey,
 } from "./lib/extrasnode/extras_node_widgets.js";
 import { RecognationSpeechDialog } from "./lib/extrasnode/extras_node_dialogs.js";
 
@@ -457,6 +458,10 @@ app.registerExtension({
                       !!e.target.checked
                     );
                     SpeechAndRecognationSpeechSaveAs = !!e.target.checked;
+                    checkboxLSCheckedByKey(
+                      `${idExt}.SpeechAndRecognationSpeechSaveAs`,
+                      ".alekpet_extras_node_recognition_saveAs"
+                    );
                   },
                 }),
               ]

diff --git a/ExtrasNode/js/utils.js b/ExtrasNode/js/utils.js
@@ -138,13 +138,16 @@ function animateTransitionProps(
   });
 }
 
-function animateClick(target, opacityVal = 0.9) {
+function animateClick(target, params = {}) {
+  const { opacityVal = 0.9, callback = () => {} } = params;
   if (target?.isAnimating) return;
 
   const hide = +target.style.opacity === 0;
   return animateTransitionProps(target, {
     opacity: hide ? opacityVal : 0,
-  }).then(() => showHide({ elements: [target], hide: !hide }));
+  })
+    .then(() => showHide({ elements: [target], hide: !hide }))
+    .then(() => callback());
 }
 
 function showHide({ elements = [], hide = null, displayProp = "block" } = {}) {
@@ -448,7 +451,11 @@ function createWindowModal({
       case "object":
       default:
         if (Array.isArray(text)) {
-          text.forEach((element) => parent.append(element));
+          text.forEach(
+            (element) =>
+              (element.nodeType === 1 || element.nodeType === 3) &&
+              parent.append(element)
+          );
         } else if (text.nodeType === 1 || text.nodeType === 3)
           parent.append(text);
     }
@@ -496,34 +503,39 @@ function createWindowModal({
   });
 
   // Title
-  const box_settings_title = makeElement("div", {
-    class: ["alekpet__window__title", ...classesTitle],
-  });
-
-  Object.assign(box_settings_title.style, {
-    ...THEME_MODAL_WINDOW_BASE.stylesTitle,
-    ...stylesTitle,
-  });
+  let box_settings_title = "";
+  if (textTitle) {
+    box_settings_title = makeElement("div", {
+      class: ["alekpet__window__title", ...classesTitle],
+    });
 
-  // Add text (html) to title
-  addText(textTitle, box_settings_title);
+    Object.assign(box_settings_title.style, {
+      ...THEME_MODAL_WINDOW_BASE.stylesTitle,
+      ...stylesTitle,
+    });
 
+    // Add text (html) to title
+    addText(textTitle, box_settings_title);
+  }
   // Body
-  const box_settings_body = makeElement("div", {
-    class: ["alekpet__window__body", ...classesBody],
-  });
+  let box_settings_body = "";
+  if (textBody) {
+    box_settings_body = makeElement("div", {
+      class: ["alekpet__window__body", ...classesBody],
+    });
 
-  Object.assign(box_settings_body.style, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-end",
-    gap: "5px",
-    textWrap: "wrap",
-    ...stylesBody,
-  });
+    Object.assign(box_settings_body.style, {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-end",
+      gap: "5px",
+      textWrap: "wrap",
+      ...stylesBody,
+    });
 
-  // Add text (html) to body
-  addText(textBody, box_settings_body);
+    // Add text (html) to body
+    addText(textBody, box_settings_body);
+  }
 
   // Close button
   const close__box__button = makeElement("div", {