@chat21/chat21-web-widget 5.0.97 → 5.0.99

package/CHANGELOG.md

@@ -6,6 +6,14 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.0.99
+
+# 5.0.99-rc1
+- **bug-fixed**: audio duration not showed in mobile browser
+
+# 5.0.98
+- **bug-fixed**: meta info not rendered correctly
+
 # 5.0.97
 
 # 5.0.96

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.97",
+  "version": "5.0.99",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/component/home-conversations/home-conversations.component.ts

@@ -67,7 +67,7 @@ export class HomeConversationsComponent implements OnInit, OnDestroy {
   availableAgents: Array<UserAgent> = [];
   // ========= end:: variabili del componente ======== //
 
-  waitingTime: Number;
+  waitingTime: number;
   langService: HumanizeDurationLanguage = new HumanizeDurationLanguage();
   humanizer: HumanizeDuration;
   humanWaitingTime: string;

package/src/app/component/message/audio/audio.component.ts

@@ -1,5 +1,7 @@
 import { Component, ElementRef, AfterViewInit, Input, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 
 @Component({
@@ -26,13 +28,13 @@ export class AudioComponent implements AfterViewInit {
   currentTime: number = 0;
   isPlaying: boolean = false;
 
+  private logger: LoggerService = LoggerInstance.getInstance();
   constructor(
     private sanitizer: DomSanitizer,
     private elementRef: ElementRef
   ) {}
 
   ngAfterViewInit() {
-    console.log('stylesssss', this.stylesMap)
     if (this.audioBlob) {
       this.rawAudioUrl = URL.createObjectURL(this.audioBlob);
       this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
@@ -136,21 +138,33 @@ export class AudioComponent implements AfterViewInit {
     return `${minutes}:${sec < 10 ? '0' + sec : sec}`;
   }
 
-  getAudioDuration() {
-    const audio = new Audio();
-    audio.src = this.rawAudioUrl!;
-    audio.addEventListener('loadedmetadata', () => {
-      if (audio.duration === Infinity) {
-        audio.currentTime = Number.MAX_SAFE_INTEGER;
-        audio.ontimeupdate = () => {
-          audio.ontimeupdate = null; 
-          audio.currentTime = 0;
-          this.audioDuration = audio.duration;
-        };
-      } else {
-        this.audioDuration = audio.duration;
-      }
-    });
+  async getAudioDuration() {
+    // const audio = new Audio();
+    // audio.src = this.rawAudioUrl!;
+    // audio.addEventListener('loadedmetadata', () => {
+    //   if (audio.duration === Infinity) {
+    //     audio.currentTime = Number.MAX_SAFE_INTEGER;
+    //     audio.ontimeupdate = () => {
+    //       audio.ontimeupdate = null; 
+    //       audio.currentTime = 0;
+    //       this.audioDuration = audio.duration;
+    //     };
+    //   } else {
+    //     this.audioDuration = audio.duration;
+    //   }
+    // });
+
+    const response = await fetch(this.rawAudioUrl!);
+    this.logger.debug('getAudioDuration: response ---> ', response)
+    const arrayBuffer = await response.arrayBuffer();
+    this.logger.debug('getAudioDuration: arrayBuffer ---> ', arrayBuffer)
+    const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+    this.logger.debug('getAudioDuration: audioContext ---> ', audioContext)
+    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+    this.logger.debug('getAudioDuration: audioBuffer ---> ', audioBuffer)
+    this.audioDuration = audioBuffer.duration;
+    this.logger.debug('getAudioDuration: audioDuration ---> ', this.audioDuration)
+
   }
 
   extractFirstColor(gradient: string): string | null {

package/src/assets/twp/chatbot-panel.html

@@ -613,7 +613,7 @@
                     var brandJson = JSON.parse(xhr.response)
                     if(brandJson){
                         /** TITLE AND FAVICON **/
-                        brandJson['WIDGET'].META_TITLE? document.body.title = brandJson['WIDGET'].META_TITLE : null;
+                        brandJson['WIDGET'].META_TITLE? document.title = brandJson['WIDGET'].META_TITLE : null;
                         brandJson['WIDGET'].FAVICON_URL?  document.querySelector("link[rel~='icon']").setAttribute('href', brandJson['WIDGET'].FAVICON_URL) : null;
                         /** FOOTER-LOGO **/
                         brandJson['COMMON'].COMPANY_LOGO? document.getElementById('footer-logo').src = brandJson['COMMON'].COMPANY_LOGO : null;
@@ -624,6 +624,13 @@
                         brandJson['COMMON'].BRAND_PRIMARY_COLOR? document.body.style.setProperty('--base-company-logo', brandJson['COMMON'].BRAND_PRIMARY_COLOR): null;
                         /** IFRAME TITLE**/
                         brandJson['COMMON'].COMPANY_NAME? document.getElementById('tiledeskiframe').title = brandJson['COMMON'].COMPANY_NAME + ' Widget' : null;
+                        /** META sharing ELEMENTS */
+                        if(brandJson['WIDGET'].META_SHARE_INFO && Object.keys(brandJson['WIDGET'].META_SHARE_INFO).length > 0){
+                            Object.keys(brandJson['WIDGET'].META_SHARE_INFO).forEach(key => {
+                                var meta = document.querySelector("meta[property^='og:"+key.toLowerCase()+"']");
+                                meta.setAttribute('content', brandJson['WIDGET'].META_SHARE_INFO[key])
+                            })
+                        }
                     }
                 }
                     

package/src/assets/twp/index-dev.html

@@ -719,7 +719,7 @@
                     var brandJson = JSON.parse(xhr.response)
                     if(brandJson){
                         /** TITLE AND FAVICON **/
-                        brandJson['WIDGET'].META_TITLE? document.body.title = brandJson['WIDGET'].META_TITLE : null;
+                        brandJson['WIDGET'].META_TITLE? document.title = brandJson['WIDGET'].META_TITLE : null;
                         brandJson['WIDGET'].FAVICON_URL?  document.querySelector("link[rel~='icon']").setAttribute('href', brandJson['WIDGET'].FAVICON_URL) : null;
                         /** FOOTER-LOGO **/    
                         brandJson['COMMON'].COMPANY_LOGO? document.getElementById('footer-logo').src = brandJson['COMMON'].COMPANY_LOGO : null;
@@ -737,6 +737,13 @@
                         }
                         /** IFRAME TITLE**/
                         brandJson['COMMON'].COMPANY_LOGO? document.getElementById('tiledeskiframe').title = brandJson['COMMON'].COMPANY_NAME + ' Widget' : null;
+                        /** META sharing ELEMENTS */
+                        if(brandJson['WIDGET'].META_SHARE_INFO && Object.keys(brandJson['WIDGET'].META_SHARE_INFO).length > 0){
+                            Object.keys(brandJson['WIDGET'].META_SHARE_INFO).forEach(key => {
+                                var meta = document.querySelector("meta[property^='og:"+key.toLowerCase()+"']");
+                                meta.setAttribute('content', brandJson['WIDGET'].META_SHARE_INFO[key])
+                            })
+                        }
                     }
                 }
             }

package/src/assets/twp/index.html

@@ -6,7 +6,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
-    <title>Widget test page </title>
+    <title>Widget test page</title>
     <style>
 
         @-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
@@ -295,7 +295,10 @@
         window.Tiledesk('onBeforeInit', function(event_data) {
             console.log("onBeforeInit Tiledesk FN", event_data);
 
-            var brandSrc = event_data.detail.appConfigs.brandSrc? getBrandResources(event_data.detail.appConfigs.brandSrc) : null;
+            if(event_data.detail.appConfigs.brandSrc){
+                getBrandResources(event_data.detail.appConfigs.brandSrc)
+            }
+            // var brandSrc = event_data.detail.appConfigs.brandSrc?  : null;
 
             setTimeout(() => {
                 if(event_data && event_data.detail && event_data.detail.appConfigs){
@@ -408,7 +411,7 @@
                     var brandJson = JSON.parse(xhr.response)
                     if(brandJson){
                         /** TITLE AND FAVICON **/
-                        brandJson['WIDGET'].META_TITLE? document.body.title = brandJson['WIDGET'].META_TITLE : null;
+                        brandJson['WIDGET'].META_TITLE? document.title = brandJson['WIDGET'].META_TITLE : null;
                         brandJson['WIDGET'].FAVICON_URL?  document.querySelector("link[rel~='icon']").setAttribute('href', brandJson['WIDGET'].FAVICON_URL) : null;
                         /** FOOTER-LOGO **/    
                         brandJson['COMMON'].COMPANY_LOGO? document.getElementById('footer-logo').src = brandJson['COMMON'].COMPANY_LOGO : null;
@@ -421,6 +424,13 @@
                         brandJson['COMMON'].DOCS? null: document.getElementById('share').style.display = 'none'
                         /** IFRAME TITLE**/
                         brandJson['COMMON'].COMPANY_LOGO? document.getElementById('tiledeskiframe').title = brandJson['COMMON'].COMPANY_NAME + ' Widget' : null;
+                        /** META sharing ELEMENTS */
+                        if(brandJson['WIDGET'].META_SHARE_INFO && Object.keys(brandJson['WIDGET'].META_SHARE_INFO).length > 0){
+                            Object.keys(brandJson['WIDGET'].META_SHARE_INFO).forEach(key => {
+                                var meta = document.querySelector("meta[property^='og:"+key.toLowerCase()+"']");
+                                meta.setAttribute('content', brandJson['WIDGET'].META_SHARE_INFO[key])
+                            })
+                        }
                     }
                     
                 }