valtech-components 4.0.240 → 4.0.242

package/fesm2022/valtech-components.mjs

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.240';
+const VERSION = '4.0.242';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -72621,6 +72621,19 @@ class MessageBubbleComponent {
         this.actionsOpen.set(false);
         this.action.emit({ type, msgId: this.msg().msgId, token });
     }
+    /** Diagnóstico: el navegador no pudo reproducir el audio recibido. */
+    onAudioError(att, event) {
+        const el = event.target;
+        const codes = { 1: 'ABORTED', 2: 'NETWORK', 3: 'DECODE', 4: 'SRC_NOT_SUPPORTED' };
+        const canPlay = att.mimeType ? document.createElement('audio').canPlayType(att.mimeType) : '';
+        console.error('[MessageBubble] audio play error', {
+            mimeType: att.mimeType,
+            url: att.url.slice(0, 80),
+            code: el.error?.code,
+            reason: el.error ? codes[el.error.code] : 'unknown',
+            canPlayThisType: canPlay,
+        });
+    }
     t(key) {
         return this.i18n.t(key, 'MessageBubble');
     }
@@ -72669,7 +72682,13 @@ class MessageBubbleComponent {
             @if (audioAttachments().length > 0) {
               <div class="audios">
                 @for (att of audioAttachments(); track att.url) {
-                  <audio class="att-audio" controls preload="metadata" [src]="att.url"></audio>
+                  <audio
+                    class="att-audio"
+                    controls
+                    preload="metadata"
+                    [src]="att.url"
+                    (error)="onAudioError(att, $event)"
+                  ></audio>
                 }
               </div>
             }
@@ -72784,7 +72803,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             @if (audioAttachments().length > 0) {
               <div class="audios">
                 @for (att of audioAttachments(); track att.url) {
-                  <audio class="att-audio" controls preload="metadata" [src]="att.url"></audio>
+                  <audio
+                    class="att-audio"
+                    controls
+                    preload="metadata"
+                    [src]="att.url"
+                    (error)="onAudioError(att, $event)"
+                  ></audio>
                 }
               </div>
             }
@@ -73184,6 +73209,10 @@ class ChatComposerComponent {
             this.recStream = stream;
             const mimeType = this.pickAudioMime();
             this.recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
+            console.log('[ChatComposer] recording start', {
+                picked: mimeType || '(default)',
+                recorderMimeType: this.recorder.mimeType,
+            });
             this.recChunks = [];
             this.recorder.ondataavailable = e => {
                 if (e.data.size > 0)
@@ -73210,6 +73239,13 @@ class ChatComposerComponent {
             const blob = new Blob(this.recChunks, { type });
             const ext = type.includes('mp4') ? 'm4a' : 'webm';
             const file = new File([blob], `audio-${this.recSeconds()}s.${ext}`, { type });
+            console.log('[ChatComposer] audio recorded', {
+                type,
+                size: blob.size,
+                chunks: this.recChunks.length,
+                canPlayWebm: this.canPlay('audio/webm'),
+                canPlayMp4: this.canPlay('audio/mp4'),
+            });
             if (blob.size > 0)
                 this.addPending(file);
             this.cleanupRecording();
@@ -73240,6 +73276,43 @@ class ChatComposerComponent {
         this.recording.set(false);
         this.recSeconds.set(0);
     }
+    /** Diagnóstico: el navegador no pudo reproducir el adjunto de audio. */
+    onAudioError(where, file, event) {
+        const el = event.target;
+        const err = el.error;
+        const codes = {
+            1: 'ABORTED',
+            2: 'NETWORK',
+            3: 'DECODE',
+            4: 'SRC_NOT_SUPPORTED',
+        };
+        console.error('[ChatComposer] audio play error', {
+            where,
+            fileType: file.type,
+            fileName: file.name,
+            code: err?.code,
+            reason: err ? codes[err.code] : 'unknown',
+            message: err?.message,
+            canPlayThisType: this.canPlay(file.type),
+        });
+    }
+    onAudioLoaded(where, file, event) {
+        const el = event.target;
+        console.log('[ChatComposer] audio loadedmetadata', {
+            where,
+            fileType: file.type,
+            duration: el.duration,
+        });
+    }
+    /** ¿El navegador declara que puede reproducir este tipo? '' / 'maybe' / 'probably'. */
+    canPlay(type) {
+        try {
+            return document.createElement('audio').canPlayType(type);
+        }
+        catch {
+            return 'error';
+        }
+    }
     ngOnDestroy() {
         this.cleanupRecording();
         for (const att of this.pending()) {
@@ -73270,7 +73343,13 @@ class ChatComposerComponent {
           @for (att of pending(); track att.id) {
             @if (att.kind === 'audio') {
               <div class="audio-chip">
-                <audio controls preload="metadata" [src]="att.url"></audio>
+                <audio
+                  controls
+                  preload="metadata"
+                  [src]="att.url"
+                  (error)="onAudioError('preview', att.file, $event)"
+                  (loadedmetadata)="onAudioLoaded('preview', att.file, $event)"
+                ></audio>
                 <button class="thumb-remove inline" [attr.aria-label]="t('remove')" (click)="removePending(att.id)">
                   <ion-icon name="close-outline" aria-hidden="true" />
                 </button>
@@ -73321,21 +73400,22 @@ class ChatComposerComponent {
           ></div>
 
           <div class="actions">
+            <span class="actions-spacer"></span>
             @if (showAttach()) {
               <label class="icon-btn" [attr.aria-label]="t('attach')">
                 <ion-icon name="add-outline" aria-hidden="true" />
                 <input type="file" hidden (change)="onFile($event)" accept="image/*,application/pdf" />
               </label>
             }
-            <span class="actions-spacer"></span>
+            @if (showMic()) {
+              <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="startRecording()">
+                <ion-icon name="mic-outline" aria-hidden="true" />
+              </button>
+            }
             @if (canSend()) {
               <button class="send-btn" [attr.aria-label]="t('send')" (click)="onSend()">
                 <ion-icon name="arrow-up-outline" aria-hidden="true" />
               </button>
-            } @else if (showMic()) {
-              <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="startRecording()">
-                <ion-icon name="mic-outline" aria-hidden="true" />
-              </button>
             }
           </div>
         </div>
@@ -73364,7 +73444,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           @for (att of pending(); track att.id) {
             @if (att.kind === 'audio') {
               <div class="audio-chip">
-                <audio controls preload="metadata" [src]="att.url"></audio>
+                <audio
+                  controls
+                  preload="metadata"
+                  [src]="att.url"
+                  (error)="onAudioError('preview', att.file, $event)"
+                  (loadedmetadata)="onAudioLoaded('preview', att.file, $event)"
+                ></audio>
                 <button class="thumb-remove inline" [attr.aria-label]="t('remove')" (click)="removePending(att.id)">
                   <ion-icon name="close-outline" aria-hidden="true" />
                 </button>
@@ -73415,21 +73501,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           ></div>
 
           <div class="actions">
+            <span class="actions-spacer"></span>
             @if (showAttach()) {
               <label class="icon-btn" [attr.aria-label]="t('attach')">
                 <ion-icon name="add-outline" aria-hidden="true" />
                 <input type="file" hidden (change)="onFile($event)" accept="image/*,application/pdf" />
               </label>
             }
-            <span class="actions-spacer"></span>
+            @if (showMic()) {
+              <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="startRecording()">
+                <ion-icon name="mic-outline" aria-hidden="true" />
+              </button>
+            }
             @if (canSend()) {
               <button class="send-btn" [attr.aria-label]="t('send')" (click)="onSend()">
                 <ion-icon name="arrow-up-outline" aria-hidden="true" />
               </button>
-            } @else if (showMic()) {
-              <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="startRecording()">
-                <ion-icon name="mic-outline" aria-hidden="true" />
-              </button>
             }
           </div>
         </div>