@windstream/react-shared-components 0.2.61 → 0.2.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.61",
+  "version": "0.2.63",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/video-link/index.tsx

@@ -117,9 +117,14 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
       onFullscreenToggle: (isFullscreen: boolean) =>
         videoAnalytics.handleFullscreenToggle(analyticsMeta, isFullscreen),
     };
+    // The embed is now mounted up-front (before click) for SEO; remount on play
+    // so click-to-play still starts playback (YT.Player reads autoplay only at
+    // creation, and a native <video>'s autoplay attr only applies on load).
+    const playbackKey = isPlaying ? "playing" : "idle";
     if (videoSourceType === "contentful") {
       return (
         <ContentfulVideoEmbed
+          key={playbackKey}
           videoAssetUrl={videoLink?.videoAssetUrl}
           videoAssetType={videoLink?.videoAssetType}
           image={posterImage}
@@ -132,11 +137,21 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
     }
     if (videoHref.includes("vimeo")) {
       return (
-        <VimeoEmbed link={videoHref} autoplay={isPlaying} {...analyticsProps} />
+        <VimeoEmbed
+          key={playbackKey}
+          link={videoHref}
+          autoplay={isPlaying}
+          {...analyticsProps}
+        />
       );
     }
     return (
-      <YoutubeEmbed link={videoHref} autoplay={isPlaying} {...analyticsProps} />
+      <YoutubeEmbed
+        key={playbackKey}
+        link={videoHref}
+        autoplay={isPlaying}
+        {...analyticsProps}
+      />
     );
   };
   const contentVideo = embedSelector();
@@ -175,12 +190,12 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
           </div>
         </div>
 
-        {/* Inline Player (if not popup) */}
-        {!videoPopup && isPlaying && (
+        {/* Inline Player (if not popup) - mounted up-front, hidden until play */}
+        {!videoPopup && (
           <div
             className={cx(
               "aspect-[16/9] w-full overflow-hidden rounded-image transition-opacity duration-300",
-              isPlaying ? "opacity-100" : "opacity-0",
+              isPlaying ? "opacity-100" : "hidden",
               !useOriginalImageAspectRatio &&
                 "xl:aspect-square xl:max-h-[486px] xl:w-[486px]"
             )}
@@ -190,10 +205,15 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
         )}
       </div>
 
-      {/* Video Popup Overlay */}
-      {videoPopup && isPlaying && (
+      {/* Video Popup Overlay - embed mounted up-front, overlay shown on play */}
+      {videoPopup && (
         <div
-          className="fixed inset-0 z-[100] flex items-center justify-center p-4 transition-all duration-300"
+          className={cx(
+            "z-[100] transition-all duration-300",
+            isPlaying
+              ? "fixed inset-0 flex items-center justify-center p-4"
+              : "hidden"
+          )}
           onClick={handleCloseVideo}
         >
           <div

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

@@ -5,18 +5,27 @@ import Player from "@vimeo/player";
 import { cx } from "@shared/utils/cx";
 
 const extractVimeoIdandHash = (href: string) => {
-  // Strip query parameters and fragments
-  const cleanHref = href.split(/[?#]/)[0].replace(/\/+$/, "");
-  const match =
-    cleanHref.match(/vimeo\.com\/(?:.*\/)?(\d{6,})/) ||
-    cleanHref.match(/player\.vimeo\.com\/video\/(\d{6,})/);
+  // Strip query parameters and fragments without a backtracking-prone regex
+  let cleanHref = href.split(/[?#]/)[0];
+  while (cleanHref.endsWith("/")) cleanHref = cleanHref.slice(0, -1);
 
-  const parts = cleanHref.split("/");
-  const hash = parts[parts.length - 1];
+  const parts = cleanHref.split("/").filter(Boolean);
+
+  // Locate the vimeo domain segment (vimeo.com or player.vimeo.com) manually
+  // instead of a backtracking regex like `(?:.*\/)?(\d{6,})`
+  const domainIndex = parts.findIndex(
+    part => part === "vimeo.com" || part === "player.vimeo.com"
+  );
+  if (domainIndex === -1) return "";
 
-  if (!match?.[1]) return "";
-  if (match[1] === hash) return match[1];
-  return `${match[1]}/${hash}`;
+  const id = parts.find(
+    (part, i) => i > domainIndex && /^\d{6,}$/.test(part)
+  );
+  if (!id) return "";
+
+  const hash = parts[parts.length - 1];
+  if (id === hash) return id;
+  return `${id}/${hash}`;
 };
 
 export const getVimeoEmbedId = (link?: string): string => {

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

@@ -71,22 +71,26 @@ describe("YoutubeEmbed", () => {
     expect(screen.getByTitle("Embedded youtube")).toBeInTheDocument();
   });
 
-  it("constructs the player with the extracted videoId and enablejsapi, autoplay/mute off by default", async () => {
+  it("renders a real iframe whose src carries the videoId, enablejsapi and autoplay/mute off by default", () => {
     render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
-    await waitFor(() => expect(capturedVideoId).toBeDefined());
-    expect(capturedVideoId).toBe("dQw4w9WgXcQ");
-    expect(capturedPlayerVars).toEqual({ enablejsapi: 1, autoplay: 0, mute: 0 });
+    const iframe = screen.getByTitle("Embedded youtube") as HTMLIFrameElement;
+    expect(iframe.tagName).toBe("IFRAME");
+    expect(iframe.src).toContain("/embed/dQw4w9WgXcQ");
+    expect(iframe.src).toContain("enablejsapi=1");
+    expect(iframe.src).toContain("autoplay=0");
+    expect(iframe.src).toContain("mute=0");
   });
 
-  it("passes autoplay and mute declaratively via playerVars when autoplay is true", async () => {
+  it("drives autoplay and mute via the iframe src when autoplay is true", () => {
     render(
       <YoutubeEmbed
         link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
         autoplay={true}
       />
     );
-    await waitFor(() => expect(capturedPlayerVars).toBeDefined());
-    expect(capturedPlayerVars).toEqual({ enablejsapi: 1, autoplay: 1, mute: 1 });
+    const iframe = screen.getByTitle("Embedded youtube") as HTMLIFrameElement;
+    expect(iframe.src).toContain("autoplay=1");
+    expect(iframe.src).toContain("mute=1");
   });
 
   it("reports play/pause/ended via onStateChange", async () => {

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();
+  });
+});