@learncard/react 2.10.8 → 2.12.0

package/src/components/Lightbox/__tests__/Lightbox.video.test.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Lightbox } from '../Lightbox';
+import { openExternalUrl, setExternalUrlOpener } from '../../../helpers/externalUrl.helpers';
+import { canEmbedVideoIframe, getExternalVideoUrl } from '../../../helpers/video.helpers';
+
+const VIDEO_URL = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
+
+const setProtocol = (protocol: string) => {
+    Object.defineProperty(window, 'location', {
+        configurable: true,
+        writable: true,
+        value: { ...window.location, protocol },
+    });
+};
+
+const renderLightbox = () =>
+    render(
+        <Lightbox
+            items={[{ url: VIDEO_URL, type: 'video' }]}
+            currentUrl={VIDEO_URL}
+            setCurrentUrl={() => undefined}
+        />
+    );
+
+describe('canEmbedVideoIframe', () => {
+    afterEach(() => setProtocol('http:'));
+
+    it('allows iframe embeds on http(s) documents', () => {
+        setProtocol('https:');
+        expect(canEmbedVideoIframe()).toBe(true);
+
+        setProtocol('http:');
+        expect(canEmbedVideoIframe()).toBe(true);
+    });
+
+    it("blocks iframe embeds on Capacitor iOS's custom scheme", () => {
+        // WKWebView cannot send `capacitor://localhost` as an HTTP Referer, so
+        // YouTube rejects the embed with "Error 153".
+        setProtocol('capacitor:');
+        expect(canEmbedVideoIframe()).toBe(false);
+        expect(canEmbedVideoIframe('youtube')).toBe(false);
+    });
+
+    it('leaves non-YouTube platforms embedded — only YouTube checks the referrer', () => {
+        setProtocol('capacitor:');
+        expect(canEmbedVideoIframe('vimeo')).toBe(true);
+        expect(canEmbedVideoIframe('drive')).toBe(true);
+        expect(canEmbedVideoIframe('loom')).toBe(true);
+    });
+});
+
+describe('openExternalUrl', () => {
+    afterEach(() => setExternalUrlOpener(undefined));
+
+    it('refuses non-web schemes from untrusted attachment data', async () => {
+        const opened: string[] = [];
+        setExternalUrlOpener(url => {
+            opened.push(url);
+        });
+
+        await openExternalUrl('javascript:alert(1)');
+        await openExternalUrl('data:text/html,<script>alert(1)</script>');
+        await openExternalUrl('');
+        expect(opened).toEqual([]);
+
+        await openExternalUrl('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+        expect(opened).toEqual(['https://www.youtube.com/watch?v=dQw4w9WgXcQ']);
+    });
+});
+
+describe('getExternalVideoUrl', () => {
+    it('builds a public watch URL from YouTube metadata', () => {
+        expect(
+            getExternalVideoUrl(
+                {
+                    type: 'youtube',
+                    videoId: 'dQw4w9WgXcQ',
+                    embedUrl: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
+                    thumbnailUrl: null,
+                },
+                'fallback'
+            )
+        ).toBe('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+    });
+
+    it('falls back to the original URL for non-YouTube videos', () => {
+        expect(
+            getExternalVideoUrl(
+                {
+                    type: 'vimeo',
+                    videoId: '123',
+                    embedUrl: 'https://player.vimeo.com/video/123',
+                    thumbnailUrl: null,
+                },
+                'https://vimeo.com/123'
+            )
+        ).toBe('https://vimeo.com/123');
+    });
+});
+
+describe('Lightbox video playback', () => {
+    afterEach(() => {
+        setProtocol('http:');
+        setExternalUrlOpener(undefined);
+    });
+
+    it('renders an inline iframe on the web', async () => {
+        setProtocol('https:');
+        renderLightbox();
+
+        // Lightbox renders through a portal into document.body
+        await waitFor(() => expect(document.body.querySelector('iframe')).toBeInTheDocument());
+        expect(document.body.querySelector('iframe')).toHaveAttribute(
+            'src',
+            'https://www.youtube.com/embed/dQw4w9WgXcQ'
+        );
+    });
+
+    it('hands playback to an external browser when embeds cannot work', async () => {
+        setProtocol('capacitor:');
+        const opened: string[] = [];
+        setExternalUrlOpener(url => {
+            opened.push(url);
+        });
+
+        renderLightbox();
+
+        const button = await screen.findByRole('button', { name: 'Watch on YouTube' });
+        expect(document.body.querySelector('iframe')).not.toBeInTheDocument();
+
+        await userEvent.click(button);
+
+        expect(opened).toEqual(['https://www.youtube.com/watch?v=dQw4w9WgXcQ']);
+    });
+});

package/src/components/Lightbox/index.ts

@@ -2,4 +2,5 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from './ExternalVideoFallback';
 export * from './Lightbox';

package/src/components/VCDisplayCard2/FitText.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
 
 interface FitTextProps {
     text: string;
@@ -8,6 +8,14 @@ interface FitTextProps {
     maxFontSize?: number;
 }
 
+// Keep fitted text slightly inside the measured edge to account for borders,
+// subpixel rounding, and glyph overhang on narrow screens.
+const FIT_GUTTER_PX = 12;
+
+/**
+ * Shrinks a single-line label to fit its container, wrapping only when the
+ * text still cannot fit at the configured minimum font size.
+ */
 const FitText: React.FC<FitTextProps> = ({
     text,
     width,
@@ -15,67 +23,88 @@ const FitText: React.FC<FitTextProps> = ({
     minFontSize = 10,
     maxFontSize = 100,
 }) => {
-    const textRef = useRef<HTMLDivElement>(null);
-    let animationFrameId: number | null = null;
+    const containerRef = useRef<HTMLDivElement>(null);
+    const textRef = useRef<HTMLSpanElement>(null);
 
-    const adjustFontSize = () => {
-        if (textRef.current) {
-            const currentFontSize = parseFloat(
-                window.getComputedStyle(textRef.current).getPropertyValue('font-size')
-            );
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+        const textElement = textRef.current;
+        if (!container || !textElement) return;
+
+        const fitText = () => {
+            // Measure from the maximum size each time so repeated resizes do not
+            // compound a previously calculated font size. Font-size transitions
+            // are intentionally avoided so scrollWidth reflects this size immediately.
+            textElement.style.fontSize = `${maxFontSize}px`;
+            textElement.style.whiteSpace = 'nowrap';
 
-            // Need to calculate spacing based on nowrap to prevent thrashing
-            textRef.current.style.whiteSpace = 'nowrap';
-            const parentWidth = (textRef.current.parentNode as any)?.clientWidth;
-            const scrollWidth = textRef.current.scrollWidth || textRef.current.offsetWidth;
+            const availableWidth = Math.max(container.clientWidth - FIT_GUTTER_PX, 0);
+            const requiredWidth = textElement.scrollWidth;
+            if (!availableWidth || !requiredWidth) return;
 
-            // Sometimes scrollWidth can temporarily be 0. If so, just try again next frame
-            if (scrollWidth === 0) {
-                if (animationFrameId !== null) {
-                    cancelAnimationFrame(animationFrameId);
-                }
+            let fittedFontSize = Math.min(
+                maxFontSize,
+                Math.max(minFontSize, Math.floor((availableWidth / requiredWidth) * maxFontSize))
+            );
 
-                animationFrameId = requestAnimationFrame(adjustFontSize);
+            textElement.style.fontSize = `${fittedFontSize}px`;
 
-                return;
+            // Font metrics and browser rounding are not perfectly linear. Verify
+            // the estimate so a one-pixel overflow cannot silently clip a title.
+            while (textElement.scrollWidth > availableWidth && fittedFontSize > minFontSize) {
+                fittedFontSize -= 1;
+                textElement.style.fontSize = `${fittedFontSize}px`;
             }
 
-            const newFontSize = Math.min(
-                Math.max((parentWidth / scrollWidth) * currentFontSize, minFontSize),
-                maxFontSize
-            );
+            // Preserve the single-line ribbon treatment whenever possible.
+            // Extremely long titles may wrap only after reaching the minimum.
+            textElement.style.whiteSpace =
+                fittedFontSize === minFontSize && textElement.scrollWidth > availableWidth
+                    ? 'normal'
+                    : 'nowrap';
+        };
 
-            textRef.current.style.fontSize = `${newFontSize}px`;
-            textRef.current.style.whiteSpace = newFontSize === minFontSize ? 'normal' : 'nowrap';
-        }
-    };
+        fitText();
 
-    const handleResize = () => {
-        if (animationFrameId !== null) {
-            cancelAnimationFrame(animationFrameId);
-        }
+        // Device rotation and responsive layouts change the container without
+        // necessarily changing the text or receiving a window resize event.
+        let resizeObserver: ResizeObserver | undefined;
+        if (typeof ResizeObserver !== 'undefined') {
+            let lastObservedWidth: number | undefined;
+            resizeObserver = new ResizeObserver(([entry]) => {
+                const observedWidth = entry?.contentRect.width;
 
-        animationFrameId = requestAnimationFrame(adjustFontSize);
-    };
+                if (observedWidth === undefined || observedWidth === lastObservedWidth) return;
 
-    useEffect(() => {
-        window.addEventListener('resize', handleResize);
-        adjustFontSize();
+                lastObservedWidth = observedWidth;
+                fitText();
+            });
+            resizeObserver.observe(container);
+        }
+
+        // Web fonts can alter the measured glyph width after the first layout.
+        let isMounted = true;
+        document.fonts?.ready
+            .then(() => {
+                if (isMounted) fitText();
+            })
+            .catch(() => {
+                // The initial synchronous measurement remains a safe fallback.
+            });
 
         return () => {
-            window.removeEventListener('resize', handleResize);
-            if (animationFrameId !== null) {
-                cancelAnimationFrame(animationFrameId);
-            }
+            isMounted = false;
+            resizeObserver?.disconnect();
         };
-    }, [text]);
+    }, [maxFontSize, minFontSize, text, width]);
 
     return (
-        <div style={{ width }} className={`text-center ${className}`}>
-            <span
-                className={`text-[${minFontSize}px] transition-[font-size] whitespace-nowrap`}
-                ref={textRef}
-            >
+        <div
+            ref={containerRef}
+            style={{ width, maxWidth: '100%' }}
+            className={`text-center ${className}`}
+        >
+            <span className="inline-block max-w-full whitespace-nowrap" ref={textRef}>
                 {text}
             </span>
         </div>

package/src/components/VCDisplayCard2/VCDisplayCard2.tsx

@@ -43,6 +43,32 @@ export type CredentialIconType = {
     color?: string;
 };
 
+export type VCDisplayCardVariant = 'ribbon' | 'award' | 'certificate' | 'id';
+
+/**
+ * Returns the visual branch VCDisplayCard2 will render. Preview hosts use this
+ * to preserve their specialized-card spacing while the ribbon card owns its
+ * wider horizontal safe area.
+ */
+export const getVCDisplayCardVariant = (
+    credential?: VC | BoostAchievementCredential,
+    categoryType?: LCCategoryEnum | string,
+    formattedDisplayType?: string
+): VCDisplayCardVariant => {
+    const resolvedDisplayType = (
+        credential?.display?.displayType ?? formattedDisplayType
+    )?.toLocaleLowerCase();
+
+    if (categoryType === LCCategoryEnum.meritBadge || resolvedDisplayType === 'award') {
+        return 'award';
+    }
+
+    if (resolvedDisplayType === 'certificate') return 'certificate';
+    if (resolvedDisplayType === 'id' || categoryType === LCCategoryEnum.id) return 'id';
+
+    return 'ribbon';
+};
+
 export type VCDisplayCard2Props = {
     categoryType?: LCCategoryEnum;
     credential: VC | BoostAchievementCredential;
@@ -157,19 +183,30 @@ export const VCDisplayCard2: React.FC<VCDisplayCard2Props> = ({
     const isFront = isFrontOverride ?? _isFront;
     const setIsFront = setIsFrontOverride ?? _setIsFront;
 
-    const [headerHeight, setHeaderHeight] = useState(100); // 79 is the height if the header is one line
-    const [headerWidth, setHeaderWidth] = useState(0);
+    const [headerHeight, setHeaderHeight] = useState(79);
 
     const headerRef = useRef<HTMLHeadingElement>(null);
 
     useLayoutEffect(() => {
-        // Needs a small setTimeout otherwise it'll be wrong sometimes with multiline header.
-        //   Probably because of the interaction with FitText
-        setTimeout(() => {
-            setHeaderHeight(headerRef.current?.clientHeight || 100);
-            setHeaderWidth(headerRef.current?.clientWidth ?? 0);
-        }, 10);
-    });
+        const header = headerRef.current;
+        if (!header) return;
+
+        // Keep the ribbon tails aligned when a long title makes the center
+        // section taller than its normal single-line height.
+        const updateHeaderHeight = () => setHeaderHeight(header.clientHeight || 79);
+
+        updateHeaderHeight();
+        if (typeof ResizeObserver === 'undefined') return;
+
+        const resizeObserver = new ResizeObserver(updateHeaderHeight);
+        resizeObserver.observe(header);
+
+        return () => resizeObserver.disconnect();
+    }, []);
+
+    // The tails start 10px below the center ribbon and visually overlap its
+    // lower border, so they are slightly shorter than the measured header.
+    const ribbonEndHeight = Math.max(headerHeight - 4, 75).toString();
 
     let worstVerificationStatus = verificationItems.reduce(
         (
@@ -204,10 +241,13 @@ export const VCDisplayCard2: React.FC<VCDisplayCard2Props> = ({
 
     const _title = titleOverride || title;
 
-    const resolvedDisplayType =
-        credential?.display?.displayType ?? formattedDisplayType?.toLocaleLowerCase();
+    const displayCardVariant = getVCDisplayCardVariant(
+        credential,
+        categoryType,
+        formattedDisplayType
+    );
 
-    if (categoryType === LCCategoryEnum.meritBadge || resolvedDisplayType === 'award') {
+    if (displayCardVariant === 'award') {
         return (
             <MeritBadgeDisplayCard
                 credential={credential}
@@ -241,7 +281,7 @@ export const VCDisplayCard2: React.FC<VCDisplayCard2Props> = ({
         );
     }
 
-    if (resolvedDisplayType === 'certificate') {
+    if (displayCardVariant === 'certificate') {
         return (
             <CertificateDisplayCard
                 credential={credential}
@@ -273,7 +313,7 @@ export const VCDisplayCard2: React.FC<VCDisplayCard2Props> = ({
                 onVerifierClick={onVerifierClick}
             />
         );
-    } else if (resolvedDisplayType === 'id' || categoryType === 'ID') {
+    } else if (displayCardVariant === 'id') {
         return (
             <div>
                 <VCIDDisplayCard
@@ -314,7 +354,7 @@ export const VCDisplayCard2: React.FC<VCDisplayCard2Props> = ({
         'vc-card-header-main-title text-[#18224E] pt-[3px] leading-[80%] text-[32px]';
 
     return (
-        <Flipper className="w-full" flipKey={isFront}>
+        <Flipper className="vc-display-card-ribbon-safe-area w-full" flipKey={isFront}>
             <Flipped flipId="card">
                 <section
                     className="vc-display-card font-poppins flex flex-col items-center border-solid border-[5px] border-white rounded-[30px] z-10 min-h-[800px] max-w-[400px] relative bg-white shadow-3xl"
@@ -325,14 +365,14 @@ export const VCDisplayCard2: React.FC<VCDisplayCard2Props> = ({
                         <RibbonEnd
                             side="left"
                             className="absolute left-[-30px] top-[50px] z-0"
-                            height={'75'}
+                            height={ribbonEndHeight}
                         />
                     </Flipped>
                     <Flipped inverseFlipId="card">
                         <RibbonEnd
                             side="right"
                             className="absolute right-[-30px] top-[50px] z-0"
-                            height={'75'}
+                            height={ribbonEndHeight}
                         />
                     </Flipped>
 
@@ -351,7 +391,7 @@ export const VCDisplayCard2: React.FC<VCDisplayCard2Props> = ({
                                 text={_title ?? ''}
                                 maxFontSize={32}
                                 minFontSize={20}
-                                width={((headerWidth ?? 290) - 40).toString()}
+                                width="100%"
                                 className={headerFitTextClassName}
                             />
                         </h1>
@@ -390,7 +430,7 @@ export const VCDisplayCard2: React.FC<VCDisplayCard2Props> = ({
                                     text={_title ?? ''}
                                     maxFontSize={32}
                                     minFontSize={20}
-                                    width={((headerWidth ?? 290) - 40).toString()}
+                                    width="100%"
                                     className={headerFitTextClassName}
                                 />
                             </h1>

package/src/components/VCDisplayCard2/VerificationRow.tsx

@@ -20,6 +20,7 @@ const MESSAGE_KEYS: Record<string, string> = {
     Invalid: 'invalid',
     'Not Revoked': 'notRevoked',
     Revoked: 'revoked',
+    Suspended: 'suspended',
     'Does Not Expire': 'doesNotExpire',
     Expired: 'expired',
     Active: 'active',

package/src/components/VCDisplayCard2/__tests__/FitText.test.tsx

@@ -0,0 +1,140 @@
+// @vitest-environment jsdom
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import type { MockInstance } from 'vitest';
+
+import FitText from '../FitText';
+
+let resizeObserverCallback: ResizeObserverCallback;
+let clientWidth = 212;
+let scrollWidth = 400;
+
+const observe = vi.fn();
+const disconnect = vi.fn();
+
+class ResizeObserverMock {
+    constructor(callback: ResizeObserverCallback) {
+        resizeObserverCallback = callback;
+    }
+
+    observe = observe;
+    disconnect = disconnect;
+    unobserve = vi.fn();
+}
+
+describe('FitText', () => {
+    let clientWidthSpy: MockInstance<[], number>;
+    let scrollWidthSpy: MockInstance<[], number>;
+
+    beforeEach(() => {
+        clientWidth = 212;
+        scrollWidth = 400;
+        observe.mockClear();
+        disconnect.mockClear();
+
+        vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+        clientWidthSpy = vi
+            .spyOn(HTMLElement.prototype, 'clientWidth', 'get')
+            .mockImplementation(() => clientWidth);
+        scrollWidthSpy = vi
+            .spyOn(HTMLElement.prototype, 'scrollWidth', 'get')
+            .mockImplementation(function () {
+                const fontSize = Number.parseFloat(this.style.fontSize) || 100;
+                return (scrollWidth * fontSize) / 100;
+            });
+    });
+
+    afterEach(() => {
+        clientWidthSpy.mockRestore();
+        scrollWidthSpy.mockRestore();
+        vi.unstubAllGlobals();
+    });
+
+    test('refits only when the observed width changes', () => {
+        const { container, getByText } = render(
+            <FitText text="A responsive ribbon title" width="100%" maxFontSize={100} />
+        );
+
+        const observedElement = container.firstElementChild as Element;
+
+        resizeObserverCallback(
+            [
+                {
+                    contentRect: { width: 200, height: 40 },
+                    target: observedElement,
+                } as ResizeObserverEntry,
+            ],
+            {} as ResizeObserver
+        );
+        const readsAfterFirstResize = scrollWidthSpy.mock.calls.length;
+
+        resizeObserverCallback(
+            [
+                {
+                    contentRect: { width: 200, height: 80 },
+                    target: observedElement,
+                } as ResizeObserverEntry,
+            ],
+            {} as ResizeObserver
+        );
+
+        expect(scrollWidthSpy).toHaveBeenCalledTimes(readsAfterFirstResize);
+
+        clientWidth = 172;
+        resizeObserverCallback(
+            [
+                {
+                    contentRect: { width: 160, height: 80 },
+                    target: observedElement,
+                } as ResizeObserverEntry,
+            ],
+            {} as ResizeObserver
+        );
+
+        expect(scrollWidthSpy.mock.calls.length).toBeGreaterThan(readsAfterFirstResize);
+        expect(getByText('A responsive ribbon title').style.fontSize).toBe('40px');
+    });
+
+    test('wraps only after reaching the minimum font size', () => {
+        clientWidth = 112;
+        scrollWidth = 1_200;
+
+        const { getByText } = render(
+            <FitText
+                text="An exceptionally long ribbon title"
+                width="100%"
+                minFontSize={10}
+                maxFontSize={100}
+            />
+        );
+        const textElement = getByText('An exceptionally long ribbon title');
+
+        expect(textElement.style.fontSize).toBe('10px');
+        expect(textElement.style.whiteSpace).toBe('normal');
+    });
+
+    test('keeps the maximum font size when the text fits', () => {
+        clientWidth = 350;
+        scrollWidth = 200;
+
+        const { getByText } = render(
+            <FitText text="Short title" width="100%" minFontSize={10} maxFontSize={32} />
+        );
+
+        expect(getByText('Short title').style.fontSize).toBe('32px');
+    });
+
+    test('still fits when ResizeObserver is unavailable', () => {
+        vi.stubGlobal('ResizeObserver', undefined);
+        clientWidth = 350;
+        scrollWidth = 200;
+
+        const { getByText } = render(
+            <FitText text="Short title" width="100%" minFontSize={10} maxFontSize={32} />
+        );
+
+        expect(getByText('Short title').style.fontSize).toBe('32px');
+    });
+});

package/src/components/VCDisplayCard2/__tests__/VCDisplayCard2Variant.test.ts

@@ -0,0 +1,31 @@
+import type { VC } from '@learncard/types';
+
+import { getVCDisplayCardVariant } from '../VCDisplayCard2';
+import { LCCategoryEnum } from '../../../types';
+
+const credentialWithDisplayType = (displayType: string): VC =>
+    ({ display: { displayType } } as unknown as VC);
+
+describe('getVCDisplayCardVariant', () => {
+    it('uses the ribbon layout for a generic credential', () => {
+        expect(getVCDisplayCardVariant({} as VC)).toBe('ribbon');
+    });
+
+    it('detects each specialized display type', () => {
+        expect(getVCDisplayCardVariant(credentialWithDisplayType('award'))).toBe('award');
+        expect(getVCDisplayCardVariant(credentialWithDisplayType('certificate'))).toBe(
+            'certificate'
+        );
+        expect(getVCDisplayCardVariant(credentialWithDisplayType('id'))).toBe('id');
+        expect(getVCDisplayCardVariant(credentialWithDisplayType('ID'))).toBe('id');
+    });
+
+    it('uses category metadata when display metadata is absent', () => {
+        expect(getVCDisplayCardVariant({} as VC, LCCategoryEnum.meritBadge)).toBe('award');
+        expect(getVCDisplayCardVariant({} as VC, LCCategoryEnum.id)).toBe('id');
+    });
+
+    it('uses the formatted display type as a final fallback', () => {
+        expect(getVCDisplayCardVariant({} as VC, undefined, 'Certificate')).toBe('certificate');
+    });
+});