@windstream/react-shared-components 0.2.60 → 0.2.62

package/src/components/video-link/youtube-embed.tsx

@@ -36,80 +36,76 @@ export const YoutubeEmbed: React.FC<Props> = props => {
   } = props;
 
   const embedId = useMemo(() => getYoutubeEmbedId(link), [link]);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
   const progressInterval = useRef<ReturnType<typeof setInterval>>();
 
   useFullscreenToggle(iframeRef, onFullscreenToggle);
 
   useEffect(() => {
-    if (!embedId || !containerRef.current) return undefined;
+    if (!embedId || !iframeRef.current) return undefined;
     let player: any;
     let cancelled = false;
 
-    // The YT.Player-managed iframe is mounted into a plain DOM node created
-    // here, outside of React's own render tree/reconciliation - React only
-    // ever renders an empty container div for this component, so it never
-    // diffs/touches whatever the API puts inside it. Letting React manage
-    // the same node the API mutates is a well-known source of onReady/
-    // onStateChange silently never firing (a reconciliation pass can revert
-    // the API's DOM changes without going through this component's own
-    // effect cleanup).
-    const mountNode = document.createElement("div");
-    mountNode.style.width = "100%";
-    mountNode.style.height = "100%";
-    containerRef.current.appendChild(mountNode);
-
-    loadYoutubeIframeApi().then(YT => {
-      if (cancelled) return;
-      player = new YT.Player(mountNode, {
-        videoId: embedId,
-        playerVars: {
-          enablejsapi: 1,
-          autoplay: autoplay ? 1 : 0,
-          mute: autoplay ? 1 : 0,
-        },
-        events: {
-          onReady: () => {
-            const iframe = player.getIframe?.();
-            if (iframe) {
-              iframe.className = "absolute left-0 top-0 h-full w-full";
-              iframeRef.current = iframe;
-            }
-          },
-          onStateChange: (event: any) => {
-            const State = YT.PlayerState;
-            if (event.data === State.PLAYING) {
-              onPlay?.();
-              clearInterval(progressInterval.current);
-              progressInterval.current = setInterval(() => {
-                const duration = player?.getDuration?.() ?? 0;
-                const position = player?.getCurrentTime?.() ?? 0;
-                onTimeUpdate?.(position, duration);
-              }, 1000);
-            } else if (event.data === State.PAUSED) {
-              onPause?.();
-              clearInterval(progressInterval.current);
-            } else if (event.data === State.ENDED) {
-              onEnded?.();
-              clearInterval(progressInterval.current);
-            }
+    // Attach the JS API to the real <iframe> React already rendered (kept in
+    // the markup so crawlers see a video element) instead of letting the API
+    // inject its own iframe client-side into an empty div.
+    loadYoutubeIframeApi()
+      .then(YT => {
+        if (cancelled || !iframeRef.current) return;
+        player = new YT.Player(iframeRef.current, {
+          events: {
+            onStateChange: (event: any) => {
+              const State = YT.PlayerState;
+              if (event.data === State.PLAYING) {
+                onPlay?.();
+                clearInterval(progressInterval.current);
+                progressInterval.current = setInterval(() => {
+                  const duration = player?.getDuration?.() ?? 0;
+                  const position = player?.getCurrentTime?.() ?? 0;
+                  onTimeUpdate?.(position, duration);
+                }, 1000);
+              } else if (event.data === State.PAUSED) {
+                onPause?.();
+                clearInterval(progressInterval.current);
+              } else if (event.data === State.ENDED) {
+                onEnded?.();
+                clearInterval(progressInterval.current);
+              }
+            },
           },
-        },
+        });
+      })
+      .catch(() => {
+        // ignore API load failures; the iframe still plays on its own
       });
-    }).catch(() => {
-      // ignore YouTube API load failures; component will remain empty
-    });
 
     return () => {
       cancelled = true;
       clearInterval(progressInterval.current);
-      player?.destroy?.();
-      mountNode.remove();
+      try {
+        player?.destroy?.();
+      } catch {
+        // iframe may already be detached by React on unmount
+      }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [embedId]);
 
+  if (!embedId) {
+    return null;
+  }
+
+  // enablejsapi=1 lets YT.Player attach for analytics; autoplay/mute are driven
+  // via the URL so a fresh mount (on play) starts playback.
+  const params = new URLSearchParams({
+    enablejsapi: "1",
+    autoplay: autoplay ? "1" : "0",
+    mute: autoplay ? "1" : "0",
+    playsinline: "1",
+    rel: "0",
+  });
+  const src = `https://www.youtube.com/embed/${embedId}?${params.toString()}`;
+
   return (
     <div
       className={cx(
@@ -117,10 +113,14 @@ export const YoutubeEmbed: React.FC<Props> = props => {
         containerClassName
       )}
     >
-      <div
-        ref={containerRef}
+      <iframe
+        ref={iframeRef}
         className="absolute left-0 top-0 h-full w-full"
+        src={src}
         title="Embedded youtube"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowFullScreen={true}
+        referrerPolicy="strict-origin-when-cross-origin"
       />
     </div>
   );

package/src/contentful/blocks/anchored-bottom-banner/index.test.tsx

@@ -285,3 +285,251 @@ describe("AnchoredBottomBanner", () => {
     consoleSpy.mockRestore();
   });
 });
+
+describe("AnchoredBottomBanner scheduledMessages", () => {
+  // 2026-05-19T12:00:00Z is a Tuesday.
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date("2026-05-19T12:00:00Z"));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("shows the active message's CTA, icon and countdown", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            daysToShow: ["ALL"],
+            countdownStartDateTime: "2026-05-19T11:00:00Z",
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            ctaButtonLabel: "Flash sale",
+            iconName: "bolt",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("Flash sale")).toBeInTheDocument();
+    expect(screen.queryByText("Default label")).not.toBeInTheDocument();
+    expect(screen.getByText("bolt")).toBeInTheDocument();
+    expect(screen.getByText(/01H : 00M : 00/)).toBeInTheDocument();
+  });
+
+  it("treats scheduleEnd as inclusive of the whole end day", () => {
+    render(
+      <AnchoredBottomBanner
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-17",
+            scheduleEnd: "2026-05-19",
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            ctaButtonLabel: "Last day",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("Last day")).toBeInTheDocument();
+    expect(screen.getByText(/01H : 00M : 00/)).toBeInTheDocument();
+  });
+
+  it("falls back to default when today is outside the display window", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-25",
+            scheduleEnd: "2026-05-26",
+            countdownEndDateTime: "2026-05-25T13:00:00Z",
+            ctaButtonLabel: "Future message",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("Default label")).toBeInTheDocument();
+    expect(screen.queryByText("Future message")).not.toBeInTheDocument();
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
+  it("hides the message when daysToShow excludes today's weekday", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            daysToShow: ["MONDAY"],
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            ctaButtonLabel: "Monday only",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("Default label")).toBeInTheDocument();
+    expect(screen.queryByText("Monday only")).not.toBeInTheDocument();
+  });
+
+  it("shows the message when daysToShow includes today's weekday (abbrev)", () => {
+    render(
+      <AnchoredBottomBanner
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            daysToShow: ["TUE"],
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            ctaButtonLabel: "Tuesday deal",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("Tuesday deal")).toBeInTheDocument();
+    expect(screen.getByText(/01H : 00M : 00/)).toBeInTheDocument();
+  });
+
+  it("uses the active message's countdown, not the parent's", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        enableCountdownTimer={true}
+        countdownEndDateTime="2026-05-19T12:00:30Z"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            countdownEndDateTime: "2026-05-19T12:00:10Z",
+            ctaButtonLabel: "Active message",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("Active message")).toBeInTheDocument();
+    expect(screen.queryByText("Default label")).not.toBeInTheDocument();
+    expect(screen.getByText(/00H : 00M : 10/)).toBeInTheDocument();
+  });
+
+  it("selects the first message whose window contains today", () => {
+    render(
+      <AnchoredBottomBanner
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-01",
+            scheduleEnd: "2026-05-05",
+            ctaButtonLabel: "Past message",
+          },
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            ctaButtonLabel: "Current message",
+          },
+          {
+            scheduledStart: "2026-05-25",
+            scheduleEnd: "2026-05-26",
+            ctaButtonLabel: "Future message",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("Current message")).toBeInTheDocument();
+    expect(screen.queryByText("Past message")).not.toBeInTheDocument();
+    expect(screen.queryByText("Future message")).not.toBeInTheDocument();
+  });
+});
+
+describe("AnchoredBottomBanner scheduling timezone (America/New_York)", () => {
+  // 2026-05-19T02:00:00Z is Mon 2026-05-18 22:00 EDT — a different ET calendar
+  // day AND weekday than UTC, so it exercises the EST/EDT scheduling rules.
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date("2026-05-19T02:00:00Z"));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("uses the ET calendar day for the display window, not UTC", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-18",
+            countdownEndDateTime: "2026-05-25T00:00:00Z",
+            ctaButtonLabel: "ET Monday message",
+          },
+        ]}
+      />
+    );
+    // In ET it is still 2026-05-18, so the 05-18 window is active. Under the old
+    // UTC logic it would be 05-19 and this window would already be expired.
+    expect(screen.getByText("ET Monday message")).toBeInTheDocument();
+    expect(screen.queryByText("Default label")).not.toBeInTheDocument();
+  });
+
+  it("does not activate a window before its ET start day", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-19",
+            scheduleEnd: "2026-05-19",
+            countdownEndDateTime: "2026-05-25T00:00:00Z",
+            ctaButtonLabel: "ET Tuesday message",
+          },
+        ]}
+      />
+    );
+    // ET is still 05-18 (22:00), so the 05-19 window has not started yet.
+    expect(screen.getByText("Default label")).toBeInTheDocument();
+    expect(screen.queryByText("ET Tuesday message")).not.toBeInTheDocument();
+  });
+
+  it("matches daysToShow against the ET weekday, not the UTC weekday", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            daysToShow: ["MONDAY"],
+            countdownEndDateTime: "2026-05-25T00:00:00Z",
+            ctaButtonLabel: "Monday only",
+          },
+        ]}
+      />
+    );
+    // ET weekday is Monday (the UTC weekday would be Tuesday).
+    expect(screen.getByText("Monday only")).toBeInTheDocument();
+  });
+
+  it("does not match a UTC weekday that differs from the ET weekday", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            daysToShow: ["TUESDAY"],
+            countdownEndDateTime: "2026-05-25T00:00:00Z",
+            ctaButtonLabel: "Tuesday only",
+          },
+        ]}
+      />
+    );
+    // UTC says Tuesday, but ET says Monday -> the message must not show.
+    expect(screen.getByText("Default label")).toBeInTheDocument();
+    expect(screen.queryByText("Tuesday only")).not.toBeInTheDocument();
+  });
+});