@windstream/react-shared-components 0.2.50 → 0.2.51

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

package/src/hooks/use-video-analytics.ts

@@ -0,0 +1,126 @@
+import { useRef } from "react";
+
+export type VideoProvider = "youtube" | "vimeo" | "contentful";
+
+export type VideoAnalyticsEventName =
+  | "played"
+  | "paused"
+  | "progress"
+  | "completed"
+  | "fullscreen_toggled"
+  | "closed";
+
+export type VideoAnalyticsPayload = {
+  videoId: string;
+  videoTitle?: string;
+  provider: VideoProvider;
+  position: number;
+  duration: number;
+  percentComplete: number;
+  isFullscreen?: boolean;
+};
+
+export type VideoAnalyticsHandler = (
+  event: VideoAnalyticsEventName,
+  payload: VideoAnalyticsPayload
+) => void;
+
+export type VideoAnalyticsMeta = {
+  videoId: string;
+  videoTitle?: string;
+  provider: VideoProvider;
+};
+
+const PROGRESS_MILESTONES = [25, 50, 75];
+
+// Centralizes progress-milestone/completion dedup so each provider embed
+// only has to report raw play/pause/timeupdate/ended/fullscreen callbacks -
+// none of them know about Segment or the unified event schema.
+export function useVideoAnalytics(onVideoEvent?: VideoAnalyticsHandler) {
+  const firedMilestones = useRef<Set<number>>(new Set());
+  const hasCompleted = useRef(false);
+  const lastPosition = useRef(0);
+  const lastDuration = useRef(0);
+
+  const emit = (
+    meta: VideoAnalyticsMeta,
+    event: VideoAnalyticsEventName,
+    extra?: Partial<VideoAnalyticsPayload>
+  ) => {
+    if (!onVideoEvent) return;
+    onVideoEvent(event, {
+      videoId: meta.videoId,
+      videoTitle: meta.videoTitle,
+      provider: meta.provider,
+      position: lastPosition.current,
+      duration: lastDuration.current,
+      percentComplete:
+        lastDuration.current > 0
+          ? Math.min(
+              100,
+              Math.round((lastPosition.current / lastDuration.current) * 100)
+            )
+          : 0,
+      ...extra,
+    });
+  };
+
+  const reset = () => {
+    firedMilestones.current = new Set();
+    hasCompleted.current = false;
+    lastPosition.current = 0;
+    lastDuration.current = 0;
+  };
+
+  const handlePlay = (meta: VideoAnalyticsMeta) => emit(meta, "played");
+
+  const handlePause = (meta: VideoAnalyticsMeta) => emit(meta, "paused");
+
+  const handleFullscreenToggle = (
+    meta: VideoAnalyticsMeta,
+    isFullscreen: boolean
+  ) => emit(meta, "fullscreen_toggled", { isFullscreen });
+
+  const handleClosed = (meta: VideoAnalyticsMeta) => emit(meta, "closed");
+
+  const handleTimeUpdate = (
+    meta: VideoAnalyticsMeta,
+    position: number,
+    duration: number
+  ) => {
+    const safePosition = Number.isFinite(position) ? position : 0;
+    const safeDuration = Number.isFinite(duration) ? duration : 0;
+    lastPosition.current = safePosition;
+    lastDuration.current = safeDuration;
+    if (safeDuration <= 0) return;
+    const percent = Math.min(100, (safePosition / safeDuration) * 100);
+    PROGRESS_MILESTONES.forEach(milestone => {
+      if (percent >= milestone && !firedMilestones.current.has(milestone)) {
+        firedMilestones.current.add(milestone);
+        emit(meta, "progress");
+      }
+    });
+
+    if (percent >= 99.5 && !hasCompleted.current) {
+      hasCompleted.current = true;
+      emit(meta, "completed");
+    }
+  };
+
+  const handleEnded = (meta: VideoAnalyticsMeta) => {
+    if (hasCompleted.current) return;
+    hasCompleted.current = true;
+    if (lastDuration.current > 0) lastPosition.current = lastDuration.current;
+    emit(meta, "completed");
+  };
+
+  return {
+    handlePlay,
+    handlePause,
+    handleFullscreenToggle,
+    handleClosed,
+    handleTimeUpdate,
+    handleEnded,
+    reset,
+  };
+}

package/src/types/vimeo-player.d.ts

@@ -0,0 +1,11 @@
+declare module "@vimeo/player" {
+  export default class Player {
+    constructor(
+      element: HTMLIFrameElement | HTMLElement | string,
+      options?: any
+    );
+    on(event: string, callback: (data: any) => void): void;
+    off(event: string, callback?: (data: any) => void): void;
+    destroy(): Promise<void>;
+  }
+}