@nascentdigital/funnel-ui 4.4.18

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

@@ -0,0 +1,63 @@
+import { Language } from '@nascentdigital/funnel-core';
+import { EmbeddedPlayer } from '../EmbeddedPlayer';
+export declare class VimeoPlayer implements EmbeddedPlayer {
+    readonly elementId: string;
+    private _target;
+    private _videoUrl;
+    readonly language: Language;
+    readonly background: boolean;
+    private readonly _state$;
+    private readonly _muted$;
+    private readonly _captions$;
+    private _hasCaptions?;
+    private _player?;
+    private _started;
+    private _duration;
+    private _currentTime;
+    constructor({ elementId, language, muted, background, ...target }: VimeoPlayer.ConstructorArgs);
+    get state$(): import("rxjs").Observable<EmbeddedPlayer.State>;
+    get state(): EmbeddedPlayer.State;
+    private set state(value);
+    get muted$(): import("rxjs").Observable<boolean>;
+    get muted(): boolean;
+    private set muted(value);
+    get captions$(): import("rxjs").Observable<boolean>;
+    get captions(): boolean;
+    private set captions(value);
+    get hasCaptions(): boolean;
+    get duration(): number;
+    get currentTime(): number;
+    get ready(): boolean;
+    get started(): boolean;
+    get target(): EmbeddedPlayer.Target;
+    set target(target: EmbeddedPlayer.Target);
+    get videoUrl(): URL;
+    private get player();
+    initialize(): void;
+    destroy(): void;
+    play(): void;
+    seekTo(timeInSeconds: number): void;
+    pause(): void;
+    mute(): void;
+    unmute(): void;
+    captionsOn(): void;
+    captionsOff(): void;
+    private syncTime;
+    private onPlay;
+    private onPlaying;
+    private onProgress;
+    private onPause;
+    private onEnded;
+    private onVolumeChange;
+    private onError;
+}
+export declare namespace VimeoPlayer {
+    type ConstructorArgs = {
+        elementId: string;
+        videoId: string;
+        hash?: string;
+        language: Language;
+        muted?: boolean;
+        background?: boolean;
+    };
+}

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

@@ -0,0 +1,326 @@
+"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.VimeoPlayer = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const player_1 = __importDefault(require("@vimeo/player"));
+const rxjs_1 = require("rxjs");
+// class
+class VimeoPlayer {
+    constructor(_a) {
+        var { elementId, language, muted, background = false } = _a, target = __rest(_a, ["elementId", "language", "muted", "background"]);
+        // initialize instance variables
+        this.elementId = elementId;
+        this._target = target;
+        this._videoUrl = getVideoUrl(target);
+        this.language = language;
+        this.background = background;
+        this._state$ = new rxjs_1.BehaviorSubject('uninitialized');
+        this._muted$ = new rxjs_1.BehaviorSubject(muted || background);
+        this._captions$ = new rxjs_1.BehaviorSubject(false);
+        this._started = false;
+        this._duration = -1;
+        this._currentTime = -1;
+        // bind methods
+        this.onPlay = this.onPlay.bind(this);
+        this.onPlaying = this.onPlaying.bind(this);
+        this.onProgress = this.onProgress.bind(this);
+        this.onPause = this.onPause.bind(this);
+        this.onEnded = this.onEnded.bind(this);
+        this.onVolumeChange = this.onVolumeChange.bind(this);
+        this.onError = this.onError.bind(this);
+    }
+    get state$() {
+        return this._state$.asObservable();
+    }
+    get state() {
+        return this._state$.value;
+    }
+    set state(state) {
+        this._state$.next(state);
+    }
+    get muted$() {
+        return this._muted$.asObservable();
+    }
+    get muted() {
+        return this._muted$.value;
+    }
+    set muted(muted) {
+        this._muted$.next(muted);
+    }
+    get captions$() {
+        return this._captions$.asObservable();
+    }
+    get captions() {
+        return this._captions$.value;
+    }
+    set captions(captions) {
+        this._captions$.next(captions);
+    }
+    get hasCaptions() {
+        var _a;
+        return (_a = this._hasCaptions) !== null && _a !== void 0 ? _a : false;
+    }
+    get duration() {
+        return this._duration;
+    }
+    get currentTime() {
+        return this._currentTime;
+    }
+    get ready() {
+        const { state } = this;
+        return state !== 'uninitialized' && state !== 'initializing' && state !== 'destroyed';
+    }
+    get started() {
+        return this._started;
+    }
+    get target() {
+        return this._target;
+    }
+    set target(target) {
+        // skip if the same
+        if (funnel_core_1.Value.equals(target, this._target)) {
+            return;
+        }
+        // update video
+        this._target = target;
+        this._videoUrl = getVideoUrl(target);
+        // TODO: switch videos
+        throw new funnel_core_1.NotImplementedError();
+    }
+    get videoUrl() {
+        return this._videoUrl;
+    }
+    get player() {
+        // throw if not bound
+        const { _player } = this;
+        if (!_player) {
+            throw new funnel_core_1.InvalidOperationError('Cannot access VimeoPlayer before calling initialize()');
+        }
+        // return player
+        return _player;
+    }
+    initialize() {
+        // throw if already initialized
+        if (this.state !== 'uninitialized' || this._player) {
+            throw new funnel_core_1.InvalidOperationError('Attempt to invoke initialize() multiple times');
+        }
+        // mark as initializing
+        this.state = 'initializing';
+        // create player
+        const { elementId, _videoUrl, language, muted, background } = this;
+        const player = new player_1.default(elementId, {
+            url: _videoUrl.href,
+            controls: false,
+            title: false,
+            quality: '2k',
+            initial_quality: '2k',
+            muted: muted,
+            autoplay: background,
+            transparent: true
+        });
+        this._player = player;
+        // wire events
+        player.on('play', this.onPlay);
+        player.on('playing', this.onPlaying);
+        player.on('timeupdate', this.onProgress);
+        player.on('pause', this.onPause);
+        player.on('ended', this.onEnded);
+        player.on('volumechange', this.onVolumeChange);
+        player.on('error', this.onError);
+        // wait for readiness, then update
+        player.ready()
+            .then(async () => {
+            // set background
+            if (!muted) {
+                await player.setVolume(1);
+            }
+            // determine if there are captions
+            const tracks = await player.getTextTracks();
+            this._hasCaptions = tracks.some(track => track.language === language);
+            // mark initialized
+            this.state = 'initialized';
+        })
+            .catch(this.onError);
+    }
+    destroy() {
+        // update state
+        const { player } = this;
+        this.state = 'destroyed';
+        // unwire
+        player.off('play', this.onPlay);
+        player.off('playing', this.onPlaying);
+        player.off('timeupdate', this.onProgress);
+        player.off('pause', this.onPause);
+        player.off('ended', this.onEnded);
+        player.off('volumechange', this.onVolumeChange);
+        player.off('error', this.onError);
+        // destroy
+        player.destroy().catch(console.error);
+    }
+    play() {
+        // verify state
+        const { player, state } = this;
+        switch (state) {
+            // prevent play from invalid state
+            case 'uninitialized':
+            case 'initializing':
+            case 'destroyed':
+                console.warn('[VimeoPlayer] cannot play from state:', state);
+                break;
+            // play if paused
+            case 'initialized':
+            case 'paused':
+                this.state = 'playing';
+                player.play()
+                    .catch(this.onError);
+                break;
+            // restart if ended
+            case 'ended':
+                this.state = 'playing';
+                player.setCurrentTime(0)
+                    .then(() => {
+                    // skip if interrupted
+                    if (this.state !== 'playing') {
+                        return;
+                    }
+                    // start play
+                    return player.play();
+                })
+                    .catch(this.onError);
+                break;
+            // or ignore
+            default:
+                console.debug('[VimeoPlayer] ignoring play from state:', state);
+                break;
+        }
+    }
+    seekTo(timeInSeconds) {
+        // verify state
+        const { player, state, duration } = this;
+        switch (state) {
+            // prevent pause from invalid state
+            case 'uninitialized':
+            case 'initializing':
+            case 'destroyed':
+                console.warn('[VimeoPlayer] cannot seek from state:', state);
+                return;
+            // pause if playing
+            default: {
+                const normalizedTime = Math.min(Math.max(0, timeInSeconds), duration);
+                player.setCurrentTime(normalizedTime).catch(this.onError);
+                return;
+            }
+        }
+    }
+    pause() {
+        // verify state
+        const { player, state } = this;
+        switch (state) {
+            // prevent pause from invalid state
+            case 'uninitialized':
+            case 'initializing':
+            case 'destroyed':
+                console.warn('[VimeoPlayer] cannot pause from state:', state);
+                return;
+            // pause if playing
+            case 'playing':
+                this.state = 'paused';
+                player.pause().catch(this.onError);
+                return;
+            // or ignore
+            default:
+                console.debug('[VimeoPlayer] ignoring pause from state:', state);
+                break;
+        }
+    }
+    mute() {
+        // update state
+        this.muted = true;
+        // update mute
+        this.player.setMuted(true).catch(this.onError);
+    }
+    unmute() {
+        // update state
+        this.muted = false;
+        // update mute
+        this.player.setMuted(false).catch(this.onError);
+    }
+    captionsOn() {
+        // ignore if there are not captions
+        const { language, _hasCaptions } = this;
+        if (!_hasCaptions) {
+            console.warn(`[VimeoPlayer] video does not support "${language}" captions`);
+            return;
+        }
+        // update state
+        this.captions = true;
+        // enable captions
+        this.player.enableTextTrack(language).catch(this.onError);
+    }
+    captionsOff() {
+        // update state
+        this.captions = false;
+        // disable captions
+        this.player.disableTextTrack().catch(this.onError);
+    }
+    syncTime() {
+        var _a;
+        (_a = this._player) === null || _a === void 0 ? void 0 : _a.getCurrentTime().then(time => this._currentTime = time);
+    }
+    onPlay(event) {
+        this._duration = event.duration;
+        this.syncTime();
+        this.state = 'playing';
+    }
+    onPlaying(event) {
+        this._started = true;
+        this._duration = event.duration;
+        this.syncTime();
+        this.state = 'playing';
+    }
+    onProgress(event) {
+        this._duration = event.duration;
+        this.syncTime();
+    }
+    onPause(event) {
+        this._duration = event.duration;
+        this.syncTime();
+        this.state = 'paused';
+    }
+    onEnded(event) {
+        this._duration = event.duration;
+        this.syncTime();
+        this.state = 'ended';
+    }
+    onVolumeChange({ muted }) {
+        this.muted = muted;
+    }
+    onError(e) {
+        console.error('[VimeoPlayer/onError]', e);
+        this.state = 'error';
+    }
+}
+exports.VimeoPlayer = VimeoPlayer;
+// helpers
+function getVideoUrl({ videoId, hash }) {
+    const url = new URL(`https://player.vimeo.com/video/${videoId}`);
+    const params = url.searchParams;
+    if (hash) {
+        params.append('h', hash);
+    }
+    return url;
+}

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

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

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

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VimeoVideo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const hooks_1 = require("../../../hooks");
+const VimeoPlayer_1 = require("./VimeoPlayer");
+// component
+exports.VimeoVideo = (0, react_1.forwardRef)(function VimeoVideo({ className, video, language = 'en', muted, background = false, disableControls = false }, ref) {
+    // bind state
+    const { videoId, thumbUrl, hash } = video;
+    const elementId = (0, react_1.useId)();
+    const touch = (0, hooks_1.useTouch)();
+    const player = (0, react_1.useMemo)(() => new VimeoPlayer_1.VimeoPlayer({ elementId, videoId, hash, language, muted, background }), [elementId, videoId, hash, language, muted, background]);
+    const { state, ready, started } = player;
+    // bind ref
+    (0, react_1.useImperativeHandle)(ref, () => player, [player]);
+    // mount player when ready
+    (0, react_1.useEffect)(() => {
+        // watch player
+        const subscription = player.state$.subscribe(touch);
+        // initialize player
+        player.initialize();
+        // destroy on unmount
+        return () => {
+            subscription.unsubscribe();
+            player.destroy();
+        };
+    }, [player, touch]);
+    // helpers
+    const onOverlayClick = () => {
+        // skip if already started
+        if (!ready) {
+            console.debug('[VimeoVideo/onStart] ignore start before ready');
+            return;
+        }
+        // start video
+        switch (player.state) {
+            case 'initialized':
+            case 'paused':
+            case 'ended':
+                player.play();
+                break;
+            case 'playing':
+                player.pause();
+                break;
+        }
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-VimeoPlayer', {
+            'nd-VimeoPlayer-ready': ready,
+            'nd-VimeoPlayer-started': started,
+            'nd-VimeoPlayer-playing': state === 'playing',
+            'nd-VimeoPlayer-noControls': disableControls || background
+        }), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-VimeoPlayer-container", children: [(0, jsx_runtime_1.jsx)("img", { className: "nd-VimeoPlayer-thumbnail", src: thumbUrl, alt: "Video thumbnail", draggable: false, onClick: disableControls || background ? undefined : onOverlayClick }), (0, jsx_runtime_1.jsx)("div", { id: elementId, className: "nd-VimeoPlayer-player" })] }) }));
+});

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

@@ -0,0 +1 @@
+export * from './VimeoVideo';

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

@@ -0,0 +1,17 @@
+"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("./VimeoVideo"), exports);

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

@@ -0,0 +1,92 @@
+import { Callback, Language } from '@nascentdigital/funnel-core';
+import { Constructor } from 'type-fest';
+declare global {
+    export namespace YT {
+        const Player: Constructor<YTApi.Player, [string, YTApi.Options]>;
+    }
+}
+export declare namespace YTApi {
+    interface Player {
+        getVideoLoadedFraction(): number;
+        getPlayerState(): State;
+        getCurrentTime(): number;
+        getDuration(): number;
+        getVideoUrl(): string;
+        getVideoEmbedCode(): string;
+        playVideo(): void;
+        pauseVideo(): void;
+        stopVideo(): void;
+        nextVideo(): void;
+        previousVideo(): void;
+        playVideoAt(index: number): void;
+        setLoop(loop: boolean): void;
+        setShuffle(shuffle: boolean): void;
+        getAvailablePlaybackRates(): number[];
+        getPlaybackRate(): number;
+        setPlaybackRate(rate: number): void;
+        isMuted(): boolean;
+        mute(): void;
+        unMute(): void;
+        getVolume(): number;
+        setVolume(volume: number): void;
+        seekTo(seconds: number, allowSeekAhead: boolean): void;
+        getOptions(module?: string): string[];
+        setOption(module: string, option: string, value?: any): void;
+        getIframe(): HTMLIFrameElement;
+        destroy(): void;
+    }
+    type Options = {
+        width?: string;
+        height?: string;
+        videoId: string;
+        playerVars: PlayerVars;
+        events?: Events;
+    };
+    type PlayerVars = {
+        autoplay?: 0 | 1;
+        mute?: 0 | 1;
+        cc_lang_pref?: Language;
+        cc_load_policy?: 0 | 1 | 3;
+        color?: 'white' | 'red';
+        controls?: 0 | 1;
+        disablekb?: 0 | 1;
+        enablejsapi?: 0 | 1;
+        fs?: 0 | 1;
+        hl?: Language;
+        iv_load_policy?: 1 | 3;
+        loop?: 0 | 1;
+        origin?: string;
+        rel?: 0 | 1;
+        playlist?: string;
+        playsinline?: 0 | 1;
+        showinfo?: 0 | 1;
+    };
+    type Event = {
+        target: Player;
+    };
+    type EventWithData<T> = Event & {
+        data: T;
+    };
+    type Events = {
+        onReady?: Callback<Event>;
+        onStateChange?: Callback<EventWithData<State>>;
+        onError?: Callback<EventWithData<Error>>;
+        onAutoplayBlocked?: Callback<Event>;
+    };
+    enum State {
+        unstarted = -1,
+        ended = 0,
+        playing = 1,
+        paused = 2,
+        buffering = 3,
+        cued = 5
+    }
+    enum Error {
+        invalid_params = 2,
+        html5 = 5,
+        not_found = 100,
+        not_allowed = 101,
+        not_allowed_alt = 150,
+        no_referred = 153
+    }
+}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YTApi = void 0;
+var YTApi;
+(function (YTApi) {
+    let State;
+    (function (State) {
+        State[State["unstarted"] = -1] = "unstarted";
+        State[State["ended"] = 0] = "ended";
+        State[State["playing"] = 1] = "playing";
+        State[State["paused"] = 2] = "paused";
+        State[State["buffering"] = 3] = "buffering";
+        State[State["cued"] = 5] = "cued";
+    })(State = YTApi.State || (YTApi.State = {}));
+    let Error;
+    (function (Error) {
+        Error[Error["invalid_params"] = 2] = "invalid_params";
+        Error[Error["html5"] = 5] = "html5";
+        Error[Error["not_found"] = 100] = "not_found";
+        Error[Error["not_allowed"] = 101] = "not_allowed";
+        Error[Error["not_allowed_alt"] = 150] = "not_allowed_alt";
+        Error[Error["no_referred"] = 153] = "no_referred";
+    })(Error = YTApi.Error || (YTApi.Error = {}));
+})(YTApi || (exports.YTApi = YTApi = {}));

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

@@ -0,0 +1,56 @@
+import { Language } from '@nascentdigital/funnel-core';
+import { EmbeddedPlayer } from '../EmbeddedPlayer';
+export declare class YoutubePlayer implements EmbeddedPlayer {
+    readonly elementId: string;
+    private _target;
+    private _videoUrl;
+    readonly language: Language;
+    readonly background: boolean;
+    private readonly _state$;
+    private readonly _muted$;
+    private readonly _captions$;
+    private _hasCaptions?;
+    private _player?;
+    private _started;
+    constructor({ elementId, language, muted, background, ...target }: YoutubePlayer.ConstructorArgs);
+    get state$(): import("rxjs").Observable<EmbeddedPlayer.State>;
+    get state(): EmbeddedPlayer.State;
+    private set state(value);
+    get muted$(): import("rxjs").Observable<boolean>;
+    get muted(): boolean;
+    private set muted(value);
+    get captions$(): import("rxjs").Observable<boolean>;
+    get captions(): boolean;
+    private set captions(value);
+    get hasCaptions(): boolean;
+    get ready(): boolean;
+    get started(): boolean;
+    get target(): EmbeddedPlayer.Target;
+    set target(target: EmbeddedPlayer.Target);
+    get videoUrl(): URL;
+    get duration(): number;
+    get currentTime(): number;
+    private get player();
+    initialize(): void;
+    play(): void;
+    seekTo(timeInSeconds: number): void;
+    pause(): void;
+    mute(): void;
+    unmute(): void;
+    captionsOn(): void;
+    captionsOff(): void;
+    destroy(): void;
+    private onReady;
+    private onStateChange;
+    private onError;
+    private onAutoplayBlocked;
+}
+export declare namespace YoutubePlayer {
+    type ConstructorArgs = {
+        elementId: string;
+        videoId: string;
+        language: Language;
+        muted?: boolean;
+        background?: boolean;
+    };
+}