@dataclouder/ngx-agent-cards 0.1.83 → 0.1.86

package/fesm2022/dataclouder-ngx-agent-cards.mjs

@@ -3331,6 +3331,7 @@ const BACKGROUND_SERVICE_TOKEN = new InjectionToken('BACKGROUND_SERVICE_TOKEN');
 class VideoPlayerService {
     constructor() {
         this.conversationFlowStateService = inject(ConversationFlowStateService);
+        this.useNativePlayer = false;
         this.isRewinding = false;
         this.videoQueue = [];
         this.defaultVideoUrl = null;
@@ -3338,9 +3339,7 @@ class VideoPlayerService {
         this.playAndRewinded$ = this.playAndRewindedSource.asObservable();
         this.agentCard = signal(undefined, ...(ngDevMode ? [{ debugName: "agentCard" }] : []));
         console.log(' CONSTRUCTOR FOR VIDEO PLAYER...');
-        this.playAndRewindedSubscription = this.playAndRewinded$.subscribe(() => {
-            this.playNextInQueue();
-        });
+        this.playAndRewindedSubscription = this.playAndRewinded$.subscribe(() => { });
         this.moodSubscription = this.conversationFlowStateService.moodUpdated$.subscribe((mood) => {
             console.log('CHANGING MOOD.. ', mood);
             const card = this.agentCard();
@@ -3359,20 +3358,29 @@ class VideoPlayerService {
             this.setVideoSource(card.assets.motion.url);
         }
     }
-    initializePlayer(videoPlayer) {
-        if (this.player) {
-            this.player.destroy();
+    initializePlayer(videoPlayer, useNativePlayer = false) {
+        this.useNativePlayer = useNativePlayer;
+        if (this.useNativePlayer) {
+            this.videoElement = videoPlayer.nativeElement;
+        }
+        else {
+            if (this.player) {
+                this.player.destroy();
+            }
+            this.player = new Plyr.default(videoPlayer.nativeElement, {
+                controls: [],
+            });
+            this.player.on('ready', (event) => {
+                const instance = event.detail.plyr;
+                console.log('El video esta redyinstance', instance);
+            });
         }
-        this.player = new Plyr.default(videoPlayer.nativeElement, {
-            controls: [],
-        });
-        this.player.on('ready', (event) => {
-            const instance = event.detail.plyr;
-            console.log('El video esta redyinstance', instance);
-        });
     }
     setVideoSource(videoUrl) {
-        if (this.player) {
+        if (this.useNativePlayer && this.videoElement) {
+            this.videoElement.src = videoUrl;
+        }
+        else if (this.player) {
             this.player.source = {
                 type: 'video',
                 sources: [
@@ -3398,12 +3406,19 @@ class VideoPlayerService {
         }
     }
     playVideo() {
-        if (this.player) {
+        if (this.useNativePlayer && this.videoElement) {
+            this.videoElement.play();
+        }
+        else if (this.player) {
             this.player.play();
         }
     }
     rewindVideo() {
-        if (this.player) {
+        if (this.useNativePlayer && this.videoElement) {
+            this.videoElement.currentTime = 0;
+            this.videoElement.play();
+        }
+        else if (this.player) {
             if (this.isRewinding) {
                 this.isRewinding = false;
                 clearInterval(this.rewindInterval);
@@ -3414,10 +3429,10 @@ class VideoPlayerService {
                 this.isRewinding = true;
                 this.player.pause();
                 this.rewindInterval = setInterval(() => {
-                    if (this.player.currentTime > 0) {
+                    if (this.player && this.player.currentTime > 0) {
                         this.player.rewind(0.1);
                     }
-                    else {
+                    else if (this.player) {
                         this.player.currentTime = 0;
                         this.isRewinding = false;
                         clearInterval(this.rewindInterval);
@@ -3429,22 +3444,28 @@ class VideoPlayerService {
         }
     }
     changeVideoSource(videoUrl) {
-        if (this.player) {
-            this.setVideoSource(videoUrl);
-        }
+        this.setVideoSource(videoUrl);
     }
     addVideosToQueue(videoUrls) {
         console.log('ADING VIDEOS TO QUEUE, ', videoUrls);
         this.videoQueue.push(...videoUrls);
     }
     destroyPlayer() {
-        if (this.player) {
+        if (this.useNativePlayer && this.videoElement) {
+            this.videoElement.pause();
+            this.videoElement = undefined;
+        }
+        else if (this.player) {
             this.player.destroy();
+            this.player = undefined;
         }
     }
     playAndRewind() {
-        if (this.player && !this.player.playing) {
-            this.playNextInQueue();
+        if (this.useNativePlayer && this.videoElement && this.videoElement.paused) {
+            this.playNextInQueueNative();
+        }
+        else if (this.player && !this.player.playing) {
+            this.playNextInQueuePlayr();
         }
     }
     cleanUp() {
@@ -3465,23 +3486,78 @@ class VideoPlayerService {
             this.moodSubscription.unsubscribe();
         }
     }
-    playNextInQueue() {
+    playNextInQueueNative() {
         if (this.videoQueue.length > 0) {
             const videoUrl = this.videoQueue.shift();
             if (videoUrl) {
                 this.changeVideoSource(videoUrl);
-                this.player.play();
-                this.player.once('ended', () => {
+                this.playVideo();
+                const onEnded = () => {
                     this.rewindVideo();
-                });
+                    if (this.videoElement) {
+                        this.videoElement.removeEventListener('ended', onEnded);
+                    }
+                };
+                if (this.videoElement) {
+                    this.videoElement.addEventListener('ended', onEnded);
+                }
             }
         }
         else if (this.defaultVideoUrl) {
             this.changeVideoSource(this.defaultVideoUrl);
-            this.player.play();
-            this.player.once('ended', () => {
-                this.rewindVideo();
-            });
+            this.playVideo();
+            const onEnded = () => {
+                this.playDefaultVideoForever();
+                if (this.videoElement) {
+                    this.videoElement.removeEventListener('ended', onEnded);
+                }
+            };
+            if (this.videoElement) {
+                this.videoElement.addEventListener('ended', onEnded);
+            }
+        }
+    }
+    playNextInQueuePlayr() {
+        if (this.videoQueue.length > 0) {
+            const videoUrl = this.videoQueue.shift();
+            if (videoUrl) {
+                this.changeVideoSource(videoUrl);
+                this.playVideo();
+                const onEnded = () => {
+                    this.rewindVideo();
+                };
+                if (this.player) {
+                    this.player.once('ended', onEnded);
+                }
+            }
+        }
+        else if (this.defaultVideoUrl) {
+            this.changeVideoSource(this.defaultVideoUrl);
+            this.playVideo();
+            const onEnded = () => {
+                this.playDefaultVideoForever();
+            };
+            if (this.player) {
+                this.player.once('ended', onEnded);
+            }
+        }
+    }
+    playDefaultVideoForever() {
+        if (this.defaultVideoUrl) {
+            this.changeVideoSource(this.defaultVideoUrl);
+            this.playVideo();
+            const onEnded = () => {
+                this.playDefaultVideoForever(); // Recursive call to loop
+                if (this.useNativePlayer && this.videoElement) {
+                    this.videoElement.removeEventListener('ended', onEnded);
+                }
+            };
+            if (this.useNativePlayer && this.videoElement) {
+                this.videoElement.addEventListener('ended', onEnded);
+            }
+            else if (this.player) {
+                this.player.once('ended', onEnded);
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: VideoPlayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -3494,6 +3570,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class VideoPlayerNativeService {
+    constructor() {
+        this.conversationFlowStateService = inject(ConversationFlowStateService);
+        this.videoQueue = [];
+        this.defaultVideoUrl = null;
+        this.agentCard = signal(undefined, ...(ngDevMode ? [{ debugName: "agentCard" }] : []));
+        this.moodSubscription = this.conversationFlowStateService.moodUpdated$.subscribe((mood) => {
+            const card = this.agentCard();
+            if (mood && card?.assets?.motions) {
+                const motionUrl = card.assets.motions.find((m) => m.metadata?.moodState === mood)?.url;
+                if (motionUrl) {
+                    this.addVideosToQueue([motionUrl]);
+                    this.playAndRewind();
+                }
+            }
+        });
+    }
+    setAgentCard(card) {
+        this.agentCard.set(card);
+        if (card.assets?.motion?.url) {
+            this.setVideoSource(card.assets.motion.url);
+        }
+    }
+    initializePlayer(videoPlayer) {
+        this.videoElement = videoPlayer.nativeElement;
+        this.videoElement.addEventListener('ended', this.onVideoEnded.bind(this));
+    }
+    setVideoSource(videoUrl) {
+        if (this.videoElement) {
+            this.videoElement.src = videoUrl;
+        }
+    }
+    startConversation(defaultVideo) {
+        if (defaultVideo) {
+            this.defaultVideoUrl = defaultVideo;
+        }
+        else {
+            this.defaultVideoUrl = this.agentCard()?.assets?.motion?.url || null;
+        }
+        const introMotion = this.agentCard()?.assets?.motions?.find((m) => m.metadata?.event === 'intro');
+        if (introMotion?.url) {
+            this.addVideosToQueue([introMotion.url]);
+            this.playAndRewind();
+        }
+    }
+    playVideo() {
+        this.videoElement?.play();
+    }
+    addVideosToQueue(videoUrls) {
+        this.videoQueue.push(...videoUrls);
+    }
+    destroyPlayer() {
+        if (this.videoElement) {
+            this.videoElement.removeEventListener('ended', this.onVideoEnded.bind(this));
+            this.videoElement.pause();
+            this.videoElement = undefined;
+        }
+    }
+    playAndRewind() {
+        if (this.videoElement && this.videoElement.paused) {
+            this.playNextInQueue();
+        }
+    }
+    cleanUp() {
+        this.destroyPlayer();
+        this.videoQueue = [];
+        this.defaultVideoUrl = null;
+        this.agentCard.set(undefined);
+    }
+    ngOnDestroy() {
+        this.moodSubscription?.unsubscribe();
+        this.destroyPlayer();
+    }
+    onVideoEnded() {
+        this.playNextInQueue();
+    }
+    playNextInQueue() {
+        console.log('Playing next in queue');
+        if (this.videoQueue.length > 0) {
+            const videoUrl = this.videoQueue.shift();
+            if (videoUrl && this.videoElement) {
+                this.videoElement.src = videoUrl;
+                this.videoElement.play();
+            }
+        }
+        else if (this.defaultVideoUrl && this.videoElement) {
+            console.log('Playing default video');
+            this.videoElement.src = this.defaultVideoUrl;
+            // this.videoElement.loop = true;
+            this.videoElement.play();
+        }
+        else {
+            console.log('No default video');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: VideoPlayerNativeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: VideoPlayerNativeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: VideoPlayerNativeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 const Endpoints = 'conversationRule';
 class ConversationRuleService extends EntityCommunicationService {
     constructor() {
@@ -3786,7 +3967,6 @@ class MessageContentDisplayer {
         }, ...(ngDevMode ? [{ debugName: "hasTranscription" }] : []));
         effect(() => {
             const currentMsg = this.message();
-            console.log('currentMsg', currentMsg);
             if (currentMsg) {
                 this.initializeBasedOnMessage(currentMsg);
             }
@@ -7221,8 +7401,9 @@ class DcAgentCardDetailsComponent {
         this.chatMonitorService = inject(ChatMonitorService);
         this.conversationFlowStateService = inject(ConversationFlowStateService);
         this.userService = inject(UserService);
-        this.videoPlayerService = inject(VideoPlayerService);
+        this.videoPlayerService = inject(VideoPlayerNativeService);
         this.agentCardId = '';
+        this.useNativePlayer = true;
         this.onStartConversation = output();
         this.agentCard = signal(undefined, ...(ngDevMode ? [{ debugName: "agentCard" }] : []));
         this.showInfoLayer = signal(false, ...(ngDevMode ? [{ debugName: "showInfoLayer" }] : []));
@@ -7266,25 +7447,30 @@ class DcAgentCardDetailsComponent {
         }
     }
     transformToLanguage(agentCard, targetLang) {
-        const translation = agentCard.characterCard?.data?.langTranslation?.[targetLang];
-        const cardTranslated = { ...agentCard };
-        // Set Greetings Communication and Language.
-        cardTranslated.characterCard.data.greetings = translation?.greetings;
-        if (cardTranslated.characterCard.data?.persona?.communication) {
-            cardTranslated.characterCard.data.persona.communication = translation?.communication;
+        const cardTranslated = JSON.parse(JSON.stringify(agentCard));
+        const translation = cardTranslated.characterCard?.data?.langTranslation?.[targetLang];
+        if (cardTranslated.characterCard?.data) {
+            cardTranslated.characterCard.data.greetings = translation?.greetings;
+            if (cardTranslated.characterCard.data.persona && translation?.communication) {
+                cardTranslated.characterCard.data.persona.communication = translation.communication;
+            }
         }
         cardTranslated.lang = targetLang;
         console.log('cambiando idioma', agentCard.lang);
-        const locale = LANGUAGES[targetLang].defaultLocale;
+        const locale = LANGUAGES[targetLang]?.defaultLocale;
         if (!locale)
             return cardTranslated;
-        const transformedMainVoice = this._transformVoice(agentCard.conversationSettings.mainVoice?.voice, locale);
-        if (transformedMainVoice) {
-            agentCard.conversationSettings.mainVoice.voice = transformedMainVoice;
+        if (cardTranslated.conversationSettings?.mainVoice) {
+            const transformedMainVoice = this._transformVoice(cardTranslated.conversationSettings.mainVoice.voice, locale);
+            if (transformedMainVoice) {
+                cardTranslated.conversationSettings.mainVoice.voice = transformedMainVoice;
+            }
         }
-        const transformedSecondaryVoice = this._transformVoice(agentCard.conversationSettings.secondaryVoice?.voice, locale);
-        if (transformedSecondaryVoice) {
-            agentCard.conversationSettings.secondaryVoice.voice = transformedSecondaryVoice;
+        if (cardTranslated.conversationSettings?.secondaryVoice) {
+            const transformedSecondaryVoice = this._transformVoice(cardTranslated.conversationSettings.secondaryVoice.voice, locale);
+            if (transformedSecondaryVoice) {
+                cardTranslated.conversationSettings.secondaryVoice.voice = transformedSecondaryVoice;
+            }
         }
         return cardTranslated;
     }
@@ -7298,29 +7484,34 @@ class DcAgentCardDetailsComponent {
     startConversation() {
         this.videoPlayerService.startConversation();
         const targetLang = this.userService.getTargetLanguage();
-        const translation = this.agentCard()?.characterCard?.data?.langTranslation?.[targetLang];
-        if (this.agentCard()?.lang === targetLang) {
-            this.onStartConversation.emit(this.agentCard());
+        const agentCard = this.agentCard();
+        if (!agentCard)
+            return;
+        const translation = agentCard.characterCard?.data?.langTranslation?.[targetLang];
+        if (agentCard.lang === targetLang) {
+            this.onStartConversation.emit(agentCard);
         }
         else if (translation) {
-            const transformedCard = this.transformToLanguage(this.agentCard(), targetLang);
+            const transformedCard = this.transformToLanguage(agentCard, targetLang);
             this.onStartConversation.emit(transformedCard);
         }
         else {
-            this.onStartConversation.emit(this.agentCard());
+            this.onStartConversation.emit(agentCard);
         }
     }
     toggleInfoLayer() {
         this.showInfoLayer.update((value) => !value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      <!-- This video is affected by Plyr i set by default background transparent -->\n      <video #videoPlayer class=\"card-image\"></video>\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      @if(!chatMonitorService.isConversationActive()) {\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button\n          size=\"large\"\n          [label]=\"'dataclouder.agentCards.dcAgentCardDetails.startConversation' | translate\"\n          [rounded]=\"true\"\n          (click)=\"startConversation()\" />\n      </div>\n      }\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.name }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>{{ 'dataclouder.agentCards.dcAgentCardDetails.scenario' | translate }}</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}::ng-deep .plyr--full-ui{width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }, { kind: "pipe", type: i3$6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId", useNativePlayer: "useNativePlayer" }, outputs: { onStartConversation: "onStartConversation" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      <!-- This video is affected by Plyr i set by default background transparent -->\n      <video #videoPlayer class=\"card-image\"></video>\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      @if(!chatMonitorService.isConversationActive()) {\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button\n          size=\"large\"\n          [label]=\"'dataclouder.agentCards.dcAgentCardDetails.startConversation' | translate\"\n          [rounded]=\"true\"\n          (click)=\"startConversation()\" />\n      </div>\n      }\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.name }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>{{ 'dataclouder.agentCards.dcAgentCardDetails.scenario' | translate }}</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}::ng-deep .plyr--full-ui{width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }, { kind: "pipe", type: i3$6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcAgentCardDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe, TranslateModule], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      <!-- This video is affected by Plyr i set by default background transparent -->\n      <video #videoPlayer class=\"card-image\"></video>\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      @if(!chatMonitorService.isConversationActive()) {\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button\n          size=\"large\"\n          [label]=\"'dataclouder.agentCards.dcAgentCardDetails.startConversation' | translate\"\n          [rounded]=\"true\"\n          (click)=\"startConversation()\" />\n      </div>\n      }\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.name }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>{{ 'dataclouder.agentCards.dcAgentCardDetails.scenario' | translate }}</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}::ng-deep .plyr--full-ui{width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"] }]
         }], ctorParameters: () => [], propDecorators: { agentCardId: [{
                 type: Input
+            }], useNativePlayer: [{
+                type: Input
             }], videoPlayer: [{
                 type: ViewChild,
                 args: ['videoPlayer']
@@ -7686,5 +7877,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACCDataGenerationComponent, AGENT_CARDS_STATE_SERVICE, AIGenerationService, AgentCardListComponent, AgentCardUI, AgentCardsGenerationService, AudioService, AudioSpeed, BACKGROUND_SERVICE_TOKEN, CONVERSATION_AI_TOKEN, CardsCreatorComponent, ChatEngineTestComponent, ChatEventType, ChatMessage, ChatMessageOrchestratorComponent, ChatMonitorService, ChatRole, ConditionOperator, ConditionType, ContextEngineService, ContextType, ConversationDTO, ConversationEvents, ConversationFlowStateService, ConversationMessagesDTO, ConversationPromptBuilderService, ConversationRuleService, ConversationRulesComponent, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationUserChatSettingsComponent, DcAgentCardDetailsComponent, DefaultAgentCardsService, DoActionTypeOptions, DynamicFlowService, DynamicFlowTaskTypeOptions, EAccountsPlatform, EAgentType, EDoActionType, EDynamicFlowTaskType, EntityThen, EntityWhatOptions, EntityWhenOptions, EvalResultStringDefinition, GlobalToolsService, MessageContent, MessageContentDisplayer, MessagesStateService, ModelSelectorComponent, PopupService, PromptPreviewComponent, SectionType, SystemPromptType, TextEngineOptions, TextEngines, VIDEO_PLAYER_SERVICE_TOKEN, VideoPlayerService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, getMoodStateLabelsAsString, getMoodStatePrompt, markdownToHtml, matchTranscription, provideAgentCardService, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
+export { ACCDataGenerationComponent, AGENT_CARDS_STATE_SERVICE, AIGenerationService, AgentCardListComponent, AgentCardUI, AgentCardsGenerationService, AudioService, AudioSpeed, BACKGROUND_SERVICE_TOKEN, CONVERSATION_AI_TOKEN, CardsCreatorComponent, ChatEngineTestComponent, ChatEventType, ChatMessage, ChatMessageOrchestratorComponent, ChatMonitorService, ChatRole, ConditionOperator, ConditionType, ContextEngineService, ContextType, ConversationDTO, ConversationEvents, ConversationFlowStateService, ConversationMessagesDTO, ConversationPromptBuilderService, ConversationRuleService, ConversationRulesComponent, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationUserChatSettingsComponent, DcAgentCardDetailsComponent, DefaultAgentCardsService, DoActionTypeOptions, DynamicFlowService, DynamicFlowTaskTypeOptions, EAccountsPlatform, EAgentType, EDoActionType, EDynamicFlowTaskType, EntityThen, EntityWhatOptions, EntityWhenOptions, EvalResultStringDefinition, GlobalToolsService, MessageContent, MessageContentDisplayer, MessagesStateService, ModelSelectorComponent, PopupService, PromptPreviewComponent, SectionType, SystemPromptType, TextEngineOptions, TextEngines, VIDEO_PLAYER_SERVICE_TOKEN, VideoPlayerNativeService, VideoPlayerService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, getMoodStateLabelsAsString, getMoodStatePrompt, markdownToHtml, matchTranscription, provideAgentCardService, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
 //# sourceMappingURL=dataclouder-ngx-agent-cards.mjs.map