@edifice.io/react 2.6.9-develop-enabling.20261013152718 → 2.6.9-develop.20261013171251

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

@@ -1 +1,68 @@
-import Flex from"../../../../components/Flex/Flex.js";import{useMediaLibraryContext}from"../MediaLibraryContext.js";import Dropzone from"../../../../components/Dropzone/Dropzone.js";import Radio from"../../../../components/Radio/Radio.js";import UploadFiles from"../../UploadFiles/UploadFiles.js";import{useEffect,useRef,useState}from"react";import{jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";var acceptedTypes=type=>{let acceptedTypes=[];switch(type){case`audio`:acceptedTypes.push(`audio/*`);break;case`video`:acceptedTypes.push(`video/*`);break;case`image`:acceptedTypes.push(`image/png`),acceptedTypes.push(`image/jpeg`),acceptedTypes.push(`image/webp`),acceptedTypes.push(`image/gif`),acceptedTypes.push(`image/avif`),acceptedTypes.push(`image/heic`);break;default:break}return acceptedTypes},orderUploadedFiles=(uploadedFiles,sourceFilesInfo,byAlpha)=>{let infoOf=element=>element._id?sourceFilesInfo[element._id]:void 0,nameOf=element=>infoOf(element)?.name??element.name,lastModifiedOf=element=>infoOf(element)?.lastModified??0;return byAlpha?[...uploadedFiles].sort((a,b)=>nameOf(a).localeCompare(nameOf(b),void 0,{numeric:!0})):[...uploadedFiles].sort((a,b)=>lastModifiedOf(b)-lastModifiedOf(a)).reverse()},Upload=()=>{let{t}=useTranslation(),{type,visibility,multiple,setResult,setResultCounter,setCancellable,setPreSuccess}=useMediaLibraryContext(),[sortByAlpha,setSortByAlpha]=useState(!0),[uploadedFiles,setUploadedFiles]=useState([]),sourceFilesInfoRef=useRef({});return useEffect(()=>{if(!multiple||!uploadedFiles.length){setPreSuccess(void 0);return}setPreSuccess(()=>()=>Promise.resolve(orderUploadedFiles(uploadedFiles,sourceFilesInfoRef.current,sortByAlpha)))},[multiple,uploadedFiles,sortByAlpha,setPreSuccess]),jsxs(`div`,{className:`flex-grow-1`,children:[multiple&&jsxs(Flex,{className:`mb-16 ms-8`,align:`start`,direction:`column`,gap:`8`,children:[jsxs(`div`,{children:[t(`bbm.upload.sort.title`),` :`]}),jsx(Radio,{label:t(`bbm.upload.sort.alpha`),name:`media-library-upload-sort`,value:`alpha`,model:sortByAlpha?`alpha`:`date`,checked:sortByAlpha,onChange:()=>setSortByAlpha(!0),"data-testid":`media-library-upload-sort-alpha`}),jsx(Radio,{label:t(`bbm.upload.sort.date`),name:`media-library-upload-sort`,value:`date`,model:sortByAlpha?`alpha`:`date`,checked:!sortByAlpha,onChange:()=>setSortByAlpha(!1),"data-testid":`media-library-upload-sort-date`})]}),jsx(Dropzone,{multiple,accept:acceptedTypes(type??`embedder`),children:jsx(UploadFiles,{onFilesChange:(uploadedFiles,sourceFilesInfo)=>{sourceFilesInfoRef.current=sourceFilesInfo,setUploadedFiles(uploadedFiles),uploadedFiles.length?(setCancellable(uploadedFiles),setResultCounter(uploadedFiles.length),setResult(uploadedFiles)):(setCancellable([]),setResultCounter(void 0),setResult(void 0))},visibility})})]})};export{Upload};
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import Flex from "../../../../components/Flex/Flex.js";
+import Radio from "../../../../components/Radio/Radio.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"), acceptedTypes2.push("image/heic");
+      break;
+  }
+  return acceptedTypes2;
+}, orderUploadedFiles = (uploadedFiles, sourceFilesInfo, byAlpha) => {
+  const infoOf = (element) => element._id ? sourceFilesInfo[element._id] : void 0, nameOf = (element) => {
+    var _a;
+    return ((_a = infoOf(element)) == null ? void 0 : _a.name) ?? element.name;
+  }, lastModifiedOf = (element) => {
+    var _a;
+    return ((_a = infoOf(element)) == null ? void 0 : _a.lastModified) ?? 0;
+  };
+  return byAlpha ? [...uploadedFiles].sort((a, b) => nameOf(a).localeCompare(nameOf(b), void 0, {
+    numeric: !0
+  })) : [...uploadedFiles].sort((a, b) => lastModifiedOf(b) - lastModifiedOf(a)).reverse();
+}, Upload = () => {
+  const {
+    t
+  } = useTranslation(), {
+    type,
+    visibility,
+    multiple,
+    setResult,
+    setResultCounter,
+    setCancellable,
+    setPreSuccess
+  } = useMediaLibraryContext(), [sortByAlpha, setSortByAlpha] = useState(!0), [uploadedFiles, setUploadedFiles] = useState([]), sourceFilesInfoRef = useRef({}), handleOnFilesChange = (uploadedFiles2, sourceFilesInfo) => {
+    sourceFilesInfoRef.current = sourceFilesInfo, setUploadedFiles(uploadedFiles2), uploadedFiles2.length ? (setCancellable(uploadedFiles2), setResultCounter(uploadedFiles2.length), setResult(uploadedFiles2)) : (setCancellable([]), setResultCounter(void 0), setResult(void 0));
+  };
+  return useEffect(() => {
+    if (!multiple || !uploadedFiles.length) {
+      setPreSuccess(void 0);
+      return;
+    }
+    setPreSuccess(() => () => Promise.resolve(orderUploadedFiles(uploadedFiles, sourceFilesInfoRef.current, sortByAlpha)));
+  }, [multiple, uploadedFiles, sortByAlpha, setPreSuccess]), /* @__PURE__ */ jsxs("div", { className: "flex-grow-1", children: [
+    multiple && /* @__PURE__ */ jsxs(Flex, { className: "mb-16 ms-8", align: "start", direction: "column", gap: "8", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        t("bbm.upload.sort.title"),
+        " :"
+      ] }),
+      /* @__PURE__ */ jsx(Radio, { label: t("bbm.upload.sort.alpha"), name: "media-library-upload-sort", value: "alpha", model: sortByAlpha ? "alpha" : "date", checked: sortByAlpha, onChange: () => setSortByAlpha(!0), "data-testid": "media-library-upload-sort-alpha" }),
+      /* @__PURE__ */ jsx(Radio, { label: t("bbm.upload.sort.date"), name: "media-library-upload-sort", value: "date", model: sortByAlpha ? "alpha" : "date", checked: !sortByAlpha, onChange: () => setSortByAlpha(!1), "data-testid": "media-library-upload-sort-date" })
+    ] }),
+    /* @__PURE__ */ jsx(Dropzone, { multiple, accept: acceptedTypes(type ?? "embedder"), children: /* @__PURE__ */ jsx(UploadFiles, { onFilesChange: handleOnFilesChange, visibility }) })
+  ] });
+};
+export {
+  Upload
+};

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

@@ -1 +1,22 @@
-import{useMediaLibraryContext}from"../MediaLibraryContext.js";import VideoRecorder from"../../VideoRecorder/VideoRecorder.js";import{useRef}from"react";import{jsx}from"react/jsx-runtime";import{useTranslation}from"react-i18next";var Video=()=>{let{appCode,setResult,setPreSuccess}=useMediaLibraryContext(),{t}=useTranslation(),ref=useRef(null);return jsx(VideoRecorder,{ref,appCode,caption:t(`bbm.video.caption`),onRecordUpdated:recordUrl=>{recordUrl?(setResult(recordUrl),setPreSuccess(()=>ref.current.save)):setResult()},onError:err=>{console.error(err)},hideSaveAction:!0})};export{Video};
+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.js

@@ -1 +1,15 @@
-import{useMediaLibraryContext}from"../MediaLibraryContext.js";import VideoEmbed from"../../VideoEmbed/VideoEmbed.js";import{jsx}from"react/jsx-runtime";var VideoEmbedder=()=>{let{switchType,setResult}=useMediaLibraryContext();return jsx(VideoEmbed,{switchType,onSuccess:ressource=>{setResult(ressource)}})};export{VideoEmbedder};
+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.js

@@ -1 +1,31 @@
-import{useMediaLibraryContext}from"../MediaLibraryContext.js";import Workspace$1 from"../../Workspace/Workspace.js";import{jsx}from"react/jsx-runtime";var Workspace=()=>{let{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 jsx(Workspace$1,{roles:getDocumentRoleFilter(),onSelect:handleSelect,multiple,className:`border rounded overflow-y-auto`,defaultFolder:visibility,showPublicFolder:visibility===`public`})};export{Workspace};
+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.js

@@ -1 +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";var InnerTabs={Audio,Video,Upload,ExternalLink,Workspace,InternalLink,Iframe,VideoEmbedder};export{InnerTabs};
+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.js

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

@@ -1 +1,56 @@
-import UploadCard from"../UploadCard/UploadCard.js";import useUploadFiles from"../../../hooks/useUploadFiles/useUploadFiles.js";import LoadingScreen from"../../../components/LoadingScreen/LoadingScreen.js";import{customSize}from"@edifice.io/utilities";import{Suspense,lazy,useEffect,useRef}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";var ImageEditor=lazy(async()=>await import(`../ImageEditor/components/ImageEditor.js`)),UploadFiles=({onFilesChange,visibility=`protected`})=>{let{files,uploadedFiles,getUploadStatus,uploadFile,removeFile,updateImage,editingImage,setEditingImage,getUrl}=useUploadFiles({handleOnChange:onFilesChange,application:`media-library`,visibility}),fileBlobs=useRef(new Map);useEffect(()=>{let blobs=fileBlobs.current;return()=>{blobs.forEach(url=>URL.revokeObjectURL(url)),blobs.clear()}},[]);let renderItem=file=>{let 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=>{let blobUrl=fileBlobs.current.get(file.name);blobUrl&&(URL.revokeObjectURL(blobUrl),fileBlobs.current.delete(file.name)),removeFile(file)};return jsxs(Fragment$1,{children:[files.map(file=>{let resource=uploadedFiles.find(uploadedFile=>uploadedFile.name===file.name);return jsx(UploadCard,{status:getUploadStatus(file),item:renderItem(file),onEdit:()=>setEditingImage(resource),onRetry:()=>uploadFile(file),onDelete:()=>handleRemoveFile(file)},file.name)}),editingImage&&jsx(Suspense,{fallback:jsx(LoadingScreen,{position:!1}),children: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};
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { customSize } from "@edifice.io/utilities";
+import { useRef, useEffect, Suspense, lazy } from "react";
+import useUploadFiles from "../../../hooks/useUploadFiles/useUploadFiles.js";
+import UploadCard from "../UploadCard/UploadCard.js";
+import LoadingScreen from "../../../components/LoadingScreen/LoadingScreen.js";
+const ImageEditor = /* @__PURE__ */ lazy(async () => await import("../ImageEditor/components/ImageEditor.js")), 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(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingScreen, { position: !1 }), children: /* @__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/VideoEmbed/VideoEmbed.js

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

@@ -1 +1,156 @@
-import SvgIconRecordVideo from"../../icons/components/IconRecordVideo.js";import SvgIconRecord from"../../icons/components/IconRecord.js";import{useCameras}from"./useCameras.js";import{VideoRecorderToolbar}from"./VideoRecorderToolbar.js";import useUpload from"../../../hooks/useUpload/useUpload.js";import Label from"../../../components/Label/Label.js";import FormControl from"../../../components/Form/FormControl.js";import LoadingScreen from"../../../components/LoadingScreen/LoadingScreen.js";import Select from"../../../components/Select/Select.js";import{convertMsToMS,getBestSupportedMimeType}from"@edifice.io/utilities";import{forwardRef,useCallback,useEffect,useImperativeHandle,useRef,useState}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";import{odeServices}from"@edifice.io/client";var VideoRecorder=forwardRef(({appCode,caption,onSuccess,onError,onRecordUpdated,hideSaveAction=!1},ref)=>{let{inputDevices,setPreferedDevice,restartStream,stream}=useCameras(),[maxDuration,setMaxDuration]=useState(18e4),[recording,setRecording]=useState(!1),[recorded,setRecorded]=useState(!1),[playing,setPlaying]=useState(!1),[saving,setSaving]=useState(!1),[saved,setSaved]=useState(!1),[mimeType,setMimeType]=useState(``),[recordedChunks,setRecordedChunks]=useState([]),[recordedVideo,setRecordedVideo]=useState(),[recordedTime,setRecordedTime]=useState(0),[playedTime,setPlayedTime]=useState(0),videoRef=useRef(null),recorderRef=useRef(null),{uploadBlob}=useUpload(void 0,appCode);useImperativeHandle(ref,()=>({save:handleSave}));let{t}=useTranslation();useEffect(()=>{initMaxDuration()},[]);async function initMaxDuration(){try{setMaxDuration((await odeServices.video().getVideoConf()).maxDuration*60*1e3)}catch{setMaxDuration(180*1e3)}}useEffect(()=>{try{videoRef.current&&(videoRef.current.src&&(window.URL.revokeObjectURL(videoRef.current.src),videoRef.current.src=``),videoRef.current.srcObject instanceof MediaStream&&(videoRef.current.srcObject=null),stream&&(videoRef.current.srcObject=stream,videoRef.current.autoplay=!0,videoRef.current.volume=1,videoRef.current.muted=!0,videoRef.current.load()))}catch(err){console.error(err)}},[stream]),useEffect(()=>{if(recordedChunks.length&&!recording&&videoRef.current){let finalVideo=new Blob(recordedChunks,{type:mimeType});setRecordedVideo(finalVideo),onRecordUpdated&&onRecordUpdated(window.URL.createObjectURL(finalVideo)),videoRef.current.autoplay=!1,videoRef.current.srcObject=null,videoRef.current.src=window.URL.createObjectURL(finalVideo)}},[recording,recordedChunks]),useEffect(()=>{if(recording){let startedAt=Date.now(),timer=window.setInterval(()=>setRecordedTime(Date.now()-startedAt),500);return()=>{window.clearInterval(timer)}}},[recording]),useEffect(()=>{if(playing){let timer=window.setInterval(()=>setPlayedTime(prev=>prev+500),500);return()=>{window.clearInterval(timer)}}},[playing]);let handleRecord=useCallback(()=>{setRecording(!0),videoRef&&videoRef.current&&(videoRef.current.muted=!0);let mimeType=getBestSupportedMimeType();setMimeType(mimeType),stream&&(recorderRef.current=new MediaRecorder(stream,{mimeType}),recorderRef.current.ondataavailable=({data})=>{data.size>0&&setRecordedChunks(prev=>[...prev,data])},recorderRef.current.onerror=event=>console.error(event),recorderRef.current.start(1e3))},[stream]),handleStop=useCallback(()=>{setRecording(!1),setRecorded(!0),recorderRef.current?.state===`recording`&&(recorderRef.current.requestData(),recorderRef.current.stop())},[recorderRef]),handlePlayPause=useCallback(()=>{videoRef&&videoRef.current&&(videoRef.current.muted=!1),playing?(videoRef?.current?.pause(),setPlaying(!1)):(videoRef?.current?.play(),setPlaying(!0))},[playing]),handleReset=()=>{setRecorded(!1),setRecording(!1),setPlaying(!1),setSaved(!1),setRecordedTime(0),setRecordedChunks([]),setRecordedVideo(void 0),restartStream(),onRecordUpdated&&onRecordUpdated()},handleSave=async()=>{if(videoRef?.current?.pause(),setSaving(!0),!recordedVideo){console.error(`Error while saving video: recorded video is undefined.`);return}let resVideo=await uploadBlob(recordedVideo,{duration:recordedTime});if(resVideo!=null)return onSuccess?.([resVideo]),setSaving(!1),setSaved(!0),[resVideo];onError(`Error while uploading video`),setSaving(!1),setSaved(!0)};return useEffect(()=>{recordedTime>=maxDuration&&handleStop()},[recordedTime,handleStop]),jsxs(`div`,{className:`video-recorder d-flex flex-fill flex-column align-items-center pb-8`,children:[jsx(`div`,{className:`video-recorder-caption d-none d-md-block`,children:caption}),inputDevices.length>1&&jsx(`div`,{className:`video-recorder-devices mb-12`,children:jsxs(FormControl,{id:`selectInputDevice`,children:[jsx(Label,{className:`d-none d-md-block`,children:t(`bbm.video.record.select.devices.label`)}),jsx(Select,{placeholderOption:t(`bbm.video.record.select.devices.placeholder`),options:inputDevices.map(videoInputDevice=>videoInputDevice.label),onValueChange:option=>{let selectedDevice=inputDevices.find(inputDevice=>inputDevice.label===option);recorderRef.current?.state===`recording`&&(recorderRef.current.requestData(),recorderRef.current.stop()),setPreferedDevice(selectedDevice)}})]})}),jsxs(`div`,{className:`video-recorder-video-container position-relative align-self-stretch`,children:[jsx(`video`,{ref:videoRef,playsInline:!0,autoPlay:!0,controls:!1,muted:!0,onEnded:()=>{setPlaying(!1),setPlayedTime(0),videoRef.current&&(videoRef.current.currentTime=0)},className:`rounded`,children:jsx(`track`,{default:!0,kind:`captions`,srcLang:`fr`,src:``})}),(recording||recorded)&&jsxs(`div`,{className:`video-recorder-time d-flex align-items-center font-monospace fs-6 text-bg-dark rounded`,children:[recording&&jsxs(Fragment$1,{children:[jsx(SvgIconRecord,{width:12,height:12,color:`red`,className:`me-4`}),jsxs(`span`,{children:[convertMsToMS(recordedTime),`/`,convertMsToMS(maxDuration)]})]}),recorded&&jsxs(Fragment$1,{children:[jsx(SvgIconRecordVideo,{width:14,height:14,className:`me-4`}),jsxs(`span`,{children:[convertMsToMS(playedTime),`/`,convertMsToMS(recordedTime)]})]})]}),stream&&jsx(VideoRecorderToolbar,{playing,recording,recorded,saving,saved,hideSaveAction,handleRecord,handleStop,handlePlayPause,handleReset,handleSave})]}),saving&&jsx(LoadingScreen,{position:!1,caption:t(`bbm.video.save.loader.caption`)})]})});export{VideoRecorder as default};
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useImperativeHandle, useEffect, useCallback } from "react";
+import { odeServices } from "@edifice.io/client";
+import { getBestSupportedMimeType, convertMsToMS } from "@edifice.io/utilities";
+import { useTranslation } from "react-i18next";
+import SvgIconRecordVideo from "../../icons/components/IconRecordVideo.js";
+import SvgIconRecord from "../../icons/components/IconRecord.js";
+import { useCameras } from "./useCameras.js";
+import { VideoRecorderToolbar } from "./VideoRecorderToolbar.js";
+import useUpload from "../../../hooks/useUpload/useUpload.js";
+import FormControl from "../../../components/Form/FormControl.js";
+import Label from "../../../components/Label/Label.js";
+import Select from "../../../components/Select/Select.js";
+import LoadingScreen from "../../../components/LoadingScreen/LoadingScreen.js";
+const VideoRecorder = /* @__PURE__ */ forwardRef(({
+  appCode,
+  caption,
+  onSuccess,
+  onError,
+  onRecordUpdated,
+  hideSaveAction = !1
+}, ref) => {
+  const {
+    inputDevices,
+    setPreferedDevice,
+    restartStream,
+    stream
+  } = useCameras(), [maxDuration, setMaxDuration] = useState(18e4), [recording, setRecording] = useState(!1), [recorded, setRecorded] = useState(!1), [playing, setPlaying] = useState(!1), [saving, setSaving] = useState(!1), [saved, setSaved] = useState(!1), [mimeType, setMimeType] = useState(""), [recordedChunks, setRecordedChunks] = useState([]), [recordedVideo, setRecordedVideo] = useState(), [recordedTime, setRecordedTime] = useState(0), [playedTime, setPlayedTime] = useState(0), videoRef = useRef(null), recorderRef = useRef(null), {
+    uploadBlob
+  } = useUpload(void 0, appCode);
+  useImperativeHandle(ref, () => ({
+    save: handleSave
+  }));
+  const {
+    t
+  } = useTranslation();
+  useEffect(() => {
+    initMaxDuration();
+  }, []);
+  async function initMaxDuration() {
+    try {
+      const videoConfResponse = await odeServices.video().getVideoConf();
+      setMaxDuration(videoConfResponse.maxDuration * 60 * 1e3);
+    } catch {
+      setMaxDuration(3 * 60 * 1e3);
+    }
+  }
+  useEffect(() => {
+    try {
+      videoRef.current && (videoRef.current.src && (window.URL.revokeObjectURL(videoRef.current.src), videoRef.current.src = ""), videoRef.current.srcObject instanceof MediaStream && (videoRef.current.srcObject = null), stream && (videoRef.current.srcObject = stream, videoRef.current.autoplay = !0, videoRef.current.volume = 1, videoRef.current.muted = !0, videoRef.current.load()));
+    } catch (err) {
+      console.error(err);
+    }
+  }, [stream]), useEffect(() => {
+    if (recordedChunks.length && !recording && videoRef.current) {
+      const finalVideo = new Blob(recordedChunks, {
+        type: mimeType
+      });
+      if (setRecordedVideo(finalVideo), onRecordUpdated) {
+        const videoUrl = window.URL.createObjectURL(finalVideo);
+        onRecordUpdated(videoUrl);
+      }
+      videoRef.current.autoplay = !1, videoRef.current.srcObject = null, videoRef.current.src = window.URL.createObjectURL(finalVideo);
+    }
+  }, [recording, recordedChunks]), useEffect(() => {
+    if (recording) {
+      const startedAt = Date.now(), timer = window.setInterval(
+        // Compute exact elapsed time by diffing the start time.
+        () => setRecordedTime(Date.now() - startedAt),
+        500
+      );
+      return () => {
+        window.clearInterval(timer);
+      };
+    }
+  }, [recording]), useEffect(() => {
+    if (playing) {
+      const timer = window.setInterval(() => setPlayedTime((prev) => prev + 500), 500);
+      return () => {
+        window.clearInterval(timer);
+      };
+    }
+  }, [playing]);
+  const handleRecord = useCallback(() => {
+    setRecording(!0), videoRef && videoRef.current && (videoRef.current.muted = !0);
+    const mimeType2 = getBestSupportedMimeType();
+    setMimeType(mimeType2), stream && (recorderRef.current = new MediaRecorder(stream, {
+      mimeType: mimeType2
+    }), recorderRef.current.ondataavailable = ({
+      data
+    }) => {
+      data.size > 0 && setRecordedChunks((prev) => [...prev, data]);
+    }, recorderRef.current.onerror = (event) => console.error(event), recorderRef.current.start(1e3));
+  }, [stream]), handleStop = useCallback(() => {
+    var _a;
+    setRecording(!1), setRecorded(!0), ((_a = recorderRef.current) == null ? void 0 : _a.state) === "recording" && (recorderRef.current.requestData(), recorderRef.current.stop());
+  }, [recorderRef]), handlePlayPause = useCallback(() => {
+    var _a, _b;
+    videoRef && videoRef.current && (videoRef.current.muted = !1), playing ? ((_b = videoRef == null ? void 0 : videoRef.current) == null || _b.pause(), setPlaying(!1)) : ((_a = videoRef == null ? void 0 : videoRef.current) == null || _a.play(), setPlaying(!0));
+  }, [playing]), handleReset = () => {
+    setRecorded(!1), setRecording(!1), setPlaying(!1), setSaved(!1), setRecordedTime(0), setRecordedChunks([]), setRecordedVideo(void 0), restartStream(), onRecordUpdated && onRecordUpdated();
+  }, handleSave = async () => {
+    var _a;
+    if ((_a = videoRef == null ? void 0 : videoRef.current) == null || _a.pause(), setSaving(!0), !recordedVideo) {
+      console.error("Error while saving video: recorded video is undefined.");
+      return;
+    }
+    const resVideo = await uploadBlob(recordedVideo, {
+      duration: recordedTime
+    });
+    if (resVideo != null)
+      return onSuccess == null || onSuccess([resVideo]), setSaving(!1), setSaved(!0), [resVideo];
+    onError("Error while uploading video"), setSaving(!1), setSaved(!0);
+  }, handleEnded = () => {
+    setPlaying(!1), setPlayedTime(0), videoRef.current && (videoRef.current.currentTime = 0);
+  }, handleInputDeviceChange = (option) => {
+    var _a;
+    const selectedDevice = inputDevices.find((inputDevice) => inputDevice.label === option);
+    ((_a = recorderRef.current) == null ? void 0 : _a.state) === "recording" && (recorderRef.current.requestData(), recorderRef.current.stop()), setPreferedDevice(selectedDevice);
+  };
+  return useEffect(() => {
+    recordedTime >= maxDuration && handleStop();
+  }, [recordedTime, handleStop]), /* @__PURE__ */ jsxs("div", { className: "video-recorder d-flex flex-fill flex-column align-items-center pb-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "video-recorder-caption d-none d-md-block", children: caption }),
+    inputDevices.length > 1 && /* @__PURE__ */ jsx("div", { className: "video-recorder-devices mb-12", children: /* @__PURE__ */ jsxs(FormControl, { id: "selectInputDevice", children: [
+      /* @__PURE__ */ jsx(Label, { className: "d-none d-md-block", children: t("bbm.video.record.select.devices.label") }),
+      /* @__PURE__ */ jsx(Select, { placeholderOption: t("bbm.video.record.select.devices.placeholder"), options: inputDevices.map((videoInputDevice) => videoInputDevice.label), onValueChange: handleInputDeviceChange })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "video-recorder-video-container position-relative align-self-stretch", children: [
+      /* @__PURE__ */ jsx("video", { ref: videoRef, playsInline: !0, autoPlay: !0, controls: !1, muted: !0, onEnded: handleEnded, className: "rounded", children: /* @__PURE__ */ jsx("track", { default: !0, kind: "captions", srcLang: "fr", src: "" }) }),
+      (recording || recorded) && /* @__PURE__ */ jsxs("div", { className: "video-recorder-time d-flex align-items-center font-monospace fs-6 text-bg-dark rounded", children: [
+        recording && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SvgIconRecord, { width: 12, height: 12, color: "red", className: "me-4" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            convertMsToMS(recordedTime),
+            "/",
+            convertMsToMS(maxDuration)
+          ] })
+        ] }),
+        recorded && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SvgIconRecordVideo, { width: 14, height: 14, className: "me-4" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            convertMsToMS(playedTime),
+            "/",
+            convertMsToMS(recordedTime)
+          ] })
+        ] })
+      ] }),
+      stream && /* @__PURE__ */ jsx(VideoRecorderToolbar, { playing, recording, recorded, saving, saved, hideSaveAction, handleRecord, handleStop, handlePlayPause, handleReset, handleSave })
+    ] }),
+    saving && /* @__PURE__ */ jsx(LoadingScreen, { position: !1, caption: t("bbm.video.save.loader.caption") })
+  ] });
+});
+export {
+  VideoRecorder as default
+};