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

package/dist/modules/multimedia/AudioRecorder/useAudioRecorder.js

@@ -1 +1,314 @@
-import SvgIconLoader from"../../icons/components/IconLoader.js";import SvgIconPause from"../../icons/components/IconPause.js";import SvgIconPlayFilled from"../../icons/components/IconPlayFilled.js";import SvgIconRecordPause from"../../icons/components/IconRecordPause.js";import SvgIconRecord from"../../icons/components/IconRecord.js";import SvgIconRefresh from"../../icons/components/IconRefresh.js";import SvgIconRestart from"../../icons/components/IconRestart.js";import SvgIconSave from"../../icons/components/IconSave.js";import useWorkspaceFile from"../../../hooks/useWorkspaceFile/useWorkspaceFile.js";import{useCallback,useEffect,useReducer,useRef}from"react";import{jsx}from"react/jsx-runtime";import{useTranslation}from"react-i18next";function useAudioRecorder(onSaveSuccess,onUpdateRecord,hideSaveAction=!1,visibility=`protected`,application=`media-library`){function audioReducer(state,action){return{...state,...action.updatedState}}let[{recordState,playState,micStream,micStreamAudioSourceNode,audioWorkletNode,audioContext,encoderWorker,maxDuration,recordTime,isEncoding},dispatch]=useReducer(audioReducer,{recordState:`IDLE`,isEncoding:!1,playState:`IDLE`,recordTime:0,maxDuration:180}),audioNameRef=useRef(null),audioRef=useRef(null),leftChannelRef=useRef(),rightChannelRef=useRef(),{t}=useTranslation(),{create}=useWorkspaceFile(),DEFAULT_SAMPLE_RATE=48e3;useEffect(()=>{let encoderWorker=new Worker(`/infra/public/js/audioEncoder.js`);return dispatch({type:`update`,updatedState:{encoderWorker}}),encoderWorker.postMessage([`init`,audioContext?.sampleRate||DEFAULT_SAMPLE_RATE]),()=>{closeAudioStream(),encoderWorker.terminate()}},[]);let handleAudioWorkletNodeMessage=event=>{let leftChannel=event.data.inputs[0][0],rightChannel=event.data.inputs[0][1];(!rightChannel||rightChannel.filter(data=>data!==void 0).length===0)&&(rightChannel=leftChannel),leftChannelRef.current?.push(leftChannel),rightChannelRef.current?.push(rightChannel)},closeAudioStream=useCallback(()=>{micStream?.getTracks().forEach(track=>track.stop()),micStreamAudioSourceNode?.disconnect(),audioWorkletNode?.port.removeEventListener(`message`,handleAudioWorkletNodeMessage),audioWorkletNode?.port.close(),audioWorkletNode?.disconnect(),audioContext?.close()},[audioContext,audioWorkletNode,micStream,micStreamAudioSourceNode]),initRecording=async()=>{let micStream=await navigator.mediaDevices.getUserMedia({audio:!0}),audioContext=new AudioContext({sampleRate:DEFAULT_SAMPLE_RATE}),micStreamAudioSourceNode=audioContext.createMediaStreamSource(micStream);try{await audioContext.audioWorklet.addModule(`/infra/public/js/audio-recorder-processor.js`)}catch(err){console.error(err)}let audioWorkletNode=new AudioWorkletNode(audioContext,`audio-recorder-processor`);audioWorkletNode.port.addEventListener(`message`,handleAudioWorkletNodeMessage),dispatch({type:`update`,updatedState:{micStream,micStreamAudioSourceNode,audioContext,recordTime:0,audioWorkletNode,recordState:`RECORDING`,playState:`IDLE`}}),rightChannelRef.current=[],leftChannelRef.current=[],audioWorkletNode.port.start(),micStreamAudioSourceNode.connect(audioWorkletNode),audioWorkletNode.connect(audioContext.destination)},handleRecord=useCallback(async()=>{audioRef.current&&(audioRef.current.currentTime=0,audioRef.current.pause()),recordState===`PAUSED`?(dispatch({type:`update`,updatedState:{recordState:`RECORDING`,playState:`IDLE`}}),audioContext?.resume(),onUpdateRecord?.(void 0)):initRecording()},[recordState,audioContext,audioRef]),handleRecordPause=useCallback(()=>{dispatch({type:`update`,updatedState:{recordState:`PAUSED`,playState:`IDLE`,isEncoding:!0}}),audioContext?.suspend(),encoderWorker&&leftChannelRef.current&&rightChannelRef.current&&(encoderWorker.postMessage([`wav`,rightChannelRef.current,leftChannelRef.current,rightChannelRef.current.length*128]),encoderWorker.onmessage=event=>{let audioUrl=window.URL.createObjectURL(event.data);dispatch({type:`update`,updatedState:{isEncoding:!1}}),audioRef.current&&(audioRef.current.src=audioUrl),onUpdateRecord&&onUpdateRecord(audioUrl)})},[audioContext,encoderWorker,onUpdateRecord]),handlePlay=useCallback(()=>{dispatch({type:`update`,updatedState:{playState:`PLAYING`}}),(audioRef?.current?.currentTime||audioRef.current)&&audioRef.current.play()},[audioRef]),handlePlayPause=useCallback(()=>{audioRef?.current?.pause(),dispatch({type:`update`,updatedState:{playState:`PAUSED`}})},[audioRef]),handleReset=useCallback(()=>{closeAudioStream(),dispatch({type:`update`,updatedState:{playState:`IDLE`,recordState:`IDLE`}}),rightChannelRef.current=[],leftChannelRef.current=[],onUpdateRecord&&onUpdateRecord(void 0)},[closeAudioStream,onUpdateRecord]),handleSave=useCallback(async()=>{let audioName=audioNameRef.current?.value;if(!audioName){console.error(`Audio name is required`);return}return audioRef.current&&(audioRef.current.pause(),audioRef.current.currentTime=0),dispatch({type:`update`,updatedState:{recordState:`SAVING`,playState:`IDLE`}}),new Promise((resolve,reject)=>{try{encoderWorker&&leftChannelRef.current&&rightChannelRef.current&&(encoderWorker.postMessage([`mp3`,rightChannelRef.current,leftChannelRef.current,rightChannelRef.current.length*128]),encoderWorker.onmessage=async event=>{if(event.data instanceof Blob){let resourceAudio=await create(new File([event.data],audioName,{type:`audio/mp3`}),{application,visibility});resourceAudio&&onSaveSuccess&&onSaveSuccess(resourceAudio),dispatch({type:`update`,updatedState:{recordState:`SAVED`}}),resolve(resourceAudio)}})}catch(error){dispatch({type:`update`,updatedState:{playState:`IDLE`,recordState:`IDLE`}}),console.error(`Error while saving`,error),reject()}})},[recordState,onSaveSuccess,closeAudioStream]),handlePlayStop=useCallback(()=>{audioRef?.current&&(audioRef.current.pause(),audioRef.current.currentTime=0),dispatch({type:`update`,updatedState:{playState:`IDLE`}})},[audioRef]),handlePlayEnded=useCallback(()=>{dispatch({type:`update`,updatedState:{playState:`PAUSED`}}),audioRef.current&&(audioRef.current.currentTime=0)},[audioRef]);useEffect(()=>{if(recordState===`RECORDING`&&audioContext){let timer=window.setInterval(()=>{dispatch({type:`update`,updatedState:{recordTime:audioContext.currentTime}}),audioContext.currentTime>=maxDuration&&(handleRecordPause(),window.clearInterval(timer))},100);return()=>window.clearInterval(timer)}},[audioContext,handleRecordPause,maxDuration,recordState]);let recordText=t(recordState===`IDLE`?`bbm.audio.record.start`:`bbm.audio.record.resume`),toolbarItems=[{type:`icon`,name:`record`,visibility:recordState===`RECORDING`?`hide`:`show`,props:{icon:jsx(SvgIconRecord,{}),color:`danger`,disabled:recordState!==`IDLE`&&recordState!==`PAUSED`||recordTime>=maxDuration,onClick:handleRecord,"aria-label":recordText},tooltip:recordText},{type:`icon`,name:`recordPause`,visibility:recordState===`RECORDING`?`show`:`hide`,props:{icon:jsx(SvgIconRecordPause,{}),color:`danger`,disabled:recordState!==`RECORDING`,onClick:handleRecordPause,"aria-label":t(`bbm.audio.record.pause`)},tooltip:t(`bbm.audio.record.pause`)},{type:`divider`},{type:`icon`,name:`encoding`,visibility:isEncoding?`show`:`hide`,props:{icon:jsx(SvgIconLoader,{style:{animation:`loading 1s infinite`}}),disabled:!0}},{type:`icon`,name:`play`,visibility:isEncoding||playState===`PLAYING`?`hide`:`show`,props:{icon:jsx(SvgIconPlayFilled,{}),disabled:recordState!==`RECORDED`&&recordState!==`PAUSED`&&recordState!==`SAVED`,onClick:handlePlay,"aria-label":t(`bbm.audio.play.start`)},tooltip:t(`bbm.audio.play.start`)},{type:`icon`,name:`playPause`,visibility:!isEncoding&&playState===`PLAYING`?`show`:`hide`,props:{icon:jsx(SvgIconPause,{}),onClick:handlePlayPause,"aria-label":t(`bbm.audio.play.pause`)},tooltip:t(`bbm.audio.play.pause`)},{type:`icon`,name:`stop`,props:{icon:jsx(SvgIconRestart,{}),disabled:playState!==`PLAYING`&&playState!==`PAUSED`,onClick:handlePlayStop,"aria-label":t(`bbm.audio.play.stop`)},tooltip:t(`bbm.audio.play.stop`)},{type:`divider`},{type:`icon`,name:`reset`,props:{icon:jsx(SvgIconRefresh,{}),disabled:recordState!==`RECORDED`&&recordState!==`PAUSED`&&playState!==`PLAYING`&&playState!==`PAUSED`,onClick:handleReset,"aria-label":t(`bbm.audio.record.reset`)},tooltip:t(`bbm.audio.record.reset`)},{type:`icon`,name:`save`,visibility:hideSaveAction?`hide`:`show`,props:{icon:jsx(SvgIconSave,{}),disabled:recordState!==`RECORDED`&&recordState!==`PAUSED`&&playState!==`PLAYING`&&playState!==`PAUSED`||recordState===`SAVED`||!audioNameRef.current?.value,onClick:handleSave,"aria-label":t(`bbm.audio.record.save`)},tooltip:t(`bbm.audio.record.save`)}];return{recordState,playState,audioContext,recordTime:recordTime*1e3,maxDuration:maxDuration*1e3,audioRef,audioNameRef,toolbarItems,handlePlayEnded,handleSave}}export{useAudioRecorder as default};
+import { jsx } from "react/jsx-runtime";
+import { useReducer, useRef, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconLoader from "../../icons/components/IconLoader.js";
+import SvgIconPause from "../../icons/components/IconPause.js";
+import SvgIconPlayFilled from "../../icons/components/IconPlayFilled.js";
+import SvgIconRecordPause from "../../icons/components/IconRecordPause.js";
+import SvgIconRecord from "../../icons/components/IconRecord.js";
+import SvgIconRefresh from "../../icons/components/IconRefresh.js";
+import SvgIconRestart from "../../icons/components/IconRestart.js";
+import SvgIconSave from "../../icons/components/IconSave.js";
+import useWorkspaceFile from "../../../hooks/useWorkspaceFile/useWorkspaceFile.js";
+function useAudioRecorder(onSaveSuccess, onUpdateRecord, hideSaveAction = !1, visibility = "protected", application = "media-library") {
+  var _a;
+  function audioReducer(state, action) {
+    return {
+      ...state,
+      ...action.updatedState
+    };
+  }
+  const [{
+    recordState,
+    playState,
+    micStream,
+    micStreamAudioSourceNode,
+    audioWorkletNode,
+    audioContext,
+    encoderWorker,
+    maxDuration,
+    recordTime,
+    isEncoding
+  }, dispatch] = useReducer(audioReducer, {
+    recordState: "IDLE",
+    isEncoding: !1,
+    playState: "IDLE",
+    recordTime: 0,
+    maxDuration: 180
+    // max duration in s (3 minutes by default)
+  }), audioNameRef = useRef(null), audioRef = useRef(null), leftChannelRef = useRef(), rightChannelRef = useRef(), {
+    t
+  } = useTranslation(), {
+    create
+  } = useWorkspaceFile(), BUFFER_SIZE = 128, DEFAULT_SAMPLE_RATE = 48e3;
+  useEffect(() => {
+    const encoderWorker2 = new Worker("/infra/public/js/audioEncoder.js");
+    return dispatch({
+      type: "update",
+      updatedState: {
+        encoderWorker: encoderWorker2
+      }
+    }), encoderWorker2.postMessage(["init", (audioContext == null ? void 0 : audioContext.sampleRate) || DEFAULT_SAMPLE_RATE]), () => {
+      closeAudioStream(), encoderWorker2.terminate();
+    };
+  }, []);
+  const handleAudioWorkletNodeMessage = (event) => {
+    var _a2, _b;
+    const leftChannel = event.data.inputs[0][0];
+    let rightChannel = event.data.inputs[0][1];
+    (!rightChannel || rightChannel.filter((data) => data !== void 0).length === 0) && (rightChannel = leftChannel), (_a2 = leftChannelRef.current) == null || _a2.push(leftChannel), (_b = rightChannelRef.current) == null || _b.push(rightChannel);
+  }, closeAudioStream = useCallback(() => {
+    micStream == null || micStream.getTracks().forEach((track) => track.stop()), micStreamAudioSourceNode == null || micStreamAudioSourceNode.disconnect(), audioWorkletNode == null || audioWorkletNode.port.removeEventListener("message", handleAudioWorkletNodeMessage), audioWorkletNode == null || audioWorkletNode.port.close(), audioWorkletNode == null || audioWorkletNode.disconnect(), audioContext == null || audioContext.close();
+  }, [audioContext, audioWorkletNode, micStream, micStreamAudioSourceNode]), initRecording = async () => {
+    const micStream2 = await navigator.mediaDevices.getUserMedia({
+      audio: !0
+    }), audioContext2 = new AudioContext({
+      sampleRate: DEFAULT_SAMPLE_RATE
+    }), micStreamAudioSourceNode2 = audioContext2.createMediaStreamSource(micStream2);
+    try {
+      await audioContext2.audioWorklet.addModule("/infra/public/js/audio-recorder-processor.js");
+    } catch (err) {
+      console.error(err);
+    }
+    const audioWorkletNode2 = new AudioWorkletNode(audioContext2, "audio-recorder-processor");
+    audioWorkletNode2.port.addEventListener("message", handleAudioWorkletNodeMessage), dispatch({
+      type: "update",
+      updatedState: {
+        micStream: micStream2,
+        micStreamAudioSourceNode: micStreamAudioSourceNode2,
+        audioContext: audioContext2,
+        recordTime: 0,
+        audioWorkletNode: audioWorkletNode2,
+        recordState: "RECORDING",
+        playState: "IDLE"
+      }
+    }), rightChannelRef.current = [], leftChannelRef.current = [], audioWorkletNode2.port.start(), micStreamAudioSourceNode2.connect(audioWorkletNode2), audioWorkletNode2.connect(audioContext2.destination);
+  }, handleRecord = useCallback(async () => {
+    audioRef.current && (audioRef.current.currentTime = 0, audioRef.current.pause()), recordState === "PAUSED" ? (dispatch({
+      type: "update",
+      updatedState: {
+        recordState: "RECORDING",
+        playState: "IDLE"
+      }
+    }), audioContext == null || audioContext.resume(), onUpdateRecord == null || onUpdateRecord(void 0)) : initRecording();
+  }, [recordState, audioContext, audioRef]), handleRecordPause = useCallback(() => {
+    dispatch({
+      type: "update",
+      updatedState: {
+        recordState: "PAUSED",
+        playState: "IDLE",
+        isEncoding: !0
+      }
+    }), audioContext == null || audioContext.suspend(), encoderWorker && leftChannelRef.current && rightChannelRef.current && (encoderWorker.postMessage(["wav", rightChannelRef.current, leftChannelRef.current, rightChannelRef.current.length * BUFFER_SIZE]), encoderWorker.onmessage = (event) => {
+      const audioUrl = window.URL.createObjectURL(event.data);
+      dispatch({
+        type: "update",
+        updatedState: {
+          isEncoding: !1
+        }
+      }), audioRef.current && (audioRef.current.src = audioUrl), onUpdateRecord && onUpdateRecord(audioUrl);
+    });
+  }, [audioContext, encoderWorker, onUpdateRecord]), handlePlay = useCallback(() => {
+    var _a2;
+    dispatch({
+      type: "update",
+      updatedState: {
+        playState: "PLAYING"
+      }
+    }), ((_a2 = audioRef == null ? void 0 : audioRef.current) != null && _a2.currentTime || audioRef.current) && audioRef.current.play();
+  }, [audioRef]), handlePlayPause = useCallback(() => {
+    var _a2;
+    (_a2 = audioRef == null ? void 0 : audioRef.current) == null || _a2.pause(), dispatch({
+      type: "update",
+      updatedState: {
+        playState: "PAUSED"
+      }
+    });
+  }, [audioRef]), handleReset = useCallback(() => {
+    closeAudioStream(), dispatch({
+      type: "update",
+      updatedState: {
+        playState: "IDLE",
+        recordState: "IDLE"
+      }
+    }), rightChannelRef.current = [], leftChannelRef.current = [], onUpdateRecord && onUpdateRecord(void 0);
+  }, [closeAudioStream, onUpdateRecord]), handleSave = useCallback(async () => {
+    var _a2;
+    const audioName = (_a2 = audioNameRef.current) == null ? void 0 : _a2.value;
+    if (!audioName) {
+      console.error("Audio name is required");
+      return;
+    }
+    return audioRef.current && (audioRef.current.pause(), audioRef.current.currentTime = 0), dispatch({
+      type: "update",
+      updatedState: {
+        recordState: "SAVING",
+        playState: "IDLE"
+      }
+    }), new Promise((resolve, reject) => {
+      try {
+        encoderWorker && leftChannelRef.current && rightChannelRef.current && (encoderWorker.postMessage(["mp3", rightChannelRef.current, leftChannelRef.current, rightChannelRef.current.length * BUFFER_SIZE]), encoderWorker.onmessage = async (event) => {
+          if (event.data instanceof Blob) {
+            const file = new File([event.data], audioName, {
+              type: "audio/mp3"
+            }), resourceAudio = await create(file, {
+              application,
+              visibility
+            });
+            resourceAudio && onSaveSuccess && onSaveSuccess(resourceAudio), dispatch({
+              type: "update",
+              updatedState: {
+                recordState: "SAVED"
+              }
+            }), resolve(resourceAudio);
+          }
+        });
+      } catch (error) {
+        dispatch({
+          type: "update",
+          updatedState: {
+            playState: "IDLE",
+            recordState: "IDLE"
+          }
+        }), console.error("Error while saving", error), reject();
+      }
+    });
+  }, [recordState, onSaveSuccess, closeAudioStream]), handlePlayStop = useCallback(() => {
+    audioRef != null && audioRef.current && (audioRef.current.pause(), audioRef.current.currentTime = 0), dispatch({
+      type: "update",
+      updatedState: {
+        playState: "IDLE"
+      }
+    });
+  }, [audioRef]), handlePlayEnded = useCallback(() => {
+    dispatch({
+      type: "update",
+      updatedState: {
+        playState: "PAUSED"
+      }
+    }), audioRef.current && (audioRef.current.currentTime = 0);
+  }, [audioRef]);
+  useEffect(() => {
+    if (recordState === "RECORDING" && audioContext) {
+      const timer = window.setInterval(
+        // Compute exact elapsed time by diffing the start time.
+        () => {
+          dispatch({
+            type: "update",
+            updatedState: {
+              recordTime: audioContext.currentTime
+            }
+          }), audioContext.currentTime >= maxDuration && (handleRecordPause(), window.clearInterval(timer));
+        },
+        100
+      );
+      return () => window.clearInterval(timer);
+    }
+  }, [audioContext, handleRecordPause, maxDuration, recordState]);
+  const recordText = t(recordState === "IDLE" ? "bbm.audio.record.start" : "bbm.audio.record.resume"), toolbarItems = [{
+    type: "icon",
+    name: "record",
+    visibility: recordState === "RECORDING" ? "hide" : "show",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconRecord, {}),
+      color: "danger",
+      disabled: recordState !== "IDLE" && recordState !== "PAUSED" || recordTime >= maxDuration,
+      onClick: handleRecord,
+      "aria-label": recordText
+    },
+    tooltip: recordText
+  }, {
+    type: "icon",
+    name: "recordPause",
+    visibility: recordState === "RECORDING" ? "show" : "hide",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconRecordPause, {}),
+      color: "danger",
+      disabled: recordState !== "RECORDING",
+      onClick: handleRecordPause,
+      "aria-label": t("bbm.audio.record.pause")
+    },
+    tooltip: t("bbm.audio.record.pause")
+  }, {
+    type: "divider"
+  }, {
+    type: "icon",
+    name: "encoding",
+    visibility: isEncoding ? "show" : "hide",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconLoader, { style: {
+        animation: "loading 1s infinite"
+      } }),
+      disabled: !0
+    }
+  }, {
+    type: "icon",
+    name: "play",
+    visibility: isEncoding || playState === "PLAYING" ? "hide" : "show",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconPlayFilled, {}),
+      disabled: recordState !== "RECORDED" && recordState !== "PAUSED" && recordState !== "SAVED",
+      onClick: handlePlay,
+      "aria-label": t("bbm.audio.play.start")
+    },
+    tooltip: t("bbm.audio.play.start")
+  }, {
+    type: "icon",
+    name: "playPause",
+    visibility: !isEncoding && playState === "PLAYING" ? "show" : "hide",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconPause, {}),
+      onClick: handlePlayPause,
+      "aria-label": t("bbm.audio.play.pause")
+    },
+    tooltip: t("bbm.audio.play.pause")
+  }, {
+    type: "icon",
+    name: "stop",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconRestart, {}),
+      disabled: playState !== "PLAYING" && playState !== "PAUSED",
+      onClick: handlePlayStop,
+      "aria-label": t("bbm.audio.play.stop")
+    },
+    tooltip: t("bbm.audio.play.stop")
+  }, {
+    type: "divider"
+  }, {
+    type: "icon",
+    name: "reset",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconRefresh, {}),
+      disabled: recordState !== "RECORDED" && recordState !== "PAUSED" && playState !== "PLAYING" && playState !== "PAUSED",
+      onClick: handleReset,
+      "aria-label": t("bbm.audio.record.reset")
+    },
+    tooltip: t("bbm.audio.record.reset")
+  }, {
+    type: "icon",
+    name: "save",
+    visibility: hideSaveAction ? "hide" : "show",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconSave, {}),
+      disabled: recordState !== "RECORDED" && recordState !== "PAUSED" && playState !== "PLAYING" && playState !== "PAUSED" || recordState === "SAVED" || !((_a = audioNameRef.current) != null && _a.value),
+      onClick: handleSave,
+      "aria-label": t("bbm.audio.record.save")
+    },
+    tooltip: t("bbm.audio.record.save")
+  }];
+  return {
+    recordState,
+    playState,
+    audioContext,
+    recordTime: recordTime * 1e3,
+    maxDuration: maxDuration * 1e3,
+    audioRef,
+    audioNameRef,
+    toolbarItems,
+    handlePlayEnded,
+    handleSave
+  };
+}
+export {
+  useAudioRecorder as default
+};

package/dist/modules/multimedia/Embed/Embed.js

@@ -1 +1,32 @@
-import SvgIconCode from"../../icons/components/IconCode.js";import FormControl from"../../../components/Form/FormControl.js";import TextArea from"../../../components/TextArea/TextArea.js";import{useState}from"react";import{jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";var Embed=({onSuccess})=>{let{t}=useTranslation(),[htmlContent,setHTMLContent]=useState();function handleContentChange(event){let HTMLContent=event.target.value;setHTMLContent(HTMLContent),HTMLContent?.length?onSuccess(HTMLContent):onSuccess()}return jsxs(`div`,{className:`d-flex flex-column flex-fill`,children:[jsx(`div`,{className:`mb-32`,children:t(`bbm.embed.description`)}),jsxs(`div`,{className:`mb-8 d-flex`,children:[jsx(SvgIconCode,{className:`me-8`}),t(`bbm.embed.title`)]}),jsx(FormControl,{id:`iframeContent`,children:jsx(TextArea,{size:`md`,height:`sm`,placeholder:t(`bbm.embed.placeholder`),onChange:handleContentChange})}),!!htmlContent?.length&&jsx(`div`,{className:`embed-preview mt-12`,dangerouslySetInnerHTML:{__html:htmlContent}}),!htmlContent?.length&&jsx(`div`,{className:`embed-preview mt-12 d-flex align-items-center justify-content-center bg-gray-300 text-black-50 rounded-3`,children:jsx(`strong`,{children:t(`bbm.embed.preview`)})})]})};export{Embed as default};
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconCode from "../../icons/components/IconCode.js";
+import FormControl from "../../../components/Form/FormControl.js";
+import TextArea from "../../../components/TextArea/TextArea.js";
+const Embed = ({
+  onSuccess
+}) => {
+  const {
+    t
+  } = useTranslation(), [htmlContent, setHTMLContent] = useState();
+  function handleContentChange(event) {
+    const HTMLContent = event.target.value;
+    setHTMLContent(HTMLContent), HTMLContent != null && HTMLContent.length ? onSuccess(HTMLContent) : onSuccess();
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-32", children: t("bbm.embed.description") }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8 d-flex", children: [
+      /* @__PURE__ */ jsx(SvgIconCode, { className: "me-8" }),
+      t("bbm.embed.title")
+    ] }),
+    /* @__PURE__ */ jsx(FormControl, { id: "iframeContent", children: /* @__PURE__ */ jsx(TextArea, { size: "md", height: "sm", placeholder: t("bbm.embed.placeholder"), onChange: handleContentChange }) }),
+    !!(htmlContent != null && htmlContent.length) && /* @__PURE__ */ jsx("div", { className: "embed-preview mt-12", dangerouslySetInnerHTML: {
+      __html: htmlContent
+    } }),
+    !(htmlContent != null && htmlContent.length) && /* @__PURE__ */ jsx("div", { className: "embed-preview mt-12 d-flex align-items-center justify-content-center bg-gray-300 text-black-50 rounded-3", children: /* @__PURE__ */ jsx("strong", { children: t("bbm.embed.preview") }) })
+  ] });
+};
+export {
+  Embed as default
+};

package/dist/modules/multimedia/FileCard/FileCard.js

@@ -1 +1,104 @@
-import SvgIconLandscape from"../../icons/components/IconLandscape.js";import SvgIconMic from"../../icons/components/IconMic.js";import SvgIconTextPage from"../../icons/components/IconTextPage.js";import SvgIconVideo from"../../icons/components/IconVideo.js";import useThumbnail from"../../../hooks/useThumbnail/useThumbnail.js";import FileIcon from"./FileIcon.js";import Card from"../../../components/Card/Card.js";import clsx$1 from"clsx";import{useRef}from"react";import{jsx,jsxs}from"react/jsx-runtime";import{DocumentHelper,odeServices}from"@edifice.io/client";var FileCard=({doc,isClickable=!0,isSelectable=!1,isSelected=!1,onClick,className,onSelect,isFocused,app,customIcon,customColor})=>{let ref=useRef(null),type=DocumentHelper.getRole(doc);function getRoleMap(type){if(customIcon!==void 0||customColor!==void 0)return{icon:customIcon||jsx(SvgIconTextPage,{width:22,height:22}),color:customColor||`bg-gray-300`,hasShadow:!1};let roleMappings={csv:{icon:`.CSV`,color:`bg-orange-200`},xls:{icon:`.XLS`,color:`bg-green-200`},doc:{icon:`.DOC`,color:`bg-blue-200`},txt:{icon:`.TXT`,color:`bg-blue-200`},pdf:{icon:`.PDF`,color:`bg-red-200`},audio:{icon:jsx(SvgIconMic,{width:22,height:22}),color:`bg-red-200`},ppt:{icon:`.PPT`,color:`bg-red-200`},img:{icon:jsx(SvgIconLandscape,{width:22,height:22}),color:`bg-green-200`},video:{icon:jsx(SvgIconVideo,{width:22,height:22}),color:`bg-purple-200`},zip:{icon:`.ZIP`,color:`bg-gray-300`},md:{icon:`.MD`,color:`bg-blue-200`},unknown:{icon:jsx(SvgIconTextPage,{width:22,height:22}),color:`bg-gray-300`}};return roleMappings[type]||roleMappings.unknown}let roleMap=getRoleMap(type??`unknown`),file=clsx$1(`file position-relative rounded`,roleMap?.color??`bg-yellow-200`),mediaSrc=doc.eType===`resource`?doc.thumbnail:type===`img`||type===`video`?odeServices.workspace().getThumbnailUrl(doc):null,hasThumbnail=useThumbnail(mediaSrc,{ref}),imageStyles=hasThumbnail&&{backgroundImage:`url(${mediaSrc})`,backgroundSize:`cover`};return jsx(Card,{className:clsx$1(`card-file`,className),isClickable,isSelectable,isSelected,onClick,app,isFocused,onSelect,children:jsxs(Card.Body,{space:`8`,children:[jsx(`div`,{ref,className:file,style:{aspectRatio:`16/10`,...imageStyles},children:type!==`img`||type===`img`&&!hasThumbnail?jsx(FileIcon,{type,roleMap}):null}),jsxs(`div`,{className:`mt-4`,children:[jsx(Card.Text,{children:doc.name}),jsx(Card.Text,{className:`text-black-50`,children:doc?.ownerName})]})]})})};export{FileCard as default};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { DocumentHelper, odeServices } from "@edifice.io/client";
+import clsx from "clsx";
+import SvgIconLandscape from "../../icons/components/IconLandscape.js";
+import SvgIconMic from "../../icons/components/IconMic.js";
+import SvgIconTextPage from "../../icons/components/IconTextPage.js";
+import SvgIconVideo from "../../icons/components/IconVideo.js";
+import FileIcon from "./FileIcon.js";
+import useThumbnail from "../../../hooks/useThumbnail/useThumbnail.js";
+import Card from "../../../components/Card/Card.js";
+const FileCard = ({
+  doc,
+  isClickable = !0,
+  isSelectable = !1,
+  isSelected = !1,
+  onClick,
+  className,
+  onSelect,
+  isFocused,
+  app,
+  customIcon,
+  customColor
+}) => {
+  const ref = useRef(null), type = DocumentHelper.getRole(doc);
+  function getRoleMap(type2) {
+    if (customIcon !== void 0 || customColor !== void 0)
+      return {
+        icon: customIcon || /* @__PURE__ */ jsx(SvgIconTextPage, { width: 22, height: 22 }),
+        color: customColor || "bg-gray-300",
+        hasShadow: !1
+      };
+    const roleMappings = {
+      csv: {
+        icon: ".CSV",
+        color: "bg-orange-200"
+      },
+      xls: {
+        icon: ".XLS",
+        color: "bg-green-200"
+      },
+      doc: {
+        icon: ".DOC",
+        color: "bg-blue-200"
+      },
+      txt: {
+        icon: ".TXT",
+        color: "bg-blue-200"
+      },
+      pdf: {
+        icon: ".PDF",
+        color: "bg-red-200"
+      },
+      audio: {
+        icon: /* @__PURE__ */ jsx(SvgIconMic, { width: 22, height: 22 }),
+        color: "bg-red-200"
+      },
+      ppt: {
+        icon: ".PPT",
+        color: "bg-red-200"
+      },
+      img: {
+        icon: /* @__PURE__ */ jsx(SvgIconLandscape, { width: 22, height: 22 }),
+        color: "bg-green-200"
+      },
+      video: {
+        icon: /* @__PURE__ */ jsx(SvgIconVideo, { width: 22, height: 22 }),
+        color: "bg-purple-200"
+      },
+      zip: {
+        icon: ".ZIP",
+        color: "bg-gray-300"
+      },
+      md: {
+        icon: ".MD",
+        color: "bg-blue-200"
+      },
+      unknown: {
+        icon: /* @__PURE__ */ jsx(SvgIconTextPage, { width: 22, height: 22 }),
+        color: "bg-gray-300"
+      }
+    };
+    return roleMappings[type2] || roleMappings.unknown;
+  }
+  const roleMap = getRoleMap(type ?? "unknown"), file = clsx("file position-relative rounded", (roleMap == null ? void 0 : roleMap.color) ?? "bg-yellow-200"), mediaSrc = doc.eType === "resource" ? doc.thumbnail : type === "img" || type === "video" ? odeServices.workspace().getThumbnailUrl(doc) : null, hasThumbnail = useThumbnail(mediaSrc, {
+    ref
+  }), imageStyles = hasThumbnail && {
+    backgroundImage: `url(${mediaSrc})`,
+    backgroundSize: "cover"
+  };
+  return /* @__PURE__ */ jsx(Card, { className: clsx("card-file", className), isClickable, isSelectable, isSelected, onClick, app, isFocused, onSelect, children: /* @__PURE__ */ jsxs(Card.Body, { space: "8", children: [
+    /* @__PURE__ */ jsx("div", { ref, className: file, style: {
+      aspectRatio: "16/10",
+      ...imageStyles
+    }, children: type !== "img" || type === "img" && !hasThumbnail ? /* @__PURE__ */ jsx(FileIcon, { type, roleMap }) : null }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx(Card.Text, { children: doc.name }),
+      /* @__PURE__ */ jsx(Card.Text, { className: "text-black-50", children: doc == null ? void 0 : doc.ownerName })
+    ] })
+  ] }) });
+};
+export {
+  FileCard as default
+};

package/dist/modules/multimedia/FileCard/FileIcon.js

@@ -1 +1,15 @@
-import SvgIconPaperclip from"../../icons/components/IconPaperclip.js";import clsx$1 from"clsx";import{jsx}from"react/jsx-runtime";var FileIcon=({type,roleMap})=>jsx(`div`,{className:clsx$1(`position-absolute rounded-circle top-50 start-50 translate-middle`,{"p-12 rounded-circle shadow":typeof roleMap?.icon!=`string`&&type!==`unknown`&&roleMap?.hasShadow!==!1},roleMap?.color),children:roleMap?.icon??jsx(SvgIconPaperclip,{})});export{FileIcon as default};
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import SvgIconPaperclip from "../../icons/components/IconPaperclip.js";
+const FileIcon = ({
+  type,
+  roleMap
+}) => {
+  const hasShadow = typeof (roleMap == null ? void 0 : roleMap.icon) != "string" && type !== "unknown" && (roleMap == null ? void 0 : roleMap.hasShadow) !== !1, fileicon = clsx("position-absolute rounded-circle top-50 start-50 translate-middle", {
+    "p-12 rounded-circle shadow": hasShadow
+  }, roleMap == null ? void 0 : roleMap.color);
+  return /* @__PURE__ */ jsx("div", { className: fileicon, children: (roleMap == null ? void 0 : roleMap.icon) ?? /* @__PURE__ */ jsx(SvgIconPaperclip, {}) });
+};
+export {
+  FileIcon as default
+};

package/dist/modules/multimedia/ImageEditor/components/ImageEditor.js

@@ -1 +1,130 @@
-import Button from"../../../../components/Button/Button.js";import useImageEditor from"../hooks/useImageEditor.js";import ImageEditorToolbar from"./ImageEditorToolbar.js";import Modal from"../../../../components/Modal/Modal.js";import Input from"../../../../components/Input/Input.js";import Label from"../../../../components/Label/Label.js";import FormControl from"../../../../components/Form/FormControl.js";import LoadingScreen from"../../../../components/LoadingScreen/LoadingScreen.js";import{useCallback,useEffect,useRef,useState}from"react";import{jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";import*as PIXI from"pixi.js";var ImageEditor=({altText:altTextParam,legend:legendParam,image:imageSrc,isOpen,onCancel,onError,onSave})=>{let{t}=useTranslation(),[currentOperation,setCurrentOperation]=useState(void 0),[isSaving,setSaving]=useState(!1),[altText,setAltText]=useState(altTextParam??``),[legend,setLegend]=useState(legendParam??``),[dirty,setDirty]=useState(!1);useEffect(()=>{setAltText(altTextParam??``),setLegend(legendParam??``),setDirty(!1)},[altTextParam,legendParam]);let{toBlob,setApplication,startBlur,stopBlur,restore,rotate,startCrop,stopCrop,startResize,stopResize,historyCount,loading}=useImageEditor({imageSrc}),appRef=useRef(null),containerRef=useCallback(node=>{if(node&&!appRef.current){let app=new PIXI.Application;appRef.current=app,app.init({backgroundAlpha:0,resolution:1,preserveDrawingBuffer:!0}).then(()=>{appRef.current===app&&(node.appendChild(app.canvas),setApplication(app))}).catch(()=>{appRef.current===app&&(appRef.current=null)})}!node&&appRef.current&&(appRef.current.destroy(!0),appRef.current=null)},[setApplication]),stopAll=()=>{stopBlur(),stopCrop(currentOperation===`CROP`),stopResize(currentOperation===`RESIZE`)},handleSave=async()=>{try{setSaving(!0),stopAll();let blob=await toBlob();blob&&await onSave({blob,legend,altText})}catch(e){onError?.(`${e}`)}finally{setSaving(!1)}},handleCancel=()=>{onCancel()};return jsxs(Modal,{id:`image-editor`,isOpen,onModalClose:handleCancel,size:`lg`,children:[jsx(Modal.Header,{onModalClose:handleCancel,children:jsx(`span`,{className:`h2`,children:t(`imageeditor.title`)})}),jsx(Modal.Body,{className:`d-flex flex-column align-items-center`,children:jsxs(`div`,{className:`d-flex flex-column gap-12 w-100 flex-grow-1`,children:[jsx(ImageEditorToolbar,{handle:async operation=>{switch(stopAll(),setCurrentOperation(operation),setDirty(!0),operation){case`ROTATE`:await rotate();break;case`UNDO`:await restore();break;case`CROP`:startCrop();break;case`RESIZE`:await startResize();break;case`BLUR`:await startBlur();break}},historyCount}),jsxs(`div`,{className:`position-relative d-flex flex-column align-items-center justify-content-center flex-grow-1 w-100 image-editor`,children:[jsx(`div`,{ref:containerRef,className:`d-flex justify-content-center w-100`}),loading&&jsx(`div`,{className:`position-absolute top-0 start-0 bottom-0 end-0 m-10 d-flex align-items-center justify-content-center bg-black opacity-25`,children:jsx(LoadingScreen,{})})]}),jsxs(`div`,{className:`d-flex flex-column flex-md-row m-10 gap-12 w-100`,children:[jsxs(FormControl,{id:`alt`,className:`flex-grow-1`,children:[jsx(Label,{children:t(`alttext`)}),jsx(Input,{value:altText,onChange:e=>{setDirty(!0),setAltText(e.target.value)},placeholder:t(`alttext.help`),size:`md`,type:`text`})]}),jsxs(FormControl,{id:`legend`,className:`flex-grow-1`,children:[jsx(Label,{children:t(`legend`)}),jsx(Input,{value:legend,onChange:e=>{setDirty(!0),setLegend(e.target.value)},placeholder:t(`legend.help`),size:`md`,type:`text`})]})]})]})}),jsxs(Modal.Footer,{children:[jsx(Button,{color:`tertiary`,onClick:handleCancel,type:`button`,variant:`ghost`,children:t(`imageeditor.cancel`)}),jsx(Button,{color:`primary`,onClick:handleSave,type:`button`,variant:`filled`,isLoading:isSaving,disabled:isSaving||!dirty,children:t(`imageeditor.save`)})]})]})};export{ImageEditor as default};
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from "react";
+import * as PIXI from "pixi.js";
+import { useTranslation } from "react-i18next";
+import useImageEditor from "../hooks/useImageEditor.js";
+import ImageEditorToolbar from "./ImageEditorToolbar.js";
+import Modal from "../../../../components/Modal/Modal.js";
+import LoadingScreen from "../../../../components/LoadingScreen/LoadingScreen.js";
+import FormControl from "../../../../components/Form/FormControl.js";
+import Label from "../../../../components/Label/Label.js";
+import Input from "../../../../components/Input/Input.js";
+import Button from "../../../../components/Button/Button.js";
+const ImageEditor = ({
+  altText: altTextParam,
+  legend: legendParam,
+  image: imageSrc,
+  isOpen,
+  onCancel,
+  onError,
+  onSave
+}) => {
+  const {
+    t
+  } = useTranslation(), [currentOperation, setCurrentOperation] = useState(void 0), [isSaving, setSaving] = useState(!1), [altText, setAltText] = useState(altTextParam ?? ""), [legend, setLegend] = useState(legendParam ?? ""), [dirty, setDirty] = useState(!1);
+  useEffect(() => {
+    setAltText(altTextParam ?? ""), setLegend(legendParam ?? ""), setDirty(!1);
+  }, [altTextParam, legendParam]);
+  const {
+    toBlob,
+    setApplication,
+    startBlur,
+    stopBlur,
+    restore,
+    rotate,
+    startCrop,
+    stopCrop,
+    startResize,
+    stopResize,
+    historyCount,
+    loading
+  } = useImageEditor({
+    imageSrc
+  }), appRef = useRef(null), containerRef = useCallback((node) => {
+    if (node && !appRef.current) {
+      const app = new PIXI.Application();
+      appRef.current = app, app.init({
+        backgroundAlpha: 0,
+        resolution: 1,
+        preserveDrawingBuffer: !0
+      }).then(() => {
+        appRef.current === app && (node.appendChild(app.canvas), setApplication(app));
+      }).catch(() => {
+        appRef.current === app && (appRef.current = null);
+      });
+    }
+    !node && appRef.current && (appRef.current.destroy(!0), appRef.current = null);
+  }, [setApplication]), stopAll = () => {
+    stopBlur(), stopCrop(currentOperation === "CROP"), stopResize(currentOperation === "RESIZE");
+  }, handleSave = async () => {
+    try {
+      setSaving(!0), stopAll();
+      const blob = await toBlob();
+      blob && await onSave({
+        blob,
+        legend,
+        altText
+      });
+    } catch (e) {
+      onError == null || onError(`${e}`);
+    } finally {
+      setSaving(!1);
+    }
+  }, handleCancel = () => {
+    onCancel();
+  }, handleOperation = async (operation) => {
+    switch (stopAll(), setCurrentOperation(operation), setDirty(!0), operation) {
+      case "ROTATE": {
+        await rotate();
+        break;
+      }
+      case "UNDO": {
+        await restore();
+        break;
+      }
+      case "CROP": {
+        startCrop();
+        break;
+      }
+      case "RESIZE": {
+        await startResize();
+        break;
+      }
+      case "BLUR": {
+        await startBlur();
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(Modal, { id: "image-editor", isOpen, onModalClose: handleCancel, size: "lg", children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose: handleCancel, children: /* @__PURE__ */ jsx("span", { className: "h2", children: t("imageeditor.title") }) }),
+    /* @__PURE__ */ jsx(Modal.Body, { className: "d-flex flex-column align-items-center", children: /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column gap-12 w-100 flex-grow-1", children: [
+      /* @__PURE__ */ jsx(ImageEditorToolbar, { handle: handleOperation, historyCount }),
+      /* @__PURE__ */ jsxs("div", { className: "position-relative d-flex flex-column align-items-center justify-content-center flex-grow-1 w-100 image-editor", children: [
+        /* @__PURE__ */ jsx("div", { ref: containerRef, className: "d-flex justify-content-center w-100" }),
+        loading && /* @__PURE__ */ jsx("div", { className: "position-absolute top-0 start-0 bottom-0 end-0 m-10 d-flex align-items-center justify-content-center bg-black opacity-25", children: /* @__PURE__ */ jsx(LoadingScreen, {}) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-md-row m-10 gap-12 w-100", children: [
+        /* @__PURE__ */ jsxs(FormControl, { id: "alt", className: "flex-grow-1", children: [
+          /* @__PURE__ */ jsx(Label, { children: t("alttext") }),
+          /* @__PURE__ */ jsx(Input, { value: altText, onChange: (e) => {
+            setDirty(!0), setAltText(e.target.value);
+          }, placeholder: t("alttext.help"), size: "md", type: "text" })
+        ] }),
+        /* @__PURE__ */ jsxs(FormControl, { id: "legend", className: "flex-grow-1", children: [
+          /* @__PURE__ */ jsx(Label, { children: t("legend") }),
+          /* @__PURE__ */ jsx(Input, { value: legend, onChange: (e) => {
+            setDirty(!0), setLegend(e.target.value);
+          }, placeholder: t("legend.help"), size: "md", type: "text" })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: handleCancel, type: "button", variant: "ghost", children: t("imageeditor.cancel") }),
+      /* @__PURE__ */ jsx(Button, { color: "primary", onClick: handleSave, type: "button", variant: "filled", isLoading: isSaving, disabled: isSaving || !dirty, children: t("imageeditor.save") })
+    ] })
+  ] });
+};
+export {
+  ImageEditor as default
+};