@learncard/react 2.11.0 → 2.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@learncard/react",
-    "version": "2.11.0",
+    "version": "2.12.0",
     "description": "",
     "main": "dist/cjs",
     "module": "dist/esm",
@@ -24,7 +24,7 @@
     "author": "Learning Economy Foundation (www.learningeconomy.io)",
     "license": "MIT",
     "devDependencies": {
-        "@learncard/types": "5.18.0",
+        "@learncard/types": "5.18.1",
         "@rollup/plugin-commonjs": "^22.0.0",
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^13.3.0",
@@ -66,7 +66,7 @@
         "vite": "^6.4.2"
     },
     "dependencies": {
-        "@learncard/init": "2.4.9",
+        "@learncard/init": "2.4.10",
         "date-fns": "^2.28.0",
         "numeral": "^2.0.6",
         "pretty-bytes": "^6.0.0",

package/src/assets/styles/main.css

@@ -371,6 +371,16 @@
     font-family: 'Mouse Memoirs';
 }
 
+/*
+ * Ribbon tails extend 30px beyond the card. Keep that overhang plus an 8px
+ * visible gutter inside VCDisplayCard2 so every preview host gets the same fit.
+ */
+.vc-display-card-ribbon-safe-area {
+    box-sizing: border-box;
+    /* Hosts that already reserve ribbon-tail space can set this custom property to 0px. */
+    padding-inline: var(--vc-display-card-ribbon-safe-area, 38px);
+}
+
 .vc-toggle-side-button {
     background-color: #00000099;
 }

package/src/components/BoostGenericCard/BoostGenericCard.tsx

@@ -98,8 +98,15 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
                 onClick={handleInnerClick}
             >
                 {/* Thumbnail — filter on the wrapper so it desaturates a
-                    customThumbComponent too, not just the default thumb section. */}
-                <div style={inactiveMediaStyle}>
+                    customThumbComponent too, not just the default thumb section.
+                    The explicit width is load-bearing on iOS 18 WebKit: a bare block
+                    child of a <button> flex container is laid out shrink-to-fit there
+                    (UA align-items: flex-start per the HTML spec), so without it the
+                    badge collapses to its 116px circle and the header artwork stops
+                    running under the options button. iOS 26+/desktop engines compute
+                    align-items: normal and stretch, which masks the bug (LC-2066).
+                    width is spread last so nothing can ever override it. */}
+                <div style={{ ...inactiveMediaStyle, width: '100%' }}>
                     {customThumbComponent || (
                         <section className={defaultThumbClass}>
                             {thumbImgSrc?.trim() ? (

package/src/components/BoostGenericCard/__tests__/BoostGenericCard.thumb.test.tsx

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import { BoostGenericCard } from '../BoostGenericCard';
+
+/**
+ * LC-2066 regression guard.
+ *
+ * The thumbnail wrapper added for the revoked/suspended grayscale treatment
+ * (#1366) sits directly inside the card's `<button>`. On iOS 18 WebKit a bare
+ * block child of a <button> flex container is laid out shrink-to-fit (UA
+ * `align-items: flex-start` per the HTML spec), so the badge — which sizes
+ * itself with `width: 100%` — collapses to the width of its 116px circle and
+ * the header artwork no longer runs under the absolutely-positioned options
+ * ("...") button. iOS 26+/desktop engines compute `align-items: normal` and
+ * stretch the wrapper, which masks the bug. The wrapper must therefore carry
+ * its own explicit width. Verified by A/B on an iOS 18.1 simulator:
+ * without width the wrapper measures 116px, with it 160px.
+ */
+describe('BoostGenericCard thumbnail wrapper', () => {
+    const getThumbWrapper = (container: HTMLElement) => {
+        const badge = container.querySelector('[data-testid="thumb-child"]');
+        expect(badge).not.toBeNull();
+
+        return badge!.parentElement as HTMLElement;
+    };
+
+    test('gives the custom thumbnail wrapper an explicit full width', () => {
+        const { container } = render(
+            <BoostGenericCard
+                title="Camp Counselor"
+                customThumbComponent={<div data-testid="thumb-child" style={{ width: '100%' }} />}
+                optionsTriggerOnClick={() => {}}
+            />
+        );
+
+        expect(getThumbWrapper(container).style.width).toBe('100%');
+    });
+
+    test('keeps the explicit width when the credential is revoked', () => {
+        const { container } = render(
+            <BoostGenericCard
+                title="Camp Counselor"
+                customThumbComponent={<div data-testid="thumb-child" style={{ width: '100%' }} />}
+                optionsTriggerOnClick={() => {}}
+                lifecycleStatus="revoked"
+            />
+        );
+
+        const wrapper = getThumbWrapper(container);
+
+        expect(wrapper.style.width).toBe('100%');
+        // The grayscale treatment must survive alongside the width.
+        expect(wrapper.style.filter).toContain('grayscale');
+    });
+});

package/src/components/Lightbox/ExternalVideoFallback.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { openExternalUrl } from '../../helpers/externalUrl.helpers';
+
+export type ExternalVideoFallbackProps = {
+    /** Public `watch` URL opened when the user taps play. */
+    url: string;
+    /** Poster frame, when we managed to resolve one. */
+    thumbnailUrl?: string | null;
+    label?: string;
+    className?: string;
+};
+
+/**
+ * Stand-in for a video `<iframe>` in documents where third-party embeds cannot
+ * play — see `canEmbedVideoIframe`. Renders the poster frame with a play button
+ * that hands playback off to an external browser.
+ */
+export const ExternalVideoFallback: React.FC<ExternalVideoFallbackProps> = ({
+    url,
+    thumbnailUrl,
+    label = 'Watch on YouTube',
+    className = '',
+}) => (
+    <button
+        type="button"
+        onClick={e => {
+            e.stopPropagation();
+            openExternalUrl(url);
+        }}
+        aria-label={label}
+        className={`relative w-full h-full flex flex-col items-center justify-center gap-[16px] overflow-hidden rounded-md bg-black ${className}`}
+    >
+        {thumbnailUrl && (
+            <img
+                src={thumbnailUrl}
+                alt=""
+                aria-hidden="true"
+                className="absolute inset-0 w-full h-full object-cover opacity-60"
+            />
+        )}
+
+        <div className="relative w-[64px] h-[64px] rounded-full bg-white/95 flex items-center justify-center">
+            <svg viewBox="0 0 24 24" className="w-[28px] h-[28px] ml-[4px]" aria-hidden="true">
+                <path d="M8 5v14l11-7z" fill="#000" />
+            </svg>
+        </div>
+
+        <span className="relative text-white text-base font-semibold">{label}</span>
+    </button>
+);
+
+export default ExternalVideoFallback;

package/src/components/Lightbox/Lightbox.tsx

@@ -3,7 +3,13 @@ import { createPortal } from 'react-dom';
 
 import X from '../svgs/X';
 
-import { getVideoMetadata, VideoMetadata } from '../../helpers/video.helpers';
+import {
+    canEmbedVideoIframe,
+    getExternalVideoUrl,
+    getVideoMetadata,
+    VideoMetadata,
+} from '../../helpers/video.helpers';
+import ExternalVideoFallback from './ExternalVideoFallback';
 
 export type LightboxItemType = 'photo' | 'video';
 
@@ -117,14 +123,22 @@ export const Lightbox: React.FC<LightboxProps> = ({
 
             {currentItem.type === 'video' && videoMetadata?.embedUrl && (
                 <div className="relative w-[90vw] max-w-[800px] aspect-video">
-                    <iframe
-                        src={videoMetadata.embedUrl}
-                        className="absolute top-0 left-0 w-full h-full rounded-md"
-                        title="Video player"
-                        frameBorder="0"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                        allowFullScreen
-                    />
+                    {canEmbedVideoIframe(videoMetadata.type) ? (
+                        <iframe
+                            src={videoMetadata.embedUrl}
+                            className="absolute top-0 left-0 w-full h-full rounded-md"
+                            title="Video player"
+                            frameBorder="0"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                            allowFullScreen
+                        />
+                    ) : (
+                        <ExternalVideoFallback
+                            url={getExternalVideoUrl(videoMetadata, currentItem.url)}
+                            thumbnailUrl={videoMetadata.thumbnailUrl}
+                            className="absolute top-0 left-0"
+                        />
+                    )}
                 </div>
             )}
         </div>,

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>