@nascentdigital/funnel-editor 4.4.18

package/dist/core/components/fields/asset/AssetSelectorPane.js

@@ -0,0 +1,182 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetSelectorPane = AssetSelectorPane;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const filepond_plugin_file_validate_type_1 = __importDefault(require("filepond-plugin-file-validate-type"));
+const filepond_plugin_image_crop_1 = __importDefault(require("filepond-plugin-image-crop"));
+const filepond_plugin_image_preview_1 = __importDefault(require("filepond-plugin-image-preview"));
+const filepond_plugin_media_preview_1 = __importDefault(require("filepond-plugin-media-preview"));
+const react_1 = require("react");
+const react_filepond_1 = require("react-filepond");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const AssetInfo_1 = require("./AssetInfo");
+const AssetSpecs_1 = require("./AssetSpecs");
+// uploader registration
+(0, react_filepond_1.registerPlugin)(filepond_plugin_file_validate_type_1.default, filepond_plugin_image_crop_1.default, filepond_plugin_image_preview_1.default, filepond_plugin_media_preview_1.default);
+// component
+function AssetSelectorPane({ className, options, onAssetChanged = funnel_core_1.Fn.NoOp }) {
+    // bind props
+    const [file, setFile] = (0, react_1.useState)();
+    const [assetInfo, setAssetInfo] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    const containerRef = (0, react_1.useRef)(null);
+    const pondRef = (0, react_1.useRef)(null);
+    // helpers
+    const onClearFile = () => {
+        var _a;
+        (_a = pondRef.current) === null || _a === void 0 ? void 0 : _a.removeFiles({ remove: true });
+    };
+    const onFileAdded = (error, pondFile) => {
+        // skip if there's an error
+        if (error) {
+            console.error('[AssetSelectorPane/onFileAdded] failed to add file', error);
+        }
+        // fail if there's no container
+        const container = containerRef.current;
+        if (!container) {
+            throw new funnel_core_1.IllegalStateError('Unable to resolve container');
+        }
+        // get asset info
+        getAssetInfo({ container, pondFile, options })
+            .then(assetInfo => {
+            var _a;
+            // fail if file isn't supported (we should block this from the picker end of things)
+            if (!assetInfo || !assetInfo.isValid) {
+                console.error('[AssetSelectorPane/onFileAdded] unsupported file type', error);
+                setError((_a = assetInfo === null || assetInfo === void 0 ? void 0 : assetInfo.error) !== null && _a !== void 0 ? _a : 'Invalid file');
+                // clear pond
+                onClearFile();
+                // stop processing
+                return;
+            }
+            console.debug('[AssetSelectorPane/onFileAdded] added file', { pondFile, file: pondFile.file, meta: pondFile.getMetadata(), assetInfo });
+            // bind file
+            setFile(pondFile);
+            setAssetInfo(assetInfo);
+            setError(undefined);
+            // invoke callback
+            onAssetChanged(assetInfo);
+        })
+            .catch(e => {
+            // set error
+            setError(e instanceof funnel_core_1.IsometricError ? e.message : 'Invalid file');
+            // clear file
+            onClearFile();
+        });
+    };
+    const onFileRemoved = (error, file) => {
+        // skip if there's an error
+        if (error) {
+            console.error('[AssetSelectorPane/onFileRemoved] failed to remove file', error);
+            return;
+        }
+        console.debug('[AssetSelectorPane/onFileRemoved] removed file', file);
+        // reset file
+        setFile(undefined);
+        setAssetInfo(undefined);
+        // invoke callback
+        onAssetChanged(undefined);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, classnames_1.default)(className, 'relative group min-h-[210px] max-h-[50dv] flex flex-col interpolate', 'border border-border-l2 rounded-md overflow-hidden', {
+            'border-dashed': !file,
+            'border-solid': !!file
+        }), children: [(0, jsx_runtime_1.jsx)(react_filepond_1.FilePond, { ref: pondRef, stylePanelLayout: "compact", name: "files", instantUpload: false, maxFiles: 1, allowMultiple: false, allowProcess: false, allowRevert: false, allowRemove: true, allowImageCrop: true, allowImagePreview: true, allowFileTypeValidation: true, acceptedFileTypes: options.allowedTypes.slice(), onaddfile: onFileAdded, onremovefile: onFileRemoved, labelIdle: `
+          <p class="label-sm text-content-primary">Drag and drop to add media</p>
+          <p><span class="filepond--label-action">Browse</span></p>
+        ` }, "file"), error &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { className: "m-l6", variant: "error", children: error }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute w-full h-26 inset-x-0 bottom-l5 z-overlay', 'flex flex-col items-center px-l8 select-none interpolate', {
+                    'opacity-none pointer-events-none': !assetInfo,
+                    'opacity-full': !!assetInfo
+                }), children: assetInfo &&
+                    (0, jsx_runtime_1.jsx)(AssetSpecs_1.AssetSpecs, { asset: assetInfo, actions: (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "util", icon: "Trash", size: "xs", onClick: onClearFile }) }) })] }));
+}
+async function getAssetInfo({ container, pondFile, options }) {
+    console.debug('[AssetSelectorPane/getAssetInfo] getting info', { pondFile, options });
+    // bail if the mime-type is unrecognized
+    const { file, fileSize, fileType: mimeTypeRaw, filenameWithoutExtension, fileExtension } = pondFile;
+    const mimeType = mimeTypeRaw.toLowerCase();
+    if (!funnel_core_1.MimeType.filter(mimeType)) {
+        console.warn('[AssetSelectorPane/getAssetInfo] invalid mimeType', mimeType);
+        return undefined;
+    }
+    // get size for file
+    const fileType = funnel_core_1.FileType.coerce(mimeType);
+    let blurHash = undefined;
+    let dimensions = undefined;
+    if (fileType === 'image') {
+        console.debug('[AssetSelectorPane/getAssetInfo] processing blob image', file);
+        // create blob proxy
+        const proxy = new funnel_core_1.BlobImageProxy(file);
+        try {
+            console.debug('[AssetSelectorPane/getAssetInfo] waiting for image to load');
+            // wait until it's loaded
+            await proxy.waitUntilReady();
+            console.debug('[AssetSelectorPane/getAssetInfo] capturing image details', proxy);
+            // capture info
+            dimensions = proxy.intrinsicSize;
+            blurHash = await proxy.getBlurHash();
+        }
+        // and clean it up
+        finally {
+            console.debug('[AssetSelectorPane/getAssetInfo] disposing image', proxy);
+            proxy.dispose();
+        }
+        console.debug('[AssetSelectorPane/getAssetInfo] captured image settings', { dimensions, blurHash });
+    }
+    else if (fileType === 'icon' && mimeType === 'image/svg+xml') {
+        // extract size
+        const svgProxy = await funnel_core_1.SVGProxy.forBlob(file);
+        dimensions = svgProxy.intrinsicSize;
+        // fail if SVG doesn't have size
+        if (!dimensions) {
+            throw new funnel_core_1.ArgumentError('SVG is missing width/height');
+        }
+    }
+    else if (fileType === 'video') {
+        // fail if we can't find the video
+        const video = container.querySelector('video');
+        if (!video) {
+            console.warn('[AssetSelectorPane/getAssetInfo] unable to resolve video in container', container);
+            return undefined;
+        }
+        // create blob proxy
+        const proxy = new funnel_core_1.ElementVideoProxy(video);
+        try {
+            console.debug('[AssetSelectorPane/getAssetInfo] waiting for video to load', proxy);
+            await proxy.waitUntilReady();
+            console.debug('[AssetSelectorPane/getAssetInfo] seeking video (1 second in)', proxy);
+            // seek video
+            await proxy.seek(Math.min(1, proxy.duration / 2));
+            console.debug('[AssetSelectorPane/getAssetInfo] getting video details', proxy);
+            // capture info
+            dimensions = proxy.intrinsicSize;
+            blurHash = await proxy.getBlurHash();
+        }
+        // and clean it up
+        finally {
+            console.debug('[AssetSelectorPane/getAssetInfo] disposing video', proxy);
+            proxy.dispose();
+        }
+        console.debug('[AssetSelectorPane/getAssetInfo] captured video settings', { dimensions, blurHash });
+    }
+    // return new asset info
+    return new AssetInfo_1.AssetInfo({
+        options,
+        file,
+        fileName: funnel_core_1.StringUtils
+            .toKebabCase(filenameWithoutExtension)
+            .toLowerCase(),
+        fileExtension: fileExtension,
+        mimeType,
+        size: fileSize,
+        dimensions,
+        blurHash
+    });
+}

package/dist/core/components/fields/asset/AssetSpecs.d.ts

@@ -0,0 +1,11 @@
+import { Schema } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+import { AssetInfo } from './AssetInfo';
+export declare function AssetSpecs({ className, asset, actions }: AssetSpecs.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace AssetSpecs {
+    type Props = {
+        className?: string;
+        asset?: AssetInfo | Schema.AssetField.LinkedValue;
+        actions?: ReactNode;
+    };
+}

package/dist/core/components/fields/asset/AssetSpecs.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetSpecs = AssetSpecs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const AssetInfo_1 = require("./AssetInfo");
+// component
+function AssetSpecs({ className, asset, actions }) {
+    // bind memo
+    const specs = (0, react_1.useMemo)(() => getSpecs(asset), [asset]);
+    // skip if there's no asset
+    if (!specs) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'glass-overlay h-26 flex items-center gap-l4 px-l6', 'border-t border-solid border-glass-stroke-l1 rounded-full', 'label-xs text-content-primary'), children: [(0, jsx_runtime_1.jsx)("span", { className: "capitalize", children: specs.fileType }), (0, jsx_runtime_1.jsx)("span", { className: "h-8 divider-y" }), specs.dimensions &&
+                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: specs.dimensions }), (0, jsx_runtime_1.jsx)("span", { className: "h-8 divider-y" })] }), (0, jsx_runtime_1.jsx)("span", { className: "uppercase", children: specs.size }), actions &&
+                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "h-8 divider-y" }), actions] })] }));
+}
+function getSpecs(asset) {
+    // skip if there's no asset
+    if (!asset) {
+        return undefined;
+    }
+    // extract from asset info
+    else if (asset instanceof AssetInfo_1.AssetInfo) {
+        return {
+            fileType: asset.fileType,
+            size: asset.sizeLabel,
+            dimensions: asset.dimensionLabel
+        };
+    }
+    // or from linked asset
+    else {
+        const fileType = funnel_core_1.FileType.coerce(asset.type);
+        const sizeComponents = new funnel_core_1.ByteSize(asset.size).components();
+        const size = `${sizeComponents.size}${sizeComponents.units}`;
+        if (funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(asset)
+            || funnel_core_1.Schema.AssetField.LinkedValue.Video.filter(asset)) {
+            const { dimensions } = asset.metadata;
+            return {
+                fileType,
+                size,
+                dimensions: dimensions && `${dimensions.width}×${dimensions.height}px`
+            };
+        }
+        else {
+            return {
+                fileType,
+                size
+            };
+        }
+    }
+}

package/dist/core/components/fields/asset/AssetUploader.d.ts

@@ -0,0 +1,13 @@
+import { Rect, Schema } from '@nascentdigital/funnel-core';
+export declare const AssetUploader: import("react").ForwardRefExoticComponent<import("react").RefAttributes<AssetUploader.Ref>>;
+export declare namespace AssetUploader {
+    type Props = {};
+    interface Ref {
+        upload(options: Options): Promise<Result>;
+    }
+    type Options = {
+        schema: Schema.AssetField;
+        anchor: HTMLElement | Rect;
+    };
+    type Result = Schema.Field.LinkedData<Schema.AssetField> | 'pick' | undefined;
+}

package/dist/core/components/fields/asset/AssetUploader.js

@@ -0,0 +1,212 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetUploader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const client_1 = require("../../../client");
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const transitions_1 = require("../../transitions");
+const FieldEditor_1 = require("../FieldEditor");
+const FieldErrorController_1 = require("../FieldErrorController");
+const OptInField_1 = require("../OptInField");
+const AssetInfo_1 = require("./AssetInfo");
+const AssetSelectorPane_1 = require("./AssetSelectorPane");
+const useAssetFields_1 = require("./useAssetFields");
+// components
+exports.AssetUploader = (0, react_2.forwardRef)(function AssetUploader(_, ref) {
+    // bind props + hooks
+    const [deferral, setDeferral] = (0, react_2.useState)(undefined);
+    const [result, setResult] = (0, react_2.useState)();
+    const [schema, setSchema] = (0, react_2.useState)();
+    const [anchor, setAnchor] = (0, react_2.useState)();
+    const [errorLevel, setErrorLevel] = (0, react_2.useState)('none');
+    const [error, setError] = (0, react_2.useState)();
+    const [assetInfo, setAssetInfo] = (0, react_2.useState)();
+    const { nameField, anchorField, descriptionField, accessibleField } = (0, useAssetFields_1.useAssetFields)();
+    const [shared, setShared] = (0, react_2.useState)(false);
+    const editorApi = (0, client_1.useEditorApi)();
+    const assetStore = (0, hooks_1.useAssetStore)();
+    const assetOptions = (0, react_2.useMemo)(() => getAssetOptions(schema), [schema]);
+    // export service
+    (0, react_2.useImperativeHandle)(ref, () => ({
+        upload: async ({ schema, anchor }) => {
+            // reset state
+            setSchema(schema);
+            setAnchor(anchor);
+            setErrorLevel('none');
+            setError(undefined);
+            setShared(false);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            setResult(undefined);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // helpers
+    const onAssetChanged = (assetInfo) => {
+        // bind asset
+        setAssetInfo(assetInfo);
+        setErrorLevel('none');
+        // update fields if there's a file
+        if (assetInfo) {
+            nameField.reset(funnel_core_1.Schema.TextField.Value.toData(assetInfo.fileName));
+            anchorField.reset(funnel_core_1.Schema.EnumField.Value.toData('center'));
+            descriptionField.reset(null);
+            accessibleField.reset(funnel_core_1.Schema.EnumField.Value.toData('system'));
+        }
+    };
+    const onValidate = () => {
+        // skip if there's no asset
+        if (!assetInfo) {
+            return false;
+        }
+        // check if level
+        let valid = nameField.valid;
+        if (valid && assetInfo.isVisual) {
+            valid = anchorField.valid &&
+                (!descriptionField.exists || descriptionField.valid);
+        }
+        // update error level
+        setErrorLevel('all');
+        // return validity
+        return valid;
+    };
+    const onUpload = async () => {
+        var _a;
+        // fail if pond isn't there
+        if (!schema || !assetInfo) {
+            console.error('[AssetUploader] unable to resolve asset');
+            throw new funnel_core_1.InvalidOperationError('Unable to resolve AssetInfo instance');
+        }
+        // handle upload
+        try {
+            // create meta
+            const metadata = await getAssetMetadata({ assetInfo, anchorField, accessibleField });
+            console.debug('[AssetUploader/onUpload] uploading asset', { assetInfo, metadata });
+            // upload new file
+            const uploadedFile = await editorApi.uploadFile({
+                file: assetInfo.file,
+                type: assetInfo.mimeType,
+                size: assetInfo.size,
+                name: (_a = funnel_core_1.Schema.TextField.Value.fromData(nameField.value)) !== null && _a !== void 0 ? _a : assetInfo.fileName,
+                description: descriptionField.exists
+                    ? funnel_core_1.Schema.TextField.Value.fromData(descriptionField.value)
+                    : undefined,
+                scope: shared
+                    ? funnel_core_1.Schema.GlobalAssetScope.instance.data
+                    : assetStore.getAssetScope(schema.scope).data,
+                tags: schema.tags.map(tag => tag.data),
+                metadata
+            });
+            // store asset
+            assetStore.addAsset(uploadedFile);
+            // capture result
+            setResult(uploadedFile);
+            console.debug('[AssetUploader/upload] completed upload');
+        }
+        // handle errors
+        catch (e) {
+            console.error('[AssetUploader/upload] file upload failure', e);
+            setError(feedback_1.ErrorMessage.getGenericError((e instanceof Error) ? e : new funnel_core_1.ServerError()));
+        }
+    };
+    const onCancel = () => {
+        // set result (triggers uploader to close)
+        setResult(null);
+    };
+    const onPickerClosed = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            return;
+        }
+        // complete deferral
+        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
+    };
+    // skip if we don't have any params
+    if (!deferral || !schema) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, { className: "flex flex-col gap-l8", title: "Upload Asset", open: result === undefined, placement: "right", anchor: anchor, anchorOffset: 4, canSave: onValidate, disableSave: !(assetInfo === null || assetInfo === void 0 ? void 0 : assetInfo.isValid), renderSaveLabel: () => 'Upload', onSave: onUpload, onClose: onCancel, onClosed: onPickerClosed, children: [schema.description &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: schema.description }), (0, jsx_runtime_1.jsx)(AssetSelectorPane_1.AssetSelectorPane, { options: assetOptions, onAssetChanged: onAssetChanged }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: renderAssetInfo({ assetInfo, nameField, anchorField, descriptionField, accessibleField, shared, setShared }) }) })] }));
+});
+function getAssetOptions(schema) {
+    // return empty options if there's no schema
+    if (!schema) {
+        return AssetInfo_1.AssetInfo.Options.normalize({});
+    }
+    // build options base
+    const { mimeTypes, minSize, maxSize, visualOptions } = schema;
+    const options = {
+        allowedTypes: mimeTypes,
+        minSize,
+        maxSize
+    };
+    // add visual info
+    if (mimeTypes.some(funnel_core_1.MimeType.Visual.filterRaster)) {
+        options.minWidth = (visualOptions === null || visualOptions === void 0 ? void 0 : visualOptions.minWidth) || 1;
+        options.maxWidth = (visualOptions === null || visualOptions === void 0 ? void 0 : visualOptions.maxWidth) || 2560;
+        options.minHeight = (visualOptions === null || visualOptions === void 0 ? void 0 : visualOptions.minHeight) || 1;
+        options.maxHeight = (visualOptions === null || visualOptions === void 0 ? void 0 : visualOptions.maxHeight) || 2560;
+    }
+    // normalize options
+    return AssetInfo_1.AssetInfo.Options.normalize(options);
+}
+function renderAssetInfo({ assetInfo, nameField, anchorField, descriptionField, accessibleField, shared, setShared }) {
+    // skip if there's no asset info
+    if (!assetInfo || !assetInfo.isValid) {
+        return null;
+    }
+    // build fields
+    const fields = [
+        (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: nameField }, "name")
+    ];
+    // add fields related to visuals
+    if (assetInfo.isVisual) {
+        // add anchor
+        fields.push((0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: anchorField }, "anchor"));
+        // add accessible flag (for videos)
+        if (assetInfo.isVideo) {
+            fields.push((0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: accessibleField }, "accessible"));
+        }
+        // get description
+        fields.push(descriptionField.exists
+            ? (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: descriptionField }, "desc")
+            : (0, jsx_runtime_1.jsx)(OptInField_1.OptInField, { field: descriptionField }, "desc.option"));
+    }
+    // render editing fields
+    return ((0, jsx_runtime_1.jsxs)(transitions_1.FadeIn, { className: "flex flex-col gap-l8", children: [fields, (0, jsx_runtime_1.jsx)(interaction_1.Checkbox, { checked: shared, onChange: setShared, children: "Store in global media library" })] }, "fields"));
+}
+async function getAssetMetadata({ assetInfo, anchorField, accessibleField }) {
+    var _a;
+    const { fileType, dimensions, blurHash } = assetInfo;
+    switch (fileType) {
+        case 'image':
+            return {
+                crop: funnel_core_1.Schema.EnumField.Value.fromData(anchorField.value),
+                dimensions,
+                blurHash
+            };
+        case 'icon':
+            return { dimensions };
+        case 'video': {
+            const accessible = (_a = funnel_core_1.Schema.EnumField.Value.fromData(accessibleField.value)) !== null && _a !== void 0 ? _a : 'system';
+            return {
+                crop: funnel_core_1.Schema.EnumField.Value.fromData(anchorField.value),
+                dimensions,
+                blurHash,
+                accessible: accessible === 'system'
+                    ? 'system'
+                    : accessible === 'true'
+            };
+        }
+        default:
+            return {};
+    }
+}

package/dist/core/components/fields/asset/index.d.ts

@@ -0,0 +1,5 @@
+export * from './AssetInfo';
+export * from './AssetCard';
+export * from './AssetEditor';
+export * from './AssetPicker';
+export * from './AssetUploader';

package/dist/core/components/fields/asset/index.js

@@ -0,0 +1,21 @@
+"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("./AssetInfo"), exports);
+__exportStar(require("./AssetCard"), exports);
+__exportStar(require("./AssetEditor"), exports);
+__exportStar(require("./AssetPicker"), exports);
+__exportStar(require("./AssetUploader"), exports);

package/dist/core/components/fields/asset/preview/ImagePreview.d.ts

@@ -0,0 +1,8 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export declare function ImagePreview({ className, asset }: ImagePreview.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ImagePreview {
+    type Props = {
+        className?: string;
+        asset: Schema.AssetField.LinkedValue.Image;
+    };
+}

package/dist/core/components/fields/asset/preview/ImagePreview.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagePreview = ImagePreview;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+// component
+function ImagePreview({ className, asset }) {
+    // bind state + refs
+    const { type, url, name, metadata } = asset;
+    const { dimensions, thumbUrl, blurHash } = metadata;
+    const blurCanvasRef = (0, react_1.useRef)(null);
+    // decode blurhash (if any)
+    (0, react_1.useEffect)(() => {
+        // skip if there's no hash
+        const canvas = blurCanvasRef.current;
+        if (!canvas || !blurHash) {
+            return;
+        }
+        // render hash int canvas
+        funnel_core_1.BlurHasher.render({ canvas, blurHash });
+    }, [blurHash]);
+    // render
+    const contain = type === 'image/svg+xml'
+        || (dimensions && (dimensions.width < 300 || dimensions.width / dimensions.height < 1));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'w-full h-full', {
+            'p-l8': contain
+        }), children: (0, jsx_runtime_1.jsxs)("div", { className: "relative w-full h-full", children: [blurHash &&
+                    (0, jsx_runtime_1.jsx)("canvas", { ref: blurCanvasRef, className: "absolute inset-0 w-full h-full", width: 32, height: 32, draggable: false }), (0, jsx_runtime_1.jsx)("img", { className: (0, classnames_1.default)('absolute w-full h-full', {
+                        'object-contain': contain,
+                        'object-cover': !contain
+                    }), src: thumbUrl !== null && thumbUrl !== void 0 ? thumbUrl : url, alt: name, draggable: false })] }) }));
+}

package/dist/core/components/fields/asset/preview/VideoPreview.d.ts

@@ -0,0 +1,9 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export declare function VideoPreview({ className, asset, active }: VideoPreview.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace VideoPreview {
+    type Props = {
+        className?: string;
+        asset: Schema.AssetField.LinkedValue.Video;
+        active?: boolean;
+    };
+}

package/dist/core/components/fields/asset/preview/VideoPreview.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoPreview = VideoPreview;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+// component
+function VideoPreview({ className, asset, active }) {
+    // bind state + refs
+    const { url, metadata } = asset;
+    const { blurHash } = metadata;
+    const [videoRef, video] = (0, client_1.useRefElement)();
+    const videoProxy = (0, client_1.useVideoProxy)(video);
+    const blurCanvasRef = (0, react_1.useRef)(null);
+    // decode blurhash (if any)
+    (0, react_1.useEffect)(() => {
+        // skip if there's no hash
+        const canvas = blurCanvasRef.current;
+        if (!canvas || !blurHash) {
+            return;
+        }
+        // render hash int canvas
+        funnel_core_1.BlurHasher.render({ canvas, blurHash });
+    }, [blurHash]);
+    // seek video on initial load
+    (0, react_1.useEffect)(() => {
+        // skip if there's no video
+        if (!videoProxy) {
+            return;
+        }
+        // seek into video (make sure we have something
+        let cancelled = false;
+        videoProxy.waitUntilReady().then(() => {
+            if (!cancelled) {
+                videoProxy
+                    .seek(Math.min(3, videoProxy.duration / 2))
+                    .catch(console.error);
+            }
+        });
+        // cancel on unmount
+        return () => {
+            cancelled = true;
+        };
+    }, [videoProxy]);
+    // start/stop video when active
+    (0, react_1.useEffect)(() => {
+        // skip if there's no video
+        if (!videoProxy) {
+            return;
+        }
+        // start video
+        if (active) {
+            videoProxy
+                .play({ playbackRate: 1, loop: true })
+                .catch(console.error);
+        }
+        else {
+            videoProxy
+                .pause()
+                .catch(console.error);
+        }
+        // stop on unmount
+        return () => {
+            videoProxy.pause().catch(console.error);
+        };
+    }, [videoProxy, active]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'relative w-full h-full'), children: [blurHash &&
+                (0, jsx_runtime_1.jsx)("canvas", { ref: blurCanvasRef, className: "absolute inset-0 w-full h-full", width: 32, height: 32, draggable: false }), (0, jsx_runtime_1.jsx)("video", { ref: videoRef, className: (0, classnames_1.default)('absolute inset-0 w-full h-full object-cover cursor-pointer interpolate', {
+                    'opacity-none': !(videoProxy === null || videoProxy === void 0 ? void 0 : videoProxy.loaded)
+                }), src: url, draggable: false, loop: true, muted: true })] }));
+}

package/dist/core/components/fields/asset/preview/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ImagePreview';
+export * from './VideoPreview';