@nascentdigital/funnel-editor 4.6.7 → 5.0.2

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

@@ -1,11 +1,21 @@
 "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.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");
@@ -21,22 +31,24 @@ 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 [uploading, setUploading] = (0, react_2.useState)(false);
     const [schema, setSchema] = (0, react_2.useState)();
-    const [anchor, setAnchor] = (0, react_2.useState)();
+    const [popupProps, setPopupProps] = (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 { nameField, descriptionField } = (0, useAssetFields_1.useAssetFields)();
     const [shared, setShared] = (0, react_2.useState)(false);
-    const editorApi = (0, client_1.useEditorApi)();
+    const assetRepo = (0, hooks_1.useAssetRepository)();
     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 }) => {
+        upload: async (_a) => {
+            var { schema } = _a, popupProps = __rest(_a, ["schema"]);
             // reset state
             setSchema(schema);
-            setAnchor(anchor);
+            setPopupProps(popupProps);
             setErrorLevel('none');
             setError(undefined);
             setShared(false);
@@ -56,9 +68,7 @@ exports.AssetUploader = (0, react_2.forwardRef)(function AssetUploader(_, ref) {
         // 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 = () => {
@@ -69,8 +79,7 @@ exports.AssetUploader = (0, react_2.forwardRef)(function AssetUploader(_, ref) {
         // check if level
         let valid = nameField.valid;
         if (valid && assetInfo.isVisual) {
-            valid = anchorField.valid &&
-                (!descriptionField.exists || descriptionField.valid);
+            valid = !descriptionField.exists || descriptionField.valid;
         }
         // update error level
         setErrorLevel('all');
@@ -86,11 +95,13 @@ exports.AssetUploader = (0, react_2.forwardRef)(function AssetUploader(_, ref) {
         }
         // handle upload
         try {
+            // start upload
+            setUploading(true);
             // create meta
-            const metadata = await getAssetMetadata({ assetInfo, anchorField, accessibleField });
+            const metadata = await getAssetMetadata({ assetInfo });
             console.debug('[AssetUploader/onUpload] uploading asset', { assetInfo, metadata });
             // upload new file
-            const uploadedFile = await editorApi.uploadFile({
+            const uploadedFile = await assetRepo.uploadFile({
                 file: assetInfo.file,
                 type: assetInfo.mimeType,
                 size: assetInfo.size,
@@ -115,6 +126,10 @@ exports.AssetUploader = (0, react_2.forwardRef)(function AssetUploader(_, ref) {
             console.error('[AssetUploader/upload] file upload failure', e);
             setError(feedback_1.ErrorMessage.getGenericError((e instanceof Error) ? e : new funnel_core_1.ServerError()));
         }
+        // clear uploading flag
+        finally {
+            setUploading(false);
+        }
     };
     const onCancel = () => {
         // set result (triggers uploader to close)
@@ -129,12 +144,12 @@ exports.AssetUploader = (0, react_2.forwardRef)(function AssetUploader(_, ref) {
         deferral.resolve(result !== null && result !== void 0 ? result : undefined);
     };
     // skip if we don't have any params
-    if (!deferral || !schema || !anchor) {
+    if (!deferral || !schema || !popupProps) {
         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 }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, Object.assign({ className: "flex flex-col gap-l8", title: "Upload Asset", open: result === undefined, canSave: onValidate, disableSave: !(assetInfo === null || assetInfo === void 0 ? void 0 : assetInfo.isValid), renderSaveLabel: () => 'Upload', customActions: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", iconLeft: "ImageDown", disabled: uploading, onClick: () => setResult('pick'), children: "Open Library" }), onSave: onUpload, onClose: onCancel, onClosed: onPickerClosed }, popupProps, { 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, descriptionField, shared, setShared, uploading }) }) })] })));
 });
 function getAssetOptions(schema) {
     // return empty options if there's no schema
@@ -158,52 +173,41 @@ function getAssetOptions(schema) {
     // normalize options
     return AssetInfo_1.AssetInfo.Options.normalize(options);
 }
-function renderAssetInfo({ assetInfo, nameField, anchorField, descriptionField, accessibleField, shared, setShared }) {
+function renderAssetInfo({ assetInfo, nameField, descriptionField, shared, setShared, uploading }) {
     // 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")
+        (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: nameField, disabled: uploading }, "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"));
+            ? (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: descriptionField, disabled: uploading }, "desc")
+            : (0, jsx_runtime_1.jsx)(OptInField_1.OptInField, { field: descriptionField, disabled: uploading }, "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"));
+    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, disabled: uploading, children: "Store in global media library" })] }, "fields"));
 }
-async function getAssetMetadata({ assetInfo, anchorField, accessibleField }) {
-    var _a;
+async function getAssetMetadata({ assetInfo }) {
     const { fileType, dimensions, blurHash } = assetInfo;
     switch (fileType) {
         case 'image':
             return {
-                crop: funnel_core_1.Schema.EnumField.Value.fromData(anchorField.value),
+                crop: 'center',
                 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),
+                crop: 'center',
                 dimensions,
                 blurHash,
-                accessible: accessible === 'system'
-                    ? 'system'
-                    : accessible === 'true'
+                accessible: 'system'
             };
         }
         default:

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

@@ -11,11 +11,13 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 // component
 function VideoPreview({ className, asset, active }) {
+    var _a;
     // 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 videoState = (_a = videoProxy === null || videoProxy === void 0 ? void 0 : videoProxy.state) !== null && _a !== void 0 ? _a : 'uninitialized';
     const blurCanvasRef = (0, react_1.useRef)(null);
     // decode blurhash (if any)
     (0, react_1.useEffect)(() => {
@@ -44,7 +46,10 @@ function VideoPreview({ className, asset, active }) {
         });
         // cancel on unmount
         return () => {
+            // mark cancelled
             cancelled = true;
+            // stop video (if required)
+            videoProxy.pause().catch(console.error);
         };
     }, [videoProxy]);
     // start/stop video when active
@@ -53,22 +58,22 @@ function VideoPreview({ className, asset, active }) {
         if (!videoProxy) {
             return;
         }
-        // start video
-        if (active) {
+        // or ignore if it's not ready (playing or paused)
+        else if (videoState !== 'ready' && videoState !== 'playing') {
+            return;
+        }
+        // start video if not playing
+        const playbackRate = active ? 1 : 0.33;
+        if (videoProxy.state !== 'playing') {
             videoProxy
-                .play({ playbackRate: 1, loop: true })
+                .play({ playbackRate, loop: true })
                 .catch(console.error);
         }
+        // or adjust speed
         else {
-            videoProxy
-                .pause()
-                .catch(console.error);
+            videoProxy.video.playbackRate = playbackRate;
         }
-        // stop on unmount
-        return () => {
-            videoProxy.pause().catch(console.error);
-        };
-    }, [videoProxy, active]);
+    }, [videoProxy, videoState, 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', {

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

@@ -1,20 +1,5 @@
-import { Position, Schema } from '@nascentdigital/funnel-core';
-export declare function useAssetFields(): import("../../..").TranslateSchema.Fields<{
+import { Schema } from '@nascentdigital/funnel-core';
+export declare function useAssetFields(): import("@nascentdigital/funnel-core").SchemaToFields<{
     nameField: Schema.TextField;
-    anchorField: Schema.EnumField<Schema.EnumField.Options<Position>>;
-    accessibleField: Schema.EnumField<{
-        system: {
-            name: string;
-            hint: string;
-        };
-        true: {
-            name: string;
-            hint: string;
-        };
-        false: {
-            name: string;
-            hint: string;
-        };
-    }>;
     descriptionField: Schema.TextField;
 }>;

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

@@ -9,27 +9,6 @@ function useAssetFields() {
         nameField: funnel_core_1.Schema.TextField.slug({
             name: 'Name'
         }),
-        anchorField: funnel_core_1.Schema.Field.enumeration({
-            name: 'Cropping',
-            options: funnel_core_1.Position.values.reduce((options, position) => {
-                // bind position
-                options[position] = {
-                    name: funnel_core_1.Position.getName(position)
-                };
-                // keep reducing
-                return options;
-            }, {}),
-            defaultOption: 'center',
-            required: true
-        }),
-        accessibleField: funnel_core_1.Schema.Field.enumeration({
-            name: 'Pause Button',
-            options: {
-                system: { name: 'Site Default', hint: `Use the default for the site (${funnel_core_1.AppConfig.get().accessible ? 'enabled' : 'disabled'})` },
-                true: { name: 'Enable', hint: 'A pause button will be included' },
-                false: { name: 'Disable', hint: 'There will be no way to pause the video' }
-            }
-        }),
         descriptionField: funnel_core_1.Schema.TextField.text({
             name: 'Alt Text',
             hint: 'What\'s happening in this visual?',

package/dist/core/components/fields/collection/CollectionEditor.d.ts

@@ -1,4 +1,5 @@
 import { Language, Schema } from '@nascentdigital/funnel-core';
+import { Popup } from '../../interaction';
 export declare const CollectionEditor: import("react").ForwardRefExoticComponent<CollectionEditor.Props & import("react").RefAttributes<CollectionEditor.Ref>>;
 export declare namespace CollectionEditor {
     type Props = {
@@ -7,7 +8,7 @@ export declare namespace CollectionEditor {
     interface Ref {
         edit(options: Options): Promise<Schema.Field.Data<Schema.CollectionField> | undefined>;
     }
-    type Options = {
+    type Options = Popup.Props.Delegated & {
         schema: Schema.CollectionField;
         collectionSchema: Schema.Collection;
         value?: Schema.CollectionField.Value;

package/dist/core/components/fields/collection/CollectionEditor.js

@@ -1,4 +1,15 @@
 "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.CollectionEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -21,6 +32,7 @@ exports.CollectionEditor = (0, react_1.forwardRef)(function CollectionEditor({ l
     const [schema, setSchema] = (0, react_1.useState)();
     const [collectionSchema, setCollectionSchema] = (0, react_1.useState)();
     const [initialValue, setInitialValue] = (0, react_1.useState)();
+    const [popupProps, setPopupProps] = (0, react_1.useState)();
     const [field, setField] = (0, react_1.useState)();
     const [shared, setShared] = (0, react_1.useState)(false);
     const page = (0, hooks_1.usePossiblePage)();
@@ -32,11 +44,13 @@ exports.CollectionEditor = (0, react_1.forwardRef)(function CollectionEditor({ l
     (0, hooks_1.useCollectionFieldProxy)(field);
     // export service
     (0, react_1.useImperativeHandle)(ref, () => ({
-        edit: async ({ schema, collectionSchema, value }) => {
+        edit: async (_a) => {
+            var { schema, collectionSchema, value } = _a, popupProps = __rest(_a, ["schema", "collectionSchema", "value"]);
             // reset state
             setSchema(schema);
             setCollectionSchema(collectionSchema);
             setInitialValue(value);
+            setPopupProps(popupProps);
             setField(undefined);
             setShared(false);
             // create deferral
@@ -69,8 +83,8 @@ exports.CollectionEditor = (0, react_1.forwardRef)(function CollectionEditor({ l
             setShared(!field.isNew && field.isRef);
         });
     }, [language, collectionRepository, collectionStore, schema, collectionSchema, initialValue]);
-    // skip if there's no schema
-    if (!schema || !collectionSchema) {
+    // skip if not ready
+    if (!schema || !collectionSchema || !popupProps) {
         return null;
     }
     // helpers
@@ -147,7 +161,7 @@ exports.CollectionEditor = (0, react_1.forwardRef)(function CollectionEditor({ l
                                     ? () => setShared(!shared)
                                     : undefined, children: shared ? 'Shared' : 'Unshared' }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", disabled: !field || !field.nameField.valid || !field.modified, onClick: onSave, children: !initialValue ? 'Create' : 'Update' })] }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: field
                             ?
-                                (0, jsx_runtime_1.jsxs)(transitions_1.FadeIn, { className: "flex flex-col gap-l7", children: [(0, jsx_runtime_1.jsx)(FieldsPanel_1.FieldsPanel, { className: "flex-1 px-l7", fields: field.allFields, autoFocus: true }), field.tagGroups.length > 0 &&
+                                (0, jsx_runtime_1.jsxs)(transitions_1.FadeIn, { className: "flex-1 flex flex-col gap-l10 px-l6 py-l10 overflow-y-scroll scrollbar-thin bg-background", children: [(0, jsx_runtime_1.jsx)(FieldsPanel_1.FieldsPanel, { className: "flex-1", fields: field.allFields, autoFocus: true }), field.tagGroups.length > 0 &&
                                             (0, jsx_runtime_1.jsx)("div", { className: "px-l7", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l8 p-l8 bg-surface1 rounded-md", children: [(0, jsx_runtime_1.jsx)("h2", { className: "display-xxs flex-1", children: "Tags" }), (0, jsx_runtime_1.jsx)(TagEditor_1.TagEditor, { className: "bg-surface2 p-l6 rounded-sm", tagged: field })] }) })] }, "fields")
                             :
                                 (0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "w-full h-full flex flex-col justify-center items-center", children: (0, jsx_runtime_1.jsx)(interaction_1.Loader, { size: "lg" }) }, "loader") })] }) }) }));

package/dist/core/components/fields/collection/CollectionPicker.d.ts

@@ -1,5 +1,5 @@
 import { Language, Schema } from '@nascentdigital/funnel-core';
-import { Collection } from '../../../domain';
+import { ICollection } from '../../../domain';
 export declare const CollectionPicker: import("react").ForwardRefExoticComponent<CollectionPicker.Props & import("react").RefAttributes<CollectionPicker.Ref>>;
 export declare namespace CollectionPicker {
     type Props = {
@@ -11,5 +11,5 @@ export declare namespace CollectionPicker {
     type Options = {
         schema: Schema.CollectionField;
     };
-    type Result = Collection.Ref | undefined;
+    type Result = ICollection.Ref | undefined;
 }

package/dist/core/components/fields/collection/CollectionPicker.js

@@ -9,7 +9,6 @@ const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
 const react_1 = require("react");
-const client_1 = require("../../../client");
 const hooks_1 = require("../../../hooks");
 const feedback_1 = require("../../feedback");
 const interaction_1 = require("../../interaction");
@@ -28,7 +27,7 @@ exports.CollectionPicker = (0, react_1.forwardRef)(function CollectionPicker({ l
     const [tagTooltip, setTagTooltip] = (0, react_1.useState)();
     const [fetching, setFetching] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)();
-    const editorApi = (0, client_1.useEditorApi)();
+    const collectionRepo = (0, hooks_1.useCollectionRepository)();
     const siteCollections = (0, hooks_1.useCollections)();
     const collectionStore = (0, hooks_1.useCollectionStore)();
     // export service
@@ -144,7 +143,7 @@ exports.CollectionPicker = (0, react_1.forwardRef)(function CollectionPicker({ l
         setTagTooltip(undefined);
         // fetch ref (or fail)
         const { template, id, name } = collectionRef;
-        const collection = await editorApi.getCollection({ id, version: 'draft' });
+        const collection = await collectionRepo.get({ id, version: 'draft' });
         if (!collection) {
             setFetching(false);
             setError({
@@ -173,7 +172,7 @@ exports.CollectionPicker = (0, react_1.forwardRef)(function CollectionPicker({ l
         deferral.resolve(result !== null && result !== void 0 ? result : undefined);
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { className: "flex", open: deferral && result === undefined, disableDismiss: fetching, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Select Collection" }), (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Site Collections", options: collectionGroups, selectedOptions: collectionGroup && [collectionGroup], onToggle: (collectionGroup, selected) => selected && setCollectionGroup(collectionGroup), renderLabel: collectionGroup => collectionGroup.template.name, disabled: fetching })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ language, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, disabled: fetching, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { className: "flex", open: deferral && result === undefined, disableDismiss: fetching, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Select Collection" }), (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Site Collections", options: collectionGroups, selectedOptions: collectionGroup && [collectionGroup], onToggle: (collectionGroup, selected) => selected && setCollectionGroup(collectionGroup), renderLabel: collectionGroup => collectionGroup.template.name, disabled: fetching })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ language, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, disabled: fetching, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
 });
 function renderPicker({ language, schema, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) {
     // show error if we have one

package/dist/core/components/fields/dynamicPages/PagePriorityDialog.js

@@ -50,7 +50,7 @@ exports.PagePriorityDialog = (0, react_1.forwardRef)(function CreatePageDialog({
         return;
     }
     // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { open: !!deferral, onClose: onClose, className: "flex", children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Priority Settings" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l6", children: [(0, jsx_runtime_1.jsx)("h2", { className: "label-sm label-strong text-content-tertiary", children: "Site Pages" }), (0, jsx_runtime_1.jsx)(feedback_1.Badge, { label: currentPage.name })] })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", children: currentPage.tags.map(group => (0, jsx_runtime_1.jsx)(TagGroup, { page: currentPage, group: group, state: pageTagState }, group.id)) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-l4 items-center p-l8 border-t border-solid border-border-l1", children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onReset, children: "Reset" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", onClick: onSave, children: "Save" })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { open: !!deferral, onClose: onClose, className: "flex", children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Priority Settings" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l6", children: [(0, jsx_runtime_1.jsx)("h2", { className: "label-sm label-strong text-content-tertiary", children: "Site Pages" }), (0, jsx_runtime_1.jsx)(feedback_1.Badge, { label: currentPage.name })] })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", tabIndex: -1, children: currentPage.tags.map(group => (0, jsx_runtime_1.jsx)(TagGroup, { page: currentPage, group: group, state: pageTagState }, group.id)) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-l4 items-center p-l8 border-t border-solid border-border-l1", children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onReset, children: "Reset" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", onClick: onSave, children: "Save" })] })] })] }));
 });
 var PageTagState;
 (function (PageTagState) {

package/dist/core/components/fields/embed/EmbeddedVideoEditor.d.ts

@@ -1,4 +1,5 @@
 import { Language, Schema } from '@nascentdigital/funnel-core';
+import { Popup } from '../../interaction';
 export declare const EmbeddedVideoEditor: import("react").ForwardRefExoticComponent<EmbeddedVideoEditor.Props & import("react").RefAttributes<EmbeddedVideoEditor.Ref>>;
 export declare namespace EmbeddedVideoEditor {
     type Props = {
@@ -7,9 +8,8 @@ export declare namespace EmbeddedVideoEditor {
     interface Ref {
         edit(options: Options): Promise<Schema.Field.Data<Schema.EmbeddedVideoField> | undefined>;
     }
-    type Options = {
+    type Options = Popup.Props.Delegated & {
         schema: Schema.EmbeddedVideoField;
         initialValue?: Schema.Field.Data<Schema.EmbeddedVideoField>;
-        anchor: string;
     };
 }

package/dist/core/components/fields/embed/EmbeddedVideoEditor.js

@@ -1,4 +1,15 @@
 "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 };
 };
@@ -14,7 +25,6 @@ const hooks_1 = require("../../../hooks");
 const feedback_1 = require("../../feedback");
 const interaction_1 = require("../../interaction");
 const visuals_1 = require("../../visuals");
-const FieldEditor_1 = require("../FieldEditor");
 const FieldErrorController_1 = require("../FieldErrorController");
 const TextField_1 = require("../TextField");
 // component
@@ -23,22 +33,15 @@ exports.EmbeddedVideoEditor = (0, react_1.forwardRef)(function EmbeddedVideoEdit
     const [deferral, setDeferral] = (0, react_1.useState)(undefined);
     const [schema, setSchema] = (0, react_1.useState)();
     const [initialValue, setInitialValue] = (0, react_1.useState)();
-    const [anchor, setAnchor] = (0, react_1.useState)();
+    const [popupProps, setPopupProps] = (0, react_1.useState)();
     const [state, setState] = (0, react_1.useState)('initializing');
     const touch = (0, client_1.useTouch)();
-    const { uriField, mutedField } = (0, hooks_1.useTempFields)({
+    const { uriField } = (0, hooks_1.useTempFields)({
         uriField: funnel_core_1.Schema.Field.uri({
             name: 'YouTube or Vimeo URL',
             hint: 'Enter video link',
             required: true
         }),
-        mutedField: funnel_core_1.Schema.Field.boolean({
-            name: 'Muted',
-            hint: 'Video starts off on mute',
-            semantics: 'toggle',
-            required: true,
-            defaultValue: true
-        })
     });
     const uri = uriField.valid
         ? funnel_core_1.Schema.TextField.Value.fromData(uriField.value)
@@ -48,12 +51,12 @@ exports.EmbeddedVideoEditor = (0, react_1.forwardRef)(function EmbeddedVideoEdit
     const video = video$.value;
     // export service
     (0, react_1.useImperativeHandle)(ref, () => ({
-        edit: async ({ schema, initialValue, anchor }) => {
-            var _a;
+        edit: async (_a) => {
+            var { schema, initialValue } = _a, popupProps = __rest(_a, ["schema", "initialValue"]);
             // reset state
             setSchema(schema);
             setInitialValue(initialValue);
-            setAnchor(anchor);
+            setPopupProps(popupProps);
             setState('initializing');
             // setup inputs
             const video = initialValue === null || initialValue === void 0 ? void 0 : initialValue.value;
@@ -61,14 +64,13 @@ exports.EmbeddedVideoEditor = (0, react_1.forwardRef)(function EmbeddedVideoEdit
             uriField.reset(video
                 ? funnel_core_1.Schema.TextField.Value.toData(funnel_core_1.Schema.EmbeddedVideoField.Value.toUrl(video).href)
                 : null);
-            mutedField.reset(funnel_core_1.Schema.BooleanField.Value.toData(schema.allowMuting ? (_a = video === null || video === void 0 ? void 0 : video.muted) !== null && _a !== void 0 ? _a : true : true));
             // create deferral
             const deferral = new funnel_core_1.Deferral();
             setDeferral(deferral);
             // wait until deferral is resolved
             return deferral.promise;
         }
-    }), [uriField, mutedField, video$]);
+    }), [uriField, video$]);
     // sync uri on change
     (0, react_1.useEffect)(() => {
         var _a;
@@ -100,7 +102,7 @@ exports.EmbeddedVideoEditor = (0, react_1.forwardRef)(function EmbeddedVideoEdit
                 return;
             }
             // or if there's already a thumb
-            else if (video.thumbUrl) {
+            else if (video.thumbUrl && video.dimensions.width && video.dimensions.height) {
                 setState('valid');
                 return;
             }
@@ -113,18 +115,28 @@ exports.EmbeddedVideoEditor = (0, react_1.forwardRef)(function EmbeddedVideoEdit
                 return;
             }
             // or fail if we couldn't get a thumbnail (means no video)
-            if (!thumbUrl) {
+            else if (!thumbUrl) {
                 setState('error');
+                return;
             }
-            // otherwise, update video with valid thumb
-            else {
-                // update video
-                video$.next(Object.assign(Object.assign({}, video), { thumbUrl: thumbUrl.href }));
-                // update state
-                setState('valid');
-                // touch (just in case we were already valid)
-                touch();
+            // get video dimensions
+            const dimensions = await getVideoThumbnailSize(thumbUrl.href);
+            console.debug('[EmbeddedVideoEditor] got video size as ', dimensions);
+            // skip if video has changed (debounced)
+            if (video$.value !== video) {
+                return;
             }
+            // or fail if we couldn't get dimensions (means no thumbnail)
+            else if (!dimensions || !dimensions.width || !dimensions.height) {
+                setState('error');
+                return;
+            }
+            // update video
+            video$.next(Object.assign(Object.assign({}, video), { dimensions, thumbUrl: thumbUrl.href }));
+            // update state
+            setState('valid');
+            // touch (just in case we were already valid)
+            touch();
         });
         // unsubscribe on unmount
         return () => subscription.unsubscribe();
@@ -134,14 +146,12 @@ exports.EmbeddedVideoEditor = (0, react_1.forwardRef)(function EmbeddedVideoEdit
         return state === 'valid';
     };
     const onSave = async () => {
-        var _a;
         // blow up if missing uri (should never happen)
         if (!video || state !== 'valid') {
             throw new funnel_core_1.IllegalStateError('Missing URI');
         }
         // resolve embed (we're done)
-        const muted = (_a = funnel_core_1.Schema.BooleanField.Value.fromData(mutedField.value)) !== null && _a !== void 0 ? _a : true;
-        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(funnel_core_1.Schema.EmbeddedVideoField.Value.toData(Object.assign(Object.assign({}, video), { muted })));
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(funnel_core_1.Schema.EmbeddedVideoField.Value.toData(Object.assign({}, video)));
         // refresh
         touch();
     };
@@ -156,9 +166,8 @@ exports.EmbeddedVideoEditor = (0, react_1.forwardRef)(function EmbeddedVideoEdit
         touch();
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, { title: `${initialValue ? 'Edit' : 'Add'} ${name}`, open: !!deferral && !deferral.isComplete, placement: "right", anchor: anchor, anchorOffset: 4, canSave: canSave, onSave: onSave, onClose: onCancel, disabled: false, children: [description &&
-                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: description }), renderPreview({ state, video }), (0, jsx_runtime_1.jsxs)(FieldErrorController_1.FieldErrorController, { errorLevel: "none", children: [(0, jsx_runtime_1.jsx)(TextField_1.TextField, { field: uriField }), (schema === null || schema === void 0 ? void 0 : schema.allowMuting) &&
-                        (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: mutedField })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, Object.assign({ title: `${initialValue ? 'Edit' : 'Add'} ${name}`, open: !!deferral && !deferral.isComplete, canSave: canSave, onSave: onSave, onClose: onCancel, disabled: state === 'validating' }, popupProps, { children: [description &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: description }), renderPreview({ state, video }), (0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: "none", children: (0, jsx_runtime_1.jsx)(TextField_1.TextField, { field: uriField }) })] })));
 });
 async function getVideoThumbnailUrl(video) {
     // skip if there's no video
@@ -207,6 +216,16 @@ async function getVideoThumbnailUrl(video) {
         return null;
     }
 }
+async function getVideoThumbnailSize(url) {
+    // get blob
+    const response = await fetch(url);
+    const blob = await response.blob();
+    // get image
+    const imageProxy = new funnel_core_1.BlobImageProxy(blob);
+    await imageProxy.waitUntilReady();
+    // return dimensions
+    return imageProxy.intrinsicSize;
+}
 function renderPreview({ state, video }) {
     // show loader if checking
     let content;

package/dist/core/components/fields/factories/AssetFactory.d.ts

@@ -1,10 +1,10 @@
 import { Callback, Schema } from '@nascentdigital/funnel-core';
-export declare function AssetFactory({ schema, assetId, anchor, onCommit, onCancel: onCancelRaw }: AssetFactory.Props): import("react/jsx-runtime").JSX.Element;
+import { Popup } from '../../interaction';
+export declare function AssetFactory({ schema, assetId, onCommit, onCancel: onCancelRaw, ...popupProps }: AssetFactory.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace AssetFactory {
-    type Props = {
+    type Props = Popup.Props.Delegated & {
         schema: Schema.AssetField;
         assetId?: Schema.Asset.Id;
-        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.AssetField>>;
         onCancel: Callback.Void;
     };