@edifice.io/react 1.7.4-develop-pedago.20241211160712

package/dist/modules/multimedia/MediaLibrary/MediaLibraryContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+const MediaLibraryContext = /* @__PURE__ */ createContext(null);
+function useMediaLibraryContext() {
+  const context = useContext(MediaLibraryContext);
+  if (!context)
+    throw new Error("Innertabs compound components cannot be rendered outside the MediaLibrary component");
+  return context;
+}
+export {
+  MediaLibraryContext,
+  useMediaLibraryContext
+};

package/dist/modules/multimedia/MediaLibrary/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MediaLibrary } from './MediaLibrary';
+export * from './MediaLibrary';
+export type { InternalLinkTabResult } from './innertabs/InternalLink';

package/dist/modules/multimedia/MediaLibrary/innertabs/Audio.d.ts

@@ -0,0 +1 @@
+export declare const Audio: () => import("react/jsx-runtime").JSX.Element;

package/dist/modules/multimedia/MediaLibrary/innertabs/Audio.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import AudioRecorder from "../../AudioRecorder/AudioRecorder.js";
+const Audio = () => {
+  const {
+    setResult,
+    setPreSuccess,
+    visibility
+  } = useMediaLibraryContext(), ref = useRef(null);
+  return /* @__PURE__ */ jsx(AudioRecorder, { ref, onRecordUpdated: (recordURL) => {
+    recordURL ? (setResult(recordURL), setPreSuccess(() => ref.current.save)) : setResult();
+  }, onSaveSuccess: (audioRessource) => {
+    audioRessource && setResult(audioRessource);
+  }, hideSaveAction: !0, visibility });
+};
+export {
+  Audio
+};

package/dist/modules/multimedia/MediaLibrary/innertabs/ExternalLink.d.ts

@@ -0,0 +1,6 @@
+import { IExternalLink } from '../../Linker/ExternalLinker/ExternalLinker';
+export type ExternalLinkTabProps = {
+    multiNodeSelected?: boolean;
+    link?: Partial<IExternalLink>;
+};
+export declare const ExternalLink: ({ link, multiNodeSelected, }: ExternalLinkTabProps) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/multimedia/MediaLibrary/innertabs/ExternalLink.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import ExternalLinker from "../../Linker/ExternalLinker/ExternalLinker.js";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+const ExternalLink = ({
+  link,
+  multiNodeSelected = !1
+}) => {
+  const {
+    setResult
+  } = useMediaLibraryContext();
+  return /* @__PURE__ */ jsx(ExternalLinker, { link, onChange: (link2) => {
+    setResult(link2);
+  }, multiNodeSelected });
+};
+export {
+  ExternalLink
+};

package/dist/modules/multimedia/MediaLibrary/innertabs/Iframe.d.ts

@@ -0,0 +1 @@
+export declare const Iframe: () => import("react/jsx-runtime").JSX.Element;

package/dist/modules/multimedia/MediaLibrary/innertabs/Iframe.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import Embed from "../../Embed/Embed.js";
+const Iframe = () => {
+  const {
+    setResult
+  } = useMediaLibraryContext();
+  return /* @__PURE__ */ jsx(Embed, { onSuccess: (ressource) => {
+    ressource = ressource == null ? void 0 : ressource.replace(/<p /g, "<div ").replace(/\/p>/g, "/div>"), setResult(ressource);
+  } });
+};
+export {
+  Iframe
+};

package/dist/modules/multimedia/MediaLibrary/innertabs/InternalLink.d.ts

@@ -0,0 +1,11 @@
+import { ILinkedResource } from '@edifice.io/client';
+export type InternalLinkTabProps = {
+    target?: '_blank' | null;
+    appPrefix?: string | null;
+    resourceId?: string | null;
+};
+export type InternalLinkTabResult = {
+    target?: '_blank';
+    resources?: ILinkedResource[];
+};
+export declare const InternalLink: ({ target, resourceId, appPrefix, }: InternalLinkTabProps) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/multimedia/MediaLibrary/innertabs/InternalLink.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import InternalLinker from "../../Linker/InternalLinker/InternalLinker.js";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import useToggle from "../../../../hooks/useToggle/useToggle.js";
+import Checkbox from "../../../../components/Checkbox/Checkbox.js";
+const InternalLink = ({
+  target,
+  resourceId,
+  appPrefix
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    setResult,
+    setResultCounter,
+    appCode,
+    multiple
+  } = useMediaLibraryContext(), [isChecked, toggleChecked] = useToggle(target === "_blank"), [resources, setRessources] = useState([]), handleSelect = (resources2) => {
+    setRessources(resources2);
+  };
+  return useEffect(() => {
+    setResult({
+      target: isChecked ? "_blank" : void 0,
+      resources
+    }), resources && resources.length ? setResultCounter(resources.length) : setResultCounter(void 0);
+  }, [isChecked, resources]), /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill gap-16 overflow-hidden", children: [
+    /* @__PURE__ */ jsx(InternalLinker, { appCode, defaultAppCode: appPrefix, defaultResourceId: resourceId, onSelect: handleSelect, multiple }),
+    /* @__PURE__ */ jsx(Checkbox, { className: "align-items-center", checked: isChecked, label: t("bbm.linker.open.tab"), onChange: toggleChecked })
+  ] });
+};
+export {
+  InternalLink
+};

package/dist/modules/multimedia/MediaLibrary/innertabs/Upload.d.ts

@@ -0,0 +1 @@
+export declare const Upload: () => import("react/jsx-runtime").JSX.Element;

package/dist/modules/multimedia/MediaLibrary/innertabs/Upload.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import Dropzone from "../../../../components/Dropzone/Dropzone.js";
+import UploadFiles from "../../UploadFiles/UploadFiles.js";
+const acceptedTypes = (type) => {
+  const acceptedTypes2 = [];
+  switch (type) {
+    case "audio":
+      acceptedTypes2.push("audio/*");
+      break;
+    case "video":
+      acceptedTypes2.push("video/*");
+      break;
+    case "image":
+      acceptedTypes2.push("image/png"), acceptedTypes2.push("image/jpeg"), acceptedTypes2.push("image/webp"), acceptedTypes2.push("image/gif"), acceptedTypes2.push("image/avif");
+      break;
+  }
+  return acceptedTypes2;
+}, Upload = () => {
+  const {
+    type,
+    visibility,
+    multiple,
+    setResult,
+    setResultCounter,
+    setCancellable
+  } = useMediaLibraryContext(), handleOnFilesChange = (uploadedFiles) => {
+    uploadedFiles.length ? (setCancellable(uploadedFiles), setResultCounter(uploadedFiles.length), setResult(uploadedFiles)) : (setCancellable([]), setResultCounter(void 0), setResult(void 0));
+  };
+  return /* @__PURE__ */ jsx("div", { className: "py-8 flex-grow-1", children: /* @__PURE__ */ jsx(Dropzone, { multiple, accept: acceptedTypes(type ?? "embedder"), children: /* @__PURE__ */ jsx(UploadFiles, { onFilesChange: handleOnFilesChange, visibility }) }) });
+};
+export {
+  Upload
+};

package/dist/modules/multimedia/MediaLibrary/innertabs/Video.d.ts

@@ -0,0 +1 @@
+export declare const Video: () => import("react/jsx-runtime").JSX.Element;

package/dist/modules/multimedia/MediaLibrary/innertabs/Video.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import VideoRecorder from "../../VideoRecorder/VideoRecorder.js";
+const Video = () => {
+  const {
+    appCode,
+    setResult,
+    setPreSuccess
+  } = useMediaLibraryContext(), {
+    t
+  } = useTranslation(), ref = useRef(null), handleRecordUpdated = (recordUrl) => {
+    recordUrl ? (setResult(recordUrl), setPreSuccess(() => ref.current.save)) : setResult();
+  }, handleError = (err) => {
+    console.error(err);
+  };
+  return /* @__PURE__ */ jsx(VideoRecorder, { ref, appCode, caption: t("bbm.video.caption"), onRecordUpdated: handleRecordUpdated, onError: handleError, hideSaveAction: !0 });
+};
+export {
+  Video
+};

package/dist/modules/multimedia/MediaLibrary/innertabs/VideoEmbedder.d.ts

@@ -0,0 +1 @@
+export declare const VideoEmbedder: () => import("react/jsx-runtime").JSX.Element;

package/dist/modules/multimedia/MediaLibrary/innertabs/VideoEmbedder.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import VideoEmbed from "../../VideoEmbed/VideoEmbed.js";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+const VideoEmbedder = () => {
+  const {
+    switchType,
+    setResult
+  } = useMediaLibraryContext();
+  return /* @__PURE__ */ jsx(VideoEmbed, { switchType, onSuccess: (ressource) => {
+    setResult(ressource);
+  } });
+};
+export {
+  VideoEmbedder
+};

package/dist/modules/multimedia/MediaLibrary/innertabs/Workspace.d.ts

@@ -0,0 +1 @@
+export declare const Workspace: () => import("react/jsx-runtime").JSX.Element;

package/dist/modules/multimedia/MediaLibrary/innertabs/Workspace.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import Workspace$1 from "../../Workspace/Workspace.js";
+const Workspace = () => {
+  const {
+    type,
+    setResultCounter,
+    setResult,
+    multiple,
+    visibility
+  } = useMediaLibraryContext();
+  function getDocumentRoleFilter() {
+    switch (type) {
+      case "image":
+        return "img";
+      case "audio":
+        return "audio";
+      case "video":
+        return "video";
+      default:
+        return null;
+    }
+  }
+  function handleSelect(result) {
+    setResultCounter(result.length), result.length ? setResult(result) : setResult();
+  }
+  return /* @__PURE__ */ jsx(Workspace$1, { roles: getDocumentRoleFilter(), onSelect: handleSelect, multiple, className: "border rounded overflow-y-auto", defaultFolder: visibility, showPublicFolder: visibility === "public" });
+};
+export {
+  Workspace
+};

package/dist/modules/multimedia/MediaLibrary/innertabs/index.d.ts

@@ -0,0 +1,10 @@
+export declare const InnerTabs: {
+    Audio: () => import("react/jsx-runtime").JSX.Element;
+    Video: () => import("react/jsx-runtime").JSX.Element;
+    Upload: () => import("react/jsx-runtime").JSX.Element;
+    ExternalLink: ({ link, multiNodeSelected, }: import('./ExternalLink').ExternalLinkTabProps) => import("react/jsx-runtime").JSX.Element;
+    Workspace: () => import("react/jsx-runtime").JSX.Element;
+    InternalLink: ({ target, resourceId, appPrefix, }: import('./InternalLink').InternalLinkTabProps) => import("react/jsx-runtime").JSX.Element;
+    Iframe: () => import("react/jsx-runtime").JSX.Element;
+    VideoEmbedder: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/modules/multimedia/MediaLibrary/innertabs/index.js

@@ -0,0 +1,21 @@
+import { Audio } from "./Audio.js";
+import { ExternalLink } from "./ExternalLink.js";
+import { Iframe } from "./Iframe.js";
+import { InternalLink } from "./InternalLink.js";
+import { Upload } from "./Upload.js";
+import { Video } from "./Video.js";
+import { VideoEmbedder } from "./VideoEmbedder.js";
+import { Workspace } from "./Workspace.js";
+const InnerTabs = {
+  Audio,
+  Video,
+  Upload,
+  ExternalLink,
+  Workspace,
+  InternalLink,
+  Iframe,
+  VideoEmbedder
+};
+export {
+  InnerTabs
+};

package/dist/modules/multimedia/UploadCard/UploadCard._.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as UploadCard } from './UploadCard';
+declare const meta: Meta<typeof UploadCard>;
+export default meta;
+type Story = StoryObj<typeof UploadCard>;
+export declare const Base: Story;
+export declare const IsLoading: Story;
+export declare const IsSuccess: Story;
+export declare const IsError: Story;

package/dist/modules/multimedia/UploadCard/UploadCard.d.ts

@@ -0,0 +1,43 @@
+import { CardProps } from '../../../components';
+import { Status } from '../../../types';
+export interface UploadItemProps {
+    /**
+     * File's image
+     * */
+    src: string;
+    /**
+     * File's name
+     * */
+    name: string;
+    /**
+     * File's info
+     * */
+    info?: {
+        type: string;
+        weight: string;
+    };
+}
+export interface UploadCardProps extends CardProps {
+    /**
+     * UploadItemProps
+     * */
+    item: UploadItemProps;
+    /**
+     * idle, loading, success, warning, error
+     * */
+    status?: Status;
+    /**
+     * Delete callback
+     * */
+    onDelete?: () => void;
+    /**
+     * Edit callback
+     * */
+    onEdit?: () => void;
+    /**
+     * Retry callback
+     * */
+    onRetry?: () => void;
+}
+declare const UploadCard: ({ item, status, isClickable, isSelectable, onDelete, onEdit, onRetry, }: UploadCardProps) => import("react/jsx-runtime").JSX.Element;
+export default UploadCard;

package/dist/modules/multimedia/UploadCard/UploadCard.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import commonPlaceholder from "@edifice.io/bootstrap/dist/images/common/image-placeholder.png";
+import { useTranslation } from "react-i18next";
+import SvgIconClose from "../../icons/components/IconClose.js";
+import SvgIconReset from "../../icons/components/IconReset.js";
+import SvgIconSuccessOutline from "../../icons/components/IconSuccessOutline.js";
+import SvgIconWand from "../../icons/components/IconWand.js";
+import Button from "../../../components/Button/Button.js";
+import Image from "../../../components/Image/Image.js";
+import Tooltip from "../../../components/Tooltip/Tooltip.js";
+import Loading from "../../../components/Loading/Loading.js";
+import Card from "../../../components/Card/Card.js";
+import IconButton from "../../../components/Button/IconButton.js";
+const UploadCard = ({
+  item,
+  status = "idle",
+  isClickable = !1,
+  isSelectable = !1,
+  onDelete,
+  onEdit,
+  onRetry
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    src,
+    name,
+    info
+  } = item, isIdle = status === "idle", isLoading = status === "loading", isSuccess = status === "success", isTypeImage = info == null ? void 0 : info.type.startsWith("image"), defaultMapping = {
+    text: "",
+    context: null,
+    image: /* @__PURE__ */ jsx("img", { src: commonPlaceholder, alt: "", width: "48", height: "48" })
+  }, mapping = {
+    error: {
+      text: /* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx("small", { className: "text-danger caption", children: t("tiptap.upload.error") }) }),
+      context: /* @__PURE__ */ jsx(Button, { leftIcon: /* @__PURE__ */ jsx(SvgIconReset, {}), variant: "ghost", color: "tertiary", onClick: onRetry, children: t("tiptap.upload.retry") }),
+      image: /* @__PURE__ */ jsx(Image, { alt: "", src: `${commonPlaceholder}/common/image-status-error.svg`, objectFit: "cover" })
+    },
+    idle: defaultMapping,
+    loading: {
+      text: "",
+      context: /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.loading"), placement: "top", children: /* @__PURE__ */ jsx(Loading, { isLoading: !0, loadingPosition: "left", className: "text-secondary" }) }),
+      image: defaultMapping.image
+    },
+    warning: defaultMapping,
+    success: {
+      text: /* @__PURE__ */ jsxs("em", { children: [
+        info == null ? void 0 : info.type,
+        " ",
+        (info == null ? void 0 : info.weight) && `- ${info.weight}`
+      ] }),
+      context: /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.loaded"), placement: "top", children: /* @__PURE__ */ jsx(SvgIconSuccessOutline, { className: "text-success" }) }),
+      image: /* @__PURE__ */ jsx(Image, { alt: "", src: src ?? "", width: "48", objectFit: "cover", className: "rounded", style: {
+        aspectRatio: 1 / 1
+      } })
+    },
+    unknown: defaultMapping
+  }, canEditItem = () => isTypeImage && /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.edit"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconWand, {}), variant: "ghost", "aria-label": t("tiptap.tooltip.upload.loading"), disabled: isLoading || !isSuccess, onClick: onEdit, color: "secondary" }) });
+  return /* @__PURE__ */ jsx(Card, { isClickable, isSelectable, className: "card-upload", children: /* @__PURE__ */ jsxs(Card.Body, { children: [
+    /* @__PURE__ */ jsx("div", { className: "card-image", children: mapping[status].image }),
+    /* @__PURE__ */ jsxs("div", { className: "text-truncate", children: [
+      /* @__PURE__ */ jsx(Card.Text, { children: name }),
+      /* @__PURE__ */ jsx(Card.Text, { className: "caption", children: mapping[status].text })
+    ] }),
+    !isIdle && /* @__PURE__ */ jsx("div", { className: "ms-auto", children: /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-12", children: [
+      mapping[status].context,
+      !isIdle && /* @__PURE__ */ jsx("div", { className: "vr" }),
+      canEditItem(),
+      /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.delete"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconClose, {}), variant: "ghost", "aria-label": t("tiptap.tooltip.upload.delete"), color: "tertiary", onClick: onDelete }) })
+    ] }) })
+  ] }) });
+};
+export {
+  UploadCard as default
+};

package/dist/modules/multimedia/UploadCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UploadCard } from './UploadCard';
+export * from './UploadCard';

package/dist/modules/multimedia/UploadFiles/UploadFiles.d.ts

@@ -0,0 +1,9 @@
+import { WorkspaceElement, WorkspaceVisibility } from '@edifice.io/client';
+declare const UploadFiles: {
+    ({ onFilesChange, visibility, }: {
+        onFilesChange: (uploadedFiles: WorkspaceElement[]) => void;
+        visibility?: WorkspaceVisibility;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default UploadFiles;

package/dist/modules/multimedia/UploadFiles/UploadFiles.js

@@ -0,0 +1,56 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { customSize } from "@edifice.io/utilities";
+import { useRef, useEffect } from "react";
+import useUploadFiles from "../../../hooks/useUploadFiles/useUploadFiles.js";
+import UploadCard from "../UploadCard/UploadCard.js";
+import ImageEditor from "../ImageEditor/components/ImageEditor.js";
+const UploadFiles = ({
+  onFilesChange,
+  visibility = "protected"
+}) => {
+  const {
+    files,
+    uploadedFiles,
+    getUploadStatus,
+    uploadFile,
+    removeFile,
+    updateImage,
+    editingImage,
+    setEditingImage,
+    getUrl
+  } = useUploadFiles({
+    handleOnChange: onFilesChange,
+    application: "media-library",
+    visibility
+  }), fileBlobs = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const blobs = fileBlobs.current;
+    return () => {
+      blobs.forEach((url) => URL.revokeObjectURL(url)), blobs.clear();
+    };
+  }, []);
+  const renderItem = (file) => {
+    const src = file.type.startsWith("image") ? fileBlobs.current.get(file.name) : "";
+    return fileBlobs.current.has(file.name) || fileBlobs.current.set(file.name, URL.createObjectURL(file)), {
+      name: file.name,
+      info: {
+        type: file.type,
+        weight: customSize(file.size || 0, 1)
+      },
+      src
+    };
+  }, handleRemoveFile = (file) => {
+    const blobUrl = fileBlobs.current.get(file.name);
+    blobUrl && (URL.revokeObjectURL(blobUrl), fileBlobs.current.delete(file.name)), removeFile(file);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    files.map((file) => {
+      const resource = uploadedFiles.find((uploadedFile) => uploadedFile.name === file.name);
+      return /* @__PURE__ */ jsx(UploadCard, { status: getUploadStatus(file), item: renderItem(file), onEdit: () => setEditingImage(resource), onRetry: () => uploadFile(file), onDelete: () => handleRemoveFile(file) }, file.name);
+    }),
+    editingImage && /* @__PURE__ */ jsx(ImageEditor, { altText: editingImage.alt, legend: editingImage.title, image: getUrl(editingImage, !0), isOpen: !!editingImage, onCancel: () => setEditingImage(void 0), onSave: updateImage, onError: console.error })
+  ] });
+};
+export {
+  UploadFiles as default
+};

package/dist/modules/multimedia/UploadFiles/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UploadFiles } from './UploadFiles';
+export * from './UploadFiles';

package/dist/modules/multimedia/VideoEmbed/VideoEmbed.d.ts

@@ -0,0 +1,6 @@
+export interface VideoEmbedProps {
+    switchType?: (type: 'embedder') => void;
+    onSuccess: (resource?: string) => void;
+}
+declare const VideoEmbed: ({ switchType, onSuccess }: VideoEmbedProps) => import("react/jsx-runtime").JSX.Element;
+export default VideoEmbed;

package/dist/modules/multimedia/VideoEmbed/VideoEmbed.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useId, useEffect } from "react";
+import { odeServices } from "@edifice.io/client";
+import { useDebounce } from "@uidotdev/usehooks";
+import { useTranslation } from "react-i18next";
+import SvgIconArrowRight from "../../icons/components/IconArrowRight.js";
+import SvgIconGlobe from "../../icons/components/IconGlobe.js";
+import illuError from "@edifice.io/bootstrap/dist/images/emptyscreen/illu-error.svg";
+import FormControl from "../../../components/Form/FormControl.js";
+import Input from "../../../components/Input/Input.js";
+import Image from "../../../components/Image/Image.js";
+import EmptyScreen from "../../../components/EmptyScreen/EmptyScreen.js";
+import Button from "../../../components/Button/Button.js";
+const VideoEmbed = ({
+  switchType,
+  onSuccess
+}) => {
+  const {
+    t
+  } = useTranslation(), [url, setUrl] = useState(), [embedVideo, setEmbedVideo] = useState(), [embedder, setEmbedder] = useState(void 0), [whiteListProvider, setWhiteListProvider] = useState(), debounceChangeUrl = useDebounce(url || "", 300), formControlId = useId();
+  useEffect(() => {
+    initWhiteListProvider();
+  }, []), useEffect(() => {
+    if (whiteListProvider && debounceChangeUrl) {
+      const embedderFound = odeServices.embedder().getProviderFromUrl(whiteListProvider, debounceChangeUrl);
+      if (embedderFound) {
+        setEmbedder(embedderFound);
+        const embedVideo2 = odeServices.embedder().getEmbedCodeForProvider(embedderFound, debounceChangeUrl);
+        setEmbedVideo(embedVideo2), onSuccess(embedVideo2);
+      } else
+        setEmbedder(void 0), onSuccess();
+    }
+  }, [debounceChangeUrl, whiteListProvider]);
+  const initWhiteListProvider = async () => {
+    const whiteListProviderResponse = await Promise.all([odeServices.embedder().getDefault(), odeServices.embedder().getCustom()]).then((results) => results.flat());
+    setWhiteListProvider(whiteListProviderResponse);
+  };
+  function handleUrlChange(event) {
+    const url2 = event.currentTarget.value;
+    setUrl(url2), onSuccess(url2 != null && url2.length ? url2 : void 0);
+  }
+  function handleSwitchToEmbedderClick() {
+    switchType == null || switchType("embedder");
+  }
+  const renderContent = () => debounceChangeUrl ? embedder ? /* @__PURE__ */ jsxs("div", { className: "mx-auto mt-16", children: [
+    /* @__PURE__ */ jsxs("div", { className: "video-embed-provider d-flex align-items-center", children: [
+      /* @__PURE__ */ jsx(Image, { src: embedder.logo, alt: "Logo " + embedder.displayName, className: "video-embed-provider-logo" }),
+      embedder.displayName
+    ] }),
+    embedVideo && /* @__PURE__ */ jsx("div", { className: "video-embed-preview mt-12", dangerouslySetInnerHTML: {
+      __html: embedVideo
+    } })
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column align-items-center m-16", children: [
+    /* @__PURE__ */ jsx(EmptyScreen, { imageSrc: illuError, title: t("bbm.video.previewError.title"), text: t("bbm.video.previewError.text") }),
+    switchType && /* @__PURE__ */ jsxs(Button, { variant: "ghost", color: "primary", onClick: handleSwitchToEmbedderClick, className: "align-items-start mt-16", children: [
+      t("bbm.video.useEmbedCode"),
+      " ",
+      /* @__PURE__ */ jsx(SvgIconArrowRight, {})
+    ] })
+  ] }) : switchType && /* @__PURE__ */ jsx("div", { className: "d-flex my-16 align-items-start", children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", color: "primary", onClick: handleSwitchToEmbedderClick, className: "align-items-start", children: [
+    t("bbm.video.useEmbedCode"),
+    " ",
+    /* @__PURE__ */ jsx(SvgIconArrowRight, {})
+  ] }) });
+  return /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill video-embed", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8 d-flex", children: [
+      /* @__PURE__ */ jsx(SvgIconGlobe, { className: "me-8" }),
+      t("bbm.video.url.title")
+    ] }),
+    /* @__PURE__ */ jsx(FormControl, { id: formControlId, children: /* @__PURE__ */ jsx(Input, { size: "md", type: "text", placeholder: t("bbm.video.url.placeholder"), onChange: handleUrlChange }) }),
+    /* @__PURE__ */ jsx(Fragment, { children: renderContent() })
+  ] });
+};
+export {
+  VideoEmbed as default
+};

package/dist/modules/multimedia/VideoEmbed/index.d.ts

@@ -0,0 +1 @@
+export { default as VideoEmbed } from './VideoEmbed';

package/dist/modules/multimedia/VideoRecorder/VideoRecorder.d.ts

@@ -0,0 +1,14 @@
+import { WorkspaceElement } from '@edifice.io/client';
+export interface VideoRecorderProps {
+    appCode: string;
+    caption?: string;
+    onSuccess?: (res: WorkspaceElement[]) => void;
+    onError: (error: string) => void;
+    onRecordUpdated?: (recordURL?: string) => void;
+    hideSaveAction?: boolean;
+}
+export interface VideoRecorderRef {
+    save: () => Promise<WorkspaceElement | undefined>;
+}
+declare const VideoRecorder: import('react').ForwardRefExoticComponent<VideoRecorderProps & import('react').RefAttributes<unknown>>;
+export default VideoRecorder;