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

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

@@ -1,68 +1 @@
-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
-};
+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};

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

@@ -1,22 +1 @@
-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
-};
+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};

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

@@ -1,15 +1 @@
-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
-};
+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};

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

@@ -1,31 +1 @@
-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
-};
+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};

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

@@ -1,21 +1 @@
-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
-};
+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};

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

@@ -1,75 +1 @@
-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
-};
+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};

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

@@ -1,56 +1 @@
-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
-};
+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};

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

@@ -1,76 +1 @@
-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
-};
+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};

package/dist/modules/multimedia/VideoRecorder/VideoRecorder.js

@@ -1,156 +1 @@
-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
-};
+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};