@nascentdigital/funnel-editor 4.6.1 → 5.0.1

package/dist/core/components/fields/factories/MediaFactory.js

@@ -0,0 +1,256 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaFactory = MediaFactory;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const react_1 = require("react");
+const interaction_1 = require("../../interaction");
+const asset_1 = require("../asset");
+const embed_1 = require("../embed");
+const media_1 = require("../media");
+// component
+function MediaFactory({ schema, language, media: initialValue, anchor, onCommit: onCommitRaw, onCancel: onCancelRaw }) {
+    // bind refs
+    const menu = (0, interaction_1.useMenuController)();
+    const pickerRef = (0, react_1.useRef)(null);
+    const editorRef = (0, react_1.useRef)(null);
+    const assetPickerRef = (0, react_1.useRef)(null);
+    const assetUploaderRef = (0, react_1.useRef)(null);
+    const embeddedVideoEditorRef = (0, react_1.useRef)(null);
+    const anchorRef = (0, react_1.useRef)(anchor);
+    anchorRef.current = anchor;
+    const onCommitRef = (0, react_1.useRef)(onCommitRaw);
+    onCommitRef.current = onCommitRaw;
+    const onCancelRef = (0, react_1.useRef)(onCancelRaw);
+    onCancelRef.current = onCancelRaw;
+    const collectionOptions = schema.collections;
+    // open menu when bound
+    (0, react_1.useEffect)(() => {
+        // open menu if new
+        if (!initialValue) {
+            menu.items = mediaMenuOption;
+            menu.open(anchorRef.current);
+        }
+        // or open editor
+        else {
+            // blow up if editor isn't available (shouldn't happen)
+            const editor = editorRef.current;
+            const anchor = anchorRef.current;
+            if (!editor) {
+                throw new funnel_core_1.IllegalStateError('Unable to resolve reference to MediaEditor');
+            }
+            // start picker (cancel if nothing was picked
+            editor.edit({
+                schema,
+                target: { type: 'media', media: initialValue },
+                anchor
+            })
+                .then(async (media) => {
+                var _a;
+                console.debug('[MediaFactory/onEdit] editing completed', media);
+                // cancel if there's no media
+                if (!media) {
+                    onCancelRef.current();
+                }
+                // or switch to picker
+                else if (media === 'pick') {
+                    // start picker (cancel if nothing was picked
+                    const media = await ((_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.pick({ schema }));
+                    if (!media) {
+                        onCancelRef.current();
+                    }
+                    // otherwise, return result
+                    else {
+                        onCommitRef.current({
+                            id: media.id,
+                            type: media.template.type
+                        });
+                    }
+                }
+                // or commit change
+                else {
+                    onCommitRef.current(media);
+                }
+            })
+                .catch(console.error);
+        }
+    }, [menu, schema, collectionOptions, initialValue]);
+    // helpers
+    const onEdit = async (target) => {
+        var _a;
+        // start picker (cancel if nothing was picked
+        const media = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
+            schema,
+            target,
+            anchor
+        }));
+        // stop if cancelled
+        if (!media) {
+            onCancel();
+        }
+        // or switch to picker
+        else if (media === 'pick') {
+            // pick media
+            const pick = await onPickMedia();
+            // cancel if nothing got picked
+            if (!pick) {
+                onCancel();
+            }
+            // or commit selection
+            else {
+                onCommit({
+                    id: pick.id,
+                    type: pick.template.type
+                });
+            }
+        }
+        // otherwise, return result
+        else {
+            onCommit(media);
+        }
+    };
+    const onPickMedia = async () => {
+        var _a;
+        // start picker (cancel if nothing was picked
+        const media = await ((_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.pick({ schema }));
+        return media !== null && media !== void 0 ? media : undefined;
+    };
+    const onUploadAsset = async () => {
+        var _a;
+        // launch uploader (or skip if there's no result)
+        const result = await ((_a = assetUploaderRef.current) === null || _a === void 0 ? void 0 : _a.upload({
+            schema: mediaUploadSchema,
+            anchor
+        }));
+        if (!result) {
+            return undefined;
+        }
+        // or switch to picking
+        else if (result === 'pick') {
+            return onPickAsset();
+        }
+        // create new image media
+        const { value: asset } = result;
+        if (funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(asset)) {
+            console.debug('[MediaFactory] creating new image media');
+            return asset;
+        }
+        // or create new video media
+        else if (funnel_core_1.Schema.AssetField.LinkedValue.Video.filter(asset)) {
+            console.debug('[MediaFactory] creating new video media');
+            return asset;
+        }
+        // or abort
+        else {
+            return undefined;
+        }
+    };
+    const onPickAsset = async () => {
+        var _a;
+        // launch picker (or cancel if nothing is selected)
+        const result = await ((_a = assetPickerRef.current) === null || _a === void 0 ? void 0 : _a.pick({
+            schema: mediaUploadSchema
+        }));
+        if (!result) {
+            return undefined;
+        }
+        // or launch uploader if the directive was received
+        else if (result === 'upload') {
+            return onUploadAsset();
+        }
+        // create new image media
+        const { value: asset } = result;
+        if (funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(asset)) {
+            console.debug('[MediaFactory] creating new image media');
+            return asset;
+        }
+        // or create new video media
+        else if (funnel_core_1.Schema.AssetField.LinkedValue.Video.filter(asset)) {
+            console.debug('[MediaFactory] creating new video media');
+            return asset;
+        }
+        // or abort
+        else {
+            return undefined;
+        }
+    };
+    const onLinkVideo = async () => {
+        var _a, _b;
+        // start editor (cancel if dismissed)
+        const value = await ((_a = embeddedVideoEditorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
+            schema: funnel_ui_1.Media.Video.Source.schema.content.remote.schema,
+            anchor: anchorRef.current
+        }));
+        return (_b = value === null || value === void 0 ? void 0 : value.value) !== null && _b !== void 0 ? _b : undefined;
+    };
+    const onMenuSelect = async (option) => {
+        // process based on option
+        switch (option) {
+            case 'pick': {
+                // pick media (or cancel if nothing was picked)
+                const media = await onPickMedia();
+                if (!media) {
+                    onCancel();
+                }
+                // or commit
+                else {
+                    onCommitRef.current({
+                        id: media.id,
+                        type: media.template.type
+                    });
+                }
+                // stop processing
+                break;
+            }
+            case 'add.asset': {
+                // get visual (or cancel)
+                const asset = await onUploadAsset();
+                if (!asset) {
+                    onCancel();
+                    break;
+                }
+                // open editor with asset
+                await onEdit(funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(asset)
+                    ? { type: 'image', image: asset }
+                    : { type: 'video.local', video: asset });
+                // stop processing
+                break;
+            }
+            case 'add.url': {
+                // link video (or cancel)
+                const video = await onLinkVideo();
+                if (!video) {
+                    onCancel();
+                    break;
+                }
+                // open editor with video
+                await onEdit({ type: 'video.remote', video });
+                // stop processing
+                break;
+            }
+        }
+    };
+    const onCommit = (media) => onCommitRef.current(media);
+    const onCancel = () => onCancelRef.current();
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Menu, { controller: menu, onItemClick: onMenuSelect, onClose: onCancel }), (0, jsx_runtime_1.jsx)(media_1.MediaPicker, { ref: pickerRef, language: language }), (0, jsx_runtime_1.jsx)(media_1.MediaEditor, { ref: editorRef, language: language }), (0, jsx_runtime_1.jsx)(asset_1.AssetUploader, { ref: assetUploaderRef }), (0, jsx_runtime_1.jsx)(asset_1.AssetPicker, { ref: assetPickerRef }), (0, jsx_runtime_1.jsx)(embed_1.EmbeddedVideoEditor, { ref: embeddedVideoEditorRef, language: language })] }));
+}
+const mediaMenuOption = [
+    {
+        id: 'pick',
+        label: 'Use existing media',
+        icon: 'FileSearchCorner'
+    },
+    {
+        id: 'add.asset',
+        label: 'Upload new asset',
+        icon: 'ImageDown'
+    },
+    {
+        id: 'add.url',
+        label: 'Link to Video',
+        icon: 'Link2'
+    }
+];
+const mediaUploadSchema = funnel_core_1.Schema.Field.visual({ name: 'Image or Video' });

package/dist/core/components/fields/list/CreateFieldButton.js

@@ -39,6 +39,6 @@ function CreateFieldButton(_a) {
         setCreating(false);
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, Object.assign({}, props, { anchorId: id, onClick: onCreateStart, variant: "text", iconLeft: "Plus", children: children })), creating &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, Object.assign({}, props, { anchorId: id, onClick: onCreateStart, variant: "secondary", iconLeft: "Plus", children: children })), creating &&
                 (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { itemSchema: schema, anchor: id, onCommit: onCreate, onCancel: onCreateCancel })] }));
 }

package/dist/core/components/fields/media/MediaCard.d.ts

@@ -0,0 +1,7 @@
+import { Field } from '@nascentdigital/funnel-core';
+import { Media } from '@nascentdigital/funnel-ui';
+import type { FieldCard } from '../FieldCard';
+export declare function MediaCard({ className, field, ...props }: MediaCard.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaCard {
+    type Props = FieldCard.Props.For<Field<Media.Schema>>;
+}

package/dist/core/components/fields/media/MediaCard.js

@@ -0,0 +1,92 @@
+"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.MediaCard = MediaCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const react_1 = require("react");
+const hooks_1 = require("../../../hooks");
+const AssetPreview_1 = require("../asset/AssetPreview");
+const FieldCardLayout_1 = require("../FieldCardLayout");
+// component
+function MediaCard(_a) {
+    var _b;
+    var { className, field } = _a, props = __rest(_a, ["className", "field"]);
+    // bind props + hooks
+    const [active, setActive] = (0, react_1.useState)(false);
+    const collectionStore = (0, hooks_1.useCollectionStore)();
+    const assetStore = (0, hooks_1.useAssetStore)();
+    const value = (_b = field.value) === null || _b === void 0 ? void 0 : _b.value;
+    const media = value
+        ? funnel_core_1.Schema.CollectionField.Value.ForRef.filter(value)
+            ? collectionStore.getCollection(value.id)
+            : value
+        : undefined;
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldCardLayout_1.FieldCardLayout, Object.assign({}, props, { className: className, field: field, onActiveChanged: setActive, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1 w-full h-full flex flex-col", children: renderMedia({ assetStore, media, active }) }) })));
+}
+function renderMedia({ assetStore, media, active }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    // skip if there's no media
+    if (!media) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex-1" }));
+    }
+    // or image
+    else if (funnel_ui_1.Media.Value.isImage(media)) {
+        // bind props
+        const { image: desktopImageData, mobileImage: mobileImageData } = (_a = media.fields) !== null && _a !== void 0 ? _a : {};
+        const desktopImageId = (_b = desktopImageData === null || desktopImageData === void 0 ? void 0 : desktopImageData.value) === null || _b === void 0 ? void 0 : _b.id;
+        const desktopImage = desktopImageId
+            ? assetStore.getAsset(desktopImageId)
+            : undefined;
+        const mobileImageId = (_c = mobileImageData === null || mobileImageData === void 0 ? void 0 : mobileImageData.value) === null || _c === void 0 ? void 0 : _c.id;
+        const mobileImage = mobileImageId
+            ? assetStore.getAsset(mobileImageId)
+            : undefined;
+        const mobileImageUrl = (_d = mobileImage === null || mobileImage === void 0 ? void 0 : mobileImage.value) === null || _d === void 0 ? void 0 : _d.url;
+        // render image (crossfade)
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AssetPreview_1.AssetPreview, { asset: desktopImage === null || desktopImage === void 0 ? void 0 : desktopImage.value, active: active }), mobileImageUrl &&
+                    (0, jsx_runtime_1.jsx)("img", { className: "absolute inset-0 object-cover z-supersurface interpolate opacity-none hover:opacity-full", src: mobileImageUrl, alt: "Mobile preview" })] }));
+    }
+    // or video
+    else if (funnel_ui_1.Media.Value.isVideo(media)) {
+        // bind props
+        const { video, cover: coverRaw } = (_e = media.fields) !== null && _e !== void 0 ? _e : {};
+        const { local: localRaw, remote: remoteRaw } = video.value;
+        const coverId = (_f = coverRaw === null || coverRaw === void 0 ? void 0 : coverRaw.value) === null || _f === void 0 ? void 0 : _f.id;
+        const cover = coverId
+            ? assetStore.getAsset(coverId)
+            : undefined;
+        const localVideoId = (_g = localRaw === null || localRaw === void 0 ? void 0 : localRaw.value) === null || _g === void 0 ? void 0 : _g.id;
+        const localVideo = localVideoId
+            ? assetStore.getAsset(localVideoId)
+            : undefined;
+        const remoteThumbUrl = (_h = remoteRaw === null || remoteRaw === void 0 ? void 0 : remoteRaw.value) === null || _h === void 0 ? void 0 : _h.thumbUrl;
+        // render video
+        if (localVideo) {
+            return ((0, jsx_runtime_1.jsx)(AssetPreview_1.AssetPreview, { asset: localVideo === null || localVideo === void 0 ? void 0 : localVideo.value, active: active }));
+        }
+        // or remove
+        else if (remoteThumbUrl) {
+            return ((0, jsx_runtime_1.jsx)("img", { className: "w-full h-full object-cover", src: remoteThumbUrl, alt: "Video thumbnail preview", draggable: false }));
+        }
+        else {
+            return null;
+        }
+    }
+    // or skip (shouldn't happen
+    else {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex-1" }));
+    }
+}

package/dist/core/components/fields/media/MediaEditor.d.ts

@@ -0,0 +1,37 @@
+import { Language, Schema } from '@nascentdigital/funnel-core';
+import { Media } from '@nascentdigital/funnel-ui';
+import { Popup } from '../../interaction';
+export declare const MediaEditor: import("react").ForwardRefExoticComponent<MediaEditor.Props & import("react").RefAttributes<MediaEditor.Ref>>;
+export declare namespace MediaEditor {
+    type Target = Target.Image | Target.LocalVideo | Target.RemoteVideo | Target.Media;
+    namespace Target {
+        type Image = {
+            type: 'image';
+            image: Schema.AssetField.LinkedValue.Image;
+        };
+        type LocalVideo = {
+            type: 'video.local';
+            video: Schema.AssetField.LinkedValue.Video;
+        };
+        type RemoteVideo = {
+            type: 'video.remote';
+            video: Schema.EmbeddedVideoField.Value;
+        };
+        type Media = {
+            type: 'media';
+            media: Media.Value;
+        };
+    }
+    type Props = {
+        language: Language;
+    };
+    interface Ref {
+        edit(options: Options): Promise<Result>;
+    }
+    type Options = {
+        schema: Media.Schema;
+        target: Target;
+        anchor: Popup.Anchor;
+    };
+    type Result = Media.Value | 'pick' | undefined;
+}

package/dist/core/components/fields/media/MediaEditor.js

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const framer_motion_1 = require("framer-motion");
+const react_1 = require("react");
+const domain_1 = require("../../../domain");
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const FieldEditor_1 = require("../FieldEditor");
+const FieldErrorController_1 = require("../FieldErrorController");
+const OptInField_1 = require("../OptInField");
+// component
+exports.MediaEditor = (0, react_1.forwardRef)(function MediaEditor({ language }, ref) {
+    var _a, _b;
+    // bind props + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
+    const [result, setResult] = (0, react_1.useState)();
+    const [target, setTarget] = (0, react_1.useState)();
+    const [anchor, setAnchor] = (0, react_1.useState)();
+    const [fieldSchema, setFieldSchema] = (0, react_1.useState)();
+    const [mediaSchema, setMediaSchema] = (0, react_1.useState)();
+    const [shared, setShared] = (0, react_1.useState)(false);
+    const [errorLevel, setErrorLevel] = (0, react_1.useState)('none');
+    const [error, setError] = (0, react_1.useState)();
+    const [field, setField] = (0, react_1.useState)();
+    const page = (0, hooks_1.usePossiblePage)();
+    const collection = (0, hooks_1.usePossibleCollection)();
+    const collectionRepository = (0, hooks_1.useCollectionRepository)();
+    const collectionStore = page !== null && page !== void 0 ? page : collection;
+    const assetStore = page !== null && page !== void 0 ? page : collection;
+    const dialog = (0, feedback_1.useDialog)();
+    const valid = (_a = field === null || field === void 0 ? void 0 : field.valid) !== null && _a !== void 0 ? _a : false;
+    const modified = (_b = field === null || field === void 0 ? void 0 : field.modified) !== null && _b !== void 0 ? _b : false;
+    // sync with field
+    (0, hooks_1.useCollectionFieldProxy)(field);
+    // export service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        edit: async ({ schema, target, anchor }) => {
+            // reset state
+            setFieldSchema(schema);
+            setMediaSchema(target.type === 'image' || (target.type === 'media' && funnel_ui_1.Media.Value.isImage(target.media))
+                ? funnel_ui_1.Media.Image.collection
+                : funnel_ui_1.Media.Video.collection);
+            setTarget(target);
+            setField(undefined);
+            setShared(false);
+            setAnchor(anchor);
+            setErrorLevel('none');
+            setError(undefined);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            setResult(undefined);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // create field
+    (0, react_1.useEffect)(() => {
+        // ignore if schemas aren't set
+        if (!fieldSchema || !mediaSchema || !collectionStore || !assetStore || !target) {
+            return;
+        }
+        // create new field (wraps existing data for editing)
+        domain_1.CollectionFieldProxy
+            .create({
+            collectionRepository,
+            collectionStore,
+            assetStore,
+            schema: fieldSchema,
+            collectionSchema: mediaSchema,
+            language,
+            initialValue: target.type === 'media' ? target.media : undefined
+        })
+            .then(field => {
+            // bind image (if partial)
+            switch (target.type) {
+                case 'image': {
+                    const collection = field;
+                    const imageField = collection.getField('image');
+                    imageField.value = funnel_core_1.Schema.AssetField.Value.toData(target.image);
+                    break;
+                }
+                case 'video.local': {
+                    const collection = field;
+                    const videoField = collection.getField('video');
+                    const typeField = videoField.getField('type');
+                    typeField.value = funnel_core_1.Schema.EnumField.Value.toData('local');
+                    const localVideoField = videoField.getField('local');
+                    localVideoField.optIn();
+                    localVideoField.value = funnel_core_1.Schema.AssetField.Value.toData(target.video);
+                    break;
+                }
+                case 'video.remote': {
+                    const collection = field;
+                    const videoField = collection.getField('video');
+                    const typeField = videoField.getField('type');
+                    typeField.value = funnel_core_1.Schema.EnumField.Value.toData('remote');
+                    const remoteVideoField = videoField.getField('remote');
+                    remoteVideoField.optIn();
+                    remoteVideoField.value = funnel_core_1.Schema.EmbeddedVideoField.Value.toData(target.video);
+                    break;
+                }
+            }
+            // bind field
+            setField(field);
+            setShared(!field.isNew && field.isRef);
+        });
+    }, [language, collectionRepository, collectionStore, assetStore, fieldSchema, mediaSchema, target]);
+    // skip if there's no schema or value
+    if (!fieldSchema || !mediaSchema || !field || !target || !collectionStore || !assetStore) {
+        return null;
+    }
+    // helpers
+    const onValidate = () => {
+        // update error level
+        setErrorLevel('all');
+        // return validity
+        return valid;
+    };
+    const onSave = async () => {
+        // skip there's no field (should never happen)
+        if (!field) {
+            return;
+        }
+        // confirm if it's shared (skip if user bails)
+        if (shared) {
+            const confirmed = await dialog.confirm(field.isNew
+                ?
+                    {
+                        title: `Create a new ${mediaSchema.name}?`,
+                        message: ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)("b", { children: field.name }), " will be created as a shared content entry."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["You will also need to go to the Collection editor in order to publish this entry before attempting to the changes to this ", page ? 'page' : 'collection', " can go live."] })] })),
+                        confirmLabel: 'Update'
+                    }
+                :
+                    {
+                        title: `Update shared ${mediaSchema.name}?`,
+                        message: 'Updating this content may affect other pages.',
+                        confirmLabel: 'Update'
+                    });
+            if (!confirmed) {
+                return;
+            }
+        }
+        // TODO: handle errors
+        // save
+        await field.save(shared);
+        // update after closing
+        setResult(field.value);
+    };
+    const onCancel = async () => {
+        // skip there's no field (should never happen)
+        if (!field) {
+            return;
+        }
+        // confirm if there are unsaved changes
+        if (field.modified) {
+            // confirm
+            const confirmed = await dialog.confirm({
+                title: 'Are you sure?',
+                message: 'You have unsaved changes that you\'ll lose.',
+                confirmLabel: 'Yes',
+                destructive: true
+            });
+            // skip if user cancelled
+            if (!confirmed) {
+                return;
+            }
+        }
+        // set result (triggers editor to close)
+        setResult(null);
+    };
+    const onClosed = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            console.debug('[MediaEditor/onClosed] ignoring invalid trigger');
+            return;
+        }
+        console.debug('[MediaEditor/onClosed] completing edit:', result);
+        // clear field
+        setFieldSchema(undefined);
+        setMediaSchema(undefined);
+        setTarget(undefined);
+        setField(undefined);
+        // complete deferral
+        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)(interaction_1.MiniEditor, { className: "flex flex-col gap-l8", title: `Edit Media`, open: !!deferral && result === undefined, placement: "right", anchor: anchor, anchorOffset: 4, disableSave: !modified, canSave: onValidate, onSave: onSave, renderSaveLabel: state => state === 'saving' ? 'Updating...' : 'Update', customActions: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: () => setResult('pick'), children: "Use existing media" }), onClose: onCancel, onClosed: onClosed, children: (0, jsx_runtime_1.jsx)(hooks_1.CollectionStoreContext.Provider, { value: collectionStore, children: (0, jsx_runtime_1.jsxs)(hooks_1.AssetStoreContext.Provider, { value: assetStore, children: [mediaSchema.description && !error &&
+                        (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: mediaSchema.description }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsxs)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: [(0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: field.nameField, autoFocus: true }), renderFields({ field })] }) })] }) }) }));
+});
+function renderFields(args) {
+    // render image fields
+    const value = args.field.value;
+    if (funnel_ui_1.Media.Value.isImage(value)) {
+        return renderImageFields(args);
+    }
+    // or video fields
+    else {
+        return renderVideoFields(args);
+    }
+}
+function renderImageFields({ field }) {
+    // resolve fields
+    const desktopImageField = field.getField('image');
+    const mobileImageField = field.getField('mobileImage');
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: desktopImageField, disableDelete: true }), mobileImageField.exists
+                ? (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: mobileImageField })
+                : (0, jsx_runtime_1.jsx)(OptInField_1.OptInField, { className: "self-start", field: mobileImageField })] }));
+}
+function renderVideoFields({ field }) {
+    var _a, _b;
+    // resolve fields
+    const sourceField = field.getField('video');
+    const localVideoField = sourceField.getField('local');
+    const localVideo = (_a = localVideoField.value) === null || _a === void 0 ? void 0 : _a.value;
+    const remoteVideoField = sourceField.getField('remote');
+    const remoteVideo = (_b = remoteVideoField.value) === null || _b === void 0 ? void 0 : _b.value;
+    const coverField = field.getField('cover');
+    // TODO render error if there's no video source
+    if (!localVideo && !remoteVideo) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: localVideo
+                    ? localVideoField
+                    : remoteVideoField, disableDelete: true }), coverField.exists
+                ? (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: coverField })
+                : (0, jsx_runtime_1.jsx)(OptInField_1.OptInField, { className: "self-start", field: coverField })] }));
+}

package/dist/core/components/fields/media/MediaPicker.d.ts

@@ -0,0 +1,15 @@
+import { Language, Schema } from '@nascentdigital/funnel-core';
+import { ICollection } from '../../../domain';
+export declare const MediaPicker: import("react").ForwardRefExoticComponent<MediaPicker.Props & import("react").RefAttributes<MediaPicker.Ref>>;
+export declare namespace MediaPicker {
+    type Props = {
+        language: Language;
+    };
+    interface Ref {
+        pick(options?: Options): Promise<Result>;
+    }
+    type Options = {
+        schema: Schema.CollectionField;
+    };
+    type Result = ICollection.Ref | undefined;
+}