@windstream/react-shared-components 0.2.49 → 0.2.51

package/src/contentful/blocks/find-kinetic/types.ts

@@ -6,6 +6,7 @@ export type FindKineticProps = {
   localPathPrefix?: string;
   background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
   image?: string;
+  imageAltText?: string;
   list?: { name: string; code: string }[];
   maxWidth?: boolean;
   color?: "dark" | "light";

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

@@ -19,6 +19,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   disclaimer,
   description,
   image,
+  imageAltText,
   imageLinks,
   mediaPosition = true,
   checklist,
@@ -33,6 +34,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   isAboveTheFold = false,
   onModalButtonClick,
   onClick,
+  onVideoEvent,
   renderCheckPlans,
   enableAnimation = false,
 }) => {
@@ -174,7 +176,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
               >
                 <NextImage
                   src={image}
-                  alt="section-image"
+                  alt={imageAltText ?? "section-image"}
                   priority={isAboveTheFold}
                   fill={!useOriginalImageAspectRatio}
                   width={
@@ -199,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 = {
@@ -9,6 +12,7 @@ export type ImagePromoBarProps = {
   title: string;
   subTitle: string;
   image: string;
+  imageAltText?: string;
   imageWidth: number;
   imageHeight: number;
   useOriginalImageAspectRatio?: boolean;
@@ -26,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/primary-hero/index.tsx

@@ -75,7 +75,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
       />
     ) : null;
   return (
-    <div className="component-container relative overflow-hidden p-4 sm:px-6 sm:py-12 xl:flex xl:min-h-[724px] xl:items-center xl:px-10">
+    <div className="component-container relative overflow-hidden p-4 sm:px-6 sm:py-12 xl:flex xl:min-h-[724px] xl:items-center xl:px-4">
       {hasDesktopVideo ? (
         <video
           autoPlay={true}
@@ -98,7 +98,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         {/* Left column: navy background, headline, body, address, button, link */}
         <div
           className={cx(
-            `relative flex flex-col ${textColorClass} w-full xl:w-[485px]`
+            `relative flex flex-col ${textColorClass} w-full xl:w-[486px]`
           )}
         >
           <div className="flex flex-col gap-5 lg:gap-6">
@@ -361,17 +361,17 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         <div
           className={cx(
             "relative hidden xl:block",
-            hasDesktopVideo && "h-[600px] w-[600px]"
+            hasDesktopVideo && "h-[584px] w-[584px]"
           )}
         >
-          <Badge className="absolute -left-10 top-18 z-10 aspect-square w-52 object-cover object-center" />
+          <Badge className="absolute -left-[114px] top-[62px] z-10 aspect-square w-[200px] object-cover object-center" />
           {!hasDesktopVideo && heroImageUrl ? (
             <NextImage
               src={heroImageUrl}
               alt={"Hero"}
               className="aspect-square rounded-[40px] object-cover object-center"
-              width={600}
-              height={600}
+              width={584}
+              height={584}
               quality={90}
               loading="eager"
             />

package/src/hooks/contentful/use-contentful-rich-text.test.tsx

@@ -243,14 +243,14 @@ describe("renderContentfulRichText", () => {
       const a = container.querySelector("a")!;
       expect(a).toHaveAttribute("href", "https://example.com");
       expect(a).toHaveAttribute("target", "_blank");
-      expect(a).toHaveAttribute("rel", "noopener noreferrer");
+      expect(a).toHaveAttribute("rel", "noopener");
     });
 
-    it("renders internal link with target=_self for relative URLs", () => {
+    it("renders internal link without target for relative URLs", () => {
       const doc = makeDoc(makeHyperlink("/about", "About"));
       const { container } = render(<>{renderContentfulRichText(doc)}</>);
       const a = container.querySelector("a")!;
-      expect(a).toHaveAttribute("target", "_self");
+      expect(a).not.toHaveAttribute("target");
       expect(a).not.toHaveAttribute("rel");
     });
 
@@ -265,7 +265,7 @@ describe("renderContentfulRichText", () => {
       const doc = makeDoc(makeHyperlink("https://example.com", "External"));
       const { container } = render(<>{renderContentfulRichText(doc, false)}</>);
       const a = container.querySelector("a")!;
-      expect(a).toHaveAttribute("target", "_self");
+      expect(a).not.toHaveAttribute("target");
     });
 
     it("applies custom linkClassName", () => {
@@ -536,13 +536,13 @@ describe("renderContentfulRichText", () => {
       expect(a).toHaveAttribute("target", "_blank");
     });
 
-    it("renders internal link with _self when target is undefined", () => {
+    it("renders internal link without target when target is undefined", () => {
       const doc = makeDoc(makeHyperlink("/page", "Page"));
       const { container } = render(
         <>{renderContentfulRichText(doc, undefined)}</>
       );
       const a = container.querySelector("a")!;
-      expect(a).toHaveAttribute("target", "_self");
+      expect(a).not.toHaveAttribute("target");
     });
 
     it("handles hyperlink with missing uri data", () => {

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