@windstream/react-shared-components 0.2.50 → 0.2.52

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

@@ -1,78 +1,114 @@
 import React from "react";
-import { YoutubeEmbed } from "./youtube-embed";
+import { getYoutubeEmbedId, YoutubeEmbed } from "./youtube-embed";
 
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 
 jest.mock("@shared/utils", () => ({
   cx: (...args: any[]) => args.filter(Boolean).join(" "),
 }));
 
-describe("YoutubeEmbed", () => {
-  it("renders iframe with extracted video id from watch URL", () => {
-    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
-    const iframe = screen.getByTitle("Embedded youtube");
-    expect(iframe.getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/dQw4w9WgXcQ"
-    );
+const mockPlayVideo = jest.fn();
+let capturedEvents: any;
+let capturedVideoId: string | undefined;
+let capturedPlayerVars: any;
+
+jest.mock("./youtube-iframe-api-loader", () => ({
+  loadYoutubeIframeApi: () =>
+    Promise.resolve({
+      PlayerState: { PLAYING: 1, PAUSED: 2, ENDED: 0 },
+      Player: jest.fn().mockImplementation((_el, options) => {
+        capturedEvents = options.events;
+        capturedVideoId = options.videoId;
+        capturedPlayerVars = options.playerVars;
+        return { playVideo: mockPlayVideo, destroy: jest.fn() };
+      }),
+    }),
+}));
+
+describe("getYoutubeEmbedId", () => {
+  it("extracts id from watch URL", () => {
+    expect(
+      getYoutubeEmbedId("https://www.youtube.com/watch?v=dQw4w9WgXcQ")
+    ).toBe("dQw4w9WgXcQ");
   });
 
   it("extracts id from youtu.be short URL", () => {
-    render(<YoutubeEmbed link="https://youtu.be/dQw4w9WgXcQ" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toContain(
-      "/embed/dQw4w9WgXcQ"
+    expect(getYoutubeEmbedId("https://youtu.be/dQw4w9WgXcQ")).toBe(
+      "dQw4w9WgXcQ"
     );
   });
 
   it("extracts id from embed URL", () => {
-    render(<YoutubeEmbed link="https://www.youtube.com/embed/dQw4w9WgXcQ" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toContain(
-      "/embed/dQw4w9WgXcQ"
+    expect(getYoutubeEmbedId("https://www.youtube.com/embed/dQw4w9WgXcQ")).toBe(
+      "dQw4w9WgXcQ"
     );
   });
 
-  it("returns empty embedId for invalid URL", () => {
-    render(<YoutubeEmbed link="https://example.com/notavideo" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/"
-    );
+  it("returns empty string for invalid URL", () => {
+    expect(getYoutubeEmbedId("https://example.com/notavideo")).toBe("");
   });
 
-  it("returns empty embedId when link is empty", () => {
-    render(<YoutubeEmbed link="" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/"
-    );
+  it("returns empty string when link is empty or undefined", () => {
+    expect(getYoutubeEmbedId("")).toBe("");
+    expect(getYoutubeEmbedId(undefined)).toBe("");
   });
 
-  it("returns empty embedId when link is undefined", () => {
-    render(<YoutubeEmbed link={undefined} />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/"
-    );
+  it("returns empty string when match length is not 11", () => {
+    expect(getYoutubeEmbedId("https://www.youtube.com/watch?v=short")).toBe("");
+  });
+});
+
+describe("YoutubeEmbed", () => {
+  beforeEach(() => {
+    mockPlayVideo.mockClear();
+    capturedEvents = undefined;
+    capturedVideoId = undefined;
+    capturedPlayerVars = undefined;
   });
 
-  it("appends autoplay param when autoplay is true", () => {
+  it("renders a placeholder with an accessible title", () => {
+    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
+    expect(screen.getByTitle("Embedded youtube")).toBeInTheDocument();
+  });
+
+  it("constructs the player with the extracted videoId and enablejsapi, autoplay/mute off by default", async () => {
+    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 });
+  });
+
+  it("passes autoplay and mute declaratively via playerVars when autoplay is true", async () => {
     render(
       <YoutubeEmbed
         link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
         autoplay={true}
       />
     );
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
-    );
+    await waitFor(() => expect(capturedPlayerVars).toBeDefined());
+    expect(capturedPlayerVars).toEqual({ enablejsapi: 1, autoplay: 1, mute: 1 });
   });
 
-  it("does not append autoplay param when autoplay is false", () => {
+  it("reports play/pause/ended via onStateChange", async () => {
+    const onPlay = jest.fn();
+    const onPause = jest.fn();
+    const onEnded = jest.fn();
     render(
       <YoutubeEmbed
         link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-        autoplay={false}
+        onPlay={onPlay}
+        onPause={onPause}
+        onEnded={onEnded}
       />
     );
-    expect(
-      screen.getByTitle("Embedded youtube").getAttribute("src")
-    ).not.toContain("autoplay");
+    await waitFor(() => expect(capturedEvents).toBeDefined());
+
+    capturedEvents.onStateChange({ data: 1 });
+    expect(onPlay).toHaveBeenCalled();
+    capturedEvents.onStateChange({ data: 2 });
+    expect(onPause).toHaveBeenCalled();
+    capturedEvents.onStateChange({ data: 0 });
+    expect(onEnded).toHaveBeenCalled();
   });
 
   it("applies containerClassName", () => {
@@ -85,20 +121,11 @@ describe("YoutubeEmbed", () => {
     expect(container.firstElementChild?.className).toContain("extra");
   });
 
-  it("has correct iframe attributes", () => {
-    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
-    const iframe = screen.getByTitle("Embedded youtube");
-    expect(iframe).toHaveAttribute(
-      "allow",
-      "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    );
-    expect(iframe).toHaveAttribute("allowFullScreen");
-  });
-
-  it("returns empty embedId when match length is not 11", () => {
-    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=short" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/"
-    );
+  it("does not attempt to load the API when embedId is empty", async () => {
+    render(<YoutubeEmbed link="https://example.com/notavideo" />);
+    await new Promise(resolve => {
+      setTimeout(resolve, 0);
+    });
+    expect(capturedVideoId).toBeUndefined();
   });
 });

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

@@ -1,6 +1,8 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { VideoEmbedProps } from "./types";
+import { loadYoutubeIframeApi } from "./youtube-iframe-api-loader";
 
+import { useFullscreenToggle } from "@shared/hooks/use-fullscreen-toggle";
 import { cx } from "@shared/utils";
 
 // import styles from "./styles.module.scss";
@@ -10,22 +12,103 @@ export type Props = {
   autoplay?: boolean; // Add the autoplay prop
 } & VideoEmbedProps;
 
+export const getYoutubeEmbedId = (link?: string): string => {
+  if (!link) return "";
+
+  const href = link.toString();
+  const regExp =
+    /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  const match = href.match(regExp);
+
+  return match && match[7].length === 11 ? match[7] : "";
+};
+
 export const YoutubeEmbed: React.FC<Props> = props => {
-  const { link, containerClassName, autoplay = false } = props;
+  const {
+    link,
+    containerClassName,
+    autoplay = false,
+    onPlay,
+    onPause,
+    onTimeUpdate,
+    onEnded,
+    onFullscreenToggle,
+  } = props;
+
+  const embedId = useMemo(() => getYoutubeEmbedId(link), [link]);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const progressInterval = useRef<ReturnType<typeof setInterval>>();
+
+  useFullscreenToggle(iframeRef, onFullscreenToggle);
 
-  const embedId = useMemo(() => {
-    if (!link) return "";
+  useEffect(() => {
+    if (!embedId || !containerRef.current) return undefined;
+    let player: any;
+    let cancelled = false;
 
-    const href = link.toString();
-    const regExp =
-      /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-    const match = href.match(regExp);
+    // 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);
 
-    return match && match[7].length === 11 ? match[7] : "";
-  }, [link]);
+    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);
+            }
+          },
+        },
+      });
+    }).catch(() => {
+      // ignore YouTube API load failures; component will remain empty
+    });
 
-  // Add autoplay parameter to the URL if autoplay is true
-  const autoplayParam = autoplay ? "?autoplay=1" : "";
+    return () => {
+      cancelled = true;
+      clearInterval(progressInterval.current);
+      player?.destroy?.();
+      mountNode.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [embedId]);
 
   return (
     <div
@@ -34,11 +117,9 @@ export const YoutubeEmbed: React.FC<Props> = props => {
         containerClassName
       )}
     >
-      <iframe
+      <div
+        ref={containerRef}
         className="absolute left-0 top-0 h-full w-full"
-        src={`https://www.youtube.com/embed/${embedId}${autoplayParam}`}
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowFullScreen={true}
         title="Embedded youtube"
       />
     </div>

package/src/components/video-link/youtube-iframe-api-loader.ts

@@ -0,0 +1,45 @@
+let apiPromise: Promise<typeof window.YT> | null = null;
+
+export function loadYoutubeIframeApi(): Promise<typeof window.YT> {
+  if (typeof window === "undefined") {
+    return Promise.reject(new Error("YouTube IFrame API requires a browser"));
+  }
+
+  if (window.YT?.Player) {
+    return Promise.resolve(window.YT);
+  }
+
+  if (apiPromise) {
+    return apiPromise;
+  }
+
+  apiPromise = new Promise((resolve, reject) => {
+    const previousCallback = window.onYouTubeIframeAPIReady;
+    window.onYouTubeIframeAPIReady = () => {
+      previousCallback?.();
+      resolve(window.YT);
+    };
+
+    let script = document.querySelector<HTMLScriptElement>(
+      'script[src*="youtube.com/iframe_api"]'
+    );
+    if (!script) {
+      script = document.createElement("script");
+      script.src = "https://www.youtube.com/iframe_api";
+      script.onerror = () => {
+        apiPromise = null;
+        reject(new Error("Failed to load YouTube IFrame API"));
+      };
+      document.head.appendChild(script);
+    }
+  });
+
+  return apiPromise;
+}
+
+declare global {
+  interface Window {
+    YT: any;
+    onYouTubeIframeAPIReady?: () => void;
+  }
+}

package/src/contentful/blocks/image-promo-bar/index.test.tsx

@@ -177,14 +177,14 @@ describe("ImagePromoBar", () => {
       expect(container.querySelector(".max-w-120")).not.toBeInTheDocument();
     });
 
-    it("applies lg:flex-row-reverse when mediaPosition is true", () => {
+    it("applies xl:flex-row-reverse when mediaPosition is true", () => {
       const { container } = render(
         <ImagePromoBar {...defaultProps} mediaPosition={true} />
       );
       expect(container.innerHTML).toContain("xl:flex-row-reverse");
     });
 
-    it("applies lg:flex-row when mediaPosition is false", () => {
+    it("applies xl:flex-row when mediaPosition is false", () => {
       const { container } = render(
         <ImagePromoBar {...defaultProps} mediaPosition={false} />
       );

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -34,6 +34,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   isAboveTheFold = false,
   onModalButtonClick,
   onClick,
+  onVideoEvent,
   renderCheckPlans,
   enableAnimation = false,
 }) => {
@@ -200,6 +201,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
               imageHeight={imageHeight}
               useOriginalImageAspectRatio={useOriginalImageAspectRatio}
               isAboveTheFold={isAboveTheFold}
+              onVideoEvent={onVideoEvent}
             />
           </aside>
         </div>

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -1,6 +1,9 @@
 import React from "react";
 
-import { VideoLinkProps } from "@shared/components/video-link";
+import {
+  VideoAnalyticsHandler,
+  VideoLinkProps,
+} from "@shared/components/video-link";
 import { CheckPlansProps } from "@shared/types/micro-components";
 
 export type ImagePromoBarProps = {
@@ -27,6 +30,7 @@ export type ImagePromoBarProps = {
   maxWidth?: boolean;
   color: "light" | "dark";
   enableAnimation?: boolean;
+  onVideoEvent?: VideoAnalyticsHandler;
   onModalButtonClick?: (id?: string) => void;
   onClick?: (event: React.MouseEvent, source: "primary" | "secondary") => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;

package/src/contentful/blocks/navigation/index.test.tsx

@@ -149,6 +149,40 @@ const mobileMenuProps: NavigationProps = {
 describe("Navigation", () => {
   beforeEach(() => jest.clearAllMocks());
 
+  describe("enableHamburgerNavigationOnDesktop (desktop hamburger A/B variant)", () => {
+    it("keeps current behavior when the flag is off", () => {
+      const { container } = render(<Navigation {...defaultProps} />);
+
+      expect(
+        container.querySelector(".mobile-nav-section")?.className
+      ).toContain("lg:hidden");
+      expect(
+        container.querySelector(".desktop-nav-section")?.className
+      ).toContain("lg:block");
+      expect(
+        container.querySelector(".utility-container")?.className
+      ).toContain("lg:block");
+    });
+
+    it("shows the hamburger and hides desktop + utility sections when enabled", () => {
+      const { container } = render(
+        <Navigation {...defaultProps} enableHamburgerNavigationOnDesktop />
+      );
+
+      // mobile section no longer hidden on desktop
+      expect(
+        container.querySelector(".mobile-nav-section")?.className
+      ).not.toContain("lg:hidden");
+      // desktop + utility hidden at all widths (no lg:block to re-show them)
+      expect(
+        container.querySelector(".desktop-nav-section")?.className
+      ).not.toContain("lg:block");
+      expect(
+        container.querySelector(".utility-container")?.className
+      ).not.toContain("lg:block");
+    });
+  });
+
   describe("Basic rendering", () => {
     it("renders nav with utility and main nav sections", () => {
       const { container } = render(<Navigation {...defaultProps} />);

package/src/contentful/blocks/navigation/index.tsx

@@ -42,6 +42,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
     showCallButton = true,
     showCallNowCtaInMainNav = false,
     showMobileSliderMenu = true,
+    enableHamburgerNavigationOnDesktop = false,
     callNowCtaIcon,
     navigationBackgroundColor,
     navigationLinkColor,
@@ -106,11 +107,28 @@ export const Navigation: React.FC<NavigationProps> = props => {
     (supportNavigationLinks?.length ?? 0) > 0 ||
     (accountNavigationLinks?.length ?? 0) > 0;
 
+  // A/B variant: when enabled, the hamburger (mobile section) shows on desktop
+  // and the inline desktop nav is hidden. Off = current behavior.
+  const mobileNavResponsiveClass = enableHamburgerNavigationOnDesktop
+    ? undefined // visible at all widths, including desktop
+    : "lg:hidden"; // default: mobile/tablet only
+  const desktopNavResponsiveClass = enableHamburgerNavigationOnDesktop
+    ? "hidden" // hidden at all widths
+    : "hidden lg:block"; // default: desktop only
+  const utilityNavResponsiveClass = enableHamburgerNavigationOnDesktop
+    ? "hidden" // match mobile/tablet: hidden on desktop too
+    : "hidden lg:block"; // default: desktop only
+
   return (
     <div className="component-container">
       <nav className={`menu-container z-[1000]`}>
         {displayUtilityNavigation ? (
-          <div className="utility-container hidden lg:block lg:border-b lg:px-2">
+          <div
+            className={cx(
+              "utility-container lg:border-b lg:px-2",
+              utilityNavResponsiveClass
+            )}
+          >
             <div className="mx-auto flex max-w-120 justify-between">
               <ul className="flex gap-5" aria-label="Utility Navigation">
                 {utilityNavigationLinks?.map((links, index) => {
@@ -181,7 +199,12 @@ export const Navigation: React.FC<NavigationProps> = props => {
           )}
           aria-label="Main Navigation"
         >
-          <div className="mobile-nav-section flex h-14 items-center justify-between border border-b px-5 py-[10px] lg:hidden">
+          <div
+            className={cx(
+              "mobile-nav-section flex h-14 items-center justify-between border border-b px-5 py-[10px]",
+              mobileNavResponsiveClass
+            )}
+          >
             <div>
               {logoUrl ? (
                 <Link href="/" className="flex">
@@ -230,7 +253,12 @@ export const Navigation: React.FC<NavigationProps> = props => {
             </div>
           </div>
 
-          <div className="desktop-nav-section hidden lg:block lg:border-b lg:px-2">
+          <div
+            className={cx(
+              "desktop-nav-section lg:border-b lg:px-2",
+              desktopNavResponsiveClass
+            )}
+          >
             <div className="mx-auto flex h-14 max-w-120 items-center justify-between">
               <div className="flex h-full">
                 {logoUrl ? (
@@ -553,7 +581,8 @@ const DesktopSearchInput = (props: {
         height={32}
         alt="Search icon"
         role="button"
-        onClick={redirectToSearchResults} />
+        onClick={redirectToSearchResults}
+      />
       {/* Input */}
       <Input
         ref={searchInputRef}

package/src/contentful/blocks/navigation/types.ts

@@ -66,6 +66,9 @@ export interface Navigation {
    *  (the one next to the cart icon and hamburger). The drawer
    *  still renders the CallButton. Defaults to false. */
   hideMobileCallButton?: boolean;
+  /** When true, renders the mobile hamburger navigation in the desktop
+   *  viewport and hides the inline desktop nav. Defaults to false. */
+  enableHamburgerNavigationOnDesktop?: boolean;
 }
 
 export type NavigationProps = Navigation;

package/src/hooks/use-fullscreen-toggle.ts

@@ -0,0 +1,23 @@
+import { useEffect, type RefObject } from "react";
+
+export function useFullscreenToggle(
+  ref: RefObject<Element>,
+  onToggle?: (isFullscreen: boolean) => void
+) {
+  useEffect(() => {
+    if (!onToggle) return;
+
+    const handleChange = () => {
+      const fullscreenElement =
+        document.fullscreenElement || (document as any).webkitFullscreenElement;
+      onToggle(fullscreenElement === ref.current);
+    };
+
+    document.addEventListener("fullscreenchange", handleChange);
+    document.addEventListener("webkitfullscreenchange", handleChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleChange);
+      document.removeEventListener("webkitfullscreenchange", handleChange);
+    };
+  }, [onToggle, ref]);
+}