@nascentdigital/funnel-ui 4.4.18

package/dist/client/app/useAppConfig.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppConfig = useAppConfig;
+const react_1 = require("react");
+const AppContext_1 = require("./AppContext");
+// hook
+function useAppConfig() {
+    return (0, react_1.useContext)(AppContext_1.AppContext).appConfig;
+}

package/dist/client/app/useBrand.d.ts

@@ -0,0 +1,9 @@
+import { RegionsConfig } from '@nascentdigital/funnel-core';
+export declare function useBrand<TRegion extends string = string>(): useBrand.Brand<TRegion>;
+export declare namespace useBrand {
+    type Brand<TRegion extends string> = {
+        id: string;
+        name: string;
+        regionalization: RegionsConfig<TRegion>;
+    };
+}

package/dist/client/app/useBrand.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBrand = useBrand;
+const react_1 = require("react");
+const AppContext_1 = require("./AppContext");
+// hook
+function useBrand() {
+    // bind context
+    const { brand, appConfig } = (0, react_1.useContext)(AppContext_1.AppContext);
+    // unpack
+    const brandConfig = appConfig.brands[brand];
+    return {
+        id: brand,
+        name: brandConfig.name,
+        regionalization: brandConfig.regionalization
+    };
+}

package/dist/client/app/useLanguage.d.ts

@@ -0,0 +1,2 @@
+import { Language } from '@nascentdigital/funnel-core';
+export declare function useLanguage(): Language;

package/dist/client/app/useLanguage.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLanguage = useLanguage;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const navigation_1 = require("next/navigation");
+function useLanguage() {
+    // bind hooks
+    const params = (0, navigation_1.useParams)();
+    // get locale
+    return funnel_core_1.Language.parse(params.language);
+}

package/dist/client/app/usePageData.d.ts

@@ -0,0 +1,2 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export declare function usePageData(pageType: Schema.Page.Type): Schema.Site.Data.Page;

package/dist/client/app/usePageData.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageData = usePageData;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const AppContext_1 = require("./AppContext");
+const useRegion_1 = require("./useRegion");
+// hook
+function usePageData(pageType) {
+    // bind context
+    const { siteData } = (0, react_1.useContext)(AppContext_1.AppContext);
+    const region = (0, useRegion_1.useRegion)();
+    // resolve pages for region (or blow up)
+    const pages = siteData[region];
+    if (!pages) {
+        throw new funnel_core_1.IllegalStateError(`Schema.Site.current() doesn't have mapping for region "${region}"`);
+    }
+    // resolve page for id (or blow up)
+    const page = pages[pageType];
+    if (!page) {
+        throw new funnel_core_1.IllegalStateError(`Schema.Site.current() doesn't have mapping for page "${pageType}" in region "${region}"`);
+    }
+    // return page
+    return page;
+}

package/dist/client/app/usePageUrl.d.ts

@@ -0,0 +1 @@
+export declare function usePageUrl(): string | undefined;

package/dist/client/app/usePageUrl.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageUrl = usePageUrl;
+const react_1 = require("react");
+const AppContext_1 = require("./AppContext");
+// hook
+function usePageUrl() {
+    // bind context
+    const { page } = (0, react_1.useContext)(AppContext_1.AppContext);
+    // return page
+    return page === null || page === void 0 ? void 0 : page.url;
+}

package/dist/client/app/useRegion.d.ts

@@ -0,0 +1 @@
+export declare function useRegion<TRegion extends string = string>(): TRegion;

package/dist/client/app/useRegion.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRegion = useRegion;
+const navigation_1 = require("next/navigation");
+function useRegion() {
+    // bind hooks
+    const params = (0, navigation_1.useParams)();
+    // get locale
+    return params.region;
+}

package/dist/client/app/useSite.d.ts

@@ -0,0 +1,2 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export declare function useSite(): Schema.SiteModel;

package/dist/client/app/useSite.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSite = useSite;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const AppContext_1 = require("./AppContext");
+// hook
+function useSite() {
+    // bind context
+    const { siteData } = (0, react_1.useContext)(AppContext_1.AppContext);
+    // return site data
+    return new funnel_core_1.Schema.SiteModel(siteData);
+}

package/dist/client/atomic/AnimatedText.d.ts

@@ -0,0 +1,12 @@
+import { MotionProps } from 'motion/react';
+import { HTMLAttributes } from 'react';
+import { HTMLElements } from '../../types';
+export declare function AnimatedText({ variant, className, textOptions: rawTextOptions, ...sectionProps }: AnimatedText.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AnimatedText {
+    type Props = Omit<HTMLAttributes<HTMLElements['section']>, 'children' | keyof MotionProps> & {
+        variant?: Variant;
+        className?: string;
+        textOptions: string;
+    };
+    type Variant = 'typed' | 'slide-up';
+}

package/dist/client/atomic/AnimatedText.js

@@ -0,0 +1,90 @@
+'use client';
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedText = AnimatedText;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const rxjs_1 = require("rxjs");
+const hooks_1 = require("../hooks");
+// component
+function AnimatedText(_a) {
+    var _b;
+    var { variant = 'typed', className, textOptions: rawTextOptions } = _a, sectionProps = __rest(_a, ["variant", "className", "textOptions"]);
+    // bind hooks
+    const textOptions = rawTextOptions.split('|');
+    const [text, cycleText] = (0, hooks_1.useCycle)(textOptions);
+    const reducedMotion = (_b = (0, react_1.useReducedMotion)()) !== null && _b !== void 0 ? _b : false;
+    // keep cycling
+    (0, react_2.useEffect)(() => {
+        // ignore if we're in reduced motion
+        if (reducedMotion) {
+            return;
+        }
+        // use a timed animation
+        const subscription = (0, rxjs_1.interval)(5000)
+            .subscribe(() => cycleText());
+        // cancel subscription on unmount
+        return () => subscription.unsubscribe();
+    }, [reducedMotion, cycleText]);
+    // skip if reduced motion
+    if (reducedMotion) {
+        return (0, jsx_runtime_1.jsx)("span", Object.assign({ className: className }, sectionProps, { children: text }));
+    }
+    // render content based on variant
+    switch (variant) {
+        case 'typed':
+            return ((0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", children: (0, jsx_runtime_1.jsx)(react_1.motion.span, Object.assign({ className: (0, classnames_1.default)(className, 'overflow-hidden'), variants: Animations.typed, initial: "hidden", animate: "visible", exit: "hidden", "aria-hidden": true }, sectionProps, { children: text.split('').map((letter, index) => ((0, jsx_runtime_1.jsx)(react_1.motion.span, { className: "inline-block", variants: Animations.typedCharacter, "aria-hidden": true, children: letter === ' ' ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u00A0" }) : letter }, letter + '_' + index))) }), text) }));
+        case 'slide-up':
+            return ((0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, mode: "wait", children: (0, jsx_runtime_1.jsx)(react_1.motion.span, Object.assign({ className: (0, classnames_1.default)(className, 'inline-block'), variants: Animations.slideUp, initial: "hidden", animate: "visible", exit: "exit", transition: { duration: 0.25 }, "aria-hidden": true }, sectionProps, { children: text }), text) }));
+        default:
+            return (0, jsx_runtime_1.jsx)("span", { className: className, children: text });
+    }
+}
+// helpers
+const Animations = {
+    typed: {
+        hidden: {
+            opacity: 0
+        },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.08
+            }
+        }
+    },
+    typedCharacter: {
+        hidden: { opacity: 0, y: 5 },
+        visible: { opacity: 1, y: 0 }
+    },
+    slideUp: {
+        hidden: {
+            opacity: 0,
+            y: '50%'
+        },
+        visible: {
+            opacity: 1,
+            y: 0
+        },
+        exit: {
+            opacity: 0,
+            y: '-50%'
+        }
+    }
+};

package/dist/client/atomic/MaskedInput.d.ts

@@ -0,0 +1,20 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { MaskedDateOptions, MaskedDynamicOptions, MaskedPatternOptions, MaskedRangeOptions, MaskedRegExpOptions } from 'imask';
+import { InputHTMLAttributes } from 'react';
+import { HTMLElements } from '../../types';
+export declare const MaskedInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange"> & {
+    mask: MaskedInput.Mask;
+    initialValue?: string;
+    onValueChanged?: Callback<string>;
+} & import("react").RefAttributes<MaskedInput.Service>>;
+export declare namespace MaskedInput {
+    type Props = Omit<InputHTMLAttributes<HTMLElements['input']>, 'defaultValue' | 'value' | 'onChange'> & {
+        mask: Mask;
+        initialValue?: string;
+        onValueChanged?: Callback<string>;
+    };
+    type Mask = MaskedRegExpOptions | MaskedPatternOptions | MaskedDateOptions | MaskedRangeOptions | MaskedDynamicOptions;
+    interface Service {
+        setValue(value: string): void;
+    }
+}

package/dist/client/atomic/MaskedInput.js

@@ -0,0 +1,63 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaskedInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const imask_1 = require("imask");
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+// component
+exports.MaskedInput = (0, react_1.forwardRef)(function MaskedInput(_a, ref) {
+    var { mask: maskOptionsRaw, initialValue, onValueChanged = funnel_core_1.Fn.NoOp } = _a, props = __rest(_a, ["mask", "initialValue", "onValueChanged"]);
+    // bind ref + hooks
+    const [elementRef, element] = (0, hooks_1.useRefElement)();
+    const maskOptions = (0, hooks_1.useLatestValue)(maskOptionsRaw);
+    const [mask, setMask] = (0, react_1.useState)();
+    const onValueChangedRef = (0, react_1.useRef)(onValueChanged);
+    onValueChangedRef.current = onValueChanged;
+    // create mask when element + options change
+    (0, react_1.useEffect)(() => {
+        // skip if element isn't ready
+        if (!element) {
+            return;
+        }
+        // bind mask
+        const mask = new imask_1.InputMask(element, maskOptions);
+        setMask(mask);
+        // bind events
+        const onAccept = () => {
+            const onValueChanged = onValueChangedRef.current;
+            onValueChanged(mask.unmaskedValue);
+        };
+        mask.on('accept', onAccept);
+        // destroy mask
+        return () => {
+            // unbind events
+            mask.off(onAccept);
+            // destroy mask
+            mask.destroy();
+        };
+    }, [element, maskOptions]);
+    // bind service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setValue: value => {
+            if (mask) {
+                mask.unmaskedValue = value;
+                mask.updateValue();
+            }
+        }
+    }), [mask]);
+    // render
+    return ((0, jsx_runtime_1.jsx)("input", Object.assign({ ref: elementRef, defaultValue: initialValue }, props)));
+});

package/dist/client/atomic/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AnimatedText';
+export * from './MaskedInput';

package/dist/client/atomic/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AnimatedText"), exports);
+__exportStar(require("./MaskedInput"), exports);

package/dist/client/fields/EmbeddedVideo/EmbeddedPlayer.d.ts

@@ -0,0 +1,36 @@
+import { Language } from '@nascentdigital/funnel-core';
+import { Observable } from 'rxjs';
+export interface EmbeddedPlayer {
+    readonly elementId: string;
+    target: EmbeddedPlayer.Target;
+    readonly videoUrl: URL;
+    readonly language: Language;
+    readonly background: boolean;
+    readonly state$: Observable<EmbeddedPlayer.State>;
+    readonly state: EmbeddedPlayer.State;
+    readonly ready: boolean;
+    readonly started: boolean;
+    readonly muted$: Observable<boolean>;
+    readonly muted: boolean;
+    readonly hasCaptions: boolean;
+    readonly captions$: Observable<boolean>;
+    readonly captions: boolean;
+    readonly duration: number;
+    readonly currentTime: number;
+    initialize(): void;
+    destroy(): void;
+    play(): void;
+    seekTo(timeInSeconds: number): void;
+    pause(): void;
+    mute(): void;
+    unmute(): void;
+    captionsOn(): void;
+    captionsOff(): void;
+}
+export declare namespace EmbeddedPlayer {
+    type Target = {
+        videoId: string;
+        hash?: string;
+    };
+    type State = 'uninitialized' | 'initializing' | 'initialized' | 'playing' | 'paused' | 'ended' | 'error' | 'destroyed';
+}

package/dist/client/fields/EmbeddedVideo/EmbeddedPlayer.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/client/fields/EmbeddedVideo/EmbeddedVideo.d.ts

@@ -0,0 +1,13 @@
+import { Language, Schema } from '@nascentdigital/funnel-core';
+import { EmbeddedPlayer } from './EmbeddedPlayer';
+export declare const EmbeddedVideo: import("react").ForwardRefExoticComponent<EmbeddedVideo.Props & import("react").RefAttributes<EmbeddedPlayer>>;
+export declare namespace EmbeddedVideo {
+    type Props = {
+        className?: string;
+        video?: Schema.EmbeddedVideoField.Value;
+        language?: Language;
+        background?: boolean;
+        muted?: boolean;
+        disableControls?: boolean;
+    };
+}

package/dist/client/fields/EmbeddedVideo/EmbeddedVideo.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmbeddedVideo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const vimeo_1 = require("./vimeo");
+const youtube_1 = require("./youtube");
+// component
+exports.EmbeddedVideo = (0, react_1.forwardRef)(function EmbeddedVideo({ className, video, language, muted, background = false, disableControls = false }, ref) {
+    // skip if there's no video
+    if (!video) {
+        return null;
+    }
+    // render youtube
+    else if (video.type === 'youtube') {
+        return ((0, jsx_runtime_1.jsx)(youtube_1.YoutubeVideo, { ref: ref, className: className, video: video, language: language, muted: muted || video.muted, background: background, disableControls: disableControls }));
+    }
+    // render vimeo
+    else {
+        return ((0, jsx_runtime_1.jsx)(vimeo_1.VimeoVideo, { ref: ref, className: className, video: video, language: language, muted: muted || video.muted, background: background, disableControls: disableControls }));
+    }
+});

package/dist/client/fields/EmbeddedVideo/EmbeddedVideoContainer.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+export declare function EmbeddedVideoContainer({ nativeYoutube, children }: EmbeddedVideoContainer.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace EmbeddedVideoContainer {
+    type Props = PropsWithChildren & {
+        nativeYoutube?: boolean;
+    };
+}

package/dist/client/fields/EmbeddedVideo/EmbeddedVideoContainer.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmbeddedVideoContainer = EmbeddedVideoContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const script_1 = __importDefault(require("next/script"));
+const react_1 = require("react");
+const EmbeddedVideoContext_1 = require("./EmbeddedVideoContext");
+// component
+function EmbeddedVideoContainer({ nativeYoutube = false, children }) {
+    // bind context
+    const [context, setContext] = (0, react_1.useState)(() => (Object.assign(Object.assign({}, EmbeddedVideoContext_1.EMBEDDED_VIDEO_CONTEXT_DEFAULTS), { youtubeHack: !nativeYoutube })));
+    // mount callback for when youtube is ready
+    (0, react_1.useEffect)(() => {
+        window.onYouTubeIframeAPIReady = () => {
+            console.debug('[EmbeddedVideoContainer] youtube frame api is ready');
+            setContext(context => (Object.assign(Object.assign({}, context), { youtubeReady: true })));
+        };
+    }, []);
+    // render
+    return ((0, jsx_runtime_1.jsxs)(EmbeddedVideoContext_1.EmbeddedVideoContext.Provider, { value: context, children: [(0, jsx_runtime_1.jsx)(script_1.default, { src: "https://www.youtube.com/iframe_api", strategy: "afterInteractive" }), children] }));
+}

package/dist/client/fields/EmbeddedVideo/EmbeddedVideoContext.d.ts

@@ -0,0 +1,8 @@
+export declare const EMBEDDED_VIDEO_CONTEXT_DEFAULTS: EmbeddedVideoContext.Data;
+export declare const EmbeddedVideoContext: import("react").Context<EmbeddedVideoContext.Data>;
+export declare namespace EmbeddedVideoContext {
+    type Data = {
+        youtubeReady: boolean;
+        youtubeHack: boolean;
+    };
+}

package/dist/client/fields/EmbeddedVideo/EmbeddedVideoContext.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmbeddedVideoContext = exports.EMBEDDED_VIDEO_CONTEXT_DEFAULTS = void 0;
+const react_1 = require("react");
+// defaults
+exports.EMBEDDED_VIDEO_CONTEXT_DEFAULTS = {
+    youtubeReady: false,
+    youtubeHack: true
+};
+// context
+exports.EmbeddedVideoContext = (0, react_1.createContext)(exports.EMBEDDED_VIDEO_CONTEXT_DEFAULTS);

package/dist/client/fields/EmbeddedVideo/index.d.ts

@@ -0,0 +1,4 @@
+export * from './EmbeddedVideo';
+export * from './EmbeddedVideoContainer';
+export * from './useEmbeddedPlayerProgress';
+export * from './useEmbeddedPlayerRef';

package/dist/client/fields/EmbeddedVideo/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./EmbeddedVideo"), exports);
+__exportStar(require("./EmbeddedVideoContainer"), exports);
+__exportStar(require("./useEmbeddedPlayerProgress"), exports);
+__exportStar(require("./useEmbeddedPlayerRef"), exports);

package/dist/client/fields/EmbeddedVideo/useEmbeddedPlayerProgress.d.ts

@@ -0,0 +1,10 @@
+import { EmbeddedPlayer } from './EmbeddedPlayer';
+export declare function useEmbeddedPlayerProgress(player: EmbeddedPlayer | null): Readonly<useEmbeddedPlayerProgress.Progress>;
+export declare namespace useEmbeddedPlayerProgress {
+    type Progress = {
+        currentTime: number;
+        currentTimeLabel: string;
+        duration: number;
+        durationLabel: string;
+    };
+}

package/dist/client/fields/EmbeddedVideo/useEmbeddedPlayerProgress.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEmbeddedPlayerProgress = useEmbeddedPlayerProgress;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+// hook
+function useEmbeddedPlayerProgress(player) {
+    // bind state
+    const [progress, setProgress] = (0, react_1.useState)(PROGRESS_UNKNOWN);
+    const [active, setActive] = (0, react_1.useState)(false);
+    // activate when playing
+    (0, react_1.useEffect)(() => {
+        // skip if there's no player
+        if (!player) {
+            setActive(false);
+            return;
+        }
+        // track player state
+        const subscription = player.state$.subscribe(state => {
+            setActive(state === 'playing');
+        });
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [player]);
+    // track player progress
+    (0, react_1.useEffect)(() => {
+        // skip if there's no player
+        if (!player) {
+            setProgress(PROGRESS_UNKNOWN);
+            return;
+        }
+        // or skip if not active
+        else if (!active) {
+            return;
+        }
+        // sync progress now
+        const syncProgress = () => {
+            const { currentTime, duration } = player;
+            setProgress({
+                currentTime,
+                currentTimeLabel: currentTime < 0
+                    ? TIME_UNKNOWN_LABEL
+                    : funnel_core_1.Duration.formatSeconds(currentTime),
+                duration,
+                durationLabel: duration < 0
+                    ? TIME_UNKNOWN_LABEL
+                    : funnel_core_1.Duration.formatSeconds(duration)
+            });
+        };
+        // sync on interval
+        const subscription = (0, rxjs_1.interval)(1000).subscribe(syncProgress);
+        // destroy on unmount
+        return () => subscription.unsubscribe();
+    }, [player, active]);
+    // return progress
+    return progress;
+}
+// default progress
+const TIME_UNKNOWN_LABEL = '00:00';
+const PROGRESS_UNKNOWN = {
+    currentTime: -1,
+    currentTimeLabel: TIME_UNKNOWN_LABEL,
+    duration: -1,
+    durationLabel: TIME_UNKNOWN_LABEL,
+};

package/dist/client/fields/EmbeddedVideo/useEmbeddedPlayerRef.d.ts

@@ -0,0 +1,9 @@
+import { RefCallback } from 'react';
+import { EmbeddedPlayer } from './EmbeddedPlayer';
+export declare function useEmbeddedPlayerRef(): useEmbeddedPlayerRef.Service;
+export declare namespace useEmbeddedPlayerRef {
+    type Service = {
+        ref: RefCallback<EmbeddedPlayer>;
+        player: EmbeddedPlayer | null;
+    };
+}

package/dist/client/fields/EmbeddedVideo/useEmbeddedPlayerRef.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEmbeddedPlayerRef = useEmbeddedPlayerRef;
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+// hook
+function useEmbeddedPlayerRef() {
+    // bind state + hooks
+    const [player, setPlayer] = (0, react_1.useState)(null);
+    const ref = (0, react_1.useCallback)((player) => setPlayer(player), []);
+    const touch = (0, hooks_1.useTouch)();
+    // watch player
+    (0, react_1.useEffect)(() => {
+        // skip if there's no player
+        if (!player) {
+            return;
+        }
+        // subscribe to changes
+        const subscriptions = [
+            player.state$.subscribe(touch),
+            player.muted$.subscribe(touch),
+            player.captions$.subscribe(touch)
+        ];
+        // unsubscribe on unmount
+        return () => subscriptions.forEach(subscription => subscription.unsubscribe());
+    }, [touch, player]);
+    // return
+    return { ref, player };
+}