@nascentdigital/funnel-core 4.4.4

package/dist/ui/browser/VideoProxy.js

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlobVideoProxy = exports.ElementVideoProxy = exports.VideoProxy = void 0;
+const rxjs_1 = require("rxjs");
+const errors_1 = require("../../errors");
+const BlurHasher_1 = require("./BlurHasher");
+// base
+class VideoProxy {
+    constructor(video) {
+        this.video = video;
+        // initialize instance variables
+        this._state$ = new rxjs_1.BehaviorSubject('uninitialized');
+        // bind methods (helps with callbacks)
+        this.onLoadData = this.onLoadData.bind(this);
+        this.onError = this.onError.bind(this);
+        this.onPlay = this.onPlay.bind(this);
+        this.onSeeking = this.onSeeking.bind(this);
+        this.onSeeked = this.onSeeked.bind(this);
+        this.onPause = this.onPause.bind(this);
+        // add listeners
+        video.addEventListener('loadeddata', this.onLoadData);
+        video.addEventListener('canplay', this.onLoadData);
+        video.addEventListener('canplaythrough', this.onLoadData);
+        video.addEventListener('error', this.onError);
+        video.addEventListener('play', this.onPlay);
+        video.addEventListener('pause', this.onPause);
+        video.addEventListener('seeking', this.onSeeking);
+        video.addEventListener('seeked', this.onSeeked);
+        // check current state
+        this.state = video.error
+            ? 'error'
+            : video.readyState < HTMLMediaElement.HAVE_ENOUGH_DATA
+                ? 'loading'
+                : video.seeking
+                    ? 'seeking'
+                    : video.paused
+                        ? 'ready'
+                        : 'playing';
+    }
+    get state$() {
+        return this._state$.asObservable();
+    }
+    get state() {
+        return this._state$.getValue();
+    }
+    set state(state) {
+        // ignore if disposed
+        const { _state$ } = this;
+        const prevState = this.state;
+        if (prevState === 'disposed') {
+            return;
+        }
+        // update
+        _state$.next(state);
+    }
+    get loaded() {
+        switch (this.state) {
+            case 'ready':
+            case 'playing':
+            case 'seeking':
+                return true;
+            default:
+                return false;
+        }
+    }
+    get intrinsicSize() {
+        // throw if not ready
+        const { video, loaded } = this;
+        if (!loaded) {
+            throw new errors_1.InvalidOperationError('Cannot access size of unloaded video');
+        }
+        // return image size
+        return {
+            width: video.videoWidth,
+            height: video.videoHeight
+        };
+    }
+    get duration() {
+        // throw if not ready
+        const { video, loaded } = this;
+        if (!loaded) {
+            throw new errors_1.InvalidOperationError('Cannot access duration of unloaded video');
+        }
+        // return duration
+        return video.duration;
+    }
+    waitUntil(...states) {
+        return (0, rxjs_1.firstValueFrom)(this._state$.pipe((0, rxjs_1.filter)(state => states.includes(state))));
+    }
+    async waitUntilReady() {
+        // wait for ready/error
+        const state = await this.waitUntil('ready', 'error', 'disposed');
+        // throw if error
+        if (state === 'error') {
+            throw new errors_1.NotAvailableError('Video could not be loaded');
+        }
+    }
+    async seek(positionInSeconds) {
+        // ensure initialization is done
+        const { video, loaded } = this;
+        if (!loaded) {
+            await this.waitUntilReady();
+        }
+        // skip if already at that position
+        if (video.currentTime === positionInSeconds) {
+            return;
+        }
+        // seek to new position
+        video.currentTime = positionInSeconds;
+        this.state = 'seeking';
+        // wait for seek to complete
+        await this.waitUntilReady();
+    }
+    async play({ playbackRate = 1, loop = false } = {}) {
+        // ensure initialization is done
+        const { video, loaded } = this;
+        if (!loaded) {
+            await this.waitUntilReady();
+        }
+        // set options
+        video.playbackRate = playbackRate;
+        video.loop = loop;
+        // play if required
+        if (video.paused) {
+            // play video
+            await video.play();
+        }
+    }
+    async pause() {
+        // ensure initialization is done
+        const { video, loaded } = this;
+        if (!loaded) {
+            await this.waitUntilReady();
+        }
+        // pause if required
+        if (!video.paused) {
+            video.pause();
+        }
+    }
+    async getBlurHash() {
+        // return hash if already computed
+        const { video, _blurHash } = this;
+        if (_blurHash) {
+            return _blurHash;
+        }
+        // ensure initialization is done
+        if (!this.loaded) {
+            await this.waitUntilReady();
+        }
+        // create hash
+        this._blurHash = BlurHasher_1.BlurHasher.createHash(video);
+        // return has
+        return this._blurHash;
+    }
+    dispose() {
+        // mark disposed
+        this._state$.next('disposed');
+        // remove listeners
+        const { video } = this;
+        video.removeEventListener('loadeddata', this.onLoadData);
+        video.removeEventListener('canplay', this.onLoadData);
+        video.removeEventListener('canplaythrough', this.onLoadData);
+        video.removeEventListener('error', this.onError);
+        video.removeEventListener('play', this.onPlay);
+        video.removeEventListener('pause', this.onPause);
+        video.removeEventListener('seeking', this.onSeeking);
+        video.removeEventListener('seeked', this.onSeeked);
+    }
+    onLoadData() {
+        // skip if not ready
+        const { video } = this;
+        if (video.readyState < HTMLMediaElement.HAVE_ENOUGH_DATA) {
+            return;
+        }
+        // mark loaded
+        this.state = video.paused
+            ? 'ready'
+            : 'playing';
+    }
+    onError() {
+        this.state = 'error';
+    }
+    onPlay() {
+        this.state = 'playing';
+    }
+    onSeeking() {
+        this.state = 'seeking';
+    }
+    onSeeked() {
+        this.state = this.video.readyState < HTMLMediaElement.HAVE_ENOUGH_DATA
+            ? 'loading'
+            : 'ready';
+    }
+    onPause() {
+        this.state = this.video.readyState < HTMLMediaElement.HAVE_ENOUGH_DATA
+            ? 'loading'
+            : 'ready';
+    }
+}
+exports.VideoProxy = VideoProxy;
+// element
+class ElementVideoProxy extends VideoProxy {
+    constructor(video) {
+        super(video);
+    }
+}
+exports.ElementVideoProxy = ElementVideoProxy;
+// blob
+class BlobVideoProxy extends VideoProxy {
+    constructor(blob) {
+        // create hidden video and load blob
+        const video = document.createElement('video');
+        const src = URL.createObjectURL(blob);
+        video.src = src;
+        const style = video.style;
+        style.position = 'absolute';
+        style.pointerEvents = 'none';
+        style.opacity = '0';
+        // construct base
+        super(video);
+        this.blob = blob;
+        // initialize instance variables
+        this._src = src;
+    }
+    dispose() {
+        // call base
+        super.dispose();
+        // revoke src
+        const { video, _src } = this;
+        URL.revokeObjectURL(_src);
+        // clean up dom
+        video.remove();
+    }
+}
+exports.BlobVideoProxy = BlobVideoProxy;

package/dist/ui/browser/index.d.ts

@@ -0,0 +1,6 @@
+export * from './BlurHasher';
+export * from './Browser';
+export * from './ImageProxy';
+export * from './InputEvent';
+export * from './SVGProxy';
+export * from './VideoProxy';

package/dist/ui/browser/index.js

@@ -0,0 +1,22 @@
+"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("./BlurHasher"), exports);
+__exportStar(require("./Browser"), exports);
+__exportStar(require("./ImageProxy"), exports);
+__exportStar(require("./InputEvent"), exports);
+__exportStar(require("./SVGProxy"), exports);
+__exportStar(require("./VideoProxy"), exports);

package/dist/ui/fields/Field.d.ts

@@ -0,0 +1,80 @@
+import { Observable } from 'rxjs';
+import * as Schema from '../../schema';
+import { EventBus } from '../../services';
+import { FieldValidator } from './FieldValidator';
+export declare class Field<TSchema extends Schema.Field.Type = Schema.Field.Type> {
+    private readonly eventBus;
+    readonly schema: TSchema;
+    readonly id: string;
+    readonly name: string;
+    readonly required: boolean;
+    private readonly publishedValue;
+    private _initialValue;
+    private _value;
+    private _editing;
+    private _sandboxed;
+    private _sandboxedValue;
+    private readonly _validator;
+    private _errors;
+    private _optIn?;
+    private _optOut?;
+    private _shouldFocus?;
+    constructor(args: Field.ConstructorArgs<TSchema>);
+    get events$(): Observable<Field.Event>;
+    get isComposite(): boolean;
+    get exists(): boolean;
+    get valid(): boolean;
+    get error(): FieldValidator.Error | undefined;
+    getErrors(level: FieldValidator.Error.Level): readonly FieldValidator.Error[];
+    get errors(): ReadonlyArray<FieldValidator.Error>;
+    get defaultValue(): Field.Value<TSchema> | undefined;
+    get initialValue(): Field.Value<TSchema> | undefined;
+    get hasValue(): boolean;
+    get value(): Field.Value<TSchema> | undefined;
+    set value(value: Field.Value<TSchema> | undefined);
+    coerceValue(value: Field.Value<TSchema> | undefined): void;
+    get modified(): boolean;
+    get changed(): boolean;
+    get editing(): boolean;
+    set editing(editing: boolean);
+    get sandboxed(): boolean;
+    sandbox(): void;
+    commit(): void;
+    rollback(): void;
+    get canOptOut(): boolean;
+    optIn(): void;
+    optOut(): void;
+    get shouldFocus(): boolean;
+    didFocus(): void;
+    validate(silent?: boolean): ReadonlyArray<FieldValidator.Error>;
+    migrate(previous: Field<TSchema>): void;
+    reset(initialValue?: Schema.Field.Data<TSchema> | null): void;
+    clone({ schema, eventBus, name, required }?: Field.CloneArgs<TSchema>): Field<TSchema>;
+    private raiseEvent;
+}
+export declare namespace Field {
+    type CloneArgs<TSchema extends Schema.Field.Type> = {
+        schema?: TSchema;
+        eventBus?: EventBus;
+        name?: string;
+        required?: boolean;
+    };
+    type ConstructorArgs<TSchema extends Schema.Field.Type> = {
+        eventBus: EventBus;
+        schema: TSchema;
+        id: string;
+        name: string;
+        publishedValue?: Value<TSchema>;
+        initialValue?: Value<TSchema>;
+        required: boolean;
+    };
+    type Value<TSchema extends Schema.Field.Type = Schema.Field.Type> = Schema.Field.Data<TSchema>;
+    interface Event extends EventBus.Event<'Field', Event.Type> {
+        field: Field;
+    }
+    namespace Event {
+        type Type = 'changed' | 'editing' | 'validation' | 'reset';
+        function filter(event: EventBus.Event): event is Event;
+        function create(event: EventBus.Args<Event>): Event;
+    }
+}

package/dist/ui/fields/Field.js

@@ -0,0 +1,298 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Field = void 0;
+const rxjs_1 = require("rxjs");
+const errors_1 = require("../../errors");
+const Schema = __importStar(require("../../schema"));
+const services_1 = require("../../services");
+const utils_1 = require("../../utils");
+const FieldValidator_1 = require("./FieldValidator");
+// class
+class Field {
+    constructor(args) {
+        var _a;
+        // initialize instance variables
+        this.eventBus = args.eventBus;
+        this.schema = args.schema;
+        this.id = args.id;
+        this.name = args.name;
+        this.required = args.required;
+        this.publishedValue = args.publishedValue;
+        this._initialValue = (_a = args.initialValue) !== null && _a !== void 0 ? _a : this.defaultValue;
+        this._value = this._initialValue;
+        this._editing = false;
+        this._sandboxed = false;
+        this._validator = FieldValidator_1.FieldValidator.create(this);
+        // validate
+        this._errors = this._validator.validate(this, this._initialValue);
+    }
+    get events$() {
+        return this.eventBus.events$.pipe((0, rxjs_1.filter)(Field.Event.filter), (0, rxjs_1.filter)(e => e.field === this));
+    }
+    get isComposite() {
+        switch (this.schema.type) {
+            case 'asset':
+            case 'link':
+                return true;
+            default:
+                return false;
+        }
+    }
+    get exists() {
+        const { initialValue, _optIn = false, _optOut = false, schema: { required } } = this;
+        return (initialValue !== undefined && !_optOut) || required || _optIn;
+    }
+    get valid() {
+        return this.errors.length === 0;
+    }
+    get error() {
+        return FieldValidator_1.FieldValidator.Error.mostRelevant(this._errors);
+    }
+    getErrors(level) {
+        return this._validator.filter(this._errors, level);
+    }
+    get errors() {
+        return this._errors;
+    }
+    get defaultValue() {
+        // no default if it's not required
+        const { schema } = this;
+        if (!schema.required) {
+            return undefined;
+        }
+        // or use default
+        switch (schema.type) {
+            case 'enum':
+                return schema.defaultOption
+                    ? Schema.EnumField.Value.toData(schema.defaultOption)
+                    : undefined;
+            case 'boolean':
+                return Schema.BooleanField.Value.toData(schema.defaultValue);
+            default:
+                return undefined;
+        }
+    }
+    get initialValue() {
+        return this._initialValue;
+    }
+    get hasValue() {
+        var _a;
+        return ((_a = this._value) === null || _a === void 0 ? void 0 : _a.value) !== undefined;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        // skip if value hasn't changed
+        if (utils_1.Value.equals(this._value, value)) {
+            return;
+        }
+        // update value
+        this._value = value;
+        // raise change event
+        this.raiseEvent('changed');
+        // raise error (if any)
+        this.validate();
+    }
+    coerceValue(value) {
+        // skip if value hasn't changed
+        if (utils_1.Value.equals(this._value, value)) {
+            return;
+        }
+        // update value
+        this._value = value;
+        // raise error (if any)
+        this.validate(true);
+    }
+    get modified() {
+        const { _value, initialValue, _optIn, _optOut } = this;
+        return _optOut || _optIn || !utils_1.Value.equals(_value, initialValue);
+    }
+    get changed() {
+        const { _value, publishedValue } = this;
+        return !utils_1.Value.equals(_value, publishedValue);
+    }
+    get editing() {
+        return this._editing;
+    }
+    set editing(editing) {
+        // skip if unchanged
+        if (this._editing === editing) {
+            return;
+        }
+        // update
+        this._editing = editing;
+        // raise event
+        this.raiseEvent('editing');
+    }
+    get sandboxed() {
+        return this._sandboxed;
+    }
+    sandbox() {
+        // throw if already sandboxed
+        if (this._sandboxed) {
+            throw new errors_1.InvalidOperationError('Cannot invoke sandbox() on Field multiple times.');
+        }
+        // sandbox field
+        this._sandboxedValue = this._value;
+        this._sandboxed = true;
+        // raise event
+        this.raiseEvent('changed');
+    }
+    commit() {
+        // throw if not sandboxed
+        if (!this._sandboxed) {
+            throw new errors_1.InvalidOperationError('Cannot invoke commit() on Field before sandbox().');
+        }
+        // clear sandbox
+        this._sandboxed = false;
+        // raise event
+        this.raiseEvent('changed');
+    }
+    rollback() {
+        // throw if not sandboxed
+        if (!this._sandboxed) {
+            throw new errors_1.InvalidOperationError('Cannot invoke commit() on Field before sandbox().');
+        }
+        // rollback sandbox
+        this._value = this._sandboxedValue;
+        this._sandboxed = false;
+        // raise event
+        this.raiseEvent('changed');
+    }
+    get canOptOut() {
+        return !this.schema.required;
+    }
+    optIn() {
+        // skip if required
+        const { schema } = this;
+        if (schema.required) {
+            return;
+        }
+        // set value
+        this._optIn = true;
+        this._shouldFocus = true;
+        this._optOut = false;
+        this.value = {
+            type: schema.type
+        };
+    }
+    optOut() {
+        // skip if required
+        const { schema } = this;
+        if (schema.required) {
+            return;
+        }
+        // clear value
+        this._optIn = false;
+        this._optOut = true;
+        this.value = undefined;
+    }
+    get shouldFocus() {
+        return this._shouldFocus === true;
+    }
+    didFocus() {
+        delete this._shouldFocus;
+    }
+    validate(silent = false) {
+        // validate (skip if nothing has changed
+        const errors = this._validator.validate(this, this._value);
+        if (utils_1.Value.equals(errors, this._errors)) {
+            return this._errors;
+        }
+        // update errors
+        this._errors = errors;
+        // raise event if not silent
+        if (!silent) {
+            this.raiseEvent('validation');
+        }
+        // return errors
+        return errors;
+    }
+    migrate(previous) {
+        this._value = previous.value;
+        this._editing = true;
+        this._sandboxed = previous._sandboxed;
+        this._sandboxedValue = previous._sandboxedValue;
+    }
+    reset(initialValue) {
+        // reset initial value if it's set
+        if (initialValue !== undefined) {
+            this._initialValue = initialValue !== null && initialValue !== void 0 ? initialValue : undefined;
+        }
+        // reset value
+        delete this._optIn;
+        delete this._optOut;
+        this.value = this._initialValue;
+        // revalidate
+        this.validate();
+        // clear sandbox
+        this._sandboxed = false;
+        this._sandboxedValue = undefined;
+        // raise reset event
+        this.raiseEvent('reset');
+    }
+    clone({ schema, eventBus, name, required } = {}) {
+        return new Field({
+            eventBus: eventBus !== null && eventBus !== void 0 ? eventBus : this.eventBus,
+            schema: schema !== null && schema !== void 0 ? schema : this.schema,
+            id: this.id,
+            name: name !== null && name !== void 0 ? name : this.name,
+            publishedValue: this.publishedValue,
+            initialValue: this.initialValue,
+            required: required !== null && required !== void 0 ? required : this.required
+        });
+    }
+    raiseEvent(type) {
+        this.eventBus.publish(Field.Event.create({ type, field: this }));
+    }
+}
+exports.Field = Field;
+// extension
+(function (Field) {
+    let Event;
+    (function (Event) {
+        // methods
+        function filter(event) {
+            return event.domain === 'Field';
+        }
+        Event.filter = filter;
+        function create(event) {
+            return services_1.EventBus.createEvent(Object.assign({ domain: 'Field' }, event));
+        }
+        Event.create = create;
+    })(Event = Field.Event || (Field.Event = {}));
+})(Field || (exports.Field = Field = {}));