fix(FEC-13650): Player v7 | CTA | CTA doesn't show when seeking backw…

…ards for the second CTA.
kaltura · Jan 24, 2024 · d8fa6ee · d8fa6ee
2 parents 6e01d31 + b4d91a0
commit d8fa6ee
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/call-to-action.tsx b/src/call-to-action.tsx
@@ -34,6 +34,7 @@ class CallToAction extends BasePlugin<CallToActionConfig> {
     }
 
     if (this.messages.length) {
+      this.eventManager.listenOnce(this.player, this.player.Event.Core.LOADED_DATA, () => this.sortMessages());
       this.eventManager.listen(this.player, this.player.Event.Core.TIME_UPDATE, () => this.onTimeUpdate());
       this.eventManager.listen(this.player, this.player.Event.Core.SEEKED, () => this.onSeeked());
     }
@@ -74,6 +75,7 @@ class CallToAction extends BasePlugin<CallToActionConfig> {
     if (this.activeMessage) {
       this.callToActionManager.removeMessage();
       this.activeMessageEndTime = -1;
+      this.activeMessage = null;
     }
 
     for (const message of this.messages) {
@@ -112,9 +114,14 @@ class CallToAction extends BasePlugin<CallToActionConfig> {
     ) {
       this.callToActionManager.removeMessage();
       this.activeMessageEndTime = -1;
+      this.activeMessage = null;
     }
   }
 
+  private sortMessages() {
+    this.messages.sort((messageA: MessageData, messageB: MessageData) => this.compareMessagesByTiming(messageA, messageB));
+  }
+
   private filterMessages() {
     this.messages = this.config.messages
       .map(message => {
@@ -148,8 +155,7 @@ class CallToAction extends BasePlugin<CallToActionConfig> {
         const contentValid = message.description || message.title || message.buttons.length;
 
         return durationValid && timingValid && contentValid;
-      })
-      .sort((messageA: MessageData, messageB: MessageData) => this.compareMessagesByTiming(messageA, messageB));
+      });
   }
 
   private compareMessagesByTiming(messageA: MessageData, messageB: MessageData) {
@@ -173,6 +179,8 @@ class CallToAction extends BasePlugin<CallToActionConfig> {
   private showMessage(message: MessageDataWithTracking, duration?: number) {
     this.activeMessage = message;
     message.wasShown = true;
+
+    this.callToActionManager.removeMessage();
     this.callToActionManager.addMessage({
       message,
       duration,

diff --git a/src/components/text-with-tooltip/text-with-tooltip.tsx b/src/components/text-with-tooltip/text-with-tooltip.tsx
@@ -12,7 +12,7 @@ const TextWithTooltip = ({text, numberOfLines}: {text: string; numberOfLines: nu
   const [isFinalized, setIsFinalized] = useState(false);
 
   useLayoutEffect(() => {
-    if (textRef?.current && comparisonTextRef?.current) {
+    if (!isFinalized && textRef?.current && comparisonTextRef?.current) {
       setIsFinalized(true);
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -22,7 +22,7 @@ const TextWithTooltip = ({text, numberOfLines}: {text: string; numberOfLines: nu
       const comparisonTextHeight = comparisonTextRef?.current?.getBoundingClientRect().height;
       setShowTooltip(textHeight < comparisonTextHeight);
     }
-  }, [isFinalized]);
+  });
 
   const textElement = (
     <div ref={textRef} style={{'-webkit-line-clamp': numberOfLines}} className={styles.text}>