@innovastudio/contentbox 1.5.63 → 1.5.65

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.63",
+  "version": "1.5.65",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -50,7 +50,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.4.81",
+    "@innovastudio/contentbuilder": "^1.4.82",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -13799,7 +13799,7 @@ class EditBox {
     } else if (s === 'video') {
       const chooseVideoBg = currentVideo => {
         // Choose random video
-        let videoList = this.builder.media.bg_videos;
+        let videoList = this.builder.media.videos;
         let randomIndex;
 
         if (currentVideo) {
@@ -13810,13 +13810,13 @@ class EditBox {
           randomIndex = Math.floor(Math.random() * videoList.length);
         }
 
-        return videoList[randomIndex];
+        return this.builder.mediaPath + videoList[randomIndex];
       };
 
       let video = chooseVideoBg();
       code = `
             <video id="{id}" class="is-video-bg" muted loop playsinline autoplay>
-                <source src="${this.builder.media.blank_video}" data-default="${video}">
+                <source src="${this.builder.mediaPath + this.builder.media.blank_video}" data-default="${video}">
             </video>
             <div class="is-overlay-video" style="opacity:0.05"></div>
             <script>
@@ -92960,10 +92960,22 @@ class Dictation {
   stopDictation() {
     if (this.recognition) this.recognition.abort();
     this.aborted = true;
-    if (this.recorder) this.recorder.stopRecording();
-    if (this.localStream) this.localStream.getAudioTracks().forEach(track => {
-      track.stop();
-    });
+
+    // Using RecordRTC
+    // if(this.recorder) this.recorder.stopRecording(); 
+    // if(this.localStream) this.localStream.getAudioTracks().forEach(track => {
+    //     track.stop();
+    // });
+
+    // Using mediaRecorder
+    if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
+      this.mediaRecorder.stop();
+      this.localStream.getTracks().forEach(track => track.stop()); // Stop the tracks to release the resources
+    }
+
+    if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+      this.websocket.close();
+    }
   }
   async startDictation() {
     const inpCommand = this.modalCommand.querySelector('.inp-command');
@@ -93017,9 +93029,14 @@ class Dictation {
           sampleRate: sampleRate
         }
       }).then(stream => {
+        this.localStream = stream;
         this.mediaRecorder = new MediaRecorder(stream);
         this.mediaRecorder.addEventListener('dataavailable', event => {
+          if (this.aborted) return;
+
           // console.log(event.data);
+          // if (event.data.size > 0) {
+          // }
           this.websocket.send(event.data);
         });
 
@@ -109145,7 +109162,7 @@ Important: Do not change the 'div.is-container' element!
 
     let newMedia = mediaList[randomIndex];
     this.builder.currentMedia = newMedia;
-    return newMedia;
+    return this.builder.mediaPath + newMedia;
   }
 
   getTypographyClass(html) {
@@ -109953,10 +109970,12 @@ class Command {
             } // Replace {{_IMAGEURL}}
 
 
-            const gallery = this.builder.media.images;
-            const imageList = gallery.square;
-            const imageUrl = this.lib.chooseMedia(imageList);
-            context = context.replaceAll('{{_IMAGEURL}}', imageUrl);
+            if (context.includes('{{_IMAGEURL}}')) {
+              const gallery = this.builder.media.images;
+              const imageList = gallery.square;
+              const imageUrl = this.lib.chooseMedia(imageList);
+              context = context.replaceAll('{{_IMAGEURL}}', imageUrl);
+            }
           } else if (args.new_section_two_boxes || args.new_section_three_boxes || args.new_section_four_boxes) {
             if (args.new_section_two_boxes) {
               context = cl.new_section_two_boxes;
@@ -109983,13 +110002,15 @@ class Command {
               context += '\n\n' + cl.update_section_article_with_image;
             } else if (args.add_article) {
               context += '\n\n' + cl.update_section_article_with_image;
-            } else ; //Replace {{_IMAGEURL}}
-
+            } else ;
 
-            const gallery = this.builder.media.images;
-            const imageList = gallery.square;
-            const imageUrl = this.lib.chooseMedia(imageList);
-            context = context.replaceAll('{{_IMAGEURL}}', imageUrl);
+            if (context.includes('{{_IMAGEURL}}')) {
+              //Replace {{_IMAGEURL}}
+              const gallery = this.builder.media.images;
+              const imageList = gallery.square;
+              const imageUrl = this.lib.chooseMedia(imageList);
+              context = context.replaceAll('{{_IMAGEURL}}', imageUrl);
+            }
           }
         } else {
           //if(args.redesign_layout || args.change_text || args.change_style) {
@@ -110068,13 +110089,15 @@ ${currentHtml}
             } else if (args.add_article) {
               context += '\n' + cl.update_section_article_with_image;
             } else ;
-          } //Replace {{_IMAGEURL}}
-
+          }
 
-          const gallery = this.builder.media.images;
-          const imageList = gallery.square;
-          const imageUrl = this.lib.chooseMedia(imageList);
-          context = context.replaceAll('{{_IMAGEURL}}', imageUrl);
+          if (context.includes('{{_IMAGEURL}}')) {
+            //Replace {{_IMAGEURL}}
+            const gallery = this.builder.media.images;
+            const imageList = gallery.square;
+            const imageUrl = this.lib.chooseMedia(imageList);
+            context = context.replaceAll('{{_IMAGEURL}}', imageUrl);
+          }
         } // Check elements and add relevant context
 
 
@@ -110134,7 +110157,7 @@ ${currentHtml}
             // New Section
             // html = this.fixIcons(html);
             html = this.fixButtons(html);
-            html = this.fixBgImage(html);
+            html = this.fixBgImage(html); // only if box has inline bg image, which is incorrect
 
             if (args.section_background && args.section_background === 'image') {
               html = this.setBgImage(html, true); // Change the bg image (also fix incorrect structure)
@@ -111454,7 +111477,7 @@ ${currentHtml}`;
       randomIndex = Math.floor(Math.random() * imageList.length);
     }
 
-    return imageList[randomIndex];
+    return this.builder.mediaPath + imageList[randomIndex];
   } // Not Used
 
 
@@ -111669,31 +111692,7 @@ ${currentHtml}`;
       let overlayCode = overlay.querySelector('.is-overlay-content');
       if (overlayCode) overlayCode.parentNode.removeChild(overlayCode);
       let sectionBox = false;
-      if (box.classList.contains('is-section')) sectionBox = true; // Choose random image
-
-      let bgImageUrl;
-      let imageList;
-
-      if (sectionBox) {
-        const gallery = this.builder.media.bg_images;
-        imageList = gallery.section_text_left;
-        const container = box.querySelector('.is-container');
-
-        if (container) {
-          if (container.classList.contains('is-content-left')) {
-            imageList = gallery.section_text_left;
-          } else if (container.classList.contains('is-content-right')) {
-            imageList = gallery.section_text_right;
-          } else {
-            imageList = gallery.section_text_center;
-          }
-        }
-      } else {
-        const gallery = this.builder.media.bg_images;
-        imageList = gallery.box;
-      }
-
-      bgImageUrl = this.lib.chooseMedia(imageList); // Check/fix if container misplaced
+      if (box.classList.contains('is-section')) sectionBox = true; // Check/fix if container misplaced
 
       const container = overlay.querySelector('.is-container');
 
@@ -111704,6 +111703,30 @@ ${currentHtml}`;
       }
 
       if (overlayBg) {
+        // Choose random image
+        let bgImageUrl;
+        let imageList;
+
+        if (sectionBox) {
+          const gallery = this.builder.media.bg_images;
+          imageList = gallery.section_text_left;
+          const container = box.querySelector('.is-container');
+
+          if (container) {
+            if (container.classList.contains('is-content-left')) {
+              imageList = gallery.section_text_left;
+            } else if (container.classList.contains('is-content-right')) {
+              imageList = gallery.section_text_right;
+            } else {
+              imageList = gallery.section_text_center;
+            }
+          }
+        } else {
+          const gallery = this.builder.media.bg_images;
+          imageList = gallery.box;
+        }
+
+        bgImageUrl = this.lib.chooseMedia(imageList);
         overlayBg.style.backgroundImage = `url('${bgImageUrl}')`;
         overlayBg.style.backgroundImage = `url('${bgImageUrl}')`;
         overlayBg.style.backgroundPosition = '50% 60%';
@@ -111996,12 +112019,16 @@ ${currentHtml}`;
   fixHtml(html) {
     // Fix overlay structure when "is-overlay" containing background image in the style attribute
     let regex = /<div class="is-overlay"([^>]*)style="([^"]*background-image:[^;"]+;)([^"]*)"([^>]*)>/g;
-    html = html.replace(regex, '<div class="is-overlay"$1$4>\n    <div class="is-overlay-bg" style="$2"></div>'); // Fix {{IMAGEURL}} that failed to replace
+    html = html.replace(regex, '<div class="is-overlay"$1$4>\n    <div class="is-overlay-bg" style="$2"></div>');
+
+    if (html.includes('{{_IMAGEURL}}')) {
+      // Fix {{IMAGEURL}} that failed to replace
+      const gallery = this.builder.media.images;
+      const imageList = gallery.square;
+      const imageUrl = this.lib.chooseMedia(imageList);
+      html = html.replaceAll('{{IMAGEURL}}', imageUrl);
+    } // Fix {{ICONCLASS}} that failed to replace
 
-    const gallery = this.builder.media.images;
-    const imageList = gallery.square;
-    const imageUrl = this.lib.chooseMedia(imageList);
-    html = html.replaceAll('{{IMAGEURL}}', imageUrl); // Fix {{ICONCLASS}} that failed to replace
 
     html = html.replaceAll('{{ICONCLASS}}', 'ion-checkmark');
     html = this.replaceButtonsWithAnchorTags(html);
@@ -115044,42 +115071,42 @@ class ContentBox {
       similarityThreshold: 0.65,
       // for commandList similarity checking
       headlineList: ['We\'re [CompanyName]. Full stack development with a spark of creativity.', 'Transforming your digital experience with [CompanyName]. Achieve your online goals with our customized solutions.', 'Revolutionizing web development with [CompanyName]. Unleash your digital potential with our high-performance solutions.'],
+      mediaPath: 'assets/gallery/',
       media: {
-        slider: ['assets/templates-simple/images/img-030.jpg', 'assets/templates-simple/images/img-025.jpg'],
-        blank_video: 'assets/templates-simple/videos/blank.mp4',
-        bg_videos: ['assets/templates-simple/videos/beach1.mp4', 'assets/templates-simple/videos/beach2.mp4'],
-        videos: ['assets/templates-simple/videos/beach1.mp4', 'assets/templates-simple/videos/beach2.mp4'],
+        slider: ['slide-01.jpg', 'slide-02.jpg'],
+        blank_video: 'blank.mp4',
+        videos: ['beach1.mp4', 'beach2.mp4'],
         youtube_videos: ['https://www.youtube.com/embed/P5yHEKqx86U?rel=0'],
         maps: ['https://www.youtube.com/embed/P5yHEKqx86U?rel=0'],
-        audios: ['assets/minimalist-blocks/example.mp3'],
+        audios: ['example.mp3'],
         images: {
-          square: ['assets/gallery/person-01.jpg', 'assets/gallery/person-02.jpg', 'assets/gallery/person-03.jpg', 'assets/gallery/person-04.jpg', 'assets/gallery/person-05.jpg', 'assets/gallery/person-06.jpg', 'assets/gallery/person-08.jpg']
+          square: ['person-01.jpg', 'person-02.jpg', 'person-03.jpg', 'person-04.jpg', 'person-05.jpg', 'person-06.jpg', 'person-08.jpg']
         },
         bg_images: {
-          box: ['assets/gallery/person-01.jpg', 'assets/gallery/person-02.jpg', 'assets/gallery/person-03.jpg', 'assets/gallery/person-04.jpg', 'assets/gallery/person-05.jpg', 'assets/gallery/person-06.jpg', 'assets/gallery/person-07.jpg', 'assets/gallery/person-08.jpg', 'assets/gallery/person-09.jpg', 'assets/gallery/person-10.jpg', 'assets/gallery/building.jpg', 'assets/gallery/desk.jpg', 'assets/gallery/chair.jpg', 'assets/gallery/coffee.jpg', 'assets/gallery/product.jpg', 'assets/gallery/table.jpg'],
-          small_box: ['assets/gallery/person-01.jpg', 'assets/gallery/person-03.jpg', 'assets/gallery/person-04.jpg', 'assets/gallery/person-05.jpg', 'assets/gallery/person-10.jpg', 'assets/gallery/chair.jpg', 'assets/gallery/coffee.jpg', 'assets/gallery/product.jpg', 'assets/gallery/table.jpg'],
+          box: ['person-01.jpg', 'person-02.jpg', 'person-03.jpg', 'person-04.jpg', 'person-05.jpg', 'person-06.jpg', 'person-07.jpg', 'person-08.jpg', 'person-09.jpg', 'person-10.jpg', 'building.jpg', 'desk.jpg', 'chair.jpg', 'coffee.jpg', 'product.jpg', 'table.jpg'],
+          small_box: ['person-01.jpg', 'person-03.jpg', 'person-04.jpg', 'person-05.jpg', 'person-10.jpg', 'chair.jpg', 'coffee.jpg', 'product.jpg', 'table.jpg'],
           // section: [
-          //     'assets/gallery/header-01.jpg',
-          //     'assets/gallery/header-02.jpg',
-          //     'assets/gallery/header-03.jpg',
-          //     'assets/gallery/header-04.jpg',
-          //     'assets/gallery/header-05.jpg',
-          //     'assets/gallery/header-06.jpg',
-          //     'assets/gallery/header-07.jpg',
-          //     'assets/gallery/header-08.jpg',
-          //     'assets/gallery/header-09.jpg',
-          //     'assets/gallery/header-10.jpg',
-          //     'assets/gallery/header-11.jpg',
-          //     'assets/gallery/header-12.jpg',
-          //     'assets/gallery/header-13.jpg',
-          //     'assets/gallery/header-14.jpg',
-          //     'assets/gallery/header-15.jpg',
+          //     'header-01.jpg',
+          //     'header-02.jpg',
+          //     'header-03.jpg',
+          //     'header-04.jpg',
+          //     'header-05.jpg',
+          //     'header-06.jpg',
+          //     'header-07.jpg',
+          //     'header-08.jpg',
+          //     'header-09.jpg',
+          //     'header-10.jpg',
+          //     'header-11.jpg',
+          //     'header-12.jpg',
+          //     'header-13.jpg',
+          //     'header-14.jpg',
+          //     'header-15.jpg',
           // ],
-          section_text_left: ['assets/gallery/header-01.jpg', 'assets/gallery/header-02.jpg', 'assets/gallery/header-03.jpg', 'assets/gallery/header-05.jpg', 'assets/gallery/header-08.jpg', 'assets/gallery/header-10b.jpg', // 'assets/gallery/header-13.jpg',
-          'assets/gallery/header-14.jpg' // 'assets/gallery/header-15b.jpg',
+          section_text_left: ['header-01.jpg', 'header-02.jpg', 'header-03.jpg', 'header-05.jpg', 'header-08.jpg', 'header-10b.jpg', // 'header-13.jpg',
+          'header-14.jpg' // 'header-15b.jpg',
           ],
-          section_text_center: ['assets/gallery/header-07.jpg', 'assets/gallery/header-11.jpg', 'assets/gallery/header-12.jpg', 'assets/gallery/header-13.jpg'],
-          section_text_right: ['assets/gallery/header-04.jpg', 'assets/gallery/header-05b.jpg', 'assets/gallery/header-06.jpg', 'assets/gallery/header-08b.jpg', 'assets/gallery/header-09.jpg', 'assets/gallery/header-10.jpg', 'assets/gallery/header-14b.jpg', 'assets/gallery/header-15.jpg']
+          section_text_center: ['header-07.jpg', 'header-11.jpg', 'header-12.jpg', 'header-13.jpg'],
+          section_text_right: ['header-04.jpg', 'header-05b.jpg', 'header-06.jpg', 'header-08b.jpg', 'header-09.jpg', 'header-10.jpg', 'header-14b.jpg', 'header-15.jpg']
         }
       },
       shortCommandList: {