@windstream/react-shared-components 0.2.50 → 0.2.51

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

@@ -17,16 +17,50 @@ jest.mock("./vimeo-embed", () => ({
   VimeoEmbed: ({ link, autoplay }: any) => (
     <div data-testid="vimeo-embed" data-link={link} data-autoplay={autoplay} />
   ),
+  getVimeoEmbedId: (link?: string) => (link?.includes("vimeo") ? "123456" : ""),
 }));
 
 jest.mock("./youtube-embed", () => ({
-  YoutubeEmbed: ({ link, autoplay }: any) => (
-    <div
-      data-testid="youtube-embed"
-      data-link={link}
-      data-autoplay={autoplay}
-    />
+  YoutubeEmbed: ({
+    link,
+    autoplay,
+    onPlay,
+    onPause,
+    onTimeUpdate,
+    onEnded,
+    onFullscreenToggle,
+  }: any) => (
+    <div data-testid="youtube-embed" data-link={link} data-autoplay={autoplay}>
+      <button data-testid="yt-play" onClick={() => onPlay?.()} />
+      <button data-testid="yt-pause" onClick={() => onPause?.()} />
+      <button data-testid="yt-ended" onClick={() => onEnded?.()} />
+      <button
+        data-testid="yt-fullscreen-on"
+        onClick={() => onFullscreenToggle?.(true)}
+      />
+      <button
+        data-testid="yt-fullscreen-off"
+        onClick={() => onFullscreenToggle?.(false)}
+      />
+      <button
+        data-testid="yt-progress-25"
+        onClick={() => onTimeUpdate?.(25, 100)}
+      />
+      <button
+        data-testid="yt-progress-50"
+        onClick={() => onTimeUpdate?.(50, 100)}
+      />
+      <button
+        data-testid="yt-progress-75"
+        onClick={() => onTimeUpdate?.(75, 100)}
+      />
+      <button
+        data-testid="yt-progress-100"
+        onClick={() => onTimeUpdate?.(100, 100)}
+      />
+    </div>
   ),
+  getYoutubeEmbedId: (link?: string) => (link ? "dQw4w9WgXcQ" : ""),
 }));
 
 jest.mock("./helper", () => ({
@@ -82,22 +116,6 @@ describe("VideoLink", () => {
     expect(container.innerHTML).toBe("");
   });
 
-  it("falls back to videoLink.link when videoSourceType is 'contentful' but videoAssetUrl is missing", () => {
-    const { container } = render(
-      <VideoLink
-        videoLink={{
-          videoSourceType: "contentful",
-          link: "https://youtube.com/watch?v=123",
-        }}
-      />
-    );
-    clickVideoSection(container);
-    expect(screen.getByTestId("youtube-embed")).toHaveAttribute(
-      "data-link",
-      "https://youtube.com/watch?v=123"
-    );
-  });
-
   it("falls back to the poster when videoSourceType is 'contentful' but videoAssetUrl is missing", () => {
     render(
       <VideoLink
@@ -238,10 +256,26 @@ describe("VideoLink", () => {
       />
     );
     clickVideoSection(container);
-    fireEvent.click(container.querySelector(".max-w-6xl")!);
+    fireEvent.click(screen.getByTestId("video-popup-content"));
     expect(container.querySelector(".fixed")).toBeInTheDocument();
   });
 
+  it("closes popup when clicking the visible close button", () => {
+    const { container } = render(
+      <VideoLink
+        videoLink={{
+          link: "https://youtube.com/watch?v=123",
+          image: "thumb.jpg",
+          videoPopup: true,
+        }}
+      />
+    );
+    clickVideoSection(container);
+    expect(screen.getByTestId("video-popup-close")).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId("video-popup-close"));
+    expect(container.querySelector(".fixed")).not.toBeInTheDocument();
+  });
+
   it("handles hover state on the video section", () => {
     const { container } = render(
       <VideoLink
@@ -263,4 +297,142 @@ describe("VideoLink", () => {
       "false"
     );
   });
-});
+});
+
+describe("VideoLink analytics", () => {
+  const videoLink = {
+    link: "https://youtube.com/watch?v=dQw4w9WgXcQ",
+    image: "thumb.jpg",
+    title: "My Video",
+  };
+
+  it("fires 'played' with unified schema properties when the embed reports play", () => {
+    const onVideoEvent = jest.fn();
+    const { container } = render(
+      <VideoLink videoLink={videoLink} onVideoEvent={onVideoEvent} />
+    );
+    clickVideoSection(container);
+    fireEvent.click(screen.getByTestId("yt-play"));
+
+    expect(onVideoEvent).toHaveBeenCalledWith("played", {
+      videoId: "dQw4w9WgXcQ",
+      videoTitle: "My Video",
+      provider: "youtube",
+      position: 0,
+      duration: 0,
+      percentComplete: 0,
+    });
+  });
+
+  it("fires 'paused' when the embed reports pause", () => {
+    const onVideoEvent = jest.fn();
+    const { container } = render(
+      <VideoLink videoLink={videoLink} onVideoEvent={onVideoEvent} />
+    );
+    clickVideoSection(container);
+    fireEvent.click(screen.getByTestId("yt-pause"));
+
+    expect(onVideoEvent).toHaveBeenCalledWith(
+      "paused",
+      expect.objectContaining({ provider: "youtube" })
+    );
+  });
+
+  it("fires 'progress' exactly once per 25/50/75 milestone, not on every timeupdate", () => {
+    const onVideoEvent = jest.fn();
+    const { container } = render(
+      <VideoLink videoLink={videoLink} onVideoEvent={onVideoEvent} />
+    );
+    clickVideoSection(container);
+
+    // Simulate several timeupdate ticks crossing the same milestone.
+    fireEvent.click(screen.getByTestId("yt-progress-25"));
+    fireEvent.click(screen.getByTestId("yt-progress-25"));
+    fireEvent.click(screen.getByTestId("yt-progress-50"));
+    fireEvent.click(screen.getByTestId("yt-progress-75"));
+
+    const progressCalls = onVideoEvent.mock.calls.filter(
+      ([event]) => event === "progress"
+    );
+    expect(progressCalls).toHaveLength(3);
+    expect(progressCalls[0][1]).toMatchObject({ percentComplete: 25 });
+    expect(progressCalls[1][1]).toMatchObject({ percentComplete: 50 });
+    expect(progressCalls[2][1]).toMatchObject({ percentComplete: 75 });
+  });
+
+  it("fires 'completed' exactly once, even if both timeupdate(100%) and ended fire", () => {
+    const onVideoEvent = jest.fn();
+    const { container } = render(
+      <VideoLink videoLink={videoLink} onVideoEvent={onVideoEvent} />
+    );
+    clickVideoSection(container);
+
+    fireEvent.click(screen.getByTestId("yt-progress-100"));
+    fireEvent.click(screen.getByTestId("yt-ended"));
+
+    const completedCalls = onVideoEvent.mock.calls.filter(
+      ([event]) => event === "completed"
+    );
+    expect(completedCalls).toHaveLength(1);
+  });
+
+  it("fires 'fullscreen_toggled' with isFullscreen for each toggle", () => {
+    const onVideoEvent = jest.fn();
+    const { container } = render(
+      <VideoLink videoLink={videoLink} onVideoEvent={onVideoEvent} />
+    );
+    clickVideoSection(container);
+
+    fireEvent.click(screen.getByTestId("yt-fullscreen-on"));
+    fireEvent.click(screen.getByTestId("yt-fullscreen-off"));
+
+    expect(onVideoEvent).toHaveBeenCalledWith(
+      "fullscreen_toggled",
+      expect.objectContaining({ isFullscreen: true })
+    );
+    expect(onVideoEvent).toHaveBeenCalledWith(
+      "fullscreen_toggled",
+      expect.objectContaining({ isFullscreen: false })
+    );
+  });
+
+  it("fires 'closed' with the last known position/duration when the popup is closed", () => {
+    const onVideoEvent = jest.fn();
+    const { container } = render(
+      <VideoLink
+        videoLink={{ ...videoLink, videoPopup: true }}
+        onVideoEvent={onVideoEvent}
+      />
+    );
+    clickVideoSection(container);
+    fireEvent.click(screen.getByTestId("yt-progress-50"));
+    fireEvent.click(screen.getByTestId("video-popup-close"));
+
+    expect(onVideoEvent).toHaveBeenCalledWith(
+      "closed",
+      expect.objectContaining({ position: 50, duration: 100 })
+    );
+  });
+
+  it("resets milestone tracking on a fresh play session after closing", () => {
+    const onVideoEvent = jest.fn();
+    const { container } = render(
+      <VideoLink
+        videoLink={{ ...videoLink, videoPopup: true }}
+        onVideoEvent={onVideoEvent}
+      />
+    );
+    clickVideoSection(container);
+    fireEvent.click(screen.getByTestId("yt-progress-25"));
+    fireEvent.click(screen.getByTestId("video-popup-close"));
+
+    onVideoEvent.mockClear();
+    clickVideoSection(container);
+    fireEvent.click(screen.getByTestId("yt-progress-25"));
+
+    const progressCalls = onVideoEvent.mock.calls.filter(
+      ([event]) => event === "progress"
+    );
+    expect(progressCalls).toHaveLength(1);
+  });
+});

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

@@ -2,12 +2,25 @@ import React, { useState } from "react";
 import { ContentfulVideoEmbed } from "./contentful-video-embed";
 import { PlayButton } from "./helper";
 import { VideoLinkComponentProps } from "./types";
-import { VimeoEmbed } from "./vimeo-embed";
-import { YoutubeEmbed } from "./youtube-embed";
+import { getVimeoEmbedId, VimeoEmbed } from "./vimeo-embed";
+import { getYoutubeEmbedId, YoutubeEmbed } from "./youtube-embed";
 
+import { MaterialIcon } from "@shared/components/material-icon";
 import { NextImage } from "@shared/components/next-image";
+import {
+  useVideoAnalytics,
+  VideoProvider,
+} from "@shared/hooks/use-video-analytics";
 import { cx } from "@shared/utils";
 
+// Derives a stable id for the Contentful-hosted case, which has no natural
+// provider id the way a YouTube/Vimeo URL does.
+const getContentfulVideoId = (assetUrl?: unknown): string => {
+  if (typeof assetUrl !== "string" || !assetUrl) return "";
+  const [path] = assetUrl.split(/[?#]/);
+  return path.split("/").filter(Boolean).pop() ?? assetUrl;
+};
+
 // Owns all video state (active/hover) so ImagePromoBar stays state-free for video.
 export const VideoLink: React.FC<VideoLinkComponentProps> = ({
   videoLink,
@@ -15,15 +28,21 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
   imageHeight = 660,
   useOriginalImageAspectRatio = false,
   isAboveTheFold = false,
+  onVideoEvent,
 }) => {
   const [activeVideo, setActiveVideo] = useState("");
   const [isHovered, setIsHovered] = useState(false);
+  const videoAnalytics = useVideoAnalytics(onVideoEvent);
 
   const videoSourceType = videoLink?.videoSourceType;
-  const usingContentfulAsset =
-    videoSourceType === "contentful" && !!videoLink?.videoAssetUrl;
-  const videoHref =
-    (usingContentfulAsset ? videoLink?.videoAssetUrl : videoLink?.link) ?? "";
+  // CMS data crossing a boundary - guard against a malformed/unresolved
+  // reference coming through as a truthy non-string (e.g. an unresolved
+  // Contentful Link stub), not just null/undefined.
+  const rawVideoHref =
+    videoSourceType === "contentful"
+      ? videoLink?.videoAssetUrl
+      : videoLink?.link;
+  const videoHref = typeof rawVideoHref === "string" ? rawVideoHref : "";
 
   // The video's own poster - never the promo bar's plain image field.
   const posterImage = videoLink?.image;
@@ -59,17 +78,46 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
   const videoPopup = videoLink?.videoPopup ?? false;
   const isPlaying = Boolean(activeVideo && activeVideo === videoHref);
 
+  const provider: VideoProvider =
+    videoSourceType === "contentful"
+      ? "contentful"
+      : videoHref.includes("vimeo")
+        ? "vimeo"
+        : "youtube";
+  const videoId =
+    provider === "contentful"
+      ? getContentfulVideoId(videoLink?.videoAssetUrl)
+      : provider === "vimeo"
+        ? getVimeoEmbedId(videoHref)
+        : getYoutubeEmbedId(videoHref);
+  const analyticsMeta = { videoId, videoTitle: videoLink?.title, provider };
+
   const handlePlayClick = () => {
+    // Guards against a click inside the already-playing area (e.g. on a
+    // native <video>'s own controls) bubbling up to this section's onClick
+    // and wiping analytics/session state - only a fresh play should reset.
+    if (isPlaying) return;
+    videoAnalytics.reset();
     setActiveVideo(videoHref);
   };
 
   const handleCloseVideo = (e: React.MouseEvent) => {
     e.stopPropagation();
+    videoAnalytics.handleClosed(analyticsMeta);
     setActiveVideo("");
   };
 
   const embedSelector = () => {
-    if (usingContentfulAsset) {
+    const analyticsProps = {
+      onPlay: () => videoAnalytics.handlePlay(analyticsMeta),
+      onPause: () => videoAnalytics.handlePause(analyticsMeta),
+      onTimeUpdate: (position: number, duration: number) =>
+        videoAnalytics.handleTimeUpdate(analyticsMeta, position, duration),
+      onEnded: () => videoAnalytics.handleEnded(analyticsMeta),
+      onFullscreenToggle: (isFullscreen: boolean) =>
+        videoAnalytics.handleFullscreenToggle(analyticsMeta, isFullscreen),
+    };
+    if (videoSourceType === "contentful") {
       return (
         <ContentfulVideoEmbed
           videoAssetUrl={videoLink?.videoAssetUrl}
@@ -78,13 +126,18 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
           title={videoLink?.title}
           description={videoLink?.description}
           autoplay={isPlaying}
+          {...analyticsProps}
         />
       );
     }
     if (videoHref.includes("vimeo")) {
-      return <VimeoEmbed link={videoHref} autoplay={isPlaying} />;
+      return (
+        <VimeoEmbed link={videoHref} autoplay={isPlaying} {...analyticsProps} />
+      );
     }
-    return <YoutubeEmbed link={videoHref} autoplay={isPlaying} />;
+    return (
+      <YoutubeEmbed link={videoHref} autoplay={isPlaying} {...analyticsProps} />
+    );
   };
   const contentVideo = embedSelector();
 
@@ -92,7 +145,7 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
     <>
       <div
         className={cx(
-          "video-section relative mx-auto w-full cursor-pointer rounded-image transition-all duration-300 lg:w-[486px]",
+          "video-section relative w-full cursor-pointer rounded-image transition-all duration-300 lg:w-[486px]",
           !isPlaying && "hover:ring-2 hover:ring-border-focus"
         )}
         onClick={handlePlayClick}
@@ -140,13 +193,23 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
       {/* Video Popup Overlay */}
       {videoPopup && isPlaying && (
         <div
-          className="fixed inset-0 top-20 z-[100] flex items-center justify-center bg-black/80 p-4 transition-all duration-300"
+          className="fixed inset-0 z-[100] flex items-center justify-center p-4 transition-all duration-300"
           onClick={handleCloseVideo}
         >
           <div
-            className="max-w-6xl aspect-video w-full overflow-hidden rounded-3xl bg-black shadow-2xl md:w-4/6"
+            data-testid="video-popup-content"
+            className="relative aspect-video w-[min(100%,calc(80vh*16/9))] max-w-[1280px] overflow-hidden rounded-2xl bg-black shadow-2xl md:rounded-3xl"
             onClick={e => e.stopPropagation()}
           >
+            <button
+              type="button"
+              onClick={handleCloseVideo}
+              aria-label="Close video"
+              data-testid="video-popup-close"
+              className="absolute right-3 top-3 z-10 flex h-9 w-9 items-center justify-center rounded-full bg-black/60 text-white transition-colors hover:bg-black/80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:right-4 sm:top-4 sm:h-10 sm:w-10"
+            >
+              <MaterialIcon name="close" className="text-white" />
+            </button>
             {contentVideo}
           </div>
         </div>
@@ -159,12 +222,18 @@ export default VideoLink;
 
 export { ContentfulVideoEmbed } from "./contentful-video-embed";
 export { PlayButton } from "./helper";
-export { VimeoEmbed } from "./vimeo-embed";
-export { YoutubeEmbed } from "./youtube-embed";
+export { getVimeoEmbedId, VimeoEmbed } from "./vimeo-embed";
+export { getYoutubeEmbedId, YoutubeEmbed } from "./youtube-embed";
 
 export type {
   PlayButtonProps,
   VideoEmbedProps,
   VideoLinkComponentProps,
   VideoLinkProps,
-} from "./types";
+} from "./types";
+export type {
+  VideoAnalyticsEventName,
+  VideoAnalyticsHandler,
+  VideoAnalyticsPayload,
+  VideoProvider,
+} from "@shared/hooks/use-video-analytics";

package/src/components/video-link/types.ts

@@ -1,3 +1,5 @@
+import type { VideoAnalyticsHandler } from "@shared/hooks/use-video-analytics";
+
 export type VideoLinkProps = {
   image?: string;
   videoPopup?: boolean;
@@ -9,11 +11,22 @@ export type VideoLinkProps = {
   description?: string;
 };
 
+// Raw playback callbacks every provider embed reports; VideoLink is the only
+// place that turns these into the unified analytics event schema.
+export type VideoEmbedAnalyticsProps = {
+  onPlay?: () => void;
+  onPause?: () => void;
+  onTimeUpdate?: (position: number, duration: number) => void;
+  onEnded?: () => void;
+  onFullscreenToggle?: (isFullscreen: boolean) => void;
+};
+
 export type VideoEmbedProps = {
   containerClassName?: string;
   autoplay?: boolean;
   debug?: boolean;
-} & VideoLinkProps;
+} & VideoLinkProps &
+  VideoEmbedAnalyticsProps;
 
 export type VideoLinkComponentProps = {
   videoLink?: VideoLinkProps;
@@ -21,6 +34,7 @@ export type VideoLinkComponentProps = {
   imageHeight?: number;
   useOriginalImageAspectRatio?: boolean;
   isAboveTheFold?: boolean;
+  onVideoEvent?: VideoAnalyticsHandler;
 };
 
 export type PlayButtonProps = {

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

@@ -1,7 +1,8 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { VideoEmbedProps } from "./types";
 
 import { cx } from "@shared/utils";
+import Player from "@vimeo/player";
 
 const extractVimeoIdandHash = (href: string) => {
   // Strip query parameters and fragments
@@ -18,8 +19,24 @@ const extractVimeoIdandHash = (href: string) => {
   return `${match[1]}/${hash}`;
 };
 
+export const getVimeoEmbedId = (link?: string): string => {
+  if (!link) return "";
+  return extractVimeoIdandHash(link.toString());
+};
+
 export const VimeoEmbed: React.FC<VideoEmbedProps> = props => {
-  const { link, containerClassName, autoplay = false, debug = false } = props;
+  const {
+    link,
+    containerClassName,
+    autoplay = false,
+    debug = false,
+    onPlay,
+    onPause,
+    onTimeUpdate,
+    onEnded,
+    onFullscreenToggle,
+  } = props;
+  const iframeRef = useRef<HTMLIFrameElement>(null);
 
   const { href, embedId } = useMemo(() => {
     if (!link) return { href: "", embedId: "" };
@@ -33,6 +50,37 @@ export const VimeoEmbed: React.FC<VideoEmbedProps> = props => {
     console.log("[VimeoEmbed] href:", href, "id:", embedId);
   }
 
+  useEffect(() => {
+    if (!embedId || !iframeRef.current) return undefined;
+    const player = new Player(iframeRef.current);
+
+    const handlePlay = () => onPlay?.();
+    const handlePause = () => onPause?.();
+    const handleEnded = () => onEnded?.();
+    const handleTimeUpdate = (data: { seconds: number; duration: number }) =>
+      onTimeUpdate?.(data.seconds, data.duration);
+    const handleFullscreenChange = (data: { fullscreen: boolean }) =>
+      onFullscreenToggle?.(data.fullscreen);
+
+    player.on("play", handlePlay);
+    player.on("pause", handlePause);
+    player.on("ended", handleEnded);
+    player.on("timeupdate", handleTimeUpdate);
+    player.on("fullscreenchange", handleFullscreenChange);
+
+    return () => {
+      player.off("play", handlePlay);
+      player.off("pause", handlePause);
+      player.off("ended", handleEnded);
+      player.off("timeupdate", handleTimeUpdate);
+      player.off("fullscreenchange", handleFullscreenChange);
+      player.destroy().catch(() => {
+        // ignore teardown errors (e.g. iframe already removed from the DOM)
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [embedId]);
+
   if (!embedId) {
     return null;
   }
@@ -59,6 +107,7 @@ export const VimeoEmbed: React.FC<VideoEmbedProps> = props => {
       )}
     >
       <iframe
+        ref={iframeRef}
         className="absolute left-0 top-0 h-full w-full"
         src={src}
         allow="autoplay; fullscreen; picture-in-picture"