@dataclouder/ngx-agent-cards 0.1.79 → 0.1.83

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

@@ -3330,16 +3330,39 @@ const BACKGROUND_SERVICE_TOKEN = new InjectionToken('BACKGROUND_SERVICE_TOKEN');
 
 class VideoPlayerService {
     constructor() {
+        this.conversationFlowStateService = inject(ConversationFlowStateService);
         this.isRewinding = false;
         this.videoQueue = [];
         this.defaultVideoUrl = null;
         this.playAndRewindedSource = new Subject();
         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.moodSubscription = this.conversationFlowStateService.moodUpdated$.subscribe((mood) => {
+            console.log('CHANGING MOOD.. ', 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) {
+        if (this.player) {
+            this.player.destroy();
+        }
         this.player = new Plyr.default(videoPlayer.nativeElement, {
             controls: [],
         });
@@ -3364,7 +3387,14 @@ class VideoPlayerService {
     startConversation(defaultVideo) {
         if (defaultVideo) {
             this.defaultVideoUrl = defaultVideo;
-            // this.setVideoSource(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() {
@@ -3404,6 +3434,7 @@ class VideoPlayerService {
         }
     }
     addVideosToQueue(videoUrls) {
+        console.log('ADING VIDEOS TO QUEUE, ', videoUrls);
         this.videoQueue.push(...videoUrls);
     }
     destroyPlayer() {
@@ -3424,11 +3455,15 @@ class VideoPlayerService {
         this.isRewinding = false;
         this.videoQueue = [];
         this.defaultVideoUrl = null;
+        this.agentCard.set(undefined);
     }
     ngOnDestroy() {
         if (this.playAndRewindedSubscription) {
             this.playAndRewindedSubscription.unsubscribe();
         }
+        if (this.moodSubscription) {
+            this.moodSubscription.unsubscribe();
+        }
     }
     playNextInQueue() {
         if (this.videoQueue.length > 0) {
@@ -7191,16 +7226,6 @@ class DcAgentCardDetailsComponent {
         this.onStartConversation = output();
         this.agentCard = signal(undefined, ...(ngDevMode ? [{ debugName: "agentCard" }] : []));
         this.showInfoLayer = signal(false, ...(ngDevMode ? [{ debugName: "showInfoLayer" }] : []));
-        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.videoPlayerService.addVideosToQueue([motionUrl]);
-                    this.videoPlayerService.playAndRewind();
-                }
-            }
-        });
         effect(() => {
             const isConversationActive = this.chatMonitorService.isConversationActive();
             if (isConversationActive) {
@@ -7211,7 +7236,6 @@ class DcAgentCardDetailsComponent {
     ngOnDestroy() {
         this.videoPlayerService.cleanUp();
         this.chatMonitorService.setBackground(undefined);
-        this.moodSubscription?.unsubscribe();
     }
     ngAfterViewInit() {
         if (this.videoPlayer) {
@@ -7236,9 +7260,7 @@ class DcAgentCardDetailsComponent {
             card.conversationSettings = {};
         }
         this.agentCard.set(card);
-        if (card.assets?.motion?.url) {
-            this.videoPlayerService.setVideoSource(card.assets.motion.url);
-        }
+        this.videoPlayerService.setAgentCard(card);
         if (card.assets.banner?.url) {
             this.chatMonitorService.setBackground(card.assets.banner.url);
         }
@@ -7274,13 +7296,7 @@ class DcAgentCardDetailsComponent {
         return [locale.replace('_', '-'), ...newVoiceParts].join('-');
     }
     startConversation() {
-        const defaultVideoUrl = this.agentCard()?.assets?.motion?.url;
-        this.videoPlayerService.startConversation(defaultVideoUrl);
-        const introMotion = this.agentCard()?.assets?.motions?.find((m) => m.metadata?.event === 'intro');
-        if (introMotion?.url) {
-            this.videoPlayerService.addVideosToQueue([introMotion.url]);
-            this.videoPlayerService.playAndRewind();
-        }
+        this.videoPlayerService.startConversation();
         const targetLang = this.userService.getTargetLanguage();
         const translation = this.agentCard()?.characterCard?.data?.langTranslation?.[targetLang];
         if (this.agentCard()?.lang === targetLang) {